Minimize right border widgets and increase tree pager size (#762)

* Minimize right border widgets and increase tree pager size

* Automatic frontend build

---------

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

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

@@ -48,7 +48,7 @@ export interface TreeContextMenuProps {
 export interface TreeProps {
   nodeId: number
   nodeApiHook: any
-  maxItemsPerNode: number
+  maxItemsPerNode?: number
 
   renderNode: ElementType<TreeNodeProps>
   renderNodeContent: ElementType<TreeNodeContentProps>

assets/js/src/core/modules/asset/tree/hooks/use-node-api-hook.ts

@@ -40,7 +40,7 @@ interface NodeApiHookReturnType {
 export const useNodeApiHook = (node: TreeNodeProps): NodeApiHookReturnType => {
   const [additionalQueryParams, setAdditionalQueryParams] = useState<AssetTreeAdditionalTreeProps>()
   const { maxItemsPerNode } = useContext(TreeContext)
-  const apiHookResult = useAssetGetTreeQuery({ parentId: parseInt(node.id), pageSize: maxItemsPerNode, page: 1, ...additionalQueryParams })
+  const apiHookResult = useAssetGetTreeQuery({ parentId: parseInt(node.id), pageSize: maxItemsPerNode!, page: 1, ...additionalQueryParams })
 
   function dataTransformer (data: AssetGetTreeApiResponse): DataTransformerReturnType {
     const nodes: TreeNodeProps[] = []

assets/js/src/core/modules/asset/tree/tree-container.tsx

@@ -20,13 +20,15 @@ import { useAssetHelper } from '@Pimcore/modules/asset/hooks/use-asset-helper'
 import { SearchContainer } from './search/search-container'
 import { withDraggable } from './node/with-draggable'
 import { AssetTreeContextMenu } from '@Pimcore/modules/asset/tree/context-menu/context-menu'
+import { useSettings } from '@Pimcore/modules/app/settings/hooks/use-settings'
 
 export interface TreeContainerProps {
   id: number
 }
 
 const TreeContainer = ({ id = 1, ...props }: TreeContainerProps): React.JSX.Element => {
   const { openAsset } = useAssetHelper()
+  const { asset_tree_paging_limit: assetTreePagingLimit } = useSettings()
 
   async function onSelect (node: TreeNodeProps): Promise<void> {
     openAsset({
@@ -39,7 +41,7 @@ const TreeContainer = ({ id = 1, ...props }: TreeContainerProps): React.JSX.Elem
   return (
     <ElementTree
       contextMenu={ AssetTreeContextMenu }
-      maxItemsPerNode={ 20 }
+      maxItemsPerNode={ assetTreePagingLimit }
       nodeApiHook={ useNodeApiHook }
       nodeId={ id }
       onSelect={ onSelect }

assets/js/src/core/modules/data-object/tree/hooks/use-node-api-hook.ts

@@ -40,7 +40,7 @@ interface NodeApiHookReturnType {
 export const useNodeApiHook = (node: TreeNodeProps): NodeApiHookReturnType => {
   const [additionalQueryParams, setAdditionalQueryParams] = useState<DataObjectTreeAdditionalTreeProps>()
   const { maxItemsPerNode } = useContext(TreeContext)
-  const apiHookResult = useDataObjectGetTreeQuery({ parentId: parseInt(node.id), pageSize: maxItemsPerNode, page: 1, ...additionalQueryParams })
+  const apiHookResult = useDataObjectGetTreeQuery({ parentId: parseInt(node.id), pageSize: maxItemsPerNode!, page: 1, ...additionalQueryParams })
 
   function dataTransformer (data: DataObjectGetTreeApiResponse): DataTransformerReturnType {
     const nodes: TreeNodeProps[] = []

assets/js/src/core/modules/data-object/tree/tree-container.tsx

@@ -20,13 +20,15 @@ import { withDraggable } from './node/with-draggable'
 import { useDataObjectHelper } from '@Pimcore/modules/data-object/hooks/use-data-object-helper'
 import { DataObjectTreeContextMenu } from '@Pimcore/modules/data-object/tree/context-menu/context-menu'
 import { PagerContainer } from '@Pimcore/modules/element/tree/pager/pager-container'
+import { useSettings } from '@Pimcore/modules/app/settings/hooks/use-settings'
 
 export interface TreeContainerProps {
   id: number
 }
 
 const TreeContainer = ({ id = 1, ...props }: TreeContainerProps): React.JSX.Element => {
   const { openDataObject } = useDataObjectHelper()
+  const { object_tree_paging_limit: dataObjectTreePagingLimit } = useSettings()
 
   async function onSelect (node: TreeNodeProps): Promise<void> {
     openDataObject({
@@ -39,7 +41,7 @@ const TreeContainer = ({ id = 1, ...props }: TreeContainerProps): React.JSX.Elem
   return (
     <ElementTree
       contextMenu={ DataObjectTreeContextMenu }
-      maxItemsPerNode={ 20 }
+      maxItemsPerNode={ dataObjectTreePagingLimit }
       nodeApiHook={ useNodeApiHook }
       nodeId={ id }
       onSelect={ onSelect }

assets/js/src/core/modules/element/tree/search/search-container.tsx

@@ -27,7 +27,7 @@ const SearchContainer = (props: SearchContainerProps): React.JSX.Element => {
   const { maxItemsPerNode } = useContext(TreeContext)
 
   useEffect(() => {
-    if (total > maxItemsPerNode) {
+    if (total > maxItemsPerNode!) {
       setSearchActive(true)
     }
   }, [total])

assets/js/src/core/modules/widget-manager/utils/widget-manager-outer-model.tsx

@@ -92,7 +92,6 @@ export const getInitialModelJson = (): IJsonModel => {
         type: 'border',
         location: 'right',
         size: 315,
-        selected: 0,
         children: [
           {
             type: 'tab',

public/build/a9dd9b74-2494-4b03-b0c0-3f64db9c270f/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioui/build/a9dd9b74-2494-4b03-b0c0-3f64db9c270f/main.js"
+      ]
+    }
+  }
+}

public/build/a9dd9b74-2494-4b03-b0c0-3f64db9c270f/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/a9dd9b74-2494-4b03-b0c0-3f64db9c270f/main.js": "/bundles/pimcorestudioui/build/a9dd9b74-2494-4b03-b0c0-3f64db9c270f/main.js"
+}

public/build/b1a1958c-f83c-4d50-8960-85194601efc0/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/b1a1958c-f83c-4d50-8960-85194601efc0/vendor.js"
+      ]
+    }
+  }
+}

public/build/b1a1958c-f83c-4d50-8960-85194601efc0/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/b1a1958c-f83c-4d50-8960-85194601efc0/vendor.js": "/bundles/pimcorestudioui/build/b1a1958c-f83c-4d50-8960-85194601efc0/vendor.js"
+}

public/build/dcfe50aa-0543-4acf-af7b-3d293e0ea8a0/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/dcfe50aa-0543-4acf-af7b-3d293e0ea8a0/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/dcfe50aa-0543-4acf-af7b-3d293e0ea8a0/core-dll.js"
+      ]
+    }
+  }
+}