github-issue-tower-defence-management 2.19.1 → 2.19.2

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

@@ -1,400 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-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 = {
-  placeholder: string;
-  emptyValueError: string;
-  onSubmit: (value: string) => Promise<void>;
-  onCancel: () => void;
-};
-
-const InlineInputForm = ({
-  placeholder,
-  emptyValueError,
-  onSubmit,
-  onCancel,
-}: InlineInputFormProps) => {
-  const [valueInput, setValueInput] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-  const [submitError, setSubmitError] = useState<string | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  const handleSubmit = async (): Promise<void> => {
-    const trimmed = valueInput.trim();
-    if (trimmed.length === 0) {
-      setSubmitError(emptyValueError);
-      return;
-    }
-    setSubmitting(true);
-    setSubmitError(null);
-    try {
-      await onSubmit(trimmed);
-    } catch (err) {
-      setSubmitError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <form
-      className="console-inline-input-form"
-      onSubmit={(event) => {
-        event.preventDefault();
-        void handleSubmit();
-      }}
-    >
-      <input
-        ref={inputRef}
-        type="text"
-        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}>
-        {submitting ? 'Creating…' : 'Create'}
-      </button>
-      <button
-        type="button"
-        className="console-op-button"
-        onClick={onCancel}
-        disabled={submitting}
-      >
-        Cancel
-      </button>
-      {submitError !== null && (
-        <p role="alert" className="console-list-error">
-          {submitError}
-        </p>
-      )}
-    </form>
-  );
-};
-
-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}
-  />
-);
-
-type ColorPaletteProps = {
-  onSelectColor: (color: ConsoleColor) => void;
-  disabled: boolean;
-};
-
-const ColorPalette = ({ onSelectColor, disabled }: ColorPaletteProps) => (
-  <div className="console-story-color-palette">
-    {ALL_COLORS.map((color) => {
-      const palette = CONSOLE_COLOR_PALETTE[color];
-      return (
-        <button
-          key={color}
-          type="button"
-          className="console-story-color-swatch"
-          aria-label={color === 'GRAY' ? `${color} (disable)` : color}
-          style={{ backgroundColor: palette.dot }}
-          onClick={() => onSelectColor(color)}
-          disabled={disabled}
-        >
-          {color === 'GRAY' && (
-            <span className="console-story-color-swatch-label">disable</span>
-          )}
-        </button>
-      );
-    })}
-  </div>
-);
-
-export type ConsoleStoryListProps = {
-  stories: ConsoleStoryEntry[];
-  isLoading: boolean;
-  error: string | null;
-  showGray: boolean;
-  onCreateIssue: (storyOptionId: string, title: string) => Promise<void>;
-  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>;
-};
-
-export const ConsoleStoryList = ({
-  stories,
-  isLoading,
-  error,
-  showGray,
-  onCreateIssue,
-  onAddStory,
-  onSelectColor,
-  onToggleGray,
-  onReorderStory,
-  optimisticColors,
-  colorChangeInFlight,
-  colorErrors,
-}: ConsoleStoryListProps) => {
-  const [expandedOptionId, setExpandedOptionId] = useState<string | null>(null);
-  const [addStoryExpanded, setAddStoryExpanded] = useState(false);
-  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 (
-      <p role="alert" className="console-list-message console-list-error">
-        Failed to load stories: {error}
-      </p>
-    );
-  }
-
-  if (isLoading) {
-    return <p className="console-list-message">Loading stories...</p>;
-  }
-
-  const handleAddClick = (storyOptionId: string): void => {
-    setExpandedOptionId(
-      expandedOptionId === storyOptionId ? null : storyOptionId,
-    );
-  };
-
-  const handleSubmit = async (
-    storyOptionId: string,
-    title: string,
-  ): Promise<void> => {
-    await onCreateIssue(storyOptionId, title);
-    setExpandedOptionId(null);
-  };
-
-  const handleColorButtonClick = (storyOptionId: string): void => {
-    setColorPickerOptionId(
-      colorPickerOptionId === storyOptionId ? null : storyOptionId,
-    );
-  };
-
-  const handleSwatchClick = (
-    storyOptionId: string,
-    newColor: ConsoleColor,
-  ): void => {
-    setColorPickerOptionId(null);
-    onSelectColor(storyOptionId, newColor);
-  };
-
-  const visibleStories = showGray
-    ? stories
-    : stories.filter((s) => s.color !== 'GRAY');
-  const hasGrayStories = stories.some((s) => s.color === 'GRAY');
-
-  return (
-    <div className="console-story-list-container">
-      {visibleStories.length === 0 ? (
-        <p className="console-list-empty">No active stories</p>
-      ) : (
-        <ul className="console-story-list">
-          {visibleStories.map((entry, index) => {
-            const displayColor: ConsoleColor =
-              optimisticColors[entry.storyOptionId] ?? entry.color;
-            const palette = colorFromEnum(displayColor);
-            const isExpanded = expandedOptionId === entry.storyOptionId;
-            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">
-                  {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>
-                  )}
-                  <ConsoleCopyStoryNameButton storyName={entry.storyName} />
-                  <span className="console-story-count">
-                    {entry.openItemCount}
-                  </span>
-                  <button
-                    type="button"
-                    className="console-op-button"
-                    onClick={() => handleAddClick(entry.storyOptionId)}
-                  >
-                    Add task
-                  </button>
-                  <button
-                    type="button"
-                    className="console-op-button"
-                    onClick={() => handleColorButtonClick(entry.storyOptionId)}
-                    disabled={isInFlight}
-                  >
-                    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) =>
-                      handleSwatchClick(entry.storyOptionId, newColor)
-                    }
-                    disabled={isInFlight}
-                  />
-                )}
-                {colorError !== null && (
-                  <p role="alert" className="console-list-error">
-                    {colorError}
-                  </p>
-                )}
-                {isExpanded && (
-                  <StoryCreateForm
-                    storyOptionId={entry.storyOptionId}
-                    onSubmit={handleSubmit}
-                    onCancel={() => setExpandedOptionId(null)}
-                  />
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      )}
-      {hasGrayStories && (
-        <button
-          type="button"
-          className="console-op-button"
-          onClick={onToggleGray}
-        >
-          {showGray ? 'Hide archived' : 'Show archived'}
-        </button>
-      )}
-      <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/components/list/ConsoleStoryReorderPanel.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ConsoleStoryReorderPanel } from './ConsoleStoryReorderPanel';
-
-const stories = [
-  { id: '1491051e', name: 'TDPM Console port', color: 'BLUE' as const },
-  {
-    id: 'f7cd5cbc',
-    name: 'Publish product documentation site',
-    color: 'GREEN' as const,
-  },
-  { id: 'a3b9c4d2', name: 'regular / WORKFLOW BLOCKER', color: 'RED' as const },
-];
-
-const meta: Meta<typeof ConsoleStoryReorderPanel> = {
-  title: 'Console/ConsoleStoryReorderPanel',
-  component: ConsoleStoryReorderPanel,
-  args: { onReorderStory: () => Promise.resolve() },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ConsoleStoryReorderPanel>;
-
-export const Default: Story = {
-  args: { stories },
-};
-
-export const SingleStory: Story = {
-  args: { stories: [stories[0]] },
-};

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

@@ -1,111 +0,0 @@
-import { fireEvent, render, waitFor } from '@testing-library/react';
-import type { ConsoleFieldOption } from '../../logic/types';
-import { ConsoleStoryReorderPanel } from './ConsoleStoryReorderPanel';
-
-const stories: ConsoleFieldOption[] = [
-  { id: 'opt-a', name: 'Alpha story', color: 'BLUE' },
-  { id: 'opt-b', name: 'Beta story', color: 'GREEN' },
-  { id: 'opt-c', name: 'Gamma story', color: 'RED' },
-];
-
-describe('ConsoleStoryReorderPanel', () => {
-  it('renders story names in the given order', () => {
-    const { getAllByRole } = render(
-      <ConsoleStoryReorderPanel
-        stories={stories}
-        onReorderStory={() => Promise.resolve()}
-      />,
-    );
-    const items = getAllByRole('listitem');
-    expect(items[0]).toHaveTextContent('Alpha story');
-    expect(items[1]).toHaveTextContent('Beta story');
-    expect(items[2]).toHaveTextContent('Gamma story');
-  });
-
-  it('disables up-button for the first story and down-button for the last story', () => {
-    const { getAllByRole } = render(
-      <ConsoleStoryReorderPanel
-        stories={stories}
-        onReorderStory={() => Promise.resolve()}
-      />,
-    );
-    const upButtons = getAllByRole('button', { name: 'Move up' });
-    const downButtons = getAllByRole('button', { name: 'Move down' });
-    expect(upButtons[0]).toBeDisabled();
-    expect(upButtons[1]).not.toBeDisabled();
-    expect(upButtons[2]).not.toBeDisabled();
-    expect(downButtons[0]).not.toBeDisabled();
-    expect(downButtons[1]).not.toBeDisabled();
-    expect(downButtons[2]).toBeDisabled();
-  });
-
-  it('calls onReorderStory with storyOptionId and "up" when up-button clicked on a non-first story', async () => {
-    const onReorderStory = jest.fn().mockResolvedValue(undefined);
-    const { getAllByRole } = render(
-      <ConsoleStoryReorderPanel
-        stories={stories}
-        onReorderStory={onReorderStory}
-      />,
-    );
-    const upButtons = getAllByRole('button', { name: 'Move up' });
-    fireEvent.click(upButtons[1]);
-    await waitFor(() => expect(onReorderStory).toHaveBeenCalledTimes(1));
-    expect(onReorderStory).toHaveBeenCalledWith('opt-b', 'up');
-  });
-
-  it('calls onReorderStory with storyOptionId and "down" when down-button clicked on a non-last story', async () => {
-    const onReorderStory = jest.fn().mockResolvedValue(undefined);
-    const { getAllByRole } = render(
-      <ConsoleStoryReorderPanel
-        stories={stories}
-        onReorderStory={onReorderStory}
-      />,
-    );
-    const downButtons = getAllByRole('button', { name: 'Move down' });
-    fireEvent.click(downButtons[1]);
-    await waitFor(() => expect(onReorderStory).toHaveBeenCalledTimes(1));
-    expect(onReorderStory).toHaveBeenCalledWith('opt-b', 'down');
-  });
-
-  it('disables both buttons while onReorderStory is in progress', async () => {
-    let resolveReorder: (() => void) | undefined;
-    const onReorderStory = jest.fn(
-      () =>
-        new Promise<void>((resolve) => {
-          resolveReorder = resolve;
-        }),
-    );
-    const { getAllByRole } = render(
-      <ConsoleStoryReorderPanel
-        stories={stories}
-        onReorderStory={onReorderStory}
-      />,
-    );
-    const downButtons = getAllByRole('button', { name: 'Move down' });
-    fireEvent.click(downButtons[1]);
-    await waitFor(() => expect(onReorderStory).toHaveBeenCalledTimes(1));
-    const upButtonsDuring = getAllByRole('button', { name: 'Move up' });
-    const downButtonsDuring = getAllByRole('button', { name: 'Move down' });
-    expect(upButtonsDuring[1]).toBeDisabled();
-    expect(downButtonsDuring[1]).toBeDisabled();
-    resolveReorder?.();
-    await waitFor(() => expect(upButtonsDuring[1]).not.toBeDisabled());
-  });
-
-  it('shows an error message when onReorderStory rejects', async () => {
-    const onReorderStory = jest
-      .fn()
-      .mockRejectedValue(new Error('server error'));
-    const { getAllByRole, getByRole } = render(
-      <ConsoleStoryReorderPanel
-        stories={stories}
-        onReorderStory={onReorderStory}
-      />,
-    );
-    const downButtons = getAllByRole('button', { name: 'Move down' });
-    fireEvent.click(downButtons[0]);
-    await waitFor(() =>
-      expect(getByRole('alert')).toHaveTextContent('server error'),
-    );
-  });
-});

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

@@ -1,91 +0,0 @@
-import { useState } from 'react';
-import type { ConsoleFieldOption } from '../../logic/types';
-
-export type ConsoleStoryReorderPanelProps = {
-  stories: ConsoleFieldOption[];
-  onReorderStory: (
-    storyOptionId: string,
-    direction: 'up' | 'down',
-  ) => Promise<void>;
-};
-
-type RowState = {
-  inProgress: boolean;
-  error: string | null;
-};
-
-export const ConsoleStoryReorderPanel = ({
-  stories,
-  onReorderStory,
-}: ConsoleStoryReorderPanelProps) => {
-  const [rowStates, setRowStates] = useState<Record<string, RowState>>({});
-
-  const getRowState = (id: string): RowState =>
-    rowStates[id] ?? { inProgress: false, error: null };
-
-  const handleReorder = async (
-    storyOptionId: string,
-    direction: 'up' | 'down',
-  ): Promise<void> => {
-    setRowStates((prev) => ({
-      ...prev,
-      [storyOptionId]: { inProgress: true, error: null },
-    }));
-    try {
-      await onReorderStory(storyOptionId, direction);
-      setRowStates((prev) => ({
-        ...prev,
-        [storyOptionId]: { inProgress: false, error: null },
-      }));
-    } catch (err) {
-      setRowStates((prev) => ({
-        ...prev,
-        [storyOptionId]: {
-          inProgress: false,
-          error: err instanceof Error ? err.message : String(err),
-        },
-      }));
-    }
-  };
-
-  return (
-    <ul className="console-story-reorder-panel">
-      {stories.map((story, index) => {
-        const { inProgress, error } = getRowState(story.id);
-        const isFirst = index === 0;
-        const isLast = index === stories.length - 1;
-        return (
-          <li key={story.id} className="console-story-reorder-row">
-            <button
-              type="button"
-              className="console-op-button"
-              aria-label="Move up"
-              disabled={isFirst || inProgress}
-              onClick={() => void handleReorder(story.id, 'up')}
-            >
-              ↑
-            </button>
-            <button
-              type="button"
-              className="console-op-button"
-              aria-label="Move down"
-              disabled={isLast || inProgress}
-              onClick={() => void handleReorder(story.id, 'down')}
-            >
-              ↓
-            </button>
-            <span className="console-story-reorder-name">{story.name}</span>
-            {inProgress && (
-              <span className="console-story-reorder-progress">…</span>
-            )}
-            {error !== null && (
-              <span role="alert" className="console-story-reorder-error">
-                {error}
-              </span>
-            )}
-          </li>
-        );
-      })}
-    </ul>
-  );
-};

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

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ConsoleStorySummary } from './ConsoleStorySummary';
-
-const meta: Meta<typeof ConsoleStorySummary> = {
-  title: 'Console/ConsoleStorySummary',
-  component: ConsoleStorySummary,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ConsoleStorySummary>;
-
-export const ConsolePortStory: Story = {
-  args: { story: 'TDPM Console port', count: 4, colorEnum: 'BLUE' },
-};
-
-export const RegularWorkflowStory: Story = {
-  args: {
-    story: 'regular / workflow improvement',
-    count: 12,
-    colorEnum: 'GRAY',
-  },
-};
-
-export const NoStory: Story = {
-  args: { story: '(No story)', count: 3, colorEnum: null },
-};

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

@@ -1,24 +0,0 @@
-import { render } from '@testing-library/react';
-import { ConsoleStorySummary } from './ConsoleStorySummary';
-
-describe('ConsoleStorySummary', () => {
-  it('renders the story name and count', () => {
-    const { getByText } = render(
-      <ConsoleStorySummary
-        story="TDPM Console port"
-        count={4}
-        colorEnum="BLUE"
-      />,
-    );
-    expect(getByText('TDPM Console port')).toBeInTheDocument();
-    expect(getByText('4')).toBeInTheDocument();
-  });
-
-  it('applies the dot color from the enum', () => {
-    const { container } = render(
-      <ConsoleStorySummary story="s" count={1} colorEnum="GREEN" />,
-    );
-    const dot = container.querySelector('.console-story-dot');
-    expect(dot).toHaveStyle({ backgroundColor: '#3fb950' });
-  });
-});