feat: allow pass create and delete DB funcs to UI #2087

artemmufazalov · 2025-04-02T16:10:30Z

How it will work when ui is used as a package: https://nda.ya.ru/t/a_NVBW7U7DHZKw
Stand with multi-cluster embedded version: https://nda.ya.ru/t/AUgj5s8F7DHZHW

Connected issues: #1939, #1940, #1948

CI Results

Test Status: ✅ PASSED

📊 Full Report

Total	Passed	Failed	Flaky	Skipped
298	298	0	0	0

😟 No changes in tests. 😕

Bundle Size: 🔺

Current: 83.27 MB | Main: 83.25 MB
Diff: +0.02 MB (0.02%)

⚠️ Bundle size increased. Please review.

ℹ️ CI Information

Test recordings for failed tests are available in the full report.
Bundle size is measured for the entire 'dist' directory.
📊 indicates links to detailed reports.
🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

artemmufazalov · 2025-04-03T06:25:36Z

src/uiFactory/uiFactory.ts

+
+const uiFactoryBase: UIFactory = {};
+
+export function configureUIFactory(overrides: UIFactory) {


Approach inspired by ytsaurus-ui

https://github.com/ytsaurus/ytsaurus-ui/blob/main/packages/ui/src/ui/UIFactory/index.tsx#L476

I think it is easier and more straightforward to register functions here than to pass it from props.

Function for monitoring and logs links could be added here too

Copilot

Pull Request Overview

This PR adds support for passing database creation and deletion functions to the UI package by exposing new hooks, API endpoints, and UI components.

Introduces new hooks for retrieving cluster names and meta capabilities.
Exposes create and delete database functions via the uiFactory and integrates them into the Tenants component.
Updates API types and endpoints to support meta capabilities querying.

Reviewed Changes

Copilot reviewed 12 out of 15 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/utils/hooks/useDatabaseFromQuery.ts	Added new hook useClusterNameFromQuery to retrieve the clusterName from URL query parameters.
src/utils/createToast.tsx	Modified createToast signature to allow autoHiding to be number or false and added className.
src/uiFactory/uiFactory.ts	Provided a proxy-based uiFactory configuration to restrict direct modifications.
src/uiFactory/types.ts	Defined UIFactory interface with onCreateDB and onDeleteDB handlers.
src/types/api/tenant.ts	Updated Tenant type by refining UserAttributes definition.
src/types/api/capabilities.ts	Added MetaCapabilitiesResponse and refined MetaCapability type union for new endpoints.
src/store/reducers/capabilities/hooks.ts	Introduced hooks to fetch and check meta capabilities and feature availability.
src/store/reducers/capabilities/capabilities.ts	Added a new query endpoint for meta capabilities with error handling and version selection.
src/services/api/meta.ts	Implemented getMetaCapabilities API method with a timeout configuration.
src/containers/Tenants/i18n/index.ts	Registered i18n keysets for the Tenants component.
src/containers/Tenants/Tenants.ts	Integrated create and delete database buttons in Tenants table using uiFactory callbacks.
src/containers/App/Content.ts	Updated content loader to handle meta capabilities loading alongside existing capabilities.

Files not reviewed (3)

src/components/TableWithControlsLayout/TableWithControlsLayout.scss: Language not supported
src/containers/Tenants/Tenants.scss: Language not supported
src/containers/Tenants/i18n/en.json: Language not supported

Comments suppressed due to low confidence (1)

src/containers/Tenants/Tenants.tsx:90

The helper 'b' used for generating CSS class names is not defined or imported. Consider importing or defining 'b' (or using the already imported 'cn') to ensure the class names are generated as intended.

<Button view="action" onClick={() => uiFactory.onCreateDB?.({clusterName})} className={b('create-database')}>

src/containers/Tenants/Tenants.tsx

src/utils/hooks/useDatabaseFromQuery.ts

astandrik · 2025-04-03T12:12:32Z

src/components/TableWithControlsLayout/TableWithControlsLayout.scss

@@ -30,6 +30,8 @@
    &__table {
        position: relative;
        z-index: 2;
+
+        width: max-content;


I am a liitle worried of this style possible impact on other tables

could you please clarify why this style was added

It doesn't needed, thanks

astandrik · 2025-04-03T12:15:11Z

src/containers/App/Content.tsx

@@ -213,8 +215,11 @@ function GetCapabilities({children}: {children: React.ReactNode}) {
    useCapabilitiesQuery();
    const capabilitiesLoaded = useCapabilitiesLoaded();

+    useMetaCapabilitiesQuery();
+    const metaCapabilitiesLoaded = useMetaCapabilitiesLoaded();


Did not dig deep but looks like if there is no meta metaCapabilitiesLoaded will always be falsy and loading will always be true?

astandrik · 2025-04-03T12:20:02Z

src/store/reducers/capabilities/hooks.ts

+export function useMetaCapabilitiesLoaded() {
+    const {data, error} = useTypedSelector(selectMetaCapabilities);
+
+    return Boolean(data || error);


as for me its not that obvious that Loaded is true when we receive error

For capabilities queries error is a valid state and it means that there is no capability endpoint in current cluster / meta cluster. In that case all capabilities considered not available (version 0)

The alternative for this code (return data: {} instead of error in catch block):

getMetaCapabilities: build.query({ queryFn: async () => { try { if (!window.api.meta) { throw new Error('Method is not implemented.'); } const data = await window.api.meta.getMetaCapabilities(); return {data}; } catch { // If capabilities endpoint is not available, there will be an error // That means no new features are available return {data: {}}; } }, }),

What do you think, will it be more clear?

Do we want to handle real errors from this endpoint?

I mean now HTTP 500 and non-existent state are the same data: {}

I don't think so.

In case of error we don't know anything about cluster capabilities, so it's much safer to consider everything disabled.

If response is 500, we can only retry, but we do not retry requests currently

as for me I would split loaded and availability state like

isMetaCapabilitiesAvailable=Boolean(window.api.meta.getMetaCapabilities)

loading={!isCapabilitiesLoaded || (isMetaCapabilitiesAvailable && !isMetaCapabilitiesLoaded)}

because when I see just !isMetaCapabilitiesLoaded I am expecting for it to be loaded

but thats just me and just readability issue

I don't want to add additional code, but added some comments, I hope they will help

feat: allow pass create and delete DB funcs to UI

f708d4d

artemmufazalov commented Apr 3, 2025

View reviewed changes

artemmufazalov requested review from Raubzeug and astandrik April 3, 2025 06:28

artemmufazalov marked this pull request as ready for review April 3, 2025 06:28

astandrik requested a review from Copilot April 3, 2025 11:57

Copilot AI reviewed Apr 3, 2025

View reviewed changes

astandrik reviewed Apr 3, 2025

View reviewed changes

src/containers/Tenants/Tenants.tsx Show resolved Hide resolved

astandrik reviewed Apr 3, 2025

View reviewed changes

src/utils/hooks/useDatabaseFromQuery.ts Show resolved Hide resolved

astandrik reviewed Apr 3, 2025

View reviewed changes

fix: remove unneeded style

268ea9c

artemmufazalov requested a review from astandrik April 3, 2025 12:36

astandrik previously approved these changes Apr 3, 2025

View reviewed changes

add comments to meta capabilities

f492f27

artemmufazalov dismissed astandrik’s stale review via f492f27 April 3, 2025 15:09

artemmufazalov requested a review from astandrik April 3, 2025 15:10

astandrik approved these changes Apr 3, 2025

View reviewed changes

artemmufazalov mentioned this pull request Apr 3, 2025

Create database in UI #1939

Closed

5 tasks

artemmufazalov added this pull request to the merge queue Apr 3, 2025

Merged via the queue into main with commit 810f60b Apr 3, 2025
7 checks passed

artemmufazalov deleted the allow-create-db branch April 3, 2025 15:59

ydb-platform-bot mentioned this pull request Apr 3, 2025

chore(main): release 8.20.0 #2098

Merged

artemmufazalov mentioned this pull request Apr 3, 2025

Add delete DB button to Databases Table #1948

Closed

This was linked to issues Apr 8, 2025

Create database in UI #1939

Closed

Delete database in UI #1940

Closed

Add delete DB button to Databases Table #1948

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: allow pass create and delete DB funcs to UI #2087

feat: allow pass create and delete DB funcs to UI #2087

artemmufazalov commented Apr 2, 2025 •

edited by github-actions bot

Loading

artemmufazalov Apr 3, 2025

Copilot AI left a comment

astandrik Apr 3, 2025

artemmufazalov Apr 3, 2025

astandrik Apr 3, 2025

astandrik Apr 3, 2025

artemmufazalov Apr 3, 2025

astandrik Apr 3, 2025

artemmufazalov Apr 3, 2025

astandrik Apr 3, 2025

artemmufazalov Apr 3, 2025


		const uiFactoryBase: UIFactory = {};

		export function configureUIFactory(overrides: UIFactory) {

feat: allow pass create and delete DB funcs to UI #2087

feat: allow pass create and delete DB funcs to UI #2087

Conversation

artemmufazalov commented Apr 2, 2025 • edited by github-actions bot Loading

CI Results

Test Status: ✅ PASSED

Bundle Size: 🔺

Choose a reason for hiding this comment

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

artemmufazalov commented Apr 2, 2025 •

edited by github-actions bot

Loading