feat(site): Add template embed page (coder#7501)

Author: BrunoQuaresma

site/.storybook/preview.jsx

@@ -2,6 +2,7 @@ import CssBaseline from "@mui/material/CssBaseline"
 import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles"
 import { createMemoryHistory } from "history"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
+import { HelmetProvider } from "react-helmet-async"
 import { dark } from "../src/theme"
 import "../src/theme/globalFonts"
 import "../src/i18n"
@@ -24,6 +25,13 @@ export const decorators = [
       </HistoryRouter>
     )
   },
+  (Story) => {
+    return (
+      <HelmetProvider>
+        <Story />
+      </HelmetProvider>
+    )
+  },
 ]
 
 export const parameters = {

site/src/AppRouter.tsx

@@ -176,6 +176,9 @@ const AddNewLicensePage = lazy(
   () =>
     import("./pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePage"),
 )
+const TemplateEmbedPage = lazy(
+  () => import("./pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage"),
+)
 
 export const AppRouter: FC = () => {
   return (
@@ -208,6 +211,7 @@ export const AppRouter: FC = () => {
                     <Route path="docs" element={<TemplateDocsPage />} />
                     <Route path="files" element={<TemplateFilesPage />} />
                     <Route path="versions" element={<TemplateVersionsPage />} />
+                    <Route path="embed" element={<TemplateEmbedPage />} />
                   </Route>
 
                   <Route path="workspace" element={<CreateWorkspacePage />} />

site/src/components/Dashboard/DashboardLayout.tsx

@@ -72,7 +72,7 @@ const useStyles = makeStyles((theme) => ({
     // It also give a more pleasant distance to the site content when
     // the banner is visible.
     marginTop: theme.spacing(2),
-    marginBottom: -theme.spacing(2),
+    marginBottom: theme.spacing(-2),
   },
   siteContent: {
     flex: 1,

site/src/components/RichParameterInput/RichParameterInput.tsx

@@ -54,7 +54,7 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ id, parameter }) => {
   )
 }
 
-export type RichParameterInputProps = TextFieldProps & {
+export type RichParameterInputProps = Omit<TextFieldProps, "onChange"> & {
   index: number
   parameter: TemplateVersionParameter
   onChange: (value: string) => void

site/src/components/TabSidebar/TabSidebar.tsx

@@ -73,7 +73,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   menuItem: {
-    letterSpacing: -theme.spacing(0.0375),
+    letterSpacing: theme.spacing(-0.0375),
     padding: 0,
     fontSize: 18,
     color: theme.palette.text.secondary,

site/src/components/TemplateLayout/TemplateLayout.tsx

@@ -146,6 +146,17 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
             >
               Versions
             </NavLink>
+            <NavLink
+              to={`/templates/${templateName}/embed`}
+              className={({ isActive }) =>
+                combineClasses([
+                  styles.tabItem,
+                  isActive ? styles.tabItemActive : undefined,
+                ])
+              }
+            >
+              Embed
+            </NavLink>
           </Stack>
         </Margins>
       </div>

site/src/components/TemplateParameters/TemplateParameters.tsx

@@ -0,0 +1,87 @@
+import { TemplateVersionParameter } from "api/typesGenerated"
+import { FormSection, FormFields } from "components/Form/Form"
+import {
+  RichParameterInput,
+  RichParameterInputProps,
+} from "components/RichParameterInput/RichParameterInput"
+import { ComponentProps, FC } from "react"
+
+export type TemplateParametersSectionProps = {
+  templateParameters: TemplateVersionParameter[]
+  getInputProps: (
+    parameter: TemplateVersionParameter,
+    index: number,
+  ) => Omit<RichParameterInputProps, "parameter" | "index">
+} & Pick<ComponentProps<typeof FormSection>, "classes">
+
+export const MutableTemplateParametersSection: FC<
+  TemplateParametersSectionProps
+> = ({ templateParameters, getInputProps, ...formSectionProps }) => {
+  const hasMutableParameters =
+    templateParameters.filter((p) => p.mutable).length > 0
+
+  return (
+    <>
+      {hasMutableParameters && (
+        <FormSection
+          {...formSectionProps}
+          title="Parameters"
+          description="These parameters are provided by your template's Terraform configuration and can be changed after creating the workspace."
+        >
+          <FormFields>
+            {templateParameters.map(
+              (parameter, index) =>
+                parameter.mutable && (
+                  <RichParameterInput
+                    {...getInputProps(parameter, index)}
+                    index={index}
+                    key={parameter.name}
+                    parameter={parameter}
+                  />
+                ),
+            )}
+          </FormFields>
+        </FormSection>
+      )}
+    </>
+  )
+}
+
+export const ImmutableTemplateParametersSection: FC<
+  TemplateParametersSectionProps
+> = ({ templateParameters, getInputProps, ...formSectionProps }) => {
+  const hasImmutableParameters =
+    templateParameters.filter((p) => !p.mutable).length > 0
+
+  return (
+    <>
+      {hasImmutableParameters && (
+        <FormSection
+          {...formSectionProps}
+          title="Immutable parameters"
+          description={
+            <>
+              These parameters are also provided by your Terraform configuration
+              but they{" "}
+              <strong>cannot be changed after creating the workspace.</strong>
+            </>
+          }
+        >
+          <FormFields>
+            {templateParameters.map(
+              (parameter, index) =>
+                !parameter.mutable && (
+                  <RichParameterInput
+                    {...getInputProps(parameter, index)}
+                    index={index}
+                    key={parameter.name}
+                    parameter={parameter}
+                  />
+                ),
+            )}
+          </FormFields>
+        </FormSection>
+      )}
+    </>
+  )
+}

site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

@@ -1,7 +1,6 @@
 import TextField from "@mui/material/TextField"
 import * as TypesGen from "api/typesGenerated"
 import { ParameterInput } from "components/ParameterInput/ParameterInput"
-import { RichParameterInput } from "components/RichParameterInput/RichParameterInput"
 import { Stack } from "components/Stack/Stack"
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"
 import { FormikContextType, FormikTouched, useFormik } from "formik"
@@ -26,6 +25,10 @@ import {
   useValidationSchemaForRichParameters,
   workspaceBuildParameterValue,
 } from "utils/richParameters"
+import {
+  ImmutableTemplateParametersSection,
+  MutableTemplateParametersSection,
+} from "components/TemplateParameters/TemplateParameters"
 
 export enum CreateWorkspaceErrors {
   GET_TEMPLATES_ERROR = "getTemplatesError",
@@ -308,86 +311,53 @@ export const CreateWorkspacePageView: FC<
           </FormSection>
         )}
 
-        {/* Mutable rich parameters */}
-        {props.templateParameters &&
-          props.templateParameters.filter((p) => p.mutable).length > 0 && (
-            <FormSection
-              title="Parameters"
-              description="These parameters are provided by your template's Terraform configuration and can be changed after creating the workspace."
-            >
-              <FormFields>
-                {props.templateParameters.map(
-                  (parameter, index) =>
-                    parameter.mutable && (
-                      <RichParameterInput
-                        {...getFieldHelpers(
-                          "rich_parameter_values[" + index + "].value",
-                        )}
-                        disabled={form.isSubmitting}
-                        index={index}
-                        key={parameter.name}
-                        onChange={(value) => {
-                          form.setFieldValue("rich_parameter_values." + index, {
-                            name: parameter.name,
-                            value: value,
-                          })
-                        }}
-                        parameter={parameter}
-                        initialValue={workspaceBuildParameterValue(
-                          initialRichParameterValues,
-                          parameter,
-                        )}
-                      />
-                    ),
-                )}
-              </FormFields>
-            </FormSection>
-          )}
-
-        {/* Immutable rich parameters */}
-        {props.templateParameters &&
-          props.templateParameters.filter((p) => !p.mutable).length > 0 && (
-            <FormSection
-              title="Immutable parameters"
+        {props.templateParameters && (
+          <>
+            <MutableTemplateParametersSection
+              templateParameters={props.templateParameters}
+              getInputProps={(parameter, index) => {
+                return {
+                  ...getFieldHelpers(
+                    "rich_parameter_values[" + index + "].value",
+                  ),
+                  onChange: (value) => {
+                    form.setFieldValue("rich_parameter_values." + index, {
+                      name: parameter.name,
+                      value: value,
+                    })
+                  },
+                  initialValue: workspaceBuildParameterValue(
+                    initialRichParameterValues,
+                    parameter,
+                  ),
+                  disabled: form.isSubmitting,
+                }
+              }}
+            />
+            <ImmutableTemplateParametersSection
+              templateParameters={props.templateParameters}
               classes={{ root: styles.warningSection }}
-              description={
-                <>
-                  These parameters are also provided by your Terraform
-                  configuration but they{" "}
-                  <strong className={styles.warningText}>
-                    cannot be changed after creating the workspace.
-                  </strong>
-                </>
-              }
-            >
-              <FormFields>
-                {props.templateParameters.map(
-                  (parameter, index) =>
-                    !parameter.mutable && (
-                      <RichParameterInput
-                        {...getFieldHelpers(
-                          "rich_parameter_values[" + index + "].value",
-                        )}
-                        disabled={form.isSubmitting}
-                        index={index}
-                        key={parameter.name}
-                        onChange={(value) => {
-                          form.setFieldValue("rich_parameter_values." + index, {
-                            name: parameter.name,
-                            value: value,
-                          })
-                        }}
-                        parameter={parameter}
-                        initialValue={workspaceBuildParameterValue(
-                          initialRichParameterValues,
-                          parameter,
-                        )}
-                      />
-                    ),
-                )}
-              </FormFields>
-            </FormSection>
-          )}
+              getInputProps={(parameter, index) => {
+                return {
+                  ...getFieldHelpers(
+                    "rich_parameter_values[" + index + "].value",
+                  ),
+                  onChange: (value) => {
+                    form.setFieldValue("rich_parameter_values." + index, {
+                      name: parameter.name,
+                      value: value,
+                    })
+                  },
+                  initialValue: workspaceBuildParameterValue(
+                    initialRichParameterValues,
+                    parameter,
+                  ),
+                  disabled: form.isSubmitting,
+                }
+              }}
+            />
+          </>
+        )}
 
         <FormFooter
           onCancel={props.onCancel}
@@ -408,7 +378,7 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: 8,
     backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(10),
-    marginLeft: -theme.spacing(10),
-    marginRight: -theme.spacing(10),
+    marginLeft: theme.spacing(-10),
+    marginRight: theme.spacing(-10),
   },
 }))

site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.test.tsx

@@ -0,0 +1,52 @@
+import {
+  renderWithAuth,
+  waitForLoaderToBeRemoved,
+} from "testHelpers/renderHelpers"
+import TemplateEmbedPage from "./TemplateEmbedPage"
+import { TemplateLayout } from "components/TemplateLayout/TemplateLayout"
+import {
+  MockTemplate,
+  MockTemplateVersionParameter1 as parameter1,
+  MockTemplateVersionParameter2 as parameter2,
+} from "testHelpers/entities"
+import * as API from "api/api"
+import userEvent from "@testing-library/user-event"
+import { screen } from "@testing-library/react"
+
+test("Users can fill the parameters and copy the open in coder url", async () => {
+  jest
+    .spyOn(API, "getTemplateVersionRichParameters")
+    .mockResolvedValue([parameter1, parameter2])
+
+  renderWithAuth(
+    <TemplateLayout>
+      <TemplateEmbedPage />
+    </TemplateLayout>,
+    {
+      route: `/templates/${MockTemplate.name}/embed`,
+      path: "/templates/:template/embed",
+    },
+  )
+  await waitForLoaderToBeRemoved()
+
+  const user = userEvent.setup()
+  const firstParameterField = screen.getByLabelText(
+    parameter1.display_name ?? parameter1.name,
+    { exact: false },
+  )
+  await user.clear(firstParameterField)
+  await user.type(firstParameterField, "firstParameterValue")
+  const secondParameterField = screen.getByLabelText(
+    parameter2.display_name ?? parameter2.name,
+    { exact: false },
+  )
+  await user.clear(secondParameterField)
+  await user.type(secondParameterField, "123456")
+
+  jest.spyOn(window.navigator.clipboard, "writeText")
+  const copyButton = screen.getByRole("button", { name: /copy/i })
+  await userEvent.click(copyButton)
+  expect(window.navigator.clipboard.writeText).toBeCalledWith(
+    `[![Open in Coder](http://localhost/open-in-coder.svg)](http://localhost/templates/test-template/workspace?param.first_parameter=firstParameterValue&param.second_parameter=123456)`,
+  )
+})