From e6c0fe5189347bbc6c0dd806dfbea39a97aef8c5 Mon Sep 17 00:00:00 2001
From: Pierre DE SOYRES <pierre.de-soyres@clever-cloud.com>
Date: Mon, 3 Feb 2025 17:52:31 +0100
Subject: [PATCH] feat(cc-logs-loading-progress): inline layout

---
 .../cc-logs-loading-progress.js               | 229 ++++++++++--------
 .../cc-logs-loading-progress.stories.js       |  20 +-
 src/translations/translations.en.js           |  28 +--
 src/translations/translations.fr.js           |  28 +--
 4 files changed, 168 insertions(+), 137 deletions(-)

diff --git a/src/components/cc-logs-loading-progress/cc-logs-loading-progress.js b/src/components/cc-logs-loading-progress/cc-logs-loading-progress.js
index 2f77586a4..dc2751e6f 100644
--- a/src/components/cc-logs-loading-progress/cc-logs-loading-progress.js
+++ b/src/components/cc-logs-loading-progress/cc-logs-loading-progress.js
@@ -1,5 +1,11 @@
 import { css, html, LitElement } from 'lit';
-import { iconRemixPauseLine, iconRemixPlayLine } from '../../assets/cc-remix.icons.js';
+import { classMap } from 'lit/directives/class-map.js';
+import {
+  iconRemixInformationFill as iconInfo,
+  iconRemixPauseLine,
+  iconRemixPlayLine,
+  iconRemixAlertFill as iconWarning,
+} from '../../assets/cc-remix.icons.js';
 import { dispatchCustomEvent } from '../../lib/events.js';
 import { i18n } from '../../translations/translation.js';
 import '../cc-button/cc-button.js';
