Skip to content

Commit a3b68f7

Browse files
marcbonmarcbon
authored
Merge pull request #512 from AppQuality/UN-688-filters-container
UN-688-filters-container
2 parents f7f8d7a + 7973e59 commit a3b68f7

File tree

12 files changed

+100
-36
lines changed

12 files changed

+100
-36
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.81",
6+
"@appquality/unguess-design-system": "2.12.82",
77
"@headwayapp/react-widget": "^0.0.4",
88
"@reduxjs/toolkit": "^1.8.0",
99
"@rtk-query/codegen-openapi": "^1.0.0-alpha.1",

‎src/features/templates/Page.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ import { GoogleTagManager } from 'src/common/GoogleTagManager';
33
import styled from 'styled-components';
44
import { Logged } from './Logged';
55

6-
const Container = styled.div<{ excludeMarginTop?: boolean }>`
6+
const Container = styled.div<{
7+
excludeMarginTop?: boolean;
8+
excludeMarginBottom?: boolean;
9+
}>`
710
/* Hide scrollbar for Chrome, Safari and Opera */
811
::-webkit-scrollbar {
912
display: none;
@@ -18,10 +21,12 @@ const Container = styled.div<{ excludeMarginTop?: boolean }>`
1821
background-color: ${({ theme }) => theme.palette.grey[100]};
1922
margin: ${({ theme }) => theme.space.xxl} auto;
2023
${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
24+
${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
2125
2226
@media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
2327
margin: ${({ theme }) => theme.space.md} auto;
2428
${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
29+
${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
2530
}
2631
`;
2732

@@ -31,16 +36,22 @@ export const Page = ({
3136
pageHeader,
3237
route,
3338
excludeMarginTop,
39+
excludeMarginBottom,
3440
}: {
3541
children: React.ReactNode;
3642
title?: string;
3743
pageHeader?: React.ReactNode;
3844
route: string;
3945
excludeMarginTop?: boolean;
46+
excludeMarginBottom?: boolean;
4047
}) => (
4148
<GoogleTagManager title={title}>
4249
<Logged route={route} pageHeader={pageHeader}>
43-
<Container id="container" excludeMarginTop={excludeMarginTop}>
50+
<Container
51+
id="container"
52+
excludeMarginTop={excludeMarginTop}
53+
excludeMarginBottom={excludeMarginBottom}
54+
>
4455
{children}
4556
</Container>
4657
</Logged>

‎src/pages/Bugs/Content/BugPreview.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,23 @@ import { AnchorButtons } from 'src/common/components/BugDetail/AnchorButtons';
1414
import BugHeader from './components/BugHeader';
1515
import { BugPreviewContextProvider } from './context/BugPreviewContext';
1616

17+
export const filtersHeight = 56;
18+
1719
const DetailContainer = styled.div`
1820
display: flex;
1921
flex-direction: column;
2022
position: sticky;
2123
top: 0;
2224
width: 100%;
2325
background-color: white;
24-
border: ${({ theme }) => theme.palette.grey[300]} 1px solid;
25-
border-top-left-radius: ${({ theme }) => theme.space.xs};
26-
border-bottom-left-radius: ${({ theme }) => theme.space.xs};
27-
padding: 0;
2826
max-height: calc(
29-
100vh - ${({ theme }) => theme.components.chrome.header.height}
27+
100vh - ${({ theme }) => theme.components.chrome.header.height} -
28+
${filtersHeight}px
3029
);
3130
overflow: hidden;
31+
@media (min-width: ${({ theme }) => theme.breakpoints.xl}) {
32+
top: ${filtersHeight}px;
33+
}
3234
`;
3335

3436
const ScrollingContainer = styled.div`

‎src/pages/Bugs/Content/BugsTable/hooks/useCampaignBugs.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const useCampaignBugs = (campaignId: number) => {
4141
return {
4242
bugs,
4343
bugsError: error,
44-
bugsLoading: isLoading || isFetching,
44+
bugsLoading: isLoading,
45+
bugsFetching: isFetching,
4546
};
4647
};

‎src/pages/Bugs/Content/BugsTable/hooks/useTableData.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { sortByUseCase } from '../utils/sortByUseCase';
66

77
export const useTableData = (campaignId: number) => {
88
// get bugs accepted severities and usecases
9-
const { bugs, bugsError, bugsLoading } = useCampaignBugs(campaignId);
9+
const { bugs, bugsError, bugsLoading, bugsFetching } =
10+
useCampaignBugs(campaignId);
1011
const { severities, severitiesError, severitiesLoading } =
1112
useCampaignSeverities(campaignId);
1213
const { useCases, useCasesError, useCasesLoading } =
@@ -28,8 +29,9 @@ export const useTableData = (campaignId: number) => {
2829
bugsByUseCases: [],
2930
bugsBySeverity: [],
3031
},
31-
isLoading: true,
32-
error: bugsError || severitiesError || useCasesError,
32+
isLoading: bugsLoading,
33+
isFetching: bugsFetching,
34+
isError: bugsError || severitiesError || useCasesError,
3335
};
3436
}
3537

@@ -43,7 +45,8 @@ export const useTableData = (campaignId: number) => {
4345
bugsByUseCases,
4446
bugsBySeverity,
4547
},
46-
isLoading: false,
47-
error: bugsError || severitiesError || useCasesError,
48+
isLoading: bugsLoading,
49+
isFetching: bugsFetching,
50+
isError: bugsError || severitiesError || useCasesError,
4851
};
4952
};

‎src/pages/Bugs/Content/BugsTable/index.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useAppSelector } from 'src/app/hooks';
2+
import styled from 'styled-components';
23
import { AllBugs } from './AllBugs';
34
import { BugsByUsecase } from './BugsByUsecase';
45
import { EmptyState } from './components/EmptyState';
@@ -7,23 +8,36 @@ import { useTableData } from './hooks/useTableData';
78

89
const BugsTable = ({ campaignId }: { campaignId: number }) => {
910
const { groupBy } = useAppSelector((state) => state.bugsPage);
10-
const { data, isLoading, error } = useTableData(campaignId);
11+
const { data, isLoading, isFetching, isError } = useTableData(campaignId);
1112

12-
if (isLoading || error) {
13+
if (isLoading || isError) {
1314
return <LoadingState />;
1415
}
1516

1617
if (!data.allBugs.length) {
1718
return <EmptyState />;
1819
}
1920

21+
const Wrapper = styled.div<{
22+
isFetching?: boolean;
23+
}>`
24+
padding-top: ${(p) => p.theme.space.lg}};
25+
26+
${(p) =>
27+
p.isFetching &&
28+
`
29+
opacity: 0.5;
30+
pointer-events: none;
31+
`}
32+
`;
33+
2034
return (
21-
<div>
35+
<Wrapper isFetching={isFetching}>
2236
{groupBy === 'usecase' && (
2337
<BugsByUsecase bugsByUseCases={data.bugsByUseCases} />
2438
)}
2539
{groupBy === 'ungrouped' && <AllBugs bugs={data.allBugs} />}
26-
</div>
40+
</Wrapper>
2741
);
2842
};
2943

‎src/pages/Bugs/Content/components/BugHeader.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,12 @@ export default ({
5050

5151
return (
5252
<Container>
53-
<Tag isPill={false} isRegular hue="rgba(0,0,0,0)">
53+
<Tag
54+
isPill={false}
55+
isRegular
56+
hue="rgba(0,0,0,0)"
57+
style={{ paddingTop: `${globalTheme.space.base}px` }}
58+
>
5459
{!bug.duplicated_of_id && (
5560
<Tag.Avatar>
5661
<FatherIcon

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import { Col, Grid, Row } from '@appquality/unguess-design-system';
22
import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
33
import { getSelectedBugId } from 'src/features/bugsPage/bugsPageSlice';
44
import styled from 'styled-components';
5+
import { theme as globalTheme } from 'src/app/theme';
56
import { BugsFilters } from '../Filters';
7+
import { FilterRecap } from '../Filters/FilterRecap';
68
import { BugPreview } from './BugPreview';
79
import BugsTable from './BugsTable';
810
import BugsPageContentLoader from './ContentLoader';
@@ -17,22 +19,36 @@ const LayoutWrapperBugs = styled(LayoutWrapper)<{
1719
`}
1820
`;
1921

22+
const LayoutWrapperFilters = styled(LayoutWrapper)`
23+
background: white;
24+
@media (min-width: ${(p) => p.theme.breakpoints.xl}) {
25+
position: sticky;
26+
top: 0;
27+
z-index: 2;
28+
}
29+
`;
30+
2031
const BugsPageContent = ({ campaignId }: { campaignId: number }) => {
2132
const currentBugId = getSelectedBugId();
2233

2334
return (
2435
<>
25-
<LayoutWrapper isNotBoxed>
36+
<LayoutWrapperFilters isNotBoxed>
2637
<BugsFilters />
27-
</LayoutWrapper>
38+
</LayoutWrapperFilters>
2839
<LayoutWrapperBugs isNotBoxed isPreviewOpen={!!currentBugId}>
2940
<Grid gutters="xxl">
3041
<Row>
31-
<Col xs={12} md={currentBugId ? 8 : 12}>
42+
<Col
43+
xs={12}
44+
md={currentBugId ? 8 : 12}
45+
style={{ paddingBottom: globalTheme.space.lg }}
46+
>
47+
<FilterRecap />
3248
<BugsTable campaignId={campaignId} />
3349
</Col>
3450
{currentBugId && (
35-
<Col xs={12} md={4} style={{ paddingRight: 0 }}>
51+
<Col xs={12} md={4} style={{ margin: 0 }}>
3652
<BugPreview bugId={currentBugId} campaignId={campaignId} />
3753
</Col>
3854
)}

‎src/pages/Bugs/Filters/FilterRecap.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useAppDispatch } from 'src/app/hooks';
88
import { useTranslation } from 'react-i18next';
99
import { theme } from 'src/app/theme';
1010
import { getPriorityInfo } from 'src/common/components/utils/getPriorityInfo';
11+
import styled from 'styled-components';
1112

1213
const FilterRecapItem = ({
1314
type,
@@ -136,6 +137,13 @@ const FilterRecapItem = ({
136137
);
137138
};
138139

140+
const Wrapper = styled.div`
141+
display: flex;
142+
flex-wrap: wrap;
143+
row-gap: ${(p) => p.theme.space.sm};
144+
padding-top: ${(p) => p.theme.space.md};
145+
`;
146+
139147
export const FilterRecap = () => {
140148
const { t } = useTranslation();
141149
const filters = getSelectedFilters();
@@ -152,7 +160,7 @@ export const FilterRecap = () => {
152160
filters.replicabilities?.length;
153161

154162
return hasFilters ? (
155-
<>
163+
<Wrapper>
156164
{filters.severities && filters.severities.length
157165
? filters.severities.map((severity) => (
158166
<FilterRecapItem
@@ -231,6 +239,6 @@ export const FilterRecap = () => {
231239
>
232240
{t('__BUGS_FILTER_VIEW_RESET_LABEL')}
233241
</Button>
234-
</>
242+
</Wrapper>
235243
) : null;
236244
};

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { SeverityFilter } from './SeverityFilter';
88
import { ReadFilter } from './ReadFilter';
99
import { UniqueFilter } from './UniqueFilter';
1010
import { SearchFilter } from './SearchFilter';
11-
import { FilterRecap } from './FilterRecap';
1211
import { GroupBy } from './GroupBy';
1312
import { SortBy } from './SortBy';
1413
import { BugsFilterDrawer } from '../Drawer';
@@ -42,7 +41,10 @@ const HideOnMobile = styled.div`
4241
${hideOnMobile}
4342
`;
4443

45-
const FlexWrapper = styled.div<{ orderXl?: number; hideOnMobile?: boolean }>`
44+
export const FlexWrapper = styled.div<{
45+
orderXl?: number;
46+
hideOnMobile?: boolean;
47+
}>`
4648
column-gap: 8px;
4749
display: flex;
4850
flex-wrap: wrap;
@@ -60,13 +62,17 @@ const FlexWrapper = styled.div<{ orderXl?: number; hideOnMobile?: boolean }>`
6062
${(p) => p.hideOnMobile && hideOnMobile}
6163
`;
6264

65+
const Wrapper = styled.div`
66+
padding-top: ${(p) => p.theme.space.sm};
67+
`;
68+
6369
const BugsFilters = () => {
6470
const { t } = useTranslation();
6571
const dispatch = useAppDispatch();
6672

6773
return (
6874
<>
69-
<div>
75+
<Wrapper>
7076
<TableToolsContainer>
7177
<FlexWrapper orderXl={2} hideOnMobile>
7278
<SortBy />
@@ -94,10 +100,7 @@ const BugsFilters = () => {
94100
</Button>
95101
</FlexWrapper>
96102
</TableToolsContainer>
97-
<FlexWrapper>
98-
<FilterRecap />
99-
</FlexWrapper>
100-
</div>
103+
</Wrapper>
101104
<BugsFilterDrawer />
102105
</>
103106
);

0 commit comments

Comments
 (0)