fix: fix status colors (#757)

* migrate EntityStatus to TS
* move healthcheckInfo reducer files, rename its types
* rename gray to grey color to match with EFlag
* use EFlag where it's possible
* use color state for tenant (previously Tenant state could be only green or grey)

Author: artemmufazalov

src/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -3,7 +3,7 @@ import cn from 'bem-cn-lite';
 import type {AdditionalNodesProps} from '../../types/additionalProps';
 import type {PreparedNode} from '../../store/reducers/node/types';
 
-import EntityStatus from '../EntityStatus/EntityStatus';
+import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {Tags} from '../Tags';
 import {Icon} from '../Icon';
 

src/components/EntityStatus/EntityStatus.js

@@ -91,7 +91,6 @@
     }
 
     &__status-color {
-        &_state_running,
         &_state_green {
             background-color: var(--ydb-color-status-green);
         }
@@ -104,7 +103,6 @@
         &_state_red {
             background-color: var(--ydb-color-status-red);
         }
-        &_state_gray,
         &_state_grey {
             background-color: var(--ydb-color-status-grey);
         }

src/components/EntityStatus/EntityStatus.scss

@@ -0,0 +1,124 @@
+import {Link} from 'react-router-dom';
+import cn from 'bem-cn-lite';
+
+import {Icon, Link as UIKitLink} from '@gravity-ui/uikit';
+
+import {EFlag} from '../../types/api/enums';
+import circleExclamationIcon from '../../assets/icons/circle-exclamation.svg';
+import circleInfoIcon from '../../assets/icons/circle-info.svg';
+import circleTimesIcon from '../../assets/icons/circle-xmark.svg';
+import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg';
+import {ClipboardButton} from '../ClipboardButton';
+import './EntityStatus.scss';
+
+const icons = {
+    [EFlag.Blue]: circleInfoIcon,
+    [EFlag.Yellow]: circleExclamationIcon,
+    [EFlag.Orange]: triangleExclamationIcon,
+    [EFlag.Red]: circleTimesIcon,
+};
+
+const b = cn('entity-status');
+
+interface EntityStatusProps {
+    status?: EFlag;
+    name?: string;
+    label?: string;
+    path?: string;
+    iconPath?: string;
+
+    size?: 'xs' | 's' | 'm' | 'l';
+    mode?: 'color' | 'icons';
+
+    showStatus?: boolean;
+    externalLink?: boolean;
+    withLeftTrim?: boolean;
+
+    hasClipboardButton?: boolean;
+    clipboardButtonAlwaysVisible?: boolean;
+
+    className?: string;
+}
+
+export function EntityStatus({
+    status = EFlag.Grey,
+    name = '',
+    label,
+    path,
+    iconPath,
+
+    size = 's',
+    mode = 'color',
+
+    showStatus = true,
+    externalLink = false,
+    withLeftTrim = false,
+
+    hasClipboardButton,
+    clipboardButtonAlwaysVisible = false,
+
+    className,
+}: EntityStatusProps) {
+    const renderIcon = () => {
+        if (!showStatus) {
+            return null;
+        }
+
+        const modifiers = {state: status.toLowerCase(), size};
+
+        if (mode === 'icons' && status in icons) {
+            return (
+                <Icon
+                    className={b('status-icon', modifiers)}
+                    data={icons[status as keyof typeof icons]}
+                />
+            );
+        }
+
+        return <div className={b('status-color', modifiers)} />;
+    };
+    const renderStatusLink = () => {
+        return (
+            <UIKitLink target="_blank" href={iconPath}>
+                {renderIcon()}
+            </UIKitLink>
+        );
+    };
+    const renderLink = () => {
+        if (externalLink) {
+            return (
+                <UIKitLink className={b('name')} href={path}>
+                    {name}
+                </UIKitLink>
+            );
+        }
+
+        return path ? (
+            <Link className={b('name')} to={path}>
+                {name}
+            </Link>
+        ) : (
+            name && <span className={b('name')}>{name}</span>
+        );
+    };
+    return (
+        <div className={b(null, className)} title={name}>
+            {iconPath ? renderStatusLink() : renderIcon()}
+            {label && (
+                <span title={label} className={b('label', {size, state: status.toLowerCase()})}>
+                    {label}
+                </span>
+            )}
+            <span className={b('link', {'with-left-trim': withLeftTrim})}>{renderLink()}</span>
+            {hasClipboardButton && (
+                <ClipboardButton
+                    text={name}
+                    size="s"
+                    className={b('clipboard-button', {
+                        visible: clipboardButtonAlwaysVisible,
+                    })}
+                />
+            )}
+        </div>
+    );
+}

src/components/EntityStatus/EntityStatus.tsx

@@ -7,7 +7,7 @@ import type {NodeAddress} from '../../types/additionalProps';
 import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import {isUnavailableNode} from '../../utils/nodes';
 
-import EntityStatus from '../EntityStatus/EntityStatus';
+import {EntityStatus} from '../EntityStatus/EntityStatus';
 import {NodeEndpointsTooltipContent} from '../TooltipsContent';
 import {Icon} from '../Icon';
 import {CellWithPopover} from '../CellWithPopover/CellWithPopover';

src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -16,7 +16,7 @@
         padding: 10px;
     }
 
-    &_status_gray {
+    &_status_grey {
         background-color: var(--ydb-color-status-grey);
     }
     &_status_yellow {

src/components/Tablet/Tablet.scss

@@ -86,7 +86,7 @@ function TabletsOverall({tablets}: TabletsOverallProps) {
         value: statesForOverallProgress[key],
     }));
 
-    // sort stack to achieve order "green, orange, yellow, red, blue, gray"
+    // sort stack to achieve order "green, orange, yellow, red, blue, grey"
     stack.sort((a, b) => COLORS_PRIORITY[b.colorKey] - COLORS_PRIORITY[a.colorKey]);
 
     return (

src/components/TabletsOverall/TabletsOverall.tsx

@@ -39,7 +39,7 @@
             color: var(--g-color-text-danger);
             background: var(--g-color-base-danger-light);
         }
-        &_state_gray {
+        &_state_grey {
             color: var(--g-color-text-secondary);
             border: 1px solid var(--g-color-line-generic-hover);
         }

src/components/TabletsStatistic/TabletsStatistic.scss

@@ -170,7 +170,7 @@ export const TableHead = <T,>({
         let newSortParams: SortParams = {};
 
         // Order is changed in following order:
-        // 1. Inactive Sort Order - gray icon of default order
+        // 1. Inactive Sort Order - grey icon of default order
         // 2. Active default order
         // 3. Active not default order
         if (columnId === sortParams.columnId) {

src/components/VirtualTable/TableHead.tsx

@@ -25,7 +25,7 @@ import {Tenants} from '../Tenants/Tenants';
 import {StorageWrapper} from '../Storage/StorageWrapper';
 import {NodesWrapper} from '../Nodes/NodesWrapper';
 import {Versions} from '../Versions/Versions';
-import EntityStatus from '../../components/EntityStatus/EntityStatus';
+import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
 import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
 
 import {ClusterInfo} from './ClusterInfo/ClusterInfo';