Sc 11879: VASP Modal Tab navigation refactoring

web/gds-user-ui/src/application/routes/routes.ts

@@ -115,12 +115,7 @@ const appRoutes = [
     component: VerifyPage,
     layout: 'landing'
   },
-  {
-    layout: 'landing',
-    name: 'Switch Account',
-    component: ChooseAnOrganization,
-    path: '/organization/switch'
-  },
+
 
   // ------- DASHBOARD ROUTES-------
   {
@@ -179,6 +174,13 @@ const appRoutes = [
     layout: 'dashboard',
     route: '/organization/switch/:id'
   },
+  {
+    layout: 'dashboard',
+    name: 'Switch Account',
+    component: ChooseAnOrganization,
+    path: '/dashboard/switch',
+    route: '/switch'
+  },
   //  -------ERROR ROUTES-------
   {
     path: '/not-found',

web/gds-user-ui/src/components/AddNewVaspModal/AddNewVaspModal.tsx

@@ -6,7 +6,8 @@ import {
   ModalHeader,
   ModalOverlay,
   useDisclosure,
-  useToast
+  useToast,
+  Stack
 } from '@chakra-ui/react';
 import { t, Trans } from '@lingui/macro';
 import { usePostOrganizations } from 'modules/dashboard/organization/usePostOrganization';
@@ -47,6 +48,7 @@ function AddNewVaspModal() {
   const onSubmit = (values: any) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { accept, ...payload } = values;
+    console.log('[mutate] payload', payload);
 
     mutate(payload, {
       onSuccess() {
@@ -55,7 +57,7 @@ function AddNewVaspModal() {
         closeModal();
       },
       onError: (error) => {
-        // console.log('[mutate] error', error.response?.data.error);
+        console.log('[mutate] error', error.response?.data.error);
         toast({
           title: error.response?.data?.error || error.message,
           status: 'error',
@@ -72,25 +74,26 @@ function AddNewVaspModal() {
       <Button data-testid="add-new-vasp" onClick={onOpen} disabled={!canCreateOrganization()}>
         + Add New VASP
       </Button>
+      <Stack zIndex="9999" position="absolute">
+        <Modal blockScrollOnMount isOpen={isOpen} onClose={closeModal}>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader textAlign="center" textTransform="capitalize">
+              <Trans>Add new managed VASP</Trans>
+            </ModalHeader>
 
-      <Modal blockScrollOnMount isOpen={isOpen} onClose={closeModal}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader textAlign="center" textTransform="capitalize">
-            <Trans>Add new managed VASP</Trans>
-          </ModalHeader>
-
-          <ModalBody>
-            <FormProvider {...methods}>
-              <AddNewVaspForm
-                onSubmit={onSubmit}
-                isCreatingVasp={isCreatingVasp}
-                closeModal={closeModal}
-              />
-            </FormProvider>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
+            <ModalBody>
+              <FormProvider {...methods}>
+                <AddNewVaspForm
+                  onSubmit={onSubmit}
+                  isCreatingVasp={isCreatingVasp}
+                  closeModal={closeModal}
+                />
+              </FormProvider>
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      </Stack>
     </>
   );
 }

web/gds-user-ui/src/components/ChooseAnOrganization/index.tsx

@@ -1,22 +1,38 @@
-import { HStack, IconButton, Stack, StackDivider, Text, VStack } from '@chakra-ui/react';
+import { HStack, IconButton, Stack, StackDivider, Text, VStack, css } from '@chakra-ui/react';
 import { Account } from 'components/Account';
 import AddNewVaspModal from 'components/AddNewVaspModal/AddNewVaspModal';
 import { Trans } from '@lingui/macro';
 import { useOrganizationListQuery } from 'modules/dashboard/organization/useOrganizationListQuery';
 import { userSelector } from 'modules/auth/login/user.slice';
 import { useSelector } from 'react-redux';
 import { GrClose } from 'react-icons/gr';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import React from 'react';
 
+// import { TransparentBackground } from 'components/TransparentBackground';
 function ChooseAnOrganization() {
   const { organizations } = useOrganizationListQuery();
   const { user } = useSelector(userSelector);
+  const navigate = useNavigate();
+  const handleBack = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    navigate(-1);
+  };
 
   return (
-    <VStack spacing={3} mx="auto" h="100vh" pt="10vh" position="relative">
+    <VStack
+      position="absolute"
+      top="0"
+      left="0"
+      w="100%"
+      h="100%"
+      bg={'rgba(255,255,255,255)'}
+      spacing={3}
+      width={'full'}
+      mx="auto"
+      pt="10vh">
       <IconButton
-        as={Link}
-        to="/"
+        onClick={handleBack}
         icon={<GrClose />}
         aria-label="Get back to dashboard"
         position="absolute"
@@ -25,7 +41,14 @@ function ChooseAnOrganization() {
         variant="ghost"
         title="Get back to dashboard"
       />
-      <Stack maxW="700px" mx="auto">
+      <Stack
+        width={'50%'}
+        mx="auto"
+        overflowY={'scroll'}
+        css={css({
+          boxShadow: 'inset 0 -2px 0 rgba(0, 0, 0, 0.1)',
+          border: '0 none'
+        })}>
         <div>
           <HStack width="100%" justifyContent="end">
             <AddNewVaspModal />
@@ -34,20 +57,23 @@ function ChooseAnOrganization() {
             <Trans>Select a VASP from the Managed VASP List</Trans>
           </Text>
         </div>
-        <Stack divider={<StackDivider borderColor="#D9D9D9" />} p={2}>
-          {organizations && organizations?.length > 0 ? (
-            organizations?.map((organization) => (
-              <Account
-                key={organization.id}
-                id={organization.id}
-                name={organization?.name}
-                domain={organization?.domain}
-                isCurrent={organization.id === user?.vasp?.id}
-              />
-            ))
-          ) : (
-            <Text>No VASPs found</Text>
-          )}
+
+        <Stack>
+          <Stack divider={<StackDivider borderColor="#D9D9D9" />} p={2}>
+            {organizations && organizations?.length > 0 ? (
+              organizations?.map((organization) => (
+                <Account
+                  key={organization.id}
+                  id={organization.id}
+                  name={organization?.name}
+                  domain={organization?.domain}
+                  isCurrent={organization.id === user?.vasp?.id}
+                />
+              ))
+            ) : (
+              <Text>No VASPs found</Text>
+            )}
+          </Stack>
         </Stack>
       </Stack>
     </VStack>

web/gds-user-ui/src/components/Collaborators/EditCollaborator/__tests__/__snapshots__/EditCollaboratorModal.spec.tsx.snap

@@ -619,9 +619,11 @@ exports[`UpdateCollaboratorModal should render 1`] = `
                     >
                       <input
                         aria-autocomplete="list"
+                        aria-controls="react-select-2-listbox"
                         aria-describedby="react-select-2-placeholder"
                         aria-expanded="false"
                         aria-haspopup="true"
+                        aria-owns="react-select-2-listbox"
                         autocapitalize="none"
                         autocomplete="off"
                         autocorrect="off"

web/gds-user-ui/src/components/Sidebar/MobileNav.tsx

@@ -27,6 +27,7 @@ import { userSelector, logout } from 'modules/auth/login/user.slice';
 import { Trans } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { colors } from 'utils/theme';
+import { APP_PATH } from 'utils/constants';
 import { canCreateOrganization } from 'utils/permission';
 interface MobileProps extends FlexProps {
   onOpen: () => void;
@@ -104,7 +105,7 @@ const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
               <Trans id="Profile">Profile</Trans>
             </MenuItem>
             {canCreateOrganization() ? (
-              <MenuItem as={Link} to="/organization/switch" data-testid="switch_accounts">
+              <MenuItem as={Link} to={APP_PATH.SWITCH} data-testid="switch_accounts">
                 <Trans id="Switch Accounts">Switch accounts</Trans>
               </MenuItem>
             ) : null}

web/gds-user-ui/src/components/TransparentBackground/index.tsx

@@ -0,0 +1,22 @@
+// transparent background
+import React from 'react';
+import { Flex } from '@chakra-ui/react';
+interface TransparentBackgroundProps {
+  children: React.ReactNode;
+  opacity?: 'md' | 'full';
+}
+export const TransparentBackground = ({ children }: TransparentBackgroundProps) => {
+  // const bgColor = opacity === 'full' ? 'rgba(255, 255, 255, 255)' : 'rgba(255,255,255,0.7)';
+  return (
+    <Flex
+      position="absolute"
+      top="0"
+      left="0"
+      w="100%"
+      h="100%"
+      bg={'rgba(255,255,255,255)'}
+      zIndex="8888">
+      {children}
+    </Flex>
+  );
+};

web/gds-user-ui/src/utils/constants.ts

@@ -13,6 +13,8 @@ export const APP_PATH = {
   CERTIFICATE_REGISTRATION: '/certificate/registration',
   CERTIFICATE_INVENTORY: '/dashboard/certificate/inventory',
   SWITCH_ORGANIZATION: '/dashboard/organization/switch',
+  SWITCH: '/dashboard/switch',
+
 
 };