fix: review fixes

Author: astandrik

src/components/CriticalActionDialog/CriticalActionDialog.tsx

@@ -15,7 +15,7 @@ const b = cn('ydb-critical-dialog');
 
 const parseError = (error: IResponseError) => {
     if (error.data && 'issues' in error.data && error.data.issues) {
-        return <ResultIssues data={error.data} />;
+        return <ResultIssues hideSeverity data={error.data} />;
     }
     if (error.status === 403) {
         return criticalActionDialogKeyset('no-rights-error');

src/containers/Operations/Operations.scss

@@ -2,9 +2,4 @@
     &__search {
         width: 220px;
     }
-
-    &__buttons-container {
-        display: flex;
-        gap: var(--g-spacing-2);
-    }
 }

src/containers/Operations/columns.tsx

@@ -1,20 +1,20 @@
 import {duration} from '@gravity-ui/date-utils';
 import {Ban, CircleStop} from '@gravity-ui/icons';
 import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
-import {Icon, Text} from '@gravity-ui/uikit';
+import {Flex, Icon, Text} from '@gravity-ui/uikit';
 
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
 import {operationsApi} from '../../store/reducers/operations';
 import type {TOperation} from '../../types/api/operations';
 import {EStatusCode} from '../../types/api/operations';
 import {EMPTY_DATA_PLACEHOLDER, HOUR_IN_SECONDS, SECOND_IN_MS} from '../../utils/constants';
+import createToast from '../../utils/createToast';
 import {formatDateTime} from '../../utils/dataFormatters/dataFormatters';
 import {parseProtobufTimestampToMs} from '../../utils/timeParsers';
 
 import {COLUMNS_NAMES, COLUMNS_TITLES} from './constants';
 import i18n from './i18n';
-import {b} from './shared';
 
 import './Operations.scss';
 
@@ -162,15 +162,22 @@ function OperationsActions({operation, database, refreshTable}: OperationsAction
     }
 
     return (
-        <div className={b('buttons-container')}>
+        <Flex gap="2">
             <ButtonWithConfirmDialog
                 buttonView="outlined"
                 dialogHeader={i18n('header_forget')}
                 dialogText={i18n('text_forget')}
                 onConfirmAction={() =>
                     forgetOperation({id, database})
                         .unwrap()
-                        .then(() => refreshTable())
+                        .then(() => {
+                            createToast({
+                                name: 'Forgotten',
+                                title: i18n('text_forgotten', {id}),
+                                type: 'success',
+                            });
+                            refreshTable();
+                        })
                 }
                 buttonDisabled={isLoadingCancel}
                 withPopover
@@ -187,7 +194,14 @@ function OperationsActions({operation, database, refreshTable}: OperationsAction
                 onConfirmAction={() =>
                     cancelOperation({id, database})
                         .unwrap()
-                        .then(() => refreshTable())
+                        .then(() => {
+                            createToast({
+                                name: 'Cancelled',
+                                title: i18n('text_cancelled', {id}),
+                                type: 'success',
+                            });
+                            refreshTable();
+                        })
                 }
                 buttonDisabled={isForgetLoading}
                 withPopover
@@ -197,6 +211,6 @@ function OperationsActions({operation, database, refreshTable}: OperationsAction
             >
                 <Icon data={CircleStop} />
             </ButtonWithConfirmDialog>
-        </div>
+        </Flex>
     );
 }

src/containers/Operations/i18n/en.json

@@ -18,5 +18,7 @@
   "header_cancel": "Cancel operation",
   "header_forget": "Forget operation",
   "text_cancel": "The operation will be cancelled. Do you want to proceed?",
-  "text_forget": "The operation will be forgotten. Do you want to proceed?"
+  "text_forget": "The operation will be forgotten. Do you want to proceed?",
+  "text_forgotten": "The operation {{id}} has been forgotten",
+  "text_cancelled": "The operation {{id}} has been cancelled"
 }

src/containers/Tenant/Query/Issues/Issues.tsx

@@ -25,9 +25,10 @@ const blockIssue = cn('kv-issue');
 
 interface ResultIssuesProps {
     data: ErrorResponse | string;
+    hideSeverity?: boolean;
 }
 
-export function ResultIssues({data}: ResultIssuesProps) {
+export function ResultIssues({data, hideSeverity}: ResultIssuesProps) {
     const [showIssues, setShowIssues] = React.useState(false);
 
     const issues = typeof data === 'string' ? undefined : data?.issues;
@@ -41,7 +42,11 @@ export function ResultIssues({data}: ResultIssuesProps) {
             const severity = getSeverity(data?.error?.severity);
             content = (
                 <React.Fragment>
-                    <IssueSeverity severity={severity} />{' '}
+                    {hideSeverity ? null : (
+                        <React.Fragment>
+                            <IssueSeverity severity={severity} />{' '}
+                        </React.Fragment>
+                    )}
                     <span className={blockWrapper('error-message-text')}>
                         {data?.error?.message}
                     </span>
@@ -62,29 +67,44 @@ export function ResultIssues({data}: ResultIssuesProps) {
                     </Button>
                 )}
             </div>
-            {hasIssues && showIssues && <Issues issues={issues} />}
+            {hasIssues && showIssues && <Issues hideSeverity={hideSeverity} issues={issues} />}
         </div>
     );
 }
 
 interface IssuesProps {
     issues: IssueMessage[] | null | undefined;
+    hideSeverity?: boolean;
 }
-export function Issues({issues}: IssuesProps) {
+export function Issues({issues, hideSeverity}: IssuesProps) {
     const mostSevereIssue = issues?.reduce((result, issue) => {
         const severity = issue.severity ?? 10;
         return Math.min(result, severity);
     }, 10);
     return (
         <div className={blockIssues(null)}>
             {issues?.map((issue, index) => (
-                <Issue key={index} issue={issue} expanded={issue === mostSevereIssue} />
+                <Issue
+                    key={index}
+                    hideSeverity={hideSeverity}
+                    issue={issue}
+                    expanded={issue === mostSevereIssue}
+                />
             ))}
         </div>
     );
 }
 
-function Issue({issue, level = 0}: {issue: IssueMessage; expanded?: boolean; level?: number}) {
+function Issue({
+    issue,
+    hideSeverity,
+    level = 0,
+}: {
+    issue: IssueMessage;
+    expanded?: boolean;
+    hideSeverity?: boolean;
+    level?: number;
+}) {
     const [isExpand, setIsExpand] = React.useState(true);
     const severity = getSeverity(issue.severity);
     const position = getIssuePosition(issue);
@@ -111,7 +131,7 @@ function Issue({issue, level = 0}: {issue: IssueMessage; expanded?: boolean; lev
                         <ArrowToggle direction={arrowDirection} size={16} />
                     </Button>
                 )}
-                <IssueSeverity severity={severity} />
+                {hideSeverity ? null : <IssueSeverity severity={severity} />}
 
                 <span className={blockIssue('message')}>
                     {position && (