@lunora/studio 1.0.0-alpha.3 → 1.0.0-alpha.30

package/dist/packem_chunks/organizations-panel.js

@@ -0,0 +1,670 @@
+import { c } from 'react/compiler-runtime';
+import { useLunora } from '@lunora/react';
+import { useState } from 'react';
+import { B as Button } from '../packem_shared/button-BhsN2uZH.js';
+import { C as Card, a as CardContent } from '../packem_shared/card-DURq3ElK.js';
+import { E as EmptyState } from '../packem_shared/empty-state-DY_oe0k6.js';
+import { T as Table, a as TableHeader, b as TableRow, c as TableHead, d as TableBody, e as TableCell } from '../packem_shared/table-DsCa9Qp9.js';
+import { a as useClientQuery } from '../packem_shared/use-admin-query-BViPA3US.js';
+import { u as useAuthCapabilities } from '../packem_shared/use-auth-capabilities-BHkoBnbZ.js';
+import { useAutoRefresh } from '../packem_shared/DEFAULT_AUTO_REFRESH_MS-Vxwaxx51.js';
+import { useT } from '../packem_shared/DEFAULT_LOCALE-CiX4W7Kr.js';
+import { d as formatCell, g as formatTimestamp, f as fireAndForget } from '../packem_shared/internal-FcNZ3beb.js';
+import { jsxDEV } from 'react/jsx-dev-runtime';
+
+const OrgRowTable = (t0) => {
+  const $ = c(35);
+  const {
+    actionLabel,
+    actionPrefix,
+    columns,
+    heading,
+    onAction,
+    rowPrefix,
+    rows,
+    testId
+  } = t0;
+  const t = useT();
+  let t1;
+  if ($[0] !== heading) {
+    t1 = /* @__PURE__ */ jsxDEV("header", {
+      className: "border-b border-border px-4 py-3",
+      children: /* @__PURE__ */ jsxDEV("span", {
+        className: "font-mono text-[11px] tracking-wide text-muted-foreground uppercase",
+        children: heading
+      }, void 0, false)
+    }, void 0, false);
+    $[0] = heading;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== columns) {
+    t2 = columns.map(_temp);
+    $[2] = columns;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t) {
+    t3 = t("Actions");
+    $[4] = t;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t3) {
+    t4 = /* @__PURE__ */ jsxDEV(TableHead, {
+      "aria-label": t3
+    }, void 0, false);
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== t2 || $[9] !== t4) {
+    t5 = /* @__PURE__ */ jsxDEV(TableHeader, {
+      children: /* @__PURE__ */ jsxDEV(TableRow, {
+        children: [t2, t4]
+      }, void 0, true)
+    }, void 0, false);
+    $[8] = t2;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== actionLabel || $[12] !== actionPrefix || $[13] !== columns || $[14] !== onAction || $[15] !== rowPrefix || $[16] !== rows) {
+    let t72;
+    if ($[18] !== actionLabel || $[19] !== actionPrefix || $[20] !== columns || $[21] !== onAction || $[22] !== rowPrefix) {
+      t72 = (row) => {
+        const id = formatCell(row.id);
+        return /* @__PURE__ */ jsxDEV(TableRow, {
+          "data-testid": `${rowPrefix}-${id}`,
+          children: [columns.map((column_0) => /* @__PURE__ */ jsxDEV(TableCell, {
+            children: column_0.render(row)
+          }, column_0.head, false)), /* @__PURE__ */ jsxDEV(TableCell, {
+            children: /* @__PURE__ */ jsxDEV(Button, {
+              "data-testid": `${actionPrefix}-${id}`,
+              onClick: () => {
+                onAction(id);
+              },
+              size: "xs",
+              type: "button",
+              variant: "ghost",
+              children: actionLabel
+            }, void 0, false)
+          }, void 0, false)]
+        }, id, true);
+      };
+      $[18] = actionLabel;
+      $[19] = actionPrefix;
+      $[20] = columns;
+      $[21] = onAction;
+      $[22] = rowPrefix;
+      $[23] = t72;
+    } else {
+      t72 = $[23];
+    }
+    t6 = rows.map(t72);
+    $[11] = actionLabel;
+    $[12] = actionPrefix;
+    $[13] = columns;
+    $[14] = onAction;
+    $[15] = rowPrefix;
+    $[16] = rows;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[24] !== t6) {
+    t7 = /* @__PURE__ */ jsxDEV(TableBody, {
+      children: t6
+    }, void 0, false);
+    $[24] = t6;
+    $[25] = t7;
+  } else {
+    t7 = $[25];
+  }
+  let t8;
+  if ($[26] !== t5 || $[27] !== t7) {
+    t8 = /* @__PURE__ */ jsxDEV(CardContent, {
+      className: "px-0",
+      children: /* @__PURE__ */ jsxDEV(Table, {
+        children: [t5, t7]
+      }, void 0, true)
+    }, void 0, false);
+    $[26] = t5;
+    $[27] = t7;
+    $[28] = t8;
+  } else {
+    t8 = $[28];
+  }
+  let t9;
+  if ($[29] !== t1 || $[30] !== t8) {
+    t9 = /* @__PURE__ */ jsxDEV(Card, {
+      className: "overflow-hidden py-0",
+      children: [t1, t8]
+    }, void 0, true);
+    $[29] = t1;
+    $[30] = t8;
+    $[31] = t9;
+  } else {
+    t9 = $[31];
+  }
+  let t10;
+  if ($[32] !== t9 || $[33] !== testId) {
+    t10 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-col gap-2",
+      "data-testid": testId,
+      children: t9
+    }, void 0, false);
+    $[32] = t9;
+    $[33] = testId;
+    $[34] = t10;
+  } else {
+    t10 = $[34];
+  }
+  return t10;
+};
+const OrganizationsPanel = () => {
+  const $ = c(95);
+  const client = useLunora();
+  const t = useT();
+  const {
+    capabilities,
+    ready
+  } = useAuthCapabilities();
+  const [selected, setSelected] = useState(null);
+  let t0;
+  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t0 = ["lunora-auth-orgs"];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== client) {
+    t1 = () => client.listAuthOrganizations({
+      limit: 100
+    });
+    $[1] = client;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== capabilities.organization) {
+    t2 = {
+      enabled: capabilities.organization
+    };
+    $[3] = capabilities.organization;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const orgsQuery = useClientQuery(t0, t1, t2);
+  const orgs = orgsQuery.data?.rows ?? null;
+  let t3;
+  if ($[5] !== selected) {
+    t3 = ["lunora-auth-org-members", selected];
+    $[5] = selected;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== client || $[8] !== selected) {
+    t4 = () => client.listAuthOrgMembers({
+      limit: 200,
+      organizationId: selected ?? ""
+    });
+    $[7] = client;
+    $[8] = selected;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const t5 = selected !== null;
+  let t6;
+  if ($[10] !== t5) {
+    t6 = {
+      enabled: t5
+    };
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  const membersQuery = useClientQuery(t3, t4, t6);
+  let t7;
+  if ($[12] !== selected) {
+    t7 = ["lunora-auth-org-invitations", selected];
+    $[12] = selected;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  let t8;
+  if ($[14] !== client || $[15] !== selected) {
+    t8 = () => client.listAuthOrgInvitations({
+      limit: 200,
+      organizationId: selected ?? ""
+    });
+    $[14] = client;
+    $[15] = selected;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  const t9 = selected !== null;
+  let t10;
+  if ($[17] !== t9) {
+    t10 = {
+      enabled: t9
+    };
+    $[17] = t9;
+    $[18] = t10;
+  } else {
+    t10 = $[18];
+  }
+  const invitationsQuery = useClientQuery(t7, t8, t10);
+  const members = selected === null ? null : membersQuery.data?.rows ?? null;
+  const invitations = selected === null ? null : invitationsQuery.data?.rows ?? null;
+  const error = orgsQuery.error ?? membersQuery.error ?? invitationsQuery.error;
+  let t11;
+  if ($[19] !== invitationsQuery || $[20] !== membersQuery || $[21] !== orgsQuery || $[22] !== selected) {
+    t11 = () => {
+      orgsQuery.refetch();
+      if (selected !== null) {
+        membersQuery.refetch();
+        invitationsQuery.refetch();
+      }
+    };
+    $[19] = invitationsQuery;
+    $[20] = membersQuery;
+    $[21] = orgsQuery;
+    $[22] = selected;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  useAutoRefresh(t11, capabilities.organization);
+  let t12;
+  if ($[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t12 = (id) => {
+      setSelected(id);
+    };
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  const onSelectOrg = t12;
+  let t13;
+  if ($[25] !== invitationsQuery || $[26] !== membersQuery) {
+    t13 = (action) => {
+      fireAndForget((async () => {
+        await action();
+        membersQuery.refetch();
+        invitationsQuery.refetch();
+      })());
+    };
+    $[25] = invitationsQuery;
+    $[26] = membersQuery;
+    $[27] = t13;
+  } else {
+    t13 = $[27];
+  }
+  const runOrgAction = t13;
+  let t14;
+  if ($[28] !== client || $[29] !== runOrgAction) {
+    t14 = (memberId) => {
+      runOrgAction(() => client.removeAuthOrgMember({
+        memberId
+      }));
+    };
+    $[28] = client;
+    $[29] = runOrgAction;
+    $[30] = t14;
+  } else {
+    t14 = $[30];
+  }
+  const onRemoveMember = t14;
+  let t15;
+  if ($[31] !== client || $[32] !== runOrgAction) {
+    t15 = (invitationId) => {
+      runOrgAction(() => client.cancelAuthOrgInvitation({
+        invitationId
+      }));
+    };
+    $[31] = client;
+    $[32] = runOrgAction;
+    $[33] = t15;
+  } else {
+    t15 = $[33];
+  }
+  const onCancelInvitation = t15;
+  let t16;
+  if ($[34] !== t) {
+    t16 = t("userId");
+    $[34] = t;
+    $[35] = t16;
+  } else {
+    t16 = $[35];
+  }
+  let t17;
+  if ($[36] !== t16) {
+    t17 = {
+      head: t16,
+      render: _temp2
+    };
+    $[36] = t16;
+    $[37] = t17;
+  } else {
+    t17 = $[37];
+  }
+  let t18;
+  if ($[38] !== t) {
+    t18 = t("role");
+    $[38] = t;
+    $[39] = t18;
+  } else {
+    t18 = $[39];
+  }
+  let t19;
+  if ($[40] !== t18) {
+    t19 = {
+      head: t18,
+      render: _temp3
+    };
+    $[40] = t18;
+    $[41] = t19;
+  } else {
+    t19 = $[41];
+  }
+  let t20;
+  if ($[42] !== t17 || $[43] !== t19) {
+    t20 = [t17, t19];
+    $[42] = t17;
+    $[43] = t19;
+    $[44] = t20;
+  } else {
+    t20 = $[44];
+  }
+  const memberColumns = t20;
+  let t21;
+  if ($[45] !== t) {
+    t21 = t("email");
+    $[45] = t;
+    $[46] = t21;
+  } else {
+    t21 = $[46];
+  }
+  let t22;
+  if ($[47] !== t21) {
+    t22 = {
+      head: t21,
+      render: _temp4
+    };
+    $[47] = t21;
+    $[48] = t22;
+  } else {
+    t22 = $[48];
+  }
+  let t23;
+  if ($[49] !== t) {
+    t23 = t("role");
+    $[49] = t;
+    $[50] = t23;
+  } else {
+    t23 = $[50];
+  }
+  let t24;
+  if ($[51] !== t23) {
+    t24 = {
+      head: t23,
+      render: _temp5
+    };
+    $[51] = t23;
+    $[52] = t24;
+  } else {
+    t24 = $[52];
+  }
+  let t25;
+  if ($[53] !== t) {
+    t25 = t("status");
+    $[53] = t;
+    $[54] = t25;
+  } else {
+    t25 = $[54];
+  }
+  let t26;
+  if ($[55] !== t25) {
+    t26 = {
+      head: t25,
+      render: _temp6
+    };
+    $[55] = t25;
+    $[56] = t26;
+  } else {
+    t26 = $[56];
+  }
+  let t27;
+  if ($[57] !== t22 || $[58] !== t24 || $[59] !== t26) {
+    t27 = [t22, t24, t26];
+    $[57] = t22;
+    $[58] = t24;
+    $[59] = t26;
+    $[60] = t27;
+  } else {
+    t27 = $[60];
+  }
+  const invitationColumns = t27;
+  if (ready && !capabilities.organization) {
+    let t282;
+    if ($[61] !== t) {
+      t282 = t("Enable the organization() plugin in your auth config to manage organizations here.");
+      $[61] = t;
+      $[62] = t282;
+    } else {
+      t282 = $[62];
+    }
+    let t292;
+    if ($[63] !== t) {
+      t292 = t("Organizations are not enabled.");
+      $[63] = t;
+      $[64] = t292;
+    } else {
+      t292 = $[64];
+    }
+    let t302;
+    if ($[65] !== t282 || $[66] !== t292) {
+      t302 = /* @__PURE__ */ jsxDEV(EmptyState, {
+        description: t282,
+        testId: "org-disabled",
+        title: t292
+      }, void 0, false);
+      $[65] = t282;
+      $[66] = t292;
+      $[67] = t302;
+    } else {
+      t302 = $[67];
+    }
+    return t302;
+  }
+  let t28;
+  if ($[68] !== error) {
+    t28 = error !== null && /* @__PURE__ */ jsxDEV("p", {
+      className: "text-sm text-destructive",
+      "data-testid": "org-error",
+      role: "alert",
+      children: error
+    }, void 0, false);
+    $[68] = error;
+    $[69] = t28;
+  } else {
+    t28 = $[69];
+  }
+  let t29;
+  if ($[70] !== orgs || $[71] !== t) {
+    t29 = orgs !== null && orgs.length === 0 && /* @__PURE__ */ jsxDEV(EmptyState, {
+      testId: "org-empty",
+      title: t("No organizations.")
+    }, void 0, false);
+    $[70] = orgs;
+    $[71] = t;
+    $[72] = t29;
+  } else {
+    t29 = $[72];
+  }
+  let t30;
+  if ($[73] !== orgs || $[74] !== selected || $[75] !== t) {
+    t30 = orgs !== null && orgs.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
+      className: "overflow-hidden py-0",
+      children: /* @__PURE__ */ jsxDEV(CardContent, {
+        className: "px-0",
+        children: /* @__PURE__ */ jsxDEV(Table, {
+          "data-testid": "org-table",
+          children: [/* @__PURE__ */ jsxDEV(TableHeader, {
+            children: /* @__PURE__ */ jsxDEV(TableRow, {
+              children: [/* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("id")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("name")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("slug")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                children: t("created")
+              }, void 0, false), /* @__PURE__ */ jsxDEV(TableHead, {
+                "aria-label": t("Actions")
+              }, void 0, false)]
+            }, void 0, true)
+          }, void 0, false), /* @__PURE__ */ jsxDEV(TableBody, {
+            children: orgs.map((org) => {
+              const id_0 = formatCell(org.id);
+              return /* @__PURE__ */ jsxDEV(TableRow, {
+                "data-testid": `org-row-${id_0}`,
+                children: [/* @__PURE__ */ jsxDEV(TableCell, {
+                  className: "font-mono text-xs",
+                  children: id_0
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                  children: formatCell(org.name)
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                  children: formatCell(org.slug)
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                  className: "text-muted-foreground tabular-nums",
+                  children: formatTimestamp(org.createdAt)
+                }, void 0, false), /* @__PURE__ */ jsxDEV(TableCell, {
+                  children: /* @__PURE__ */ jsxDEV(Button, {
+                    "aria-pressed": selected === id_0,
+                    "data-testid": `org-select-${id_0}`,
+                    onClick: () => {
+                      onSelectOrg(id_0);
+                    },
+                    size: "xs",
+                    type: "button",
+                    variant: "ghost",
+                    children: t("Members")
+                  }, void 0, false)
+                }, void 0, false)]
+              }, id_0, true);
+            })
+          }, void 0, false)]
+        }, void 0, true)
+      }, void 0, false)
+    }, void 0, false);
+    $[73] = orgs;
+    $[74] = selected;
+    $[75] = t;
+    $[76] = t30;
+  } else {
+    t30 = $[76];
+  }
+  let t31;
+  if ($[77] !== memberColumns || $[78] !== members || $[79] !== onRemoveMember || $[80] !== selected || $[81] !== t) {
+    t31 = selected !== null && members !== null && /* @__PURE__ */ jsxDEV(OrgRowTable, {
+      actionLabel: t("Remove"),
+      actionPrefix: "org-remove-member",
+      columns: memberColumns,
+      heading: t("Members"),
+      onAction: onRemoveMember,
+      rowPrefix: "org-member",
+      rows: members,
+      testId: "org-members"
+    }, void 0, false);
+    $[77] = memberColumns;
+    $[78] = members;
+    $[79] = onRemoveMember;
+    $[80] = selected;
+    $[81] = t;
+    $[82] = t31;
+  } else {
+    t31 = $[82];
+  }
+  let t32;
+  if ($[83] !== invitationColumns || $[84] !== invitations || $[85] !== onCancelInvitation || $[86] !== selected || $[87] !== t) {
+    t32 = selected !== null && invitations !== null && invitations.length > 0 && /* @__PURE__ */ jsxDEV(OrgRowTable, {
+      actionLabel: t("Cancel"),
+      actionPrefix: "org-cancel-invitation",
+      columns: invitationColumns,
+      heading: t("Invitations"),
+      onAction: onCancelInvitation,
+      rowPrefix: "org-invitation",
+      rows: invitations,
+      testId: "org-invitations"
+    }, void 0, false);
+    $[83] = invitationColumns;
+    $[84] = invitations;
+    $[85] = onCancelInvitation;
+    $[86] = selected;
+    $[87] = t;
+    $[88] = t32;
+  } else {
+    t32 = $[88];
+  }
+  let t33;
+  if ($[89] !== t28 || $[90] !== t29 || $[91] !== t30 || $[92] !== t31 || $[93] !== t32) {
+    t33 = /* @__PURE__ */ jsxDEV("div", {
+      className: "flex flex-col gap-4",
+      "data-testid": "lunora-organizations",
+      children: [t28, t29, t30, t31, t32]
+    }, void 0, true);
+    $[89] = t28;
+    $[90] = t29;
+    $[91] = t30;
+    $[92] = t31;
+    $[93] = t32;
+    $[94] = t33;
+  } else {
+    t33 = $[94];
+  }
+  return t33;
+};
+function _temp(column) {
+  return /* @__PURE__ */ jsxDEV(TableHead, {
+    children: column.head
+  }, column.head, false);
+}
+function _temp2(row) {
+  return formatCell(row.userId);
+}
+function _temp3(row_0) {
+  return formatCell(row_0.role);
+}
+function _temp4(row_1) {
+  return formatCell(row_1.email);
+}
+function _temp5(row_2) {
+  return formatCell(row_2.role);
+}
+function _temp6(row_3) {
+  return formatCell(row_3.status);
+}
+
+export { OrganizationsPanel };