Add experiment in the FE side

coder · BrunoQuaresma · Aug 15, 2023 · Aug 10, 2023 · Aug 10, 2023 · Aug 10, 2023
commit e8a4f18c369846b54b9fb49e6b6fb1ee4135c870
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -1,6 +1,9 @@
 import { usePagination } from "hooks/usePagination"
 import { Workspace } from "api/typesGenerated"
-import { useIsWorkspaceActionsEnabled } from "components/Dashboard/DashboardProvider"
+import {
+  useDashboard,
+  useIsWorkspaceActionsEnabled,
+} from "components/Dashboard/DashboardProvider"
 import { FC, useEffect, useState } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "utils/page"
@@ -65,6 +68,10 @@ const WorkspacesPage: FC = () => {
   const [checkedWorkspaces, setCheckedWorkspaces] = useState<Workspace[]>([])
   const [isDeletingAll, setIsDeletingAll] = useState(false)
   const [urlSearchParams] = searchParamsResult
+  const dashboard = useDashboard()
+  const isWorkspaceBatchActionsEnabled =
+    dashboard.experiments.includes("workspaces_batch_actions") ||
+    process.env.NODE_ENV === "development"
 
   // We want to uncheck the selected workspaces always when the url changes
   // because of filtering or pagination
@@ -79,6 +86,7 @@ const WorkspacesPage: FC = () => {
       </Helmet>
 
       <WorkspacesPageView
+        isWorkspaceBatchActionsEnabled={isWorkspaceBatchActionsEnabled}
         checkedWorkspaces={checkedWorkspaces}
         onCheckChange={setCheckedWorkspaces}
         workspaces={data?.workspaces}

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -44,6 +44,7 @@ export interface WorkspacesPageViewProps {
   filterProps: ComponentProps<typeof WorkspacesFilter>
   page: number
   limit: number
+  isWorkspaceBatchActionsEnabled?: boolean
   onPageChange: (page: number) => void
   onUpdateWorkspace: (workspace: Workspace) => void
   onCheckChange: (checkedWorkspaces: Workspace[]) => void
@@ -63,6 +64,7 @@ export const WorkspacesPageView: FC<
   onUpdateWorkspace,
   page,
   checkedWorkspaces,
+  isWorkspaceBatchActionsEnabled,
   onCheckChange,
   onDeleteAll,
 }) => {
@@ -115,7 +117,7 @@ export const WorkspacesPageView: FC<
       </Stack>
 
       <TableToolbar>
-        {checkedWorkspaces.length > 0 ? (
+        {checkedWorkspaces.length > 0 && isWorkspaceBatchActionsEnabled ? (
           <>
             <Box>
               Selected <strong>{checkedWorkspaces.length}</strong> of{" "}
@@ -149,6 +151,7 @@ export const WorkspacesPageView: FC<
         onUpdateWorkspace={onUpdateWorkspace}
         checkedWorkspaces={checkedWorkspaces}
         onCheckChange={onCheckChange}
+        isWorkspaceBatchActionsEnabled={isWorkspaceBatchActionsEnabled}
       />
       {count !== undefined && (
         <PaginationWidgetBase

diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -38,6 +38,7 @@ export interface WorkspacesTableProps {
   checkedWorkspaces: Workspace[]
   error?: unknown
   isUsingFilter: boolean
+  isWorkspaceBatchActionsEnabled?: boolean
   onUpdateWorkspace: (workspace: Workspace) => void
   onCheckChange: (checkedWorkspaces: Workspace[]) => void
 }
@@ -46,6 +47,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
   workspaces,
   checkedWorkspaces,
   isUsingFilter,
+  isWorkspaceBatchActionsEnabled,
   onUpdateWorkspace,
   onCheckChange,
 }) => {
@@ -57,31 +59,36 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
       <Table>
         <TableHead>
           <TableRow>
-            <TableCell
-              width="40%"
-              sx={{
-                paddingLeft: (theme) => `${theme.spacing(1.5)} !important`,
-              }}
-            >
-              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                <Checkbox
-                  checked={checkedWorkspaces.length === workspaces?.length}
-                  size="small"
-                  onChange={(_, checked) => {
-                    if (!workspaces) {
-                      return
-                    }
+            {isWorkspaceBatchActionsEnabled ? (
+              <TableCell
+                width="40%"
+                sx={{
+                  paddingLeft: (theme) => `${theme.spacing(1.5)} !important`,
+                }}
+              >
+                <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                  <Checkbox
+                    checked={checkedWorkspaces.length === workspaces?.length}
+                    size="small"
+                    onChange={(_, checked) => {
+                      if (!workspaces) {
+                        return
+                      }
+
+                      if (!checked) {
+                        onCheckChange([])
+                      } else {
+                        onCheckChange(workspaces)
+                      }
+                    }}
+                  />
+                  Name
+                </Box>
+              </TableCell>
+            ) : (
+              <TableCell width="40%">Name</TableCell>
+            )}
 
-                    if (!checked) {
-                      onCheckChange([])
-                    } else {
-                      onCheckChange(workspaces)
-                    }
-                  }}
-                />
-                Name
-              </Box>
-            </TableCell>
             <TableCell width="25%">Template</TableCell>
             <TableCell width="20%">Last used</TableCell>
             <TableCell width="15%">Status</TableCell>
@@ -125,30 +132,35 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
               <WorkspacesRow workspace={workspace} key={workspace.id}>
                 <TableCell
                   sx={{
-                    paddingLeft: (theme) => `${theme.spacing(1.5)} !important`,
+                    paddingLeft: (theme) =>
+                      isWorkspaceBatchActionsEnabled
+                        ? `${theme.spacing(1.5)} !important`
+                        : undefined,
                   }}
                 >
                   <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                    <Checkbox
-                      size="small"
-                      checked={checkedWorkspaces.some(
-                        (w) => w.id === workspace.id,
-                      )}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                      }}
-                      onChange={(e) => {
-                        if (e.currentTarget.checked) {
-                          onCheckChange([...checkedWorkspaces, workspace])
-                        } else {
-                          onCheckChange(
-                            checkedWorkspaces.filter(
-                              (w) => w.id !== workspace.id,
-                            ),
-                          )
-                        }
-                      }}
-                    />
+                    {isWorkspaceBatchActionsEnabled && (
+                      <Checkbox
+                        size="small"
+                        checked={checkedWorkspaces.some(
+                          (w) => w.id === workspace.id,
+                        )}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                        }}
+                        onChange={(e) => {
+                          if (e.currentTarget.checked) {
+                            onCheckChange([...checkedWorkspaces, workspace])
+                          } else {
+                            onCheckChange(
+                              checkedWorkspaces.filter(
+                                (w) => w.id !== workspace.id,
+                              ),
+                            )
+                          }
+                        }}
+                      />
+                    )}
                     <AvatarData
                       title={
                         <Stack direction="row" spacing={0} alignItems="center">