CB-5867 show objects description

webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeDescription.module.css

@@ -0,0 +1,11 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+.description {
+  composes: theme-typography--caption from global;
+  color: var(--theme-text-hint-on-light);
+}

webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeDescription.tsx

@@ -0,0 +1,26 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { observer } from 'mobx-react-lite';
+
+import { s } from '../../s.js';
+import { useS } from '../../useS.js';
+import classes from './TreeNodeDescription.module.css';
+
+interface Props extends React.HTMLAttributes<HTMLSpanElement> {
+  className?: string;
+}
+
+export const TreeNodeDescription: React.FC<Props> = observer(function TreeNodeDescription({ className, children, ...rest }) {
+  const styles = useS(classes);
+
+  return (
+    <span className={s(styles, { description: true }, className)} {...rest}>
+      {children}
+    </span>
+  );
+});

webapp/packages/core-blocks/src/index.ts

@@ -131,6 +131,7 @@ export * from './Tree/TreeNode/TreeNodeControl.js';
 export * from './Tree/TreeNode/TreeNodeExpand.js';
 export * from './Tree/TreeNode/TreeNodeIcon.js';
 export * from './Tree/TreeNode/TreeNodeName.js';
+export * from './Tree/TreeNode/TreeNodeDescription.js';
 export * from './Tree/TreeNode/TreeNodeNested.js';
 export * from './Tree/TreeNode/TreeNodeNestedMessage.js';
 export * from './Tree/TreeNode/TreeNodeSelect.js';

webapp/packages/core-sdk/src/queries/fragments/NavNodeInfo.gql

@@ -2,6 +2,7 @@ fragment NavNodeInfo on NavigatorNodeInfo {
   id
   name
   plainName
+  description
   hasChildren
   nodeType
   icon

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/ElementsTreeBaseSettingsForm.tsx

@@ -67,6 +67,17 @@ export const ElementsTreeBaseSettingsForm: PlaceholderComponent<IElementsTreeSet
       >
         {translate('app_navigationTree_settings_folders_title')}
       </Switch>
+      <Switch
+        id={`${root}.objectsDescription`}
+        name="objectsDescription"
+        state={settings}
+        disabled={!settings.configurable}
+        title={translate('app_navigationTree_settings_filter_objects_description')}
+        mod={['primary', 'dense']}
+        small
+      >
+        {translate('app_navigationTree_settings_filter_objects_description')}
+      </Switch>
     </>
   );
 });

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/NavigationTreeSettings/createElementsTreeSettings.ts

@@ -17,6 +17,7 @@ export function createElementsTreeSettings(defaults?: Partial<IElementsTreeSetti
     showFolderExplorerPath: true,
     configurable: true,
     projects: true,
+    objectsDescription: true,
     ...defaults,
   };
 }
@@ -31,6 +32,7 @@ export function validateElementsTreeSettings(data: any): boolean {
     typeof data.foldersTree === 'boolean' &&
     typeof data.showFolderExplorerPath === 'boolean' &&
     typeof data.configurable === 'boolean' &&
-    typeof data.projects === 'boolean'
+    typeof data.projects === 'boolean' &&
+    typeof data.objectsDescription === 'boolean'
   );
 }

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/INavTreeNodeInfo.ts

@@ -8,6 +8,7 @@
 
 export interface INavTreeNodeInfo {
   name: string;
+  description: string;
   tooltip?: string;
   icon?: string;
 }

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx

