#RI-6345 - fix tutorials state after uploading, hide upload button when collapsed

Author: rsergeenko

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

@@ -79,7 +79,7 @@ const Group = (props: Props) => {
 
   const actionsContent = (
     <>
-      {actions?.includes(EAItemActions.Create) && (
+      {actions?.includes(EAItemActions.Create) && isGroupOpen && (
         <OnboardingTour
           options={ONBOARDING_FEATURES.EXPLORE_CUSTOM_TUTORIALS}
           anchorPosition="downLeft"

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
 import { EuiListGroup } from '@elastic/eui'
 import { isArray } from 'lodash'
@@ -8,7 +8,11 @@ import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/inter
 
 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 {
@@ -47,6 +51,10 @@ const Navigation = (props: Props) => {
   const dispatch = useDispatch()
   const { instanceId = '' } = useParams<{ instanceId: string }>()
 
+  useEffect(() => () => {
+    dispatch(setWbCustomTutorialsState())
+  }, [])
+
   const submitCreate = ({ file, link }: FormValues) => {
     const formData = new FormData()
 
@@ -66,7 +74,10 @@ const Navigation = (props: Props) => {
 
     dispatch(uploadCustomTutorial(
       formData,
-      () => setIsCreateOpen(false),
+      () => {
+        setIsCreateOpen(false)
+        dispatch(setWbCustomTutorialsState(true))
+      },
     ))
   }
 

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