fix(site): display empty component when workspace has no parameters (#10286)

BrunoQuaresma · web-flow · commit 01792f064ec8 · 2023-10-16T09:49:53.000-03:00
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.stories.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.stories.tsx
@@ -39,4 +39,13 @@ type Story = StoryObj<typeof WorkspaceParametersPageView>;
 
 const Example: Story = {};
 
+export const Empty: Story = {
+  args: {
+    data: {
+      buildParameters: [],
+      templateVersionRichParameters: [],
+    },
+  },
+};
+
 export { Example as WorkspaceParametersPage };
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
@@ -14,6 +14,10 @@ import { FC } from "react";
 import { isApiValidationError } from "api/errors";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { WorkspaceBuildParameter } from "api/typesGenerated";
+import { EmptyState } from "components/EmptyState/EmptyState";
+import Button from "@mui/material/Button";
+import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
+import { docs } from "utils/docs";
 
 const WorkspaceParametersPage = () => {
   const workspace = useWorkspaceSettings();
@@ -88,14 +92,36 @@ export const WorkspaceParametersPageView: FC<
       )}
 
       {data ? (
-        <WorkspaceParametersForm
-          buildParameters={data.buildParameters}
-          templateVersionRichParameters={data.templateVersionRichParameters}
-          error={submitError}
-          isSubmitting={isSubmitting}
-          onSubmit={onSubmit}
-          onCancel={onCancel}
-        />
+        data.templateVersionRichParameters.length > 0 ? (
+          <WorkspaceParametersForm
+            buildParameters={data.buildParameters}
+            templateVersionRichParameters={data.templateVersionRichParameters}
+            error={submitError}
+            isSubmitting={isSubmitting}
+            onSubmit={onSubmit}
+            onCancel={onCancel}
+          />
+        ) : (
+          <EmptyState
+            message="This workspace has no parameters"
+            cta={
+              <Button
+                component="a"
+                href={docs("/templates/parameters")}
+                startIcon={<OpenInNewOutlined />}
+                variant="contained"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Learn more about parameters
+              </Button>
+            }
+            css={(theme) => ({
+              border: `1px solid ${theme.palette.divider}`,
+              borderRadius: theme.shape.borderRadius,
+            })}
+          />
+        )
       ) : (
         <Loader />
       )}
