[O2B-416] View attachement of log-details entries in browser dialog (#1301)

* [O2B-416] Make attachments clickable

* [O2B-416] Add conditional style/popover

* [O2B-416] Show image preview onclick

* [O2B-416] Show images on hover and add other file types

* [O2B-416] Add JSON file type

* [O2B-416] Add preview style and change popover config

* [O2B-416] Add text file preview

* [O2B-416] Change onCreate dom access to using the LogCreationModel

* [O2B-416] Add CSV table style

* [O2B-416] Add shellscript file type (.sh files)

* [O2B-416] Fix single file case

* [O2B-416] Add code documentation and fix lint errors

* [O2B-416] Change tests for the new feature

* [O2B-416] Change filePreview functionality to a separate directory

* [O2B-416] Add file preview to the log-detail page

* [O2B-416] Fixed blank line issue

* [O2B-416] Make log-detail files downloadable

* [O2B-416] Add preview seperator

* [O2B-416] Move js style to css style

* [O2B-416] Fix linter errors

* [O2B-416] Fix tests

* [O2B-416] Move js style to css style

* [O2B-416] Fix linter error

* [O2B-416] Apply pr feedback and move handling the file types to the model (list of methods for handling each file preview)

* [O2B-416] Add RemoteData to the file preview model

* [O2B-416] Fix new log file attachments not showing (RemoteData.notAsked always true)

* [O2B-416] Fix eslint errors

* [O2B-416] Fix changed code for passing all tests

* Minor code cleaning

* Improve overall structure

* Revert change

* Fix test

* Fix code review

* Remove useless authentication token

* Fix spinner (again)

* Fix preview size

---------

Co-authored-by: martinboulais <31805063+martinboulais@users.noreply.github.com>

Author: DKR2002

lib/public/app.css

@@ -72,6 +72,8 @@ html, body {
 .w-90  { width:  90%; }
 .w-95  { width:  95%; }
 .w-100 { width: 100%; }
+.mw-100 { max-width: 100%; }
+.mh-100 { max-height: 100%; }
 .w-30rem { width: 30rem; }
 .w-inherit {
     width: inherit !important;

lib/public/components/Log/log.js

@@ -22,14 +22,14 @@ 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';
 
 /**
  * Provides formatting for each log field to display that field on the webpage
- * @param {string} authenticationToken token to authenticate api requests. Used for attachments
  * @return {Object} an object determining how each log field wil lbe displayed on the page
  */
-const logFields = (authenticationToken) => ({
+const logFields = () => ({
     author: {
         name: 'Source',
         format: (author) => author.name,
@@ -69,15 +69,10 @@ const logFields = (authenticationToken) => ({
     attachments: {
         name: 'Attachments',
         visible: true,
-        format: (attachments) => detailsFrontLinks(
-            attachments,
-            ({ fileName, originalName, id }) => ({
-                content: originalName,
-                href: `/api/attachments/${id}?token=${authenticationToken}`,
-                attributes: { download: fileName, class: 'break-all' },
-            }),
-            { bypassRouter: true },
-        ),
+        format: (attachments) => h('span.flex-row.flex-wrap.gc1', attachments.flatMap((attachment) => [
+            attachmentPreviewComponent(attachment),
+            h('span.mr2', ','),
+        ]).slice(0, -1)),
     },
 });
 
@@ -93,7 +88,8 @@ const expandedLogFields = ['runs', 'environments', 'lhcFills', 'attachments'];
  * @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 {string} [options.authenticationToken] token to authenticate the session with the api
+ * @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
  * @return {Component} the log's display component
@@ -108,15 +104,15 @@ export const logComponent = (
     options = {},
 ) => {
     const { title = '', id = '' } = log;
-    const fieldFormatting = logFields(options?.authenticationToken);
+    const fieldFormatting = logFields();
     const logTitle = showLogTitle ? h(`h4#log-${id}-title`, title) : '';
     const displayedLogFields = isCollapsed ? [] : expandedLogFields;
     const logViewButton = isCollapsed
         ? primaryButton('Show', onExpand, `show-collapse-${id}`)
         : primaryButton('Collapse', onCollapse, `collapse-${id}`);
 
     return h(
-        `#log-${id}.br2.m1.p3.shadow-level1.flex-column.g3${highlight ? '.b1.b-primary' : ''}`,
+        `#log-${id}.br2.m1.p3.shadow-level1.flex-column.g1${highlight ? '.b1.b-primary' : ''}`,
         h('div.flex-row.justify-between.', [
             h(`div.flex-column.g1.log-details-${isCollapsed ? 'collapsed' : 'expanded'}`, [
                 logTitle,
@@ -125,16 +121,16 @@ export const logComponent = (
                     h('em', `${fieldFormatting.author.format(log.author)} (${fieldFormatting.createdAt.format(log.createdAt)})`),
                 ),
                 fieldFormatting.tags.format(log.tags),
-                logDetails(log, displayedLogFields, fieldFormatting),
             ]),
             h('div.flex-row.flex-shrink-0.flex-wrap.items-start.g1', [
                 logLinkButton(log),
-                (options.replayButton ?? true) && logReplyButton(log),
-                (options.goToDetailsButton ?? false) && logDetailsButton(log),
+                options.replyButton && logReplyButton(log),
+                options.goToDetailsButton && logDetailsButton(log),
                 logViewButton,
             ]),
         ]),
-        h('.bt1.b-gray-light'),
+        logDetails(log, displayedLogFields, fieldFormatting),
+        h('.bt1.b-gray-light.pv2/'),
         logText(log, isCollapsed, options?.logMarkdownDisplayOpts),
     );
 };

lib/public/components/Log/logDetails.js

@@ -21,8 +21,7 @@ import { h } from '/js/src/index.js';
  * @param {Object} fieldFormats an object containing a format function for each field
  * @return {Component} the log field displayed
  */
-export const logDetails = (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]),
-    ]));
+export const logDetails = (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]),
+]));

