Merge pull request #814 from pimcore/753-missing-asset-context-menu-a…

…ctions-rename

* added manual cache update

* created simple-to-use hook for manual cache updates

* renamed `updateCache` to `update`

* cleanup

* Automatic frontend build

* Automatic frontend build

* simplified `updateFieldValue` function

* Automatic frontend build

---------

Co-authored-by: Corepex <[email protected]>

assets/js/src/core/components/drag-and-drop/draggable.tsx

@@ -48,7 +48,7 @@ function Draggable (props: DraggableProps): React.JSX.Element {
         { ...Child.props }
       />
     </div>
-  ), [])
+  ), [props.children])
 }
 
 const DraggableMemo = React.memo(Draggable)

assets/js/src/core/modules/element/hooks/use-cache-update.ts

@@ -0,0 +1,89 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { store, useAppDispatch } from '@Pimcore/app/store'
+import { api as assetApi } from '@Pimcore/modules/asset/asset-api-slice-enhanced'
+import { api as dataObjectApi } from '@Pimcore/modules/data-object/data-object-api-slice-enhanced'
+import { type TagDescription } from '@reduxjs/toolkit/query'
+import { type ElementType } from '../../../../../types/element-type.d'
+import { type Element } from '../element-helper'
+
+interface UseCacheUpdateHookReturn {
+  update: (props: UpdateCacheProps) => void
+  updateFieldValue: (id: number, field: string, value: any) => void
+}
+
+interface UpdateCacheProps {
+  updateFn: (draft: any) => void
+}
+
+export const useCacheUpdate = (elementType: ElementType, tags: ReadonlyArray<TagDescription<string>>): UseCacheUpdateHookReturn => {
+  const dispatch = useAppDispatch()
+  const api = getElementTypeDependantApi()
+  const cacheEntries = getCacheEntries(tags)
+
+  function getCacheEntries (tags: ReadonlyArray<TagDescription<string>>): Array<{
+    endpointName: string
+    originalArgs: any
+    queryCacheKey: string
+  }> {
+    return api.util.selectInvalidatedBy(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      store.getState() as any,
+      tags
+    )
+  }
+
+  function getElementTypeDependantApi (): typeof assetApi | typeof dataObjectApi {
+    if (elementType === 'asset') {
+      return assetApi
+    }
+
+    if (elementType === 'data-object') {
+      return dataObjectApi
+    }
+
+    throw new Error('Unknown element type')
+  }
+
+  const update = ({ updateFn }: UpdateCacheProps): void => {
+    cacheEntries.forEach((cacheEntry) => {
+      // @ts-expect-error not compatible with the current type definitions
+      dispatch(api.util.updateQueryData(
+        cacheEntry.endpointName,
+        cacheEntry.originalArgs,
+        updateFn
+      ))
+    })
+  }
+
+  const updateFieldValue = (id: number, field: string, value: any): void => {
+    update({
+      updateFn: (draft: any) => {
+        if ('items' in draft && typeof draft.items === 'object') {
+          const entries = draft.items as Element[]
+          const indexToUpdate = entries.findIndex((entry) => entry.id === id)
+
+          if (indexToUpdate !== -1 && field in draft.items![indexToUpdate]) {
+            draft.items![indexToUpdate][field] = value
+          }
+        }
+      }
+    })
+  }
+
+  return {
+    update,
+    updateFieldValue
+  }
+}

assets/js/src/core/modules/element/hooks/use-element-api.ts

@@ -13,6 +13,7 @@
 
 import { useAssetPatchByIdMutation } from '@Pimcore/modules/asset/asset-api-slice-enhanced'
 import { useDataObjectPatchByIdMutation } from '@Pimcore/modules/data-object/data-object-api-slice-enhanced'
+import { useCacheUpdate } from '@Pimcore/modules/element/hooks/use-cache-update'
 import { type ElementType } from 'types/element-type.d'
 
 /**
@@ -37,12 +38,26 @@ interface UseElementApiReturn {
 export const useElementApi = (elementType: ElementType): UseElementApiReturn => {
   const [assetPatch] = useAssetPatchByIdMutation()
   const [dataObjectPatch] = useDataObjectPatchByIdMutation()
+  const { updateFieldValue: updateAssetFieldValue } = useCacheUpdate('asset', ['ASSET_TREE'])
+  const { updateFieldValue: updateDataObjectFieldValule } = useCacheUpdate('data-object', ['DATA_OBJECT_TREE'])
 
   const elementPatch = async (args: ElementPatchArgs): Promise<void> => {
     if (elementType === 'asset') {
       await assetPatch(args)
+
+      updateAssetFieldValue(
+        args.body.data[0].id,
+        'filename',
+        args.body.data[0].key
+      )
     } else if (elementType === 'data-object') {
       await dataObjectPatch(args)
+
+      updateDataObjectFieldValule(
+        args.body.data[0].id,
+        'key',
+        args.body.data[0].key
+      )
     }
   }
 

public/build/85fbfe37-392b-4411-b632-60ddee170740/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/85fbfe37-392b-4411-b632-60ddee170740/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/85fbfe37-392b-4411-b632-60ddee170740/core-dll.js"
+      ]
+    }
+  }
+}