feat(Header): add manage DB dropdown (#2680)

Author: artemmufazalov

src/containers/Clusters/Clusters.scss

@@ -80,10 +80,6 @@
         color: var(--g-color-text-secondary);
     }
 
-    &__remove-cluster {
-        color: var(--ydb-color-status-red);
-    }
-
     &__progress {
         --g-progress-filled-background-color: var(--ydb-color-status-green);
     }

src/containers/Clusters/columns.tsx

@@ -79,7 +79,7 @@ function getTitleColumn({isEditClusterAvailable, isDeleteClusterAvailable}: Clus
                         action: () => {
                             onDeleteCluster({clusterData: row});
                         },
-                        className: b('remove-cluster'),
+                        theme: 'danger',
                     });
                 }
 

src/containers/Header/Header.tsx

@@ -1,23 +1,41 @@
 import React from 'react';
 
-import {ArrowUpRightFromSquare, CirclePlus, PlugConnection} from '@gravity-ui/icons';
-import {Breadcrumbs, Button, Divider, Flex, Icon} from '@gravity-ui/uikit';
-import {useLocation} from 'react-router-dom';
+import {
+    ArrowUpRightFromSquare,
+    ChevronDown,
+    CirclePlus,
+    Pencil,
+    PlugConnection,
+    TrashBin,
+} from '@gravity-ui/icons';
+import type {DropdownMenuItem, DropdownMenuProps} from '@gravity-ui/uikit';
+import {Breadcrumbs, Button, Divider, DropdownMenu, Flex, Icon} from '@gravity-ui/uikit';
+import {skipToken} from '@reduxjs/toolkit/query';
+import {useHistory, useLocation} from 'react-router-dom';
 
 import {getConnectToDBDialog} from '../../components/ConnectToDB/ConnectToDBDialog';
 import {InternalLink} from '../../components/InternalLink';
-import {useAddClusterFeatureAvailable} from '../../store/reducers/capabilities/hooks';
+import {
+    useAddClusterFeatureAvailable,
+    useDeleteDatabaseFeatureAvailable,
+    useEditDatabaseFeatureAvailable,
+} from '../../store/reducers/capabilities/hooks';
 import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
+import {tenantApi} from '../../store/reducers/tenant/tenant';
 import {uiFactory} from '../../uiFactory/uiFactory';
 import {cn} from '../../utils/cn';
 import {DEVELOPER_UI_TITLE} from '../../utils/constants';
 import {createDeveloperUIInternalPageHref} from '../../utils/developerUI/developerUI';
 import {useTypedSelector} from '../../utils/hooks';
-import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
+import {
+    useClusterNameFromQuery,
+    useDatabaseFromQuery,
+} from '../../utils/hooks/useDatabaseFromQuery';
 import {
     useIsUserAllowedToMakeChanges,
     useIsViewerUser,
 } from '../../utils/hooks/useIsUserAllowedToMakeChanges';
+import {getClusterPath} from '../Cluster/utils';
 
 import {getBreadcrumbs} from './breadcrumbs';
 import {headerKeyset} from './i18n';
