Un 1998 UI fixes

src/locales/en/translation.json

@@ -1175,9 +1175,13 @@
   "__PLAN_PAGE_WATCHER_LIST_APPROVED_ALERT_TITLE": "Info",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_ADD_MEMBERS_INFO_TOOLTIP": "Only workspace members can be added during the setup phase",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON": "Follow this activity",
+  "__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON_DISABLED_TOOLTIP": "Become a workspace member to be included in updates",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_DESCRIPTION": "Add your team so they stay updated too",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_TITLE": "Add yourself as a workspace member",
+  "__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_DESCRIPTION": "Add your team so they stay updated too",
+  "__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_TITLE": "Only one person is following this activity!",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_DISABLED_TOOLTIP": "At least one person must follow this activity ",
+  "__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_TOOLTIP": "If you remove this person, they will no longer receive email updates about this activity",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_SUGGESTIONS_TITLE": "Add workspace members",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_TITLE": "Stay updated on setup progress",
   "__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

@@ -1209,9 +1209,13 @@
   "__PLAN_PAGE_WATCHER_LIST_APPROVED_ALERT_TITLE": "",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_ADD_MEMBERS_INFO_TOOLTIP": "",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON": "",
+  "__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON_DISABLED_TOOLTIP": "",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_DESCRIPTION": "",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_TITLE": "",
+  "__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_DESCRIPTION": "",
+  "__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_TITLE": "",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_DISABLED_TOOLTIP": "",
+  "__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_TOOLTIP": "",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_SUGGESTIONS_TITLE": "",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_TITLE": "",
   "__PLAN_PAGE_WATCHER_LIST_MODAL_TITLE_DESCRIPTION": "",

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

@@ -6,7 +6,7 @@
   MD,
   SM,
   Tooltip,
   useToast,
 } from '@appquality/unguess-design-system';
 import { t } from 'i18next';
 import { appTheme } from 'src/app/theme';
@@ -125,7 +125,19 @@
                 <div>{iconButton}</div>
               </Tooltip>
             )
-          : !isApproved && iconButton}
+          : !isApproved && (
+              <Tooltip
+                placement="end"
+                type="light"
+                size="medium"
+                content={t(
+                  '__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_TOOLTIP'
+                )}
+              >
+                {/* the following div is necessary to make Tooltip work with disabled IconButton */}
+                <div>{iconButton}</div>
+              </Tooltip>
+            )}
       </div>
     </UserListItem>
   );

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

@@ -16,7 +16,7 @@ const UserItemContainer = styled.div`
   gap: ${({ theme }) => theme.space.xxs};
 `;
 
-const EmptyState = () => {
+const EmptyState = ({ watchers }: { watchers?: number }) => {
   const { t } = useTranslation();
   const appTheme = useTheme();
   return (
@@ -29,10 +29,27 @@ const EmptyState = () => {
       }}
     >
       <Empty />
-      <SM isBold>{t('__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_TITLE')}</SM>
-      <SM style={{ color: appTheme.palette.grey[500] }}>
-        {t('__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_DESCRIPTION')}
-      </SM>
+      {(!watchers || watchers === 0) && (
+        <>
+          <SM isBold>
+            {t('__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_TITLE')}
+          </SM>
+          <SM style={{ color: appTheme.palette.grey[500] }}>
+            {t('__PLAN_PAGE_WATCHER_LIST_MODAL_NO_WATCHERS_DESCRIPTION')}
+          </SM>
+        </>
+      )}
+
+      {watchers && watchers === 1 && (
+        <>
+          <SM isBold>
+            {t('__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_TITLE')}
+          </SM>
+          <SM style={{ color: appTheme.palette.grey[500] }}>
+            {t('__PLAN_PAGE_WATCHER_LIST_MODAL_ONLY_ONE_WATCHER_DESCRIPTION')}
+          </SM>
+        </>
+      )}
     </div>
   );
 };
@@ -75,6 +92,7 @@ const UserList = ({ planId }: { planId: string }) => {
             }}
           />
         ))}
+      {data.items.length === 1 && <EmptyState watchers={data.items.length} />}
     </UserItemContainer>
   );
 };

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

@@ -5,13 +5,15 @@ import {
   Notification,
 } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
 
 import { ReactComponent as EyeIconFill } from 'src/assets/icons/eye-icon-fill.svg';
 import { ReactComponent as EyeIconSlash } from 'src/assets/icons/eye-icon-slash.svg';
 import {
   useGetUsersMeQuery,
   usePostPlansByPidWatchersMutation,
 } from 'src/features/api';
+import { useCanAccessToActiveWorkspace } from 'src/hooks/useCanAccessToActiveWorkspace';
 import { useIsLastOne } from './hooks/useIsLastOne';
 import { useIsWatching } from './hooks/useIsWatching';
 import { useRemoveWatcher } from './hooks/useRemoveWatcher';
@@ -22,15 +24,26 @@ const WatchButton = ({ planId }: { planId: string }) => {
   const { addToast } = useToast();
   const { removeWatcher } = useRemoveWatcher();
   const [addUser] = usePostPlansByPidWatchersMutation();
+  const hasWorkspaceAccess = useCanAccessToActiveWorkspace();
   const { data: currentUser } = useGetUsersMeQuery();
   const { t } = useTranslation();
 
+  const isLastWatcher = isWatching && isLastOne;
+
+  const iconColor = (() => {
+    if (!isWatching) return '#fff';
+    if (isLastOne) return appTheme.palette.grey[400];
+    return undefined;
+  })();
+
+  const EyeIcon = isWatching ? EyeIconSlash : EyeIconFill;
+
   if (!currentUser) return null;
 
   const button = (
     <Button
       isStretched
-      disabled={isLastOne && isWatching}
+      disabled={!!hasWorkspaceAccess !== !!isLastWatcher}
       isPrimary={!isWatching}
       onClick={() => {
         if (isWatching) {
@@ -80,23 +93,29 @@ const WatchButton = ({ planId }: { planId: string }) => {
       }}
     >
       <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-        {isWatching ? <EyeIconSlash /> : <EyeIconFill color="#fff" />}
+        <EyeIcon color={iconColor} />
+
         {isWatching
           ? t('__PLAN_PAGE_WATCHER_LIST_MODAL_UNFOLLOW_BUTTON')
           : t('__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON')}
       </div>
     </Button>
   );
 
-  if (isLastOne && isWatching) {
+  // condition is true only when one value is truthy and the other is falsy, otherwise it's false
+  if (!!hasWorkspaceAccess !== !!isLastWatcher) {
     return (
       <Tooltip
         placement="start"
         type="light"
         size="medium"
-        content={t(
-          '__PLAN_PAGE_WATCHER_LIST_MODAL_UNFOLLOW_BUTTON_DISABLED_TOOLTIP'
-        )}
+        content={
+          isLastWatcher
+            ? t(
+                '__PLAN_PAGE_WATCHER_LIST_MODAL_UNFOLLOW_BUTTON_DISABLED_TOOLTIP'
+              )
+            : t('__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON_DISABLED_TOOLTIP')
+        }
       >
         {/* the following div is necessary to make Tooltip work with disabled Button */}
         <div>{button}</div>

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

@@ -60,6 +60,7 @@ const WatcherList = ({ planId }: { planId: string }) => {
       <Button
         isBasic
         ref={ref}
+        size="small"
         onClick={() => setReferenceElement(ref.current)}
       >
         {isLoading ? (