Merge pull request #1971 from RedisInsight/fe/feature/RI-4321_tutorial-name

#RI-4321 - show tutorial name by label

Author: mariasergeenko

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

@@ -292,7 +292,7 @@ const EnablementArea = (props: Props) => {
     level: number = 0,
   ) => (
     elements?.map((item) => (
-      <div className="fluid" key={item.id}>
+      <div className="fluid" key={`${item.id}_${item._key}`}>
         {renderSwitch(item, paths, level)}
       </div>
     )))

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

@@ -94,7 +94,7 @@ const LazyInternalPage = ({ onClose, title, path, sourcePath, manifest, manifest
       manifestPath={manifestPath}
       sourcePath={sourcePath}
       onClose={onClose}
-      title={startCase(title || pageData.name)}
+      title={startCase(title || pageData.label)}
       backTitle={startCase(pageData?.parent)}
       isLoading={isMarkdownLoading}
       content={pageData.content}

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/getFileInfo.ts

@@ -8,6 +8,7 @@ import { EAManifestFirstKey } from 'uiSrc/pages/workbench/components/enablement-
 export interface IFileInfo {
   extension: string
   name: string
+  label: string
   parent: string
   location: string
   _key?: Nullable<string>
@@ -17,17 +18,27 @@ export const getFileInfo = (
   { manifestPath, path }: { manifestPath?: Nullable<string>, path: string },
   manifest?: Nullable<IEnablementAreaItem[]>
 ): IFileInfo => {
-  const defaultResult: IFileInfo = { extension: '', name: '', parent: '', location: '' }
+  const defaultResult: IFileInfo = { extension: '', name: '', parent: '', location: '', label: '' }
   try {
     const url = IS_ABSOLUTE_PATH.test(path) ? new URL(path) : new URL(path, API_URL)
     const pathNames = url.pathname.split('/')
     const file = pathNames.pop() || ''
     const markdownParent = manifest ? getParentByManifest(manifest, manifestPath) : null
     const [fileName, extension] = file.split('.')
 
+    let markdownInfo: Record<string, any> = {}
+    if (manifestPath && markdownParent?.children) {
+      markdownInfo = get(
+        markdownParent.children,
+        manifestPath.split('/')?.pop() as string || '-1',
+        {}
+      )
+    }
+
     return {
       location: pathNames.join('/'),
       name: fileName || '',
+      label: markdownInfo?.label || fileName,
       extension: extension || '',
       parent: markdownParent ? markdownParent.label : (pathNames.pop() || '').replace(/[-_]+/g, ' '),
       _key: manifestPath?.split('/').pop() ?? null

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/tests/getFileInfo.spec.ts

@@ -14,43 +14,43 @@ import {
 const getFileInfoTests = [
   {
     input: [{ path: 'static/workbench/quick-guides/file-name.txt' }],
-    expected: { name: 'file-name', parent: 'quick guides', extension: 'txt', location: '/static/workbench/quick-guides', _key: null }
+    expected: { name: 'file-name', parent: 'quick guides', extension: 'txt', location: '/static/workbench/quick-guides', label: 'file-name', _key: null }
   },
   {
     input: [{ path: 'parent_folder\\file_name.txt' }],
-    expected: { name: 'file_name', parent: 'parent folder', extension: 'txt', location: '/parent_folder', _key: null }
+    expected: { name: 'file_name', parent: 'parent folder', extension: 'txt', location: '/parent_folder', label: 'file_name', _key: null }
   },
   {
     input: [{ path: 'https://domen.com/workbench/enablement-area/introduction.html' }],
-    expected: { name: 'introduction', parent: 'enablement area', extension: 'html', location: '/workbench/enablement-area', _key: null }
+    expected: { name: 'introduction', parent: 'enablement area', extension: 'html', location: '/workbench/enablement-area', label: 'introduction', _key: null }
   },
   {
     input: [{ path: 'https://domen.com/introduction.html' }],
-    expected: { name: 'introduction', parent: '', extension: 'html', location: '', _key: null }
+    expected: { name: 'introduction', parent: '', extension: 'html', location: '', label: 'introduction', _key: null }
   },
   {
     input: [{ path: '/introduction.html' }],
-    expected: { name: 'introduction', parent: '', extension: 'html', location: '', _key: null }
+    expected: { name: 'introduction', parent: '', extension: 'html', location: '', label: 'introduction', _key: null }
   },
   {
     input: [{ path: '//parent/markdown.md' }],
-    expected: { name: '', parent: '', extension: '', location: '' }
+    expected: { name: '', parent: '', extension: '', location: '', label: '', }
   },
   {
     input: [{ path: '/file.txt' }],
-    expected: { name: 'file', parent: '', extension: 'txt', location: '', _key: null }
+    expected: { name: 'file', parent: '', extension: 'txt', location: '', label: 'file', _key: null }
   },
   {
     input: [{ path: '' }],
-    expected: { name: '', parent: '', extension: '', location: '', _key: null }
+    expected: { name: '', parent: '', extension: '', location: '', label: '', _key: null }
   },
   {
     input: [{ path: '/' }],
-    expected: { name: '', parent: '', extension: '', location: '', _key: null }
+    expected: { name: '', parent: '', extension: '', location: '', label: '', _key: null }
   },
   {
     input: [{ manifestPath: 'quick-guides/0/0', path: '/static/workbench/quick-guides/document/learn-more.md' }, MOCK_GUIDES_ITEMS],
-    expected: { name: 'learn-more', parent: MOCK_GUIDES_ITEMS[0].label, extension: 'md', location: '/static/workbench/quick-guides/document', _key: '0' }
+    expected: { name: 'learn-more', parent: MOCK_GUIDES_ITEMS[0].label, extension: 'md', location: '/static/workbench/quick-guides/document', label: MOCK_GUIDES_ITEMS[0].children[0].label, _key: '0' }
   }
 ]