@@ -35,13 +53,29 @@ function Header() {
     const {title: clusterTitle} = useClusterBaseInfo();
 
     const database = useDatabaseFromQuery();
+    const clusterName = useClusterNameFromQuery();
+
     const location = useLocation();
+    const history = useHistory();
+
     const isDatabasePage = location.pathname === '/tenant';
     const isClustersPage = location.pathname === '/clusters';
 
     const isAddClusterAvailable =
         useAddClusterFeatureAvailable() && uiFactory.onAddCluster !== undefined;
 
+    const isEditDBAvailable = useEditDatabaseFeatureAvailable() && uiFactory.onEditDB !== undefined;
+    const isDeleteDBAvailable =
+        useDeleteDatabaseFeatureAvailable() && uiFactory.onDeleteDB !== undefined;
+
+    const shouldRequestTenantData =
+        database && isDatabasePage && (isEditDBAvailable || isDeleteDBAvailable);
+
+    const params = shouldRequestTenantData ? {path: database, clusterName} : skipToken;
+
+    const {currentData: databaseData, isLoading: isDatabaseDataLoading} =
+        tenantApi.useGetTenantInfoQuery(params);
+
     const breadcrumbItems = React.useMemo(() => {
         let options = {
             ...pageBreadcrumbsOptions,
@@ -82,6 +116,57 @@ function Header() {
                     {headerKeyset('connect')}
                 </Button>,
             );
+
+            const menuItems: DropdownMenuItem[] = [];
+
+            const {onEditDB, onDeleteDB} = uiFactory;
+
+            const isEnoughData = clusterName && databaseData;
+
+            if (isEditDBAvailable && onEditDB && isEnoughData) {
+                menuItems.push({
+                    text: headerKeyset('action_edit-db'),
+                    iconStart: <Pencil />,
+                    action: () => {
+                        onEditDB({clusterName, databaseData});
+                    },
+                });
+            }
+            if (isDeleteDBAvailable && onDeleteDB && isEnoughData) {
+                menuItems.push({
+                    text: headerKeyset('action_delete-db'),
+                    iconStart: <TrashBin />,
+                    action: () => {
+                        onDeleteDB({clusterName, databaseData}).then((isDeleted) => {
+                            if (isDeleted) {
+                                const path = getClusterPath('tenants');
+                                history.push(path);
+                            }
+                        });
+                    },
+                    theme: 'danger',
+                });
+            }
+
+            if (menuItems.length) {
+                const renderSwitcher: DropdownMenuProps<unknown>['renderSwitcher'] = (props) => {
+                    return (
+                        <Button {...props} loading={isDatabaseDataLoading} view="flat" size="m">
+                            {headerKeyset('action_manage')}
+                            <Icon data={ChevronDown} />
+                        </Button>
+                    );
+                };
+
+                elements.push(
+                    <DropdownMenu
+                        items={menuItems}
+                        renderSwitcher={renderSwitcher}
+                        menuProps={{size: 'l'}}
+                        popupProps={{placement: 'bottom-end'}}
+                    />,
+                );
+            }
         }
 
         if (!isClustersPage && isUserAllowedToMakeChanges) {

src/containers/Header/i18n/en.json

@@ -9,5 +9,9 @@
   "breadcrumbs.storageGroup": "Storage Group",
 
   "connect": "Connect",
-  "add-cluster": "Add Cluster"
+  "add-cluster": "Add Cluster",
+
+  "action_edit-db": "Edit database",
+  "action_delete-db": "Delete database",
+  "action_manage": "Manage"
 }

src/containers/Tenants/Tenants.scss

@@ -65,8 +65,4 @@
 
         margin: 0 0 0 auto;
     }
-
-    &__remove-db {
-        color: var(--ydb-color-status-red);
-    }
 }

src/containers/Tenants/Tenants.tsx

@@ -374,7 +374,7 @@ function getDBActionsColumn({
                             databaseData: row,
                         });
                     },
-                    className: b('remove-db'),
+                    theme: 'danger',
                 });
             }
 

src/store/reducers/tenant/tenant.ts

@@ -6,6 +6,7 @@ import type {TTenantInfo} from '../../../types/api/tenant';
 import {TENANT_INITIAL_PAGE_KEY} from '../../../utils/constants';
 import {useClusterNameFromQuery} from '../../../utils/hooks/useDatabaseFromQuery';
 import {api} from '../api';
+import {prepareTenants} from '../tenants/utils';
 
 import {TENANT_DIAGNOSTICS_TABS_IDS, TENANT_METRICS_TABS_IDS} from './constants';
 import {tenantPageSchema} from './types';
@@ -74,7 +75,7 @@ export const tenantApi = api.injectEndpoints({
                     } else {
                         tenantData = await window.api.viewer.getTenantInfo({path}, {signal});
                     }
-                    const databases = tenantData.TenantInfo || [];
+                    const databases = prepareTenants(tenantData.TenantInfo || []);
                     // previous meta versions do not support filtering databases by name
                     const data =
                         databases.find((tenant) => tenant.Name === path) ?? databases[0] ?? null;