feat(TopicData): add topic message details in Drawer

src/components/Drawer/Drawer.scss

@@ -23,7 +23,7 @@
         top: 0;
         left: 0;
 
-        padding: var(--g-spacing-4) var(--g-spacing-4) 0 var(--g-spacing-6);
+        padding: var(--g-spacing-4) var(--g-spacing-4) 0 var(--g-spacing-4);
 
         background-color: var(--g-color-base-background);
     }
@@ -34,5 +34,10 @@
         flex-direction: column;
 
         height: 100%;
+        //split-pane resizer size
+        margin-left: var(--g-spacing-2);
+    }
+    &__click-handler {
+        display: contents;
     }
 }

src/components/Drawer/Drawer.tsx

@@ -17,6 +17,10 @@
 
 import './Drawer.scss';
 
+type DrawerEvent = MouseEvent & {
+    _capturedInsideDrawer?: boolean;
+};
+
 interface DrawerPaneContentWrapperProps {
     isVisible: boolean;
     onClose: () => void;
@@ -64,7 +68,11 @@
             return undefined;
         }
 
-        const handleClickOutside = (event: MouseEvent) => {
+        const handleClickOutside = (event: DrawerEvent) => {
+            //skip if event is captured inside drawer or not triggered by user
+            if (event._capturedInsideDrawer || !event.isTrusted) {
+                return;
+            }
             if (
                 isVisible &&
                 drawerRef.current &&
@@ -91,6 +99,10 @@
         }
     };
 
+    const handleClickInsideDrawer = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        (event.nativeEvent as DrawerEvent)._capturedInsideDrawer = true;
+    };
+
     return (
         <GravityDrawer
             onEscape={onClose}
@@ -109,7 +121,9 @@
                 className={b('item')}
                 ref={detectClickOutside ? drawerRef : undefined}
             >
-                {children}
+                <div className={b('click-handler')} onClickCapture={handleClickInsideDrawer}>
+                    {children}
+                </div>
             </DrawerItem>
         </GravityDrawer>
     );
