[O2B-1158] Improve readability of on-call log (#1408)

* [O2B-1158] Improve readability of on-call log

* Fix typo

Author: martinboulais

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

@@ -116,17 +116,17 @@ export class OnCallLogTemplate extends Observable {
      * @return {string} the log text
      */
     get text() {
-        const textParts = [`TITLE: ${this.title}`];
-        let importancePart = `IMPORTANCE: ${this.formData.severity}`;
+        const textParts = [];
+        let importancePart = `## Importance\n${this.formData.severity}`;
         if (this.formData.scope) {
             importancePart = `${importancePart} for ${this.formData.scope}`;
         }
         textParts.push(importancePart);
-        textParts.push(`SHIFTER: ${this.formData.shifterName} - ${this.formData.shifterPosition}`);
-        textParts.push(`LHC BEAM MODE: ${this.formData.lhcBeamMode}`);
-        textParts.push(`DESCRIPTION:\n${this.formData.issueDescription}`);
-        textParts.push(`REASON TO CALL THIS ON-CALL:\n${this.formData.reason}`);
-        textParts.push(`ACTIONS ALREADY TAKEN:\n${this.formData.alreadyTakenActions}`);
+        textParts.push(`## Shifter\n${this.formData.shifterName} - ${this.formData.shifterPosition}`);
+        textParts.push(`## LHC beam mode\n${this.formData.lhcBeamMode}`);
+        textParts.push(`## Description\n${this.formData.issueDescription}`);
+        textParts.push(`## Reason to call this on-call\n${this.formData.reason}`);
+        textParts.push(`## Actions already taken\n${this.formData.alreadyTakenActions}`);
 
         return textParts.join('\n\n');
     }

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

@@ -33,19 +33,18 @@ export const onCallLogCreationConfiguration = (creationModel, template) => {
     return {
         mainPane: [
             h(PanelComponent, [
-                h(LabelPanelHeaderComponent, { required: true }, 'Short description'),
+                h(LabelPanelHeaderComponent, { required: true, for: 'shortDescription' }, 'Short description'),
                 h('input#shortDescription.form-control', {
                     placeholder: 'Enter a short description of the issue',
                     minlength: 4,
                     maxlength: 30,
                     value: template.formData.shortDescription,
                     oninput: (e) => template.patchFormData({ shortDescription: e.target.value }),
-                    autofocus: true,
                 }),
             ]),
             h('.flex-row.g3', [
                 h(PanelComponent, [
-                    h(LabelPanelHeaderComponent, { required: true }, 'Detector or subsystem to be called'),
+                    h(LabelPanelHeaderComponent, { required: true, for: 'detectorOrSubsystem' }, 'Detector or subsystem to be called'),
                     template.detectorsAndSystems.match({
                         NotAsked: () => null,
                         Loading: () => spinner({ size: 2, absolute: false }),
@@ -66,7 +65,7 @@ export const onCallLogCreationConfiguration = (creationModel, template) => {
                     }),
                 ]),
                 h(PanelComponent, { class: 'flex-grow' }, [
-                    h(LabelPanelHeaderComponent, { required: true }, 'Severity level of the issue'),
+                    h(LabelPanelHeaderComponent, { required: true, for: 'severity' }, 'Severity level of the issue'),
                     h(
                         'select#severity.form-control',
                         { onchange: (e) => template.patchFormData({ severity: e.target.value }) },
@@ -81,7 +80,7 @@ export const onCallLogCreationConfiguration = (creationModel, template) => {
                     ),
                 ]),
                 h(PanelComponent, { class: 'flex-grow' }, [
-                    h(LabelPanelHeaderComponent, { required: true }, 'Scope of the issue'),
+                    h(LabelPanelHeaderComponent, { required: true, for: 'issueScope' }, 'Scope of the issue'),
                     h(
                         'select#issueScope.form-control',
                         { onchange: (e) => template.patchFormData({ scope: e.target.value }) },
@@ -102,7 +101,7 @@ export const onCallLogCreationConfiguration = (creationModel, template) => {
                     h('input#shifterName.form-control', { disabled: true, value: template.formData.shifterName }),
                 ]),
                 h(PanelComponent, { class: 'flex-grow' }, [
-                    h(LabelPanelHeaderComponent, { required: true }, 'Shifter position'),
+                    h(LabelPanelHeaderComponent, { required: true, for: 'shifterPosition' }, 'Shifter position'),
                     h(
                         'select#shifterPosition.form-control',
                         { onchange: (e) => template.patchFormData({ shifterPosition: e.target.value }) },
@@ -118,7 +117,7 @@ export const onCallLogCreationConfiguration = (creationModel, template) => {
                 ]),
             ]),
             h(PanelComponent, [
-                h(LabelPanelHeaderComponent, { required: true }, 'LHC Beam mode'),
+                h(LabelPanelHeaderComponent, { required: true, for: 'lhcBeamMode' }, 'LHC Beam mode'),
                 h(
                     'input#lhcBeamMode.form-control',
                     {
@@ -128,7 +127,7 @@ export const onCallLogCreationConfiguration = (creationModel, template) => {
                 ),
             ]),
             h(PanelComponent, { class: 'flex-column flex-grow' }, [
-                h(LabelPanelHeaderComponent, { required: true }, 'Description of the issue'),
+                h(LabelPanelHeaderComponent, { required: true, for: 'issue-description' }, 'Description of the issue'),
                 markdownInput(
                     template.formData.issueDescription,
                     {

test/public/logs/create.test.js

@@ -439,21 +439,22 @@ module.exports = () => {
         const lastLog = await getLastLog();
         expect(lastLog.title).to.equal(`${shortDescription} - Call on-call for ${detectorOrSubsystem}`);
         expect(lastLog.text).to.equal(`\
-TITLE: ${shortDescription} - Call on-call for ${detectorOrSubsystem}
+## Importance
+${severity} for ${issueScope}
 
-IMPORTANCE: ${severity} for ${issueScope}
+## Shifter
+Anonymous - ${shifterPosition}
 
-SHIFTER: Anonymous - ${shifterPosition}
+## LHC beam mode
+${beamMode}
 
-LHC BEAM MODE: ${beamMode}
-
-DESCRIPTION:
+## Description
 ${description}
 
-REASON TO CALL THIS ON-CALL:
+## Reason to call this on-call
 ${reason}
 
-ACTIONS ALREADY TAKEN:
+## Actions already taken
 ${actions}\
 `);
     });