close
Skip to content

Commit 0bdfc96

Browse files
booc0mtacobooc0mtaco
authored
feat(content-sidebar): add task modal mode for edit/create (#1257)
1 parent a389b9f commit 0bdfc96

7 files changed

Lines changed: 225 additions & 19 deletions

File tree

‎flow-typed/box-ui-elements.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -711,7 +711,9 @@ type TaskLinkCollection = MarkerPaginatedCollection<TaskLink>;
711711
// See https://github.com/facebook/flow/issues/7574
712712
// This is currently *not* enforcing the constant types
713713
// type TaskType = typeof TASK_TYPE_GENERAL | typeof TASK_TYPE_APPROVAL;
714+
// type TaskEditMode = typeof TASK_EDIT_MODE_CREATE | typeof TASK_EDIT_MODE_EDIT;
714715
type TaskType = 'GENERAL' | 'APPROVAL';
716+
type TaskEditMode = 'CREATE' | 'EDIT';
715717

716718
type TaskNew = {|
717719
assigned_to: TaskAssigneeCollection,

‎i18n/en-US.properties‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -412,6 +412,10 @@ be.tasks.addTaskForm.submit = Add Task
412412
be.tasks.createTask.approval.title = Create Approval Task
413413
# title for general task popup
414414
be.tasks.createTask.general.title = Create General Task
415+
# title for when editing an existing approval task
416+
be.tasks.editTask.approval.title = Edit Approval Task
417+
# modal title for when editing an existing general task
418+
be.tasks.editTask.general.title = Edit General Task
415419
# Approve option for an approval task
416420
be.tasks.feed.approveAction = Approve
417421
# Label for an approved task

‎src/constants.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,10 @@ export const TASK_NEW_REJECTED: 'REJECTED' = 'REJECTED';
362362
export const TASK_TYPE_GENERAL: 'GENERAL' = 'GENERAL';
363363
export const TASK_TYPE_APPROVAL: 'APPROVAL' = 'APPROVAL';
364364

365+
/* ----------------- Task Edit modes ---------------- */
366+
export const TASK_EDIT_MODE_CREATE: 'CREATE' = 'CREATE';
367+
export const TASK_EDIT_MODE_EDIT: 'EDIT' = 'EDIT';
368+
365369
/* ------------------ Comment types ----------------- */
366370
export const COMMENT_TYPE_DEFAULT: 'comment' = 'comment';
367371
export const COMMENT_TYPE_TASK: 'task' = 'task';

‎src/elements/common/messages.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -938,6 +938,16 @@ const messages = defineMessages({
938938
defaultMessage: 'Create Approval Task',
939939
description: 'title for approval task popup',
940940
},
941+
tasksEditApprovalTaskFormTitle: {
942+
id: 'be.tasks.editTask.approval.title',
943+
defaultMessage: 'Edit Approval Task',
944+
description: 'title for when editing an existing approval task',
945+
},
946+
tasksEditGeneralTaskFormTitle: {
947+
id: 'be.tasks.editTask.general.title',
948+
defaultMessage: 'Edit General Task',
949+
description: 'modal title for when editing an existing general task',
950+
},
941951
tasksAddTaskFormSelectAssigneesLabel: {
942952
id: 'be.tasks.addTaskForm.selectAssigneesLabel',
943953
defaultMessage: 'Select Assignees',

‎src/elements/content-sidebar/TaskModal.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ import BetaFeedbackBadge from '../../features/beta-feedback';
66
import Modal from '../../components/modal/Modal';
77
import TaskForm from './activity-feed/task-form';
88
import messages from '../common/messages';
9-
import { TASK_TYPE_APPROVAL, TASK_TYPE_GENERAL } from '../../constants';
9+
import { TASK_EDIT_MODE_CREATE, TASK_TYPE_APPROVAL, TASK_TYPE_GENERAL } from '../../constants';
1010
import type { TaskFormProps } from './activity-feed/task-form/TaskForm';
1111

1212
type TaskModalProps = {
13+
editMode?: TaskEditMode,
1314
error: ?ElementsXhrError,
1415
feedbackUrl: string,
1516
handleCreateError: (e: ElementsXhrError) => void,
@@ -20,20 +21,25 @@ type TaskModalProps = {
2021
taskType: TaskType,
2122
};
2223

23-
function getMessageForModalTitle(taskType: TaskType): MessageDescriptor {
24+
function getMessageForModalTitle(taskType: TaskType, mode: TaskEditMode): MessageDescriptor {
2425
switch (taskType) {
2526
case TASK_TYPE_GENERAL:
26-
return messages.tasksCreateGeneralTaskFormTitle;
27+
return mode === TASK_EDIT_MODE_CREATE
28+
? messages.tasksCreateGeneralTaskFormTitle
29+
: messages.tasksEditGeneralTaskFormTitle;
2730
case TASK_TYPE_APPROVAL:
2831
default:
29-
return messages.tasksCreateApprovalTaskFormTitle;
32+
return mode === TASK_EDIT_MODE_CREATE
33+
? messages.tasksCreateApprovalTaskFormTitle
34+
: messages.tasksEditApprovalTaskFormTitle;
3035
}
3136
}
3237

3338
const focusTargetSelector: string = '.task-modal input';
3439

3540
const TaskModal = (props: TaskModalProps) => {
3641
const {
42+
editMode = TASK_EDIT_MODE_CREATE,
3743
error,
3844
handleCreateError,
3945
handleCreateSuccess,
@@ -54,7 +60,7 @@ const TaskModal = (props: TaskModalProps) => {
5460
onRequestClose={handleModalClose}
5561
title={
5662
<React.Fragment>
57-
<FormattedMessage {...getMessageForModalTitle(taskType)} />
63+
<FormattedMessage {...getMessageForModalTitle(taskType, editMode)} />
5864
<BetaFeedbackBadge tooltip formUrl={feedbackUrl} />
5965
</React.Fragment>
6066
}

‎src/elements/content-sidebar/__tests__/TaskModal-test.js‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,35 @@ import { shallow } from 'enzyme';
33
import TaskModal from '../TaskModal';
44

55
describe('elements/content-sidebar/TaskModal', () => {
6+
const getWrapper = props => {
7+
return shallow(
8+
<TaskModal
9+
feedbackUrl="http://example.dentist/"
10+
handleCreateError={jest.fn()}
11+
handleCreateSuccess={jest.fn()}
12+
handleModalClose={jest.fn()}
13+
isTaskFormOpen
14+
taskFormProps={{
15+
approverSelectorContacts: null,
16+
createTask: jest.fn(),
17+
getAvatarUrl: jest.fn(),
18+
}}
19+
{...props}
20+
/>,
21+
);
22+
};
623
describe('render', () => {
724
test('should render a default component with default props', () => {
8-
const wrapper = shallow(
9-
<TaskModal
10-
feedbackUrl="http://example.dentist/"
11-
handleCreateError={jest.fn()}
12-
handleCreateSuccess={jest.fn()}
13-
handleModalClose={jest.fn()}
14-
isTaskFormOpen
15-
taskFormProps={{
16-
approverSelectorContacts: null,
17-
createTask: jest.fn(),
18-
getAvatarUrl: jest.fn(),
19-
}}
20-
/>,
21-
);
25+
const wrapper = getWrapper();
2226
expect(wrapper).toMatchSnapshot();
2327
});
28+
29+
test.each([['GENERAL', 'CREATE'], ['GENERAL', 'EDIT'], ['APPROVAL', 'CREATE'], ['APPROVAL', 'EDIT']])(
30+
'using type %s and mode %s yields the proper modal title',
31+
(taskType, editMode) => {
32+
const wrapper = getWrapper({ taskType, editMode });
33+
expect(wrapper).toMatchSnapshot();
34+
},
35+
);
2436
});
2537
});

‎src/elements/content-sidebar/__tests__/__snapshots__/TaskModal-test.js.snap‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,171 @@ exports[`elements/content-sidebar/TaskModal render should render a default compo
4040
</div>
4141
</Modal>
4242
`;
43+
44+
exports[`elements/content-sidebar/TaskModal render using type APPROVAL and mode CREATE yields the proper modal title 1`] = `
45+
<Modal
46+
className="be-modal task-modal"
47+
data-testid="create-task-modal"
48+
focusElementSelector=".task-modal input"
49+
isOpen={true}
50+
onRequestClose={[MockFunction]}
51+
style={
52+
Object {
53+
"backdrop": Object {},
54+
"dialog": Object {},
55+
}
56+
}
57+
title={
58+
<React.Fragment>
59+
<FormattedMessage
60+
defaultMessage="Create Approval Task"
61+
id="be.tasks.createTask.approval.title"
62+
/>
63+
<BetaFeedbackBadge
64+
formUrl="http://example.dentist/"
65+
tooltip={true}
66+
/>
67+
</React.Fragment>
68+
}
69+
>
70+
<div
71+
className="be"
72+
>
73+
<TaskForm
74+
approverSelectorContacts={null}
75+
createTask={[MockFunction]}
76+
getAvatarUrl={[MockFunction]}
77+
onCancel={[MockFunction]}
78+
onCreateError={[MockFunction]}
79+
onCreateSuccess={[MockFunction]}
80+
taskType="APPROVAL"
81+
/>
82+
</div>
83+
</Modal>
84+
`;
85+
86+
exports[`elements/content-sidebar/TaskModal render using type APPROVAL and mode EDIT yields the proper modal title 1`] = `
87+
<Modal
88+
className="be-modal task-modal"
89+
data-testid="create-task-modal"
90+
focusElementSelector=".task-modal input"
91+
isOpen={true}
92+
onRequestClose={[MockFunction]}
93+
style={
94+
Object {
95+
"backdrop": Object {},
96+
"dialog": Object {},
97+
}
98+
}
99+
title={
100+
<React.Fragment>
101+
<FormattedMessage
102+
defaultMessage="Edit Approval Task"
103+
id="be.tasks.editTask.approval.title"
104+
/>
105+
<BetaFeedbackBadge
106+
formUrl="http://example.dentist/"
107+
tooltip={true}
108+
/>
109+
</React.Fragment>
110+
}
111+
>
112+
<div
113+
className="be"
114+
>
115+
<TaskForm
116+
approverSelectorContacts={null}
117+
createTask={[MockFunction]}
118+
getAvatarUrl={[MockFunction]}
119+
onCancel={[MockFunction]}
120+
onCreateError={[MockFunction]}
121+
onCreateSuccess={[MockFunction]}
122+
taskType="APPROVAL"
123+
/>
124+
</div>
125+
</Modal>
126+
`;
127+
128+
exports[`elements/content-sidebar/TaskModal render using type GENERAL and mode CREATE yields the proper modal title 1`] = `
129+
<Modal
130+
className="be-modal task-modal"
131+
data-testid="create-task-modal"
132+
focusElementSelector=".task-modal input"
133+
isOpen={true}
134+
onRequestClose={[MockFunction]}
135+
style={
136+
Object {
137+
"backdrop": Object {},
138+
"dialog": Object {},
139+
}
140+
}
141+
title={
142+
<React.Fragment>
143+
<FormattedMessage
144+
defaultMessage="Create General Task"
145+
id="be.tasks.createTask.general.title"
146+
/>
147+
<BetaFeedbackBadge
148+
formUrl="http://example.dentist/"
149+
tooltip={true}
150+
/>
151+
</React.Fragment>
152+
}
153+
>
154+
<div
155+
className="be"
156+
>
157+
<TaskForm
158+
approverSelectorContacts={null}
159+
createTask={[MockFunction]}
160+
getAvatarUrl={[MockFunction]}
161+
onCancel={[MockFunction]}
162+
onCreateError={[MockFunction]}
163+
onCreateSuccess={[MockFunction]}
164+
taskType="GENERAL"
165+
/>
166+
</div>
167+
</Modal>
168+
`;
169+
170+
exports[`elements/content-sidebar/TaskModal render using type GENERAL and mode EDIT yields the proper modal title 1`] = `
171+
<Modal
172+
className="be-modal task-modal"
173+
data-testid="create-task-modal"
174+
focusElementSelector=".task-modal input"
175+
isOpen={true}
176+
onRequestClose={[MockFunction]}
177+
style={
178+
Object {
179+
"backdrop": Object {},
180+
"dialog": Object {},
181+
}
182+
}
183+
title={
184+
<React.Fragment>
185+
<FormattedMessage
186+
defaultMessage="Edit General Task"
187+
id="be.tasks.editTask.general.title"
188+
/>
189+
<BetaFeedbackBadge
190+
formUrl="http://example.dentist/"
191+
tooltip={true}
192+
/>
193+
</React.Fragment>
194+
}
195+
>
196+
<div
197+
className="be"
198+
>
199+
<TaskForm
200+
approverSelectorContacts={null}
201+
createTask={[MockFunction]}
202+
getAvatarUrl={[MockFunction]}
203+
onCancel={[MockFunction]}
204+
onCreateError={[MockFunction]}
205+
onCreateSuccess={[MockFunction]}
206+
taskType="GENERAL"
207+
/>
208+
</div>
209+
</Modal>
210+
`;

0 commit comments

Comments
 (0)