@@ -15,6 +15,7 @@ import {
   s,
   TreeNodeContext,
   TreeNodeControl,
+  TreeNodeDescription,
   TreeNodeIcon,
   TreeNodeName,
   useMouseContextMenu,
@@ -26,6 +27,7 @@ import { useService } from '@cloudbeaver/core-di';
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
 import { getNodePlainName, type INodeActions, NavNodeInfoResource, NavTreeResource } from '@cloudbeaver/core-navigation-tree';
 
+import { ElementsTreeContext } from '../../ElementsTreeContext.js';
 import type { NavTreeControlComponent } from '../../NavigationNodeComponent.js';
 import { TreeNodeMenuLoader } from '../TreeNodeMenu/TreeNodeMenuLoader.js';
 import { DATA_ATTRIBUTE_NODE_EDITING } from './DATA_ATTRIBUTE_NODE_EDITING.js';
@@ -52,6 +54,7 @@ export const NavigationNodeControl: NavTreeControlComponent = observer(
     const styles = useS(style);
     const mouseContextMenu = useMouseContextMenu();
     const treeNodeContext = useContext(TreeNodeContext);
+    const elementsTreeContext = useContext(ElementsTreeContext);
     const navNodeInfoResource = useService(NavNodeInfoResource);
     const navTreeResource = useService(NavTreeResource);
     const error = getComputed(() => !!navNodeInfoResource.getException(node.id) || !!navTreeResource.getException(node.id));
@@ -145,7 +148,12 @@ export const NavigationNodeControl: NavTreeControlComponent = observer(
             {editing ? (
               <NavigationNodeEditorLoader name={getNodePlainName(node)} disabled={saving} onSave={editingState.save} onClose={editingState.cancel} />
             ) : (
-              <div className={s(styles, { nameBox: true })}>{name}</div>
+              <div className={s(styles, { nameBox: true })}>
+                {name}
+                {elementsTreeContext?.tree.settings?.objectsDescription && nodeInfo.description && !node.folder && (
+                  <TreeNodeDescription>{` - ${nodeInfo.description}`}</TreeNodeDescription>
+                )}
+              </div>
             )}
           </Loader>
         </TreeNodeName>

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/transformNodeInfo.ts

@@ -13,6 +13,7 @@ import type { IElementsTreeCustomNodeInfo } from './useElementsTree.js';
 export function transformNodeInfo(node: NavNode, transformers: IElementsTreeCustomNodeInfo[]): INavTreeNodeInfo {
   return transformers.reduce((info, transformer) => transformer(node.id, info), {
     name: node.name,
+    description: node.description,
     tooltip: node.name,
     icon: node.icon,
   } as INavTreeNodeInfo);

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/useElementsTree.ts

@@ -77,6 +77,7 @@ export interface IElementsTreeSettings {
   showFolderExplorerPath: boolean;
   configurable: boolean;
   projects: boolean;
+  objectsDescription: boolean;
 }
 
 export interface IElementsTreeOptions {

webapp/packages/plugin-navigation-tree/src/locales/en.ts

@@ -12,6 +12,7 @@ export default [
   ['app_navigationTree_limited', 'Elements are limited to {arg:limit} items'],
   ['app_navigationTree_action_link_with_editor', 'Link with editor'],
   ['app_navigationTree_action_collapse_all', 'Collapse all'],
+  ['app_navigationTree_settings_filter_objects_description', 'Show objects description'],
   ['app_navigationTree_settings_filter_title', 'Filter'],
   ['app_navigationTree_settings_filter_description', 'Show filtering field'],
   ['app_navigationTree_settings_filter_all_title', 'Show collapsed'],

webapp/packages/plugin-navigation-tree/src/locales/fr.ts

@@ -12,6 +12,7 @@ export default [
   ['app_navigationTree_limited', 'Les éléments sont limités à {arg:limit} éléments'],
   ['app_navigationTree_link_with_editor', "Lier avec l'éditeur"],
   ['app_navigationTree_action_collapse_all', 'Tout réduire'],
+  ['app_navigationTree_settings_filter_objects_description', 'Show objects description'],
   ['app_navigationTree_settings_filter_title', 'Filtrer'],
   ['app_navigationTree_settings_filter_description', 'Affiche les éléments filtrés dans les dossiers réduits'],
   ['app_navigationTree_settings_filter_all_title', 'Tout filtrer'],

webapp/packages/plugin-navigation-tree/src/locales/it.ts

@@ -12,6 +12,7 @@ export default [
   ['app_navigationTree_limited', 'Elements are limited to {arg:limit} items'],
   ['app_navigationTree_action_link_with_editor', 'Link with editor'],
   ['app_navigationTree_action_collapse_all', 'Collapse all'],
+  ['app_navigationTree_settings_filter_objects_description', 'Show objects description'],
   ['app_navigationTree_settings_filter_title', 'Filter'],
   ['app_navigationTree_settings_filter_description', 'Show filtering field'],
   ['app_navigationTree_settings_filter_all_title', 'Show collapsed'],

webapp/packages/plugin-navigation-tree/src/locales/ru.ts

@@ -13,6 +13,7 @@ export default [
 
   ['app_navigationTree_action_link_with_editor', 'Синхронизовать с редактором'],
   ['app_navigationTree_action_collapse_all', 'Свернуть все элементы'],
+  ['app_navigationTree_settings_filter_objects_description', 'Показывать описание объектов'],
 
   ['app_navigationTree_settings_filter_title', 'Фильтр'],
   ['app_navigationTree_settings_filter_description', 'Показывать фильтр'],

webapp/packages/plugin-navigation-tree/src/locales/zh.ts

@@ -11,6 +11,7 @@ export default [
   ['app_navigationTree_limited', '元素数量限制为 {arg:limit} '],
   ['app_navigationTree_action_link_with_editor', '连接至编辑器'],
   ['app_navigationTree_action_collapse_all', '收起全部'],
+  ['app_navigationTree_settings_filter_objects_description', 'Show objects description'],
   ['app_navigationTree_settings_filter_title', '过滤器'],
   ['app_navigationTree_settings_filter_description', '查看过滤字段'],
   ['app_navigationTree_settings_filter_all_title', '查看收缩项'],