Create empty state and experimental tags

coder · BrunoQuaresma · Dec 21, 2022 · Dec 6, 2022 · Dec 7, 2022 · Dec 7, 2022
commit 6de5c5210624e915369ce4ca6ca432975f55877d
diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
@@ -1,7 +1,7 @@
 import Button from "@material-ui/core/Button"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
-import { TemplateExample } from "api/typesGenerated"
+import { Entitlements, TemplateExample } from "api/typesGenerated"
 import { CodeExample } from "components/CodeExample/CodeExample"
 import { Stack } from "components/Stack/Stack"
 import { TableEmpty } from "components/TableEmpty/TableEmpty"
@@ -28,12 +28,13 @@ const findFeaturedExamples = (examples: TemplateExample[]) => {
 export const EmptyTemplates: FC<{
   permissions: Permissions
   examples: TemplateExample[]
-}> = ({ permissions, examples }) => {
+  entitlements: Entitlements
+}> = ({ permissions, examples, entitlements }) => {
   const styles = useStyles()
   const { t } = useTranslation("templatesPage")
   const featuredExamples = findFeaturedExamples(examples)
 
-  if (permissions.createTemplates) {
+  if (permissions.createTemplates && entitlements.experimental) {
     return (
       <TableEmpty
         message={t("empty.message")}
@@ -80,6 +81,33 @@ export const EmptyTemplates: FC<{
     )
   }
 
+  if (permissions.createTemplates) {
+    return (
+      <TableEmpty
+        className={styles.withImage}
+        message={t("empty.message")}
+        description={
+          <>
+            To create a workspace you need to have a template. You can{" "}
+            <Link
+              target="_blank"
+              href="https://coder.com/docs/coder-oss/latest/templates"
+            >
+              create one from scratch
+            </Link>{" "}
+            or use a built-in template using the following Coder CLI command:
+          </>
+        }
+        cta={<CodeExample code="coder templates init" />}
+        image={
+          <div className={styles.emptyImage}>
+            <img src="/featured/templates.webp" alt="" />
+          </div>
+        }
+      />
+    )
+  }
+
   return (
     <TableEmpty
       className={styles.withImage}

diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx
@@ -1,4 +1,5 @@
 import { useMachine } from "@xstate/react"
+import { useEntitlements } from "hooks/useEntitlements"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { usePermissions } from "hooks/usePermissions"
 import React from "react"
@@ -10,6 +11,7 @@ import { TemplatesPageView } from "./TemplatesPageView"
 export const TemplatesPage: React.FC = () => {
   const organizationId = useOrganizationId()
   const permissions = usePermissions()
+  const entitlements = useEntitlements()
   const [templatesState] = useMachine(templatesMachine, {
     context: {
       organizationId,
@@ -24,7 +26,7 @@ export const TemplatesPage: React.FC = () => {
       </Helmet>
       <TemplatesPageView
         context={templatesState.context}
-        permissions={permissions}
+        entitlements={entitlements}
       />
     </>
   )

diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
@@ -1,5 +1,13 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import { makeMockApiError, MockTemplate } from "../../testHelpers/entities"
+import {
+  makeMockApiError,
+  MockEntitlements,
+  MockOrganization,
+  MockPermissions,
+  MockTemplate,
+  MockTemplateExample,
+  MockTemplateExample2,
+} from "../../testHelpers/entities"
 import { TemplatesPageView, TemplatesPageViewProps } from "./TemplatesPageView"
 
 export default {
@@ -11,50 +19,100 @@ const Template: Story<TemplatesPageViewProps> = (args) => (
   <TemplatesPageView {...args} />
 )
 
-export const AllStates = Template.bind({})
-AllStates.args = {
-  canCreateTemplate: true,
-  templates: [
-    MockTemplate,
-    {
-      ...MockTemplate,
-      active_user_count: -1,
-      description: "🚀 Some new template that has no activity data",
-      icon: "/icon/goland.svg",
-    },
-    {
-      ...MockTemplate,
-      active_user_count: 150,
-      description: "😮 Wow, this one has a bunch of usage!",
-      icon: "",
-    },
-    {
-      ...MockTemplate,
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
-    },
-  ],
+export const WithTemplates = Template.bind({})
+WithTemplates.args = {
+  entitlements: MockEntitlements,
+  context: {
+    organizationId: MockOrganization.id,
+    permissions: MockPermissions,
+    error: undefined,
+    templates: [
+      MockTemplate,
+      {
+        ...MockTemplate,
+        active_user_count: -1,
+        description: "🚀 Some new template that has no activity data",
+        icon: "/icon/goland.svg",
+      },
+      {
+        ...MockTemplate,
+        active_user_count: 150,
+        description: "😮 Wow, this one has a bunch of usage!",
+        icon: "",
+      },
+      {
+        ...MockTemplate,
+        description:
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
+      },
+    ],
+    examples: [],
+  },
 }
 
-export const SmallViewport = Template.bind({})
-SmallViewport.args = {
-  ...AllStates.args,
+export const WithTemplatesSmallViewPort = Template.bind({})
+WithTemplatesSmallViewPort.args = {
+  ...WithTemplates.args,
 }
-SmallViewport.parameters = {
+WithTemplatesSmallViewPort.parameters = {
   chromatic: { viewports: [600] },
 }
 
 export const EmptyCanCreate = Template.bind({})
 EmptyCanCreate.args = {
-  canCreateTemplate: true,
+  entitlements: MockEntitlements,
+  context: {
+    organizationId: MockOrganization.id,
+    permissions: MockPermissions,
+    error: undefined,
+    templates: [],
+    examples: [MockTemplateExample, MockTemplateExample2],
+  },
+}
+
+export const EmptyCanCreateExperimental = Template.bind({})
+EmptyCanCreateExperimental.args = {
+  entitlements: {
+    ...MockEntitlements,
+    experimental: true,
+  },
+  context: {
+    organizationId: MockOrganization.id,
+    permissions: MockPermissions,
+    error: undefined,
+    templates: [],
+    examples: [MockTemplateExample, MockTemplateExample2],
+  },
 }
 
 export const EmptyCannotCreate = Template.bind({})
-EmptyCannotCreate.args = {}
+EmptyCannotCreate.args = {
+  entitlements: MockEntitlements,
+  context: {
+    organizationId: MockOrganization.id,
+    permissions: {
+      ...MockPermissions,
+      createTemplates: false,
+    },
+    error: undefined,
+    templates: [],
+    examples: [MockTemplateExample, MockTemplateExample2],
+  },
+}
 
 export const Error = Template.bind({})
 Error.args = {
-  getTemplatesError: makeMockApiError({
-    message: "Something went wrong fetching templates.",
-  }),
+  entitlements: MockEntitlements,
+  context: {
+    organizationId: MockOrganization.id,
+    permissions: {
+      ...MockPermissions,
+      createTemplates: false,
+    },
+    error: makeMockApiError({
+      message: "Something went wrong fetching templates.",
+    }),
+    templates: undefined,
+    examples: undefined,
+  },
 }
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -13,7 +13,6 @@ import useTheme from "@material-ui/styles/useTheme"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { Maybe } from "components/Conditionals/Maybe"
-import { useEntitlements } from "hooks/useEntitlements"
 import { FC } from "react"
 import { useNavigate, Link as RouterLink } from "react-router-dom"
 import { createDayString } from "util/createDayString"
@@ -38,10 +37,9 @@ import {
   HelpTooltipText,
   HelpTooltipTitle,
 } from "../../components/Tooltips/HelpTooltip/HelpTooltip"
-import { usePermissions } from "hooks/usePermissions"
 import { EmptyTemplates } from "./EmptyTemplates"
 import { TemplatesContext } from "xServices/templates/templatesXService"
-import { Permissions } from "xServices/auth/authXService"
+import { Entitlements } from "api/typesGenerated"
 
 export const Language = {
   developerCount: (activeCount: number): string => {
@@ -76,20 +74,18 @@ const TemplateHelpTooltip: React.FC = () => {
 
 export interface TemplatesPageViewProps {
   context: TemplatesContext
-  permissions: Permissions
+  entitlements: Entitlements
 }
 
 export const TemplatesPageView: FC<
   React.PropsWithChildren<TemplatesPageViewProps>
-> = ({ context }) => {
+> = ({ context, entitlements }) => {
   const styles = useStyles()
   const navigate = useNavigate()
   const theme: Theme = useTheme()
-  const { templates, error, examples } = context
+  const { templates, error, examples, permissions } = context
   const isLoading = !templates
   const isEmpty = Boolean(templates && templates.length === 0)
-  const entitlements = useEntitlements()
-  const permissions = usePermissions()
 
   return (
     <Margins>
@@ -162,6 +158,7 @@ export const TemplatesPageView: FC<
                     <EmptyTemplates
                       permissions={permissions}
                       examples={examples ?? []}
+                      entitlements={entitlements}
                     />
                   </Cond>
 

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -3,6 +3,7 @@ import { everyOneGroup } from "util/groups"
 import * as Types from "../api/types"
 import * as TypesGen from "../api/typesGenerated"
 import { range } from "lodash"
+import { Permissions } from "xServices/auth/authXService"
 
 export const MockTemplateDAUResponse: TypesGen.TemplateDAUsResponse = {
   entries: [
@@ -1065,8 +1066,8 @@ export const MockTemplateACLEmpty: TypesGen.TemplateACL = {
 }
 
 export const MockTemplateExample: TypesGen.TemplateExample = {
-  id: "aws-ecs-container",
-  url: "https://github.com/coder/coder/tree/main/examples/templates/aws-ecs-container",
+  id: "aws-windows",
+  url: "https://github.com/coder/coder/tree/main/examples/templates/aws-windows",
   name: "Develop in an ECS-hosted container",
   description: "Get started with Linux development on AWS ECS.",
   markdown:
@@ -1085,3 +1086,14 @@ export const MockTemplateExample2: TypesGen.TemplateExample = {
   icon: "/icon/aws.png",
   tags: ["aws", "cloud"],
 }
+
+export const MockPermissions: Permissions = {
+  createGroup: true,
+  createTemplates: true,
+  createUser: true,
+  deleteTemplates: true,
+  readAllUsers: true,
+  updateUsers: true,
+  viewAuditLog: true,
+  viewDeploymentConfig: true,
+}