✨ Refactor RetrieveConfigWizard to be inline with DiscoverImportWizard (#2547)

Apply the same kind of changes made to hooks and views with the
`DiscoverImportWizard` to the older `RetrieveConfigWizard`. This will
help keep the structure and layout the same.

Needs #2545

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Retrieve Configurations wizard updated with a clearer title,
description and improved flow.
* Results view refined: status icons, task IDs link directly to task
details, and a single “No tasks were submitted” message appears at the
top when applicable.

* **Style**
* Wording revised to “Successful Submission(s)” and translations
reorganized for clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Signed-off-by: Scott J Dickerson <[email protected]>

Author: sjd78

client/public/locales/en/translation.json

@@ -53,7 +53,6 @@
     "reset": "Reset",
     "review": "Review",
     "retrieve": "Retrieve",
-    "retrieveConfigurations": "Retrieve configurations",
     "save": "Save",
     "saveAndReview": "Save and review",
     "selectAll": "Select all",
@@ -167,7 +166,6 @@
       "newStakeholderGroup": "New stakeholder group",
       "newTag": "New Tag",
       "newTagCategory": "New tag category",
-      "retrieveConfigurations": "Retrieve configurations",
       "update": "Update {{what}}",
       "updateArchetype": "Update archetype",
       "updateApplication": "Update application",
@@ -669,9 +667,10 @@
     }
   },
   "retrieveConfigWizard": {
+    "title": "Retrieve Configurations",
+    "description": "Retrieve configurations from the selected applications.",
     "selectedCount": "{{count}} of {{total}} applications selected",
     "noApplicationsWithSourcePlatforms": "No applications with source platforms selected.",
-    "noTasksSubmitted": "No tasks were submitted.",
     "toast": {
       "submittedOk": "Application manifest fetches submitted",
       "submittedFailed": "Application manifest fetches failed"
@@ -680,10 +679,11 @@
       "title": "Configuration Retrieval Results",
       "summary": "Summary of configuration retrieval task submissions.",
       "noResults": "No results available.",
+      "noTasksSubmitted": "No tasks were submitted.",
       "failedSubmissions_one": "Failed Submission",
       "failedSubmissions_other": "Failed Submissions ({{count}})",
-      "successSubmissions_one": "Success Submission",
-      "successSubmissions_other": "Success Submissions ({{count}})"
+      "successSubmissions_one": "Successful Submission",
+      "successSubmissions_other": "Successful Submissions ({{count}})"
     },
     "review": {
       "description_one": "This application is ready to retrieve configurations from its source platform. The application's platform coordinates will be used to connect to the platform and build the application's discovery manifest.",

client/src/app/pages/applications/retrieve-config-wizard/results.tsx

@@ -9,7 +9,7 @@ import {
   TextVariants,
   Grid,
   GridItem,
-  Button,
+  Icon,
 } from "@patternfly/react-core";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { useTranslation } from "react-i18next";
@@ -70,15 +70,30 @@ export const Results: React.FC<ResultsProps> = ({ results }) => {
       </TextContent>
 
       <Grid hasGutter>
+        {success.length === 0 && failure.length === 0 && (
+          <GridItem span={12}>
+            <Card>
+              <CardBody>
+                <Text>
+                  {t("retrieveConfigWizard.results.noTasksSubmitted")}
+                </Text>
+              </CardBody>
+            </Card>
+          </GridItem>
+        )}
+
         {success.length > 0 && (
           <GridItem span={12}>
             <Card>
               <CardHeader>
                 <CardTitle>
-                  <CheckCircleIcon
-                    color="var(--pf-global--success-color--100)"
+                  <Icon
+                    status="success"
+                    isInline
                     style={{ marginRight: "8px" }}
-                  />
+                  >
+                    <CheckCircleIcon />
+                  </Icon>
                   {t("retrieveConfigWizard.results.successSubmissions", {
                     count: success.length,
                   })}
@@ -90,7 +105,6 @@ export const Results: React.FC<ResultsProps> = ({ results }) => {
                     <Tr>
                       <Th>{t("terms.application")}</Th>
                       <Th>{t("terms.task")}</Th>
-                      <Th>{t("actions.actions")}</Th>
                     </Tr>
                   </Thead>
                   <Tbody>
@@ -108,19 +122,10 @@ export const Results: React.FC<ResultsProps> = ({ results }) => {
                             )}
                           </div>
                         </Td>
-                        <Td>{result.task.id}</Td>
                         <Td>
-                          <Button
-                            variant="link"
-                            component={(props) => (
-                              <Link
-                                {...props}
-                                to={`/tasks/${result.task.id}`}
-                              />
-                            )}
-                          >
-                            View Task
-                          </Button>
+                          <Link to={`/tasks/${result.task.id}`}>
+                            {result.task.id}
+                          </Link>
                         </Td>
                       </Tr>
                     ))}
@@ -136,10 +141,9 @@ export const Results: React.FC<ResultsProps> = ({ results }) => {
             <Card>
               <CardHeader>
                 <CardTitle>
-                  <ExclamationTriangleIcon
-                    color="var(--pf-global--danger-color--100)"
-                    style={{ marginRight: "8px" }}
-                  />
+                  <Icon status="danger" isInline style={{ marginRight: "8px" }}>
+                    <ExclamationTriangleIcon />
+                  </Icon>
                   {t("retrieveConfigWizard.results.failedSubmissions", {
                     count: failure.length,
                   })}
@@ -196,16 +200,6 @@ export const Results: React.FC<ResultsProps> = ({ results }) => {
             </Card>
           </GridItem>
         )}
-
-        {success.length === 0 && failure.length === 0 && (
-          <GridItem span={12}>
-            <Card>
-              <CardBody>
-                <Text>{t("retrieveConfigWizard.noTasksSubmitted")}</Text>
-              </CardBody>
-            </Card>
-          </GridItem>
-        )}
       </Grid>
     </>
   );

client/src/app/pages/applications/retrieve-config-wizard/retrieve-config-wizard.tsx

@@ -14,12 +14,11 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 import { group } from "radash";
 
-import { ApplicationManifestTask, EmptyObject, New } from "@app/api/models";
 import { NotificationsContext } from "@app/components/NotificationsContext";
-import { useCreateTaskMutation } from "@app/queries/tasks";
 import { DecoratedApplication } from "../useDecoratedApplications";
 import { Review } from "./review";
 import { Results, ResultsData } from "./results";
+import { useStartFetchApplicationManifest } from "./useStartFetchApplicationManifest";
 
 export const RetrieveConfigWizard: React.FC<IRetrieveConfigWizard> = ({
   isOpen,
@@ -38,17 +37,12 @@ export const RetrieveConfigWizard: React.FC<IRetrieveConfigWizard> = ({
   );
 };
 
-interface IRetrieveConfigWizard {
+export interface IRetrieveConfigWizard {
   applications?: DecoratedApplication[];
   onClose: () => void;
   isOpen: boolean;
 }
 
-enum StepId {
-  Review = 1,
-  Results = 2,
-}
-
 export interface FormValues {
   ready: DecoratedApplication[];
   notReady: DecoratedApplication[];
@@ -125,7 +119,7 @@ const RetrieveConfigWizardInner: React.FC<IRetrieveConfigWizard> = ({
     return (
       <Modal
         variant={ModalVariant.medium}
-        title={t("dialog.title.retrieveConfigurations")}
+        title={t("retrieveConfigWizard.title")}
         isOpen={isOpen}
         onClose={handleCancel}
         footer={
@@ -146,7 +140,7 @@ const RetrieveConfigWizardInner: React.FC<IRetrieveConfigWizard> = ({
     <FormProvider {...methods}>
       <Modal
         variant={ModalVariant.large}
-        aria-label={t("dialog.title.retrieveConfigurations")}
+        aria-label={t("retrieveConfigWizard.title")}
         isOpen={isOpen}
         showClose={false}
         hasNoBodyWrapper
@@ -157,13 +151,13 @@ const RetrieveConfigWizardInner: React.FC<IRetrieveConfigWizard> = ({
           header={
             <WizardHeader
               onClose={handleCancel}
-              title={t("dialog.title.retrieveConfigurations")}
-              description={t("dialog.message.retrieveConfigurations")}
+              title={t("retrieveConfigWizard.title")}
+              description={t("retrieveConfigWizard.description")}
             />
           }
         >
           <WizardStep
-            id={StepId.Review}
+            id="review"
             name="Review"
             footer={{
               nextButtonText: showResults
@@ -185,73 +179,3 @@ const RetrieveConfigWizardInner: React.FC<IRetrieveConfigWizard> = ({
     </FormProvider>
   );
 };
-
-const useStartFetchApplicationManifest = () => {
-  const { mutateAsync: createTask } = useCreateTaskMutation<
-    EmptyObject,
-    ApplicationManifestTask
-  >();
-
-  const createAndSubmitTask = async (
-    application: DecoratedApplication
-  ): Promise<{
-    success?: {
-      task: ApplicationManifestTask;
-      application: DecoratedApplication;
-    };
-    failure?: {
-      message: string;
-      cause: Error;
-      application: DecoratedApplication;
-      newTask: New<ApplicationManifestTask>;
-    };
-  }> => {
-    const newTask: New<ApplicationManifestTask> = {
-      name: `${application.name}.${application.id}.application-manifest`,
-      kind: "application-manifest",
-      application: { id: application.id, name: application.name },
-      state: "Ready",
-      data: {},
-    };
-
-    try {
-      const task = await createTask(newTask);
-      return { success: { task, application } };
-    } catch (error) {
-      return {
-        failure: {
-          message: "Failed to submit the application manifest fetch task",
-          cause: error as Error,
-          application,
-          newTask,
-        },
-      };
-    }
-  };
-
-  const submitTasks = async (applications: DecoratedApplication[]) => {
-    const results = await Promise.allSettled(
-      applications.map(createAndSubmitTask)
-    );
-
-    const success = [];
-    const failure = [];
-
-    for (const result of results) {
-      if (result.status === "fulfilled") {
-        if (result.value.success) {
-          success.push(result.value.success);
-        }
-        if (result.value.failure) {
-          failure.push(result.value.failure);
-        }
-      }
-    }
-
-    return { success, failure };
-  };
-
-  return {
-    submitTasks,
-  };
-};

client/src/app/pages/applications/retrieve-config-wizard/useStartFetchApplicationManifest.tsx

@@ -0,0 +1,73 @@
+import { EmptyObject, ApplicationManifestTask, New } from "@app/api/models";
+import { useCreateTaskMutation } from "@app/queries/tasks";
+import { DecoratedApplication } from "../useDecoratedApplications";
+
+export const useStartFetchApplicationManifest = () => {
+  const { mutateAsync: createTask } = useCreateTaskMutation<
+    EmptyObject,
+    ApplicationManifestTask
+  >();
+
+  const createAndSubmitTask = async (
+    application: DecoratedApplication
+  ): Promise<{
+    success?: {
+      task: ApplicationManifestTask;
+      application: DecoratedApplication;
+    };
+    failure?: {
+      message: string;
+      cause: Error;
+      application: DecoratedApplication;
+      newTask: New<ApplicationManifestTask>;
+    };
+  }> => {
+    const newTask: New<ApplicationManifestTask> = {
+      name: `${application.name}.${application.id}.application-manifest`,
+      kind: "application-manifest",
+      application: { id: application.id, name: application.name },
+      state: "Ready",
+      data: {},
+    };
+
+    try {
+      const task = await createTask(newTask);
+      return { success: { task, application } };
+    } catch (error) {
+      return {
+        failure: {
+          message: "Failed to submit the application manifest fetch task",
+          cause: error as Error,
+          application,
+          newTask,
+        },
+      };
+    }
+  };
+
+  const submitTasks = async (applications: DecoratedApplication[]) => {
+    const results = await Promise.allSettled(
+      applications.map(createAndSubmitTask)
+    );
+
+    const success = [];
+    const failure = [];
+
+    for (const result of results) {
+      if (result.status === "fulfilled") {
+        if (result.value.success) {
+          success.push(result.value.success);
+        }
+        if (result.value.failure) {
+          failure.push(result.value.failure);
+        }
+      }
+    }
+
+    return { success, failure };
+  };
+
+  return {
+    submitTasks,
+  };
+};