From ebb9dc826a54f4e2da2da0d6b3e9d430ac6eee6f Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Tue, 7 May 2024 14:30:54 -0700
Subject: [PATCH] fix dialog

---
 frontend/src/components/orgs-list.ts | 75 ++++++++++++++--------------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/orgs-list.ts b/frontend/src/components/orgs-list.ts
index 915a9f27..6078e80c 100644
--- a/frontend/src/components/orgs-list.ts
+++ b/frontend/src/components/orgs-list.ts
@@ -2,6 +2,7 @@ import { localized, msg, str } from "@lit/localize";
 import type { SlInput } from "@shoelace-style/shoelace";
 import { type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
 
 import type { CurrentUser, UserOrg } from "@/types/user";
 import LiteElement, { html } from "@/utils/LiteElement";
@@ -38,49 +39,47 @@ export class OrgsList extends LiteElement {
   }
 
   private renderOrgQuotas() {
-    if (!this.currOrg) {
-      return html``;
-    }
-
     return html`
       <btrix-dialog
-        .label=${msg(str`Quotas for: ${this.currOrg.name}`)}
+        .label=${msg(str`Quotas for: ${this.currOrg?.name || ""}`)}
         .open=${!!this.currOrg}
         @sl-request-close=${() => (this.currOrg = null)}
       >
-        ${Object.entries(this.currOrg.quotas!).map(([key, value]) => {
-          let label;
-          switch (key) {
-            case "maxConcurrentCrawls":
-              label = msg("Max Concurrent Crawls");
-              break;
-            case "maxPagesPerCrawl":
-              label = msg("Max Pages Per Crawl");
-              break;
-            case "storageQuota":
-              label = msg("Org Storage Quota (GB)");
-              value = Math.floor(value / 1e9);
-              break;
-            case "maxExecMinutesPerMonth":
-              label = msg("Max Execution Minutes Per Month");
-              break;
-            case "extraExecMinutes":
-              label = msg("Extra Execution Minutes");
-              break;
-            case "giftedExecMinutes":
-              label = msg("Gifted Execution Minutes");
-              break;
-            default:
-              label = msg("Unlabeled");
-          }
-          return html` <sl-input
-            name=${key}
-            label=${label}
-            value=${value}
-            type="number"
-            @sl-input="${this.onUpdateQuota}"
-          ></sl-input>`;
-        })}
+        ${when(this.currOrg?.quotas, (quotas) =>
+          Object.entries(quotas).map(([key, value]) => {
+            let label;
+            switch (key) {
+              case "maxConcurrentCrawls":
+                label = msg("Max Concurrent Crawls");
+                break;
+              case "maxPagesPerCrawl":
+                label = msg("Max Pages Per Crawl");
+                break;
+              case "storageQuota":
+                label = msg("Org Storage Quota (GB)");
+                value = Math.floor(value / 1e9);
+                break;
+              case "maxExecMinutesPerMonth":
+                label = msg("Max Execution Minutes Per Month");
+                break;
+              case "extraExecMinutes":
+                label = msg("Extra Execution Minutes");
+                break;
+              case "giftedExecMinutes":
+                label = msg("Gifted Execution Minutes");
+                break;
+              default:
+                label = msg("Unlabeled");
+            }
+            return html` <sl-input
+              name=${key}
+              label=${label}
+              value=${value}
+              type="number"
+              @sl-input="${this.onUpdateQuota}"
+            ></sl-input>`;
+          }),
+        )}
         <div slot="footer" class="flex justify-end">
           <sl-button
             size="small"