[O2B-1106] Separate log reply from log creation (#1388)

* [O2B-1106] Separate log reply from main log creation

* Fix tests

* Fix tests

* Fix tests

Author: martinboulais

lib/public/Model.js

@@ -186,6 +186,9 @@ export default class Model extends Observable {
             case 'log-create':
                 this.logs.loadCreation(this.router.params);
                 break;
+            case 'log-reply':
+                this.logs.loadReply(this.router.params);
+                break;
             case 'run-overview':
                 this.runs.loadOverview();
                 break;

lib/public/components/Filters/common/filters/TextTokensFilterModel.js

@@ -16,8 +16,8 @@ import { FilterModel } from '../FilterModel.js';
 const TOKENS_DELIMITER = ',';
 
 /**
- * Model which accept string input and treats it as sequence of tokens,
- * which processed with regards of given configuration. @see TextTokensFilterModel#constructor
+ * Model which accept string input and treats it as sequence of tokens, which processed in regard to given configuration. @see
+ * TextTokensFilterModel#constructor
  */
 export class TextTokensFilterModel extends FilterModel {
     /**
@@ -30,7 +30,7 @@ export class TextTokensFilterModel extends FilterModel {
     }
 
     /**
-     * Update value kept by a filter model and inform observers that some change occured
+     * Update value kept by a filter model and inform observers that some change occurred
      * @param {string} value value to be stored
      * @return {void}
      */

lib/public/components/Log/logReplyButton.js

@@ -21,7 +21,7 @@ import { frontLink } from '../common/navigation/frontLink.js';
  */
 export const logReplyButton = (log) => frontLink(
     'Reply',
-    'log-create',
+    'log-reply',
     { parentLogId: log.id },
     {
         id: `reply-to-${log.id}`,

lib/public/components/common/panel/LabelPanelHeaderComponent.js

@@ -0,0 +1,24 @@
+/**
+ *  @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';
+
+/**
+ * Panel header component formed by a label
+ */
+export const LabelPanelHeaderComponent = {
+    // eslint-disable-next-line require-jsdoc
+    view: function ({ children, attrs }) {
+        return h('label.label.form-check-label.panel-header', attrs, children);
+    },
+};

lib/public/components/common/panel/PanelComponent.js

@@ -0,0 +1,24 @@
+/**
+ *  @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';
+
+/**
+ * Panel component
+ */
+export const PanelComponent = {
+    // eslint-disable-next-line require-jsdoc
+    view: function ({ children, attrs }) {
+        return h('.panel', attrs, children);
+    },
+};

lib/public/view.js

@@ -38,6 +38,7 @@ import { RunsPerLhcPeriodOverviewPage } from './views/Runs/RunPerPeriod/RunsPerL
 import { HomePage } from './views/Home/Overview/HomePage.js';
 import { DataPassesPerLhcPeriodOverviewPage } from './views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewView.js';
 import { RunsPerDataPassOverviewPage } from './views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js';
+import { LogReplyPage } from './views/Logs/Create/LogReplyPage.js';
 
 /**
  * Main view layout
@@ -55,6 +56,7 @@ export default (model) => {
         'log-overview': LogsOverview,
         'log-detail': LogTreeViewPage,
         'log-create': LogCreationPage,
+        'log-reply': LogReplyPage,
 
         'env-overview': EnvironmentOverviewPage,
         'env-details': EnvironmentDetailsPage,

lib/public/views/Logs/Create/LogCreationModel.js

@@ -12,12 +12,17 @@
  */
 import { Observable, RemoteData } from '/js/src/index.js';
 import { jsonFetch } from '../../../utilities/fetch/jsonFetch.js';
-import { tagToOption } from '../../../components/tag/tagToOption.js';
-import { getRemoteData } from '../../../utilities/fetch/getRemoteData.js';
 import { TagPickerModel } from '../../../components/tag/TagPickerModel.js';
 
 const DATA_DISPLAY_DELIMITER = ',';
 
+/**
+ * @typedef LogCreationRelations
+ * @property {number[]} [runNumbers] run numbers associated with log being created
+ * @property {number[]} [lhcFillNumbers] lhc fill numbers associated with log being created
+ * @property {number[]} [environmentIds] environment ids associated with log being created
+ */
+
 /**
  * Model to cary log creation state
  */
@@ -26,8 +31,9 @@ export class LogCreationModel extends Observable {
      * Constructor
      *
      * @param {function} [onCreation] function called when log is created, with the id of the created log
+     * @param {LogCreationRelations} relations the relations of the log
      */
-    constructor(onCreation) {
+    constructor(onCreation, relations) {
         super();
 
         this._onCreation = onCreation;
@@ -38,47 +44,20 @@ export class LogCreationModel extends Observable {
         this._creationTagsPickerModel.bubbleTo(this);
         this._creationTagsPickerModel.visualChange$.bubbleTo(this);
 
-        this._parentLogId = null;
+        const { runNumbers = [], environmentIds = [], lhcFillNumbers = [] } = relations;
+        this._runNumbers = runNumbers.join(DATA_DISPLAY_DELIMITER);
+        this._lhcFills = lhcFillNumbers.join(DATA_DISPLAY_DELIMITER);
+        this._environments = environmentIds.join(DATA_DISPLAY_DELIMITER);
+        this._isRunNumbersReadonly = Boolean(this._runNumbers);
 
-        this._isParentLogCollapsed = true;
+        this._parentLogId = null;
 
         this._attachments = [];
 
         this._createdLog = RemoteData.notAsked();
         this._isRunNumbersReadonly = false;
     }
 
-    /**
-     * 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
-     * @param {number[]} [data.lhcFillNumbers] lhc fill numbers associated with log being created
-     * @param {number[]} [data.environmentIds] environment ids associated with log being created
-     * @return {void}
-     */
-    setLogCreationInitialData({ parentLogId, runNumbers, lhcFillNumbers, environmentIds }) {
-        this._runNumbers = runNumbers.join(DATA_DISPLAY_DELIMITER);
-        this._lhcFills = lhcFillNumbers.join(DATA_DISPLAY_DELIMITER);
-        this._environments = environmentIds.join(DATA_DISPLAY_DELIMITER);
-        this._isRunNumbersReadonly = Boolean(this._runNumbers);
-
-        if (parentLogId) {
-            this._parentLogId = Number(parentLogId);
-            this._parentLog = RemoteData.loading();
-            getRemoteData(`/api/logs/${this._parentLogId}`).then(
-                ({ data: parentLog }) => {
-                    this.parentLog = RemoteData.success(parentLog);
-                },
-                (errors) => {
-                    this.parentLog = RemoteData.failure(errors);
-                },
-            );
-        } else {
-            this._parentLog = RemoteData.success(null);
-        }
-    }
-
     /**
      * Returns whether parent log is collapsed
      *
@@ -103,10 +82,6 @@ export class LogCreationModel extends Observable {
      * @returns {undefined}
      */
     async submit() {
-        if (!this.isReady) {
-            throw new Error('Log creation is not ready, please wait');
-        }
-
         if (!this.isValid) {
             throw new Error('Created log is not valid');
         }
@@ -126,7 +101,7 @@ export class LogCreationModel extends Observable {
         const body = {
             title,
             text,
-            ...parentLogId > 0 && { parentLogId },
+            ...parentLogId !== null && { parentLogId },
             ...runNumbers && { runNumbers },
         };
 
@@ -283,38 +258,6 @@ export class LogCreationModel extends Observable {
         return this._parentLogId;
     }
 
-    /**
-     * Returns the current parent log as a remote data
-     * If the log do not have a parent log, the value will be success(null)
-     *
-     * @return {RemoteData} the parent log
-     */
-    get parentLog() {
-        return this._parentLog;
-    }
-
-    /**
-     * Set the parent log and use its values to define default values for the created log
-     *
-     * @param {RemoteData} parentLog the new parent log as a remote data
-     */
-    set parentLog(parentLog) {
-        this._parentLog = parentLog;
-        if (parentLog.isSuccess()) {
-            const { title, tags, runs } = parentLog.payload;
-
-            this.title = `${title}`;
-
-            if (this.tagsPickerModel.hasOnlyDefaultSelection()) {
-                this.tagsPickerModel.selectedOptions = tags.map(tagToOption);
-            }
-            if (!this.runNumbers) {
-                this.runNumbers = runs.map(({ runNumber }) => runNumber).join(', ');
-            }
-        }
-        this.notify();
-    }
-
     /**
      * Returns the list of files attachments linked to the log being created
      *
@@ -343,15 +286,6 @@ export class LogCreationModel extends Observable {
         return this._createdLog;
     }
 
-    /**
-     * States if the log creation model is ready
-     *
-     * @return {boolean} true if the model is ready
-     */
-    get isReady() {
-        return this._parentLog.isSuccess();
-    }
-
     /**
      * States if the currently created log is valid
      *

lib/public/views/Logs/Create/LogReplyModel.js

@@ -0,0 +1,76 @@
+/**
+ *  @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 { LogCreationModel } from './LogCreationModel.js';
+import { getRemoteData } from '../../../utilities/fetch/getRemoteData.js';
+import { tagToOption } from '../../../components/tag/tagToOption.js';
+import { RemoteData } from '/js/src/index.js';
+
+/**
+ * Model for log reply creation
+ */
+export class LogReplyModel extends LogCreationModel {
+    /**
+     * Constructor
+     *
+     * @param {function} onCreation function called when the log has been created with the id of the created log as a parameter
+     * @param {number} parentLogId the id of the parent log
+     */
+    constructor(onCreation, parentLogId) {
+        super(onCreation, {});
+
+        this._parentLogId = parentLogId;
+
+        this._parentLog = RemoteData.loading();
+        getRemoteData(`/api/logs/${this._parentLogId}`).then(
+            ({ data: parentLog }) => {
+                this._parentLog = RemoteData.success(parentLog);
+                this.inheritFromParentLog(parentLog);
+            },
+            (errors) => {
+                this._parentLog = RemoteData.failure(errors);
+            },
+        ).finally(() => this.notify());
+
+        this._isParentLogCollapsed = true;
+    }
+
+    /**
+     * Inherit the title, tags and runs from the parent log
+     *
+     * @param {Log} parentLog the parent log
+     * @return {void}
+     */
+    inheritFromParentLog(parentLog) {
+        const { title, tags, runs } = parentLog;
+
+        this.title = `${title}`;
+
+        if (this.tagsPickerModel.hasOnlyDefaultSelection()) {
+            this.tagsPickerModel.selectedOptions = tags.map(tagToOption);
+        }
+
+        if (!this.runNumbers) {
+            this.runNumbers = runs.map(({ runNumber }) => runNumber).join(', ');
+        }
+    }
+
+    /**
+     * Returns the current parent log as a remote data
+     * If the log do not have a parent log, the value will be success(null)
+     *
+     * @return {RemoteData} the parent log
+     */
+    get parentLog() {
+        return this._parentLog;
+    }
+}

lib/public/views/Logs/Create/LogReplyPage.js

@@ -0,0 +1,31 @@
+/**
+ *  @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 errorAlert from '../../../components/common/errorAlert.js';
+import { logReplyComponent } from './logReplyComponent.js';
+
+/**
+ * Page displaying log reply form
+ *
+ * @param {Model} model the global model
+ * @return {Component} the resulting component
+ */
+export const LogReplyPage = ({ logs: { replyModel } }) => {
+    if (!replyModel) {
+        return errorAlert({
+            title: 'Incoherent state',
+            detail: 'The page internal state is broken, please try to refresh the page',
+        });
+    }
+
+    return logReplyComponent(replyModel);
+};