Add sidecar service (#5920) (#6157)

* 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]> (cherry picked from commit c2c4f53)
opensearch-project · 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;
 };