Add map as embeddable to dashboard

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
opensearch-project · Feb 7, 2023 · 245f7a8 · 245f7a8
1 parent 88bfeb9
commit 245f7a8
Show file tree

Hide file tree

Showing 21 changed files with 759 additions and 141 deletions.
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
@@ -12,5 +12,5 @@ export const MAX_FILE_PAYLOAD_SIZE_IN_MB = 25;
 export const MAX_FILE_PAYLOAD_SIZE = fromMBtoBytes(MAX_FILE_PAYLOAD_SIZE_IN_MB);
 export const PLUGIN_ID = 'customImportMap';
 export const PLUGIN_NAME = 'customImportMap';
-export const PLUGIN_NAVIGATION_BAR_TILE = 'Maps';
-export const PLUGIN_NAVIGATION_BAR_ID = 'maps-dashboards';
+export const MAPS_APP_NAVIGATION_BAR_TILE = 'Maps';
+export const MAPS_APP_ID = 'maps-dashboards';
diff --git a/common/index.ts b/common/index.ts
@@ -9,7 +9,7 @@ import {
  MAX_FILE_PAYLOAD_SIZE,
  MAX_FILE_PAYLOAD_SIZE_IN_MB,
  PLUGIN_ID,
- PLUGIN_NAVIGATION_BAR_ID,
+ MAPS_APP_ID,
  PLUGIN_NAME,
 } from './constants/shared';
 
@@ -19,7 +19,7 @@ export {
  MAX_FILE_PAYLOAD_SIZE,
  MAX_FILE_PAYLOAD_SIZE_IN_MB,
  PLUGIN_ID,
- PLUGIN_NAVIGATION_BAR_ID,
+ MAPS_APP_ID,
  PLUGIN_NAME,
 };
 
@@ -44,6 +44,7 @@ export const MAX_LAYER_NAME_LIMIT = 35;
 export const MAX_LONGITUDE = 180;
 export const MIN_LONGITUDE = -180;
 export const NEW_MAP_LAYER_DEFAULT_PREFIX = 'New layer';
+export const MAP_SAVED_OBJECT_TYPE = 'map';
 
 // Starting position [lng, lat] and zoom
 export const MAP_INITIAL_STATE = {

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
@@ -4,6 +4,6 @@
  "opensearchDashboardsVersion": "3.0.0",
  "server": true,
  "ui": true,
- "requiredPlugins": ["regionMap", "opensearchDashboardsReact", "navigation", "savedObjects", "data"],
+ "requiredPlugins": ["regionMap", "opensearchDashboardsReact", "opensearchDashboardsUtils", "navigation", "savedObjects", "data", "embeddable"],
  "optionalPlugins": []
  }
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/components/add_layer_panel/add_layer_panel.tsx b/public/components/add_layer_panel/add_layer_panel.tsx
@@ -41,6 +41,7 @@ interface Props {
  newLayerIndex: number;
  mapConfig: ConfigSchema;
  layerCount: number;
+ inDashboardMode: boolean;
 }
 
 export const AddLayerPanel = ({
@@ -52,6 +53,7 @@ export const AddLayerPanel = ({
  newLayerIndex,
  mapConfig,
  layerCount,
+ inDashboardMode,
 }: Props) => {
  const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
  const [highlightItem, setHighlightItem] = useState<Layer | null>(null);
@@ -109,31 +111,33 @@ export const AddLayerPanel = ({
 
  return (
  <div className="addLayer">
- <EuiFlexItem className="addLayer__button">
- <EuiToolTip
- display="block"
- position="top"
- content={
- <p>
- {isMaxLayerLimitReached()
- ? `You've added the maximum number of layers (${MAX_LAYER_LIMIT}).`
- : 'Add layer'}
- </p>
- }
- >
- <EuiButton
- fullWidth
- size="s"
- fill
- onClick={showModal}
- aria-label="Add layer"
- isDisabled={IsLayerConfigVisible || isMaxLayerLimitReached()}
- data-test-subj="addLayerButton"
+ {inDashboardMode ? null : (
+ <EuiFlexItem className="addLayer__button">
+ <EuiToolTip
+ display="block"
+ position="top"
+ content={
+ <p>
+ {isMaxLayerLimitReached()
+ ? `You've added the maximum number of layers (${MAX_LAYER_LIMIT}).`
+ : 'Add layer'}
+ </p>
+ }
  >
- Add layer
- </EuiButton>
- </EuiToolTip>
- </EuiFlexItem>
+ <EuiButton
+ fullWidth
+ size="s"
+ fill
+ onClick={showModal}
+ aria-label="Add layer"
+ isDisabled={IsLayerConfigVisible || isMaxLayerLimitReached()}
+ data-test-subj="addLayerButton"
+ >
+ Add layer
+ </EuiButton>
+ </EuiToolTip>
+ </EuiFlexItem>
+ )}
  {isAddNewLayerModalVisible && (
  <EuiModal onClose={closeModal}>
  <EuiModalHeader>

diff --git a/public/components/app.tsx b/public/components/app.tsx
@@ -24,15 +24,13 @@ export const MapsDashboardsApp = ({ mapConfig }: Props) => {
  return (
  <Router history={appBasePath}>
  <I18nProvider>
- <div>
- <Switch>
- <Route
- path={[APP_PATH.CREATE_MAP, APP_PATH.EDIT_MAP]}
- render={() => <MapPage mapConfig={mapConfig} />}
- />
- <Route exact path={APP_PATH.LANDING_PAGE_PATH} render={() => <MapsList />} />
- </Switch>
- </div>
+ <Switch>
+ <Route
+ path={[APP_PATH.CREATE_MAP, APP_PATH.EDIT_MAP]}
+ render={() => <MapPage mapConfig={mapConfig} />}
+ />
+ <Route exact path={APP_PATH.LANDING_PAGE_PATH} render={() => <MapsList />} />
+ </Switch>
  </I18nProvider>
  </Router>
  );