feat: added group user validation for manual approval

Pair programming with [email protected] (SRVKP-8180)
Assisted by: Claude 4.5

Author: anwesha-palit-redhat

locales/en/plugin__pipelines-console-plugin.json

@@ -92,6 +92,7 @@
   "Cancelling": "Cancelling",
   "Cannot be longer than {{characterCount}} characters.": "Cannot be longer than {{characterCount}} characters.",
   "Categories": "Categories",
+  "Checking authorization...": "Checking authorization...",
   "Checks: Read & Write": "Checks: Read & Write",
   "Click": "Click",
   "Click {{submit}} to save changes or {{reset}} to cancel changes.": "Click {{submit}} to save changes or {{reset}} to cancel changes.",
@@ -220,6 +221,7 @@
   "GitHub application name": "GitHub application name",
   "Go to Admin Approvals tab": "Go to Admin Approvals tab",
   "Go to Approvals tab": "Go to Approvals tab",
+  "Group": "Group",
   "Hide credential options": "Hide credential options",
   "Hide variables": "Hide variables",
   "Hide VolumeClaimTemplate options": "Hide VolumeClaimTemplate options",
@@ -594,6 +596,7 @@
   "Use your Git Personal token. Create a token with repo, public_repo & admin:repo_hook scopes and give your token an expiration, i.e 30d.": "Use your Git Personal token. Create a token with repo, public_repo & admin:repo_hook scopes and give your token an expiration, i.e 30d.",
   "Use your GitHub Personal token. Use this <2>link</2> to create a <5>classic</5> token with <7>repo</7> & <10>admin:repo_hook</10> scopes and give your token an expiration, i.e 30d.": "Use your GitHub Personal token. Use this <2>link</2> to create a <5>classic</5> token with <7>repo</7> & <10>admin:repo_hook</10> scopes and give your token an expiration, i.e 30d.",
   "Use your Gitlab Personal access token. Use this <2>link</2> to create a token with <5>api</5> scope. Select the role as <8>Maintainer/Owner</8>. Give your token an expiration i.e 30d.": "Use your Gitlab Personal access token. Use this <2>link</2> to create a token with <5>api</5> scope. Select the role as <8>Maintainer/Owner</8>. Give your token an expiration i.e 30d.",
+  "User": "User",
   "User not an approver": "User not an approver",
   "Username": "Username",
   "Value": "Value",

src/components/approval-tasks/ApprovalRow.tsx

