#RI-4326 - add highlighting for bulk upload

Author: rsergeenko

redisinsight/ui/src/constants/featuresHighlighting.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { PageNames } from 'uiSrc/constants/pages'
 
 export type FeaturesHighlightingType = 'plain' | 'tooltip' | 'popover'
 
@@ -9,11 +8,11 @@ interface BuildHighlightingFeature {
   content?: string | React.ReactElement
   page?: string
 }
-export const BUILD_FEATURES: { [key: string]: BuildHighlightingFeature } = {
-  myTutorials: {
+
+export const BUILD_FEATURES: Record<string, BuildHighlightingFeature> = {
+  bulkUpload: {
     type: 'tooltip',
-    title: 'Upload your own tutorials',
-    content: 'Upload tutorials to work in Workbench and share them with others.',
-    page: PageNames.workbench
+    title: (<span><i>New:</i> Bulk Upload</span>),
+    content: 'Upload your data in bulk from a file.',
   }
-}
+} as const

redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx

@@ -23,10 +23,17 @@ import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiS
 import { isRedisearchAvailable } from 'uiSrc/utils'
 
 import { OnboardingStepName, OnboardingSteps } from 'uiSrc/constants/onboarding'
-import { incrementOnboardStepAction } from 'uiSrc/slices/app/features'
+import {
+  appFeatureHighlightingSelector,
+  incrementOnboardStepAction,
+  removeFeatureFromHighlighting
+} from 'uiSrc/slices/app/features'
 import { OnboardingTour } from 'uiSrc/components'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import { setBulkActionType } from 'uiSrc/slices/browser/bulkActions'
+import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
+import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
+import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
 import AutoRefresh from '../auto-refresh'
 import FilterKeyType from '../filter-key-type'
 import RediSearchIndexesList from '../redisearch-key-list'
@@ -77,6 +84,8 @@ const KeysHeader = (props: Props) => {
   const { id: instanceId, modules } = useSelector(connectedInstanceSelector)
   const { viewType, searchMode, isFiltered } = useSelector(keysSelector)
   const { selectedIndex } = useSelector(redisearchSelector)
+  const { features } = useSelector(appFeatureHighlightingSelector)
+  const { bulkUpload: bulkUploadHighlighting } = getHighlightingFeatures(features)
 
   const rootDivRef: Ref<HTMLDivElement> = useRef(null)
 
@@ -241,6 +250,7 @@ const KeysHeader = (props: Props) => {
   const openBulkActions = () => {
     dispatch(setBulkActionType(BulkActionsType.Delete))
     handleBulkActionsPanel(true)
+    dispatch(removeFeatureFromHighlighting('bulkUpload'))
   }
 
   const handleSwitchView = (type: KeyViewType) => {
@@ -301,18 +311,27 @@ const KeysHeader = (props: Props) => {
   )
 
   const BulkActionsBtn = (
-    <EuiToolTip content="Bulk Actions" position="top">
-      <EuiButton
-        fill
-        size="s"
-        color="secondary"
-        onClick={openBulkActions}
-        className={styles.bulkActions}
-        data-testid="btn-bulk-actions"
-      >
-        <EuiIcon type={BulkActionsIcon} />
-      </EuiButton>
-    </EuiToolTip>
+    <HighlightedFeature
+      isHighlight={bulkUploadHighlighting}
+      title={BUILD_FEATURES?.bulkUpload?.title}
+      content={BUILD_FEATURES?.bulkUpload?.content}
+      type={BUILD_FEATURES?.bulkUpload?.type}
+      wrapperClassName={styles.bulkActionsHighlighting}
+      hideFirstChild
+    >
+      <EuiToolTip content="Bulk Actions" position="top">
+        <EuiButton
+          fill
+          size="s"
+          color="secondary"
+          onClick={openBulkActions}
+          className={styles.bulkActions}
+          data-testid="btn-bulk-actions"
+        >
+          <EuiIcon type={BulkActionsIcon} />
+        </EuiButton>
+      </EuiToolTip>
+    </HighlightedFeature>
   )
 
   const ViewSwitch = (width: number) => (

redisinsight/ui/src/pages/browser/components/keys-header/styles.module.scss

@@ -29,6 +29,10 @@
       padding: 0 !important;
     }
   }
+
+  .bulkActionsHighlighting {
+    display: inline-block;
+  }
 }
 
 .top,

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

@@ -15,8 +15,7 @@ import {
   FormValues
 } from 'uiSrc/pages/workbench/components/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { appFeatureHighlightingSelector, removeFeatureFromHighlighting } from 'uiSrc/slices/app/features'
-import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
+
 import {
   getMarkdownPathByManifest,
   getWBSourcePath
@@ -69,8 +68,6 @@ const EnablementArea = (props: Props) => {
   const history = useHistory()
   const dispatch = useDispatch()
   const { search: searchEAContext } = useSelector(appContextWorkbenchEA)
-  const { features } = useSelector(appFeatureHighlightingSelector)
-  const { myTutorials: myTutorialsHighlighting } = getHighlightingFeatures(features)
 
   const [isInternalPageVisible, setIsInternalPageVisible] = useState(false)
   const [isCreateOpen, setIsCreateOpen] = useState(false)
@@ -80,18 +77,6 @@ const EnablementArea = (props: Props) => {
   const searchRef = useRef<string>('')
   const { instanceId = '' } = useParams<{ instanceId: string }>()
 
-  useEffect(() => {
-    if (isCreateOpen && myTutorialsHighlighting) {
-      dispatch(removeFeatureFromHighlighting('myTutorials'))
-    }
-
-    return () => {
-      if (myTutorialsHighlighting) {
-        dispatch(removeFeatureFromHighlighting('myTutorials'))
-      }
-    }
-  }, [isCreateOpen, myTutorialsHighlighting])
-
   useEffect(() => {
     searchRef.current = search
     const pagePath = new URLSearchParams(search).get('item')
@@ -215,9 +200,6 @@ const EnablementArea = (props: Props) => {
     const currentSourcePath = sourcePath + (uriPath ? `${uriPath}` : (args?.path ?? ''))
     const currentManifestPath = `${manifestPath}/${key}`
 
-    const isMyTutorialsGroup = level === 0 && currentSourcePath.startsWith(ApiEndpoints.CUSTOM_TUTORIALS_PATH)
-    const isHighlightGroup = isMyTutorialsGroup && myTutorialsHighlighting
-
     switch (type) {
       case EnablementAreaComponent.Group:
         return (
@@ -229,7 +211,6 @@ const EnablementArea = (props: Props) => {
             isShowActions={currentSourcePath.startsWith(ApiEndpoints.CUSTOM_TUTORIALS_PATH)}
             onCreate={() => setIsCreateOpen((v) => !v)}
             onDelete={onDeleteCustomTutorial}
-            highlightGroup={isHighlightGroup}
             {...args}
           >
             <>

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

@@ -5,8 +5,6 @@ import { useParams } from 'react-router-dom'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { workbenchCustomTutorialsSelector } from 'uiSrc/slices/workbench/wb-custom-tutorials'
-import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
-import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
 import DeleteTutorialButton from '../DeleteTutorialButton'
 import { EAItemActions } from '../../constants'
 
@@ -45,7 +43,6 @@ const Group = (props: Props) => {
     onCreate,
     onDelete,
     triggerStyle,
-    highlightGroup
   } = props
   const { deleting: deletingCustomTutorials } = useSelector(workbenchCustomTutorialsSelector)
   const { instanceId = '' } = useParams<{ instanceId: string }>()
@@ -90,18 +87,9 @@ const Group = (props: Props) => {
 
   const buttonContent = (
     <div className="group-header-wrapper">
-      <HighlightedFeature
-        title={BUILD_FEATURES.myTutorials?.title}
-        content={BUILD_FEATURES.myTutorials?.content}
-        type={BUILD_FEATURES.myTutorials?.type}
-        isHighlight={highlightGroup}
-        dotClassName="dotHighlighting"
-        wrapperClassName="wrapperHighlighting"
-      >
-        <EuiText className="group-header" size="m">
-          {label}
-        </EuiText>
-      </HighlightedFeature>
+      <EuiText className="group-header" size="m">
+        {label}
+      </EuiText>
       {isShowActions && actionsContent}
     </div>
   )

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

@@ -112,15 +112,4 @@
       background-color: var(--hoverInListColorDarken);
     }
   }
-
-  .dotHighlighting {
-    width: 8px;
-    height: 8px;
-    top: 0;
-    right: -8px;
-  }
-
-  .wrapperHighlighting {
-    display: flex;
-  }
 }