Skip to content

Commit 9014e54

Browse files
marcbonmarcbon
authored
Merge pull request #679 from AppQuality/custom-status-modals
fetures: added modals for custom status
2 parents a79d45b + d886f9a commit 9014e54

File tree

7 files changed

+229
-17
lines changed

7 files changed

+229
-17
lines changed

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

Lines changed: 3 additions & 0 deletions
Loading

‎src/locales/en/translation.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,17 @@
106106
"__BUGS_PAGE_BUG_DETAIL_TAGS_SHOW_MORE_one": "+ other {{count}}",
107107
"__BUGS_PAGE_BUG_DETAIL_TAGS_SHOW_MORE_other": "+ other {{count}}",
108108
"__BUGS_PAGE_CLOSE_DETAILS_TOOLTIP": "Close",
109+
"__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_HEADER_TITLE": "Are you really going to quit changes?",
110+
"__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_BODY_TEXT": "If you quit now, your changes will be lost and you’ll have to restart.",
111+
"__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_QUIT_BUTTON": "Quit and discard",
112+
"__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_CONTINUE_BUTTON": "Continue editing",
113+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_HEADER_TITLE": "Are you really going to delete these status?",
114+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_TEXT_STATUS_NO_BUGS": "You are about to delete more than one status.Currently {{customStatus}} is not associated with any bugs.",
115+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_TEXT_STATUS_BUGS": "Before confirming and deleting, choose how to handle ({{count}}) bugs in this campaign associated with these status:",
116+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_STATUS_TO_DELETE": "Status to delete",
117+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_STATUS_TO_MIGRATE_TO": "Status to associate bugs with",
118+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_CANCEL_BUTTON": "Cancel",
119+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_CONFIRM_BUTTON": "Confirm",
109120
"__BUGS_PAGE_CUSTOM_STATUS_DRAWER_BODY_DESCRIPTION": "Here you can create and add a new status to those in process or edit it",
110121
"__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CONFIRM_BUTTON": "Save changes",
111122
"__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CREATE_CUSTOM_STATUS_BUTTON": "Create a new status",

‎src/locales/it/translation.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,15 @@
111111
"__BUGS_PAGE_BUG_DETAIL_TAGS_SHOW_MORE_many": "",
112112
"__BUGS_PAGE_BUG_DETAIL_TAGS_SHOW_MORE_other": "+ altri {{count}}",
113113
"__BUGS_PAGE_CLOSE_DETAILS_TOOLTIP": "Chiudi",
114+
"__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_HEADER_TITLE": "Se esci le modifiche fatte non saranno salvate",
115+
"__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_BODY_TEXT": "Stai uscendo dalle modifiche, sicuro di voler uscire?",
116+
"__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_QUIT_BUTTON": "Esci",
117+
"__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_CONTINUE_BUTTON": "Continua le modifiche",
118+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_HEADER_TITLE": "Vuoi davvero eliminare questi stati?",
119+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_TEXT_STATUS_NO_BUGS": "Stai per eliminare più di uno stato.Attualmente {{customStatus}} non è associato a nessun bug.",
120+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_TEXT_STATUS_BUGS": "Prima di continuare e confermare l’eliminazione, scegli come gestire ({{count}}) bug di questa campagna associati a questi stati:",
121+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_CANCEL_BUTTON": "Annulla",
122+
"__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_CONFIRM_BUTTON": "Conferma",
114123
"__BUGS_PAGE_CUSTOM_STATUS_DRAWER_BODY_DESCRIPTION": "",
115124
"__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CONFIRM_BUTTON": "",
116125
"__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CREATE_CUSTOM_STATUS_BUTTON": "",

‎src/pages/Bug/Content.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { GetCampaignsByCidBugsAndBidApiResponse } from 'src/features/api';
2-
import BugMeta from 'src/common/components/BugDetail/Meta';
3-
import BugPriority from 'src/common/components/BugDetail/Priority';
4-
import BugDescription from 'src/common/components/BugDetail/Description';
1+
import { ContainerCard } from '@appquality/unguess-design-system';
2+
import { AnchorButtons } from 'src/common/components/BugDetail/AnchorButtons';
53
import BugAttachments from 'src/common/components/BugDetail/Attachments';
6-
import BugDetails from 'src/common/components/BugDetail/Details';
74
import { BugDuplicates } from 'src/common/components/BugDetail/BugDuplicates';
8-
import { AnchorButtons } from 'src/common/components/BugDetail/AnchorButtons';
95
import BugStateDropdown from 'src/common/components/BugDetail/BugStateDropdown';
10-
import { ContainerCard } from '@appquality/unguess-design-system';
6+
import BugDescription from 'src/common/components/BugDetail/Description';
7+
import BugDetails from 'src/common/components/BugDetail/Details';
8+
import BugMeta from 'src/common/components/BugDetail/Meta';
9+
import BugPriority from 'src/common/components/BugDetail/Priority';
10+
import { GetCampaignsByCidBugsAndBidApiResponse } from 'src/features/api';
1111
import styled from 'styled-components';
12-
import BugHeader from './components/BugHeader';
1312
import { BugPreviewContextProvider } from '../Bugs/Content/context/BugPreviewContext';
13+
import BugHeader from './components/BugHeader';
1414

