[O2B-1139] Refresh tags list when a tag is updated/created

lib/public/views/Runs/Details/RunDetailsModel.js

@@ -65,18 +65,16 @@
     async clearAndLoad({ runNumber = null, runId = null, panelKey = null }) {
         this.tabbedPanelModel.currentPanelKey = panelKey;
         this._updateErrors = [];
+        this._runDetails = RemoteData.notAsked();
+        this._eorReasonTypes = RemoteData.notAsked();
 
         if (this._runNumber !== runNumber || this._runId !== runId) {
             this.clearAllEditors();
-            this._runNumber = runNumber;
-            this._runId = runId;
-
-            this._runDetails = RemoteData.notAsked();
-            this._eorReasonTypes = RemoteData.notAsked();
-
-            this._fetchOneRun();
-            this._fetchReasonTypes();
         }
+        this._runId = runId;
+        this._runNumber = runNumber;
+        this._fetchReasonTypes();
+        this._fetchOneRun();
     }
 
     /**

test/public/runs/detail.test.js

@@ -32,6 +32,8 @@
 const { RunCalibrationStatus } = require('../../../lib/domain/enums/RunCalibrationStatus.js');
 const { runService } = require('../../../lib/server/services/run/RunService');
 const { resetDatabaseContent } = require('../../utilities/resetDatabaseContent.js');
+const { tag: { UpdateTagUseCase } } = require('../../../lib/usecases/index.js');
+const { dtos: { UpdateTagDto } } = require('../../../lib/domain/index.js');
 
 const { expect } = chai;
 
@@ -527,4 +529,58 @@
             innerText: 'CmCvjNbg',
         });
     });
+
+    it('should display correct tag styling after updating in tag overview', async () => {
+        /**
+         *  Retrieve the badge classes and styles
+         *
+         *  @return {Promise<Array>} resolves with the badge classes and styles
+         */
+        const getRunTagsBadges = async () => {
+            // Check if the tag is updated
+            const tagsBadgeClassesSelector = '#Run-tags .badge';
+            // Wait for badge elements to appear
+            await page.waitForSelector(tagsBadgeClassesSelector);
+            // Evaluate and check for inline background color
+            return await page.$$eval(
+                tagsBadgeClassesSelector,
+                (badges) => badges.map((badge) => ({
+                    className: badge.className,
+                    backgroundColor: badge.style.backgroundColor,
+                })),
+            );
+        };
+
+        let badges;
+        const expectedBgColorBefore = 'badge b1 b-gray-light bg-gray-light';
+        const expectedBgColorAfter = 'rgb(255, 0, 0)'; //Red
+
+        // Fetch the run data before update of tag
+        await goToRunDetails(page, 106);
+
+        badges = await getRunTagsBadges();
+
+        expect(badges[0].className).to.eql(expectedBgColorBefore);
+
+        const updateTagDto = {
+            body: {
+                color: '#FF0000', //Red
+            },
+            params: {
+                tagId: 1,
+            },
+            session: {
+                personid: 1,
+                id: 1,
+                name: 'John Doe',
+            },
+        };
+        await new UpdateTagUseCase()
+            .execute(updateTagDto);
+
+        await goToRunDetails(page, 106);
+        badges = await getRunTagsBadges();
+
+        expect(badges[0].backgroundColor == expectedBgColorAfter).to.be.true;
+    });
 };