Feature/menu change (opensearch-project#37)

* feat: register library menus Signed-off-by: SuZhoue-Joe <suzhou@amazon.com> * feat: some update Signed-off-by: SuZhoue-Joe <suzhou@amazon.com> * feat: optimize code Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: optimize code Signed-off-by: SuZhou-Joe <suzhou@amazon.com> --------- Signed-off-by: SuZhoue-Joe <suzhou@amazon.com> Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
Hailong-am · Sep 15, 2023 · 9c3871d · 9c3871d
1 parent f2d7607
commit 9c3871d
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 32 deletions.
diff --git a/src/core/utils/default_app_categories.ts b/src/core/utils/default_app_categories.ts
@@ -34,11 +34,10 @@ import { AppCategory } from '../types';
 /** @internal */
 export const DEFAULT_APP_CATEGORIES: Record<string, AppCategory> = Object.freeze({
   opensearchDashboards: {
-    id: 'opensearchDashboards',
-    label: i18n.translate('core.ui.opensearchDashboardsNavList.label', {
-      defaultMessage: 'OpenSearch Dashboards',
+    id: 'library',
+    label: i18n.translate('core.ui.libraryNavList.label', {
+      defaultMessage: 'Library',
     }),
-    euiIconType: 'inputOutput',
     order: 1000,
   },
   enterpriseSearch: {

diff --git a/src/plugins/saved_objects_management/public/constants.ts b/src/plugins/saved_objects_management/public/constants.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+
+export const LIBRARY_OVERVIEW_WORDINGS = i18n.translate('savedObjectsManagement.libraryOverview', {
+  defaultMessage: 'Overview',
+});
+
+export const SAVED_OBJECT_MANAGEMENT_TITLE_WORDINGS = i18n.translate(
+  'savedObjectsManagement.objectsTable.header.savedObjectsTitle',
+  {
+    defaultMessage: 'Saved Objects',
+  }
+);
+
+export const SAVED_SEARCHES_WORDINGS = i18n.translate(
+  'savedObjectsManagement.SearchesManagementSectionLabel',
+  {
+    defaultMessage: 'Saved searches',
+  }
+);
+
+export const SAVED_QUERIES_WORDINGS = i18n.translate(
+  'savedObjectsManagement.QueriesManagementSectionLabel',
+  {
+    defaultMessage: 'Saved filters',
+  }
+);
diff --git a/src/plugins/saved_objects_management/public/management_section/mount_section.tsx b/src/plugins/saved_objects_management/public/management_section/mount_section.tsx
@@ -32,37 +32,42 @@ import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Switch, Route } from 'react-router-dom';
 import { I18nProvider } from '@osd/i18n/react';
-import { i18n } from '@osd/i18n';
 import { EuiLoadingSpinner } from '@elastic/eui';
-import { CoreSetup } from 'src/core/public';
-import { ManagementAppMountParams } from '../../../management/public';
+import { AppMountParameters, CoreSetup } from 'src/core/public';
+import { ManagementAppMountParams } from 'src/plugins/management/public';
 import { StartDependencies, SavedObjectsManagementPluginStart } from '../plugin';
 import { ISavedObjectsManagementServiceRegistry } from '../services';
 import { getAllowedTypes } from './../lib';
 
 interface MountParams {
   core: CoreSetup<StartDependencies, SavedObjectsManagementPluginStart>;
   serviceRegistry: ISavedObjectsManagementServiceRegistry;
-  mountParams: ManagementAppMountParams;
+  mountParams?: ManagementAppMountParams;
+  appMountParams?: AppMountParameters;
+  title: string;
+  allowedObjectTypes?: string[];
+  fullWidth?: boolean;
 }
 
-let allowedObjectTypes: string[] | undefined;
-
-const title = i18n.translate('savedObjectsManagement.objects.savedObjectsTitle', {
-  defaultMessage: 'Saved Objects',
-});
-
 const SavedObjectsEditionPage = lazy(() => import('./saved_objects_edition_page'));
 const SavedObjectsTablePage = lazy(() => import('./saved_objects_table_page'));
 export const mountManagementSection = async ({
   core,
   mountParams,
+  appMountParams,
   serviceRegistry,
+  title,
+  allowedObjectTypes,
+  fullWidth = true,
 }: MountParams) => {
   const [coreStart, { data, uiActions }, pluginStart] = await core.getStartServices();
-  const { element, history, setBreadcrumbs } = mountParams;
-  if (allowedObjectTypes === undefined) {
-    allowedObjectTypes = await getAllowedTypes(coreStart.http);
+  const usedMountParams = mountParams || appMountParams || ({} as ManagementAppMountParams);
+  const { element, history } = usedMountParams;
+  const { chrome } = coreStart;
+  const setBreadcrumbs = mountParams?.setBreadcrumbs || chrome.setBreadcrumbs;
+  let finalAllowedObjectTypes = allowedObjectTypes;
+  if (finalAllowedObjectTypes === undefined) {
+    finalAllowedObjectTypes = await getAllowedTypes(coreStart.http);
   }
 
   coreStart.chrome.docTitle.change(title);
@@ -106,8 +111,10 @@ export const mountManagementSection = async ({
                   actionRegistry={pluginStart.actions}
                   columnRegistry={pluginStart.columns}
                   namespaceRegistry={pluginStart.namespaces}
-                  allowedTypes={allowedObjectTypes}
+                  allowedTypes={finalAllowedObjectTypes}
                   setBreadcrumbs={setBreadcrumbs}
+                  title={title}
+                  fullWidth={fullWidth}
                 />
               </Suspense>
             </RedirectToHomeIfUnauthorized>

diff --git a/...ns/saved_objects_management/public/management_section/objects_table/components/header.tsx b/...ns/saved_objects_management/public/management_section/objects_table/components/header.tsx
@@ -45,22 +45,19 @@ export const Header = ({
   onImport,
   onRefresh,
   filteredCount,
+  title,
 }: {
   onExportAll: () => void;
   onImport: () => void;
   onRefresh: () => void;
   filteredCount: number;
+  title: string;
 }) => (
   <Fragment>
     <EuiFlexGroup justifyContent="spaceBetween" alignItems="baseline">
       <EuiFlexItem grow={false}>
         <EuiTitle>
-          <h1>
-            <FormattedMessage
-              id="savedObjectsManagement.objectsTable.header.savedObjectsTitle"
-              defaultMessage="Saved Objects"
-            />
-          </h1>
+          <h1>{title}</h1>
         </EuiTitle>
       </EuiFlexItem>
 

diff --git a/.../saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx b/.../saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
@@ -114,6 +114,8 @@ export interface SavedObjectsTableProps {
   goInspectObject: (obj: SavedObjectWithMetadata) => void;
   canGoInApp: (obj: SavedObjectWithMetadata) => boolean;
   dateFormat: string;
+  title: string;
+  fullWidth: boolean;
 }
 
 export interface SavedObjectsTableState {
@@ -847,7 +849,10 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
     }
 
     return (
-      <EuiPageContent horizontalPosition="center">
+      <EuiPageContent
+        horizontalPosition="center"
+        style={this.props.fullWidth ? {} : { maxWidth: '75%', marginTop: '40px' }}
+      >
         {this.renderFlyout()}
         {this.renderRelationships()}
         {this.renderDeleteConfirmModal()}
@@ -857,6 +862,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
           onImport={this.showImportFlyout}
           onRefresh={this.refreshObjects}
           filteredCount={filteredItemCount}
+          title={this.props.title}
         />
         <EuiSpacer size="xs" />
         <RedirectAppLinks application={applications}>

diff --git a/src/plugins/saved_objects_management/public/management_section/saved_objects_table_page.tsx b/src/plugins/saved_objects_management/public/management_section/saved_objects_table_page.tsx
@@ -30,7 +30,6 @@
 
 import React, { useEffect } from 'react';
 import { get } from 'lodash';
-import { i18n } from '@osd/i18n';
 import { CoreStart, ChromeBreadcrumb } from 'src/core/public';
 import { DataPublicPluginStart } from '../../../data/public';
 import {
@@ -49,6 +48,8 @@ const SavedObjectsTablePage = ({
   columnRegistry,
   namespaceRegistry,
   setBreadcrumbs,
+  title,
+  fullWidth,
 }: {
   coreStart: CoreStart;
   dataStart: DataPublicPluginStart;
@@ -58,6 +59,8 @@ const SavedObjectsTablePage = ({
   columnRegistry: SavedObjectsManagementColumnServiceStart;
   namespaceRegistry: SavedObjectsManagementNamespaceServiceStart;
   setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
+  title: string;
+  fullWidth: boolean;
 }) => {
   const capabilities = coreStart.application.capabilities;
   const itemsPerPage = coreStart.uiSettings.get<number>('savedObjects:perPage', 50);
@@ -66,13 +69,14 @@ const SavedObjectsTablePage = ({
   useEffect(() => {
     setBreadcrumbs([
       {
-        text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
-          defaultMessage: 'Saved objects',
-        }),
-        href: '/',
+        text: title,
+        /**
+         * There is no need to set a link for current bread crumb
+         */
+        href: undefined,
       },
     ]);
-  }, [setBreadcrumbs]);
+  }, [setBreadcrumbs, title]);
 
   return (
     <SavedObjectsTable
@@ -102,6 +106,8 @@ const SavedObjectsTablePage = ({
         const { inAppUrl } = savedObject.meta;
         return inAppUrl ? Boolean(get(capabilities, inAppUrl.uiCapabilitiesPath)) : false;
       }}
+      title={title}
+      fullWidth={fullWidth}
     />
   );
 };

diff --git a/src/plugins/saved_objects_management/public/plugin.ts b/src/plugins/saved_objects_management/public/plugin.ts
@@ -29,7 +29,7 @@
  */
 
 import { i18n } from '@osd/i18n';
-import { CoreSetup, CoreStart, Plugin } from 'src/core/public';
+import { AppMountParameters, CoreSetup, CoreStart, Plugin } from 'src/core/public';
 
 import { VisBuilderStart } from '../../vis_builder/public';
 import { ManagementSetup } from '../../management/public';
@@ -55,6 +55,13 @@ import {
 } from './services';
 import { registerServices } from './register_services';
 import { bootstrap } from './ui_actions_bootstrap';
+import { DEFAULT_APP_CATEGORIES } from '../../../core/public';
+import {
+  LIBRARY_OVERVIEW_WORDINGS,
+  SAVED_OBJECT_MANAGEMENT_TITLE_WORDINGS,
+  SAVED_QUERIES_WORDINGS,
+  SAVED_SEARCHES_WORDINGS,
+} from './constants';
 
 export interface SavedObjectsManagementPluginSetup {
   actions: SavedObjectsManagementActionServiceSetup;
@@ -136,12 +143,71 @@ export class SavedObjectsManagementPlugin
           core,
           serviceRegistry: this.serviceRegistry,
           mountParams,
+          title: i18n.translate('savedObjectsManagement.managementSectionLabel', {
+            defaultMessage: 'Saved Objects',
+          }),
         });
       },
     });
 
     // sets up the context mappings and registers any triggers/actions for the plugin
     bootstrap(uiActions);
+    const mountWrapper = ({
+      title,
+      allowedObjectTypes,
+    }: {
+      title: string;
+      allowedObjectTypes?: string[];
+    }) => async (appMountParams: AppMountParameters) => {
+      const { mountManagementSection } = await import('./management_section');
+      return mountManagementSection({
+        core,
+        serviceRegistry: this.serviceRegistry,
+        appMountParams,
+        title,
+        allowedObjectTypes,
+        fullWidth: false,
+      });
+    };
+
+    /**
+     * Register saved objects overview & saved search & saved query here
+     */
+    core.application.register({
+      id: 'objects_overview',
+      appRoute: '/app/objects',
+      exactRoute: true,
+      title: LIBRARY_OVERVIEW_WORDINGS,
+      order: 10000,
+      category: DEFAULT_APP_CATEGORIES.opensearchDashboards,
+      mount: mountWrapper({
+        title: SAVED_OBJECT_MANAGEMENT_TITLE_WORDINGS,
+      }),
+    });
+
+    core.application.register({
+      id: 'objects_searches',
+      appRoute: '/app/objects/search',
+      title: SAVED_SEARCHES_WORDINGS,
+      order: 8000,
+      category: DEFAULT_APP_CATEGORIES.opensearchDashboards,
+      mount: mountWrapper({
+        title: SAVED_SEARCHES_WORDINGS,
+        allowedObjectTypes: ['search'],
+      }),
+    });
+
+    core.application.register({
+      id: 'objects_query',
+      appRoute: '/app/objects/query',
+      title: SAVED_QUERIES_WORDINGS,
+      order: 8001,
+      category: DEFAULT_APP_CATEGORIES.opensearchDashboards,
+      mount: mountWrapper({
+        title: SAVED_QUERIES_WORDINGS,
+        allowedObjectTypes: ['query'],
+      }),
+    });
 
     // depends on `getStartServices`, should not be awaited
     registerServices(this.serviceRegistry, core.getStartServices);