RI-7053: replace EuiFlyout with Drawer (#4582)

* RI-7053: use Drawer for ShortcutsFlyout

* RI-7053: remove EuiFlyout styles

* RI-7053: remove EuiFlyoutHeader reference

Author: KrumTy

redisinsight/ui/src/components/base/layout/drawer/index.ts

@@ -0,0 +1,7 @@
+import { Drawer } from '@redis-ui/components'
+
+const DrawerHeader = Drawer.Header
+const DrawerBody = Drawer.Body
+const DrawerFooter = Drawer.Footer
+
+export { Drawer, DrawerHeader, DrawerBody, DrawerFooter }

redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.spec.tsx

@@ -11,6 +11,11 @@ beforeEach(() => {
   store.clearActions()
 })
 
+jest.mock('uiSrc/components/base/layout/drawer', () => ({
+  ...jest.requireActual('uiSrc/components/base/layout/drawer'),
+  DrawerHeader: jest.fn().mockReturnValue(null),
+}))
+
 const appInfoSlicesPath = 'uiSrc/slices/app/info'
 
 jest.mock(appInfoSlicesPath, () => ({

redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx

@@ -1,17 +1,12 @@
 import React from 'react'
 import cx from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
-import {
-  EuiBasicTableColumn,
-  EuiFlyout,
-  EuiFlyoutBody,
-  EuiInMemoryTable,
-  EuiTitle,
-} from '@elastic/eui'
+import { EuiBasicTableColumn, EuiInMemoryTable, EuiTitle } from '@elastic/eui'
 import { appInfoSelector, setShortcutsFlyoutState } from 'uiSrc/slices/app/info'
 import { KeyboardShortcut } from 'uiSrc/components'
 import { BuildType } from 'uiSrc/constants/env'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
+import { Drawer, DrawerHeader, DrawerBody } from 'uiSrc/components/base/layout/drawer'
 import { SHORTCUTS, ShortcutGroup, separator } from './schema'
 
 import styles from './styles.module.scss'
@@ -53,29 +48,22 @@ const ShortcutsFlyout = () => {
     </div>
   )
 
-  return isShortcutsFlyoutOpen ? (
-    <EuiFlyout
-      ownFocus
-      size="538px"
-      onClose={() => dispatch(setShortcutsFlyoutState(false))}
+  return (
+    <Drawer
+      open={isShortcutsFlyoutOpen}
+      onOpenChange={(isOpen) => dispatch(setShortcutsFlyoutState(isOpen))}
       data-test-subj="shortcuts-flyout"
+      title="Shortcuts"
     >
-      <EuiFlyoutBody>
-        <EuiTitle
-          size="s"
-          className={styles.title}
-          data-testid="shortcuts-title"
-        >
-          <h4>Shortcuts</h4>
-        </EuiTitle>
-        <Spacer size="m" />
+      <DrawerHeader title="Shortcuts" />
+      <DrawerBody>
         {SHORTCUTS.filter(
           ({ excludeFor }) =>
             !excludeFor || !excludeFor.includes(server?.buildType as BuildType),
         ).map(ShortcutsTable)}
-      </EuiFlyoutBody>
-    </EuiFlyout>
-  ) : null
+      </DrawerBody>
+    </Drawer>
+  )
 }
 
 export default ShortcutsFlyout

redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss

@@ -1,8 +1,3 @@
-.title {
-  font-size: 18px;
-  font-weight: 600 !important;
-}
-
 .table {
   :global(thead) {
     display: none;

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx

@@ -1,9 +1,5 @@
 import React, { useMemo, useRef, useEffect, useState } from 'react'
-import {
-  EuiFlyoutHeader,
-  EuiText,
-  EuiPopover,
-} from '@elastic/eui'
+import { EuiText, EuiPopover } from '@elastic/eui'
 import JsxParser from 'react-jsx-parser'
 import cx from 'classnames'
 import { debounce } from 'lodash'
@@ -168,7 +164,7 @@ const InternalPage = (props: Props) => {
 
   return (
     <div className={styles.container} data-test-subj="internal-page">
-      <EuiFlyoutHeader className={styles.header}>
+      <div className={styles.header}>
         <div style={{ padding: 0 }}>
           <EuiPopover
             initialFocus={false}
@@ -214,7 +210,7 @@ const InternalPage = (props: Props) => {
             {title?.toUpperCase()}
           </EuiText>
         </div>
-      </EuiFlyoutHeader>
+      </div>
       <div
         ref={containerRef}
         className={cx(styles.content, 'jsx-markdown')}

redisinsight/ui/src/components/side-panels/panels/enablement-area/styles.module.scss

@@ -6,18 +6,6 @@
   border-radius: 4px 0 0 4px;
   box-shadow: -5px 0px 16px rgba(0, 0, 0, 0.16) !important;
   min-width: 476px !important;
-
-  :global(.euiFlyout__closeButton) {
-    background-color: transparent;
-    height: 10px;
-    width: 10px;
-    right: 20px;
-    top: 20px;
-  }
-
-  :global(.euiFlyoutBody__overflowContent) {
-    height: 100%;
-  }
 }
 
 :global {

redisinsight/ui/src/styles/components/_components.scss

@@ -13,7 +13,6 @@
 @import "database";
 @import "switch";
 @import "callout";
-@import "flyout";
 @import "tabs";
 @import "notificationBody";
 @import "json_view";