opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: begin modernizing typescript imports (#23509)

Browse Source 
- update some config settings to support "absolute"-style imports by
using a `#/` prefix
- migrate some of the imports in the `WorkspacesPage` to use the new
import style as a proof of concept

because of the change in import sorting behavior this results in, this
diff is already kind of hard to look at–even just from a small migration
for a single page. I think breaking this up into bite size pieces isn't
gonna be worth the work, and leaves more time for merge conflicts to
accrue, more times people would likely have to resolve them.

so I think as far as process for this, I'd like to...

- merge this PR as is, where the config changes are relatively easy to
spot in the haystack, with just enough imports updated to prove that the
config changes are correct
- merge another mega PR after this one which just bites the bullet and
migrates everything else in one fell swoop. it'll probably result in a
ton of merge conflicts for open PRs, but at least it'll only do so once
and then it can be over with.
This commit is contained in:
Kayla はな
2026-03-24 11:14:44 -06:00
committed by GitHub
parent 7eb0d08f89
commit b06d183a32
20 changed files with 164 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/package.json
+3
View File
@@ -36,6 +36,9 @@
"stats": "STATS=true pnpm build && npx http-server ./stats -p 8081 -c-1",
"update-emojis": "cp -rf ./node_modules/emoji-datasource-apple/img/apple/64/* ./static/emojis && cp -f ./node_modules/emoji-datasource-apple/img/apple/sheets-256/64.png ./static/emojis/spritesheet.png"
},
"imports": {
"#/*": "./src/*"
},
"dependencies": {
"@emoji-mart/data": "1.2.1",
"@emoji-mart/react": "1.1.1",
site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx
+3 -3
View File
@@ -1,11 +1,11 @@
import type { Workspace } from "api/typesGenerated";
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { ClockIcon, UserIcon } from "lucide-react";
import { type FC, type ReactNode, useState } from "react";
import { getResourceIconPath } from "utils/workspace";
import type { Workspace } from "#/api/typesGenerated";
import { ConfirmDialog } from "#/components/Dialogs/ConfirmDialog/ConfirmDialog";
import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
dayjs.extend(relativeTime);
site/src/pages/WorkspacesPage/BatchUpdateModalForm.stories.tsx
+6 -6
View File
@@ -1,15 +1,15 @@
import { MockTemplateVersion, MockWorkspace } from "testHelpers/entities";
import type { Meta, Parameters, StoryObj } from "@storybook/react-vite";
import { templateVersionRoot } from "api/queries/templates";
import type {
TemplateVersion,
Workspace,
WorkspaceBuild,
} from "api/typesGenerated";
import { ACTIVE_BUILD_STATUSES } from "modules/workspaces/status";
import { useQueryClient } from "react-query";
import { action } from "storybook/actions";
import { expect, screen, userEvent, within } from "storybook/test";
import { templateVersionRoot } from "#/api/queries/templates";
import type {
TemplateVersion,
Workspace,
WorkspaceBuild,
} from "#/api/typesGenerated";
import { BatchUpdateModalForm } from "./BatchUpdateModalForm";
type Writeable<T> = { -readonly [Key in keyof T]: T[Key] };
site/src/pages/WorkspacesPage/BatchUpdateModalForm.tsx
+14 -14
View File
@@ -1,19 +1,5 @@
import { Label } from "@radix-ui/react-label";
import { Slot } from "@radix-ui/react-slot";
import { templateVersion } from "api/queries/templates";
import type { Workspace } from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { Avatar } from "components/Avatar/Avatar";
import { Badge } from "components/Badge/Badge";
import { Button } from "components/Button/Button";
import { Checkbox } from "components/Checkbox/Checkbox";
import {
Dialog,
DialogContent,
DialogDescription,
DialogTitle,
} from "components/Dialog/Dialog";
import { Spinner } from "components/Spinner/Spinner";
import { TriangleAlert } from "lucide-react";
import { ACTIVE_BUILD_STATUSES } from "modules/workspaces/status";
import {
@@ -26,6 +12,20 @@ import {
} from "react";
import { useQueries } from "react-query";
import { cn } from "utils/cn";
import { templateVersion } from "#/api/queries/templates";
import type { Workspace } from "#/api/typesGenerated";
import { ErrorAlert } from "#/components/Alert/ErrorAlert";
import { Avatar } from "#/components/Avatar/Avatar";
import { Badge } from "#/components/Badge/Badge";
import { Button } from "#/components/Button/Button";
import { Checkbox } from "#/components/Checkbox/Checkbox";
import {
Dialog,
DialogContent,
DialogDescription,
DialogTitle,
} from "#/components/Dialog/Dialog";
import { Spinner } from "#/components/Spinner/Spinner";
export const BatchUpdateModalForm: FC<BatchUpdateModalFormProps> = ({
open,
site/src/pages/WorkspacesPage/WorkspaceHelpTooltip.tsx
+3 -3
View File
@@ -1,3 +1,5 @@
import type { FC } from "react";
import { docs } from "utils/docs";
import {
HelpTooltip,
HelpTooltipContent,
@@ -6,9 +8,7 @@ import {
HelpTooltipLinksGroup,
HelpTooltipText,
HelpTooltipTitle,
} from "components/HelpTooltip/HelpTooltip";
import type { FC } from "react";
import { docs } from "utils/docs";
} from "#/components/HelpTooltip/HelpTooltip";
const Language = {
workspaceTooltipTitle: "What is a workspace?",
site/src/pages/WorkspacesPage/WorkspaceSharingIndicator.stories.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import type { SharedWorkspaceActor } from "api/typesGenerated";
import { expect, screen, userEvent, waitFor } from "storybook/test";
import type { SharedWorkspaceActor } from "#/api/typesGenerated";
import { WorkspaceSharingIndicator } from "./WorkspaceSharingIndicator";
const mockUser = (
site/src/pages/WorkspacesPage/WorkspaceSharingIndicator.tsx
+6 -6
View File
@@ -1,13 +1,13 @@
import type { SharedWorkspaceActor } from "api/typesGenerated";
import { Badge } from "components/Badge/Badge";
import { Link } from "components/Link/Link";
import { UsersIcon } from "lucide-react";
import type { FC } from "react";
import type { SharedWorkspaceActor } from "#/api/typesGenerated";
import { Badge } from "#/components/Badge/Badge";
import { Link } from "#/components/Link/Link";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { UsersIcon } from "lucide-react";
import type { FC } from "react";
} from "#/components/Tooltip/Tooltip";
interface WorkspaceSharingIndicatorProps {
sharedWith: readonly SharedWorkspaceActor[];
site/src/pages/WorkspacesPage/WorkspacesButton.tsx
+13 -13
View File
@@ -1,17 +1,4 @@
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";
import { MenuSearch } from "components/Menu/MenuSearch";
import { OverflowY } from "components/OverflowY/OverflowY";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "components/Popover/Popover";
import { SearchEmpty } from "components/Search/Search";
import { ExternalLinkIcon } from "lucide-react";
import { linkToTemplate, useLinks } from "modules/navigation";
import { type FC, type ReactNode, useState } from "react";
@@ -20,6 +7,19 @@ import {
Link as RouterLink,
type LinkProps as RouterLinkProps,
} from "react-router";
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";
import { MenuSearch } from "#/components/Menu/MenuSearch";
import { OverflowY } from "#/components/OverflowY/OverflowY";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "#/components/Popover/Popover";
import { SearchEmpty } from "#/components/Search/Search";
type TemplatesQuery = UseQueryResult<Template[]>;
site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
+4 -4
View File
@@ -1,10 +1,10 @@
import type { Template } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { Button } from "components/Button/Button";
import { EmptyState } from "components/EmptyState/EmptyState";
import { linkToTemplate, useLinks } from "modules/navigation";
import type { FC } from "react";
import { Link } from "react-router";
import type { Template } from "#/api/typesGenerated";
import { Avatar } from "#/components/Avatar/Avatar";
import { Button } from "#/components/Button/Button";
import { EmptyState } from "#/components/EmptyState/EmptyState";
interface WorkspacesEmptyProps {
isUsingFilter: boolean;
site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
+4 -4
View File
@@ -16,15 +16,15 @@ import {
import { server } from "testHelpers/server";
import { screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { API } from "api/api";
import { HttpResponse, http } from "msw";
import * as CreateDayString from "utils/createDayString";
import { API } from "#/api/api";
import type {
Workspace,
WorkspaceApp,
WorkspaceAppHealth,
WorkspacesResponse,
} from "api/typesGenerated";
import { HttpResponse, http } from "msw";
import * as CreateDayString from "utils/createDayString";
} from "#/api/typesGenerated";
import WorkspacesPage from "./WorkspacesPage";
describe("WorkspacesPage", () => {
site/src/pages/WorkspacesPage/WorkspacesPage.tsx
+6 -6
View File
@@ -1,9 +1,3 @@
import { getErrorDetail, getErrorMessage } from "api/errors";
import { workspacePermissionsByOrganization } from "api/queries/organizations";
import { templates, templateVersionRoot } from "api/queries/templates";
import { workspaces } from "api/queries/workspaces";
import { useFilter } from "components/Filter/Filter";
import { useUserFilterMenu } from "components/Filter/UserFilter";
import { useAuthenticated } from "hooks";
import { useEffectEvent } from "hooks/hookPolyfills";
import { usePagination } from "hooks/usePagination";
@@ -15,6 +9,12 @@ import { useQuery, useQueryClient } from "react-query";
import { useSearchParams } from "react-router";
import { toast } from "sonner";
import { pageTitle } from "utils/page";
import { getErrorDetail, getErrorMessage } from "#/api/errors";
import { workspacePermissionsByOrganization } from "#/api/queries/organizations";
import { templates, templateVersionRoot } from "#/api/queries/templates";
import { workspaces } from "#/api/queries/workspaces";
import { useFilter } from "#/components/Filter/Filter";
import { useUserFilterMenu } from "#/components/Filter/UserFilter";
import { BatchDeleteConfirmation } from "./BatchDeleteConfirmation";
import { BatchUpdateModalForm } from "./BatchUpdateModalForm";
import { useBatchActions } from "./batchActions";
site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
+6 -6
View File
@@ -15,19 +15,19 @@ import {
withProxyProvider,
} from "testHelpers/storybook";
import type { Meta, StoryObj } from "@storybook/react-vite";
import dayjs from "dayjs";
import uniqueId from "lodash/uniqueId";
import { expect, within } from "storybook/test";
import {
type Workspace,
type WorkspaceStatus,
WorkspaceStatuses,
} from "api/typesGenerated";
} from "#/api/typesGenerated";
import {
getDefaultFilterProps,
MockMenu,
} from "components/Filter/storyHelpers";
import { DEFAULT_RECORDS_PER_PAGE } from "components/PaginationWidget/utils";
import dayjs from "dayjs";
import uniqueId from "lodash/uniqueId";
import { expect, within } from "storybook/test";
} from "#/components/Filter/storyHelpers";
import { DEFAULT_RECORDS_PER_PAGE } from "#/components/PaginationWidget/utils";
import type { WorkspaceFilterState } from "./filter/WorkspacesFilter";
import { WorkspacesPageView } from "./WorkspacesPageView";
site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+22 -19
View File
@@ -1,28 +1,31 @@
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 { CloudIcon, PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
import type { FC } from "react";
import type { UseQueryResult } from "react-query";
import { mustUpdateWorkspace } from "utils/workspace";
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,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "components/DropdownMenu/DropdownMenu";
import { EmptyState } from "components/EmptyState/EmptyState";
import { Margins } from "components/Margins/Margins";
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
import { PaginationAmount } from "components/PaginationWidget/PaginationAmount";
import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase";
import { Spinner } from "components/Spinner/Spinner";
import { Stack } from "components/Stack/Stack";
import { TableToolbar } from "components/TableToolbar/TableToolbar";
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";
import { mustUpdateWorkspace } from "utils/workspace";
} from "#/components/DropdownMenu/DropdownMenu";
import { EmptyState } from "#/components/EmptyState/EmptyState";
import { Margins } from "#/components/Margins/Margins";
import {
PageHeader,
PageHeaderTitle,
} from "#/components/PageHeader/PageHeader";
import { PaginationAmount } from "#/components/PaginationWidget/PaginationAmount";
import { PaginationWidgetBase } from "#/components/PaginationWidget/PaginationWidgetBase";
import { Spinner } from "#/components/Spinner/Spinner";
import { Stack } from "#/components/Stack/Stack";
import { TableToolbar } from "#/components/TableToolbar/TableToolbar";
import {
type WorkspaceFilterState,
WorkspacesFilter,
site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+44 -44
View File
@@ -1,48 +1,4 @@
import Skeleton from "@mui/material/Skeleton";
import { API } from "api/api";
import { templateVersion } from "api/queries/templates";
import {
cancelBuild,
deleteWorkspace,
startWorkspace,
stopWorkspace,
} from "api/queries/workspaces";
import type {
Template,
Workspace,
WorkspaceAgent,
WorkspaceApp,
} from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/Avatar/AvatarData";
import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton";
import { Badge } from "components/Badge/Badge";
import { Button } from "components/Button/Button";
import { Checkbox } from "components/Checkbox/Checkbox";
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { VSCodeIcon } from "components/Icons/VSCodeIcon";
import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon";
import { Spinner } from "components/Spinner/Spinner";
import { Stack } from "components/Stack/Stack";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "components/Table/Table";
import {
TableLoaderSkeleton,
TableRowSkeleton,
} from "components/TableLoader/TableLoader";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { useAuthenticated } from "hooks";
import { useClickableTableRow } from "hooks/useClickableTableRow";
import {
@@ -83,6 +39,50 @@ import { useMutation, useQuery, useQueryClient } from "react-query";
import { useNavigate } from "react-router";
import { cn } from "utils/cn";
import { getDisplayWorkspaceTemplateName } from "utils/workspace";
import { API } from "#/api/api";
import { templateVersion } from "#/api/queries/templates";
import {
cancelBuild,
deleteWorkspace,
startWorkspace,
stopWorkspace,
} from "#/api/queries/workspaces";
import type {
Template,
Workspace,
WorkspaceAgent,
WorkspaceApp,
} from "#/api/typesGenerated";
import { Avatar } from "#/components/Avatar/Avatar";
import { AvatarData } from "#/components/Avatar/AvatarData";
import { AvatarDataSkeleton } from "#/components/Avatar/AvatarDataSkeleton";
import { Badge } from "#/components/Badge/Badge";
import { Button } from "#/components/Button/Button";
import { Checkbox } from "#/components/Checkbox/Checkbox";
import { ConfirmDialog } from "#/components/Dialogs/ConfirmDialog/ConfirmDialog";
import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
import { VSCodeIcon } from "#/components/Icons/VSCodeIcon";
import { VSCodeInsidersIcon } from "#/components/Icons/VSCodeInsidersIcon";
import { Spinner } from "#/components/Spinner/Spinner";
import { Stack } from "#/components/Stack/Stack";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "#/components/Table/Table";
import {
TableLoaderSkeleton,
TableRowSkeleton,
} from "#/components/TableLoader/TableLoader";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "#/components/Tooltip/Tooltip";
import { WorkspaceSharingIndicator } from "./WorkspaceSharingIndicator";
import { WorkspacesEmpty } from "./WorkspacesEmpty";
site/src/pages/WorkspacesPage/batchActions.ts
+3 -3
View File
@@ -1,8 +1,8 @@
import { API } from "api/api";
import { getErrorDetail } from "api/errors";
import type { Workspace, WorkspaceBuild } from "api/typesGenerated";
import { useMutation } from "react-query";
import { toast } from "sonner";
import { API } from "#/api/api";
import { getErrorDetail } from "#/api/errors";
import type { Workspace, WorkspaceBuild } from "#/api/typesGenerated";
interface UseBatchActionsOptions {
onSuccess: () => Promise<void>;
site/src/pages/WorkspacesPage/filter/WorkspacesFilter.stories.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
import {
getDefaultFilterProps,
MockMenu,
} from "components/Filter/storyHelpers";
} from "#/components/Filter/storyHelpers";
import type { WorkspaceFilterState } from "./WorkspacesFilter";
import { WorkspacesFilter } from "./WorkspacesFilter";
site/src/pages/WorkspacesPage/filter/WorkspacesFilter.tsx
+10 -10
View File
@@ -1,13 +1,3 @@
import {
Filter,
MenuSkeleton,
type UseFilterResult,
} from "components/Filter/Filter";
import {
DEFAULT_USER_FILTER_WIDTH,
type UserFilterMenu,
UserMenu,
} from "components/Filter/UserFilter";
import { useDashboard } from "modules/dashboard/useDashboard";
import {
type OrganizationsFilterMenu,
@@ -15,6 +5,16 @@ import {
} from "modules/tableFiltering/options";
import type { FC } from "react";
import { docs } from "utils/docs";
import {
Filter,
MenuSkeleton,
type UseFilterResult,
} from "#/components/Filter/Filter";
import {
DEFAULT_USER_FILTER_WIDTH,
type UserFilterMenu,
UserMenu,
} from "#/components/Filter/UserFilter";
import {
type StatusFilterMenu,
StatusMenu,
site/src/pages/WorkspacesPage/filter/menus.tsx
+9 -9
View File
@@ -1,21 +1,21 @@
import { API } from "api/api";
import type { Template, WorkspaceStatus } from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { ComboboxInput } from "components/Combobox/Combobox";
import type { FC } from "react";
import { getDisplayWorkspaceStatus } from "utils/workspace";
import { API } from "#/api/api";
import type { Template, WorkspaceStatus } from "#/api/typesGenerated";
import { Avatar } from "#/components/Avatar/Avatar";
import { ComboboxInput } from "#/components/Combobox/Combobox";
import {
type UseFilterMenuOptions,
useFilterMenu,
} from "components/Filter/menu";
} from "#/components/Filter/menu";
import {
SelectFilter,
type SelectFilterOption,
} from "components/Filter/SelectFilter";
} from "#/components/Filter/SelectFilter";
import {
StatusIndicatorDot,
type StatusIndicatorDotProps,
} from "components/StatusIndicator/StatusIndicator";
import type { FC } from "react";
import { getDisplayWorkspaceStatus } from "utils/workspace";
} from "#/components/StatusIndicator/StatusIndicator";
export const useTemplateFilterMenu = ({
value,
site/src/router.tsx
+2 -2
View File
@@ -1,5 +1,3 @@
import { GlobalErrorBoundary } from "components/ErrorBoundary/GlobalErrorBoundary";
import { TemplateRedirectController } from "pages/TemplatePage/TemplateRedirectController";
import { lazy, Suspense } from "react";
import {
createBrowserRouter,
@@ -9,6 +7,7 @@ import {
Route,
ScrollRestoration,
} from "react-router";
import { GlobalErrorBoundary } from "./components/ErrorBoundary/GlobalErrorBoundary";
import { Loader } from "./components/Loader/Loader";
import { RequireAuth } from "./contexts/auth/RequireAuth";
import { DashboardLayout } from "./modules/dashboard/DashboardLayout";
@@ -19,6 +18,7 @@ import LoginOAuthDevicePage from "./pages/LoginOAuthDevicePage/LoginOAuthDeviceP
import LoginPage from "./pages/LoginPage/LoginPage";
import { SetupPage } from "./pages/SetupPage/SetupPage";
import { TemplateLayout } from "./pages/TemplatePage/TemplateLayout";
import { TemplateRedirectController } from "./pages/TemplatePage/TemplateRedirectController";
import { TemplateSettingsLayout } from "./pages/TemplateSettingsPage/TemplateSettingsLayout";
import TemplatesPage from "./pages/TemplatesPage/TemplatesPage";
import UserSettingsLayout from "./pages/UserSettingsPage/Layout";
site/tsconfig.json
+4 -1
View File
@@ -24,7 +24,10 @@
"vitest/globals",
"novnc__novnc"
],
"baseUrl": "src/"
"baseUrl": "src/",
"paths": {
"#/*": ["*"]
}
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules/"]