feat(ObjectSummary): add button to refresh tree (#1559)

Author: Raubzeug

src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.scss renamed to src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.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;
         }
     }
 

src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.tsx renamed to src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.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>
         );
     };
 

src/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -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';
 

src/containers/Tenant/ObjectSummary/ObjectSummary.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>
+    );
+}

src/containers/Tenant/ObjectSummary/ObjectTree.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;

src/containers/Tenant/ObjectSummary/SchemaTree/RefreshTreeButton.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;
+}

src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx renamed to src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.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>
     );
 }