🪟 🧹 Source and Destination Pages get + share their data the same way …

…(#6222)

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

airbyte-webapp/src/pages/destination/DestinationItemPage/DestinationItemPage.tsx

@@ -1,6 +1,6 @@
-import React, { Suspense, useMemo } from "react";
+import React, { Suspense } from "react";
 import { useIntl } from "react-intl";
-import { Outlet, useNavigate, useParams } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
 
 import { LoadingPage } from "components";
 import { ApiErrorBoundary } from "components/common/ApiErrorBoundary";
@@ -13,22 +13,24 @@ import { PageHeader } from "components/ui/PageHeader";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useAppMonitoringService } from "hooks/services/AppMonitoringService";
 import { useExperiment } from "hooks/services/Experiment";
-import { useGetDestination } from "hooks/services/useDestinationHook";
 import { ResourceNotFoundErrorBoundary } from "views/common/ResourceNotFoundErrorBoundary";
 import { StartOverErrorView } from "views/common/StartOverErrorView";
 import { ConnectorDocumentationWrapper } from "views/Connector/ConnectorDocumentationLayout";
 
+import { useGetDestinationFromParams, useGetDestinationTabFromParams } from "../useGetDestinationFromParams";
+
 export const DestinationItemPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.DESTINATION_ITEM);
-  const params = useParams() as { "*": StepsTypes | ""; id: string };
-  const navigate = useNavigate();
+  const destination = useGetDestinationFromParams();
+
   const { formatMessage } = useIntl();
   const isNewConnectionFlowEnabled = useExperiment("connection.updatedConnectionFlow", false);
-  const currentStep = useMemo<string>(() => (params["*"] === "" ? StepsTypes.OVERVIEW : params["*"]), [params]);
-  const { trackError } = useAppMonitoringService();
+  const currentStep = useGetDestinationTabFromParams();
 
-  const destination = useGetDestination(params.id);
+  const { trackError } = useAppMonitoringService();
 
+  // can be removed after flag enabled for all users
+  const navigate = useNavigate();
   const onSelectStep = (id: string) => {
     const path = id === StepsTypes.OVERVIEW ? "." : id.toLowerCase();
     navigate(path);
@@ -41,6 +43,7 @@ export const DestinationItemPage: React.FC = () => {
     },
     { label: destination.name },
   ];
+  // to here
 
   return (
     <ResourceNotFoundErrorBoundary errorComponent={<StartOverErrorView />} trackError={trackError}>
@@ -56,7 +59,7 @@ export const DestinationItemPage: React.FC = () => {
 
         <Suspense fallback={<LoadingPage />}>
           <ApiErrorBoundary>
-            <Outlet context={{ destination }} />
+            <Outlet />
           </ApiErrorBoundary>
         </Suspense>
       </ConnectorDocumentationWrapper>

airbyte-webapp/src/pages/destination/DestinationOverviewPage.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
-import { useOutletContext } from "react-router-dom";
 
 import { ConnectorIcon } from "components/common/ConnectorIcon";
 import { TableItemTitle } from "components/ConnectorBlocks";
@@ -13,12 +12,12 @@ import { useSourceList } from "hooks/services/useSourceHook";
 import { RoutePaths } from "pages/routePaths";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 
-import { DestinationOutletContext } from "./types";
+import { useGetDestinationFromParams } from "./useGetDestinationFromParams";
 
 export const DestinationOverviewPage = () => {
   const navigate = useNavigate();
 
-  const { destination } = useOutletContext<DestinationOutletContext>();
+  const destination = useGetDestinationFromParams();
   const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId);
   // We load only connections attached to this destination to be shown in the connections grid
   const { connections } = useConnectionList({ destinationId: [destination.destinationId] });

airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
-import { useOutletContext } from "react-router-dom";
+
+import { Box } from "components/ui/Box";
+import { Text } from "components/ui/Text";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
@@ -17,16 +19,17 @@ import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { ConnectorCardValues } from "views/Connector/ConnectorForm/types";
 
 import styles from "./DestinationSettings.module.scss";
-import { DestinationOutletContext } from "../types";
+import { useGetDestinationFromParams } from "../useGetDestinationFromParams";
 
 export const DestinationSettingsPage: React.FC = () => {
-  const { destination } = useOutletContext<DestinationOutletContext>();
+  const destination = useGetDestinationFromParams();
+
   const { connections: connectionsWithDestination } = useConnectionList({ destinationId: [destination.destinationId] });
+  const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId);
   const destinationSpecification = useGetDestinationDefinitionSpecification(
     destination.destinationDefinitionId,
     destination.destinationId
   );
-  const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId);
   const reloadDestination = useInvalidateDestination(destination.destinationId);
   const { mutateAsync: updateDestination } = useUpdateDestination();
   const { mutateAsync: deleteDestination } = useDeleteDestination();
@@ -55,17 +58,19 @@ export const DestinationSettingsPage: React.FC = () => {
       return null;
     }
     return (
-      <p>
-        <FormattedMessage
-          id="tables.affectedConnectionsOnDeletion"
-          values={{ count: connectionsWithDestination.length }}
-        />
-        {connectionsWithDestination.map((connection) => (
-          <React.Fragment key={connection.connectionId}>
-            - <strong>{`${connection.name}\n`}</strong>
-          </React.Fragment>
-        ))}
-      </p>
+      <Box pt="lg">
+        <Text size="lg">
+          <FormattedMessage
+            id="tables.affectedConnectionsOnDeletion"
+            values={{ count: connectionsWithDestination.length }}
+          />
+        </Text>
+        <ul>
+          {connectionsWithDestination.map((connection) => (
+            <li key={connection.connectionId}>{connection.name}</li>
+          ))}
+        </ul>
+      </Box>
     );
   }, [connectionsWithDestination]);
 

