#RI-2162 refactror enablement area tree view

Author: Artyom Podymov

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

@@ -17,6 +17,8 @@ import {
 
 import styles from './styles.module.scss'
 
+const padding = parseInt(styles.paddingHorizontal)
+
 export interface Props {
   items: Record<string, IEnablementAreaItem>;
   loading: boolean;
@@ -61,38 +63,39 @@ const EnablementArea = ({ items, openScript, loading, onOpenInternalPage }: Prop
     })
   }
 
-  const renderSwitch = (item: IEnablementAreaItem) => {
+  const renderSwitch = (item: IEnablementAreaItem, level: number) => {
     const { label, type, children, id, args } = item
+    const paddingsStyle = { paddingLeft: `${padding + level * 8}px`, paddingRight: `${padding}px` }
     switch (type) {
       case EnablementAreaComponent.Group:
         return (
-          <Group
-            testId={id}
-            label={label}
-            {...args}
-          >
-            {renderTreeView(Object.values(children || {}) || [])}
+          <Group triggerStyle={paddingsStyle} testId={id} label={label}{...args}>
+            {renderTreeView(Object.values(children || {}) || [], level + 1)}
           </Group>
         )
       case EnablementAreaComponent.CodeButton:
-        return args?.path
-          ? <div style={{ marginTop: '16px' }}><LazyCodeButton label={label} {...args} /></div>
-          : <div style={{ marginTop: '16px' }}><CodeButton onClick={() => openScript(args?.content || '')} label={label} {...args} /></div>
+        return (
+          <div style={{ marginTop: '12px', ...paddingsStyle }}>
+            {args?.path
+              ? <LazyCodeButton label={label} {...args} />
+              : <CodeButton onClick={() => openScript(args?.content || '')} label={label} {...args} />}
+          </div>
+        )
       case EnablementAreaComponent.InternalLink:
         return (
-          <InternalLink testId={id || label} label={label} {...args}>
+          <InternalLink style={paddingsStyle} testId={id || label} label={label}{...args}>
             {args?.content || label}
           </InternalLink>
         )
       default:
-        return <PlainText>{label}</PlainText>
+        return <PlainText style={paddingsStyle}>{label}</PlainText>
     }
   }
 
-  const renderTreeView = (elements: IEnablementAreaItem[]) => (
+  const renderTreeView = (elements: IEnablementAreaItem[], level: number = 0) => (
     elements?.map((item) => (
       <div className="fluid" key={item.id}>
-        {renderSwitch(item)}
+        {renderSwitch(item, level)}
       </div>
     )))
 

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

@@ -11,16 +11,30 @@ export interface Props {
   forceState?: 'open' | 'closed';
   arrowDisplay?: 'left' | 'right' | 'none';
   onToggle?: (isOpen: boolean) => void;
+  triggerStyle?: any,
 }
 
 const Group = (props: Props) => {
-  const { label, children, testId, forceState, withBorder = false, arrowDisplay = 'right', initialIsOpen = false, onToggle } = props
+  const {
+    label,
+    children,
+    testId,
+    forceState,
+    withBorder = false,
+    arrowDisplay = 'right',
+    initialIsOpen = false,
+    onToggle,
+    triggerStyle,
+  } = props
   const buttonContent = (
     <EuiText className="group-header" size="m">
       {label}
     </EuiText>
   )
-  const buttonProps: any = { 'data-testid': `accordion-button-${testId}` }
+  const buttonProps: any = {
+    'data-testid': `accordion-button-${testId}`,
+    style: triggerStyle,
+  }
 
   return (
     <EuiAccordion
@@ -35,7 +49,10 @@ const Group = (props: Props) => {
       style={{ whiteSpace: 'nowrap', width: 'auto' }}
       className={[withBorder ? 'withBorder' : ''].join(' ')}
     >
-      {children}
+      <>
+        {children}
+        {withBorder && <div style={triggerStyle} className="divider"><hr /></div> }
+      </>
     </EuiAccordion>
   )
 }

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

@@ -10,26 +10,42 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+    .divider {
+      visibility: hidden;
+      width: 100%;
+      height: 1px;
+      position: absolute;
+      bottom: 0;
+      hr {
+        border: none;
+        height: 1px;
+        width: 100%;
+        background-color: var(--separatorColor);
+      }
+    }
   }
   .euiAccordion__button {
     padding: 3px 0;
     & > span {
       overflow: hidden;
     }
+    &:hover {
+      background-color: var(--hoverInListColorDarken);
+    }
   }
   .euiAccordion-isOpen {
     min-width: 100%;
-    &.withBorder {
-      border-color: var(--separatorColor);
+    .divider {
+      visibility: visible;
     }
   }
   .euiAccordion__triggerWrapper, .euiAccordion__childWrapper {
     border: none !important;
     background-color: transparent !important;
   }
   .euiAccordion__childWrapper {
-    padding-left: 8px;
-    margin-bottom: 4px;
+    padding-left: 0;
+    margin-bottom: 8px;
     .euiListGroupItem {
       button {
         padding: 3px 8px;

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

@@ -15,9 +15,10 @@ export interface Props {
   iconType?: string;
   iconPosition?: 'left' | 'right';
   toolTip?: string;
+  style?: any;
 }
 const InternalLink = (props: Props) => {
-  const { label, testId, children, path = '', size = 's', iconType, iconPosition = 'left', toolTip } = props
+  const { label, testId, children, path = '', size = 's', iconType, iconPosition = 'left', toolTip, ...rest } = props
   const { openPage } = useContext(EnablementAreaContext)
   const handleOpenPage = () => {
     if (path) {
@@ -43,6 +44,7 @@ const InternalLink = (props: Props) => {
       color="subdued"
       onClick={handleOpenPage}
       label={content}
+      {...rest}
     />
   )
 }

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

@@ -3,10 +3,11 @@ import { EuiText } from '@elastic/eui'
 
 export interface Props {
   children: React.ReactElement | string;
+  style?: any;
 }
-const PlainText = ({ children }: Props) => (
+const PlainText = ({ children, ...rest }: Props) => (
   <EuiText
-    style={{ whiteSpace: 'nowrap', width: 'auto' }}
+    style={{ whiteSpace: 'nowrap', width: 'auto', ...rest.style }}
     color="subdued"
     size="m"
   >

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

@@ -2,11 +2,9 @@
 @import '@elastic/eui/src/components/table/mixins';
 @import '@elastic/eui/src/global_styling/index';
 
-$paddingHorizontal: 18px;
 .container {
   overflow: hidden;
   height: 100%;
-  padding: 0 $paddingHorizontal;
   flex-grow: 1;
 }
 
@@ -26,12 +24,16 @@ $paddingHorizontal: 18px;
   position: absolute;
   top: 0;
   height: 100%;
-  transform: translateX(calc(100% + 8px));
+  transform: translateX(calc(100% + 18px));
   backface-visibility: hidden;
   transition: transform 0.4s ease-in-out;
   box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.2);
 }
 
 .internalPageVisible {
-  transform: translateX(-$paddingHorizontal);
+  transform: translateX(0);
+}
+
+:export {
+  paddingHorizontal: 18
 }