Fix [UI] "add a tag" UI should not check uniqueness but rather update…

… the existing tag
mlrun · Oct 7, 2024 · 1a684b1 · 1a684b1
1 parent 760d377
commit 1a684b1
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
     "final-form-arrays": "^3.1.0",
     "fs-extra": "^10.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "iguazio.dashboard-react-controls": "2.2.1",
     "is-wsl": "^1.1.0",
     "js-base64": "^2.5.2",
     "js-yaml": "^4.1.0",

diff --git a/src/elements/AddArtifactTagPopUp/AddArtifactTagPopUp.js b/src/elements/AddArtifactTagPopUp/AddArtifactTagPopUp.js
@@ -25,10 +25,11 @@ import { Form } from 'react-final-form'
 import { createForm } from 'final-form'
 
 import { Button, FormInput, Modal } from 'igz-controls/components'
+import Loader from '../../common/Loader/Loader'
 
 import { DATASET_TYPE, MODEL_TYPE } from '../../constants'
 import { SECONDARY_BUTTON, TERTIARY_BUTTON } from 'igz-controls/constants'
-import { addTag } from '../../reducers/artifactsReducer'
+import { addTag, fetchArtifacts } from '../../reducers/artifactsReducer'
 import { getValidationRules } from 'igz-controls/utils/validation.util'
 import { setNotification } from '../../reducers/notificationReducer'
 import { showErrorNotification } from '../../utils/notifications.util'
@@ -37,7 +38,6 @@ import { isSubmitDisabled } from 'igz-controls/utils/form.util'
 
 const AddArtifactTagPopUp = ({
   artifact,
-  getArtifact,
   isOpen,
   onAddTag = () => {},
   onResolve,
@@ -47,7 +47,8 @@ const AddArtifactTagPopUp = ({
   const [initialValues] = useState({
     artifactTag: ''
   })
-  const [existingTags, setExistingTags] = useState([])
+  const [artifactTags, setArtifactTags] = useState([])
+  const [isLoading, setIsLoading] = useState(true)
 
   const formRef = React.useRef(
     createForm({
@@ -58,16 +59,6 @@ const AddArtifactTagPopUp = ({
   const location = useLocation()
   const { handleCloseModal, resolveModal } = useModalBlockHistory(onResolve, formRef.current)
 
-  useEffect(() => {
-    getArtifact &&
-      dispatch(getArtifact())
-        .unwrap()
-        .then(results => {
-          const tags = results.filter(result => result.tag).map(result => result.tag)
-          setExistingTags(tags)
-        })
-  }, [dispatch, getArtifact])
-
   const addArtifactTag = values => {
     const identifier = {
       key: artifact.db_key || artifact.key,
@@ -127,52 +118,79 @@ const AddArtifactTagPopUp = ({
     return actions.map(action => <Button {...action} />)
   }
 
+  useEffect(() => {
+    setIsLoading(true)
+    dispatch(
+      fetchArtifacts({
+        project: projectName,
+        filters: { name: artifact.db_key },
+        config: {
+          params: {
+            format: 'minimal'
+          }
+        },
+        withExactName: true
+      })
+    )
+      .unwrap()
+      .then(artifacts => {
+        if (artifacts.length) {
+          setArtifactTags(artifacts.map(artifact => artifact.tag))
+        }
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  }, [artifact.db_key, dispatch, projectName])
+
   return (
     <Form form={formRef.current} initialValues={initialValues} onSubmit={addArtifactTag}>
       {formState => {
         return (
-          <Modal
-            actions={getModalActions(formState)}
-            location={location}
-            onClose={handleCloseModal}
-            show={isOpen}
-            size="min"
-            title="Add a tag"
-          >
-            <div className="form">
-              <div className="form-row">
-                <div className="form-col-1">
-                  <FormInput
-                    name="artifactTag"
-                    label={`${
-                      artifact.kind === MODEL_TYPE
-                        ? 'Model tag'
-                        : artifact.kind === DATASET_TYPE
-                          ? 'Dataset tag'
-                          : 'Artifact tag'
-                    }`}
-                    focused
-                    required
-                    validationRules={getValidationRules('common.name', [
-                      {
-                        name: 'uniqueness',
-                        label: 'Tag name must be unique',
-                        pattern: value => !existingTags.includes(value)
-                      }
-                    ])}
-                  />
+          <>
+            {isLoading && <Loader />}
+            <Modal
+              actions={getModalActions(formState)}
+              location={location}
+              onClose={handleCloseModal}
+              show={isOpen}
+              size="min"
+              title="Add a tag"
+            >
+              <div className="form">
+                <div className="form-row">
+                  <div className="form-col-1">
+                    <FormInput
+                      name="artifactTag"
+                      label={`${
+                        artifact.kind === MODEL_TYPE
+                          ? 'Model tag'
+                          : artifact.kind === DATASET_TYPE
+                            ? 'Dataset tag'
+                            : 'Artifact tag'
+                      }`}
+                      focused
+                      required
+                      validationRules={getValidationRules('common.name', [
+                        {
+                          name: 'uniqueness',
+                          label: 'Tag name must be unique',
+                          pattern: value => !artifactTags.includes(value)
+                        }
+                      ])}
+                    />
+                  </div>
                 </div>
               </div>
-            </div>
-          </Modal>
+            </Modal>
+          </>
         )
       }}
     </Form>
   )
 }
 
 AddArtifactTagPopUp.propTypes = {
-  getArtifact: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,
   artifact: PropTypes.shape({}).isRequired,
   onAddTag: PropTypes.func,