@@ -38,7 +38,7 @@ const ApprovalRow: React.FC<
   const {
     metadata: { name, namespace, creationTimestamp },
     spec: { description, numberOfApprovalsRequired },
-    status: { approvers, approversResponse },
+    status: { approvers, approvalsReceived },
   } = obj;
 
   const translatedApproversCount = t('{{assignees}} Assigned', {
@@ -104,7 +104,7 @@ const ApprovalRow: React.FC<
             {getApprovalStatusInfo(approvalTaskStatus).message}{' '}
             <Tooltip content={translatedApproversCount} position="right">
               <span className="pipelines-approval-status-info">{`(${
-                approversResponse?.length || 0
+                approvalsReceived || 0
               }/${numberOfApprovalsRequired || 0})`}</span>
             </Tooltip>
           </SplitItem>

src/components/approval-tasks/ApprovalTaskActionDropdown.tsx

@@ -7,6 +7,7 @@ import {
   DropdownList,
   MenuToggle,
   MenuToggleElement,
+  Spinner,
   Tooltip,
 } from '@patternfly/react-core';
 import { KEBAB_BUTTON_ID } from '../../consts';
@@ -18,7 +19,8 @@ import {
 import { ApprovalTaskModel } from '../../models';
 import { approvalModal } from './modal';
 import { ApproverStatusResponse } from '../../types';
-import { useGetActiveUser } from '../hooks/hooks';
+import { useActiveUserWithUpdate } from '../hooks/hooks';
+import { isUserAuthorizedForApproval } from '../utils/approval-group-utils';
 
 type ApprovalTaskActionDropdownProps = {
   approvalTask: ApprovalTaskKind;
@@ -29,14 +31,16 @@ const ApprovalTaskActionDropdown: React.FC<ApprovalTaskActionDropdownProps> = ({
   approvalTask,
   pipelineRun,
 }) => {
-  const currentUser = useGetActiveUser();
+  const { currentUser, updateUserInfo } = useActiveUserWithUpdate();
   const launchModal = useModal();
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   const {
     metadata: { name, namespace },
-    status: { approvers, state },
+    status: { state },
+    spec: { approvers },
   } = approvalTask;
   const [isOpen, setIsOpen] = React.useState(false);
+  const [isAuthorized, setIsAuthorized] = React.useState<boolean | null>(null);
   const onToggle = () => {
     setIsOpen(!isOpen);
   };
@@ -47,7 +51,8 @@ const ApprovalTaskActionDropdown: React.FC<ApprovalTaskActionDropdownProps> = ({
     launchModal(approvalModal, {
       resource: approvalTask,
       pipelineRunName: pipelineRun?.metadata?.name,
-      userName: currentUser,
+      userName: currentUser?.username,
+      currentUser: currentUser,
       type: 'approve',
     });
   };
@@ -56,7 +61,8 @@ const ApprovalTaskActionDropdown: React.FC<ApprovalTaskActionDropdownProps> = ({
     launchModal(approvalModal, {
       resource: approvalTask,
       pipelineRunName: pipelineRun?.metadata?.name,
-      userName: currentUser,
+      userName: currentUser?.username,
+      currentUser: currentUser,
       type: 'reject',
     });
   };
@@ -69,10 +75,36 @@ const ApprovalTaskActionDropdown: React.FC<ApprovalTaskActionDropdownProps> = ({
     namespace,
   });
 
+  // Check group-based authorization
+  React.useEffect(() => {
+    const checkAuthorization = async () => {
+      if (currentUser && approvers) {
+        try {
+          if (currentUser?.username) {
+            const authorized = await isUserAuthorizedForApproval(
+              currentUser.username,
+              approvers,
+              currentUser,
+              updateUserInfo,
+            );
+            setIsAuthorized(authorized);
+          }
+        } catch (error) {
+          console.error('Error checking group authorization:', error);
+          setIsAuthorized(false);
+        }
+      } else {
+        setIsAuthorized(false);
+      }
+    };
+    checkAuthorization();
+  }, [currentUser, approvers]);
+
   const isDropdownDisabled =
     !canApproveAndRejectResource ||
     state !== ApproverStatusResponse.Pending ||
-    !approvers?.find((approver) => approver === currentUser);
+    isAuthorized === null || // Still loading
+    !isAuthorized; // Not authorized (includes both direct user and group checks)
 
   const tooltipContent = () => {
     if (!canApproveAndRejectResource) {
@@ -84,7 +116,18 @@ const ApprovalTaskActionDropdown: React.FC<ApprovalTaskActionDropdownProps> = ({
     if (state !== ApproverStatusResponse.Pending) {
       return t(`PipelineRun has been {{state}}`, { state });
     }
-    if (!approvers?.find((approver) => approver === currentUser)) {
+    if (isAuthorized === null) {
+      return (
+        (
+          <Spinner
+            className="pf-v5-u-mr-xs"
+            size="sm"
+            aria-label={t('Checking authorization...')}
+          />
+        ) + t('Checking authorization...')
+      );
+    }
+    if (!isAuthorized) {
       return t('User not an approver');
     }
     return t('Permission denied');

src/components/approval-tasks/ApprovalTasksList.tsx

@@ -34,7 +34,7 @@ const pipelineApprovalFilterReducer = (obj: ApprovalTaskKind, pipelineRuns) => {
   ) {
     return ApprovalStatus.RequestSent;
   }
-  return status ||  ApprovalStatus.Unknown;
+  return status || ApprovalStatus.Unknown;
 };
 
 const ApprovalTasksList: React.FC<ApprovalTasksListProps> = ({