fix(Tenant): move general tabs outside navigation

Author: ariser

src/containers/Tenant/ObjectGeneral/ObjectGeneral.scss

@@ -9,28 +9,6 @@
     height: 100%;
     max-height: 100%;
 
-    &__tabs {
-        display: flex;
-        gap: 20px;
-
-        padding: 13px 20px 0;
-
-        box-shadow: inset 0 -1px 0 0 var(--yc-color-line-generic);
-        .yc-tabs {
-            box-shadow: unset;
-        }
-    }
-    &__tab {
-        text-decoration: none;
-
-        // fix for bug in uikit, gap is set for yc-tabs__item:not(:last-child),
-        // it doesn't work for wrapped items
-        // feel free to remove if the bug is fixed
-        &:not(:last-child) {
-            margin-right: var(--yc-tabs-gap);
-        }
-    }
-
     &__loader {
         display: flex;
     }

src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -1,20 +1,15 @@
-import {connect} from 'react-redux';
-import {Link} from 'react-router-dom';
-import cn from 'bem-cn-lite';
-import {useLocation} from 'react-router';
 import qs from 'qs';
-import _ from 'lodash';
+import {useLocation} from 'react-router';
+import cn from 'bem-cn-lite';
+
+import {useThemeValue} from '@yandex-cloud/uikit';
+
+import type {EPathType} from '../../../types/api/schema';
 
-import {Tabs, useThemeValue} from '@yandex-cloud/uikit';
-//@ts-ignore
 import QueryEditor from '../QueryEditor/QueryEditor';
 import Diagnostics from '../Diagnostics/Diagnostics';
 
-import {TenantGeneralTabsIds, TenantTabsGroups, TENANT_GENERAL_TABS} from '../TenantPages';
-import routes, {createHref} from '../../../routes';
-import {setSettingValue} from '../../../store/reducers/settings';
-import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';
-import type {EPathType} from '../../../types/api/schema';
+import {TenantGeneralTabsIds} from '../TenantPages';
 
 import './ObjectGeneral.scss';
 
