Merge pull request #4109 from RedisInsight/be/feature/RI-6321

#RI-6321 - set my tutorials collapsed by default

Author: vlad-dargel

redisinsight/api/src/__mocks__/custom-tutorial.ts

@@ -143,7 +143,7 @@ export const globalCustomTutorialManifest = {
   _actions: [CustomTutorialActions.CREATE],
   args: {
     withBorder: true,
-    initialIsOpen: true,
+    initialIsOpen: false,
   },
   children: [
     mockCustomTutorialManifest,

redisinsight/api/src/modules/custom-tutorial/custom-tutorial.service.ts

@@ -145,7 +145,7 @@ export class CustomTutorialService {
       _actions: [CustomTutorialActions.CREATE],
       args: {
         withBorder: true,
-        initialIsOpen: true,
+        initialIsOpen: false,
       },
       children,
     };

redisinsight/api/test/api/custom-tutorials/POST-custom-tutorials.test.ts

@@ -101,7 +101,7 @@ const globalManifest = {
     'create',
   ],
   args: {
-    initialIsOpen: true,
+    initialIsOpen: false,
     withBorder: true,
   },
   children: [],

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

@@ -73,13 +73,15 @@ const Group = (props: Props) => {
   }
 
   const handleOpen = (isOpen: boolean) => {
+    if (forceState === 'open') return
+
     setIsGroupOpen(isOpen)
     onToggle?.(isOpen)
   }
 
   const actionsContent = (
     <>
-      {actions?.includes(EAItemActions.Create) && (
+      {actions?.includes(EAItemActions.Create) && (isGroupOpen || forceState === 'open') && (
         <OnboardingTour
           options={ONBOARDING_FEATURES.EXPLORE_CUSTOM_TUTORIALS}
           anchorPosition="downLeft"

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

@@ -1,16 +1,22 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
 import { EuiListGroup } from '@elastic/eui'
 import { isArray } from 'lodash'
 import { useParams } from 'react-router-dom'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 
 import { ApiEndpoints, EAItemActions, EAManifestFirstKey } from 'uiSrc/constants'
 import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
-import { deleteCustomTutorial, uploadCustomTutorial } from 'uiSrc/slices/workbench/wb-custom-tutorials'
+import {
+  deleteCustomTutorial,
+  setWbCustomTutorialsState,
+  uploadCustomTutorial
+} from 'uiSrc/slices/workbench/wb-custom-tutorials'
 
 import UploadWarning from 'uiSrc/components/upload-warning'
+import { appFeatureOnboardingSelector } from 'uiSrc/slices/app/features'
+import { OnboardingSteps } from 'uiSrc/constants/onboarding'
 import {
   FormValues
 } from '../UploadTutorialForm/UploadTutorialForm'
@@ -41,12 +47,19 @@ const PATHS = {
 
 const Navigation = (props: Props) => {
   const { tutorials, customTutorials, isInternalPageVisible } = props
+  const { currentStep, isActive } = useSelector(appFeatureOnboardingSelector)
 
   const [isCreateOpen, setIsCreateOpen] = useState(false)
 
   const dispatch = useDispatch()
   const { instanceId = '' } = useParams<{ instanceId: string }>()
 
+  const isCustomTutorialsOnboarding = currentStep === OnboardingSteps.CustomTutorials && isActive
+
+  useEffect(() => () => {
+    dispatch(setWbCustomTutorialsState())
+  }, [])
+
   const submitCreate = ({ file, link }: FormValues) => {
     const formData = new FormData()
 
@@ -66,7 +79,10 @@ const Navigation = (props: Props) => {
 
     dispatch(uploadCustomTutorial(
       formData,
-      () => setIsCreateOpen(false),
+      () => {
+        setIsCreateOpen(false)
+        dispatch(setWbCustomTutorialsState(true))
+      },
     ))
   }
 
@@ -111,6 +127,7 @@ const Navigation = (props: Props) => {
             onCreate={() => setIsCreateOpen((v) => !v)}
             onDelete={onDeleteCustomTutorial}
             isPageOpened={isInternalPageVisible}
+            forceState={isCustomTutorials && isCustomTutorialsOnboarding ? 'open' : undefined}
             {...args}
           >
             {isCustomTutorials && actions?.includes(EAItemActions.Create) && (

redisinsight/ui/src/constants/mocks/mock-custom-tutorials.ts

@@ -6,6 +6,9 @@ export const MOCK_CUSTOM_TUTORIALS_ITEMS: IEnablementAreaItem[] = [
     label: 'MY TUTORIALS',
     type: EnablementAreaComponent.Group,
     _actions: ['create'],
+    args: {
+      initialIsOpen: true
+    },
     children: [
       {
         id: '12mfp-rem',

redisinsight/ui/src/slices/tests/workbench/wb-custom-tutorials.spec.ts

@@ -28,6 +28,7 @@ import reducer, {
   uploadDataBulkFailed,
   uploadDataBulkAction,
   defaultItems,
+  setWbCustomTutorialsState,
 } from '../../workbench/wb-custom-tutorials'
 
 let store: typeof mockedStore
@@ -371,6 +372,85 @@ describe('slices', () => {
 
       expect(workbenchCustomTutorialsSelector(rootState)).toEqual(state)
     })
+
+    describe('setWbCustomTutorialsState', () => {
+      it('should properly set open state', () => {
+        // Arrange
+        const currentState = {
+          ...initialState,
+          items: [{
+            ...defaultItems[0],
+            args: {
+              initialIsOpen: false
+            },
+            children: MOCK_TUTORIALS_ITEMS
+          }]
+        }
+
+        const state = {
+          ...initialState,
+          items: [{
+            ...defaultItems[0],
+            args: {
+              defaultInitialIsOpen: false,
+              initialIsOpen: true
+            },
+            children: MOCK_TUTORIALS_ITEMS
+          }]
+        }
+
+        // Act
+        const nextState = reducer(currentState, setWbCustomTutorialsState(true))
+
+        // Assert
+        const rootState = Object.assign(initialStateDefault, {
+          workbench: {
+            customTutorials: nextState,
+          },
+        })
+
+        expect(workbenchCustomTutorialsSelector(rootState)).toEqual(state)
+      })
+
+      it('should properly return open state', () => {
+        // Arrange
+        const currentState = {
+          ...initialState,
+          items: [{
+            ...defaultItems[0],
+            args: {
+              defaultInitialIsOpen: false,
+              initialIsOpen: true
+            },
+            children: MOCK_TUTORIALS_ITEMS
+          }]
+        }
+
+        const state = {
+          ...initialState,
+          items: [{
+            ...defaultItems[0],
+            args: {
+              defaultInitialIsOpen: false,
+              initialIsOpen: false
+            },
+            children: MOCK_TUTORIALS_ITEMS
+          }]
+        }
+
+        // Act
+        const nextState = reducer(currentState, setWbCustomTutorialsState())
+
+        // Assert
+        const rootState = Object.assign(initialStateDefault, {
+          workbench: {
+            customTutorials: nextState,
+          },
+        })
+
+        expect(workbenchCustomTutorialsSelector(rootState)).toEqual(state)
+      })
+    })
   })
 
   // thunks

redisinsight/ui/src/slices/workbench/wb-custom-tutorials.ts

@@ -1,8 +1,8 @@
-import { createSlice } from '@reduxjs/toolkit'
-import { remove } from 'lodash'
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { isUndefined, remove } from 'lodash'
 import { AxiosError } from 'axios'
 import { ApiEndpoints } from 'uiSrc/constants'
-import { getApiErrorMessage, getUrl, isStatusSuccessful, } from 'uiSrc/utils'
+import { getApiErrorMessage, getUrl, isStatusSuccessful, Maybe, } from 'uiSrc/utils'
 import { apiService } from 'uiSrc/services'
 import {
   EnablementAreaComponent,
@@ -86,7 +86,19 @@ const workbenchCustomTutorialsSlice = createSlice({
     },
     uploadDataBulkFailed: (state, { payload }) => {
       remove(state.bulkUpload.pathsInProgress, (p) => p === payload)
-    }
+    },
+    setWbCustomTutorialsState: (state, { payload }: PayloadAction<Maybe<boolean>>) => {
+      if (state.items[0].args) {
+        const { defaultInitialIsOpen, initialIsOpen } = state.items[0].args
+        if (isUndefined(payload)) {
+          state.items[0].args.initialIsOpen = defaultInitialIsOpen ?? initialIsOpen
+          return
+        }
+
+        state.items[0].args.defaultInitialIsOpen = initialIsOpen
+        state.items[0].args.initialIsOpen = payload
+      }
+    },
   }
 })
 
@@ -108,6 +120,7 @@ export const {
   uploadDataBulk,
   uploadDataBulkSuccess,
   uploadDataBulkFailed,
+  setWbCustomTutorialsState,
 } = workbenchCustomTutorialsSlice.actions
 
 // The reducer

tests/e2e/pageObjects/components/explore-tab.ts

@@ -57,11 +57,11 @@ export class ExploreTab {
      * Run code
      * @param block Name of the block
      */
-    async   runBlockCode(block: string): Promise<void> {
+    async runBlockCode(block: string): Promise<void> {
         const runButton = Selector(this.runMask.replace(/\$name/g, block));
         await t.scrollIntoView(runButton);
         await t.click(runButton);
-        if(await this.tutorialPopoverConfirmRunButton.exists){
+        if (await this.tutorialPopoverConfirmRunButton.exists) {
             await t.click(this.tutorialPopoverConfirmRunButton);
         }
     }
@@ -138,6 +138,7 @@ export class ExploreTab {
         if (await this.closeEnablementPage.exists) {
             await t.click(this.closeEnablementPage);
         }
+        await this.toggleMyTutorialPanel();
         await t.click(deleteTutorialBtn);
         await t.click(this.tutorialDeleteButton);
     }
@@ -149,4 +150,15 @@ export class ExploreTab {
     getTutorialByName(name: string): Selector {
         return Selector('div').withText(name);
     }
+
+    /**
+     * Expand/Collapse My tutorial Panel
+     * @param state State of panel
+     */
+    async toggleMyTutorialPanel(state: boolean = true): Promise<void> {
+        const currentState = await this.customTutorials.getAttribute('aria-expanded') === 'true';
+        if (currentState !== state) {
+            await t.click(this.customTutorials);
+        }
+    }
 }

tests/e2e/tests/web/regression/insights/import-tutorials.e2e.ts

@@ -73,6 +73,11 @@ test
         const tutorials = await browserPage.InsightsPanel.setActiveTab(ExploreTabs.Tutorials);
 
         await t.expect(tutorials.customTutorials.visible).ok('custom tutorials sections is not visible');
+        // Verify that user can see "My Tutorials" tab is collapsed by default in tutorials
+        await t.expect(tutorials.customTutorials.getAttribute('aria-expanded')).eql('false', 'My tutorials not closed by default');
+
+        // Expand My tutorials
+        await tutorials.toggleMyTutorialPanel();
         await t.click(tutorials.tutorialOpenUploadButton);
         await t.expect(tutorials.tutorialSubmitButton.hasAttribute('disabled')).ok('submit button is not disabled');
 
@@ -138,6 +143,7 @@ test
 
         await workbenchPage.NavigationHeader.togglePanel(true);
         const tutorials = await workbenchPage.InsightsPanel.setActiveTab(ExploreTabs.Tutorials);
+        await tutorials.toggleMyTutorialPanel();
         await t.click(tutorials.tutorialOpenUploadButton);
         // Verify that user can upload tutorials using a URL
         await t.typeText(tutorials.tutorialLinkField, link);
@@ -199,6 +205,7 @@ test
         // Upload custom tutorial
         await workbenchPage.NavigationHeader.togglePanel(true);
         const tutorials = await workbenchPage.InsightsPanel.setActiveTab(ExploreTabs.Tutorials);
+        await tutorials.toggleMyTutorialPanel();
         await t
             .click(tutorials.tutorialOpenUploadButton)
             .setFilesToUpload(tutorials.tutorialImport, [zipFilePath])
@@ -269,6 +276,7 @@ test
         // Upload custom tutorial
         await workbenchPage.NavigationHeader.togglePanel(true);
         const tutorials = await workbenchPage.InsightsPanel.setActiveTab(ExploreTabs.Tutorials);
+        await tutorials.toggleMyTutorialPanel();
         await t
             .click(tutorials.tutorialOpenUploadButton)
             .setFilesToUpload(tutorials.tutorialImport, [zipFilePath])