Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: migrate PageHeader #1994

Merged
merged 1 commit into from
Jan 16, 2025
Merged

refactor: migrate PageHeader #1994

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 5 additions & 13 deletions src/pages/AddOnDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ const AddOnDetails = () => {

return (
<>
<PageHeader withSide>
<HeaderInlineBreadcrumbBlock>
<PageHeader.Wrapper withSide>
<PageHeader.Group className="overflow-hidden">
<Button
icon="arrow-left"
variant="quaternary"
Expand All @@ -88,7 +88,7 @@ const AddOnDetails = () => {
</Typography>
)}
<Typography variant="bodyHl" color="textSecondary" noWrap></Typography>
</HeaderInlineBreadcrumbBlock>
</PageHeader.Group>

{shouldShowActions && (
<Popper
Expand Down Expand Up @@ -133,7 +133,8 @@ const AddOnDetails = () => {
)}
</Popper>
)}
</PageHeader>
</PageHeader.Wrapper>

{isAddOnLoading ? (
<DetailsHeaderSkeleton />
) : (
Expand Down Expand Up @@ -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;
Expand Down
30 changes: 5 additions & 25 deletions src/pages/AddOnsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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')}
Expand All @@ -85,8 +84,8 @@ const AddOnsList = () => {
{translate('text_629728388c4d2300e2d38085')}
</ButtonLink>
)}
</HeaderRigthBlock>
</Header>
</PageHeader.Group>
</PageHeader.Wrapper>

<InfiniteScroll
onBottom={() => {
Expand Down Expand Up @@ -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
15 changes: 5 additions & 10 deletions src/pages/Analytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }}
Expand Down Expand Up @@ -137,8 +138,8 @@ const Analytics = () => {
setPeriodScope={setPeriodScope}
premiumWarningDialogRef={premiumWarningDialogRef}
/>
</PageHeaderRight>
</PageHeader>
</PageHeader.Group>
</PageHeader.Wrapper>

{!isPremium && !!currentUser && (
<UpgradeBlock>
Expand Down Expand Up @@ -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;
Expand Down
30 changes: 5 additions & 25 deletions src/pages/BillableMetricsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -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')}
Expand All @@ -77,8 +76,8 @@ const BillableMetricsList = () => {
{translate('text_623b497ad05b960101be343a')}
</ButtonLink>
)}
</HeaderRigthBlock>
</Header>
</PageHeader.Group>
</PageHeader.Wrapper>

<InfiniteScroll
onBottom={() => {
Expand Down Expand Up @@ -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
17 changes: 4 additions & 13 deletions src/pages/CouponDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,8 +119,8 @@ const CouponDetails = () => {

return (
<>
<PageHeader withSide>
<HeaderInlineBreadcrumbBlock>
<PageHeader.Wrapper withSide>
<PageHeader.Group className="overflow-hidden">
<Button
icon="arrow-left"
variant="quaternary"
Expand All @@ -143,7 +143,7 @@ const CouponDetails = () => {
</Typography>
)}
<Typography variant="bodyHl" color="textSecondary" noWrap></Typography>
</HeaderInlineBreadcrumbBlock>
</PageHeader.Group>

{shouldShowActions && (
<Popper
Expand Down Expand Up @@ -213,7 +213,7 @@ const CouponDetails = () => {
)}
</Popper>
)}
</PageHeader>
</PageHeader.Wrapper>
{isCouponLoading ? (
<DetailsHeaderSkeleton />
) : (
Expand Down Expand Up @@ -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;
Expand Down
30 changes: 5 additions & 25 deletions src/pages/CouponsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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')}
Expand All @@ -100,8 +99,8 @@ const CouponsList = () => {
{translate('text_62865498824cc10126ab2954')}
</ButtonLink>
)}
</HeaderRigthBlock>
</Header>
</PageHeader.Group>
</PageHeader.Wrapper>

<InfiniteScroll
onBottom={() => {
Expand Down Expand Up @@ -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
4 changes: 2 additions & 2 deletions src/pages/CreateAddOn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ const CreateAddOn = () => {

return (
<div>
<PageHeader>
<PageHeader.Wrapper>
<Typography variant="bodyHl" color="textSecondary" noWrap>
{translate(isEdition ? 'text_629728388c4d2300e2d37fc2' : 'text_629728388c4d2300e2d37fbc')}
</Typography>
Expand All @@ -167,7 +167,7 @@ const CreateAddOn = () => {
: navigate(ADD_ONS_ROUTE)
}
/>
</PageHeader>
</PageHeader.Wrapper>
<Content>
<Main>
<div>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/CreateBillableMetric.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ const CreateBillableMetric = () => {

return (
<div>
<PageHeader>
<PageHeader.Wrapper>
<Typography variant="bodyHl" color="textSecondary" noWrap>
{translate(isEdition ? 'text_62582fb4675ece01137a7e44' : 'text_623b42ff8ee4e000ba87d0ae')}
</Typography>
Expand All @@ -265,7 +265,7 @@ const CreateBillableMetric = () => {
: navigate(BILLABLE_METRICS_ROUTE)
}
/>
</PageHeader>
</PageHeader.Wrapper>
<Content>
<Main>
<div>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/CreateCoupon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ const CreateCoupon = () => {

return (
<div>
<PageHeader>
<PageHeader.Wrapper>
<Typography variant="bodyHl" color="textSecondary" noWrap>
{translate(isEdition ? 'text_6287a9bdac160c00b2e0fbe7' : 'text_62876e85e32e0300e18030e7')}
</Typography>
Expand All @@ -232,7 +232,7 @@ const CreateCoupon = () => {
formikProps.dirty ? warningDialogRef.current?.openDialog() : couponCloseRedirection()
}
/>
</PageHeader>
</PageHeader.Wrapper>
<Content>
<Main>
<div>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/CreateCreditNote.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ const CreateCreditNote = () => {

return (
<div>
<PageHeader>
<PageHeader.Wrapper>
{loading ? (
<div>
<Skeleton variant="text" className="w-30" />
Expand All @@ -297,7 +297,7 @@ const CreateCreditNote = () => {
)
}
/>
</PageHeader>
</PageHeader.Wrapper>
<Content>
<Main>
<div>
Expand Down
Loading
Loading