FOUR-32798: Preserve Record List collection configuration

src/components/inspector/collection-data-source.vue

@@ -17,7 +17,7 @@
       <CollectionRecordsList
         v-model="collectionFields"
         :record-pmql="pmql"
-        @change="collectionChanged"
+        @collection-id-changed="collectionIdChanged"
       />
       <pmql-input
         v-model="pmql"
@@ -39,6 +39,7 @@
         v-model="dataSelectionOptions"
         :options="dataSelectionDisplayOptions"
         data-cy="inspector-collection-data-selection"
+        @change="dataSelectionChanged"
       />
       <small class="mt-3 form-text text-muted">
         {{ $t("The user can select specific data to be stored into a variable") }}
@@ -47,7 +48,7 @@
         <label for="single-columns">{{ $t("Column") }}</label>
         <b-form-select
           id="single-columns"
-          v-model="singleField"
+          v-model="normalizedSingleField"
           :options="singleFieldOptions"
           data-cy="inspector-collection-single-field"
         >
@@ -58,9 +59,11 @@
   </div>
 </template>
 <script>
-import { cloneDeep } from "lodash";
 import CollectionRecordsList from "./collection-records-list.vue";
-import { getCollectionFieldOptions } from "../../collectionFieldUtils";
+import {
+  getCollectionFieldOptions,
+  normalizeCollectionFieldPath
+} from "../../collectionFieldUtils";
 
 const CONFIG_FIELDS = [
   "collectionFields",
@@ -124,6 +127,14 @@ export default {
       return Object.fromEntries(
         CONFIG_FIELDS.map((field) => [field, this[field]])
       );
+    },
+    normalizedSingleField: {
+      get() {
+        return normalizeCollectionFieldPath(this.singleField);
+      },
+      set(value) {
+        this.singleField = value;
+      }
     }
   },
   watch: {
@@ -133,6 +144,7 @@ export default {
           return;
         }
         CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
+        this.getCollectionColumns(this.collectionFields);
       },
       immediate: true
     },
@@ -161,9 +173,6 @@ export default {
         this.$emit("input", this.options);
       },
       deep: true
