Merge branch 'main' into astandrik.add-controls-1415

astandrik · web-flow · commit 7b63c94ff0cf · 2024-10-31T13:31:16.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Changelog
 
+## [6.30.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.29.3...v6.30.0) (2024-10-31)
+
+
+### Features
+
+* **ObjectSummary:** add button to refresh tree ([#1559](https://github.com/ydb-platform/ydb-embedded-ui/issues/1559)) ([e7dbf9d](https://github.com/ydb-platform/ydb-embedded-ui/commit/e7dbf9dcabfa6b0f8fed0e16886e59e1c9b46d09))
+
+
+### Bug Fixes
+
+* **Cluster:** use /capabilities to show dashboard ([#1556](https://github.com/ydb-platform/ydb-embedded-ui/issues/1556)) ([7811347](https://github.com/ydb-platform/ydb-embedded-ui/commit/78113477d3a9b0bee26de20b4a4a9e38e8eefd5f))
+* pass database to capabilities query ([#1551](https://github.com/ydb-platform/ydb-embedded-ui/issues/1551)) ([7e7b3e3](https://github.com/ydb-platform/ydb-embedded-ui/commit/7e7b3e38c82aa7df8a454f6ce2bc4f37c2fd1a99))
+* tracing issues ([#1555](https://github.com/ydb-platform/ydb-embedded-ui/issues/1555)) ([4cb2d7f](https://github.com/ydb-platform/ydb-embedded-ui/commit/4cb2d7fdd59126a44ef3b003a73e3375ba1f853b))
+
 ## [6.29.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.29.2...v6.29.3) (2024-10-28)
 
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "6.29.3",
+  "version": "6.30.0",
   "files": [
     "dist"
   ],
diff --git a/src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.scss b/src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.scss
diff --git a/src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.tsx b/src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.tsx
diff --git a/src/containers/Tenant/ObjectSummary/ObjectSummary.scss b/src/containers/Tenant/ObjectSummary/ObjectSummary.scss
@@ -27,14 +27,16 @@
         visibility: hidden;
     }
 
-    &__action-button {
+    &__actions {
         position: absolute;
         top: 19px; // centered relative to the heading
         right: 5px; // centered relative to the collapsed panel
 
         background-color: var(--g-color-base-background);
+    }
+    &__button {
         &_hidden {
-            visibility: hidden;
+            display: none;
         }
     }
 
diff --git a/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx b/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx
@@ -40,6 +40,8 @@ import {isIndexTableType, isTableType} from '../utils/schema';
 
 import {ObjectTree} from './ObjectTree';
 import {SchemaActions} from './SchemaActions';
+import {RefreshTreeButton} from './SchemaTree/RefreshTreeButton';
+import {TreeKeyProvider} from './UpdateTreeContext';
 import i18n from './i18n';
 import {b} from './shared';
 import {isDomain, transformPath} from './transformPath';
@@ -83,6 +85,7 @@ export function ObjectSummary({
         undefined,
         getTenantCommonInfoState,
     );
+
     const {summaryTab = TENANT_SUMMARY_TABS_IDS.overview} = useTypedSelector(
         (state) => state.tenant,
     );
@@ -419,43 +422,47 @@ export function ObjectSummary({
 
     const renderContent = () => {
         return (
-            <div className={b()}>
-                <div className={b({hidden: isCollapsed})}>
-                    <SplitPane
-                        direction="vertical"
-                        defaultSizePaneKey={DEFAULT_SIZE_TENANT_SUMMARY_KEY}
-                        onSplitStartDragAdditional={onSplitStartDragAdditional}
-                        triggerCollapse={commonInfoVisibilityState.triggerCollapse}
-                        triggerExpand={commonInfoVisibilityState.triggerExpand}
-                        minSize={[200, 52]}
-                        collapsedSizes={[100, 0]}
-                    >
-                        <ObjectTree tenantName={tenantName} path={path} />
-                        <div className={b('info')}>
-                            <div className={b('sticky-top')}>
-                                <div className={b('info-header')}>
-                                    <div className={b('info-title')}>
-                                        {renderEntityTypeBadge()}
-                                        <div className={b('path-name')}>{relativePath}</div>
-                                    </div>
-                                    <div className={b('info-controls')}>
-                                        {renderCommonInfoControls()}
+            <TreeKeyProvider>
+                <div className={b()}>
+                    <div className={b({hidden: isCollapsed})}>
+                        <SplitPane
+                            direction="vertical"
+                            defaultSizePaneKey={DEFAULT_SIZE_TENANT_SUMMARY_KEY}
+                            onSplitStartDragAdditional={onSplitStartDragAdditional}
+                            triggerCollapse={commonInfoVisibilityState.triggerCollapse}
+                            triggerExpand={commonInfoVisibilityState.triggerExpand}
+                            minSize={[200, 52]}
+                            collapsedSizes={[100, 0]}
+                        >
+                            <ObjectTree tenantName={tenantName} path={path} />
+                            <div className={b('info')}>
+                                <div className={b('sticky-top')}>
+                                    <div className={b('info-header')}>
+                                        <div className={b('info-title')}>
+                                            {renderEntityTypeBadge()}
+                                            <div className={b('path-name')}>{relativePath}</div>
+                                        </div>
+                                        <div className={b('info-controls')}>
+                                            {renderCommonInfoControls()}
+                                        </div>
                                     </div>
+                                    {renderTabs()}
                                 </div>
-                                {renderTabs()}
+                                <div className={b('overview-wrapper')}>{renderTabContent()}</div>
                             </div>
-                            <div className={b('overview-wrapper')}>{renderTabContent()}</div>
-                        </div>
-                    </SplitPane>
+                        </SplitPane>
+                    </div>
+                    <Flex className={b('actions')} gap={0.5}>
+                        {!isCollapsed && <RefreshTreeButton />}
+                        <PaneVisibilityToggleButtons
+                            onCollapse={onCollapseSummary}
+                            onExpand={onExpandSummary}
+                            isCollapsed={isCollapsed}
+                            initialDirection="left"
+                        />
+                    </Flex>
                 </div>
-                <PaneVisibilityToggleButtons
-                    onCollapse={onCollapseSummary}
-                    onExpand={onExpandSummary}
-                    isCollapsed={isCollapsed}
-                    initialDirection="left"
-                    className={b('action-button')}
-                />
-            </div>
+            </TreeKeyProvider>
         );
     };
 
diff --git a/src/containers/Tenant/ObjectSummary/ObjectTree.tsx b/src/containers/Tenant/ObjectSummary/ObjectTree.tsx
@@ -2,8 +2,8 @@ import {StringParam, useQueryParam} from 'use-query-params';
 
 import {Loader} from '../../../components/Loader';
 import {useGetSchemaQuery} from '../../../store/reducers/schema/schema';
-import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
 
+import {SchemaTree} from './SchemaTree/SchemaTree';
 import i18n from './i18n';
 import {b} from './shared';
 
diff --git a/src/containers/Tenant/ObjectSummary/SchemaTree/RefreshTreeButton.tsx b/src/containers/Tenant/ObjectSummary/SchemaTree/RefreshTreeButton.tsx
@@ -0,0 +1,21 @@
+import {ArrowRotateRight} from '@gravity-ui/icons';
+import {ActionTooltip, Button, Icon} from '@gravity-ui/uikit';
+import {nanoid} from '@reduxjs/toolkit';
+
+import {useDispatchTreeKey} from '../UpdateTreeContext';
+
+export function RefreshTreeButton() {
+    const updateTreeKey = useDispatchTreeKey();
+    return (
+        <ActionTooltip title="Refresh">
+            <Button
+                view="flat-secondary"
+                onClick={() => {
+                    updateTreeKey(nanoid());
+                }}
+            >
+                <Icon data={ArrowRotateRight} />
+            </Button>
+        </ActionTooltip>
+    );
+}
diff --git a/src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx b/src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx
@@ -17,6 +17,7 @@ import {getSchemaControls} from '../../utils/controls';
 import {isChildlessPathType, mapPathTypeToNavigationTreeType} from '../../utils/schema';
 import {getActions} from '../../utils/schemaActions';
 import {CreateDirectoryDialog} from '../CreateDirectoryDialog/CreateDirectoryDialog';
+import {useDispatchTreeKey, useTreeKey} from '../UpdateTreeContext';
 
 interface SchemaTreeProps {
     rootPath: string;
@@ -52,7 +53,8 @@ export function SchemaTree(props: SchemaTreeProps) {
     const [querySettings, setQueryExecutionSettings] = useQueryExecutionSettings();
     const [createDirectoryOpen, setCreateDirectoryOpen] = React.useState(false);
     const [parentPath, setParentPath] = React.useState('');
-    const [schemaTreeKey, setSchemaTreeKey] = React.useState('');
+    const setSchemaTreeKey = useDispatchTreeKey();
+    const schemaTreeKey = useTreeKey();
 
     const fetchPath = async (path: string) => {
         let schemaData: TEvDescribeSchemeResult | undefined;
diff --git a/src/containers/Tenant/ObjectSummary/UpdateTreeContext.tsx b/src/containers/Tenant/ObjectSummary/UpdateTreeContext.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const TreeKeyContext = React.createContext<string | undefined>(undefined);
+const TreeKeyDispatchContext = React.createContext<React.Dispatch<string> | undefined>(undefined);
+
+interface TreeKeyProviderProps {
+    children: React.ReactNode;
+}
+
+export function TreeKeyProvider({children}: TreeKeyProviderProps) {
+    const [key, setKey] = React.useState<string>('');
+
+    return (
+        <TreeKeyContext.Provider value={key}>
+            <TreeKeyDispatchContext.Provider value={setKey}>
+                {children}
+            </TreeKeyDispatchContext.Provider>
+        </TreeKeyContext.Provider>
+    );
+}
+
+export function useTreeKey() {
+    const key = React.useContext(TreeKeyContext);
+    if (key === undefined) {
+        throw new Error('useTreeKey must be used within a TreeKeyProvider');
+    }
+    return key;
+}
+export function useDispatchTreeKey() {
+    const updateKey = React.useContext(TreeKeyDispatchContext);
+    if (updateKey === undefined) {
+        throw new Error('useDispatchTreeKey must be used within a TreeKeyProvider');
+    }
+    return updateKey;
+}
diff --git a/src/containers/Tenant/utils/paneVisibilityToggleHelpers.tsx b/src/containers/Tenant/utils/paneVisibilityToggleHelpers.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {ChevronsUp} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
+import {ActionTooltip, Button, Icon} from '@gravity-ui/uikit';
 
 import {cn} from '../../../utils/cn';
 
@@ -84,32 +84,35 @@ export function PaneVisibilityToggleButtons({
 }: ToggleButtonProps) {
     return (
         <React.Fragment>
-            <Button
-                view="flat-secondary"
-                onClick={onCollapse}
-                className={b(
-                    {
-                        hidden: isCollapsed,
-                    },
-                    className,
-                )}
-                title="Collapse"
-            >
-                <Icon data={ChevronsUp} className={b({[initialDirection]: true})} />
-            </Button>
-            <Button
-                view="flat-secondary"
-                onClick={onExpand}
-                className={b(
-                    {
-                        hidden: !isCollapsed,
-                    },
-                    className,
-                )}
-                title="Expand"
-            >
-                <Icon data={ChevronsUp} className={b({[initialDirection]: true}, 'rotate')} />
-            </Button>
+            <ActionTooltip title="Collapse">
+                <Button
+                    view="flat-secondary"
+                    onClick={onCollapse}
+                    className={b(
+                        {
+                            hidden: isCollapsed,
+                        },
+                        className,
+                    )}
+                >
+                    <Icon data={ChevronsUp} className={b({[initialDirection]: true})} />
+                </Button>
+            </ActionTooltip>
+
+            <ActionTooltip title="Expand">
+                <Button
+                    view="flat-secondary"
+                    onClick={onExpand}
+                    className={b(
+                        {
+                            hidden: !isCollapsed,
+                        },
+                        className,
+                    )}
+                >
+                    <Icon data={ChevronsUp} className={b({[initialDirection]: true}, 'rotate')} />
+                </Button>
+            </ActionTooltip>
         </React.Fragment>
     );
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ydb-embedded-ui",`
`3`		`- "version": "6.29.3",`
	`3`	`+ "version": "6.30.0",`
`4`	`4`	`"files": [`
`5`	`5`	`"dist"`
`6`	`6`	`],`
Original file line number	Diff line number	Diff line change
`@@ -27,14 +27,16 @@`
`27`	`27`	`visibility: hidden;`
`28`	`28`	`}`
`29`	`29`
`30`		`- &__action-button {`
	`30`	`+ &__actions {`
`31`	`31`	`position: absolute;`
`32`	`32`	`top: 19px; // centered relative to the heading`
`33`	`33`	`right: 5px; // centered relative to the collapsed panel`
`34`	`34`
`35`	`35`	`background-color: var(--g-color-base-background);`
	`36`	`+ }`
	`37`	`+ &__button {`
`36`	`38`	`&_hidden {`
`37`		`- visibility: hidden;`
	`39`	`+ display: none;`
`38`	`40`	`}`
`39`	`41`	`}`
`40`	`42`