From 50d315784012252e97541282e1537924280e4c24 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Tue, 17 Dec 2024 11:08:12 +0545
Subject: [PATCH] Add `HOT Global Validators Team` by default for specific
 validation permissions

- Validation Permissions includes `Only team members` & `Only intermediate and advanced team members`
- Change teams fetching to react-query
- Related to #6628
---
 .../projectEdit/permissionsBlock.js           | 59 ++++++++++++++++---
 .../src/components/projectEdit/teamSelect.js  |  3 +-
 2 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/projectEdit/permissionsBlock.js b/frontend/src/components/projectEdit/permissionsBlock.js
index dc9aa7fcd3..c058cb8ab4 100644
--- a/frontend/src/components/projectEdit/permissionsBlock.js
+++ b/frontend/src/components/projectEdit/permissionsBlock.js
@@ -1,10 +1,60 @@
-import { useContext } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
+
 import messages from './messages.js';
 import { StateContext, styleClasses } from '../../views/projectEdit';
+import { useTeamsQuery } from '../../api/teams';
+
+const globalValidatorPermissions = ['TEAMS', 'TEAMS_LEVEL'];
+const hotGlobalValidatorTeamName = 'HOT Global Validators';
 
 export const PermissionsBlock = ({ permissions, type }: Object) => {
   const { projectInfo, setProjectInfo } = useContext(StateContext);
+  const { data: teamsData } = useTeamsQuery({ omitMemberList: true });
+  const isGlobalValidatorAlreadyPresent = useRef(false);
+
+  // check if global validator already present on teams
+  useEffect(() => {
+    isGlobalValidatorAlreadyPresent.current = projectInfo.teams.some(
+      (team) => team.name === hotGlobalValidatorTeamName,
+    );
+  }, []); // eslint-disable-line -- run only on first render
+
+  const handlePermissionChange = (value) => {
+    let teams = projectInfo.teams;
+    // validation permission case
+    if (type === 'validationPermission') {
+      const isGlobalValidatorCase = globalValidatorPermissions.includes(value);
+      // add `HOT Global Validators` by default case
+      if (isGlobalValidatorCase) {
+        const globalValidatorTeam = teamsData?.teams?.find(
+          (team) => team.name === hotGlobalValidatorTeamName,
+        );
+        if (
+          globalValidatorTeam &&
+          // check if hotGlobalValidator already present
+          !projectInfo.teams.some((team) => team.name === hotGlobalValidatorTeamName)
+        ) {
+          const hotGlobalValidatorTeam = {
+            teamId: globalValidatorTeam.teamId,
+            name: globalValidatorTeam.name,
+            role: 'VALIDATOR',
+          };
+          // add hotGlobalValidator to teams
+          teams = [hotGlobalValidatorTeam, ...projectInfo.teams];
+        }
+        // remove hotGlobalValidator from team if not HOT Global Validator case
+      } else if (!isGlobalValidatorAlreadyPresent.current) {
+        teams = projectInfo.teams.filter((team) => team.name !== hotGlobalValidatorTeamName);
+      }
+    }
+    // set project info
+    setProjectInfo({
+      ...projectInfo,
+      [type]: value,
+      teams,
+    });
+  };
 
   return (
     <div className={styleClasses.divClass}>
@@ -27,12 +77,7 @@ export const PermissionsBlock = ({ permissions, type }: Object) => {
           <input
             value={permission.value}
             checked={projectInfo[type] === permission.value}
-            onChange={() =>
-              setProjectInfo({
-                ...projectInfo,
-                [type]: permission.value,
-              })
-            }
+            onChange={() => handlePermissionChange(permission.value)}
             type="radio"
             className={`radio-input input-reset pointer v-mid dib h2 w2 mr2 br-100 ba b--blue-light`}
           />
diff --git a/frontend/src/components/projectEdit/teamSelect.js b/frontend/src/components/projectEdit/teamSelect.js
index 3a97b3fafc..c1ac578e0b 100644
--- a/frontend/src/components/projectEdit/teamSelect.js
+++ b/frontend/src/components/projectEdit/teamSelect.js
@@ -8,6 +8,7 @@ import { Button } from '../button';
 import { StateContext } from '../../views/projectEdit';
 import { PencilIcon, WasteIcon, ExternalLinkIcon } from '../svgIcons';
 import { useFetchWithAbort } from '../../hooks/UseFetch';
+import { useTeamsQuery } from '../../api/teams';
 
 export const TeamSelect = () => {
   const intl = useIntl();
@@ -24,7 +25,7 @@ export const TeamSelect = () => {
   const [, isOrganisationsLoading, organisationsData] = useFetchWithAbort(
     'organisations/?omitManagerList=true',
   );
-  const [, isTeamsLoading, teamsData] = useFetchWithAbort('teams/?omitMemberList=true');
+  const { data: teamsData, isFetching: isTeamsLoading } = useTeamsQuery({ omitMemberList: true });
 
   const teamRoles = [
     { value: 'MAPPER', label: 'Mapper' },