fix: Update routing for workspace schedule (#2113)

* fix: Update routing for workspace schedule

This was broken as part of #2101. It was a silly mistake,
but unfortunate our tests didn't catch it.

This is a rare change so unlikely to occur again, so I won't
make an issue adding tests.

* Update site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx

Co-authored-by: Presley Pizzo <1290996+presleyp@users.noreply.github.com>

Co-authored-by: Presley Pizzo <1290996+presleyp@users.noreply.github.com>

site/src/api/typesGenerated.ts

@@ -440,6 +440,8 @@ export interface WorkspaceBuild {
   readonly updated_at: string
   readonly workspace_id: string
   readonly workspace_name: string
+  readonly workspace_owner_id: string
+  readonly workspace_owner_name: string
   readonly template_version_id: string
   readonly build_number: number
   readonly name: string

site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx

@@ -22,7 +22,7 @@ export const WorkspaceBuildStats: FC<WorkspaceBuildStatsProps> = ({ build }) =>
         <span className={styles.statsLabel}>Workspace Name</span>
         <Link
           component={RouterLink}
-          to={`/workspaces/${build.workspace_id}`}
+          to={`/@${build.workspace_owner_name}/${build.workspace_name}`}
           className={combineClasses([styles.statsValue, styles.link])}
         >
           {build.workspace_name}

site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx

@@ -92,7 +92,11 @@ export const WorkspaceSchedule: FC<WorkspaceScheduleProps> = ({ workspace }) =>
           <span className={styles.scheduleValue}>{Language.autoStopDisplay(workspace)}</span>
         </div>
         <div>
-          <Link className={styles.scheduleAction} component={RouterLink} to={`/workspaces/${workspace.id}/schedule`}>
+          <Link
+            className={styles.scheduleAction}
+            component={RouterLink}
+            to={`/@${workspace.owner_name}/${workspace.name}/schedule`}
+          >
             {Language.editScheduleLink}
           </Link>
         </div>

site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx

@@ -17,7 +17,7 @@ const CreateWorkspacePage: FC = () => {
     context: { organizationId, preSelectedTemplateName },
     actions: {
       onCreateWorkspace: (_, event) => {
-        navigate("/workspaces/" + event.data.id)
+        navigate(`/@${event.data.owner_name}/${event.data.name}`)
       },
     },
   })

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx

@@ -142,25 +142,31 @@ export const workspaceToInitialValues = (
 }
 
 export const WorkspaceSchedulePage: React.FC = () => {
+  const { username: usernameQueryParam, workspace: workspaceQueryParam } = useParams()
   const navigate = useNavigate()
-  const { workspace: workspaceQueryParam } = useParams()
-  const workspaceId = firstOrItem(workspaceQueryParam, null)
+  const username = firstOrItem(usernameQueryParam, null)
+  const workspaceName = firstOrItem(workspaceQueryParam, null)
   const [scheduleState, scheduleSend] = useMachine(workspaceSchedule)
   const { formErrors, getWorkspaceError, workspace } = scheduleState.context
 
-  // Get workspace on mount and whenever workspaceId changes.
+  // Get workspace on mount and whenever the args for getting a workspace change.
   // scheduleSend should not change.
   useEffect(() => {
-    workspaceId && scheduleSend({ type: "GET_WORKSPACE", workspaceId })
-  }, [workspaceId, scheduleSend])
+    username && workspaceName && scheduleSend({ type: "GET_WORKSPACE", username, workspaceName })
+  }, [username, workspaceName, scheduleSend])
 
-  if (!workspaceId) {
+  if (!username || !workspaceName) {
     navigate("/workspaces")
     return null
   } else if (scheduleState.matches("idle") || scheduleState.matches("gettingWorkspace") || !workspace) {
     return <FullScreenLoader />
   } else if (scheduleState.matches("error")) {
-    return <ErrorSummary error={getWorkspaceError} retry={() => scheduleSend({ type: "GET_WORKSPACE", workspaceId })} />
+    return (
+      <ErrorSummary
+        error={getWorkspaceError}
+        retry={() => scheduleSend({ type: "GET_WORKSPACE", username, workspaceName })}
+      />
+    )
   } else if (scheduleState.matches("presentForm") || scheduleState.matches("submittingSchedule")) {
     return (
       <WorkspaceScheduleForm
@@ -168,7 +174,7 @@ export const WorkspaceSchedulePage: React.FC = () => {
         initialValues={workspaceToInitialValues(workspace, dayjs.tz.guess())}
         isLoading={scheduleState.tags.has("loading")}
         onCancel={() => {
-          navigate(`/workspaces/${workspaceId}`)
+          navigate(`/@${username}/${workspaceName}`)
         }}
         onSubmit={(values) => {
           scheduleSend({
@@ -180,7 +186,7 @@ export const WorkspaceSchedulePage: React.FC = () => {
       />
     )
   } else if (scheduleState.matches("submitSuccess")) {
-    navigate(`/workspaces/${workspaceId}`)
+    navigate(`/@${username}/${workspaceName}`)
     return <FullScreenLoader />
   } else {
     // Theoretically impossible - log and bail

site/src/testHelpers/entities.ts

@@ -137,6 +137,8 @@ export const MockWorkspaceBuild: TypesGen.WorkspaceBuild = {
   transition: "start",
   updated_at: "2022-05-17T17:39:01.382927298Z",
   workspace_name: "test-workspace",
+  workspace_owner_id: MockUser.id,
+  workspace_owner_name: MockUser.username,
   workspace_id: "759f1d46-3174-453d-aa60-980a9c1442f3",
   deadline: "2022-05-17T23:39:00.00Z",
 }

site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts

@@ -26,7 +26,7 @@ export interface WorkspaceScheduleContext {
 }
 
 export type WorkspaceScheduleEvent =
-  | { type: "GET_WORKSPACE"; workspaceId: string }
+  | { type: "GET_WORKSPACE"; username: string; workspaceName: string }
   | {
       type: "SUBMIT_SCHEDULE"
       autoStart: TypesGen.UpdateWorkspaceAutostartRequest
@@ -132,7 +132,7 @@ export const workspaceSchedule = createMachine(
 
     services: {
       getWorkspace: async (_, event) => {
-        return await API.getWorkspace(event.workspaceId)
+        return await API.getWorkspaceByOwnerAndName(event.username, event.workspaceName)
       },
       submitSchedule: async (context, event) => {
         if (!context.workspace?.id) {

site/webpack.dev.ts

@@ -63,7 +63,7 @@ const config: Configuration = {
     port: process.env.PORT || 8080,
     proxy: {
       "/api": {
-        target: "https://dev.coder.com",
+        target: process.env.CODER_HOST || "http://localhost:3000",
         ws: true,
         secure: false,
       },