chore: sort imports in our typescript code (#12417)

Makefile

@@ -382,32 +382,44 @@ install: build/coder_$(VERSION)_$(GOOS)_$(GOARCH)$(GOOS_BIN_EXT)
 	cp "$<" "$$output_file"
 .PHONY: install
 
-fmt: fmt/prettier fmt/terraform fmt/shfmt fmt/go
+BOLD := $(shell tput bold)
+GREEN := $(shell tput setaf 2)
+RESET := $(shell tput sgr0)
+
+fmt: fmt/eslint fmt/prettier fmt/terraform fmt/shfmt fmt/go
 .PHONY: fmt
 
 fmt/go:
+	echo "$(GREEN)==>$(RESET) $(BOLD)fmt/go$(RESET)"
 	# VS Code users should check out
 	# https://github.com/mvdan/gofumpt#visual-studio-code
 	go run mvdan.cc/gofumpt@v0.4.0 -w -l .
 .PHONY: fmt/go
 
+fmt/eslint:
+	echo "$(GREEN)==>$(RESET) $(BOLD)fmt/eslint$(RESET)"
+	cd site
+	pnpm run lint:fix
+.PHONY: fmt/eslint
+
 fmt/prettier:
-	echo "--- prettier"
+	echo "$(GREEN)==>$(RESET) $(BOLD)fmt/prettier$(RESET)"
 	cd site
 # Avoid writing files in CI to reduce file write activity
 ifdef CI
 	pnpm run format:check
 else
-	pnpm run format:write
+	pnpm run format
 endif
 .PHONY: fmt/prettier
 
 fmt/terraform: $(wildcard *.tf)
+	echo "$(GREEN)==>$(RESET) $(BOLD)fmt/terraform$(RESET)"
 	terraform fmt -recursive
 .PHONY: fmt/terraform
 
 fmt/shfmt: $(SHELL_SRC_FILES)
-	echo "--- shfmt"
+	echo "$(GREEN)==>$(RESET) $(BOLD)fmt/shfmt$(RESET)"
 # Only do diff check in CI, errors on diff.
 ifdef CI
 	shfmt -d $(SHELL_SRC_FILES)
@@ -574,7 +586,7 @@ provisionerd/proto/provisionerd.pb.go: provisionerd/proto/provisionerd.proto
 
 site/src/api/typesGenerated.ts: $(wildcard scripts/apitypings/*) $(shell find ./codersdk $(FIND_EXCLUSIONS) -type f -name '*.go')
 	go run ./scripts/apitypings/ > $@
-	pnpm run format:write:only "$@"
+	pnpm exec prettier --write "$@"
 
 site/e2e/provisionerGenerated.ts: provisionerd/proto/provisionerd.pb.go provisionersdk/proto/provisioner.pb.go
 	cd site
@@ -583,7 +595,7 @@ site/e2e/provisionerGenerated.ts: provisionerd/proto/provisionerd.pb.go provisio
 
 site/src/theme/icons.json: $(wildcard scripts/gensite/*) $(wildcard site/static/icon/*)
 	go run ./scripts/gensite/ -icons "$@"
-	pnpm run format:write:only "$@"
+	pnpm exec prettier --write "$@"
 
 examples/examples.gen.json: scripts/examplegen/main.go examples/examples.go $(shell find ./examples/templates)
 	go run ./scripts/examplegen/main.go > examples/examples.gen.json
@@ -593,19 +605,19 @@ coderd/rbac/object_gen.go: scripts/rbacgen/main.go coderd/rbac/object.go
 
 docs/admin/prometheus.md: scripts/metricsdocgen/main.go scripts/metricsdocgen/metrics
 	go run scripts/metricsdocgen/main.go
-	pnpm run format:write:only ./docs/admin/prometheus.md
+	pnpm exec prettier --write ./docs/admin/prometheus.md
 
 docs/cli.md: scripts/clidocgen/main.go examples/examples.gen.json $(GO_SRC_FILES)
 	CI=true BASE_PATH="." go run ./scripts/clidocgen
-	pnpm run format:write:only ./docs/cli.md ./docs/cli/*.md ./docs/manifest.json
+	pnpm exec prettier --write ./docs/cli.md ./docs/cli/*.md ./docs/manifest.json
 
 docs/admin/audit-logs.md: coderd/database/querier.go scripts/auditdocgen/main.go enterprise/audit/table.go coderd/rbac/object_gen.go
 	go run scripts/auditdocgen/main.go
-	pnpm run format:write:only ./docs/admin/audit-logs.md
+	pnpm exec prettier --write ./docs/admin/audit-logs.md
 
 coderd/apidoc/swagger.json: $(shell find ./scripts/apidocgen $(FIND_EXCLUSIONS) -type f) $(wildcard coderd/*.go) $(wildcard enterprise/coderd/*.go) $(wildcard codersdk/*.go) $(wildcard enterprise/wsproxy/wsproxysdk/*.go) $(DB_GEN_FILES) .swaggo docs/manifest.json coderd/rbac/object_gen.go
 	./scripts/apidocgen/generate.sh
-	pnpm run format:write:only ./docs/api ./docs/manifest.json ./coderd/apidoc/swagger.json
+	pnpm exec prettier --write ./docs/api ./docs/manifest.json ./coderd/apidoc/swagger.json
 
 update-golden-files: \
 	cli/testdata/.gen-golden \

offlinedocs/package.json

@@ -4,15 +4,14 @@
   "private": true,
   "scripts": {
     "dev": "pnpm copy-images && next dev",
-    "build": "pnpm exec next build",
+    "build": "next build",
-    "start": "pnpm exec next start",
+    "start": "next start",
     "export": "pnpm copy-images && next build",
     "copy-images": "sh ./scripts/copyImages.sh",
     "lint": "pnpm run lint:types",
-    "lint:fix": "FIX=true pnpm lint",
+    "lint:types": "tsc --noEmit",
-    "lint:types": "pnpm exec tsc --noEmit",
+    "format": "prettier --cache --write './**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
-    "format:check": "pnpm exec prettier --cache --check './**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
+    "format:check": "prettier --cache --check './**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'"
-    "format:write": "pnpm exec prettier --cache --write './**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'"
   },
   "dependencies": {
     "@chakra-ui/react": "2.8.0",

package.json

@@ -3,7 +3,8 @@
   "name": "coder",
   "version": "0.0.0",
   "scripts": {
-    "format:write:only": "prettier --cache --write"
+    "format": "prettier --cache --write",
+    "storybook": "pnpm run -C site/ storybook"
   },
   "devDependencies": {
     "prettier": "3.0.0"

site/.eslintrc.yaml

@@ -52,9 +52,6 @@ overrides:
       testing-library/prefer-screen-queries: "off"
 root: true
 rules:
-  "@typescript-eslint/brace-style":
-    ["error", "1tbs", { "allowSingleLine": false }]
-  "@typescript-eslint/method-signature-style": ["error", "property"]
   # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
   "@typescript-eslint/no-misused-promises": "off"
   # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
@@ -75,6 +72,14 @@ rules:
   "@typescript-eslint/restrict-template-expressions": "off"
   # TODO: Investigate whether to enable this rule & fix and/or disable all its complaints
   "@typescript-eslint/unbound-method": "off"
+
+  "@typescript-eslint/brace-style":
+    ["error", "1tbs", { "allowSingleLine": false }]
+  "@typescript-eslint/consistent-type-imports":
+    - error
+    - fixStyle: inline-type-imports
+  "@typescript-eslint/method-signature-style": ["error", "property"]
+  "@typescript-eslint/no-import-type-side-effects": "error"
   # We're disabling the `no-namespace` rule to use a pattern of defining an interface,
   # and then defining functions that operate on that data via namespace. This is helpful for
   # dealing with immutable objects. This is a common pattern that shows up in some other
@@ -104,6 +109,13 @@ rules:
   import/no-named-as-default: "off"
   import/no-named-as-default-member: "off"
   import/prefer-default-export: "off"
+  import/order:
+    - error
+    - groups: [["builtin", "external"], "internal", "parent"]
+      newlines-between: never
+      alphabetize:
+        order: asc
+        caseInsensitive: true
   jest/no-focused-tests: "error"
   jsx-a11y/label-has-for: "off"
   jsx-a11y/no-autofocus: "off"

site/e2e/global.setup.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
+import { Language } from "pages/CreateUserPage/CreateUserForm";
 import * as constants from "./constants";
 import { STORAGE_STATE } from "./playwright.config";
-import { Language } from "pages/CreateUserPage/CreateUserForm";
 
 test("setup first user", async ({ page }) => {
   await page.goto("/", { waitUntil: "domcontentloaded" });

site/e2e/helpers.ts

@@ -1,30 +1,30 @@
-import { expect, Page } from "@playwright/test";
+import { expect, type Page } from "@playwright/test";
-import { ChildProcess, exec, spawn } from "child_process";
+import axios from "axios";
+import { type ChildProcess, exec, spawn } from "child_process";
 import { randomUUID } from "crypto";
-import path from "path";
 import express from "express";
-import { TarWriter } from "utils/tar";
+import capitalize from "lodash/capitalize";
-import {
+import path from "path";
-  Agent,
-  App,
-  AppSharingLevel,
-  Response,
-  ParseComplete,
-  PlanComplete,
-  ApplyComplete,
-  Resource,
-  RichParameter,
-} from "./provisionerGenerated";
-import { prometheusPort, agentPProfPort } from "./constants";
-import { port } from "./playwright.config";
 import * as ssh from "ssh2";
 import { Duplex } from "stream";
-import {
+import type {
   WorkspaceBuildParameter,
   UpdateTemplateMeta,
 } from "api/typesGenerated";
-import axios from "axios";
+import { TarWriter } from "utils/tar";
-import capitalize from "lodash/capitalize";
+import { prometheusPort, agentPProfPort } from "./constants";
+import { port } from "./playwright.config";
+import {
+  Agent,
+  type App,
+  AppSharingLevel,
+  type ParseComplete,
+  type PlanComplete,
+  type ApplyComplete,
+  type Resource,
+  Response,
+  type RichParameter,
+} from "./provisionerGenerated";
 
 // createWorkspace creates a workspace for a template.
 // It does not wait for it to be running, but it does navigate to the page.

site/e2e/hooks.ts

@@ -1,4 +1,4 @@
-import { Page } from "@playwright/test";
+import type { Page } from "@playwright/test";
 
 export const beforeCoderTest = async (page: Page) => {
   // eslint-disable-next-line no-console -- Show everything that was printed with console.log()

site/e2e/parameters.ts

@@ -1,4 +1,4 @@
-import { RichParameter } from "./provisionerGenerated";
+import type { RichParameter } from "./provisionerGenerated";
 
 // Rich parameters
 

site/e2e/pom/BasePom.ts

@@ -1,4 +1,4 @@
-import { Page } from "@playwright/test";
+import type { Page } from "@playwright/test";
 
 export abstract class BasePom {
   protected readonly baseURL: string | undefined;

site/e2e/pom/SignInPage.ts

@@ -1,4 +1,4 @@
-import { Page } from "@playwright/test";
+import type { Page } from "@playwright/test";
 import { BasePom } from "./BasePom";
 
 export class SignInPage extends BasePom {

site/e2e/pom/WorkspacesPage.ts

@@ -1,4 +1,4 @@
-import { Page } from "@playwright/test";
+import type { Page } from "@playwright/test";
 import { BasePom } from "./BasePom";
 
 export class WorkspacesPage extends BasePom {

site/e2e/reporter.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-console -- Logging is sort of the whole point here */
-import * as fs from "fs/promises";
 import type {
   FullConfig,
   Suite,
@@ -10,6 +9,7 @@ import type {
   TestError,
 } from "@playwright/test/reporter";
 import axios from "axios";
+import * as fs from "fs/promises";
 import type { Writable } from "stream";
 
 class CoderReporter implements Reporter {

site/e2e/tests/createWorkspace.spec.ts

@@ -5,7 +5,7 @@ import {
   echoResponsesWithParameters,
   verifyParameters,
 } from "../helpers";
-
+import { beforeCoderTest } from "../hooks";
 import {
   secondParameter,
   fourthParameter,
@@ -16,8 +16,7 @@ import {
   sixthParameter,
   randParamName,
 } from "../parameters";
-import { RichParameter } from "../provisionerGenerated";
+import type { RichParameter } from "../provisionerGenerated";
-import { beforeCoderTest } from "../hooks";
 
 test.beforeEach(async ({ page }) => await beforeCoderTest(page));
 

site/e2e/tests/externalAuth.spec.ts

@@ -1,7 +1,7 @@
+import type { Endpoints } from "@octokit/types";
 import { test } from "@playwright/test";
+import type { ExternalAuthDevice } from "api/typesGenerated";
 import { gitAuth } from "../constants";
-import { Endpoints } from "@octokit/types";
-import { ExternalAuthDevice } from "api/typesGenerated";
 import { Awaiter, createServer } from "../helpers";
 import { beforeCoderTest } from "../hooks";
 

site/e2e/tests/restartWorkspace.spec.ts

@@ -6,10 +6,9 @@ import {
   echoResponsesWithParameters,
   verifyParameters,
 } from "../helpers";
-
-import { firstBuildOption, secondBuildOption } from "../parameters";
-import { RichParameter } from "../provisionerGenerated";
 import { beforeCoderTest } from "../hooks";
+import { firstBuildOption, secondBuildOption } from "../parameters";
+import type { RichParameter } from "../provisionerGenerated";
 
 test.beforeEach(async ({ page }) => await beforeCoderTest(page));
 

site/e2e/tests/startWorkspace.spec.ts

@@ -7,9 +7,8 @@ import {
   stopWorkspace,
   verifyParameters,
 } from "../helpers";
-
 import { firstBuildOption, secondBuildOption } from "../parameters";
-import { RichParameter } from "../provisionerGenerated";
+import type { RichParameter } from "../provisionerGenerated";
 
 test("start workspace with ephemeral parameters", async ({ page }) => {
   const richParameters: RichParameter[] = [firstBuildOption, secondBuildOption];

site/e2e/tests/updateWorkspace.spec.ts

@@ -1,5 +1,4 @@
 import { test } from "@playwright/test";
-
 import {
   createTemplate,
   createWorkspace,
@@ -9,7 +8,7 @@ import {
   updateWorkspaceParameters,
   verifyParameters,
 } from "../helpers";
-
+import { beforeCoderTest } from "../hooks";
 import {
   fifthParameter,
   firstParameter,
@@ -17,8 +16,7 @@ import {
   sixthParameter,
   secondBuildOption,
 } from "../parameters";
-import { RichParameter } from "../provisionerGenerated";
+import type { RichParameter } from "../provisionerGenerated";
-import { beforeCoderTest } from "../hooks";
 
 test.beforeEach(async ({ page }) => await beforeCoderTest(page));
 

site/e2e/tests/webTerminal.spec.ts

@@ -1,11 +1,11 @@
 import { test } from "@playwright/test";
+import { randomUUID } from "crypto";
 import {
   createTemplate,
   createWorkspace,
   startAgent,
   stopAgent,
 } from "../helpers";
-import { randomUUID } from "crypto";
 import { beforeCoderTest } from "../hooks";
 
 test.beforeEach(async ({ page }) => await beforeCoderTest(page));

site/jest.setup.ts

@@ -1,14 +1,14 @@
 import "@testing-library/jest-dom";
-import { cleanup } from "@testing-library/react";
-import crypto from "crypto";
-import { server } from "testHelpers/server";
 import "jest-location-mock";
-import { TextEncoder, TextDecoder } from "util";
+import { cleanup } from "@testing-library/react";
 import { Blob } from "buffer";
+import crypto from "crypto";
 import jestFetchMock from "jest-fetch-mock";
-import { ProxyLatencyReport } from "contexts/useProxyLatency";
-import { Region } from "api/typesGenerated";
 import { useMemo } from "react";
+import { TextEncoder, TextDecoder } from "util";
+import type { Region } from "api/typesGenerated";
+import type { ProxyLatencyReport } from "contexts/useProxyLatency";
+import { server } from "testHelpers/server";
 
 jestFetchMock.enableMocks();
 

site/package.json

@@ -9,11 +9,10 @@
     "check:all": "pnpm format:check && pnpm lint && pnpm test",
     "chromatic": "chromatic",
     "dev": "vite",
+    "format": "prettier --cache --write '../**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
     "format:check": "prettier --cache --check '../**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
-    "format:write": "prettier --cache --write '../**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'",
+    "lint": "pnpm run lint:types && jest --selectProjects lint",
-    "format:write:only": "prettier --cache --write",
+    "lint:fix": "eslint --fix e2e/ src/",
-    "lint": "pnpm run lint:types && pnpm exec jest --selectProjects lint",
-    "lint:fix": "FIX=true pnpm lint",
     "lint:types": "tsc -p .",
     "playwright:install": "playwright install --with-deps chromium",
     "playwright:test": "playwright test --config=e2e/playwright.config.ts",

site/src/@types/storybook.d.ts

@@ -1,6 +1,6 @@
 import * as _storybook_types from "@storybook/react";
-import { Experiments, FeatureName } from "api/typesGenerated";
+import type { QueryKey } from "react-query";
-import { QueryKey } from "react-query";
+import type { Experiments, FeatureName } from "api/typesGenerated";
 
 declare module "@storybook/react" {
   interface Parameters {

site/src/App.tsx

@@ -1,14 +1,14 @@
-import { QueryClient, QueryClientProvider } from "react-query";
-import { type FC, type ReactNode, useEffect, useState } from "react";
-import { HelmetProvider } from "react-helmet-async";
-import { router } from "./router";
-import { ThemeProvider } from "./contexts/ThemeProvider";
-import { AuthProvider } from "./contexts/auth/AuthProvider";
-import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
-import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
 import "./theme/globalFonts";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { type FC, type ReactNode, useEffect, useState } from "react";
+import { HelmetProvider } from "react-helmet-async";
+import { QueryClient, QueryClientProvider } from "react-query";
 import { RouterProvider } from "react-router-dom";
+import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
+import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
+import { AuthProvider } from "./contexts/auth/AuthProvider";
+import { ThemeProvider } from "./contexts/ThemeProvider";
+import { router } from "./router";
 
 const defaultQueryClient = new QueryClient({
   defaultOptions: {

site/src/__mocks__/react-markdown.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from "react";
+import type { FC, PropsWithChildren } from "react";
 
 const ReactMarkdown: FC<PropsWithChildren> = ({ children }) => {
   return <div data-testid="markdown">{children}</div>;

site/src/api/api.test.ts

@@ -8,7 +8,7 @@ import {
   MockWorkspaceBuildParameter1,
 } from "testHelpers/entities";
 import * as api from "./api";
-import * as TypesGen from "./typesGenerated";
+import type * as TypesGen from "./typesGenerated";
 
 describe("api.ts", () => {
   describe("login", () => {

site/src/api/api.ts

@@ -1,10 +1,10 @@
 import axios, { isAxiosError } from "axios";
-import dayjs from "dayjs";
+import type dayjs from "dayjs";
+import userAgentParser from "ua-parser-js";
+import { delay } from "utils/delay";
 import * as TypesGen from "./typesGenerated";
 // This needs to include the `../`, otherwise it breaks when importing into
 // vscode-coder.
-import { delay } from "../utils/delay";
-import userAgentParser from "ua-parser-js";
 
 // Adds 304 for the default axios validateStatus function
 // https://github.com/axios/axios#handling-errors Check status here

site/src/api/errors.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosError, AxiosResponse } from "axios";
+import axios, { type AxiosError, type AxiosResponse } from "axios";
 
 const Language = {
   errorsByCode: {

site/src/api/queries/appearance.ts

@@ -1,6 +1,6 @@
-import { QueryClient, type UseQueryOptions } from "react-query";
+import type { QueryClient, UseQueryOptions } from "react-query";
 import * as API from "api/api";
-import { type AppearanceConfig } from "api/typesGenerated";
+import type { AppearanceConfig } from "api/typesGenerated";
 import { getMetadataAsJSON } from "utils/metadata";
 
 const initialAppearanceData = getMetadataAsJSON<AppearanceConfig>("appearance");

site/src/api/queries/audits.ts

@@ -1,7 +1,7 @@
 import { getAuditLogs } from "api/api";
-import { type AuditLogResponse } from "api/typesGenerated";
+import type { AuditLogResponse } from "api/typesGenerated";
 import { useFilterParamsKey } from "components/Filter/filter";
-import { type UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
+import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
 
 export function paginatedAudits(
   searchParams: URLSearchParams,

site/src/api/queries/authCheck.ts

@@ -1,5 +1,5 @@
-import { AuthorizationRequest } from "api/typesGenerated";
 import * as API from "api/api";
+import type { AuthorizationRequest } from "api/typesGenerated";
 
 export const AUTHORIZATION_KEY = "authorization";
 

site/src/api/queries/buildInfo.ts

@@ -1,6 +1,6 @@
-import { type UseQueryOptions } from "react-query";
+import type { UseQueryOptions } from "react-query";
-import { type BuildInfoResponse } from "api/typesGenerated";
 import * as API from "api/api";
+import type { BuildInfoResponse } from "api/typesGenerated";
 import { getMetadataAsJSON } from "utils/metadata";
 
 const initialBuildInfoData = getMetadataAsJSON<BuildInfoResponse>("build-info");

site/src/api/queries/debug.ts

@@ -1,6 +1,6 @@
+import type { QueryClient, UseMutationOptions } from "react-query";
 import * as API from "api/api";
-import { HealthSettings, UpdateHealthSettings } from "api/typesGenerated";
+import type { HealthSettings, UpdateHealthSettings } from "api/typesGenerated";
-import { QueryClient, UseMutationOptions } from "react-query";
 
 export const HEALTH_QUERY_KEY = ["health"];
 export const HEALTH_QUERY_SETTINGS_KEY = ["health", "settings"];

site/src/api/queries/entitlements.ts

@@ -1,6 +1,6 @@
-import { QueryClient, UseQueryOptions } from "react-query";
+import type { QueryClient, UseQueryOptions } from "react-query";
 import * as API from "api/api";
-import { Entitlements } from "api/typesGenerated";
+import type { Entitlements } from "api/typesGenerated";
 import { getMetadataAsJSON } from "utils/metadata";
 
 const initialEntitlementsData = getMetadataAsJSON<Entitlements>("entitlements");

site/src/api/queries/experiments.ts

@@ -1,7 +1,7 @@
+import type { UseQueryOptions } from "react-query";
 import * as API from "api/api";
+import type { Experiments } from "api/typesGenerated";
 import { getMetadataAsJSON } from "utils/metadata";
-import { type Experiments } from "api/typesGenerated";
-import { type UseQueryOptions } from "react-query";
 
 const initialExperimentsData = getMetadataAsJSON<Experiments>("experiments");
 const experimentsKey = ["experiments"] as const;

site/src/api/queries/externalAuth.ts

@@ -1,6 +1,6 @@
+import type { QueryClient, UseMutationOptions } from "react-query";
 import * as API from "api/api";
-import { ExternalAuth } from "api/typesGenerated";
+import type { ExternalAuth } from "api/typesGenerated";
-import { QueryClient, UseMutationOptions } from "react-query";
 
 // Returns all configured external auths for a given user.
 export const externalAuths = () => {

site/src/api/queries/groups.ts

@@ -1,7 +1,7 @@
-import { QueryClient, UseQueryOptions } from "react-query";
+import type { QueryClient, UseQueryOptions } from "react-query";
 import * as API from "api/api";
 import { checkAuthorization } from "api/api";
-import {
+import type {
   CreateGroupRequest,
   Group,
   PatchGroupRequest,

site/src/api/queries/integrations.ts

@@ -1,4 +1,4 @@
-import { GetJFrogXRayScanParams } from "api/api";
+import type { GetJFrogXRayScanParams } from "api/api";
 import * as API from "api/api";
 
 export const xrayScan = (params: GetJFrogXRayScanParams) => {

site/src/api/queries/settings.ts

@@ -1,9 +1,9 @@
+import type { QueryClient, QueryOptions } from "react-query";
 import * as API from "api/api";
-import {
+import type {
-  type UserQuietHoursScheduleResponse,
+  UpdateUserQuietHoursScheduleRequest,
-  type UpdateUserQuietHoursScheduleRequest,
+  UserQuietHoursScheduleResponse,
 } from "api/typesGenerated";
-import { type QueryClient, type QueryOptions } from "react-query";
 
 export const userQuietHoursScheduleKey = (userId: string) => [
   "settings",

site/src/api/queries/sshKeys.ts

@@ -1,6 +1,6 @@
-import { QueryClient } from "react-query";
+import type { QueryClient } from "react-query";
 import * as API from "api/api";
-import { GitSSHKey } from "api/typesGenerated";
+import type { GitSSHKey } from "api/typesGenerated";
 
 const getUserSSHKeyQueryKey = (userId: string) => [userId, "sshKey"];
 

site/src/api/queries/templates.ts

@@ -1,19 +1,15 @@
+import type { MutationOptions, QueryClient, QueryOptions } from "react-query";
 import * as API from "api/api";
-import {
+import type {
-  type Template,
-  type CreateTemplateVersionRequest,
-  type ProvisionerJobStatus,
-  type TemplateVersion,
   CreateTemplateRequest,
+  CreateTemplateVersionRequest,
   ProvisionerJob,
+  ProvisionerJobStatus,
   UsersRequest,
+  Template,
   TemplateRole,
+  TemplateVersion,
 } from "api/typesGenerated";
-import {
-  MutationOptions,
-  type QueryClient,
-  type QueryOptions,
-} from "react-query";
 import { delay } from "utils/delay";
 import { getTemplateVersionFiles } from "utils/templateVersion";
 

site/src/api/queries/users.ts

@@ -1,8 +1,8 @@
-import {
+import type {
-  type UseMutationOptions,
+  QueryClient,
-  type QueryClient,
+  QueryKey,
-  type QueryKey,
+  UseMutationOptions,
-  type UseQueryOptions,
+  UseQueryOptions,
 } from "react-query";
 import * as API from "api/api";
 import type {
@@ -15,10 +15,10 @@ import type {
   User,
   GenerateAPIKeyResponse,
 } from "api/typesGenerated";
-import { getAuthorizationKey } from "./authCheck";
+import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
-import { getMetadataAsJSON } from "utils/metadata";
-import { type UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
 import { prepareQuery } from "utils/filters";
+import { getMetadataAsJSON } from "utils/metadata";
+import { getAuthorizationKey } from "./authCheck";
 
 export function usersKey(req: UsersRequest) {
   return ["users", req] as const;

site/src/api/queries/workspaceBuilds.ts

@@ -1,9 +1,9 @@
-import { QueryOptions, UseInfiniteQueryOptions } from "react-query";
+import type { QueryOptions, UseInfiniteQueryOptions } from "react-query";
 import * as API from "api/api";
-import {
+import type {
-  type WorkspaceBuild,
+  WorkspaceBuild,
-  type WorkspaceBuildParameter,
+  WorkspaceBuildParameter,
-  type WorkspaceBuildsRequest,
+  WorkspaceBuildsRequest,
 } from "api/typesGenerated";
 
 export function workspaceBuildParametersKey(workspaceBuildId: string) {

site/src/api/queries/workspaceportsharing.ts

@@ -3,7 +3,7 @@ import {
   getWorkspaceAgentSharedPorts,
   upsertWorkspaceAgentSharedPort,
 } from "api/api";
-import {
+import type {
   DeleteWorkspaceAgentPortShareRequest,
   UpsertWorkspaceAgentPortShareRequest,
 } from "api/typesGenerated";

site/src/api/queries/workspaces.ts

@@ -1,19 +1,19 @@
-import * as API from "api/api";
+import type { Dayjs } from "dayjs";
-import {
+import type {
   QueryClient,
+  QueryOptions,
   UseMutationOptions,
-  type QueryOptions,
 } from "react-query";
+import * as API from "api/api";
 import { putWorkspaceExtension } from "api/api";
-import { Dayjs } from "dayjs";
+import type {
-import {
+  CreateWorkspaceRequest,
-  type WorkspaceBuildParameter,
-  type Workspace,
-  type CreateWorkspaceRequest,
-  type WorkspacesResponse,
-  type WorkspacesRequest,
-  WorkspaceBuild,
   ProvisionerLogLevel,
+  Workspace,
+  WorkspaceBuild,
+  WorkspaceBuildParameter,
+  WorkspacesRequest,
+  WorkspacesResponse,
 } from "api/typesGenerated";
 import { workspaceBuildsKey } from "./workspaceBuilds";
 

site/src/components/Abbr/Abbr.tsx

@@ -1,4 +1,4 @@
-import { type FC, type HTMLAttributes } from "react";
+import type { FC, HTMLAttributes } from "react";
 
 export type Pronunciation = "shorthand" | "acronym" | "initialism";
 

site/src/components/ActiveUserChart/ActiveUserChart.tsx

@@ -1,7 +1,9 @@
+import "chartjs-adapter-date-fns";
+import { useTheme } from "@emotion/react";
 import {
   CategoryScale,
   Chart as ChartJS,
-  ChartOptions,
+  type ChartOptions,
   defaults,
   Filler,
   Legend,
@@ -12,7 +14,10 @@ import {
   Tooltip,
   PointElement,
 } from "chart.js";
-import "chartjs-adapter-date-fns";
+import annotationPlugin from "chartjs-plugin-annotation";
+import dayjs from "dayjs";
+import type { FC } from "react";
+import { Line } from "react-chartjs-2";
 import {
   HelpTooltip,
   HelpTooltipTitle,
@@ -20,11 +25,6 @@ import {
   HelpTooltipContent,
   HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
-import dayjs from "dayjs";
-import { useTheme } from "@emotion/react";
-import { type FC } from "react";
-import { Line } from "react-chartjs-2";
-import annotationPlugin from "chartjs-plugin-annotation";
 
 ChartJS.register(
   CategoryScale,

site/src/components/Alert/Alert.stories.tsx

@@ -1,6 +1,6 @@
-import { Alert } from "./Alert";
 import Button from "@mui/material/Button";
 import type { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
 
 const meta: Meta<typeof Alert> = {
   title: "components/Alert",

site/src/components/Alert/Alert.tsx

@@ -1,15 +1,15 @@
+// eslint-disable-next-line no-restricted-imports -- It is the base component
+import MuiAlert, {
+  type AlertProps as MuiAlertProps,
+} from "@mui/material/Alert";
+import Button from "@mui/material/Button";
+import Collapse from "@mui/material/Collapse";
 import {
   useState,
   type FC,
   type ReactNode,
   type PropsWithChildren,
 } from "react";
-import Collapse from "@mui/material/Collapse";
-// eslint-disable-next-line no-restricted-imports -- It is the base component
-import MuiAlert, {
-  type AlertProps as MuiAlertProps,
-} from "@mui/material/Alert";
-import Button from "@mui/material/Button";
 
 export type AlertProps = MuiAlertProps & {
   actions?: ReactNode;

site/src/components/Alert/ErrorAlert.stories.tsx

@@ -1,6 +1,6 @@
 import Button from "@mui/material/Button";
-import { mockApiError } from "testHelpers/entities";
 import type { Meta, StoryObj } from "@storybook/react";
+import { mockApiError } from "testHelpers/entities";
 import { ErrorAlert } from "./ErrorAlert";
 
 const mockError = mockApiError({

site/src/components/Alert/ErrorAlert.tsx

@@ -1,7 +1,7 @@
-import { AlertProps, Alert, AlertDetail } from "./Alert";
 import AlertTitle from "@mui/material/AlertTitle";
+import type { FC } from "react";
 import { getErrorMessage, getErrorDetail } from "api/errors";
-import { FC } from "react";
+import { Alert, AlertDetail, type AlertProps } from "./Alert";
 
 export const ErrorAlert: FC<
   Omit<AlertProps, "severity" | "children"> & { error: unknown }

site/src/components/Avatar/Avatar.stories.tsx

@@ -1,6 +1,6 @@
+import PauseIcon from "@mui/icons-material/PauseOutlined";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Avatar, AvatarIcon } from "./Avatar";
-import PauseIcon from "@mui/icons-material/PauseOutlined";
 
 const meta: Meta<typeof Avatar> = {
   title: "components/Avatar",

site/src/components/Avatar/Avatar.tsx

@@ -1,11 +1,11 @@
+import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 // This is the only place MuiAvatar can be used
 // eslint-disable-next-line no-restricted-imports -- Read above
 import MuiAvatar, {
   type AvatarProps as MuiAvatarProps,
 } from "@mui/material/Avatar";
-import { type FC, useId } from "react";
-import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { visuallyHidden } from "@mui/utils";
+import { type FC, useId } from "react";
 import { getExternalImageStylesFromUrl } from "theme/externalImages";
 
 export type AvatarProps = MuiAvatarProps & {

site/src/components/AvatarCard/AvatarCard.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { AvatarCard } from "./AvatarCard";
 
 const meta: Meta<typeof AvatarCard> = {

site/src/components/AvatarCard/AvatarCard.tsx

@@ -1,6 +1,6 @@
-import { type FC, type ReactNode } from "react";
-import { Avatar } from "components/Avatar/Avatar";
 import { type CSSObject, useTheme } from "@emotion/react";
+import type { FC, ReactNode } from "react";
+import { Avatar } from "components/Avatar/Avatar";
 
 type AvatarCardProps = {
   header: string;

site/src/components/AvatarData/AvatarData.tsx

@@ -1,5 +1,5 @@
-import type { FC, ReactNode } from "react";
 import { useTheme } from "@emotion/react";
+import type { FC, ReactNode } from "react";
 import { Avatar } from "components/Avatar/Avatar";
 import { Stack } from "components/Stack/Stack";
 

site/src/components/AvatarData/AvatarDataSkeleton.tsx

@@ -1,6 +1,6 @@
-import { FC } from "react";
-import { Stack } from "components/Stack/Stack";
 import Skeleton from "@mui/material/Skeleton";
+import type { FC } from "react";
+import { Stack } from "components/Stack/Stack";
 
 export const AvatarDataSkeleton: FC = () => {
   return (

site/src/components/Badges/Badges.tsx

@@ -1,11 +1,11 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import Tooltip from "@mui/material/Tooltip";
 import {
-  type PropsWithChildren,
   type FC,
   forwardRef,
-  HTMLAttributes,
+  type HTMLAttributes,
+  type PropsWithChildren,
 } from "react";
-import Tooltip from "@mui/material/Tooltip";
-import { type Interpolation, type Theme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
 
 const styles = {

site/src/components/BuildAvatar/BuildAvatar.tsx

@@ -1,12 +1,12 @@
-import Badge from "@mui/material/Badge";
 import { css, cx } from "@emotion/css";
 import { useTheme } from "@emotion/react";
-import { type FC } from "react";
+import Badge from "@mui/material/Badge";
+import type { FC } from "react";
 import type { WorkspaceBuild } from "api/typesGenerated";
-import { getDisplayWorkspaceBuildStatus } from "utils/workspace";
+import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
-import { useClassName } from "hooks/useClassName";
-import { Avatar, AvatarProps } from "components/Avatar/Avatar";
 import { BuildIcon } from "components/BuildIcon/BuildIcon";
+import { useClassName } from "hooks/useClassName";
+import { getDisplayWorkspaceBuildStatus } from "utils/workspace";
 
 export interface BuildAvatarProps {
   build: WorkspaceBuild;

site/src/components/BuildIcon/BuildIcon.tsx

@@ -1,8 +1,8 @@
+import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
 import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined";
 import StopOutlined from "@mui/icons-material/StopOutlined";
-import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
+import type { ComponentProps } from "react";
-import { WorkspaceTransition } from "api/typesGenerated";
+import type { WorkspaceTransition } from "api/typesGenerated";
-import { ComponentProps } from "react";
 
 type SVGIcon = typeof PlayArrowOutlined;
 

site/src/components/CodeExample/CodeExample.tsx

@@ -1,8 +1,8 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import { visuallyHidden } from "@mui/utils";
 import { type FC, type KeyboardEvent, type MouseEvent, useRef } from "react";
-import { type Interpolation, type Theme } from "@emotion/react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { CopyButton } from "../CopyButton/CopyButton";
-import { visuallyHidden } from "@mui/utils";
 
 export interface CodeExampleProps {
   code: string;

site/src/components/Conditionals/ChooseOne.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { ChooseOne, Cond } from "./ChooseOne";
 
 const meta: Meta<typeof ChooseOne> = {

site/src/components/CopyButton/CopyButton.tsx

@@ -1,7 +1,7 @@
+import { css, type Interpolation, type Theme } from "@emotion/react";
+import Check from "@mui/icons-material/Check";
 import IconButton from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
-import Check from "@mui/icons-material/Check";
-import { css, type Interpolation, type Theme } from "@emotion/react";
 import { forwardRef, type ReactNode } from "react";
 import { useClipboard } from "hooks/useClipboard";
 import { FileCopyIcon } from "../Icons/FileCopyIcon";

site/src/components/CopyableValue/CopyableValue.tsx

@@ -1,5 +1,5 @@
 import Tooltip, { type TooltipProps } from "@mui/material/Tooltip";
-import { type FC, type HTMLAttributes } from "react";
+import type { FC, HTMLAttributes } from "react";
 import { useClickable } from "hooks/useClickable";
 import { useClipboard } from "hooks/useClipboard";
 

site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, screen } from "@testing-library/react";
-import { ConfirmDialog } from "./ConfirmDialog";
 import { renderComponent } from "testHelpers/renderHelpers";
+import { ConfirmDialog } from "./ConfirmDialog";
 
 describe("ConfirmDialog", () => {
   it("onClose is called when cancelled", () => {

site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

@@ -1,6 +1,6 @@
+import type { Interpolation, Theme } from "@emotion/react";
 import DialogActions from "@mui/material/DialogActions";
-import { type Interpolation, type Theme } from "@emotion/react";
+import type { FC, ReactNode } from "react";
-import { type FC, type ReactNode } from "react";
 import {
   Dialog,
   DialogActionButtons,

site/src/components/Dialogs/DeleteDialog/DeleteDialog.test.tsx

@@ -1,8 +1,8 @@
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
 import { renderComponent } from "testHelpers/renderHelpers";
 import { DeleteDialog } from "./DeleteDialog";
-import { act } from "react-dom/test-utils";
 
 const inputTestId = "delete-dialog-name-confirmation";
 

site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx

@@ -1,5 +1,5 @@
+import type { Interpolation, Theme } from "@emotion/react";
 import TextField from "@mui/material/TextField";
-import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC, type FormEvent, useId, useState } from "react";
 import { Stack } from "../../Stack/Stack";
 import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog";

site/src/components/Dialogs/Dialog.tsx

@@ -1,8 +1,10 @@
-import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
+import type { Interpolation, Theme } from "@emotion/react";
-import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton";
+import LoadingButton, { type LoadingButtonProps } from "@mui/lab/LoadingButton";
-import { type Interpolation, type Theme } from "@emotion/react";
+import MuiDialog, {
-import { type FC, type ReactNode } from "react";
+  type DialogProps as MuiDialogProps,
-import { ConfirmDialogType } from "./types";
+} from "@mui/material/Dialog";
+import type { FC, ReactNode } from "react";
+import type { ConfirmDialogType } from "./types";
 
 export interface DialogActionButtonsProps {
   /** Text to display in the cancel button */

site/src/components/DropdownArrow/DropdownArrow.stories.tsx

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { chromatic } from "testHelpers/chromatic";
 import { DropdownArrow } from "./DropdownArrow";
 

site/src/components/DropdownArrow/DropdownArrow.tsx

@@ -1,7 +1,7 @@
+import type { Interpolation, Theme } from "@emotion/react";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
-import { type Interpolation, type Theme } from "@emotion/react";
+import type { FC } from "react";
-import { type FC } from "react";
 
 interface ArrowProps {
   margin?: boolean;

site/src/components/EmptyState/EmptyState.stories.tsx

@@ -1,6 +1,6 @@
 import Button from "@mui/material/Button";
-import { EmptyState } from "./EmptyState";
 import type { Meta, StoryObj } from "@storybook/react";
+import { EmptyState } from "./EmptyState";
 
 const meta: Meta<typeof EmptyState> = {
   title: "components/EmptyState",

site/src/components/ErrorBoundary/RuntimeErrorState.tsx

@@ -1,15 +1,15 @@
+import { css, type Interpolation, type Theme } from "@emotion/react";
+import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
-import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
 import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
-import { css, type Interpolation, type Theme } from "@emotion/react";
 import type { BuildInfoResponse } from "api/typesGenerated";
 import { CopyButton } from "components/CopyButton/CopyButton";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";
-import { Stack } from "components/Stack/Stack";
 import { Margins } from "components/Margins/Margins";
+import { Stack } from "components/Stack/Stack";
 
 const fetchDynamicallyImportedModuleError =
   "Failed to fetch dynamically imported module";

site/src/components/Expander/Expander.stories.tsx

@@ -1,5 +1,5 @@
-import { Expander } from "./Expander";
 import type { Meta, StoryObj } from "@storybook/react";
+import { Expander } from "./Expander";
 
 const meta: Meta<typeof Expander> = {
   title: "components/Expander",

site/src/components/Expander/Expander.tsx

@@ -1,7 +1,7 @@
-import { type Interpolation, type Theme } from "@emotion/react";
+import type { Interpolation, Theme } from "@emotion/react";
 import Collapse from "@mui/material/Collapse";
 import Link from "@mui/material/Link";
-import { type FC, type ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 
 export interface ExpanderProps {

site/src/components/FileUpload/FileUpload.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import { FileUpload } from "./FileUpload";
 import { ThemeProvider } from "contexts/ThemeProvider";
+import { FileUpload } from "./FileUpload";
 
 test("accepts files with the correct extension", async () => {
   const onUpload = jest.fn();

site/src/components/FileUpload/FileUpload.tsx

@@ -1,12 +1,12 @@
-import { Stack } from "components/Stack/Stack";
+import { css, type Interpolation, type Theme } from "@emotion/react";
-import { type FC, type DragEvent, useRef, type ReactNode } from "react";
 import UploadIcon from "@mui/icons-material/CloudUploadOutlined";
-import { useClickable } from "hooks/useClickable";
-import CircularProgress from "@mui/material/CircularProgress";
-import IconButton from "@mui/material/IconButton";
 import RemoveIcon from "@mui/icons-material/DeleteOutline";
 import FileIcon from "@mui/icons-material/FolderOutlined";
-import { css, type Interpolation, type Theme } from "@emotion/react";
+import CircularProgress from "@mui/material/CircularProgress";
+import IconButton from "@mui/material/IconButton";
+import { type FC, type DragEvent, useRef, type ReactNode } from "react";
+import { Stack } from "components/Stack/Stack";
+import { useClickable } from "hooks/useClickable";
 
 export interface FileUploadProps {
   isUploading: boolean;

site/src/components/Filter/OptionItem.stories.tsx

@@ -1,5 +1,5 @@
-import { OptionItem } from "./filter";
 import type { Meta, StoryObj } from "@storybook/react";
+import { OptionItem } from "./filter";
 
 const meta: Meta<typeof OptionItem> = {
   title: "components/Filter/OptionItem",

site/src/components/Filter/UserFilter.tsx

@@ -1,10 +1,10 @@
-import { type FC } from "react";
+import type { FC } from "react";
 import { getUsers } from "api/api";
 import { useMe } from "contexts/auth/useMe";
 import { UserAvatar } from "../UserAvatar/UserAvatar";
 import { FilterSearchMenu, OptionItem } from "./filter";
-import { UseFilterMenuOptions, useFilterMenu } from "./menu";
+import { type UseFilterMenuOptions, useFilterMenu } from "./menu";
-import { BaseOption } from "./options";
+import type { BaseOption } from "./options";
 
 export type UserOption = BaseOption & {
   avatarUrl?: string;

site/src/components/Filter/filter.tsx

@@ -1,19 +1,19 @@
-import TextField from "@mui/material/TextField";
+import { useTheme } from "@emotion/react";
-import Button, { type ButtonProps } from "@mui/material/Button";
-import Menu, { type MenuProps } from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import InputAdornment from "@mui/material/InputAdornment";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import Skeleton, { type SkeletonProps } from "@mui/material/Skeleton";
-import MenuList from "@mui/material/MenuList";
-import Divider from "@mui/material/Divider";
-import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import CheckOutlined from "@mui/icons-material/CheckOutlined";
 import CloseOutlined from "@mui/icons-material/CloseOutlined";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import SearchOutlined from "@mui/icons-material/SearchOutlined";
-import { useTheme } from "@emotion/react";
+import Button, { type ButtonProps } from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import Menu, { type MenuProps } from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import Skeleton, { type SkeletonProps } from "@mui/material/Skeleton";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
 import {
   type FC,
   type ReactNode,
@@ -22,22 +22,22 @@ import {
   useRef,
   useState,
 } from "react";
-import { useSearchParams } from "react-router-dom";
+import type { useSearchParams } from "react-router-dom";
 import {
   getValidationErrorMessage,
   hasError,
   isApiValidationError,
 } from "api/errors";
 import { Loader } from "components/Loader/Loader";
-import { useDebouncedFunction } from "hooks/debounce";
-import { useFilterMenu } from "./menu";
-import type { BaseOption } from "./options";
 import {
   Search,
   SearchEmpty,
   SearchInput,
   searchStyles,
 } from "components/Menu/Search";
+import { useDebouncedFunction } from "hooks/debounce";
+import type { useFilterMenu } from "./menu";
+import type { BaseOption } from "./options";
 
 export type PresetFilter = {
   name: string;

site/src/components/Filter/menu.ts

@@ -1,6 +1,6 @@
 import { useMemo, useRef, useState } from "react";
-import { BaseOption } from "./options";
 import { useQuery } from "react-query";
+import type { BaseOption } from "./options";
 
 export type UseFilterMenuOptions<TOption extends BaseOption> = {
   id: string;

site/src/components/Filter/storyHelpers.ts

@@ -1,6 +1,6 @@
 import { action } from "@storybook/addon-actions";
-import { UseFilterResult } from "./filter";
+import type { UseFilterResult } from "./filter";
-import { UseFilterMenuResult } from "./menu";
+import type { UseFilterMenuResult } from "./menu";
 
 export const MockMenu: UseFilterMenuResult = {
   initialOption: undefined,

site/src/components/Form/Form.tsx

@@ -1,18 +1,18 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import {
+  type ComponentProps,
   createContext,
   type FC,
-  type HTMLProps,
-  useContext,
-  ReactNode,
-  ComponentProps,
   forwardRef,
+  type HTMLProps,
+  type ReactNode,
+  useContext,
 } from "react";
 import { AlphaBadge, DeprecatedBadge } from "components/Badges/Badges";
 import { Stack } from "components/Stack/Stack";
 import {
   FormFooter as BaseFormFooter,
-  FormFooterProps,
+  type FormFooterProps,
   type FormFooterStyles,
 } from "../FormFooter/FormFooter";
 

site/src/components/FormFooter/FormFooter.stories.tsx

@@ -1,5 +1,5 @@
-import { FormFooter } from "./FormFooter";
 import type { Meta, StoryObj } from "@storybook/react";
+import { FormFooter } from "./FormFooter";
 
 const meta: Meta<typeof FormFooter> = {
   title: "components/FormFooter",

site/src/components/FormFooter/FormFooter.tsx

@@ -1,7 +1,7 @@
-import Button from "@mui/material/Button";
+import type { Interpolation, Theme } from "@emotion/react";
-import { type FC } from "react";
-import { Interpolation, Theme } from "@emotion/react";
 import LoadingButton from "@mui/lab/LoadingButton";
+import Button from "@mui/material/Button";
+import type { FC } from "react";
 
 export const Language = {
   cancelLabel: "Cancel",

site/src/components/FullPageForm/FullPageForm.stories.tsx

@@ -1,11 +1,12 @@
 import TextField from "@mui/material/TextField";
 import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { FC } from "react";
 import { FormFooter } from "../FormFooter/FormFooter";
 import { Stack } from "../Stack/Stack";
-import { FullPageForm, FullPageFormProps } from "./FullPageForm";
+import { FullPageForm, type FullPageFormProps } from "./FullPageForm";
-import type { Meta, StoryObj } from "@storybook/react";
 
-const Template = (props: FullPageFormProps) => (
+const Template: FC<FullPageFormProps> = (props) => (
   <FullPageForm {...props}>
     <form
       onSubmit={(e) => {

site/src/components/FullPageForm/FullPageForm.tsx

@@ -1,5 +1,5 @@
+import type { FC, ReactNode } from "react";
 import { Margins } from "components/Margins/Margins";
-import { type FC, type ReactNode } from "react";
 import {
   PageHeader,
   PageHeaderTitle,

site/src/components/FullPageForm/FullPageHorizontalForm.tsx

@@ -1,5 +1,5 @@
 import Button from "@mui/material/Button";
-import { type FC, type ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { Margins } from "components/Margins/Margins";
 import {
   PageHeader,

site/src/components/FullPageLayout/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import { type ComponentProps, type FC, type HTMLAttributes } from "react";
+import type { ComponentProps, FC, HTMLAttributes } from "react";
 import { Link, type LinkProps } from "react-router-dom";
 import { TopbarIconButton } from "./Topbar";
 

site/src/components/FullPageLayout/Topbar.tsx

@@ -1,16 +1,16 @@
 import { css } from "@emotion/css";
-import Button, { ButtonProps } from "@mui/material/Button";
-import IconButton, { IconButtonProps } from "@mui/material/IconButton";
 import { useTheme } from "@emotion/react";
-import { AvatarProps, ExternalAvatar } from "components/Avatar/Avatar";
+import Button, { type ButtonProps } from "@mui/material/Button";
+import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
 import {
+  cloneElement,
   type FC,
   type ForwardedRef,
+  forwardRef,
   type HTMLAttributes,
   type ReactElement,
-  cloneElement,
-  forwardRef,
 } from "react";
+import { type AvatarProps, ExternalAvatar } from "components/Avatar/Avatar";
 
 export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
   const theme = useTheme();

site/src/components/GlobalSnackbar/EnterpriseSnackbar.stories.tsx

@@ -1,6 +1,5 @@
-import { EnterpriseSnackbar } from "./EnterpriseSnackbar";
-
 import type { Meta, StoryObj } from "@storybook/react";
+import { EnterpriseSnackbar } from "./EnterpriseSnackbar";
 
 const meta: Meta<typeof EnterpriseSnackbar> = {
   title: "components/EnterpriseSnackbar",

site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx

@@ -1,10 +1,10 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import CloseIcon from "@mui/icons-material/Close";
 import IconButton from "@mui/material/IconButton";
 import Snackbar, {
   type SnackbarProps as MuiSnackbarProps,
 } from "@mui/material/Snackbar";
-import CloseIcon from "@mui/icons-material/Close";
+import type { FC } from "react";
-import { type FC } from "react";
-import { type Interpolation, type Theme } from "@emotion/react";
 import { type ClassName, useClassName } from "hooks/useClassName";
 
 type EnterpriseSnackbarVariant = "error" | "info" | "success";

site/src/components/GlobalSnackbar/GlobalSnackbar.tsx

@@ -1,7 +1,8 @@
+import type { Interpolation, Theme } from "@emotion/react";
 import { type FC, useState } from "react";
 import { useCustomEvent } from "hooks/events";
-import { EnterpriseSnackbar } from "./EnterpriseSnackbar";
 import { ErrorIcon } from "../Icons/ErrorIcon";
+import { EnterpriseSnackbar } from "./EnterpriseSnackbar";
 import {
   type AdditionalMessage,
   isNotificationList,
@@ -11,7 +12,6 @@ import {
   type NotificationMsg,
   SnackbarEventType,
 } from "./utils";
-import { type Interpolation, type Theme } from "@emotion/react";
 
 const variantFromMsgType = (type: MsgType) => {
   if (type === MsgType.Error) {

site/src/components/GlobalSnackbar/utils.test.ts

@@ -3,8 +3,8 @@ import {
   displaySuccess,
   isNotificationTextPrefixed,
   MsgType,
-  NotificationMsg,
+  type NotificationMsg,
-  NotificationTextPrefixed,
+  type NotificationTextPrefixed,
   SnackbarEventType,
 } from "./utils";
 

site/src/components/GroupAvatar/GroupAvatar.stories.tsx

@@ -1,5 +1,5 @@
-import { GroupAvatar } from "./GroupAvatar";
 import type { Meta, StoryObj } from "@storybook/react";
+import { GroupAvatar } from "./GroupAvatar";
 
 const meta: Meta<typeof GroupAvatar> = {
   title: "components/GroupAvatar",

site/src/components/GroupAvatar/GroupAvatar.tsx

@@ -1,8 +1,8 @@
-import Badge from "@mui/material/Badge";
 import Group from "@mui/icons-material/Group";
-import { type FC } from "react";
+import Badge from "@mui/material/Badge";
-import { type ClassName, useClassName } from "hooks/useClassName";
+import type { FC } from "react";
 import { Avatar } from "components/Avatar/Avatar";
+import { type ClassName, useClassName } from "hooks/useClassName";
 
 export interface GroupAvatarProps {
   name: string;

site/src/components/HelpTooltip/HelpTooltip.stories.tsx

@@ -1,3 +1,4 @@
+import type { Meta, StoryObj } from "@storybook/react";
 import {
   HelpTooltip,
   HelpTooltipLink,
@@ -5,7 +6,6 @@ import {
   HelpTooltipText,
   HelpTooltipTitle,
 } from "./HelpTooltip";
-import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof HelpTooltip> = {
   title: "components/HelpTooltip",

site/src/components/HelpTooltip/HelpTooltip.tsx

@@ -1,6 +1,8 @@
-import Link from "@mui/material/Link";
+import type { CSSObject } from "@emotion/css";
+import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import HelpIcon from "@mui/icons-material/HelpOutline";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import Link from "@mui/material/Link";
 import {
   type FC,
   type PropsWithChildren,
@@ -8,9 +10,6 @@ import {
   type ReactNode,
   forwardRef,
 } from "react";
-import { Stack } from "components/Stack/Stack";
-import { type CSSObject } from "@emotion/css";
-import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import {
   Popover,
   type PopoverProps,
@@ -19,6 +18,7 @@ import {
   PopoverTrigger,
   usePopover,
 } from "components/Popover/Popover";
+import { Stack } from "components/Stack/Stack";
 
 type Icon = typeof HelpIcon;
 

site/src/components/IconField/EmojiPicker.tsx

@@ -1,6 +1,6 @@
-import EmojiMart, { type EmojiMartProps } from "@emoji-mart/react";
 import data from "@emoji-mart/data/sets/14/twitter.json";
-import { type FC } from "react";
+import EmojiMart, { type EmojiMartProps } from "@emoji-mart/react";
+import type { FC } from "react";
 import icons from "theme/icons.json";
 
 const custom = [

site/src/components/IconField/IconField.tsx

@@ -4,15 +4,15 @@ import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import { visuallyHidden } from "@mui/utils";
 import { type FC, lazy, Suspense } from "react";
-import { Loader } from "components/Loader/Loader";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
-import { Stack } from "components/Stack/Stack";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
+import { Loader } from "components/Loader/Loader";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "components/Popover/Popover";
-import { ExternalImage } from "components/ExternalImage/ExternalImage";
+import { Stack } from "components/Stack/Stack";
 
 // See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222
 const urlFromUnifiedCode = (unified: string) =>

site/src/components/Icons/CoderIcon.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
 /**
  * CoderIcon represents the cloud with brackets Coder brand icon. It does not

site/src/components/Icons/DockerIcon.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
 export const DockerIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 32 32">