Merge branch 'main' into astandrik.add-rows-limit-to-query-settings-1253

Author: astandrik

CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [6.19.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.18.0...v6.19.0) (2024-09-13)
+
+
+### Features
+
+* add storage/groups endpoint ([#1273](https://github.com/ydb-platform/ydb-embedded-ui/issues/1273)) ([42ee9a4](https://github.com/ydb-platform/ydb-embedded-ui/commit/42ee9a470632807650cfc0dd934f5b0a3d30c909))
+* **Diagnostics:** display db feature flags ([#1229](https://github.com/ydb-platform/ydb-embedded-ui/issues/1229)) ([182d803](https://github.com/ydb-platform/ydb-embedded-ui/commit/182d803205667794f16811de1be5ea685b1478e8))
+* **Header:** use cluster domain if cluster name is undefined ([#1271](https://github.com/ydb-platform/ydb-embedded-ui/issues/1271)) ([125d556](https://github.com/ydb-platform/ydb-embedded-ui/commit/125d556810a4013aee9a97bfde3db27f3e4e0b5b))
+* **Node:** enable nodes switch in storage tab on node page ([#1277](https://github.com/ydb-platform/ydb-embedded-ui/issues/1277)) ([07560ed](https://github.com/ydb-platform/ydb-embedded-ui/commit/07560ed8fca8cedbd473f629267522596d1ecb35))
+* **package:** export AsideNavigation ([#1262](https://github.com/ydb-platform/ydb-embedded-ui/issues/1262)) ([bb647f5](https://github.com/ydb-platform/ydb-embedded-ui/commit/bb647f5588a7ddcf11b3efa45067b79462159e97))
+* paginated table fixes ([#1265](https://github.com/ydb-platform/ydb-embedded-ui/issues/1265)) ([d0ef412](https://github.com/ydb-platform/ydb-embedded-ui/commit/d0ef412197f84542faff019e524855bf81989315))
+* use /db_clusters to get base cluster info ([#1251](https://github.com/ydb-platform/ydb-embedded-ui/issues/1251)) ([cd8c7dc](https://github.com/ydb-platform/ydb-embedded-ui/commit/cd8c7dc69364eedfcb490060ca1cdd2d0b4e1e77))
+* use groups handler for storage ([#1225](https://github.com/ydb-platform/ydb-embedded-ui/issues/1225)) ([45c0a1e](https://github.com/ydb-platform/ydb-embedded-ui/commit/45c0a1e8dc15eb4a404177a6f02e3e947d9a27e2))
+
+
+### Bug Fixes
+
+* **autocomplete:** do not lose folder if its name is equals to database ([#1290](https://github.com/ydb-platform/ydb-embedded-ui/issues/1290)) ([f22bdba](https://github.com/ydb-platform/ydb-embedded-ui/commit/f22bdbab6493a07c6150d7a6a52b4064f62f58ac))
+* better retry timeout for traces ([#1263](https://github.com/ydb-platform/ydb-embedded-ui/issues/1263)) ([400a526](https://github.com/ydb-platform/ydb-embedded-ui/commit/400a526d9b587563eb977c33e70d0134f41d861d))
+* gh-pages commit history ([#1275](https://github.com/ydb-platform/ydb-embedded-ui/issues/1275)) ([f09ccd3](https://github.com/ydb-platform/ydb-embedded-ui/commit/f09ccd3d8fe7fa87b1b162ef386c6dd01f69eb4f))
+* **PaginatedStorageNodes:** increase row height ([#1282](https://github.com/ydb-platform/ydb-embedded-ui/issues/1282)) ([08e4308](https://github.com/ydb-platform/ydb-embedded-ui/commit/08e43089fd99ad762d1d6c0300c9c07e5c07dc00))
+* unnecessary background refresh on query page ([#1256](https://github.com/ydb-platform/ydb-embedded-ui/issues/1256)) ([04b4313](https://github.com/ydb-platform/ydb-embedded-ui/commit/04b431377e143c002426c39ceca713dbe14cd23e))
+* update alter table query template ([#1284](https://github.com/ydb-platform/ydb-embedded-ui/issues/1284)) ([4bf43af](https://github.com/ydb-platform/ydb-embedded-ui/commit/4bf43aff05acd1ab20f670e77b3bdd42c9213d42))
+
 ## [6.18.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v6.17.2...v6.18.0) (2024-09-04)
 
 

config-overrides.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
+const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-
 const srcRoot = path.resolve(__dirname, 'src');
 const uiKitRoot = path.resolve(__dirname, 'node_modules/@gravity-ui/uikit');
 const uiKitIconsRoot = path.resolve(__dirname, 'node_modules/@gravity-ui/icons');
@@ -34,6 +34,11 @@ module.exports = {
             }),
         );
 
+        const cssExtractPlugin = config.plugins.find((p) => p instanceof MiniCSSExtractPlugin);
+        if (cssExtractPlugin) {
+            cssExtractPlugin.options.ignoreOrder = true;
+        }
+
         return config;
     },
     jest: (config) => {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "6.18.0",
+  "version": "6.19.0",
   "files": [
     "dist"
   ],
@@ -149,6 +149,7 @@
     "husky": "^9.0.11",
     "jest-transform-css": "^6.0.1",
     "lint-staged": "^15.2.7",
+    "mini-css-extract-plugin": "^2.9.1",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "monaco-yql-languages": "^1.0.6",
     "npm-run-all": "^4.1.5",

package.json

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {CircleXmarkFill, TriangleExclamationFill} from '@gravity-ui/icons';
-import {Dialog, Icon} from '@gravity-ui/uikit';
+import {Checkbox, Dialog, Icon} from '@gravity-ui/uikit';
 
 import type {IResponseError} from '../../types/api/error';
 import {cn} from '../../utils/cn';
@@ -29,6 +29,7 @@ interface CriticalActionDialogProps<T> {
     text?: string;
     withRetry?: boolean;
     retryButtonText?: string;
+    withCheckBox?: boolean;
     onClose: VoidFunction;
     onConfirm: (isRetry?: boolean) => Promise<T>;
     onConfirmActionSuccess: VoidFunction;
@@ -41,13 +42,15 @@ export function CriticalActionDialog<T>({
     text,
     withRetry,
     retryButtonText,
+    withCheckBox,
     onClose,
     onConfirm,
     onConfirmActionSuccess,
     onConfirmActionError,
 }: CriticalActionDialogProps<T>) {
     const [isLoading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState<IResponseError>();
+    const [checkBoxChecked, setCheckBoxChecked] = React.useState<boolean>(false);
 
     const onApply = async (isRetry?: boolean) => {
         setIsLoading(true);
@@ -68,6 +71,19 @@ export function CriticalActionDialog<T>({
 
     const handleTransitionExited = () => {
         setError(undefined);
+        setCheckBoxChecked(false);
+    };
+
+    const renderCheckBox = () => {
+        if (withCheckBox) {
+            return (
+                <Checkbox checked={checkBoxChecked} onUpdate={setCheckBoxChecked}>
+                    {criticalActionDialogKeyset('checkbox-text')}
+                </Checkbox>
+            );
+        }
+
+        return null;
     };
 
     const renderDialogContent = () => {
@@ -111,14 +127,16 @@ export function CriticalActionDialog<T>({
                         </span>
                         {text}
                     </div>
+
+                    {renderCheckBox()}
                 </Dialog.Body>
 
                 <Dialog.Footer
                     loading={isLoading}
                     preset="default"
                     textButtonApply={criticalActionDialogKeyset('button-confirm')}
                     textButtonCancel={criticalActionDialogKeyset('button-cancel')}
-                    propsButtonApply={{type: 'submit'}}
+                    propsButtonApply={{type: 'submit', disabled: withCheckBox && !checkBoxChecked}}
                     onClickButtonCancel={onClose}
                     onClickButtonApply={() => onApply()}
                 />

src/components/CriticalActionDialog/CriticalActionDialog.tsx

@@ -5,5 +5,7 @@
   "button-confirm": "Confirm",
   "button-retry": "Retry",
   "button-cancel": "Cancel",
-  "button-close": "Close"
+  "button-close": "Close",
+
+  "checkbox-text": "I understand what I'm doing"
 }

src/components/CriticalActionDialog/i18n/en.json

@@ -1,13 +1,12 @@
+@import '../../styles/mixins';
+
 .storage-disk-progress-bar {
     $block: &;
 
     $border-width: 1px;
     $outer-border-radius: 4px;
     $inner-border-radius: $outer-border-radius - $border-width;
 
-    --progress-bar-border-color: var(--g-color-base-misc-heavy);
-    --progress-bar-background-color: var(--g-color-base-misc-light);
-    --progress-bar-fill-color: var(--g-color-base-misc-medium);
     --progress-bar-full-height: var(--g-text-body-3-line-height);
     --progress-bar-compact-height: 12px;
 
@@ -20,9 +19,10 @@
     text-align: center;
 
     color: var(--g-color-text-primary);
-    border: $border-width solid var(--progress-bar-border-color);
+    border: $border-width solid var(--entity-state-border-color);
     border-radius: $outer-border-radius;
-    background-color: var(--progress-bar-background-color);
+    background-color: var(--entity-state-background-color);
+    @include entity-state-colors();
 
     &_compact {
         min-width: 0;
@@ -31,35 +31,6 @@
         border-radius: 2px;
     }
 
-    &_green {
-        --progress-bar-border-color: var(--g-color-base-positive-heavy);
-        --progress-bar-background-color: var(--g-color-base-positive-light);
-        --progress-bar-fill-color: var(--g-color-base-positive-medium);
-    }
-
-    &_blue {
-        --progress-bar-border-color: var(--g-color-base-info-heavy);
-        --progress-bar-background-color: var(--g-color-base-info-light);
-        --progress-bar-fill-color: var(--g-color-base-info-medium);
-    }
-
-    &_yellow {
-        --progress-bar-border-color: var(--g-color-base-warning-heavy);
-        --progress-bar-background-color: var(--g-color-base-yellow-light);
-        --progress-bar-fill-color: var(--g-color-base-yellow-medium);
-    }
-
-    &_orange {
-        --progress-bar-border-color: var(--ydb-color-status-orange);
-        --progress-bar-background-color: var(--g-color-base-warning-light);
-        --progress-bar-fill-color: var(--g-color-base-warning-medium);
-    }
-    &_red {
-        --progress-bar-border-color: var(--g-color-base-danger-heavy);
-        --progress-bar-background-color: var(--g-color-base-danger-light);
-        --progress-bar-fill-color: var(--g-color-base-danger-medium);
-    }
-
     &_faded {
         background-color: unset;
     }
@@ -78,11 +49,11 @@
         height: 100%;
 
         border-radius: $inner-border-radius 0 0 $inner-border-radius;
-        background-color: var(--progress-bar-fill-color);
+        background-color: var(--entity-state-fill-color);
 
         &_faded {
             // Bg color is light variant, use it to make bar less bright
-            background-color: var(--progress-bar-background-color);
+            background-color: var(--entity-state-background-color);
         }
 
         &_compact {

src/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {cn} from '../../utils/cn';
 
 import './Tag.scss';
@@ -7,7 +9,7 @@ const b = cn('tag');
 export type TagType = 'blue';
 
 interface TagProps {
-    text: string;
+    text: React.ReactNode;
     type?: TagType;
 }
 

src/components/Tag/Tag.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {cn} from '../../utils/cn';
 import type {TagType} from '../Tag';
 import {Tag} from '../Tag';
@@ -7,7 +9,7 @@ import './Tags.scss';
 const b = cn('tags');
 
 interface TagsProps {
-    tags: string[];
+    tags: React.ReactNode[];
     tagsType?: TagType;
     className?: string;
 }

src/components/Tags/Tags.tsx

@@ -9,7 +9,11 @@ import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefres
 import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
 import {InternalLink} from '../../components/InternalLink';
 import routes, {getLocationObjectFromHref} from '../../routes';
-import {clusterApi, updateDefaultClusterTab} from '../../store/reducers/cluster/cluster';
+import {
+    clusterApi,
+    selectClusterTitle,
+    updateDefaultClusterTab,
+} from '../../store/reducers/cluster/cluster';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import type {
     AdditionalClusterProps,
@@ -18,7 +22,6 @@ import type {
     AdditionalVersionsProps,
 } from '../../types/additionalProps';
 import {cn} from '../../utils/cn';
-import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
 import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {parseVersionsToVersionToColorMap} from '../../utils/versions';
 import {NodesWrapper} from '../Nodes/NodesWrapper';
@@ -58,6 +61,10 @@ export function Cluster({
         backend: StringParam,
     });
 
+    const clusterTitle = useTypedSelector((state) =>
+        selectClusterTitle(state, clusterName ?? undefined),
+    );
+
     const {
         data: {clusterData: cluster = {}, groupsStats} = {},
         isLoading: infoLoading,
@@ -66,11 +73,9 @@ export function Cluster({
 
     const clusterError = error && typeof error === 'object' ? error : undefined;
 
-    const {Name} = cluster;
-
     React.useEffect(() => {
         dispatch(setHeaderBreadcrumbs('cluster', {}));
-    }, [dispatch, Name]);
+    }, [dispatch]);
 
     const versionToColor = React.useMemo(() => {
         if (additionalVersionsProps?.getVersionToColorMap) {
@@ -88,13 +93,12 @@ export function Cluster({
             <EntityStatus
                 size="m"
                 status={cluster?.Overall}
-                name={cluster?.Name ?? CLUSTER_DEFAULT_TITLE}
+                name={clusterTitle}
                 className={b('title')}
             />
         );
     };
 
-    const clusterTitle = cluster?.Name ?? clusterName ?? CLUSTER_DEFAULT_TITLE;
     const activeTab = React.useMemo(
         () => clusterTabs.find(({id}) => id === activeTabId),
         [activeTabId],