Add sidecar service (opensearch-project#5920) (opensearch-project#6157)

* feat: sidecar poc Signed-off-by: tygao <tygao@amazon.com> * update sidecar Signed-off-by: tygao <tygao@amazon.com> * update mouseevent Signed-off-by: tygao <tygao@amazon.com> * update type Signed-off-by: tygao <tygao@amazon.com> * update service mock Signed-off-by: tygao <tygao@amazon.com> * update sidecar config mode type Signed-off-by: tygao <tygao@amazon.com> * update docked mode enum Signed-off-by: tygao <tygao@amazon.com> * update resizable button style Signed-off-by: tygao <tygao@amazon.com> * doc: add changelog Signed-off-by: tygao <tygao@amazon.com> * test: update snapshots Signed-off-by: tygao <tygao@amazon.com> * fix typo Signed-off-by: tygao <tygao@amazon.com> * doc: update readme Signed-off-by: tygao <tygao@amazon.com> * test: add test for resizable button and service Signed-off-by: tygao <tygao@amazon.com> * test: add test for create react overlays and app container Signed-off-by: tygao <tygao@amazon.com> * test: add tests for service and components Signed-off-by: tygao <tygao@amazon.com> * test: update tests for resizable button Signed-off-by: tygao <tygao@amazon.com> * fix: update enum usage Signed-off-by: tygao <tygao@amazon.com> * update Signed-off-by: tygao <tygao@amazon.com> * fix wrong change Signed-off-by: tygao <tygao@amazon.com> * add prefix for resizableButton Signed-off-by: tygao <tygao@amazon.com> --------- Signed-off-by: tygao <tygao@amazon.com> (cherry picked from commit c2c4f53)
bandinib-amzn · Mar 18, 2024 · f3750e1 · f3750e1
1 parent b8e1c27
commit f3750e1
Show file tree

Hide file tree

Showing 35 changed files with 3,114 additions and 9 deletions.
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 = `${this.id} App`;
@@ -67,6 +68,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
@@ -52,6 +52,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 };
 
@@ -97,6 +98,7 @@ interface StartDeps {
   injectedMetadata: InjectedMetadataStart;
   notifications: NotificationsStart;
   uiSettings: IUiSettingsClient;
+  overlays: OverlayStart;
 }
 
 /** @internal */
@@ -150,6 +152,7 @@ export class ChromeService {
     injectedMetadata,
     notifications,
     uiSettings,
+    overlays,
   }: StartDeps): Promise<InternalChromeStart> {
     this.initVisibility(application);
 
@@ -161,6 +164,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 });
@@ -263,6 +267,7 @@ export class ChromeService {
           branding={injectedMetadata.getBranding()}
           logos={logos}
           survey={injectedMetadata.getSurvey()}
+          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;
@@ -93,6 +93,7 @@ export interface HeaderProps {
   branding: ChromeBranding;
   logos: Logos;
   survey: string | undefined;
+  sidecarConfig$: Observable<ISidecarConfig | undefined>;
 }
 
 export function Header({
@@ -110,6 +111,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 />;
@@ -130,6 +136,7 @@ export function Header({
             <EuiHeader
               className="expandedHeader"
               theme={expandedHeaderColorScheme}
+              style={sidecarPaddingStyle}
               position="fixed"
               sections={[
                 {
@@ -168,7 +175,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
@@ -233,6 +233,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
@@ -181,7 +181,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;
 };