airbyte-webapp/src/pages/destination/useGetDestinationFromParams.tsx

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+
+import { StepsTypes } from "components/ConnectorBlocks";
+
+import { useGetDestination } from "hooks/services/useDestinationHook";
+
+export const useGetDestinationFromParams = () => {
+  const params = useParams<{ "*": StepsTypes | "" | undefined; destinationId: string }>();
+  if (!params.destinationId) {
+    throw new Error("Destination id is missing");
+  }
+
+  return useGetDestination(params.destinationId);
+};
+
+export const useGetDestinationTabFromParams = () => {
+  const params = useParams<{ "*": StepsTypes | "" | undefined; destinationId: string }>();
+
+  return useMemo<StepsTypes | undefined>(() => {
+    return params["*"] === "" ? StepsTypes.OVERVIEW : params["*"];
+  }, [params]);
+};

airbyte-webapp/src/pages/routePaths.tsx

@@ -20,13 +20,13 @@ export enum RoutePaths {
 }
 
 export enum DestinationPaths {
-  Root = ":id/*", // currently our tabs rely on this * wildcard to detect which tab is currently active
+  Root = ":destinationId/*", // currently our tabs rely on this * wildcard to detect which tab is currently active
   Settings = "settings",
   NewDestination = "new-destination",
 }
 
 export enum SourcePaths {
-  Root = ":id/*", // currently our tabs rely on this * wildcard to detect which tab is currently active
+  Root = ":sourceId/*", // currently our tabs rely on this * wildcard to detect which tab is currently active
   Settings = "settings",
   NewSource = "new-source",
 }

airbyte-webapp/src/pages/source/SourceItemPage/SourceItemPage.tsx

@@ -1,6 +1,6 @@
-import React, { Suspense, useMemo } from "react";
+import React, { Suspense } from "react";
 import { useIntl } from "react-intl";
-import { Outlet, useNavigate, useParams } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
 
 import { ApiErrorBoundary } from "components/common/ApiErrorBoundary";
 import { HeadTitle } from "components/common/HeadTitle";
@@ -11,53 +11,59 @@ import { Breadcrumbs } from "components/ui/Breadcrumbs";
 import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
+import { useAppMonitoringService } from "hooks/services/AppMonitoringService";
 import { useExperiment } from "hooks/services/Experiment";
+import { ResourceNotFoundErrorBoundary } from "views/common/ResourceNotFoundErrorBoundary";
+import { StartOverErrorView } from "views/common/StartOverErrorView";
 import { ConnectorDocumentationWrapper } from "views/Connector/ConnectorDocumentationLayout";
 
-import { useSetupSourceOverviewContext } from "../SourceOverviewPage/sourceOverviewContext";
+import { useGetSourceFromParams, useGetSourceTabFromParams } from "../SourceOverviewPage/useGetSourceFromParams";
 
 export const SourceItemPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.SOURCE_ITEM);
-  const params = useParams<{ "*": StepsTypes | "" | undefined; id: string }>();
+  const source = useGetSourceFromParams();
+
+  // from here to the below comment can be removed when flag for new connection flow is on
   const navigate = useNavigate();
   const { formatMessage } = useIntl();
-  const isNewConnectionFlowEnabled = useExperiment("connection.updatedConnectionFlow", false);
-
-  const currentStep = useMemo<StepsTypes | "" | undefined>(
-    () => (params["*"] === "" ? StepsTypes.OVERVIEW : params["*"]),
-    [params]
-  );
 
