From ca353cb81cbb681ce99818812c24c23ca4950db8 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 3 Nov 2023 11:03:21 -0300
Subject: [PATCH] refactor(site): improve first workspace creation time
 (#10510)

One tiny improvement to make the onboarding faster. When a user has no workspace, show the existent templates with direct links to the workspace creation instead of asking them to see all templates, select one, and after, click on "Create workspace".

Before:
<img width="1351" alt="Screenshot 2023-11-03 at 10 11 32" src="https://github.com/coder/coder/assets/3165839/46050f16-0196-477a-90e2-a0f475c8b707">

After:
<img width="1360" alt="Screenshot 2023-11-03 at 10 11 43" src="https://github.com/coder/coder/assets/3165839/5bef3d50-b192-49b5-8bdf-dec9654f529f">
---
 .../pages/WorkspacesPage/WorkspacesEmpty.tsx  | 97 +++++++++++++++++++
 .../WorkspacesPage/WorkspacesPageView.tsx     |  2 +-
 .../pages/WorkspacesPage/WorkspacesTable.tsx  | 59 ++---------
 3 files changed, 107 insertions(+), 51 deletions(-)
 create mode 100644 site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx

diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
new file mode 100644
index 0000000000..9c1603d1c6
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -0,0 +1,97 @@
+import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined";
+import Button from "@mui/material/Button";
+import { Template } from "api/typesGenerated";
+import { Avatar } from "components/Avatar/Avatar";
+import { TableEmpty } from "components/TableEmpty/TableEmpty";
+import { Link } from "react-router-dom";
+
+export const WorkspacesEmpty = (props: {
+  isUsingFilter: boolean;
+  templates?: Template[];
+}) => {
+  const { isUsingFilter, templates } = props;
+  const totalFeaturedTemplates = 6;
+  const featuredTemplates = templates?.slice(0, totalFeaturedTemplates);
+
+  if (isUsingFilter) {
+    return <TableEmpty message="No results matched your search" />;
+  }
+
+  return (
+    <TableEmpty
+      message="Create a workspace"
+      description="A workspace is your personal, customizable development environment in the cloud. Select one template below to start."
+      cta={
+        <div>
+          <div
+            css={(theme) => ({
+              display: "flex",
+              flexWrap: "wrap",
+              gap: theme.spacing(2),
+              marginBottom: theme.spacing(3),
+              justifyContent: "center",
+              maxWidth: "800px",
+            })}
+          >
+            {featuredTemplates?.map((t) => (
+              <Link
+                to={`/templates/${t.name}/workspace`}
+                key={t.id}
+                css={(theme) => ({
+                  width: "320px",
+                  padding: theme.spacing(2),
+                  borderRadius: 6,
+                  border: `1px solid ${theme.palette.divider}`,
+                  textAlign: "left",
+                  display: "flex",
+                  gap: theme.spacing(2),
+                  textDecoration: "none",
+                  color: "inherit",
+
+                  "&:hover": {
+                    backgroundColor: theme.palette.background.paperLight,
+                  },
+                })}
+              >
+                <div css={{ flexShrink: 0, paddingTop: 4 }}>
+                  <Avatar
+                    variant={t.icon ? "square" : undefined}
+                    fitImage={Boolean(t.icon)}
+                    src={t.icon}
+                    size="sm"
+                  >
+                    {t.name}
+                  </Avatar>
+                </div>
+                <div>
+                  <h4 css={{ fontSize: 14, fontWeight: 600, margin: 0 }}>
+                    {t.display_name}
+                  </h4>
+                  <span
+                    css={(theme) => ({
+                      fontSize: 13,
+                      color: theme.palette.text.secondary,
+                      lineHeight: "0.5",
+                    })}
+                  >
+                    {t.description}
+                  </span>
+                </div>
+              </Link>
+            ))}
+          </div>
+          {templates && templates.length > totalFeaturedTemplates && (
+            <Button
+              component={Link}
+              to="/templates"
+              variant="contained"
+              startIcon={<ArrowForwardOutlined />}
+            >
+              See all templates
+            </Button>
+          )}
+        </div>
+      }
+    />
+  );
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index 44d16701d5..45f90bf0e1 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -47,7 +47,6 @@ export interface WorkspacesPageViewProps {
   onCheckChange: (checkedWorkspaces: Workspace[]) => void;
   onDeleteAll: () => void;
   canCheckWorkspaces: boolean;
-
   templatesFetchStatus: TemplateQuery["status"];
   templates: TemplateQuery["data"];
 }
@@ -156,6 +155,7 @@ export const WorkspacesPageView: FC<
         checkedWorkspaces={checkedWorkspaces}
         onCheckChange={onCheckChange}
         canCheckWorkspaces={canCheckWorkspaces}
+        templates={templates}
       />
       {count !== undefined && (
         <PaginationWidgetBase
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 63eb19d865..fc82c59a08 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -4,16 +4,13 @@ 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 { Template, Workspace } from "api/typesGenerated";
 import { FC, ReactNode } from "react";
-import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import {
   TableLoaderSkeleton,
   TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
-import AddOutlined from "@mui/icons-material/AddOutlined";
-import Button from "@mui/material/Button";
-import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
 import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Box from "@mui/material/Box";
@@ -28,8 +25,7 @@ import Checkbox from "@mui/material/Checkbox";
 import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
 import Skeleton from "@mui/material/Skeleton";
 import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
-import { css } from "@emotion/react";
-import { useTheme } from "@mui/system";
+import { WorkspacesEmpty } from "./WorkspacesEmpty";
 
 export interface WorkspacesTableProps {
   workspaces?: Workspace[];
@@ -39,6 +35,7 @@ export interface WorkspacesTableProps {
   onUpdateWorkspace: (workspace: Workspace) => void;
   onCheckChange: (checkedWorkspaces: Workspace[]) => void;
   canCheckWorkspaces: boolean;
+  templates?: Template[];
 }
 
 export const WorkspacesTable: FC<WorkspacesTableProps> = ({
@@ -48,9 +45,8 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
   onUpdateWorkspace,
   onCheckChange,
   canCheckWorkspaces,
+  templates,
 }) => {
-  const theme = useTheme();
-
   return (
     <TableContainer>
       <Table>
@@ -93,47 +89,10 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
             <TableLoader canCheckWorkspaces={canCheckWorkspaces} />
           )}
           {workspaces && workspaces.length === 0 && (
-            <>
-              {isUsingFilter ? (
-                <TableEmpty message="No results matched your search" />
-              ) : (
-                <TableEmpty
-                  css={{
-                    paddingBottom: 0,
-                  }}
-                  message="Create a workspace"
-                  description="A workspace is your personal, customizable development environment in the cloud"
-                  cta={
-                    <Button
-                      component={RouterLink}
-                      to="/templates"
-                      startIcon={<AddOutlined />}
-                      variant="contained"
-                      data-testid="button-select-template"
-                    >
-                      Select a Template
-                    </Button>
-                  }
-                  image={
-                    <div
-                      css={css`
-                        max-width: 50%;
-                        height: ${theme.spacing(34)};
-                        overflow: hidden;
-                        margin-top: ${theme.spacing(6)};
-                        opacity: 0.85;
-
-                        & img {
-                          max-width: 100%;
-                        }
-                      `}
-                    >
-                      <img src="/featured/workspaces.webp" alt="" />
-                    </div>
-                  }
-                />
-              )}
-            </>
+            <WorkspacesEmpty
+              templates={templates}
+              isUsingFilter={isUsingFilter}
+            />
           )}
           {workspaces &&
             workspaces.map((workspace) => {