Skip to content

Commit 55834f8

Browse files
cannarockscannarocks
authored
Merge pull request #586 from AppQuality/invitations-final-fixes
Invitations final fixes
2 parents 2a8bd65 + f78b1aa commit 55834f8

File tree

15 files changed

+434
-237
lines changed

15 files changed

+434
-237
lines changed

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

Lines changed: 3 additions & 0 deletions
Loading

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

Lines changed: 3 additions & 0 deletions
Loading

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

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

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

Lines changed: 3 additions & 0 deletions
Loading

‎src/common/components/inviteUsers/addNewMember.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
Message,
44
Button,
55
Label,
6+
Textarea,
67
} from '@appquality/unguess-design-system';
78
import { Field } from '@zendeskgarden/react-forms';
89
import { Form, Formik, FormikHelpers, FormikProps } from 'formik';
@@ -81,11 +82,21 @@ export const AddNewMemberInput = ({
8182
{errors.email && (
8283
<Message
8384
validation="error"
84-
style={{ marginTop: appTheme.space.xs }}
85+
style={{ marginTop: appTheme.space.sm }}
8586
>
8687
{errors.email}
8788
</Message>
8889
)}
90+
<Textarea
91+
style={{
92+
marginTop: appTheme.space.sm,
93+
}}
94+
placeholder={t(
95+
'__WORKSPACE_SETTINGS_ADD_MEMBER_MESSAGE_PLACEHOLDER'
96+
)}
97+
rows={4}
98+
{...getFieldProps('message')}
99+
/>
89100
</Form>
90101
)}
91102
</Formik>

‎src/common/components/inviteUsers/campaignSettings.tsx‎

