refactor: centralize workspace duplication logic

Parkreiner · Parkreiner · commit d98a5e0e293b · 2023-10-12T22:14:01.000Z
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
@@ -64,8 +64,7 @@ const CreateWorkspacePage: FC = () => {
 
   const defaultBuildParameters = getDefaultBuildParameters(searchParams);
   const mode = getWorkspaceMode(searchParams);
-  const defaultName =
-    mode === "auto" ? generateUniqueName() : searchParams.get("name") ?? "";
+  const defaultName = getDefaultName(mode, searchParams);
 
   const onCreateWorkspace = (workspace: Workspace) => {
     navigate(`/@${workspace.owner_name}/${workspace.name}`);
@@ -177,15 +176,39 @@ const useExternalAuth = (versionId: string | undefined) => {
 
   const isAllSignedIn = authList?.every((it) => it.authenticated) ?? false;
 
-  // Doing inline state sync to minimize extra re-renders that useEffect
-  // approach would involve
+  // Doing state sync inline, because doing it inside a useEffect call would add
+  // unnecessary renders and re-painting.
   if (isAllSignedIn && pollingStatus === "polling") {
     setPollingStatus("idle");
   }
 
   return { authList, isAllSignedIn, pollingStatus, startPolling } as const;
 };
 
+/**
+ * Returns a function that takes a workspace, and then navigates the user to the
+ * workspace creation page, with the form pre-filled with the provided
+ * workspace's parameters.
+ */
+export function useWorkspaceDuplication() {
+  const navigate = useNavigate();
+
+  return useCallback(
+    (workspace: Workspace) => {
+      const workspaceCreationParams = new URLSearchParams({
+        mode: "duplicate" satisfies CreateWorkspaceMode,
+        name: workspace.name,
+      });
+
+      navigate({
+        pathname: `/templates/${workspace.template_name}/workspace`,
+        search: workspaceCreationParams.toString(),
+      });
+    },
+    [navigate],
+  );
+}
+
 function getWorkspaceMode(params: URLSearchParams): CreateWorkspaceMode {
   const paramMode = params.get("mode");
   if (createWorkspaceModes.includes(paramMode as CreateWorkspaceMode)) {
@@ -195,6 +218,19 @@ function getWorkspaceMode(params: URLSearchParams): CreateWorkspaceMode {
   return "form";
 }
 
+function getDefaultName(mode: CreateWorkspaceMode, params: URLSearchParams) {
+  if (mode === "auto") {
+    return generateUniqueName();
+  }
+
+  const paramsName = params.get("name");
+  if (mode === "duplicate" && paramsName) {
+    return `${paramsName}-copy`;
+  }
+
+  return paramsName ?? "";
+}
+
 type AutomatedWorkspaceConfig = {
   auto: boolean;
   payload: AutoCreateWorkspaceOptions;
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -49,7 +49,6 @@ export interface WorkspaceProps {
   handleUpdate: () => void;
   handleCancel: () => void;
   handleSettings: () => void;
-  handleClone: () => void;
   handleChangeVersion: () => void;
   handleDormantActivate: () => void;
   isUpdating: boolean;
@@ -88,7 +87,6 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   handleUpdate,
   handleCancel,
   handleSettings,
-  handleClone,
   handleChangeVersion,
   handleDormantActivate: handleDormantActivate,
   workspace,
@@ -203,7 +201,6 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
               handleUpdate={handleUpdate}
               handleCancel={handleCancel}
               handleSettings={handleSettings}
-              handleClone={handleClone}
               handleChangeVersion={handleChangeVersion}
               handleDormantActivate={handleDormantActivate}
               canChangeVersions={canChangeVersions}
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -26,6 +26,7 @@ import HistoryIcon from "@mui/icons-material/HistoryOutlined";
 import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 import MoreOptionsIcon from "@mui/icons-material/MoreVertOutlined";
 import DuplicateIcon from "@mui/icons-material/FileCopyOutlined";
+import { useWorkspaceDuplication } from "pages/CreateWorkspacePage/CreateWorkspacePage";
 
 export interface WorkspaceActionsProps {
   workspace: Workspace;
@@ -35,7 +36,6 @@ export interface WorkspaceActionsProps {
   handleDelete: () => void;
   handleUpdate: () => void;
   handleCancel: () => void;
-  handleClone: () => void;
   handleSettings: () => void;
   handleChangeVersion: () => void;
   handleDormantActivate: () => void;
@@ -54,7 +54,6 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   handleUpdate,
   handleCancel,
   handleSettings,
-  handleClone,
   handleChangeVersion,
   handleDormantActivate: handleDormantActivate,
   isUpdating,
@@ -92,6 +91,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   const styles = useStyles();
   const menuTriggerRef = useRef<HTMLButtonElement>(null);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const duplicateWorkspace = useWorkspaceDuplication();
 
   // Returns a function that will execute the action and close the menu
   const onMenuItemClick = (actionFn: () => void) => () => {
@@ -151,7 +151,9 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
             </MenuItem>
           )}
 
-          <MenuItem onClick={onMenuItemClick(handleClone)}>
+          <MenuItem
+            onClick={onMenuItemClick(() => duplicateWorkspace(workspace))}
+          >
             <DuplicateIcon />
             Duplicate&hellip;
           </MenuItem>
diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -34,7 +34,6 @@ import { templateVersion, templateVersions } from "api/queries/templates";
 import { Alert } from "components/Alert/Alert";
 import { Stack } from "components/Stack/Stack";
 import { useWorkspaceBuildLogs } from "hooks/useWorkspaceBuildLogs";
-import { type CreateWorkspaceMode } from "../CreateWorkspacePage/CreateWorkspacePage";
 
 interface WorkspaceReadyPageProps {
   workspaceState: StateFrom<typeof workspaceMachine>;
@@ -117,22 +116,6 @@ export const WorkspaceReadyPage = ({
     bannerSend({ type: "REFRESH_WORKSPACE", workspace });
   }, [bannerSend, workspace]);
 
-  const handleWorkspaceCloning = () => {
-    if (template?.name === undefined) {
-      return;
-    }
-
-    const workspaceCreationParams = new URLSearchParams({
-      mode: "duplicate" satisfies CreateWorkspaceMode,
-      name: workspace.name,
-    });
-
-    navigate({
-      pathname: `/templates/${template.name}/workspace`,
-      search: workspaceCreationParams.toString(),
-    });
-  };
-
   const favicon = getFaviconByStatus(workspace.latest_build);
   const deadline = getDeadline(workspace);
   const canUpdateWorkspace = Boolean(permissions?.updateWorkspace);
@@ -199,7 +182,6 @@ export const WorkspaceReadyPage = ({
         }}
         handleCancel={() => workspaceSend({ type: "CANCEL" })}
         handleSettings={() => navigate("settings")}
-        handleClone={handleWorkspaceCloning}
         handleBuildRetry={() => workspaceSend({ type: "RETRY_BUILD" })}
         handleChangeVersion={() => {
           setChangeVersionDialogOpen(true);
