feat: add navigation path in quick search (#1920)

packages/component/src/ui/button/IconButton.tsx

@@ -12,8 +12,8 @@ const SIZE_CONFIG = {
     areaSize: 20,
   },
   [SIZE_MIDDLE]: {
-    iconSize: 20,
-    areaSize: 28,
+    iconSize: 16,
+    areaSize: 24,
   },
   [SIZE_NORMAL]: {
     iconSize: 24,

packages/component/src/ui/tree-view/TreeNode.tsx

@@ -105,6 +105,7 @@ const TreeNodeItem = <RenderProps,>({
   onAdd,
   onDelete,
   dropRef,
+  disableCollapse,
 }: TreeNodeItemProps<RenderProps>) => {
   return (
     <div ref={dropRef}>
@@ -115,6 +116,7 @@ const TreeNodeItem = <RenderProps,>({
         collapsed,
         setCollapsed,
         isSelected: selectedId === node.id,
+        disableCollapse,
       })}
     </div>
   );

packages/component/src/ui/tree-view/TreeView.tsx

@@ -12,6 +12,7 @@ export const TreeView = <RenderProps,>({
   onSelect,
   enableDnd = true,
   initialCollapsedIds = [],
+  disableCollapse,
   ...otherProps
 }: TreeViewProps<RenderProps>) => {
   const [selectedId, setSelectedId] = useState<string>();
@@ -62,6 +63,9 @@ export const TreeView = <RenderProps,>({
   }, [data, selectedId]);
 
   const setCollapsed: TreeNodeProps['setCollapsed'] = (id, collapsed) => {
+    if (disableCollapse) {
+      return;
+    }
     if (collapsed) {
       setCollapsedIds(ids => [...ids, id]);
     } else {
@@ -81,6 +85,7 @@ export const TreeView = <RenderProps,>({
             node={node}
             selectedId={selectedId}
             enableDnd={enableDnd}
+            disableCollapse={disableCollapse}
             {...otherProps}
           />
         ))}
@@ -99,6 +104,7 @@ export const TreeView = <RenderProps,>({
           node={node}
           selectedId={selectedId}
           enableDnd={enableDnd}
+          disableCollapse={disableCollapse}
           {...otherProps}
         />
       ))}

packages/component/src/ui/tree-view/types.ts

@@ -23,6 +23,7 @@ export type Node<RenderProps = unknown> = {
       collapsed: boolean;
       setCollapsed: (id: string, collapsed: boolean) => void;
       isSelected: boolean;
+      disableCollapse?: ReactNode;
     },
     renderProps?: RenderProps
   ) => ReactNode;
@@ -39,6 +40,7 @@ type CommonProps<RenderProps = unknown> = {
   onDrop?: OnDrop;
   // Only trigger when the enableKeyboardSelection is true
   onSelect?: (id: string) => void;
+  disableCollapse?: ReactNode;
 };
 
 export type TreeNodeProps<RenderProps = unknown> = {
@@ -65,6 +67,7 @@ export type TreeNodeItemProps<RenderProps = unknown> = {
 export type TreeViewProps<RenderProps = unknown> = {
   data: Node<RenderProps>[];
   initialCollapsedIds?: string[];
+  disableCollapse?: boolean;
 } & CommonProps<RenderProps>;
 
 export type NodeLIneProps<RenderProps = unknown> = {

packages/i18n/src/resources/en.json

@@ -201,5 +201,8 @@
   "Move page to...": "Move page to...",
   "Remove from Pivots": "Remove from Pivots",
   "RFP": "Pages can be freely added/removed from pivots, remaining accessible from \"All Pages\".",
-  "Discover what's new!": "Discover what's new!"
+  "Discover what's new!": "Discover what's new!",
+  "Navigation Path": "Navigation Path",
+  "View Navigation Path": "View Navigation Path",
+  "Back to Quick Search": "Back to Quick Search"
 }