Move template variables

coder · BrunoQuaresma · Mar 23, 2023 · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023
commit 13086b4f6c8f1b186a94b14ed73ed0a645224f36
@@ -121,7 +121,10 @@ const CreateTemplatePage = lazy(
   () => import("./pages/CreateTemplatePage/CreateTemplatePage"),
 )
 const TemplateVariablesPage = lazy(
-  () => import("./pages/TemplateVariablesPage/TemplateVariablesPage"),
+  () =>
+    import(
+      "./pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage"
+    ),
 )
 const WorkspaceSettingsPage = lazy(
   () => import("./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"),
@@ -173,9 +176,12 @@ export const AppRouter: FC = () => {
                       path="permissions"
                       element={<TemplatePermissionsPage />}
                     />
+                    <Route
+                      path="variables"
+                      element={<TemplateVariablesPage />}
+                    />
                   </Route>
 
-                  <Route path="variables" element={<TemplateVariablesPage />} />
                   <Route path="versions">
                     <Route path=":version">
                       <Route index element={<TemplateVersionPage />} />

@@ -71,7 +71,7 @@ export const Sidebar: React.FC<{ template: Template }> = ({ template }) => {
         Permissions
       </SidebarNavItem>
       <SidebarNavItem
-        href="ssh-keys"
+        href="variables"
         icon={<SidebarNavItemIcon icon={VariablesIcon} />}
       >
         Variables

@@ -4,13 +4,15 @@ import {
   TemplateVersionVariable,
   VariableValue,
 } from "api/typesGenerated"
+import { displaySuccess } from "components/GlobalSnackbar/utils"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
 import { useTranslation } from "react-i18next"
 import { useNavigate, useParams } from "react-router-dom"
 import { templateVariablesMachine } from "xServices/template/templateVariablesXService"
-import { pageTitle } from "../../util/page"
+import { pageTitle } from "../../../util/page"
+import { useTemplateSettingsContext } from "../TemplateSettingsLayout"
 import { TemplateVariablesPageView } from "./TemplateVariablesPageView"
 
 export const TemplateVariablesPage: FC = () => {
@@ -19,15 +21,16 @@ export const TemplateVariablesPage: FC = () => {
     template: string
   }
   const organizationId = useOrganizationId()
+  const { template } = useTemplateSettingsContext()
   const navigate = useNavigate()
   const [state, send] = useMachine(templateVariablesMachine, {
     context: {
       organizationId,
-      templateName,
+      template,
     },
     actions: {
       onUpdateTemplate: () => {
-        navigate(`/templates/${templateName}`)
+        displaySuccess("Template updated successfully")
       },
     },
   })

@@ -10,8 +10,8 @@ import { TemplateVariablesForm } from "./TemplateVariablesForm"
 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"
+import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"
 
 export interface TemplateVariablesPageViewProps {
   templateVersion?: TemplateVersion
@@ -48,45 +48,44 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
 
   return (
     <>
-      <FullPageHorizontalForm title={t("title")} onCancel={onCancel}>
-        {Boolean(errors.getTemplateDataError) && (
-          <Stack className={classes.errorContainer}>
-            <AlertBanner severity="error" error={errors.getTemplateDataError} />
-          </Stack>
-        )}
-        {Boolean(errors.updateTemplateError) && (
-          <Stack className={classes.errorContainer}>
-            <AlertBanner severity="error" error={errors.updateTemplateError} />
-          </Stack>
-        )}
-        {Boolean(errors.jobError) && (
-          <Stack className={classes.errorContainer}>
-            <AlertBanner severity="error" text={errors.jobError} />
-          </Stack>
-        )}
-        {isLoading && <Loader />}
-        {templateVersion &&
-          templateVariables &&
-          templateVariables.length > 0 && (
-            <TemplateVariablesForm
-              initialTouched={initialTouched}
-              isSubmitting={isSubmitting}
-              templateVersion={templateVersion}
-              templateVariables={templateVariables}
-              onSubmit={onSubmit}
-              onCancel={onCancel}
-              error={errors.updateTemplateError}
-            />
-          )}
-        {templateVariables && templateVariables.length === 0 && (
-          <div>
-            <AlertBanner severity="info" text={t("unusedVariablesNotice")} />
-            <div className={classes.goBackSection}>
-              <GoBackButton onClick={onCancel} />
-            </div>
+      <PageHeader className={classes.pageHeader}>
+        <PageHeaderTitle>{t("title")}</PageHeaderTitle>
+      </PageHeader>
+      {Boolean(errors.getTemplateDataError) && (
+        <Stack className={classes.errorContainer}>
+          <AlertBanner severity="error" error={errors.getTemplateDataError} />
+        </Stack>
+      )}
+      {Boolean(errors.updateTemplateError) && (
+        <Stack className={classes.errorContainer}>
+          <AlertBanner severity="error" error={errors.updateTemplateError} />
+        </Stack>
+      )}
+      {Boolean(errors.jobError) && (
+        <Stack className={classes.errorContainer}>
+          <AlertBanner severity="error" text={errors.jobError} />
+        </Stack>
+      )}
+      {isLoading && <Loader />}
+      {templateVersion && templateVariables && templateVariables.length > 0 && (
+        <TemplateVariablesForm
+          initialTouched={initialTouched}
+          isSubmitting={isSubmitting}
+          templateVersion={templateVersion}
+          templateVariables={templateVariables}
+          onSubmit={onSubmit}
+          onCancel={onCancel}
+          error={errors.updateTemplateError}
+        />
+      )}
+      {templateVariables && templateVariables.length === 0 && (
+        <div>
+          <AlertBanner severity="info" text={t("unusedVariablesNotice")} />
+          <div className={classes.goBackSection}>
+            <GoBackButton onClick={onCancel} />
           </div>
-        )}
-      </FullPageHorizontalForm>
+        </div>
+      )}
     </>
   )
 }
@@ -100,4 +99,7 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     marginTop: 32,
   },
+  pageHeader: {
+    paddingTop: 0,
+  },
 }))
