@authowl/react 0.19.1 → 0.20.0

package/dist/TeamsSection-OFWSOAZ6.js

@@ -0,0 +1,295 @@
+"use client";
+import {
+  Bidi,
+  Busy,
+  FormError,
+  teamManagementCapabilities,
+  useAuthClient,
+  useOrganizationRoles,
+  useServerError,
+  useSubmitAction,
+  useT
+} from "./chunk-DPWUE5HS.js";
+
+// src/components/organization/TeamsSection.tsx
+import * as React4 from "react";
+
+// src/components/organization/TeamMembersPanel.tsx
+import * as React3 from "react";
+
+// src/components/organization/use-team-resources.ts
+import * as React2 from "react";
+
+// src/components/organization/use-organization-list-resource.ts
+import * as React from "react";
+function useOrganizationListResource({
+  enabled,
+  resourceKey,
+  request,
+  fallback,
+  inactiveData = null
+}) {
+  const toServerError = useServerError();
+  const requestFn = React.useRef(request);
+  requestFn.current = request;
+  const [data, setData] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const requestToken = React.useRef(0);
+  const refresh = React.useCallback(async () => {
+    const token = ++requestToken.current;
+    if (!enabled || !resourceKey) {
+      setData(inactiveData);
+      setError(null);
+      return;
+    }
+    setError(null);
+    try {
+      const result = await requestFn.current();
+      if (token !== requestToken.current) return;
+      if (result.error) {
+        setError(toServerError(result.error, fallback));
+        return;
+      }
+      setData(result.data ?? []);
+    } catch {
+      if (token === requestToken.current) setError(fallback);
+    }
+  }, [enabled, fallback, inactiveData, resourceKey, toServerError]);
+  React.useEffect(() => {
+    setData(enabled && resourceKey ? null : inactiveData);
+    setError(null);
+    void refresh();
+    return () => {
+      requestToken.current += 1;
+    };
+  }, [enabled, inactiveData, refresh, resourceKey]);
+  return { data, isLoading: data === null && error === null, error, refresh };
+}
+
+// src/components/organization/use-team-resources.ts
+function useTeamsResource(organizationId) {
+  const api = useAuthClient().organization;
+  const apiRef = React2.useRef(api);
+  apiRef.current = api;
+  const t = useT();
+  const resource = useOrganizationListResource({
+    enabled: true,
+    resourceKey: organizationId,
+    request: () => apiRef.current.listTeams({ organizationId }),
+    fallback: t("organization.profile.loadError")
+  });
+  return { teams: resource.data, error: resource.error, reload: resource.refresh };
+}
+function useTeamMembersResource(selectedTeamId) {
+  const api = useAuthClient().organization;
+  const apiRef = React2.useRef(api);
+  apiRef.current = api;
+  const t = useT();
+  const resource = useOrganizationListResource({
+    enabled: selectedTeamId !== null,
+    resourceKey: selectedTeamId,
+    request: () => apiRef.current.listTeamMembers({ teamId: selectedTeamId }),
+    fallback: t("organization.profile.loadError")
+  });
+  return { members: resource.data, error: resource.error, reload: resource.refresh };
+}
+
+// src/components/organization/TeamMembersPanel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TeamMembersPanel({
+  organization,
+  team,
+  canAdd,
+  canRemove
+}) {
+  const t = useT();
+  const api = useAuthClient().organization;
+  const { pending, error: actionError, run } = useSubmitAction();
+  const [userId, setUserId] = React3.useState("");
+  const { members, error, reload } = useTeamMembersResource(team.id);
+  const assignedUserIds = new Set(members?.map((member) => member.userId));
+  const availableMembers = organization.members.filter((member) => !assignedUserIds.has(member.userId));
+  const addableUserId = availableMembers.some((member) => member.userId === userId) ? userId : availableMembers[0]?.userId ?? "";
+  const addMember = (event) => {
+    event.preventDefault();
+    if (!addableUserId) return;
+    void run(
+      () => api.addTeamMember({
+        teamId: team.id,
+        userId: addableUserId,
+        organizationId: organization.id
+      }),
+      {
+        failure: t("organization.profile.general.error"),
+        onSuccess: async () => {
+          setUserId("");
+          await reload();
+        }
+      }
+    );
+  };
+  const removeMember = (member) => {
+    const organizationMember = organization.members.find((entry) => entry.userId === member.userId);
+    const displayName = organizationMember?.user.name || member.userId;
+    if (!window.confirm(t("organization.profile.teams.removeMemberConfirm", { name: displayName }))) return;
+    void run(
+      () => api.removeTeamMember({
+        teamId: team.id,
+        userId: member.userId,
+        organizationId: organization.id
+      }),
+      {
+        failure: t("organization.profile.general.error"),
+        onSuccess: reload
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "ba-organization-user-invitations", children: [
+    /* @__PURE__ */ jsx("h4", { children: t("organization.profile.teams.manageMembers") }),
+    canAdd && availableMembers.length > 0 && members !== null && /* @__PURE__ */ jsxs("form", { method: "post", className: "ba-organization-invite-form", onSubmit: addMember, children: [
+      /* @__PURE__ */ jsxs("label", { className: "ba-label", children: [
+        t("organization.profile.teams.addMember"),
+        /* @__PURE__ */ jsx("select", { className: "ba-input", value: addableUserId, onChange: (event) => setUserId(event.target.value), children: availableMembers.map((member) => /* @__PURE__ */ jsx("option", { value: member.userId, children: member.user.name || member.user.email || member.userId }, member.userId)) })
+      ] }),
+      /* @__PURE__ */ jsx("button", { className: "ba-button", type: "submit", disabled: pending || !addableUserId, children: t("organization.profile.teams.addMember") })
+    ] }),
+    /* @__PURE__ */ jsx(FormError, { children: actionError }),
+    error && /* @__PURE__ */ jsxs("div", { className: "ba-inline-error", children: [
+      /* @__PURE__ */ jsx(FormError, { children: error }),
+      /* @__PURE__ */ jsx("button", { className: "ba-link-button", type: "button", onClick: () => void reload(), children: t("organization.retry") })
+    ] }),
+    members?.length ? /* @__PURE__ */ jsx("ul", { className: "ba-organization-list", children: members.map((member) => {
+      const organizationMember = organization.members.find((entry) => entry.userId === member.userId);
+      const displayName = organizationMember?.user.name || member.userId;
+      return /* @__PURE__ */ jsxs("li", { className: "ba-organization-member", children: [
+        /* @__PURE__ */ jsxs("span", { className: "ba-organization-member-copy", children: [
+          /* @__PURE__ */ jsx("strong", { children: displayName }),
+          organizationMember?.user.email && /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx(Bidi, { children: organizationMember.user.email }) })
+        ] }),
+        canRemove && /* @__PURE__ */ jsx("button", { className: "ba-link-button ba-danger", type: "button", disabled: pending, onClick: () => removeMember(member), children: t("organization.profile.teams.removeMember") })
+      ] }, member.id);
+    }) }) : error ? null : members === null ? /* @__PURE__ */ jsx("div", { className: "ba-skeleton", "aria-label": t("common.loading") }) : members.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ba-muted", children: t("organization.profile.teams.membersEmpty") }) : null
+  ] });
+}
+
+// src/components/organization/TeamsSection.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function TeamsSection({
+  organization,
+  membership
+}) {
+  const t = useT();
+  const api = useAuthClient().organization;
+  const { pending, error: actionError, run } = useSubmitAction();
+  const { teams, error: teamsError, reload } = useTeamsResource(organization.id);
+  const { dynamicRoles } = useOrganizationRoles(organization.id);
+  const capabilities = teamManagementCapabilities(membership, dynamicRoles);
+  const [name, setName] = React4.useState("");
+  const [selectedTeamId, setSelectedTeamId] = React4.useState(null);
+  const [editingTeamId, setEditingTeamId] = React4.useState(null);
+  const [editingName, setEditingName] = React4.useState("");
+  React4.useEffect(() => {
+    setSelectedTeamId(null);
+    setEditingTeamId(null);
+    setEditingName("");
+  }, [organization.id]);
+  const create = (event) => {
+    event.preventDefault();
+    void run(
+      () => api.createTeam({ organizationId: organization.id, name: name.trim() }),
+      {
+        failure: t("organization.profile.general.error"),
+        onSuccess: async () => {
+          setName("");
+          await reload();
+        }
+      }
+    );
+  };
+  const beginRename = (team) => {
+    setEditingTeamId(team.id);
+    setEditingName(team.name);
+  };
+  const rename = (event, team) => {
+    event.preventDefault();
+    const nextName = editingName.trim();
+    if (!nextName || nextName === team.name) return;
+    void run(
+      () => api.updateTeam({
+        teamId: team.id,
+        data: { name: nextName, organizationId: organization.id }
+      }),
+      {
+        failure: t("organization.profile.general.error"),
+        onSuccess: async () => {
+          setEditingTeamId(null);
+          setEditingName("");
+          await reload();
+        }
+      }
+    );
+  };
+  const remove = (team) => {
+    if (!window.confirm(t("organization.profile.teams.removeTeamConfirm", { name: team.name }))) return;
+    void run(
+      () => api.removeTeam({ teamId: team.id, organizationId: organization.id }),
+      {
+        failure: t("organization.profile.general.error"),
+        onSuccess: async () => {
+          if (selectedTeamId === team.id) setSelectedTeamId(null);
+          if (editingTeamId === team.id) setEditingTeamId(null);
+          await reload();
+        }
+      }
+    );
+  };
+  const selectedTeam = teams?.find((team) => team.id === selectedTeamId);
+  return /* @__PURE__ */ jsxs2("section", { className: "ba-organization-section", children: [
+    /* @__PURE__ */ jsxs2("header", { className: "ba-organization-section-header", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "ba-title", children: t("organization.profile.teams.title") }),
+      /* @__PURE__ */ jsx2("p", { className: "ba-muted", children: t("organization.profile.teams.description") })
+    ] }),
+    capabilities.createTeam ? /* @__PURE__ */ jsxs2("form", { method: "post", className: "ba-organization-invite-form", onSubmit: create, children: [
+      /* @__PURE__ */ jsxs2("label", { className: "ba-label", children: [
+        t("organization.profile.teams.create"),
+        /* @__PURE__ */ jsx2("input", { className: "ba-input", value: name, onChange: (event) => setName(event.target.value), required: true })
+      ] }),
+      /* @__PURE__ */ jsx2("button", { className: "ba-button", type: "submit", disabled: pending || !name.trim(), "aria-busy": pending || void 0, children: /* @__PURE__ */ jsx2(Busy, { busy: pending, label: t("common.working"), children: t("organization.profile.teams.create") }) })
+    ] }) : null,
+    /* @__PURE__ */ jsx2(FormError, { children: actionError }),
+    teamsError && /* @__PURE__ */ jsxs2("div", { className: "ba-inline-error", children: [
+      /* @__PURE__ */ jsx2(FormError, { children: teamsError }),
+      /* @__PURE__ */ jsx2("button", { className: "ba-link-button", type: "button", onClick: () => void reload(), children: t("organization.retry") })
+    ] }),
+    teams?.length ? /* @__PURE__ */ jsx2("ul", { className: "ba-organization-list", children: teams.map((team) => /* @__PURE__ */ jsxs2("li", { className: "ba-organization-member", children: [
+      /* @__PURE__ */ jsx2("span", { className: "ba-organization-avatar", "aria-hidden": "true", children: team.name.trim().charAt(0).toUpperCase() || "?" }),
+      editingTeamId === team.id ? /* @__PURE__ */ jsxs2("form", { method: "post", className: "ba-organization-invite-form", onSubmit: (event) => rename(event, team), children: [
+        /* @__PURE__ */ jsxs2("label", { className: "ba-label", children: [
+          t("organization.profile.teams.rename"),
+          /* @__PURE__ */ jsx2("input", { className: "ba-input", value: editingName, onChange: (event) => setEditingName(event.target.value), required: true, autoFocus: true })
+        ] }),
+        /* @__PURE__ */ jsx2("button", { className: "ba-button", type: "submit", disabled: pending || !editingName.trim(), children: t("organization.profile.teams.rename") }),
+        /* @__PURE__ */ jsx2("button", { className: "ba-link-button", type: "button", disabled: pending, onClick: () => setEditingTeamId(null), children: t("organization.profile.teams.cancel") })
+      ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("span", { className: "ba-organization-member-copy", children: /* @__PURE__ */ jsx2("strong", { children: team.name }) }),
+        /* @__PURE__ */ jsxs2("span", { className: "ba-organization-member-actions", children: [
+          /* @__PURE__ */ jsx2("button", { className: "ba-link-button", type: "button", disabled: pending, "aria-expanded": selectedTeamId === team.id, onClick: () => setSelectedTeamId(selectedTeamId === team.id ? null : team.id), children: t("organization.profile.teams.manageMembers") }),
+          capabilities.updateTeam && /* @__PURE__ */ jsx2("button", { className: "ba-link-button", type: "button", disabled: pending, onClick: () => beginRename(team), children: t("organization.profile.teams.rename") }),
+          capabilities.deleteTeam && /* @__PURE__ */ jsx2("button", { className: "ba-link-button ba-danger", type: "button", disabled: pending, onClick: () => remove(team), children: t("organization.profile.teams.removeTeam") })
+        ] })
+      ] })
+    ] }, team.id)) }) : teamsError ? null : teams === null ? /* @__PURE__ */ jsx2("div", { className: "ba-skeleton", "aria-label": t("common.loading") }) : teams.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "ba-muted", children: t("organization.profile.teams.empty") }) : null,
+    selectedTeam && /* @__PURE__ */ jsx2(
+      TeamMembersPanel,
+      {
+        organization,
+        team: selectedTeam,
+        canAdd: capabilities.addTeamMember,
+        canRemove: capabilities.removeTeamMember
+      }
+    )
+  ] });
+}
+export {
+  TeamsSection as default
+};