Skip to content

Commit fd46bb0

Browse files
cannarockscannarocks
authored
Merge pull request #499 from AppQuality/UN-524-page-header
Un 524 page header
2 parents 038218d + 65860f7 commit fd46bb0

File tree

21 files changed

+133
-235
lines changed

21 files changed

+133
-235
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "1.4.0",
44
"private": true,
55
"dependencies": {
6-
"@appquality/unguess-design-system": "2.12.79",
6+
"@appquality/unguess-design-system": "2.12.80",
77
"@headwayapp/react-widget": "^0.0.4",
88
"@reduxjs/toolkit": "^1.8.0",
99
"@rtk-query/codegen-openapi": "^1.0.0-alpha.1",

‎src/assets/icons/dowload-arrow.svg‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/assets/icons/gear.svg‎

Lines changed: 3 additions & 2 deletions
Loading

‎src/common/components/pageHeaderContainer.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/pages/Bug/Header.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ interface Props {
2222
bug: Exclude<GetCampaignsByCidBugsAndBidApiResponse, undefined>;
2323
}
2424

25-
const BreadCrumb = ({
25+
const BreadCrumbs = ({
2626
campaign,
2727
}: {
2828
campaign: GetCampaignsByCidApiResponse;
2929
}) => {
3030
const { t } = useTranslation();
3131
return (
32-
<PageHeader.Breadcrumb>
32+
<PageHeader.Breadcrumbs>
3333
<Link to={useLocalizeRoute(`projects/${campaign.project.id}`)}>
3434
<Anchor id="breadcrumb-parent">{campaign.project.name}</Anchor>
3535
</Link>
@@ -39,9 +39,10 @@ const BreadCrumb = ({
3939
<Link to={useLocalizeRoute(`campaigns/${campaign.id}/bugs`)}>
4040
<Anchor>{t('__PAGE_TITLE_BUGS_COLLECTION')}</Anchor>
4141
</Link>
42-
</PageHeader.Breadcrumb>
42+
</PageHeader.Breadcrumbs>
4343
);
4444
};
45+
4546
export const Header = ({ campaignId, bug }: Props) => {
4647
const {
4748
isLoading: isCampaignLoading,
@@ -58,7 +59,7 @@ export const Header = ({ campaignId, bug }: Props) => {
5859
<LayoutWrapper>
5960
<PageHeader>
6061
<Skeleton height="50px" />
61-
<PageHeader.Main infoTitle={bug.title.full}>
62+
<PageHeader.Main mainTitle={bug.title.full}>
6263
<XXXL isBold>{bug.title.compact}</XXXL>
6364
</PageHeader.Main>
6465
</PageHeader>
@@ -69,11 +70,11 @@ export const Header = ({ campaignId, bug }: Props) => {
6970
return (
7071
<LayoutWrapper>
7172
<PageHeader>
72-
<BreadCrumb campaign={campaign} />
73-
<PageHeader.Main infoTitle={bug.title.full}>
73+
<BreadCrumbs campaign={campaign} />
74+
<PageHeader.Main mainTitle={bug.title.full}>
7475
<XXXL isBold>{bug.title.compact}</XXXL>
7576
</PageHeader.Main>
76-
<PageHeader.Buttons>
77+
<PageHeader.Footer>
7778
<ShareButton bug={bug}>
7879
{(setModalOpen) => (
7980
<Button isPill hasStartIcon onClick={() => setModalOpen(true)}>
@@ -84,7 +85,7 @@ export const Header = ({ campaignId, bug }: Props) => {
8485
</Button>
8586
)}
8687
</ShareButton>
87-
</PageHeader.Buttons>
88+
</PageHeader.Footer>
8889
</PageHeader>
8990
</LayoutWrapper>
9091
);

‎src/pages/Bugs/PageHeader/Tools/DotsMenu.tsx‎

Lines changed: 0 additions & 70 deletions
This file was deleted.

‎src/pages/Bugs/PageHeader/Tools/index.tsx‎

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,45 @@
1-
import { Skeleton } from '@appquality/unguess-design-system';
1+
import { Button, Skeleton } from '@appquality/unguess-design-system';
22
import styled from 'styled-components';
33
import { SeverityTag } from 'src/common/components/tag/SeverityTag';
44
import { CampaignStatus, StatusTag } from 'src/common/components/tag/StatusTag';
55
import { Pipe } from 'src/common/components/Pipe';
6+
import { ReactComponent as ArrowDowloadIcon } from 'src/assets/icons/download-stroke.svg';
7+
import { ReactComponent as GearIcon } from 'src/assets/icons/gear.svg';
8+
import { useTranslation } from 'react-i18next';
9+
import { getLocalizeIntegrationCenterRoute } from 'src/hooks/useLocalizeIntegrationCenterUrl';
10+
import WPAPI from 'src/common/wpapi';
11+
import useWindowSize from 'src/hooks/useWindowSize';
12+
import { theme as globalTheme } from 'src/app/theme';
613
import { UniqueBugsCounter } from './UniqueBugsCounter';
7-
import { DotsMenu } from './DotsMenu';
814
import { useCampaign } from './useCampaign';
915

1016
const SeveritiesWrapper = styled.div`
1117
display: flex;
1218
align-items: center;
1319
justify-content: flex-start;
1420
flex-wrap: wrap;
15-
16-
@media (max-width: ${({ theme }) => theme.breakpoints.lg}) {
17-
> div {
18-
margin-right: ${({ theme }) => theme.space.xxs};
19-
margin-bottom: ${({ theme }) => theme.space.xxs};
20-
}
21-
}
2221
`;
2322

24-
const StyledCounter = styled(UniqueBugsCounter)``;
25-
26-
const StyledStatus = styled(StatusTag)``;
23+
const ToolsWrapper = styled.div`
24+
display: flex;
25+
align-items: center;
26+
justify-content: flex-start;
27+
flex-wrap: wrap;
28+
`;
2729

28-
const StyledMenu = styled(DotsMenu)`
30+
const Container = styled.div`
2931
display: flex;
30-
margin-left: ${({ theme }) => theme.space.md};
32+
align-items: center;
33+
justify-content: space-between;
34+
flex-wrap: wrap;
35+
width: 100%;
3136
`;
3237

33-
const ToolsWrapper = styled.div`
38+
const ButtonsWrapper = styled.div`
3439
display: flex;
3540
align-items: center;
3641
justify-content: flex-start;
3742
flex-wrap: wrap;
38-
margin-left: auto;
39-
40-
@media (max-width: ${({ theme }) => theme.breakpoints.xxl}) {
41-
flex-wrap: nowrap;
42-
order: 0;
43-
}
44-
45-
@media (max-width: ${({ theme }) => theme.breakpoints.xl}) {
46-
order: 1;
47-
width: 100%;
48-
margin-top: ${({ theme }) => theme.space.md};
49-
margin-left: 0;
50-
}
51-
52-
@media (max-width: ${({ theme }) => theme.breakpoints.lg}) {
53-
flex-direction: column;
54-
align-items: flex-start;
55-
56-
${Pipe} {
57-
display: none;
58-
}
59-
60-
${StyledCounter} {
61-
margin-bottom: ${({ theme }) => theme.space.sm};
62-
}
63-
64-
${SeveritiesWrapper} {
65-
margin-bottom: ${({ theme }) => theme.space.xxs};
66-
}
67-
68-
${StyledStatus} {
69-
margin-bottom: ${({ theme }) => theme.space.xs};
70-
}
71-
}
7243
`;
7344

7445
export const Tools = ({
@@ -78,15 +49,20 @@ export const Tools = ({
7849
campaignId: number;
7950
customerTitle: string;
8051
}) => {
52+
const { width } = useWindowSize();
53+
const breakpoint = parseInt(globalTheme.breakpoints.lg, 10);
54+
const hide = width < breakpoint;
55+
const { t } = useTranslation();
56+
const integrationCenterUrl = getLocalizeIntegrationCenterRoute(campaignId);
8157
const { isLoading, status, severities } = useCampaign(campaignId);
8258

8359
if (isLoading || !status || !severities)
8460
return <Skeleton width="200px" height="20px" />;
8561

8662
return (
87-
<>
63+
<Container>
8864
<ToolsWrapper>
89-
<StyledCounter campaignId={campaignId} />
65+
{!hide && <UniqueBugsCounter campaignId={campaignId} />}
9066
<SeveritiesWrapper>
9167
{Object.keys(severities).map((severity) => (
9268
<SeverityTag
@@ -96,11 +72,37 @@ export const Tools = ({
9672
size="large"
9773
/>
9874
))}
75+
{!hide && <Pipe />}
76+
<StatusTag status={status.name as CampaignStatus} />
9977
</SeveritiesWrapper>
100-
<Pipe />
101-
<StyledStatus status={status.name as CampaignStatus} />
10278
</ToolsWrapper>
103-
<StyledMenu campaignId={campaignId} customerTitle={customerTitle} />
104-
</>
79+
<ButtonsWrapper>
80+
<Button
81+
isBasic
82+
onClick={() =>
83+
WPAPI.getReport({
84+
campaignId,
85+
title: customerTitle,
86+
})
87+
}
88+
>
89+
<Button.StartIcon>
90+
<ArrowDowloadIcon />
91+
</Button.StartIcon>
92+
{t('__PAGE_HEADER_BUGS_DOTS_MENU_ITEM_REPORT')}
93+
</Button>
94+
<Button
95+
isBasic
96+
onClick={() => {
97+
window.location.href = integrationCenterUrl;
98+
}}
99+
>
100+
<Button.StartIcon>
101+
<GearIcon />
102+
</Button.StartIcon>
103+
{t('__PAGE_HEADER_BUGS_DOTS_MENU_ITEM_INT_CENTER')}
104+
</Button>
105+
</ButtonsWrapper>
106+
</Container>
105107
);
106108
};

‎src/pages/Bugs/PageHeader/index.tsx‎

Lines changed: 9 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,13 @@
1-
import { Anchor, PageHeader, Span } from '@appquality/unguess-design-system';
1+
import { Anchor, PageHeader } from '@appquality/unguess-design-system';
22
import { Link } from 'react-router-dom';
33
import { HeaderSkeleton } from 'src/pages/Campaign/pageHeader/HeaderSkeleton';
44
import { Tools } from 'src/pages/Bugs/PageHeader/Tools';
55
import { useCampaign } from 'src/pages/Campaign/pageHeader/useCampaign';
66
import { useTranslation } from 'react-i18next';
7-
import styled from 'styled-components';
87
import { getLocalizeoFirstLevelDashboardRoute } from 'src/hooks/useLocalizeDashboardUrl';
98
import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
109
import BugsPageHeaderLoader from './PageHeaderLoader';
1110

12-
const FlexWrapper = styled.div`
13-
display: flex;
14-
justify-content: space-between;
15-
align-items: center;
16-
width: 100%;
17-
flex-wrap: wrap;
18-
`;
19-
20-
const StyledTitle = styled(PageHeader.Title)`
21-
display: flex;
22-
width: auto;
23-
white-space: nowrap;
24-
margin-right: ${({ theme }) => theme.space.md};
25-
font-size: ${({ theme }) => theme.fontSizes.xxxl};
26-
order: 0;
27-
28-
@media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
29-
font-size: ${({ theme }) => theme.fontSizes.xxl};
30-
}
31-
`;
32-
3311
const BugsPageHeader = ({ campaignId }: { campaignId: number }) => {
3412
const { t } = useTranslation();
3513
const { isUserLoading, isLoading, isError, campaign, project } =
@@ -42,24 +20,24 @@ const BugsPageHeader = ({ campaignId }: { campaignId: number }) => {
4220
return isUserLoading || isError ? null : (
4321
<LayoutWrapper isNotBoxed>
4422
<PageHeader>
45-
<PageHeader.Breadcrumb>
23+
<PageHeader.Breadcrumbs>
4624
<Link to={project.route}>
4725
<Anchor id="breadcrumb-parent">{project.name}</Anchor>
4826
</Link>
4927
<Link to={getLocalizeoFirstLevelDashboardRoute(campaignId)}>
5028
<Anchor>{campaign.customer_title}</Anchor>
5129
</Link>
52-
</PageHeader.Breadcrumb>
53-
<PageHeader.Main infoTitle={campaign.customer_title}>
54-
<FlexWrapper>
55-
<StyledTitle>
56-
<Span isBold>{t('__PAGE_TITLE_BUGS_COLLECTION')}</Span>
57-
</StyledTitle>
30+
</PageHeader.Breadcrumbs>
31+
<PageHeader.Main mainTitle={campaign.customer_title}>
32+
<PageHeader.Title>
33+
{t('__PAGE_TITLE_BUGS_COLLECTION')}
34+
</PageHeader.Title>
35+
<PageHeader.Meta>
5836
<Tools
5937
campaignId={campaignId}
6038
customerTitle={campaign.customer_title}
6139
/>
62-
</FlexWrapper>
40+
</PageHeader.Meta>
6341
</PageHeader.Main>
6442
</PageHeader>
6543
</LayoutWrapper>

0 commit comments

Comments
 (0)