internal portal styling

theopensystemslab · Nov 19, 2024 · 2f7e4f8 · 2f7e4f8
1 parent dbaaf2c
commit 2f7e4f8
Showing 1 changed file with 49 additions and 47 deletions.
diff --git a/editor.planx.uk/src/@planx/components/InternalPortal/Editor.tsx b/editor.planx.uk/src/@planx/components/InternalPortal/Editor.tsx
@@ -1,13 +1,19 @@
+import MenuItem from "@mui/material/MenuItem";
 import {
   ComponentType as TYPES,
   NodeTag,
 } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
 import React from "react";
 import { ComponentTagSelect } from "ui/editor/ComponentTagSelect";
-import InputField from "ui/editor/InputField/InputField";
+import ModalSection from "ui/editor/ModalSection";
+import ModalSectionContent from "ui/editor/ModalSectionContent";
+import SelectInput from "ui/editor/SelectInput/SelectInput";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
+import Input from "ui/shared/Input/Input";
+import InputRow from "ui/shared/InputRow";
 
-import { FormError } from "../shared/types";
+import { ICONS } from "../shared/icons";
 
 interface Flow {
   id: string;
@@ -32,8 +38,7 @@ const InternalPortalForm: React.FC<{
       const errors: Record<string, string> = {};
 
       if (!values.flowId && !values.text) {
-        errors.text =
-          flows.length > 0 ? "Required if no flow is selected" : "Required.";
+        errors.text = flows.length > 0 ? "Enter a portal name" : "Required.";
       }
 
       return errors;
@@ -52,50 +57,47 @@ const InternalPortalForm: React.FC<{
 
   return (
     <form id="modal" onSubmit={formik.handleSubmit} data-testid="form">
-      <div>
-        <label htmlFor="portalFlowId">Create new internal portal: </label>
-        <InputField
-          name="text"
-          onChange={formik.handleChange}
-          placeholder="Portal name"
-          rows={2}
-          value={formik.values.text}
-          disabled={!!formik.values.flowId}
-          id="portalFlowId"
-          // required={!formik.values.flowId} (was ignored by @testing-library?)
+      <ModalSection>
+        <ModalSectionContent
+          title="Internal Portal"
+          Icon={ICONS[TYPES.InternalPortal]}
+        >
+          <ErrorWrapper error={formik.errors.text}>
+            <Input
+              name="text"
+              onChange={formik.handleChange}
+              placeholder="Enter a portal name"
+              rows={2}
+              value={formik.values.text}
+              disabled={!!formik.values.flowId}
+              id="portalFlowId"
+            />
+          </ErrorWrapper>
+        </ModalSectionContent>
+        {flows?.length > 0 && (
+          <ModalSectionContent subtitle="Use existing portal">
+            <SelectInput
+              id="flowId"
+              data-testid="flowId"
+              name="flowId"
+              value={formik.values.flowId}
+              onChange={formik.handleChange}
+              disabled={!!formik.values.text}
+              placeholder="Select an existing portal"
+            >
+              {flows.map((flow) => (
+                <MenuItem key={flow.id} value={flow.id}>
+                  {flow.text}
+                </MenuItem>
+              ))}
+            </SelectInput>
+          </ModalSectionContent>
+        )}
+        <ComponentTagSelect
+          value={formik.values.tags}
+          onChange={(value) => formik.setFieldValue("tags", value)}
         />
-        {formik.errors.text && <FormError message={formik.errors.text} />}
-      </div>
-      {flows?.length > 0 && (
-        <>
-          <span>
-            <br /> OR
-            <br />
-            <br />
-            <label htmlFor="flowId">Point to an existing portal:</label>
-            <br />
-          </span>
-          <select
-            id="flowId"
-            data-testid="flowId"
-            name="flowId"
-            value={formik.values.flowId}
-            onChange={formik.handleChange}
-            disabled={!!formik.values.text}
-          >
-            {!id && <option value="" />}
-            {flows.map((flow) => (
-              <option key={flow.id} value={flow.id}>
-                {flow.text}
-              </option>
-            ))}
-          </select>
-        </>
-      )}
-      <ComponentTagSelect
-        value={formik.values.tags}
-        onChange={(value) => formik.setFieldValue("tags", value)}
-      />
+      </ModalSection>
     </form>
   );
 };