mali fix for "test" labels on dashboard and permissions for nih-uat f…

…or simulation

src/components/Layout/Navbar/menuItems.ts

@@ -14,7 +14,8 @@ import {
   PLAN_MANAGEMENT,
   REVEAL_MANAGE,
   RESOURCE_PLANNING_PAGE,
-  DATA_PROCESSING_PROGRESS
+  DATA_PROCESSING_PROGRESS,
+  REVEAL_SIMULATION
 } from '../../../constants';
 
 export const MAIN_MENU = [
@@ -41,7 +42,7 @@ export const MAIN_MENU = [
       {
         pageTitle: 'Simulation',
         route: SIMULATION_PAGE,
-        roles: [PLAN_VIEW]
+        roles: [REVEAL_SIMULATION]
       },
       {
         pageTitle: 'Resource Planning',
@@ -100,7 +101,7 @@ export const MAIN_MENU = [
       {
         pageTitle: 'dataProcessingProgress',
         route: DATA_PROCESSING_PROGRESS,
-        roles: ['metadata_import']
+        roles: ['data_processing_progress']
       }
     ]
   }

src/components/Table/EntityTagTable.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { Button, Table } from 'react-bootstrap';
 import { useAppSelector } from '../../store/hooks';
 import { formatDate } from '../../utils';
-import { t } from "i18next";
+import { t } from 'i18next';
 import { TagUpdateRequest } from '../../features/tagging/providers/types';
 
 interface Props {
@@ -14,6 +14,7 @@ interface Props {
   clickHandler?: (identifier: any) => void;
   clickAccessor?: string;
   updateTag: (tag: TagUpdateRequest) => void;
+  showAccessPanelHandler: (showPanel: boolean) => void;
 }
 
 const DATE_FORMATS = [
@@ -27,7 +28,15 @@ const DATE_FORMATS = [
   'LL'
 ];
 
-const EntityTagTable = ({ columns, data, sortHandler, clickHandler, clickAccessor, updateTag }: Props) => {
+const EntityTagTable = ({
+  columns,
+  data,
+  sortHandler,
+  clickHandler,
+  clickAccessor,
+  updateTag,
+  showAccessPanelHandler
+}: Props) => {
   const [sortDirection, setSortDirection] = useState(false);
   const [activeSortField, setActiveSortField] = useState('');
   const isDarkMode = useAppSelector(state => state.darkMode.value);
@@ -92,12 +101,34 @@ const EntityTagTable = ({ columns, data, sortHandler, clickHandler, clickAccesso
                       return <td key={index}>{formatDate(dataEl[el.accessor])}</td>;
                     }
                     if (el.accessor === 'simulationDisplay') {
-                      return <td key={index}><Button onClick={() => {
-                        if (el.accessor) {
-                          dataEl[el.accessor] = !dataEl[el.accessor];
-                          updateTag(dataEl);
-                        }
-                      }}>{dataEl[el.accessor]?.toString()}</Button></td>;
+                      return (
+                        <td key={index}>
+                          <Button
+                            onClick={() => {
+                              if (el.accessor) {
+                                dataEl[el.accessor] = !dataEl[el.accessor];
+                                updateTag(dataEl);
+                              }
+                            }}
+                          >
+                            {dataEl[el.accessor]?.toString()}
+                          </Button>
+                        </td>
+                      );
+                    } else if (el.accessor === 'access') {
+                      return (
+                        <td key={index}>
+                          <Button
+                            onClick={() => {
+                              if (el.accessor) {
+                                showAccessPanelHandler(true);
+                              }
+                            }}
+                          >
+                            {'Tag Access'}
+                          </Button>
+                        </td>
+                      );
                     } else {
                       return <td key={index}>{dataEl[el.accessor]?.toString()}</td>;
                     }

src/constants/roles.ts

@@ -55,4 +55,11 @@ export const ASSIGNMENT_UPDATE = 'assignment_update';
 export const ASSIGNMENT_DELETE = 'assignment_delete';
 
 //ADMIN
-export const REVEAL_MANAGE = 'reveal_manage';
+export const REVEAL_MANAGE = 'reveal_manage';
+
+//ADMIN
+export const REVEAL_SIMULATION = 'reveal_simulation';
+export const REVEAL_SIMULATION_EDIT = 'reveal_simulation_edit';
+
+//METADATA IMPORT
+export const METADATA_FILE_IMPORT = 'metadata_file_import';

src/features/access/TagAccess.tsx

@@ -0,0 +1,15 @@
+import { Tab, Tabs } from 'react-bootstrap';
+
+const TagAccess = () => {
+  return (
+    <Tabs defaultActiveKey={'one'}>
+      <Tab title={'one'} eventKey={'one'}>
+        <p>one</p>
+      </Tab>
+      <Tab title={'two'} eventKey={'two'}>
+        <p>two</p>
+      </Tab>
+    </Tabs>
+  );
+};
+export default TagAccess;

src/features/metaDataImport/components/fileImport/MetaFileImport.tsx

@@ -4,11 +4,12 @@ import { toast } from 'react-toastify';
 import { PageableModel } from '../../../../api/providers';
 import Paginator from '../../../../components/Pagination';
 import DefaultTable from '../../../../components/Table/DefaultTable';
-import { META_IMPORT_TABLE_COLUMNS, PAGINATION_DEFAULT_SIZE } from '../../../../constants';
+import { META_IMPORT_TABLE_COLUMNS, METADATA_FILE_IMPORT, PAGINATION_DEFAULT_SIZE } from '../../../../constants';
 import { getMetadataImportList } from '../../api';
 import DetailsModal from './detailsModal';
 import UploadModal from './uploadModal';
 import { useTranslation } from 'react-i18next';
+import AuthorizedElement from '../../../../components/AuthorizedElement';
 
 const MetaFileImport = () => {
   const [open, setOpen] = useState(false);
@@ -41,7 +42,9 @@ const MetaFileImport = () => {
     <>
       <div className="d-flex justify-content-between my-4">
         <h2>Metadata Imports({metadataList?.totalElements})</h2>
-        <Button onClick={() => setOpen(!open)}>{t('metadataImport.uploadFile')}</Button>
+        <AuthorizedElement roles={[METADATA_FILE_IMPORT]}>
+          <Button onClick={() => setOpen(!open)}>{t('metadataImport.uploadFile')}</Button>
+        </AuthorizedElement>
       </div>
       {metadataList && metadataList.content.length ? (
         <>

src/features/planSimulation/components/Simulation.tsx

@@ -55,6 +55,8 @@ import SimulationMapView from './SimulationMapView/SimulationMapView';
 import SimulationAnalysisPanel from './modals/SimulationAnalysisPanel';
 import { Color } from 'react-color-palette';
 import { hex } from 'color-convert';
+import { REVEAL_SIMULATION_EDIT } from '../../../constants';
+import AuthorizedElement from '../../../components/AuthorizedElement';
 
 interface SubmitValue {
   fieldIdentifier: string;
@@ -1623,13 +1625,15 @@ const Simulation = () => {
               </Button>
               {highestLocations && showResult && (
                 <>
-                  <Button
-                    className="float-end my-3 ms-2"
-                    variant="secondary"
-                    onClick={() => setShowSaveHierarchyPanel(true)}
-                  >
-                    {t('simulationPage.saveHierarchy')}
-                  </Button>
+                  <AuthorizedElement roles={[REVEAL_SIMULATION_EDIT]}>
+                    <Button
+                      className="float-end my-3 ms-2"
+                      variant="secondary"
+                      onClick={() => setShowSaveHierarchyPanel(true)}
+                    >
+                      {t('simulationPage.saveHierarchy')}
+                    </Button>
+                  </AuthorizedElement>
                   <Button
                     className="float-end ms-2 my-3"
                     variant="secondary"

src/features/reporting/components/report/mapView/MapViewDetail.tsx

@@ -130,8 +130,12 @@ const MapViewDetail = React.forwardRef<any, Props>(
 
           let centreData: FeatureCollection<Polygon | MultiPolygon | Point> = {
             features: data.features.map(feature => {
+              let properties = feature.properties;
+
               let val = getPolygonCenter(feature);
-              return val.center;
+              let newFeature = val.center;
+              newFeature.properties = properties;
+              return newFeature;
             }),
             type: 'FeatureCollection',
             bbox: undefined
@@ -189,16 +193,27 @@ const MapViewDetail = React.forwardRef<any, Props>(
             layout: {
               'text-field': [
                 'format',
-                'test',
+                ['get', 'name'],
                 {
                   'text-font': ['literal', ['Open Sans Bold', 'Open Sans Semibold']]
                 }
               ],
-              // 'text-size': ['interpolate', ['linear'], ['zoom'], 10, 7, 18, 20],
-              'text-anchor': 'bottom',
+              'text-size': ['interpolate', ['linear'], ['zoom'], 5, 2, 7, 10, 10, 12, 18, 20],
+              'text-anchor': 'top',
               'text-justify': 'center'
-            }
-            // filter: ['!=', 'geographicLevel', 'structure']
+            },
+            paint: {
+              'text-color': ['case', ['==', ['get', 'mark'], true], 'red', 'black'],
+
+              'text-opacity': [
+                'step',
+                ['zoom'],
+                ['case', ['==', ['get', 'geographicLevel'], 'structure'], 0.1, 1],
+                15,
+                ['case', ['==', ['get', 'geographicLevel'], 'structure'], 1, 1]
+              ]
+            },
+            filter: ['all', ['!=', 'geographicLevel', 'structure'], ['!=', 'geographicLevel', 'operational']]
           });
 
           currentMap.on('mouseover', parentLocationIdentifier + '-label', e => {

src/features/tagging/components/ComplexTagging.tsx

@@ -11,6 +11,8 @@ import MetadataFormulaPanel, {
   TagWithFormulaSymbol
 } from '../../planSimulation/components/MetadataFormula/MetadataFormulaPanel';
 import ComplexTagTable from '../../../components/Table/ComplexTagTable';
+import { REVEAL_SIMULATION_EDIT } from '../../../constants';
+import AuthorizedElement from '../../../components/AuthorizedElement';
 
 export interface ComplexTagResponse {
   id: string;
@@ -80,9 +82,11 @@ const ComplexTagging = () => {
             />
           </Col>
           <Col className="mb-2" md={8}>
-            <Button className="float-end" onClick={() => setShowCreateComplexTagPanel(true)}>
-              {t('buttons.create')}
-            </Button>
+            <AuthorizedElement roles={[REVEAL_SIMULATION_EDIT]}>
+              <Button className="float-end" onClick={() => setShowCreateComplexTagPanel(true)}>
+                {t('buttons.create')}
+              </Button>
+            </AuthorizedElement>
           </Col>
         </Row>
       </h2>

src/features/tagging/components/Tagging.tsx

@@ -1,14 +1,16 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Button, Col, Row } from 'react-bootstrap';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Button, Col, Modal, Row } from 'react-bootstrap';
 import { DebounceInput } from 'react-debounce-input';
 import { toast } from 'react-toastify';
 import { PageableModel } from '../../../api/providers';
 import Paginator from '../../../components/Pagination';
 import EntityTagTable from '../../../components/Table/EntityTagTable';
-import { PAGINATION_DEFAULT_SIZE } from '../../../constants';
+import { PAGINATION_DEFAULT_SIZE, REVEAL_SIMULATION_EDIT } from '../../../constants';
 import { getAllGlobalTags, updateTag } from '../api';
 import { Tag, TagUpdateRequest } from '../providers/types';
 import CreateTag from './createModal';
+import AuthorizedElement from '../../../components/AuthorizedElement';
+import TagAccess from '../../access/TagAccess';
 
 const columnsNotForDisplay = [
   'valueType',
@@ -27,6 +29,7 @@ const Tagging = () => {
   const [currentSortDirection, setCurrentSortDirection] = useState<boolean>();
   const [currentSortField, setCurrentSortField] = useState('');
   const [currentSearchInput, setCurrentSearchInput] = useState('');
+  const [showTagAccess, setShowTagAccess] = useState(false);
 
   const loadData = useCallback((size: number, page: number, filter?: string, field?: string, direction?: boolean) => {
     getAllGlobalTags(size, page, filter, field, direction)
@@ -59,15 +62,30 @@ const Tagging = () => {
     updateTag(tag).then(() => loadData(PAGINATION_DEFAULT_SIZE, 0));
   };
 
+  const getColumns = (tagList: PageableModel<Tag>) => {
+    const columns = Object.keys(tagList.content[0])
+      .filter(el => !columnsNotForDisplay.includes(el))
+      .map(el => {
+        return {
+          name: el,
+          accessor: el,
+          sortValue: el
+        };
+      });
+    return columns;
+  };
+
   return (
     <>
       <h2>
         Tags({tagList?.totalElements})
         <Row className="my-4">
           <Col md={8} className="mb-2">
-            <Button className="float-end" onClick={() => setShowCreate(true)}>
-              Create Tag
-            </Button>
+            <AuthorizedElement roles={[REVEAL_SIMULATION_EDIT]}>
+              <Button className="float-end" onClick={() => setShowCreate(true)}>
+                Create Tag
+              </Button>
+            </AuthorizedElement>
           </Col>
           <Col sm={12} md={4} className="order-md-first">
             <DebounceInput
@@ -86,17 +104,10 @@ const Tagging = () => {
         <>
           <EntityTagTable
             sortHandler={sortHandler}
-            columns={Object.keys(tagList.content[0])
-              .filter(el => !columnsNotForDisplay.includes(el))
-              .map(el => {
-                return {
-                  name: el,
-                  accessor: el,
-                  sortValue: el
-                };
-              })}
+            columns={getColumns(tagList)}
             data={tagList?.content}
             updateTag={updateSimulationDisplay}
+            showAccessPanelHandler={setShowTagAccess}
           />
           <Paginator
             page={tagList.pageable.pageNumber}
@@ -117,6 +128,19 @@ const Tagging = () => {
           }}
         />
       )}
+      {showTagAccess && (
+        <Modal show={showTagAccess} centered size={'lg'} onHide={() => setShowTagAccess(false)}>
+          <Modal.Header closeButton>Tag Access</Modal.Header>
+          <Modal.Body>
+            <TagAccess />
+          </Modal.Body>
+          <Modal.Footer>
+            <Button id="close-button" variant="secondary" onClick={() => setShowTagAccess(false)}>
+              Close
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      )}
     </>
   );
 };

src/pages/PlanSimulationPage/PlanSimulation.tsx

@@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 import AuthGuard from '../../components/AuthGuard';
 import { ErrorPage } from '../../components/pages';
 import PageWrapper from '../../components/PageWrapper';
-import { PLAN_VIEW } from '../../constants';
+import { REVEAL_SIMULATION } from '../../constants';
 import Simulation from '../../features/planSimulation/components/Simulation';
 
 const PlanSimulation = () => {
@@ -15,15 +15,15 @@ const PlanSimulation = () => {
         <Route
           path="/"
           element={
-            <AuthGuard roles={[PLAN_VIEW]}>
+            <AuthGuard roles={[REVEAL_SIMULATION]}>
               <Simulation />
             </AuthGuard>
           }
         />
         <Route
           path="/planId/:planId"
           element={
-            <AuthGuard roles={[PLAN_VIEW]}>
+            <AuthGuard roles={[REVEAL_SIMULATION]}>
               <p>Simulation page</p>
             </AuthGuard>
           }