Merge pull request #6702 from hotosm/feat/6628-populate-hot-global-va…

…lidators-by-default Add `HOT Global Validators Team` by default for Validation Permission restricted to Teams
hotosm · Jan 22, 2025 · 074dbd0 · 074dbd0
2 parents c3c02d9 + 50d3157
commit 074dbd0
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 8 deletions.
diff --git 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
@@ -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' },