add quota adjustment editing and direct value editing

emma-sg · emma-sg · commit 8233018c1e00 · 2025-09-23T18:27:32.000-04:00
updates the org quota editor to allow both adjustment values and direct
value editing for quotas other than additional/gifted execution minutes
diff --git a/frontend/src/components/ui/data-grid/data-grid-cell.ts b/frontend/src/components/ui/data-grid/data-grid-cell.ts
@@ -20,7 +20,7 @@ import { DataGridFocusController } from "@/components/ui/data-grid/controllers/f
 import type { UrlInput } from "@/components/ui/url-input";
 import { tw } from "@/utils/tailwind";
 
-const cellInputStyle = [
+export const cellInputStyle = [
   tw`size-full [--sl-input-background-color-hover:transparent] [--sl-input-background-color:transparent] [--sl-input-border-radius-medium:0] [--sl-input-spacing-medium:var(--sl-spacing-small)] focus:z-10`,
   // TODO We need to upgrade to Tailwind v4 for inset rings to actually work
   // tw`focus-within:part-[base]:inset-ring-2`,
diff --git a/frontend/src/components/ui/data-grid/data-grid-row.ts b/frontend/src/components/ui/data-grid/data-grid-row.ts
@@ -30,8 +30,8 @@ export type RowEditEventDetail<T extends GridItem = GridItem> =
 
 const cell = directive(CellDirective);
 
-const cellStyle = tw`focus-visible:-outline-offset-2`;
-const editableCellStyle = tw`p-0 focus-visible:bg-slate-50 `;
+const cellStyle = tw`min-w-0 focus-visible:-outline-offset-2`;
+const editableCellStyle = tw`min-w-0 p-0 focus-visible:bg-slate-50`;
 
 /**
  * @fires btrix-remove CustomEvent
@@ -223,7 +223,10 @@ export class DataGridRow<
 
     if (!item) return;
 
-    const editable = this.editCells && col.editable;
+    const editable =
+      this.editCells && typeof col.editable === "function"
+        ? col.editable(item)
+        : col.editable;
     const tooltipContent = editable
       ? this.#invalidInputsMap.get(col.field)
       : col.renderCellTooltip
diff --git a/frontend/src/components/ui/data-grid/types.ts b/frontend/src/components/ui/data-grid/types.ts
@@ -40,7 +40,7 @@ export type GridColumn<
   field: Key;
   label: string | TemplateResult;
   description?: string;
-  editable?: boolean;
+  editable?: boolean | ((item: Item | undefined) => boolean | undefined);
   required?: boolean;
   inputPlaceholder?: string;
   width?: string;
diff --git a/frontend/src/features/admin/org-quota-editor.ts b/frontend/src/features/admin/org-quota-editor.ts
@@ -1,5 +1,6 @@
 import { localized, msg, str } from "@lit/localize";
 import { type SlDialog } from "@shoelace-style/shoelace";
+import clsx from "clsx";
 import { html, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref, type Ref } from "lit/directives/ref.js";
@@ -10,6 +11,7 @@ import { type Entries } from "type-fest";
 import z from "zod";
 
 import { BtrixElement } from "@/classes/BtrixElement";
+import { cellInputStyle } from "@/components/ui/data-grid/data-grid-cell";
 import { type RowEditEventDetail } from "@/components/ui/data-grid/data-grid-row";
 import {
   GridColumnType,
@@ -31,7 +33,14 @@ const PlansResponseSchema = z.object({
 
 type PlansResponse = z.infer<typeof PlansResponseSchema>;
 
-const LABELS = {
+const LABELS: {
+  [key in keyof OrgQuotas]: {
+    label: string;
+    type: "number" | "bytes";
+    scale?: number;
+    adjustmentOnly?: boolean;
+  };
+} = {
   maxConcurrentCrawls: {
     label: msg("Max Concurrent Crawls"),
     type: "number",
@@ -52,17 +61,13 @@ const LABELS = {
   extraExecMinutes: {
     label: msg("Extra Execution Minutes"),
     type: "number",
+    adjustmentOnly: true,
   },
   giftedExecMinutes: {
     label: msg("Gifted Execution Minutes"),
     type: "number",
+    adjustmentOnly: true,
   },
-} as const satisfies {
-  [key in keyof OrgQuotas]: {
-    label: string;
-    type: "number" | "bytes";
-    scale?: number;
-  };
 };
 
 @customElement("btrix-org-quota-editor")
@@ -111,7 +116,7 @@ export class OrgQuotaEditor extends BtrixElement {
         const items = entries.map(([key, value]) => {
           const labelConfig = LABELS[key];
           let currentAdjustment = this.orgQuotaAdjustments[key] || 0;
-          if (labelConfig.type === "bytes") {
+          if (labelConfig.scale != undefined) {
             currentAdjustment = Math.floor(
               currentAdjustment / labelConfig.scale,
             );
@@ -135,47 +140,95 @@ export class OrgQuotaEditor extends BtrixElement {
           {
             label: msg("Value"),
             field: "current",
-            editable: false,
+            editable: (item) => item && !LABELS[item.key].adjustmentOnly,
+            inputType: GridColumnType.Number,
             width: "1fr",
-            renderCell: ({ item }) => {
+            renderEditCell: ({ item }) => {
+              const key = item.key;
+              let value = item.current;
+              const labelConfig = LABELS[key];
+
+              if (labelConfig.scale != undefined) {
+                value = Math.floor(value / labelConfig.scale);
+              }
+              return html`<sl-input
+                class=${clsx(cellInputStyle)}
+                type="number"
+                value="${value}"
+                min="0"
+                step="1"
+              >
+                ${labelConfig.type === "bytes"
+                  ? html`<span class="whitespace-nowrap" slot="suffix"
+                      >GB</span
+                    >`
+                  : ""}
+              </sl-input>`;
+            },
+          },
+          {
+            label: msg("Adjustment"),
+            field: "adjustment",
+            editable: true,
+            width: "2fr",
+            inputType: GridColumnType.Number,
+            renderEditCell: ({ item }) => {
               const key = item.key;
-              const value = item.current;
+              let value = this.orgQuotaAdjustments[key] ?? 0;
               const labelConfig = LABELS[key];
               const format = (v: number, isInitialValue = true) =>
                 this.format(v, labelConfig.type, isInitialValue);
 
-              return this.orgQuotaAdjustments[key]
+              const displayValue = this.orgQuotaAdjustments[key]
                 ? Math.sign(this.orgQuotaAdjustments[key]) === 1
                   ? html`<span class="tabular-nums">
-                      <b>${format(value + this.orgQuotaAdjustments[key])}</b>
+                      <b
+                        >${format(
+                          (this.org?.quotas[key] || 0) +
+                            this.orgQuotaAdjustments[key],
+                        )}</b
+                      >
                       <span class="inline-block">
-                        (${format(value, false)}
+                        (${format(this.org?.quotas[key] || 0, false)}
                         <span class="whitespace-nowrap text-green-600">
                           +&nbsp;${format(this.orgQuotaAdjustments[key])}</span
                         >)</span
                       ></span
                     >`
                   : html`<span class="tabular-nums">
-                      <b>${format(value + this.orgQuotaAdjustments[key])}</b>
+                      <b
+                        >${format(
+                          (this.org?.quotas[key] || 0) +
+                            this.orgQuotaAdjustments[key],
+                        )}</b
+                      >
                       <span class="inline-block">
-                        (${format(value, false)}
+                        (${format(this.org?.quotas[key] || 0, false)}
                         <span class="whitespace-nowrap text-red-600">
                           -&nbsp;${format(-this.orgQuotaAdjustments[key])}</span
                         >)</span
                       ></span
                     >`
-                : format(value);
+                : null;
+              if (labelConfig.scale != undefined) {
+                value = Math.floor(value / labelConfig.scale);
+              }
+              return html`<sl-input
+                  class=${clsx(cellInputStyle)}
+                  type="number"
+                  value="${value}"
+                  min=${-1 * item.current}
+                  step="1"
+                >
+                  ${labelConfig.type === "bytes"
+                    ? html`<span class="whitespace-nowrap" slot="suffix"
+                        >GB</span
+                      >`
+                    : ""}
+                </sl-input>
+                ${displayValue}`;
             },
           },
-          {
-            label: msg("Adjustment"),
-            field: "adjustment",
-            editable: true,
-            width: "1fr",
-            inputType: GridColumnType.Number,
-            min: (item) => -1 * (item?.current ?? 0),
-            step: 1,
-          },
         ];
 
         return html`
@@ -267,13 +320,22 @@ export class OrgQuotaEditor extends BtrixElement {
               const key = event.detail.rowKey as keyof OrgQuotas;
               let value = Number(event.detail.value);
               const labelConfig = LABELS[key];
-              if (labelConfig.type === "bytes") {
+              if (labelConfig.scale != undefined) {
                 value = Math.floor(value * labelConfig.scale);
               }
-              this.orgQuotaAdjustments = {
-                ...this.orgQuotaAdjustments,
-                [key]: value,
-              };
+              if (event.detail.field === "adjustment") {
+                console.log("adjustment", value);
+                this.orgQuotaAdjustments = {
+                  ...this.orgQuotaAdjustments,
+                  [key]: value,
+                };
+              } else if (event.detail.field === "current") {
+                console.log("current", value);
+                this.orgQuotaAdjustments = {
+                  ...this.orgQuotaAdjustments,
+                  [key]: value - (this.org?.quotas[key] || 0),
+                };
+              }
             }}
           ></btrix-data-grid>
         `;
