Fixed crash when receiving calculated changes from server (#945)

Co-authored-by: Ole Martin Handeland <git@olemartin.org>

.github/workflows/cypress.yml

@@ -56,26 +56,25 @@ jobs:
             ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        env:
-          GITHUB_PACKAGES_PAT: ${{ secrets.GITHUB_TOKEN }}
         run: yarn --immutable
 
+      - name: Build
+        run: yarn build
+
       - name: Verify cypress and run tests
         run: "
           yarn run cy:verify\n
           export CYPRESS_PROJECT_ID=y2jhp6\n
           export CYPRESS_RECORD_KEY=${{ secrets.CYPRESS_RECORD_KEY }}\n
           export GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}\n
-          ./node_modules/.bin/start-server-and-test
-            'yarn start --no-hot'
-            http://localhost:8080/altinn-app-frontend.js
-            'yarn run cy:test:all:headless
-              --env environment=tt02,testUserName=tt02testuser,testUserPwd=${{ secrets.CYPRESS_ALTINN_USERPWD }}
-              --record
-              --parallel
-              --tag \"altinn-app-frontend\"
-              --group altinn-app-frontend
-              --ci-build-id $GITHUB_RUN_ID-$GITHUB_RUN_ATTEMPT'
+          bash -c 'cd dist/; npx http-server -p 8080 --cors >/dev/null &'\n
+          bash -c 'yarn run cy:test:all:headless
+            --env environment=tt02,testUserName=tt02testuser,testUserPwd=${{ secrets.CYPRESS_ALTINN_USERPWD }}
+            --record
+            --parallel
+            --tag \"altinn-app-frontend\"
+            --group altinn-app-frontend
+            --ci-build-id $GITHUB_RUN_ID-$GITHUB_RUN_ATTEMPT'
         "
 
       - uses: actions/upload-artifact@v3
@@ -116,17 +115,16 @@ jobs:
             ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        env:
-          GITHUB_PACKAGES_PAT: ${{ secrets.GITHUB_TOKEN }}
         run: yarn --immutable
 
+      - name: Build
+        run: yarn build
+
       - name: Verify cypress and run tests
         run: "
           yarn run cy:verify\n
-          ./node_modules/.bin/start-server-and-test
-            'yarn start --no-hot'
-            http://localhost:8080/altinn-app-frontend.js
-            'yarn run cy:test:all:headless
+          bash -c 'cd dist/; npx http-server -p 8080 --cors >/dev/null &'\n
+          bash -c 'yarn run cy:test:all:headless
               --config watchForFileChanges=false
               --env environment=tt02,testUserName=testuserexternal,testUserPwd=r@h74Rz7XYQJ'
         "

.github/workflows/release.yml

@@ -21,8 +21,6 @@ jobs:
 
       - name: install dependencies
         working-directory: app-frontend
-        env:
-          GITHUB_PACKAGES_PAT: ${{ secrets.GITHUB_TOKEN }}
         run: yarn --immutable
 
       - name: run build
@@ -51,7 +49,7 @@ jobs:
       - name: Run release script (pre-release)
         working-directory: app-frontend
         if: "github.event.release.prerelease"
-        run: | 
+        run: |
          bash .github/scripts/release.sh \
            --frontend . \
            --cdn ../cdn \

.github/workflows/unit-tests.yml

@@ -45,8 +45,6 @@ jobs:
 
       - name: install dependencies
         working-directory: app-frontend
-        env:
-          GITHUB_PACKAGES_PAT: ${{ secrets.GITHUB_TOKEN }}
         run: yarn --immutable
 
       - name: type-check

package.json

@@ -86,6 +86,7 @@
     "fork-ts-checker-notifier-webpack-plugin": "6.0.0",
     "fork-ts-checker-webpack-plugin": "7.3.0",
     "html-react-parser": "3.0.9",
+    "http-server": "^14.1.1",
     "husky": "8.0.3",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.4.2",
@@ -106,7 +107,6 @@
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "4.1.2",
     "source-map-loader": "4.0.1",
-    "start-server-and-test": "1.15.3",
     "style-loader": "3.3.1",
     "terser-webpack-plugin": "5.3.6",
     "ts-jest": "29.0.5",

src/features/form/data/submit/submitFormDataSagas.ts

