Dbz#1920

debezium-platform-stage/src/apis/types.tsx

@@ -69,6 +69,7 @@ export interface CatalogApiResponse {
   components: {
     converter: CatalogComponentEntry[];
     "custom-converter": CatalogComponentEntry[];
+    "server-sink": CatalogComponentEntry[];
     "sink-connector": CatalogComponentEntry[];
     "source-connector": CatalogComponentEntry[];
     transformation: CatalogComponentEntry[];

debezium-platform-stage/src/components/CreateSourceSchemaForm.tsx → debezium-platform-stage/src/components/CreateSchemaForm.tsx

@@ -71,7 +71,6 @@
 } from "@utils/helpers";
 import { useNotification } from "@appContext/index";
 import { Catalog, CatalogApiResponse, ConnectorSchema, SchemaGroup, SchemaProperty } from "../apis/types";
-import destinationCatalog from "../__mocks__/data/DestinationCatalog.json";
 import ConnectorImage from "./ComponentImage";
 import TableViewComponent from "./TableViewComponent";
 import SchemaGroupSection from "./SchemaGroupSection";
@@ -92,15 +91,15 @@
 import { buildSourceConnectorDisplayGroupedProperties } from "@utils/sourceConnectorDisplayGroups";
 import { splitSourceConfigForHydration } from "@utils/sourceConfigSplit";
 import _ from "lodash";
-import "./CreateSourceSchemaForm.css";
+import "./CreateSchemaForm.css";
 
 interface connectionsList extends Connection {
   role: string;
 }
 
 type AdditionalProp = { key: string; value: string };
 
-interface CreateSourceSchemaFormProps {
+interface CreateSchemaFormProps {
   connectorSchema: ConnectorSchema;
   sourceId: string;
   dataType?: string;
@@ -109,9 +108,10 @@
   readOnly?: boolean;
   /** Initial layout; user can still switch via the toggle. Pipeline designer modal uses "tabs". */
   defaultLayoutMode?: "jumplinks" | "tabs";
+  hideSignalCollections?: boolean;
 }
 
-export interface CreateSourceSchemaFormHandle {
+export interface CreateSchemaFormHandle {
   validate: () => boolean;
   submit: () => void;
   /** Populated after the most recent failed `validate()` */
@@ -219,10 +219,10 @@
   return t("source:form.validationFailedInMultipleSections", { list: sections.join(", ") });
 }
 
-const CreateSourceSchemaForm = React.forwardRef<
-  CreateSourceSchemaFormHandle,
-  CreateSourceSchemaFormProps
->(({ connectorSchema, sourceId, dataType, onSubmit, initialSource, readOnly = false, defaultLayoutMode = "jumplinks" }, ref) => {
+const CreateSchemaForm = React.forwardRef<
+  CreateSchemaFormHandle,
+  CreateSchemaFormProps
+>(({ connectorSchema, sourceId, dataType, onSubmit, initialSource, readOnly = false, defaultLayoutMode = "jumplinks", hideSignalCollections = false }, ref) => {
   const { t } = useTranslation();
   const { addNotification } = useNotification();
   const hydratedSourceIdRef = useRef<number | null>(null);
@@ -357,9 +357,11 @@
       }
     }
     sections.push({ id: "additional-properties", label: "Additional Properties", type: "custom" });
-    sections.push({ id: "signal-collections", label: "Signal Collections", type: "custom" });
+    if (!hideSignalCollections) {
+      sections.push({ id: "signal-collections", label: "Signal Collections", type: "custom" });
+    }
     return sections;
-  }, [orderedGroups, groupedProperties]);
+  }, [orderedGroups, groupedProperties, hideSignalCollections]);
 
   useEffect(() => {
     if (layoutMode !== "jumplinks") return;
@@ -405,6 +407,17 @@
     }
   );
 
+  const { data: destinationCatalog = [] } = useQuery<Catalog[], Error>(
+    "destinationConnectorCatalog",
+    async () => {
+      const response = await fetchData<CatalogApiResponse>(`${API_URL}/api/catalog`);
+      return (response.components["server-sink"] ?? []).map((entry) => ({
+        ...entry,
+        role: "destination",
+      }));
+    }
+  );
+
   const catalog: Catalog[] = [...sourceCatalog, ...destinationCatalog];
 
   const { isLoading: isConnectionsLoading } = useQuery<Connection[], Error>(
@@ -446,7 +459,7 @@
     }
   );
 
   const collectionsError =
     collectionsQueryError != null
       ? typeof collectionsQueryError === "object"
         ? (collectionsQueryError as object)
@@ -1120,9 +1133,11 @@
         </section>
 
         {/* Signal Collections */}
-        <section id="signal-collections" className="jumplinks-section-bordered">
-          {renderSignalCollections()}
-        </section>
+        {!hideSignalCollections && (
+          <section id="signal-collections" className="jumplinks-section-bordered">
+            {renderSignalCollections()}
+          </section>
+        )}
       </div>
     </div>
   );
@@ -1183,9 +1198,11 @@
             </FormFieldGroup>
           </div>
 
-          <div style={{ marginTop: "1rem" }}>
-            {renderSignalCollections()}
-          </div>
+          {!hideSignalCollections && (
+            <div style={{ marginTop: "1rem" }}>
+              {renderSignalCollections()}
+            </div>
+          )}
         </CardBody>
       </Card>
     </div>
@@ -1281,5 +1298,5 @@
   );
 });
 
-CreateSourceSchemaForm.displayName = "CreateSourceSchemaForm";
-export default CreateSourceSchemaForm;
+CreateSchemaForm.displayName = "CreateSchemaForm";
+export default CreateSchemaForm;

debezium-platform-stage/src/components/SourceSchemaReviewView.test.tsx → debezium-platform-stage/src/components/SchemaReviewView.test.tsx

@@ -2,7 +2,7 @@
 import { screen } from "@testing-library/react";
 import { describe, it, expect, vi, beforeAll, beforeEach } from "vitest";
 import { useQuery } from "react-query";
-import SourceSchemaReviewView from "./SourceSchemaReviewView";
+import SchemaReviewView from "./SchemaReviewView";
 import type { Source } from "../apis/apis";
 import type { ConnectorSchema } from "../apis/types";
 import { render } from "../__test__/unit/test-utils";
@@ -55,7 +55,7 @@ beforeAll(() => {
   } as unknown as typeof IntersectionObserver;
 });
 
-describe("SourceSchemaReviewView", () => {
+describe("SchemaReviewView", () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
@@ -69,7 +69,7 @@ describe("SourceSchemaReviewView", () => {
     } as any);
 
     render(
-      <SourceSchemaReviewView source={baseSource} connectorSchema={minimalSchema} />,
+      <SchemaReviewView source={baseSource} connectorSchema={minimalSchema} />,
     );
 
     expect(await screen.findByText("Review Source")).toBeInTheDocument();
@@ -87,7 +87,7 @@ describe("SourceSchemaReviewView", () => {
     } as any);
 
     render(
-      <SourceSchemaReviewView source={baseSource} connectorSchema={minimalSchema} />,
+      <SchemaReviewView source={baseSource} connectorSchema={minimalSchema} />,
     );
 
     const unsetValues = await screen.findAllByText("—");
@@ -143,7 +143,7 @@ describe("SourceSchemaReviewView", () => {
     };
 
     render(
-      <SourceSchemaReviewView source={withConnection} connectorSchema={filtersSchema} />,
+      <SchemaReviewView source={withConnection} connectorSchema={filtersSchema} />,
     );
 
     expect(