feat(Tenants): add onEditDB to uiFactory, add edit button (#2305)

Author: artemmufazalov

src/containers/Tenants/Tenants.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {CirclePlus, TrashBin} from '@gravity-ui/icons';
+import {CirclePlus, Pencil, TrashBin} from '@gravity-ui/icons';
 import type {Column} from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
 import type {DropdownMenuItem} from '@gravity-ui/uikit';
@@ -18,6 +18,7 @@ import {TenantNameWrapper} from '../../components/TenantNameWrapper/TenantNameWr
 import {
     useCreateDatabaseFeatureAvailable,
     useDeleteDatabaseFeatureAvailable,
+    useEditDatabaseFeatureAvailable,
 } from '../../store/reducers/capabilities/hooks';
 import {
     ProblemFilterValues,
@@ -70,6 +71,7 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
 
     const isCreateDBAvailable =
         useCreateDatabaseFeatureAvailable() && uiFactory.onCreateDB !== undefined;
+    const isEditDBAvailable = useEditDatabaseFeatureAvailable() && uiFactory.onEditDB !== undefined;
     const isDeleteDBAvailable =
         useDeleteDatabaseFeatureAvailable() && uiFactory.onDeleteDB !== undefined;
 
@@ -238,51 +240,14 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
             },
         ];
 
-        if (isDeleteDBAvailable) {
-            columns.push({
-                name: 'actions',
-                header: '',
-                width: 40,
-                resizeable: false,
-                align: DataTable.CENTER,
-                render: ({row}) => {
-                    const databaseId = row.UserAttributes?.database_id;
-                    const databaseName = row.Name;
-
-                    let menuItems: (DropdownMenuItem | DropdownMenuItem[])[] = [];
-
-                    if (clusterName && databaseName && databaseId) {
-                        menuItems = [
-                            {
-                                text: i18n('remove'),
-                                iconStart: <TrashBin />,
-                                action: () => {
-                                    uiFactory.onDeleteDB?.({
-                                        clusterName,
-                                        databaseId,
-                                        databaseName,
-                                    });
-                                },
-                                className: b('remove-db'),
-                            },
-                        ];
-                    }
-
-                    if (!menuItems.length) {
-                        return null;
-                    }
-                    return (
-                        <DropdownMenu
-                            defaultSwitcherProps={{
-                                view: 'flat',
-                                size: 's',
-                                pin: 'brick-brick',
-                            }}
-                            items={menuItems}
-                        />
-                    );
-                },
+        if (clusterName && (isDeleteDBAvailable || isEditDBAvailable)) {
+            const actionsColumn = getDBActionsColumn({
+                clusterName,
+                isDeleteDBAvailable,
+                isEditDBAvailable,
             });
+
+            columns.push(actionsColumn);
         }
 
         if (filteredTenants.length === 0 && problemFilter !== ProblemFilterValues.ALL) {
@@ -314,3 +279,60 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
         </div>
     );
 };
+
+function getDBActionsColumn({
+    clusterName,
+    isEditDBAvailable,
+    isDeleteDBAvailable,
+}: {
+    clusterName: string;
+    isEditDBAvailable?: boolean;
+    isDeleteDBAvailable?: boolean;
+}) {
+    return {
+        name: 'actions',
+        header: '',
+        width: 40,
+        resizeable: false,
+        align: DataTable.CENTER,
+        render: ({row}) => {
+            const menuItems: (DropdownMenuItem | DropdownMenuItem[])[] = [];
+
+            const databaseId = row.UserAttributes?.database_id;
+            const databaseName = row.Name;
+
+            if (clusterName && isEditDBAvailable) {
+                menuItems.push({
+                    text: i18n('edit'),
+                    iconStart: <Pencil />,
+                    action: () => {
+                        uiFactory.onEditDB?.({
+                            clusterName,
+                            databaseData: row,
+                        });
+                    },
+                });
+            }
+            if (clusterName && isDeleteDBAvailable && databaseName && databaseId) {
+                menuItems.push({
+                    text: i18n('remove'),
+                    iconStart: <TrashBin />,
+                    action: () => {
+                        uiFactory.onDeleteDB?.({
+                            clusterName,
+                            databaseId,
+                            databaseName,
+                        });
+                    },
+                    className: b('remove-db'),
+                });
+            }
+
+            if (!menuItems.length) {
+                return null;
+            }
+
+            return <DropdownMenu items={menuItems} />;
+        },
+    } satisfies Column<PreparedTenant>;
+}

src/containers/Tenants/i18n/en.json

@@ -1,4 +1,5 @@
 {
   "create-database": "Create database",
-  "remove": "Remove"
+  "remove": "Remove",
+  "edit": "Edit"
 }

src/store/reducers/capabilities/hooks.ts

@@ -116,6 +116,10 @@ export const useCreateDatabaseFeatureAvailable = () => {
     return useGetMetaFeatureVersion('/meta/create_database') >= 1;
 };
 
+export const useEditDatabaseFeatureAvailable = () => {
+    return useGetMetaFeatureVersion('/meta/update_database') >= 1;
+};
+
 export const useDeleteDatabaseFeatureAvailable = () => {
     return useGetMetaFeatureVersion('/meta/delete_database') >= 1;
 };

src/uiFactory/types.ts

@@ -1,8 +1,10 @@
+import type {PreparedTenant} from '../store/reducers/tenants/types';
 import type {GetLogsLink} from '../utils/logs';
 import type {GetMonitoringClusterLink, GetMonitoringLink} from '../utils/monitoring';
 
 export interface UIFactory {
     onCreateDB?: HandleCreateDB;
+    onEditDB?: HandleEditDB;
     onDeleteDB?: HandleDeleteDB;
 
     getLogsLink?: GetLogsLink;
@@ -12,6 +14,11 @@ export interface UIFactory {
 
 export type HandleCreateDB = (params: {clusterName: string}) => Promise<boolean>;
 
+export type HandleEditDB = (params: {
+    clusterName: string;
+    databaseData: PreparedTenant;
+}) => Promise<boolean>;
+
 export type HandleDeleteDB = (params: {
     clusterName: string;
     databaseName: string;