From ccb5b83c19b6b5d81fd1e46697e85ae53a257858 Mon Sep 17 00:00:00 2001 From: Jake Howell Date: Fri, 20 Feb 2026 12:55:02 +1100 Subject: [PATCH] feat: add animations to each `` (#22068) This pull-request implement animations for each of our `` (and a few other chevrons) so that everything is uniform with ``. --- .../components/AnimatedIcons/ChevronDown.tsx | 29 +++++++++ .../components/Autocomplete/Autocomplete.tsx | 11 ++-- site/src/components/Button/Button.tsx | 2 +- site/src/components/Combobox/Combobox.tsx | 3 +- .../DropdownArrow/DropdownArrow.stories.tsx | 16 ----- .../DropdownArrow/DropdownArrow.tsx | 19 ------ site/src/components/Expander/Expander.tsx | 65 ++++++------------- site/src/components/IconField/IconField.tsx | 4 +- .../MultiSelectCombobox.tsx | 8 ++- site/src/components/Select/Select.tsx | 13 ++-- site/src/components/SelectMenu/SelectMenu.tsx | 3 +- .../dashboard/Navbar/DeploymentDropdown.tsx | 2 +- .../modules/dashboard/Navbar/ProxyMenu.tsx | 2 +- .../management/OrganizationSidebarView.tsx | 5 +- site/src/modules/resources/AgentRow.tsx | 6 +- .../modules/resources/PortForwardButton.tsx | 2 +- site/src/modules/resources/ResourceCard.tsx | 7 +- site/src/modules/resources/Resources.tsx | 7 +- .../modules/resources/SSHButton/SSHButton.tsx | 2 +- .../VSCodeDesktopButton.tsx | 4 +- .../VSCodeDevContainerButton.tsx | 4 +- .../WorkspaceTiming/WorkspaceTimings.tsx | 4 +- .../RequestLogsRow/RequestLogsRow.tsx | 11 ++-- .../AuditPage/AuditLogRow/AuditLogRow.tsx | 4 +- .../JobRow.tsx | 10 ++- .../ProvisionerKeyRow.tsx | 6 +- .../ProvisionerRow.tsx | 6 +- .../TemplateInsightsPage/IntervalMenu.tsx | 2 +- .../TemplateInsightsPage/WeekPicker.tsx | 2 +- .../ProvisionerTagsPopover.tsx | 4 +- site/src/pages/WorkspacePage/AppStatuses.tsx | 11 +--- .../BuildParametersPopover.tsx | 2 +- .../pages/WorkspacesPage/WorkspacesButton.tsx | 3 +- .../WorkspacesPage/WorkspacesPageView.tsx | 9 +-- 34 files changed, 128 insertions(+), 160 deletions(-) create mode 100644 site/src/components/AnimatedIcons/ChevronDown.tsx delete mode 100644 site/src/components/DropdownArrow/DropdownArrow.stories.tsx delete mode 100644 site/src/components/DropdownArrow/DropdownArrow.tsx diff --git a/site/src/components/AnimatedIcons/ChevronDown.tsx b/site/src/components/AnimatedIcons/ChevronDown.tsx new file mode 100644 index 0000000000..b795d94d5f --- /dev/null +++ b/site/src/components/AnimatedIcons/ChevronDown.tsx @@ -0,0 +1,29 @@ +import { ChevronDown as LucideChevronDown } from "lucide-react"; +import { cn } from "utils/cn"; + +interface ChevronDownIconProps + extends React.ComponentProps { + /** + * Explicitly control rotation state. When omitted, rotation is + * driven by Radix's data-state attribute on a parent element + * with className="group". + */ + open?: boolean; +} + +export const ChevronDownIcon: React.FC = ({ + open, + className, + ...props +}) => ( + +); diff --git a/site/src/components/Autocomplete/Autocomplete.tsx b/site/src/components/Autocomplete/Autocomplete.tsx index 4acb994680..61cd05535b 100644 --- a/site/src/components/Autocomplete/Autocomplete.tsx +++ b/site/src/components/Autocomplete/Autocomplete.tsx @@ -1,3 +1,4 @@ +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Command, CommandEmpty, @@ -12,7 +13,7 @@ import { PopoverTrigger, } from "components/Popover/Popover"; import { Spinner } from "components/Spinner/Spinner"; -import { Check, ChevronDown, X } from "lucide-react"; +import { Check, X } from "lucide-react"; import { type KeyboardEvent, type ReactNode, @@ -187,11 +188,9 @@ export function Autocomplete({ )} - diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx index 763e55d65a..6196511775 100644 --- a/site/src/components/Button/Button.tsx +++ b/site/src/components/Button/Button.tsx @@ -10,7 +10,7 @@ import { cn } from "utils/cn"; // because they can override the styles from other components like Avatar. const buttonVariants = cva( ` - inline-flex items-center justify-center gap-1 whitespace-nowrap font-sans + group inline-flex items-center justify-center gap-1 whitespace-nowrap font-sans border-solid rounded-md transition-colors shrink-0 text-sm font-medium cursor-pointer no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link diff --git a/site/src/components/Combobox/Combobox.tsx b/site/src/components/Combobox/Combobox.tsx index 1a15212c68..318f536f67 100644 --- a/site/src/components/Combobox/Combobox.tsx +++ b/site/src/components/Combobox/Combobox.tsx @@ -1,3 +1,4 @@ +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import { Command, @@ -12,7 +13,7 @@ import { PopoverContent, PopoverTrigger, } from "components/Popover/Popover"; -import { CheckIcon, ChevronDownIcon } from "lucide-react"; +import { CheckIcon } from "lucide-react"; import type React from "react"; import { createContext, useContext, useState } from "react"; import { cn } from "utils/cn"; diff --git a/site/src/components/DropdownArrow/DropdownArrow.stories.tsx b/site/src/components/DropdownArrow/DropdownArrow.stories.tsx deleted file mode 100644 index 5ce4be92d9..0000000000 --- a/site/src/components/DropdownArrow/DropdownArrow.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { chromatic } from "testHelpers/chromatic"; -import type { Meta, StoryObj } from "@storybook/react-vite"; -import { DropdownArrow } from "./DropdownArrow"; - -const meta: Meta = { - title: "components/DropdownArrow", - parameters: { chromatic }, - component: DropdownArrow, - args: {}, -}; - -export default meta; -type Story = StoryObj; - -export const Open: Story = {}; -export const Close: Story = { args: { close: true } }; diff --git a/site/src/components/DropdownArrow/DropdownArrow.tsx b/site/src/components/DropdownArrow/DropdownArrow.tsx deleted file mode 100644 index 770e8023aa..0000000000 --- a/site/src/components/DropdownArrow/DropdownArrow.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; -import type { FC } from "react"; -import { cn } from "utils/cn"; - -interface ArrowProps { - margin?: boolean; - close?: boolean; -} - -export const DropdownArrow: FC = ({ margin = true, close }) => { - const Arrow = close ? ChevronUpIcon : ChevronDownIcon; - - return ( - - ); -}; diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx index 394f6081e2..4b130fc397 100644 --- a/site/src/components/Expander/Expander.tsx +++ b/site/src/components/Expander/Expander.tsx @@ -1,7 +1,9 @@ -import type { Interpolation, Theme } from "@emotion/react"; -import Collapse from "@mui/material/Collapse"; -import Link from "@mui/material/Link"; -import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "components/Collapsible/Collapsible"; import type { FC, ReactNode } from "react"; interface ExpanderProps { @@ -15,48 +17,19 @@ export const Expander: FC = ({ setExpanded, children, }) => { - const toggleExpanded = () => setExpanded(!expanded); - return ( - <> - {!expanded && ( - - - Click here to learn more - - - - )} - -
{children}
- - {expanded && ( - - - Click here to hide - - - - )} - + + +

+ {children} +

+ + + + {expanded ? "Click here to hide" : "Click here to learn more"} + + + + ); }; - -const styles = { - expandLink: (theme) => ({ - cursor: "pointer", - color: theme.palette.text.secondary, - }), - collapseLink: { - marginTop: 16, - }, - text: (theme) => ({ - display: "flex", - alignItems: "center", - color: theme.palette.text.secondary, - fontSize: theme.typography.caption.fontSize, - }), -} satisfies Record>; diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx index 9d763e9422..ccf1a36010 100644 --- a/site/src/components/IconField/IconField.tsx +++ b/site/src/components/IconField/IconField.tsx @@ -1,6 +1,7 @@ import { css, Global, useTheme } from "@emotion/react"; import InputAdornment from "@mui/material/InputAdornment"; import TextField, { type TextFieldProps } from "@mui/material/TextField"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { Loader } from "components/Loader/Loader"; @@ -9,7 +10,6 @@ import { PopoverContent, PopoverTrigger, } from "components/Popover/Popover"; -import { ChevronDownIcon } from "lucide-react"; import { type FC, lazy, Suspense, useState } from "react"; type IconFieldProps = TextFieldProps & { @@ -84,7 +84,7 @@ export const IconField: FC = ({ /> - diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx index 16fa797506..87cd5acd04 100644 --- a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx +++ b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx @@ -3,6 +3,7 @@ * @see {@link https://shadcnui-expansions.typeart.cc/docs/multiple-selector} */ import { Command as CommandPrimitive, useCommandState } from "cmdk"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Avatar } from "components/Avatar/Avatar"; import { Badge } from "components/Badge/Badge"; import { @@ -17,7 +18,7 @@ import { TooltipTrigger, } from "components/Tooltip/Tooltip"; import { useDebouncedValue } from "hooks/debounce"; -import { ChevronDown, Info, X } from "lucide-react"; +import { Info, X } from "lucide-react"; import { type ComponentPropsWithoutRef, type KeyboardEvent, @@ -594,7 +595,10 @@ export const MultiSelectCombobox: React.FC = ({ > - + diff --git a/site/src/components/Select/Select.tsx b/site/src/components/Select/Select.tsx index 65c71623de..f0798b24c2 100644 --- a/site/src/components/Select/Select.tsx +++ b/site/src/components/Select/Select.tsx @@ -3,7 +3,12 @@ * @see {@link https://ui.shadcn.com/docs/components/select} */ import * as SelectPrimitive from "@radix-ui/react-select"; -import { Check, ChevronDown, ChevronUp } from "lucide-react"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; +import { + Check, + ChevronUp, + ChevronDown as LucideChevronDown, +} from "lucide-react"; import { cn } from "utils/cn"; export const Select = SelectPrimitive.Root; @@ -27,14 +32,14 @@ export const SelectTrigger: React.FC = ({ border border-border border-solid bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background text-content-secondary placeholder:text-content-secondary focus:outline-none, focus:ring-2 focus:ring-content-link disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 - focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link`, + focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link group`, className, )} {...props} > {children} - + ); @@ -64,7 +69,7 @@ const SelectScrollDownButton: React.FC< )} {...props} > - + ); }; diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx index a3dd42779c..f0c4df5902 100644 --- a/site/src/components/SelectMenu/SelectMenu.tsx +++ b/site/src/components/SelectMenu/SelectMenu.tsx @@ -1,5 +1,6 @@ import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem"; import MenuList, { type MenuListProps } from "@mui/material/MenuList"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button, type ButtonProps } from "components/Button/Button"; import { Popover, @@ -12,7 +13,7 @@ import { SearchField, type SearchFieldProps, } from "components/SearchField/SearchField"; -import { CheckIcon, ChevronDownIcon } from "lucide-react"; +import { CheckIcon } from "lucide-react"; import { Children, type FC, diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx index e07cf62df4..e0f778bbaa 100644 --- a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx +++ b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx @@ -1,3 +1,4 @@ +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import { DropdownMenu, @@ -5,7 +6,6 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "components/DropdownMenu/DropdownMenu"; -import { ChevronDownIcon } from "lucide-react"; import { linkToAuditing } from "modules/navigation"; import type { FC } from "react"; import { Link } from "react-router"; diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx index 1edf588196..d69ad199c3 100644 --- a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx +++ b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx @@ -1,6 +1,7 @@ import Skeleton from "@mui/material/Skeleton"; import type * as TypesGen from "api/typesGenerated"; import { Abbr } from "components/Abbr/Abbr"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import { DropdownMenu, @@ -15,7 +16,6 @@ import { displayError } from "components/GlobalSnackbar/utils"; import { Latency } from "components/Latency/Latency"; import type { ProxyContextValue } from "contexts/ProxyContext"; import { useAuthenticated } from "hooks"; -import { ChevronDownIcon } from "lucide-react"; import { type FC, useState } from "react"; import { Link } from "react-router"; import { sortProxiesByLatency } from "./proxyUtils"; diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index d8e3d8d223..98cb00ea91 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -1,4 +1,5 @@ import type { Organization } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Avatar } from "components/Avatar/Avatar"; import { Button } from "components/Button/Button"; import { @@ -16,7 +17,7 @@ import { PopoverTrigger, } from "components/Popover/Popover"; import { SettingsSidebarNavItem } from "components/Sidebar/Sidebar"; -import { Check, ChevronDown, Plus } from "lucide-react"; +import { Check, Plus } from "lucide-react"; import type { Permissions } from "modules/permissions"; import type { OrganizationPermissions } from "modules/permissions/organizations"; import { type FC, useState } from "react"; @@ -78,7 +79,7 @@ export const OrganizationSidebarView: FC< ) : ( No organization selected )} - + diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx index 7ba64fa485..601086907f 100644 --- a/site/src/modules/resources/AgentRow.tsx +++ b/site/src/modules/resources/AgentRow.tsx @@ -8,8 +8,8 @@ import type { WorkspaceAgent, WorkspaceAgentMetadata, } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; -import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; import { useProxy } from "contexts/ProxyContext"; import { SquareCheckBigIcon } from "lucide-react"; import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility"; @@ -184,7 +184,7 @@ export const AgentRow: FC = ({ onClick={() => setShowParentApps((show) => !show)} > Show parent apps - + )} @@ -342,7 +342,7 @@ export const AgentRow: FC = ({ variant="subtle" onClick={() => setShowLogs((v) => !v)} > - + Logs diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx index 0359e3d3de..1ac8e761e1 100644 --- a/site/src/modules/resources/PortForwardButton.tsx +++ b/site/src/modules/resources/PortForwardButton.tsx @@ -21,6 +21,7 @@ import { type WorkspaceAgentPortShareProtocol, WorkspaceAppSharingLevels, } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import { HelpTooltipLink, @@ -41,7 +42,6 @@ import { import { useFormik } from "formik"; import { BuildingIcon, - ChevronDownIcon, ExternalLinkIcon, LockIcon, LockOpenIcon, diff --git a/site/src/modules/resources/ResourceCard.tsx b/site/src/modules/resources/ResourceCard.tsx index 794462bcde..560d73ce6c 100644 --- a/site/src/modules/resources/ResourceCard.tsx +++ b/site/src/modules/resources/ResourceCard.tsx @@ -1,8 +1,8 @@ import type { Interpolation, Theme } from "@emotion/react"; import IconButton from "@mui/material/IconButton"; import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { CopyableValue } from "components/CopyableValue/CopyableValue"; -import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; import { MemoizedInlineMarkdown } from "components/Markdown/Markdown"; import { Stack } from "components/Stack/Stack"; import { @@ -174,10 +174,7 @@ export const ResourceCard: FC = ({ resource, agentRow }) => { }} size="large" > - + diff --git a/site/src/modules/resources/Resources.tsx b/site/src/modules/resources/Resources.tsx index 13e1bbf835..951372be3b 100644 --- a/site/src/modules/resources/Resources.tsx +++ b/site/src/modules/resources/Resources.tsx @@ -1,6 +1,6 @@ import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; -import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; import { Stack } from "components/Stack/Stack"; import { type FC, type JSX, useState } from "react"; import { ResourceCard } from "./ResourceCard"; @@ -43,7 +43,10 @@ export const Resources: FC = ({ resources, agentRow }) => { onClick={() => setShouldDisplayHideResources((v) => !v)} > {shouldDisplayHideResources ? "Hide" : "Show hidden"} resources - + )} diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx index 515be3eff5..0058007648 100644 --- a/site/src/modules/resources/SSHButton/SSHButton.tsx +++ b/site/src/modules/resources/SSHButton/SSHButton.tsx @@ -1,4 +1,5 @@ import { deploymentSSHConfig } from "api/queries/deployment"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import { CodeExample } from "components/CodeExample/CodeExample"; import { @@ -12,7 +13,6 @@ import { PopoverTrigger, } from "components/Popover/Popover"; import { Stack } from "components/Stack/Stack"; -import { ChevronDownIcon } from "lucide-react"; import type { FC } from "react"; import { useQuery } from "react-query"; import { docs } from "utils/docs"; diff --git a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx index 56f3b5d070..af1c36c923 100644 --- a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx +++ b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx @@ -2,9 +2,9 @@ import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import { API } from "api/api"; import type { DisplayApp } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { VSCodeIcon } from "components/Icons/VSCodeIcon"; import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon"; -import { ChevronDownIcon } from "lucide-react"; import { getVSCodeHref } from "modules/apps/apps"; import { type FC, useRef, useState } from "react"; import { AgentButton } from "../AgentButton"; @@ -63,7 +63,7 @@ export const VSCodeDesktopButton: FC = (props) => { }} size="icon-lg" > - + diff --git a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx index efd6ecc9bc..94ed2e7461 100644 --- a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx +++ b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx @@ -2,9 +2,9 @@ import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import { API } from "api/api"; import type { DisplayApp } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { VSCodeIcon } from "components/Icons/VSCodeIcon"; import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon"; -import { ChevronDownIcon } from "lucide-react"; import { type FC, useRef, useState } from "react"; import { AgentButton } from "../AgentButton"; import { DisplayAppNameMap } from "../AppLink/AppLink"; @@ -67,7 +67,7 @@ export const VSCodeDevContainerButton: FC = ( }} size="icon-lg" > - + diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx index f30dfbac74..5f6b0142be 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx @@ -6,10 +6,10 @@ import type { AgentScriptTiming, ProvisionerTiming, } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import sortBy from "lodash/sortBy"; import uniqBy from "lodash/uniqBy"; -import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import { type FC, useState } from "react"; import { calcDuration, @@ -107,7 +107,7 @@ export const WorkspaceTimings: FC = ({ css={styles.collapseTrigger} onClick={() => setIsOpen((o) => !o)} > - {isOpen ? : } + Build timeline ({ diff --git a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx index ac9faf773e..0bcab59612 100644 --- a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx +++ b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx @@ -8,12 +8,7 @@ import { TooltipProvider, TooltipTrigger, } from "components/Tooltip/Tooltip"; -import { - ArrowDownIcon, - ArrowUpIcon, - ChevronDownIcon, - ChevronRightIcon, -} from "lucide-react"; +import { ArrowDownIcon, ArrowUpIcon, ChevronRightIcon } from "lucide-react"; import { type FC, Fragment, useState } from "react"; import { cn } from "utils/cn"; import { formatDate, humanDuration } from "utils/time"; @@ -143,7 +138,9 @@ export const RequestLogsRow: FC = ({ interception }) => { isOpen && "text-content-primary", ])} > - {isOpen ? : } + ({isOpen ? "Hide" : "Show more"}) {formatDate(new Date(interception.started_at))} diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx index 457018e83b..f6ac258ffa 100644 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx @@ -1,10 +1,10 @@ import type { AuditLog, BuildReason } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Avatar } from "components/Avatar/Avatar"; import { Collapsible, CollapsibleContent, } from "components/Collapsible/Collapsible"; -import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; import { Link } from "components/Link/Link"; import { StatusPill } from "components/StatusPill/StatusPill"; import { TableCell } from "components/Table/Table"; @@ -238,7 +238,7 @@ export const AuditLogRow: FC = ({ {shouldDisplayDiff ? (
- +
) : (
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx index e9f7170693..4df5218629 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx @@ -3,11 +3,7 @@ import { Avatar } from "components/Avatar/Avatar"; import { Badge } from "components/Badge/Badge"; import { Button } from "components/Button/Button"; import { TableCell, TableRow } from "components/Table/Table"; -import { - ChevronDownIcon, - ChevronRightIcon, - TriangleAlertIcon, -} from "lucide-react"; +import { ChevronRightIcon, TriangleAlertIcon } from "lucide-react"; import { JobStatusIndicator } from "modules/provisioners/JobStatusIndicator"; import { ProvisionerTag, @@ -48,7 +44,9 @@ export const JobRow: FC = ({ job, defaultIsOpen = false }) => { setIsOpen((v) => !v); }} > - {isOpen ? : } + ({isOpen ? "Hide" : "Show more"}) {relativeTime(new Date(job.created_at))} diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/ProvisionerKeyRow.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/ProvisionerKeyRow.tsx index 9402a64acc..c83a64f0bd 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/ProvisionerKeyRow.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/ProvisionerKeyRow.tsx @@ -2,7 +2,7 @@ import type { ProvisionerDaemon, ProvisionerKey } from "api/typesGenerated"; import { Badge } from "components/Badge/Badge"; import { Button } from "components/Button/Button"; import { TableCell, TableRow } from "components/Table/Table"; -import { ChevronDownIcon, ChevronRightIcon } from "lucide-react"; +import { ChevronRightIcon } from "lucide-react"; import { ProvisionerTag, ProvisionerTags, @@ -39,7 +39,9 @@ export const ProvisionerKeyRow: FC = ({ ])} onClick={() => setIsOpen((v) => !v)} > - {isOpen ? : } + ({isOpen ? "Hide" : "Show more"}) {provisionerKey.name} diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerRow.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerRow.tsx index 9508c1a261..b4c572d352 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerRow.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerRow.tsx @@ -9,7 +9,7 @@ import { type StatusIndicatorProps, } from "components/StatusIndicator/StatusIndicator"; import { TableCell, TableRow } from "components/Table/Table"; -import { ChevronDownIcon, ChevronRightIcon } from "lucide-react"; +import { ChevronRightIcon } from "lucide-react"; import { JobStatusIndicator } from "modules/provisioners/JobStatusIndicator"; import { ProvisionerTag, @@ -60,7 +60,9 @@ export const ProvisionerRow: FC = ({ setIsOpen((v) => !v); }} > - {isOpen ? : } + ({isOpen ? "Hide" : "Show more"}) {provisioner.name} diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx index 3297a1a432..334bbec254 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx @@ -1,3 +1,4 @@ +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import { DropdownMenu, @@ -6,7 +7,6 @@ import { DropdownMenuRadioItem, DropdownMenuTrigger, } from "components/DropdownMenu/DropdownMenu"; -import { ChevronDownIcon } from "lucide-react"; import type { FC } from "react"; const insightsIntervals = { diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx index ef0a41835d..80dbd8e9ca 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx @@ -1,3 +1,4 @@ +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import { DropdownMenu, @@ -7,7 +8,6 @@ import { DropdownMenuTrigger, } from "components/DropdownMenu/DropdownMenu"; import dayjs from "dayjs"; -import { ChevronDownIcon } from "lucide-react"; import type { FC } from "react"; import type { DateRangeValue } from "./DateRange"; import { lastWeeks } from "./utils"; diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx index 69e3fb3570..a927e9a696 100644 --- a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx +++ b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx @@ -1,6 +1,7 @@ import Link from "@mui/material/Link"; import useTheme from "@mui/system/useTheme"; import type { ProvisionerDaemon } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { FormSection } from "components/Form/Form"; import { TopbarButton } from "components/FullPageLayout/Topbar"; import { @@ -8,7 +9,6 @@ import { PopoverContent, PopoverTrigger, } from "components/Popover/Popover"; -import { ChevronDownIcon } from "lucide-react"; import { ProvisionerTagsField } from "modules/provisioners/ProvisionerTagsField"; import type { FC } from "react"; import { docs } from "utils/docs"; @@ -28,7 +28,7 @@ export const ProvisionerTagsPopover: FC = ({ - + Expand provisioner tags diff --git a/site/src/pages/WorkspacePage/AppStatuses.tsx b/site/src/pages/WorkspacePage/AppStatuses.tsx index c57ea16731..69bbe9b7d9 100644 --- a/site/src/pages/WorkspacePage/AppStatuses.tsx +++ b/site/src/pages/WorkspacePage/AppStatuses.tsx @@ -4,6 +4,7 @@ import type { WorkspaceAgent, WorkspaceApp, } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { ScrollArea } from "components/ScrollArea/ScrollArea"; @@ -13,13 +14,7 @@ import { TooltipTrigger, } from "components/Tooltip/Tooltip"; import capitalize from "lodash/capitalize"; -import { - ChevronDownIcon, - ChevronUpIcon, - ExternalLinkIcon, - FileIcon, - LayoutGridIcon, -} from "lucide-react"; +import { ExternalLinkIcon, FileIcon, LayoutGridIcon } from "lucide-react"; import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon"; import { useAppLink } from "modules/apps/useAppLink"; import { type FC, useState } from "react"; @@ -122,7 +117,7 @@ export const AppStatuses: FC = ({ setDisplayStatuses((display) => !display); }} > - {displayStatuses ? : } + diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx index f31e45189a..c29d07335c 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx @@ -6,6 +6,7 @@ import type { Workspace, WorkspaceBuildParameter, } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import { FormFields } from "components/Form/Form"; import { TopbarButton } from "components/FullPageLayout/Topbar"; @@ -24,7 +25,6 @@ import { } from "components/Popover/Popover"; import { RichParameterInput } from "components/RichParameterInput/RichParameterInput"; import { useFormik } from "formik"; -import { ChevronDownIcon } from "lucide-react"; import { type FC, useState } from "react"; import { useQuery } from "react-query"; import { docs } from "utils/docs"; diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx index 38e5adc10c..8f58ee70cb 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx @@ -1,5 +1,6 @@ import Link from "@mui/material/Link"; import type { Template } from "api/typesGenerated"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Avatar } from "components/Avatar/Avatar"; import { Button } from "components/Button/Button"; import { Loader } from "components/Loader/Loader"; @@ -11,7 +12,7 @@ import { PopoverTrigger, } from "components/Popover/Popover"; import { SearchEmpty } from "components/Search/Search"; -import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react"; +import { ExternalLinkIcon } from "lucide-react"; import { linkToTemplate, useLinks } from "modules/navigation"; import { type FC, type ReactNode, useState } from "react"; import type { UseQueryResult } from "react-query"; diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 9832fc008b..1eff6a6e1f 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -1,6 +1,7 @@ import { hasError, isApiValidationError } from "api/errors"; import type { Template, Workspace } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { ChevronDownIcon } from "components/AnimatedIcons/ChevronDown"; import { Button } from "components/Button/Button"; import { DropdownMenu, @@ -17,13 +18,7 @@ import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidg import { Spinner } from "components/Spinner/Spinner"; import { Stack } from "components/Stack/Stack"; import { TableToolbar } from "components/TableToolbar/TableToolbar"; -import { - ChevronDownIcon, - CloudIcon, - PlayIcon, - SquareIcon, - TrashIcon, -} from "lucide-react"; +import { CloudIcon, PlayIcon, SquareIcon, TrashIcon } from "lucide-react"; import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable"; import type { FC } from "react"; import type { UseQueryResult } from "react-query";