-    },
-    dataSelectionOptions() {
-      this.singleField = null;
     }
   },
   mounted() {
@@ -176,14 +185,11 @@ export default {
       this.pmql = null;
       this.$root.$emit("collection-changed", true);
     },
-    collectionChanged(data) {
-      if (Array.isArray(data)) {
-        const [firstItem] = data;
-        const collectionId = firstItem?.collection_id;
-        if (collectionId !== this.collectionFields.collectionId) {
-          this.$root.$emit("collection-changed", true);
-        }
-      }
+    collectionIdChanged() {
+      this.$root.$emit("collection-changed", true);
+    },
+    dataSelectionChanged() {
+      this.singleField = null;
     },
     getCollectionColumns(records) {
       this.singleFieldOptions = getCollectionFieldOptions(records);

src/components/inspector/collection-records-list.vue

@@ -8,6 +8,7 @@
           v-model="collectionId"
           :options="collections"
           data-cy="inspector-collection"
+          @change="onCollectionIdChange"
         />
         <b-form-text class="mt-2">
         {{ $t("Collection Record Control is not available for Anonymous Web Entry") }}
@@ -29,8 +30,6 @@
 
 <script>
 import { debounce } from "lodash";
-import MustacheHelper from "./mustache-helper.vue";
-import ScreenVariableSelector from "../screen-variable-selector.vue";
 
 const CONFIG_FIELDS = [
   "collectionId",
@@ -40,10 +39,6 @@ const CONFIG_FIELDS = [
 ];
 
 export default {
-  components: {
-    MustacheHelper,
-    ScreenVariableSelector
-  },
   props: ["value"],
   data() {
     return {
@@ -111,13 +106,15 @@ export default {
     });
   },
   methods: {
-    onCollectionChange() {
+    onCollectionIdChange(collectionId) {
+      this.$emit("collection-id-changed", collectionId);
+    },
+    loadCollectionRecords() {
       this.$dataProvider
         .getCollectionRecordsList(this.collectionId)
         .then((response) => {
           this.dataRecordList = response.data;
         });
-      this.$emit('change', this.dataRecordList);
     },
     getCollections() {
       this.$dataProvider.getCollections().then((response) => {
@@ -158,7 +155,7 @@ export default {
             value: field.field
           }));
 
-          this.onCollectionChange();
+          this.loadCollectionRecords();
         });
     },
     onNLQConversion(pmql) {

tests/e2e/specs/CollectionRecordListColumns.spec.js

@@ -1,4 +1,5 @@
 const collectionId = 88;
+const emptyCollectionId = 89;
 const fieldNames = [
   "case_number",
   "claimant_name",
@@ -46,7 +47,10 @@ function findRecordList(config) {
   return null;
 }
 
-function configureCollectionRecordList() {
+function configureCollectionRecordList(
+  collectionName = "Synthetic Claims",
+  requests = ["@collectionFields", "@collectionRecords"]
+) {
   cy.openAcordeon("collapse-3");
   cy.openAcordeon("collapse-2");
   cy.get("[data-cy=controls-FormRecordList]").drag(
@@ -56,8 +60,38 @@ function configureCollectionRecordList() {
   cy.get("[data-cy=screen-element-container]").click();
   cy.get("[data-cy=accordion-Configuration]").click();
   cy.get("[data-cy=inspector-collection-data-source]").select("Collection");
-  cy.get("[data-cy=inspector-collection]").select("Synthetic Claims");
-  cy.wait(["@collectionFields", "@collectionRecords"]);
+  cy.get("[data-cy=inspector-collection]").select(collectionName);
+  cy.wait(requests);
+}
+
+function setPersistedConfiguration({ dataRecordList = [], options }) {
+  cy.get("#screen-builder-container").then((container) => {
+    const [{ __vue__: root }] = container;
+    const { builder } = root.$refs;
+    const recordList = findRecordList(builder.config);
+
+    recordList.config.source.collectionFields.dataRecordList = dataRecordList;
+    recordList.config.source.dataSelectionOptions = "single-field";
+    recordList.config.source.singleField = `data.${fieldNames[0]}`;
+    recordList.config.fields.optionsList = options;
+    recordList.config.fields.jsonData = JSON.stringify(options);
+  });
+}
+
+function expectPersistedConfiguration(options) {
+  cy.get("#screen-builder-container").then((container) => {
+    const [{ __vue__: root }] = container;
+    const { builder } = root.$refs;
+    const recordList = findRecordList(builder.config);
+
+    expect(recordList.config.source.dataSelectionOptions).to.equal(
+      "single-field"
+    );
+    expect(recordList.config.source.singleField).to.equal(
+      `data.${fieldNames[0]}`
+    );
+    expect(recordList.config.fields.optionsList).to.deep.equal(options);
+  });
 }
 
 describe("Collection record list columns", () => {
@@ -69,6 +103,12 @@ describe("Collection record list columns", () => {
           name: "Synthetic Claims",
           read_screen_id: null,
           create_screen_id: null
+        },
+        {
+          id: emptyCollectionId,
+          name: "Empty Claims",
+          read_screen_id: null,
+          create_screen_id: null
         }
       ]
     });
@@ -85,6 +125,16 @@ describe("Collection record list columns", () => {
       ],
       meta: { total: 2 }
     }).as("collectionRecords");
+    cy.intercept("GET", `/api/1.0/collections/${emptyCollectionId}/columns*`, {
+      data: fieldNames.map((field) => ({
+        label: field,
+        field: `data.${field}`
+      }))
+    }).as("emptyCollectionFields");
+    cy.intercept("GET", `/api/1.0/collections/${emptyCollectionId}/records*`, {
+      data: [],
+      meta: { total: 0 }
+    }).as("emptyCollectionRecords");
     cy.visit("/");
   });
 
@@ -234,4 +284,78 @@ describe("Collection record list columns", () => {
       expect(recordList.config.source.singleField).to.equal(legacySingleField);
     });
   });
+
+  it("preserves columns when an empty collection returns to Design mode", () => {
+    const persistedOptions = fieldNames.slice(0, 6).map((field) => ({
+      content: `data.${field}`,
+      key: `data.${field}`
+    }));
+
+    configureCollectionRecordList("Empty Claims", [
+      "@emptyCollectionFields",
+      "@emptyCollectionRecords"
+    ]);
+    setPersistedConfiguration({ options: persistedOptions });
+
+    cy.get("[data-cy=mode-preview]").click();
+    cy.wait("@emptyCollectionRecords");
+    cy.get("[data-cy=mode-editor]").click();
+    cy.wait(["@emptyCollectionFields", "@emptyCollectionRecords"]);
+
+    expectPersistedConfiguration(persistedOptions);
+    cy.get("[data-cy=inspector-collection-single-field]").should(
+      "have.value",
+      fieldNames[0]
+    );
+  });
+
+  it("preserves imported columns when cached records reference the old collection id", () => {
+    const persistedOptions = fieldNames.slice(0, 6).map((field) => ({
+      content: `data.${field}`,
+      key: `data.${field}`
+    }));
+    const staleRecords = [
+      {
+        id: recordData.id,
+        collection_id: 77,
+        data: recordData
+      }
+    ];
+
+    configureCollectionRecordList();
+    setPersistedConfiguration({
+      dataRecordList: staleRecords,
+      options: persistedOptions
+    });
+
+    cy.get("[data-cy=mode-preview]").click();
+    cy.wait("@collectionRecords");
+    cy.get("[data-cy=mode-editor]").click();
+    cy.wait(["@collectionFields", "@collectionRecords"]);
+
+    expectPersistedConfiguration(persistedOptions);
+    cy.get("[data-cy=inspector-collection-single-field]").should(
+      "have.value",
+      fieldNames[0]
+    );
+  });
+
+  it("clears columns when the user explicitly selects another collection", () => {
+    const persistedOptions = [{ content: fieldNames[0], key: fieldNames[0] }];
+
+    configureCollectionRecordList();
+    setPersistedConfiguration({ options: persistedOptions });
+    expectPersistedConfiguration(persistedOptions);
+
+    cy.get("[data-cy=inspector-collection]").select("Empty Claims");
+    cy.wait(["@emptyCollectionFields", "@emptyCollectionRecords"]);
+
+    cy.get("#screen-builder-container").then((container) => {
+      const [{ __vue__: root }] = container;
+      const { builder } = root.$refs;
+      const recordList = findRecordList(builder.config);
+
+      expect(recordList.config.fields.optionsList).to.deep.equal([]);
+    });
+  });
 });