Show storage values for each item type when no quota (#1260)

Hides chart and shows size values for each Storage line when org has no
quota. No changes to orgs with quota. (Follow-up to #1188)

frontend/src/pages/org/dashboard.ts

@@ -57,6 +57,7 @@ export class Dashboard extends LiteElement {
   }
 
   render() {
+    const hasQuota = Boolean(this.metrics?.storageQuotaBytes);
     const quotaReached =
       this.metrics &&
       this.metrics.storageQuotaBytes > 0 &&
@@ -120,6 +121,11 @@ export class Dashboard extends LiteElement {
               <dl>
                 ${this.renderStat({
                   value: metrics.crawlCount,
+                  secondaryValue: hasQuota
+                    ? ""
+                    : html`<sl-format-bytes
+                        value=${metrics.storageUsedCrawls}
+                      ></sl-format-bytes>`,
                   singleLabel: msg("Crawl"),
                   pluralLabel: msg("Crawls"),
                   iconProps: {
@@ -129,12 +135,22 @@ export class Dashboard extends LiteElement {
                 })}
                 ${this.renderStat({
                   value: metrics.uploadCount,
+                  secondaryValue: hasQuota
+                    ? ""
+                    : html`<sl-format-bytes
+                        value=${metrics.storageUsedUploads}
+                      ></sl-format-bytes>`,
                   singleLabel: msg("Upload"),
                   pluralLabel: msg("Uploads"),
                   iconProps: { name: "upload", color: this.colors.uploads },
                 })}
                 ${this.renderStat({
                   value: metrics.profileCount,
+                  secondaryValue: hasQuota
+                    ? ""
+                    : html`<sl-format-bytes
+                        value=${metrics.storageUsedProfiles}
+                      ></sl-format-bytes>`,
                   singleLabel: msg("Browser Profile"),
                   pluralLabel: msg("Browser Profiles"),
                   iconProps: {
@@ -147,6 +163,11 @@ export class Dashboard extends LiteElement {
                 ></sl-divider>
                 ${this.renderStat({
                   value: metrics.archivedItemCount,
+                  secondaryValue: hasQuota
+                    ? ""
+                    : html`<sl-format-bytes
+                        value=${metrics.storageUsedBytes}
+                      ></sl-format-bytes>`,
                   singleLabel: msg("Archived Item"),
                   pluralLabel: msg("Archived Items"),
                   iconProps: { name: "file-zip-fill" },
@@ -246,14 +267,12 @@ export class Dashboard extends LiteElement {
                   ></sl-format-bytes>
                   ${msg("Available")}
                 `
-              : html`
+              : ""
-                  <sl-format-bytes
-                    value=${metrics.storageUsedBytes}
-                  ></sl-format-bytes>
-                  ${msg("of Data Stored")}
-                `
         )}
       </div>
+      ${when(
+        hasQuota,
+        () => html`
           <div class="mb-2">
             <btrix-meter
               value=${metrics.storageUsedBytes}
@@ -295,9 +314,7 @@ export class Dashboard extends LiteElement {
                   <div class="w-full h-full"></div>
                 </sl-tooltip>
               </div>
-          ${when(
+              <sl-format-bytes
-            hasQuota,
-            () => html`<sl-format-bytes
                 slot="valueLabel"
                 value=${metrics.storageUsedBytes}
                 display="narrow"
@@ -306,10 +323,11 @@ export class Dashboard extends LiteElement {
                 slot="maxLabel"
                 value=${metrics.storageQuotaBytes}
                 display="narrow"
-              ></sl-format-bytes>`
+              ></sl-format-bytes>
-          )}
             </btrix-meter>
           </div>
+        `
+      )}
     `;
   }
 
@@ -340,13 +358,15 @@ export class Dashboard extends LiteElement {
 
   private renderStat(stat: {
     value: number | string | TemplateResult;
+    secondaryValue?: number | string | TemplateResult;
     singleLabel: string;
     pluralLabel: string;
     iconProps: { name: string; library?: string; color?: string };
   }) {
     const { value, iconProps } = stat;
     return html`
-      <div class="flex items-center mb-2 last:mb-0">
+      <div class="flex items-center justify-between mb-2 last:mb-0">
+        <div class="flex items-center">
           <sl-icon
             class="text-base text-neutral-500 mr-2"
             name=${iconProps.name}
@@ -361,6 +381,16 @@ export class Dashboard extends LiteElement {
             ${typeof value === "number" ? value.toLocaleString() : value}
           </dd>
         </div>
+        ${when(
+          stat.secondaryValue,
+          () =>
+            html`
+              <div class="text-xs text-neutral-500 font-monostyle">
+                ${stat.secondaryValue}
+              </div>
+            `
+        )}
+      </div>
     `;
   }