OSB-11: added new way of rendering main menu component

src/contributions/AdminMainMenuContributions.js

@@ -15,6 +15,7 @@ function getAdminMainMenuContributions() {
     icon: <People />,
     route: '/tasks/groups',
     filter: (rights) => rights.includes(RIGHT_TASK_EXECUTIONER_GROUPS),
+    id: 'admin.taskExecutionerGroups',
   }];
 }
 

src/index.js

@@ -1,7 +1,9 @@
 // Disable due to core architecture
 /* eslint-disable camelcase */
 /* eslint-disable import/prefer-default-export */
-
+import React from 'react';
+import { FormattedMessage } from '@openimis/fe-core';
+import AssignmentIcon from '@material-ui/icons/Assignment';
 import messages_en from './translations/en.json';
 import reducer from './reducer';
 import TasksMainMenu from './menus/TasksMainMenu';
@@ -14,7 +16,7 @@ import TaskPreviewCell from './components/TaskPreviewCell';
 import TaskGroupPicker from './pickers/TaskGroupPicker';
 import TaskSearcher from './components/TaskSearcher';
 import getAdminMainMenuContributions from './contributions/AdminMainMenuContributions';
-import { TASK_ROUTE } from './constants';
+import { TASK_ROUTE, RIGHT_TASKS_MANAGEMENT_SEARCH_ALL } from './constants';
 import { fetchTask, resolveTask } from './actions';
 import TasksAllPage from './pages/TasksAllPage';
 import TaskTypesPicker from './pickers/TaskTypesPicker';
@@ -30,7 +32,7 @@ const ROUTE_GROUP_MANAGEMENT = 'tasks/groups/group';
 const DEFAULT_CONFIG = {
   translations: [{ key: 'en', messages: messages_en }],
   reducers: [{ key: 'tasksManagement', reducer }],
-  'core.MainMenu': [TasksMainMenu],
+  'core.MainMenu': [{ name: 'TasksMainMenu', component: TasksMainMenu }],
   'admin.MainMenu': [...getAdminMainMenuContributions()],
   'core.Router': [
     { path: ROUTE_TASKS_MANAGEMENT, component: TasksManagementPage },
@@ -51,6 +53,23 @@ const DEFAULT_CONFIG = {
     { key: 'tasksManagement.taskDetailsPage', ref: TaskDetailsPage },
     { key: 'tasksManagement.fetchTask', ref: fetchTask },
   ],
+  'Tasks.MainMenu': [
+    {
+      text: <FormattedMessage module="tasksManagement" id="entries.tasksManagementView" />,
+      icon: <AssignmentIcon />,
+      route: '/tasks',
+      id: 'task.tasks',
+      filter: (rights) => rights.includes(RIGHT_TASKS_MANAGEMENT_SEARCH_ALL),
+    },
+    {
+      text: <FormattedMessage module="tasksManagement" id="entries.tasksManagementAllView" />,
+      icon: <AssignmentIcon />,
+      route: '/AllTasks',
+      id: 'task.allTasks',
+      filter: (rights) => rights.includes(RIGHT_TASKS_MANAGEMENT_SEARCH_ALL),
+    },
+  ],
+
 };
 
 export const TasksManagementModule = (cfg) => ({ ...DEFAULT_CONFIG, ...cfg });

src/menus/TasksMainMenu.js

@@ -3,7 +3,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { connect } from 'react-redux';
 import { injectIntl } from 'react-intl';
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import { formatMessage, MainMenuContribution, withModulesManager } from '@openimis/fe-core';
@@ -13,18 +13,20 @@ import {
 } from '../constants';
 
 function TasksMainMenu(props) {
-  const rights = useSelector((store) => store.core?.user?.i_user?.rights ?? []);
+  const { rights } = props;
   const entries = [
     {
       text: formatMessage(props.intl, 'tasksManagement', 'entries.tasksManagementView'),
       icon: <AssignmentIcon />,
       route: '/tasks',
+      id: 'task.tasks',
     },
     {
       text: formatMessage(props.intl, 'tasksManagement', 'entries.tasksManagementAllView'),
       icon: <AssignmentIcon />,
       route: '/AllTasks',
       filter: (rights) => rights.includes(RIGHT_TASKS_MANAGEMENT_SEARCH_ALL),
+      id: 'task.allTasks',
     },
   ];
   entries.push(
@@ -38,8 +40,13 @@ function TasksMainMenu(props) {
       {...props}
       header={formatMessage(props.intl, 'tasksManagement', 'tasksMainMenu')}
       entries={entries}
+      menuId="TasksMainMenu"
     />
   );
 }
 
-export default withModulesManager(injectIntl(TasksMainMenu));
+const mapStateToProps = (state) => ({
+  rights: !!state.core && !!state.core.user && !!state.core.user.i_user ? state.core.user.i_user.rights : [],
+});
+
+export default withModulesManager(injectIntl(connect(mapStateToProps)(TasksMainMenu)));