github-issue-tower-defence-management 2.1.0 → 2.1.2

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

@@ -38,6 +38,7 @@ const defaultProps = {
   onAddStory: () => Promise.resolve(),
   onSelectColor: () => undefined,
   onToggleGray: () => undefined,
+  onReorderStory: () => Promise.resolve(),
   optimisticColors: {} as Record<string, ConsoleColor>,
   colorChangeInFlight: null as string | null,
   colorErrors: {} as Record<string, string>,
@@ -466,4 +467,88 @@ describe('ConsoleStoryList', () => {
       expect(getByText('No active stories')).toBeInTheDocument();
     });
   });
+
+  describe('reorder buttons', () => {
+    it('renders Move up and Move down buttons for each visible story', () => {
+      const { getAllByRole } = render(<ConsoleStoryList {...defaultProps} />);
+      const upButtons = getAllByRole('button', { name: 'Move up' });
+      const downButtons = getAllByRole('button', { name: 'Move down' });
+      expect(upButtons).toHaveLength(storyEntries.length);
+      expect(downButtons).toHaveLength(storyEntries.length);
+    });
+
+    it('disables the Move up button for the first story', () => {
+      const { getAllByRole } = render(<ConsoleStoryList {...defaultProps} />);
+      const upButtons = getAllByRole('button', { name: 'Move up' });
+      expect(upButtons[0]).toBeDisabled();
+      expect(upButtons[1]).not.toBeDisabled();
+    });
+
+    it('disables the Move down button for the last story', () => {
+      const { getAllByRole } = render(<ConsoleStoryList {...defaultProps} />);
+      const downButtons = getAllByRole('button', { name: 'Move down' });
+      expect(downButtons[0]).not.toBeDisabled();
+      expect(downButtons[1]).toBeDisabled();
+    });
+
+    it('calls onReorderStory with storyOptionId and up when Move up is clicked', async () => {
+      const onReorderStory = jest.fn().mockResolvedValue(undefined);
+      const { getAllByRole } = render(
+        <ConsoleStoryList {...defaultProps} onReorderStory={onReorderStory} />,
+      );
+      const upButtons = getAllByRole('button', { name: 'Move up' });
+      await act(async () => {
+        fireEvent.click(upButtons[1]);
+      });
+      expect(onReorderStory).toHaveBeenCalledWith('564803ee', 'up');
+    });
+
+    it('calls onReorderStory with storyOptionId and down when Move down is clicked', async () => {
+      const onReorderStory = jest.fn().mockResolvedValue(undefined);
+      const { getAllByRole } = render(
+        <ConsoleStoryList {...defaultProps} onReorderStory={onReorderStory} />,
+      );
+      const downButtons = getAllByRole('button', { name: 'Move down' });
+      await act(async () => {
+        fireEvent.click(downButtons[0]);
+      });
+      expect(onReorderStory).toHaveBeenCalledWith('1491051e', 'down');
+    });
+
+    it('disables Move up and Move down buttons while reorder is in progress', async () => {
+      let resolveReorder: () => void;
+      const reorderPromise = new Promise<void>((resolve) => {
+        resolveReorder = resolve;
+      });
+      const onReorderStory = jest.fn().mockReturnValue(reorderPromise);
+      const { getAllByRole } = render(
+        <ConsoleStoryList {...defaultProps} onReorderStory={onReorderStory} />,
+      );
+      const downButtons = getAllByRole('button', { name: 'Move down' });
+      fireEvent.click(downButtons[0]);
+      await waitFor(() => {
+        const upButtons = getAllByRole('button', { name: 'Move up' });
+        expect(upButtons[0]).toBeDisabled();
+        expect(downButtons[0]).toBeDisabled();
+      });
+      await act(async () => {
+        resolveReorder!();
+      });
+    });
+
+    it('shows an error message when onReorderStory throws', async () => {
+      const onReorderStory = jest
+        .fn()
+        .mockRejectedValue(new Error('Reorder failed'));
+      const { getAllByRole, findByRole } = render(
+        <ConsoleStoryList {...defaultProps} onReorderStory={onReorderStory} />,
+      );
+      const downButtons = getAllByRole('button', { name: 'Move down' });
+      await act(async () => {
+        fireEvent.click(downButtons[0]);
+      });
+      const alert = await findByRole('alert');
+      expect(alert).toHaveTextContent('Reorder failed');
+    });
+  });
 });

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

