Merge pull request #1068 from equinor/fix/use-correct-faq-endpoint

👽 Use new FAQ endpoint to fetch faqs

Author: mariush2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "9.8.4",
+  "version": "9.9.0",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/atoms/hooks/useFaqsInApplication.ts

@@ -7,7 +7,7 @@ export function useFaqsInApplication() {
   return useQuery({
     queryKey: ['GET_FAQ_IN_APP'], // This is hard-coded on purpose, assuming we never have to update cache manually
     queryFn: async () => {
-      const data = await FaqService.getFaqCategoriesFromApplicationId(
+      const data = await FaqService.getCategoriesWithFaqsFromApplicationName(
         environment.getAppName(import.meta.env.VITE_NAME)
       );
 

src/organisms/Faq/Faq.test.tsx

@@ -207,7 +207,7 @@ test('Able to open FAQ', async () => {
 
 test('Renders expected content when empty', async ({ worker }) => {
   worker.use(
-    http.get('*/api/v1/Faq/faqcategories/:appName', () => {
+    http.get('*/api/v1/Faq/faqcategorieswithfaqs/:appName', () => {
       return HttpResponse.json([]);
     })
   );

src/organisms/TopBar/Account/Account.tsx

@@ -1,22 +1,22 @@
 import {
   FC,
-  MutableRefObject,
   ReactElement,
   ReactNode,
+  RefObject,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
 
-import { AccountInfo } from '@azure/msal-common';
 import { Button, Icon, Typography } from '@equinor/eds-core-react';
 import { log_out } from '@equinor/eds-icons';
 
 import { TopBarMenu } from '../TopBarMenu';
 import { useActiveImpersonationUser } from './ImpersonateMenu/hooks/useActiveImpersonationUser';
 import { useCanImpersonate } from './ImpersonateMenu/hooks/useCanImpersonate';
+import { useMappedRoles } from './ImpersonateMenu/hooks/useMappedRoles';
 import { useStopImpersonation } from './ImpersonateMenu/hooks/useStopImpersonation';
 import { ImpersonateMenu } from './ImpersonateMenu/ImpersonateMenu';
 import {
@@ -36,33 +36,19 @@ import { impersonateUserDtoToFullName } from 'src/organisms/TopBar/Account/Imper
 import { useAuth } from 'src/providers/AuthProvider/AuthProvider';
 
 export interface AccountProps {
-  /**
-   * @deprecated logout - Not needed anymore
-   */
-  logout?: () => void;
-  /**
-   * @deprecated account - Not needed anymore
-   */
-  account?: AccountInfo | undefined;
-  /**
-   * @deprecated photo - Not needed anymore
-   */
-  photo?: string | undefined;
-  /**
-   * @deprecated roles - Not needed anymore
-   */
-  roles?: string[] | undefined;
   renderCustomButton?: (
-    buttonRef: MutableRefObject<HTMLButtonElement | null>,
+    buttonRef: RefObject<HTMLButtonElement | null>,
     handleToggle: () => void
   ) => ReactElement;
   hideRoleChips?: boolean;
+  useDisplayNameForRole?: boolean;
   children?: ReactNode;
 }
 
 export const Account: FC<AccountProps> = ({
   renderCustomButton,
   hideRoleChips = false,
+  useDisplayNameForRole = false,
   children,
 }) => {
   const ACTIVE_ENVIRONMENT = environment.getEnvironmentName(
@@ -79,13 +65,16 @@ export const Account: FC<AccountProps> = ({
   const { data: canImpersonate = true } = useCanImpersonate();
   const { data: activeImpersonationUser } = useActiveImpersonationUser();
   const { mutate: endImpersonation } = useStopImpersonation();
+  const activeRoles = useMappedRoles(
+    // Wasn't able to test the (roles ?? []) part, because roles are always defined from useAuth when we are logged in
+    /* v8 ignore next */
+    activeImpersonationUser ? activeImpersonationUser.roles : (roles ?? []),
+    useDisplayNameForRole
+  );
 
   const fullName = activeImpersonationUser
     ? impersonateUserDtoToFullName(activeImpersonationUser)
     : account?.name;
-  const activeRoles = activeImpersonationUser
-    ? activeImpersonationUser.roles
-    : roles;
   const username = activeImpersonationUser
     ? activeImpersonationUser.uniqueName
     : account?.username;
@@ -145,7 +134,7 @@ export const Account: FC<AccountProps> = ({
           {activeRoles && !hideRoleChips && (
             <RolesContainer>
               {activeRoles.map((role) => (
-                <RoleChip key={role}>{role}</RoleChip>
+                <RoleChip key={role.value}>{role.label}</RoleChip>
               ))}
             </RolesContainer>
           )}

src/organisms/TopBar/Account/ImpersonateMenu/CreateOrEditUser/CreateOrEditUser.test.tsx

@@ -131,6 +131,8 @@ test.each(['email', 'no-email'])(
 
     await user.click(screen.getByRole('button', { name: /edit user/i }));
 
+    await waitForElementToBeRemoved(() => screen.getAllByRole('progressbar'));
+
     const textBox = screen.getByRole('textbox', { name: /first name/i });
     await user.clear(textBox);
 
@@ -148,15 +150,51 @@ test.each(['email', 'no-email'])(
 
     await user.click(screen.getByRole('button', { name: /save/i }));
 
-    await waitForElementToBeRemoved(() => screen.getAllByRole('progressbar'));
-
     expect(
       await screen.findByText(new RegExp(newFirstName))
     ).toBeInTheDocument();
   },
   { timeout: 8000 }
 );
 
+test('Edit another user clears the form as expected', async () => {
+  renderWithProviders(<Account />);
+  const user = userEvent.setup();
+  const button = screen.getByRole('button');
+
+  await user.click(button);
+
+  await user.click(await screen.findByRole('button', { name: 'Impersonate' }));
+
+  const menuItems = await screen.findAllByTestId('impersonation-user');
+  expect(menuItems.length).toBeGreaterThan(0);
+
+  // Click edit on the first one
+  await user.click(within(menuItems[0]).getByRole('button'));
+
+  await user.click(screen.getByRole('button', { name: /edit user/i }));
+
+  await waitForElementToBeRemoved(() => screen.getAllByRole('progressbar'));
+
+  const textBox = screen.getByRole('textbox', {
+    name: /first name/i,
+  }) as HTMLInputElement;
+  const firstName = textBox.value;
+
+  await user.click(screen.getByRole('button', { name: /cancel/i }));
+
+  const newMenuItems = await screen.findAllByTestId('impersonation-user');
+  await user.click(within(newMenuItems[1]).getByRole('button'));
+
+  await user.click(screen.getByRole('button', { name: /edit user/i }));
+
+  const otherName = (
+    screen.getByRole('textbox', { name: /first name/i }) as HTMLInputElement
+  ).value;
+
+  expect(otherName).not.toBe(firstName);
+});
+
 test.each(['email', 'no-email'])(
   'Able to create new impersonation user - %s',
   async (testCase) => {
@@ -172,6 +210,8 @@ test.each(['email', 'no-email'])(
 
     await user.click(screen.getByRole('button', { name: /create users/i }));
 
+    await waitForElementToBeRemoved(() => screen.getAllByRole('progressbar'));
+
     const createButton = screen.getByRole('button', {
       name: /create/i,
     });
@@ -204,7 +244,7 @@ test.each(['email', 'no-email'])(
         min: 2,
         max: FAKE_ROLES.length - 1,
       })
-      .map((role) => role.value)
+      .map((role) => role.displayName)
       .sort();
 
     await user.click(screen.getByRole('combobox'));

src/organisms/TopBar/Account/ImpersonateMenu/CreateOrEditUser/CreateOrEditUser.tsx

@@ -1,18 +1,17 @@
-import { ChangeEvent, FC, useEffect, useMemo, useState } from 'react';
+import { ChangeEvent, FC, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Button, DotProgress, Icon, Typography } from '@equinor/eds-core-react';
 import { arrow_back } from '@equinor/eds-icons';
 import { ImpersonateUserDto } from '@equinor/subsurface-app-management';
 
-import { useAllAppRoles } from '../hooks/useAllAppRoles';
 import { useCreateImpersonation } from '../hooks/useCreateImpersonation';
 import { useEditImpersonation } from '../hooks/useEditImpersonation';
 import { Header } from '../Impersonate.styles';
 import { Container, Section } from './CreateOrEditUser.styles';
-import { usePrevious } from 'src/atoms/hooks/usePrevious';
 import { environment } from 'src/atoms/utils/auth_environment';
 import { ComboBox, SelectOptionRequired } from 'src/molecules';
 import { TextField } from 'src/molecules/TextField/TextField';
+import { useAllAppRoles } from 'src/organisms/TopBar/Account/ImpersonateMenu/hooks/useAllAppRoles';
 
 interface CreateOrEditUserProps {
   editingUser?: ImpersonateUserDto;
@@ -23,32 +22,34 @@ export const CreateOrEditUser: FC<CreateOrEditUserProps> = ({
   editingUser,
   onBack,
 }) => {
-  const previousEditingUser = usePrevious(editingUser);
+  const initializedEditUser = useRef<boolean>(false);
   const [roles, setRoles] = useState<SelectOptionRequired[]>([]);
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');
-
   const { data, isLoading: isLoadingRoles } = useAllAppRoles();
 
   useEffect(() => {
-    if (
-      editingUser &&
-      (previousEditingUser === undefined ||
-        previousEditingUser.uniqueName !== editingUser.uniqueName)
-    ) {
-      setRoles(editingUser.roles.map((role) => ({ value: role, label: role })));
+    if (editingUser && data && !initializedEditUser.current) {
+      initializedEditUser.current = true;
+      setRoles(
+        editingUser.roles.map((role) => {
+          const mapped = data.find((item) => item.value === role);
+          if (mapped) return { value: role, label: mapped.displayName };
+          return { value: role, label: role };
+        })
+      );
       setFirstName(editingUser.firstName);
       setLastName(editingUser.lastName);
       setEmail(editingUser.email ?? '');
     }
-  }, [editingUser, previousEditingUser]);
+  }, [data, editingUser, initializedEditUser]);
 
   const availableRoles = useMemo(
     () =>
       data?.map((item) => ({
         value: item.value,
-        label: item.value,
+        label: item.displayName,
       })) ?? [],
     [data]
   );

src/organisms/TopBar/Account/ImpersonateMenu/UserImpersonation.tsx

@@ -10,6 +10,7 @@ import {
 } from '@equinor/eds-icons';
 import { ImpersonateUserDto } from '@equinor/subsurface-app-management';
 
+import { useMappedRoles } from './hooks/useMappedRoles';
 import {
   Container,
   RoleChip,
@@ -60,8 +61,7 @@ export const UserImpersonation: FC<UserImpersonationProps> = ({
   const [open, setOpen] = useState(false);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const fullName = impersonateUserDtoToFullName({ firstName, lastName });
-
-  const sortedRoles = [...roles].sort();
+  const activeRoles = useMappedRoles(roles);
 
   const handleOnToggleMenu = () => setOpen((prev) => !prev);
   const handleOnClose = () => setOpen(false);
@@ -95,11 +95,11 @@ export const UserImpersonation: FC<UserImpersonationProps> = ({
         />
         <Typography data-testid="name">{fullName}</Typography>
         <RoleChipContainer $selected={selected}>
-          <RoleChip data-testid="role">{sortedRoles[0]}</RoleChip>
-          {sortedRoles.length > 1 && (
-            <OptionalTooltip title={sortedRoles.slice(1).join(', ')}>
+          <RoleChip data-testid="role">{activeRoles[0].label}</RoleChip>
+          {activeRoles.length > 1 && (
+            <OptionalTooltip title={activeRoles.slice(1).join(', ')}>
               <RoleChip data-testid="additional-roles">
-                {`+${sortedRoles.length - 1}`}
+                {`+${activeRoles.length - 1}`}
               </RoleChip>
             </OptionalTooltip>
           )}

src/organisms/TopBar/Account/ImpersonateMenu/hooks/useAllAppRoles.ts

@@ -4,12 +4,15 @@ import { useQuery } from '@tanstack/react-query';
 import { AVAILABLE_ROLES } from '../Impersonate.constants';
 import { environment } from 'src/atoms/utils/auth_environment';
 
-export function useAllAppRoles() {
+export function useAllAppRoles(enabled = true) {
   return useQuery({
     queryKey: [AVAILABLE_ROLES],
     queryFn: () =>
       AmplifyApplicationService.getAllAppRoles(
         environment.getApiClientId(import.meta.env.VITE_API_CLIENT_ID)
       ),
+    enabled,
+    staleTime: Infinity,
+    gcTime: Infinity,
   });
 }

src/organisms/TopBar/Account/ImpersonateMenu/hooks/useMappedRoles.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+
+import { useAllAppRoles } from './useAllAppRoles';
+
+export function useMappedRoles(roles: string[], enabled = true) {
+  const { data: allAppRoles = [] } = useAllAppRoles(enabled);
+
+  return useMemo(() => {
+    return roles.toSorted().map((role) => {
+      const currentRole = allAppRoles.find((item) => item.value === role);
+
+      if (currentRole)
+        return { value: currentRole.value, label: currentRole.displayName };
+
+      return {
+        value: role,
+        label: role,
+      };
+    });
+  }, [allAppRoles, roles]);
+}

src/tests/mockHandlers.ts

@@ -85,7 +85,7 @@ function fakeUser(): ImpersonateUserDto {
     lastName,
     email,
     uniqueName,
-    roles,
+    roles: [...roles, 'other'],
     appName: environment.getAppName(import.meta.env.VITE_NAME),
     activeUsers: [],
   };
@@ -382,7 +382,7 @@ export const handlers = [
     await delay('real');
     return HttpResponse.text('failed', { status: 500 });
   }),
-  http.get('*/v1/Faq/faqcategories/:appName', async () => {
+  http.get('*/v1/Faq/faqcategorieswithfaqs/:appName', async () => {
     await delay('real');
     return HttpResponse.json(FAKE_FAQ_CATEGORIES);
   }),