coder · BrunoQuaresma · Aug 30, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/codersdk/deployment.go b/codersdk/deployment.go
@@ -48,6 +48,7 @@ const (
 	FeatureAdvancedTemplateScheduling  FeatureName = "advanced_template_scheduling"
 	FeatureTemplateAutostopRequirement FeatureName = "template_autostop_requirement"
 	FeatureWorkspaceProxy              FeatureName = "workspace_proxy"
+	FeatureWorkspaceBatchActions       FeatureName = "workspace_batch_actions"
 )
 
 // FeatureNames must be kept in-sync with the Feature enum above.
@@ -64,6 +65,7 @@ var FeatureNames = []FeatureName{
 	FeatureAdvancedTemplateScheduling,
 	FeatureWorkspaceProxy,
 	FeatureUserRoleManagement,
+	FeatureWorkspaceBatchActions,
 }
 
 // Humanize returns the feature name in a human-readable format.
@@ -1941,9 +1943,6 @@ const (
 	// Deployment health page
 	ExperimentDeploymentHealthPage Experiment = "deployment_health_page"
 
-	// Workspaces batch actions
-	ExperimentWorkspacesBatchActions Experiment = "workspaces_batch_actions"
-
 	// Add new experiments here!
 	// ExperimentExample Experiment = "example"
 )
