Skip to content

Commit 24ffb77

Browse files
d-beezeed-beezee
authored
Merge pull request #1460 from AppQuality/UN-1998-ui-fixes
Un 1998 UI fixes
2 parents 8905394 + b0e99a6 commit 24ffb77

File tree

6 files changed

+70
-12
lines changed

6 files changed

+70
-12
lines changed

‎src/locales/en/translation.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1180,9 +1180,13 @@
11801180
"__PLAN_PAGE_WATCHER_LIST_APPROVED_ALERT_TITLE": "Info",
11811181
"__PLAN_PAGE_WATCHER_LIST_MODAL_ADD_MEMBERS_INFO_TOOLTIP": "Only workspace members can be added during the setup phase",
11821182
"__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON": "Follow this activity",
1183+
"__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON_DISABLED_TOOLTIP": "Become a workspace member to be included in updates",
11831184
"__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_DESCRIPTION": "Add your team so they stay updated too",
11841185
"__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_TITLE": "Add yourself as a workspace member",
1186+
"__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_DESCRIPTION": "Add your team so they stay updated too",
1187+
"__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_TITLE": "Only one person is following this activity!",
11851188
"__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_DISABLED_TOOLTIP": "At least one person must follow this activity ",
1189+
"__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_TOOLTIP": "If you remove this person, they will no longer receive email updates about this activity",
11861190
"__PLAN_PAGE_WATCHER_LIST_MODAL_SUGGESTIONS_TITLE": "Add workspace members",
11871191
"__PLAN_PAGE_WATCHER_LIST_MODAL_TITLE": "Stay updated on setup progress",
11881192
"__PLAN_PAGE_WATCHER_LIST_MODAL_TITLE_DESCRIPTION": "Follow this activity and <span>turn on notifications</span> to receive important email updates",

‎src/locales/it/translation.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1214,9 +1214,13 @@
12141214
"__PLAN_PAGE_WATCHER_LIST_APPROVED_ALERT_TITLE": "",
12151215
"__PLAN_PAGE_WATCHER_LIST_MODAL_ADD_MEMBERS_INFO_TOOLTIP": "",
12161216
"__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON": "",
1217+
"__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON_DISABLED_TOOLTIP": "",
12171218
"__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_DESCRIPTION": "",
12181219
"__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_TITLE": "",
1220+
"__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_DESCRIPTION": "",
1221+
"__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_TITLE": "",
12191222
"__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_DISABLED_TOOLTIP": "",
1223+
"__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_TOOLTIP": "",
12201224
"__PLAN_PAGE_WATCHER_LIST_MODAL_SUGGESTIONS_TITLE": "",
12211225
"__PLAN_PAGE_WATCHER_LIST_MODAL_TITLE": "",
12221226
"__PLAN_PAGE_WATCHER_LIST_MODAL_TITLE_DESCRIPTION": "",

‎src/pages/Plan/Controls/WatcherList/UserItem.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,19 @@ const UserItem = ({
125125
<div>{iconButton}</div>
126126
</Tooltip>
127127
)
128-
: !isApproved && iconButton}
128+
: !isApproved && (
129+
<Tooltip
130+
placement="end"
131+
type="light"
132+
size="medium"
133+
content={t(
134+
'__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_TOOLTIP'
135+
)}
136+
>
137+
{/* the following div is necessary to make Tooltip work with disabled IconButton */}
138+
<div>{iconButton}</div>
139+
</Tooltip>
140+
)}
129141
</div>
130142
</UserListItem>
131143
);

‎src/pages/Plan/Controls/WatcherList/UserList.tsx‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const UserItemContainer = styled.div`
1616
gap: ${({ theme }) => theme.space.xxs};
1717
`;
1818

19-
const EmptyState = () => {
19+
const EmptyState = ({ watchers }: { watchers?: number }) => {
2020
const { t } = useTranslation();
2121
const appTheme = useTheme();
2222
return (
@@ -29,10 +29,27 @@ const EmptyState = () => {
2929
}}
3030
>
3131
<Empty />
32-
<SM isBold>{t('__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_TITLE')}</SM>
33-
<SM style={{ color: appTheme.palette.grey[500] }}>
34-
{t('__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_DESCRIPTION')}
35-
</SM>
32+
{(!watchers || watchers === 0) && (
33+
<>
34+
<SM isBold>
35+
{t('__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_TITLE')}
36+
</SM>
37+
<SM style={{ color: appTheme.palette.grey[500] }}>
38+
{t('__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_DESCRIPTION')}
39+
</SM>
40+
</>
41+
)}
42+
43+
{watchers && watchers === 1 && (
44+
<>
45+
<SM isBold>
46+
{t('__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_TITLE')}
47+
</SM>
48+
<SM style={{ color: appTheme.palette.grey[500] }}>
49+
{t('__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_DESCRIPTION')}
50+
</SM>
51+
</>
52+
)}
3653
</div>
3754
);
3855
};
@@ -75,6 +92,7 @@ const UserList = ({ planId }: { planId: string }) => {
7592
}}
7693
/>
7794
))}
95+
{data.items.length === 1 && <EmptyState watchers={data.items.length} />}
7896
</UserItemContainer>
7997
);
8098
};