lib/public/components/common/errorAlert.js

@@ -23,7 +23,7 @@ import { h } from '/js/src/index.js';
  * Generic error alert.
  *
  * @param {ApiError[]|ApiError} errors The JSON:API conform error object.
- * @returns {vnode[]} The list of vnodes representing the alerts.
+ * @returns {Component} the error alerts component
  */
 const errorAlert = (errors) => {
     if (!Array.isArray(errors)) {

lib/public/components/common/navigation/frontLinks.js

@@ -74,6 +74,7 @@ export const frontLinks = (items, configurationExtractor, configuration) => {
 
         return [link, separator];
     });
+
     // Remove separator from last link
     const lastLinkWithSeparator = linksWithSeparator[linksWithSeparator.length - 1];
     lastLinkWithSeparator.pop();

lib/public/components/common/popover/PopoverEngine.js

@@ -192,6 +192,12 @@ class PopoverEngine {
         this._popover.style.removeProperty('width');
         this._popover.style.removeProperty('top');
         this._popover.style.removeProperty('left');
+        if (this._setChildrensize) {
+            for (const child of this._popover.children) {
+                child.style.removeProperty('height');
+                child.style.removeProperty('width');
+            }
+        }
         this._popoverBoundingBox = this._popover.getBoundingClientRect();
     }
 
@@ -227,8 +233,8 @@ class PopoverEngine {
 
             this._mainAxisProjector.setSize(this._popover.style, `${mainAxisSize}px`);
             if (this._setChildrensize) {
-                for (const children of this._popover.children) {
-                    this._mainAxisProjector.setSize(children.style, `${mainAxisSize}px`);
+                for (const child of this._popover.children) {
+                    this._mainAxisProjector.setSize(child.style, `${mainAxisSize}px`);
                 }
             }
 
@@ -245,8 +251,8 @@ class PopoverEngine {
         if (this._popoverSizeCrossAxis > this._availableSpaceInCrossAxis) {
             this._crossAxisProjector.setSize(this._popover.style, `${this._availableSpaceInCrossAxis}px`);
             if (this._setChildrensize) {
-                for (const children of this._popover.children) {
-                    this._crossAxisProjector.setSize(children.style, `${this._availableSpaceInCrossAxis}px`);
+                for (const child of this._popover.children) {
+                    this._crossAxisProjector.setSize(child.style, `${this._availableSpaceInCrossAxis}px`);
                 }
             }
 

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

@@ -42,6 +42,7 @@ export class LogCreationModel extends Observable {
         this._creationTagsPickerModel = new TagPickerModel();
         this._creationTagsPickerModel.bubbleTo(this);
         this._creationTagsPickerModel.visualChange$.bubbleTo(this);
+
         this._parentLogId = null;
 
         this._isParentLogCollapsed = true;

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

@@ -18,13 +18,17 @@ import { tagPicker } from '../../../components/tag/tagPicker.js';
 import { markdownInput } from '../../../components/common/markdown/markdown.js';
 import spinner from '../../../components/common/spinner.js';
 import { logComponent } from '../../../components/Log/log.js';
+import { filePreviewPopoverLink } from '../FilePreview/attachmentPreviewComponent.js';
+import { popover } from '../../../components/common/popover/popover.js';
+import { PopoverTriggerPreConfiguration } from '../../../components/common/popover/popoverPreConfigurations.js';
+import { PopoverAnchors } from '../../../components/common/popover/PopoverEngine.js';
+import { filePreviewComponent } from '../FilePreview/filePreviewComponent.js';
 
 /**
  * A function to construct the create log screen
  *
  * @param {LogCreationModel} creationModel - Log creation model
  * @param {Object} options component creation options
- * @param {string} [options.authenticationToken] token to authenticate the session with the api
  * @param {Object} [options.parentLogMarkdownDisplayOptions] markdown display options @see logText options argument
  * @return {vnode} the log creation component
  */
@@ -47,7 +51,6 @@ export const logCreationComponent = (creationModel, options) => {
  * @param {LogCreationModel} creationModel the creation model
  * @param {Log|null} parentLog - The parent of the log being created
  * @param {Object} options component creation options
- * @param {string} [options.authenticationToken] token to authenticate the session with the api
  * @param {Object} [options.parentLogMarkdownDisplayOptions] markdown display options @see logText options argument
  * @return {vnode} the form component
  */
@@ -75,10 +78,10 @@ const logCreationForm = (creationModel, parentLog, options) => [
                     creationModel.isParentLogCollapsed,
                     () => creationModel.collapseParentLog(),
                     () => creationModel.showFullParentLog(),
-                    { ...options,
+                    {
+                        ...options,
                         logMarkdownDisplayOpts: options.parentLogMarkdownDisplayOptions,
                         goToDetailsButton: true,
-                        replayButton: false,
                     },
                 ),
 
@@ -116,7 +119,9 @@ const labeledInput = (labelAttributes, labelText, content, containerAttributes)
                 labelAttributes,
                 labelText,
             ),
-            content,
+            ...Array.isArray(content)
+                ? content
+                : [content],
         ],
     );
 };
@@ -234,28 +239,74 @@ const environmentsPanel = (logCreationModel) => labeledInput(
  * @return {vnode} - panel allowing the user to attach files
  */
 const attachmentsPanel = (logCreationModel) => {
-    const { attachments } = logCreationModel;
+    const { attachments: attachmentsFileList } = logCreationModel;
+
+    /**
+     * @type {File[]}
+     */
+    const attachments = [...attachmentsFileList];
+
+    let fileText;
+    switch (attachments.length) {
+        case 0:
+            fileText = 'No files chosen';
+            break;
+        case 1:
+            fileText = `${attachments.length} file chosen`;
+            break;
+        default:
+            fileText = `${attachments.length} files chosen`;
+            break;
+    }
 
     return labeledInput(
         { for: 'attachments' },
         'File attachments',
-        h('.flex-column.p2.g2', [
-            h('.flex-row.justify-between.items-center', [
-                h('input#attachments.w-33', {
+        [
+            h('.flex-row.justify-between.items-center.p2', [
+                h(
+                    'label.flex-row.g2.items-center',
+                    { for: 'attachments' },
+                    [
+                        h('.btn', 'Choose files'),
+                        h('', fileText),
+                    ],
+                ),
+                h('input#attachments.w-33.d-none', {
                     type: 'file',
                     multiple: true,
                     onchange: (e) => {
                         logCreationModel.attachments = e.target.files;
                     },
                 }),
-                attachments.length > 0 && h('button#clearAttachments.btn.btn-danger.ml3', {
-                    onclick: () => logCreationModel.clearAttachments(),
-                }, 'Clear'),
+                attachments.length > 0 && h(
+                    'button#clearAttachments.btn.btn-danger.ml3',
+                    { onclick: () => logCreationModel.clearAttachments() },
+                    'Clear',
+                ),
             ]),
-            attachments.length > 1 && h('#attachmentNames', {
-                style: 'min-height: 1.5em;',
-            }, [...attachments].map((attachment) => attachment.name).join(', ')),
-        ]),
+            h('#attachments-list.flex-row.flex-wrap.p2', attachments.flatMap((attachment) => {
+                const preview = filePreviewComponent(attachment, attachment.type, attachment.name);
+                return [
+                    preview
+                        ? popover(
+                            filePreviewPopoverLink(attachment.name),
+                            h(
+                                '.p2.flex-row.items-center',
+                                { key: window.btoa(`${attachment.name}-${attachment.size}-${attachment.lastModified}`) },
+                                preview,
+                            ),
+                            {
+                                ...PopoverTriggerPreConfiguration.click,
+                                anchor: PopoverAnchors.TOP_MIDDLE,
+                                setChildrenSize: true,
+                            },
+                        )
+                        : h('', attachment.name),
+                    h('span.mr2', ','),
+                ];
+            }).slice(0, -1)),
+        ],
     );
 };
 

lib/public/views/Logs/Details/logTreeViewComponent.js

@@ -21,10 +21,9 @@ import { frontLink } from '../../../components/common/navigation/frontLink.js';
 /**
  * A collection of details relating to a log
  * @param {LogTreeViewModel} treeViewModel model of the tree view
- * @param {string} authenticationToken the token to use to display attachments
  * @return {Component} Return the view of the table with the filtering options
  */
-export const logTreeViewComponent = (treeViewModel, authenticationToken) => {
+export const logTreeViewComponent = (treeViewModel) => {
     const { detailedPostsIds, selectedLogId, logTreeLeafs: logTreeLeafsRemoteData } = treeViewModel;
     return logTreeLeafsRemoteData.match({
         NotAsked: () => null,
@@ -43,11 +42,13 @@ export const logTreeViewComponent = (treeViewModel, authenticationToken) => {
                 logComponent(
                     log,
                     log.id === selectedLogId,
-                    !(log.title === parentLogTitle),
+                    log.title !== parentLogTitle,
                     isCollapsed,
                     () => treeViewModel.collapseLog(log.id),
                     () => treeViewModel.expandLog(log.id),
-                    { authenticationToken },
+                    {
+                        replyButton: true,
+                    },
                 ),
             );