Skip to content

Commit e97ff38

Browse files
cannarockscannarocks
authored
Merge pull request #541 from AppQuality/develop
Develop
2 parents 8462423 + b4766cc commit e97ff38

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1770
-524
lines changed

‎src/app/theme.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,47 @@ export const SEVERITY_HUES: Record<Severities, string> = {
1616
medium: CHARTS_COLOR_PALETTE.blueRoyal,
1717
low: CHARTS_COLOR_PALETTE.darkPine,
1818
};
19+
// temporary fix for the bug state colors
20+
export const BUG_STATE_COLORS: Record<
21+
BugState,
22+
{ stroke: string; color: string }
23+
> = {
24+
'to do': {
25+
stroke: baseTheme.palette.grey[400],
26+
color: baseTheme.palette.white,
27+
},
28+
pending: {
29+
stroke: baseTheme.palette.grey[400],
30+
color: baseTheme.palette.grey[400],
31+
},
32+
'to be imported': {
33+
stroke: baseTheme.palette.azure[400],
34+
color: baseTheme.palette.azure[400],
35+
},
36+
open: {
37+
stroke: baseTheme.palette.azure[400],
38+
color: baseTheme.palette.azure[400],
39+
},
40+
'to be retested': {
41+
stroke: baseTheme.palette.yellow[400],
42+
color: baseTheme.palette.yellow[400],
43+
},
44+
solved: {
45+
stroke: baseTheme.palette.green[600],
46+
color: baseTheme.palette.green[600],
47+
},
48+
'not a bug': {
49+
stroke: baseTheme.palette.grey[600],
50+
color: baseTheme.palette.grey[600],
51+
},
52+
};
1953

