debezium/dbz#1978 Update the connection edit view page

debezium-platform-stage/cypress/e2e/source.cy.ts

@@ -51,10 +51,10 @@ describe('Source Management', () => {
   };
 
   const fillMinimalCreateSourceForm = (sourceName: string) => {
-    cy.get('#source-name', { timeout: 30000 }).should('be.visible').clear({ force: true }).type(sourceName, {
+    cy.get('#connector-name', { timeout: 30000 }).should('be.visible').clear({ force: true }).type(sourceName, {
       force: true,
     });
-    cy.get('#source-description').clear({ force: true }).type('Cypress test description', { force: true });
+    cy.get('#connector-description').clear({ force: true }).type('Cypress test description', { force: true });
     selectPostgresConnectionInForm();
     fillTopicPrefixField('dbz.cypress');
   };
@@ -113,7 +113,7 @@ describe('Source Management', () => {
     clickPostgresqlCatalogCard();
     cy.url().should('match', /\/source\/create_source\/.+/);
     cy.wait('@getSourceConnectorSchema');
-    cy.get('#source-name', { timeout: 30000 }).should('be.visible');
+    cy.get('#connector-name', { timeout: 30000 }).should('be.visible');
   };
 
   describe('Source Catalog', () => {
@@ -176,9 +176,9 @@ describe('Source Management', () => {
       cy.contains('Source type').should('be.visible');
       cy.contains('PostgreSQL').should('be.visible');
       cy.contains('Source name').should('be.visible');
-      cy.get('#source-name').should('exist');
+      cy.get('#connector-name').should('exist');
       cy.contains('Description').should('be.visible');
-      cy.get('#source-description').should('exist');
+      cy.get('#connector-description').should('exist');
       cy.contains('Connector Essentials').should('be.visible');
       cy.contains('button', 'Create source').should('be.visible');
       cy.contains('Back to catalog').should('be.visible');
@@ -193,20 +193,20 @@ describe('Source Management', () => {
       cy.wait(300);
       cy.get('#jumplinks-layout').click();
       cy.contains('Connector Essentials').should('be.visible');
-      cy.get('#source-name').should('be.visible');
+      cy.get('#connector-name').should('be.visible');
     });
 
     it('should validate required fields', () => {
       openCreateSourceFromCatalog();
-      cy.get('#source-name', { timeout: 30000 }).should('be.visible');
+      cy.get('#connector-name', { timeout: 30000 }).should('be.visible');
       cy.contains('button', 'Create source').should('not.be.disabled');
       cy.contains('button', 'Create source').click();
-      cy.get('#source-name').should('have.attr', 'aria-invalid', 'true');
+      cy.get('#connector-name').should('have.attr', 'aria-invalid', 'true');
     });
 
     it('should add and remove configuration properties', () => {
       openCreateSourceFromCatalog();
-      cy.get('#source-name', { timeout: 30000 }).should('be.visible');
+      cy.get('#connector-name', { timeout: 30000 }).should('be.visible');
       cy.contains('h2', 'Additional Properties').scrollIntoView();
       cy.contains('button', 'Add property').scrollIntoView().click({ force: true });
       cy.get('[id^="addprop-key-input-"]').should('have.length', 1);
@@ -324,33 +324,33 @@ describe('Source Management', () => {
       cy.get('table[aria-label="source table"] tbody tr').first().find('button').first().click();
       cy.url({ timeout: 30000 }).should('match', /[?&]state=view/);
       cy.contains('button', 'Edit', { timeout: 30000 }).should('be.visible').click();
-      cy.get('#source-name', { timeout: 30000 }).should('be.visible');
-      cy.get('#source-description', { timeout: 30000 }).should('be.visible');
+      cy.get('#connector-name', { timeout: 30000 }).should('be.visible');
+      cy.get('#connector-description', { timeout: 30000 }).should('be.visible');
     };
 
     it('should display edit source form', () => {
       createTestSource();
       cy.visitWithTourDisabled('/source');
       openEditableSourceFormFromListFirstRow();
-      cy.get('#source-name').invoke('val').should('not.be.empty');
+      cy.get('#connector-name').invoke('val').should('not.be.empty');
     });
 
     it('should toggle between view and edit mode', () => {
       createTestSource();
       cy.visitWithTourDisabled('/source');
       openEditableSourceFormFromListFirstRow();
-      cy.get('#source-name').should('not.have.attr', 'readonly');
+      cy.get('#connector-name').should('not.have.attr', 'readonly');
       cy.contains('button', 'Cancel').click();
       // Back to review layout: form unmounts. Header Edit can sit in a scroll-clipped region — avoid strict visibility.
-      cy.get('#source-name').should('not.exist');
+      cy.get('#connector-name').should('not.exist');
       cy.contains('button', 'Edit', { timeout: 30000 }).should('exist');
     });
 
     it('should successfully update source', () => {
       createTestSource();
       cy.visitWithTourDisabled('/source');
       openEditableSourceFormFromListFirstRow();
-      cy.get('#source-description').clear().type('Updated description by Cypress');
+      cy.get('#connector-description').clear().type('Updated description by Cypress');
       cy.contains('button', 'Save changes').click();
       cy.get('.pf-v6-c-modal-box').should('be.visible');
       cy.contains('button', 'Confirm').click();
@@ -361,9 +361,9 @@ describe('Source Management', () => {
       createTestSource();
       cy.visitWithTourDisabled('/source');
       openEditableSourceFormFromListFirstRow();
-      cy.get('#source-description').clear().type('Temporary change');
+      cy.get('#connector-description').clear().type('Temporary change');
       cy.contains('button', 'Cancel').click();
-      cy.get('#source-name').should('not.exist');
+      cy.get('#connector-name').should('not.exist');
       cy.contains('button', 'Edit', { timeout: 30000 }).should('exist');
     });
   });
@@ -388,7 +388,7 @@ describe('Source Management', () => {
       cy.contains('Delete').click();
       cy.get('.pf-v6-c-modal-box').should('be.visible');
       cy.contains('delete').should('be.visible');
-      cy.get('#dalete-name').should('exist');
+      cy.get('#delete-name').should('exist');
     });
 
     it('should require typing source name to confirm delete', () => {
@@ -400,9 +400,9 @@ describe('Source Management', () => {
         .click();
       cy.contains('Delete').click();
       cy.get('.pf-v6-c-modal-box').contains('button', 'Delete').should('be.disabled');
-      cy.get('#dalete-name').type('wrong-name');
+      cy.get('#delete-name').type('wrong-name');
       cy.get('.pf-v6-c-modal-box').contains('button', 'Delete').should('be.disabled');
-      cy.get('#dalete-name').clear();
+      cy.get('#delete-name').clear();
     });
 
     it('should successfully delete source', () => {
@@ -419,7 +419,7 @@ describe('Source Management', () => {
             .find('td[data-label="Actions"] button')
             .click();
           cy.contains('Delete').click();
-          cy.get('#dalete-name').type(name.trim());
+          cy.get('#delete-name').type(name.trim());
           cy.get('.pf-v6-c-modal-box').contains('button', 'Delete').click();
           cy.contains('Delete successful').should('be.visible');
         });

debezium-platform-stage/public/locales/en/common.json

@@ -102,5 +102,20 @@
   "usedIn": "Used in",
   "replayTour": "Replay Guided Tour",
   "vaults": "Vaults",
-  "verify": "Verify"
+  "verify": "Verify",
+  "connector": {
+    "jumplinks": {
+      "connectorEssentials": "Connector Essentials",
+      "additionalProperties": "Additional Properties"
+    },
+    "form": {
+      "validationFailedGeneric": "Please fill all required fields.",
+      "validationFailedInOneSection": "Please fill all required fields in {{section}} section.",
+      "validationFailedInMultipleSections": "Please fill all required fields in {{list}} sections."
+    },
+    "create": {
+      "dataTableDescription": "Select the {{val}} to be targeted for sync",
+      "dataTableTitle": "{{val}} database"
+    }
+  }
 }

debezium-platform-stage/public/locales/it/common.json

@@ -101,5 +101,20 @@
   "type": "Tipo",
   "replayTour": "Ripeti il Tour Guidato",
   "vaults": "Vault",
-  "verify": "Verifica"
+  "verify": "Verifica",
+  "connector": {
+    "jumplinks": {
+      "connectorEssentials": "Elementi essenziali del connettore",
+      "additionalProperties": "Proprietà aggiuntive"
+    },
+    "form": {
+      "validationFailedGeneric": "Compila tutti i campi obbligatori.",
+      "validationFailedInOneSection": "Compila tutti i campi obbligatori nella sezione {{section}}.",
+      "validationFailedInMultipleSections": "Compila tutti i campi obbligatori nelle sezioni {{list}}."
+    },
+    "create": {
+      "dataTableDescription": "Seleziona il {{val}} da sincronizzare",
+      "dataTableTitle": "{{val}} database"
+    }
+  }
 }

debezium-platform-stage/src/appLayout/AppBreadcrumb.tsx

@@ -42,19 +42,19 @@ const AppBreadcrumb: React.FC = () => {
             {generateBreadcrumbItem("#", "Catalog", navigate, true)}
           </BreadcrumbGenerator>
         );
-      case route.match("source/[^/]+") !== null:
+      case route.includes("/source/create_source"):
         return (
           <BreadcrumbGenerator>
             {generateBreadcrumbItem("/source", "Source", navigate)}
-            {generateBreadcrumbItem("#", "Edit source", navigate, true)}
+            {generateBreadcrumbItem("/source/catalog", "Catalog", navigate)}
+            {generateBreadcrumbItem("#", "Create source", navigate, true)}
           </BreadcrumbGenerator>
         );
-      case route.includes("/source/create_source"):
+      case route.match(/^\/source\/[^/]+$/) !== null && !route.includes("/create_source"):
         return (
           <BreadcrumbGenerator>
             {generateBreadcrumbItem("/source", "Source", navigate)}
-            {generateBreadcrumbItem("/source/catalog", "Catalog", navigate)}
-            {generateBreadcrumbItem("#", "Create source", navigate, true)}
+            {generateBreadcrumbItem("#", "Edit source", navigate, true)}
           </BreadcrumbGenerator>
         );
       case route === "/destination/catalog":
@@ -64,19 +64,19 @@ const AppBreadcrumb: React.FC = () => {
             {generateBreadcrumbItem("#", "Catalog", navigate, true)}
           </BreadcrumbGenerator>
         );
-      case route.match("destination/[^/]+") !== null:
+      case route.includes("/destination/create_destination"):
         return (
           <BreadcrumbGenerator>
             {generateBreadcrumbItem("/destination", "Destination", navigate)}
-            {generateBreadcrumbItem("#", "Edit destination", navigate, true)}
+            {generateBreadcrumbItem("/destination/catalog", "Catalog", navigate)}
+            {generateBreadcrumbItem("#", "Create destination", navigate, true)}
           </BreadcrumbGenerator>
         );
-      case route.includes("/destination/create_destination"):
+      case route.match(/^\/destination\/[^/]+$/) !== null && !route.includes("/create_destination"):
         return (
           <BreadcrumbGenerator>
             {generateBreadcrumbItem("/destination", "Destination", navigate)}
-            {generateBreadcrumbItem("/destination/catalog", "Catalog", navigate)}
-            {generateBreadcrumbItem("#", "Create destination", navigate, true)}
+            {generateBreadcrumbItem("#", "Edit destination", navigate, true)}
           </BreadcrumbGenerator>
         );
         case route === "/connections/catalog":
@@ -94,34 +94,26 @@ const AppBreadcrumb: React.FC = () => {
               {generateBreadcrumbItem("#", "Create connection", navigate, true)}
             </BreadcrumbGenerator>
           );
+        case route.match(/^\/connections\/[^/]+$/) !== null && !route.includes("/create_connection"):
+          return (
+            <BreadcrumbGenerator>
+              {generateBreadcrumbItem("/connections", "Connections", navigate)}
+              {generateBreadcrumbItem("#", "Edit connection", navigate, true)}
+            </BreadcrumbGenerator>
+          );
       case route === "/pipeline/pipeline_designer":
         return (
           <BreadcrumbGenerator>
             {generateBreadcrumbItem("/pipeline", "Pipeline", navigate)}
             {generateBreadcrumbItem("#", "Pipeline designer", navigate, true)}
           </BreadcrumbGenerator>
         );
-      case route.match("/pipeline/[^/]+") !== null:
-        return (
-          <BreadcrumbGenerator>
-            {generateBreadcrumbItem("/pipeline", "Pipeline", navigate)}
-            {generateBreadcrumbItem("#", "Overview", navigate, true)}
-          </BreadcrumbGenerator>
-        );
-      case route.match("/pipeline/pipeline_edit/[^/]+") !== null:
-        return (
-          <BreadcrumbGenerator>
-            {generateBreadcrumbItem("/pipeline", "Pipeline", navigate)}
-            {generateBreadcrumbItem("#", "indra-ui-test", navigate, true)}
-            {generateBreadcrumbItem("#", "Edit", navigate, true)}
-          </BreadcrumbGenerator>
-        );
       case route === "/pipeline/pipeline_designer/configure":
         return (
           <BreadcrumbGenerator>
             {generateBreadcrumbItem("/pipeline", "Pipeline", navigate)}
-            {generateBreadcrumbItem("#", "Pipeline designer", navigate)}
-            {generateBreadcrumbItem("#", "Create pipeline", navigate)}
+            {generateBreadcrumbItem("/pipeline/pipeline_designer", "Pipeline designer", navigate)}
+            {generateBreadcrumbItem("#", "Create pipeline", navigate, true)}
           </BreadcrumbGenerator>
         );
       case route === "/pipeline/pipeline_designer/destination":
@@ -130,10 +122,10 @@ const AppBreadcrumb: React.FC = () => {
             {generateBreadcrumbItem("/pipeline", "Pipeline", navigate)}
             {generateBreadcrumbItem(
               "/pipeline/pipeline_designer",
-              " Pipeline designer",
+              "Pipeline designer",
               navigate
             )}
-            {generateBreadcrumbItem("#", "Destination", navigate, true)}
+            {generateBreadcrumbItem("#", "Create pipeline", navigate, true)}
           </BreadcrumbGenerator>
         );
       case route.includes(
@@ -147,12 +139,27 @@ const AppBreadcrumb: React.FC = () => {
               "Pipeline designer",
               navigate
             )}
+            {generateBreadcrumbItem("#", "Create pipeline", navigate, true)}
+          </BreadcrumbGenerator>
+        );
+      case route.match("/pipeline/pipeline_edit/[^/]+") !== null:
+        return (
+          <BreadcrumbGenerator>
+            {generateBreadcrumbItem("/pipeline", "Pipeline", navigate)}
+            {generateBreadcrumbItem("#", "indra-ui-test", navigate, true)}
+            {generateBreadcrumbItem("#", "Edit", navigate, true)}
+          </BreadcrumbGenerator>
+        );
+      case route.match("/pipeline/[^/]+") !== null:
+        return (
+          <BreadcrumbGenerator>
+            {generateBreadcrumbItem("/pipeline", "Pipeline", navigate)}
             {generateBreadcrumbItem(
-              "pipeline/pipeline_designer/destination",
-              "Destination",
+              "/pipeline/pipeline_designer",
+              "Pipeline designer",
               navigate
             )}
-            {generateBreadcrumbItem("#", "Create destination", navigate, true)}
+            {generateBreadcrumbItem("#", "Create pipeline", navigate, true)}
           </BreadcrumbGenerator>
         );
       default:

debezium-platform-stage/src/components/ComponentImage.tsx

@@ -29,7 +29,7 @@ import milvus from "../assets/milvus.png";
 import qdrant from "../assets/qdrant.png";
 import redis from "../assets/redis.png";
 import http from "../assets/http2.png";
-import db2 from "../assets/ibm-db2.png";
+import db2 from "../assets/ibm_db2.svg";
 
 interface ConnectorImageProps {
   connectorType: string;

debezium-platform-stage/src/components/ConnectionTable.tsx

@@ -253,7 +253,7 @@ const ConnectionTable: React.FunctionComponent<IConnectionTableProps> = ({
           >
             <FormGroup isRequired fieldId={`connection-delete-name`}>
               <TextInput
-                id="dalete-name"
+                id="delete-name"
                 aria-label="delete name"
                 onChange={(_e, value) => setDeleteInstanceName(value)}
                 value={deleteInstanceName}