[Asset] upload image version - Tree preview not updated fix (#3369)

Author: markus-moser

assets/js/src/core/components/element-tree/element-tree-slice.ts

@@ -398,6 +398,19 @@ const slice = createSlice({
         isFetching: payload.isFetching
       }))
     },
+    setNodeFetchingInAllTrees: (
+      state,
+      { payload }: PayloadAction<{ nodeId: string, elementType: string, isFetching: boolean }>
+    ) => {
+      Object.keys(state).forEach(treeId => {
+        if (state[treeId].nodes[payload.nodeId]?.treeNodeProps?.elementType === payload.elementType) {
+          updateNodeState(state, treeId, payload.nodeId, node => ({
+            ...node,
+            isFetching: payload.isFetching
+          }))
+        }
+      })
+    },
     markNodeDeletingForTree: (
       state,
       { payload }: PayloadAction<{ treeId: string, nodeId: string, isDeleting: boolean }>
@@ -442,6 +455,24 @@ const slice = createSlice({
         }
       })
     },
+    updateNodeData: (
+      state,
+      { payload }: PayloadAction<{ nodeId: string, elementType: string, data: Partial<TreeNode> }>
+    ) => {
+      Object.keys(state).forEach(treeId => {
+        if (state[treeId].nodes[payload.nodeId]?.treeNodeProps?.elementType === payload.elementType) {
+          updateNodeState(state, treeId, payload.nodeId, node => ({
+            ...node,
+            treeNodeProps: !isUndefined(node.treeNodeProps)
+              ? {
+                  ...node.treeNodeProps,
+                  ...payload.data
+                }
+              : undefined
+          }))
+        }
+      })
+    },
     updateNodeType: (
       state,
       { payload }: PayloadAction<{ nodeId: string, elementType: string, newType: string, newIcon: ElementIcon }>
@@ -741,7 +772,7 @@ export const treeSliceName = slice.name
 
 injectSliceWithState(slice)
 
-export const { setNodeLoading, setNodeLoadingInAllTree, setNodeExpanded, setNodeHasChildren, setNodePage, setNodeSearchTerm, setSelectedNodeIds, setNodeScrollTo, updateNodesByParentId, locateInTree, setFetchTriggered, setRootFetchTriggered, setNodeFetching, markNodeDeletingForTree, refreshNodeChildren, refreshTargetNode, refreshSourceNode, markNodeDeleting, renameNode, updateNodeType, setNodePublished, setNodeAdditionalAttributes, setRootNode, setDocumentNodeSiteStatus, setNodeLocked, refreshTreeByElementType, setDocumentNodeNavigationExclude } = slice.actions
+export const { setNodeLoading, setNodeLoadingInAllTree, setNodeExpanded, setNodeHasChildren, setNodePage, setNodeSearchTerm, setSelectedNodeIds, setNodeScrollTo, updateNodesByParentId, locateInTree, setFetchTriggered, setRootFetchTriggered, setNodeFetching, setNodeFetchingInAllTrees, markNodeDeletingForTree, refreshNodeChildren, refreshTargetNode, refreshSourceNode, markNodeDeleting, renameNode, updateNodeData, updateNodeType, setNodePublished, setNodeAdditionalAttributes, setRootNode, setDocumentNodeSiteStatus, setNodeLocked, refreshTreeByElementType, setDocumentNodeNavigationExclude } = slice.actions
 
 export const selectNodeState = createSelector(
   (state: RootState) => state.trees,

assets/js/src/core/components/element-tree/tooltip/element-tree-tooltip.tsx

@@ -17,6 +17,7 @@ import { Flex } from '@Pimcore/components/flex/flex'
 import { useTranslation } from 'react-i18next'
 import { type DragInfoChangeEvent } from '@Pimcore/components/drag-and-drop/draggable'
 import { isNull } from 'lodash'
+import { Skeleton } from 'antd'
 
 export interface ElementTreeTooltipProps {
   node: TreeNodeProps
@@ -27,6 +28,7 @@ export const ElementTreeTooltip = ({ node, children }: ElementTreeTooltipProps):
   const { t } = useTranslation()
   const [isTooltipOpen, setIsTooltipOpen] = useState(false)
   const [isDragActive, setIsDragActive] = useState(false)
+  const [isImageLoaded, setIsImageLoaded] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
   const mouseEnterTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const mouseCheckIntervalRef = useRef<NodeJS.Timeout | null>(null)
@@ -36,6 +38,11 @@ export const ElementTreeTooltip = ({ node, children }: ElementTreeTooltipProps):
   const isAsset = node.metaData?.asset !== undefined
   const isObject = node.metaData?.dataObject !== undefined
   const hasTooltip = element?.customAttributes?.tooltip !== null && element?.customAttributes?.tooltip !== undefined
+  const imageThumbnailPath: string | undefined = element?.imageThumbnailPath
+
+  useEffect(() => {
+    setIsImageLoaded(false)
+  }, [imageThumbnailPath])
 
   // Listen for global drag state changes
   useEffect(() => {
@@ -174,10 +181,17 @@ export const ElementTreeTooltip = ({ node, children }: ElementTreeTooltipProps):
                 justify="center"
                 style={ { maxHeight: 200, overflow: 'hidden' } }
               >
+                {!isImageLoaded && (
+                  <Skeleton.Image
+                    active
+                    style={ { width: 248, height: 150 } }
+                  />
+                )}
                 <Image
                   alt={ element.filename }
+                  onLoad={ () => { setIsImageLoaded(true) } }
                   src={ element.imageThumbnailPath }
-                  style={ { maxHeight: 200 } }
+                  style={ { maxHeight: 200, display: isImageLoaded ? undefined : 'none' } }
                 />
               </Flex>
             </Box>

assets/js/src/core/modules/asset/actions/upload-new-version/upload-new-version.tsx

@@ -9,6 +9,7 @@
  */
 
 import { type Asset } from '@Pimcore/modules/asset/asset-api-slice.gen'
+import { api } from '@Pimcore/modules/asset/asset-api-slice-enhanced'
 import { type TreeNodeProps } from '@Pimcore/components/element-tree/node/tree-node'
 import { type ItemType } from '@Pimcore/components/dropdown/dropdown'
 import { useTranslation } from 'react-i18next'
@@ -22,7 +23,9 @@ import { useUploadModalContext } from '@Pimcore/components/modal-upload/provider
 import { getPrefix } from '@Pimcore/app/api/pimcore/route'
 import { isNil } from 'lodash'
 import { useAppDispatch } from '@sdk/app'
-import { renameNode } from '@Pimcore/components/element-tree/element-tree-slice'
+import { updateNodeData, setNodeFetchingInAllTrees } from '@Pimcore/components/element-tree/element-tree-slice'
+import { transformApiDataToNode } from '@Pimcore/modules/asset/tree/utils/transform-api-data-to-node'
+import { addCacheBusterToUrl } from '@Pimcore/utils/url-cache-buster'
 
 export interface UseUploadNewVersionReturn {
   uploadNewVersion: (id: number, onFinish?: () => void) => void
@@ -36,21 +39,55 @@ export const useUploadNewVersion = (): UseUploadNewVersionReturn => {
   const { triggerUpload } = useUploadModalContext()
   const { isTreeActionAllowed } = useTreePermission()
 
+  const refreshTreeNode = async (id: number): Promise<void> => {
+    dispatch(setNodeFetchingInAllTrees({ nodeId: String(id), elementType: 'asset', isFetching: true }))
+
+    const fetcher = dispatch(api.endpoints.assetGetTree.initiate(
+      { page: 1, pageSize: 1, pqlQuery: `id = ${id}`, pathIncludeParent: true },
+      { forceRefetch: true }
+    ))
+
+    try {
+      const { data } = await fetcher
+
+      if (!isNil(data?.items?.[0])) {
+        const freshNode = transformApiDataToNode(
+          data.items[0],
+          { id: String(id), internalKey: String(id) }
+        )
+
+        const assetItem = data.items[0]
+        const cacheBustedItem = 'imageThumbnailPath' in assetItem && !isNil(assetItem.imageThumbnailPath)
+          ? { ...assetItem, imageThumbnailPath: addCacheBusterToUrl(assetItem.imageThumbnailPath) }
+          : assetItem
+
+        const cacheBustedIcon = freshNode.icon.type === 'path'
+          ? { ...freshNode.icon, value: addCacheBusterToUrl(freshNode.icon.value) }
+          : freshNode.icon
+
+        dispatch(updateNodeData({
+          nodeId: String(id),
+          elementType: 'asset',
+          data: {
+            icon: cacheBustedIcon,
+            label: freshNode.label,
+            metaData: { asset: cacheBustedItem }
+          }
+        }))
+      }
+    } finally {
+      fetcher.unsubscribe()
+      dispatch(setNodeFetchingInAllTrees({ nodeId: String(id), elementType: 'asset', isFetching: false }))
+    }
+  }
+
   const uploadNewVersion = (id: number, onFinish?: () => void): void => {
     triggerUpload({
       action: `${getPrefix()}/assets/${id}/replace`,
       maxItems: 1,
       multiple: false,
       onSuccess: async (result: any) => {
-        if (!isNil(result?.[0]?.response?.data)) {
-          const newFilename = result[0].response.data
-
-          dispatch(renameNode({
-            nodeId: String(id),
-            elementType: 'asset',
-            newLabel: newFilename
-          }))
-        }
+        await refreshTreeNode(id)
         onFinish?.()
       }
     })