refactor: migrate PageHeader

getlago · Jan 15, 2025 · 1656363 · 1656363
1 parent d9c6fb8
commit 1656363
Show file tree

Hide file tree

Showing 48 changed files with 196 additions and 496 deletions.
diff --git a/src/pages/AddOnDetails.tsx b/src/pages/AddOnDetails.tsx
@@ -64,8 +64,8 @@ const AddOnDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderInlineBreadcrumbBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group className="overflow-hidden">
           <Button
             icon="arrow-left"
             variant="quaternary"
@@ -88,7 +88,7 @@ const AddOnDetails = () => {
             </Typography>
           )}
           <Typography variant="bodyHl" color="textSecondary" noWrap></Typography>
-        </HeaderInlineBreadcrumbBlock>
+        </PageHeader.Group>
 
         {shouldShowActions && (
           <Popper
@@ -133,7 +133,8 @@ const AddOnDetails = () => {
             )}
           </Popper>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
+
       {isAddOnLoading ? (
         <DetailsHeaderSkeleton />
       ) : (
@@ -208,15 +209,6 @@ const AddOnDetails = () => {
 
 export default AddOnDetails
 
-const HeaderInlineBreadcrumbBlock = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${theme.spacing(3)};
-
-  /* Prevent long name to not overflow in header */
-  overflow: hidden;
-`
-
 const Container = styled.section`
   display: flex;
   flex-direction: column;

diff --git a/src/pages/AddOnsList.tsx b/src/pages/AddOnsList.tsx
@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useRef } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
 
 import { DeleteAddOnDialog, DeleteAddOnDialogRef } from '~/components/addOns/DeleteAddOnDialog'
 import {
@@ -27,7 +26,7 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { usePermissions } from '~/hooks/usePermissions'
-import { PageHeader, theme } from '~/styles'
+import { PageHeader } from '~/styles'
 
 gql`
   fragment AddOnItem on AddOn {
@@ -71,11 +70,11 @@ const AddOnsList = () => {
 
   return (
     <>
-      <Header withSide>
+      <PageHeader.Wrapper className="gap-4 *:whitespace-pre" withSide>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate('text_629728388c4d2300e2d3809b')}
         </Typography>
-        <HeaderRigthBlock>
+        <PageHeader.Group>
           <SearchInput
             onChange={debouncedSearch}
             placeholder={translate('text_63bee4e10e2d53912bfe4db8')}
@@ -85,8 +84,8 @@ const AddOnsList = () => {
               {translate('text_629728388c4d2300e2d38085')}
             </ButtonLink>
           )}
-        </HeaderRigthBlock>
-      </Header>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
 
       <InfiniteScroll
         onBottom={() => {
@@ -235,23 +234,4 @@ const AddOnsList = () => {
   )
 }
 
-const Header = styled(PageHeader)`
-  > * {
-    white-space: pre;
-
-    &:first-child {
-      margin-right: ${theme.spacing(4)};
-    }
-  }
-`
-
-const HeaderRigthBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > :first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 export default AddOnsList
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
@@ -48,11 +48,12 @@ const Analytics = () => {
 
   return (
     <>
-      <PageHeader withSide>
+      <PageHeader.Wrapper withSide>
         <Typography variant="bodyHl" color="grey700" noWrap>
           {translate('text_6553885df387fd0097fd7384')}
         </Typography>
-        <PageHeaderRight>
+
+        <PageHeader.Group>
           <Popper
             maxHeight={452}
             PopperProps={{ placement: 'bottom-end' }}
@@ -137,8 +138,8 @@ const Analytics = () => {
             setPeriodScope={setPeriodScope}
             premiumWarningDialogRef={premiumWarningDialogRef}
           />
-        </PageHeaderRight>
-      </PageHeader>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
 
       {!isPremium && !!currentUser && (
         <UpgradeBlock>
@@ -202,12 +203,6 @@ const Analytics = () => {
 
 export default Analytics
 
-const PageHeaderRight = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${theme.spacing(3)};
-`
-
 const ContentWrapper = styled.div`
   display: grid;
   grid-template-columns: 1fr;

diff --git a/src/pages/BillableMetricsList.tsx b/src/pages/BillableMetricsList.tsx
@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useRef } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
 
 import {
   DeleteBillableMetricDialog,
@@ -22,7 +21,7 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { usePermissions } from '~/hooks/usePermissions'
-import { PageHeader, theme } from '~/styles'
+import { PageHeader } from '~/styles'
 
 gql`
   fragment BillableMetricItem on BillableMetric {
@@ -63,11 +62,11 @@ const BillableMetricsList = () => {
 
   return (
     <>
-      <Header withSide>
+      <PageHeader.Wrapper className="gap-4 *:whitespace-pre" withSide>
         <Typography variant="bodyHl" color="textSecondary">
           {translate('text_623b497ad05b960101be3438')}
         </Typography>
-        <HeaderRigthBlock>
+        <PageHeader.Group>
           <SearchInput
             onChange={debouncedSearch}
             placeholder={translate('text_63ba9ee977a67c9693f50aea')}
@@ -77,8 +76,8 @@ const BillableMetricsList = () => {
               {translate('text_623b497ad05b960101be343a')}
             </ButtonLink>
           )}
-        </HeaderRigthBlock>
-      </Header>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
 
       <InfiniteScroll
         onBottom={() => {
@@ -193,23 +192,4 @@ const BillableMetricsList = () => {
   )
 }
 
-const Header = styled(PageHeader)`
-  > * {
-    white-space: pre;
-
-    &:first-child {
-      margin-right: ${theme.spacing(4)};
-    }
-  }
-`
-
-const HeaderRigthBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > :first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 export default BillableMetricsList
diff --git a/src/pages/CouponDetails.tsx b/src/pages/CouponDetails.tsx
@@ -119,8 +119,8 @@ const CouponDetails = () => {
 
   return (
     <>
-      <PageHeader withSide>
-        <HeaderInlineBreadcrumbBlock>
+      <PageHeader.Wrapper withSide>
+        <PageHeader.Group className="overflow-hidden">
           <Button
             icon="arrow-left"
             variant="quaternary"
@@ -143,7 +143,7 @@ const CouponDetails = () => {
             </Typography>
           )}
           <Typography variant="bodyHl" color="textSecondary" noWrap></Typography>
-        </HeaderInlineBreadcrumbBlock>
+        </PageHeader.Group>
 
         {shouldShowActions && (
           <Popper
@@ -213,7 +213,7 @@ const CouponDetails = () => {
             )}
           </Popper>
         )}
-      </PageHeader>
+      </PageHeader.Wrapper>
       {isCouponLoading ? (
         <DetailsHeaderSkeleton />
       ) : (
@@ -402,15 +402,6 @@ const CouponDetails = () => {
 
 export default CouponDetails
 
-const HeaderInlineBreadcrumbBlock = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${theme.spacing(3)};
-
-  /* Prevent long name to not overflow in header */
-  overflow: hidden;
-`
-
 const Container = styled.section`
   display: flex;
   flex-direction: column;

diff --git a/src/pages/CouponsList.tsx b/src/pages/CouponsList.tsx
@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client'
 import { useRef } from 'react'
 import { generatePath, useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
 
 import { CouponCaption } from '~/components/coupons/CouponCaption'
 import { DeleteCouponDialog, DeleteCouponDialogRef } from '~/components/coupons/DeleteCouponDialog'
@@ -31,7 +30,7 @@ import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import { useOrganizationInfos } from '~/hooks/useOrganizationInfos'
 import { usePermissions } from '~/hooks/usePermissions'
-import { PageHeader, theme } from '~/styles'
+import { PageHeader } from '~/styles'
 
 gql`
   fragment CouponItem on Coupon {
@@ -86,11 +85,11 @@ const CouponsList = () => {
 
   return (
     <>
-      <Header withSide>
+      <PageHeader.Wrapper className="gap-4 *:whitespace-pre" withSide>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate('text_62865498824cc10126ab2956')}
         </Typography>
-        <HeaderRigthBlock>
+        <PageHeader.Group>
           <SearchInput
             onChange={debouncedSearch}
             placeholder={translate('text_63beebbf4f60e2f553232782')}
@@ -100,8 +99,8 @@ const CouponsList = () => {
               {translate('text_62865498824cc10126ab2954')}
             </ButtonLink>
           )}
-        </HeaderRigthBlock>
-      </Header>
+        </PageHeader.Group>
+      </PageHeader.Wrapper>
 
       <InfiniteScroll
         onBottom={() => {
@@ -245,23 +244,4 @@ const CouponsList = () => {
   )
 }
 
-const Header = styled(PageHeader)`
-  > * {
-    white-space: pre;
-
-    &:first-child {
-      margin-right: ${theme.spacing(4)};
-    }
-  }
-`
-
-const HeaderRigthBlock = styled.div`
-  display: flex;
-  align-items: center;
-
-  > :first-child {
-    margin-right: ${theme.spacing(3)};
-  }
-`
-
 export default CouponsList
diff --git a/src/pages/CreateAddOn.tsx b/src/pages/CreateAddOn.tsx
@@ -152,7 +152,7 @@ const CreateAddOn = () => {
 
   return (
     <div>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate(isEdition ? 'text_629728388c4d2300e2d37fc2' : 'text_629728388c4d2300e2d37fbc')}
         </Typography>
@@ -167,7 +167,7 @@ const CreateAddOn = () => {
                 : navigate(ADD_ONS_ROUTE)
           }
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Content>
         <Main>
           <div>

diff --git a/src/pages/CreateBillableMetric.tsx b/src/pages/CreateBillableMetric.tsx
@@ -252,7 +252,7 @@ const CreateBillableMetric = () => {
 
   return (
     <div>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate(isEdition ? 'text_62582fb4675ece01137a7e44' : 'text_623b42ff8ee4e000ba87d0ae')}
         </Typography>
@@ -265,7 +265,7 @@ const CreateBillableMetric = () => {
               : navigate(BILLABLE_METRICS_ROUTE)
           }
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Content>
         <Main>
           <div>

diff --git a/src/pages/CreateCoupon.tsx b/src/pages/CreateCoupon.tsx
@@ -221,7 +221,7 @@ const CreateCoupon = () => {
 
   return (
     <div>
-      <PageHeader>
+      <PageHeader.Wrapper>
         <Typography variant="bodyHl" color="textSecondary" noWrap>
           {translate(isEdition ? 'text_6287a9bdac160c00b2e0fbe7' : 'text_62876e85e32e0300e18030e7')}
         </Typography>
@@ -232,7 +232,7 @@ const CreateCoupon = () => {
             formikProps.dirty ? warningDialogRef.current?.openDialog() : couponCloseRedirection()
           }
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Content>
         <Main>
           <div>

diff --git a/src/pages/CreateCreditNote.tsx b/src/pages/CreateCreditNote.tsx
@@ -270,7 +270,7 @@ const CreateCreditNote = () => {
 
   return (
     <div>
-      <PageHeader>
+      <PageHeader.Wrapper>
         {loading ? (
           <div>
             <Skeleton variant="text" className="w-30" />
@@ -297,7 +297,7 @@ const CreateCreditNote = () => {
                 )
           }
         />
-      </PageHeader>
+      </PageHeader.Wrapper>
       <Content>
         <Main>
           <div>