feat: add key hasManagerPermissions in user roles hook

Author: arunjaindev

src/Common/Hooks/UseGetUserRoles/UseGetUserRoles.tsx

@@ -16,22 +16,29 @@
 
 import { useEffect, useState } from 'react'
 import { getUserRole } from '../../Common.service'
-import { useGetUserRolesType } from './types'
+import { UseGetUserRolesType } from './types'
 import { showError } from '../../Helper'
 
 /**
  * @description It will return isSuperAdmin and would be set to false by default, might need few optimizations like dep, etc
- * @returns {useGetUserRolesType} isSuperAdmin, canManageAllAccess
+ * @returns {UseGetUserRolesType} isSuperAdmin, canManageAllAccess
  */
-const useGetUserRoles = (): useGetUserRolesType => {
-    const [result, setResult] = useState<useGetUserRolesType>({ isSuperAdmin: false, canManageAllAccess: false })
+const useGetUserRoles = (): UseGetUserRolesType => {
+    const [result, setResult] = useState<UseGetUserRolesType>({
+        isSuperAdmin: false,
+        canManageAllAccess: false,
+        hasManagerPermissions: false,
+    })
 
     useEffect(() => {
         getUserRole()
             .then(({ result: apiResult }) => {
+                const hasManagerPermissions = apiResult.roles.some((role) => role.startsWith('role:manager'))
+
                 setResult({
                     isSuperAdmin: apiResult.superAdmin ?? false,
                     canManageAllAccess: apiResult.canManageAllAccess ?? false,
+                    hasManagerPermissions,
                 })
             })
             .catch((error) => {

src/Common/Hooks/UseGetUserRoles/types.ts

@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-export interface useGetUserRolesType {
+export interface UseGetUserRolesType {
     isSuperAdmin: boolean
     /**
      * User can give access to all other users
      */
     canManageAllAccess?: boolean
+    hasManagerPermissions: boolean
 }

src/Shared/Components/ReactSelect/utils.tsx

@@ -39,9 +39,10 @@ export const getCommonSelectStyle = (styleOverrides = {}): StylesConfig => ({
         ...base,
         minHeight: '32px',
         boxShadow: 'none',
-        backgroundColor: state.isDisabled ? 'var(--N100)' : 'var(--bg-secondary)',
+        backgroundColor: 'var(--bg-secondary)',
         border: '1px solid var(--N200)',
         cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+        opacity: state.isDisabled ? 0.5 : 1,
 
         '&:hover': {
             borderColor: 'var(--N300)',