refactor: Remove template UI from experimental (#5555)

BrunoQuaresma · web-flow · commit 4e14cc5207c2 · 2023-01-03T19:29:38.000Z
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -10,7 +10,7 @@ import {
 } from "components/PageHeader/PageHeader"
 import { FC } from "react"
 import { StarterTemplateContext } from "xServices/starterTemplates/starterTemplateXService"
-import EyeIcon from "@material-ui/icons/VisibilityOutlined"
+import ViewCodeIcon from "@material-ui/icons/OpenInNewOutlined"
 import PlusIcon from "@material-ui/icons/AddOutlined"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { useTranslation } from "react-i18next"
@@ -50,7 +50,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
               target="_blank"
               href={starterTemplate.url}
               rel="noreferrer"
-              startIcon={<EyeIcon />}
+              startIcon={<ViewCodeIcon />}
             >
               {t("actions.viewSourceCode")}
             </Button>
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 { Entitlements, TemplateExample } from "api/typesGenerated"
+import { TemplateExample } from "api/typesGenerated"
 import { CodeExample } from "components/CodeExample/CodeExample"
 import { Stack } from "components/Stack/Stack"
 import { TableEmpty } from "components/TableEmpty/TableEmpty"
@@ -12,7 +12,7 @@ import { Link as RouterLink } from "react-router-dom"
 import { Permissions } from "xServices/auth/authXService"
 
 // Those are from https://github.com/coder/coder/tree/main/examples/templates
-const featuredExamples = [
+const featuredExampleIds = [
   "docker",
   "kubernetes",
   "aws-linux",
@@ -22,19 +22,29 @@ const featuredExamples = [
 ]
 
 const findFeaturedExamples = (examples: TemplateExample[]) => {
-  return examples.filter((example) => featuredExamples.includes(example.id))
+  const featuredExamples: TemplateExample[] = []
+
+  // We loop the featuredExampleIds first to keep the order
+  featuredExampleIds.forEach((exampleId) => {
+    examples.forEach((example) => {
+      if (exampleId === example.id) {
+        featuredExamples.push(example)
+      }
+    })
+  })
+
+  return featuredExamples
 }
 
 export const EmptyTemplates: FC<{
   permissions: Permissions
   examples: TemplateExample[]
-  entitlements: Entitlements
-}> = ({ permissions, examples, entitlements }) => {
+}> = ({ permissions, examples }) => {
   const styles = useStyles()
   const { t } = useTranslation("templatesPage")
   const featuredExamples = findFeaturedExamples(examples)
 
-  if (permissions.createTemplates && entitlements.experimental) {
+  if (permissions.createTemplates) {
     return (
       <TableEmpty
         message={t("empty.message")}
@@ -81,33 +91,6 @@ 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,5 +1,4 @@
 import { useMachine } from "@xstate/react"
-import { useEntitlements } from "hooks/useEntitlements"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { usePermissions } from "hooks/usePermissions"
 import React from "react"
@@ -11,7 +10,6 @@ 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,10 +22,7 @@ export const TemplatesPage: React.FC = () => {
       <Helmet>
         <title>{pageTitle("Templates")}</title>
       </Helmet>
-      <TemplatesPageView
-        context={templatesState.context}
-        entitlements={entitlements}
-      />
+      <TemplatesPageView context={templatesState.context} />
     </>
   )
 }
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
@@ -1,7 +1,6 @@
 import { ComponentMeta, Story } from "@storybook/react"
 import {
   makeMockApiError,
-  MockEntitlements,
   MockOrganization,
   MockPermissions,
   MockTemplate,
@@ -21,7 +20,6 @@ const Template: Story<TemplatesPageViewProps> = (args) => (
 
 export const WithTemplates = Template.bind({})
 WithTemplates.args = {
-  entitlements: MockEntitlements,
   context: {
     organizationId: MockOrganization.id,
     permissions: MockPermissions,
@@ -60,22 +58,6 @@ WithTemplatesSmallViewPort.parameters = {
 
 export const EmptyCanCreate = Template.bind({})
 EmptyCanCreate.args = {
-  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,
@@ -87,7 +69,6 @@ EmptyCanCreateExperimental.args = {
 
 export const EmptyCannotCreate = Template.bind({})
 EmptyCannotCreate.args = {
-  entitlements: MockEntitlements,
   context: {
     organizationId: MockOrganization.id,
     permissions: {
@@ -102,7 +83,6 @@ EmptyCannotCreate.args = {
 
 export const Error = Template.bind({})
 Error.args = {
-  entitlements: MockEntitlements,
   context: {
     organizationId: MockOrganization.id,
     permissions: {
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -39,7 +39,6 @@ import {
 } from "../../components/Tooltips/HelpTooltip/HelpTooltip"
 import { EmptyTemplates } from "./EmptyTemplates"
 import { TemplatesContext } from "xServices/templates/templatesXService"
-import { Entitlements } from "api/typesGenerated"
 
 export const Language = {
   developerCount: (activeCount: number): string => {
@@ -74,12 +73,11 @@ const TemplateHelpTooltip: React.FC = () => {
 
 export interface TemplatesPageViewProps {
   context: TemplatesContext
-  entitlements: Entitlements
 }
 
 export const TemplatesPageView: FC<
   React.PropsWithChildren<TemplatesPageViewProps>
-> = ({ context, entitlements }) => {
+> = ({ context }) => {
   const styles = useStyles()
   const navigate = useNavigate()
   const theme: Theme = useTheme()
@@ -91,9 +89,7 @@ export const TemplatesPageView: FC<
     <Margins>
       <PageHeader
         actions={
-          <Maybe
-            condition={entitlements.experimental && permissions.createTemplates}
-          >
+          <Maybe condition={permissions.createTemplates}>
             <Button component={RouterLink} to="/starter-templates">
               Starter templates
             </Button>
@@ -158,7 +154,6 @@ export const TemplatesPageView: FC<
                     <EmptyTemplates
                       permissions={permissions}
                       examples={examples ?? []}
-                      entitlements={entitlements}
                     />
                   </Cond>
 
