chore(site): Upgrade to MUI v5 (#7437)

site/src/components/WorkspacesTable/WorkspacesRow.tsx

@@ -1,7 +1,7 @@
-import TableCell from "@material-ui/core/TableCell"
-import { makeStyles } from "@material-ui/core/styles"
-import TableRow from "@material-ui/core/TableRow"
-import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
+import TableCell from "@mui/material/TableCell"
+import { makeStyles } from "@mui/styles"
+import TableRow from "@mui/material/TableRow"
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight"
 import { AvatarData } from "components/AvatarData/AvatarData"
 import { WorkspaceStatusBadge } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
 import { FC } from "react"

site/src/components/WorkspacesTable/WorkspacesTable.tsx

@@ -1,9 +1,9 @@
-import Table from "@material-ui/core/Table"
-import TableBody from "@material-ui/core/TableBody"
-import TableCell from "@material-ui/core/TableCell"
-import TableContainer from "@material-ui/core/TableContainer"
-import TableHead from "@material-ui/core/TableHead"
-import TableRow from "@material-ui/core/TableRow"
+import Table from "@mui/material/Table"
+import TableBody from "@mui/material/TableBody"
+import TableCell from "@mui/material/TableCell"
+import TableContainer from "@mui/material/TableContainer"
+import TableHead from "@mui/material/TableHead"
+import TableRow from "@mui/material/TableRow"
 import { Workspace } from "api/typesGenerated"
 import { FC } from "react"
 import { WorkspacesTableBody } from "./WorkspacesTableBody"

site/src/components/WorkspacesTable/WorkspacesTableBody.tsx

@@ -1,7 +1,6 @@
-import Button from "@material-ui/core/Button"
-import Link from "@material-ui/core/Link"
-import { makeStyles } from "@material-ui/core/styles"
-import AddOutlined from "@material-ui/icons/AddOutlined"
+import Button from "@mui/material/Button"
+import { makeStyles } from "@mui/styles"
+import AddOutlined from "@mui/icons-material/AddOutlined"
 import { Workspace } from "api/typesGenerated"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { TableEmpty } from "components/TableEmpty/TableEmpty"
@@ -29,7 +28,7 @@ export const WorkspacesTableBody: FC<
   }
 
   if (!workspaces) {
-    return <TableLoaderSkeleton columns={4} useAvatarData />
+    return <TableLoaderSkeleton columns={5} useAvatarData />
   }
 
   if (workspaces.length === 0) {
@@ -45,11 +44,14 @@ export const WorkspacesTableBody: FC<
             message={t("emptyCreateWorkspaceMessage")}
             description={t("emptyCreateWorkspaceDescription")}
             cta={
-              <Link underline="none" component={RouterLink} to="/templates">
-                <Button startIcon={<AddOutlined />}>
-                  {t("createFromTemplateButton")}
-                </Button>
-              </Link>
+              <Button
+                component={RouterLink}
+                to="/templates"
+                startIcon={<AddOutlined />}
+                variant="contained"
+              >
+                {t("createFromTemplateButton")}
+              </Button>
             }
             image={
               <div className={styles.emptyImage}>