Lines changed: 149 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ import {
77
useToast,
88
Notification,
99
Button,
10+
getColor,
1011
MD,
1112
} from '@appquality/unguess-design-system';
1213
import { useAppSelector } from 'src/app/hooks';
13-
import { useTranslation } from 'react-i18next';
14+
import { Trans, useTranslation } from 'react-i18next';
1415
import {
1516
useDeleteCampaignsByCidUsersMutation,
1617
useGetCampaignsByCidQuery,
@@ -22,6 +23,9 @@ import {
2223
import { FormikHelpers } from 'formik';
2324
import { ReactComponent as UsersIcon } from 'src/assets/icons/users-share.svg';
2425
import { useState } from 'react';
26+
import { ReactComponent as CampaignsIcon } from 'src/assets/icons/campaign-icon.svg';
27+
import { ReactComponent as ProjectsIcon } from 'src/assets/icons/project-icon.svg';
28+
import { ReactComponent as WorkspacesIcon } from 'src/assets/icons/workspace-icon.svg';
2529
import { AddNewMemberInput } from './addNewMember';
2630
import { UserItem } from './userItem';
2731
import { PermissionSettingsFooter } from './modalFooter';
@@ -30,6 +34,9 @@ import {
3034
FlexContainer,
3135
SettingsDivider,
3236
StyledAccordion,
37+
UsersLabel,
38+
UsersContainer,
39+
StyledAccordionPanel,
3340
} from './styled';
3441

3542
export const CampaignSettings = () => {
@@ -63,6 +70,7 @@ export const CampaignSettings = () => {
6370
isFetching: isFetchingProjectUsers,
6471
data: projectUsers,
6572
refetch: refetchProjectUsers,
73+
error: projectUsersError,
6674
} = useGetProjectsByPidUsersQuery({
6775
pid: campaign?.project.id.toString() || '0',
6876
});
@@ -72,6 +80,7 @@ export const CampaignSettings = () => {
7280
isFetching: isFetchingWorkspaceUsers,
7381
data: workspaceUsers,
7482
refetch: refetchWorkspaceUsers,
83+
error: workspaceUsersError,
7584
} = useGetWorkspacesByWidUsersQuery({
7685
wid: activeWorkspace?.id.toString() || '0',
7786
});
@@ -197,8 +206,21 @@ export const CampaignSettings = () => {
197206
</FixedBody>
198207
<SettingsDivider />
199208
<Modal.Body style={{ paddingTop: 0, paddingBottom: 0 }}>
200-
<Label>
201-
{t('__PERMISSION_SETTINGS_BODY_TITLE')} {usersCount}
209+
<Label style={{ color: appTheme.palette.grey[700] }}>
210+
<Trans i18nKey="__PERMISSION_SETTINGS_BODY_TITLE">
211+
Already shared with{' '}
212+
<Span
213+
isBold
214+
style={{
215+
color: getColor(appTheme.colors.primaryHue, 600),
216+
}}
217+
>
218+
{{
219+
users_count: usersCount,
220+
}}{' '}
221+
people
222+
</Span>
223+
</Trans>
202224
</Label>
203225
<FlexContainer
204226
isLoading={
@@ -212,104 +234,138 @@ export const CampaignSettings = () => {
212234
isFetchingWorkspaceUsers
213235
}
214236
>
215-
<StyledAccordion
216-
level={3}
217-
key="campaign_users_accordion"
218-
isAnimated
219-
isExpandable
220-
{...(campaignCount === 0 && { isDisabled: true })}
221-
>
222-
<StyledAccordion.Section>
223-
<StyledAccordion.Header>
224-
<StyledAccordion.Label style={{ padding: 0 }}>
225-
<MD isBold>
226-
<UsersIcon
227-
style={{
228-
color: appTheme.palette.grey[600],
229-
marginRight: appTheme.space.xs,
230-
}}
231-
/>
232-
{t('__PERMISSION_SETTINGS_CAMPAIGN_USERS')} (
233-
{campaignCount})
234-
</MD>
235-
</StyledAccordion.Label>
236-
</StyledAccordion.Header>
237-
<StyledAccordion.Panel
238-
style={{ padding: 0, paddingTop: appTheme.space.sm }}
239-
>
237+
{campaignCount > 0 && (
238+
<>
239+
<UsersLabel>
240+
<CampaignsIcon
241+
style={{
242+
color: appTheme.palette.grey[600],
243+
marginRight: appTheme.space.xs,
244+
}}
245+
/>
246+
<MD isBold>
247+
{t('__PERMISSION_SETTINGS_CAMPAIGN_USERS')}{' '}
248+
<Span
249+
isBold={false}
250+
style={{ color: appTheme.palette.grey[600] }}
251+
>
252+
({campaignCount})
253+
</Span>
254+
</MD>
255+
</UsersLabel>
256+
<UsersContainer>
240257
{campaignUsers?.items.map((user) => (
241258
<UserItem
242259
key={user.id}
243260
user={user}
244261
onResendInvite={() => onResendInvite(user.email)}
245262
onRemoveUser={() => onRemoveUser(user.id)}
263+
showRemoveConfirm
246264
/>
247265
))}
248-
</StyledAccordion.Panel>
249-
</StyledAccordion.Section>
250-
</StyledAccordion>
251-
<StyledAccordion
252-
level={3}
253-
key="project_users_accordion"
254-
isAnimated
255-
isExpandable
256-
{...(projectCount === 0 && { isDisabled: true })}
257-
>
258-
<StyledAccordion.Section>
259-
<StyledAccordion.Header>
260-
<StyledAccordion.Label style={{ padding: 0 }}>
261-
<MD isBold>
262-
<UsersIcon
263-
style={{
264-
color: appTheme.palette.grey[600],
265-
marginRight: appTheme.space.xs,
266-
}}
267-
/>
268-
{t('__PERMISSION_SETTINGS_PROJECT_USERS')} (
269-
{projectCount})
270-
</MD>
271-
</StyledAccordion.Label>
272-
</StyledAccordion.Header>
273-
<StyledAccordion.Panel
274-
style={{ padding: 0, paddingTop: appTheme.space.sm }}
275-
>
276-
{projectUsers?.items.map((user) => (
277-
<UserItem key={user.id} user={user} />
278-
))}
279-
</StyledAccordion.Panel>
280-
</StyledAccordion.Section>
281-
</StyledAccordion>
282-
<StyledAccordion
283-
level={3}
284-
key="workspace_users_accordion"
285-
isAnimated
286-
isExpandable
287-
{...(workspaceCount === 0 && { isDisabled: true })}
288-
>
289-
<StyledAccordion.Section>
290-
<StyledAccordion.Header>
291-
<StyledAccordion.Label style={{ padding: 0 }}>
292-
<MD isBold>
293-
<UsersIcon
294-
style={{
295-
color: appTheme.palette.grey[600],
296-
marginRight: appTheme.space.xs,
297-
}}
298-
/>
299-
{t('__PERMISSION_SETTINGS_WORKSPACE_USERS')} (
300-
{workspaceCount})
301-
</MD>
302-
</StyledAccordion.Label>
303-
</StyledAccordion.Header>
304-
<StyledAccordion.Panel
305-
style={{ padding: 0, paddingTop: appTheme.space.sm }}
306-
>
307-
{workspaceUsers?.items.map((user) => (
308-
<UserItem key={user.id} user={user} />
309-
))}
310-
</StyledAccordion.Panel>
311-
</StyledAccordion.Section>
312-
</StyledAccordion>
266+
</UsersContainer>
267+
</>
268+
)}
269+
{projectUsersError && (
270+
<UsersLabel>
271+
<ProjectsIcon
272+
style={{
273+
color: appTheme.palette.grey[600],
274+
marginRight: appTheme.space.xs,
275+
}}
276+
/>
277+
<MD isBold>{t('__PERMISSION_SETTINGS_PROJECT_USERS_ALL')}</MD>
278+
</UsersLabel>
279+
)}
280+
{projectCount > 0 && (
281+
<StyledAccordion
282+
level={3}
283+
key="project_users_accordion"
284+
isAnimated
285+
isExpandable
286+
{...(projectCount === 0 && { isDisabled: true })}
287+
>
288+
<StyledAccordion.Section>
289+
<StyledAccordion.Header>
290+
<StyledAccordion.Label style={{ padding: 0 }}>
291+
<UsersLabel>
292+
<ProjectsIcon
293+
style={{
294+
color: appTheme.palette.grey[600],
295+
marginRight: appTheme.space.xs,
296+
}}
297+
/>
298+
<MD isBold>
299+
{t('__PERMISSION_SETTINGS_PROJECT_USERS')}{' '}
300+
<Span
301+
isBold={false}
302+
style={{ color: appTheme.palette.grey[600] }}
303+
>
304+
({projectCount})
305+
</Span>
306+
</MD>
307+
</UsersLabel>
308+
</StyledAccordion.Label>
309+
</StyledAccordion.Header>
310+
<StyledAccordionPanel>
311+
{projectUsers?.items.map((user) => (
312+
<UserItem key={user.id} user={user} />
313+
))}
314+
</StyledAccordionPanel>
315+
</StyledAccordion.Section>
316+
</StyledAccordion>
317+
)}
318+
{workspaceUsersError && (
319+
<UsersLabel>
320+
<WorkspacesIcon
321+
style={{
322+
color: appTheme.palette.grey[600],
323+
marginRight: appTheme.space.xs,
324+
}}
325+
/>
326+
<MD isBold>
327+
{t('__PERMISSION_SETTINGS_WORKSPACE_USERS_ALL')}
328+
</MD>
329+
</UsersLabel>
330+
)}
331+
{workspaceCount > 0 && (
332+
<StyledAccordion
333+
level={3}
334+
key="workspace_users_accordion"
335+
isAnimated
336+
isExpandable
337+
{...(workspaceCount === 0 && { isDisabled: true })}
338+
>
339+
<StyledAccordion.Section>
340+
<StyledAccordion.Header>
341+
<StyledAccordion.Label style={{ padding: 0 }}>
342+
<UsersLabel>
343+
<WorkspacesIcon
344+
style={{
345+
color: appTheme.palette.grey[600],
346+
marginRight: appTheme.space.xs,
347+
}}
348+
/>
349+
<MD isBold>
350+
{t('__PERMISSION_SETTINGS_WORKSPACE_USERS')}{' '}
351+
<Span
352+
isBold={false}
353+
style={{ color: appTheme.palette.grey[600] }}
354+
>
355+
({workspaceCount})
356+
</Span>
357+
</MD>
358+
</UsersLabel>
359+
</StyledAccordion.Label>
360+
</StyledAccordion.Header>
361+
<StyledAccordionPanel>
362+
{workspaceUsers?.items.map((user) => (
363+
<UserItem key={user.id} user={user} />
364+
))}
365+
</StyledAccordionPanel>
366+
</StyledAccordion.Section>
367+
</StyledAccordion>
368+
)}
313369
</FlexContainer>
314370
</Modal.Body>
315371
<PermissionSettingsFooter />

0 commit comments

Comments
 (0)