[O2B-1532] Extract eorReasonComponent and revert formatter

Add a dedicated eorReasonComponent that renders the EOR reason VDOM.

Author: isaachilly

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

@@ -40,7 +40,7 @@ import { RunDefinition } from '../../../domain/enums/RunDefinition.js';
 import { formatFloat } from '../../../utilities/formatting/formatFloat.js';
 import { formatEditableNumber } from '../format/formatEditableNumber.js';
 import { editRunEorReasons } from '../format/editRunEorReasons.js';
-import { formatEorReason } from '../format/formatEorReason.mjs';
+import { eorReasonComponent } from '../format/eorReasonComponent.js';
 import { selectionDropdown } from '../../../components/common/selection/dropdown/selectionDropdown.js';
 import { formatRunCalibrationStatus } from '../format/formatRunCalibrationStatus.js';
 import { BeamModes } from '../../../domain/enums/BeamModes.js';
@@ -535,7 +535,7 @@ export const runDetailsComponent = (runDetailsModel, router) => runDetailsModel.
                                     ? editRunEorReasons(runDetailsModel)
                                     : h(
                                         '.flex-column.g2.w-100',
-                                        run.eorReasons.map((eorReason) => h('.eor-reason', formatEorReason(eorReason))),
+                                        run.eorReasons.map((eorReason) => h('.eor-reason', eorReasonComponent(eorReason))),
                                     ),
                             ]),
                         ]),

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

@@ -0,0 +1,36 @@
+/**
+ *  @license
+ *  Copyright CERN and copyright holders of ALICE O2. This software is
+ *  distributed under the terms of the GNU General Public License v3 (GPL
+ *  Version 3), copied verbatim in the file "COPYING".
+ *
+ *  See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ *  In applying this license CERN does not waive the privileges and immunities
+ *  granted to it by virtue of its status as an Intergovernmental Organization
+ *  or submit itself to any jurisdiction.
+ */
+
+import { h } from '/js/src/index.js';
+import { tooltip } from '../../../../components/common/popover/tooltip.js';
+import { formatEorReason } from './formatEorReason.mjs';
+
+/**
+ * Display the given EoR reason as a vdom component with lastEditedName tooltip
+ *
+ * @param {Partial<{
+ *   category: string,
+ *   title: string,
+ *   description: string,
+ *   lastEditedName: string,
+ * }>} eorReason the EoR reason to display
+ * @return {Component} the vdom component
+ */
+export const eorReasonComponent = (eorReason) => {
+    const { lastEditedName } = eorReason;
+    const reasonText = formatEorReason(eorReason);
+    return h('.w-100.flex-row.justify-between', [
+        h('', reasonText),
+        tooltip(h('.w-wrapped', `${lastEditedName}`), 'Last edited by'),
+    ]);
+};

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

@@ -11,25 +11,14 @@
  *  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,
- *   lastEditedName: string,
- * }>} eorReason the EoR reason to format
+ * @param {Partial<{category: string, title: string, description: string}>} eorReason the EoR reason to
+ * format
  * @return {string} the result
  */
 export const formatEorReason = (eorReason) => {
-    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'),
-    ]);
+    const { category, title, description } = eorReason;
+    return [category, title, description].filter((item) => item).join(' - ');
 };