fix: AppList margin regression

Author: cballevre

src/components/Permissions/DataList/DataList.jsx

@@ -15,11 +15,9 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import ListItemSecondaryAction from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemSecondaryAction'
 import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
-import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
 import withAllLocales from 'lib/withAllLocales'
 import { routes } from 'constants/routes'
-import Page from 'components/Page'
 import {
   completePermission,
   getPermissionIconName
@@ -28,17 +26,13 @@ import useAppsOrKonnectors from 'components/Permissions/hooks/useAppsOrKonnector
 import { sortPermissionsByName } from 'components/Permissions/DataList/DataListHelpers'
 
 const DataList = ({ t }) => {
-  const { isMobile, isTablet } = useBreakpoints()
   const { isResultLoading, hasQueryFailed, appsResult, konnectorsResult } =
     useAppsOrKonnectors()
 
   const permissionsToDisplay = completePermission(appsResult, konnectorsResult)
 
   return (
-    <Page
-      className={isMobile || isTablet ? '' : 'u-maw-7'}
-      withoutVerticalMargin={isMobile || isTablet}
-    >
+    <>
       {isResultLoading ? (
         <Spinner size="large" className="u-flex u-flex-justify-center u-mt-1" />
       ) : hasQueryFailed ? (
@@ -90,7 +84,7 @@ const DataList = ({ t }) => {
           </NavigationListSection>
         </NavigationList>
       )}
-    </Page>
+    </>
   )
 }
 

src/components/Permissions/PermissionsTab.jsx

@@ -17,13 +17,15 @@ function a11yProps(index) {
   }
 }
 const TabPanel = props => {
+  const { isMobile, isTablet } = useBreakpoints()
   const { children, value, index, ...other } = props
   return (
     <div
       role="tabpanel"
       hidden={value !== index}
       id={`simple-tabpanel-${index}`}
       aria-labelledby={`simple-tab-${index}`}
+      className={isMobile || isTablet ? undefined : 'u-maw-7'}
       {...other}
     >
       {value === index && children}
@@ -42,45 +44,43 @@ const PermissionsTab = ({ t }) => {
   return (
     <Page
       className={isMobile || isTablet ? '' : undefined}
-      withoutMarginVertical={isMobile || isTablet}
+      withoutMargin={isMobile || isTablet}
     >
-      <div>
-        <div
-          className={
-            isMobile || isTablet
-              ? 'u-ta-center u-flex u-flex-column u-flex-items-center'
-              : 'u-flex'
-          }
+      <div
+        className={
+          isMobile || isTablet
+            ? 'u-ta-center u-flex u-flex-column u-flex-items-center'
+            : 'u-flex u-mb-2'
+        }
+      >
+        <PageTitle>{t('Permissions.permissions')}</PageTitle>
+        <Tabs
+          value={page}
+          onChange={handleChange}
+          segmented
+          style={{ width: '20rem' }}
+          className={isMobile || isTablet ? 'u-mh-half u-mt-1' : 'u-mh-1'}
         >
-          <PageTitle>{t('Permissions.permissions')}</PageTitle>
-          <Tabs
-            value={page}
-            onChange={handleChange}
-            segmented
-            style={{ width: '20rem' }}
-            className={isMobile || isTablet ? 'u-mh-half u-mt-1' : 'u-mh-1'}
-          >
-            <Tab
-              value="slug"
-              label={t('Permissions.applications')}
-              href={`#${routes.appList}`}
-              {...a11yProps(0)}
-            />
-            <Tab
-              value="data"
-              label={t('Permissions.data')}
-              href={`#${routes.dataList}`}
-              {...a11yProps(1)}
-            />
-          </Tabs>
-        </div>
-        <TabPanel value={page} index="slug">
-          <AppList />
-        </TabPanel>
-        <TabPanel value={page} index="data">
-          <DataList />
-        </TabPanel>
+          <Tab
+            value="slug"
+            label={t('Permissions.applications')}
+            href={`#${routes.appList}`}
+            {...a11yProps(0)}
+          />
+          <Tab
+            value="data"
+            label={t('Permissions.data')}
+            href={`#${routes.dataList}`}
+            {...a11yProps(1)}
+          />
+        </Tabs>
       </div>
+      <TabPanel value={page} index="slug">
+        <AppList />
+      </TabPanel>
+      <TabPanel value={page} index="data">
+        <DataList />
+      </TabPanel>
     </Page>
   )
 }

src/components/Permissions/__snapshots__/PermissionsTab.spec.jsx.snap

@@ -5,53 +5,53 @@ exports[`PermissionsTab should match snapshot 1`] = `
   <div
     class="u-pb-3 u-mh-2 u-mv-2"
   >
-    <div>
+    <div
+      class="u-flex u-mb-2"
+    >
       <div
-        class="u-flex"
+        data-testid="pageTitle"
       >
-        <div
-          data-testid="pageTitle"
-        >
-          Permissions.permissions
-        </div>
-        <button
-          data-testid="tabs"
-          value="slug"
-        >
-          <div
-            aria-controls="simple-tabpanel-0"
-            data-testid="tab"
-            href="#/permissions/slug"
-            id="simple-tab-0"
-            label="Permissions.applications"
-            value="slug"
-          />
-          <div
-            aria-controls="simple-tabpanel-1"
-            data-testid="tab"
-            href="#/permissions/data"
-            id="simple-tab-1"
-            label="Permissions.data"
-            value="data"
-          />
-        </button>
+        Permissions.permissions
       </div>
-      <div
-        aria-labelledby="simple-tab-slug"
-        id="simple-tabpanel-slug"
-        role="tabpanel"
+      <button
+        data-testid="tabs"
+        value="slug"
       >
         <div
-          data-testid="AppList"
+          aria-controls="simple-tabpanel-0"
+          data-testid="tab"
+          href="#/permissions/slug"
+          id="simple-tab-0"
+          label="Permissions.applications"
+          value="slug"
+        />
+        <div
+          aria-controls="simple-tabpanel-1"
+          data-testid="tab"
+          href="#/permissions/data"
+          id="simple-tab-1"
+          label="Permissions.data"
+          value="data"
         />
-      </div>
+      </button>
+    </div>
+    <div
+      aria-labelledby="simple-tab-slug"
+      class="u-maw-7"
+      id="simple-tabpanel-slug"
+      role="tabpanel"
+    >
       <div
-        aria-labelledby="simple-tab-data"
-        hidden=""
-        id="simple-tabpanel-data"
-        role="tabpanel"
+        data-testid="AppList"
       />
     </div>
+    <div
+      aria-labelledby="simple-tab-data"
+      class="u-maw-7"
+      hidden=""
+      id="simple-tabpanel-data"
+      role="tabpanel"
+    />
   </div>
 </div>
 `;