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",