‎src/pages/Plan/Controls/WatcherList/WatchButton.tsx‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ import {
55
Notification,
66
} from '@appquality/unguess-design-system';
77
import { useTranslation } from 'react-i18next';
8+
import { appTheme } from 'src/app/theme';
89

910
import { ReactComponent as EyeIconFill } from 'src/assets/icons/eye-icon-fill.svg';
1011
import { ReactComponent as EyeIconSlash } from 'src/assets/icons/eye-icon-slash.svg';
1112
import {
1213
useGetUsersMeQuery,
1314
usePostPlansByPidWatchersMutation,
1415
} from 'src/features/api';
16+
import { useCanAccessToActiveWorkspace } from 'src/hooks/useCanAccessToActiveWorkspace';
1517
import { useIsLastOne } from './hooks/useIsLastOne';
1618
import { useIsWatching } from './hooks/useIsWatching';
1719
import { useRemoveWatcher } from './hooks/useRemoveWatcher';
@@ -22,15 +24,26 @@ const WatchButton = ({ planId }: { planId: string }) => {
2224
const { addToast } = useToast();
2325
const { removeWatcher } = useRemoveWatcher();
2426
const [addUser] = usePostPlansByPidWatchersMutation();
27+
const hasWorkspaceAccess = useCanAccessToActiveWorkspace();
2528
const { data: currentUser } = useGetUsersMeQuery();
2629
const { t } = useTranslation();
2730

31+
const isLastWatcher = isWatching && isLastOne;
32+
33+
const iconColor = (() => {
34+
if (!isWatching) return '#fff';
35+
if (isLastOne) return appTheme.palette.grey[400];
36+
return undefined;
37+
})();
38+
39+
const EyeIcon = isWatching ? EyeIconSlash : EyeIconFill;
40+
2841
if (!currentUser) return null;
2942

3043
const button = (
3144
<Button
3245
isStretched
33-
disabled={isLastOne && isWatching}
46+
disabled={!!hasWorkspaceAccess !== !!isLastWatcher}
3447
isPrimary={!isWatching}
3548
onClick={() => {
3649
if (isWatching) {
@@ -80,23 +93,29 @@ const WatchButton = ({ planId }: { planId: string }) => {
8093
}}
8194
>
8295
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
83-
{isWatching ? <EyeIconSlash /> : <EyeIconFill color="#fff" />}
96+
<EyeIcon color={iconColor} />
97+
8498
{isWatching
8599
? t('__PLAN_PAGE_WATCHER_LIST_MODAL_UNFOLLOW_BUTTON')
86100
: t('__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON')}
87101
</div>
88102
</Button>
89103
);
90104

91-
if (isLastOne && isWatching) {
105+
// condition is true only when one value is truthy and the other is falsy, otherwise it's false
106+
if (!!hasWorkspaceAccess !== !!isLastWatcher) {
92107
return (
93108
<Tooltip
94109
placement="start"
95110
type="light"
96111
size="medium"
97-
content={t(
98-
'__PLAN_PAGE_WATCHER_LIST_MODAL_UNFOLLOW_BUTTON_DISABLED_TOOLTIP'
99-
)}
112+
content={
113+
isLastWatcher
114+
? t(
115+
'__PLAN_PAGE_WATCHER_LIST_MODAL_UNFOLLOW_BUTTON_DISABLED_TOOLTIP'
116+
)
117+
: t('__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON_DISABLED_TOOLTIP')
118+
}
100119
>
101120
{/* the following div is necessary to make Tooltip work with disabled Button */}
102121
<div>{button}</div>

‎src/pages/Plan/Controls/WatcherList/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const WatcherList = ({ planId }: { planId: string }) => {
6060
<Button
6161
isBasic
6262
ref={ref}
63+
size="small"
6364
onClick={() => setReferenceElement(ref.current)}
6465
>
6566
{isLoading ? (

0 commit comments

Comments
 (0)