feat: implementation of links to tutorials

src/pages/Experiments/TasksMenuBlock/TasksMenu/DraggableItem/index.js

@@ -2,6 +2,8 @@ import React, { useEffect, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
 import { DragSource } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
+import { LinkOutlined } from '@ant-design/icons';
+
 
 import { DragIndicatorComponent } from 'assets';
 
@@ -11,6 +13,7 @@ const MenuItem = ({
   connectDragPreview,
   children,
   disabled,
+  tutorialUrl,
 }) => {
   const opacity = useMemo(() => (isDragging ? 0.6 : 1), [isDragging]);
 
@@ -40,6 +43,13 @@ const MenuItem = ({
       </div>
 
       <div className='draggable-item-content-text'>{children}</div>
+
+      {tutorialUrl &&
+        <div className='link-item-content-icon'>
+          <a className='icon-url' href={tutorialUrl} target='_blank' rel='noreferrer'> <LinkOutlined /> </a>
+        </div>
+      }
+
     </div>
   );
 };
@@ -50,6 +60,7 @@ MenuItem.propTypes = {
   connectDragPreview: PropTypes.any,
   children: PropTypes.node,
   disabled: PropTypes.bool,
+  tutorialUrl: PropTypes.string,
 };
 
 const DraggableItem = DragSource(
@@ -88,6 +99,11 @@ DraggableItem.propTypes = {
   name: PropTypes.string.isRequired,
   icon: PropTypes.node.isRequired,
   handleSelect: PropTypes.func.isRequired,
+  tutorialUrl: PropTypes.string,
 };
 
+DraggableItem.defaultProps = {
+  tutorialUrl: ''
+}
+
 export default memo(DraggableItem);

src/pages/Experiments/TasksMenuBlock/TasksMenu/index.js

@@ -80,6 +80,7 @@ const TasksMenu = ({
         disabled={disabled}
         taskType={taskType}
         handleSelect={handleSelect}
+        tutorialUrl= {'https://google.com'}
       >
         {renderTooltip(name, description, uuid, title)}
       </DraggableItem>

src/pages/Experiments/TasksMenuBlock/TasksMenu/style.less

@@ -9,6 +9,14 @@
 
   padding-left: 24px !important;
 
+  .icon-url {
+    position: relative;
+  }
+  .link-item-content-icon {
+    padding-left: 24px;
+    margin-left: auto;
+  }
+
   &:active {
     background-color: transparent;
   }