@@ -3,6 +3,11 @@ import { CONSOLE_COLOR_PALETTE, colorFromEnum } from '../../logic/colors';
 import type { ConsoleColor, ConsoleStoryEntry } from '../../logic/types';
 import { ConsoleCopyStoryNameButton } from './ConsoleCopyStoryNameButton';
 
+type RowReorderState = {
+  inProgress: boolean;
+  error: string | null;
+};
+
 const ALL_COLORS = Object.keys(CONSOLE_COLOR_PALETTE) as ConsoleColor[];
 
 type InlineInputFormProps = {
@@ -137,6 +142,10 @@ export type ConsoleStoryListProps = {
   onAddStory: (storyName: string) => Promise<void>;
   onSelectColor: (storyOptionId: string, newColor: ConsoleColor) => void;
   onToggleGray: () => void;
+  onReorderStory: (
+    storyOptionId: string,
+    direction: 'up' | 'down',
+  ) => Promise<void>;
   optimisticColors: Record<string, ConsoleColor>;
   colorChangeInFlight: string | null;
   colorErrors: Record<string, string>;
@@ -151,6 +160,7 @@ export const ConsoleStoryList = ({
   onAddStory,
   onSelectColor,
   onToggleGray,
+  onReorderStory,
   optimisticColors,
   colorChangeInFlight,
   colorErrors,
@@ -160,6 +170,37 @@ export const ConsoleStoryList = ({
   const [colorPickerOptionId, setColorPickerOptionId] = useState<string | null>(
     null,
   );
+  const [rowReorderStates, setRowReorderStates] = useState<
+    Record<string, RowReorderState>
+  >({});
+
+  const getRowReorderState = (id: string): RowReorderState =>
+    rowReorderStates[id] ?? { inProgress: false, error: null };
+
+  const handleReorder = async (
+    storyOptionId: string,
+    direction: 'up' | 'down',
+  ): Promise<void> => {
+    setRowReorderStates((prev) => ({
+      ...prev,
+      [storyOptionId]: { inProgress: true, error: null },
+    }));
+    try {
+      await onReorderStory(storyOptionId, direction);
+      setRowReorderStates((prev) => ({
+        ...prev,
+        [storyOptionId]: { inProgress: false, error: null },
+      }));
+    } catch (err) {
+      setRowReorderStates((prev) => ({
+        ...prev,
+        [storyOptionId]: {
+          inProgress: false,
+          error: err instanceof Error ? err.message : String(err),
+        },
+      }));
+    }
+  };
 
   if (error !== null) {
     return (
@@ -212,7 +253,7 @@ export const ConsoleStoryList = ({
         <p className="console-list-empty">No active stories</p>
       ) : (
         <ul className="console-story-list">
-          {visibleStories.map((entry) => {
+          {visibleStories.map((entry, index) => {
             const displayColor: ConsoleColor =
               optimisticColors[entry.storyOptionId] ?? entry.color;
             const palette = colorFromEnum(displayColor);
@@ -220,6 +261,10 @@ export const ConsoleStoryList = ({
             const isPickerOpen = colorPickerOptionId === entry.storyOptionId;
             const isInFlight = colorChangeInFlight === entry.storyOptionId;
             const colorError = colorErrors[entry.storyOptionId] ?? null;
+            const { inProgress: reorderInProgress, error: reorderError } =
+              getRowReorderState(entry.storyOptionId);
+            const isFirst = index === 0;
+            const isLast = index === visibleStories.length - 1;
             return (
               <li key={entry.storyOptionId} className="console-story-list-row">
                 <div className="console-story-list-row-main">
@@ -268,7 +313,34 @@ export const ConsoleStoryList = ({
                   >
                     Change color
                   </button>
+                  <button
+                    type="button"
+                    className="console-op-button"
+                    aria-label="Move up"
+                    disabled={isFirst || reorderInProgress}
+                    onClick={() =>
+                      void handleReorder(entry.storyOptionId, 'up')
+                    }
+                  >
+                    ↑
+                  </button>
+                  <button
+                    type="button"
+                    className="console-op-button"
+                    aria-label="Move down"
+                    disabled={isLast || reorderInProgress}
+                    onClick={() =>
+                      void handleReorder(entry.storyOptionId, 'down')
+                    }
+                  >
+                    ↓
+                  </button>
                 </div>
+                {reorderError !== null && (
+                  <p role="alert" className="console-list-error">
+                    {reorderError}
+                  </p>
+                )}
                 {isPickerOpen && (
                   <ColorPalette
                     onSelectColor={(newColor) =>

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

@@ -52,6 +52,7 @@ import type {
   ConsoleColor,
   ConsoleListItem,
   ConsoleOverlayStatus,
+  ConsoleStoryEntry,
   ConsoleTabName,
 } from '../logic/types';
 import { CONSOLE_TABS } from '../logic/types';
@@ -185,6 +186,11 @@ export const ConsolePage = () => {
     stories: typeof storyOptions;
   } | null>(null);
 
+  const [localStoryEntriesOverride, setLocalStoryEntriesOverride] = useState<{
+    generatedAt: string | undefined;
+    stories: ConsoleStoryEntry[];
+  } | null>(null);
+
   const triageStoryOptions =
     localStoryOptionsOverride !== null &&
     localStoryOptionsOverride.generatedAt === activeSnapshot?.generatedAt
@@ -347,7 +353,12 @@ export const ConsolePage = () => {
   }, []);
 
   const storiesSnapshot = snapshots.stories;
-  const storyEntries = storiesSnapshot?.stories ?? [];
+  const rawStoryEntries = storiesSnapshot?.stories ?? [];
+  const storyEntries =
+    localStoryEntriesOverride !== null &&
+    localStoryEntriesOverride.generatedAt === storiesSnapshot?.generatedAt
+      ? localStoryEntriesOverride.stories
+      : rawStoryEntries;
   const defaultNameWithOwner = storiesSnapshot?.defaultNameWithOwner ?? null;
 
   const handleCreateIssue = useCallback(
@@ -374,24 +385,49 @@ export const ConsolePage = () => {
         throw new Error('No project specified in the URL path.');
       }
       await postConsoleReorderStory({ pjcode, storyOptionId, direction });
-      const index = triageStoryOptions.findIndex((o) => o.id === storyOptionId);
-      if (index === -1) {
-        return;
+      const triageIndex = triageStoryOptions.findIndex(
+        (o) => o.id === storyOptionId,
+      );
+      if (triageIndex !== -1) {
+        const triageSwapIndex = triageIndex + (direction === 'up' ? -1 : 1);
+        if (
+          triageSwapIndex >= 0 &&
+          triageSwapIndex < triageStoryOptions.length
+        ) {
+          const nextTriage = [...triageStoryOptions];
+          const triageTemp = nextTriage[triageIndex];
+          nextTriage[triageIndex] = nextTriage[triageSwapIndex];
+          nextTriage[triageSwapIndex] = triageTemp;
+          setLocalStoryOptionsOverride({
+            generatedAt: activeSnapshot?.generatedAt,
+            stories: nextTriage,
+          });
+        }
       }
-      const swapIndex = index + (direction === 'up' ? -1 : 1);
-      if (swapIndex < 0 || swapIndex >= triageStoryOptions.length) {
-        return;
+      const entryIndex = storyEntries.findIndex(
+        (e) => e.storyOptionId === storyOptionId,
+      );
+      if (entryIndex !== -1) {
+        const entrySwapIndex = entryIndex + (direction === 'up' ? -1 : 1);
+        if (entrySwapIndex >= 0 && entrySwapIndex < storyEntries.length) {
+          const nextEntries = [...storyEntries];
+          const entryTemp = nextEntries[entryIndex];
+          nextEntries[entryIndex] = nextEntries[entrySwapIndex];
+          nextEntries[entrySwapIndex] = entryTemp;
+          setLocalStoryEntriesOverride({
+            generatedAt: storiesSnapshot?.generatedAt,
+            stories: nextEntries,
+          });
+        }
       }
-      const next = [...triageStoryOptions];
-      const temp = next[index];
-      next[index] = next[swapIndex];
-      next[swapIndex] = temp;
-      setLocalStoryOptionsOverride({
-        generatedAt: activeSnapshot?.generatedAt,
-        stories: next,
-      });
     },
-    [pjcode, triageStoryOptions, activeSnapshot?.generatedAt],
+    [
+      pjcode,
+      triageStoryOptions,
+      storyEntries,
+      activeSnapshot?.generatedAt,
+      storiesSnapshot?.generatedAt,
+    ],
   );
 
   const handleStoryAdd = useCallback(
@@ -523,6 +559,7 @@ export const ConsolePage = () => {
           onAddStory={handleStoryAdd}
           onSelectColor={handleSelectColor}
           onToggleGray={handleToggleGray}
+          onReorderStory={handleReorderStory}
           optimisticColors={storyOptimisticColors}
           colorChangeInFlight={storyColorChangeInFlight}
           colorErrors={storyColorErrors}