@@ -1954,7 +1953,6 @@ const (
 // not be included here and will be essentially hidden.
 var ExperimentsAll = Experiments{
 	ExperimentDeploymentHealthPage,
-	ExperimentWorkspacesBatchActions,
 }
 
 // Experiments is a list of experiments that are enabled for the deployment.

diff --git a/docs/api/schemas.md b/docs/api/schemas.md
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/components/TableLoader/TableLoader.tsx b/site/src/components/TableLoader/TableLoader.tsx
@@ -1,9 +1,7 @@
 import { makeStyles } from "@mui/styles"
 import TableCell from "@mui/material/TableCell"
-import TableRow from "@mui/material/TableRow"
-import Skeleton from "@mui/material/Skeleton"
-import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
-import { FC } from "react"
+import TableRow, { TableRowProps } from "@mui/material/TableRow"
+import { FC, ReactNode, cloneElement, isValidElement } from "react"
 import { Loader } from "../Loader/Loader"
 
 export const TableLoader: FC = () => {
@@ -25,35 +23,27 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export const TableLoaderSkeleton: FC<{
-  columns: number
+export const TableLoaderSkeleton = ({
+  rows = 4,
+  children,
+}: {
   rows?: number
-  useAvatarData?: boolean
-}> = ({ columns, rows = 4, useAvatarData = false }) => {
-  const placeholderColumns = Array(columns).fill(undefined)
-  const placeholderRows = Array(rows).fill(undefined)
-
+  children: ReactNode
+}) => {
+  if (!isValidElement(children)) {
+    throw new Error(
+      "TableLoaderSkeleton children must be a valid React element",
+    )
+  }
   return (
     <>
-      {placeholderRows.map((_, rowIndex) => (
-        <TableRow key={rowIndex} role="progressbar" data-testid="loader">
-          {placeholderColumns.map((_, columnIndex) => {
-            if (useAvatarData && columnIndex === 0) {
-              return (
-                <TableCell key={columnIndex}>
-                  <AvatarDataSkeleton />
-                </TableCell>
-              )
-            }
-
-            return (
-              <TableCell key={columnIndex}>
-                <Skeleton variant="text" width="25%" />
-              </TableCell>
-            )
-          })}
-        </TableRow>
-      ))}
+      {Array.from({ length: rows }, (_, i) =>
+        cloneElement(children, { key: i }),
+      )}
     </>
   )
 }
+
+export const TableRowSkeleton = (props: TableRowProps) => {
+  return <TableRow role="progressbar" data-testid="loader" {...props} />
+}
diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx
@@ -10,7 +10,10 @@ import * as TypesGen from "../../api/typesGenerated"
 import { combineClasses } from "../../utils/combineClasses"
 import { AvatarData } from "../AvatarData/AvatarData"
 import { EmptyState } from "../EmptyState/EmptyState"
-import { TableLoaderSkeleton } from "../TableLoader/TableLoader"
+import {
+  TableLoaderSkeleton,
+  TableRowSkeleton,
+} from "../TableLoader/TableLoader"
 import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
 import { EditRolesButton } from "components/EditRolesButton/EditRolesButton"
 import { Stack } from "components/Stack/Stack"
@@ -23,6 +26,8 @@ import GitHub from "@mui/icons-material/GitHub"
 import PasswordOutlined from "@mui/icons-material/PasswordOutlined"
 import relativeTime from "dayjs/plugin/relativeTime"
 import ShieldOutlined from "@mui/icons-material/ShieldOutlined"
+import Skeleton from "@mui/material/Skeleton"
+import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
 
 dayjs.extend(relativeTime)
 
@@ -91,7 +96,29 @@ export const UsersTableBody: FC<
   return (
     <ChooseOne>
       <Cond condition={Boolean(isLoading)}>
-        <TableLoaderSkeleton columns={canEditUsers ? 5 : 4} useAvatarData />
+        <TableLoaderSkeleton>
+          <TableRowSkeleton>
+            <TableCell>
+              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                <AvatarDataSkeleton />
+              </Box>
+            </TableCell>
+            <TableCell>
+              <Skeleton variant="text" width="25%" />
+            </TableCell>
+            <TableCell>
+              <Skeleton variant="text" width="25%" />
+            </TableCell>
+            <TableCell>
+              <Skeleton variant="text" width="25%" />
+            </TableCell>
+            {canEditUsers && (
+              <TableCell>
+                <Skeleton variant="text" width="25%" />
+              </TableCell>
+            )}
+          </TableRowSkeleton>
+        </TableLoaderSkeleton>
       </Cond>
       <Cond condition={!users || users.length === 0}>
         <ChooseOne>

diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -15,14 +15,20 @@ import { AvatarData } from "components/AvatarData/AvatarData"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { EmptyState } from "components/EmptyState/EmptyState"
 import { Stack } from "components/Stack/Stack"
-import { TableLoaderSkeleton } from "components/TableLoader/TableLoader"
+import {
+  TableLoaderSkeleton,
+  TableRowSkeleton,
+} from "components/TableLoader/TableLoader"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
 import { FC } from "react"
 import { Link as RouterLink, useNavigate } from "react-router-dom"
 import { Paywall } from "components/Paywall/Paywall"
 import { Group } from "api/typesGenerated"
 import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"
 import { docs } from "utils/docs"
+import Skeleton from "@mui/material/Skeleton"
+import { Box } from "@mui/system"
+import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
 
 export type GroupsPageViewProps = {
   groups: Group[] | undefined
@@ -83,7 +89,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
               <TableBody>
                 <ChooseOne>
                   <Cond condition={isLoading}>
-                    <TableLoaderSkeleton columns={3} useAvatarData />
+                    <TableLoader />
                   </Cond>
 
                   <Cond condition={isEmpty}>
@@ -184,6 +190,26 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
   )
 }
 
+const TableLoader = () => {
+  return (
+    <TableLoaderSkeleton>
+      <TableRowSkeleton>
+        <TableCell>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <AvatarDataSkeleton />
+          </Box>
+        </TableCell>
+        <TableCell>
+          <Skeleton variant="text" width="25%" />
+        </TableCell>
+        <TableCell>
+          <Skeleton variant="text" width="25%" />
+        </TableCell>
+      </TableRowSkeleton>
+    </TableLoaderSkeleton>
+  )
+}
+
 const useStyles = makeStyles((theme) => ({
   clickableTableRow: {
     cursor: "pointer",

diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -24,7 +24,10 @@ import {
   PageHeaderTitle,
 } from "../../components/PageHeader/PageHeader"
 import { Stack } from "../../components/Stack/Stack"
-import { TableLoaderSkeleton } from "../../components/TableLoader/TableLoader"
+import {
+  TableLoaderSkeleton,
+  TableRowSkeleton,
+} from "../../components/TableLoader/TableLoader"
 import {
   HelpTooltip,
   HelpTooltipLink,
@@ -42,6 +45,9 @@ import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined"
 import { Avatar } from "components/Avatar/Avatar"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
 import { docs } from "utils/docs"
+import Skeleton from "@mui/material/Skeleton"
+import { Box } from "@mui/system"
+import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
 
 export const Language = {
   developerCount: (activeCount: number): string => {
@@ -196,7 +202,7 @@ export const TemplatesPageView: FC<
               </TableHead>
               <TableBody>
                 <Maybe condition={isLoading}>
-                  <TableLoaderSkeleton columns={5} useAvatarData />
+                  <TableLoader />
                 </Maybe>
 
                 <ChooseOne>
@@ -222,6 +228,32 @@ export const TemplatesPageView: FC<
   )
 }
 
+const TableLoader = () => {
+  return (
+    <TableLoaderSkeleton>
+      <TableRowSkeleton>
+        <TableCell>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <AvatarDataSkeleton />
+          </Box>
+        </TableCell>
+        <TableCell>
+          <Skeleton variant="text" width="25%" />
+        </TableCell>
+        <TableCell>
+          <Skeleton variant="text" width="25%" />
+        </TableCell>
+        <TableCell>
+          <Skeleton variant="text" width="25%" />
+        </TableCell>
+        <TableCell>
+          <Skeleton variant="text" width="25%" />
+        </TableCell>
+      </TableRowSkeleton>
+    </TableLoaderSkeleton>
+  )
+}
+
 const useStyles = makeStyles((theme) => ({
   templateIconWrapper: {
     // Same size then the avatar component

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
@@ -63,7 +63,7 @@ describe("WorkspacesPage", () => {
 
     await user.click(getWorkspaceCheckbox(workspaces[0]))
     await user.click(getWorkspaceCheckbox(workspaces[1]))
-    await user.click(screen.getByRole("button", { name: /delete all/i }))
+    await user.click(screen.getByRole("button", { name: /delete selected/i }))
     await user.type(screen.getByLabelText(/type delete to confirm/i), "DELETE")
     await user.click(screen.getByTestId("confirm-button"))
 

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -68,10 +68,9 @@ 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"
+  const { entitlements } = useDashboard()
+  const canCheckWorkspaces =
+    entitlements.features["workspace_batch_actions"].enabled
 
   // We want to uncheck the selected workspaces always when the url changes
   // because of filtering or pagination
@@ -86,9 +85,9 @@ const WorkspacesPage: FC = () => {
       </Helmet>
 
       <WorkspacesPageView
-        isWorkspaceBatchActionsEnabled={isWorkspaceBatchActionsEnabled}
         checkedWorkspaces={checkedWorkspaces}
         onCheckChange={setCheckedWorkspaces}
+        canCheckWorkspaces={canCheckWorkspaces}
         workspaces={data?.workspaces}
         dormantWorkspaces={dormantWorkspaces}
         error={error}
@@ -198,7 +197,7 @@ const BatchDeleteConfirmation = ({
   const confirmDeletion = async () => {
     setConfirmError(false)
 
-    if (confirmValue.toLowerCase() !== "delete") {
+    if (confirmValue !== "DELETE") {
       setConfirmError(true)
       return
     }