feat(TopicData): add topic message details in Drawer (#2266)

Author: Raubzeug

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/EntityStatus/EntityStatus.tsx

@@ -16,6 +16,7 @@ const b = cn('entity-status');
 interface EntityStatusProps {
     status?: EFlag;
     name?: string;
+    renderName?: (name?: string) => React.ReactNode;
     label?: string;
     path?: string;
     iconPath?: string;
@@ -34,9 +35,14 @@ interface EntityStatusProps {
     className?: string;
 }
 
+function defaultRenderName(name?: string) {
+    return name ?? '';
+}
+
 export function EntityStatus({
     status = EFlag.Grey,
     name = '',
+    renderName = defaultRenderName,
     label,
     path,
     iconPath,
@@ -75,14 +81,14 @@ export function EntityStatus({
             if (externalLink) {
                 return (
                     <UIKitLink className={b('name')} href={path}>
-                        {name}
+                        {renderName(name)}
                     </UIKitLink>
                 );
             }
 
             return (
                 <InternalLink className={b('name')} to={path}>
-                    {name}
+                    {renderName(name)}
                 </InternalLink>
             );
         }

src/components/JsonViewer/JsonViewer.scss

@@ -4,6 +4,8 @@
     --data-table-row-height: 20px;
     --toolbar-background-color: var(--g-color-base-background);
 
+    width: max-content;
+
     &__toolbar {
         position: sticky;
         z-index: 2;

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/JsonViewer/components/FullValueDialog.tsx

@@ -14,8 +14,12 @@ interface FullValueDialogProps {
 }
 
 export function FullValueDialog({onClose, text, starts, length}: FullValueDialogProps) {
+    //if dialog opens from Drawer, outside click should not close Drawer
+    const handleClickOutside = (e: MouseEvent) => {
+        e.stopPropagation();
+    };
     return (
-        <Dialog open={true} onClose={onClose}>
+        <Dialog open={true} onClose={onClose} onOutsideClick={handleClickOutside}>
             <Dialog.Header caption={i18n('description_full-value')} />
             <Dialog.Divider />
             <Dialog.Body>

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

@@ -12,8 +12,8 @@
     &__date-picker {
         min-width: 265px;
     }
-    &__column-setup {
-        margin-left: auto;
+    &__offset-input {
+        width: max-content;
     }
 
     &__row {
@@ -24,5 +24,11 @@
                 background: var(--g-color-base-selection-hover) !important;
             }
         }
+        &_removed {
+            color: var(--g-color-text-secondary);
+        }
+    }
+    &__scroll-button {
+        margin-right: var(--g-spacing-half);
     }
 }