update

Signed-off-by: tygao <tygao@amazon.com>

src/core/public/overlays/sidecar/components/sidecar.test.tsx

@@ -6,11 +6,12 @@
 import React from 'react';
 
 import { render, mount } from 'enzyme';
-import { SIDECAR_DOCKED_MODE } from '../sidecar_service';
 import { BehaviorSubject } from 'rxjs';
-import { i18nServiceMock } from '../../../i18n/i18n_service.mock';
+
+import { ISidecarConfig, SIDECAR_DOCKED_MODE } from '../sidecar_service';
 import { Sidecar, Props } from './sidecar';
-import { ISidecarConfig } from '../sidecar_service';
+import { i18nServiceMock } from '../../../i18n/i18n_service.mock';
+
 const i18nMock = i18nServiceMock.createStartContract();
 const mountText = (text: string) => (container: HTMLElement) => {
   const content = document.createElement('span');

src/core/public/overlays/sidecar/components/sidecar.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import useObservable from 'react-use/lib/useObservable';
+import { useObservable } from 'react-use';
 import { BehaviorSubject } from 'rxjs';
 import classNames from 'classnames';
 import { I18nStart } from '../../../i18n';

src/core/public/overlays/sidecar/helper.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ISidecarConfig } from './sidecar_service';
+import { ISidecarConfig, SIDECAR_DOCKED_MODE } from './sidecar_service';
 
 function isMouseEvent(
   event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent
@@ -21,10 +21,14 @@ export const getPosition = (
 };
 
 export const getOsdSidecarPaddingStyle = (config: ISidecarConfig | undefined) => {
-  if (!config?.isHidden && (config?.dockedMode === 'left' || config?.dockedMode === 'right')) {
+  if (
+    !config?.isHidden &&
+    (config?.dockedMode === SIDECAR_DOCKED_MODE.LEFT ||
+      config?.dockedMode === SIDECAR_DOCKED_MODE.RIGHT)
+  ) {
     const { dockedMode, paddingSize } = config;
     return {
-      [`padding${dockedMode === 'left' ? 'Left' : 'Right'}`]: paddingSize,
+      [`padding${dockedMode === SIDECAR_DOCKED_MODE.LEFT ? 'Left' : 'Right'}`]: paddingSize,
     };
   }
   return {};

src/core/public/overlays/sidecar/sidecar_service.tsx

@@ -6,9 +6,8 @@
 
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
+import { BehaviorSubject, Observable, ReplaySubject, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
 import { I18nStart } from '../../i18n';
 import { MountPoint } from '../../types';
 import { OverlayRef } from '../types';
@@ -162,15 +161,13 @@ export class SidecarService {
         this.activeSidecar = sidecar;
 
         render(
-          React.createElement(() => (
-            <Sidecar
-              sidecarConfig$={sidecarConfig$}
-              setSidecarConfig={setSidecarConfig}
-              options={options}
-              i18n={i18n}
-              mount={mount}
-            />
-          )),
+          <Sidecar
+            sidecarConfig$={sidecarConfig$}
+            setSidecarConfig={setSidecarConfig}
+            options={options}
+            i18n={i18n}
+            mount={mount}
+          />,
           this.targetDomElement
         );
 
@@ -186,11 +183,10 @@ export class SidecarService {
   }
 
   /**
-   * Using React.Render to re-render into a target DOM element will replace
-   * the content of the target but won't call unmountComponent on any
-   * components inside the target or any of their children. So we properly
-   * cleanup the DOM here to prevent subtle bugs in child components which
-   * depend on unmounting for cleanup behaviour.
+   * When using React.render to re-render content into a target DOM element, it replaces
+   * the content without invoking unmountComponentAtNode on any components within the target
+   * or their children. To avoid potential subtle bugs in child components that rely on
+   * unmounting for cleanup behavior, this function ensures proper cleanup of the DOM.
    */
   private cleanupDom(): void {
     if (this.targetDomElement != null) {