[O2B-1106] Preliminary cleaning of log creation component (#1378)

* [O2B-1106] Preliminary cleaning of log creation component

* Fix tests

* Remove useless docblock

* Remove useless editor reference

* Remove useless editor reference

* Put back tests

* Revert wrong files

* Fix linter

Author: martinboulais

lib/public/components/Log/logDetailsButton.js

@@ -16,17 +16,14 @@ import { h } from '/js/src/index.js';
 import { formatTimestamp } from '../../utilities/formatting/formatTimestamp.js';
 import { detailsFrontLinks } from '../common/navigation/frontLinks.js';
 
-import { logDetails } from './logDetails.js';
 import { logLinkButton } from './logLinkButton.js';
-import { logReplyButton } from './logReplyButton.js';
-import { logText } from './logText.js';
-import { primaryButton } from '../common/primaryButton.js';
-import { logDetailsButton } from './logDetailsButton.js';
 import { attachmentPreviewComponent } from '../../views/Logs/FilePreview/attachmentPreviewComponent.js';
 import { tagBadge } from '../tag/tagBadge.js';
+import { markdownDisplay } from '../common/markdown/markdown.js';
 
 /**
- * Provides formatting for each log field to display that field on the webpage
+ * Map between log properties and the way to display it
+ *
  * @return {Object} an object determining how each log field wil lbe displayed on the page
  */
 const logFields = () => ({
@@ -76,40 +73,74 @@ const logFields = () => ({
     },
 });
 
+/**
+ * Format a given log's metadata
+ *
+ * @param {Log} log the log
+ * @param {string[]} fields the names of the fields to display
+ * @param {Object} fieldFormats an object containing a format function for each field
+ * @return {Component} the log field displayed
+ */
+const displayLogMetadata = (log, fields, fieldFormats) => fields.map((key) => h(`div#log-${log.id}-${key}.flex-row`, [
+    h('div.mr2', `${fieldFormats[key].name}:`),
+    fieldFormats[key].format(log[key]),
+]));
+
+/**
+ * Returns a component displaying the text of a log
+ *
+ * @param {Log} log the log to display
+ * @param {object} [options] display options
+ * @param {boolean} [options.isCollapsed] true if the log is collapsed
+ * @param {Partial<MarkdownBoxSize>} [options.boxSize] the text's markdown box size
+ * @return {Component} the log's text display
+ */
+const displayLogText = (log, options) => {
+    const { isCollapsed, boxSize } = options || {};
+
+    return h(
+        `div#log-id-${log.id}`,
+        isCollapsed
+            ? h(`.text-ellipsis.w-100#log-text-${log.id}`, log.text)
+            : markdownDisplay(
+                log.text,
+                {
+                    classes: 'w-100',
+                    id: `log-text-${log.id}`,
+                },
+                boxSize,
+            ),
+    );
+};
+
 const expandedLogFields = ['runs', 'environments', 'lhcFills', 'attachments'];
 
 /**
  * Returns a card for the given log
  *
  * @param {Log} log all data related to the log
- * @param {boolean} highlight indicator if this log should be highlighted
- * @param {boolean} showLogTitle indicator if the title of this log should be visible
  * @param {boolean} isCollapsed indicator if the title of this log is collapsed
- * @param {function} onCollapse function called when the log should be collapsed
- * @param {function} onExpand function called when the log should be expanded
- * @param {Object} options other options
- * @param {boolean} [options.replyButton] if true, reply button will be displayed
- * @param {boolean} [options.goToDetailsButton] if true, button to go to details will be displayed
- * @param {Object} [options.logMarkdownDisplayOpts] markdown display opts @see logText opts argument
- * @param {Partial<MarkdownBoxSize>} [options.logMarkdownDisplayOpts.boxSize] size of markdown display
+ * @param {function} setCollapsed function called when the log should be collapsed or expanded
+ * @param {Object} [options] other options
+ * @param {boolean} [options.highlight] indicator if this log should be highlighted
+ * @param {boolean} [options.hideTitle] indicator if the title of this log should be visible
+ * @param {Component} [options.customActionButtons] optional custom buttons to display between copy link and collapse
+ * @param {Partial<MarkdownBoxSize>} [options.textBoxSize] size of the log's content markdown display
  * @return {Component} the log's display component
  */
-export const logComponent = (
+export const logDisplayComponent = (
     log,
-    highlight,
-    showLogTitle,
     isCollapsed,
-    onCollapse,
-    onExpand,
-    options = {},
+    setCollapsed,
+    options,
 ) => {
     const { title = '', id = '' } = log;
+    const { highlight, hideTitle, customActionButtons, textBoxSize } = options || {};
+
     const fieldFormatting = logFields();
-    const logTitle = showLogTitle ? h(`h4#log-${id}-title`, title) : '';
+    const logTitle = !hideTitle && h(`h4#log-${id}-title`, title);
     const displayedLogFields = isCollapsed ? [] : expandedLogFields;
-    const logViewButton = isCollapsed
-        ? primaryButton('Show', onExpand, `show-collapse-${id}`)
-        : primaryButton('Collapse', onCollapse, `collapse-${id}`);
+    const logViewButton = h('button.btn.btn-primary', { onclick: () => setCollapsed(!isCollapsed) }, isCollapsed ? 'Show' : 'Collapse');
 
     return h(
         `#log-${id}.br2.m1.p3.shadow-level1.flex-column.g1${highlight ? '.b1.b-primary' : ''}`,
@@ -122,15 +153,14 @@ export const logComponent = (
                 ),
                 fieldFormatting.tags.format(log.tags),
             ]),
-            h('div.flex-row.flex-shrink-0.flex-wrap.items-start.g1', [
+            h('div.log-display-action-buttons.flex-row.flex-shrink-0.flex-wrap.items-start.g1', [
                 logLinkButton(log),
-                options.replyButton && logReplyButton(log),
-                options.goToDetailsButton && logDetailsButton(log),
+                customActionButtons,
                 logViewButton,
             ]),
         ]),
-        logDetails(log, displayedLogFields, fieldFormatting),
-        h('.bt1.b-gray-light.pv2/'),
-        logText(log, isCollapsed, options?.logMarkdownDisplayOpts),
+        displayLogMetadata(log, displayedLogFields, fieldFormatting),
+        h('.bt1.b-gray-light.pv2'),
+        displayLogText(log, { isCollapsed, boxSize: textBoxSize }),
     );
 };

lib/public/components/Log/log.js …ic/components/Log/logDisplayComponent.jslib/public/components/Log/log.js renamed to lib/public/components/Log/logDisplayComponent.js lib/public/components/Log/log.js renamed to lib/public/components/Log/logDisplayComponent.js

@@ -16,7 +16,7 @@ import { h } from '/js/src/index.js';
 /**
  * @typedef ApiError
  * @property {string} title the error's title
- * @property {Component} detail the error's details
+ * @property {Component} [detail] the error's details
  */
 
 /**

lib/public/components/Log/logText.js

@@ -27,14 +27,10 @@ const DEFAULT_SIZE = 'auto';
  *
  * @param {string} content the initial content of the input
  * @param {Object} attributes the additional attributes to pass to the component, such as id and classes
- * @param {function} [onEditorChange] callback called any time the editor handler changes
  * @param {Partial<MarkdownBoxSize>} [size] the size of the markdown box
  * @return {vnode} the component
  */
-export const markdownInput = (content, attributes, onEditorChange, size) => {
-    onEditorChange = onEditorChange || (() => {
-    });
-
+export const markdownInput = (content, attributes, size) => {
     const onInput = attributes.oninput || attributes.onchange || (() => {
     });
 
@@ -47,17 +43,16 @@ export const markdownInput = (content, attributes, onEditorChange, size) => {
                 // eslint-disable-next-line require-jsdoc
                 oncreate: function (node) {
                     cleanCodeMirror(this.textarea);
-                    onEditorChange(markdownInputFromTextarea(
+                    markdownInputFromTextarea(
                         node.dom,
                         (value) => onInput({ target: { value } }),
                         size,
-                    ));
+                    );
                     this.textarea = node.dom;
                 },
                 // eslint-disable-next-line require-jsdoc
                 onremove: function () {
                     cleanCodeMirror(this.textarea);
-                    onEditorChange(null);
                     this.textarea = null;
                 },
             },

lib/public/components/common/errorAlert.js

@@ -11,8 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
-import { h } from '/js/src/index.js';
-import { iconLinkIntact, iconCheck } from '/js/src/icons.js';
+import { h, iconLinkIntact, iconCheck } from '/js/src/index.js';
 import { StatefulComponent } from '../../StatefulComponent.js';
 
 /**

lib/public/components/common/markdown/markdown.js

@@ -77,7 +77,6 @@ const eosReportCreationForm = (reportType, formData, shiftData) => [
                     // eslint-disable-next-line no-return-assign
                     oninput: (e) => formData.lhcTransitions = e.target.value,
                 },
-                null,
                 { height: '20rem' },
             ),
         ]),
@@ -89,7 +88,6 @@ const eosReportCreationForm = (reportType, formData, shiftData) => [
                     // eslint-disable-next-line no-return-assign
                     oninput: (e) => formData.shiftFlow = e.target.value,
                 },
-                null,
                 { height: '20rem' },
             ),
         ]),
@@ -111,7 +109,6 @@ const eosReportCreationForm = (reportType, formData, shiftData) => [
                     // eslint-disable-next-line no-return-assign
                     oninput: (e) => formData.infoFromPreviousShifter = e.target.value,
                 },
-                null,
                 { height: '10rem' },
             ),
         ]),
@@ -125,7 +122,6 @@ const eosReportCreationForm = (reportType, formData, shiftData) => [
                     // eslint-disable-next-line no-return-assign
                     oninput: (e) => formData.infoForNextShifter = e.target.value,
                 },
-                null,
                 { height: '10rem' },
             ),
         ]),
@@ -140,7 +136,6 @@ const eosReportCreationForm = (reportType, formData, shiftData) => [
                     // eslint-disable-next-line no-return-assign
                     oninput: (e) => formData.infoForRmRc = e.target.value,
                 },
-                null,
                 { height: '10rem' },
             ),
         ]),

lib/public/components/common/selection/infoLoggerButtonGroup/CopyToClipboardComponent.js

@@ -28,7 +28,6 @@ export const eosFormDcsSpecificPart = (formData) => h('#type-specific', h('.pane
             // eslint-disable-next-line no-return-assign
             oninput: (e) => formData.typeSpecific.alerts = e.target.value,
         },
-        null,
         { height: '20rem' },
     ),
 ]));

lib/public/views/EosReport/create/eosReportCreationComponent.js

@@ -26,11 +26,6 @@ export class LogCreationModel extends Observable {
      * Constructor
      *
      * @param {function} [onCreation] function called when log is created, with the id of the created log
-     * @param {number|null} parentLogId optionally the id of log that will be the parent of the created one
-     * @param {Object} preFilledRelations the pre-filled relations of the log to create
-     * @param {string[]} preFilledRelations.runNumbers the run numbers to link to the log being created
-     * @param {string[]} preFilledRelations.lhcFillNumbers the fill numbers to link to the log being created
-     * @param {string[]} preFilledRelations.environmentIds the environment ids to link to the log being created
      */
     constructor(onCreation) {
         super();
@@ -51,12 +46,10 @@ export class LogCreationModel extends Observable {
 
         this._createdLog = RemoteData.notAsked();
         this._isRunNumbersReadonly = false;
-
-        this._textEditor = null;
     }
 
     /**
-     * Provide initial data fro creation
+     * Provide initial data for creation
      * @param {Object} [data] data
      * @param {number} [data.parentLogId] id of parent log
      * @param {number[]} [data.runNumbers] run numbers associated with log being created
@@ -86,24 +79,6 @@ export class LogCreationModel extends Observable {
         }
     }
 
-    /**
-     * Show parent log entry collapsed
-     * @returns {void}
-     */
-    collapseParentLog() {
-        this._isParentLogCollapsed = true;
-        this.notify();
-    }
-
-    /**
-     * Show full parent log entry
-     * @returns {void}
-     */
-    showFullParentLog() {
-        this._isParentLogCollapsed = false;
-        this.notify();
-    }
-
     /**
      * Returns whether parent log is collapsed
      *
@@ -113,6 +88,15 @@ export class LogCreationModel extends Observable {
         return this._isParentLogCollapsed;
     }
 
+    /**
+     * Defines if the parent log is collapsed
+     * @param {boolean} collapsed true if the parent log is collapsed
+     */
+    set isParentLogCollapsed(collapsed) {
+        this._isParentLogCollapsed = collapsed;
+        this.notify();
+    }
+
     /**
      * Create the log with the variables set in the model, handling errors appropriately
      * Adds the title of the parent log to a log reply if the title is empty.
@@ -385,22 +369,4 @@ export class LogCreationModel extends Observable {
     get isRunNumbersReadonly() {
         return this._isRunNumbersReadonly;
     }
-
-    /**
-     * Return the markdown editor used to edit log's text
-     *
-     * @return {Object} the editor
-     */
-    get textEditor() {
-        return this._textEditor;
-    }
-
-    /**
-     * Set the markdown editor used to edit log's text
-     *
-     * @param {Object} value the new editor
-     */
-    set textEditor(value) {
-        this._textEditor = value;
-    }
 }