fix: Map and Label breaking on back action

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

@@ -99,11 +99,14 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   });
 
   const [activeIndex, setActiveIndex] = useState<number>(
-    previousFormData?.length - 1 || -1,
+    previousFormData ? previousFormData?.length - 1 : 0,
   );
 
   const [minError, setMinError] = useState<boolean>(false);
   const [maxError, setMaxError] = useState<boolean>(false);
+  const [loadPreviousValues, setLoadPreviousValues] = useState<boolean>(
+    Boolean(previouslySubmittedData),
+  );
 
   const handleGeoJSONChange = (event: GeoJSONChangeEvent) => {
     // If the user clicks 'reset' on the map, geojson will be empty object
@@ -147,7 +150,9 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     formik.setErrors({});
   };
 
-  const removeAllFeaturesFromMap = () => setFeatures(undefined);
+  const removeAllFeaturesFromMap = () => {
+    setFeatures(undefined);
+  };
 
   const removeAllFeaturesFromForm = () => {
     formik.setFieldValue("schemaData", []);
@@ -179,8 +184,11 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     setActiveIndex(newFeatures.length - 1);
   };
 
-  const addInitialFeaturesToMap = (features: Feature[]) => {
-    setFeatures(features);
+  const addInitialFeaturesToMap = (initialFeatures: Feature[]) => {
+    if (loadPreviousValues) {
+      setFeatures(initialFeatures);
+      setLoadPreviousValues(false);
+    }
   };
 
   const addFeatureToForm = () => {
@@ -198,7 +206,10 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
 
   const copyFeature = (sourceIndex: number, destinationIndex: number) => {
     const sourceFeature = formik.values.schemaData[sourceIndex];
-    formik.setFieldValue(`schemaData[${destinationIndex}]`, sourceFeature);
+    formik.setFieldValue(`schemaData[${destinationIndex}]`, {
+      ...sourceFeature,
+      label: `${destinationIndex + 1}`,
+    });
   };
 
   const removeFeatureFromForm = (index: number) => {
@@ -236,7 +247,6 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     // Set active index as highest tab after removal, so that when you "add" a new feature the tabs increment correctly
     setActiveIndex((features && features.length - 2) || 0);
   };
-
   return (
     <MapAndLabelContext.Provider
       value={{

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

@@ -230,7 +230,7 @@ const Root = () => {
   const passport = useStore((state) => state.computePassport().data);
 
   // If coming "back" or "changing", load initial features & tabs onto the map
-  //   Pre-populating form fields within tabs is handled via formik.initialValues in Context.tsx
+  // Pre-populating form fields within tabs is handled via formik.initialValues in Context.tsx
   if (previouslySubmittedData?.data?.[fn]?.features?.length > 0) {
     addInitialFeaturesToMap(previouslySubmittedData?.data?.[fn]?.features);
   }

editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/Trees.ts

@@ -2,6 +2,10 @@ import { Schema } from "@planx/components/shared/Schema/model";
 
 import { PresentationalProps } from "../../Public";
 import { Trees } from "../../schemas/Trees";
+import {
+  previouslySubmittedDoubleData,
+  previouslySubmittedSingleData,
+} from "./mockPayload";
 
 const mockTreeSchema: Schema = {
   ...Trees,
@@ -20,3 +24,13 @@ export const props: PresentationalProps = {
   longitude: -0.1629784,
   latitude: 51.5230919,
 };
+
+export const previousSingleDataProps: PresentationalProps = {
+  ...props,
+  previouslySubmittedData: previouslySubmittedSingleData,
+};
+
+export const previousDoubleDataProps: PresentationalProps = {
+  ...props,
+  previouslySubmittedData: previouslySubmittedDoubleData,
+};

editor.planx.uk/src/@planx/components/MapAndLabel/test/mocks/mockPayload.tsx

@@ -1,6 +1,13 @@
 import { FeatureCollection } from "geojson";
+
 import { mockTreeData } from "./GenericValues";
-export type MockPayload = { data: { MockFn: FeatureCollection } };
+export interface MockPayload {
+  data: { MockFn: FeatureCollection };
+}
+
+interface PreviousData extends MockPayload {
+  auto: boolean;
+}
 
 export const mockSingleFeaturePayload: MockPayload = {
   data: {
@@ -11,11 +18,47 @@ export const mockSingleFeaturePayload: MockPayload = {
             coordinates: [-3.685929607119201, 57.15301433687542],
             type: "Point",
           },
-          properties: { mockTreeData },
+          properties: { mockTreeData, label: "1" },
+          type: "Feature",
+        },
+      ],
+      type: "FeatureCollection",
+    },
+  },
+};
+
+export const previousMockDoubleFeatureData: MockPayload = {
+  data: {
+    MockFn: {
+      features: [
+        {
+          geometry: {
+            coordinates: [-3.685929607119201, 57.15301433687542],
+            type: "Point",
+          },
+          properties: { mockTreeData, label: "1" },
+          type: "Feature",
+        },
+        {
           type: "Feature",
+          properties: { ...mockTreeData, label: "2" },
+          geometry: {
+            type: "Point",
+            coordinates: [-3.686529607119201, 57.15310433687542],
+          },
         },
       ],
       type: "FeatureCollection",
     },
   },
 };
+
+export const previouslySubmittedSingleData: PreviousData = {
+  auto: false,
+  ...mockSingleFeaturePayload,
+};
+
+export const previouslySubmittedDoubleData: PreviousData = {
+  auto: false,
+  ...previousMockDoubleFeatureData,
+};

editor.planx.uk/src/@planx/components/MapAndLabel/test/public.backNavigation.test.tsx

@@ -0,0 +1,73 @@
+import { MyMap } from "@opensystemslab/map";
+import React from "react";
+import { setup } from "testUtils";
+import { it, vi } from "vitest";
+
+import { Presentational as MapAndLabel } from "../Public";
+import { point1, point2, point3 } from "./mocks/geojson";
+import {
+  previousDoubleDataProps,
+  previousSingleDataProps,
+} from "./mocks/Trees";
+import { addMultipleFeatures } from "./utils";
+
+beforeAll(() => {
+  if (!window.customElements.get("my-map")) {
+    window.customElements.define("my-map", MyMap);
+  }
+
+  const ResizeObserverMock = vi.fn(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  }));
+
+  vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+});
+
+describe("navigating back after adding single feature", () => {
+  it("shows previously submitted features", async () => {
+    const { getByTestId, queryByRole } = setup(
+      <MapAndLabel {...previousSingleDataProps} />,
+    );
+    const map = getByTestId("map-and-label-map");
+
+    expect(map).toBeInTheDocument();
+
+    const firstTab = queryByRole("tab", { name: /Tree 1/ });
+    expect(firstTab).toBeVisible();
+
+    const firstTabPanel = getByTestId("vertical-tabpanel-0");
+    expect(firstTabPanel).toBeVisible();
+
+    // point1 here needs to be reflected in the props you pass in at the start so labels match
+    addMultipleFeatures([point1, point2]);
+
+    const secondTab = queryByRole("tab", { name: /Tree 2/ });
+    expect(secondTab).toBeVisible();
+  });
+});
+
+describe("navigating back after adding two features", () => {
+  it("shows previously submitted features", async () => {
+    const { getByTestId, queryByRole } = setup(
+      <MapAndLabel {...previousDoubleDataProps} />,
+    );
+    const map = getByTestId("map-and-label-map");
+
+    expect(map).toBeInTheDocument();
+
+    const firstTab = queryByRole("tab", { name: /Tree 1/ });
+    const secondTab = queryByRole("tab", { name: /Tree 2/ });
+    expect(firstTab).toBeInTheDocument();
+    expect(secondTab).toBeInTheDocument();
+
+    const secondTabPanel = getByTestId("vertical-tabpanel-1");
+    expect(secondTabPanel).toBeVisible();
+
+    addMultipleFeatures([point1, point2, point3]);
+
+    const thirdTab = queryByRole("tab", { name: /Tree 3/ });
+    expect(thirdTab).toBeVisible();
+  });
+});

editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.test.tsx → editor.planx.uk/src/@planx/components/MapAndLabel/test/public.test.tsx

@@ -6,14 +6,9 @@ import { setup } from "testUtils";
 import { vi } from "vitest";
 import { axe } from "vitest-axe";
 
-import { mockTreeData } from "../test/mocks/GenericValues";
-import {
-  mockFeaturePointObj,
-  point1,
-  point2,
-  point3,
-} from "../test/mocks/geojson";
-import { props } from "../test/mocks/Trees";
+import { mockTreeData } from "./mocks/GenericValues";
+import { mockFeaturePointObj, point1, point2, point3 } from "./mocks/geojson";
+import { props } from "./mocks/Trees";
 import {
   addFeaturesToMap,
   addMultipleFeatures,
@@ -23,7 +18,7 @@ import {
   fillOutFirstHalfOfForm,
   fillOutForm,
   fillOutSecondHalfOfForm,
-} from "../test/utils";
+} from "./utils";
 
 beforeAll(() => {
   if (!window.customElements.get("my-map")) {