feat: add dropdown to make user an org admin

src/smart-components/user/OrgAdminDropdown.tsx

@@ -0,0 +1,92 @@
+import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import React, { useEffect, useState } from 'react';
+import { IntlShape } from 'react-intl';
+import messages from '../../Messages';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
+import { useDispatch } from 'react-redux';
+import { updateUserIsOrgAdminStatus } from '../../redux/actions/user-actions';
+
+const OrgAdminDropdown: React.FC<{
+  isOrgAdmin: boolean;
+  username: string;
+  intl: IntlShape;
+}> = ({ isOrgAdmin, username, intl }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { auth } = useChrome();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const setUserDetails = async () => {
+      if (!auth) {
+        console.warn('Auth is undefined');
+        return;
+      }
+
+      const userData = await auth.getUser();
+
+      if (!userData || !userData.identity) {
+        console.warn('User data or identity is undefined');
+        return;
+      }
+
+      const { user } = userData.identity;
+
+      if (user?.username === username) {
+        setIsDisabled(true);
+      }
+    };
+
+    setUserDetails();
+  }, [auth, username]);
+
+  const onToggleClick = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const onSelect = async (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    if (loading) return;
+
+    const newStatus = value === 'yes';
+    if (newStatus === isOrgAdmin) return;
+
+    setLoading(true);
+
+    try {
+      await dispatch(updateUserIsOrgAdminStatus(username, newStatus));
+    } catch (error) {
+      console.error('Failed to update org admin status:', error);
+    } finally {
+      setLoading(false);
+    }
+
+    setIsOpen(false);
+  };
+
+  return (
+    <Dropdown
+      isOpen={isOpen}
+      onSelect={onSelect}
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} isDisabled={isDisabled}>
+          {isOrgAdmin ? intl.formatMessage(messages.yes) : intl.formatMessage(messages.no)}
+        </MenuToggle>
+      )}
+      ouiaId="OrgAdminDropdown"
+      shouldFocusToggleOnSelect
+    >
+      <DropdownList>
+        <DropdownItem value="yes" key="yes">
+          {intl.formatMessage(messages.yes)}
+        </DropdownItem>
+        <DropdownItem value="no" key="no">
+          {intl.formatMessage(messages.no)}
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};
+
+export default OrgAdminDropdown;

src/smart-components/user/user-table-helpers.tsx

@@ -1,10 +1,10 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Label } from '@patternfly/react-core';
 import { IntlShape } from 'react-intl';
-import { CheckIcon, CloseIcon } from '@patternfly/react-icons';
 import messages from '../../Messages';
 import pathnames from '../../utilities/pathnames';
 import AppLink from '../../presentational-components/shared/AppLink';
+import OrgAdminDropdown from './OrgAdminDropdown';
 
 export interface UserProps {
   email: string;
@@ -36,17 +36,7 @@ export const createRows = (userLinks: boolean, data: UserProps[] = [], intl: Int
     const newEntry: RowProps = {
       uuid: username,
       cells: [
-        isOrgAdmin ? (
-          <Fragment>
-            <CheckIcon key="yes-icon" className="pf-v5-u-mr-sm" />
-            <span key="yes">{intl.formatMessage(messages.yes)}</span>
-          </Fragment>
-        ) : (
-          <Fragment>
-            <CloseIcon key="no-icon" className="pf-v5-u-mr-sm" />
-            <span key="no">{intl.formatMessage(messages.no)}</span>
-          </Fragment>
-        ),
+        <OrgAdminDropdown key={`dropdown-${username}`} isOrgAdmin={isOrgAdmin} username={username} intl={intl} />,
         {
           title: userLinks ? (
             <AppLink to={pathnames['user-detail'].link.replace(':username', username)}>{username.toString()}</AppLink>

src/test/smart-components/group/member/__snapshots__/add-group-members.test.js.snap

@@ -673,25 +673,10 @@ exports[`<AddGroupMembers /> should render correctly 1`] = `
                           class="pf-v5-c-table__td"
                           data-key="1"
                           data-label="Org. Admin"
+                          intl="[object Object]"
                           tabindex="-1"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="pf-v5-svg pf-v5-u-mr-sm"
-                            fill="currentColor"
-                            height="1em"
-                            role="img"
-                            viewBox="0 0 730 1024"
-                            width="1em"
-                          >
-                            <path
-                              d="M725.499315,767.757345 L469.242169,511.500499 L725.499315,255.243653 C729.196254,251.545719 731.096195,247.248119 731,242.4498 C731,237.653479 728.997365,233.35588 725.299427,229.558002 L647.542773,151.701495 C643.743891,147.903617 639.446287,146 634.64996,146 C629.852635,146 625.55503,147.803673 621.857092,151.500607 L365.5,407.857398 L109.241857,151.500607 C105.544917,147.803673 101.246314,145.904733 96.4499876,146 C91.6526619,146.104622 87.3550577,148.002562 83.5571748,151.701495 L5.7005771,229.457058 C1.90269428,233.255936 0,237.553535 0,242.350855 C0,247.148175 1.80175055,251.444775 5.50068853,255.143709 L261.857779,511.500499 L5.50068853,767.757345 C1.80175055,771.454279 -0.0961914123,775.752878 0,779.750645 C0.103697157,784.547965 2.00263857,788.845564 5.7005771,792.642443 L83.4572306,871.299502 C87.2541139,875.096381 91.5527176,877 96.3500433,877 C101.147369,877 105.444973,875.197325 109.142912,871.499391 L365.400058,615.241545 L621.657203,871.499391 C625.355142,875.197325 629.652746,877.095265 634.449072,877 C639.246398,877 643.545002,874.997437 647.342885,871.299502 L725.099538,793.54294 C728.896421,789.745062 730.796362,785.446463 730.796362,780.649143 C731.096195,775.752878 729.196254,771.454279 725.499315,767.757345"
-                            />
-                          </svg>
-                          <span>
-                            No
-                          </span>
-                        </td>
+                          username="test_name"
+                        />
                         <td
                           class="pf-v5-c-table__td"
                           data-key="2"