fix: Map and Label breaking on back action

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

@@ -99,7 +99,7 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   });
 
   const [activeIndex, setActiveIndex] = useState<number>(
-    previousFormData?.length - 1 || -1,
+    previousFormData?.length > 1 ? previousFormData?.length - 1 : 0,
   );
 
   const [minError, setMinError] = useState<boolean>(false);
@@ -179,8 +179,10 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     setActiveIndex(newFeatures.length - 1);
   };
 
-  const addInitialFeaturesToMap = (features: Feature[]) => {
-    setFeatures(features);
+  const addInitialFeaturesToMap = (initialFeatures: Feature[]) => {
+    if (!features?.length) {
+      setFeatures(initialFeatures);
+    }
   };
 
   const addFeatureToForm = () => {

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

@@ -0,0 +1,80 @@
+import { MyMap } from "@opensystemslab/map";
+import React from "react";
+import { setup } from "testUtils";
+import { it, vi } from "vitest";
+
+import { point1, point2, point3 } from "../test/mocks/geojson";
+import {
+  previousDoubleDataProps,
+  previousSingleDataProps,
+} from "../test/mocks/Trees";
+import { addFeaturesToMap, addMultipleFeatures } from "../test/utils";
+import { Presentational as MapAndLabel } from ".";
+
+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, user } = setup(
+      <MapAndLabel {...previousSingleDataProps} />,
+    );
+    const map = getByTestId("map-and-label-map");
+
+    expect(map).toBeInTheDocument();
+
+    const firstTab = queryByRole("tab", { name: /Tree 1/ });
+    expect(firstTab).toBeInTheDocument();
+    expect(firstTab).toBeVisible();
+
+    const firstTabPanel = getByTestId("vertical-tabpanel-0");
+    expect(firstTabPanel).toBeInTheDocument();
+    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).toBeInTheDocument();
+    expect(secondTab).toBeVisible();
+  });
+});
+
+describe("navigating back after adding two features", () => {
+  it("shows previously submitted features", async () => {
+    const { getByTestId, queryByRole, user } = 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 firstTabPanel = getByTestId("vertical-tabpanel-0");
+    const secondTabPanel = getByTestId("vertical-tabpanel-1");
+    expect(firstTabPanel).toBeInTheDocument();
+    expect(secondTabPanel).toBeInTheDocument();
+    expect(secondTabPanel).toBeVisible();
+
+    addMultipleFeatures([point1, point2, point3]);
+
+    const thirdTab = queryByRole("tab", { name: /Tree 3/ });
+    expect(thirdTab).toBeInTheDocument();
+    expect(thirdTab).toBeVisible();
+  });
+});

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

@@ -11,9 +11,10 @@ import { SiteAddress } from "@planx/components/FindProperty/model";
 import { SchemaFields } from "@planx/components/shared/Schema/SchemaFields";
 import { GraphError } from "components/Error/GraphError";
 import { GeoJsonObject } from "geojson";
+import { Feature } from "geojson";
 import sortBy from "lodash/sortBy";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import FullWidthWrapper from "ui/public/FullWidthWrapper";
 import ErrorWrapper from "ui/shared/ErrorWrapper";

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,
+};