#RI-2061 - remove resizable from Enablement Area, add control to expand/collapse

Author: Roman.Sergeenko

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss

@@ -1,6 +1,10 @@
 @mixin font{
   font: normal normal normal 14px/24px Graphik;
   letter-spacing: -0.14px;
+  @media only screen and (max-width: 1440px) {
+    font: normal normal normal 13px/18px Graphik;
+    letter-spacing: -0.13px;
+  }
   @media only screen and (max-width: 992px) {
     font: normal normal normal 12px/18px Graphik;
     letter-spacing: -0.12px;

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss

@@ -7,8 +7,7 @@ $paddingHorizontal: 18px;
   overflow: hidden;
   height: 100%;
   padding: 0 $paddingHorizontal;
-  background-color: var(--euiColorEmptyShade);
-  border: 1px solid var(--euiColorLightShade) !important;
+  flex-grow: 1;
 }
 
 .innerContainer {

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { render } from 'uiSrc/utils/test-utils'
+import EnablementAreaCollapse from './EnablementAreaCollapse'
+
+describe('EnablementAreaCollapse', () => {
+  it('should render', () => {
+    expect(render(<EnablementAreaCollapse isMinimized setIsMinimized={jest.fn} />)).toBeTruthy()
+  })
+
+  it('should be minimized', () => {
+    const { queryByTestId } = render(<EnablementAreaCollapse isMinimized setIsMinimized={jest.fn} />)
+    expect(queryByTestId('expand-enablement-area')).toBeInTheDocument()
+  })
+
+  it('should be expanded', () => {
+    const { queryByTestId } = render(<EnablementAreaCollapse isMinimized={false} setIsMinimized={jest.fn} />)
+    expect(queryByTestId('collapse-enablement-area')).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import cx from 'classnames'
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'
+
+import styles from './styles.module.scss'
+
+export interface Props {
+  isMinimized: boolean;
+  setIsMinimized: (value: boolean) => void;
+}
+
+const EnablementAreaCollapse = ({ isMinimized, setIsMinimized }: Props) => (
+  <div className={cx(styles.wrapper, { [styles.minimized]: isMinimized })}>
+    {isMinimized ? (
+      <EuiToolTip
+        content="Expand"
+        position="top"
+        display="inlineBlock"
+        anchorClassName="flex-row"
+      >
+        <EuiButtonIcon
+          className={styles.iconBtn}
+          iconType="menuRight"
+          color="subdued"
+          size="m"
+          onClick={() => setIsMinimized(true)}
+          data-testid="expand-enablement-area"
+        />
+      </EuiToolTip>
+    ) : (
+      <EuiToolTip
+        content="Collapse"
+        position="top"
+        display="inlineBlock"
+        anchorClassName="flex-row"
+      >
+        <EuiButtonIcon
+          className={cx(styles.iconBtn, styles.btnHide)}
+          iconType="menuLeft"
+          color="primary"
+          size="m"
+          onClick={() => setIsMinimized(true)}
+          data-testid="collapse-enablement-area"
+        />
+      </EuiToolTip>
+    )}
+  </div>
+)
+
+export default EnablementAreaCollapse

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/styles.module.scss

@@ -0,0 +1,43 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:not(.minimized) {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate(50%, -50%);
+    z-index: 1;
+  }
+
+  &.minimized {
+    border-color: transparent;
+    height: 100%;
+  }
+}
+
+.iconBtn {
+  width: 20px !important;
+  height: 20px !important;
+
+  :global(.euiIcon) {
+    width: 20px !important;
+    height: 20px !important;
+  }
+
+  &:focus {
+    background-color: transparent !important;
+  }
+
+  &.btnHide, &.btnHide:focus {
+    width: 32px !important;
+    height: 32px !important;
+    background-color: var(--euiColorLightestShade) !important;
+    border: 1px solid var(--euiColorPrimary) !important;
+
+    &:hover {
+      background-color: var(--buttonIconPrimaryHover) !important;
+    }
+  }
+}

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaWrapper.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react'
 import { monaco } from 'react-monaco-editor'
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'
+import cx from 'classnames'
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
@@ -9,14 +11,19 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { fetchEnablementArea, workbenchEnablementAreaSelector } from 'uiSrc/slices/workbench/wb-enablement-area'
 
 import EnablementArea from './EnablementArea'
+import EnablementAreaCollapse from './EnablementAreaCollapse/EnablementAreaCollapse'
 import { IInternalPage } from '../../contexts/enablementAreaContext'
 
+import styles from './styles.module.scss'
+
 export interface Props {
+  isMinimized: boolean;
+  setIsMinimized: (value: boolean) => void;
   scriptEl: Nullable<monacoEditor.editor.IStandaloneCodeEditor>;
   setScript: (script: string) => void;
 }
 
-const EnablementAreaWrapper = React.memo(({ scriptEl, setScript }: Props) => {
+const EnablementAreaWrapper = React.memo(({ isMinimized, setIsMinimized, scriptEl, setScript }: Props) => {
   const { loading, items } = useSelector(workbenchEnablementAreaSelector)
   const { instanceId = '' } = useParams<{ instanceId: string }>()
   const dispatch = useDispatch()
@@ -56,12 +63,30 @@ const EnablementAreaWrapper = React.memo(({ scriptEl, setScript }: Props) => {
   }
 
   return (
-    <EnablementArea
-      items={items}
-      loading={loading}
-      openScript={openScript}
-      openInternalPage={openInternalPage}
-    />
+    <EuiFlexGroup
+      className={cx(styles.areaWrapper, { [styles.minimized]: isMinimized })}
+      onClick={() => isMinimized && setIsMinimized(false)}
+      direction="column"
+      gutterSize="none"
+    >
+      <EuiFlexItem
+        className={cx(styles.collapseWrapper, { [styles.minimized]: isMinimized })}
+        grow={isMinimized}
+      >
+        <EnablementAreaCollapse isMinimized={isMinimized} setIsMinimized={setIsMinimized} />
+      </EuiFlexItem>
+      <EuiFlexItem
+        className={cx(styles.areaContentWrapper, { [styles.minimized]: isMinimized })}
+        grow={!isMinimized}
+      >
+        <EnablementArea
+          items={items}
+          loading={loading}
+          openScript={openScript}
+          openInternalPage={openInternalPage}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   )
 })
 

redisinsight/ui/src/pages/workbench/components/enablament-area/styles.module.scss

@@ -0,0 +1,35 @@
+.areaWrapper {
+  overflow: hidden;
+  height: 100%;
+  background-color: var(--euiColorEmptyShade);
+  border: 1px solid var(--euiColorLightShade) !important;
+
+  &.minimized {
+    cursor: pointer;
+    &:hover {
+      background-color: var(--hoverInListColorDarken);
+    }
+  }
+
+  &:not(.minimized) {
+    &:hover {
+      .collapseWrapper {
+        display: flex;
+      }
+    }
+  }
+}
+
+.collapseWrapper {
+  &:not(.minimized) {
+    display: none;
+  }
+}
+
+.areaContentWrapper {
+  &.minimized {
+    width: 0;
+    visibility: hidden;
+    height: 0;
+  }
+}