chore: Make SettingsForm shared and generic (#3308)

theopensystemslab · Jun 20, 2024 · 0cb8424 · 0cb8424
1 parent fd6112e
commit 0cb8424
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 69 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ButtonForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ButtonForm.tsx
@@ -11,7 +11,8 @@ import InputDescription from "ui/editor/InputDescription";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
-import { DesignPreview, FormProps, SettingsForm } from ".";
+import { DesignPreview, FormProps } from ".";
+import { SettingsForm } from "../shared/SettingsForm";
 
 export const ButtonForm: React.FC<FormProps> = ({
   formikConfig,
@@ -33,7 +34,7 @@ export const ButtonForm: React.FC<FormProps> = ({
   });
 
   return (
-    <SettingsForm
+    <SettingsForm<TeamTheme>
       formik={formik}
       legend="Button colour"
       description={

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/FaviconForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/FaviconForm.tsx
@@ -10,7 +10,8 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 
-import { FormProps, SettingsForm } from ".";
+import { FormProps } from ".";
+import { SettingsForm } from "../shared/SettingsForm";
 
 export const FaviconForm: React.FC<FormProps> = ({
   formikConfig,
@@ -36,7 +37,7 @@ export const FaviconForm: React.FC<FormProps> = ({
       : formik.setFieldValue("favicon", null);
 
   return (
-    <SettingsForm
+    <SettingsForm<TeamTheme>
       formik={formik}
       legend="Favicon"
       description={

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx
@@ -9,7 +9,8 @@ import InputDescription from "ui/editor/InputDescription";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
-import { DesignPreview, FormProps, SettingsForm } from ".";
+import { DesignPreview, FormProps } from ".";
+import { SettingsForm } from "../shared/SettingsForm";
 
 export const TextLinkForm: React.FC<FormProps> = ({
   formikConfig,
@@ -43,7 +44,7 @@ export const TextLinkForm: React.FC<FormProps> = ({
   });
 
   return (
-    <SettingsForm
+    <SettingsForm<TeamTheme>
       formik={formik}
       legend="Text link colour"
       description={

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx
@@ -12,7 +12,8 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 
-import { DesignPreview, FormProps, SettingsForm } from ".";
+import { DesignPreview, FormProps } from ".";
+import { SettingsForm } from "../shared/SettingsForm";
 
 export const ThemeAndLogoForm: React.FC<FormProps> = ({
   formikConfig,
@@ -54,7 +55,7 @@ export const ThemeAndLogoForm: React.FC<FormProps> = ({
       : formik.setFieldValue("logo", null);
 
   return (
-    <SettingsForm
+    <SettingsForm<TeamTheme>
       formik={formik}
       legend="Theme colour & logo"
       description={

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx
@@ -1,17 +1,13 @@
 import Alert from "@mui/material/Alert";
 import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
 import Snackbar from "@mui/material/Snackbar";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { TeamTheme } from "@opensystemslab/planx-core/types";
-import { FormikConfig, FormikProps } from "formik";
+import { FormikConfig } from "formik";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useState } from "react";
 import EditorRow from "ui/editor/EditorRow";
-import InputGroup from "ui/editor/InputGroup";
-import InputLegend from "ui/editor/InputLegend";
-import ErrorWrapper from "ui/shared/ErrorWrapper";
 
 import { ButtonForm } from "./ButtonForm";
 import { FaviconForm } from "./FaviconForm";
@@ -28,67 +24,11 @@ export const DesignPreview = styled(Box)(({ theme }) => ({
 
 export const EXAMPLE_COLOUR = "#007078";
 
-type SettingsFormProps = {
-  legend: string;
-  description: React.ReactElement;
-  input: React.ReactElement;
-  formik: FormikProps<TeamTheme>;
-  preview?: React.ReactElement;
-};
-
 export interface FormProps {
   formikConfig: FormikConfig<TeamTheme>;
   onSuccess: () => void;
 }
 
-export const SettingsForm: React.FC<SettingsFormProps> = ({
-  formik,
-  legend,
-  description,
-  input,
-  preview,
-}) => {
-  return (
-    <EditorRow background>
-      <form onSubmit={formik.handleSubmit}>
-        <InputGroup flowSpacing>
-          <InputLegend>{legend}</InputLegend>
-          {description}
-          {input}
-        </InputGroup>
-        {preview && (
-          <Box>
-            <Typography variant="h4" my={1}>
-              Preview:
-            </Typography>
-            {preview}
-          </Box>
-        )}
-        <ErrorWrapper
-          error={Object.values(formik.errors).join(", ")}
-          id="design-settings-theme-error"
-        >
-          <Box>
-            <Button type="submit" variant="contained" disabled={!formik.dirty}>
-              Save
-            </Button>
-            <Button
-              onClick={() => formik.resetForm()}
-              type="reset"
-              variant="contained"
-              disabled={!formik.dirty}
-              color="secondary"
-              sx={{ ml: 1.5 }}
-            >
-              Reset changes
-            </Button>
-          </Box>
-        </ErrorWrapper>
-      </form>
-    </EditorRow>
-  );
-};
-
 const DesignSettings: React.FC = () => {
   const [formikConfig, setFormikConfig] = useState<
     FormikConfig<TeamTheme> | undefined

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/shared/SettingsForm.tsx
@@ -0,0 +1,65 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import { FormikProps } from "formik";
+import React from "react";
+import EditorRow from "ui/editor/EditorRow";
+import InputGroup from "ui/editor/InputGroup";
+import InputLegend from "ui/editor/InputLegend";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
+
+type SettingsFormProps<TFormikValues> = {
+  legend: string;
+  description: React.ReactElement;
+  input: React.ReactElement;
+  formik: FormikProps<TFormikValues>;
+  preview?: React.ReactElement;
+};
+
+export const SettingsForm = <TFormikValues,>({
+  formik,
+  legend,
+  description,
+  input,
+  preview,
+}: SettingsFormProps<TFormikValues>) => {
+  return (
+    <EditorRow background>
+      <form onSubmit={formik.handleSubmit}>
+        <InputGroup flowSpacing>
+          <InputLegend>{legend}</InputLegend>
+          {description}
+          {input}
+        </InputGroup>
+        {preview && (
+          <Box>
+            <Typography variant="h4" my={1}>
+              Preview:
+            </Typography>
+            {preview}
+          </Box>
+        )}
+        <ErrorWrapper
+          error={Object.values(formik.errors).join(", ")}
+          id="settings-error"
+        >
+          <Box>
+            <Button type="submit" variant="contained" disabled={!formik.dirty}>
+              Save
+            </Button>
+            <Button
+              onClick={() => formik.resetForm()}
+              type="reset"
+              variant="contained"
+              disabled={!formik.dirty}
+              color="secondary"
+              sx={{ ml: 1.5 }}
+            >
+              Reset changes
+            </Button>
+          </Box>
+        </ErrorWrapper>
+      </form>
+    </EditorRow>
+  );
+};