Fix #4414 User Profile Roles are missing Admin option in dropdown (#4415)

openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.test.tsx

@@ -139,6 +139,7 @@ const mockProp = {
   paging: mockPaging,
   postFeedHandler: postFeed,
   isAdminUser: false,
+  isLoggedinUser: false,
   updateUserDetails,
 };
 

openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx

@@ -13,7 +13,7 @@
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { AxiosError, AxiosResponse } from 'axios';
-import { isNil } from 'lodash';
+import { isNil, toLower } from 'lodash';
 import { observer } from 'mobx-react';
 import React, { Fragment, RefObject, useEffect, useState } from 'react';
 import Select, { MultiValue } from 'react-select';
@@ -93,6 +93,7 @@ const Users = ({
   paging,
   updateUserDetails,
   isAdminUser,
+  isLoggedinUser,
 }: Props) => {
   const [activeTab, setActiveTab] = useState(1);
   const [fieldListVisible, setFieldListVisible] = useState<boolean>(false);
@@ -156,10 +157,14 @@ const Users = ({
 
   const handleRolesChange = () => {
     // filter out the roles , and exclude the admin one
-    const updatedRoles = selectedRoles.filter((role) => role.value !== 'admin');
+    const updatedRoles = selectedRoles.filter(
+      (role) => role.value !== toLower(TERM_ADMIN)
+    );
 
     // get the admin role and send it as boolean value `iaAdmin=Boolean(isAdmin)
-    const isAdmin = selectedRoles.find((role) => role.value === 'admin');
+    const isAdmin = selectedRoles.find(
+      (role) => role.value === toLower(TERM_ADMIN)
+    );
     updateUserDetails({
       roles: updatedRoles.map((role) => role.value),
       isAdmin: Boolean(isAdmin),
@@ -201,7 +206,7 @@ const Users = ({
   };
 
   const getDisplayNameComponent = () => {
-    if (isAdminUser) {
+    if (isAdminUser || isLoggedinUser) {
       return (
         <div className="tw-mt-4 tw-w-full tw-text-center">
           {isDisplayNameEdit ? (
@@ -267,7 +272,7 @@ const Users = ({
   };
 
   const getDescriptionComponent = () => {
-    if (isAdminUser) {
+    if (isAdminUser || isLoggedinUser) {
       return (
         <Description
           description={userData.description || ''}
@@ -390,6 +395,17 @@ const Users = ({
   };
 
   const getRolesComponent = () => {
+    const userRolesOption = roles?.map((role) => ({
+      label: getEntityName(role as unknown as EntityReference),
+      value: role.id,
+    }));
+    if (!userData.isAdmin) {
+      userRolesOption.push({
+        label: TERM_ADMIN,
+        value: toLower(TERM_ADMIN),
+      });
+    }
+
     const rolesElement = (
       <Fragment>
         {userData.isAdmin && (
@@ -444,10 +460,7 @@ const Users = ({
                   aria-label="Select roles"
                   className="tw-ml-1"
                   isSearchable={false}
-                  options={roles?.map((role) => ({
-                    label: getEntityName(role as unknown as EntityReference),
-                    value: role.id,
-                  }))}
+                  options={userRolesOption}
                   placeholder="Roles..."
                   styles={reactSingleSelectCustomStyle}
                   value={selectedRoles}
@@ -624,8 +637,8 @@ const Users = ({
     ];
     if (userData.isAdmin) {
       defaultRoles.push({
-        label: 'Admin',
-        value: 'admin',
+        label: TERM_ADMIN,
+        value: toLower(TERM_ADMIN),
       });
     }
     setSelectedRoles(defaultRoles);

openmetadata-ui/src/main/resources/ui/src/components/Users/Users.interface.ts

@@ -30,6 +30,7 @@ export interface Props {
   paging: Paging;
   isFeedLoading: boolean;
   isAdminUser: boolean;
+  isLoggedinUser: boolean;
   updateUserDetails: (data: UserDetails) => void;
   feedFilterHandler: (v: FeedFilter) => void;
   fetchFeedHandler: (filterType: FeedFilter, after?: string) => void;

openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.component.tsx

@@ -195,6 +195,7 @@ const UserPage = () => {
           fetchFeedHandler={getFeedData}
           isAdminUser={Boolean(isAdminUser)}
           isFeedLoading={isFeedLoading}
+          isLoggedinUser={isLoggedinUser(username)}
           paging={paging}
           postFeedHandler={postFeedHandler}
           updateUserDetails={updateUserDetails}