refactor: extract workspace duplication outside CreateWorkspacePage file

Parkreiner · Parkreiner · commit 4554895aa4d6 · 2023-10-20T14:39:09.000Z
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
@@ -29,7 +29,6 @@ import { checkAuthorization } from "api/queries/authCheck";
 import { CreateWSPermissions, createWorkspaceChecks } from "./permissions";
 import { paramsUsedToCreateWorkspace } from "utils/workspace";
 import { useEffectEvent } from "hooks/hookPolyfills";
-import { workspaceBuildParameters } from "api/queries/workspaceBuilds";
 
 export const createWorkspaceModes = ["form", "auto", "duplicate"] as const;
 export type CreateWorkspaceMode = (typeof createWorkspaceModes)[number];
@@ -264,64 +263,3 @@ function getDefaultName(mode: CreateWorkspaceMode, params: URLSearchParams) {
 
   return paramsName ?? "";
 }
-
-function getDuplicationUrlParams(
-  workspaceParams: readonly WorkspaceBuildParameter[],
-  workspace: Workspace,
-): URLSearchParams {
-  // Record type makes sure that every property key added starts with "param.";
-  // page is also set up to parse params with this prefix for auto mode
-  const consolidatedParams: Record<`param.${string}`, string> = {};
-
-  for (const p of workspaceParams) {
-    consolidatedParams[`param.${p.name}`] = p.value;
-  }
-
-  return new URLSearchParams({
-    ...consolidatedParams,
-    mode: "duplicate" satisfies CreateWorkspaceMode,
-    name: workspace.name,
-    version: workspace.template_active_version_id,
-  });
-}
-
-/**
- * Takes a workspace, and returns out a function that will navigate the user to
- * the 'Create Workspace' page, pre-filling the form with as much information
- * about the workspace as possible.
- */
-// Meant to be consumed by components outside of this file
-export function useWorkspaceDuplication(workspace: Workspace) {
-  const navigate = useNavigate();
-  const buildParametersQuery = useQuery(
-    workspaceBuildParameters(workspace.latest_build.id),
-  );
-
-  // Not using useEffectEvent for this, because useEffect isn't really an
-  // intended use case for this custom hook
-  const duplicateWorkspace = useCallback(() => {
-    const buildParams = buildParametersQuery.data;
-    if (buildParams === undefined) {
-      return;
-    }
-
-    const newUrlParams = getDuplicationUrlParams(buildParams, workspace);
-
-    // Necessary for giving modals/popups time to flush their state changes and
-    // close the popup before actually navigating. MUI does provide the
-    // disablePortal prop, which also side-steps this issue, but you have to
-    // remember to put it on any component that calls this function. Better to
-    // code defensively and have some redundancy in case someone forgets
-    void Promise.resolve().then(() => {
-      navigate({
-        pathname: `/templates/${workspace.template_name}/workspace`,
-        search: newUrlParams.toString(),
-      });
-    });
-  }, [navigate, workspace, buildParametersQuery.data]);
-
-  return {
-    duplicateWorkspace,
-    duplicationReady: buildParametersQuery.isSuccess,
-  } as const;
-}
diff --git a/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.ts b/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.ts
@@ -0,0 +1,71 @@
+import { useNavigate } from "react-router-dom";
+import { useQuery } from "react-query";
+import { type CreateWorkspaceMode } from "./CreateWorkspacePage";
+import {
+  type Workspace,
+  type WorkspaceBuildParameter,
+} from "api/typesGenerated";
+import { workspaceBuildParameters } from "api/queries/workspaceBuilds";
+import { useCallback } from "react";
+
+function getDuplicationUrlParams(
+  workspaceParams: readonly WorkspaceBuildParameter[],
+  workspace: Workspace,
+): URLSearchParams {
+  // Record type makes sure that every property key added starts with "param.";
+  // page is also set up to parse params with this prefix for auto mode
+  const consolidatedParams: Record<`param.${string}`, string> = {};
+
+  for (const p of workspaceParams) {
+    consolidatedParams[`param.${p.name}`] = p.value;
+  }
+
+  return new URLSearchParams({
+    ...consolidatedParams,
+    mode: "duplicate" satisfies CreateWorkspaceMode,
+    name: workspace.name,
+    version: workspace.template_active_version_id,
+  });
+}
+
+/**
+ * Takes a workspace, and returns out a function that will navigate the user to
+ * the 'Create Workspace' page, pre-filling the form with as much information
+ * about the workspace as possible.
+ */
+export function useWorkspaceDuplication(workspace?: Workspace) {
+  const navigate = useNavigate();
+  const buildParametersQuery = useQuery(
+    workspace !== undefined
+      ? workspaceBuildParameters(workspace.latest_build.id)
+      : { enabled: false },
+  );
+
+  // Not using useEffectEvent for this, because useEffect isn't really an
+  // intended use case for this custom hook
+  const duplicateWorkspace = useCallback(() => {
+    const buildParams = buildParametersQuery.data;
+    if (buildParams === undefined || workspace === undefined) {
+      return;
+    }
+
+    const newUrlParams = getDuplicationUrlParams(buildParams, workspace);
+
+    // Necessary for giving modals/popups time to flush their state changes and
+    // close the popup before actually navigating. MUI does provide the
+    // disablePortal prop, which also side-steps this issue, but you have to
+    // remember to put it on any component that calls this function. Better to
+    // code defensively and have some redundancy in case someone forgets
+    void Promise.resolve().then(() => {
+      navigate({
+        pathname: `/templates/${workspace.template_name}/workspace`,
+        search: newUrlParams.toString(),
+      });
+    });
+  }, [navigate, workspace, buildParametersQuery.data]);
+
+  return {
+    duplicateWorkspace,
+    duplicationReady: buildParametersQuery.isSuccess,
+  } as const;
+}
