Merge pull request #571 from epinio/feat/EPINIO-535_about_page_updates

Feat/epinio 535 about page updates

Author: Hannahbird

dashboard/pkg/epinio/l10n/en-us.yaml

@@ -71,6 +71,7 @@ epinio:
     getBinaries: Get binaries
   downloadReport:
     title: Cluster Metrics Report
+    description: View epinio systems and cluster usage data.
     action: Download
     success: Metrics report downloaded successfully
     errors:

dashboard/pkg/epinio/pages/c/_cluster/about.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from 'vue';
 import { useStore } from 'vuex';
-import Banner from '@components/Banner/Banner.vue';
-import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
-import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { MANAGEMENT } from '@shell/config/types';
 import { getVendor } from '@shell/config/private-label';
 import { downloadFile } from '@shell/utils/download';
@@ -215,7 +212,7 @@ const versionColumns = [
 const downloadColumns = [
   {
     field:     'label',
-    label:     t('about.versions.component'), // re-use "Component" as Platform header
+    label:     t('about.versions.component'),
     formatter: (_v: any, row: any) => {
       const div = document.createElement('div');
 
@@ -245,16 +242,30 @@ const downloadColumns = [
     }
   }
 ];
+
+const reportStatus = computed(() => {
+  if (reportSuccess.value) return { message: reportSuccess.value, variant: 'success' };
+  if (reportError.value) return { message: reportError.value, variant: 'error' };
+  return null;
+});
+
+const bundleStatus = computed(() => {
+  if (supportBundleSuccess.value) return { message: supportBundleSuccess.value, variant: 'success' };
+  if (supportBundleError.value) return { message: supportBundleError.value, variant: 'error' };
+  return null;
+});
 </script>
 
 <template>
   <div class="about">
-    <Banner
+    <trailhand-tag
       v-if="fetchError"
-      color="error"
       :label="fetchError"
+      variant="error"
+      size="md"
       class="mb-20"
     />
+
     <template v-if="version">
       <h1>
         {{ aboutTitleString }}
@@ -291,95 +302,97 @@ const downloadColumns = [
       </a>
     </template>
 
-    <section
+    <div
       v-if="version"
-      class="download-report"
+      class="about-cards"
     >
-      <h3>{{ t('epinio.downloadReport.title') }}</h3>
-
-      <div class="download-report__actions">
-        <button
-          class="btn role-primary"
+      <trailhand-card
+        icon-name="info"
+        class="about-card"
+      >
+        <span slot="title">{{ t('epinio.downloadReport.title') }}</span>
+        <div
+          slot="description"
+          class="download__body"
+        >
+          <p class="download__description">
+            {{ t('epinio.downloadReport.description') }}
+          </p>
+        </div>
+        <trailhand-button
+          slot="action"
+          variant="secondary"
+          size="large"
           :disabled="reportLoading"
           @click="downloadReport"
+          class="download__button"
         >
-          <i
-            v-if="reportLoading"
-            class="icon-spinner animate-spin mr-5"
+          {{ reportLoading ? 'Downloading...' : t('epinio.downloadReport.action') }}
+        </trailhand-button>
+        <span
+          v-if="reportStatus"
+          slot="footer"
+        >
+          <trailhand-tag
+            :label="reportStatus.message"
+            :variant="reportStatus.variant"
+            size="md"
           />
-          {{ t('epinio.downloadReport.action') }}
-        </button>
-      </div>
-
-      <Banner
-        v-if="reportSuccess"
-        color="success"
-        :label="reportSuccess"
-      />
-      <Banner
-        v-if="reportError"
-        color="error"
-        :label="reportError"
-      />
-    </section>
+        </span>
+      </trailhand-card>
 
-    <section
-      v-if="version"
-      class="support-bundle"
-    >
-      <h3>{{ t('epinio.supportBundle.title') }}</h3>
-      <p class="text-muted">
-        {{ t('epinio.supportBundle.description') }}
-      </p>
-
-      <div class="support-bundle__controls">
-        <LabeledInput
-          v-model:value="tailLines"
-          type="number"
-          :label="t('epinio.supportBundle.tail.label')"
-          :tooltip="t('epinio.supportBundle.tail.help')"
-          :min="1"
-          :max="10000"
-          :disabled="supportBundleLoading"
-        />
-        <Checkbox
-          v-model:value="includeApps"
-          :label="t('epinio.supportBundle.includeApps')"
-          :disabled="supportBundleLoading"
-        />
-      </div>
-
-      <div class="support-bundle__actions">
-        <trailhand-button
-          variant="primary"
-          :disabled="supportBundleLoading"
-          @click="downloadSupportBundle"
+      <trailhand-card
+        icon-name="tools"
+        class="about-card bundle-card"
+      >
+        <span slot="title">{{ t('epinio.supportBundle.title') }}</span>
+        <div
+          slot="description"
+          class="support-bundle__body"
         >
-          <i
-            v-if="supportBundleLoading"
-            class="icon-spinner animate-spin mr-5"
-          />
-          {{ t('epinio.supportBundle.action') }}
-        </trailhand-button>
+          <p class="support-bundle__description">
+            {{ t('epinio.supportBundle.description') }}
+          </p>
+            <label class="checkbox-label">
+              <trailhand-checkbox
+                :checked="includeApps"
+                :disabled="supportBundleLoading"
+                @checkbox-change="includeApps = $event.detail.checked"
+              />
+              {{ t('epinio.supportBundle.includeApps') }}
+            </label>
+          <div class="support-bundle__controls">
+            <div class="input-button-row">
+              <trailhand-text-input
+                :label="t('epinio.supportBundle.tail.label')"
+                :value="String(tailLines)"
+                size="large"
+                :disabled="supportBundleLoading"
+                @text-input-change="tailLines = sanitizeTail($event.detail.value)"
+              />
+              <trailhand-button
+                variant="secondary"
+                size="large"
+                :disabled="supportBundleLoading"
+                @click="downloadSupportBundle"
+              >
+                {{ supportBundleLoading ? t('epinio.supportBundle.collecting') : t('epinio.supportBundle.action') }}
+              </trailhand-button>
+            </div>
+          </div>
+        </div>
         <span
-          v-if="supportBundleLoading"
-          class="support-bundle__progress"
+          v-if="bundleStatus"
+          slot="footer"
         >
-          {{ t('epinio.supportBundle.collecting') }}
+          <trailhand-tag
+            :label="bundleStatus.message"
+            :variant="bundleStatus.variant"
+            size="md"
+          />
         </span>
-      </div>
-
-      <Banner
-        v-if="supportBundleSuccess"
-        color="success"
-        :label="supportBundleSuccess"
-      />
-      <Banner
-        v-if="supportBundleError"
-        color="error"
-        :label="supportBundleError"
-      />
-    </section>
+      </trailhand-card>
+    </div>
   </div>
 </template>
 
@@ -393,52 +406,63 @@ const downloadColumns = [
   }
 }
 
-.download-report {
+.about-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
   margin-top: 40px;
-  padding: 16px;
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius);
-  background: var(--default);
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-top: 16px;
-  }
+  align-items: stretch;
+}
 
-  .banner {
-    margin-top: 10px;
-  }
+.about-card {
+  height: 100%;
 }
 
-.support-bundle {
-  margin-top: 40px;
-  padding: 16px;
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius);
-  background: var(--default);
-
-  &__controls {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    align-items: center;
-  }
+.about-card::part(card) {
+  height: 100%;
+  box-sizing: border-box;
+}
 
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-top: 16px;
-  }
+.bundle-card::part(action) {
+  margin-bottom: 0;
+}
 
-  &__progress {
-    color: var(--muted);
-  }
+.support-bundle__body,
+.download__body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
 
-  .banner {
-    margin-top: 10px;
-  }
+trailhand-button.download__button {
+  width: 100%;
+}
+
+.support-bundle__description,
+.download__description {
+  margin: 0;
+  font-size: 14px;
+  color: var(--th-color-text-secondary);
+}
+
+.support-bundle__controls {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.input-button-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  align-items: end;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
 }
 </style>