diff --git a/src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.scss b/src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.scss similarity index 100% rename from src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.scss rename to src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.scss diff --git a/src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.tsx b/src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.tsx similarity index 100% rename from src/containers/Tenant/Schema/CreateDirectoryDialog/CreateDirectoryDialog.tsx rename to src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.tsx diff --git a/src/containers/Tenant/ObjectSummary/ObjectSummary.scss b/src/containers/Tenant/ObjectSummary/ObjectSummary.scss index f364d1cda..0907d3e1f 100644 --- 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 index 5c1b472c9..bea05cb10 100644 --- 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 ( -
-
- - -
-
-
-
- {renderEntityTypeBadge()} -
{relativePath}
-
-
- {renderCommonInfoControls()} + +
+
+ + +
+
+
+
+ {renderEntityTypeBadge()} +
{relativePath}
+
+
+ {renderCommonInfoControls()} +
+ {renderTabs()}
- {renderTabs()} +
{renderTabContent()}
-
{renderTabContent()}
-
- + +
+ + {!isCollapsed && } + +
- -
+ ); }; diff --git a/src/containers/Tenant/ObjectSummary/ObjectTree.tsx b/src/containers/Tenant/ObjectSummary/ObjectTree.tsx index e1a10b87a..a0c149f1f 100644 --- 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 new file mode 100644 index 000000000..2b14d1276 --- /dev/null +++ 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 ( + + + + ); +} diff --git a/src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx b/src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx similarity index 97% rename from src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx rename to src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx index 98fd08c98..01cc42db9 100644 --- a/src/containers/Tenant/Schema/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 new file mode 100644 index 000000000..c6174c119 --- /dev/null +++ b/src/containers/Tenant/ObjectSummary/UpdateTreeContext.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +const TreeKeyContext = React.createContext(undefined); +const TreeKeyDispatchContext = React.createContext | undefined>(undefined); + +interface TreeKeyProviderProps { + children: React.ReactNode; +} + +export function TreeKeyProvider({children}: TreeKeyProviderProps) { + const [key, setKey] = React.useState(''); + + return ( + + + {children} + + + ); +} + +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 index 05ca284bf..150ddc98f 100644 --- 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 ( - - + + + + + + + ); }