Merge pull request #9032 from CitizenLabDotCo/TAN-2734-proposals-tooltip

TAN-2734 Add proposals warning tooltip
CitizenLabDotCo · Oct 3, 2024 · 7da2fcf · 7da2fcf
2 parents 3543305 + 01267f2
commit 7da2fcf
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 16 deletions.
diff --git a/front/app/containers/Admin/sideBar/MenuItem.tsx b/front/app/containers/Admin/sideBar/MenuItem.tsx
@@ -6,9 +6,12 @@ import {
   fontSizes,
   Icon,
   Box,
+  Tooltip,
+  Image,
 } from '@citizenlab/cl2-component-library';
 import styled from 'styled-components';
 
+import useFeatureFlag from 'hooks/useFeatureFlag';
 import useFeatureFlags from 'hooks/useFeatureFlags';
 
 import CountBadge from 'components/UI/CountBadge';
@@ -17,6 +20,7 @@ import { FormattedMessage } from 'utils/cl-intl';
 import Link from 'utils/cl-router/Link';
 import { usePermission } from 'utils/permissions';
 
+import tooltipImage from './assets/tooltip.png';
 import messages from './messages';
 import { NavItem } from './navItems';
 
@@ -52,6 +56,10 @@ const MenuItemLink = styled(Link)`
   &.focus-visible {
     background: rgba(0, 0, 0, 0.7);
   }
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 
   &:not(.active) {
     .cl-icon {
@@ -96,27 +104,58 @@ const MenuItem = ({ navItem }: Props) => {
     item: { type: 'route', path: navItem.link },
   });
 
+  // Temporary proposal warning implementation, will be removed together with the navbar item
+  // after users have had enough time to get used to the feature
+
+  const isProjectProposalsEnabled = useFeatureFlag({
+    name: 'proposals_participation_method',
+  });
+
+  const isItemDisabled =
+    isProjectProposalsEnabled && navItem.name === 'initiatives';
+
   if (!featuresEnabled || !hasPermission) return null;
 
   return (
-    <MenuItemLink
-      to={navItem.link}
-      className={`intercom-admin-menu-item-${navItem.name}`}
+    <Tooltip
+      content={
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          gap="20px"
+        >
+          <Image src={tooltipImage} alt="" w="250px" />
+          <FormattedMessage {...messages.proposalsTooltip} />
+        </Box>
+      }
+      placement="right"
+      disabled={!isItemDisabled}
+      theme="dark"
     >
-      <Box
-        display="flex"
-        flex="0 0 auto"
-        alignItems="center"
-        justifyContent="center"
-        className={navItem.iconName}
+      <MenuItemLink
+        to={navItem.link}
+        className={`intercom-admin-menu-item-${navItem.name} ${
+          isItemDisabled ? 'disabled' : ''
+        }`}
       >
-        <Icon name={navItem.iconName} />
-      </Box>
-      <Text>
-        <FormattedMessage {...messages[navItem.message]} />
-        {!!navItem.count && <CountBadge count={navItem.count} />}
-      </Text>
-    </MenuItemLink>
+        <>
+          <Box
+            display="flex"
+            flex="0 0 auto"
+            alignItems="center"
+            justifyContent="center"
+            className={navItem.iconName}
+          >
+            <Icon name={navItem.iconName} />
+          </Box>
+          <Text>
+            <FormattedMessage {...messages[navItem.message]} />
+            {!!navItem.count && <CountBadge count={navItem.count} />}
+          </Text>
+        </>
+      </MenuItemLink>
+    </Tooltip>
   );
 };
 

diff --git a/front/app/containers/Admin/sideBar/assets/tooltip.png b/front/app/containers/Admin/sideBar/assets/tooltip.png
diff --git a/front/app/containers/Admin/sideBar/messages.ts b/front/app/containers/Admin/sideBar/messages.ts
@@ -125,4 +125,9 @@ export default defineMessages({
     id: 'app.containers.AdminPage.SideBar.projectManager',
     defaultMessage: 'Project manager',
   },
+  proposalsTooltip: {
+    id: 'app.containers.AdminPage.SideBar.proposalsTooltip',
+    defaultMessage:
+      'Proposals are now a participation method. You can also pin individual projects to the navigation bar.',
+  },
 });
diff --git a/front/app/translations/admin/en.json b/front/app/translations/admin/en.json
@@ -2132,6 +2132,7 @@
   "app.containers.AdminPage.SideBar.processing": "Processing",
   "app.containers.AdminPage.SideBar.projectManager": "Project manager",
   "app.containers.AdminPage.SideBar.projects": "Projects",
+  "app.containers.AdminPage.SideBar.proposalsTooltip": "Proposals are now a participation method. You can also pin individual projects to the navigation bar.",
   "app.containers.AdminPage.SideBar.settings": "Settings",
   "app.containers.AdminPage.SideBar.signOut": "Sign out",
   "app.containers.AdminPage.SideBar.support": "Support",