@shipfox/client-triggers 12.0.2 → 13.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-triggers",
   "license": "MIT",
-  "version": "12.0.2",
+  "version": "13.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -28,10 +28,11 @@
     "@swc/helpers": "^0.5.17",
     "@shipfox/api-triggers-dto": "9.0.2",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-shell": "12.0.2",
-    "@shipfox/client-ui": "6.0.2",
-    "@shipfox/integration-icons": "0.2.2",
-    "@shipfox/react-ui": "0.3.7"
+    "@shipfox/client-projects": "13.0.0",
+    "@shipfox/client-shell": "13.0.0",
+    "@shipfox/client-ui": "13.0.0",
+    "@shipfox/integration-icons": "0.2.3",
+    "@shipfox/react-ui": "0.4.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/events-list-states.tsx

@@ -25,7 +25,7 @@ export function EventsListSkeleton() {
   );
 }
 
-export function EventsListEmpty({workspaceId}: {workspaceId: string}) {
+export function EventsListEmpty({workspaceSlug}: {workspaceSlug?: string | undefined}) {
   return (
     <div className="p-16">
       <EmptyState
@@ -33,11 +33,13 @@ export function EventsListEmpty({workspaceId}: {workspaceId: string}) {
         title="No events yet"
         description="Events appear here once a connected integration delivers one or you fire a trigger."
         action={
-          <Button asChild size="sm" variant="secondary">
-            <Link to="/workspaces/$wid/settings/integrations" params={{wid: workspaceId}}>
-              Configure integrations
-            </Link>
-          </Button>
+          workspaceSlug ? (
+            <Button asChild size="sm" variant="secondary">
+              <Link to="/w/$workspaceSlug/settings/integrations" params={{workspaceSlug}}>
+                Configure integrations
+              </Link>
+            </Button>
+          ) : undefined
         }
       />
     </div>

package/src/components/events-list.stories.tsx

@@ -90,12 +90,12 @@ const meta = {
   parameters: {layout: 'padded'},
   decorators: [withWidth],
   args: {
+    workspaceSlug: 'acme',
     events: SAMPLE_EVENTS,
     query: makeQuery(),
     facets: SAMPLE_FACETS,
     filters: {},
     onFiltersChange: () => undefined,
-    workspaceId: 'ws-demo',
     hasNextPage: false,
     isFetchingNextPage: false,
     onLoadMore: () => undefined,

package/src/components/events-list.test.tsx

@@ -40,7 +40,6 @@ function makeProps(overrides: Partial<EventsListProps> = {}): EventsListProps {
     facets: {sources: [{value: 'github_acme', count: 1}], events: [{value: 'push', count: 1}]},
     filters: {},
     onFiltersChange: vi.fn(),
-    workspaceId: 'ws-1',
     hasNextPage: false,
     isFetchingNextPage: false,
     onLoadMore: vi.fn(),

package/src/components/events-list.tsx

@@ -18,7 +18,7 @@ export function EventsList({
   facets,
   filters,
   onFiltersChange,
-  workspaceId,
+  workspaceSlug,
   hasNextPage,
   isFetchingNextPage,
   onLoadMore,
@@ -53,7 +53,7 @@ export function EventsList({
       {query.isPending ? <EventsListSkeleton /> : null}
       {!query.isPending ? <QueryLoadError query={query} subject="events" icon="pulseLine" /> : null}
       {!query.isPending && refreshFailed ? <EventsListStaleError query={query} /> : null}
-      {showEmptyState && !activeFilters ? <EventsListEmpty workspaceId={workspaceId} /> : null}
+      {showEmptyState && !activeFilters ? <EventsListEmpty workspaceSlug={workspaceSlug} /> : null}
       {showEmptyState && activeFilters ? <EventsListNoMatches onClear={clearFilters} /> : null}
 
       {events.length > 0 ? (

package/src/components/trigger-event-detail.stories.tsx

@@ -1,7 +1,9 @@
 import {argosScreenshot} from '@argos-ci/storybook/vitest';
 import type {TriggerEventDetailResponseDto} from '@shipfox/api-triggers-dto';
+import {projectsQueryKeys} from '@shipfox/client-projects';
 import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
 import type {Decorator, Meta, StoryObj} from '@storybook/react';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {
   createMemoryHistory,
   createRootRoute,
@@ -22,16 +24,31 @@ function minutesAgo(minutes: number): string {
   return new Date(Date.now() - minutes * 60_000).toISOString();
 }
 
+function createStoryQueryClient() {
+  const queryClient = new QueryClient({
+    defaultOptions: {queries: {staleTime: Number.POSITIVE_INFINITY, retry: false}},
+  });
+  queryClient.setQueryData(projectsQueryKeys.list(WORKSPACE_ID), {
+    pages: [{projects: [{id: PROJECT_ID, slug: 'checkout-api'}], nextCursor: null}],
+    pageParams: [undefined],
+  });
+  return queryClient;
+}
+
 const withRouter: Decorator = (Story) => {
+  const queryClient = createStoryQueryClient();
+
   function StoryRoute() {
     return (
-      <RelativeTimeProvider>
-        <div className="min-h-screen bg-background-subtle-base p-24 [--app-content-h:calc(100dvh_-_96px)]">
-          <div className="@container ml-auto w-[860px]">
-            <Story />
+      <QueryClientProvider client={queryClient}>
+        <RelativeTimeProvider>
+          <div className="min-h-screen bg-background-subtle-base p-24 [--app-content-h:calc(100dvh_-_96px)]">
+            <div className="@container ml-auto w-[860px]">
+              <Story />
+            </div>
           </div>
-        </div>
-      </RelativeTimeProvider>
+        </RelativeTimeProvider>
+      </QueryClientProvider>
     );
   }
 
@@ -43,7 +60,7 @@ const withRouter: Decorator = (Story) => {
   });
   const runRoute = createRoute({
     getParentRoute: () => rootRoute,
-    path: '/workspaces/$wid/projects/$pid/runs/$workflowRunId',
+    path: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
     component: StoryRoute,
   });
   const router = createRouter({
@@ -146,6 +163,7 @@ const meta = {
   decorators: [withRouter],
   args: {
     workspaceId: WORKSPACE_ID,
+    workspaceSlug: 'acme',
     event: routedEvent,
     onBack: () => undefined,
   },

package/src/components/trigger-event-detail.test.tsx

@@ -1,5 +1,7 @@
 import type {TriggerEventDetailResponseDto} from '@shipfox/api-triggers-dto';
+import {projectsQueryKeys} from '@shipfox/client-projects';
 import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {fireEvent, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type {ReactElement} from 'react';
@@ -60,17 +62,39 @@ function makeEvent(
   };
 }
 
-function renderWithProviders(ui: ReactElement) {
-  return render(<RelativeTimeProvider>{ui}</RelativeTimeProvider>);
+function renderWithProviders(
+  ui: ReactElement,
+  {includeListProject = true, includeDetailProject = false} = {},
+) {
+  const queryClient = new QueryClient({
+    defaultOptions: {queries: {retry: false, staleTime: Infinity}},
+  });
+  const project = {id: PROJECT_ID, slug: 'checkout-api'};
+  queryClient.setQueryData(projectsQueryKeys.list(WORKSPACE_ID), {
+    pages: [{projects: includeListProject ? [project] : [], nextCursor: null}],
+    pageParams: [undefined],
+  });
+  if (includeDetailProject) queryClient.setQueryData(projectsQueryKeys.detail(PROJECT_ID), project);
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <RelativeTimeProvider>{ui}</RelativeTimeProvider>
+    </QueryClientProvider>,
+  );
 }
 
-function renderDetailView(event: TriggerEventDetailResponseDto, onBack = vi.fn()) {
+function renderDetailView(
+  event: TriggerEventDetailResponseDto,
+  onBack = vi.fn(),
+  options?: {includeListProject?: boolean; includeDetailProject?: boolean},
+) {
   return renderWithProviders(
     <TriggerEventDetailView
       workspaceId={WORKSPACE_ID}
+      workspaceSlug="acme"
       event={toTriggerEventDetail(event)}
       onBack={onBack}
     />,
+    options,
   );
 }
 
@@ -82,7 +106,7 @@ describe('TriggerEventDetailView', () => {
     expect(screen.getByText('Deploy production')).toBeInTheDocument();
     expect(screen.getByRole('link', {name: DEPLOY_RUN_LINK_NAME})).toHaveAttribute(
       'href',
-      `/workspaces/${WORKSPACE_ID}/projects/${PROJECT_ID}/runs/${RUN_ID}`,
+      `/w/acme/p/checkout-api/runs/${RUN_ID}`,
     );
     expect(screen.getByText(PAYLOAD_REF_LINE)).toBeInTheDocument();
   });
@@ -157,6 +181,18 @@ describe('TriggerEventDetailView', () => {
     expect(screen.queryByRole('link')).not.toBeInTheDocument();
   });
 
+  test('resolves a matched project from its detail query when it is not in the list page', async () => {
+    renderDetailView(makeEvent(), vi.fn(), {
+      includeListProject: false,
+      includeDetailProject: true,
+    });
+
+    expect(await screen.findByRole('link', {name: DEPLOY_RUN_LINK_NAME})).toHaveAttribute(
+      'href',
+      `/w/acme/p/checkout-api/runs/${RUN_ID}`,
+    );
+  });
+
   test('calls onBack from the focused detail panel control', async () => {
     const onBack = vi.fn();
     renderDetailView(makeEvent(), onBack);
@@ -179,9 +215,7 @@ describe('TriggerEventDetail', () => {
       refetch: vi.fn(),
     } as unknown as ReturnType<typeof useTriggerEventQuery>);
 
-    renderWithProviders(
-      <TriggerEventDetail workspaceId={WORKSPACE_ID} eventId={EVENT_ID} onBack={vi.fn()} />,
-    );
+    renderWithProviders(<TriggerEventDetail eventId={EVENT_ID} onBack={vi.fn()} />);
 
     expect(await screen.findByRole('button', {name: 'Back to events'})).toBeInTheDocument();
   });
@@ -194,9 +228,7 @@ describe('TriggerEventDetail', () => {
       refetch,
     } as unknown as ReturnType<typeof useTriggerEventQuery>);
 
-    renderWithProviders(
-      <TriggerEventDetail workspaceId={WORKSPACE_ID} eventId={EVENT_ID} onBack={vi.fn()} />,
-    );
+    renderWithProviders(<TriggerEventDetail eventId={EVENT_ID} onBack={vi.fn()} />);
 
     fireEvent.click(await screen.findByRole('button', {name: 'Retry'}));
 

package/src/components/trigger-event-detail.tsx

@@ -1,3 +1,4 @@
+import {useProjectQuery, useProjectsInfiniteQuery} from '@shipfox/client-projects';
 import {Badge} from '@shipfox/react-ui/badge';
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
@@ -34,17 +35,30 @@ const DETAIL_RAIL_CLASS =
   '@min-[820px]:sticky @min-[820px]:top-16 @min-[820px]:max-h-[calc(var(--app-content-h,100dvh_-_96px)_-_32px)] @min-[820px]:min-h-[min(320px,calc(var(--app-content-h,100dvh_-_96px)_-_32px))]';
 
 export interface TriggerEventDetailProps {
-  workspaceId: string;
+  workspaceId?: string | undefined;
+  workspaceSlug?: string | undefined;
   eventId?: string | undefined;
   onBack: () => void;
 }
 
-export function TriggerEventDetail({workspaceId, eventId, onBack}: TriggerEventDetailProps) {
+export function TriggerEventDetail({
+  workspaceId,
+  workspaceSlug,
+  eventId,
+  onBack,
+}: TriggerEventDetailProps) {
   const query = useTriggerEventQuery(eventId);
 
   if (!eventId) return <TriggerEventDetailPlaceholder />;
   if (query.data) {
-    return <TriggerEventDetailView workspaceId={workspaceId} event={query.data} onBack={onBack} />;
+    return (
+      <TriggerEventDetailView
+        workspaceId={workspaceId}
+        workspaceSlug={workspaceSlug}
+        event={query.data}
+        onBack={onBack}
+      />
+    );
   }
   if (query.isError)
     return <TriggerEventDetailError onBack={onBack} onRetry={() => query.refetch()} />;
@@ -53,10 +67,12 @@ export function TriggerEventDetail({workspaceId, eventId, onBack}: TriggerEventD
 
 export function TriggerEventDetailView({
   workspaceId,
+  workspaceSlug,
   event,
   onBack,
 }: {
-  workspaceId: string;
+  workspaceId?: string | undefined;
+  workspaceSlug?: string | undefined;
   event: TriggerEventDetailModel;
   onBack: () => void;
 }) {
@@ -124,7 +140,7 @@ export function TriggerEventDetailView({
         key={event.id}
         className="flex min-h-0 flex-1 flex-col gap-20 overflow-y-auto p-16 scrollbar"
       >
-        <EventRuns workspaceId={workspaceId} event={event} />
+        <EventRuns workspaceId={workspaceId} workspaceSlug={workspaceSlug} event={event} />
         <EventPayload payload={formattedPayload} />
       </div>
     </aside>
@@ -207,7 +223,15 @@ function TriggerEventDetailError({onBack, onRetry}: {onBack: () => void; onRetry
   );
 }
 
-function EventRuns({workspaceId, event}: {workspaceId: string; event: TriggerEventDetailModel}) {
+function EventRuns({
+  workspaceId,
+  workspaceSlug,
+  event,
+}: {
+  workspaceId?: string | undefined;
+  workspaceSlug?: string | undefined;
+  event: TriggerEventDetailModel;
+}) {
   if (event.decisions.length === 0) {
     if (event.outcome === 'discarded') {
       return (
@@ -219,6 +243,55 @@ function EventRuns({workspaceId, event}: {workspaceId: string; event: TriggerEve
     return null;
   }
 
+  if (!workspaceId) {
+    return <EventRunsList workspaceSlug={workspaceSlug} projectSlugs={new Map()} event={event} />;
+  }
+
+  return (
+    <EventRunsWithProjects workspaceId={workspaceId} workspaceSlug={workspaceSlug} event={event} />
+  );
+}
+
+function EventRunsWithProjects({
+  workspaceId,
+  workspaceSlug,
+  event,
+}: {
+  workspaceId: string;
+  workspaceSlug?: string | undefined;
+  event: TriggerEventDetailModel;
+}) {
+  const projectsQuery = useProjectsInfiniteQuery(workspaceId);
+  const projectSlugs = useMemo(
+    () =>
+      new Map(
+        projectsQuery.data?.pages
+          .flatMap((page) => page.projects)
+          .map((project) => [project.id, project.slug] as const),
+      ),
+    [projectsQuery.data],
+  );
+  return (
+    <EventRunsList
+      workspaceSlug={workspaceSlug}
+      projectSlugs={projectSlugs}
+      projectDetailLookupEnabled={!projectsQuery.isPending}
+      event={event}
+    />
+  );
+}
+
+function EventRunsList({
+  workspaceSlug,
+  projectSlugs,
+  projectDetailLookupEnabled = false,
+  event,
+}: {
+  workspaceSlug?: string | undefined;
+  projectSlugs: ReadonlyMap<string, string>;
+  projectDetailLookupEnabled?: boolean;
+  event: TriggerEventDetailModel;
+}) {
   return (
     <section aria-labelledby="trigger-event-runs-heading" className="flex flex-col gap-6">
       <Text id="trigger-event-runs-heading" size="sm" bold>
@@ -226,7 +299,14 @@ function EventRuns({workspaceId, event}: {workspaceId: string; event: TriggerEve
       </Text>
       <ul className="-mx-8 flex flex-col gap-1">
         {event.decisions.map((decision) => (
-          <DecisionRow key={decision.id} workspaceId={workspaceId} decision={decision} />
+          <DecisionRow
+            key={decision.id}
+            workspaceSlug={workspaceSlug}
+            projectId={decision.projectId ?? undefined}
+            projectSlug={decision.projectId ? projectSlugs.get(decision.projectId) : undefined}
+            projectDetailLookupEnabled={projectDetailLookupEnabled}
+            decision={decision}
+          />
         ))}
       </ul>
     </section>
@@ -234,12 +314,25 @@ function EventRuns({workspaceId, event}: {workspaceId: string; event: TriggerEve
 }
 
 function DecisionRow({
-  workspaceId,
+  projectId,
+  projectSlug,
+  workspaceSlug,
+  projectDetailLookupEnabled,
   decision,
 }: {
-  workspaceId: string;
+  projectId?: string | undefined;
+  projectSlug?: string | undefined;
+  workspaceSlug?: string | undefined;
+  projectDetailLookupEnabled: boolean;
   decision: TriggerEventMatchedWorkflowResult;
 }) {
+  const canRenderRunLink =
+    decision.decision === 'triggered' && Boolean(decision.runId && decision.runName);
+  const projectQuery = useProjectQuery(
+    canRenderRunLink && projectDetailLookupEnabled && !projectSlug ? projectId : undefined,
+  );
+  const resolvedProjectSlug = projectSlug ?? projectQuery.data?.slug;
+
   if (decision.decision !== 'triggered' || !decision.runId || !decision.runName) {
     return (
       <li className="flex min-w-0 items-start gap-8 rounded-6 px-8 py-6">
@@ -266,27 +359,43 @@ function DecisionRow({
     );
   }
 
+  const row = (
+    <>
+      <Icon
+        name="cornerDownRightLine"
+        className="mt-3 size-14 shrink-0 text-foreground-neutral-muted"
+        aria-hidden="true"
+      />
+      <span className="flex min-w-0 flex-col gap-1">
+        <Text as="span" size="sm" className="min-w-0 truncate text-foreground-neutral-base">
+          {decision.subscriptionName}
+        </Text>
+        <Code as="span" variant="label" className="truncate text-foreground-neutral-muted">
+          {decision.runName}
+        </Code>
+      </span>
+    </>
+  );
+  const rowClassName =
+    'flex min-w-0 items-start gap-8 rounded-6 px-8 py-6 hover:bg-background-components-hover focus-visible:outline-none focus-visible:shadow-button-neutral-focus';
+
   return (
     <li>
-      <Link
-        to="/workspaces/$wid/projects/$pid/runs/$workflowRunId"
-        params={{wid: workspaceId, pid: decision.projectId ?? '', workflowRunId: decision.runId}}
-        className="flex min-w-0 items-start gap-8 rounded-6 px-8 py-6 transition-colors hover:bg-background-components-hover focus-visible:shadow-border-interactive-with-active focus-visible:outline-none"
-      >
-        <Icon
-          name="cornerDownRightLine"
-          className="mt-3 size-14 shrink-0 text-foreground-neutral-muted"
-          aria-hidden="true"
-        />
-        <span className="flex min-w-0 flex-col gap-1">
-          <Text as="span" size="sm" className="min-w-0 truncate text-foreground-neutral-base">
-            {decision.subscriptionName}
-          </Text>
-          <Code as="span" variant="label" className="truncate text-foreground-neutral-muted">
-            {decision.runName}
-          </Code>
-        </span>
-      </Link>
+      {workspaceSlug && resolvedProjectSlug ? (
+        <Link
+          to="/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId"
+          params={{
+            workspaceSlug,
+            projectSlug: resolvedProjectSlug,
+            workflowRunId: decision.runId,
+          }}
+          className={rowClassName}
+        >
+          {row}
+        </Link>
+      ) : (
+        <div className={rowClassName}>{row}</div>
+      )}
     </li>
   );
 }

package/src/components/types.ts

@@ -13,7 +13,7 @@ export interface EventsListProps {
   facets: TriggerEventFacets | undefined;
   filters: TriggerEventFilters;
   onFiltersChange: (patch: Partial<TriggerEventFilters>) => void;
-  workspaceId: string;
+  workspaceSlug?: string | undefined;
   hasNextPage: boolean;
   isFetchingNextPage: boolean;
   onLoadMore: () => void;

package/src/feature.ts

@@ -8,7 +8,7 @@ export const triggersFeature = defineClientFeature({
   id: 'shipfox.triggers',
   routes: [
     {
-      path: '/workspaces/$wid/settings/events',
+      path: '/w/$workspaceSlug/settings/events',
       parent: 'workspaceSettings',
       impl: '@shipfox/client-triggers/routes/events-settings',
     },

package/src/pages/events-page.tsx

@@ -12,6 +12,7 @@ import {
 
 export interface EventsPageProps {
   workspaceId: string;
+  workspaceSlug?: string | undefined;
   filters: TriggerEventFilters;
   onFiltersChange: (patch: Partial<TriggerEventFilters>) => void;
 }
@@ -20,7 +21,12 @@ export interface EventsPageProps {
  * Workspace-scoped Events list. Router-agnostic: filters and their setter come in as props
  * (the settings wrapper binds them to the URL), so a story can drive it with local state.
  */
-export function EventsPage({workspaceId, filters, onFiltersChange}: EventsPageProps) {
+export function EventsPage({
+  workspaceId,
+  workspaceSlug,
+  filters,
+  onFiltersChange,
+}: EventsPageProps) {
   const query = useTriggerEventsInfiniteQuery(workspaceId, filters);
   const facetsQuery = useTriggerEventFacetsQuery(workspaceId);
   const [selectedEventId, setSelectedEventId] = useState<string | undefined>();
@@ -59,7 +65,7 @@ export function EventsPage({workspaceId, filters, onFiltersChange}: EventsPagePr
               facets={facetsQuery.data}
               filters={filters}
               onFiltersChange={onFiltersChange}
-              workspaceId={workspaceId}
+              workspaceSlug={workspaceSlug}
               hasNextPage={query.hasNextPage}
               isFetchingNextPage={query.isFetchingNextPage}
               onLoadMore={() => {
@@ -71,6 +77,7 @@ export function EventsPage({workspaceId, filters, onFiltersChange}: EventsPagePr
           </div>
           <TriggerEventDetail
             workspaceId={workspaceId}
+            workspaceSlug={workspaceSlug}
             eventId={selectedEventId}
             onBack={() => setSelectedEventId(undefined)}
           />

package/src/routes/events-settings.tsx

@@ -4,7 +4,7 @@ import type {TriggerEventFilters} from '#core/trigger-event.js';
 import {EventsPage} from '#pages/events-page.js';
 import {type TriggerEventsSearch, validateTriggerEventsSearch} from '#search.js';
 
-const routeApi = getRouteApi('/workspaces/$wid/settings/events');
+const routeApi = getRouteApi('/w/$workspaceSlug/settings/events');
 
 // Wrapped (not just re-typed) so the search validator's own type is portable outside this
 // package: TanStack Router's `const` generics capture the exact declared function, and a
@@ -24,7 +24,12 @@ export default defineRoute({
       void navigate({search: {...search, ...patch}, replace: true});
     };
     return (
-      <EventsPage workspaceId={workspace.id} filters={search} onFiltersChange={onFiltersChange} />
+      <EventsPage
+        workspaceId={workspace.id}
+        workspaceSlug={workspace.slug}
+        filters={search}
+        onFiltersChange={onFiltersChange}
+      />
     );
   },
 });