feat(plugin-object-viewer): CB-1638 show limitation message in metadata editor

webapp/packages/core-app/src/shared/useChildren.ts

@@ -18,6 +18,7 @@ import { NavTreeResource } from './NodesManager/NavTreeResource';
 interface Hook {
   children: string[] | undefined;
   exception: Error | null;
+  limited: boolean;
   isLoaded: () => boolean;
   isLoading: () => boolean;
   isOutdated: () => boolean;
@@ -28,10 +29,13 @@ export function useChildren(navNodeId = ROOT_NODE_PATH): Hook {
   const navTreeService = useService(NavigationTreeService);
   const navTreeResource = useService(NavTreeResource);
   let children = navTreeService.getChildren(navNodeId);
+  let limited = false;
   const exception = navTreeResource.getException(navNodeId);
 
   if (children) {
-    children = navNodeViewService.limit(children).nodes;
+    const data = navNodeViewService.limit(children);
+    children = data.nodes;
+    limited = data.truncated > 0;
   }
 
   const deps = [navNodeId];
@@ -43,6 +47,7 @@ export function useChildren(navNodeId = ROOT_NODE_PATH): Hook {
   return {
     children,
     exception,
+    limited,
     isLoaded,
     isLoading,
     isOutdated,

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/FolderTabRenderer.tsx

@@ -10,11 +10,11 @@ import { observer } from 'mobx-react-lite';
 import styled from 'reshadow';
 
 import { DBObjectResource, NavNodeViewService, useChildren, useNode } from '@cloudbeaver/core-app';
-import { Tab, TabIcon, TabTitle } from '@cloudbeaver/core-ui';
 import { getComputed, Loader, useStateDelay } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { resourceKeyList } from '@cloudbeaver/core-sdk';
 import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming';
+import { Tab, TabIcon, TabTitle } from '@cloudbeaver/core-ui';
 
 interface IFolderTabRendererProps {
   nodeId: string;

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/NavNodeView/VirtualFolder/VirtualFolderPanel.tsx

@@ -39,7 +39,7 @@ export const VirtualFolderPanel: NavNodeTransformViewComponent = observer(functi
     onLoad: async resource => !(await resource.preloadNodeParents(parents, nodeId)),
   });
 
-  const { nodes } = navNodeViewService.limit(tree.data || []);
+  const { nodes, truncated } = navNodeViewService.limit(tree.data || []);
   const key = resourceKeyList(nodes);
   const dbObject = useMapResource(VirtualFolderPanel, DBObjectResource, key, {
     async onLoad(resource: DBObjectResource) {
@@ -65,7 +65,7 @@ export const VirtualFolderPanel: NavNodeTransformViewComponent = observer(functi
           <TextPlaceholder>{translate('plugin_object_viewer_table_no_items')}</TextPlaceholder>
         ) : (
           <tab-wrapper>
-            <ObjectChildrenPropertyTable objects={objects} />
+            <ObjectChildrenPropertyTable objects={objects} truncated={truncated > 0} />
           </tab-wrapper>
         )}
       </>

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/ObjectChildrenPropertyTable.tsx

@@ -10,10 +10,12 @@ import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import styled, { css } from 'reshadow';
 
-import type { DBObject } from '@cloudbeaver/core-app';
-import { useTabLocalState } from '@cloudbeaver/core-ui';
-import { TableHeader, TableBody, Table, useTable, useControlledScroll, IScrollState } from '@cloudbeaver/core-blocks';
+import { DBObject, NavTreeResource } from '@cloudbeaver/core-app';
+import { TableHeader, TableBody, Table, useTable, useControlledScroll, IScrollState, TableItem, TableColumnValue } from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { Translate } from '@cloudbeaver/core-localization';
 import { composes, useStyles } from '@cloudbeaver/core-theming';
+import { useTabLocalState } from '@cloudbeaver/core-ui';
 
 import { Header } from './Header';
 import { Item } from './Item';
@@ -27,6 +29,9 @@ const style = composes(
     ObjectPropertyTableFooter {
       composes: theme-background-secondary theme-text-on-secondary theme-border-color-background from global;
     }
+    TableColumnValue {
+      composes: theme-text-text-hint-on-light from global;
+    }
   `,
   css`
     wrapper {
@@ -48,16 +53,22 @@ const style = composes(
     ObjectPropertyTableFooter {
       border-top: 1px solid;
     }
+    TableColumnValue {
+      composes: theme-typography--caption from global;
+    }
   `,
 );
 
 interface Props {
   objects: DBObject[];
+  truncated?: boolean;
 }
 
 export const ObjectChildrenPropertyTable = observer<Props>(function ObjectPropertyTable({
   objects,
+  truncated,
 }) {
+  const navTreeResource = useService(NavTreeResource);
   const [scrollBox, setScrollBox] = useState<HTMLDivElement | null>(null);
   const styles = useStyles(style);
   const table = useTable();
@@ -90,6 +101,13 @@ export const ObjectChildrenPropertyTable = observer<Props>(function ObjectProper
                 columns={properties.length}
               />
             ))}
+            {truncated && (
+              <TableItem item="limited">
+                <TableColumnValue colSpan={properties.length + 2}>
+                  <Translate token='app_navigationTree_limited' limit={navTreeResource.childrenLimit} />
+                </TableColumnValue>
+              </TableItem>
+            )}
           </TableBody>
         </Table>
       </table-container>

webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/ObjectPropertyTable.tsx

@@ -81,7 +81,7 @@ export const ObjectPropertyTable = observer<ObjectPropertyTableProps>(function O
           <TextPlaceholder>{translate('plugin_object_viewer_table_no_items')}</TextPlaceholder>
         ) : (
           <div>
-            <ObjectChildrenPropertyTable objects={objects} />
+            <ObjectChildrenPropertyTable objects={objects} truncated={limited.truncated > 0} />
           </div>
         )}
       </>