@@ -184,7 +198,11 @@
         }
 
         return (
-            <Flex justifyContent="space-between" className={b('header-wrapper', headerClassName)}>
+            <Flex
+                justifyContent="space-between"
+                alignItems="center"
+                className={b('header-wrapper', headerClassName)}
+            >
                 <Text variant="subheader-2">{title}</Text>
                 <Flex className={b('controls')}>{controls}</Flex>
             </Flex>

src/components/EnableFullscreenButton/EnableFullscreenButton.tsx

@@ -1,25 +1,22 @@
 import {SquareDashed} from '@gravity-ui/icons';
+import type {ButtonView} from '@gravity-ui/uikit';
 import {Button, Icon} from '@gravity-ui/uikit';
 
 import {enableFullscreen} from '../../store/reducers/fullscreen';
 import {useTypedDispatch} from '../../utils/hooks';
 
 interface EnableFullscreenButtonProps {
     disabled?: boolean;
+    view?: ButtonView;
 }
 
-function EnableFullscreenButton({disabled}: EnableFullscreenButtonProps) {
+function EnableFullscreenButton({disabled, view = 'flat-secondary'}: EnableFullscreenButtonProps) {
     const dispatch = useTypedDispatch();
     const onEnableFullscreen = () => {
         dispatch(enableFullscreen());
     };
     return (
-        <Button
-            onClick={onEnableFullscreen}
-            view="flat-secondary"
-            disabled={disabled}
-            title="Fullscreen"
-        >
+        <Button onClick={onEnableFullscreen} view={view} disabled={disabled} title="Fullscreen">
             <Icon data={SquareDashed} />
         </Button>
     );

src/components/JsonViewer/JsonViewer.tsx

@@ -33,6 +33,8 @@ interface JsonViewerCommonProps {
     tableSettings?: DT100.Settings;
     search?: boolean;
     collapsedInitially?: boolean;
+    maxValueWidth?: number;
+    toolbarClassName?: string;
 }
 
 interface JsonViewerProps extends JsonViewerCommonProps {
@@ -60,7 +62,7 @@ const SETTINGS: DT100.Settings = {
     displayIndices: false,
     dynamicRender: true,
     sortable: false,
-    dynamicRenderMinSize: 100,
+    dynamicRenderMinSize: 50,
 };
 
 function getCollapsedState(value: UnipikaValue) {
@@ -114,6 +116,8 @@ function JsonViewerComponent({
     search = true,
     extraTools,
     collapsedInitially,
+    maxValueWidth = 100,
+    toolbarClassName,
 }: JsonViewerComponentProps) {
     const [caseSensitiveSearch, setCaseSensitiveSearch] = useSetting(
         CASE_SENSITIVE_JSON_SEARCH,
@@ -162,6 +166,7 @@ function JsonViewerComponent({
                 filter={filter}
                 showFullText={onShowFullText}
                 index={index}
+                maxValueWidth={maxValueWidth}
             />
         );
     };
@@ -295,7 +300,7 @@ function JsonViewerComponent({
 
     const renderToolbar = () => {
         return (
-            <Flex gap={2} wrap="nowrap" className={block('toolbar')}>
+            <Flex gap={2} wrap="nowrap" className={block('toolbar', toolbarClassName)}>
                 <Flex gap={1} wrap="nowrap">
                     <ActionTooltip title={i18n('action_expand-all')}>
                         <Button onClick={onExpandAll} view="flat-secondary">

src/components/JsonViewer/components/Cell.tsx

@@ -23,6 +23,7 @@ interface CellProps {
     filter?: string;
     index: number;
     showFullText: (index: number) => void;
+    maxValueWidth?: number;
 }
 
 export function Cell(props: CellProps) {
@@ -69,6 +70,7 @@ export function Cell(props: CellProps) {
                     matched={matched?.valueMatch}
                     filter={filter}
                     showFullText={handleShowFullText}
+                    maxValueWidth={props.maxValueWidth}
                 />
             )}
             {collapsed && depth === undefined && <span className={'unipika'}>...</span>}
@@ -97,6 +99,7 @@ function Key(props: KeyProps) {
 
 interface ValueProps extends KeyProps {
     showFullText?: () => void;
+    maxValueWidth?: number;
 }
 
 function Value(props: ValueProps) {
@@ -109,16 +112,24 @@ function Value(props: ValueProps) {
 
 function renderValueWithFilter(props: ValueProps, className: string) {
     if ('string' === props.text?.$type) {
-        return renderStringWithFilter(props, className, 100);
+        return renderStringWithFilter(props, className);
     }
     return renderWithFilter(props, block('value'));
 }
 
-function renderStringWithFilter(props: ValueProps, className: string, maxWidth = Infinity) {
-    const {text, settings = defaultUnipikaSettings, matched = [], filter, showFullText} = props;
-    const tmp = unipika.format(text, {...settings, asHTML: false});
+function renderStringWithFilter(props: ValueProps, className: string) {
+    const {
+        text,
+        settings = defaultUnipikaSettings,
+        matched = [],
+        filter,
+        showFullText,
+        maxValueWidth = Infinity,
+    } = props;
+
+    const tmp = unipika.format(text, {...settings, maxStringSize: 10, asHTML: false});
     const length = tmp.length;
-    const visible = tmp.substring(1, Math.min(length - 1, maxWidth + 1));
+    const visible = tmp.substring(1, Math.min(length - 1, maxValueWidth + 1));
     const truncated = visible.length < tmp.length - 2;
     let hasHiddenMatch = false;
     if (truncated) {

src/components/ShortyString/ShortyString.scss

@@ -1,6 +1,6 @@
 .kv-shorty-string {
     &__toggle {
-        margin-left: 2em;
+        margin-left: 1em;
 
         font-size: 0.85em;
     }

src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx

@@ -56,7 +56,7 @@ export const PartitionsControls = ({
                 connectionHost,
             } = partition;
 
-            const isPartitionIdMatch = partitionIdRe.test(partitionId);
+            const isPartitionIdMatch = partitionIdRe.test(String(partitionId));
 
             const otherValues = [
                 readerName,

src/containers/Tenant/Diagnostics/Partitions/columns/columns.tsx

@@ -45,7 +45,7 @@ export const allColumns: Column<PreparedPartitionDataWithHosts>[] = [
         ),
         sortAccessor: (row) => isNumeric(row.partitionId) && Number(row.partitionId),
         align: DataTable.LEFT,
-        render: ({row}) => <PartitionId id={row.partitionId} />,
+        render: ({row}) => <PartitionId id={String(row.partitionId)} />,
     },
     {
         name: PARTITIONS_COLUMNS_IDS.STORE_SIZE,

src/containers/Tenant/Diagnostics/TopicData/TopicData.scss

@@ -1,3 +1,5 @@
+@use '../../../../styles/mixins.scss';
+
 .ydb-diagnostics-topic-data {
     &__partition-select {
         min-width: 150px;
@@ -24,5 +26,8 @@
                 background: var(--g-color-base-selection-hover) !important;
             }
         }
+        &_removed {
+            color: var(--g-color-text-secondary);
+        }
     }
 }