From f38609bd0f718e3ec0250473c745c7bcdd5adac5 Mon Sep 17 00:00:00 2001
From: Manideep Pabba <109986843+mpabba3003@users.noreply.github.com>
Date: Thu, 4 Aug 2022 11:28:06 -0700
Subject: [PATCH] breadcrumbfix for datasource management (#2066)

* breadcrumbfix for datasource management

Signed-off-by: mpabba3003 <amazonmanideep@gmail.com>

* breadcrumbfix for datasource management - refactoring code

Signed-off-by: mpabba3003 <amazonmanideep@gmail.com>

* using services to update breadcrumb on data sources management page

Signed-off-by: mpabba3003 <amazonmanideep@gmail.com>

* Changing the license header on breadcrumbs.ts datasource management
---
 .../public/components/breadcrumbs.ts            | 17 +++++++++++++++++
 .../data_source_table/data_source_table.tsx     |  7 +++++++
 .../management_app/mount_management_section.tsx | 12 ++++++++++--
 .../data_source_management/public/types.ts      |  2 +-
 4 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 src/plugins/data_source_management/public/components/breadcrumbs.ts

diff --git a/src/plugins/data_source_management/public/components/breadcrumbs.ts b/src/plugins/data_source_management/public/components/breadcrumbs.ts
new file mode 100644
index 000000000000..da1bc530e018
--- /dev/null
+++ 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
index 89a9d6af4ab5..24ecfa8e7d49 100644
--- 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
index 43729ec5a0d1..5ba15c1c2a62 100644
--- 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
index bc5595147f3d..1ca1231d5591 100644
--- 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;