@opengeni/react 6.7.0 → 6.8.0

package/src/app/components/rail/session-header.tsx

@@ -34,6 +34,7 @@ import {
   BellOffIcon,
   BotIcon,
   CalendarClockIcon,
+  CopyIcon,
   GaugeIcon,
   LinkIcon,
   LockIcon,
@@ -71,6 +72,13 @@ import {
   type SessionHeaderPart,
 } from "./session-header-overflow";
 import { Button } from "../../../ui/button";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "../../../ui/context-menu";
+import { copyTitle } from "../../lib/copy-link";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -405,7 +413,11 @@ export function SessionHeader({
                 />
               </button>
             ) : null}
-            <SessionTitleEditor session={session} rename={rename} />
+            <SessionTitleEditor
+              session={session}
+              rename={rename}
+              onCopyLink={() => void chatOps.copyLink(session)}
+            />
           </div>
           {/* Below lg (or when the full badge has no room) the lifecycle is a
               dot beside the title. */}
@@ -678,6 +690,10 @@ export function SessionHeader({
                 <DropdownMenuShortcut>{copyLinkKeys.label}</DropdownMenuShortcut>
               ) : null}
             </DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => void copyTitle(sessionDisplayTitle(session))}>
+              <CopyIcon />
+              Copy title
+            </DropdownMenuItem>
             {canShare ? (
               <DropdownMenuItem
                 onSelect={() => {
@@ -1065,9 +1081,14 @@ function useSessionPinToggle(
  * reload. The shared `useInlineRename` hook keeps this behaviour identical to
  * the rail row's rename.
  */
-function SessionTitleEditor(props: { session: Session; rename: InlineRename }) {
+function SessionTitleEditor(props: {
+  session: Session;
+  rename: InlineRename;
+  onCopyLink: () => void;
+}) {
   const display = sessionDisplayTitle(props.session);
   const rename = props.rename;
+  const afterMenuClose = useRef<(() => void) | null>(null);
 
   if (rename.editing) {
     return (
@@ -1101,16 +1122,51 @@ function SessionTitleEditor(props: { session: Session; rename: InlineRename }) {
 
   return (
     <div className="group/title flex min-w-0 items-center gap-0.5">
-      <button
-        type="button"
-        onClick={rename.startEditing}
-        title={`${display} · click to rename`}
-        dir="auto"
-        data-session-title-text=""
-        className="min-w-0 shrink truncate rounded-sm text-left text-[15px] font-semibold leading-6 tracking-[-0.01em] text-fg hover:text-fg focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring/40 pointer-coarse:min-h-11 pointer-coarse:px-2"
-      >
-        {display}
-      </button>
+      {/* Right-click (or long-press) the title to copy it or the chat's link. */}
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <button
+            type="button"
+            onClick={rename.startEditing}
+            title={`${display} · click to rename`}
+            dir="auto"
+            data-session-title-text=""
+            className="min-w-0 shrink truncate rounded-sm text-left text-[15px] font-semibold leading-6 tracking-[-0.01em] text-fg hover:text-fg focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring/40 pointer-coarse:min-h-11 pointer-coarse:px-2"
+          >
+            {display}
+          </button>
+        </ContextMenuTrigger>
+        <ContextMenuContent
+          className="min-w-40"
+          data-session-title-menu=""
+          onCloseAutoFocus={(event) => {
+            // Rename starts once the menu has handed focus back, so the
+            // field keeps it.
+            const action = afterMenuClose.current;
+            if (!action) return;
+            afterMenuClose.current = null;
+            event.preventDefault();
+            action();
+          }}
+        >
+          <ContextMenuItem onSelect={() => void copyTitle(display)}>
+            <CopyIcon className="size-4" />
+            Copy title
+          </ContextMenuItem>
+          <ContextMenuItem onSelect={props.onCopyLink}>
+            <LinkIcon className="size-4" />
+            Copy link
+          </ContextMenuItem>
+          <ContextMenuItem
+            onSelect={() => {
+              afterMenuClose.current = rename.startEditing;
+            }}
+          >
+            <PencilIcon className="size-4" />
+            Rename
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
       {/* The pencil earns its pixels only when relevant: hidden at rest and
           revealed on hover/focus. Touch screens rename by tapping the title
           (or "…" > Rename), so the title keeps the row's width. */}

package/src/app/components/rail/session-list.tsx

@@ -7,6 +7,7 @@ import { archiveActionLabel, requestSessionArchive } from "../../lib/archive-ses
 import { t } from "../../lib/console-text";
 import { useSessionListHintRefresh } from "../../lib/use-session-list-hint-refresh";
 import { useSiteOpenedListener } from "../../lib/site-opened";
+import { publishSiteSidebarBridge } from "../../lib/site-sidebar-bridge";
 import { useOpenGeni } from "../../../session-context";
 import { useChannels } from "../../../hooks/use-channels";
 import { useSessionLineage } from "../../../hooks/use-session-lineage";
@@ -2306,6 +2307,25 @@ export function SessionList() {
         : null,
     [context.client, onArchiveSite, onMoveSite, onPinSite],
   );
+  // The open Site's page offers the same Pin and Archive as its row.
+  const pinnedSiteIds = useMemo(
+    () =>
+      new Set(
+        (siteGroups ?? [])
+          .filter((group) => "pinned" in group && group.pinned === true)
+          .map((group) => group.siteId),
+      ),
+    [siteGroups],
+  );
+  useEffect(() => {
+    if (!siteRowActions) return;
+    return publishSiteSidebarBridge({
+      workspaceId: rail.workspaceId,
+      pinnedSiteIds,
+      pin: siteRowActions.pin,
+      archive: siteRowActions.archive,
+    });
+  }, [pinnedSiteIds, rail.workspaceId, siteRowActions]);
   const onDeleteSession = useCallback(async (): Promise<boolean> => {
     if (!sessionPendingDelete) return false;
     try {

package/src/app/components/rail/site-session-group-heading.test.tsx

@@ -0,0 +1,210 @@
+import { afterAll, afterEach, beforeAll, expect, test } from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+
+import type { AppContextValue } from "../../app-context";
+import type { AppHost } from "../../lib/app-host";
+import type { SiteRowActions } from "./site-session-group-heading";
+
+// The real menus: Radix reads the DOM when it loads, so everything that
+// renders is imported once the DOM exists.
+let React: typeof import("react");
+let createRoot: typeof import("react-dom/client").createRoot;
+let AppContext: typeof import("../../app-context").AppContext;
+let AppHostProvider: typeof import("../../lib/app-host").AppHostProvider;
+let heading: typeof import("./site-session-group-heading");
+let ownsDom = false;
+
+beforeAll(async () => {
+  ownsDom = !GlobalRegistrator.isRegistered;
+  if (ownsDom) GlobalRegistrator.register({ url: "https://app.example.test/" });
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  React = await import("react");
+  ({ createRoot } = await import("react-dom/client"));
+  ({ AppContext } = await import("../../app-context"));
+  ({ AppHostProvider } = await import("../../lib/app-host"));
+  heading = await import("./site-session-group-heading");
+});
+
+afterAll(() => {
+  if (ownsDom) GlobalRegistrator.unregister();
+});
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+const workspaceId = "11111111-1111-4111-8111-111111111111";
+const origin = { siteId: "22222222-2222-4222-8222-222222222222", title: "Opengeni usage" };
+const settle = () => new Promise((resolve) => setTimeout(resolve, 10));
+
+function TestLink({
+  to,
+  params,
+  search,
+  activeOptions: _activeOptions,
+  children,
+  ...props
+}: AnchorHTMLAttributes<HTMLAnchorElement> & {
+  activeOptions?: unknown;
+  to: string;
+  params?: Record<string, string>;
+  search?: Record<string, string>;
+  children?: ReactNode;
+}) {
+  let href = to;
+  for (const [key, value] of Object.entries(params ?? {})) href = href.replace(`$${key}`, value);
+  const query = new URLSearchParams(search).toString();
+  return (
+    <a {...props} href={query ? `${href}?${query}` : href}>
+      {children}
+    </a>
+  );
+}
+
+async function renderRow({
+  permissions,
+  publication,
+}: {
+  permissions: string[];
+  publication?: { status: string; url: string; hostname: string };
+}) {
+  const calls: string[] = [];
+  const actions: SiteRowActions = {
+    pin: (site, pinned) => void calls.push(`pin ${site.siteId} ${pinned}`),
+    archive: (site) => void calls.push(`archive ${site.siteId}`),
+    move: (site, from, to) => void calls.push(`move ${site.siteId} ${from} ${to}`),
+  };
+  const client = {
+    getSitePublicationLink: async () =>
+      publication
+        ? { siteId: origin.siteId, ...publication }
+        : { siteId: origin.siteId, hostname: "", url: "", status: "inactive" },
+  };
+  const appContext = {
+    client,
+    accessContext: { subjectId: "me", workspaceGrants: [{ workspaceId, permissions }] },
+  } as unknown as AppContextValue;
+  const host = {
+    navigation: {
+      Link: TestLink,
+      useNavigate: () => async () => {},
+      page: null,
+    },
+  } as unknown as AppHost;
+  // One value per render, as a provider above the row would hold them.
+  const contexts = { app: appContext, row: actions };
+  const container = document.createElement("div");
+  document.body.append(container);
+  const root = createRoot(container);
+  await React.act(async () =>
+    root.render(
+      <AppHostProvider host={host}>
+        <AppContext.Provider value={contexts.app}>
+          <heading.SiteRowActionsContext.Provider value={contexts.row}>
+            <heading.SiteSessionGroupHeading
+              origin={origin}
+              workspaceId={workspaceId}
+              expanded={false}
+              onToggle={() => undefined}
+              summary={{ kind: "idle" } as never}
+              count={0}
+              channelId={null}
+              channels={[{ id: "channel-1", name: "Bugfixes" } as never]}
+            />
+          </heading.SiteRowActionsContext.Provider>
+        </AppContext.Provider>
+      </AppHostProvider>,
+    ),
+  );
+  const openMenu = () =>
+    React.act(async () => {
+      container.querySelector(`[data-site-row="${origin.siteId}"] a`)!.dispatchEvent(
+        new MouseEvent("contextmenu", {
+          bubbles: true,
+          cancelable: true,
+          clientX: 10,
+          clientY: 10,
+        }),
+      );
+      await settle();
+    });
+  return {
+    calls,
+    openMenu,
+    items: () => [
+      ...document.querySelectorAll<HTMLElement>(
+        `[data-site-menu="${origin.siteId}"] [role='menuitem']`,
+      ),
+    ],
+    unmount: () => React.act(async () => root.unmount()),
+  };
+}
+
+test("a Site row's menu offers its own actions before the sidebar's Move", async () => {
+  const row = await renderRow({ permissions: ["artifacts:publish"] });
+  try {
+    await row.openMenu();
+    expect(row.items().map((item) => item.textContent)).toEqual([
+      "Copy link",
+      "Copy title",
+      "Pin",
+      "Duplicate",
+      "Site details",
+      "Archive",
+      "Default",
+      "Bugfixes",
+    ]);
+    const details = row.items().find((item) => item.textContent === "Site details")!;
+    expect(details.getAttribute("href")).toBe(
+      `/workspaces/${workspaceId}/artifacts/${origin.siteId}?tab=settings`,
+    );
+    await React.act(async () => {
+      row
+        .items()
+        .find((item) => item.textContent === "Pin")!
+        .click();
+      await settle();
+    });
+    await row.openMenu();
+    await React.act(async () => {
+      row
+        .items()
+        .find((item) => item.textContent === "Archive")!
+        .click();
+      await settle();
+    });
+    expect(row.calls).toEqual([`pin ${origin.siteId} true`, `archive ${origin.siteId}`]);
+  } finally {
+    await row.unmount();
+  }
+});
+
+test("people who can't publish get no Duplicate; a published Site opens on the web", async () => {
+  const row = await renderRow({
+    permissions: ["artifacts:read"],
+    publication: {
+      status: "active",
+      url: "https://usage-4k9x.sites.example/",
+      hostname: "usage-4k9x.sites.example",
+    },
+  });
+  try {
+    await row.openMenu();
+    expect(row.items().map((item) => item.textContent)).toEqual([
+      "Copy link",
+      "Copy title",
+      "Pin",
+      "Site details",
+      "Archive",
+      "Open published Site",
+      "Default",
+      "Bugfixes",
+    ]);
+    const open = row.items().find((item) => item.textContent === "Open published Site")!;
+    expect(open.getAttribute("href")).toBe("https://usage-4k9x.sites.example/");
+    expect(open.getAttribute("target")).toBe("_blank");
+  } finally {
+    await row.unmount();
+  }
+});

package/src/app/components/rail/site-session-group-heading.tsx

@@ -3,11 +3,16 @@ import { Link } from "../../lib/navigation";
 import {
   ArchiveIcon,
   ChevronRightIcon,
+  CopyIcon,
+  CopyPlusIcon,
   EllipsisIcon,
   FolderIcon,
+  InfoIcon,
+  LinkIcon,
   PanelsTopLeftIcon,
   PinIcon,
 } from "lucide-react";
+import { OpenPublishedSiteItem, useSiteActions, type SiteActions } from "../artifacts/site-actions";
 import { RailTrailingMetadata } from "./session-row-content";
 import {
   RAIL_ROW_OVERFLOW_TRIGGER_CLASS,
@@ -109,6 +114,9 @@ export function SiteSessionGroupHeading({
   channels?: readonly Channel[] | undefined;
 }) {
   const actions = useContext(SiteRowActionsContext);
+  // Held by the row, not its menu, so a duplicate still running when the
+  // menu closes stays busy the next time it opens.
+  const site = useSiteActions(workspaceId, origin);
   const move = actions?.move;
   // As for a chat row: listed only when there is a project to choose.
   const moveTargets =
@@ -229,36 +237,16 @@ export function SiteSessionGroupHeading({
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="min-w-40" data-site-menu={origin.siteId}>
-              <DropdownMenuItem onSelect={() => actions.pin(origin, !pinned)}>
-                <PinIcon className={pinned ? "size-4 fill-current" : "size-4"} />
-                {pinLabel}
-              </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => actions.archive(origin)}>
-                <ArchiveIcon className="size-4" />
-                Archive
-              </DropdownMenuItem>
-              {canMove ? (
-                <>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuLabel>Move to project</DropdownMenuLabel>
-                  {moveTargets.map((channel) => {
-                    const current = (channelId ?? null) === channel.id;
-                    return (
-                      <DropdownMenuItem
-                        key={channel.id ?? "default"}
-                        aria-current={current ? "true" : undefined}
-                        onSelect={() => {
-                          if (!current) move?.(origin, channelId ?? null, channel.id);
-                        }}
-                      >
-                        <FolderIcon aria-hidden="true" />
-                        <span className="min-w-0 flex-1 truncate">{channel.name}</span>
-                        <DropdownMenuCheck checked={current} />
-                      </DropdownMenuItem>
-                    );
-                  })}
-                </>
-              ) : null}
+              <SiteRowMenuItems
+                menu="dropdown"
+                origin={origin}
+                site={site}
+                workspaceId={workspaceId}
+                pinned={pinned}
+                actions={actions}
+                moveTargets={moveTargets}
+                channelId={channelId}
+              />
             </DropdownMenuContent>
           </DropdownMenu>
         </>
@@ -270,37 +258,108 @@ export function SiteSessionGroupHeading({
     <ContextMenu>
       <ContextMenuTrigger asChild>{row}</ContextMenuTrigger>
       <ContextMenuContent className="min-w-40" data-site-menu={origin.siteId}>
-        <ContextMenuItem onSelect={() => actions.pin(origin, !pinned)}>
-          <PinIcon className={pinned ? "size-4 fill-current" : "size-4"} />
-          {pinLabel}
-        </ContextMenuItem>
-        <ContextMenuItem onSelect={() => actions.archive(origin)}>
-          <ArchiveIcon className="size-4" />
-          Archive
-        </ContextMenuItem>
-        {canMove ? (
-          <>
-            <ContextMenuSeparator />
-            <ContextMenuLabel>Move to project</ContextMenuLabel>
-            {moveTargets.map((channel) => {
-              const current = (channelId ?? null) === channel.id;
-              return (
-                <ContextMenuItem
-                  key={channel.id ?? "default"}
-                  aria-current={current ? "true" : undefined}
-                  onSelect={() => {
-                    if (!current) move?.(origin, channelId ?? null, channel.id);
-                  }}
-                >
-                  <FolderIcon aria-hidden="true" />
-                  <span className="min-w-0 flex-1 truncate">{channel.name}</span>
-                  <DropdownMenuCheck checked={current} />
-                </ContextMenuItem>
-              );
-            })}
-          </>
-        ) : null}
+        <SiteRowMenuItems
+          menu="context"
+          origin={origin}
+          site={site}
+          workspaceId={workspaceId}
+          pinned={pinned}
+          actions={actions}
+          moveTargets={moveTargets}
+          channelId={channelId}
+        />
       </ContextMenuContent>
     </ContextMenu>
   );
 }
+
+/**
+ * A Site row's menu, the same for right-click and "…": what a chat row
+ * offers that fits a Site (Copy link, Copy title, Pin, Archive, Move to
+ * project), plus the Site's own: Duplicate, Site details and, once known to
+ * be on the web, Open published Site (last, so nothing moves when it shows). Renaming has no place here: a Site is
+ * named by what it publishes.
+ */
+function SiteRowMenuItems({
+  menu,
+  origin,
+  site,
+  workspaceId,
+  pinned,
+  actions,
+  moveTargets,
+  channelId,
+}: {
+  menu: "context" | "dropdown";
+  origin: SessionSiteOrigin;
+  site: SiteActions;
+  workspaceId: string;
+  pinned: boolean;
+  actions: SiteRowActions;
+  moveTargets: readonly { id: string | null; name: string }[];
+  channelId: string | null | undefined;
+}) {
+  const Item = (menu === "context" ? ContextMenuItem : DropdownMenuItem) as typeof DropdownMenuItem;
+  const Separator = menu === "context" ? ContextMenuSeparator : DropdownMenuSeparator;
+  const Label = menu === "context" ? ContextMenuLabel : DropdownMenuLabel;
+  return (
+    <>
+      <Item data-site-action="copy-link" onSelect={site.copyLink}>
+        <LinkIcon className="size-4" />
+        Copy link
+      </Item>
+      <Item data-site-action="copy-title" onSelect={site.copyTitle}>
+        <CopyIcon className="size-4" />
+        Copy title
+      </Item>
+      <Item onSelect={() => actions.pin(origin, !pinned)}>
+        <PinIcon className={pinned ? "size-4 fill-current" : "size-4"} />
+        {pinned ? "Unpin" : "Pin"}
+      </Item>
+      {site.duplicate ? (
+        <Item
+          data-site-action="duplicate"
+          disabled={site.duplicate.busy}
+          onSelect={site.duplicate.run}
+        >
+          <CopyPlusIcon className="size-4" />
+          {site.duplicate.busy ? "Duplicating…" : "Duplicate"}
+        </Item>
+      ) : null}
+      <Item asChild data-site-action="details">
+        <Link {...site.details}>
+          <InfoIcon className="size-4" />
+          Site details
+        </Link>
+      </Item>
+      <Item onSelect={() => actions.archive(origin)}>
+        <ArchiveIcon className="size-4" />
+        Archive
+      </Item>
+      {/* Last, as it shows once the address has loaded: nothing above moves. */}
+      <OpenPublishedSiteItem item={Item} workspaceId={workspaceId} siteId={origin.siteId} />
+      {moveTargets.length > 0 ? (
+        <>
+          <Separator />
+          <Label>Move to project</Label>
+          {moveTargets.map((channel) => {
+            const current = (channelId ?? null) === channel.id;
+            return (
+              <Item
+                key={channel.id ?? "default"}
+                aria-current={current ? "true" : undefined}
+                onSelect={() => {
+                  if (!current) actions.move?.(origin, channelId ?? null, channel.id);
+                }}
+              >
+                <FolderIcon aria-hidden="true" />
+                <span className="min-w-0 flex-1 truncate">{channel.name}</span>
+                <DropdownMenuCheck checked={current} />
+              </Item>
+            );
+          })}
+        </>
+      ) : null}
+    </>
+  );
+}

package/src/app/components/session/failed-session-actions.test.tsx

@@ -471,6 +471,10 @@ test("all draft, delivery, work, permission and deliberate pause guards hide Ret
     "policy",
     "personal_decision",
     "personal_loading",
+    // The open chat's connected accounts failed to load, were denied, or are reconnecting.
+    "accounts",
+    "accounts_denied",
+    "updating",
   ] as const) {
     await act(async () =>
       root!.render(<FailedSessionActions {...actions} composerBlocker={composerBlocker} />),