github-issue-tower-defence-management 2.12.1 → 2.14.0

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

@@ -0,0 +1,262 @@
+import { fireEvent, render } from '@testing-library/react';
+import {
+  type ConsoleOfflinePendingActionItem,
+  ConsoleOfflinePendingActionsPanel,
+} from './ConsoleOfflinePendingActionsPanel';
+
+const approveAction: ConsoleOfflinePendingActionItem = {
+  id: 'offline-1',
+  message: 'Approved — PR #851',
+  color: 'green',
+  itemNumber: 851,
+  isPr: true,
+  currentTitle: 'Add serveConsole subcommand under entry-points',
+  currentState: 'open',
+  currentPrStatus: null,
+  fetchError: false,
+};
+
+const baseProps = {
+  actions: [approveAction],
+  isOnline: true,
+  isConfirming: false,
+  onConfirm: () => {},
+  onDiscard: () => {},
+};
+
+describe('ConsoleOfflinePendingActionsPanel', () => {
+  it('renders nothing when the action list is empty', () => {
+    const { container } = render(
+      <ConsoleOfflinePendingActionsPanel {...baseProps} actions={[]} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('shows the action count and a confirm-before-sending message when online', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel {...baseProps} />,
+    );
+    expect(getByText(/1 action held/)).toBeInTheDocument();
+    expect(getByText(/confirm each before sending/)).toBeInTheDocument();
+  });
+
+  it('shows an awaiting-connectivity message when offline', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel {...baseProps} isOnline={false} />,
+    );
+    expect(getByText(/awaiting connectivity/)).toBeInTheDocument();
+  });
+
+  it('shows per-action rows with item target when offline', () => {
+    const { getByText, queryByText } = render(
+      <ConsoleOfflinePendingActionsPanel {...baseProps} isOnline={false} />,
+    );
+    expect(getByText(/PR #851 — Add serveConsole/)).toBeInTheDocument();
+    expect(getByText('Approved — PR #851')).toBeInTheDocument();
+    expect(queryByText('Send')).not.toBeInTheDocument();
+  });
+
+  it('shows Discard button even when offline', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel {...baseProps} isOnline={false} />,
+    );
+    expect(getByText('Discard')).toBeInTheDocument();
+  });
+
+  it('shows the action message and item label when online', () => {
+    const { getByText, container } = render(
+      <ConsoleOfflinePendingActionsPanel {...baseProps} />,
+    );
+    expect(getByText('Approved — PR #851')).toBeInTheDocument();
+    expect(
+      container.querySelector('.console-offline-panel-item-target')
+        ?.textContent,
+    ).toContain('PR #851');
+  });
+
+  it('shows the current item title and state when loaded', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel {...baseProps} />,
+    );
+    expect(
+      getByText(/Add serveConsole subcommand under entry-points/),
+    ).toBeInTheDocument();
+    expect(getByText(/open/)).toBeInTheDocument();
+  });
+
+  it('shows a loading indicator when the current state is not yet fetched', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel
+        {...baseProps}
+        actions={[{ ...approveAction, currentTitle: null, currentState: null }]}
+      />,
+    );
+    expect(getByText(/loading current state/)).toBeInTheDocument();
+  });
+
+  it('disables the Send button while the current state is loading', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel
+        {...baseProps}
+        actions={[{ ...approveAction, currentTitle: null, currentState: null }]}
+      />,
+    );
+    expect(getByText('Send')).toBeDisabled();
+  });
+
+  it('enables the Send button once the current state is loaded', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel {...baseProps} />,
+    );
+    expect(getByText('Send')).not.toBeDisabled();
+  });
+
+  it('enables the Send button when the state fetch failed so the operator can still proceed', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel
+        {...baseProps}
+        actions={[
+          {
+            ...approveAction,
+            currentTitle: null,
+            currentState: null,
+            fetchError: true,
+          },
+        ]}
+      />,
+    );
+    expect(getByText('Send')).not.toBeDisabled();
+  });
+
+  it('shows a fetch error message when the state could not be loaded', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel
+        {...baseProps}
+        actions={[
+          {
+            ...approveAction,
+            currentTitle: null,
+            currentState: null,
+            fetchError: true,
+          },
+        ]}
+      />,
+    );
+    expect(getByText(/Failed to load current state/)).toBeInTheDocument();
+  });
+
+  it('disables the Send button while a confirmation is in progress', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel {...baseProps} isConfirming={true} />,
+    );
+    expect(getByText('Send')).toBeDisabled();
+  });
+
+  it('calls onConfirm with the action id when Send is clicked', () => {
+    const onConfirm = jest.fn();
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel
+        {...baseProps}
+        onConfirm={onConfirm}
+      />,
+    );
+    fireEvent.click(getByText('Send'));
+    expect(onConfirm).toHaveBeenCalledWith('offline-1');
+  });
+
+  it('calls onDiscard with the action id when Discard is clicked', () => {
+    const onDiscard = jest.fn();
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel
+        {...baseProps}
+        onDiscard={onDiscard}
+      />,
+    );
+    fireEvent.click(getByText('Discard'));
+    expect(onDiscard).toHaveBeenCalledWith('offline-1');
+  });
+
+  it('uses plural phrasing for the count when more than one action is queued', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel
+        {...baseProps}
+        actions={[
+          approveAction,
+          { ...approveAction, id: 'offline-2', message: 'Rejected — PR #853' },
+        ]}
+      />,
+    );
+    expect(getByText(/2 actions held/)).toBeInTheDocument();
+  });
+
+  it('renders a Send and Discard button for each queued action when online', () => {
+    const { getAllByText } = render(
+      <ConsoleOfflinePendingActionsPanel
+        {...baseProps}
+        actions={[
+          approveAction,
+          { ...approveAction, id: 'offline-2', message: 'Rejected — PR #853' },
+        ]}
+      />,
+    );
+    expect(getAllByText('Send')).toHaveLength(2);
+    expect(getAllByText('Discard')).toHaveLength(2);
+  });
+
+  it('applies the color modifier class to the action row', () => {
+    const { container } = render(
+      <ConsoleOfflinePendingActionsPanel {...baseProps} />,
+    );
+    expect(
+      container.querySelector('.console-offline-panel-item-green'),
+    ).toBeInTheDocument();
+  });
+
+  it('shows PR status information when the action targets a PR and status is loaded', () => {
+    const { getByText } = render(
+      <ConsoleOfflinePendingActionsPanel
+        {...baseProps}
+        actions={[
+          {
+            ...approveAction,
+            currentPrStatus: {
+              found: true,
+              isConflicted: false,
+              mergeableStatus: 'MERGEABLE',
+              isPassedAllCiJob: true,
+              isCiStateSuccess: true,
+              isBranchOutOfDate: false,
+              missingRequiredCheckNames: [],
+            },
+          },
+        ]}
+      />,
+    );
+    expect(getByText(/CI: pass/)).toBeInTheDocument();
+    expect(getByText(/Merge: mergeable/)).toBeInTheDocument();
+  });
+
+  it('does not show PR status when offline even if currentPrStatus is set', () => {
+    const { queryByText } = render(
+      <ConsoleOfflinePendingActionsPanel
+        {...baseProps}
+        isOnline={false}
+        actions={[
+          {
+            ...approveAction,
+            currentPrStatus: {
+              found: true,
+              isConflicted: false,
+              mergeableStatus: 'MERGEABLE',
+              isPassedAllCiJob: true,
+              isCiStateSuccess: true,
+              isBranchOutOfDate: false,
+              missingRequiredCheckNames: [],
+            },
+          },
+        ]}
+      />,
+    );
+    expect(queryByText(/CI: pass/)).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,123 @@
+import type { ConsoleToastColor } from '../../logic/actionToast';
+import type { ConsolePullRequestStatus } from '../../logic/types';
+
+export type ConsoleOfflinePendingActionItem = {
+  id: string;
+  message: string;
+  color: ConsoleToastColor;
+  itemNumber: number;
+  isPr: boolean;
+  currentTitle: string | null;
+  currentState: 'open' | 'closed' | null;
+  currentPrStatus: ConsolePullRequestStatus | null;
+  fetchError: boolean;
+};
+
+export type ConsoleOfflinePendingActionsPanelProps = {
+  actions: ConsoleOfflinePendingActionItem[];
+  isOnline: boolean;
+  isConfirming: boolean;
+  onConfirm: (id: string) => void;
+  onDiscard: (id: string) => void;
+};
+
+const itemLabel = (item: ConsoleOfflinePendingActionItem): string =>
+  `${item.isPr ? 'PR' : 'Issue'} #${item.itemNumber}`;
+
+const stateLabel = (state: 'open' | 'closed' | null): string => {
+  if (state === null) return 'loading…';
+  return state;
+};
+
+const prStatusLabel = (prStatus: ConsolePullRequestStatus): string => {
+  const parts: string[] = [];
+  parts.push(`CI: ${prStatus.isCiStateSuccess ? 'pass' : 'fail'}`);
+  parts.push(`Merge: ${prStatus.mergeableStatus.toLowerCase()}`);
+  if (prStatus.isBranchOutOfDate) {
+    parts.push('branch out of date');
+  }
+  return parts.join(' · ');
+};
+
+const targetText = (action: ConsoleOfflinePendingActionItem): string => {
+  if (action.fetchError) {
+    return `${itemLabel(action)} — failed to load current state`;
+  }
+  if (action.currentTitle === null) {
+    return `${itemLabel(action)} — loading current state…`;
+  }
+  return `${itemLabel(action)} — ${action.currentTitle} (${stateLabel(action.currentState)})`;
+};
+
+export const ConsoleOfflinePendingActionsPanel = ({
+  actions,
+  isOnline,
+  isConfirming,
+  onConfirm,
+  onDiscard,
+}: ConsoleOfflinePendingActionsPanelProps) => {
+  if (actions.length === 0) return null;
+
+  return (
+    <section
+      className="console-offline-panel"
+      aria-label="Offline actions queue"
+    >
+      <div className="console-offline-panel-header">
+        {actions.length} action{actions.length !== 1 ? 's' : ''} held
+        {isOnline
+          ? ' — confirm each before sending'
+          : ' — awaiting connectivity'}
+      </div>
+      {actions.map((action) => (
+        <div
+          key={action.id}
+          className={`console-offline-panel-item console-offline-panel-item-${action.color}`}
+        >
+          <div className="console-offline-panel-item-message">
+            {action.message}
+          </div>
+          <div className="console-offline-panel-item-target">
+            {targetText(action)}
+          </div>
+          {action.fetchError && (
+            <div className="console-offline-panel-item-fetch-error">
+              Failed to load current state — sending will act on the last known
+              state
+            </div>
+          )}
+          {isOnline &&
+            action.isPr &&
+            action.currentPrStatus !== null &&
+            !action.fetchError && (
+              <div className="console-offline-panel-item-pr-status">
+                {prStatusLabel(action.currentPrStatus)}
+              </div>
+            )}
+          <div className="console-offline-panel-item-controls">
+            {isOnline && (
+              <button
+                type="button"
+                className="console-offline-panel-confirm"
+                disabled={
+                  isConfirming ||
+                  (action.currentTitle === null && !action.fetchError)
+                }
+                onClick={() => onConfirm(action.id)}
+              >
+                Send
+              </button>
+            )}
+            <button
+              type="button"
+              className="console-offline-panel-discard"
+              onClick={() => onDiscard(action.id)}
+            >
+              Discard
+            </button>
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+};

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

@@ -1,6 +1,23 @@
 import { act, renderHook } from '@testing-library/react';
 import { useConsoleActionQueue } from './useConsoleActionQueue';
 
+const OFFLINE_QUEUE_STORAGE_KEY = 'console-offline-action-queue';
+
+const offlinePayload = {
+  itemUrl: 'https://github.com/o/r/pull/851',
+  projectItemId: 'PVTI_1',
+  itemNumber: 851,
+  repo: 'o/r',
+  isPr: true,
+  apiPath: '/api/review',
+  requestBody: {
+    pjcode: 'acme',
+    action: 'approve',
+    prUrl: 'https://github.com/o/r/pull/851',
+    projectItemId: 'PVTI_1',
+  },
+};
+
 const makeAction = (
   overrides: Partial<
     Parameters<ReturnType<typeof useConsoleActionQueue>['enqueue']>[0]
@@ -19,10 +36,12 @@ const flushMicrotasks = (): Promise<void> =>
 describe('useConsoleActionQueue', () => {
   beforeEach(() => {
     jest.useFakeTimers();
+    localStorage.clear();
   });
 
   afterEach(() => {
     jest.useRealTimers();
+    localStorage.clear();
   });
 
   it('advances immediately but only commits after the five second window', () => {
@@ -212,4 +231,268 @@ describe('useConsoleActionQueue', () => {
     });
     expect(result.current.pending).toBeNull();
   });
+  it('adds the action to the offline queue when the commit rejects with a network error', async () => {
+    const { result } = renderHook(() => useConsoleActionQueue());
+    const action = makeAction({
+      commit: jest
+        .fn<Promise<void>, []>()
+        .mockRejectedValue(new TypeError('Failed to fetch')),
+      offline: offlinePayload,
+    });
+    act(() => {
+      result.current.enqueue(action);
+    });
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+      await flushMicrotasks();
+    });
+    expect(result.current.error).toBeNull();
+    expect(result.current.offlineActions).toHaveLength(1);
+    expect(result.current.offlineActions[0].message).toBe('Approved — PR #851');
+    expect(result.current.offlineActions[0].apiPath).toBe('/api/review');
+  });
+
+  it('surfaces a server error as an error rather than queuing it offline', async () => {
+    const { result } = renderHook(() => useConsoleActionQueue());
+    const action = makeAction({
+      commit: jest
+        .fn<Promise<void>, []>()
+        .mockRejectedValue(new Error('HTTP 422 review cannot be requested')),
+      offline: offlinePayload,
+    });
+    act(() => {
+      result.current.enqueue(action);
+    });
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+      await flushMicrotasks();
+    });
+    expect(result.current.error).toEqual({
+      message: 'Approved — PR #851',
+      reason: 'HTTP 422 review cannot be requested',
+    });
+    expect(result.current.offlineActions).toHaveLength(0);
+  });
+
+  it('keeps the offline queue in localStorage so it survives a remount', async () => {
+    const { result, unmount } = renderHook(() => useConsoleActionQueue());
+    const action = makeAction({
+      commit: jest
+        .fn<Promise<void>, []>()
+        .mockRejectedValue(new TypeError('Failed to fetch')),
+      offline: offlinePayload,
+    });
+    act(() => {
+      result.current.enqueue(action);
+    });
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+      await flushMicrotasks();
+    });
+    expect(result.current.offlineActions).toHaveLength(1);
+    unmount();
+
+    const { result: result2 } = renderHook(() => useConsoleActionQueue());
+    expect(result2.current.offlineActions).toHaveLength(1);
+    expect(result2.current.offlineActions[0].message).toBe(
+      'Approved — PR #851',
+    );
+  });
+
+  it('does not send anything before confirmOfflineAction is called', async () => {
+    const fetchMock = jest.fn();
+    global.fetch = fetchMock as unknown as typeof fetch;
+    const { result } = renderHook(() => useConsoleActionQueue());
+    const action = makeAction({
+      commit: jest
+        .fn<Promise<void>, []>()
+        .mockRejectedValue(new TypeError('Failed to fetch')),
+      offline: offlinePayload,
+    });
+    act(() => {
+      result.current.enqueue(action);
+    });
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+      await flushMicrotasks();
+    });
+    expect(result.current.offlineActions).toHaveLength(1);
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('sends the stored request and removes the action when confirmOfflineAction is called', async () => {
+    const fetchMock = jest.fn(async () => ({
+      ok: true,
+      status: 200,
+      json: async () => ({}),
+    }));
+    global.fetch = fetchMock as unknown as typeof fetch;
+    const { result } = renderHook(() => useConsoleActionQueue());
+    const action = makeAction({
+      commit: jest
+        .fn<Promise<void>, []>()
+        .mockRejectedValue(new TypeError('Failed to fetch')),
+      offline: offlinePayload,
+    });
+    act(() => {
+      result.current.enqueue(action);
+    });
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+      await flushMicrotasks();
+    });
+    const id = result.current.offlineActions[0].id;
+    await act(async () => {
+      await result.current.confirmOfflineAction(id);
+    });
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/review',
+      expect.objectContaining({ method: 'POST' }),
+    );
+    expect(result.current.offlineActions).toHaveLength(0);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('sets an error and keeps the action when confirmOfflineAction encounters a network error', async () => {
+    const fetchMock = jest
+      .fn()
+      .mockRejectedValue(new TypeError('Failed to fetch'));
+    global.fetch = fetchMock as unknown as typeof fetch;
+    const { result } = renderHook(() => useConsoleActionQueue());
+    const action = makeAction({
+      commit: jest
+        .fn<Promise<void>, []>()
+        .mockRejectedValue(new TypeError('Failed to fetch')),
+      offline: offlinePayload,
+    });
+    act(() => {
+      result.current.enqueue(action);
+    });
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+      await flushMicrotasks();
+    });
+    const id = result.current.offlineActions[0].id;
+    await act(async () => {
+      await result.current.confirmOfflineAction(id);
+    });
+    expect(result.current.error).toEqual({
+      message: 'Approved — PR #851',
+      reason: 'Still offline — action is still held in the queue',
+    });
+    expect(result.current.offlineActions).toHaveLength(1);
+  });
+
+  it('surfaces a server rejection from confirmOfflineAction as an error and removes the action', async () => {
+    const fetchMock = jest.fn(async () => ({
+      ok: false,
+      status: 422,
+      text: async () => 'review cannot be requested',
+    }));
+    global.fetch = fetchMock as unknown as typeof fetch;
+    const { result } = renderHook(() => useConsoleActionQueue());
+    const action = makeAction({
+      commit: jest
+        .fn<Promise<void>, []>()
+        .mockRejectedValue(new TypeError('Failed to fetch')),
+      offline: offlinePayload,
+    });
+    act(() => {
+      result.current.enqueue(action);
+    });
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+      await flushMicrotasks();
+    });
+    const id = result.current.offlineActions[0].id;
+    await act(async () => {
+      await result.current.confirmOfflineAction(id);
+    });
+    expect(result.current.error).not.toBeNull();
+    expect(result.current.offlineActions).toHaveLength(0);
+  });
+
+  it('generates a stable action id in non-secure contexts where crypto.randomUUID is unavailable', async () => {
+    const originalDescriptor = Object.getOwnPropertyDescriptor(
+      crypto,
+      'randomUUID',
+    );
+    Object.defineProperty(crypto, 'randomUUID', {
+      value: undefined,
+      configurable: true,
+    });
+    try {
+      const { result } = renderHook(() => useConsoleActionQueue());
+      const action = makeAction({
+        commit: jest
+          .fn<Promise<void>, []>()
+          .mockRejectedValue(new TypeError('Failed to fetch')),
+        offline: offlinePayload,
+      });
+      act(() => {
+        result.current.enqueue(action);
+      });
+      await act(async () => {
+        jest.advanceTimersByTime(5000);
+        await flushMicrotasks();
+      });
+      expect(result.current.offlineActions).toHaveLength(1);
+      expect(typeof result.current.offlineActions[0].id).toBe('string');
+      expect(result.current.offlineActions[0].id.length).toBeGreaterThan(0);
+    } finally {
+      if (originalDescriptor !== undefined) {
+        Object.defineProperty(crypto, 'randomUUID', originalDescriptor);
+      }
+    }
+  });
+
+  it('skips malformed entries when loading the offline queue from localStorage', () => {
+    const malformed = [
+      { id: 'a', message: 'ok' },
+      {
+        id: 'b',
+        message: 'valid',
+        color: 'green',
+        enqueuedAt: 1,
+        itemUrl: 'https://github.com/o/r/pull/1',
+        projectItemId: 'PVTI_1',
+        itemNumber: 1,
+        repo: 'o/r',
+        isPr: true,
+        apiPath: '/api/review',
+        requestBody: { action: 'approve' },
+      },
+      null,
+    ];
+    localStorage.setItem(OFFLINE_QUEUE_STORAGE_KEY, JSON.stringify(malformed));
+    const { result } = renderHook(() => useConsoleActionQueue());
+    expect(result.current.offlineActions).toHaveLength(1);
+    expect(result.current.offlineActions[0].id).toBe('b');
+  });
+
+  it('removes the action from localStorage when discardOfflineAction is called', async () => {
+    const { result } = renderHook(() => useConsoleActionQueue());
+    const action = makeAction({
+      commit: jest
+        .fn<Promise<void>, []>()
+        .mockRejectedValue(new TypeError('Failed to fetch')),
+      offline: offlinePayload,
+    });
+    act(() => {
+      result.current.enqueue(action);
+    });
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+      await flushMicrotasks();
+    });
+    const id = result.current.offlineActions[0].id;
+    act(() => {
+      result.current.discardOfflineAction(id);
+    });
+    expect(result.current.offlineActions).toHaveLength(0);
+    const stored: unknown[] = JSON.parse(
+      localStorage.getItem(OFFLINE_QUEUE_STORAGE_KEY) ?? '[]',
+    );
+    expect(stored).toHaveLength(0);
+  });
 });