2054
const theme = {
2155
...baseTheme,
2256
colors: {
2357
...baseTheme.colors,
2458
bySeverity: SEVERITY_COLORS,
59+
byBugState: BUG_STATE_COLORS,
2560
bySeverityHues: SEVERITY_HUES,
2661
darkPine: CHARTS_COLOR_PALETTE.darkPine,
2762
},

‎src/assets/icons/details-icon.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/assets/icons/menu-stroke.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/common/components/BugDetail/BugStateDropdown.tsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import {
2+
Dropdown,
3+
Select,
4+
Item,
5+
Menu,
6+
Skeleton,
7+
Tooltip,
8+
Separator,
9+
} from '@appquality/unguess-design-system';
10+
import { Field } from '@zendeskgarden/react-dropdowns';
11+
import { useEffect, useState } from 'react';
12+
import {
13+
Bug,
14+
useGetCampaignsByCidCustomStatusesQuery,
15+
usePatchCampaignsByCidBugsAndBidMutation,
16+
} from 'src/features/api';
17+
import styled from 'styled-components';
18+
import { theme as globalTheme } from 'src/app/theme';
19+
import { useTranslation } from 'react-i18next';
20+
import { BugStateIcon } from 'src/common/components/BugStateIcon';
21+
import { getCustomStatusInfo } from 'src/common/components/utils/getCustomStatusInfo';
22+
import { Label } from './Label';
23+
24+
const StyledItem = styled(Item)`
25+
display: flex;
26+
align-items: center;
27+
28+
> svg {
29+
margin-right: ${({ theme }) => theme.space.xs};
30+
}
31+
`;
32+
33+
const SelectedItem = styled.div`
34+
display: flex;
35+
align-items: center;
36+
37+
> svg {
38+
margin-right: ${({ theme }) => theme.space.xs};
39+
margin-left: 1px; // fix icon alignment
40+
}
41+
`;
42+
43+
type DropdownItem = {
44+
id: number;
45+
text: string;
46+
slug: string;
47+
icon: React.ReactNode;
48+
};
49+
50+
const BugStateDropdown = ({ bug }: { bug: Bug }) => {
51+
const { t } = useTranslation();
52+
const { custom_status } = bug;
53+
const [selectedItem, setSelectedItem] = useState<DropdownItem | undefined>();
54+
const [options, setOptions] = useState<DropdownItem[]>([]);
55+
const [patchBug] = usePatchCampaignsByCidBugsAndBidMutation();
56+
const {
57+
data: cpBugStates,
58+
isLoading,
59+
isFetching,
60+
isError,
61+
} = useGetCampaignsByCidCustomStatusesQuery({
62+
cid: bug.campaign_id.toString(),
63+
});
64+
65+
const sortStates = (a: DropdownItem, b: DropdownItem) => {
66+
if (a.id < b.id) return -1;
67+
if (a.id > b.id) return 1;
68+
return 0;
69+
};
70+
71+
useEffect(() => {
72+
if (cpBugStates) {
73+
setOptions(
74+
cpBugStates
75+
.map((bugState) => ({
76+
id: bugState.id,
77+
slug: bugState.name,
78+
text: getCustomStatusInfo(bugState.name as BugState, t).text,
79+
icon: (
80+
<BugStateIcon
81+
{...globalTheme.colors.byBugState[bugState.name as BugState]}
82+
/>
83+
),
84+
}))
85+
.sort(sortStates)
86+
);
87+
}
88+
}, [cpBugStates]);
89+
90+
useEffect(() => {
91+
setSelectedItem(
92+
options.find((bugStatus) => bugStatus.id === custom_status.id)
93+
);
94+
}, [custom_status, options]);
95+
96+
if (isError) return null;
97+
98+
return (
99+
<div>
100+
<Label style={{ marginBottom: globalTheme.space.xxs }}>
101+
{t('__BUGS_PAGE_BUG_DETAIL_STATE_LABEL')}
102+
</Label>
103+
{isLoading || isFetching ? (
104+
<Skeleton
105+
height="30px"
106+
style={{ borderRadius: globalTheme.borderRadii.md }}
107+
/>
108+
) : (
109+
<Dropdown
110+
selectedItem={selectedItem}
111+
onSelect={async (item: DropdownItem) => {
112+
await patchBug({
113+
cid: bug.campaign_id.toString(),
114+
bid: bug.id.toString(),
115+
body: {
116+
custom_status_id: item.id,
117+
},
118+
});
119+
setSelectedItem(item);
120+
}}
121+
downshiftProps={{
122+
itemToString: (item: DropdownItem) => item && item.slug,
123+
}}
124+
>
125+
<Field>
126+
{bug.status.id === 4 ? (
127+
<Tooltip
128+
appendToNode={document.body}
129+
type="light"
130+
content={t('__BUGS_PAGE_BUG_DETAIL_NEED_REVIEW_TOOLTIP')}
131+
>
132+
<Select isCompact disabled>
133+
<SelectedItem>
134+
{t('__BUGS_PAGE_BUG_DETAIL_NEED_REVIEW')}
135+
</SelectedItem>
136+
</Select>
137+
</Tooltip>
138+
) : (
139+
<Select isCompact>
140+
<SelectedItem>
141+
{selectedItem?.icon} {selectedItem?.text}
142+
</SelectedItem>
143+
</Select>
144+
)}
145+
</Field>
146+
<Menu>
147+
{options &&
148+
options.map((item) => (
149+
<>
150+
{item.slug === 'solved' && <Separator />}
151+
<StyledItem key={item.slug} value={item}>
152+
{item.icon} {item.text}
153+
</StyledItem>
154+
</>
155+
))}
156+
</Menu>
157+
</Dropdown>
158+
)}
159+
</div>
160+
);
161+
};
162+
163+
export default BugStateDropdown;

‎src/common/components/BugDetail/DetailsItems.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import styled from 'styled-components';
22
import { theme as globalTheme } from 'src/app/theme';
33
import { SeverityTag } from 'src/common/components/tag/SeverityTag';
4+
import BugTags from 'src/common/components/BugDetail/Tags';
45
import { Bug, BugAdditionalField } from 'src/features/api';
56
import { MD, Span } from '@appquality/unguess-design-system';
67
import { Trans, useTranslation } from 'react-i18next';
@@ -23,6 +24,7 @@ const StyledSpan = styled(Span)`
2324

2425
export default ({
2526
bug,
27+
isLightbox,
2628
}: {
2729
bug: Bug & {
2830
reporter: {
@@ -31,6 +33,7 @@ export default ({
3133
};
3234
additional_fields?: BugAdditionalField[];
3335
};
36+
isLightbox?: boolean;
3437
}) => {
3538
const { t } = useTranslation();
3639
const { occurred_date, device, reporter } = bug;
@@ -39,7 +42,12 @@ export default ({
3942

4043
return (
4144
<>
42-
<DetailsItem style={{ marginTop: globalTheme.space.base * 3 }}>
45+
{!isLightbox && (
46+
<DetailsItem>
47+
<BugTags bug={bug} />
48+
</DetailsItem>
49+
)}
50+
<DetailsItem>
4351
<Label isBold style={{ marginBottom: globalTheme.space.xs }}>
4452
{t('__BUGS_PAGE_BUG_DETAIL_DETAILS_BUG_TIME_LABEL')}
4553
</Label>

‎src/common/components/BugDetail/Media/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import { theme as globalTheme } from 'src/app/theme';
99
import ImageCard from '../ImageCard';
1010
import VideoCard from '../VideoCard';
11-
import './style.css';
11+
import 'src/common/components/BugDetail/responsive-grid.css';
1212
import { LightboxContainer } from '../lightbox';
1313

1414
export default ({
@@ -65,12 +65,12 @@ export default ({
6565
)}
6666
</SM>
6767
<Grid>
68-
<Row className="media-container">
68+
<Row className="responsive-container">
6969
{items.map((item, index) => {
7070
// Check if item is an image or a video
7171
if (item.mime_type.type === 'image')
7272
return (
73-
<Col xs={12} sm={6} className="media">
73+
<Col xs={12} sm={6} className="flex-3-sm">
7474
<ImageCard
7575
index={index}
7676
url={item.url}
@@ -80,7 +80,7 @@ export default ({
8080
);
8181
if (item.mime_type.type === 'video')
8282
return (
83-
<Col xs={12} sm={6} className="media">
83+
<Col xs={12} sm={6} className="flex-3-sm">
8484
<VideoCard
8585
index={index}
8686
url={item.url}

‎src/common/components/BugDetail/Media/style.css‎

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

‎src/common/components/BugDetail/Priority.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,6 @@ const StyledItem = styled(Item)`
2828
}
2929
`;
3030

31-
const Container = styled.div`
32-
display: inline-block;
33-
width: 100%;
34-
margin-top: ${({ theme }) => theme.space.md};
35-
`;
36-
3731
const SelectedItem = styled.div`
3832
display: flex;
3933
align-items: center;
@@ -97,7 +91,7 @@ const Priority = ({ bug }: { bug: Bug }) => {
9791
if (isError) return null;
9892

9993
return (
100-
<Container>
94+
<div>
10195
<Label style={{ marginBottom: globalTheme.space.xxs }}>
10296
{t('__BUGS_PAGE_BUG_DETAIL_PRIORITY_LABEL')}
10397
</Label>
@@ -141,7 +135,7 @@ const Priority = ({ bug }: { bug: Bug }) => {
141135
</Menu>
142136
</Dropdown>
143137
)}
144-
</Container>
138+
</div>
145139
);
146140
};
147141

0 commit comments

Comments
 (0)