Feature/Enablement area context

redisinsight/ui/src/packages/enablement-area/enablement-area.json

@@ -21,7 +21,6 @@
             "id": "introduction",
             "label": "Introduction",
             "args": {
-              "backTitle": "Document Capabilities",
               "path": "/static/workbench/guides/document-capabilities/introduction.html"
             }
           },
@@ -30,7 +29,6 @@
             "id": "working-with-hashes",
             "label": "Working with Hashes",
             "args": {
-              "backTitle": "Document Capabilities",
               "path": "/static/workbench/guides/document-capabilities/working-with-hashes.html"
             }
           },
@@ -39,7 +37,6 @@
             "id": "working-with-json",
             "label": "Working with JSON",
             "args": {
-              "backTitle": "Document Capabilities",
               "path": "/static/workbench/guides/document-capabilities/working-with-json.html"
             }
           },
@@ -48,7 +45,6 @@
             "id": "learn-more",
             "label": "Learn More",
             "args": {
-              "backTitle": "Document Capabilities",
               "path": "/static/workbench/guides/document-capabilities/learn-more.html"
             }
           }

redisinsight/ui/src/packages/enablement-area/guides/document-capabilities/introduction.html

@@ -68,10 +68,9 @@ <h3>PRE-REQUISITES</h3>
     </p>
   </div>
   <div style="width: 100%" class="sticky-footer">
-    <div style="width: 100%; margin-bottom: 12px">
+    <div style="width: 100%">
       <InternalLink
         size="xs"
-        backTitle="Document Capabilities"
         path="/static/workbench/guides/document-capabilities/working-with-hashes.html"
         label="Working with Hashes"
         iconType="arrowRight"

redisinsight/ui/src/packages/enablement-area/guides/document-capabilities/learn-more.html

@@ -38,10 +38,9 @@ <h3>Tutorials</h3>
     </div>
   </div>
   <div style="width: 100%" class="sticky-footer">
-    <div style="width: 100%; margin-bottom: 12px">
+    <div style="width: 100%;">
       <InternalLink
         size="xs"
-        backTitle="Document Capabilities"
         path="/static/workbench/guides/document-capabilities/working-with-json.html"
         label="Working with JSON"
         iconType="arrowLeft"

redisinsight/ui/src/packages/enablement-area/guides/document-capabilities/working-with-hashes.html

@@ -134,11 +134,10 @@
     </ol>
   </div>
   <div style="width: 100%" class="sticky-footer">
-    <div style="width: 100%; display: flex; margin-bottom: 12px">
+    <div style="width: 100%; display: flex;">
       <div style="width: 50%; border-right: 1px solid var(--separatorColor)">
         <InternalLink
           size="xs"
-          backTitle="Document Capabilities"
           path="/static/workbench/guides/document-capabilities/introduction.html"
           label="Introduction"
           iconType="arrowLeft"
@@ -155,7 +154,6 @@
       <div style="width: 50%">
         <InternalLink
           size="xs"
-          backTitle="Document Capabilities"
           path="/static/workbench/guides/document-capabilities/working-with-json.html"
           label="Working with JSON"
           iconType="arrowRight"

redisinsight/ui/src/packages/enablement-area/guides/document-capabilities/working-with-json.html

@@ -128,11 +128,10 @@
     </ol>
   </div>
   <div style="width: 100%" class="sticky-footer">
-    <div style="width: 100%; display: flex; margin-bottom: 12px">
+    <div style="width: 100%; display: flex;">
       <div style="width: 50%; border-right: 1px solid var(--separatorColor)">
         <InternalLink
           size="xs"
-          backTitle="Document Capabilities"
           path="/static/workbench/guides/document-capabilities/working-with-hashes.html"
           label="Working with Hashes"
           iconType="arrowLeft"
@@ -149,7 +148,6 @@
       <div style="width: 50%">
         <InternalLink
           size="xs"
-          backTitle="Document Capabilities"
           path="/static/workbench/guides/document-capabilities/learn-more.html"
           label="Learn More"
           iconType="arrowRight"

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

