feat: Remove Page workaround UI from List component

editor.planx.uk/src/@planx/components/List/Editor.tsx

@@ -1,19 +1,19 @@
 import MenuItem from "@mui/material/MenuItem";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
-import { hasFeatureFlag } from "lib/featureFlags";
 import React from "react";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput";
 import SelectInput from "ui/editor/SelectInput";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 
 import { EditorProps, ICONS, InternalNotes, MoreInformation } from "../ui";
-import { List, parseContent } from "./model";
+import { List, parseContent, validationSchema } from "./model";
 import { ProposedAdvertisements } from "./schemas/Adverts";
 import { NonResidentialFloorspace } from "./schemas/Floorspace";
 import { BuildingDetailsGLA } from "./schemas/GLA/BuildingDetails";
@@ -90,6 +90,8 @@ function ListComponent(props: Props) {
         data: newValues,
       });
     },
+    validationSchema,
+    validateOnChange: false,
   });
 
   return (
@@ -124,29 +126,31 @@ function ListComponent(props: Props) {
               required
             />
           </InputRow>
-          <InputRow>
-            <InputRowLabel>Schema</InputRowLabel>
-            <InputRowItem>
-              <SelectInput
-                value={formik.values.schemaName}
-                onChange={(e) => {
-                  formik.setFieldValue("schemaName", e.target.value);
-                  formik.setFieldValue(
-                    "schema",
-                    SCHEMAS.find(
-                      ({ name }) => name === (e.target.value as string),
-                    )?.schema,
-                  );
-                }}
-              >
-                {SCHEMAS.map(({ name }) => (
-                  <MenuItem key={name} value={name}>
-                    {name}
-                  </MenuItem>
-                ))}
-              </SelectInput>
-            </InputRowItem>
-          </InputRow>
+          <ErrorWrapper error={formik.errors.schema?.max}>
+            <InputRow>
+              <InputRowLabel>Schema</InputRowLabel>
+              <InputRowItem>
+                <SelectInput
+                  value={formik.values.schemaName}
+                  onChange={(e) => {
+                    formik.setFieldValue("schemaName", e.target.value);
+                    formik.setFieldValue(
+                      "schema",
+                      SCHEMAS.find(
+                        ({ name }) => name === (e.target.value as string),
+                      )?.schema,
+                    );
+                  }}
+                >
+                  {SCHEMAS.map(({ name }) => (
+                    <MenuItem key={name} value={name}>
+                      {name}
+                    </MenuItem>
+                  ))}
+                </SelectInput>
+              </InputRowItem>
+            </InputRow>
+          </ErrorWrapper>
         </ModalSectionContent>
       </ModalSection>
       <MoreInformation

editor.planx.uk/src/@planx/components/List/Public/Context.tsx

@@ -35,14 +35,6 @@ interface ListContextValue {
   formik: FormikProps<SchemaUserData>;
   validateAndSubmitForm: () => void;
   listProps: PublicProps<List>;
-  /**
-   * @deprecated
-   * @description
-   * Hide features if the schema is temporarily mocking a "Page" component
-   * @todo
-   * Refactor and allow a single-item "Page" component to properly manage this
-   */
-  isPageComponent: boolean;
   errors: {
     addItem: boolean;
     unsavedItem: boolean;
@@ -196,8 +188,6 @@ export const ListProvider: React.FC<ListProviderProps> = (props) => {
   const resetItemToPreviousState = () =>
     formik.setFieldValue(`schemaData[${activeIndex}]`, activeItemInitialState);
 
-  const isPageComponent = schema.max === 1;
-
   return (
     <ListContext.Provider
       value={{
@@ -211,7 +201,6 @@ export const ListProvider: React.FC<ListProviderProps> = (props) => {
         cancelEditItem,
         formik,
         validateAndSubmitForm,
-        isPageComponent,
         errors: {
           addItem: addItemError,
           unsavedItem: unsavedItemError,

editor.planx.uk/src/@planx/components/List/Public/index.tsx

@@ -61,7 +61,6 @@ const ActiveListCard: React.FC<{
     saveItem,
     cancelEditItem,
     errors,
-    isPageComponent,
     formik,
     activeIndex,
   } = useListContext();
@@ -82,8 +81,7 @@ const ActiveListCard: React.FC<{
     >
       <ListCard data-testid={`list-card-${i}`} ref={ref}>
         <Typography component="h2" variant="h3">
-          {schema.type}
-          {!isPageComponent && ` ${i + 1}`}
+          {`${schema.type} ${i + 1}`}
         </Typography>
         <SchemaFields
           sx={(theme) => ({
@@ -104,7 +102,7 @@ const ActiveListCard: React.FC<{
           >
             Save
           </Button>
-          {!isPageComponent && !isInitialCard && (
+          {!isInitialCard && (
             <CardButton
               data-testid="cancel-edit-item-button"
               onClick={cancelEditItem}
@@ -121,16 +119,15 @@ const ActiveListCard: React.FC<{
 const InactiveListCard: React.FC<{
   index: number;
 }> = ({ index: i }) => {
-  const { schema, formik, removeItem, editItem, isPageComponent } =
+  const { schema, formik, removeItem, editItem } =
     useListContext();
 
   const mapPreview = schema.fields.find((field) => field.type === "map");
 
   return (
     <ListCard data-testid={`list-card-${i}`}>
       <Typography component="h2" variant="h3">
-        {schema.type}
-        {!isPageComponent && ` ${i + 1}`}
+        {`${schema.type} ${i + 1}`}
       </Typography>
       <InactiveListCardLayout>
         {mapPreview && (

editor.planx.uk/src/@planx/components/List/model.ts

@@ -1,4 +1,5 @@
 import { cloneDeep } from "lodash";
+import { number, object } from "yup";
 
 import { MoreInformation, parseMoreInformation } from "../shared";
 import { Schema } from "../shared/Schema/model";
@@ -20,3 +21,9 @@ export const parseContent = (data: Record<string, any> | undefined): List => ({
   schema: cloneDeep(data?.schema) || SCHEMAS[0].schema,
   ...parseMoreInformation(data),
 });
+
+export const validationSchema = object({
+  schema: object({
+    max: number().optional().min(2, "The maximum must be greater than 1 - a Page component should be used when max is equal to 1"),
+  }),
+});