Merge [UI] from 1.3.1-next to 1.3.x

src/common/Download/Download.js

@@ -20,6 +20,7 @@ such restriction.
 import React, { useState, useEffect, useCallback, useRef } from 'react'
 import PropTypes from 'prop-types'
 import axios from 'axios'
+import classnames from 'classnames'
 import { useDispatch } from 'react-redux'
 import { useParams } from 'react-router-dom'
 
@@ -34,10 +35,14 @@ import colors from 'igz-controls/scss/colors.scss'
 
 const DEFAULT_FILE_NAME = 'mlrun-file'
 
-const Download = ({ fileName, path, user }) => {
+const Download = ({ disabled, fileName, path, user }) => {
   const [progress, setProgress] = useState(0)
   const [isDownload, setDownload] = useState(false)
   const params = useParams()
+  const downloadContainerClassnames = classnames(
+    'download-container',
+    disabled && 'download-container_disabled'
+  )
 
   const downloadRef = useRef(null)
   const dispatch = useDispatch()
@@ -149,14 +154,17 @@ const Download = ({ fileName, path, user }) => {
   }, [downloadCallback, downloadRef])
 
   const handleClick = () => {
-    if (downloadRef.current?.cancel) {
-      return downloadRef.current.cancel('cancel')
+    if (!disabled) {
+      if (downloadRef.current?.cancel) {
+        return downloadRef.current.cancel('cancel')
+      }
+
+      setDownload(!isDownload)
     }
-    setDownload(!isDownload)
   }
 
   return (
-    <div className="download-container" ref={downloadRef} onClick={handleClick}>
+    <div className={downloadContainerClassnames} ref={downloadRef} onClick={handleClick}>
       <ProgressRing
         radius={progressRingRadius}
         stroke={progressRingStroke}
@@ -166,7 +174,7 @@ const Download = ({ fileName, path, user }) => {
         <g className={!isDownload ? 'download' : 'downloading'}>
           <circle r="12" cx="20px" cy="20px" />
           {!isDownload ? (
-            <g className="download-container">
+            <g className="download-container__icon">
               <rect
                 width="9.05318"
                 height="1.50886"

src/common/Download/download.scss

@@ -2,15 +2,28 @@
 @import '~igz-controls/scss/shadows';
 
 .download-container {
-  .download {
-    cursor: pointer;
-    fill: $white;
+  &:not(.download-container_disabled) {
+    .download {
+      cursor: pointer;
 
-    &:hover {
-      fill: $alabaster;
+      &:hover {
+        fill: $mulledWineThree;
+      }
     }
   }
 
+  &.download-container_disabled {
+    .download-container__icon {
+      rect {
+        fill: $spunPearl;
+      }
+    }
+  }
+
+  .download {
+    fill: transparent;
+  }
+
   .downloading {
     cursor: pointer;
     fill: $malibu;
@@ -20,7 +33,7 @@
     }
   }
 
-  .download-container {
+  .download-container__icon {
     transform: translate(8px, 8px);
 
     rect {

src/common/TargetPath/TargetPath.js

@@ -17,7 +17,7 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { useParams } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 import { get, isNil, uniqBy } from 'lodash'
@@ -40,7 +40,7 @@ import {
 } from './targetPath.util'
 import featureStoreActions from '../../actions/featureStore'
 import projectAction from '../../actions/projects'
-import { MLRUN_STORAGE_INPUT_PATH_SCHEME } from '../../constants'
+import { ARTIFACT_OTHER_TYPE, DATASET_TYPE, MLRUN_STORAGE_INPUT_PATH_SCHEME } from '../../constants'
 import { fetchArtifact, fetchArtifacts } from '../../reducers/artifactsReducer'
 import { getFeatureReference } from '../../utils/resources'
 
@@ -141,8 +141,22 @@ const TargetPath = ({
       dataInputState.storePathType &&
       dataInputState.project
     ) {
-      if (dataInputState.storePathType === 'artifacts' && dataInputState.artifacts.length === 0) {
-        dispatch(fetchArtifacts({ project: dataInputState.project }))
+      if (
+        dataInputState.storePathType !== 'feature-vectors' &&
+        dataInputState.artifacts.length === 0
+      ) {
+        dispatch(
+          fetchArtifacts({
+            project: dataInputState.project,
+            filters: null,
+            config: {
+              params: {
+                category:
+                  dataInputState.storePathType === 'artifacts' ? ARTIFACT_OTHER_TYPE : DATASET_TYPE
+              }
+            }
+          })
+        )
           .unwrap()
           .then(artifacts => {
             setDataInputState(prev => ({
@@ -189,7 +203,7 @@ const TargetPath = ({
     const projectItem = dataInputState.projectItem
 
     if (dataInputState.inputProjectItemPathEntered && storePathType && projectName && projectItem) {
-      if (storePathType === 'artifacts' && dataInputState.artifactsReferences.length === 0) {
+      if (storePathType !== 'feature-vectors' && dataInputState.artifactsReferences.length === 0) {
         dispatch(fetchArtifact({ project: projectName, artifact: projectItem }))
           .unwrap()
           .then(artifacts => {
@@ -238,6 +252,10 @@ const TargetPath = ({
     setDataInputState
   ])
 
+  const generatedPathTips = useMemo(() => {
+    return pathTips(dataInputState.storePathType)
+  }, [dataInputState.storePathType])
+
   return (
     <>
       <FormCombobox
@@ -248,9 +266,7 @@ const TargetPath = ({
           pathPlaceholders[get(formState.values, `${formStateFieldInfo}.pathType`)] ?? ''
         }
         invalidText={`Field must be in "${
-          pathTips(dataInputState.storePathType)[
-            get(formState.values, `${formStateFieldInfo}.pathType`)
-          ]
+          generatedPathTips[get(formState.values, `${formStateFieldInfo}.pathType`)]
         }" format`}
         label={label}
         maxSuggestedMatches={

src/common/TargetPath/targetPath.util.js

@@ -26,7 +26,7 @@ import {
   S3_INPUT_PATH_SCHEME,
   V3IO_INPUT_PATH_SCHEME
 } from '../../constants'
-import { isNil } from 'lodash'
+import { isNil, uniqBy } from 'lodash'
 import { getArtifactReference, getParsedResource } from '../../utils/resources'
 
 export const pathPlaceholders = {
@@ -53,8 +53,13 @@ export const targetPathInitialState = {
   storePathType: ''
 }
 
-export const pathTips = storePathType => {
-  const pathType = storePathType === 'feature-vectors' ? 'feature-vector' : 'artifact'
+export const pathTips = projectItem => {
+  const pathType =
+    projectItem === 'feature-vectors'
+      ? 'feature-vector'
+      : projectItem === 'artifacts'
+      ? 'artifact'
+      : 'dataset'
 
   return {
     [MLRUN_STORAGE_INPUT_PATH_SCHEME]: `${pathType}s/my-project/my-${pathType}:my-tag" or "${pathType}s/my-project/my-${pathType}@my-uid`,
@@ -70,6 +75,10 @@ export const storePathTypes = [
     label: 'Artifacts',
     id: 'artifacts'
   },
+  {
+    label: 'Datasets',
+    id: 'datasets'
+  },
   {
     label: 'Feature vectors',
     id: 'feature-vectors'
@@ -80,11 +89,11 @@ export const handleStoreInputPathChange = (targetPathState, setTargetPathState,
   const pathItems = value.split('/')
   const [projectItem, projectItemReference] = getParsedResource(pathItems[2])
   const projectItems =
-    targetPathState[pathItems[0] === 'artifacts' ? 'artifacts' : 'featureVectors']
+    targetPathState[pathItems[0] !== 'feature-vectors' ? 'artifacts' : 'featureVectors']
   const projectItemIsEntered = projectItems.find(project => project.id === projectItem)
   const projectItemsReferences =
     targetPathState[
-      pathItems[0] === 'artifacts' ? 'artifactsReferences' : 'featureVectorsReferences'
+      pathItems[0] !== 'feature-vectors' ? 'artifactsReferences' : 'featureVectorsReferences'
     ]
   const projectItemReferenceIsEntered = projectItemsReferences.find(
     projectItemRef => projectItemRef.id === projectItemReference
@@ -206,23 +215,12 @@ export const generateComboboxMatchesList = (
   } else if (!inputProjectPathEntered && storePathTypes.some(type => type.id === storePathType)) {
     return projects.filter(proj => proj.id.startsWith(project))
   } else if (!inputProjectItemPathEntered) {
-    const selectedStorePathType = storePathType
-    const projectItems =
-      selectedStorePathType === 'artifacts'
-        ? artifacts
-        : selectedStorePathType === 'feature-vectors'
-        ? featureVectors
-        : null
+    const projectItems = storePathType === 'feature-vectors' ? featureVectors : artifacts
 
     return projectItems ? projectItems.filter(projItem => projItem.id.startsWith(projectItem)) : []
   } else if (!inputProjectItemReferencePathEntered) {
-    const selectedStorePathType = storePathType
     const projectItemsReferences =
-      selectedStorePathType === 'artifacts'
-        ? artifactsReferences
-        : selectedStorePathType === 'feature-vectors'
-        ? featureVectorsReferences
-        : null
+      storePathType === 'feature-vectors' ? featureVectorsReferences : artifactsReferences
 
     return projectItemsReferences
       ? projectItemsReferences.filter(projectItem =>
@@ -234,8 +232,8 @@ export const generateComboboxMatchesList = (
   }
 }
 
-export const generateArtifactsList = artifacts =>
-  artifacts
+export const generateArtifactsList = artifacts => {
+  const generatedArtifacts = artifacts
     .map(artifact => {
       const key = artifact.link_iteration ? artifact.link_iteration.db_key : artifact.key ?? ''
       return {
@@ -246,8 +244,11 @@ export const generateArtifactsList = artifacts =>
     .filter(artifact => artifact.label !== '')
     .sort((prevArtifact, nextArtifact) => prevArtifact.id.localeCompare(nextArtifact.id))
 
-export const generateArtifactsReferencesList = artifacts =>
-  artifacts
+  return uniqBy(generatedArtifacts, 'id')
+}
+
+export const generateArtifactsReferencesList = artifacts => {
+  const generatedArtifacts = artifacts
     .map(artifact => {
       const artifactReference = getArtifactReference(artifact)
 
@@ -268,3 +269,6 @@ export const generateArtifactsReferencesList = artifacts =>
         return prevRefTree.localeCompare(nextRefTree)
       }
     })
+
+  return uniqBy(generatedArtifacts, 'id')
+}

src/components/Datasets/Datasets.js

@@ -74,6 +74,7 @@ const Datasets = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const dispatch = useDispatch()
+  const frontendSpec = useSelector(store => store.appStore.frontendSpec)
 
   const detailsFormInitialValues = useMemo(
     () => ({
@@ -185,10 +186,11 @@ const Datasets = () => {
         setSelectedRowData,
         filtersStore.iter,
         filtersStore.tag,
-        params.projectName
+        params.projectName,
+        frontendSpec
       )
     },
-    [dispatch, filtersStore.iter, filtersStore.tag, params.projectName]
+    [dispatch, filtersStore.iter, filtersStore.tag, frontendSpec, params.projectName]
   )
 
   const handleRemoveRowData = useCallback(
@@ -219,10 +221,12 @@ const Datasets = () => {
   const tableContent = useMemo(() => {
     return filtersStore.groupBy === GROUP_BY_NAME
       ? latestItems.map(contentItem => {
-          return createDatasetsRowData(contentItem, params.projectName, true)
+          return createDatasetsRowData(contentItem, params.projectName, frontendSpec, true)
         })
-      : datasets.map(contentItem => createDatasetsRowData(contentItem, params.projectName))
-  }, [datasets, filtersStore.groupBy, latestItems, params.projectName])
+      : datasets.map(contentItem =>
+          createDatasetsRowData(contentItem, params.projectName, frontendSpec)
+        )
+  }, [datasets, filtersStore.groupBy, frontendSpec, latestItems, params.projectName])
 
   useEffect(() => {
     dispatch(removeDataSet({}))

src/components/Datasets/datasets.util.js

@@ -105,7 +105,8 @@ export const fetchDataSetRowData = async (
   setSelectedRowData,
   iter,
   tag,
-  projectName
+  projectName,
+  frontendSpec
 ) => {
   const dataSetIdentifier = getArtifactIdentifier(dataSet)
 
@@ -124,7 +125,9 @@ export const fetchDataSetRowData = async (
           return {
             ...state,
             [dataSetIdentifier]: {
-              content: result.map(artifact => createDatasetsRowData(artifact, projectName)),
+              content: result.map(artifact =>
+                createDatasetsRowData(artifact, projectName, frontendSpec)
+              ),
               error: null,
               loading: false
             }

src/components/FeatureSetsPanel/FeatureSetsPanelDataSource/FeatureSetsPanelDataSource.js

@@ -25,7 +25,11 @@ import PropTypes from 'prop-types'
 import FeatureSetsPanelDataSourceView from './FeatureSetsPanelDataSourceView'
 
 import featureStoreActions from '../../../actions/featureStore'
-import { MLRUN_STORAGE_INPUT_PATH_SCHEME } from '../../../constants'
+import {
+  ARTIFACT_OTHER_TYPE,
+  DATASET_TYPE,
+  MLRUN_STORAGE_INPUT_PATH_SCHEME
+} from '../../../constants'
 import { getParsedResource } from '../../../utils/resources'
 import {
   CSV,
@@ -95,7 +99,18 @@ const FeatureSetsPanelDataSource = ({
 
   useEffect(() => {
     if (urlProjectItemTypeEntered && urlProjectPathEntered && artifacts.length === 0) {
-      dispatch(fetchArtifacts({ project: data.url.project }))
+      dispatch(
+        fetchArtifacts({
+          project: data.url.project,
+          filters: null,
+          config: {
+            params: {
+              category:
+                data.url.projectItemType === 'artifacts' ? ARTIFACT_OTHER_TYPE : DATASET_TYPE
+            }
+          }
+        })
+      )
         .unwrap()
         .then(artifacts => {
           if (artifacts?.length > 0) {
@@ -106,6 +121,7 @@ const FeatureSetsPanelDataSource = ({
   }, [
     artifacts.length,
     data.url.project,
+    data.url.projectItemType,
     dispatch,
     urlProjectItemTypeEntered,
     urlProjectPathEntered