1515
interface Props {
1616
bug: Exclude<GetCampaignsByCidBugsAndBidApiResponse, undefined>;

‎src/pages/Bug/Modals/ClosingDrawerConfirmationModal/index.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Button, Modal, ModalClose } from '@appquality/unguess-design-system';
2+
import { useState } from 'react';
3+
import { useTranslation } from 'react-i18next';
4+
5+
export const CloseDrawerModal = () => {
6+
const { t } = useTranslation();
7+
const [isModalOpen, setIsModalOpen] = useState(false);
8+
const toggleModal = () => setIsModalOpen(!isModalOpen);
9+
10+
return (
11+
<Modal>
12+
<Modal.Header isDanger>
13+
{t('__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_HEADER_TITLE')}
14+
</Modal.Header>
15+
<Modal.Body>
16+
{t('__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_BODY_TEXT')}
17+
</Modal.Body>
18+
<Modal.Footer>
19+
<Button
20+
style={{ paddingRight: 20 }}
21+
id="custom-status-close-drawer-quit"
22+
isDanger
23+
isLink
24+
>
25+
{t('__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_QUIT_BUTTON')}
26+
</Button>
27+
<Button id="custom-status-close-drawer-continue" isPrimary isAccent>
28+
{t('__BUGS_PAGE_CUSTOM_STATUS_CLOSE_DRAWER_MODAL_CONTINUE_BUTTON')}
29+
</Button>
30+
</Modal.Footer>
31+
<ModalClose onClick={() => setIsModalOpen(false)} />
32+
</Modal>
33+
);
34+
};

