fix: show action menu when stream has a prefix (#14411)

Co-authored-by: Volodymyr Petrov <[email protected]>
airbytehq · Oct 21, 2024 · f9bad87 · f9bad87
1 parent d9f0a55
commit f9bad87
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/airbyte-webapp/src/area/connection/utils/useUiStreamsStates.test.ts b/airbyte-webapp/src/area/connection/utils/useUiStreamsStates.test.ts
@@ -87,7 +87,7 @@ describe("useUiStreamStates", () => {
       expectedIsLoadingHistoricalData,
       expectedDataFreshAsOf,
     }) => {
-      (useCurrentConnection as jest.Mock).mockReturnValue({ prefix: "" });
+      (useCurrentConnection as jest.Mock).mockReturnValue({ prefix: "", syncCatalog: { streams: [] } });
       (useConnectionStatus as jest.Mock).mockReturnValue(connectionStatus);
       (useGetConnectionSyncProgress as jest.Mock).mockReturnValue(syncProgress);
       (useStreamsSyncProgress as jest.Mock).mockReturnValue(streamSyncProgress);
@@ -112,7 +112,7 @@ describe("useUiStreamStates", () => {
 });
 
 it("should handle RateLimited status", () => {
-  (useCurrentConnection as jest.Mock).mockReturnValue({ prefix: "" });
+  (useCurrentConnection as jest.Mock).mockReturnValue({ prefix: "", syncCatalog: { streams: [] } });
   (useStreamsStatuses as jest.Mock).mockReturnValue({
     streamStatuses: new Map([
       [
@@ -147,7 +147,7 @@ it("should handle post-job fetching correctly", async () => {
   const mockQueryClient = {
     invalidateQueries: mockInvalidateQueries,
   };
-  (useCurrentConnection as jest.Mock).mockReturnValue({ prefix: "" });
+  (useCurrentConnection as jest.Mock).mockReturnValue({ prefix: "", syncCatalog: { streams: [] } });
   (useConnectionStatus as jest.Mock).mockReturnValueOnce({
     status: ConnectionSyncStatus.running,
     isRunning: true,

diff --git a/airbyte-webapp/src/area/connection/utils/useUiStreamsStates.ts b/airbyte-webapp/src/area/connection/utils/useUiStreamsStates.ts
@@ -13,6 +13,7 @@ import { StreamStatusType } from "components/connection/StreamStatusIndicator";
 
 import { connectionsKeys, useCurrentConnection, useGetConnectionSyncProgress } from "core/api";
 import {
+  AirbyteStreamAndConfiguration,
   ConnectionSyncStatus,
   JobConfigType,
   StreamStatusJobType,
@@ -28,6 +29,7 @@ import { useStreamsSyncProgress } from "./useStreamsSyncProgress";
 interface BaseUIStreamState {
   streamName: string;
   streamNamespace?: string;
+  catalogStream?: AirbyteStreamAndConfiguration;
   activeJobConfigType?: JobConfigType;
   activeJobStartedAt?: number;
   dataFreshAsOf?: number;
@@ -47,7 +49,7 @@ export interface RateLimitedUIStreamState extends Omit<BaseUIStreamState, "statu
 export type UIStreamState = BaseUIStreamState | RateLimitedUIStreamState;
 
 export const useUiStreamStates = (connectionId: string): UIStreamState[] => {
-  const { prefix } = useCurrentConnection();
+  const { prefix, syncCatalog } = useCurrentConnection();
   const connectionStatus = useConnectionStatus(connectionId);
   const { enabledStreamsByName } = useStreamsListContext();
   const [wasRunning, setWasRunning] = useState<boolean>(connectionStatus.status === ConnectionSyncStatus.running);
@@ -91,6 +93,11 @@ export const useUiStreamStates = (connectionId: string): UIStreamState[] => {
     const uiState: UIStreamState = {
       streamName: `${prefix ? prefix : ""}${streamItem.streamName}`,
       streamNamespace: streamItem.streamNamespace,
+      catalogStream: syncCatalog.streams.find(
+        (catalogStream) =>
+          catalogStream.stream?.name === streamItem.streamName &&
+          catalogStream.stream?.namespace === streamItem.streamNamespace
+      ),
       activeJobConfigType: undefined,
       activeJobStartedAt: undefined,
       dataFreshAsOf: undefined,

diff --git a/airbyte-webapp/src/pages/connections/StreamStatusPage/StreamActionsMenu.tsx b/airbyte-webapp/src/pages/connections/StreamStatusPage/StreamActionsMenu.tsx
@@ -10,7 +10,12 @@ import { DropdownMenu, DropdownMenuOptionType } from "components/ui/DropdownMenu
 import { Text } from "components/ui/Text";
 
 import { useCurrentConnection, useDestinationDefinitionVersion } from "core/api";
-import { ConnectionStatus, DestinationSyncMode, SyncMode } from "core/api/types/AirbyteClient";
+import {
+  AirbyteStreamAndConfiguration,
+  ConnectionStatus,
+  DestinationSyncMode,
+  SyncMode,
+} from "core/api/types/AirbyteClient";
 import { FeatureItem, useFeature } from "core/services/features";
 import { Intent, useGeneratedIntent } from "core/utils/rbac";
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
@@ -24,9 +29,10 @@ import { ConnectionRefreshModal } from "../ConnectionSettingsPage/ConnectionRefr
 interface StreamActionsMenuProps {
   streamName: string;
   streamNamespace?: string;
+  catalogStream?: AirbyteStreamAndConfiguration;
 }
 
-export const StreamActionsMenu: React.FC<StreamActionsMenuProps> = ({ streamName, streamNamespace }) => {
+export const StreamActionsMenu: React.FC<StreamActionsMenuProps> = ({ streamName, streamNamespace, catalogStream }) => {
   const isSyncCatalogV2Enabled = useExperiment("connection.syncCatalogV2");
   const isSyncCatalogV2Allowed = useFeature(FeatureItem.SyncCatalogV2);
   const useSyncCatalogV2 = isSyncCatalogV2Enabled && isSyncCatalogV2Allowed;
@@ -42,10 +48,6 @@ export const StreamActionsMenu: React.FC<StreamActionsMenuProps> = ({ streamName
   const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
   const { openModal } = useModalService();
 
-  const catalogStream = connection.syncCatalog.streams.find(
-    (catalogStream) => catalogStream.stream?.name === streamName && catalogStream.stream?.namespace === streamNamespace
-  );
-
   const disableSyncActions =
     !isSyncConnectionAvailable || connection.status !== ConnectionStatus.active || !canSyncConnection;
 
@@ -105,7 +107,7 @@ export const StreamActionsMenu: React.FC<StreamActionsMenuProps> = ({ streamName
   const onOptionClick = async ({ value }: DropdownMenuOptionType) => {
     if (value === "showInReplicationTable" || value === "openDetails" || value === "editStream") {
       navigate(`../${ConnectionRoutePaths.Replication}`, {
-        state: { namespace: streamNamespace, streamName, action: value },
+        state: { namespace: catalogStream.stream?.namespace, streamName: catalogStream.stream?.name, action: value },
       });
     }
 

diff --git a/airbyte-webapp/src/pages/connections/StreamStatusPage/StreamsList.tsx b/airbyte-webapp/src/pages/connections/StreamStatusPage/StreamsList.tsx
@@ -137,6 +137,7 @@ export const StreamsList: React.FC = () => {
           <StreamActionsMenu
             streamName={props.row.original.streamName}
             streamNamespace={props.row.original.streamNamespace}
+            catalogStream={props.row.original.catalogStream}
           />
         ),
         meta: {