From f04d2eae41616f541e8845f88a708710e7a03f38 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Tue, 30 Jul 2024 10:15:46 -0700 Subject: [PATCH] side navigation changes for notifications (#222) (#230) * side navigation changes for notifications * fix jest tests * navLinks changes * fixed the issues * fixed the issues * addressed the comments * addressed the comments * Update public/plugin.ts --------- (cherry picked from commit 9e6066a6b7a8748de2e561449feed692ace11350) Signed-off-by: Riya Saxena Signed-off-by: SuZhou-Joe Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] Co-authored-by: SuZhou-Joe --- public/application.tsx | 4 +- public/pages/Main/Main.tsx | 381 +++++++++++++++++++------------------ public/plugin.ts | 82 +++++++- 3 files changed, 268 insertions(+), 199 deletions(-) diff --git a/public/application.tsx b/public/application.tsx index 5f005891..11b72d82 100644 --- a/public/application.tsx +++ b/public/application.tsx @@ -9,8 +9,6 @@ import { HashRouter as Router, Route } from 'react-router-dom'; import { AppMountParameters, CoreStart } from '../../../src/core/public'; import { CoreServicesContext } from './components/coreServices'; import Main from './pages/Main'; -import { NotificationService } from './services'; -import { ServicesContext } from './services/services'; import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public'; import { AppPluginStartDependencies } from "./types"; @@ -19,6 +17,7 @@ export const renderApp = ( params: AppMountParameters, dataSourceManagement: DataSourceManagementPluginSetup, pluginStartDependencies: AppPluginStartDependencies, + defaultRoute?: string, ) => { ReactDOM.render( @@ -31,6 +30,7 @@ export const renderApp = ( multiDataSourceEnabled={!!pluginStartDependencies.dataSource} dataSourceManagement={dataSourceManagement} http={coreStart.http} // Pass http as a prop + defaultRoute={defaultRoute} /> )} diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx index 05aa2f78..d2e7c083 100644 --- a/public/pages/Main/Main.tsx +++ b/public/pages/Main/Main.tsx @@ -51,6 +51,7 @@ interface MainProps extends RouteComponentProps { setActionMenu: (menuMount: MountPoint | undefined) => void; multiDataSourceEnabled: boolean; dataSourceManagement: DataSourceManagementPluginSetup; + defaultRoute?: string; } export interface MainState extends Pick { @@ -106,7 +107,7 @@ export default class Main extends Component { } } - async setServerFeatures() : Promise { + async setServerFeatures(): Promise { const services = this.getServices(this.props.http); const serverFeatures = await services.notificationService.getServerFeatures(); const defaultConfigTypes = [ @@ -146,7 +147,7 @@ export default class Main extends Component { onSelectedDataSources = (dataSources: DataSourceOption[]) => { const { id = "", label = "" } = dataSources[0] || {}; - if (this.state.dataSourceId !== id || this.state.dataSourceLabel !==label) { + if (this.state.dataSourceId !== id || this.state.dataSourceLabel !== label) { this.setState({ dataSourceId: id, dataSourceLabel: label, @@ -239,76 +240,48 @@ export default class Main extends Component { {(services: BrowserServices | null) => services && ( - - - {this.props.multiDataSourceEnabled && DataSourceMenuView && DataSourceMenuSelectable && ( - - ( - - )} - /> - ( - - )} - /> - - this.state.dataSourceReadOnly ? ( + + + {this.props.multiDataSourceEnabled && DataSourceMenuView && DataSourceMenuSelectable && ( + + ( - ) : ( + )} + /> + ( { dataSourceFilter: this.dataSourceFilterFn, }} /> - ) - } - /> - - )} - - {!this.state.dataSourceLoading && ( - <> - - {pathname !== ROUTES.CREATE_CHANNEL && - !pathname.startsWith(ROUTES.EDIT_CHANNEL) && - !pathname.startsWith(ROUTES.CHANNEL_DETAILS) && - pathname !== ROUTES.CREATE_SENDER && - !pathname.startsWith(ROUTES.EDIT_SENDER) && - pathname !== ROUTES.CREATE_SES_SENDER && - !pathname.startsWith(ROUTES.EDIT_SES_SENDER) && - pathname !== ROUTES.CREATE_RECIPIENT_GROUP && - !pathname.startsWith(ROUTES.EDIT_RECIPIENT_GROUP) && ( - - + + this.state.dataSourceReadOnly ? ( + + ) : ( + + ) + } /> - + )} - - - ( - - )} - /> - - ) => } - /> - - ) => } - /> - ( - - )} - /> - ( - // send dataSourceId as props or externally - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - - - - )} - - - + + {!this.state.dataSourceLoading && ( + <> + + {pathname !== ROUTES.CREATE_CHANNEL && + !pathname.startsWith(ROUTES.EDIT_CHANNEL) && + !pathname.startsWith(ROUTES.CHANNEL_DETAILS) && + pathname !== ROUTES.CREATE_SENDER && + !pathname.startsWith(ROUTES.EDIT_SENDER) && + pathname !== ROUTES.CREATE_SES_SENDER && + !pathname.startsWith(ROUTES.EDIT_SES_SENDER) && + pathname !== ROUTES.CREATE_RECIPIENT_GROUP && + !pathname.startsWith(ROUTES.EDIT_RECIPIENT_GROUP) && + // Conditionally render sidebar based on the feature flag + !core.chrome?.navGroup?.getNavGroupEnabled() && ( + + + + )} + + + ( + + )} + /> + + ) => } + /> + + ) => } + /> + ( + + )} + /> + ( + // send dataSourceId as props or externally + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + + + + )} + + + ) } diff --git a/public/plugin.ts b/public/plugin.ts index 420d2a22..a1012a7b 100644 --- a/public/plugin.ts +++ b/public/plugin.ts @@ -9,7 +9,9 @@ import { CoreSetup, CoreStart, DEFAULT_APP_CATEGORIES, + DEFAULT_NAV_GROUPS, Plugin, + WorkspaceAvailability } from '../../../src/core/public'; import { notificationsDashboardsPluginSetup, @@ -17,14 +19,14 @@ import { NotificationsDashboardsSetupDeps, } from './types'; import { PLUGIN_NAME } from '../common'; -import { AppPluginStartDependencies } from './types'; +import { ROUTES } from './utils/constants'; export class notificationsDashboardsPlugin implements - Plugin< - notificationsDashboardsPluginSetup, - notificationsDashboardsPluginStart - > { + Plugin< + notificationsDashboardsPluginSetup, + notificationsDashboardsPluginStart + > { private title = i18n.translate('notification.notificationTitle', { defaultMessage: 'Notifications', }); @@ -33,19 +35,27 @@ export class notificationsDashboardsPlugin core: CoreSetup, { managementOverview, dataSourceManagement }: NotificationsDashboardsSetupDeps, ): notificationsDashboardsPluginSetup { + + const mountWrapper = async (params: AppMountParameters, redirect: string) => { + const { renderApp } = await import("./application"); + const [coreStart, depsStart] = await core.getStartServices(); + return renderApp(coreStart, params, dataSourceManagement!, depsStart, redirect); + }; + // Register an application into the side navigation menu core.application.register({ id: PLUGIN_NAME, title: this.title, - category: DEFAULT_APP_CATEGORIES.management, + category: core.chrome?.navGroup?.getNavGroupEnabled() ? undefined : DEFAULT_APP_CATEGORIES.management, order: 9060, + workspaceAvailability: WorkspaceAvailability.outsideWorkspace, async mount(params: AppMountParameters) { // Load application bundle const { renderApp } = await import('./application'); // Get start services as specified in opensearch_dashboards.json const [coreStart, depsStart] = await core.getStartServices(); // Render the application - return renderApp(coreStart, params, dataSourceManagement, depsStart); + return renderApp(coreStart, params, dataSourceManagement!, depsStart, ROUTES.CHANNELS); }, }); @@ -61,6 +71,62 @@ export class notificationsDashboardsPlugin }); } + if (core.chrome.navGroup.getNavGroupEnabled()) { + // register applications with category and use case information + core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.settingsAndSetup, [ + { + id: PLUGIN_NAME, + } + ]) + + // channels route + core.application.register({ + id: `channels`, + title: 'Channels', + order: 9070, + workspaceAvailability: WorkspaceAvailability.outsideWorkspace, + mount: async (params: AppMountParameters) => { + return mountWrapper(params, ROUTES.CHANNELS); + }, + }); + + core.application.register({ + id: `email_senders`, + title: 'Email senders', + order: 9080, + workspaceAvailability: WorkspaceAvailability.outsideWorkspace, + mount: async (params: AppMountParameters) => { + return mountWrapper(params, ROUTES.EMAIL_SENDERS); + }, + }); + + core.application.register({ + id: `email_groups`, + title: 'Email recepient groups', + order: 9090, + workspaceAvailability: WorkspaceAvailability.outsideWorkspace, + mount: async (params: AppMountParameters) => { + return mountWrapper(params, ROUTES.EMAIL_GROUPS); + }, + }); + + const navlinks = [ + { id: 'channels', parent: PLUGIN_NAME }, + { id: 'email_senders', parent: PLUGIN_NAME }, + { id: 'email_groups', parent: PLUGIN_NAME } + ] + + const navLinks = navlinks.map(item => ({ + id: item.id, + parentNavLinkId: item.parent + })); + + core.chrome.navGroup.addNavLinksToGroup( + DEFAULT_NAV_GROUPS.settingsAndSetup, + navLinks + ); + } + // Return methods that should be available to other plugins return {}; } @@ -69,5 +135,5 @@ export class notificationsDashboardsPlugin return {}; } - public stop() {} + public stop() { } }