ydb-embedded-ui 2.2.1 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [2.4.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.3.0...v2.4.0) (2022-10-27)
+
+
+### Features
+
+* **Diagnostics:** add consumers tab for topics ([4bb801c](https://github.com/ydb-platform/ydb-embedded-ui/commit/4bb801c0ef19dcda227c59e464b08f5e8f284c38))
+
+
+### Bug Fixes
+
+* add checks for fetch failure with no errors ([2c55107](https://github.com/ydb-platform/ydb-embedded-ui/commit/2c55107a7b47b3540ed0af66630ff85591f269a1))
+* **Nodes:** display access denied on 403 ([7832afe](https://github.com/ydb-platform/ydb-embedded-ui/commit/7832afee601a40fc8b75f83bf0ed18b01c798d71))
+* **QueryResult:** fix table display in fullscreen ([98674db](https://github.com/ydb-platform/ydb-embedded-ui/commit/98674db26b5fb09ac0d039a7779ae0c58951adde))
+* **QueryResultTable:** make preview display all rows ([0ac83d0](https://github.com/ydb-platform/ydb-embedded-ui/commit/0ac83d0258b0d0d3d2e14c06be096fe5ddce02da))
+* **Storage:** display access denied on 403 ([6d20333](https://github.com/ydb-platform/ydb-embedded-ui/commit/6d2033378956a54f05190905b0d537c6bd6c9851))
+* **TabletsFilters:** display access denied on 403 ([018be19](https://github.com/ydb-platform/ydb-embedded-ui/commit/018be199602123f1d90e58c0b95545f6accc41fb))
+
+## [2.3.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.2.1...v2.3.0) (2022-10-24)
+
+
+### Features
+
+* **PDisk:** display type on disk progressbar ([00bcbf5](https://github.com/ydb-platform/ydb-embedded-ui/commit/00bcbf5d439ca3bb4834fd5f191c65f0ac62585f))
+* **Storage:** display media type for groups ([cdff5e9](https://github.com/ydb-platform/ydb-embedded-ui/commit/cdff5e9882f3f1f8769a3aeaf3e53c05f3ce1c07))
+* **Storage:** display shield icon for encrypted groups ([d0a4442](https://github.com/ydb-platform/ydb-embedded-ui/commit/d0a4442dc100c312dcc54afcf685057cc587211d))
+
+
+### Bug Fixes
+
+* **Diagnostics:** fix tabs reset on page reload ([68d2971](https://github.com/ydb-platform/ydb-embedded-ui/commit/68d297165aea1360d1081349d8133804004f8fe0))
+* **Storage:** prevent loading reset on cancelled fetch ([625159a](https://github.com/ydb-platform/ydb-embedded-ui/commit/625159a396e1ab84fe9da94d047da67fdd03b30f))
+* **Storage:** shrink tooltip active area on FQDN ([7c33d5a](https://github.com/ydb-platform/ydb-embedded-ui/commit/7c33d5afb561efa64f90ce5b93edd30f7d27c247))
+* **Tenant:** prevent selected tab reset on tree navigation ([a4e633a](https://github.com/ydb-platform/ydb-embedded-ui/commit/a4e633aa45c803503fe69e52f0f2cfac4c6aae0d))
+* **Tenant:** show loader when fetching overview data ([ae77495](https://github.com/ydb-platform/ydb-embedded-ui/commit/ae77495faa687652040a1f2965700184220778b4))
+* use correct prop for textinputs value ([de97ba1](https://github.com/ydb-platform/ydb-embedded-ui/commit/de97ba17ba8da54a626509cf08f147f9fcc67004))
+* **useAutofetcher:** pass argument to indicate background fetch ([4063cb1](https://github.com/ydb-platform/ydb-embedded-ui/commit/4063cb1411338d351b612fc46c06bcc708fe32f1))
+
 ## [2.2.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.2.0...v2.2.1) (2022-10-19)
 
 

package/dist/assets/icons/shield.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.69222 1.56606C8.88795 1.47798 9.11205 1.47798 9.30778 1.56606L15.3078 4.26613C15.5769 4.38725 15.75 4.65494 15.75 4.95007V7.24592C15.75 11.1569 13.413 14.6895 9.81353 16.2192L9.29335 16.4403C9.1059 16.5199 8.8941 16.5199 8.70665 16.4403L8.18647 16.2192C4.58703 14.6895 2.25 11.1569 2.25 7.24592V4.95007C2.25 4.65494 2.42309 4.38725 2.69222 4.26613L8.69222 1.56606ZM3.75 5.43501V7.24592C3.75 10.5552 5.72748 13.5443 8.77317 14.8387L9 14.9351L9.22683 14.8387C12.2725 13.5443 14.25 10.5552 14.25 7.24592V5.43501L9 3.07244L3.75 5.43501ZM9.75 8.79933C10.1984 8.53997 10.5 8.05521 10.5 7.5C10.5 6.67157 9.82843 6 9 6C8.17157 6 7.5 6.67157 7.5 7.5C7.5 8.05521 7.80165 8.53997 8.25 8.79933V11.25C8.25 11.6642 8.58579 12 9 12C9.41421 12 9.75 11.6642 9.75 11.25V8.79933Z"/>
+</svg>

package/dist/components/Errors/403/AccessDenied.tsx

@@ -0,0 +1,19 @@
+import EmptyState from '../../EmptyState/EmptyState';
+import {Illustration} from '../../Illustration';
+
+import i18n from '../i18n';
+
+interface AccessDeniedProps {
+    title?: string;
+    description?: string;
+}
+
+export const AccessDenied = ({title, description}: AccessDeniedProps) => {
+    return (
+        <EmptyState
+            image={<Illustration name="403" />}
+            title={title || i18n('403.title')}
+            description={description || i18n('403.description')}
+        />
+    );
+};

package/dist/components/Errors/403/index.ts

@@ -0,0 +1 @@
+export * from './AccessDenied';

package/dist/components/Errors/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "403.title": "Access denied",
+  "403.description": "You don’t have the necessary roles to view this page."
+}

package/dist/components/Errors/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-errors-access-denied';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/components/Errors/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "403.title": "Доступ запрещен",
+  "403.description": "У вас недостаточно прав для просмотра данной страницы."
+}

package/dist/components/NodesViewer/NodesViewer.js

@@ -103,7 +103,7 @@ class NodesViewer extends React.PureComponent {
                     className={b('search')}
                     size="s"
                     placeholder="Host name…"
-                    text={searchQuery}
+                    value={searchQuery}
                     onUpdate={handleSearchQuery}
                     hasClear
                     autoFocus

package/dist/components/QueryResultTable/QueryResultTable.tsx

@@ -17,6 +17,8 @@ import './QueryResultTable.scss';
 const TABLE_SETTINGS: Settings = {
     ...DEFAULT_TABLE_SETTINGS,
     stripedRows: true,
+    dynamicRenderType: 'variable',
+    dynamicItemSizeGetter: () => 40,
 };
 
 export const b = cn('ydb-query-result-table');
@@ -53,7 +55,7 @@ const prepareGenericColumns = (data: KeyValueRow[]) => {
         const column: Column<KeyValueRow> = {
             name,
             align: isNumeric(data[0][name]) ? DataTable.RIGHT : DataTable.LEFT,
-            sortAccessor: (row) => isNumeric(row[name]) ? Number(row[name]) : row[name],
+            sortAccessor: (row) => (isNumeric(row[name]) ? Number(row[name]) : row[name]),
             render: ({value}) => <Cell value={value as string} />,
         };
 
@@ -61,31 +63,28 @@ const prepareGenericColumns = (data: KeyValueRow[]) => {
     });
 };
 
-const getRowIndex = (_: unknown, index: number) => index
+const getRowIndex = (_: unknown, index: number) => index;
 
-interface QueryResultTableProps extends Omit<DataTableProps<KeyValueRow>, 'data' | 'columns' | 'theme'> {
+interface QueryResultTableProps
+    extends Omit<DataTableProps<KeyValueRow>, 'data' | 'columns' | 'theme'> {
     data?: KeyValueRow[];
     columns?: ColumnType[];
 }
 
 export const QueryResultTable = (props: QueryResultTableProps) => {
-    const {
-        columns: rawColumns,
-        data: rawData,
-        settings: settingsMix,
-        ...restProps
-    } = props;
+    const {columns: rawColumns, data: rawData, settings: settingsMix, ...restProps} = props;
 
     const data = useMemo(() => prepareQueryResponse(rawData), [rawData]);
     const columns = useMemo(() => {
-        return rawColumns ?
-            prepareTypedColumns(rawColumns) :
-            prepareGenericColumns(data);
+        return rawColumns ? prepareTypedColumns(rawColumns) : prepareGenericColumns(data);
     }, [data, rawColumns]);
-    const settings = useMemo(() => ({
-        ...TABLE_SETTINGS,
-        ...settingsMix,
-    }), [settingsMix]);
+    const settings = useMemo(
+        () => ({
+            ...TABLE_SETTINGS,
+            ...settingsMix,
+        }),
+        [settingsMix],
+    );
 
     // empty data is expected to be be an empty array
     // undefined data is not rendered at all
@@ -94,11 +93,7 @@ export const QueryResultTable = (props: QueryResultTableProps) => {
     }
 
     if (!columns.length) {
-        return (
-            <div className={b('message')}>
-                {i18n('empty')}
-            </div>
-        );
+        return <div className={b('message')}>{i18n('empty')}</div>;
     }
 
     return (

package/dist/{containers/Storage/StorageFilter/StorageFilter.tsx → components/Search/Search.tsx}

@@ -1,28 +1,28 @@
-import {useEffect, useRef, useState} from 'react';
+import {useRef, useEffect, useState} from 'react';
 
 import {TextInput} from '@gravity-ui/uikit';
 
-interface StorageFilterProps {
-    className?: string;
+interface SearchProps {
+    onChange: (value: string) => void;
     value?: string;
-    placeholder?: string;
-    onChange?: (value: string) => void;
+    className?: string;
     debounce?: number;
+    placeholder?: string;
 }
 
-export const StorageFilter = (props: StorageFilterProps) => {
-    const {
-        className,
-        value = '',
-        placeholder,
-        onChange,
-        debounce = 200,
-    } = props;
-    const [filterValue, setFilterValue] = useState(value);
+export const Search = ({
+    onChange,
+    value = '',
+    className,
+    debounce = 200,
+    placeholder,
+}: SearchProps) => {
+    const [searchValue, setSearchValue] = useState<string>(value);
+
     const timer = useRef<number>();
 
     useEffect(() => {
-        setFilterValue((prevValue) => {
+        setSearchValue((prevValue) => {
             if (prevValue !== value) {
                 return value;
             }
@@ -31,8 +31,8 @@ export const StorageFilter = (props: StorageFilterProps) => {
         });
     }, [value]);
 
-    const changeFilter = (newValue: string) => {
-        setFilterValue(newValue);
+    const onSearchValueChange = (newValue: string) => {
+        setSearchValue(newValue);
 
         window.clearTimeout(timer.current);
         timer.current = window.setTimeout(() => {
@@ -42,12 +42,12 @@ export const StorageFilter = (props: StorageFilterProps) => {
 
     return (
         <TextInput
-            className={className}
-            placeholder={placeholder}
-            value={filterValue}
-            onUpdate={changeFilter}
             hasClear
             autoFocus
+            className={className}
+            placeholder={placeholder}
+            value={searchValue}
+            onUpdate={onSearchValueChange}
         />
     );
-}
+};

package/dist/components/Search/index.ts

@@ -0,0 +1 @@
+export * from './Search';

package/dist/containers/App/App.scss

@@ -31,6 +31,10 @@ body,
     --data-table-row-height: 40px;
 }
 
+.yc-root {
+    --ydb-data-table-color-hover: var(--yc-color-base-float-hover);
+}
+
 .yc-select__label {
     font-weight: 600;
 }
@@ -130,7 +134,7 @@ body,
 }
 
 .yc-root .data-table_highlight-rows .data-table__row:hover {
-    background: var(--yc-color-base-float-hover);
+    background: var(--ydb-data-table-color-hover);
 }
 
 .yc-table-column-setup__item {

package/dist/containers/Nodes/Nodes.js

@@ -8,6 +8,7 @@ import {Loader, TextInput, Label} from '@gravity-ui/uikit';
 
 import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
+import {AccessDenied} from '../../components/Errors/403';
 
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
@@ -84,7 +85,7 @@ class Nodes extends React.Component {
                 <TextInput
                     className={b('search')}
                     placeholder="Host name"
-                    text={searchQuery}
+                    value={searchQuery}
                     onUpdate={this.handleSearchQueryChange}
                     hasClear
                     autoFocus
@@ -164,6 +165,10 @@ class Nodes extends React.Component {
         if (loading && !wasLoaded) {
             return Nodes.renderLoader();
         } else if (error) {
+            if (error.status === 403) {
+                return <AccessDenied />;
+            }
+
             return <div>{error.statusText}</div>;
         } else {
             return this.renderContent();

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -1,18 +1,20 @@
 .storage-disk-progress-bar {
+    $block: &;
+
     $border-width: 2px;
     $outer-border-radius: 4px;
     $inner-border-radius: $outer-border-radius - $border-width;
 
-    $block: &;
     position: relative;
 
-    display: inline-block;
+    display: block;
 
-    width: 100%;
+    min-width: 50px;
     height: var(--yc-text-body-2-line-height);
 
-    vertical-align: top;
+    text-align: center;
 
+    color: var(--yc-color-text-primary);
     border: $border-width solid var(--yc-color-infographics-misc-heavy);
     border-radius: $outer-border-radius;
     background-color: var(--yc-color-infographics-misc-light);
@@ -82,7 +84,7 @@
         }
     }
     &__filled-title {
-        position: absolute;
+        position: relative;
         z-index: 2;
 
         font-size: var(--yc-text-body-1-font-size);

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -5,8 +5,6 @@ import cn from 'bem-cn-lite';
 import {INVERTED_DISKS_KEY} from '../../../utils/constants';
 import {getSettingValue} from '../../../store/reducers/settings';
 
-import InternalLink from '../../../components/InternalLink/InternalLink';
-
 import './DiskStateProgressBar.scss';
 
 const b = cn('storage-disk-progress-bar');
@@ -23,13 +21,11 @@ export const diskProgressColors = {
 interface DiskStateProgressBarProps {
     diskAllocatedPercent?: number;
     severity?: keyof typeof diskProgressColors;
-    href?: string;
 }
 
 function DiskStateProgressBar({
     diskAllocatedPercent = -1,
     severity,
-    href,
 }: DiskStateProgressBarProps) {
     const inverted = useSelector((state) => getSettingValue(state, INVERTED_DISKS_KEY));
 
@@ -63,13 +59,7 @@ function DiskStateProgressBar({
             aria-valuemax={100}
             aria-valuenow={diskAllocatedPercent}
         >
-            {href ? (
-                <InternalLink to={href} className={b('link')}>
-                    {renderAllocatedPercent()}
-                </InternalLink>
-            ) : (
-                renderAllocatedPercent()
-            )}
+            {renderAllocatedPercent()}
         </div>
     );
 }

package/dist/containers/Storage/Pdisk/Pdisk.scss

@@ -1,18 +1,25 @@
 .pdisk-storage {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
+    position: relative;
 
-    max-width: 200px;
-    margin-right: 10px;
+    min-width: 120px;
 
-    cursor: pointer;
+    border-radius: 4px; // to match interactive area with disk shape
 
-    &:last-child {
-        margin-right: 0px;
+    &__content {
+        border-radius: 4px; // to match interactive area with disk shape
     }
 
     &__popup-wrapper {
         padding: 12px;
     }
+
+    &__media-type {
+        position: absolute;
+        top: 0;
+        right: 4px;
+
+        font-size: var(--yc-text-body-1-font-size);
+
+        color: var(--yc-color-text-secondary);
+    }
 }

package/dist/containers/Storage/Pdisk/Pdisk.tsx

@@ -1,21 +1,23 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
+
 import {Popup} from '@gravity-ui/uikit';
 
-import type {RequiredField} from '../../../types';
-//@ts-ignore
-import {bytesToGB} from '../../../utils/utils';
-//@ts-ignore
+import {InfoViewer} from '../../../components/InfoViewer';
+import InternalLink from '../../../components/InternalLink/InternalLink';
+
 import routes, {createHref} from '../../../routes';
-//@ts-ignore
+import type {RequiredField} from '../../../types';
+import {TPDiskStateInfo, TPDiskState} from '../../../types/api/storage';
 import {getPDiskId} from '../../../utils';
 import {getPDiskType} from '../../../utils/pdisk';
-import {TPDiskStateInfo, TPDiskState} from '../../../types/api/storage';
-import {InfoViewer} from '../../../components/InfoViewer';
+import {bytesToGB} from '../../../utils/utils';
+
+import {STRUCTURE} from '../../Node/NodePages';
+
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
-import {STRUCTURE} from '../../Node/NodePages';
 
 import {colorSeverity, NOT_AVAILABLE_SEVERITY} from '../utils';
 
@@ -123,8 +125,9 @@ function Pdisk(props: PDiskProps) {
         const {AvailableSize, TotalSize} = props;
 
         if (!AvailableSize || !TotalSize) {
-            return;
+            return undefined;
         }
+
         return !isNaN(Number(AvailableSize)) && !isNaN(Number(TotalSize))
             ? Math.round(((Number(TotalSize) - Number(AvailableSize)) * 100) / Number(TotalSize))
             : undefined;
@@ -134,15 +137,20 @@ function Pdisk(props: PDiskProps) {
         <React.Fragment>
             {renderPopup()}
             <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
-                <DiskStateProgressBar
-                    diskAllocatedPercent={pdiskAllocatedPercent}
-                    severity={severity as keyof typeof diskProgressColors}
-                    href={createHref(
+                <InternalLink
+                    to={createHref(
                         routes.node,
                         {id: props.NodeId, activeTab: STRUCTURE},
                         {pdiskId: props.PDiskId || ''},
                     )}
-                />
+                    className={b('content')}
+                >
+                    <DiskStateProgressBar
+                        diskAllocatedPercent={pdiskAllocatedPercent}
+                        severity={severity as keyof typeof diskProgressColors}
+                    />
+                    <div className={b('media-type')}>{getPDiskType(props)}</div>
+                </InternalLink>
             </div>
         </React.Fragment>
     );

package/dist/containers/Storage/Storage.js

@@ -5,10 +5,11 @@ import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
 import {RadioButton, Label} from '@gravity-ui/uikit';
 
-import {StorageFilter} from './StorageFilter';
+import {Search} from '../../components/Search';
 import {UsageFilter} from './UsageFilter';
 import {AutoFetcher} from '../../utils/autofetcher';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
+import {AccessDenied} from '../../components/Errors/403';
 
 import {
     getStorageInfo,
@@ -68,14 +69,8 @@ class Storage extends React.Component {
     };
 
     componentDidMount() {
-        const {
-            tenant,
-            nodeId,
-            setVisibleEntities,
-            storageType,
-            setHeader,
-            getNodesList,
-        } = this.props;
+        const {tenant, nodeId, setVisibleEntities, storageType, setHeader, getNodesList} =
+            this.props;
 
         this.autofetcher = new AutoFetcher();
         getNodesList();
@@ -106,12 +101,7 @@ class Storage extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        const {
-            visibleEntities,
-            storageType,
-            autorefresh,
-            database,
-        } = this.props;
+        const {visibleEntities, storageType, autorefresh, database} = this.props;
 
         const startFetch = () => {
             this.getStorageInfo({
@@ -139,7 +129,10 @@ class Storage extends React.Component {
             restartAutorefresh();
         }
 
-        if (storageType !== prevProps.storageType || visibleEntities !== prevProps.visibleEntities) {
+        if (
+            storageType !== prevProps.storageType ||
+            visibleEntities !== prevProps.visibleEntities
+        ) {
             startFetch();
 
             if (!database || (database && autorefresh)) {
@@ -154,25 +147,22 @@ class Storage extends React.Component {
     }
 
     getStorageInfo(data) {
-        const {
-            tenant,
-            nodeId,
-            getStorageInfo,
-        } = this.props;
-
-        getStorageInfo({
-            tenant,
-            nodeId,
-            ...data,
-        }, {
-            concurrentId: 'getStorageInfo',
-        });
+        const {tenant, nodeId, getStorageInfo} = this.props;
+
+        getStorageInfo(
+            {
+                tenant,
+                nodeId,
+                ...data,
+            },
+            {
+                concurrentId: 'getStorageInfo',
+            },
+        );
     }
 
     renderLoader() {
-        return (
-            <TableSkeleton className={b('loader')}/>
-        );
+        return <TableSkeleton className={b('loader')} />;
     }
 
     renderDataTable() {
@@ -212,14 +202,8 @@ class Storage extends React.Component {
     };
 
     renderEntitiesCount() {
-        const {
-            storageType,
-            groupsCount,
-            nodesCount,
-            flatListStorageEntities,
-            loading,
-            wasLoaded,
-        } = this.props;
+        const {storageType, groupsCount, nodesCount, flatListStorageEntities, loading, wasLoaded} =
+            this.props;
 
         let label = `${storageType === StorageTypes.groups ? 'Groups' : 'Nodes'}: `;
         const count = storageType === StorageTypes.groups ? groupsCount : nodesCount;
@@ -253,8 +237,12 @@ class Storage extends React.Component {
         return (
             <div className={b('controls')}>
                 <div className={b('search')}>
-                    <StorageFilter
-                        placeholder={storageType === StorageTypes.groups ? 'Group ID, Pool name' : 'Node ID, FQDN'}
+                    <Search
+                        placeholder={
+                            storageType === StorageTypes.groups
+                                ? 'Group ID, Pool name'
+                                : 'Node ID, FQDN'
+                        }
                         onChange={setStorageFilter}
                         value={filter}
                     />
@@ -300,17 +288,18 @@ class Storage extends React.Component {
         const {loading, wasLoaded, error} = this.props;
         const showLoader = loading && !wasLoaded;
 
+        if (error) {
+            if (error.status === 403) {
+                return <AccessDenied />;
+            }
+
+            return <div className={b()}>{error.statusText}</div>;
+        }
+
         return (
             <div className={b()}>
                 {this.renderControls()}
-                {error && (
-                    <div>{error.statusText}</div>
-                )}
-                {showLoader ? (
-                    this.renderLoader()
-                ) : (
-                    this.renderDataTable()
-                )}
+                {showLoader ? this.renderLoader() : this.renderDataTable()}
             </div>
         );
     }

package/dist/containers/Storage/StorageGroups/StorageGroups.scss

@@ -23,7 +23,7 @@
             background: var(--yc-color-base-background);
 
             .data-table__row:hover & {
-                background: var(--yc-color-base-float-hover);
+                background: var(--ydb-data-table-color-hover);
             }
         }
     }
@@ -51,7 +51,4 @@
     &__group-id {
         font-weight: 500;
     }
-    &__tooltip {
-        word-break: break-all;
-    }
 }