🐛 Close the status expandable if last app is removed from wave status (#1639)

https://issues.redhat.com/browse/MTA-1844

Signed-off-by: ibolton336 <[email protected]>

Author: ibolton336

client/src/app/pages/migration-waves/components/wave-status-table.tsx

@@ -3,7 +3,6 @@ import { MigrationWave, Ticket, WaveWithStatus } from "@app/api/models";
 import { useTranslation } from "react-i18next";
 import {
   Button,
-  ButtonVariant,
   CodeBlock,
   CodeBlockCode,
   Modal,
@@ -22,22 +21,34 @@ import {
   TableRowContentWithControls,
 } from "@app/components/TableControls";
 import { SimplePagination } from "@app/components/SimplePagination";
-import { NoDataEmptyState } from "@app/components/NoDataEmptyState";
 import { useHistory } from "react-router-dom";
 import { useFetchTickets } from "@app/queries/tickets";
-import { Paths } from "@app/Paths";
 import { TicketIssue } from "./ticket-issue";
 import { useDeleteTicketMutation } from "@app/queries/migration-waves";
 import UnlinkIcon from "@patternfly/react-icons/dist/esm/icons/unlink-icon";
 
+type SetCellExpandedArgs = {
+  item: WaveWithStatus;
+  isExpanding?: boolean;
+  columnKey?:
+    | "stakeholders"
+    | "applications"
+    | "name"
+    | "startDate"
+    | "endDate"
+    | "status";
+};
+
 export interface IWaveStatusTableProps {
   migrationWave: WaveWithStatus;
   removeApplication: (migrationWave: MigrationWave, id: number) => void;
+  setCellExpanded: (args: SetCellExpandedArgs) => void;
 }
 
 export const WaveStatusTable: React.FC<IWaveStatusTableProps> = ({
   migrationWave,
   removeApplication,
+  setCellExpanded,
 }) => {
   const { t } = useTranslation();
   const [codeModalState, setCodeModalState] = useState<
@@ -113,24 +124,6 @@ export const WaveStatusTable: React.FC<IWaveStatusTableProps> = ({
         <ConditionalTableBody
           isNoData={migrationWave.applications.length === 0}
           numRenderedColumns={numRenderedColumns}
-          noDataEmptyState={
-            <div>
-              <NoDataEmptyState title="Create a tracker and/or add applications to the migration wave." />
-              <div className="pf-v5-u-text-align-center">
-                <Button
-                  type="button"
-                  id="create-tracker"
-                  aria-label="Create Tracker"
-                  variant={ButtonVariant.primary}
-                  onClick={() => {
-                    history.push(Paths.jira);
-                  }}
-                >
-                  Create Tracker
-                </Button>
-              </div>
-            </div>
-          }
         >
           <Tbody>
             {currentPageItems?.map((app, rowIndex) => {
@@ -181,7 +174,27 @@ export const WaveStatusTable: React.FC<IWaveStatusTableProps> = ({
                       <Button
                         type="button"
                         variant="plain"
-                        onClick={() => removeApplication(migrationWave, app.id)}
+                        onClick={() => {
+                          const updatedApplications =
+                            migrationWave.applications.filter(
+                              (application) => application.id !== app.id
+                            );
+
+                          const updatedMigrationWave = {
+                            ...migrationWave,
+                            applications: updatedApplications,
+                          };
+                          if (updatedApplications.length === 0) {
+                            removeApplication(migrationWave, app.id);
+                            setCellExpanded({
+                              item: updatedMigrationWave,
+                              isExpanding: false,
+                              columnKey: "status",
+                            });
+                          } else {
+                            removeApplication(migrationWave, app.id);
+                          }
+                        }}
                       >
                         <TrashIcon />
                       </Button>

client/src/app/pages/migration-waves/migration-waves.tsx

@@ -234,7 +234,7 @@ export const MigrationWaves: React.FC = () => {
       getTdProps,
       getExpandedContentTdProps,
     },
-    expansionDerivedState: { isCellExpanded },
+    expansionDerivedState: { isCellExpanded, setCellExpanded },
   } = tableControls;
 
   // TODO: Check RBAC access
@@ -437,7 +437,7 @@ export const MigrationWaves: React.FC = () => {
                         >
                           {migrationWave.applications.length
                             ? migrationWave.status
-                            : "N/A"}
+                            : "--"}
                         </Td>
                         <Td isActionCell id="row-actions">
                           <Dropdown
@@ -554,6 +554,7 @@ export const MigrationWaves: React.FC = () => {
                                 <WaveStatusTable
                                   migrationWave={migrationWave}
                                   removeApplication={removeApplication}
+                                  setCellExpanded={setCellExpanded}
                                 />
                               )
                             )}