Remove feature checks and improve loading stat

coder · BrunoQuaresma · Aug 30, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023
commit b95a64335fe92f3221758e45a51a5ff9b2c1f4e9
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
@@ -11,11 +11,16 @@ 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"
 import { EnterpriseBadge } from "components/DeploySettingsLayout/Badges"
+import Skeleton from "@mui/material/Skeleton"
+import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
 
 const isOwnerRole = (role: TypesGen.Role): boolean => {
   return role.name === "owner"
@@ -80,7 +85,7 @@ export const UsersTableBody: FC<
   return (
     <ChooseOne>
       <Cond condition={Boolean(isLoading)}>
-        <TableLoaderSkeleton columns={5} useAvatarData />
+        <TableLoader />
       </Cond>
       <Cond condition={!users || users.length === 0}>
         <ChooseOne>
@@ -252,3 +257,29 @@ const useStyles = makeStyles((theme) => ({
     borderColor: theme.palette.info.light,
   },
 }))
+
+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>
+  )
+}
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.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -1,9 +1,6 @@
 import { usePagination } from "hooks/usePagination"
 import { Workspace } from "api/typesGenerated"
-import {
-  useDashboard,
-  useIsWorkspaceActionsEnabled,
-} from "components/Dashboard/DashboardProvider"
+import { useIsWorkspaceActionsEnabled } from "components/Dashboard/DashboardProvider"
 import { FC, useEffect, useState } from "react"
 import { Helmet } from "react-helmet-async"
 import { pageTitle } from "utils/page"
@@ -68,10 +65,6 @@ 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
@@ -86,7 +79,6 @@ 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,7 +44,6 @@ 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
@@ -64,7 +63,6 @@ export const WorkspacesPageView: FC<
   onUpdateWorkspace,
   page,
   checkedWorkspaces,
-  isWorkspaceBatchActionsEnabled,
   onCheckChange,
   onDeleteAll,
 }) => {
@@ -151,7 +149,6 @@ export const WorkspacesPageView: FC<
         onUpdateWorkspace={onUpdateWorkspace}
         checkedWorkspaces={checkedWorkspaces}
         onCheckChange={onCheckChange}
-        isWorkspaceBatchActionsEnabled={isWorkspaceBatchActionsEnabled}
       />
       {count !== undefined && (
         <PaginationWidgetBase