github-issue-tower-defence-management 1.89.0 → 1.91.0

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

@@ -0,0 +1,226 @@
+import type { ReactNode } from 'react';
+import { colorFromEnum } from '../colors';
+import { formatFullTimestamp, formatRelativeTime } from '../relativeTime';
+import type {
+  ConsoleChangedFile,
+  ConsoleColor,
+  ConsoleComment,
+  ConsoleCommit,
+  ConsoleIssueState,
+  ConsoleListItem,
+  ConsoleOverlayStatus,
+  ConsoleRelatedPullRequest,
+} from '../types';
+import { ConsoleChangedFileList } from './ConsoleChangedFileList';
+import { ConsoleCommentList } from './ConsoleCommentList';
+import { ConsoleCommitList } from './ConsoleCommitList';
+import { ConsoleItemIcon } from './ConsoleItemIcon';
+import { ConsoleMarkdownView } from './ConsoleMarkdownView';
+import { ConsolePanel } from './ConsolePanel';
+import { ConsolePullRequestSection } from './ConsolePullRequestSection';
+
+export type ConsoleRelatedPullRequestView = {
+  pullRequest: ConsoleRelatedPullRequest;
+  files: ConsoleChangedFile[];
+  filesAreLoading: boolean;
+  filesError: string | null;
+  commits: ConsoleCommit[];
+  commitsAreLoading: boolean;
+  commitsError: string | null;
+};
+
+export type ConsoleItemDetailProps = {
+  item: ConsoleListItem;
+  storyName: string | null;
+  storyColorEnum: ConsoleColor | null;
+  overlayStatus: ConsoleOverlayStatus | null;
+  state: ConsoleIssueState | null;
+  body: string;
+  bodyIsLoading: boolean;
+  bodyError: string | null;
+  comments: ConsoleComment[];
+  commentsAreLoading: boolean;
+  commentsError: string | null;
+  files: ConsoleChangedFile[];
+  filesAreLoading: boolean;
+  filesError: string | null;
+  commits: ConsoleCommit[];
+  commitsAreLoading: boolean;
+  commitsError: string | null;
+  relatedPullRequests: ConsoleRelatedPullRequestView[];
+  now: number;
+  operationBar: ReactNode;
+};
+
+export const ConsoleItemDetail = ({
+  item,
+  storyName,
+  storyColorEnum,
+  overlayStatus,
+  state,
+  body,
+  bodyIsLoading,
+  bodyError,
+  comments,
+  commentsAreLoading,
+  commentsError,
+  files,
+  filesAreLoading,
+  filesError,
+  commits,
+  commitsAreLoading,
+  commitsError,
+  relatedPullRequests,
+  now,
+  operationBar,
+}: ConsoleItemDetailProps) => {
+  const resolvedState = state?.state ?? 'open';
+  const merged = state?.merged ?? false;
+  const closedStateLabel =
+    !item.isPr && resolvedState === 'closed' ? 'Closed' : null;
+  const storyPalette = colorFromEnum(storyColorEnum);
+  const statusPalette = overlayStatus
+    ? colorFromEnum(overlayStatus.color)
+    : null;
+
+  return (
+    <article className="console-detail">
+      {storyName !== null && (
+        <div className="console-detail-story">
+          <span className="console-storytag">
+            <span
+              className="console-story-dot"
+              style={{ backgroundColor: storyPalette.dot }}
+            />
+            {storyName}
+          </span>
+        </div>
+      )}
+
+      {overlayStatus !== null && statusPalette !== null && (
+        <span
+          className="console-detail-status-chip"
+          style={{
+            color: statusPalette.fg,
+            borderColor: statusPalette.border,
+            backgroundColor: statusPalette.bg,
+          }}
+        >
+          {overlayStatus.name}
+        </span>
+      )}
+
+      <h2 className="console-detail-title">
+        <ConsoleItemIcon
+          isPr={item.isPr}
+          state={resolvedState}
+          merged={merged}
+          isDraft={false}
+          stateReason=""
+        />
+        <span className="console-detail-title-text">{item.title}</span>
+        <span className="console-detail-number">
+          {item.isPr ? `PR #${item.number}` : `#${item.number}`}
+        </span>
+        {closedStateLabel !== null && (
+          <span className="console-detail-closed-label">
+            {closedStateLabel}
+          </span>
+        )}
+      </h2>
+
+      <div className="console-detail-subbar">
+        <a
+          href={item.url}
+          className="console-detail-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {item.isPr ? `PR #${item.number}` : `Issue #${item.number}`}
+        </a>
+        <span className="console-detail-repo">{item.repo}</span>
+        <span className="console-detail-pill">
+          {item.isPr ? 'PR' : 'Issue'}
+        </span>
+      </div>
+
+      {item.labels.length > 0 && (
+        <div className="console-detail-labels">
+          {item.labels.map((label) => (
+            <span key={label} className="console-label-chip">
+              {label}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div
+        className="console-detail-createdat"
+        title={formatFullTimestamp(item.createdAt)}
+      >
+        opened {formatRelativeTime(item.createdAt, now)}
+      </div>
+
+      <ConsolePanel title="Description">
+        {bodyError !== null ? (
+          <p role="alert" className="console-detail-body-error">
+            Failed to load description: {bodyError}
+          </p>
+        ) : bodyIsLoading ? (
+          <p className="console-detail-body-loading">Loading description...</p>
+        ) : (
+          <ConsoleMarkdownView body={body} />
+        )}
+      </ConsolePanel>
+
+      {item.isPr && (
+        <ConsolePanel title="Changed files">
+          <ConsoleChangedFileList
+            files={files}
+            isLoading={filesAreLoading}
+            error={filesError}
+          />
+        </ConsolePanel>
+      )}
+
+      <ConsolePanel title="Comments" defaultCollapsed={item.isPr}>
+        <ConsoleCommentList
+          comments={comments}
+          isLoading={commentsAreLoading}
+          error={commentsError}
+          now={now}
+        />
+      </ConsolePanel>
+
+      {item.isPr && (
+        <ConsolePanel title="Commits" defaultCollapsed>
+          <ConsoleCommitList
+            commits={commits}
+            isLoading={commitsAreLoading}
+            error={commitsError}
+            now={now}
+          />
+        </ConsolePanel>
+      )}
+
+      {!item.isPr &&
+        relatedPullRequests.map((related) => (
+          <ConsolePullRequestSection
+            key={related.pullRequest.url}
+            pullRequest={related.pullRequest}
+            body={related.pullRequest.summary?.body ?? ''}
+            bodyIsLoading={false}
+            files={related.files}
+            filesAreLoading={related.filesAreLoading}
+            filesError={related.filesError}
+            commits={related.commits}
+            commitsAreLoading={related.commitsAreLoading}
+            commitsError={related.commitsError}
+            now={now}
+          />
+        ))}
+
+      <div className="console-detail-operations">{operationBar}</div>
+    </article>
+  );
+};

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

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ConsoleItemIcon } from './ConsoleItemIcon';
+
+const meta: Meta<typeof ConsoleItemIcon> = {
+  title: 'Console/ConsoleItemIcon',
+  component: ConsoleItemIcon,
+  args: { size: 20 },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleItemIcon>;
+
+export const PullRequestOpen: Story = {
+  args: {
+    isPr: true,
+    state: 'open',
+    merged: false,
+    isDraft: false,
+    stateReason: '',
+  },
+};
+
+export const PullRequestMerged: Story = {
+  args: {
+    isPr: true,
+    state: 'closed',
+    merged: true,
+    isDraft: false,
+    stateReason: '',
+  },
+};
+
+export const PullRequestClosed: Story = {
+  args: {
+    isPr: true,
+    state: 'closed',
+    merged: false,
+    isDraft: false,
+    stateReason: '',
+  },
+};
+
+export const PullRequestDraft: Story = {
+  args: {
+    isPr: true,
+    state: 'open',
+    merged: false,
+    isDraft: true,
+    stateReason: '',
+  },
+};
+
+export const IssueOpen: Story = {
+  args: {
+    isPr: false,
+    state: 'open',
+    merged: false,
+    isDraft: false,
+    stateReason: '',
+  },
+};
+
+export const IssueClosedCompleted: Story = {
+  args: {
+    isPr: false,
+    state: 'closed',
+    merged: false,
+    isDraft: false,
+    stateReason: 'completed',
+  },
+};
+
+export const IssueClosedNotPlanned: Story = {
+  args: {
+    isPr: false,
+    state: 'closed',
+    merged: false,
+    isDraft: false,
+    stateReason: 'not_planned',
+  },
+};

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

@@ -0,0 +1,52 @@
+import { render } from '@testing-library/react';
+import { CONSOLE_ITEM_ICONS } from '../itemIcons';
+import { ConsoleItemIcon } from './ConsoleItemIcon';
+
+describe('ConsoleItemIcon', () => {
+  it('renders the green open pull-request icon for an open PR', () => {
+    const { getByRole } = render(
+      <ConsoleItemIcon
+        isPr
+        state="open"
+        merged={false}
+        isDraft={false}
+        stateReason=""
+      />,
+    );
+    const svg = getByRole('img');
+    expect(svg).toHaveAttribute('fill', CONSOLE_ITEM_ICONS.prOpen.color);
+    expect(svg).toHaveAttribute('aria-label', 'prOpen');
+  });
+
+  it('renders the red closed pull-request icon for a closed PR', () => {
+    const { getByRole } = render(
+      <ConsoleItemIcon
+        isPr
+        state="closed"
+        merged={false}
+        isDraft={false}
+        stateReason=""
+      />,
+    );
+    expect(getByRole('img')).toHaveAttribute(
+      'fill',
+      CONSOLE_ITEM_ICONS.prClosed.color,
+    );
+  });
+
+  it('renders the gray not-planned icon for a closed unplanned issue', () => {
+    const { getByRole } = render(
+      <ConsoleItemIcon
+        isPr={false}
+        state="closed"
+        merged={false}
+        isDraft={false}
+        stateReason="not_planned"
+      />,
+    );
+    expect(getByRole('img')).toHaveAttribute(
+      'fill',
+      CONSOLE_ITEM_ICONS.issueClosedNotPlanned.color,
+    );
+  });
+});

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

@@ -0,0 +1,32 @@
+import {
+  CONSOLE_ITEM_ICONS,
+  type ConsoleItemIconInput,
+  resolveConsoleItemIconKind,
+} from '../itemIcons';
+
+export type ConsoleItemIconProps = ConsoleItemIconInput & {
+  size?: number;
+};
+
+export const ConsoleItemIcon = ({
+  size = 12,
+  ...input
+}: ConsoleItemIconProps) => {
+  const kind = resolveConsoleItemIconKind(input);
+  const definition = CONSOLE_ITEM_ICONS[kind];
+  return (
+    <svg
+      className="console-item-icon"
+      viewBox="0 0 16 16"
+      width={size}
+      height={size}
+      fill={definition.color}
+      role="img"
+      aria-label={kind}
+    >
+      {definition.paths.map((d) => (
+        <path key={d} d={d} />
+      ))}
+    </svg>
+  );
+};

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { consoleListItemsFixture } from '../fixtures';
+import { ConsoleListItemRow } from './ConsoleListItemRow';
+
+const meta: Meta<typeof ConsoleListItemRow> = {
+  title: 'Console/ConsoleListItemRow',
+  component: ConsoleListItemRow,
+  args: { onSelect: () => {} },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleListItemRow>;
+
+export const PullRequestRow: Story = {
+  args: { item: consoleListItemsFixture[0], isActive: false },
+};
+
+export const IssueRow: Story = {
+  args: { item: consoleListItemsFixture[2], isActive: false },
+};
+
+export const ActiveRow: Story = {
+  args: { item: consoleListItemsFixture[0], isActive: true },
+};

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

@@ -0,0 +1,43 @@
+import { fireEvent, render } from '@testing-library/react';
+import { consoleListItemsFixture } from '../fixtures';
+import { ConsoleListItemRow } from './ConsoleListItemRow';
+
+const prItem = consoleListItemsFixture[0];
+const issueItem = consoleListItemsFixture[2];
+
+describe('ConsoleListItemRow', () => {
+  it('renders a PR number with the PR prefix', () => {
+    const { getByText } = render(
+      <ConsoleListItemRow item={prItem} isActive={false} onSelect={() => {}} />,
+    );
+    expect(getByText(`PR #${prItem.number}`)).toBeInTheDocument();
+    expect(getByText(prItem.title)).toBeInTheDocument();
+  });
+
+  it('renders an issue number with the hash prefix', () => {
+    const { getByText } = render(
+      <ConsoleListItemRow
+        item={issueItem}
+        isActive={false}
+        onSelect={() => {}}
+      />,
+    );
+    expect(getByText(`#${issueItem.number}`)).toBeInTheDocument();
+  });
+
+  it('reports the item on click', () => {
+    const onSelect = jest.fn();
+    const { getByRole } = render(
+      <ConsoleListItemRow item={prItem} isActive={false} onSelect={onSelect} />,
+    );
+    fireEvent.click(getByRole('button'));
+    expect(onSelect).toHaveBeenCalledWith(prItem);
+  });
+
+  it('marks the active row', () => {
+    const { getByRole } = render(
+      <ConsoleListItemRow item={prItem} isActive onSelect={() => {}} />,
+    );
+    expect(getByRole('button')).toHaveAttribute('data-active', 'true');
+  });
+});

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

@@ -0,0 +1,34 @@
+import type { ConsoleListItem } from '../types';
+import { ConsoleItemIcon } from './ConsoleItemIcon';
+
+export type ConsoleListItemRowProps = {
+  item: ConsoleListItem;
+  isActive: boolean;
+  onSelect: (item: ConsoleListItem) => void;
+};
+
+export const ConsoleListItemRow = ({
+  item,
+  isActive,
+  onSelect,
+}: ConsoleListItemRowProps) => (
+  <button
+    type="button"
+    className="console-item-row"
+    aria-current={isActive ? 'true' : undefined}
+    data-active={isActive ? 'true' : undefined}
+    onClick={() => onSelect(item)}
+  >
+    <ConsoleItemIcon
+      isPr={item.isPr}
+      state="open"
+      merged={false}
+      isDraft={false}
+      stateReason=""
+    />
+    <span className="console-item-title">{item.title}</span>
+    <span className="console-item-number">
+      {item.isPr ? `PR #${item.number}` : `#${item.number}`}
+    </span>
+  </button>
+);

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

@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { consoleListItemsFixture } from '../fixtures';
+import {
+  consoleListItemsFixture,
+  consoleStoryColorsFixture,
+} from '../fixtures';
+import { buildConsoleListRows } from '../grouping';
 import { ConsoleListView } from './ConsoleListView';
 
 const meta: Meta<typeof ConsoleListView> = {
@@ -11,34 +15,46 @@ export default meta;
 
 type Story = StoryObj<typeof ConsoleListView>;
 
-export const WithItems: Story = {
+export const WithStoryGroups: Story = {
   args: {
-    items: consoleListItemsFixture,
+    rows: buildConsoleListRows(consoleListItemsFixture, {}),
+    storyColors: consoleStoryColorsFixture,
+    activeItemId: null,
     isLoading: false,
     error: null,
+    onSelectItem: () => {},
   },
 };
 
 export const Loading: Story = {
   args: {
-    items: [],
+    rows: [],
+    storyColors: {},
+    activeItemId: null,
     isLoading: true,
     error: null,
+    onSelectItem: () => {},
   },
 };
 
 export const Empty: Story = {
   args: {
-    items: [],
+    rows: [],
+    storyColors: {},
+    activeItemId: null,
     isLoading: false,
     error: null,
+    onSelectItem: () => {},
   },
 };
 
 export const ErrorState: Story = {
   args: {
-    items: [],
+    rows: [],
+    storyColors: {},
+    activeItemId: null,
     isLoading: false,
     error: 'HTTP 404',
+    onSelectItem: () => {},
   },
 };

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

@@ -0,0 +1,87 @@
+import { fireEvent, render } from '@testing-library/react';
+import {
+  consoleListItemsFixture,
+  consoleStoryColorsFixture,
+} from '../fixtures';
+import { buildConsoleListRows } from '../grouping';
+import { ConsoleListView } from './ConsoleListView';
+
+const rows = buildConsoleListRows(consoleListItemsFixture, {});
+
+describe('ConsoleListView', () => {
+  it('renders group headers and items in array order', () => {
+    const { getAllByRole, getByText } = render(
+      <ConsoleListView
+        rows={rows}
+        storyColors={consoleStoryColorsFixture}
+        activeItemId={null}
+        isLoading={false}
+        error={null}
+        onSelectItem={() => {}}
+      />,
+    );
+    expect(getByText('TDPM Console port')).toBeInTheDocument();
+    expect(getByText('regular / workflow improvement')).toBeInTheDocument();
+    expect(getAllByRole('button').length).toBe(consoleListItemsFixture.length);
+  });
+
+  it('reports the selected item', () => {
+    const onSelectItem = jest.fn();
+    const { getByText } = render(
+      <ConsoleListView
+        rows={rows}
+        storyColors={consoleStoryColorsFixture}
+        activeItemId={null}
+        isLoading={false}
+        error={null}
+        onSelectItem={onSelectItem}
+      />,
+    );
+    fireEvent.click(
+      getByText('Add serveConsole subcommand under entry-points'),
+    );
+    expect(onSelectItem).toHaveBeenCalledWith(consoleListItemsFixture[0]);
+  });
+
+  it('shows the loading state', () => {
+    const { getByText } = render(
+      <ConsoleListView
+        rows={[]}
+        storyColors={{}}
+        activeItemId={null}
+        isLoading
+        error={null}
+        onSelectItem={() => {}}
+      />,
+    );
+    expect(getByText('Loading list...')).toBeInTheDocument();
+  });
+
+  it('shows the empty state', () => {
+    const { getByText } = render(
+      <ConsoleListView
+        rows={[]}
+        storyColors={{}}
+        activeItemId={null}
+        isLoading={false}
+        error={null}
+        onSelectItem={() => {}}
+      />,
+    );
+    expect(getByText('No items.')).toBeInTheDocument();
+  });
+
+  it('shows the error state', () => {
+    const { getByRole } = render(
+      <ConsoleListView
+        rows={[]}
+        storyColors={{}}
+        activeItemId={null}
+        isLoading={false}
+        error="HTTP 404"
+        onSelectItem={() => {}}
+      />,
+    );
+    expect(getByRole('alert')).toHaveTextContent('HTTP 404');
+  });
+});