fix scss and use existing service getter and setter for application s…

…ervice

Signed-off-by: Zhongnan Su <szhongna@amazon.com>

src/plugins/data_source_management/opensearch_dashboards.json

@@ -5,6 +5,6 @@
   "ui": true,
   "requiredPlugins": ["management", "dataSource", "indexPatternManagement"],
   "optionalPlugins": [],
-  "requiredBundles": ["opensearchDashboardsReact", "dataSource"],
+  "requiredBundles": ["opensearchDashboardsReact", "dataSource", "opensearchDashboardsUtils"],
   "extraPublicDirs": ["public/components/utils"]
 }

src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx

@@ -10,13 +10,13 @@ import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
 import { DataSourceMenu } from './data_source_menu';
 import { DataSourceMenuProps } from './types';
 import { MountPointPortal } from '../../../../opensearch_dashboards_react/public';
-import { applicationService } from '../utils';
+import { getApplication } from '../utils';
 
 export function createDataSourceMenu<T>(
   uiSettings: IUiSettingsClient,
   dataSourcePluginSetup: DataSourcePluginSetup
 ) {
-  const application = applicationService.getApplication();
+  const application = getApplication();
   return (props: DataSourceMenuProps<T>) => {
     const { hideLocalCluster } = dataSourcePluginSetup;
     if (props.setMenuMountPoint) {

src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.scss

@@ -0,0 +1,3 @@
+.dataSourceDropDownHeaderInvisibleFocusable {
+  opacity: 0;
+}

src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './_drop_down_header.scss';
+import './drop_down_header.scss';
 import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import React from 'react';
 import { ApplicationStart } from 'opensearch-dashboards/public';
@@ -32,7 +32,7 @@ export const DataSourceDropDownHeader: React.FC<DataSourceOptionItemProps> = ({
         <EuiFlexItem>
           {dataSourceCounterPrefix} ({dataSourceCounter})
         </EuiFlexItem>
-        <div tabIndex={0} id="invisibleFocusable" />
+        <div tabIndex={0} className="dataSourceDropDownHeaderInvisibleFocusable" />
         <EuiFlexItem grow={false}>
           <EuiLink
             onClick={() =>

src/plugins/data_source_management/public/components/utils.ts

@@ -22,6 +22,7 @@ import {
 import { AuthenticationMethodRegistry } from '../auth_registry';
 import { DataSourceOption } from './data_source_selector/data_source_selector';
 import { DataSourceGroupLabelOption } from './data_source_menu/types';
+import { createGetterSetter } from '../../../opensearch_dashboards_utils/public';
 
 export async function getDataSources(savedObjectsClient: SavedObjectsClientContract) {
   return savedObjectsClient
@@ -296,17 +297,4 @@ export const dataSourceOptionGroupLabel = deepFreeze<Readonly<DataSourceOptionGr
   // TODO: add other group labels if needed
 });
 
-const createApplicationService = () => {
-  let application: ApplicationStart;
-
-  return {
-    init(applicationStart: ApplicationStart) {
-      application = applicationStart;
-    },
-    getApplication() {
-      return application;
-    },
-  };
-};
-
-export const applicationService = createApplicationService();
+export const [getApplication, setApplication] = createGetterSetter<ApplicationStart>('Application');

src/plugins/data_source_management/public/plugin.ts

@@ -4,7 +4,7 @@
  */
 
 import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
-import { ApplicationStart, CoreSetup, CoreStart, Plugin } from '../../../core/public';
+import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 
 import { PLUGIN_NAME } from '../common';
 import { createDataSourceSelector } from './components/data_source_selector/create_data_source_selector';
@@ -21,7 +21,7 @@ import { noAuthCredentialAuthMethod, sigV4AuthMethod, usernamePasswordAuthMethod
 import { DataSourceSelectorProps } from './components/data_source_selector/data_source_selector';
 import { createDataSourceMenu } from './components/data_source_menu/create_data_source_menu';
 import { DataSourceMenuProps } from './components/data_source_menu';
-import { applicationService } from './components/utils';
+import { setApplication } from './components/utils';
 
 export interface DataSourceManagementSetupDependencies {
   management: ManagementSetup;
@@ -112,7 +112,7 @@ export class DataSourceManagementPlugin
 
   public start(core: CoreStart) {
     this.started = true;
-    applicationService.init(core.application);
+    setApplication(core.application);
     return {
       getAuthenticationMethodRegistry: () => this.authMethodsRegistry,
     };