diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.stories.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.stories.tsx index 8b4eb0685287f..bd21640a8fc7f 100644 --- 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; 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 index e92c220585396..c7656c8ea04d2 100644 --- 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 ? ( - + data.templateVersionRichParameters.length > 0 ? ( + + ) : ( + } + variant="contained" + target="_blank" + rel="noreferrer" + > + Learn more about parameters + + } + css={(theme) => ({ + border: `1px solid ${theme.palette.divider}`, + borderRadius: theme.shape.borderRadius, + })} + /> + ) ) : ( )}