github-issue-tower-defence-management 1.184.0 → 1.185.0

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

@@ -19,6 +19,11 @@ const storyEntries: ConsoleStoryEntry[] = [
   },
 ];
 
+const defaultProps = {
+  onCreateIssue: () => Promise.resolve(),
+  onAddStory: () => Promise.resolve(),
+};
+
 describe('ConsoleStoryList', () => {
   it('renders each story name and its open item count', () => {
     const { getByText } = render(
@@ -26,7 +31,7 @@ describe('ConsoleStoryList', () => {
         stories={storyEntries}
         isLoading={false}
         error={null}
-        onCreateIssue={() => Promise.resolve()}
+        {...defaultProps}
       />,
     );
     expect(getByText('TDPM Console port')).toBeInTheDocument();
@@ -41,7 +46,7 @@ describe('ConsoleStoryList', () => {
         stories={storyEntries}
         isLoading={false}
         error={null}
-        onCreateIssue={() => Promise.resolve()}
+        {...defaultProps}
       />,
     );
     const buttons = getAllByRole('button', { name: 'Add task' });
@@ -54,7 +59,7 @@ describe('ConsoleStoryList', () => {
         stories={storyEntries}
         isLoading={false}
         error={null}
-        onCreateIssue={() => Promise.resolve()}
+        {...defaultProps}
       />,
     );
     const [firstButton] = getAllByRole('button', { name: 'Add task' });
@@ -68,7 +73,7 @@ describe('ConsoleStoryList', () => {
         stories={storyEntries}
         isLoading={false}
         error={null}
-        onCreateIssue={() => Promise.resolve()}
+        {...defaultProps}
       />,
     );
     const [firstButton] = getAllByRole('button', { name: 'Add task' });
@@ -85,6 +90,7 @@ describe('ConsoleStoryList', () => {
         isLoading={false}
         error={null}
         onCreateIssue={onCreateIssue}
+        onAddStory={() => Promise.resolve()}
       />,
     );
     fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
@@ -106,7 +112,7 @@ describe('ConsoleStoryList', () => {
         stories={storyEntries}
         isLoading={false}
         error={null}
-        onCreateIssue={() => Promise.resolve()}
+        {...defaultProps}
       />,
     );
     fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
@@ -127,6 +133,7 @@ describe('ConsoleStoryList', () => {
         isLoading={false}
         error={null}
         onCreateIssue={onCreateIssue}
+        onAddStory={() => Promise.resolve()}
       />,
     );
     fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
@@ -149,6 +156,7 @@ describe('ConsoleStoryList', () => {
         isLoading={false}
         error={null}
         onCreateIssue={onCreateIssue}
+        onAddStory={() => Promise.resolve()}
       />,
     );
     fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
@@ -165,7 +173,7 @@ describe('ConsoleStoryList', () => {
         stories={[]}
         isLoading={true}
         error={null}
-        onCreateIssue={() => Promise.resolve()}
+        {...defaultProps}
       />,
     );
     expect(getByText('Loading stories...')).toBeInTheDocument();
@@ -177,7 +185,7 @@ describe('ConsoleStoryList', () => {
         stories={[]}
         isLoading={false}
         error={null}
-        onCreateIssue={() => Promise.resolve()}
+        {...defaultProps}
       />,
     );
     expect(getByText('No active stories')).toBeInTheDocument();
@@ -189,7 +197,7 @@ describe('ConsoleStoryList', () => {
         stories={[]}
         isLoading={false}
         error="HTTP 503"
-        onCreateIssue={() => Promise.resolve()}
+        {...defaultProps}
       />,
     );
     expect(getByRole('alert')).toBeInTheDocument();
@@ -209,6 +217,7 @@ describe('ConsoleStoryList', () => {
         isLoading={false}
         error={null}
         onCreateIssue={() => Promise.resolve()}
+        onAddStory={() => Promise.resolve()}
       />,
     );
     const nameEl = getByText('TDPM Console port');
@@ -222,6 +231,7 @@ describe('ConsoleStoryList', () => {
         isLoading={false}
         error={null}
         onCreateIssue={() => Promise.resolve()}
+        onAddStory={() => Promise.resolve()}
       />,
     );
     const nameEl = getByText('TDPM Console port');
@@ -242,6 +252,7 @@ describe('ConsoleStoryList', () => {
         isLoading={false}
         error={null}
         onCreateIssue={() => Promise.resolve()}
+        onAddStory={() => Promise.resolve()}
       />,
     );
     const nameEl = getByText('TDPM Console port');
@@ -253,4 +264,112 @@ describe('ConsoleStoryList', () => {
     expect(nameEl).toHaveAttribute('target', '_blank');
     expect(nameEl).toHaveAttribute('rel', 'noopener noreferrer');
   });
+
+  it('renders an Add story button', () => {
+    const { getByRole } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        {...defaultProps}
+      />,
+    );
+    expect(getByRole('button', { name: 'Add story' })).toBeInTheDocument();
+  });
+
+  it('shows the Add story form when Add story button is clicked', () => {
+    const { getByRole, getByPlaceholderText } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        {...defaultProps}
+      />,
+    );
+    fireEvent.click(getByRole('button', { name: 'Add story' }));
+    expect(getByPlaceholderText('Story name')).toBeInTheDocument();
+  });
+
+  it('hides the Add story form when Add story button is clicked again', () => {
+    const { getByRole, queryByPlaceholderText } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        {...defaultProps}
+      />,
+    );
+    fireEvent.click(getByRole('button', { name: 'Add story' }));
+    fireEvent.click(getByRole('button', { name: 'Add story' }));
+    expect(queryByPlaceholderText('Story name')).toBeNull();
+  });
+
+  it('calls onAddStory with the story name and closes the form on success', async () => {
+    const onAddStory = jest.fn().mockResolvedValue(undefined);
+    const { getByRole, getByPlaceholderText, queryByPlaceholderText } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        onCreateIssue={() => Promise.resolve()}
+        onAddStory={onAddStory}
+      />,
+    );
+    fireEvent.click(getByRole('button', { name: 'Add story' }));
+    fireEvent.change(getByPlaceholderText('Story name'), {
+      target: { value: 'My new story' },
+    });
+    fireEvent.click(getByRole('button', { name: 'Create' }));
+    await waitFor(() =>
+      expect(onAddStory).toHaveBeenCalledWith('My new story'),
+    );
+    await waitFor(() =>
+      expect(queryByPlaceholderText('Story name')).toBeNull(),
+    );
+  });
+
+  it('shows a validation error when Add story Create is clicked with an empty name', () => {
+    const { getByRole, getByText } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        {...defaultProps}
+      />,
+    );
+    fireEvent.click(getByRole('button', { name: 'Add story' }));
+    fireEvent.click(getByRole('button', { name: 'Create' }));
+    expect(getByText('Story name is required')).toBeInTheDocument();
+  });
+
+  it('shows an API error when onAddStory rejects', async () => {
+    const onAddStory = jest.fn().mockRejectedValue(new Error('API failure'));
+    const { getByRole, getByPlaceholderText, getByText } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        onCreateIssue={() => Promise.resolve()}
+        onAddStory={onAddStory}
+      />,
+    );
+    fireEvent.click(getByRole('button', { name: 'Add story' }));
+    fireEvent.change(getByPlaceholderText('Story name'), {
+      target: { value: 'Bad story' },
+    });
+    fireEvent.click(getByRole('button', { name: 'Create' }));
+    await waitFor(() => expect(getByText('API failure')).toBeInTheDocument());
+  });
+
+  it('renders Add story button even when there are no stories', () => {
+    const { getByRole } = render(
+      <ConsoleStoryList
+        stories={[]}
+        isLoading={false}
+        error={null}
+        {...defaultProps}
+      />,
+    );
+    expect(getByRole('button', { name: 'Add story' })).toBeInTheDocument();
+  });
 });

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

@@ -2,18 +2,20 @@ import { useEffect, useRef, useState } from 'react';
 import { colorFromEnum } from '../../logic/colors';
 import type { ConsoleStoryEntry } from '../../logic/types';
 
-type StoryCreateFormProps = {
-  storyOptionId: string;
-  onSubmit: (storyOptionId: string, title: string) => Promise<void>;
+type InlineInputFormProps = {
+  placeholder: string;
+  emptyValueError: string;
+  onSubmit: (value: string) => Promise<void>;
   onCancel: () => void;
 };
 
-const StoryCreateForm = ({
-  storyOptionId,
+const InlineInputForm = ({
+  placeholder,
+  emptyValueError,
   onSubmit,
   onCancel,
-}: StoryCreateFormProps) => {
-  const [titleInput, setTitleInput] = useState('');
+}: InlineInputFormProps) => {
+  const [valueInput, setValueInput] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -23,15 +25,15 @@ const StoryCreateForm = ({
   }, []);
 
   const handleSubmit = async (): Promise<void> => {
-    const trimmed = titleInput.trim();
+    const trimmed = valueInput.trim();
     if (trimmed.length === 0) {
-      setSubmitError('Title is required');
+      setSubmitError(emptyValueError);
       return;
     }
     setSubmitting(true);
     setSubmitError(null);
     try {
-      await onSubmit(storyOptionId, trimmed);
+      await onSubmit(trimmed);
     } catch (err) {
       setSubmitError(err instanceof Error ? err.message : String(err));
     } finally {
@@ -41,7 +43,7 @@ const StoryCreateForm = ({
 
   return (
     <form
-      className="console-story-create-form"
+      className="console-inline-input-form"
       onSubmit={(event) => {
         event.preventDefault();
         void handleSubmit();
@@ -50,10 +52,10 @@ const StoryCreateForm = ({
       <input
         ref={inputRef}
         type="text"
-        className="console-story-create-input"
-        placeholder="Issue title"
-        value={titleInput}
-        onChange={(e) => setTitleInput(e.target.value)}
+        className="console-inline-input-form-input"
+        placeholder={placeholder}
+        value={valueInput}
+        onChange={(e) => setValueInput(e.target.value)}
         disabled={submitting}
       />
       <button type="submit" className="console-op-button" disabled={submitting}>
@@ -76,11 +78,31 @@ const StoryCreateForm = ({
   );
 };
 
+type StoryCreateFormProps = {
+  storyOptionId: string;
+  onSubmit: (storyOptionId: string, title: string) => Promise<void>;
+  onCancel: () => void;
+};
+
+const StoryCreateForm = ({
+  storyOptionId,
+  onSubmit,
+  onCancel,
+}: StoryCreateFormProps) => (
+  <InlineInputForm
+    placeholder="Issue title"
+    emptyValueError="Title is required"
+    onSubmit={(title) => onSubmit(storyOptionId, title)}
+    onCancel={onCancel}
+  />
+);
+
 export type ConsoleStoryListProps = {
   stories: ConsoleStoryEntry[];
   isLoading: boolean;
   error: string | null;
   onCreateIssue: (storyOptionId: string, title: string) => Promise<void>;
+  onAddStory: (storyName: string) => Promise<void>;
 };
 
 export const ConsoleStoryList = ({
@@ -88,8 +110,10 @@ export const ConsoleStoryList = ({
   isLoading,
   error,
   onCreateIssue,
+  onAddStory,
 }: ConsoleStoryListProps) => {
   const [expandedOptionId, setExpandedOptionId] = useState<string | null>(null);
+  const [addStoryExpanded, setAddStoryExpanded] = useState(false);
 
   if (error !== null) {
     return (
@@ -103,10 +127,6 @@ export const ConsoleStoryList = ({
     return <p className="console-list-message">Loading stories...</p>;
   }
 
-  if (stories.length === 0) {
-    return <p className="console-list-empty">No active stories</p>;
-  }
-
   const handleAddClick = (storyOptionId: string): void => {
     setExpandedOptionId(
       expandedOptionId === storyOptionId ? null : storyOptionId,
@@ -122,58 +142,86 @@ export const ConsoleStoryList = ({
   };
 
   return (
-    <ul className="console-story-list">
-      {stories.map((entry) => {
-        const palette = colorFromEnum(entry.color);
-        const isExpanded = expandedOptionId === entry.storyOptionId;
-        return (
-          <li key={entry.storyOptionId} className="console-story-list-row">
-            <div className="console-story-list-row-main">
-              {entry.storyViewUrl ? (
-                <a
-                  href={entry.storyViewUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="console-storytag"
-                  style={{ color: palette.fg, borderColor: palette.border }}
-                >
-                  <span
-                    className="console-story-dot"
-                    style={{ backgroundColor: palette.dot }}
+    <div className="console-story-list-container">
+      {stories.length === 0 ? (
+        <p className="console-list-empty">No active stories</p>
+      ) : (
+        <ul className="console-story-list">
+          {stories.map((entry) => {
+            const palette = colorFromEnum(entry.color);
+            const isExpanded = expandedOptionId === entry.storyOptionId;
+            return (
+              <li key={entry.storyOptionId} className="console-story-list-row">
+                <div className="console-story-list-row-main">
+                  {entry.storyViewUrl ? (
+                    <a
+                      href={entry.storyViewUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="console-storytag"
+                      style={{ color: palette.fg, borderColor: palette.border }}
+                    >
+                      <span
+                        className="console-story-dot"
+                        style={{ backgroundColor: palette.dot }}
+                      />
+                      {entry.storyName}
+                    </a>
+                  ) : (
+                    <span
+                      className="console-storytag"
+                      style={{ color: palette.fg, borderColor: palette.border }}
+                    >
+                      <span
+                        className="console-story-dot"
+                        style={{ backgroundColor: palette.dot }}
+                      />
+                      {entry.storyName}
+                    </span>
+                  )}
+                  <span className="console-story-count">
+                    {entry.openItemCount}
+                  </span>
+                  <button
+                    type="button"
+                    className="console-op-button"
+                    onClick={() => handleAddClick(entry.storyOptionId)}
+                  >
+                    Add task
+                  </button>
+                </div>
+                {isExpanded && (
+                  <StoryCreateForm
+                    storyOptionId={entry.storyOptionId}
+                    onSubmit={handleSubmit}
+                    onCancel={() => setExpandedOptionId(null)}
                   />
-                  {entry.storyName}
-                </a>
-              ) : (
-                <span
-                  className="console-storytag"
-                  style={{ color: palette.fg, borderColor: palette.border }}
-                >
-                  <span
-                    className="console-story-dot"
-                    style={{ backgroundColor: palette.dot }}
-                  />
-                  {entry.storyName}
-                </span>
-              )}
-              <span className="console-story-count">{entry.openItemCount}</span>
-              <button
-                type="button"
-                className="console-op-button"
-                onClick={() => handleAddClick(entry.storyOptionId)}
-              >
-                Add task
-              </button>
-            </div>
-            {isExpanded && (
-              <StoryCreateForm
-                storyOptionId={entry.storyOptionId}
-                onSubmit={handleSubmit}
-                onCancel={() => setExpandedOptionId(null)}
-              />
-            )}
-          </li>
-        );
-      })}
-    </ul>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      <div className="console-add-story-section">
+        <button
+          type="button"
+          className="console-op-button"
+          onClick={() => setAddStoryExpanded(!addStoryExpanded)}
+        >
+          Add story
+        </button>
+        {addStoryExpanded && (
+          <InlineInputForm
+            placeholder="Story name"
+            emptyValueError="Story name is required"
+            onSubmit={async (storyName) => {
+              await onAddStory(storyName);
+              setAddStoryExpanded(false);
+            }}
+            onCancel={() => setAddStoryExpanded(false)}
+          />
+        )}
+      </div>
+    </div>
   );
 };

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

@@ -1,5 +1,7 @@
 import {
+  ADD_STORY_OPERATION_PATH,
   createConsoleApiClient,
+  postConsoleAddStory,
   postConsoleOperation,
   postConsoleReviewComment,
 } from './consoleApi';
@@ -418,3 +420,27 @@ describe('postConsoleReviewComment', () => {
     ).rejects.toThrow('line must be part of the diff');
   });
 });
+
+describe('postConsoleAddStory', () => {
+  it('posts the story name to the addstory endpoint', async () => {
+    const fetchMock = mockFetchOnce({ ok: true });
+    await postConsoleAddStory({ pjcode: 'acme', storyName: 'My new story' });
+    const [url, init] = fetchMock.mock.calls[0];
+    expect(url).toBe(ADD_STORY_OPERATION_PATH);
+    expect(init).toMatchObject({ method: 'POST' });
+    expect(JSON.parse((init as { body: string }).body)).toEqual({
+      pjcode: 'acme',
+      storyName: 'My new story',
+    });
+  });
+
+  it('throws the error reason surfaced by the server', async () => {
+    mockFetchFailureOnce(
+      400,
+      JSON.stringify({ error: 'storyName is required' }),
+    );
+    await expect(
+      postConsoleAddStory({ pjcode: 'acme', storyName: '' }),
+    ).rejects.toThrow('storyName is required');
+  });
+});

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

@@ -374,6 +374,26 @@ export const postConsoleAttachment = async (
   return payload.markdown;
 };
 
+export const ADD_STORY_OPERATION_PATH = '/api/addstory';
+
+export type ConsoleAddStoryRequest = {
+  pjcode: string;
+  storyName: string;
+};
+
+export const postConsoleAddStory = async (
+  request: ConsoleAddStoryRequest,
+): Promise<void> => {
+  const response = await fetch(ADD_STORY_OPERATION_PATH, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request),
+  });
+  if (!response.ok) {
+    throw new Error(await readOperationErrorReason(response));
+  }
+};
+
 export const REVIEW_COMMENT_OPERATION_PATH = '/api/reviewcomment';
 
 export const postConsoleReviewComment = async (

package/src/adapter/entry-points/console/ui/src/features/console/pages/ConsolePage.tsx

@@ -21,6 +21,7 @@ import { useConsoleSwipeNavigation } from '../hooks/useConsoleSwipeNavigation';
 import { useConsoleTabData } from '../hooks/useConsoleTabData';
 import { useConsoleTimerSettings } from '../hooks/useConsoleTimerSettings';
 import {
+  postConsoleAddStory,
   postConsoleCreateIssue,
   postConsoleReorderStory,
 } from '../lib/consoleApi';
@@ -375,6 +376,16 @@ export const ConsolePage = () => {
     [pjcode, triageStoryOptions, activeSnapshot?.generatedAt],
   );
 
+  const handleStoryAdd = useCallback(
+    async (storyName: string): Promise<void> => {
+      if (pjcode === null) {
+        throw new Error('No project specified in the URL path.');
+      }
+      await postConsoleAddStory({ pjcode, storyName });
+    },
+    [pjcode],
+  );
+
   return (
     <main className="console-app">
       {actionQueue.pending !== null && (
@@ -421,6 +432,7 @@ export const ConsolePage = () => {
           isLoading={isLoading}
           error={error}
           onCreateIssue={handleCreateIssue}
+          onAddStory={handleStoryAdd}
         />
       ) : selectedItem === null ? (
         <>