AP-75 add initial asset tree

.eslintrc.js

@@ -38,5 +38,7 @@ module.exports = {
     ],
     "rules": {
         "@typescript-eslint/no-misused-promises": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/unbound-method": "off",
     }
 }

assets/css/globals.css

@@ -15,6 +15,10 @@
   font-weight: 700;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 body {
   font-family: Lato, sans-serif;
 }

assets/js/build/openapi-config.ts

@@ -6,7 +6,7 @@ const config: ConfigFile = {
   apiImport: 'api',
   outputFiles: {
     '../src/modules/asset/api/asset.gen.ts': {
-      filterEndpoints: [/apiAsset/i],
+      filterEndpoints: [/apiAsset/i]
     }
   },
   exportName: 'api',

assets/js/src/components/icon/icon.stories.tsx

@@ -18,8 +18,6 @@ const config: Meta = {
   tags: ['autodocs']
 }
 
-console.log(Icon)
-
 export default config
 
 export const _default = {

assets/js/src/components/tree/expander/tree-expander.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { type MouseEvent, useContext } from 'react'
 import { type TreeNodeProps } from '../node/tree-node'
 import { TreeContext } from '../tree'
 import { Icon } from '@Pimcore/components/icon/icon'
@@ -13,7 +13,9 @@ export const TreeExpander = ({ node, state }: TreeExpanderProps): React.JSX.Elem
   const { onLoad } = useContext(TreeContext)
   const [isExapanded, setIsExpanded] = state
 
-  async function onClick (): Promise<void> {
+  async function onClick (event: MouseEvent): Promise<void> {
+    event.stopPropagation()
+
     if (hasChildren === true) {
       const newExpandedValue = !isExapanded
 
@@ -26,7 +28,7 @@ export const TreeExpander = ({ node, state }: TreeExpanderProps): React.JSX.Elem
   }
 
   return (
-    <div className='tree-expander' style={{ width: 16, height: 16 }}>
+    <div className='tree-expander' style={{ minWidth: 16, width: 16, height: 16 }}>
       {node.hasChildren === true && (
         <span onClick={onClick}>
           {isExapanded ? <Icon name="chevron-up" /> : <Icon name="chevron-down" />}

assets/js/src/components/tree/list/tree-list.styles.ts

@@ -0,0 +1,13 @@
+import { createStyles } from 'antd-style'
+
+export const useStyles = createStyles(({ token, css }) => {
+  return {
+    'tree-list__pager': css` 
+      padding: ${token.paddingSM}px 0;
+
+      &:empty {
+        padding: 0;
+      }
+    `
+  }
+})

assets/js/src/components/tree/list/tree-list.tsx

@@ -1,14 +1,20 @@
 import React, { useContext } from 'react'
 import { TreeNode, type TreeNodeProps } from '../node/tree-node'
 import { TreeContext } from '../tree'
+import { theme } from 'antd'
+import { useStyles } from './tree-list.styles'
 
 interface TreeListProps {
   node: TreeNodeProps
 }
 
+const { useToken } = theme
+
 export const TreeList = ({ node }: TreeListProps): React.JSX.Element => {
+  const { token } = useToken()
+  const { styles } = useStyles()
   const { renderFilter: RenderFilter, renderPager: RenderPager, nodeApiHook } = useContext(TreeContext)
-  const { apiHookResult, dataTransformer, setAdditionalQueryParams } = nodeApiHook(node.id)
+  const { apiHookResult, dataTransformer, setAdditionalQueryParams } = nodeApiHook(node)
   const { isLoading, isError, data } = apiHookResult
 
   if (isLoading === true) {
@@ -31,7 +37,11 @@ export const TreeList = ({ node }: TreeListProps): React.JSX.Element => {
         ))}
       </div>
 
-      {RenderPager !== undefined && (<RenderPager node={node} total={total} setAdditionalQueryParams={setAdditionalQueryParams} />)}
+      {RenderPager !== undefined && (
+        <div className={['tree-list__pager', styles['tree-list__pager']].join(' ')} style={{ paddingLeft: token.paddingSM + (node.level + 1) * 24 }}>
+          <RenderPager node={node} total={total} setAdditionalQueryParams={setAdditionalQueryParams} />
+        </div>
+      )}
     </>
   )
 }

assets/js/src/components/tree/node/content/tree-node-content.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { type TreeNodeProps } from '../tree-node'
-import { Space } from 'antd'
+import { Flex } from 'antd'
 import { Icon } from '@Pimcore/components/icon/icon'
 
 export interface TreeNodeContentProps {
@@ -11,10 +11,10 @@ const TreeNodeContent = (props: TreeNodeContentProps): React.JSX.Element => {
   const { icon, label } = props.node
 
   return (
-    <Space>
+    <Flex gap={'small'}>
       <Icon name={icon} />
-      <span>{label}</span>
-    </Space>
+      <span className="tree-node-content__label">{label}</span>
+    </Flex>
   )
 }
 

assets/js/src/components/tree/node/tree-node.styles.ts

@@ -4,7 +4,33 @@ export const useStyles = createStyles(({ token, css }) => {
   return {
     treeNode: css`
       user-select: none;
-      padding-inline: 20px;
+
+      .tree-node__content {
+        cursor: pointer;
+        width: 100%;
+        padding: 2px ${token.paddingSM}px 2px 0;
+        white-space: nowrap;
+
+        @media (hover: hover) {
+          &:hover {
+            background-color: ${token.controlItemBgActiveHover};
+          }
+        }
+      }
+
+      &.tree-node--selected > .tree-node__content {
+        background-color: ${token.controlItemBgActive};
+      }
+
+      .tree-node__content-wrapper {
+        max-width: max(100px, calc(100% - 16px));
+      }
+
+      .tree-node-content__label {
+        display: inline-block;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
     `
   }
 })