Update UI Components to Handle Ticket Versioning

[humansinstitute]

Update UI Components to Handle Ticket Versioning

Context

With the introduction of ticket versioning, we need to modify our UI components to properly handle grouped tickets and only display the latest version of each ticket group in the Phase Planner view.

Current Behavior

• Phase Planner loads and displays all tickets
• Each ticket is treated independently
• No concept of ticket versions in UI

Desired Behavior

• Phase Planner shows only latest version of each ticket group
• Updates create new versions while maintaining group relationship
• UI indicates current version number
• Drag-and-drop works with grouped tickets

Design

1. Modify PhaseTicketStore to handle ticket grouping
2. Update PhasePlannerView data loading and websocket handlers
3. Enhance TicketEditor component for versioned tickets

1. Store Layer (store/phase.ts)

• Add new helper functions for organizing tickets by group
• Modify ticket storage structure to handle versioning

// New functions to add:
- organizeTicketsByGroup(tickets: Ticket[]): Ticket[]
- getLatestVersionFromGroup(groupId: string): Ticket

// Group tickets by ticketGroup and find latest version
const organizeTicketsByGroup = (tickets: Ticket[]) => {
  // Create a map of ticketGroup -> array of tickets in that group
  const groupedTickets = tickets.reduce((groups, ticket) => {
    const group = ticket.ticketGroup || ticket.uuid; // fallback for backwards compatibility
    if (!groups[group]) {
      groups[group] = [];
    }
    groups[group].push(ticket);
    return groups;
  }, {} as Record<string, Ticket[]>);

  // For each group, find the ticket with highest version
  return Object.values(groupedTickets).map(groupTickets => {
    return groupTickets.reduce((latest, current) => {
      return (current.version > latest.version) ? current : latest;
    });
  });
};

2. Phase Planner View (PhasePlannerView.tsx)

• Modify ticket loading logic in useEffect for initial data fetch
• Update websocket handler for ticket updates
• Adjust drag-and-drop handlers to work with grouped tickets

// Functions to modify:
- fetchData() in main useEffect
- refreshSingleTicket()
- onDragEnd()

Fetch data example

useEffect(() => {
  const fetchData = async () => {
    try {
      const feature = await getFeatureData();
      const phase = await getPhaseData();
      const phaseTickets = await getPhaseTickets();

      if (!feature || !phase || !Array.isArray(phaseTickets)) {
        history.push('/');
      } else {
        // Clear existing tickets
        phaseTicketStore.clearPhaseTickets(phase_uuid);

        // Organize tickets by group and get latest versions
        const latestVersionTickets = organizeTicketsByGroup(phaseTickets);
        
        // Add only the latest version tickets
        for (const ticket of latestVersionTickets) {
          if (ticket.UUID) {
            ticket.uuid = ticket.UUID;
          }
          phaseTicketStore.addTicket(ticket);
        }
        
        setFeatureData(feature);
        setPhaseData(phase);
      }
    } catch (error) {
      console.error('Error fetching data:', error);
      history.push('/');
    }
  };

  fetchData();
}, [getFeatureData, getPhaseData, history, getPhaseTickets, phase_uuid]);

refreshSingleTicket() example update

const refreshSingleTicket = async (ticketUuid: string) => {
  try {
    const ticket = await main.getTicketDetails(ticketUuid);
    const groupId = ticket.ticketGroup || ticket.uuid;
    
    // Get all tickets in this group
    const groupTickets = await main.getTicketsByGroup(groupId);
    
    // Find the latest version
    const latestTicket = groupTickets.reduce((latest, current) => {
      return (current.version > latest.version) ? current : latest;
    });

    // Update store with latest version
    phaseTicketStore.updateTicket(latestTicket.uuid, latestTicket);
  } catch (error) {
    console.error('Error on refreshing ticket:', error);
  }
};

3. Ticket Editor Component (TicketEditor.tsx)

• Update component to display version information
• Modify update handler to work with versioned tickets

// Functions to modify:
- handleUpdate()
- Component UI to show version number

Example Code

interface TicketEditorProps {
  ticketData: Ticket;
  index: number;
  websocketSessionId: string;
  draggableId: string;
  hasInteractiveChildren: boolean;
  dragHandleProps?: Record<string, any>;
  swwfLink?: string;
}

const TicketEditor = observer(({ ticketData, ...props }: TicketEditorProps) => {
  // Add version display to the header
  return (
    <TicketContainer>
      <TicketHeaderInputWrap>
        <TicketHeader>
          Ticket: (Version {ticketData.version})
        </TicketHeader>
        ...
      </TicketHeaderInputWrap>
      ...
    </TicketContainer>
  );
});

Implementation Steps

1. Store Layer Changes:

   • Implement ticket grouping logic in phaseTicketStore
   • Add methods for retrieving latest versions of tickets
   • Update ticket storage structure to handle grouped tickets

2. Data Loading Changes:

   • Modify ticket fetching to organize by groups
   • Update websocket handlers to maintain version integrity
   • Ensure drag-and-drop operations work with grouped tickets

3. UI Component Changes:

   • Update TicketEditor to show version information
   • Modify update logic to handle versioned tickets
   • Add visual indicators for versioned tickets

4. Type System Updates:

   • Check type definitions for versioned tickets
   • Update existing interfaces to support grouping

Testing Requirements

1. Verify correct loading of latest versions
2. Test version updates maintain group integrity
3. Ensure drag-and-drop works with grouped tickets
4. Verify websocket updates show correct versions

Acceptance Criteria

• Only latest version of each ticket group appears in Phase Planner
• Ticket updates create new versions while maintaining group relationship
• Version number is visible in TicketEditor
• Drag-and-drop functionality works with grouped tickets
• Websocket updates show correct version of tickets
• Backwards compatibility maintained for existing tickets
• All existing functionality (creation, updates, drag-drop) works with versioned tickets

[humansinstitute]

Related to: stakwork/sphinx-tribes#2182
These front end changes will allow for multiple versions to be displayed once ticket updates are turned on.

[MahtabBukhari]

@humansinstitute assign

[MahtabBukhari]

@humansinstitute https://community.sphinx.chat/p/cs6elnatu2rsh7eq5hk0/assigned/2971/6

[MahtabBukhari]

https://community.sphinx.chat/p/cs6elnatu2rsh7eq5hk0/assigned/2971/10