github-issue-tower-defence-management 1.113.0 → 1.114.1

package/src/adapter/entry-points/console/ui/src/features/console/components/content/ConsoleMarkdownContent.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
   type ImageProxyUrlBuilder,
   rewriteGitHubImageSources,
@@ -7,21 +8,54 @@ import {
   renderMarkdownToSafeHtml,
   splitMarkdownSegments,
 } from '../../lib/markdown';
+import { parseGitHubReferenceUrl } from '../../logic/references';
 import { ConsoleMermaidDiagram } from './ConsoleMermaidDiagram';
 
+export type ConsoleReferenceLinkRenderer = (
+  href: string,
+  fallbackText: string,
+) => ReactNode;
+
 export type ConsoleMarkdownViewProps = {
   body: string;
   buildImageProxyUrl?: ImageProxyUrlBuilder;
+  renderReferenceLink?: ConsoleReferenceLinkRenderer;
 };
 
 type ConsoleMarkdownHtmlBlockProps = {
   source: string;
   buildImageProxyUrl?: ImageProxyUrlBuilder;
+  renderReferenceLink?: ConsoleReferenceLinkRenderer;
+};
+
+type ReferenceMount = {
+  key: string;
+  host: HTMLElement;
+  href: string;
+  fallbackText: string;
+};
+
+const collectReferenceMounts = (container: HTMLElement): ReferenceMount[] => {
+  const anchors = container.querySelectorAll<HTMLAnchorElement>('a[href]');
+  const mounts: ReferenceMount[] = [];
+  anchors.forEach((anchor, index) => {
+    const href = anchor.getAttribute('href') ?? '';
+    if (parseGitHubReferenceUrl(href) === null) {
+      return;
+    }
+    const fallbackText = anchor.textContent ?? href;
+    const host = document.createElement('span');
+    host.className = 'console-markdown-reference-host';
+    anchor.replaceWith(host);
+    mounts.push({ key: `${index}:${href}`, host, href, fallbackText });
+  });
+  return mounts;
 };
 
 const ConsoleMarkdownHtmlBlock = ({
   source,
   buildImageProxyUrl,
+  renderReferenceLink,
 }: ConsoleMarkdownHtmlBlockProps) => {
   const html = useMemo(() => {
     const safeHtml = renderMarkdownToSafeHtml(source);
@@ -31,20 +65,39 @@ const ConsoleMarkdownHtmlBlock = ({
     return rewriteGitHubImageSources(safeHtml, buildImageProxyUrl);
   }, [source, buildImageProxyUrl]);
   const containerRef = useRef<HTMLDivElement>(null);
+  const [referenceMounts, setReferenceMounts] = useState<ReferenceMount[]>([]);
 
   useEffect(() => {
     const container = containerRef.current;
-    if (container !== null) {
-      container.innerHTML = html;
+    if (container === null) {
+      return;
+    }
+    container.innerHTML = html;
+    if (renderReferenceLink === undefined) {
+      setReferenceMounts([]);
+      return;
     }
-  }, [html]);
+    setReferenceMounts(collectReferenceMounts(container));
+  }, [html, renderReferenceLink]);
 
-  return <div ref={containerRef} className="console-markdown" />;
+  return (
+    <div ref={containerRef} className="console-markdown">
+      {renderReferenceLink !== undefined &&
+        referenceMounts.map((mount) =>
+          createPortal(
+            renderReferenceLink(mount.href, mount.fallbackText),
+            mount.host,
+            mount.key,
+          ),
+        )}
+    </div>
+  );
 };
 
 export const ConsoleMarkdownContent = ({
   body,
   buildImageProxyUrl,
+  renderReferenceLink,
 }: ConsoleMarkdownViewProps) => {
   const segments = useMemo(() => splitMarkdownSegments(body), [body]);
 
@@ -62,6 +115,7 @@ export const ConsoleMarkdownContent = ({
             key={segment.key}
             source={segment.source}
             buildImageProxyUrl={buildImageProxyUrl}
+            renderReferenceLink={renderReferenceLink}
           />
         ),
       )}

package/src/adapter/entry-points/console/ui/src/features/console/components/content/ConsoleReferenceLink.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ConsoleReferenceLink } from './ConsoleReferenceLink';
+
+const meta: Meta<typeof ConsoleReferenceLink> = {
+  title: 'Console/ConsoleReferenceLink',
+  component: ConsoleReferenceLink,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleReferenceLink>;
+
+export const OpenPullRequest: Story = {
+  args: {
+    href: 'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/pull/995',
+    fallbackText:
+      'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/pull/995',
+    state: {
+      state: 'open',
+      merged: false,
+      isPullRequest: true,
+      title: 'Rename serveConsole subcommand to serveWeb',
+    },
+  },
+};
+
+export const MergedPullRequest: Story = {
+  args: {
+    href: 'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/pull/851',
+    fallbackText:
+      'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/pull/851',
+    state: {
+      state: 'closed',
+      merged: true,
+      isPullRequest: true,
+      title: 'Add serveConsole subcommand under entry-points',
+    },
+  },
+};
+
+export const OpenIssue: Story = {
+  args: {
+    href: 'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/845',
+    fallbackText:
+      'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/845',
+    state: {
+      state: 'open',
+      merged: false,
+      isPullRequest: false,
+      title: 'Scaffold React console UI under entry-points with build bundling',
+    },
+  },
+};
+
+export const ClosedIssue: Story = {
+  args: {
+    href: 'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/692',
+    fallbackText:
+      'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/692',
+    state: {
+      state: 'closed',
+      merged: false,
+      isPullRequest: false,
+      title: 'Publish the generated documentation site to GitHub Pages',
+    },
+  },
+};
+
+export const UnresolvedFallback: Story = {
+  args: {
+    href: 'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/pull/995',
+    fallbackText:
+      'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/pull/995',
+    state: null,
+  },
+};

package/src/adapter/entry-points/console/ui/src/features/console/components/content/ConsoleReferenceLink.test.tsx

@@ -0,0 +1,56 @@
+import { render } from '@testing-library/react';
+import { ConsoleReferenceLink } from './ConsoleReferenceLink';
+
+describe('ConsoleReferenceLink', () => {
+  const href = 'https://github.com/octo/repo/pull/7';
+
+  it('renders the state icon and fetched title when state is resolved', () => {
+    const { container, getByText } = render(
+      <ConsoleReferenceLink
+        href={href}
+        fallbackText={href}
+        state={{
+          state: 'open',
+          merged: false,
+          isPullRequest: true,
+          title: 'Decorate PR links',
+        }}
+      />,
+    );
+    expect(getByText('Decorate PR links')).toBeInTheDocument();
+    expect(container.querySelector('.console-item-icon')).not.toBeNull();
+    const anchor = container.querySelector('a');
+    expect(anchor?.getAttribute('href')).toBe(href);
+  });
+
+  it('falls back to the plain link when state is null', () => {
+    const { container, getByText } = render(
+      <ConsoleReferenceLink
+        href={href}
+        fallbackText="plain text"
+        state={null}
+      />,
+    );
+    expect(getByText('plain text')).toBeInTheDocument();
+    expect(container.querySelector('.console-item-icon')).toBeNull();
+  });
+
+  it('falls back to the plain link when the resolved title is empty', () => {
+    const { container } = render(
+      <ConsoleReferenceLink
+        href={href}
+        fallbackText="plain text"
+        state={{
+          state: 'open',
+          merged: false,
+          isPullRequest: true,
+          title: '',
+        }}
+      />,
+    );
+    expect(container.querySelector('.console-item-icon')).toBeNull();
+    expect(
+      container.querySelector('.console-markdown-reference-plain'),
+    ).not.toBeNull();
+  });
+});

package/src/adapter/entry-points/console/ui/src/features/console/components/content/ConsoleReferenceLink.tsx

@@ -0,0 +1,39 @@
+import { referenceStateToIconInput } from '../../logic/references';
+import type { ConsoleIssueState } from '../../logic/types';
+import { ConsoleItemIcon } from '../detail/ConsoleItemIcon';
+
+export type ConsoleReferenceLinkProps = {
+  href: string;
+  fallbackText: string;
+  state: ConsoleIssueState | null;
+};
+
+export const ConsoleReferenceLink = ({
+  href,
+  fallbackText,
+  state,
+}: ConsoleReferenceLinkProps) => {
+  if (state === null || state.title.trim() === '') {
+    return (
+      <a
+        className="console-markdown-reference console-markdown-reference-plain"
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {fallbackText}
+      </a>
+    );
+  }
+  return (
+    <a
+      className="console-markdown-reference"
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <ConsoleItemIcon {...referenceStateToIconInput(state)} />
+      <span className="console-markdown-reference-title">{state.title}</span>
+    </a>
+  );
+};

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleCommentList.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import type { ImageProxyUrlBuilder } from '../../lib/imageProxy';
 import { formatRelativeTime } from '../../logic/relativeTime';
 import type { ConsoleComment } from '../../logic/types';
+import type { ConsoleReferenceLinkRenderer } from '../content/ConsoleMarkdownContent';
 import { ConsoleMarkdownContent } from '../content/ConsoleMarkdownContent';
 
 export type ConsoleCommentListProps = {
@@ -10,6 +11,7 @@ export type ConsoleCommentListProps = {
   error: string | null;
   now: number;
   buildImageProxyUrl?: ImageProxyUrlBuilder;
+  renderReferenceLink?: ConsoleReferenceLinkRenderer;
 };
 
 export const ConsoleCommentList = ({
@@ -18,6 +20,7 @@ export const ConsoleCommentList = ({
   error,
   now,
   buildImageProxyUrl,
+  renderReferenceLink,
 }: ConsoleCommentListProps) => {
   const [showAll, setShowAll] = useState<boolean>(false);
 
@@ -64,6 +67,7 @@ export const ConsoleCommentList = ({
           <ConsoleMarkdownContent
             body={comment.body}
             buildImageProxyUrl={buildImageProxyUrl}
+            renderReferenceLink={renderReferenceLink}
           />
         </article>
       ))}

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleItemDetail.stories.tsx

@@ -68,7 +68,12 @@ export const PullRequestItem: Story = {
     storyName: 'TDPM Console port',
     storyColorEnum: 'BLUE',
     overlayStatus: { name: 'Awaiting Workspace', color: 'BLUE' },
-    state: { state: 'open', merged: false, isPullRequest: true },
+    state: {
+      state: 'open',
+      merged: false,
+      isPullRequest: true,
+      title: 'Add serveConsole subcommand under entry-points',
+    },
     body: consoleMermaidBodyFixture,
     bodyIsLoading: false,
     bodyError: null,
@@ -99,7 +104,12 @@ export const PullRequestItemFailingCiWithConflict: Story = {
     storyName: 'TDPM Console port',
     storyColorEnum: 'BLUE',
     overlayStatus: { name: 'Awaiting Quality Check', color: 'YELLOW' },
-    state: { state: 'open', merged: false, isPullRequest: true },
+    state: {
+      state: 'open',
+      merged: false,
+      isPullRequest: true,
+      title: 'Add serveConsole subcommand under entry-points',
+    },
     body: consoleMermaidBodyFixture,
     bodyIsLoading: false,
     bodyError: null,
@@ -130,7 +140,12 @@ export const IssueWithRichMarkdownBody: Story = {
     storyName: 'TDPM Console port',
     storyColorEnum: 'BLUE',
     overlayStatus: null,
-    state: { state: 'open', merged: false, isPullRequest: false },
+    state: {
+      state: 'open',
+      merged: false,
+      isPullRequest: false,
+      title: 'Scaffold React console UI under entry-points with build bundling',
+    },
     body: richMarkdownBody,
     bodyIsLoading: false,
     bodyError: null,
@@ -164,7 +179,12 @@ export const IssueWithLinkedPullRequest: Story = {
     storyName: 'TDPM Console port',
     storyColorEnum: 'BLUE',
     overlayStatus: null,
-    state: { state: 'open', merged: false, isPullRequest: false },
+    state: {
+      state: 'open',
+      merged: false,
+      isPullRequest: false,
+      title: 'Scaffold React console UI under entry-points with build bundling',
+    },
     body: '## Issue body\n\nThis issue has a linked pull request.',
     bodyIsLoading: false,
     bodyError: null,

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleItemDetail.test.tsx

@@ -19,7 +19,7 @@ const baseProps = {
   storyName: 'TDPM Console port',
   storyColorEnum: 'BLUE' as const,
   overlayStatus: null,
-  state: { state: 'open', merged: false, isPullRequest: true },
+  state: { state: 'open', merged: false, isPullRequest: true, title: '' },
   body: '## Body heading',
   bodyIsLoading: false,
   bodyError: null,
@@ -79,7 +79,12 @@ describe('ConsoleItemDetail', () => {
       <ConsoleItemDetail
         item={issueItem}
         {...baseProps}
-        state={{ state: 'open', merged: false, isPullRequest: false }}
+        state={{
+          state: 'open',
+          merged: false,
+          isPullRequest: false,
+          title: '',
+        }}
       />,
     );
     expect(queryByText('Changed files')).toBeNull();
@@ -164,7 +169,12 @@ describe('ConsoleItemDetail', () => {
       <ConsoleItemDetail
         item={issueItem}
         {...baseProps}
-        state={{ state: 'open', merged: false, isPullRequest: false }}
+        state={{
+          state: 'open',
+          merged: false,
+          isPullRequest: false,
+          title: '',
+        }}
         pullRequestStatus={null}
       />,
     );

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleItemDetail.tsx

@@ -16,6 +16,7 @@ import type {
   ConsolePullRequestStatus,
   ConsoleRelatedPullRequest,
 } from '../../logic/types';
+import type { ConsoleReferenceLinkRenderer } from '../content/ConsoleMarkdownContent';
 import { ConsoleMarkdownContent } from '../content/ConsoleMarkdownContent';
 import { ConsolePanel } from '../layout/ConsolePanel';
 import { ConsoleChangedFileList } from './ConsoleChangedFileList';
@@ -61,6 +62,7 @@ export type ConsoleItemDetailProps = {
   commentComposer: ReactNode;
   operationBar: ReactNode;
   buildImageProxyUrl?: ImageProxyUrlBuilder;
+  renderReferenceLink?: ConsoleReferenceLinkRenderer;
   onAddInlineComment?: ConsoleAddInlineComment;
   buildAddInlineComment?: (prUrl: string) => ConsoleAddInlineComment;
 };
@@ -89,6 +91,7 @@ export const ConsoleItemDetail = ({
   commentComposer,
   operationBar,
   buildImageProxyUrl,
+  renderReferenceLink,
   onAddInlineComment,
   buildAddInlineComment,
 }: ConsoleItemDetailProps) => {
@@ -219,6 +222,7 @@ export const ConsoleItemDetail = ({
           <ConsoleMarkdownContent
             body={body}
             buildImageProxyUrl={buildImageProxyUrl}
+            renderReferenceLink={renderReferenceLink}
           />
         )}
       </ConsolePanel>
@@ -245,6 +249,7 @@ export const ConsoleItemDetail = ({
           error={commentsError}
           now={now}
           buildImageProxyUrl={buildImageProxyUrl}
+          renderReferenceLink={renderReferenceLink}
         />
       </ConsolePanel>
 
@@ -274,6 +279,7 @@ export const ConsoleItemDetail = ({
             commitsError={related.commitsError}
             now={now}
             buildImageProxyUrl={buildImageProxyUrl}
+            renderReferenceLink={renderReferenceLink}
             onAddInlineComment={
               buildAddInlineComment
                 ? buildAddInlineComment(related.pullRequest.url)

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsolePullRequestDetail.tsx

@@ -4,6 +4,7 @@ import type {
   ConsoleCommit,
   ConsoleRelatedPullRequest,
 } from '../../logic/types';
+import type { ConsoleReferenceLinkRenderer } from '../content/ConsoleMarkdownContent';
 import { ConsoleMarkdownContent } from '../content/ConsoleMarkdownContent';
 import { ConsolePanel } from '../layout/ConsolePanel';
 import { ConsoleChangedFileList } from './ConsoleChangedFileList';
@@ -24,6 +25,7 @@ export type ConsolePullRequestSectionProps = {
   commitsError: string | null;
   now: number;
   buildImageProxyUrl?: ImageProxyUrlBuilder;
+  renderReferenceLink?: ConsoleReferenceLinkRenderer;
   onAddInlineComment?: ConsoleAddInlineComment;
 };
 
@@ -39,6 +41,7 @@ export const ConsolePullRequestDetail = ({
   commitsError,
   now,
   buildImageProxyUrl,
+  renderReferenceLink,
   onAddInlineComment,
 }: ConsolePullRequestSectionProps) => {
   const summary = pullRequest.summary;
@@ -90,6 +93,7 @@ export const ConsolePullRequestDetail = ({
           <ConsoleMarkdownContent
             body={summary?.body ?? body}
             buildImageProxyUrl={buildImageProxyUrl}
+            renderReferenceLink={renderReferenceLink}
           />
         )}
       </ConsolePanel>

package/src/adapter/entry-points/console/ui/src/features/console/hooks/useConsoleItemDetailData.test.ts

@@ -63,6 +63,7 @@ const buildCaches = (related: ConsoleRelatedPullRequest[]): ConsoleCaches => {
       state: 'open',
       merged: false,
       isPullRequest: true,
+      title: 'Console item detail fixture title',
     }),
     fetchPullRequestStatus: async (): Promise<ConsolePullRequestStatus> => ({
       found: true,

package/src/adapter/entry-points/console/ui/src/features/console/hooks/useConsoleItemDetailData.ts

@@ -20,6 +20,7 @@ const DEFAULT_STATE: ConsoleIssueState = {
   state: 'open',
   merged: false,
   isPullRequest: false,
+  title: '',
 };
 const DEFAULT_PR_STATUS: ConsolePullRequestStatus = {
   found: false,

package/src/adapter/entry-points/console/ui/src/features/console/hooks/useConsoleReferenceLink.test.ts

@@ -0,0 +1,48 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { ResourceCache } from '../lib/resourceCache';
+import type { ConsoleIssueState } from '../logic/types';
+import { useConsoleReferenceLink } from './useConsoleReferenceLink';
+
+const buildState = (title: string): ConsoleIssueState => ({
+  state: 'open',
+  merged: false,
+  isPullRequest: true,
+  title,
+});
+
+describe('useConsoleReferenceLink', () => {
+  const url = 'https://github.com/octo/repo/pull/7';
+
+  it('returns null then the resolved state', async () => {
+    const cache = new ResourceCache<ConsoleIssueState>(async () =>
+      buildState('Decorate links'),
+    );
+    const { result } = renderHook(() => useConsoleReferenceLink(cache, url));
+    expect(result.current).toBeNull();
+    await waitFor(() => {
+      expect(result.current?.title).toBe('Decorate links');
+    });
+  });
+
+  it('returns null when the fetch fails', async () => {
+    const cache = new ResourceCache<ConsoleIssueState>(async () => {
+      throw new Error('boom');
+    });
+    const { result } = renderHook(() => useConsoleReferenceLink(cache, url));
+    await waitFor(() => {
+      expect(cache.has(url)).toBe(false);
+    });
+    expect(result.current).toBeNull();
+  });
+
+  it('reuses an already cached value without refetching', () => {
+    const fetcher = jest.fn(async () => buildState('cached'));
+    const cache = new ResourceCache<ConsoleIssueState>(fetcher);
+    cache.load(url, url);
+    return cache.load(url, url).then(() => {
+      const { result } = renderHook(() => useConsoleReferenceLink(cache, url));
+      expect(result.current?.title).toBe('cached');
+      expect(fetcher).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/adapter/entry-points/console/ui/src/features/console/hooks/useConsoleReferenceLink.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import type { ResourceCache } from '../lib/resourceCache';
+import type { ConsoleIssueState } from '../logic/types';
+
+export const useConsoleReferenceLink = (
+  cache: ResourceCache<ConsoleIssueState>,
+  url: string,
+): ConsoleIssueState | null => {
+  const [state, setState] = useState<ConsoleIssueState | null>(
+    () => cache.peek(url) ?? null,
+  );
+
+  useEffect(() => {
+    const cached = cache.peek(url);
+    if (cached !== undefined) {
+      setState(cached);
+      return;
+    }
+    let cancelled = false;
+    setState(null);
+    cache
+      .load(url, url)
+      .then((value) => {
+        if (!cancelled) {
+          setState(value);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setState(null);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [cache, url]);
+
+  return state;
+};

package/src/adapter/entry-points/console/ui/src/features/console/lib/consoleApi.test.ts

@@ -105,11 +105,34 @@ describe('createConsoleApiClient', () => {
   });
 
   it('parses the issue state', async () => {
-    mockFetchOnce({ state: 'closed', merged: true, isPullRequest: true });
+    mockFetchOnce({
+      state: 'closed',
+      merged: true,
+      isPullRequest: true,
+      title: 'Decorate PR links',
+    });
     const client = createConsoleApiClient(appendToken);
     expect(
       await client.fetchIssueState('https://github.com/o/r/pull/1'),
-    ).toEqual({ state: 'closed', merged: true, isPullRequest: true });
+    ).toEqual({
+      state: 'closed',
+      merged: true,
+      isPullRequest: true,
+      title: 'Decorate PR links',
+    });
+  });
+
+  it('defaults the title to an empty string when absent', async () => {
+    mockFetchOnce({ state: 'open', merged: false, isPullRequest: false });
+    const client = createConsoleApiClient(appendToken);
+    expect(
+      await client.fetchIssueState('https://github.com/o/r/issues/1'),
+    ).toEqual({
+      state: 'open',
+      merged: false,
+      isPullRequest: false,
+      title: '',
+    });
   });
 
   it('parses pull request commits', async () => {

package/src/adapter/entry-points/console/ui/src/features/console/lib/consoleApi.ts

@@ -181,12 +181,13 @@ const parsePullRequestStatus = (payload: unknown): ConsolePullRequestStatus => {
 
 const parseState = (payload: unknown): ConsoleIssueState => {
   if (!isRecord(payload)) {
-    return { state: 'open', merged: false, isPullRequest: false };
+    return { state: 'open', merged: false, isPullRequest: false, title: '' };
   }
   return {
     state: getString(payload.state) || 'open',
     merged: getBoolean(payload.merged),
     isPullRequest: getBoolean(payload.isPullRequest),
+    title: getString(payload.title),
   };
 };