feat(site): Show total of items in the workspaces table (#7774)

BrunoQuaresma · web-flow · commit 4de4e8ee21ae · 2023-06-01T13:21:16.000-03:00
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -21,6 +21,8 @@ import { Filter } from "./filter/filter"
 import { hasError, isApiValidationError } from "api/errors"
 import { workspaceFilterQuery } from "utils/filters"
 import { SearchBarWithFilter } from "components/SearchBarWithFilter/SearchBarWithFilter"
+import Box from "@mui/material/Box"
+import Skeleton from "@mui/material/Skeleton"
 
 export const Language = {
   pageTitle: "Workspaces",
@@ -143,6 +145,28 @@ export const WorkspacesPageView: FC<
           />
         )}
       </Stack>
+
+      <Box
+        sx={{
+          fontSize: 13,
+          mb: 2,
+          mt: 1,
+          color: (theme) => theme.palette.text.secondary,
+          "& strong": { color: (theme) => theme.palette.text.primary },
+        }}
+      >
+        {workspaces ? (
+          <>
+            Showing <strong>{workspaces?.length}</strong> of{" "}
+            <strong>{count}</strong> workspaces
+          </>
+        ) : (
+          <Box sx={{ height: 24, display: "flex", alignItems: "center" }}>
+            <Skeleton variant="text" width={160} height={16} />
+          </Box>
+        )}
+      </Box>
+
       <WorkspacesTable
         workspaces={workspaces}
         isUsingFilter={
