Fix [Feature store, Models] Label editing action issues (#3070)

src/components/Details/Details.js

@@ -44,6 +44,7 @@ import {
   DATASETS_TAB,
   DETAILS_OVERVIEW_TAB,
   DOCUMENTS_TAB,
+  EMPTY_OBJECT,
   FILES_TAB,
   FUNCTIONS_PAGE,
   JOBS_PAGE,
@@ -70,7 +71,7 @@ const Details = ({
   applyDetailsChangesCallback = () => {},
   detailsMenu,
   detailsPopUpSelectedTab = DETAILS_OVERVIEW_TAB,
-  formInitialValues = {},
+  formInitialValues = EMPTY_OBJECT,
   getCloseDetailsLink = null,
   handleCancel = null,
   handleRefresh = () => {},
@@ -114,6 +115,10 @@ const Details = ({
     setDetailsPopUpInfoContent,
     setInfoContent
   ])
+  const pathnameWithoutTab = useMemo(
+    () => location.pathname.substring(0, location.pathname.lastIndexOf(params.tab)),
+    [location.pathname, params.tab]
+  )
 
   const detailsPanelClassNames = classnames(
     'table__item',
@@ -122,7 +127,7 @@ const Details = ({
     isDetailsPopUp && 'table__item-popup'
   )
 
-  const formRef = React.useRef(
+  const formRef = useRef(
     createForm({
       initialValues: formInitialValues,
       mutators: { ...arrayMutators, setFieldState },
@@ -141,9 +146,11 @@ const Details = ({
 
   useEffect(() => {
     return () => {
-      resetChanges()
+      if (!isDetailsPopUp) {
+        resetChanges()
+      }
     }
-  }, [resetChanges])
+  }, [isDetailsPopUp, resetChanges])
 
   useEffect(() => {
     if (!isEveryObjectValueEmpty(selectedItem)) {
@@ -242,12 +249,19 @@ const Details = ({
       formRef.current &&
       detailsStore.changes.counter === 0 &&
       !isEqual(pickBy(formInitialValues), pickBy(formRef.current.getState()?.values)) &&
-      !formRef.current.getState()?.active
+      !formRef.current.getState()?.values?.labelsAreInEditMode
     ) {
       formRef.current.restart(formInitialValues)
     }
   }, [formInitialValues, detailsStore.changes.counter])
 
+  useEffect(() => {
+    if (!isDetailsPopUp) {
+      formRef.current.restart(formInitialValues)
+      dispatch(detailsActions.setEditMode(false))
+    }
+  }, [dispatch, formInitialValues, isDetailsPopUp, pathnameWithoutTab])
+
   const applyChanges = useCallback(() => {
     applyDetailsChanges(detailsStore.changes).then(() => {
       resetChanges()
@@ -349,7 +363,7 @@ const Details = ({
                 variant: TERTIARY_BUTTON
               }}
               closePopUp={() => {
-                blocker.proceed?.()
+                blocker.reset?.()
               }}
               confirmButton={{
                 handler: leavePage,

src/components/Details/DetailsHeader/DetailsHeader.js

@@ -104,10 +104,10 @@ const DetailsHeader = ({
   }, [detailsStore.changes.counter, handleCancel, handleShowWarning])
 
   const handleCancelClick = useCallback(() => {
-    if (detailsStore.changes.counter === 0) {
+    if (detailsStore.changes.counter === 0 || isDetailsPopUp) {
       handleCancel()
     }
-  }, [detailsStore.changes.counter, handleCancel])
+  }, [detailsStore.changes.counter, handleCancel, isDetailsPopUp])
 
   useEffect(() => {
     if (!headerRef.current) return
@@ -244,7 +244,7 @@ const DetailsHeader = ({
         )}
       </div>
       <div className="item-header__buttons">
-        {detailsStore.changes.counter > 0 && (
+        {detailsStore.changes.counter > 0 && !isDetailsPopUp && (
           <>
             <Button
               variant={TERTIARY_BUTTON}

src/components/DetailsInfo/DetailsInfo.js

@@ -19,7 +19,7 @@ such restriction.
 */
 import React, { useReducer, useCallback, useEffect, useMemo, useRef } from 'react'
 import PropTypes from 'prop-types'
-import { useParams } from 'react-router-dom'
+import { useLocation, useParams } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 
 import DetailsInfoView from './DetailsInfoView'
@@ -50,10 +50,15 @@ const DetailsInfo = React.forwardRef(
     },
     applyChangesRef
   ) => {
+    const location = useLocation()
     const [detailsInfoState, detailsInfoDispatch] = useReducer(detailsInfoReducer, initialState)
     const params = useParams()
     const editItemRef = useRef()
     const dispatch = useDispatch()
+    const pathnameWithoutTab = useMemo(
+      () => location.pathname.substring(0, location.pathname.lastIndexOf(params.tab)),
+      [location.pathname, params.tab]
+    )
 
     const onApplyChanges = useCallback(
       event => {
@@ -69,12 +74,13 @@ const DetailsInfo = React.forwardRef(
 
     useEffect(() => {
       return () => {
-        detailsInfoDispatch({
-          type: detailsInfoActions.RESET_EDIT_MODE
-        })
-        dispatch(detailsActions.setEditMode(false))
+        if (!isDetailsPopUp) {
+          detailsInfoDispatch({
+            type: detailsInfoActions.RESET_EDIT_MODE
+          })
+        }
       }
-    }, [detailsInfoDispatch, dispatch, params.name])
+    }, [detailsInfoDispatch, isDetailsPopUp, pathnameWithoutTab])
 
     useEffect(() => {
       window.addEventListener('click', onApplyChanges)

src/components/Table/Table.js

@@ -26,6 +26,7 @@ import TableView from './TableView'
 
 import { ACTIONS_MENU, VIRTUALIZATION_CONFIG } from '../../types'
 import { SORT_PROPS } from 'igz-controls/types'
+import { EMPTY_OBJECT } from '../../constants'
 
 import './table.scss'
 
@@ -36,7 +37,7 @@ const Table = React.forwardRef(
       applyDetailsChanges = () => {},
       applyDetailsChangesCallback = () => {},
       children,
-      detailsFormInitialValues = {},
+      detailsFormInitialValues = EMPTY_OBJECT,
       getCloseDetailsLink = null,
       handleCancel = () => {},
       hideActionsMenu = false,

src/constants.js

@@ -632,3 +632,7 @@ export const ARTIFACT_MAX_DOWNLOAD_SIZE = 104857600 // 100MB
 
 /*=========== NOTIFICATION =============*/
 export const NOTIFICATION_DURATION = 500
+
+/*========= DEFAULT PROPS =============*/
+export const EMPTY_ARRAY = []
+export const EMPTY_OBJECT = {}

src/elements/DetailsInfoItem/DetailsInfoItem.js

@@ -52,7 +52,6 @@ const DetailsInfoItem = React.forwardRef(
       },
       currentField = '',
       detailsInfoDispatch = () => {},
-      detailsInfoState = {},
       editableFieldType = null,
       formState,
       handleDiscardChanges,
@@ -83,7 +82,7 @@ const DetailsInfoItem = React.forwardRef(
           chipsData={chipsData}
           currentField={currentField}
           detailsInfoDispatch={detailsInfoDispatch}
-          detailsInfoState={detailsInfoState}
+          detailsStore={detailsStore}
           editableFieldType={editableFieldType}
           formState={formState}
           handleFinishEdit={handleFinishEdit}
@@ -149,7 +148,7 @@ const DetailsInfoItem = React.forwardRef(
             className={`details-item__${chipsClassName}`}
             delimiter={chipsData.delimiter}
             elements={chipsData.chips}
-            isEditMode={chipsData.isEditEnabled ?? !isDetailsPopUp}
+            isEditMode={!isDetailsPopUp && chipsData.isEditEnabled}
             visibleChipsMaxLength="all"
           />
         </div>
@@ -331,7 +330,6 @@ DetailsInfoItem.propTypes = {
   }),
   currentField: PropTypes.string,
   detailsInfoDispatch: PropTypes.func,
-  detailsInfoState: PropTypes.object,
   editableFieldType: PropTypes.string,
   formState: PropTypes.shape({}),
   func: PropTypes.string,

src/elements/DetailsInfoItemChip/DetailsInfoItemChip.js

@@ -17,8 +17,9 @@ 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 from 'react'
+import React, { useCallback, useEffect } from 'react'
 import PropTypes from 'prop-types'
+import { isEmpty, isEqual } from 'lodash'
 import classnames from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -37,7 +38,7 @@ const DetailsInfoItemChip = ({
   chipsData,
   currentField,
   detailsInfoDispatch,
-  detailsInfoState,
+  detailsStore,
   editableFieldType,
   formState,
   handleFinishEdit,
@@ -53,8 +54,8 @@ const DetailsInfoItemChip = ({
     editableFieldType && editableFieldType !== 'chips' && 'details-item_disabled'
   )
 
-  const setEditMode = () => {
-    if (!detailsInfoState.editMode.field && !formState.pristine) {
+  const setEditMode = useCallback(() => {
+    if (!formState.form.getFieldState(item.fieldData.name).pristine && !isFieldInEditMode) {
       detailsInfoDispatch({
         type: detailsInfoActions.SET_EDIT_MODE,
         payload: {
@@ -63,10 +64,66 @@ const DetailsInfoItemChip = ({
         }
       })
       dispatch(detailsActions.setEditMode(true))
-    } else if (formState.pristine) {
+    } else if (formState.form.getFieldState(item.fieldData.name).pristine && !isFieldInEditMode) {
       handleFinishEdit(item.fieldData.name)
     }
-  }
+  }, [
+    currentField,
+    detailsInfoDispatch,
+    dispatch,
+    formState.form,
+    handleFinishEdit,
+    isFieldInEditMode,
+    item?.editModeType,
+    item.fieldData.name
+  ])
+
+  useEffect(() => {
+    if (
+      !isEmpty(formState.values[item.fieldData.name]) &&
+      !formState.form.getFieldState(item.fieldData.name).pristine &&
+      !isEqual(
+        formState.values[item.fieldData.name],
+        detailsStore.changes.data?.[item.fieldData.name]?.currentFieldValue
+      ) &&
+      !isFieldInEditMode
+    ) {
+      detailsInfoDispatch({
+        type: detailsInfoActions.SET_EDIT_MODE,
+        payload: {
+          field: currentField,
+          fieldType: item?.editModeType
+        }
+      })
+      dispatch(detailsActions.setEditMode(true))
+    } else if (
+      !isEmpty(formState.initialValues[item.fieldData.name]) &&
+      isEmpty(formState.values[item.fieldData.name]) &&
+      !detailsStore.changes.data?.[item.fieldData.name] &&
+      !isFieldInEditMode
+    ) {
+      detailsInfoDispatch({
+        type: detailsInfoActions.SET_EDIT_MODE,
+        payload: {
+          field: currentField,
+          fieldType: item?.editModeType
+        }
+      })
+      dispatch(detailsActions.setEditMode(true))
+    }
+  }, [
+    currentField,
+    detailsInfoDispatch,
+    detailsStore.changes.data,
+    dispatch,
+    formState.form,
+    formState.initialValues,
+    formState.values,
+    isFieldInEditMode,
+    item?.editModeType,
+    item.fieldData.name,
+    setEditMode
+  ])
 
   return (
     <div className={chipFieldClassName}>
@@ -107,7 +164,6 @@ DetailsInfoItemChip.propTypes = {
   chipsData: PropTypes.object.isRequired,
   currentField: PropTypes.string.isRequired,
   detailsInfoDispatch: PropTypes.func.isRequired,
-  detailsInfoState: PropTypes.object.isRequired,
   editableFieldType: PropTypes.string.isRequired,
   handleFinishEdit: PropTypes.func.isRequired,
   isFieldInEditMode: PropTypes.bool.isRequired,