@cytario/web 2.1.4 → 2.1.5

package/app/components/Tooltip/TooltipSpan.tsx

@@ -33,13 +33,7 @@ const CopiedOverlay = () => (
 
 // ─── Right (default): pure CSS truncation ───────────────────────────
 
-const RightEllipsis = ({
-  children,
-  copyValue,
-}: {
-  children: ReactNode;
-  copyValue?: string;
-}) => {
+const RightEllipsis = ({ children, copyValue }: { children: ReactNode; copyValue?: string }) => {
   const ref = useRef<HTMLSpanElement>(null);
   const isTruncated = useOverflowDetection(ref);
   const { handleClick, isCopied } = useCopyToClipboard(copyValue);
@@ -67,13 +61,7 @@ const RightEllipsis = ({
 
 // ─── Left: CSS direction trick ──────────────────────────────────────
 
-const LeftEllipsis = ({
-  children,
-  copyValue,
-}: {
-  children: ReactNode;
-  copyValue?: string;
-}) => {
+const LeftEllipsis = ({ children, copyValue }: { children: ReactNode; copyValue?: string }) => {
   const ref = useRef<HTMLSpanElement>(null);
   const isTruncated = useOverflowDetection(ref);
   const { handleClick, isCopied } = useCopyToClipboard(copyValue);
@@ -104,13 +92,7 @@ const LeftEllipsis = ({
 
 const middleCx = "overflow-hidden whitespace-nowrap block min-w-0 w-full";
 
-const MiddleEllipsisString = ({
-  text,
-  copyValue,
-}: {
-  text: string;
-  copyValue?: string;
-}) => {
+const MiddleEllipsisString = ({ text, copyValue }: { text: string; copyValue?: string }) => {
   const ref = useRef<HTMLSpanElement>(null);
   const displayed = useMiddleEllipsis(ref, text);
   const isTruncated = displayed !== text;
@@ -139,13 +121,8 @@ const MiddleEllipsisString = ({
 
 // ─── Public component ───────────────────────────────────────────────
 
-export const TooltipSpan = ({
-  children,
-  ellipsis = "right",
-  copyValue,
-}: TooltipSpanProps) => {
-  if (ellipsis === "left")
-    return <LeftEllipsis copyValue={copyValue}>{children}</LeftEllipsis>;
+export const TooltipSpan = ({ children, ellipsis = "right", copyValue }: TooltipSpanProps) => {
+  if (ellipsis === "left") return <LeftEllipsis copyValue={copyValue}>{children}</LeftEllipsis>;
   if (ellipsis === "middle" && typeof children === "string")
     return <MiddleEllipsisString text={children} copyValue={copyValue} />;
   return <RightEllipsis copyValue={copyValue}>{children}</RightEllipsis>;

package/app/components/Tooltip/useCopyToClipboard.ts

@@ -7,9 +7,7 @@ interface UseCopyToClipboardResult {
   isCopied: boolean;
 }
 
-export function useCopyToClipboard(
-  copyValue: string | undefined,
-): UseCopyToClipboardResult {
+export function useCopyToClipboard(copyValue: string | undefined): UseCopyToClipboardResult {
   const [isCopied, setIsCopied] = useState(false);
   const timerRef = useRef<number | null>(null);
 

package/app/components/Tooltip/useMiddleEllipsis.ts

@@ -19,9 +19,7 @@ function computeTruncated(el: HTMLElement, text: string): string {
     const startLen = Math.ceil(mid / 2);
     const endLen = Math.floor(mid / 2);
     el.textContent =
-      text.slice(0, startLen) +
-      ELLIPSIS +
-      (endLen > 0 ? text.slice(text.length - endLen) : "");
+      text.slice(0, startLen) + ELLIPSIS + (endLen > 0 ? text.slice(text.length - endLen) : "");
 
     if (el.scrollWidth <= el.clientWidth) {
       lo = mid;
@@ -49,10 +47,7 @@ function computeTruncated(el: HTMLElement, text: string): string {
  * Observes the container width and returns a middle-truncated string.
  * Returns the original text if it fits within the container.
  */
-export function useMiddleEllipsis(
-  ref: RefObject<HTMLSpanElement | null>,
-  text: string,
-): string {
+export function useMiddleEllipsis(ref: RefObject<HTMLSpanElement | null>, text: string): string {
   const [displayed, setDisplayed] = useState(text);
 
   // useLayoutEffect runs before paint, so the user never sees the full text.

package/app/components/Tooltip/useOverflowDetection.ts

@@ -5,17 +5,14 @@ import { RefObject, useLayoutEffect, useState } from "react";
  * Uses ResizeObserver to recheck on any container size change
  * (column resize, flex layout shifts, not just window resize).
  */
-export function useOverflowDetection(
-  ref: RefObject<HTMLElement | null>,
-): boolean {
+export function useOverflowDetection(ref: RefObject<HTMLElement | null>): boolean {
   const [isTruncated, setIsTruncated] = useState(false);
 
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
 
-    const check = () =>
-      setIsTruncated(el.scrollWidth > el.offsetWidth);
+    const check = () => setIsTruncated(el.scrollWidth > el.offsetWidth);
 
     check();
 

package/app/components/UserMenu.tsx

@@ -26,9 +26,7 @@ export function UserMenu({ user, accountSettingsUrl }: UserMenuProps) {
               <div className="font-semibold">
                 {user.given_name} {user.family_name}
               </div>
-              <div className="text-[var(--color-text-secondary)]">
-                {user.email}
-              </div>
+              <div className="text-[var(--color-text-secondary)]">{user.email}</div>
             </div>
           </MenuHeader>
 
@@ -68,12 +66,7 @@ export function UserMenu({ user, accountSettingsUrl }: UserMenuProps) {
             </>
           )}
 
-          <MenuItem
-            id="account-settings"
-            icon={Settings}
-            href={accountSettingsUrl}
-            target="_blank"
-          >
+          <MenuItem id="account-settings" icon={Settings} href={accountSettingsUrl} target="_blank">
             Account Settings
           </MenuItem>
           <MenuItem id="logout" icon={LogOut} href="/logout">

package/app/entry.server.tsx

@@ -30,30 +30,20 @@ export default async function handleRequest(
   // This is ignored so we can keep it in the template for visibility.  Feel
   // free to delete this parameter in your app if you're not using it!
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  loadContext: AppLoadContext
+  loadContext: AppLoadContext,
 ) {
   await bootstrapPromise;
 
   return isbot(request.headers.get("user-agent") || "")
-    ? handleBotRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        reactRouterContext
-      )
-    : handleBrowserRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        reactRouterContext
-      );
+    ? handleBotRequest(request, responseStatusCode, responseHeaders, reactRouterContext)
+    : handleBrowserRequest(request, responseStatusCode, responseHeaders, reactRouterContext);
 }
 
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  reactRouterContext: EntryContext
+  reactRouterContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
@@ -71,7 +61,7 @@ function handleBotRequest(
             new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
-            })
+            }),
           );
 
           pipe(body);
@@ -88,7 +78,7 @@ function handleBotRequest(
             console.error(error);
           }
         },
-      }
+      },
     );
 
     setTimeout(abort, ABORT_DELAY);
@@ -99,7 +89,7 @@ function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  reactRouterContext: EntryContext
+  reactRouterContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
@@ -117,7 +107,7 @@ function handleBrowserRequest(
             new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
-            })
+            }),
           );
 
           pipe(body);
@@ -134,7 +124,7 @@ function handleBrowserRequest(
             console.error(error);
           }
         },
-      }
+      },
     );
 
     setTimeout(abort, ABORT_DELAY);

package/app/hooks/useSearchParam.ts

@@ -1,8 +1,6 @@
 import { useSearchParams } from "react-router";
 
-export const useSearchParam = (
-  paramName: string
-): [string, (value: string) => void] => {
+export const useSearchParam = (paramName: string): [string, (value: string) => void] => {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const paramValue = searchParams.get(paramName) ?? "";
@@ -18,7 +16,7 @@ export const useSearchParam = (
         }
         return newParams;
       },
-      { replace: true }
+      { replace: true },
     );
   };
 

package/app/lib/bootstrapPluginsCore.ts

@@ -1,9 +1,5 @@
 import type { CytarioPlugin, Logger, PluginContext } from "@cytario/plugin-api";
-import {
-  IncompatiblePluginError,
-  assertApiCompatible,
-  hostApiVersion,
-} from "@cytario/plugin-api";
+import { IncompatiblePluginError, assertApiCompatible, hostApiVersion } from "@cytario/plugin-api";
 import { formatRegistry } from "~/components/ImageViewer/state/formatRegistry";
 
 /**
@@ -37,10 +33,9 @@ export async function bootstrapPluginsCore(
           : err instanceof Error
             ? err.message
             : String(err);
-      logger.error(
-        `Skipping incompatible plugin "${plugin?.name ?? "<unknown>"}"`,
-        { error: message },
-      );
+      logger.error(`Skipping incompatible plugin "${plugin?.name ?? "<unknown>"}"`, {
+        error: message,
+      });
       continue;
     }
 

package/app/root.tsx

@@ -20,10 +20,7 @@ import {
 } from "react-router";
 
 import { UserProfile } from "./.server/auth/getUserInfo";
-import {
-  sessionContext,
-  sessionMiddleware,
-} from "./.server/auth/sessionMiddleware";
+import { sessionContext, sessionMiddleware } from "./.server/auth/sessionMiddleware";
 import { sessionStorage } from "./.server/auth/sessionStorage";
 import { AppHeader } from "./components/AppHeader";
 import { Section } from "./components/Container";
@@ -75,9 +72,7 @@ interface RootLoaderResponse {
   accountSettingsUrl?: string;
 }
 
-export const loader = async ({
-  context,
-}: LoaderFunctionArgs): Promise<RootLoaderResponse> => {
+export const loader = async ({ context }: LoaderFunctionArgs): Promise<RootLoaderResponse> => {
   const session = context.get(sessionContext);
   const user = session.get("user");
   const notification = session.get("notification");
@@ -158,10 +153,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <RouterProvider navigate={navigate} useHref={useHref}>
           {data?.user && <AppHeader />}
 
-          <main
-            id="main-content"
-            className="relative flex-1 min-h-0 outline-none"
-          >
+          <main id="main-content" className="relative flex-1 min-h-0 outline-none">
             {children}
           </main>
         </RouterProvider>
@@ -202,10 +194,7 @@ export function ErrorBoundary() {
       <div role="alert">
         <H1>{title}</H1>
         <p>{message}</p>
-        <a
-          href="/"
-          className="text-cytario-purple-500 underline mt-4 inline-block"
-        >
+        <a href="/" className="text-cytario-purple-500 underline mt-4 inline-block">
           Go home
         </a>
       </div>

package/app/routes/admin/assertAdminScope.ts

@@ -9,9 +9,7 @@ export function assertAdminScope(
   const scope = new URL(url).searchParams.get("scope");
   if (!scope) throw new Response("Missing scope", { status: 400 });
 
-  const isAdmin = adminScopes.some(
-    (s) => scope === s || scope.startsWith(s + "/"),
-  );
+  const isAdmin = adminScopes.some((s) => scope === s || scope.startsWith(s + "/"));
   if (!isAdmin) throw new Response("Not authorized", { status: 403 });
 
   return {

package/app/routes/admin/assertGroupPathsInScope.ts

@@ -1,7 +1,4 @@
-import {
-  flattenGroupsWithIds,
-  getGroupWithMembers,
-} from "~/.server/auth/keycloakAdmin";
+import { flattenGroupsWithIds, getGroupWithMembers } from "~/.server/auth/keycloakAdmin";
 
 /**
  * Validates that every groupPath belongs to the group tree of the given scope.
@@ -11,18 +8,13 @@ import {
  *
  * Throws 404 if the scope does not exist, 403 if any groupPath is out of scope.
  */
-export async function assertGroupPathsInScope(
-  groupPaths: string[],
-  scope: string,
-): Promise<void> {
+export async function assertGroupPathsInScope(groupPaths: string[], scope: string): Promise<void> {
   if (groupPaths.length === 0) return;
 
   const group = await getGroupWithMembers(scope);
   if (!group) throw new Response("Scope not found", { status: 404 });
 
-  const scopeGroupPaths = new Set(
-    flattenGroupsWithIds(group).map((g) => g.path),
-  );
+  const scopeGroupPaths = new Set(flattenGroupsWithIds(group).map((g) => g.path));
 
   for (const groupPath of groupPaths) {
     if (!scopeGroupPaths.has(groupPath)) {

package/app/routes/admin/assertGroupsInScope.ts

@@ -1,7 +1,4 @@
-import {
-  flattenGroupsWithIds,
-  getGroupWithMembers,
-} from "~/.server/auth/keycloakAdmin";
+import { flattenGroupsWithIds, getGroupWithMembers } from "~/.server/auth/keycloakAdmin";
 
 /**
  * Validates that every groupId belongs to the group tree of the given scope.
@@ -11,18 +8,13 @@ import {
  *
  * Throws 404 if the scope does not exist, 403 if any groupId is out of scope.
  */
-export async function assertGroupsInScope(
-  groupIds: string[],
-  scope: string,
-): Promise<void> {
+export async function assertGroupsInScope(groupIds: string[], scope: string): Promise<void> {
   if (groupIds.length === 0) return;
 
   const group = await getGroupWithMembers(scope);
   if (!group) throw new Response("Scope not found", { status: 404 });
 
-  const scopeGroupIds = new Set(
-    flattenGroupsWithIds(group).map((g) => g.id),
-  );
+  const scopeGroupIds = new Set(flattenGroupsWithIds(group).map((g) => g.id));
 
   for (const groupId of groupIds) {
     if (!scopeGroupIds.has(groupId)) {

package/app/routes/admin/assertUsersInScope.ts

@@ -1,12 +1,6 @@
-import {
-  collectAllUsers,
-  getGroupWithMembers,
-} from "~/.server/auth/keycloakAdmin";
+import { collectAllUsers, getGroupWithMembers } from "~/.server/auth/keycloakAdmin";
 
-export async function assertUsersInScope(
-  userIds: string[],
-  scope: string,
-): Promise<void> {
+export async function assertUsersInScope(userIds: string[], scope: string): Promise<void> {
   const group = await getGroupWithMembers(scope);
   if (!group) throw new Response("Scope not found", { status: 404 });
 

package/app/routes/admin/bulkInvite/bulkInvite.action.ts

@@ -8,10 +8,7 @@ import { getSession } from "~/.server/auth/getSession";
 import { inviteUser } from "~/.server/auth/keycloakAdmin/users";
 import { sessionStorage } from "~/.server/auth/sessionStorage";
 
-export const bulkInviteAction: ActionFunction = async ({
-  request,
-  context,
-}) => {
+export const bulkInviteAction: ActionFunction = async ({ request, context }) => {
   const { user } = context.get(authContext);
   const { adminUrl, scope } = assertAdminScope(request.url, user.adminScopes);
 
@@ -27,15 +24,7 @@ export const bulkInviteAction: ActionFunction = async ({
   await assertGroupPathsInScope([groupPath], scope);
 
   const results = await Promise.allSettled(
-    rows.map((row) =>
-      inviteUser(
-        row.email,
-        row.firstName,
-        row.lastName,
-        groupPath,
-        enabled,
-      ),
-    ),
+    rows.map((row) => inviteUser(row.email, row.firstName, row.lastName, groupPath, enabled)),
   );
 
   const succeeded = results.filter((r) => r.status === "fulfilled").length;

package/app/routes/admin/bulkInvite/bulkInvite.form.tsx

@@ -3,11 +3,7 @@ import { Plus, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useSubmit } from "react-router";
 
-import {
-  type BulkInviteRow,
-  bulkInviteRowSchema,
-  bulkInviteSchema,
-} from "./bulkInvite.schema";
+import { type BulkInviteRow, bulkInviteRowSchema, bulkInviteSchema } from "./bulkInvite.schema";
 import { ScopePill } from "~/components/Pills/ScopePill";
 
 interface BulkInviteFormProps {
@@ -44,37 +40,28 @@ export function BulkInviteForm({
   const [groupPath, setGroupPath] = useState(scope);
   const [enabled, setEnabled] = useState(true);
   const [formError, setFormError] = useState<string | null>(null);
-  const [rows, setRows] = useState<RowState[]>([
-    emptyRow(),
-    emptyRow(),
-    emptyRow(),
-  ]);
+  const [rows, setRows] = useState<RowState[]>([emptyRow(), emptyRow(), emptyRow()]);
 
   const tableRef = useRef<HTMLTableElement>(null);
 
-  const updateRow = useCallback(
-    (index: number, field: keyof BulkInviteRow, value: string) => {
-      setRows((prev) =>
-        prev.map((row, i) =>
-          i === index
-            ? {
-                ...row,
-                [field]: value,
-                errors: { ...row.errors, [field]: undefined },
-              }
-            : row,
-        ),
-      );
-    },
-    [],
-  );
-
-  const removeRow = useCallback((index: number) => {
+  const updateRow = useCallback((index: number, field: keyof BulkInviteRow, value: string) => {
     setRows((prev) =>
-      prev.length <= 1 ? prev : prev.filter((_, i) => i !== index),
+      prev.map((row, i) =>
+        i === index
+          ? {
+              ...row,
+              [field]: value,
+              errors: { ...row.errors, [field]: undefined },
+            }
+          : row,
+      ),
     );
   }, []);
 
+  const removeRow = useCallback((index: number) => {
+    setRows((prev) => (prev.length <= 1 ? prev : prev.filter((_, i) => i !== index)));
+  }, []);
+
   const addRow = useCallback(() => {
     setRows((prev) => [...prev, emptyRow()]);
     // Focus the email input of the new row after render
@@ -164,9 +151,7 @@ export function BulkInviteForm({
           />
         ) : (
           <Field label="Group Membership">
-            <p className="text-sm text-slate-400">
-              No groups available in this scope.
-            </p>
+            <p className="text-sm text-slate-400">No groups available in this scope.</p>
           </Field>
         )}
         <div className="flex items-center gap-2">
@@ -179,9 +164,7 @@ export function BulkInviteForm({
         </div>
       </div>
 
-      {formError && (
-        <p className="text-sm text-rose-600 mb-4">{formError}</p>
-      )}
+      {formError && <p className="text-sm text-rose-600 mb-4">{formError}</p>}
 
       <table ref={tableRef} className="w-full border-collapse">
         <thead>

package/app/routes/admin/createGroup/createGroup.action.ts

@@ -8,10 +8,7 @@ import { addUserToGroup, createGroup } from "~/.server/auth/keycloakAdmin";
 import { KeycloakAdminError } from "~/.server/auth/keycloakAdmin/client";
 import { sessionStorage } from "~/.server/auth/sessionStorage";
 
-export const createGroupAction: ActionFunction = async ({
-  request,
-  context,
-}) => {
+export const createGroupAction: ActionFunction = async ({ request, context }) => {
   const { user } = context.get(authContext);
   const { adminUrl, scope } = assertAdminScope(request.url, user.adminScopes);
 
@@ -25,10 +22,7 @@ export const createGroupAction: ActionFunction = async ({
   const session = await getSession(request);
 
   try {
-    const { path, adminsGroupId } = await createGroup(
-      scope,
-      result.data.name,
-    );
+    const { path, adminsGroupId } = await createGroup(scope, result.data.name);
 
     await addUserToGroup(user.sub, adminsGroupId);
 
@@ -45,8 +39,7 @@ export const createGroupAction: ActionFunction = async ({
   } catch (e) {
     console.error("Create group failed:", e);
 
-    const status =
-      e instanceof KeycloakAdminError ? e.status : undefined;
+    const status = e instanceof KeycloakAdminError ? e.status : undefined;
     const message =
       status === 409
         ? `A group named "${result.data.name}" already exists in this group.`

package/app/routes/admin/createGroup/createGroup.form.tsx

@@ -3,10 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { useSubmit } from "react-router";
 
-import {
-  type CreateGroupFormData,
-  createGroupSchema,
-} from "./createGroup.schema";
+import { type CreateGroupFormData, createGroupSchema } from "./createGroup.schema";
 import { ScopePill } from "~/components/Pills/ScopePill";
 
 interface CreateGroupFormProps {
@@ -35,11 +32,7 @@ export function CreateGroupForm({ scope }: CreateGroupFormProps) {
   };
 
   return (
-    <form
-      id="create-group-form"
-      onSubmit={handleSubmit(onSubmit)}
-      className="space-y-4"
-    >
+    <form id="create-group-form" onSubmit={handleSubmit(onSubmit)} className="space-y-4">
       <Fieldset>
         <Field label="Group name" error={errors.name}>
           <Controller

package/app/routes/admin/createGroup/createGroup.modal.tsx

@@ -20,11 +20,7 @@ export default function CreateGroupModal() {
         <Button onPress={() => navigate(-1)} variant="secondary">
           Cancel
         </Button>
-        <Button
-          type="submit"
-          form="create-group-form"
-          isDisabled={isSubmitting}
-        >
+        <Button type="submit" form="create-group-form" isDisabled={isSubmitting}>
           {isSubmitting ? "Creating..." : "Create Group"}
         </Button>
       </footer>

package/app/routes/admin/inviteUser/inviteUser.action.ts

@@ -8,10 +8,7 @@ import { getSession } from "~/.server/auth/getSession";
 import { inviteUser } from "~/.server/auth/keycloakAdmin/users";
 import { sessionStorage } from "~/.server/auth/sessionStorage";
 
-export const inviteUserAction: ActionFunction = async ({
-  request,
-  context,
-}) => {
+export const inviteUserAction: ActionFunction = async ({ request, context }) => {
   const { user } = context.get(authContext);
   const { adminUrl, scope } = assertAdminScope(request.url, user.adminScopes);
 

package/app/routes/admin/inviteUser/inviteUser.form.tsx

@@ -63,11 +63,7 @@ export function InviteUserForm({
   };
 
   return (
-    <form
-      id="invite-form"
-      onSubmit={handleSubmit(onSubmit)}
-      className="space-y-4"
-    >
+    <form id="invite-form" onSubmit={handleSubmit(onSubmit)} className="space-y-4">
       <Fieldset>
         <Field label="Email" error={errors.email}>
           <Controller
@@ -128,9 +124,7 @@ export function InviteUserForm({
           />
         ) : (
           <Field label="Group Membership">
-            <p className="text-sm text-slate-400">
-              No groups available in this scope.
-            </p>
+            <p className="text-sm text-slate-400">No groups available in this scope.</p>
           </Field>
         )}
         <div className="flex items-center gap-2">

package/app/routes/admin/inviteUser/inviteUser.loader.ts

@@ -2,10 +2,7 @@ import { type LoaderFunction } from "react-router";
 
 import { assertAdminScope } from "../assertAdminScope";
 import { authContext } from "~/.server/auth/authMiddleware";
-import {
-  getGroupWithMembers,
-  GroupWithMembers,
-} from "~/.server/auth/keycloakAdmin/groups";
+import { getGroupWithMembers, GroupWithMembers } from "~/.server/auth/keycloakAdmin/groups";
 
 function flattenGroupPaths(group: GroupWithMembers): string[] {
   return [group.path, ...group.subGroups.flatMap(flattenGroupPaths)];