Merge pull request #9606 from gajanan-more/ODC-5584-application-group…

…ings

Bug 1986253: ODC-5584 - Application Groupings

frontend/packages/dev-console/integration-tests/support/constants/topology.ts

@@ -38,7 +38,22 @@ export enum nodeActions {
   DeleteRevision = 'Delete Revision',
 }
 
+export enum applicationGroupingsActions {
+  DeleteApplication = 'Delete Application',
+  AddtoApplication = 'Add to Application',
+}
+
 export enum authenticationTypes {
   ImageRegistryCredentials = 'Image registry credentials',
   UploadConfigurationFile = 'Upload configuration file',
 }
+
+export enum addToApplicationGroupings {
+  FromGit = 'From Git',
+  ContainerImage = 'Container Image',
+  FromDockerfile = 'From Dockerfile',
+  FromDevfile = 'From Devfile',
+  UploadJarfile = 'Upload JAR file',
+  EventSource = 'Event Source',
+  Channel = 'Channel',
+}

frontend/packages/dev-console/integration-tests/support/pages/functions/createGitWorkload.ts

@@ -14,9 +14,9 @@ export const createGitWorkload = (
   addPage.selectCardFromOptions(addOptions.Git);
   gitPage.enterGitUrl(gitUrl);
   gitPage.verifyValidatedMessage();
-  gitPage.enterAppName(appName);
   gitPage.enterComponentName(componentName);
   gitPage.selectResource(resourceType);
+  gitPage.enterAppName(appName);
   if (isPipelineSelected === true) {
     gitPage.selectAddPipeline();
   }

frontend/packages/topology/integration-tests/features/topology/topology-application-grouping.feature

@@ -3,66 +3,42 @@ Feature: Application groupings in topology
               As a user, I want to check application groupings
 
         Background:
-            Given user has installed OpenShift Serverless Operator
-              And user is at developer perspective
-              And user has created or selected namespace "aut-topology-grouping"
+            Given user is at developer perspective
+              And user has created or selected namespace "aut-groupings-topoogy"
 
 
-        @smoke @to-do
+        @smoke
         Scenario: Verify Application grouping sidebar: T-05-TC01
-            Given user has created workload "nodejs-ex-git" in application grouping "nodejs-ex-git-app"
-              And user is at the Topolgy page
-             When user clicks on an applicaton grouping "nodejs-ex-git-app"
-             Then user can see application sidebar
+            Given user is at Add page
+              And user has created workload "nodejs-ex-git" with resource type "Deployment" and application groupings "nodejs-ex-git-app"
+             When user clicks on application groupings "nodejs-ex-git-app"
+             Then user can see sidebar opens with Resources tab selected by default for application groupings
               And user is able to see workload "nodejs-ex-git" under resources tab in the sidebar
-              And user can see Add to Application and Delete Application in the Action menu
+              And user can see Actions dropdown menu
 
 
-        @smoke @to-do
+        @smoke
         Scenario: Verify Application grouping context menu: T-05-TC02
-            Given user has created workload "nodejs-ex-git" in application grouping "nodejs-ex-git-app"
-              And user is at the Topolgy page
-             When user right clicks on Application "nodejs-ex-git-app" to open context menu
+            Given user is at Topology page
+             When user right clicks on Application "nodejs-ex-git-app" to open Context Menu
              Then user can view Add to Application and Delete Application options
 
 
-        @regression @to-do
+        @regression
         Scenario: Add to Application in Application grouping from Action menu: T-05-TC03
-            Given user has created workload "nodejs-ex-git" in application grouping "nodejs-ex-git-app"
-              And user is at the Topolgy page
-             When user clicks on an applicaton grouping "nodejs-ex-git-app"
-              And user clicks on Action menu and goes to Add to Application
-              And user clicks on From Git
-              And user fills the form and clicks Create
-              And user clicks on Add to Project on Action menu and clicks on Container Image
-              And user fills the form and clicks Create
-              And user clicks on Add to Project on Action menu and clicks on From Dockerfile
-              And user fills the form and clicks Create
-              And user clicks on Add to Project on Action menu and clicks on From Devfile
-              And user fills the form and clicks Create
-              And user clicks on Add to Project on Action menu and clicks on From Event Source
-              And user selects Api Server Source and clicks on Create Event Source
-              And user fills the form and clicks Create
-              And user clciks on Add to Project on Action menu and clicks on From Channel
-              And user clicks on Create
-             Then user can view options From Git, Container Image, From Dockerfile, From Devfile, Event Source, Channel
-
-
-        @regression @to-do
-        Scenario: Delete Application grouping from Action menu: T-05-TC04
-            Given user has created workload "nodejs-ex-git" in application grouping "nodejs-ex-git-app"
-              And user is at Topology page
-             When user clicks on applicaton grouping "nodejs-ex-git-app"
+            Given user is at Topology page
+             When user clicks on application groupings "nodejs-ex-git-app"
               And user clicks on Action menu
-              And user clicks on Delete Application
-              And user enters the name "nodejs-ex-git-app" in the Delete Application modal and clicks on Delete button
-             Then user can see the applicationgroup has been removed
+              And user clicks "Add to Application" from action menu
+              And user clicks on "From Git"
+              And user fills the form with workload name "added-application-1" and clicks Create
+             Then user can see "added-application-1" workload
 
-
-        @regression @to-do
-        Scenario: Delete Application grouping from context menu: T-05-TC05
-            Given user has created workload "nodejs-ex-git" in application grouping "nodejs-ex-git-app"
-             When user right clicks on applicaton grouping "nodejs-ex-git-app"
-              And user clicks on Delete Application
-              And user enters the name "nodejs-ex-git-app" in the Delete Application modal and clicks on Delete button
-             Then user can see the applicationgroup has been removed
+        @regression
+        Scenario: Delete Application grouping from Action menu: T-05-TC04
+            Given user is at Add page
+              And user has created workload "nodejs-1" with resource type "Deployment" and application groupings "app2"
+             When user right clicks on Application "app2" to open Context Menu
+              And user clicks on "Delete Application" from context action menu
+              And user enters the name "app2" in the Delete Application modal and clicks on Delete button
+             Then user will not see Application groupings "app2"

frontend/packages/topology/integration-tests/support/commands/index.ts

@@ -5,5 +5,4 @@ import '../../../../integration-tests-cypress/support/login';
 import '../../../../integration-tests-cypress/support/project';
 import '../../../../integration-tests-cypress/support/index';
 import '../../../../dev-console/integration-tests/support/commands/app';
-import './app';
 import './hooks';

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

@@ -5,6 +5,8 @@ export const topologyPO = {
   search: '[data-test-id="item-filter"]',
   emptyStateIcon: 'div.pf-c-empty-state__icon',
   emptyText: '[data-test="no-resources-found"]',
+  addToApplication: '[data-test-action="devconsole~Add to Application"]',
+  addToApplicationInContext: 'button.pf-topology-context-sub-menu.pf-c-dropdown__menu-item',
   graph: {
     reset: '#reset-view',
     zoomIn: '#zoom-in',
@@ -23,6 +25,7 @@ export const topologyPO = {
     eventSourceWorkload: '[data-type="event-source"]',
     applicationGroupingTitle: '.odc-topology-list-view__application-label',
     addNewAnnotations: '[data-test="add-button"]',
+    deleteApplication: '[id="form-input-resourceName-field"]',
     connector: '[data-test-id="edge-handler"]',
     displayOptions: {
       connenctivityMode: '[id="showGroups"]',
@@ -58,6 +61,9 @@ export const topologyPO = {
     healthCheckAlert: 'div.ocs-health-checks-alert',
     podScale: 'button.pf-c-button.pf-m-plain.pf-m-block',
     podText: 'text.pf-chart-donut-title.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',
     detailsTab: {
       labels: 'dt[data-test-selector$="Labels"]',
       annotations: '[data-test-selector="details-item-label__Annotations"]',

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

@@ -1,8 +1,13 @@
 import { modal } from '@console/cypress-integration-tests/views/modal';
-import { nodeActions } from '@console/dev-console/integration-tests/support/constants';
+import {
+  nodeActions,
+  addToApplicationGroupings,
+  applicationGroupingsActions,
+} from '@console/dev-console/integration-tests/support/constants';
+import { topologyPO } from '../../page-objects/topology-po';
 
 export const topologyActions = {
-  selectAction: (action: nodeActions | string) => {
+  selectAction: (action: nodeActions | string | applicationGroupingsActions) => {
     switch (action) {
       case 'Edit Application Grouping':
       case 'Edit Application grouping':
@@ -110,9 +115,82 @@ export const topologyActions = {
           .click();
         break;
       }
+      case 'Delete Application':
+      case applicationGroupingsActions.DeleteApplication: {
+        cy.byTestActionID(action)
+          .should('be.visible')
+          .click();
+        break;
+      }
+      case 'Add to Application':
+      case applicationGroupingsActions.AddtoApplication: {
+        cy.get(topologyPO.addToApplication)
+          .should('be.visible')
+          .click();
+        break;
+      }
       default: {
         throw new Error(`${action} is not available in action menu`);
       }
     }
   },
 };
+
+export const addToApplication = {
+  selectAction: (action: addToApplicationGroupings | string) => {
+    switch (action) {
+      case addToApplicationGroupings.FromGit:
+      case 'From Git': {
+        cy.byTestActionID(action)
+          .should('be.visible')
+          .click();
+        break;
+      }
+      case addToApplicationGroupings.FromDevfile:
+      case 'From Devfile': {
+        cy.byTestActionID(action)
+          .should('be.visible')
+          .click();
+        break;
+      }
+      case addToApplicationGroupings.FromDockerfile:
+      case 'From Dockerfile': {
+        cy.byTestActionID(action)
+          .should('be.visible')
+          .click();
+        break;
+      }
+      case addToApplicationGroupings.ContainerImage:
+      case 'Container Image': {
+        cy.byTestActionID(action)
+          .should('be.visible')
+          .click();
+        break;
+      }
+      case addToApplicationGroupings.UploadJarfile:
+      case 'Upload JAR file': {
+        cy.byTestActionID(action)
+          .should('be.visible')
+          .click();
+        break;
+      }
+      case addToApplicationGroupings.EventSource:
+      case 'Event Source': {
+        cy.byTestActionID(action)
+          .should('be.visible')
+          .click();
+        break;
+      }
+      case addToApplicationGroupings.Channel:
+      case 'Channel': {
+        cy.byTestActionID(action)
+          .should('be.visible')
+          .click();
+        break;
+      }
+      default: {
+        throw new Error(`${action} is not available in menu`);
+      }
+    }
+  },
+};

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

@@ -4,7 +4,12 @@ import {
   sideBarTabs,
 } from '@console/dev-console/integration-tests/support/constants';
 import { topologyPO } from '@console/dev-console/integration-tests/support/pageObjects';
-import { createHelmRelease, app } from '@console/dev-console/integration-tests/support/pages';
+import {
+  createHelmRelease,
+  app,
+  createForm,
+} from '@console/dev-console/integration-tests/support/pages';
+import { gitPage } from '@console/dev-console/integration-tests/support/pages/add-flow';
 import { topologyHelper } from './topology-helper-page';
 
 export const topologyPage = {
@@ -168,9 +173,31 @@ export const topologyPage = {
   rightClickOnNode: (releaseName: string) => {
     topologyPage.getNode(releaseName).trigger('contextmenu', { force: true });
   },
+  rightClickOnApplicationGroupings: (appName: string) => {
+    const id = `[data-id="group:${appName}"]`;
+    cy.get(id)
+      .should('be.visible')
+      .first()
+      .trigger('contextmenu', { force: true });
+  },
   clickOnNode: (releaseName: string) => {
     topologyPage.getNode(releaseName).click({ force: true });
   },
+  clickOnApplicationGroupings: (appName: string) => {
+    const id = `[data-id="group:${appName}"]`;
+    cy.get(id)
+      .should('be.visible')
+      .first()
+      .click({ force: true });
+  },
+  verifyApplicationGroupingsDeleted: (appName: string) => {
+    const id = `[data-id="group:${appName}"]`;
+    cy.get(id, { timeout: 50000 }).should('not.exist');
+  },
+  verifyApplicationGroupings: (workloadName: string) => {
+    cy.get(topologyPO.sidePane.applicationGroupingsTitle).should('be.visible');
+    cy.byLegacyTestID(workloadName).should('be.visible');
+  },
   clickOnSinkBinding: (nodeName: string = 'sink-binding') => {
     topologyPage.getNode(nodeName).click({ force: true });
   },
@@ -255,4 +282,28 @@ export const topologyPage = {
       .should('have.attr', 'xlink:href')
       .and('include', runTimeIcon);
   },
+  deleteApplication: (appName: string) => {
+    cy.get(topologyPO.graph.deleteApplication)
+      .clear()
+      .type(appName);
+    cy.get(topologyPO.graph.deleteWorkload).click();
+    cy.wait(15000);
+  },
+  verifyApplicationGroupingSidepane: () => {
+    cy.get(topologyPO.sidePane.applicationGroupingsTitle).should('be.visible');
+    cy.get(topologyPO.sidePane.resourcesTabApplicationGroupings).should('be.visible');
+  },
+};
+
+export const addGitWorkload = (
+  gitUrl: string = 'https://github.com/sclorg/nodejs-ex.git',
+  componentName: string = 'nodejs-ex-git',
+  resourceType: string = 'Deployment',
+) => {
+  gitPage.enterGitUrl(gitUrl);
+  gitPage.verifyValidatedMessage();
+  gitPage.enterComponentName(componentName);
+  gitPage.selectResource(resourceType);
+  createForm.clickCreate();
+  app.waitForLoad();
 };

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

@@ -122,6 +122,13 @@ export const topologySidePane = {
   verifyPipelineRuns: () => {
     cy.get(topologyPO.sidePane.resourcesTab.pipelineRuns).should('be.visible');
   },
+  verifyResourcesApplication: (deploymentName: string) => {
+    cy.byTestID(deploymentName).should('be.visible');
+  },
+  verifyActionsOnApplication: () => {
+    cy.byTestActionID('Delete Application').should('be.visible');
+    cy.get(topologyPO.addToApplicationInContext).should('be.visible');
+  },
   selectResource: (opt: resources | string, namespace: string) => {
     switch (opt) {
       case 'Deployment Configs':