ydb-embedded-ui 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* revert prettier config, fix build ([c47dddf](https://github.com/ydb-platform/ydb-embedded-ui/commit/c47dddf834eadfd5642af62e0cc94f7567ec68fd))
+
 ## [2.2.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.1.0...v2.2.0) (2022-10-14)
 
 

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/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/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

@@ -84,7 +84,7 @@ class Nodes extends React.Component {
                 <TextInput
                     className={b('search')}
                     placeholder="Host name"
-                    text={searchQuery}
+                    value={searchQuery}
                     onUpdate={this.handleSearchQueryChange}
                     hasClear
                     autoFocus

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

@@ -68,14 +68,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 +100,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 +128,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 +146,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 +201,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;
@@ -254,7 +237,11 @@ class Storage extends React.Component {
             <div className={b('controls')}>
                 <div className={b('search')}>
                     <StorageFilter
-                        placeholder={storageType === StorageTypes.groups ? 'Group ID, Pool name' : 'Node ID, FQDN'}
+                        placeholder={
+                            storageType === StorageTypes.groups
+                                ? 'Group ID, Pool name'
+                                : 'Node ID, FQDN'
+                        }
                         onChange={setStorageFilter}
                         value={filter}
                     />
@@ -303,14 +290,8 @@ class Storage extends React.Component {
         return (
             <div className={b()}>
                 {this.renderControls()}
-                {error && (
-                    <div>{error.statusText}</div>
-                )}
-                {showLoader ? (
-                    this.renderLoader()
-                ) : (
-                    this.renderDataTable()
-                )}
+                {error && <div>{error.statusText}</div>}
+                {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;
-    }
 }

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -1,7 +1,9 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
-import {Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+
+import shieldIcon from '../../../assets/icons/shield.svg';
 
 import {Stack} from '../../../components/Stack/Stack';
 //@ts-ignore
@@ -25,6 +27,7 @@ import './StorageGroups.scss';
 
 enum TableColumnsIds {
     PoolName = 'PoolName',
+    Type = 'Type',
     GroupID = 'GroupID',
     Used = 'Used',
     Limit = 'Limit',
@@ -49,6 +52,7 @@ interface StorageGroupsProps {
 
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     PoolName: 'Pool Name',
+    Type: 'Type',
     GroupID: 'Group ID',
     Used: 'Used',
     Limit: 'Limit',
@@ -100,7 +104,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
                     <div className={b('pool-name-wrapper')}>
                         {splitted && (
                             <Popover
-                                content={<span className={b('tooltip')}>{value as string}</span>}
+                                content={value as string}
                                 placement={['right']}
                                 behavior={PopoverBehavior.Immediate}
                             >
@@ -114,6 +118,27 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
             },
             align: DataTable.LEFT,
         },
+        {
+            name: TableColumnsIds.Type,
+            header: tableColumnsNames[TableColumnsIds.Type],
+            render: ({value, row}) => (
+                <>
+                    <Label>{value as string || '—'}</Label>
+                    {' '}
+                    {row.Encryption && (
+                        <Popover
+                            content={i18n('encrypted')}
+                            placement="right"
+                            behavior={PopoverBehavior.Immediate}
+                        >
+                            <Label>
+                                <Icon data={shieldIcon} />
+                            </Label>
+                        </Popover>
+                    )}
+                </>
+            ),
+        },
         {
             name: TableColumnsIds.Missing,
             header: tableColumnsNames[TableColumnsIds.Missing],

package/dist/containers/Storage/StorageGroups/i18n/en.json

@@ -2,5 +2,6 @@
     "empty.default": "No such groups",
     "empty.out_of_space": "No groups with out of space errors",
     "empty.degraded": "No degraded groups",
-    "show_all": "Show all groups"
+    "show_all": "Show all groups",
+    "encrypted": "Encrypted group"
 }

package/dist/containers/Storage/StorageGroups/i18n/ru.json

@@ -2,5 +2,6 @@
     "empty.default": "Нет групп",
     "empty.out_of_space": "Нет групп, в которых кончается место",
     "empty.degraded": "Нет деградировавших групп",
-    "show_all": "Показать все группы"
+    "show_all": "Показать все группы",
+    "encrypted": "Зашифрованная группа"
 }

package/dist/containers/Storage/StorageNodes/StorageNodes.scss

@@ -7,27 +7,29 @@
 
         min-width: 500px;
     }
-    &__pool-name-wrapper {
-        display: flex;
-        align-items: flex-end;
+    &__pdisks-item {
+        flex-grow: 1;
+
+        max-width: 200px;
+        margin-right: 10px;
+
+        &:last-child {
+            margin-right: 0px;
+        }
+    }
+    &__fqdn-wrapper {
+        width: 330px;
     }
-    &__pool-name {
+    &__fqdn {
         display: inline-block;
         overflow: hidden;
 
-        width: 330px;
         max-width: 330px;
 
+        vertical-align: top;
         text-overflow: ellipsis;
     }
     &__group-id {
         font-weight: 500;
     }
-    &__tooltip-wrapper {
-        display: flex;
-        align-items: center;
-    }
-    &__tooltip {
-        word-break: break-all;
-    }
 }

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -1,9 +1,9 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
+
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
 import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
-//@ts-ignore
 import {VisibleEntities} from '../../../store/reducers/storage';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
@@ -75,13 +75,13 @@ function StorageNodes({data, tableSettings, visibleEntities, onShowAll}: Storage
             width: 350,
             render: ({value}) => {
                 return (
-                    <div className={b('tooltip-wrapper')}>
+                    <div className={b('fqdn-wrapper')}>
                         <Popover
-                            content={<span className={b('tooltip')}>{value as string}</span>}
+                            content={value as string}
                             placement={['right']}
                             behavior={PopoverBehavior.Immediate}
                         >
-                            <span className={b('pool-name')}>{value as string}</span>
+                            <span className={b('fqdn')}>{value as string}</span>
                         </Popover>
                     </div>
                 );
@@ -108,7 +108,9 @@ function StorageNodes({data, tableSettings, visibleEntities, onShowAll}: Storage
             render: ({value, row}) => (
                 <div className={b('pdisks-wrapper')}>
                     {_.map(value as any, (el) => (
-                        <Pdisk key={el.PDiskId} {...el} NodeId={row.NodeId} />
+                        <div className={b('pdisks-item')}>
+                            <Pdisk key={el.PDiskId} {...el} NodeId={row.NodeId} />
+                        </div>
                     ))}
                 </div>
             ),

package/dist/containers/Storage/Vdisk/Vdisk.js

@@ -1,17 +1,22 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
+
 import {Label, Popup} from '@gravity-ui/uikit';
 
-import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
+import InternalLink from '../../../components/InternalLink/InternalLink';
+import {InfoViewer} from '../../../components/InfoViewer';
+
 import routes, {createHref} from '../../../routes';
 import {stringifyVdiskId, getPDiskId} from '../../../utils';
 import {getPDiskType} from '../../../utils/pdisk';
-import {InfoViewer} from '../../../components/InfoViewer';
+import {bytesToGB, bytesToSpeed} 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';
 
@@ -225,33 +230,41 @@ function Vdisk(props) {
         const available = AvailableSize ? AvailableSize : PDisk?.AvailableSize;
 
         if (!available) {
-            return;
+            return undefined;
         }
-        return !isNaN(Number(AllocatedSize))
-            ? (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize))
-            : undefined;
+
+        return isNaN(Number(AllocatedSize))
+            ? undefined
+            : (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize));
     }, [props.AllocatedSize, props.AvailableSize, props.PDisk?.AvailableSize]);
 
     return (
         <React.Fragment>
             {renderPopup()}
             <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
-                <DiskStateProgressBar
-                    diskAllocatedPercent={vdiskAllocatedPercent}
-                    severity={severity}
-                    href={
-                        props.NodeId
-                            ? createHref(
-                                routes.node,
-                                {id: props.NodeId, activeTab: STRUCTURE},
-                                {
-                                    pdiskId: props.PDisk?.PDiskId,
-                                    vdiskId: stringifyVdiskId(props.VDiskId),
-                                },
-                            )
-                            : undefined
-                    }
-                />
+                {props.NodeId ? (
+                    <InternalLink
+                        to={createHref(
+                            routes.node,
+                            {id: props.NodeId, activeTab: STRUCTURE},
+                            {
+                                pdiskId: props.PDisk?.PDiskId,
+                                vdiskId: stringifyVdiskId(props.VDiskId),
+                            },
+                        )}
+                        className={b('content')}
+                    >
+                        <DiskStateProgressBar
+                            diskAllocatedPercent={vdiskAllocatedPercent}
+                            severity={severity}
+                        />
+                    </InternalLink>
+                ) : (
+                    <DiskStateProgressBar
+                        diskAllocatedPercent={vdiskAllocatedPercent}
+                        severity={severity}
+                    />
+                )}
             </div>
         </React.Fragment>
     );

package/dist/containers/Storage/Vdisk/Vdisk.scss

@@ -1,4 +1,10 @@
 .vdisk-storage {
+    border-radius: 4px; // to match interactive area with disk shape
+
+    &__content {
+        border-radius: 4px; // to match interactive area with disk shape
+    }
+
     &__popup-wrapper {
         padding: 12px;