[O2B-1536] Show lastEditedName for EOR reasons

Now display the lastEditedName for EOR reasons on `run-detail` page.

`formatEorReason` also renders a tooltip above the `lastEditedName` to make clear who it refers to.

Author: isaachilly

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

@@ -238,15 +238,15 @@ export class RunDetailsModel extends Observable {
      * @return {void}
      */
     addNewEorReason() {
-        const { category, title, description } = this.newEorReason;
+        const { category, title, description, lastEditedName } = this.newEorReason;
         const reasonType = this._eorReasonTypes.match({
             Success: (eorReasonTypes) => eorReasonTypes
                 .find((eorReasonType) => eorReasonType.category === category && eorReasonType.title === title),
             Other: () => null,
         });
 
         if (reasonType) {
-            this.runPatch.addEorReason({ reasonTypeId: reasonType.id, description });
+            this.runPatch.addEorReason({ reasonTypeId: reasonType.id, description, lastEditedName });
         }
     }
 

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

@@ -126,7 +126,12 @@ export class RunPatch extends Observable {
         } = this._run || {};
 
         this._runQuality = runQuality;
-        this._eorReasons = eorReasons.map(({ id, description, reasonTypeId }) => ({ id, description, reasonTypeId }));
+        this._eorReasons = eorReasons.map(({ id, description, reasonTypeId, lastEditedName }) => ({
+            id,
+            description,
+            reasonTypeId,
+            lastEditedName,
+        }));
         this._tags = tags.map(({ text }) => text);
 
         this.formData = {

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

@@ -533,7 +533,10 @@ export const runDetailsComponent = (runDetailsModel, router) => runDetailsModel.
                             h('#eor-reasons.flex-row', [
                                 runDetailsModel.isEditModeEnabled
                                     ? editRunEorReasons(runDetailsModel)
-                                    : h('.flex-column.g2', run.eorReasons.map((eorReason) => h('.eor-reason', formatEorReason(eorReason)))),
+                                    : h(
+                                        '.flex-column.g2.w-100',
+                                        run.eorReasons.map((eorReason) => h('.eor-reason', formatEorReason(eorReason))),
+                                    ),
                             ]),
                         ]),
                     ]),

lib/public/views/Runs/format/editRunEorReasons.js

@@ -94,20 +94,23 @@ export const editRunEorReasons = (runDetailsModel) => {
                  */
                 runDetailsModel.runPatch.eorReasons.length > 0
                     ? runDetailsModel.runPatch.eorReasons.map((eorReason) => {
-                        const { reasonTypeId, description } = eorReason;
+                        const { reasonTypeId, description, lastEditedName } = eorReason;
                         const { category = '-', title } = eorReasonTypes.find((eorReasonType) => eorReasonType.id === reasonTypeId) || {};
                         const titleString = title ? ` - ${title}` : '';
                         const descriptionString = description ? ` - ${description}` : '';
                         return h(
-                            '.flex-row.items-center',
+                            '.flex-row.justify-between',
                             {
                                 key: `${category} ${titleString} ${descriptionString}`,
                             },
                             [
-                                h('label.remove-eor-reason.danger.ph1.actionable-icon', {
-                                    onclick: () => runDetailsModel.runPatch.removeEorReason(eorReason),
-                                }, iconTrash()),
-                                h('.w-wrapped', `${category} ${titleString} ${descriptionString}`),
+                                h('.flex-row.items-center', [
+                                    h('label.remove-eor-reason.danger.ph1.actionable-icon', {
+                                        onclick: () => runDetailsModel.runPatch.removeEorReason(eorReason),
+                                    }, iconTrash()),
+                                    h('.w-wrapped', `${category} ${titleString} ${descriptionString}`),
+                                ]),
+                                h('.w-wrapped', `${lastEditedName}`),
                             ],
                         );
                     })

lib/public/views/Runs/format/formatEorReason.mjs

@@ -11,14 +11,25 @@
  *  or submit itself to any jurisdiction.
  */
 
+import { h } from '/js/src/index.js';
+import { tooltip } from '../../../../components/common/popover/tooltip.js';
+
 /**
  * Format the given EoR reason to string
  *
- * @param {Partial<{category: string, title: string, description: string}>} eorReason the EoR reason to
- * format
+ * @param {Partial<{
+ *   category: string,
+ *   title: string,
+ *   description: string,
+ *   lastEditedName: string,
+ * }>} eorReason the EoR reason to format
  * @return {string} the result
  */
 export const formatEorReason = (eorReason) => {
-    const { category, title, description } = eorReason;
-    return [category, title, description].filter((item) => item).join(' - ');
+    const { category, title, description, lastEditedName } = eorReason;
+    const reasonText = [category, title, description].filter((item) => item).join(' - ');
+    return h('.w-100.flex-row.justify-between', [
+        h('', reasonText),
+        tooltip(h('.w-wrapped', `${lastEditedName}`), 'Last edited by'),
+    ]);
 };