UI : Fix the drop team issue on type GROUP (#10348)

* Fix the drop team issue on type GROUP

* changes as per comments

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx

@@ -11,11 +11,12 @@
  *  limitations under the License.
  */
 
-import { Modal, Table, Typography } from 'antd';
+import { Modal, Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { ExpandableConfig } from 'antd/lib/table/interface';
 import { AxiosError } from 'axios';
-import { isArray, isEmpty } from 'lodash';
+import { TeamType } from 'generated/api/teams/createTeam';
+import { isEmpty } from 'lodash';
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -24,7 +25,7 @@ import { Link } from 'react-router-dom';
 import { getTeamByName, updateTeam } from 'rest/teamsAPI';
 import { TABLE_CONSTANTS } from '../../constants/Teams.constants';
 import { Team } from '../../generated/entity/teams/team';
-import { getEntityName } from '../../utils/CommonUtils';
+import { getEntityName, Transi18next } from '../../utils/CommonUtils';
 import { getTeamsWithFqnPath } from '../../utils/RouterUtils';
 import { getTableExpandableConfig } from '../../utils/TableUtils';
 import { getMovedTeamData } from '../../utils/TeamUtils';
@@ -99,14 +100,15 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
       if (dragRecord.id === dropRecord.id) {
         return;
       }
-      let dropTeam: Team = dropRecord;
+
-      if (!isArray(dropTeam.children)) {
+      if (dropRecord.teamType === TeamType.Group) {
-        const res = await getTeamByName(dropTeam.name, ['parents'], 'all');
+        showErrorToast(t('message.error-team-transfer-message'));
-        dropTeam = (res.parents?.[0] as Team) || currentTeam;
+
+        return;
       }
       setMovedTeam({
         from: dragRecord,
-        to: dropTeam,
+        to: dropRecord,
       });
       setIsModalOpen(true);
     },
@@ -177,18 +179,21 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
         centered
         destroyOnClose
         closable={false}
+        confirmLoading={isTableLoading}
         data-testid="confirmation-modal"
         okText={t('label.confirm')}
         open={isModalOpen}
         title={t('label.move-the-team')}
         onCancel={() => setIsModalOpen(false)}
         onOk={handleChangeTeam}>
-        <Typography.Text>
+        <Transi18next
-          {t('message.team-transfer-message', {
+          i18nKey="message.team-transfer-message"
+          renderElement={<strong />}
+          values={{
             from: movedTeam?.from?.name,
             to: movedTeam?.to?.name,
-          })}
+          }}
-        </Typography.Text>
+        />
       </Modal>
     </>
   );

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/teams.less

@@ -66,6 +66,12 @@
           background: @body-dark-bg-color;
         }
       }
+
+      .drop-over-upward {
+        td {
+          background: @active-color;
+        }
+      }
     }
   }
 }

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -957,6 +957,7 @@
     "entity-restored-success": "{{entity}} restored successfully",
     "entity-size-in-between": "{{entity}} size must be between {{min}} and {{max}}",
     "entity-size-must-be-between-2-and-64": "{{entity}} size must be between 2 and 64",
+    "error-team-transfer-message": "You cannot move to this team as Team Type Group cannot have children",
     "error-while-fetching-access-token": "Error while fetching access token.",
     "failed-status-for-entity-deploy": "<0>{{entity}}</0>  has been {{entityStatus}}, but failed to deploy",
     "fetch-dbt-files": "These are the available sources to fetch dbt catalog and manifest files.",
@@ -1121,7 +1122,7 @@
     "successfully-completed-the-tour": "You’ve successfully completed the tour.",
     "team-moved-success": "Team moved successfully!",
     "team-no-asset": "Your team does not have any assets.",
-    "team-transfer-message": "Click on Confirm if you’d like to move {{from}} team under {{to}} team.",
+    "team-transfer-message": "Click on Confirm if you’d like to move <0>{{from}}</0> team under <0>{{to}}</0> team.",
     "test-your-connection-before-creating-service": "Test your connections before creating the service",
     "this-will-pick-in-next-run": "This will be picked up in the next run.",
     "thread-count-message": "Set the number of threads to use when computing the metrics. If left blank, it will default to 5.",

openmetadata-ui/src/main/resources/ui/src/pages/teams/TeamsPage.tsx

@@ -148,7 +148,7 @@ const TeamsPage = () => {
 
     try {
       const { data } = await getTeams(
-        ['defaultRoles', 'userCount', 'childrenCount', 'owns'],
+        ['defaultRoles', 'userCount', 'childrenCount', 'owns', 'parents'],
         {
           parentTeam: parentTeam ?? 'organization',
           include: 'all',

openmetadata-ui/src/main/resources/ui/src/styles/variables.less

@@ -38,5 +38,6 @@
 @card-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
 @border-color: #d9ceee;
 @body-bg-color: #f8f9fa;
-@body-dark-bg-color: rgba(107, 114, 128, 0.15);
+@body-dark-bg-color: #f1f1f3;
 @border-gray-color: #dde3ea;
+@active-color: #e8f4ff;