feat(Assistant): Move AssistantWrapperMobile for better rendering wit…

…h FAB
cozy · Oct 22, 2024 · c7c33f7 · c7c33f7
1 parent e3fb234
commit c7c33f7
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 32 deletions.
diff --git a/src/assistant/AssistantWrapperMobile.jsx b/src/assistant/AssistantWrapperMobile.jsx
@@ -7,11 +7,11 @@ import { getFlagshipMetadata } from 'cozy-device-helper'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
 import SearchBar from 'cozy-ui/transpiled/react/SearchBar'
-import Portal from 'cozy-ui/transpiled/react/Portal'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import AssistantIcon from 'assets/images/icon-assistant.png'
+import { FLAG_FAB_BUTTON_ENABLED } from 'components/AddButton/helpers'
 
 import styles from './styles.styl'
 
@@ -24,31 +24,29 @@ export const AssistantWrapperMobile = () => {
   if (!flag('cozy.assistant.enabled') || !isMobile) return null
 
   return (
-    <Portal into="body">
-      <div
-        className={cx(
-          styles['assistantWrapper-mobile'],
-          styles[`assistantWrapper-mobile--${type}`],
-          {
-            [styles['assistantWrapper-mobile--offset']]: flag(
-              'home.fab.button.enabled'
-            ),
-            [styles['assistantWrapper-mobile--immersive']]:
-              getFlagshipMetadata().immersive
-          }
-        )}
-      >
-        <SearchBar
-          size="medium"
-          icon={
-            <Icon className="u-ml-1 u-mr-half" icon={AssistantIcon} size={24} />
-          }
-          type="button"
-          label={t('assistant.search.placeholder')}
-          onClick={() => navigate('search')}
-        />
-      </div>
-    </Portal>
+    <div
+      className={cx(
+        styles['assistantWrapper-mobile'],
+        styles[`assistantWrapper-mobile--${type}`],
+        {
+          [styles['assistantWrapper-mobile--offset']]: flag(
+            FLAG_FAB_BUTTON_ENABLED
+          ),
+          [styles['assistantWrapper-mobile--immersive']]:
+            getFlagshipMetadata().immersive
+        }
+      )}
+    >
+      <SearchBar
+        size="medium"
+        icon={
+          <Icon className="u-ml-1 u-mr-half" icon={AssistantIcon} size={24} />
+        }
+        type="button"
+        label={t('assistant.search.placeholder')}
+        onClick={() => navigate('connected/search')}
+      />
+    </div>
   )
 }
 

diff --git a/src/components/AddButton/AddButton.jsx b/src/components/AddButton/AddButton.jsx
@@ -24,7 +24,6 @@ const styles = {
     right: '1rem',
     bottom: '1rem',
     position: 'fixed',
-    zIndex: 'var(--zIndex-low)',
     marginBottom: immersive ? 'var(--flagship-bottom-height)' : 0
   })
 }

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -9,7 +9,6 @@ import { getFlagshipMetadata } from 'cozy-device-helper'
 import { Main, Content } from 'cozy-ui/transpiled/react/Layout'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
-import AssistantWrapperMobile from 'assistant/AssistantWrapperMobile'
 import AssistantWrapperDesktop from 'assistant/AssistantWrapperDesktop'
 import Applications from 'components/Applications'
 import ScrollToTopOnMount from 'components/ScrollToTopOnMount'
@@ -30,7 +29,6 @@ const Home = ({ setAppsReady, wrapper }) => {
         <ScrollToTopOnMount target={wrapper} />
         {pathname === '/connected' && <Announcements />}
         <AssistantWrapperDesktop />
-        <AssistantWrapperMobile />
         <Content
           className={cx('u-flex u-flex-column u-ph-1', {
             [styles['homeMainContent--withAssistant']]:

diff --git a/src/containers/App.jsx b/src/containers/App.jsx
@@ -13,6 +13,7 @@ import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import { Main } from 'cozy-ui/transpiled/react/Layout'
 import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
 
+import AssistantWrapperMobile from 'assistant/AssistantWrapperMobile'
 import AssistantDialog from 'assistant/Views/AssistantDialog'
 import SearchDialog from 'assistant/Views/SearchDialog'
 import AddButton from 'components/AddButton/AddButton'
@@ -190,6 +191,7 @@ const App = ({ accounts, konnectors, triggers }) => {
         </div>
         <FooterLogo />
       </MainView>
+      <AssistantWrapperMobile />
       {isFlagshipApp() && <DefaultRedirectionSnackbar />}
       {flag(FLAG_FAB_BUTTON_ENABLED) && isMobile && <AddButton />}
     </>

diff --git a/src/containers/App.spec.jsx b/src/containers/App.spec.jsx
@@ -31,6 +31,7 @@ jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   // eslint-disable-next-line react/display-name
   Routes: jest.fn(),
+  useNavigate: () => () => {},
   // eslint-disable-next-line react/display-name
   withRouter: Component => props => <Component {...props} />
 }))

diff --git a/test/AppLike.jsx b/test/AppLike.jsx
@@ -1,14 +1,17 @@
 import React from 'react'
 import { createStore } from 'redux'
-import { CozyProvider } from 'cozy-client'
-import { createMockClient } from 'cozy-client/dist/mock'
 import { Provider as ReduxProvider } from 'react-redux'
 import PropTypes from 'prop-types'
+
+import { CozyProvider } from 'cozy-client'
+import { createMockClient } from 'cozy-client/dist/mock'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 import I18n from 'cozy-ui/transpiled/react/providers/I18n'
-import { BackupDataProvider } from 'components/BackupNotification/useBackupData'
 import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
+
+import { BackupDataProvider } from 'components/BackupNotification/useBackupData'
+
 import enLocale from '../src/locales/en.json'
 
 const fakeDefaultReduxState = {