diff --git a/openmetadata-ui/src/main/resources/ui/cypress/common/common.js b/openmetadata-ui/src/main/resources/ui/cypress/common/common.js
index 1798315157e..00cea29d2e3 100644
--- a/openmetadata-ui/src/main/resources/ui/cypress/common/common.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/common/common.js
@@ -813,9 +813,7 @@ export const login = (username, password) => {
export const addTeam = (TEAM_DETAILS) => {
interceptURL('GET', '/api/v1/teams*', 'addTeam');
//Fetching the add button and clicking on it
- cy.get('button')
- .find('span')
- .contains('Add Team')
+ cy.get('[data-testid="add-team"]')
.should('be.visible')
.click();
diff --git a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Features/TeamsHierarchy.spec.js b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Features/TeamsHierarchy.spec.js
new file mode 100644
index 00000000000..b2c0691dee5
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Features/TeamsHierarchy.spec.js
@@ -0,0 +1,103 @@
+/*
+ * Copyright 2021 Collate
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { addTeam, interceptURL, login, uuid, verifyResponseStatusCode } from '../../common/common';
+import { LOGIN } from '../../constants/constants';
+
+const buTeamName = `bu-${uuid()}`;
+const divTeamName = `div-${uuid()}`;
+const depTeamName = `dep-${uuid()}`;
+const grpTeamName = `grp-${uuid()}`;
+const teamNames = [buTeamName, divTeamName, depTeamName, grpTeamName];
+const getTeam = (teamName) => {
+ return {
+ name: teamName,
+ displayName: teamName,
+ teamType: 'BusinessUnit',
+ description: `Team ${teamName} Description`,
+ ownername: 'admin',
+ }
+};
+
+describe('Add nested teams and test TeamsSelectable', () => {
+ before(() => {
+ cy.clearLocalStorageSnapshot();
+ login(LOGIN.username, LOGIN.password);
+ cy.goToHomePage();
+ cy.saveLocalStorage('localstorage');
+ });
+ beforeEach(() => {
+ cy.log('Restoring local storage snapshot')
+ cy.restoreLocalStorage('localstorage');
+ cy.clickOnLogo();
+ cy.get('[data-testid="appbar-item-settings"]').should('be.visible').click();
+ interceptURL('GET', '/api/v1/users*', 'getTeams');
+ // Clicking on teams
+ cy.get('[data-menu-id*="teams"]')
+ .should('exist')
+ .should('be.visible')
+ .click();
+
+ verifyResponseStatusCode('@getTeams', 200);
+ });
+
+ it('Add teams', () => {
+ interceptURL('GET', '/api/v1/permissions/team/*', 'getPermissions');
+ teamNames.forEach(teamName => {
+ addTeam(getTeam(teamName));
+
+ cy.reload();
+
+ // asserting the added values
+ cy.get('table').find('.ant-table-row').contains(teamName).click();
+ });
+
+ verifyResponseStatusCode('@getPermissions', 200);
+ cy.wait(1000);
+ });
+
+ it('Check hierarchy in Add User page', () => {
+ // Clicking on users
+ cy.get('[data-menu-id*="users"]')
+ .should('exist')
+ .should('be.visible')
+ .click();
+
+ cy.get('[data-testid="add-user"]')
+ .should('be.visible')
+ .click();
+
+ cy.get('.ant-select-selector')
+ .should('exist')
+ .scrollIntoView()
+ .should('be.visible')
+ .click()
+ .type(buTeamName);
+
+ teamNames.forEach(teamName => {
+ cy.get('.ant-tree-select-dropdown')
+ .contains(teamName).should('be.visible');
+ });
+
+ teamNames.forEach(teamName => {
+ cy.get('.ant-select-selector')
+ .should('exist')
+ .scrollIntoView()
+ .should('be.visible')
+ .click()
+ .type(teamName);
+ cy.get('.ant-tree-select-dropdown')
+ .contains(teamName).should('be.visible');
+ });
+ });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/cypress/support/e2e.js b/openmetadata-ui/src/main/resources/ui/cypress/support/e2e.js
index 37a498fb5bf..2184f18b44a 100644
--- a/openmetadata-ui/src/main/resources/ui/cypress/support/e2e.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/support/e2e.js
@@ -14,6 +14,7 @@
// ***********************************************************
// Import commands.js using ES2015 syntax:
+import 'cypress-localstorage-commands';
import './commands';
// Alternatively you can use CommonJS syntax:
diff --git a/openmetadata-ui/src/main/resources/ui/package.json b/openmetadata-ui/src/main/resources/ui/package.json
index ba7ac26f9df..fe83bf284b7 100644
--- a/openmetadata-ui/src/main/resources/ui/package.json
+++ b/openmetadata-ui/src/main/resources/ui/package.json
@@ -169,6 +169,7 @@
"connect-api-mocker": "^1.10.0",
"copy-webpack-plugin": "^7.0.0",
"css-loader": "3.4.2",
+ "cypress-localstorage-commands": "^2.2.1",
"dotenv": "^16.0.0",
"eslint": "^6.6.0",
"eslint-config-prettier": "^6.11.0",
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
index 365d816f0db..bcb991bf3d6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx
@@ -953,6 +953,7 @@ const TeamDetailsV1 = ({
onClick: () => handleAddTeam(true),
disabled: !createTeamPermission,
heading: 'Team',
+ datatestid: 'add-team',
})
) : (
Deleted Teams