@@ -42,20 +48,20 @@ export class CcLogsLoadingProgress extends LitElement {
 
   /* region Private methods */
 
-  _getLoadingProgressTitle() {
-    if (this.state.type === 'idle') {
-      return null;
-    }
-
-    if (this.state.type === 'completed') {
-      return i18n('cc-logs-loading-progress.progress.loaded');
+  /**
+   * @param {number} value
+   * @param {number|null} percent
+   */
+  _getLoadingProgressMessage(value, percent) {
+    if (value === 0) {
+      return i18n('cc-logs-loading-progress.progress.none');
     }
 
-    if (this.state.percent == null) {
-      return i18n('cc-logs-loading-progress.progress.loading.live');
+    if (percent == null) {
+      return i18n('cc-logs-loading-progress.progress.indeterminate', { count: value });
     }
 
-    return i18n('cc-logs-loading-progress.progress.loading', { percent: this.state.percent / 100 });
+    return i18n('cc-logs-loading-progress.progress.percentage', { count: value, percent: percent / 100 });
   }
 
   /* endregion */
@@ -88,90 +94,84 @@ export class CcLogsLoadingProgress extends LitElement {
     const percent = this.state.type === 'completed' ? 100 : this.state.percent;
 
     const shouldAskForOverflowDecision = this.state.type === 'overflowLimitReached';
-    const shouldDisplayPauseResumeControls =
-      !shouldAskForOverflowDecision && (this.state.type === 'running' || this.state.type === 'paused');
     const shouldDisplayOverflowWarning =
-      !shouldAskForOverflowDecision &&
       (this.state.type === 'running' || this.state.type === 'paused' || this.state.type === 'completed') &&
       this.state.overflowing;
 
-    const getPlayPauseButton = () => {
-      if (!shouldDisplayPauseResumeControls) {
-        return null;
-      }
-      if (this.state.type === 'running') {
-        return {
-          icon: iconRemixPauseLine,
-          a11yName: i18n('cc-logs-loading-progress.progress.pause'),
-          onclick: this._onPause,
-        };
-      }
-      if (this.state.type === 'paused') {
-        return {
-          icon: iconRemixPlayLine,
-          a11yName: i18n('cc-logs-loading-progress.progress.resume'),
-          onclick: this._onResume,
-        };
-      }
-      return null;
-    };
-
-    const playPauseButton = getPlayPauseButton();
-
     return html`
-      <div class="wrapper">
-        <div class="heading">
-          <div class="title">${this._getLoadingProgressTitle()}</div>
-
-          ${playPauseButton != null
-            ? html`
-                <cc-button
-                  .icon=${playPauseButton.icon}
-                  hide-text
-                  a11y-name=${playPauseButton.a11yName}
-                  @cc-button:click=${playPauseButton.onclick}
-                ></cc-button>
-              `
-            : ''}
-        </div>
-        ${percent != null
-          ? html`
-              <div class="progress-bar">
-                <div class="progress-bar-track" style="width: ${percent}%;"></div>
-              </div>
-            `
-          : ''}
-        <div class="content">
-          <div>${i18n('cc-logs-loading-progress.progress.message', { count: this.state.value })}</div>
-
-          ${shouldAskForOverflowDecision
-            ? html`
-                <cc-notice intent="info" heading="${i18n('cc-logs-loading-progress.progress.overflow.title')}">
-                  <div slot="message">
-                    ${i18n('cc-logs-loading-progress.progress.overflow.message.almost', { limit: this.limit })}
-                    <div class="overflow-control">
-                      <cc-button link @cc-button:click=${this._onAcceptOverflow}>
-                        ${i18n('cc-logs-loading-progress.progress.overflow.continue')}
-                      </cc-button>
-                      <cc-button link @cc-button:click=${this._onDiscardOverflow}>
-                        ${i18n('cc-logs-loading-progress.progress.overflow.stop')}
-                      </cc-button>
+      <div class="wrapper ${classMap({ warning: shouldAskForOverflowDecision })}">
+        <div class="content inline">
+          ${this._renderPlayPauseButton()}
+          ${
+            shouldAskForOverflowDecision
+              ? html`
+                  <div class="notice warning">
+                    <cc-icon .icon="${iconWarning}" a11y-name="${i18n('cc-notice.icon-alt.warning')}"></cc-icon>
+                    <div class="notice-message">
+                      <div>${i18n('cc-logs-loading-progress.overflow.warning', { limit: this.limit })}</div>
+                      <div class="overflow-buttons">
+                        <cc-button link @cc-button:click=${this._onAcceptOverflow}>
+                          ${i18n('cc-logs-loading-progress.overflow.accept')}
+                        </cc-button>
+                        <cc-button link @cc-button:click=${this._onDiscardOverflow}>
+                          ${i18n('cc-logs-loading-progress.overflow.discard')}
+                        </cc-button>
+                      </div>
                     </div>
                   </div>
-                </cc-notice>
-              `
-            : ''}
-          ${shouldDisplayOverflowWarning
-            ? html`
-                <cc-notice intent="info" no-icon>
-                  <div slot="message">
-                    ${i18n('cc-logs-loading-progress.progress.overflow.message', { limit: this.limit })}
+                `
+              : ''
+          }
+          ${
+            !shouldAskForOverflowDecision
+              ? html`<div class="loading-progress-message">
+                  ${this._getLoadingProgressMessage(this.state.value, percent)}
+                </div>`
+              : ''
+          }
+          ${
+            shouldDisplayOverflowWarning
+              ? html`
+                  <div class="notice info">
+                    <cc-icon .icon="${iconInfo}" a11y-name="${i18n('cc-notice.icon-alt.info')}"></cc-icon>
+                    <div class="notice-message">
+                      ${i18n('cc-logs-loading-progress.overflow.info', { limit: this.limit })}
+                    </div>
                   </div>
-                </cc-notice>
-              `
-            : ''}
+                `
+              : ''
+          }
         </div>
+        ${
+          percent != null
+            ? html`
+                <div class="progress-bar">
+                  <div class="progress-bar-track" style="width: ${percent}%;"></div>
+                </div>
+              `
+            : ''
+        }
       </div>
+    </div>`;
+  }
+
+  _renderPlayPauseButton() {
+    const running = this.state.type === 'running';
+    const paused = this.state.type === 'paused';
+
+    if (!running && !paused) {
+      return null;
+    }
+
+    return html`
+      <cc-button
+        .icon=${running ? iconRemixPauseLine : iconRemixPlayLine}
+        hide-text
+        a11y-name=${running
+          ? i18n('cc-logs-loading-progress.control.pause')
+          : i18n('cc-logs-loading-progress.control.resume')}
+        @cc-button:click=${running ? this._onPause : this._onResume}
+      ></cc-button>
     `;
   }
 
@@ -179,7 +179,6 @@ export class CcLogsLoadingProgress extends LitElement {
     return [
       // language=CSS
       css`
-        /* stylelint-disable no-duplicate-selectors */
         :host {
           display: block;
         }
@@ -190,29 +189,54 @@ export class CcLogsLoadingProgress extends LitElement {
           border-radius: var(--cc-border-radius-default, 0.25em);
         }
 
-        .heading {
+        .wrapper.warning {
+          background-color: var(--cc-color-bg-warning-weaker);
+          border: 1px solid var(--cc-color-border-warning-weak);
+        }
+
+        .content {
           align-items: center;
-          background-color: var(--cc-color-bg-neutral, #eee);
-          border-top-left-radius: var(--cc-border-radius-default, 0.25em);
-          border-top-right-radius: var(--cc-border-radius-default, 0.25em);
+          color: var(--cc-color-text-weak);
           display: flex;
-          gap: 0.3em;
-          max-height: 2em;
+          flex-wrap: wrap;
+          gap: 0.5em;
+          height: 1.75em;
           padding: 0.5em;
         }
 
-        .title {
-          color: var(--cc-color-text-default, #000);
+        .overflow-buttons {
+          display: flex;
+          gap: 0.5em;
+        }
+
+        .loading-progress-message {
           flex: 1;
-          font-weight: bold;
         }
 
-        .content {
-          color: var(--cc-color-text-weak);
+        .notice {
+          align-items: center;
           display: flex;
-          flex-direction: column;
-          gap: 1em;
-          padding: 1em;
+          gap: 0.5em;
+        }
+
+        .notice-message {
+          align-items: center;
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.5em;
+        }
+
+        .notice cc-icon {
+          min-height: 1.5em;
+          min-width: 1.5em;
+        }
+
+        .notice.info cc-icon {
+          --cc-icon-color: var(--cc-color-text-primary);
+        }
+
+        .notice.warning cc-icon {
+          --cc-icon-color: var(--cc-color-text-warning);
         }
 
         .progress-bar {
@@ -226,11 +250,6 @@ export class CcLogsLoadingProgress extends LitElement {
           background-color: var(--cc-color-bg-primary);
           height: 100%;
         }
-
-        .overflow-control {
-          display: flex;
-          gap: 1.5em;
-        }
       `,
     ];
   }
diff --git a/src/components/cc-logs-loading-progress/cc-logs-loading-progress.stories.js b/src/components/cc-logs-loading-progress/cc-logs-loading-progress.stories.js
index 6defcabd0..8469d30c6 100644
--- a/src/components/cc-logs-loading-progress/cc-logs-loading-progress.stories.js
+++ b/src/components/cc-logs-loading-progress/cc-logs-loading-progress.stories.js
@@ -18,9 +18,7 @@ const conf = {
   // language=CSS
   css: `
     cc-logs-loading-progress-beta {
-      height: 18em;
-      width: 18em;
-      margin: 1em;
+      width: 100%;
     }
   `,
 };
@@ -167,10 +165,24 @@ export const completed = makeStory(conf, {
     {
       state: {
         type: 'completed',
-        value: 0,
+        value: 100,
         overflowing: false,
       },
       limit: 1000,
     },
   ],
 });
+
+export const completedWithOverflowing = makeStory(conf, {
+  /** @type {Array<Partial<CcLogsLoadingProgress>>} */
+  items: [
+    {
+      state: {
+        type: 'completed',
+        value: 10000,
+        overflowing: true,
+      },
+      limit: 1000,
+    },
+  ],
+});
diff --git a/src/translations/translations.en.js b/src/translations/translations.en.js
index 6a6551302..f9000c4b2 100644
--- a/src/translations/translations.en.js
+++ b/src/translations/translations.en.js
@@ -897,21 +897,21 @@ export const translations = {
   'cc-logs-instances.stopping.header': `Stopping instances`,
   //#endregion
   //#region cc-logs-loading-progress
-  'cc-logs-loading-progress.progress.loaded': `Logs loaded: 100%`,
-  'cc-logs-loading-progress.progress.loading': /** @param {{percent: number}} _ */ ({ percent }) =>
-    `Loading logs: ${formatPercent(lang, percent)}`,
-  'cc-logs-loading-progress.progress.loading.live': `Fetching realtime...`,
-  'cc-logs-loading-progress.progress.message': /** @param {{count: number}} _ */ ({ count }) =>
-    `${formatNumber(lang, count)} entries loaded`,
-  'cc-logs-loading-progress.progress.overflow.continue': `Continue`,
-  'cc-logs-loading-progress.progress.overflow.message': /** @param {{limit: number}} _ */ ({ limit }) =>
-    `To maintain optimal performance, only the last ${formatNumber(lang, limit)} logs are shown.`,
-  'cc-logs-loading-progress.progress.overflow.message.almost': /** @param {{limit: number}} _ */ ({ limit }) =>
+  'cc-logs-loading-progress.control.pause': `Pause`,
+  'cc-logs-loading-progress.control.resume': `Resume`,
+  'cc-logs-loading-progress.overflow.accept': `Continue`,
+  'cc-logs-loading-progress.overflow.discard': `Stop`,
+  'cc-logs-loading-progress.overflow.info': /** @param {{limit: number}} _ */ ({ limit }) =>
+    `Only the last ${formatNumber(lang, limit)} logs are displayed`,
+  'cc-logs-loading-progress.overflow.warning': /** @param {{limit: number}} _ */ ({ limit }) =>
     `You'll soon reach ${formatNumber(lang, limit)} logs loaded. What do you want to do?`,
-  'cc-logs-loading-progress.progress.overflow.stop': `Stop`,
-  'cc-logs-loading-progress.progress.overflow.title': `Large volume`,
-  'cc-logs-loading-progress.progress.pause': `Pause`,
-  'cc-logs-loading-progress.progress.resume': `Resume`,
+  'cc-logs-loading-progress.progress.indeterminate': /** @param {{count: number}} _ */ ({ count }) =>
+    `${formatNumber(lang, count)} logs loaded`,
+  'cc-logs-loading-progress.progress.none': `No logs loaded`,
+  'cc-logs-loading-progress.progress.percentage': /** @param {{count: number, percent: number}} _ */ ({
+    count,
+    percent,
+  }) => `${formatNumber(lang, count)} logs loaded (${formatPercent(lang, percent)})`,
   //#endregion
   //#region cc-logs-message-filter
   'cc-logs-message-filter.bad-format': `Invalid regex`,
diff --git a/src/translations/translations.fr.js b/src/translations/translations.fr.js
index c8adf9c71..f379dad4d 100644
--- a/src/translations/translations.fr.js
+++ b/src/translations/translations.fr.js
@@ -909,21 +909,21 @@ export const translations = {
   'cc-logs-instances.stopping.header': `Instances arrêtées`,
   //#endregion
   //#region cc-logs-loading-progress
-  'cc-logs-loading-progress.progress.loaded': `Logs chargés : 100%`,
-  'cc-logs-loading-progress.progress.loading': /** @param {{percent: number}} _ */ ({ percent }) =>
-    `Chargement des logs : ${formatPercent(lang, percent)}`,
-  'cc-logs-loading-progress.progress.loading.live': `Chargement en temps réel...`,
-  'cc-logs-loading-progress.progress.message': /** @param {{count: number}} _ */ ({ count }) =>
-    `${formatNumber(lang, count)} logs chargés`,
-  'cc-logs-loading-progress.progress.overflow.continue': `Continuer`,
-  'cc-logs-loading-progress.progress.overflow.message': /** @param {{limit: number}} _ */ ({ limit }) =>
-    `Pour assurer de bonnes performances, seuls les ${formatNumber(lang, limit)} derniers logs sont visible.`,
-  'cc-logs-loading-progress.progress.overflow.message.almost': /** @param {{limit: number}} _ */ ({ limit }) =>
+  'cc-logs-loading-progress.control.pause': `Mettre en pause`,
+  'cc-logs-loading-progress.control.resume': `Reprendre`,
+  'cc-logs-loading-progress.overflow.accept': `Continuer`,
+  'cc-logs-loading-progress.overflow.discard': `Arrêter`,
+  'cc-logs-loading-progress.overflow.info': /** @param {{limit: number}} _ */ ({ limit }) =>
+    `Seuls les ${formatNumber(lang, limit)} derniers logs sont affichés.`,
+  'cc-logs-loading-progress.overflow.warning': /** @param {{limit: number}} _ */ ({ limit }) =>
     `Vous allez atteindre ${formatNumber(lang, limit)} logs chargés. Que voulez-vous faire ?`,
-  'cc-logs-loading-progress.progress.overflow.stop': `Arrêter`,
-  'cc-logs-loading-progress.progress.overflow.title': `Volume important`,
-  'cc-logs-loading-progress.progress.pause': `Mettre en pause`,
-  'cc-logs-loading-progress.progress.resume': `Reprendre`,
+  'cc-logs-loading-progress.progress.indeterminate': /** @param {{count: number}} _ */ ({ count }) =>
+    `${formatNumber(lang, count)} logs chargés`,
+  'cc-logs-loading-progress.progress.none': `Aucun log chargé`,
+  'cc-logs-loading-progress.progress.percentage': /** @param {{count: number, percent: number}} _ */ ({
+    count,
+    percent,
+  }) => `${formatNumber(lang, count)} logs chargés (${formatPercent(lang, percent)})`,
   //#endregion
   //#region cc-logs-message-filter
   'cc-logs-message-filter.bad-format': `Regex invalide`,