Remove pf classes in topology package

frontend/packages/helm-plugin/integration-tests/support/step-definitions/helm/helm-release.ts

@@ -48,7 +48,7 @@ Then('user is able to see the context menu with actions Upgrade and Delete Helm
 });
 
 Given('user is on the topology sidebar of the helm release {string}', (helmReleaseName: string) => {
-  topologyPage.clickOnGroup(helmReleaseName);
+  topologyPage.clickOnHelmGroup(helmReleaseName);
   topologySidePane.verify();
 });
 
@@ -150,7 +150,7 @@ Then('user will see the Details, Resources, Release notes tabs', () => {
 });
 
 Given('user is on the topology sidebar of the helm release {string}', (helmReleaseName: string) => {
-  topologyPage.clickOnGroup(helmReleaseName);
+  topologyPage.clickOnHelmGroup(helmReleaseName);
   topologySidePane.verify();
 });
 

frontend/packages/knative-plugin/integration-tests/support/step-definitions/eventing/eventing-broker-trigger.ts

@@ -11,6 +11,7 @@ import {
 import { createBroker } from '@console/dev-console/integration-tests/support/pages/functions/createBroker';
 import { topologyPO } from '@console/topology/integration-tests/support/page-objects/topology-po';
 import { topologyPage } from '@console/topology/integration-tests/support/pages/topology';
+import { eventingPO } from '../../pageObjects/global-po';
 
 Given('user has created knative service {string}', (knativeServiceName: string) => {
   createGitWorkloadIfNotExistsOnTopologyPage(
@@ -37,7 +38,7 @@ When('user clicks on the Add Trigger', () => {
 });
 
 When('user will click on the Subscriber dropdown on the modal', () => {
-  cy.get(topologyPO.graph.subscriber.dropdown).click();
+  cy.get(eventingPO.broker.sidebar.subscriberDropDown).click();
 });
 
 Then(
@@ -48,7 +49,7 @@ Then(
 );
 
 When('user selects the auto populated name of subscription', () => {
-  cy.get(topologyPO.graph.subscriber.filter).should('be.visible');
+  cy.get(eventingPO.broker.sidebar.subscriberDropDown).should('be.visible');
 });
 
 When('user selects the Subscriber {string}', (subscriberName: string) => {
@@ -75,7 +76,7 @@ Given('user has already added the trigger', () => {
 
 When('user right clicks on the Trigger to open the context menu', () => {
   cy.get(topologyPO.graph.triggerLink).within(() => {
-    cy.get(topologyPO.graph.triggerEdgeLink).trigger('contextmenu', { force: true });
+    cy.get(topologyPO.graph.triggerEdgeLink).eq(1).trigger('contextmenu', { force: true });
   });
 });
 

frontend/packages/knative-plugin/integration-tests/support/step-definitions/eventing/kafka-event-sink.ts

@@ -76,7 +76,7 @@ When('user clicks on the Add Trigger', () => {
 });
 
 When('user will click on the Subscriber dropdown on the modal', () => {
-  cy.get(topologyPO.graph.subscriber.dropdown).click();
+  cy.get(eventingPO.broker.sidebar.subscriberDropDown).click();
 });
 
 When('user selects the auto populated name of subscription', () => {

frontend/packages/knative-plugin/integration-tests/support/step-definitions/serverless/actions-on-knative-service.ts

@@ -181,7 +181,7 @@ When(
   'user selects {string} context menu option of knative service {string}',
   (option: string, knativeServiceName: string) => {
     cy.get(topologyPO.graph.fitToScreen).click();
-    topologyPage.rightClickOnGroup(knativeServiceName);
+    topologyPage.rightClickOnKnativeNode(knativeServiceName);
     topologyPage.selectContextMenuAction(option);
   },
 );
@@ -193,7 +193,7 @@ When('user clicks Add button on the Edit Annotations modal', () => {
 Given(
   'number of annotations present in topology side bar for {string} service',
   (serviceName: string) => {
-    topologyPage.clickOnGroup(serviceName);
+    topologyPage.clickOnKnativeGroup(serviceName);
     topologySidePane.verify();
     topologySidePane.selectTab('Details');
     cy.get(topologyPO.sidePane.editAnnotations).then(($el) => {
@@ -229,7 +229,7 @@ When('user selects another revision from Revision drop down', () => {
 Then(
   'user will see the label {string} in {string} service side bar details',
   (label: string, serviceName: string) => {
-    topologyPage.clickOnGroup(serviceName);
+    topologyPage.clickOnKnativeGroup(serviceName);
     topologySidePane.verify();
     topologySidePane.selectTab('Details');
     topologySidePane.verifyLabel(label);
@@ -239,7 +239,7 @@ Then(
 Then(
   'user will not see the label {string} in {string} service side bar details',
   (label: string, serviceName: string) => {
-    topologyPage.clickOnGroup(serviceName);
+    topologyPage.clickOnKnativeGroup(serviceName);
     topologySidePane.verify();
     topologySidePane.selectTab('Details');
     cy.byTestID('label-list').find('a').should('be.visible');
@@ -250,7 +250,7 @@ Then(
 Given(
   'label {string} is added to the knative service {string}',
   (labelName: string, knativeServiceName: string) => {
-    topologyPage.rightClickOnGroup(knativeServiceName);
+    topologyPage.rightClickOnKnativeNode(knativeServiceName);
     topologyPage.selectContextMenuAction(nodeActions.EditLabels);
     modal.shouldBeOpened();
     editLabels.enterLabel(labelName);
@@ -261,7 +261,7 @@ Given(
 Then(
   'number of Annotations increased for {string} service in topology side bar details',
   (serviceName: string) => {
-    topologyPage.clickOnGroup(serviceName);
+    topologyPage.clickOnKnativeGroup(serviceName);
     topologySidePane.verify();
     topologySidePane.selectTab('Details');
     cy.get(topologyPO.sidePane.editAnnotations).then(($el) => {
@@ -276,7 +276,7 @@ Then(
 Then(
   'number of Annotations display as {string} in {string} service side bar details',
   (numOfAnnotations: string, serviceName: string) => {
-    topologyPage.clickOnGroup(serviceName);
+    topologyPage.clickOnKnativeGroup(serviceName);
     topologySidePane.verify();
     topologySidePane.selectTab('Details');
     topologySidePane.verifyNumberOfAnnotations(numOfAnnotations);
@@ -369,7 +369,7 @@ When(
 Then(
   'number of Annotations decreased for {string} service in topology side bar details',
   (serviceName: string) => {
-    topologyPage.clickOnGroup(serviceName);
+    topologyPage.clickOnKnativeGroup(serviceName);
     topologySidePane.verify();
     topologySidePane.selectTab('Details');
     cy.get(topologyPO.sidePane.editAnnotations).then(($el) => {

frontend/packages/knative-plugin/integration-tests/support/step-definitions/serverless/domain-mapping.ts

@@ -67,7 +67,7 @@ Given(
       workloadName,
       resourceTypes.knativeService,
     );
-    topologyPage.rightClickOnGroup(workloadName);
+    topologyPage.rightClickOnKnativeNode(workloadName);
     topologyPage.selectContextMenuAction(`Edit ${workloadName}`);
     cy.get(domainPO.contentScroll).contains('Show advanced Routing options').click();
     cy.get(domainPO.domainMapping).clear().type(domain).should('have.value', domain);

frontend/packages/topology/integration-tests/support/page-objects/topology-po.ts

@@ -4,11 +4,11 @@ export const topologyPO = {
   title: 'h1.ocs-page-layout__title',
   search: '[data-test-id="item-filter"]',
   resetView: '[id="reset-view"]',
-  clearFilter: '[class="pf-v5-c-toolbar__item"]',
-  emptyStateIcon: 'div.pf-v5-c-empty-state__icon',
+  clearFilter: '[class*="toolbar__item"]',
+  emptyStateIcon: '[class*= empty-state__icon]',
   emptyText: '[data-test="no-resources-found"]',
   addToApplication: '[data-test-action="add-to-application"]',
-  addToApplicationInContext: 'button.pf-topology-context-sub-menu.pf-v5-c-dropdown__menu-item',
+  menuItemInContext: 'button[role="menuitem"]',
   quickSearch: '[data-test="quick-search-bar"]',
   filterByResourceDropDown: '[data-test="filter-by-resource"] button',
   topologyDropDown: 'button[aria-label="Options menu"]',
@@ -25,11 +25,11 @@ export const topologyPO = {
     modalContent: '[class="modal-content"]',
     fitToScreen: '#fit-to-screen',
     emptyGraph: '[data-test-id="topology"]',
-    filterDropdown: '[id^=pf-v5-select-toggle-id]',
-    nodeContextMenu: '.pf-v5-c-dropdown__menu-item',
-    nodeLabel: 'g.pf-topology__node__label',
+    nodeLabel: 'g[class$="topology__node__label"]',
     knativeNodeLabel: '.odc-base-node__label',
-    groupLabel: 'g.pf-topology__group__label',
+    groupLabelText: '[data-test="group-label-text"]',
+    helmGroupLabelText: '.odc-helm-release .odc-base-node__label',
+    knativeLabelText: '.odc-knative-service__label.odc-base-node__label',
     selectNodeLabel: 'g.odc-base-node__label',
     knativeServiceNode: '[data-type="knative-service"]',
     eventSourceNode: '[data-type="event-source-link"]',
@@ -38,7 +38,7 @@ export const topologyPO = {
     node: '[data-test-id="base-node-handler"]',
     workload: '[data-type="workload"]',
     triggerLink: '[data-type="event-pubsub-link"]',
-    triggerEdgeLink: '[class="pf-topology__edge__link"]',
+    triggerEdgeLink: '[data-test-id="edge-handler"] path',
     confirmModal: '[data-test="confirm-action"]',
     deleteWorkload: '[data-test="confirm-action"]',
     eventSourceWorkload: '[data-type="event-source"]',
@@ -48,39 +48,36 @@ export const topologyPO = {
     connector: '[data-test-id="edge-handler"]',
     routeDecorator: '[aria-label="Open URL"]',
     subscriber: {
-      dropdown: '[id="form-ns-dropdown-spec-subscriber-ref-name-field"]',
-      filter: '[class="pf-v5-c-dropdown__toggle-text"]',
       filterItemLink: '[data-test="dropdown-menu-item-link"]',
       filterText: '[data-test-id="dropdown-text-filter"]',
       filterField: '[id="form-ns-dropdown-ref-name-field"]',
     },
     displayOptions: {
       connectivityMode: '[id="showGroups"]',
       consumptionMode: '[id="hideGroups"]',
-      expandSwitchToggle: '.pf-v5-c-switch__input',
+      expandSwitchToggle: '[aria-label="Collapse groups"]',
       applicationGroupings: '[id$=expand-app-groups]',
       showLabels: '[id$=show-labels]',
       showPodCount: '[id$=show-pod-count]',
     },
     contextMenuOptions: {
-      addToProject: 'button.pf-topology-context-sub-menu',
+      addToProject: 'button[role="menuitem"]',
     },
     addLink: '[data-test="add-page"]',
     quickSearch: '[data-test="quick-search-bar"]',
-    warningBackground: '[class="pf-topology__node__background pf-m-warning"]',
+    warningBackground: '.odc-workload-node ellipse[class*="warning"]',
   },
   list: {
     appName: '#HelmRelease ul li div',
     nodeName: '#HelmRelease ul li div',
-    resourceTitle: 'pf-v5-c-data-list__cell.odc-topology-list-view__kind-label',
     switcher: '[data-test-id="topology-switcher-view"][aria-label="Graph view"]',
     view: '[aria-label="Topology List View"]',
     switchGraph: '[aria-label="Graph view"]',
   },
   sidePane: {
     actionsDropDown: '[data-test-id="actions-menu-button"]',
     showPodCount: '[id$=show-pod-count]',
-    dialog: 'div.pf-v5-c-drawer__panel-main [role="dialog"]',
+    dialog: '[data-test="topology-sidepane"]',
     title: '[role="dialog"] h1',
     knativeServiceIcon: '[title="Service"]',
     tabs: '[role="dialog"] li button',
@@ -90,9 +87,10 @@ export const topologyPO = {
     editAnnotations: '[data-test="edit-annotations"]',
     tabName: '[role="dialog"] li button',
     healthCheckAlert: 'div.odc-topology-sidebar-alert',
-    resourceQuotaAlert: 'div.odc-topology-sidebar-alert [aria-label="Warning Alert"]',
-    podScale: 'button.pf-v5-c-button.pf-m-plain.pf-m-block',
-    podText: 'text.pf-v5-chart-donut-title.pod-ring__center-text',
+    resourceQuotaAlert: '[class*=warning]',
+    podScaleUP: '[aria-label="Increase the Pod count"]',
+    podScaleDown: '[aria-label="Decrease the Pod count"]',
+    podText: 'text.pod-ring__center-text',
     applicationGroupingsTitle: '.overview__sidebar-pane-head.resource-overview__heading',
     applicationGroupingsSidepane: 'overview__sidebar-pane resource-overview',
     resourcesTabApplicationGroupings: '.co-m-horizontal-nav__menu-item',
@@ -159,9 +157,8 @@ export const topologyPO = {
   },
   highlightNode: '.is-filtered',
   createSecret: {
-    advancedOptions: '.pf-v5-c-expandable-section__toggle-text',
     secretForm: '.co-create-secret-form.modal-content',
-    createSecretButton: 'button.pf-v5-c-button.pf-m-link.pf-m-link--align-left',
+    createSecretButton: '[data-test="images-section"]  button',
     secretDropDown: '[id="form-ns-dropdown-formData-imagePullSecret-field"]',
     secretDropDownItem: '[data-test="dropdown-menu-item-link"]',
     formInputs: {
@@ -190,6 +187,7 @@ export const topologyPO = {
     recreateStrategy: 'button[id="Recreate-link"]',
     rollingUpdate: 'button[id="RollingUpdate-link"]',
     customUpdate: 'button[id="Custom-link"]',
+    showsAdditionalHooks: '[data-test="deployment-strategy-section"] button',
     maxUnavailablePods: 'input[name="formData.deploymentStrategy.rollingUpdate.maxUnavailable"]',
     maxSurgePods: 'input[name="formData.deploymentStrategy.rollingUpdate.maxSurge"]',
     projectDropDown: '[id="form-ns-dropdown-formData-imageStream-namespace-field"]',
@@ -198,7 +196,7 @@ export const topologyPO = {
     envRow: '[data-test="pairs-list-row"]',
     envName: '[data-test="pairs-list-name"]',
     envValue: '[data-test="pairs-list-value"]',
-    advancedOptions: 'button.pf-v5-c-button.pf-m-link.pf-m-inline',
+    advancedOptions: '[data-test="deployment-form-testid"] button',
     pauseRolloutsCheckbox: '[id="form-checkbox-formData-paused-field"]',
     enterReplica: 'input[id="form-number-spinner-formData-replicas-field"]',
     saveEdit: '[data-test-id="submit-button"]',
@@ -309,7 +307,7 @@ export const topologyPO = {
     expandOption: '.odc-topology-filter-dropdown__expand-groups-switcher input',
     applicationGroupingOption: '.odc-topology-filter-dropdown__expand-groups-label input',
     unexpandedNode: '.odc-workload-node',
-    disabledClass: '.pf-m-disabled',
+    disabledClass: '[class*="disabled"]',
     podLabelOptions: '.odc-topology-filter-dropdown__group input',
     podRingText: '.pod-ring__center-text',
     deploymentLabel: '#nodejs-ex-git-app-Deployment-label',

frontend/packages/topology/integration-tests/support/pages/topology/topology-page.ts

@@ -58,7 +58,7 @@ export const topologyPage = {
   },
   verifyContextMenu: () => cy.get(topologyPO.graph.contextMenu).should('be.visible'),
   verifyNoWorkLoadsText: (text: string) =>
-    cy.get('h3.pf-v5-c-title.pf-m-lg').should('contain.text', text),
+    cy.get('h3[class*="empty-state__title-text"]').should('contain.text', text),
   verifyWorkLoads: () => cy.get(topologyPO.graph.workloads).should('be.visible'),
   search: (name: string) => {
     topologyHelper.search(name);
@@ -167,10 +167,6 @@ export const topologyPage = {
         break;
     }
   },
-  filterByResource: (resourceName: string) => {
-    cy.get(topologyPO.graph.filterDropdown).contains('Filter by Resource').click();
-    cy.get(`[id$="${resourceName}"]`).check();
-  },
   verifyPipelineRunStatus: (status: string) =>
     cy
       .get('li.list-group-item.pipeline-overview')
@@ -209,7 +205,7 @@ export const topologyPage = {
     return cy.get(`a[href="/k8s/ns/aut/builds/${nodeName}-1/logs"]`);
   },
   componentNode: (nodeName: string) => {
-    return cy.get('g.pf-topology__node__label > text').contains(nodeName);
+    return cy.get('g[class$=topology__node__label] > text').contains(nodeName);
   },
   componentNodeClick: (nodeName: string, options?: { timeout: number }) => {
     topologyHelper.search(nodeName);
@@ -222,14 +218,14 @@ export const topologyPage = {
   },
   getEventSource: (eventSource: string) => {
     return cy
-      .get('[data-type="event-source"] g.pf-topology__node__label > text')
+      .get('[data-type="event-source"] g[class$=topology__node__label] > text')
       .contains(eventSource);
   },
   getRevisionNode: (serviceName: string) => {
-    cy.get('[data-type="knative-revision"] g.pf-topology__node__label > text')
+    cy.get('[data-type="knative-revision"] g[class$=topology__node__label] > text')
       .contains(serviceName.substring(0, 6))
       .should('be.visible');
-    return cy.get('[data-type="knative-revision"] ellipse.pf-topology__node__background');
+    return cy.get('[data-type="knative-revision"] ellipse');
   },
   verifyContextMenuOptions: (...options: string[]) => {
     cy.get('#popper-container li[role="menuitem"]').each(($el) => {
@@ -251,7 +247,7 @@ export const topologyPage = {
     return cy.get(topologyPO.graph.knativeNodeLabel).should('be.visible').contains(nodeName);
   },
   getGroup: (groupName: string) => {
-    return cy.get(topologyPO.graph.groupLabel).should('be.visible').contains(groupName);
+    return cy.get(topologyPO.graph.groupLabelText).should('be.visible').contains(groupName);
   },
   getDeploymentNode: (nodeName: string) => {
     return cy
@@ -281,6 +277,20 @@ export const topologyPage = {
   clickOnGroup: (groupName: string) => {
     topologyPage.getGroup(groupName).click({ force: true });
   },
+  clickOnKnativeGroup: (knativeGroupName: string) => {
+    return cy
+      .get(topologyPO.graph.knativeLabelText)
+      .should('be.visible')
+      .contains(knativeGroupName)
+      .click({ force: true });
+  },
+  clickOnHelmGroup: (groupName: string) => {
+    return cy
+      .get(topologyPO.graph.helmGroupLabelText)
+      .should('be.visible')
+      .contains(groupName)
+      .click({ force: true });
+  },
   clickOnDeploymentNode: (nodeName: string) => {
     topologyPage.getDeploymentNode(nodeName).click();
   },
@@ -315,13 +325,13 @@ export const topologyPage = {
   getHelmRelease: (helmReleaseName: string) => {
     return cy
       .get('[data-type="helm-release"]')
-      .find(topologyPO.graph.groupLabel)
+      .find(topologyPO.graph.selectNodeLabel)
       .contains(helmReleaseName);
   },
   getKnativeService: (serviceName: string) => {
     return cy
       .get('[data-type="knative-service"]')
-      .find(topologyPO.graph.groupLabel)
+      .find(topologyPO.graph.knativeNodeLabel)
       .contains(serviceName);
   },
   getKnativeRevision: (serviceName: string) => {
@@ -414,13 +424,11 @@ export const topologyPage = {
     cy.get('button[data-test-id="start-build-action"]').should('be.visible').click({ force: true });
   },
   verifyNodeAlert: (nodeName: string) => {
-    cy.get('[data-type="workload"]').find('.pf-topology__node.pf-m-warning').contains(nodeName);
+    cy.get('[data-type="workload"]').find('[class*= warning]').contains(nodeName);
   },
   verifyListNodeAlert: (nodeName: string) => {
-    cy.get('.odc-topology-list-view__label-cell')
-      .contains(nodeName)
-      .parent()
-      .find('div.odc-topology-list-view__alert-cell')
+    cy.get(`[data-test="row-${nodeName}"]`)
+      .find('div .odc-topology-list-view__alert-cell')
       .contains('Alerts:');
   },
   clickMaxZoomOut: () => {