From e7028ce64aa61ae791bbdc687ed5a566c291ce9d Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Tue, 21 May 2024 15:09:40 -0700
Subject: [PATCH] show quota status

---
 frontend/src/components/orgs-list.ts | 40 +++++++++++++++++++++++-----
 frontend/src/pages/home.ts           |  8 +++---
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/orgs-list.ts b/frontend/src/components/orgs-list.ts
index 1edfd29f..de8413de 100644
--- a/frontend/src/components/orgs-list.ts
+++ b/frontend/src/components/orgs-list.ts
@@ -12,12 +12,15 @@ import type { CurrentUser } from "@/types/user";
 import { formatNumber } from "@/utils/localization";
 import type { OrgData } from "@/utils/orgs";
 
+/**
+ * @fires update-quotas
+ */
 @localized()
 @customElement("btrix-orgs-list")
 export class OrgsList extends TailwindElement {
   static styles = css`
     btrix-table {
-      grid-template-columns: [clickable-start] auto auto auto [clickable-end] min-content;
+      grid-template-columns: min-content [clickable-start] auto auto auto [clickable-end] min-content;
     }
   `;
   @property({ type: Object })
@@ -52,12 +55,15 @@ export class OrgsList extends TailwindElement {
     return html`
       <btrix-table>
         <btrix-table-head class="mb-2">
-          <btrix-table-header-cell class="px-2"
-            >${msg("Name")}</btrix-table-header-cell
-          >
-          <btrix-table-header-cell class="px-2"
-            >${msg("Members")}</btrix-table-header-cell
-          >
+          <btrix-table-header-cell>
+            <span class="sr-only">${msg("Status")}</span>
+          </btrix-table-header-cell>
+          <btrix-table-header-cell class="px-2">
+            ${msg("Name")}
+          </btrix-table-header-cell>
+          <btrix-table-header-cell class="px-2">
+            ${msg("Members")}
+          </btrix-table-header-cell>
           <btrix-table-header-cell class="px-2">
             ${msg("Bytes Stored")}
           </btrix-table-header-cell>
@@ -246,6 +252,8 @@ export class OrgsList extends TailwindElement {
       this.dispatchEvent(
         new CustomEvent("update-quotas", { detail: this.currOrg }),
       );
+
+      void this.orgQuotaDialog?.hide();
     }
   }
 
@@ -272,6 +280,24 @@ export class OrgsList extends TailwindElement {
           ? ""
           : "opacity-50"} cursor-pointer select-none border-b bg-neutral-0 transition-colors first-of-type:rounded-t last-of-type:rounded-b last-of-type:border-none focus-within:bg-neutral-50 hover:bg-neutral-50"
       >
+        <btrix-table-cell class="min-w-6 pl-2">
+          ${org.storageQuotaReached || org.execMinutesQuotaReached
+            ? html`
+                <sl-tooltip content=${msg("Quota reached")}>
+                  <sl-icon
+                    class="text-base text-danger"
+                    name="exclamation-triangle-fill"
+                  >
+                  </sl-icon>
+                </sl-tooltip>
+              `
+            : html`
+                <sl-tooltip content=${msg("Under quota")}>
+                  <sl-icon class="text-base text-success" name="check-circle">
+                  </sl-icon>
+                </sl-tooltip>
+              `}
+        </btrix-table-cell>
         <btrix-table-cell class="p-2" rowClickTarget="a">
           <a
             href="/orgs/${org.slug}"
diff --git a/frontend/src/pages/home.ts b/frontend/src/pages/home.ts
index 5f2d927c..a20dadd5 100644
--- a/frontend/src/pages/home.ts
+++ b/frontend/src/pages/home.ts
@@ -141,10 +141,10 @@ export class Home extends LiteElement {
       <div class="grid grid-cols-5 gap-8">
         <div class="col-span-5 md:col-span-3">
           <section>
-            <header class="flex items-center justify-between">
-              <h2 class="mb-3 mt-2 text-lg font-medium">
-                ${msg("All Organizations")}
-              </h2>
+            <header
+              class="mb-3 flex items-center justify-between border-b pb-3"
+            >
+              <h2 class="text-lg font-medium">${msg("All Organizations")}</h2>
               <sl-button
                 variant="primary"
                 size="small"