Add sidecar service (opensearch-project#5920)

* feat: sidecar poc Signed-off-by: tygao <[email protected]> * update sidecar Signed-off-by: tygao <[email protected]> * update mouseevent Signed-off-by: tygao <[email protected]> * update type Signed-off-by: tygao <[email protected]> * update service mock Signed-off-by: tygao <[email protected]> * update sidecar config mode type Signed-off-by: tygao <[email protected]> * update docked mode enum Signed-off-by: tygao <[email protected]> * update resizable button style Signed-off-by: tygao <[email protected]> * doc: add changelog Signed-off-by: tygao <[email protected]> * test: update snapshots Signed-off-by: tygao <[email protected]> * fix typo Signed-off-by: tygao <[email protected]> * doc: update readme Signed-off-by: tygao <[email protected]> * test: add test for resizable button and service Signed-off-by: tygao <[email protected]> * test: add test for create react overlays and app container Signed-off-by: tygao <[email protected]> * test: add tests for service and components Signed-off-by: tygao <[email protected]> * test: update tests for resizable button Signed-off-by: tygao <[email protected]> * fix: update enum usage Signed-off-by: tygao <[email protected]> * update Signed-off-by: tygao <[email protected]> * fix wrong change Signed-off-by: tygao <[email protected]> * add prefix for resizableButton Signed-off-by: tygao <[email protected]> --------- Signed-off-by: tygao <[email protected]>
raintygao · Mar 15, 2024 · c2c4f53 · c2c4f53
1 parent 31e8481
commit c2c4f53
Show file tree

Hide file tree

Showing 36 changed files with 3,115 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -40,6 +40,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Workspace] Add a workspace client in workspace plugin ([#6094](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6094))
 - [Multiple Datasource] Add component to show single selected data source in read only mode ([#6125](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6125))
 - [Workspace] Add workspace id in basePath ([#6060](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6060))
+- Add sidecar service ([#5920](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5920))
 
 ### 🐛 Bug Fixes
 

diff --git a/src/core/public/chrome/chrome_service.test.ts b/src/core/public/chrome/chrome_service.test.ts
@@ -41,6 +41,7 @@ import { notificationServiceMock } from '../notifications/notifications_service.
 import { uiSettingsServiceMock } from '../ui_settings/ui_settings_service.mock';
 import { ChromeService } from './chrome_service';
 import { getAppInfo } from '../application/utils';
+import { overlayServiceMock } from '../mocks';
 
 class FakeApp implements App {
   public title: string;
@@ -70,6 +71,7 @@ function defaultStartDeps(availableApps?: App[]) {
     injectedMetadata: injectedMetadataServiceMock.createStartContract(),
     notifications: notificationServiceMock.createStartContract(),
     uiSettings: uiSettingsServiceMock.createStartContract(),
+    overlays: overlayServiceMock.createStartContract(),
   };
 
   if (availableApps) {

diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx
@@ -51,6 +51,7 @@ import { ChromeHelpExtensionMenuLink } from './ui/header/header_help_menu';
 import { Branding } from '../';
 import { getLogos } from '../../common';
 import type { Logos } from '../../common/types';
+import { OverlayStart } from '../overlays';
 
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
 
@@ -96,6 +97,7 @@ export interface StartDeps {
   injectedMetadata: InjectedMetadataStart;
   notifications: NotificationsStart;
   uiSettings: IUiSettingsClient;
+  overlays: OverlayStart;
 }
 
 type CollapsibleNavHeaderRender = () => JSX.Element | null;
@@ -166,6 +168,7 @@ export class ChromeService {
     injectedMetadata,
     notifications,
     uiSettings,
+    overlays,
   }: StartDeps): Promise<InternalChromeStart> {
     this.initVisibility(application);
 
@@ -177,6 +180,7 @@ export class ChromeService {
     const customNavLink$ = new BehaviorSubject<ChromeNavLink | undefined>(undefined);
     const helpSupportUrl$ = new BehaviorSubject<string>(OPENSEARCH_DASHBOARDS_ASK_OPENSEARCH_LINK);
     const isNavDrawerLocked$ = new BehaviorSubject(localStorage.getItem(IS_LOCKED_KEY) === 'true');
+    const sidecarConfig$ = overlays.sidecar.getSidecarConfig$();
 
     const navControls = this.navControls.start();
     const navLinks = this.navLinks.start({ application, http });
@@ -280,6 +284,7 @@ export class ChromeService {
           logos={logos}
           survey={injectedMetadata.getSurvey()}
           collapsibleNavHeaderRender={this.collapsibleNavHeaderRender}
+          sidecarConfig$={sidecarConfig$}
         />
       ),
 

diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx
@@ -36,6 +36,7 @@ import { httpServiceMock } from '../../../http/http_service.mock';
 import { applicationServiceMock, chromeServiceMock } from '../../../mocks';
 import { Header } from './header';
 import { StubBrowserStorage } from 'test_utils/stub_browser_storage';
+import { ISidecarConfig, SIDECAR_DOCKED_MODE } from '../../../overlays';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => () => 'mockId',
@@ -72,6 +73,10 @@ function mockProps() {
     branding: {},
     survey: '/',
     logos: chromeServiceMock.createStartContract().logos,
+    sidecarConfig$: new BehaviorSubject<ISidecarConfig>({
+      dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+      paddingSize: 640,
+    }),
   };
 }
 

diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
@@ -41,7 +41,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import classnames from 'classnames';
-import React, { createRef, useState } from 'react';
+import React, { createRef, useMemo, useState } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { LoadingIndicator } from '../';
@@ -65,7 +65,7 @@ import { HeaderNavControls } from './header_nav_controls';
 import { HeaderActionMenu } from './header_action_menu';
 import { HeaderLogo } from './header_logo';
 import type { Logos } from '../../../../common/types';
-
+import { ISidecarConfig, getOsdSidecarPaddingStyle } from '../../../overlays';
 export interface HeaderProps {
   opensearchDashboardsVersion: string;
   application: InternalApplicationStart;
@@ -94,6 +94,7 @@ export interface HeaderProps {
   branding: ChromeBranding;
   logos: Logos;
   survey: string | undefined;
+  sidecarConfig$: Observable<ISidecarConfig | undefined>;
 }
 
 export function Header({
@@ -112,6 +113,11 @@ export function Header({
   const isVisible = useObservable(observables.isVisible$, false);
   const isLocked = useObservable(observables.isLocked$, false);
   const [isNavOpen, setIsNavOpen] = useState(false);
+  const sidecarConfig = useObservable(observables.sidecarConfig$, undefined);
+
+  const sidecarPaddingStyle = useMemo(() => {
+    return getOsdSidecarPaddingStyle(sidecarConfig);
+  }, [sidecarConfig]);
 
   if (!isVisible) {
     return <LoadingIndicator loadingCount$={observables.loadingCount$} showAsBar />;
@@ -132,6 +138,7 @@ export function Header({
             <EuiHeader
               className="expandedHeader"
               theme={expandedHeaderColorScheme}
+              style={sidecarPaddingStyle}
               position="fixed"
               sections={[
                 {
@@ -170,7 +177,7 @@ export function Header({
             />
           )}
 
-          <EuiHeader position="fixed" className="primaryHeader">
+          <EuiHeader position="fixed" className="primaryHeader" style={sidecarPaddingStyle}>
             <EuiHeaderSection grow={false}>
               <EuiHeaderSectionItem border="right" className="header__toggleNavButtonSection">
                 <EuiHeaderSectionItemButton

diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts
@@ -235,6 +235,7 @@ export class CoreSystem {
         injectedMetadata,
         notifications,
         uiSettings,
+        overlays,
       });
 
       this.coreApp.start({ application, http, notifications, uiSettings });

diff --git a/src/core/public/index.ts b/src/core/public/index.ts
@@ -182,7 +182,13 @@ export {
   IHttpResponseInterceptorOverrides,
 } from './http';
 
-export { OverlayStart, OverlayBannersStart, OverlayRef } from './overlays';
+export {
+  OverlayStart,
+  OverlayBannersStart,
+  OverlayRef,
+  ISidecarConfig,
+  SIDECAR_DOCKED_MODE,
+} from './overlays';
 
 export {
   Toast,

diff --git a/src/core/public/overlays/index.ts b/src/core/public/overlays/index.ts
@@ -33,3 +33,10 @@ export { OverlayBannersStart } from './banners';
 export { OverlayFlyoutStart, OverlayFlyoutOpenOptions } from './flyout';
 export { OverlayModalStart, OverlayModalOpenOptions } from './modal';
 export { OverlayService, OverlayStart } from './overlay_service';
+export {
+  OverlaySidecarStart,
+  OverlaySidecarOpenOptions,
+  ISidecarConfig,
+  getOsdSidecarPaddingStyle,
+  SIDECAR_DOCKED_MODE,
+} from './sidecar';
diff --git a/src/core/public/overlays/overlay_service.mock.ts b/src/core/public/overlays/overlay_service.mock.ts
@@ -33,6 +33,7 @@ import { OverlayService, OverlayStart } from './overlay_service';
 import { overlayBannersServiceMock } from './banners/banners_service.mock';
 import { overlayFlyoutServiceMock } from './flyout/flyout_service.mock';
 import { overlayModalServiceMock } from './modal/modal_service.mock';
+import { overlaySidecarServiceMock } from './sidecar/sidecar_service.mock';
 
 const createStartContractMock = () => {
   const overlayStart = overlayModalServiceMock.createStartContract();
@@ -41,6 +42,7 @@ const createStartContractMock = () => {
     openModal: overlayStart.open,
     openConfirm: overlayStart.openConfirm,
     banners: overlayBannersServiceMock.createStartContract(),
+    sidecar: overlaySidecarServiceMock.createStartContract(),
   };
   return startContract;
 };