‎src/pages/Bug/Modals/MigrationModal/index.tsx‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import {
2+
Button,
3+
Modal,
4+
ModalClose,
5+
Paragraph,
6+
} from '@appquality/unguess-design-system';
7+
import { Label, MediaInput } from '@zendeskgarden/react-forms';
8+
import { useState } from 'react';
9+
import { useTranslation } from 'react-i18next';
10+
import { DropdownItem } from 'src/pages/Dashboard/filters/utils';
11+
import { ReactComponent as ArrowRightIcon } from 'src/assets/icons/arrow-right.svg';
12+
import styled from 'styled-components';
13+
14+
const MigrationItemsList = styled.ul`
15+
padding-top: 12px;
16+
`;
17+
const MigrationItemContainer = styled.div`
18+
display: flex;
19+
align-items: center;
20+
justify-content: space-between;
21+
gap: 20px;
22+
`;
23+
const MigrationItem = styled.div`
24+
padding-bottom: 20px;
25+
`;
26+
const CustomStatusColor = styled.span`
27+
display: inline-block;
28+
width: 16px;
29+
height: 16px;
30+
border-radius: 50%;
31+
background-color: ${({ color }) => color};
32+
`;
33+
34+
const ArrowRight = styled(ArrowRightIcon)`
35+
margin-top: 10px;
36+
`;
37+
const MigrateModalBody = styled(Modal.Body)`
38+
max-height: 340px;
39+
`;
40+
41+
export const MigrationModal = () => {
42+
const { t } = useTranslation();
43+
const [isModalOpen, setIsModalOpen] = useState(false);
44+
const toggleModal = () => setIsModalOpen(!isModalOpen);
45+
const [selectedItem, setSelectedItem] = useState<DropdownItem | undefined>();
46+
47+
return (
48+
<Modal>
49+
<Modal.Header isDanger>
50+
{t('__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_HEADER_TITLE')}
51+
</Modal.Header>
52+
<MigrateModalBody>
53+
<Paragraph>
54+
{t(
55+
'__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_TEXT_STATUS_NO_BUGS'
56+
)}
57+
</Paragraph>
58+
<Paragraph>
59+
{t('__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_TEXT_STATUS_BUGS')}
60+
</Paragraph>
61+
<MigrationItemsList>
62+
<MigrationItemContainer>
63+
<MigrationItem>
64+
<Label>
65+
{t(
66+
'__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_STATUS_TO_DELETE'
67+
)}
68+
</Label>
69+
<MediaInput
70+
disabled
71+
start={<CustomStatusColor color="black" />}
72+
/>
73+
</MigrationItem>
74+
<ArrowRight width={28} />
75+
<MigrationItem>
76+
<Label>
77+
{t(
78+
'__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_STATUS_TO_MIGRATE_TO'
79+
)}
80+
</Label>
81+
<MediaInput
82+
readOnly
83+
start={<CustomStatusColor color="black" />}
84+
/>
85+
</MigrationItem>
86+
</MigrationItemContainer>
87+
<MigrationItemContainer>
88+
<MigrationItem>
89+
<Label>
90+
{t(
91+
'__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_STATUS_TO_DELETE'
92+
)}
93+
</Label>
94+
<MediaInput
95+
disabled
96+
start={<CustomStatusColor color="black" />}
97+
/>
98+
</MigrationItem>
99+
<ArrowRight width={28} />
100+
<MigrationItem>
101+
<Label>
102+
{t(
103+
'__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_STATUS_TO_MIGRATE_TO'
104+
)}
105+
</Label>
106+
<MediaInput
107+
readOnly
108+
start={<CustomStatusColor color="black" />}
109+
/>
110+
</MigrationItem>
111+
</MigrationItemContainer>
112+
<MigrationItemContainer>
113+
<MigrationItem>
114+
<Label>
115+
{t(
116+
'__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_STATUS_TO_DELETE'
117+
)}
118+
</Label>
119+
<MediaInput
120+
disabled
121+
start={<CustomStatusColor color="black" />}
122+
/>
123+
</MigrationItem>
124+
<ArrowRight width={28} />
125+
<MigrationItem>
126+
<Label>
127+
{t(
128+
'__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_BODY_STATUS_TO_MIGRATE_TO'
129+
)}
130+
</Label>
131+
<MediaInput
132+
readOnly
133+
start={<CustomStatusColor color="black" />}
134+
/>
135+
</MigrationItem>
136+
</MigrationItemContainer>
137+
</MigrationItemsList>
138+
</MigrateModalBody>
139+
<Modal.Footer>
140+
<Button
141+
style={{ paddingRight: 20 }}
142+
id="custom-status-migration-modal-cancel"
143+
isPrimary
144+
isLink
145+
>
146+
{t('__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_CANCEL_BUTTON')}
147+
</Button>
148+
<Button id="custom-status-migration-modal-confirm" isPrimary isAccent>
149+
{t('__BUGS_PAGE_CUSTOM_STATUS_MIGRATION_MODAL_CONFIRM_BUTTON')}
150+
</Button>
151+
</Modal.Footer>
152+
<ModalClose onClick={() => setIsModalOpen(false)} />
153+
</Modal>
154+
);
155+
};

‎src/pages/Bug/index.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1+
import { Col, Grid, Row } from '@appquality/unguess-design-system';
12
import { useEffect, useState } from 'react';
23
import { useLocation, useNavigate, useParams } from 'react-router-dom';
3-
import { useGetCampaignsByCidBugsAndBidQuery } from 'src/features/api';
4-
import { Grid, Row, Col } from '@appquality/unguess-design-system';
5-
import { Page } from 'src/features/templates/Page';
6-
import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
4+
import { useAppDispatch, useAppSelector } from 'src/app/hooks';
5+
import { appTheme } from 'src/app/theme';
76
import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
7+
import { useGetCampaignsByCidBugsAndBidQuery } from 'src/features/api';
88
import { useGetCampaignWithWorkspaceQuery } from 'src/features/api/customEndpoints/getCampaignWithWorkspace';
9+
import { setCustomStatusDrawerOpen } from 'src/features/bugsPage/bugsPageSlice';
910
import { setWorkspace } from 'src/features/navigation/navigationSlice';
10-
import { useAppDispatch, useAppSelector } from 'src/app/hooks';
11+
import { Page } from 'src/features/templates/Page';
12+
import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
1113
import useWindowSize from 'src/hooks/useWindowSize';
12-
import { appTheme } from 'src/app/theme';
13-
import { setCustomStatusDrawerOpen } from 'src/features/bugsPage/bugsPageSlice';
14-
import { Header } from './Header';
1514
import { Content } from './Content';
16-
import { LoadingSkeleton } from './LoadingSkeleton';
1715
import { CustomStatusDrawer } from './Drawer';
16+
import { Header } from './Header';
17+
import { LoadingSkeleton } from './LoadingSkeleton';
1818

1919
const Bug = () => {
2020
const { campaignId, bugId } = useParams();

0 commit comments

Comments
 (0)