merged changes

src/api/artifacts-api.js

@@ -23,10 +23,11 @@ import {
   DATASET_TYPE,
   MODEL_TYPE,
   SHOW_ITERATIONS,
-  TAG_FILTER_ALL_ITEMS
+  TAG_FILTER_ALL_ITEMS,
+  TAG_FILTER_LATEST
 } from '../constants'
 
-const fetchArtifacts = (project, filters, config = {}) => {
+const fetchArtifacts = (project, filters, config = {}, withLatestTag) => {
   const params = {}
 
   if (filters?.labels) {
@@ -37,6 +38,10 @@ const fetchArtifacts = (project, filters, config = {}) => {
     params['best-iteration'] = true
   }
 
+  if (filters?.tag && (withLatestTag || filters.tag !== TAG_FILTER_LATEST)) {
+    params.tag = filters.tag === TAG_FILTER_ALL_ITEMS ? '*' : filters.tag
+  }
+
   if (filters?.name) {
     params.name = `~${filters.name}`
   }
@@ -121,7 +126,7 @@ const artifactsApi = {
       params: { category: DATASET_TYPE }
     }
 
-    return fetchArtifacts(project, filters, newConfig)
+    return fetchArtifacts(project, filters, newConfig, true)
   },
   getFile: (project, file, iter, tag) => {
     return fetchArtifacts(
@@ -143,7 +148,7 @@ const artifactsApi = {
       params: { category: ARTIFACT_OTHER_TYPE, format: 'full' }
     }
 
-    return fetchArtifacts(project, filters, newConfig)
+    return fetchArtifacts(project, filters, newConfig, true)
   },
   getModel: (project, model, iter, tag) => {
     return fetchArtifacts(
@@ -177,7 +182,7 @@ const artifactsApi = {
       params: { category: MODEL_TYPE, format: 'full' }
     }
 
-    return fetchArtifacts(project, filters, newConfig)
+    return fetchArtifacts(project, filters, newConfig, true)
   },
   registerArtifact: (project, data) => {
     return mainHttpClientV2.post(`/projects/${project}/artifacts`, data)

src/common/FormTagFilter/FormTagFilter.js

@@ -21,7 +21,7 @@ import React, { useState, useRef, useEffect, useCallback, useMemo, useLayoutEffe
 import PropTypes from 'prop-types'
 import { Field, useField } from 'react-final-form'
 import { useSelector } from 'react-redux'
-import { isEqual } from 'lodash'
+import { isEqual, uniq } from 'lodash'
 import classnames from 'classnames'
 
 import { PopUpDialog } from 'igz-controls/components'
@@ -33,7 +33,7 @@ import { ReactComponent as Caret } from 'igz-controls/images/dropdown.svg'
 
 import './formTagFilters.scss'
 
-const FormTagFilter = ({ label, name }) => {
+const FormTagFilter = ({ content, label, name }) => {
   const { input } = useField(name)
   const [isDropDownMenuOpen, setIsDropDownMenuOpen] = useState(false)
   const [tagFilter, setTagFilter] = useState(input.value)
@@ -51,26 +51,44 @@ const FormTagFilter = ({ label, name }) => {
 
   const options = useMemo(() => {
     let newTagOptions = tagFilterOptions
+    let pageTagList = []
 
     if (filtersStore.tagOptions?.length > 0) {
       const defaultOptionsTags = tagFilterOptions.map(option => option.id)
+      pageTagList = [...tagFilterOptions]
+      let contentTagList = []
+
+      if (content) {
+        contentTagList = uniq(content.map(contentItem => contentItem.tag))
+      }
+
       newTagOptions = [
-        ...tagFilterOptions,
         ...filtersStore.tagOptions.reduce((acc, tag) => {
           if (!defaultOptionsTags.includes(tag)) {
-            acc.push({
-              label: tag,
-              id: tag
-            })
+            if (contentTagList.includes(tag)) {
+              pageTagList.push({
+                label: tag,
+                id: tag
+              })
+            } else {
+              acc.push({
+                label: tag,
+                id: tag
+              })
+            }
           }
 
           return acc
         }, [])
       ]
+
+      if (pageTagList.length > 2) {
+        pageTagList[pageTagList.length - 1].className = 'page-tag-list'
+      }
     }
 
-    return newTagOptions
-  }, [filtersStore.tagOptions])
+    return [...pageTagList, ...newTagOptions]
+  }, [content, filtersStore.tagOptions])
 
   useEffect(() => {
     if (!isEqual(options, filtersStore.tagOptions)) {
@@ -193,7 +211,8 @@ const FormTagFilter = ({ label, name }) => {
                   'form-tag-filter__dropdown-item',
                   tagFilter.length !== 0 &&
                     tagFilter === tag.id &&
-                    'form-tag-filter__dropdown-item_selected'
+                    'form-tag-filter__dropdown-item_selected',
+                  tag.className
                 )
 
                 return (

src/common/FormTagFilter/formTagFilters.scss

@@ -82,5 +82,9 @@
         background-color: $alabaster;
       }
     }
+
+    .page-tag-list {
+      border-bottom: $dividerBorder;
+    }
   }
 }

src/common/TargetPath/targetPath.util.js

@@ -304,9 +304,9 @@ export const generateArtifactsReferencesList = artifacts => {
       const [nextRefIter, nextRefTree] = nextRef.id.split('@')
 
       if (prevRefTree === nextRefTree) {
-        return prevRefIter.localeCompare(nextRefIter)
+        return prevRefIter && prevRefIter.localeCompare(nextRefIter)
       } else {
-        return prevRefTree.localeCompare(nextRefTree)
+        return prevRefTree && prevRefTree.localeCompare(nextRefTree)
       }
     })
 

src/components/ArtifactsActionBar/ArtifactsActionBar.js

@@ -46,6 +46,7 @@ import { ReactComponent as RefreshIcon } from 'igz-controls/images/refresh.svg'
 
 function ArtifactsActionBar({
   actionButtons,
+  artifacts,
   cancelRequest,
   filterMenuName,
   handleRefresh,
@@ -155,7 +156,7 @@ function ArtifactsActionBar({
               values={filtersInitialState}
               wizardClassName="artifacts-filters__wrapper"
             >
-              <ArtifactsFilters filterMenuName={filterMenuName} page={page} />
+              <ArtifactsFilters artifacts={artifacts} filterMenuName={filterMenuName} page={page} />
             </FilterMenuModal>
           </div>
           <div className="action-bar__actions">
@@ -199,6 +200,7 @@ ArtifactsActionBar.propTypes = {
       variant: PropTypes.string.isRequired
     })
   ),
+  artifacts: PropTypes.arrayOf(PropTypes.object).isRequired,
   cancelRequest: PropTypes.func,
   filterMenuName: PropTypes.string.isRequired,
   handleRefresh: PropTypes.func.isRequired,

src/components/ArtifactsActionBar/ArtifactsFilters.js

@@ -20,6 +20,7 @@ such restriction.
 import React from 'react'
 import { OnChange } from 'react-final-form-listeners'
 import { useForm } from 'react-final-form'
+import PropTypes from 'prop-types'
 
 import { FormInput, FormCheckBox } from 'igz-controls/components'
 import FormTagFilter from '../../common/FormTagFilter/FormTagFilter'
@@ -28,7 +29,7 @@ import { ITERATIONS_FILTER, LABELS_FILTER, SHOW_ITERATIONS, TAG_FILTER } from '.
 
 import './artifactsFilters.scss'
 
-const ArtifactsFilters = () => {
+const ArtifactsFilters = ({ artifacts }) => {
   const form = useForm()
 
   const handleIter = value => {
@@ -46,7 +47,7 @@ const ArtifactsFilters = () => {
         <OnChange name={LABELS_FILTER}>{handleLabelsChange}</OnChange>
       </div>
       <div className="form-row">
-        <FormTagFilter label="Version tag" name={TAG_FILTER} />
+        <FormTagFilter content={artifacts} label="Version tag" name={TAG_FILTER} />
       </div>
       <div className="form-row">
         <FormCheckBox
@@ -60,4 +61,8 @@ const ArtifactsFilters = () => {
   )
 }
 
+ArtifactsFilters.propTypes = {
+  artifacts: PropTypes.arrayOf(PropTypes.object).isRequired
+}
+
 export default ArtifactsFilters

src/components/Datasets/Datasets.js

@@ -20,7 +20,6 @@ such restriction.
 import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
-import { isNil } from 'lodash'
 
 import DatasetsView from './DatasetsView'
 import AddArtifactTagPopUp from '../../elements/AddArtifactTagPopUp/AddArtifactTagPopUp'
@@ -34,9 +33,11 @@ import {
   GROUP_BY_NAME,
   GROUP_BY_NONE,
   REQUEST_CANCELED,
+  SHOW_ITERATIONS,
   TAG_FILTER_ALL_ITEMS
 } from '../../constants'
 import {
+  fetchArtifactTags,
   fetchDataSet,
   fetchDataSets,
   removeDataSet,
@@ -56,8 +57,7 @@ import { getArtifactIdentifier } from '../../utils/getUniqueIdentifier'
 import { getViewMode } from '../../utils/helper'
 import { isDetailsTabExists } from '../../utils/isDetailsTabExists'
 import { openPopUp } from 'igz-controls/utils/common.util'
-import { setArtifactTags } from '../../utils/artifacts.util'
-import { setFilters } from '../../reducers/filtersReducer'
+import { getFilterTagOptions, setFilters } from '../../reducers/filtersReducer'
 import { setNotification } from '../../reducers/notificationReducer'
 import { useGetTagOptions } from '../../hooks/useGetTagOptions.hook'
 import { useGroupContent } from '../../hooks/groupContent.hook'
@@ -66,12 +66,16 @@ import { useYaml } from '../../hooks/yaml.hook'
 
 const Datasets = () => {
   const [datasets, setDatasets] = useState([])
-  const [allDatasets, setAllDatasets] = useState([])
   const [selectedDataset, setSelectedDataset] = useState({})
   const [selectedRowData, setSelectedRowData] = useState({})
   const [largeRequestErrorMessage, setLargeRequestErrorMessage] = useState('')
   const [convertedYaml, toggleConvertedYaml] = useYaml('')
-  const [urlTagOption] = useGetTagOptions(null, filters, null, DATASETS_FILTERS)
+  const [urlTagOption] = useGetTagOptions(
+    fetchArtifactTags,
+    filters,
+    DATASET_TYPE,
+    DATASETS_FILTERS
+  )
   const artifactsStore = useSelector(store => store.artifactsStore)
   const filtersStore = useSelector(store => store.filtersStore)
   const datasetsRef = useRef(null)
@@ -118,33 +122,33 @@ const Datasets = () => {
         })
       )
         .unwrap()
-        .then(dataSetsResponse => {
-          if (dataSetsResponse) {
-            setArtifactTags(
-              dataSetsResponse,
-              setDatasets,
-              setAllDatasets,
-              filters,
-              dispatch,
-              DATASETS_PAGE
-            )
-
-            return dataSetsResponse
+        .then(result => {
+          if (result) {
+            setDatasets(result)
           }
+
+          return result
         })
     },
     [dispatch, params.projectName]
   )
 
   const handleRefresh = useCallback(
     filters => {
+      dispatch(
+        getFilterTagOptions({
+          dispatch,
+          fetchTags: fetchArtifactTags,
+          project: params.projectName,
+          category: DATASET_TYPE
+        })
+      )
       setSelectedRowData({})
       setDatasets([])
-      setAllDatasets([])
 
       return fetchData(filters)
     },
-    [fetchData]
+    [dispatch, fetchData, params.projectName]
   )
 
   const handleAddTag = useCallback(
@@ -205,11 +209,12 @@ const Datasets = () => {
     if ('tag' in changes.data) {
       setSelectedRowData({})
       setDatasets([])
-      setAllDatasets([])
 
       if (changes.data.tag.currentFieldValue) {
         navigate(
-          `/projects/${params.projectName}/${DATASETS_PAGE.toLowerCase()}/${params.name}/${changes.data.tag.currentFieldValue}/overview`,
+          `/projects/${params.projectName}/${DATASETS_PAGE.toLowerCase()}/${params.name}/${
+            changes.data.tag.currentFieldValue
+          }/overview`,
           { replace: true }
         )
       }
@@ -274,7 +279,11 @@ const Datasets = () => {
     useSortTable({
       headers: tableHeaders,
       content: tableContent,
-      sortConfig: { excludeSortBy: ['labels', 'size'], defaultSortBy: 'updated', defaultDirection: 'desc' }
+      sortConfig: {
+        excludeSortBy: ['labels', 'size'],
+        defaultSortBy: 'updated',
+        defaultDirection: 'desc'
+      }
     })
 
   useEffect(() => {
@@ -284,10 +293,13 @@ const Datasets = () => {
   }, [location, navigate, pageData.details.menu, params.name, params.tab, params.tag])
 
   useEffect(() => {
-    if (isNil(filtersStore.tagOptions) && urlTagOption) {
-      fetchData({ ...datasetsFilters, tag: urlTagOption })
+    if (urlTagOption && datasets.length === 0) {
+      fetchData({
+        tag: urlTagOption,
+        iter: SHOW_ITERATIONS
+      })
     }
-  }, [datasetsFilters, fetchData, filtersStore, urlTagOption])
+  }, [datasets.length, fetchData, urlTagOption])
 
   useEffect(() => {
     dispatch(setFilters({ groupBy: GROUP_BY_NONE }))
@@ -297,7 +309,7 @@ const Datasets = () => {
     checkForSelectedDataset(
       params.name,
       selectedRowData,
-      allDatasets,
+      datasets,
       params.tag,
       params.iter,
       params.uid,
@@ -306,7 +318,7 @@ const Datasets = () => {
       navigate
     )
   }, [
-    allDatasets,
+    datasets,
     navigate,
     params.iter,
     params.name,
@@ -319,7 +331,6 @@ const Datasets = () => {
   useEffect(() => {
     return () => {
       setDatasets([])
-      setAllDatasets([])
       dispatch(removeDataSets())
       setSelectedDataset({})
       abortControllerRef.current.abort(REQUEST_CANCELED)
@@ -335,6 +346,8 @@ const Datasets = () => {
     })
   }, [handleRefresh, params, datasetsFilters])
 
+  useEffect(() => setDatasets([]), [filtersStore.tag])
+
   return (
     <DatasetsView
       actionsMenu={actionsMenu}

src/components/Datasets/DatasetsView.js

@@ -87,6 +87,7 @@ const DatasetsView = React.forwardRef(
                       onClick: handleRegisterDataset
                     }
                   ]}
+                  artifacts={datasets}
                   filterMenuName={DATASETS_FILTERS}
                   handleRefresh={handleRefresh}
                   page={DATASETS_PAGE}