Merge pull request #771 from MahtabBukhari/Update-UI-Components-to-Ha…

…ndle-Ticket-Versioning

Update UI Components to Handle Ticket Versioning

src/components/common/TicketEditor/TicketEditor.tsx

@@ -1,7 +1,14 @@
 import React, { useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'store';
-import { EuiGlobalToastList, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiIcon } from '@elastic/eui';
+import {
+  EuiGlobalToastList,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiIcon,
+  EuiBadge
+} from '@elastic/eui';
 import { phaseTicketStore } from '../../../store/phase';
 import { ActionButton, TicketButtonGroup } from '../../../people/widgetViews/workspace/style';
 import {
@@ -161,6 +168,9 @@ const TicketEditor = observer(
                 }
                 placeholder="Enter ticket name..."
               />
+              <EuiBadge color="success" style={{ marginBottom: '12px' }}>
+                Version {ticketData.version}
+              </EuiBadge>
             </TicketHeaderInputWrap>
             <TicketTextArea
               value={description}

src/people/widgetViews/PhasePlannerView.tsx

@@ -53,8 +53,11 @@ const PhasePlannerView: React.FC = observer(() => {
       try {
         const ticket = await main.getTicketDetails(ticketUuid);
 
-        // TODO: Backend needs to send this as uuid and not UUID
-        phaseTicketStore.updateTicket(ticket.uuid || ticket.UUID, ticket);
+        const groupId = ticket.ticket_group || ticket.uuid;
+
+        const latestTicket = phaseTicketStore.getLatestVersionFromGroup(groupId);
+
+        phaseTicketStore.updateTicket(latestTicket?.uuid as string, latestTicket as Ticket);
       } catch (error) {
         console.error('Error on refreshing ticket:', error);
       }
@@ -158,11 +161,11 @@ const PhasePlannerView: React.FC = observer(() => {
         if (!feature || !phase || !Array.isArray(phaseTickets)) {
           history.push('/');
         } else {
-          // Clear existing tickets for this phase before adding new ones
           phaseTicketStore.clearPhaseTickets(phase_uuid);
 
-          // Add fetched tickets
-          for (const ticket of phaseTickets) {
+          const latestVersionTickets = phaseTicketStore.organizeTicketsByGroup(phaseTickets);
+
+          for (const ticket of latestVersionTickets) {
             if (ticket.UUID) {
               ticket.uuid = ticket.UUID;
             }

src/store/interface.ts

@@ -406,6 +406,7 @@ export type Author = 'HUMAN' | 'AGENT';
 
 export interface Ticket {
   uuid: string;
+  UUID?: string;
   ticketUUID?: string;
   feature_uuid: string;
   phase_uuid: string;

src/store/main.ts

@@ -3603,7 +3603,10 @@ export class MainStore {
     }
   }
 
-  async getTicketDataByPhase(feature_uuid: string, phase_uuid: string): Promise<Phase | undefined> {
+  async getTicketDataByPhase(
+    feature_uuid: string,
+    phase_uuid: string
+  ): Promise<Ticket[] | undefined> {
     try {
       if (!uiStore.meInfo) return undefined;
       const info = uiStore.meInfo;

src/store/phase.ts

@@ -14,6 +14,8 @@ export interface TicketStore {
   getTicket: (uuid: string) => Ticket | undefined;
   getPhaseTickets: (phase_uuid: string) => Ticket[];
   clearPhaseTickets: (phase_uuid: string) => void;
+  organizeTicketsByGroup: (tickets: Ticket[]) => Ticket[];
+  getLatestVersionFromGroup: (groupId: string) => Ticket | undefined;
 }
 
 export class PhaseTicketStore implements TicketStore {
@@ -65,6 +67,37 @@ export class PhaseTicketStore implements TicketStore {
     });
     this.phaseTickets[phase_uuid] = [];
   }
+
+  organizeTicketsByGroup(tickets: Ticket[]): Ticket[] {
+    const groupedTickets = tickets.reduce(
+      (groups: Record<string, Ticket[]>, ticket: Ticket) => {
+        const group = ticket.ticket_group || ticket.uuid;
+        if (!groups[group]) {
+          groups[group] = [];
+        }
+        groups[group].push(ticket);
+        return groups;
+      },
+      {} as Record<string, Ticket[]>
+    );
+
+    return Object.values(groupedTickets).map((groupTickets: Ticket[]) =>
+      groupTickets.reduce((latest: Ticket, current: Ticket) =>
+        current.version > latest.version ? current : latest
+      )
+    );
+  }
+
+  getLatestVersionFromGroup(groupId: string): Ticket | undefined {
+    const ticketsInGroup = Array.from(this.tickets.values()).filter(
+      (ticket: Ticket) => ticket.ticket_group === groupId
+    );
+    if (ticketsInGroup.length === 0) return undefined;
+
+    return ticketsInGroup.reduce((latest: Ticket, current: Ticket) =>
+      current.version > latest.version ? current : latest
+    );
+  }
 }
 
 export const phaseTicketStore = new PhaseTicketStore();