fix: remove cancel button if user cannot cancel job (#11553)

site/src/pages/WorkspacePage/Workspace.tsx

@@ -55,12 +55,13 @@ export interface WorkspaceProps {
   workspaceErrors: WorkspaceErrors;
   buildInfo?: TypesGen.BuildInfoResponse;
   sshPrefix?: string;
-  template?: TypesGen.Template;
+  template: TypesGen.Template;
   canRetryDebugMode: boolean;
   handleBuildRetry: () => void;
   handleBuildRetryDebug: () => void;
   buildLogs?: React.ReactNode;
   canAutostart: boolean;
+  isOwner: boolean;
 }
 
 /**
@@ -93,6 +94,7 @@ export const Workspace: FC<WorkspaceProps> = ({
   handleBuildRetryDebug,
   buildLogs,
   canAutostart,
+  isOwner,
 }) => {
   const navigate = useNavigate();
   const { saveLocal, getLocal } = useLocalStorage();
@@ -199,6 +201,7 @@ export const Workspace: FC<WorkspaceProps> = ({
         isUpdating={isUpdating}
         isRestarting={isRestarting}
         canUpdateWorkspace={canUpdateWorkspace}
+        isOwner={isOwner}
       />
 
       <div

site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.stories.tsx

@@ -107,3 +107,29 @@ export const AlwaysUpdateStopped: Story = {
     canChangeVersions: true,
   },
 };
+
+export const CancelShownForOwner: Story = {
+  args: {
+    workspace: {
+      ...Mocks.MockStartingWorkspace,
+      template_allow_user_cancel_workspace_jobs: false,
+    },
+    isOwner: true,
+  },
+};
+export const CancelShownForUser: Story = {
+  args: {
+    workspace: Mocks.MockStartingWorkspace,
+    isOwner: false,
+  },
+};
+
+export const CancelHiddenForUser: Story = {
+  args: {
+    workspace: {
+      ...Mocks.MockStartingWorkspace,
+      template_allow_user_cancel_workspace_jobs: false,
+    },
+    isOwner: false,
+  },
+};

site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx

@@ -46,6 +46,7 @@ export interface WorkspaceActionsProps {
   children?: ReactNode;
   canChangeVersions: boolean;
   canRetryDebug: boolean;
+  isOwner: boolean;
 }
 
 export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
@@ -65,6 +66,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   isRestarting,
   canChangeVersions,
   canRetryDebug,
+  isOwner,
 }) => {
   const { duplicateWorkspace, isDuplicationReady } =
     useWorkspaceDuplication(workspace);
@@ -73,6 +75,9 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
     workspace,
     canRetryDebug,
   );
+  const showCancel =
+    canCancel &&
+    (workspace.template_allow_user_cancel_workspace_jobs || isOwner);
 
   const mustUpdate =
     workspaceUpdatePolicy(workspace, canChangeVersions) === "always" &&
@@ -146,7 +151,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
             <Fragment key={action}>{buttonMapping[action]}</Fragment>
           ))}
 
-      {canCancel && <CancelButton handleAction={handleCancel} />}
+      {showCancel && <CancelButton handleAction={handleCancel} />}
 
       <MoreMenu>
         <MoreMenuTrigger>

site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx

@@ -36,6 +36,7 @@ import { WorkspacePermissions } from "./permissions";
 import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
 import { WorkspaceDeleteDialog } from "./WorkspaceDeleteDialog";
 import dayjs from "dayjs";
+import { useMe } from "hooks";
 
 interface WorkspaceReadyPageProps {
   template: TypesGen.Template;
@@ -56,6 +57,10 @@ export const WorkspaceReadyPage = ({
     throw Error("Workspace is undefined");
   }
 
+  // Owner
+  const me = useMe();
+  const isOwner = me.roles.find((role) => role.name === "owner") !== undefined;
+
   // Debug mode
   const { data: deploymentValues } = useQuery({
     ...deploymentConfig(),
@@ -247,6 +252,7 @@ export const WorkspaceReadyPage = ({
           )
         }
         canAutostart={canAutostart}
+        isOwner={isOwner}
       />
 
       <WorkspaceDeleteDialog

site/src/pages/WorkspacePage/WorkspaceTopbar.tsx

@@ -56,6 +56,7 @@ export interface WorkspaceProps {
   canRetryDebugMode: boolean;
   handleBuildRetry: () => void;
   handleBuildRetryDebug: () => void;
+  isOwner: boolean;
 }
 
 export const WorkspaceTopbar = (props: WorkspaceProps) => {
@@ -77,6 +78,7 @@ export const WorkspaceTopbar = (props: WorkspaceProps) => {
     canRetryDebugMode,
     handleBuildRetry,
     handleBuildRetryDebug,
+    isOwner,
   } = props;
   const theme = useTheme();
 
@@ -263,6 +265,7 @@ export const WorkspaceTopbar = (props: WorkspaceProps) => {
           canChangeVersions={canChangeVersions}
           isUpdating={isUpdating}
           isRestarting={isRestarting}
+          isOwner={isOwner}
         />
       </div>
     </Topbar>