diff --git a/front/app/containers/Admin/sideBar/MenuItem.tsx b/front/app/containers/Admin/sideBar/MenuItem.tsx index 5c913f9f39ba..87994564e56f 100644 --- 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 ( - + + + + } + placement="right" + disabled={!isItemDisabled} + theme="dark" > - - - - - - {!!navItem.count && } - - + <> + + + + + + {!!navItem.count && } + + + + ); }; diff --git a/front/app/containers/Admin/sideBar/assets/tooltip.png b/front/app/containers/Admin/sideBar/assets/tooltip.png new file mode 100644 index 000000000000..f14c6a0724cc Binary files /dev/null and b/front/app/containers/Admin/sideBar/assets/tooltip.png differ diff --git a/front/app/containers/Admin/sideBar/messages.ts b/front/app/containers/Admin/sideBar/messages.ts index 135f4d415e50..b1268fa34391 100644 --- 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 index be416ab0a6af..735c493fbb20 100644 --- 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",