Merge pull request #1843 from RedisInsight/fe/feature/RI-4105_highlight-my-tutorials

#RI-4105 - highlight my tutorials

Author: nmammadli

redisinsight/ui/src/constants/featuresHighlighting.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { PageNames } from 'uiSrc/constants/pages'
 
 export type FeaturesHighlightingType = 'plain' | 'tooltip' | 'popover'
 
@@ -9,5 +10,10 @@ interface BuildHighlightingFeature {
   page?: string
 }
 export const BUILD_FEATURES: { [key: string]: BuildHighlightingFeature } = {
-
+  myTutorials: {
+    type: 'tooltip',
+    title: 'Upload your own tutorials',
+    content: 'Upload tutorials to work in Workbench and share them with others.',
+    page: PageNames.workbench
+  }
 }

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

@@ -15,6 +15,8 @@ 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
@@ -67,6 +69,9 @@ 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)
   const [internalPage, setInternalPage] = useState<IInternalPage>({ path: '' })
@@ -75,6 +80,18 @@ 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')
@@ -216,6 +233,9 @@ 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 (
@@ -227,6 +247,7 @@ 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,6 +5,8 @@ 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'
 
@@ -25,6 +27,7 @@ export interface Props {
   onToggle?: (isOpen: boolean) => void
   triggerStyle?: any
   isCustomTutorialsLoading?: boolean
+  highlightGroup?: boolean
 }
 
 const Group = (props: Props) => {
@@ -42,6 +45,7 @@ const Group = (props: Props) => {
     onCreate,
     onDelete,
     triggerStyle,
+    highlightGroup
   } = props
   const { deleting: deletingCustomTutorials } = useSelector(workbenchCustomTutorialsSelector)
   const { instanceId = '' } = useParams<{ instanceId: string }>()
@@ -86,9 +90,18 @@ const Group = (props: Props) => {
 
   const buttonContent = (
     <div className="group-header-wrapper">
-      <EuiText className="group-header" size="m">
-        {label}
-      </EuiText>
+      <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>
       {isShowActions && actionsContent}
     </div>
   )

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

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