fix: update label for roles on user views

packages/earth-admin/src/components/search-input/SearchInput.tsx

@@ -22,7 +22,7 @@ import React, { useContext, useEffect, useState } from 'react';
 
 import { LinkWithOrg } from '@app/components/link-with-org';
 import { getAllLayers, getAllWidgets, getAvailableGroups } from '@app/services';
-import { encodeQueryToURL } from '@app/utils';
+import { encodeQueryToURL, normalizeGroupName } from '@app/utils';
 import { Auth0Context } from '@app/utils/contexts';
 
 interface SearchInputProps {
@@ -67,6 +67,11 @@ export default function SearchInput(props: SearchInputProps) {
     }
   });
 
+  const processGroupNames = (result: any): any => ({
+    ...result,
+    data: result.data.map((item) => ({ ...item, name: normalizeGroupName(item.name) })),
+  });
+
   useEffect(() => {
     clearTimeout(timer);
 
@@ -82,7 +87,7 @@ export default function SearchInput(props: SearchInputProps) {
         optionType === 'layers'
           ? await getAllLayers(encodedOptionsQuery)
           : optionType === 'userGroups'
-          ? await getAvailableGroups(selectedGroup)
+          ? processGroupNames(await getAvailableGroups(selectedGroup))
           : await getAllWidgets(encodedOptionsQuery);
 
       setAvailableOptions(res.data);
@@ -147,7 +152,7 @@ export default function SearchInput(props: SearchInputProps) {
               key={option.id}
               className="ng-margin-medium-right"
             >
-              {option.name}
+              {optionType === 'userGroups' ? normalizeGroupName(option.name) : option.name}
               <span
                 className="ng-padding-left ng-icon-hover"
                 onClick={(e) => handleChange(e, option)}

packages/earth-admin/src/components/users/user-details/UserDetails.tsx

@@ -23,6 +23,7 @@ import React, { useState } from 'react';
 import { AuthzGuards, ErrorMessages } from '@marapp/earth-shared';
 
 import { useAuth0 } from '@app/auth/auth0';
+import { normalizeGroupName } from '@app/utils';
 import { LinkWithOrg } from '@app/components/link-with-org';
 import { DeleteConfirmation } from '@app/components/modals/delete-confirmation';
 
@@ -73,8 +74,8 @@ export default function UserDetails(props: UserProps) {
           <span className="ng-text-weight-medium">Name: </span> {name || '-'}
         </p>
         <p>
-          <span className="ng-text-weight-medium">Groups:</span>{' '}
-          {groups.map((group) => group.name).join(', ') || '-'}
+          <span className="ng-text-weight-medium">Roles:</span>{' '}
+          {groups.map((group) => normalizeGroupName(group.name)).join(', ') || '-'}
         </p>
       </div>
       <div className="ng-padding-medium ng-background-ultradkgray ng-margin-medium-bottom">

packages/earth-admin/src/components/users/user-edit/UserEdit.tsx

@@ -100,7 +100,7 @@ export default function UserEdit(props: UserEditProps) {
           </div>
 
           <div className="ng-margin-medium-bottom">
-            <label htmlFor="role">User groups*</label>
+            <label htmlFor="role">User roles*</label>
             <Controller
               name="groups"
               control={control}

packages/earth-admin/src/pages-client/users/home.tsx

@@ -20,7 +20,6 @@
 import List from '@researchgate/react-intersection-list';
 import { navigate } from 'gatsby';
 import React, { useEffect, useState } from 'react';
-import { capitalize } from 'lodash/fp';
 import { Controller, useForm } from 'react-hook-form';
 import Select from 'react-select';
 import Creatable from 'react-select/creatable';
@@ -32,7 +31,7 @@ import { Card } from '@app/components/card';
 import { ContentLayout } from '@app/layouts';
 import { getAvailableGroups } from '@app/services';
 import { addUsers, getAllUsers } from '@app/services/users';
-import { encodeQueryToURL } from '@app/utils';
+import { encodeQueryToURL, normalizeGroupName } from '@app/utils';
 import { useInfiniteListPaged } from '@app/utils/hooks';
 import { validEmail } from '@app/utils/validations';
 
@@ -49,8 +48,6 @@ export function UsersHome(props: any) {
   const [serverErrors, setServerErrors] = useState([]);
   const [usersFeedback, setUsersFeedback] = useState([]);
 
-  const normalizeGroupName = (groupName: string): string => capitalize(groupName.split('-').pop());
-
   const getQuery = (pageIndex) => {
     const query = {
       page: { size: PAGE_SIZE, number: pageIndex },

packages/earth-admin/src/utils/index.ts

@@ -21,6 +21,7 @@ import { navigate } from 'gatsby';
 import moment from 'moment';
 import queryStringEncode from 'query-string-encode';
 import { RefObject } from 'react';
+import { capitalize } from 'lodash';
 
 import { ADMIN_PAGES } from '@app/components/sidebar-select/model';
 import { BASE_URL } from '@app/config';
@@ -160,3 +161,10 @@ export function copyToClipboard(
     successFunction('');
   }, 4000);
 }
+
+/**
+ * Normalize group (role) name
+ * @param groupName
+ */
+export const normalizeGroupName = (groupName: string): string =>
+  capitalize(groupName.split('-').pop() || groupName);