@@ -1,6 +1,5 @@
 import {
   createTemplateVersion,
-  getTemplateByName,
   getTemplateVersion,
   getTemplateVersionVariables,
   updateActiveTemplateVersion,
@@ -17,9 +16,8 @@ import { Message } from "api/types"
 
 type TemplateVariablesContext = {
   organizationId: string
-  templateName: string
 
-  template?: Template
+  template: Template
   activeTemplateVersion?: TemplateVersion
   templateVariables?: TemplateVersionVariable[]
 
@@ -46,9 +44,6 @@ export const templateVariablesMachine = createMachine(
       context: {} as TemplateVariablesContext,
       events: {} as UpdateTemplateEvent,
       services: {} as {
-        getTemplate: {
-          data: Template
-        }
         getActiveTemplateVersion: {
           data: TemplateVersion
         }
@@ -66,24 +61,8 @@ export const templateVariablesMachine = createMachine(
         }
       },
     },
-    initial: "gettingTemplate",
+    initial: "gettingActiveTemplateVersion",
     states: {
-      gettingTemplate: {
-        entry: "clearGetTemplateDataError",
-        invoke: {
-          src: "getTemplate",
-          onDone: [
-            {
-              actions: ["assignTemplate"],
-              target: "gettingActiveTemplateVersion",
-            },
-          ],
-          onError: {
-            actions: ["assignGetTemplateDataError"],
-            target: "error",
-          },
-        },
-      },
       gettingActiveTemplateVersion: {
         entry: "clearGetTemplateDataError",
         invoke: {
@@ -183,19 +162,10 @@ export const templateVariablesMachine = createMachine(
   },
   {
     services: {
-      getTemplate: ({ organizationId, templateName }) => {
-        return getTemplateByName(organizationId, templateName)
-      },
       getActiveTemplateVersion: ({ template }) => {
-        if (!template) {
-          throw new Error("No template selected")
-        }
         return getTemplateVersion(template.active_version_id)
       },
       getTemplateVariables: ({ template }) => {
-        if (!template) {
-          throw new Error("No template selected")
-        }
         return getTemplateVersionVariables(template.active_version_id)
       },
       createNewTemplateVersion: ({
@@ -224,10 +194,6 @@ export const templateVariablesMachine = createMachine(
         return newTemplateVersion
       },
       updateTemplate: ({ template, newTemplateVersion }) => {
-        if (!template) {
-          throw new Error("No template selected")
-        }
-
         if (!newTemplateVersion) {
           throw new Error("New template version is undefined")
         }
@@ -238,9 +204,6 @@ export const templateVariablesMachine = createMachine(
       },
     },
     actions: {
-      assignTemplate: assign({
-        template: (_, event) => event.data,
-      }),
       assignActiveTemplateVersion: assign({
         activeTemplateVersion: (_, event) => event.data,
       }),