@@ -157,20 +157,21 @@ export function* putFormData({ field, componentId }: SaveDataParams) {
   yield call(waitForSaving);
   const state: IRuntimeState = yield select();
   const model = getModelToSave(state);
+  const formDataCopy: IFormData = { ...state.formData.formData };
 
   const url = dataElementUrl(defaultDataElementGuid);
   let lastSavedModel = state.formData.formData;
   try {
     const { data, options } = createFormDataRequest(state, model, field, componentId);
     const responseData = yield call(httpPut, url, data, options);
-    lastSavedModel = yield call(handleChangedFields, responseData?.changedFields, state.formData.formData);
+    lastSavedModel = yield call(handleChangedFields, responseData?.changedFields, formDataCopy);
   } catch (error) {
     if (error.response && error.response.status === 303) {
       // 303 means that data has been changed by calculation on server. Try to update from response.
       // Newer backends might not reply back with this special response code when there are changes, they
       // will just respond with the 'changedFields' property instead (see code handling this above).
       if (error.response.data?.changedFields) {
-        lastSavedModel = yield call(handleChangedFields, error.response.data?.changedFields, state.formData.formData);
+        lastSavedModel = yield call(handleChangedFields, error.response.data?.changedFields, formDataCopy);
       } else {
         // No changedFields property returned, try to fetch
         yield put(FormDataActions.fetch({ url }));

test/e2e/integration/app-frontend/components.ts

@@ -42,6 +42,7 @@ describe('UI Components', () => {
   it('is possible to upload attachments with tags', () => {
     cy.goto('changename');
     cy.intercept('POST', '**/tags').as('saveTags');
+    cy.get(appFrontend.changeOfName.uploadWithTag.editWindow).should('not.exist');
     cy.get(appFrontend.changeOfName.uploadWithTag.uploadZone).selectFile('test/e2e/fixtures/test.pdf', {
       force: true,
     });
@@ -55,7 +56,11 @@ describe('UI Components', () => {
       cy.wrap(table).find(mui.tableBody).find(mui.tableElement).eq(1).should('have.text', 'Adresse');
       cy.wrap(table).find(mui.tableBody).find(mui.tableElement).last().find('button').click();
     });
-    cy.get(appFrontend.changeOfName.uploadWithTag.delete).should('be.visible').click();
+    cy.get(appFrontend.changeOfName.uploadWithTag.editWindow)
+      .find('button:contains("Slett")')
+      .should('be.visible')
+      .click();
+    cy.get(appFrontend.changeOfName.uploadWithTag.editWindow).should('not.exist');
   });
 
   it('is possible to navigate between pages using navigation bar', () => {

test/e2e/integration/app-frontend/multipart-save.ts

@@ -138,6 +138,11 @@ describe('Multipart save', () => {
     expectSave(`${groupKey}[1].${subGroupKey}[0].${commentKey}`, 'second comment', null);
 
     cy.get(appFrontend.group.row(0).editBtn).click();
+    cy.get(appFrontend.group.newValue).type('2').blur();
+    expectSave(`${groupKey}[0].${newValueKey}`, '22', '2');
+    cy.get(appFrontend.group.newValue).clear().type('2').blur();
+    expectSave(`${groupKey}[0].${newValueKey}`, '2', '22');
+
     cy.get(appFrontend.group.editContainer).find(appFrontend.group.next).click();
     cy.get(appFrontend.group.addNewItemSubGroup).click();
     expectSave(`${groupKey}[0].${subGroupKey}[1].source`, 'altinn', null);

test/e2e/pageobjects/app-frontend.ts

@@ -105,7 +105,6 @@ export class AppFrontend {
       editWindow: '[id^="attachment-edit-window"]',
       tagsDropDown: '[id^="attachment-tag-dropdown"]',
       saveTag: '[id^="attachment-save-tag-button"]',
-      delete: 'button[class*="makeStyles-deleteButton"]',
       uploaded: '#tagFile',
     },
     reasonRelationship: '#reasonRelationship',
@@ -239,8 +238,8 @@ export function makeUploaderSelectors<T extends Type>(
       ...(type === 'tagged' && {
         tagSelector: `${tableSelector} > tbody > tr:nth-child(${idx + 1}) select`,
         tagSave: `${tableSelector} > tbody > tr:nth-child(${idx + 1}) button[id^=attachment-save-tag-button]`,
-        editBtn: `${tableSelector} > tbody > tr:nth-child(${idx + 1}) td:last-of-type button[class*=editTextContainer]`,
-        deleteBtn: `${tableSelector} > tbody > tr:nth-child(${idx + 1}) button[class*=deleteButton]`,
+        editBtn: `${tableSelector} > tbody > tr:nth-child(${idx + 1}) td:last-of-type button:contains("Rediger")`,
+        deleteBtn: `${tableSelector} > tbody > tr:nth-child(${idx + 1}) button:contains("Slett")`,
       }),
     }),
     addMoreBtn: `#altinn-fileuploader-${id}-${row} > button`,