unusedVariablesNotice

coder · mtojek · Mar 2, 2023 · Feb 17, 2023 · Feb 27, 2023 · Feb 27, 2023
commit 96a813cb8dc7374f4ae280ab8f3d38940f99ecda
diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx
@@ -3,11 +3,7 @@ import DeleteOutlined from "@material-ui/icons/DeleteOutlined"
 import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
 import SettingsOutlined from "@material-ui/icons/SettingsOutlined"
 import CodeOutlined from "@material-ui/icons/CodeOutlined"
-import {
-  AuthorizationResponse,
-  Template,
-  TemplateVersionVariable,
-} from "api/typesGenerated"
+import { AuthorizationResponse, Template } from "api/typesGenerated"
 import { Avatar } from "components/Avatar/Avatar"
 import { Maybe } from "components/Conditionals/Maybe"
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"

diff --git a/site/src/i18n/en/templateVariablesPage.json b/site/src/i18n/en/templateVariablesPage.json
@@ -1,5 +1,6 @@
 {
   "title": "Template variables",
   "sensitiveVariableHelperText": "This variable is sensitive. The previous value will be used if empty.",
-  "validationRequiredVariable": "Variable is required."
+  "validationRequiredVariable": "Variable is required.",
+  "unusedVariablesNotice": "This template does not use managed variables."
 }
diff --git a/site/src/pages/TemplateVariablesPage/TemplateVariablesPage.test.tsx b/site/src/pages/TemplateVariablesPage/TemplateVariablesPage.test.tsx
@@ -173,4 +173,20 @@ describe("TemplateVariablesPage", () => {
     const validationError = await screen.findByText(validationRequiredField)
     expect(validationError).toBeDefined()
   })
+
+  it("no managed variables", async () => {
+    jest.spyOn(API, "getTemplateByName").mockResolvedValueOnce(MockTemplate)
+    jest
+      .spyOn(API, "getTemplateVersion")
+      .mockResolvedValueOnce(MockTemplateVersion)
+    jest.spyOn(API, "getTemplateVersionVariables").mockResolvedValueOnce([])
+
+    renderTemplateVariablesPage()
+
+    const element = await screen.findByText(pageTitleText)
+    expect(element).toBeDefined()
+
+    const goBackButton = await screen.findByText("Go back")
+    expect(goBackButton).toBeDefined()
+  })
 })
diff --git a/site/src/pages/TemplateVariablesPage/TemplateVariablesPageView.tsx b/site/src/pages/TemplateVariablesPage/TemplateVariablesPageView.tsx
@@ -11,6 +11,7 @@ import { Stack } from "components/Stack/Stack"
 import { makeStyles } from "@material-ui/core/styles"
 import { useTranslation } from "react-i18next"
 import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm"
+import { GoBackButton } from "components/GoBackButton/GoBackButton"
 
 export interface TemplateVariablesPageViewProps {
   templateVersion?: TemplateVersion
@@ -57,7 +58,7 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
         </Stack>
       )}
       {isLoading && <Loader />}
-      {templateVersion && templateVariables && (
+      {templateVersion && templateVariables && templateVariables.length > 0 && (
         <TemplateVariablesForm
           initialTouched={initialTouched}
           isSubmitting={isSubmitting}
@@ -68,6 +69,14 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
           error={errors.updateTemplateError}
         />
       )}
+      {templateVariables && templateVariables.length === 0 && (
+        <div>
+          <AlertBanner severity="info" text={t("unusedVariablesNotice")} />
+          <div className={classes.goBackSection}>
+            <GoBackButton onClick={onCancel} />
+          </div>
+        </div>
+      )}
     </FullPageHorizontalForm>
   )
 }
@@ -76,4 +85,9 @@ const useStyles = makeStyles((theme) => ({
   errorContainer: {
     marginBottom: theme.spacing(2),
   },
+  goBackSection: {
+    display: "flex",
+    width: "100%",
+    marginTop: 32,
+  },
 }))