@@ -1,8 +1,11 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+import { useSelector, useDispatch } from 'react-redux'
 import cx from 'classnames'
 import { EuiListGroup, EuiLoadingContent } from '@elastic/eui'
 import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 import { EnablementAreaProvider, IInternalPage } from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
+import { appContextWorkbenchEA, resetWorkbenchEAGuide } from 'uiSrc/slices/app/context'
 import {
   CodeButton,
   Group,
@@ -22,27 +25,55 @@ export interface Props {
   openInternalPage: (page: IInternalPage) => void;
 }
 
-const EnablementArea = ({ items, openScript, openInternalPage, loading }: Props) => {
+const EnablementArea = ({ items, openScript, loading }: Props) => {
+  const { search } = useLocation()
+  const history = useHistory()
+  const dispatch = useDispatch()
+  const { guidePath: guideFromContext } = useSelector(appContextWorkbenchEA)
   const [isInternalPageVisible, setIsInternalPageVisible] = useState(false)
-  const [internalPage, setInternalPage] = useState<IInternalPage>(
-    { backTitle: '', path: '', label: '' }
-  )
+  const [internalPage, setInternalPage] = useState<IInternalPage>({ path: '' })
+
+  useEffect(() => {
+    const pagePath = new URLSearchParams(search).get('guide')
+    if (pagePath) {
+      setIsInternalPageVisible(true)
+      setInternalPage({ path: pagePath })
+      return
+    }
+    if (guideFromContext) {
+      handleOpenInternalPage({ path: guideFromContext })
+      return
+    }
+    setIsInternalPageVisible(false)
+  }, [search])
 
   const handleOpenInternalPage = (page: IInternalPage) => {
-    setIsInternalPageVisible(true)
-    setInternalPage(page)
-    openInternalPage(page)
+    history.push({
+      search: `?guide=${page.path}`
+    })
   }
 
   const handleCloseInternalPage = () => {
-    setIsInternalPageVisible(false)
+    dispatch(resetWorkbenchEAGuide())
+    history.push({
+      // TODO: better to use query-string parser and update only one parameter (instead of replacing all)
+      search: ''
+    })
   }
 
   const renderSwitch = (item: IEnablementAreaItem) => {
     const { label, type, children, id, args } = item
     switch (type) {
       case EnablementAreaComponent.Group:
-        return <Group testId={id || label} label={label} {...args}>{renderTreeView(children || [])}</Group>
+        return (
+          <Group
+            testId={id}
+            label={label}
+            {...args}
+          >
+            {renderTreeView(children || [])}
+          </Group>
+        )
       case EnablementAreaComponent.CodeButton:
         return args?.path
           ? <LazyCodeButton label={label} {...args} />
@@ -91,7 +122,6 @@ const EnablementArea = ({ items, openScript, openInternalPage, loading }: Props)
           {internalPage?.path && (
             <LazyInternalPage
               onClose={handleCloseInternalPage}
-              backTitle={internalPage.backTitle}
               title={internalPage?.label}
               path={internalPage?.path}
             />

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

@@ -7,8 +7,9 @@ export interface Props {
   onClick: () => void;
   label: string;
   isLoading?: boolean;
+  className?: string;
 }
-const CodeButton = ({ onClick, label, isLoading }: Props) => (
+const CodeButton = ({ onClick, label, isLoading, ...rest }: Props) => (
   <EuiButton
     iconSide="right"
     isLoading={isLoading}
@@ -19,6 +20,7 @@ const CodeButton = ({ onClick, label, isLoading }: Props) => (
     contentProps={{ className: styles.button }}
     textProps={{ className: styles.buttonText }}
     data-testid={`preselect-${label}`}
+    {...rest}
   >
     {label}
   </EuiButton>

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { render } from 'uiSrc/utils/test-utils'
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import Group, { Props } from './Group'
 
 const mockedProps = mock<Props>()
@@ -20,6 +20,16 @@ describe('Group', () => {
       <Group {...instance(mockedProps)} testId={testId} label={label}>{children}</Group>
     )
     const accordionButton = queryByTestId(`accordion-button-${testId}`)
+
     expect(accordionButton).toHaveTextContent(label)
   })
+  it('should emit onToggle', () => {
+    const callback = jest.fn()
+    const label = 'Quick Guides'
+
+    render(<Group {...instance(mockedProps)} testId={testId} label={label} onToggle={callback} />)
+    fireEvent.click(screen.getByTestId(`accordion-button-${testId}`))
+
+    expect(callback).toHaveBeenCalled()
+  })
 })

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

@@ -10,10 +10,11 @@ export interface Props {
   initialIsOpen?: boolean;
   forceState?: 'open' | 'closed';
   arrowDisplay?: 'left' | 'right' | 'none';
+  onToggle?: (isOpen: boolean) => void;
 }
 
 const Group = (props: Props) => {
-  const { label, children, testId, forceState, withBorder = false, arrowDisplay = 'right', initialIsOpen = false } = props
+  const { label, children, testId, forceState, withBorder = false, arrowDisplay = 'right', initialIsOpen = false, onToggle } = props
   const buttonContent = (
     <EuiText className="group-header" size="m">
       {label}
@@ -29,6 +30,7 @@ const Group = (props: Props) => {
       buttonProps={buttonProps}
       forceState={forceState}
       arrowDisplay={arrowDisplay}
+      onToggle={onToggle}
       initialIsOpen={initialIsOpen}
       style={{ whiteSpace: 'nowrap', width: 'auto' }}
       className={[withBorder ? 'withBorder' : ''].join(' ')}

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

@@ -11,18 +11,17 @@ export interface Props {
   label: string;
   children: React.ReactElement[] | string;
   path?: string,
-  backTitle?: string;
   size?: 's' | 'xs' | 'm' | 'l';
   iconType?: string;
   iconPosition?: 'left' | 'right';
   toolTip?: string;
 }
 const InternalLink = (props: Props) => {
-  const { label, testId, children, backTitle = '', path = '', size = 's', iconType, iconPosition = 'left', toolTip } = props
+  const { label, testId, children, path = '', size = 's', iconType, iconPosition = 'left', toolTip } = props
   const { openPage } = useContext(EnablementAreaContext)
   const handleOpenPage = () => {
     if (path) {
-      openPage({ path, label, backTitle: backTitle || label })
+      openPage({ path, label })
     }
   }
 

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useRef, useEffect } from 'react'
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -10,6 +10,7 @@ import {
 } from '@elastic/eui'
 import JsxParser from 'react-jsx-parser'
 import cx from 'classnames'
+import { debounce } from 'lodash'
 
 import {
   LazyCodeButton,
@@ -29,9 +30,26 @@ export interface Props {
   content: string;
   isLoading?: boolean;
   error?: string;
+  scrollTop?: number;
+  onScroll?: (top: number) => void;
 }
-const InternalPage = ({ onClose, title, backTitle, isLoading, error, content }: Props) => {
+const InternalPage = (props: Props) => {
+  const { onClose, title, backTitle, isLoading, error, content, onScroll, scrollTop } = props
   const components: any = { LazyCodeButton, Carousel, InternalLink, Image }
+  const containerRef = useRef<HTMLDivElement>(null)
+  const handleScroll = debounce(() => {
+    if (containerRef.current && onScroll) {
+      onScroll(containerRef.current.scrollTop)
+    }
+  }, 500)
+
+  useEffect(() => {
+    if (!isLoading && !error && scrollTop && containerRef.current) {
+      setTimeout(() => {
+        containerRef?.current?.scroll(0, scrollTop)
+      }, 0)
+    }
+  }, [isLoading, scrollTop])
 
   const contentComponent = useMemo(() => (
     <JsxParser
@@ -43,7 +61,7 @@ const InternalPage = ({ onClose, title, backTitle, isLoading, error, content }:
   ), [content])
 
   return (
-    <div className={styles.container} data-test-subj="internal-page">
+    <div ref={containerRef} className={styles.container} data-test-subj="internal-page" onScroll={handleScroll}>
       <EuiFlyoutHeader className={styles.header}>
         <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
           <EuiFlexItem grow={false}>

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

@@ -72,7 +72,7 @@
     position: sticky;
     bottom: 0;
     border-top: 1px solid var(--separatorColor);
-    padding-top: 12px;
+    padding: 12px 0;
     background-color: var(--euiColorEmptyShade);
   }
 }