breadcrumbfix for datasource management (opensearch-project#2066)

* breadcrumbfix for datasource management Signed-off-by: mpabba3003 <[email protected]> * breadcrumbfix for datasource management - refactoring code Signed-off-by: mpabba3003 <[email protected]> * using services to update breadcrumb on data sources management page Signed-off-by: mpabba3003 <[email protected]> * Changing the license header on breadcrumbs.ts datasource management Signed-off-by: Kristen Tian <[email protected]>
kristenTian · Sep 14, 2022 · 389ef61 · 389ef61
1 parent 409e606
commit 389ef61
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git a/src/plugins/data_source_management/public/components/breadcrumbs.ts b/src/plugins/data_source_management/public/components/breadcrumbs.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+
+export function getListBreadcrumbs() {
+  return [
+    {
+      text: i18n.translate('indexPatternManagement.dataSources.listBreadcrumb', {
+        defaultMessage: 'Data Sources',
+      }),
+      href: `/`,
+    },
+  ];
+}
diff --git a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
@@ -6,8 +6,15 @@
 import { EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { withRouter } from 'react-router-dom';
+import { getListBreadcrumbs } from '../breadcrumbs';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { DataSourceManagementContext } from '../../types';
 
 export const DataSourceTable = () => {
+  const { setBreadcrumbs } = useOpenSearchDashboards<DataSourceManagementContext>().services;
+
+  setBreadcrumbs(getListBreadcrumbs());
+
   return (
     <EuiTitle>
       <h2>{'This is the landing page, going to list data sources here...'}</h2>

diff --git a/src/plugins/data_source_management/public/management_app/mount_management_section.tsx b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx
@@ -6,6 +6,7 @@
 import { StartServicesAccessor } from 'src/core/public';
 
 import { I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
@@ -14,7 +15,7 @@ import { ManagementAppMountParams } from '../../../management/public';
 import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
 import { CreateDataSourceWizardWithRouter } from '../components/create_data_source_wizard';
 import { DataSourceTableWithRouter } from '../components/data_source_table';
-import { DataSourceManagmentContext } from '../types';
+import { DataSourceManagementContext } from '../types';
 
 export async function mountManagementSection(
   getStartServices: StartServicesAccessor,
@@ -24,7 +25,7 @@ export async function mountManagementSection(
     { chrome, application, savedObjects, uiSettings, notifications, overlays, http, docLinks },
   ] = await getStartServices();
 
-  const deps: DataSourceManagmentContext = {
+  const deps: DataSourceManagementContext = {
     chrome,
     application,
     savedObjects,
@@ -36,6 +37,13 @@ export async function mountManagementSection(
     setBreadcrumbs: params.setBreadcrumbs,
   };
 
+  /* Browser - Page Title */
+  const title = i18n.translate('dataSourcesManagement.objects.dataSourcesTitle', {
+    defaultMessage: 'Data Sources',
+  });
+
+  chrome.docTitle.change(title);
+
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={deps}>
       <I18nProvider>

diff --git a/src/plugins/data_source_management/public/types.ts b/src/plugins/data_source_management/public/types.ts
@@ -22,7 +22,7 @@ export interface DataSourceManagementSetupDependencies {
   management: ManagementSetup;
 }
 
-export interface DataSourceManagmentContext {
+export interface DataSourceManagementContext {
   chrome: ChromeStart;
   application: ApplicationStart;
   savedObjects: SavedObjectsStart;