@@ -24,7 +19,6 @@ interface ObjectGeneralProps {
     type?: EPathType;
     additionalTenantInfo?: any;
     additionalNodesInfo?: any;
-    setSettingValue: (name: string, value: string) => void;
 }
 
 function ObjectGeneral(props: ObjectGeneralProps) {
@@ -38,32 +32,6 @@ function ObjectGeneral(props: ObjectGeneralProps) {
 
     const {name: tenantName, general: generalTab} = queryParams;
 
-    const renderTabs = () => {
-        return (
-            <div className={b('tabs')}>
-                <Tabs
-                    size="xl"
-                    items={TENANT_GENERAL_TABS}
-                    activeTab={generalTab as string}
-                    wrapTo={({id}, node) => {
-                        const path = createHref(routes.tenant, undefined, {
-                            ...queryParams,
-                            name: tenantName as string,
-                            [TenantTabsGroups.general]: id,
-                        });
-                        return (
-                            <Link to={path} key={id} className={b('tab')}>
-                                {node}
-                            </Link>
-                        );
-                    }}
-                    allowNotSelected
-                    onSelectTab={(id) => props.setSettingValue(TENANT_INITIAL_TAB_KEY, id)}
-                />
-            </div>
-        );
-    };
-
     const renderTabContent = () => {
         const {type, additionalTenantInfo, additionalNodesInfo} = props;
         switch (generalTab) {
@@ -88,7 +56,6 @@ function ObjectGeneral(props: ObjectGeneralProps) {
         }
         return (
             <div className={b()}>
-                {renderTabs()}
                 {renderTabContent()}
             </div>
         );
@@ -97,8 +64,4 @@ function ObjectGeneral(props: ObjectGeneralProps) {
     return renderContent();
 }
 
-const mapDispatchToProps = {
-    setSettingValue,
-};
-
-export default connect(null, mapDispatchToProps)(ObjectGeneral);
+export default ObjectGeneral;

src/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.scss

@@ -0,0 +1,9 @@
+@import '../../../styles/mixins.scss';
+
+.object-general-tabs {
+    padding: 12px 20px 0 12px;
+
+    &__tab {
+        text-decoration: none;
+    }
+}

src/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.tsx

@@ -0,0 +1,68 @@
+import qs from 'qs';
+import {connect} from 'react-redux';
+import {useLocation} from 'react-router';
+import {Link} from 'react-router-dom';
+import cn from 'bem-cn-lite';
+
+import {Tabs} from '@yandex-cloud/uikit';
+
+import routes, {createHref} from '../../../routes';
+import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';
+import {setSettingValue} from '../../../store/reducers/settings';
+
+import {TenantTabsGroups, TENANT_GENERAL_TABS} from '../TenantPages';
+
+import './ObjectGeneralTabs.scss';
+
+const b = cn('object-general-tabs');
+
+interface ObjectGeneralTabsProps {
+    setSettingValue: (name: string, value: string) => void;
+}
+
+function ObjectGeneralTabs(props: ObjectGeneralTabsProps) {
+    const location = useLocation();
+
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+
+    const {name: tenantName, general: generalTab} = queryParams;
+
+    const renderContent = () => {
+        if (!tenantName) {
+            return null;
+        }
+        return (
+            <div className={b()}>
+                <Tabs
+                    size="xl"
+                    items={TENANT_GENERAL_TABS}
+                    activeTab={generalTab as string}
+                    wrapTo={({id}, node) => {
+                        const path = createHref(routes.tenant, undefined, {
+                            ...queryParams,
+                            name: tenantName as string,
+                            [TenantTabsGroups.general]: id,
+                        });
+                        return (
+                            <Link to={path} key={id} className={b('tab')}>
+                                {node}
+                            </Link>
+                        );
+                    }}
+                    allowNotSelected
+                    onSelectTab={(id) => props.setSettingValue(TENANT_INITIAL_TAB_KEY, id)}
+                />
+            </div>
+        );
+    };
+
+    return renderContent();
+}
+
+const mapDispatchToProps = {
+    setSettingValue,
+};
+
+export default connect(null, mapDispatchToProps)(ObjectGeneralTabs);

src/containers/Tenant/QueryEditor/QueryEditor.scss

@@ -45,7 +45,7 @@
     &__upper-controls {
         position: absolute;
         top: -38px;
-        right: 16px;
+        right: 20px;
 
         display: flex;
         gap: 12px;

src/containers/Tenant/Tenant.tsx

@@ -7,8 +7,9 @@ import qs from 'qs';
 import EmptyState from '../../components/EmptyState/EmptyState';
 import {Illustration} from '../../components/Illustration';
 
-import ObjectSummary from './ObjectSummary/ObjectSummary';
 import {setHeader} from '../../store/reducers/header';
+import ObjectGeneralTabs from './ObjectGeneralTabs/ObjectGeneralTabs';
+import ObjectSummary from './ObjectSummary/ObjectSummary';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
 //@ts-ignore
 import SplitPane from '../../components/SplitPane';
@@ -131,28 +132,31 @@ function Tenant(props: TenantProps) {
                     description="You don’t have the necessary roles to view this page."
                 />
             ) : (
-                <SplitPane
-                    defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
-                    defaultSizes={[25, 75]}
-                    triggerCollapse={summaryVisibilityState.triggerCollapse}
-                    triggerExpand={summaryVisibilityState.triggerExpand}
-                    minSize={[36, 200]}
-                    onSplitStartDragAdditional={onSplitStartDragAdditional}
-                >
-                    <ObjectSummary
-                        type={currentPathType}
-                        subType={currentPathSubType}
-                        onCollapseSummary={onCollapseSummaryHandler}
-                        onExpandSummary={onExpandSummaryHandler}
-                        isCollapsed={summaryVisibilityState.collapsed}
-                        additionalTenantInfo={props.additionalTenantInfo}
-                    />
-                    <ObjectGeneral
-                        type={currentPathType}
-                        additionalTenantInfo={props.additionalTenantInfo}
-                        additionalNodesInfo={props.additionalNodesInfo}
-                    />
-                </SplitPane>
+                <>
+                    <ObjectGeneralTabs />
+                    <SplitPane
+                        defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
+                        defaultSizes={[25, 75]}
+                        triggerCollapse={summaryVisibilityState.triggerCollapse}
+                        triggerExpand={summaryVisibilityState.triggerExpand}
+                        minSize={[36, 200]}
+                        onSplitStartDragAdditional={onSplitStartDragAdditional}
+                    >
+                        <ObjectSummary
+                            type={currentPathType}
+                            subType={currentPathSubType}
+                            onCollapseSummary={onCollapseSummaryHandler}
+                            onExpandSummary={onExpandSummaryHandler}
+                            isCollapsed={summaryVisibilityState.collapsed}
+                            additionalTenantInfo={props.additionalTenantInfo}
+                        />
+                        <ObjectGeneral
+                            type={currentPathType}
+                            additionalTenantInfo={props.additionalTenantInfo}
+                            additionalNodesInfo={props.additionalNodesInfo}
+                        />
+                    </SplitPane>
+                </>
             )}
         </div>
     );