fix: add basemaps tab (MAPCO-11747, MAPCO-11807)

src/common/i18n/en.json

@@ -76,6 +76,7 @@
   "action.tab-views.search-results.tooltip": "Search results tab",
   "action.tab-views.create-best.tooltip": "BEST draft creation/edit tab",
   "action.tab-views.export-layer.tooltip": "Export layer tab",
+  "action.tab-views.basemaps.tooltip": "Basemaps tab",
 
   "action.point.tooltip": "Search by POI",
   "action.box.tooltip": "Search by bounding box",
@@ -207,6 +208,7 @@
   "tab-views.catalog.site.slave": "Secondary",
   "tab-views.create-best": "BEST edit",
   "tab-views.export-layer": "Export Layer",
+  "tab-views.basemaps": "Basemaps",
 
   "tab-views.catalog.top-categories.unpublished": "Unpublished",
   "tab-views.catalog.top-categories.bests": "BESTs",

src/common/i18n/he.json

@@ -76,6 +76,7 @@
   "action.tab-views.search-results.tooltip": "טאב תוצאות חיפוש",
   "action.tab-views.create-best.tooltip": "טאב עריכת טיוטת BEST",
   "action.tab-views.export-layer.tooltip": "טאב ייצוא שכבה",
+  "action.tab-views.basemaps.tooltip": "טאב מפות בסיס",
 
   "action.point.tooltip": "חיפוש בקטלוג בעזרת קואורדינטות נקודת ציון",
   "action.box.tooltip": "חיפוש בקטלוג בעזרת מלבן חוסם",
@@ -207,6 +208,7 @@
   "tab-views.catalog.site.slave": "משני",
   "tab-views.create-best": "עריכת טיוטת BEST",
   "tab-views.export-layer": "ייצוא שכבה",
+  "tab-views.basemaps": "מפות בסיס",
 
   "tab-views.catalog.top-categories.unpublished": "לא מפורסמים",
   "tab-views.catalog.top-categories.bests": "BESTs",

src/common/navigation/react-navigation.proxy.ts

@@ -1,3 +1,7 @@
 // Single import point for @react-navigation/*. No other file should import from those packages directly.
-export { NavigationIndependentTree, NavigationContainer } from '@react-navigation/native';
+export {
+  DefaultTheme,
+  NavigationIndependentTree,
+  NavigationContainer,
+} from '@react-navigation/native';
 export { createStackNavigator } from '@react-navigation/stack';

src/discrete-layer/models/RootStore.ts

@@ -14,6 +14,7 @@ import { mapMenusManagerStore } from './mapMenusManagerStore';
 import { exportStore } from './exportStore';
 import { servicesAvailabilityStore } from './servicesAvailabilityStore';
 import { jobsStore } from './jobsStore';
