Navigate to the correct prior page on cancel

console-extensions.json

@@ -46,7 +46,7 @@
       "groupId": "import-application-group",
       "label": "Import from cluster",
       "description": "Import a manually deployed application on another cluster to an automated GitOps workflow.",
-      "href": "/app-imports/new/ns/:namespace",
+      "href": "/app-imports/new/ns/:namespace?from=add",
       "icon": { "$codeRef": "icons.importIconElement" }
     }
   },

src/components/AppImportsPage.tsx

@@ -109,7 +109,7 @@ const AppImportsPage: React.FunctionComponent<AppImportsPageProps> = ({
   }, [activePipelineGroupName, activePipelineGroup, deletePipelineMutation, history, namespace]);
 
   const isEmptyState = loaded && pipelineGroups.length === 0;
-  const goToImportWizard = () => history.push(appImportWizardUrl(namespace));
+  const goToImportWizard = () => history.push(appImportWizardUrl(namespace, 'imports'));
 
   return (
     <Page>

src/components/ImportPage.tsx

@@ -1,39 +1,39 @@
 import * as React from 'react';
 import Helmet from 'react-helmet';
-import { match as RouteMatch } from 'react-router-dom';
+import { useLocation, useRouteMatch } from 'react-router-dom';
 import { PageSection, Title } from '@patternfly/react-core';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ImportWizard } from './ImportWizard/ImportWizard';
 import { NamespaceContext } from 'src/context/NamespaceContext';
+import { WizardReachedFromParam } from 'src/utils/paths';
 
 const queryClient = new QueryClient();
 
-interface PipelineWizardPageProps {
-  match: RouteMatch<{ namespace: string }>;
-}
-
-const ImportPage: React.FunctionComponent<PipelineWizardPageProps> = ({
-  match: {
+const ImportPage: React.FunctionComponent = () => {
+  const {
     params: { namespace },
-  },
-}) => (
-  <>
-    <Helmet>
-      <title>Crane</title>
-    </Helmet>
-    <QueryClientProvider client={queryClient}>
-      <NamespaceContext.Provider value={namespace}>
-        <>
-          <PageSection variant="light">
-            <Title headingLevel="h1">Import application</Title>
-          </PageSection>
-          <PageSection variant="light" type="wizard">
-            <ImportWizard />
-          </PageSection>
-        </>
-      </NamespaceContext.Provider>
-    </QueryClientProvider>
-  </>
-);
+  } = useRouteMatch<{ namespace: string }>();
+  const location = useLocation();
+  const urlParams = React.useMemo(() => new URLSearchParams(location.search), [location.search]);
+  return (
+    <>
+      <Helmet>
+        <title>Crane</title>
+      </Helmet>
+      <QueryClientProvider client={queryClient}>
+        <NamespaceContext.Provider value={namespace}>
+          <>
+            <PageSection variant="light">
+              <Title headingLevel="h1">Import application</Title>
+            </PageSection>
+            <PageSection variant="light" type="wizard">
+              <ImportWizard reachedFrom={urlParams.get('from') as WizardReachedFromParam} />
+            </PageSection>
+          </>
+        </NamespaceContext.Provider>
+      </QueryClientProvider>
+    </>
+  );
+};
 
 export default ImportPage;

src/components/ImportWizard/ImportWizard.tsx

@@ -33,7 +33,12 @@ import { getYamlFieldKeys } from './helpers';
 import { ConfirmModal } from 'src/common/components/ConfirmModal';
 import { RouteGuard } from 'src/common/components/RouteGuard';
 import { useSourcePVCsQuery } from 'src/api/queries/sourceResources';
-import { appImportsPageUrl } from 'src/utils/paths';
+import {
+  WizardReachedFromParam,
+  addPageUrl,
+  topologyPageUrl,
+  appImportsPageUrl,
+} from 'src/utils/paths';
 
 enum StepId {
   SourceClusterProject = 0,
@@ -44,7 +49,11 @@ enum StepId {
   Review,
 }
 
-export const ImportWizard: React.FunctionComponent = () => {
+interface ImportWizardProps {
+  reachedFrom: WizardReachedFromParam;
+}
+
+export const ImportWizard: React.FunctionComponent<ImportWizardProps> = ({ reachedFrom }) => {
   const history = useHistory();
 
   const forms = useImportWizardFormState();
@@ -231,7 +240,15 @@ export const ImportWizard: React.FunctionComponent = () => {
         ]}
         onSubmit={(event) => event.preventDefault()}
         onSave={onSubmitWizard}
-        onClose={() => history.push(`/add/ns/${namespace}`)}
+        onClose={() => {
+          if (reachedFrom === 'add') {
+            history.push(addPageUrl(namespace));
+          } else if (reachedFrom === 'topology') {
+            history.push(topologyPageUrl(namespace));
+          } else {
+            history.push(appImportsPageUrl(namespace));
+          }
+        }}
         onNext={onMoveToStep}
         onBack={onMoveToStep}
         onGoToStep={onMoveToStep}

src/utils/actions.ts

@@ -22,7 +22,7 @@ export const useTopologyGraphActionProvider: TopologyActionProvider = ({ element
             label: 'Import application from cluster',
             icon: importIconElement,
             cta: {
-              href: appImportWizardUrl(namespace),
+              href: appImportWizardUrl(namespace, 'topology'),
             },
             path: 'add-to-project',
           },

src/utils/paths.ts

@@ -1,7 +1,10 @@
 import { pipelineRunGVK } from 'src/api/queries/pipelines';
 import { PipelineRunKind } from 'src/reused/pipelines-plugin/src/types';
 
-export const appImportWizardUrl = (namespace: string) => `/app-imports/new/ns/${namespace}`;
+export type WizardReachedFromParam = 'add' | 'topology' | 'imports' | null;
+
+export const appImportWizardUrl = (namespace: string, from?: WizardReachedFromParam) =>
+  `/app-imports/new/ns/${namespace}${from ? `?from=${from}` : ''}`;
 
 export const appImportsPageUrl = (namespace: string, pipelineGroupName?: string) =>
   `/app-imports/ns/${namespace}${pipelineGroupName ? `/${pipelineGroupName}` : ''}`;
@@ -13,3 +16,7 @@ export const pipelineRunUrl = (namespace: string, pipelineRun: PipelineRunKind)
 
 export const pipelinesListUrl = (namespace: string, nameFilter?: string) =>
   `/dev-pipelines/ns/${namespace}${nameFilter ? `?name=${nameFilter}` : ''}`;
+
+export const addPageUrl = (namespace: string) => `/add/ns/${namespace}`;
+
+export const topologyPageUrl = (namespace: string) => `/topology/ns/${namespace}`;