Merge branch 'main' into pdisk-error

ydb-platform · Sep 16, 2024 · 478f514 · 478f514
2 parents 6a29421 + d115989
commit 478f514
Show file tree

Hide file tree

Showing 31 changed files with 551 additions and 307 deletions.
diff --git a/config-overrides.js b/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) => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -147,6 +147,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",

diff --git a/src/components/CriticalActionDialog/CriticalActionDialog.tsx b/src/components/CriticalActionDialog/CriticalActionDialog.tsx
@@ -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()}
                 />

diff --git a/src/components/CriticalActionDialog/i18n/en.json b/src/components/CriticalActionDialog/i18n/en.json
@@ -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"
 }
diff --git a/src/components/DiskStateProgressBar/DiskStateProgressBar.scss b/src/components/DiskStateProgressBar/DiskStateProgressBar.scss
@@ -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 {

diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
@@ -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;
 }
 

diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.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;
 }

diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.scss b/src/containers/Cluster/ClusterInfo/ClusterInfo.scss
@@ -47,24 +47,17 @@
         gap: var(--g-spacing-2);
     }
 
-    &__storage-groups-stats {
-        display: flex;
-        flex-direction: column;
-        gap: 11px;
-    }
-
-    &__groups-stats-bar {
-        cursor: pointer;
-    }
-
-    &__groups-stats-popup-content {
-        padding: 12px;
-    }
-
     &__clipboard-button {
         display: flex;
         align-items: center;
 
         margin-left: 5px;
     }
+    &__dc-count {
+        text-transform: lowercase;
+    }
+    &__nodes-states {
+        display: flex;
+        gap: var(--g-spacing-half);
+    }
 }