JACoB PR for Issue Implement Step Navigation Feature in Assigned Tasks Page

Summary:

Description

Currently, the Assigned Tasks page utilizes a useState hook to manage an events array:

const [events, setEvents] = useState<Event[]>([]);

However, these events are not actively utilized within the component. I propose implementing a step navigation feature that allows users to traverse through the sequence of events using forward and backward controls. This functionality will enable users to fast forward, rewind, and navigate through the task events interactively.

Feature Details

Navigation Controls

Add four navigation buttons to the interface:

Restart: Resets the view to the beginning of the event sequence.
Step Backward: Moves back by one event step.
Step Forward: Advances forward by one event step.
Jump to End: Instantly navigates to the final state of the events.

Functionality

Event Cues: Each button click will set the current event cue to reflect the state of events up to that point. This cue will be propagated to the relevant parts of the project to update the UI accordingly.
Icon Selection: The selected navigation icon should visually indicate the current position within the event sequence, providing real-time feedback on the order and progress of events.

Expected Outcome

Users will be able to:

Restart the event sequence from the beginning.
Navigate backward through individual events to review previous states.
Navigate forward through events to see upcoming states.
Jump to the end to view the final state immediately.

The interface will reflect these changes in real-time, offering a clear visualization of the event progression.

Implementation Steps

UI Components:
- Design and add the four navigation buttons to the Assigned Tasks page.
- Ensure buttons are easily accessible and clearly labeled.
State Management:
- Implement a new state variable to track the current event index.
- Update the events array manipulation to handle navigation actions based on the current index.
Event Handling:
- Define functions for each navigation button to update the current event index appropriately.
- Ensure that setting the event cue updates the project state and propagates changes to all dependent components.
Icon Feedback:
- Update the selected icons to reflect the current event state.
- Implement real-time UI updates to visualize event order and progression.

Additional Context

Providing a navigable history of events will enhance user experience by allowing detailed review and interaction with task progression.

@jacob-ai-bot --skip-build

Plan:

Step 1: Edit `/src/app/dashboard/[org]/[repo]/assigned-tasks/TasksPage.tsx`

Task: Implement event index state and navigation functions in TasksPage.tsx

Instructions: In the file /src/app/dashboard/[org]/[repo]/assigned-tasks/TasksPage.tsx, add a new state variable currentEventIndex using useState to track the current position in the events array. Implement navigation functions handleRestart, handleStepBackward, handleStepForward, and handleJumpToEnd that update currentEventIndex appropriately. Modify the events passed to the Workspace component by slicing the events array up to currentEventIndex + 1. Ensure that when a new task is selected, currentEventIndex resets to the latest event index (i.e., the end of the events array).

Exit Criteria: The TasksPage component manages event navigation state, and the Workspace component receives the correct subset of events based on the current navigation position.

Step 2: Create `/src/app/dashboard/[org]/[repo]/assigned-tasks/components/StepNavigation.tsx`

Task: Create StepNavigation component for event navigation controls

Instructions: Create a new file StepNavigation.tsx in /src/app/dashboard/[org]/[repo]/assigned-tasks/components/. Implement a functional React component that renders four navigation buttons labeled 'Restart', 'Step Backward', 'Step Forward', and 'Jump to End'. The component should accept props: onRestart, onStepBackward, onStepForward, onJumpToEnd (callback functions), currentIndex, and totalSteps. Each button should call its corresponding function when clicked. Disable the 'Restart' and 'Step Backward' buttons when currentIndex is 0, and disable the 'Step Forward' and 'Jump to End' buttons when currentIndex equals totalSteps - 1.

Exit Criteria: The StepNavigation component is created, displaying navigation buttons that are interactive and appropriately disabled based on the current event index.

Step 3: Edit `/src/app/dashboard/[org]/[repo]/assigned-tasks/TasksPage.tsx`

Task: Integrate StepNavigation component into TasksPage.tsx

Instructions: In /src/app/dashboard/[org]/[repo]/assigned-tasks/TasksPage.tsx, import the StepNavigation component. Include it in the JSX layout, placing it above or below the Workspace component for visibility. Pass the navigation functions (handleRestart, handleStepBackward, handleStepForward, handleJumpToEnd), currentEventIndex as currentIndex, and the total number of events (using events.length) as totalSteps to the StepNavigation component.

Exit Criteria: The StepNavigation component is rendered within TasksPage, and the navigation controls are operational, allowing users to navigate through events.

Step 4: Edit `/src/app/dashboard/[org]/[repo]/assigned-tasks/components/workspace/index.tsx`

Task: Update Workspace component to handle event slices

Instructions: In /src/app/dashboard/[org]/[repo]/assigned-tasks/components/workspace/index.tsx, modify the component to accept the sliced events array as a prop. Update any state and rendering logic within Workspace and its child components to utilize the provided events array, reflecting the state up to the currentEventIndex. Adjust the useEffect hook that sets selectedIcon to base its logic on the last event in the sliced events array.

Exit Criteria: The Workspace component and its children render content based on the current subset of events, updating the UI to reflect the selected point in the event sequence.

Step 5: Edit `/src/app/dashboard/[org]/[repo]/assigned-tasks/components/StepNavigation.tsx`

Task: Style navigation buttons in StepNavigation.tsx to match existing design

Instructions: In /src/app/dashboard/[org]/[repo]/assigned-tasks/components/StepNavigation.tsx, apply styling to the buttons to match the application's existing design patterns, such as those used in Sidebar.tsx and other navigation components. Use appropriate Tailwind CSS classes for layout, colors, typography, and responsive behavior. Ensure that buttons have visual feedback on hover and disabled states, and consider using icon components consistent with the application's style.

Exit Criteria: The navigation buttons are styled consistently with the application's UI, providing a cohesive user experience.

Step 6: Edit `/src/app/dashboard/[org]/[repo]/assigned-tasks/TasksPage.tsx`

Task: Reset navigation state when a new task is selected

Instructions: In /src/app/dashboard/[org]/[repo]/assigned-tasks/TasksPage.tsx, update the useEffect hook that handles selectedTask changes. When a new task is selected, reset currentEventIndex to the last index of the new task's events (i.e., events.length - 1). Ensure that the navigation controls and Workspace component reflect the initial state of the newly selected task's event sequence.

Exit Criteria: Selecting a new task resets the navigation to show the full sequence of events for that task, with the navigation controls updated accordingly.

jacob-ai-bot / jacob