Fixed reload issue in select-options (#3320)

* fixed reload issue in select-options

* Automatic frontend build

* Automatic frontend build

---------

Co-authored-by: Corepex <16717695+Corepex@users.noreply.github.com>

Author: Corepex

assets/js/src/core/modules/select-option/components/detail/select-option-form.tsx

@@ -83,9 +83,14 @@ export const SelectOptionForm = ({ selectOption }: SelectOptionFormProps): React
             <IconButton
               disabled={ isLoading }
               icon={ { value: 'refresh' } }
-              onClick={ () => {
-                form.resetFields()
-                form.setFieldsValue(initialValues)
+              onClick={ async () => {
+                const fresh = await getSelectOptionById(selectOption.id)
+                if (fresh !== undefined) {
+                  setSelectOptions((prev) =>
+                    prev.map((s) => s.id === fresh.id ? fresh : s)
+                  )
+                  form.setFieldsValue(fresh)
+                }
               } }
               title={ t('refresh') }
             />

assets/js/src/core/modules/select-option/components/tree/tree-container.tsx

@@ -23,7 +23,7 @@ interface ITreeContainerProps {
   treeData: TreeDataItem[]
   expandedKeys: React.Key[]
   isFetching: boolean
-  onReloadTree: () => Promise<void>
+  onReloadTree: () => void
   onSetExpandedKeys: (keys: React.Key[]) => void
 }
 
@@ -34,8 +34,8 @@ const TreeContainer = ({ expandedKeys, treeData, isFetching, onReloadTree, onSet
   const classNames = [styles.treeContainer]
 
   const handleAddItem = (): void => {
-    createSelectOption(async () => {
-      await onReloadTree()
+    createSelectOption(() => {
+      onReloadTree()
     })
   }
 
@@ -44,7 +44,7 @@ const TreeContainer = ({ expandedKeys, treeData, isFetching, onReloadTree, onSet
       renderToolbar={
         <ToolbarTree
           onAddItem={ handleAddItem }
-          onReload={ () => { void onReloadTree() } }
+          onReload={ onReloadTree }
         />
       }
     >
@@ -66,7 +66,7 @@ const TreeContainer = ({ expandedKeys, treeData, isFetching, onReloadTree, onSet
               removeWithConfirmation(keyStr, async () => {
                 closeSelectOption(keyStr)
                 setSelectOptions((prev) => prev.filter((s) => s.id !== keyStr))
-                await onReloadTree()
+                onReloadTree()
               })
             }
           } }

assets/js/src/core/modules/select-option/select-option-widget.tsx

@@ -11,8 +11,10 @@
 import { ConfigLayout } from '@Pimcore/components/predefined-layouts/config/config-layout'
 import { Icon } from '@Pimcore/components/icon/icon'
 import type { TreeDataItem } from '@Pimcore/components/tree-element/tree-element'
-import { useClassSelectOptionGetTreeQuery } from '@Pimcore/modules/class-definition/class-definition-slice-enhanced'
+import { api, useClassSelectOptionGetTreeQuery } from '@Pimcore/modules/class-definition/class-definition-slice-enhanced'
 import type { SelectOptionTreeItem, SelectOptionTreeFolder } from '@Pimcore/modules/class-definition/class-definition-slice.gen'
+import { invalidatingTags } from '@Pimcore/app/api/pimcore/tags'
+import { useAppDispatch } from '@Pimcore/app/store'
 import React, { useCallback, useEffect, useState } from 'react'
 import { SelectOptionEditorProvider } from './context/select-option-editor-provider'
 import { SelectOptionDetailContainer } from './components/detail/select-option-detail-container'
@@ -69,7 +71,8 @@ const createNodesByResponse = (items: TreeApiItem[]): TreeDataItem[] => {
 }
 
 const SelectOptionWidgetInner = (): React.JSX.Element => {
-  const { data, isFetching, refetch } = useClassSelectOptionGetTreeQuery({ withGroup: true })
+  const { data, isFetching } = useClassSelectOptionGetTreeQuery({ withGroup: true })
+  const dispatch = useAppDispatch()
   const [treeData, setTreeData] = useState<TreeDataItem[]>([])
   const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([])
 
@@ -79,9 +82,9 @@ const SelectOptionWidgetInner = (): React.JSX.Element => {
     }
   }, [data])
 
-  const handleReloadTree = useCallback(async (): Promise<void> => {
-    await refetch()
-  }, [refetch])
+  const handleReloadTree = useCallback((): void => {
+    dispatch(api.util.invalidateTags(invalidatingTags.SELECT_OPTION_COLLECTION()))
+  }, [dispatch])
 
   const sidebar = {
     id: 'select-option-editor.sidebar',