+import { basemapsStore } from './basemapsStore';
 
 type FetchAction = (
   url: string,
@@ -51,6 +52,9 @@ export const baseRootStore = RootStoreBase
     jobsStore: types.optional(jobsStore, {
       state: ResponseState.IDLE,
     }),
+    basemapsStore: types.optional(basemapsStore, {
+      state: ResponseState.IDLE,
+    }),
   })
   .views((self) => ({
     get fetch(): FetchAction {

src/discrete-layer/models/basemapsStore.ts

@@ -0,0 +1,24 @@
+import { types, getParent } from 'mobx-state-tree';
+import { ResponseState } from '../../common/models/response-state.enum';
+import { ModelBase } from './ModelBase';
+import { IRootStore, RootStoreType } from './RootStore';
+
+export const basemapsStore = ModelBase
+  .props({
+    state: types.enumeration<ResponseState>(
+      'State',
+      Object.values(ResponseState)
+    ),
+  })
+  .views((self) => ({
+    get store(): IRootStore {
+      return self.__getStore<RootStoreType>()
+    },
+    get root(): IRootStore {
+      return getParent(self);
+    },
+  }))
+  .actions(() => {
+
+    return {};
+  });

src/discrete-layer/models/discreteLayersStore.ts

@@ -57,7 +57,7 @@ const INITIAL_STATE = {
   highlightedLayer: null,
   selectedLayer: null,
   selectedLayerOperationMode: undefined,
-  tabViews: [{idx: TabViews.CATALOG}, {idx: TabViews.SEARCH_RESULTS}, {idx: TabViews.EXPORT_LAYER}],
+  tabViews: [{idx: TabViews.CATALOG}, {idx: TabViews.SEARCH_RESULTS}, {idx: TabViews.EXPORT_LAYER}, {idx: TabViews.BASEMAPS_MANAGEMENT}],
   entityDescriptors: [],
   entityTooltipFields: new Map(),
   previewedLayers: [],

src/discrete-layer/models/userStore.ts

@@ -19,6 +19,7 @@ export enum UserAction {
   SYSTEM_ACTION_FILTER = 'system_action.filter',
   SYSTEM_ACTION_FREETEXTSEARCH = 'system_action.freeTextSearch',
   SYSTEM_ACTION_SIDEBARCOLLAPSEEXPAND = 'system_action.sidebarCollapseExapnd',
+  SYSTEM_ACTION_BASEMAPS_MANAGEMENT = 'system_action.baseMapsManagement',
 
   ENTITY_ACTION_LAYERRASTERRECORD_CREATE = 'entity_action.LayerRasterRecord.create',
   ENTITY_ACTION_LAYER3DRECORD_CREATE = 'entity_action.Layer3DRecord.create',
@@ -110,6 +111,7 @@ const ROLES: IRole[] = [
       [UserAction.SYSTEM_ACTION_FILTER]: {enabled: false},
       [UserAction.SYSTEM_ACTION_FREETEXTSEARCH]: {enabled: true},
       [UserAction.SYSTEM_ACTION_SIDEBARCOLLAPSEEXPAND]: {enabled: true},
+      [UserAction.SYSTEM_ACTION_BASEMAPS_MANAGEMENT]: {enabled: true},
       [UserAction.ENTITY_ACTION_LAYERRASTERRECORD_CREATE]: {enabled: true},
       [UserAction.ENTITY_ACTION_LAYER3DRECORD_CREATE]: {enabled: true},
       [UserAction.ENTITY_ACTION_LAYERDEMRECORD_CREATE]: {enabled: false},
@@ -167,6 +169,7 @@ const ROLES: IRole[] = [
       [UserAction.SYSTEM_ACTION_FILTER]: {enabled: false},
       [UserAction.SYSTEM_ACTION_FREETEXTSEARCH]: {enabled: true},
       [UserAction.SYSTEM_ACTION_SIDEBARCOLLAPSEEXPAND]: {enabled: true},
+      [UserAction.SYSTEM_ACTION_BASEMAPS_MANAGEMENT]: {enabled: false},
       [UserAction.ENTITY_ACTION_LAYERRASTERRECORD_CREATE]: {enabled: false},
       [UserAction.ENTITY_ACTION_LAYER3DRECORD_CREATE]: {enabled: false},
       [UserAction.ENTITY_ACTION_LAYERDEMRECORD_CREATE]: {enabled: false},

src/discrete-layer/navigation/base-maps-router.component.tsx

@@ -1,42 +1,118 @@
 import React from 'react';
+import { Button, useTheme } from '@map-colonies/react-core';
 import { Box } from '@map-colonies/react-components';
 import {
+  DefaultTheme,
   NavigationIndependentTree,
   NavigationContainer,
   createStackNavigator,
 } from '../../common/navigation/react-navigation.proxy';
 
-// TODO: replace `undefined` params once BaseMapsListScreen / EditBaseMapScreen / AddLayerScreen land.
-type BaseMapsStackParamList = {
-  BaseMapsList: undefined;
-  EditBaseMap: undefined;
-  AddLayer: undefined;
+interface BasemapsPanelProps {
+  navigation: {
+    navigate: (routeName: BasemapsRouteName) => void;
+  };
+}
+
+type PanelParams<T = {}> = BasemapsPanelProps & T;
+
+type BasemapsStackPanel = {
+  BaseMapsList: PanelParams;
+  EditBaseMap: PanelParams;
+  AddLayer: PanelParams;
+};
+
+type BasemapsRouteName = keyof BasemapsStackPanel;
+
+//#region TODO: Should be deleted when real implementation is exist
+interface PlaceholderPanelProps extends BasemapsPanelProps {
+  currentScreen: BasemapsRouteName;
+  label: string;
+}
+const PlaceholderPanel: React.FC<PlaceholderPanelProps> = ({
+  currentScreen,
+  label,
+  navigation,
+}) => {
+  const STACK_SCREENS: Array<{ name: BasemapsRouteName; label: string }> = [
+    { name: 'BaseMapsList', label: 'Base maps list' },
+    { name: 'EditBaseMap', label: 'Edit base map' },
+    { name: 'AddLayer', label: 'Add layer' },
+  ];
+
+  return (
+    <Box
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+        gap: '1rem',
+        padding: '1rem',
+      }}
+    >
+      <Box>{label}</Box>
+      <Box style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem' }}>
+        {STACK_SCREENS.filter(({ name }) => name !== currentScreen).map(
+          ({ name, label: targetLabel }) => (
+            <Button key={name} type="button" onClick={(): void => navigation.navigate(name)}>
+              {targetLabel}
+            </Button>
+          )
+        )}
+      </Box>
+    </Box>
+  );
 };
+//#endregion
+
+const BaseMapsListScreen: React.FC<BasemapsPanelProps> = ({ navigation }) => (
+  <PlaceholderPanel
+    currentScreen="BaseMapsList"
+    label="PLACEHOLDER_BASEMAPS"
+    navigation={navigation}
+  />
+);
 
-const Stack = createStackNavigator<BaseMapsStackParamList>();
+const EditBaseMapScreen: React.FC<BasemapsPanelProps> = ({ navigation }) => (
+  <PlaceholderPanel
+    currentScreen="EditBaseMap"
+    label="PLACEHOLDER_EDIT_BASEMAP"
+    navigation={navigation}
+  />
+);
+
+const AddLayerScreen: React.FC<BasemapsPanelProps> = ({ navigation }) => (
+  <PlaceholderPanel
+    currentScreen="AddLayer"
+    label="PLACEHOLDER_ADD_LAYER"
+    navigation={navigation}
+  />
+);
+
+const Stack = createStackNavigator<BasemapsStackPanel>();
 
 export const BasemapsRouter: React.FC = () => {
+  const theme = useTheme();
+  const navigationTheme = {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      background: theme.custom?.GC_TAB_ACTIVE_BACKGROUND,
+    },
+  };
+
   return (
     <NavigationIndependentTree>
-      <NavigationContainer documentTitle={{ enabled: false }}>
-        <Stack.Navigator initialRouteName="BaseMapsList" screenOptions={{ headerShown: false }}>
-          <Stack.Screen
-            name="BaseMapsList"
-            // component={BaseMapsListScreen}
-            component={() => <Box>PLACEHOLDER_BASEMAPS</Box>}
-          />
-          <Stack.Screen
-            name="EditBaseMap"
-            // component={EditBaseMapScreen}
-            component={() => <Box>PLACEHOLDER_EDIT_BASEMAP</Box>}
-          />
-          <Stack.Screen
-            name="AddLayer"
-            // component={AddLayerScreen}
-            component={() => <Box>PLACEHOLDER_ADD_LAYER</Box>}
-          />
-        </Stack.Navigator>
-      </NavigationContainer>
+      <Box style={{ display: 'flex', flex: 1, width: '100%', height: '100%', minHeight: 0 }}>
+        <NavigationContainer documentTitle={{ enabled: false }} theme={navigationTheme}>
+          <Stack.Navigator initialRouteName="BaseMapsList" screenOptions={{ headerShown: false }}>
+            <Stack.Screen name="BaseMapsList" component={BaseMapsListScreen} />
+            <Stack.Screen name="EditBaseMap" component={EditBaseMapScreen} />
+            <Stack.Screen name="AddLayer" component={AddLayerScreen} />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </Box>
     </NavigationIndependentTree>
   );
 };

src/discrete-layer/views/components/tabs-views-switcher.component.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect } from 'react';
 import { isEmpty } from 'lodash';
 import { observer } from 'mobx-react-lite';
 import { useIntl } from 'react-intl';
 import { Box } from '@map-colonies/react-components';
 import { IconButton, Tooltip, useTheme } from '@map-colonies/react-core';
-import { isRtl } from '../../../common/i18n/helpers';
 import { useStore } from '../../models/RootStore';
-import { TabViews } from '../tab-views';
+import { ITabViewConfig, TabViews } from '../tab-views';
+import { useTabViewsConfig } from '../useTabViewsConfig.hook';
 
 import './tabs-views-switcher.component.css';
 
@@ -15,13 +15,6 @@ interface TabViewsSwitcherComponentProps {
   activeTabView: TabViews;
 }
 
-export interface ITabView {
-  idx: TabViews;
-  title: string;
-  iconClassName: string;
-  dependentValue?: unknown;
-}
-
 export const TabViewsSwitcher: React.FC<TabViewsSwitcherComponentProps> = observer((props) => {
   const store = useStore();
   const intl = useIntl();
@@ -30,46 +23,20 @@ export const TabViewsSwitcher: React.FC<TabViewsSwitcherComponentProps> = observ
 
   const layerToExport = store.exportStore.layerToExport;
 
-  const tabViews: ITabView[] = useMemo(
-    () => [
-      {
-        idx: TabViews.CATALOG,
-        title: 'tab-views.catalog',
-        iconClassName: 'mc-icon-Catalog',
-      },
-      {
-        idx: TabViews.SEARCH_RESULTS,
-        title: 'tab-views.search-results',
-        iconClassName: 'mc-icon-Search-History',
-      },
-      {
-        idx: TabViews.EXPORT_LAYER,
-        title: 'tab-views.export-layer',
-        iconClassName: isRtl(intl.locale) ? 'mc-icon-Export-Left' : 'mc-icon-Export',
-        dependentValue: store.exportStore.layerToExport,
-      },
-    ],
-    [layerToExport]
-  );
-
-  const [availableTabs, setAvailableTabs] = useState<ITabView[]>(tabViews);
+  const tabViews: ITabViewConfig[] = useTabViewsConfig(intl.locale);
 
-  useEffect(() => {
-    const dependentTabs = tabViews.filter((tab) => {
-      if ('dependentValue' in tab) {
-        return !isEmpty(tab.dependentValue);
-      }
-
-      return tab;
-    });
+  const availableTabs = tabViews.filter((tab) => {
+    if ('dependentValue' in tab) {
+      return !isEmpty(tab.dependentValue) || tab.dependentValue === true;
+    }
 
-    setAvailableTabs(dependentTabs);
-  }, [tabViews]);
+    return true;
+  });
 
   useEffect(() => {
     if (layerToExport !== undefined) {
       handleTabViewChange(TabViews.EXPORT_LAYER);
-    } else {
+    } else if (activeTabView === TabViews.EXPORT_LAYER) {
       handleTabViewChange(TabViews.CATALOG);
     }
   }, [layerToExport]);

src/discrete-layer/views/discrete-layer-view.css

@@ -138,6 +138,7 @@ body[dir='rtl'] .headerSystemAreaContainer {
   flex-direction: row;
   align-items: center;
   gap: 8px;
+  white-space: nowrap;
 }
 
 .tabTitle {