-  const { source, sourceDefinition, connections } = useSetupSourceOverviewContext(params.id ?? "");
+  const onSelectStep = (id: string) => {
+    const path = id === StepsTypes.OVERVIEW ? "." : id.toLowerCase();
+    navigate(path);
+  };
 
   const breadcrumbsData = [
     {
-      label: formatMessage({ id: "sidebar.sources" }),
+      label: formatMessage({ id: "admin.sources" }),
       to: "..",
     },
     { label: source.name },
   ];
+  // to here
 
-  const onSelectStep = (id: string) => {
-    const path = id === StepsTypes.OVERVIEW ? "." : id.toLowerCase();
-    navigate(path);
-  };
+  const isNewConnectionFlowEnabled = useExperiment("connection.updatedConnectionFlow", false);
+
+  const currentStep = useGetSourceTabFromParams();
+
+  const { trackError } = useAppMonitoringService();
 
   return (
-    <ConnectorDocumentationWrapper>
-      <HeadTitle titles={[{ id: "admin.sources" }, { title: source.name }]} />
-      <PageHeader
-        title={<Breadcrumbs data={breadcrumbsData} />}
-        middleComponent={
-          !isNewConnectionFlowEnabled && <ItemTabs currentStep={currentStep} setCurrentStep={onSelectStep} />
-        }
-      />
-      {isNewConnectionFlowEnabled && <ConnectorNavigationTabs connectorType="source" />}
-      <Suspense fallback={<LoadingPage />}>
-        <ApiErrorBoundary>
-          <Outlet context={{ source, sourceDefinition, connections }} />
-        </ApiErrorBoundary>
-      </Suspense>
-    </ConnectorDocumentationWrapper>
+    <ResourceNotFoundErrorBoundary errorComponent={<StartOverErrorView />} trackError={trackError}>
+      <ConnectorDocumentationWrapper>
+        <HeadTitle titles={[{ id: "admin.sources" }, { title: source.name }]} />
+        <PageHeader
+          title={<Breadcrumbs data={breadcrumbsData} />}
+          middleComponent={
+            !isNewConnectionFlowEnabled && <ItemTabs currentStep={currentStep} setCurrentStep={onSelectStep} />
+          }
+        />
+        {isNewConnectionFlowEnabled && <ConnectorNavigationTabs connectorType="source" />}
+        <Suspense fallback={<LoadingPage />}>
+          <ApiErrorBoundary>
+            <Outlet />
+          </ApiErrorBoundary>
+        </Suspense>
+      </ConnectorDocumentationWrapper>
+    </ResourceNotFoundErrorBoundary>
   );
 };

airbyte-webapp/src/pages/source/SourceOverviewPage/SourceOverviewPage.tsx

@@ -6,14 +6,21 @@ import { TableItemTitle } from "components/ConnectorBlocks";
 import Placeholder, { ResourceTypes } from "components/Placeholder";
 import { DropdownMenuOptionType } from "components/ui/DropdownMenu";
 
+import { useConnectionList } from "hooks/services/useConnectionHook";
 import { useDestinationList } from "hooks/services/useDestinationHook";
 import { RoutePaths } from "pages/routePaths";
+import { useSourceDefinition } from "services/connector/SourceDefinitionService";
+
+import { useGetSourceFromParams } from "./useGetSourceFromParams";
 
-import { useSourceOverviewContext } from "./sourceOverviewContext";
 const SourceConnectionTable = React.lazy(() => import("./SourceConnectionTable"));
 
 export const SourceOverviewPage = () => {
-  const { source, sourceDefinition, connections } = useSourceOverviewContext();
+  const source = useGetSourceFromParams();
+
+  const sourceDefinition = useSourceDefinition(source.sourceDefinitionId);
+  const { connections } = useConnectionList({ sourceId: [source.sourceId] });
+
   // We load all destinations so the add destination button has a pre-filled list of options.
   const { destinations } = useDestinationList();
 

airbyte-webapp/src/pages/source/SourceOverviewPage/useGetSourceFromParams.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
+
+import { StepsTypes } from "components/ConnectorBlocks";
+
+import { useGetSource } from "hooks/services/useSourceHook";
+
+export const useGetSourceFromParams = () => {
+  const params = useParams<{ "*": StepsTypes | "" | undefined; sourceId: string }>();
+  if (!params.sourceId) {
+    throw new Error("Source id is missing");
+  }
+  return useGetSource(params.sourceId);
+};
+
+export const useGetSourceTabFromParams = () => {
+  const params = useParams<{ "*": StepsTypes | "" | undefined; sourceId: string }>();
+
+  return useMemo<StepsTypes | undefined>(() => {
+    return params["*"] === "" ? StepsTypes.OVERVIEW : params["*"];
+  }, [params]);
+};