feat: add topic and table forms

src/components/ConfirmationDialog/ConfirmationDialog.tsx

@@ -22,6 +22,7 @@ interface CommonDialogProps {
     textButtonApply?: string;
     buttonApplyView?: ButtonView;
     className?: string;
+    disableOutsideClick?: boolean;
     onConfirm?: () => void;
 }
 
@@ -40,13 +41,16 @@ export const CONFIRMATION_DIALOG = 'confirmation-dialog';
 function ConfirmationDialog({
     caption = '',
     children,
+    message,
+    body,
     onConfirm,
     onClose,
     progress,
     textButtonApply,
     textButtonCancel,
     buttonApplyView = 'normal',
     className,
+    disableOutsideClick = true,
     renderButtons,
     open,
     confirmOnEnter,
@@ -56,12 +60,12 @@ function ConfirmationDialog({
             className={block(null, className)}
             size="s"
             onClose={onClose}
-            disableOutsideClick
+            disableOutsideClick={disableOutsideClick}
             open={open}
             onEnterKeyDown={confirmOnEnter ? onConfirm : undefined}
         >
             <Dialog.Header caption={<span className={block('caption')}>{caption}</span>} />
-            <Dialog.Body>{children}</Dialog.Body>
+            <Dialog.Body>{children ?? body ?? message}</Dialog.Body>
             <Dialog.Footer
                 onClickButtonApply={onConfirm}
                 propsButtonApply={{view: buttonApplyView}}

src/containers/Tenant/Diagnostics/Consumers/Consumers.tsx

@@ -11,7 +11,7 @@ import {
     selectPreparedConsumersData,
     selectPreparedTopicStats,
     topicApi,
-} from '../../../../store/reducers/topic';
+} from '../../../../store/reducers/topic/topic';
 import type {EPathType} from '../../../../types/api/schema';
 import {cn} from '../../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';

src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.tsx

@@ -8,7 +8,7 @@ import {LagPopoverContent} from '../../../../../components/LagPopoverContent';
 import {Loader} from '../../../../../components/Loader';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
 import {useClusterWithProxy} from '../../../../../store/reducers/cluster/cluster';
-import {selectPreparedTopicStats, topicApi} from '../../../../../store/reducers/topic';
+import {selectPreparedTopicStats, topicApi} from '../../../../../store/reducers/topic/topic';
 import type {IPreparedTopicStats} from '../../../../../types/store/topic';
 import {cn} from '../../../../../utils/cn';
 import {formatBps, formatBytes} from '../../../../../utils/dataFormatters/dataFormatters';

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

@@ -9,7 +9,7 @@ import {TableWithControlsLayout} from '../../../../components/TableWithControlsL
 import {useClusterWithProxy} from '../../../../store/reducers/cluster/cluster';
 import {nodesListApi, selectNodesMap} from '../../../../store/reducers/nodesList';
 import {partitionsApi, setSelectedConsumer} from '../../../../store/reducers/partitions/partitions';
-import {selectConsumersNames, topicApi} from '../../../../store/reducers/topic';
+import {selectConsumersNames, topicApi} from '../../../../store/reducers/topic/topic';
 import {cn} from '../../../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';

src/containers/Tenant/Diagnostics/TopicData/TopicMessageDetails/TopicMessageDetails.tsx

@@ -5,7 +5,7 @@ import {skipToken} from '@reduxjs/toolkit/query';
 import {isNil} from 'lodash';
 
 import {LoaderWrapper} from '../../../../../components/LoaderWrapper/LoaderWrapper';
-import {topicApi} from '../../../../../store/reducers/topic';
+import {topicApi} from '../../../../../store/reducers/topic/topic';
 import type {TopicDataRequest} from '../../../../../types/api/topic';
 import {isResponseError} from '../../../../../utils/response';
 import {safeParseNumber} from '../../../../../utils/utils';

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

@@ -11,7 +11,7 @@ import {EntityStatus} from '../../../../../components/EntityStatus/EntityStatus'
 import {MultilineTableHeader} from '../../../../../components/MultilineTableHeader/MultilineTableHeader';
 import type {Column} from '../../../../../components/PaginatedTable';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
-import {TOPIC_MESSAGE_SIZE_LIMIT} from '../../../../../store/reducers/topic';
+import {TOPIC_MESSAGE_SIZE_LIMIT} from '../../../../../store/reducers/topic/topic';
 import type {TopicMessageEnhanced} from '../../../../../types/api/topic';
 import {cn} from '../../../../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER, YDB_POPOVER_CLASS_NAME} from '../../../../../utils/constants';

src/containers/Tenant/Diagnostics/TopicData/getData.ts

@@ -1,7 +1,7 @@
 import {isNil} from 'lodash';
 
 import type {FetchData} from '../../../../components/PaginatedTable';
-import {TOPIC_MESSAGE_SIZE_LIMIT} from '../../../../store/reducers/topic';
+import {TOPIC_MESSAGE_SIZE_LIMIT} from '../../../../store/reducers/topic/topic';
 import type {
     TopicDataRequest,
     TopicDataResponse,

src/containers/Tenant/Diagnostics/TopicData/useTopicProbeQuery.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {isNil} from 'lodash';
 
-import {topicApi} from '../../../../store/reducers/topic';
+import {topicApi} from '../../../../store/reducers/topic/topic';
 import type {TopicDataRequest, TopicDataResponse} from '../../../../types/api/topic';
 import {safeParseNumber} from '../../../../utils/utils';
 

src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.scss

@@ -1,14 +1,65 @@
 .ydb-schema-create-directory-dialog {
     &__label {
+        display: block;
+
+        margin-bottom: 16px;
+
+        .g-breadcrumbs__link_is-disabled {
+            color: inherit;
+        }
+    }
+
+    &__breadcrumbs {
         display: flex;
-        flex-direction: column;
+        flex-wrap: wrap;
+        row-gap: 4px;
+
+        max-width: 100%;
+
+        .g-breadcrumbs__item {
+            align-items: flex-start;
+
+            min-width: 0;
+            max-width: 100%;
+            height: auto;
+
+            white-space: normal;
+        }
+
+        .g-breadcrumbs__link {
+            display: inline-flex;
+            align-items: flex-start;
 
-        margin-bottom: 8px;
+            max-width: 100%;
+            height: auto;
+
+            line-height: inherit;
+            white-space: normal;
+        }
+    }
+
+    &__breadcrumb-content {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: 6px;
+
+        min-width: 0;
+        max-width: 100%;
+
+        > span {
+            min-width: 0;
+            overflow-wrap: anywhere;
+        }
     }
-    &__description {
-        color: var(--g-color-text-secondary);
+
+    &__breadcrumb-icon {
+        flex: 0 0 auto;
+
+        opacity: 0.3;
+        color: var(--g-color-text-primary);
     }
-    &__input-wrapper {
-        min-height: 48px;
+
+    &__directory-path {
+        font-weight: 600;
     }
 }

src/containers/Tenant/ObjectSummary/CreateDirectoryDialog/CreateDirectoryDialog.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import {Dialog, TextInput} from '@gravity-ui/uikit';
+import {DatabaseFill, FolderFill} from '@gravity-ui/icons';
+import {Breadcrumbs, Dialog, TextInput} from '@gravity-ui/uikit';
 
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {useClusterWithProxy} from '../../../../store/reducers/cluster/cluster';
@@ -48,6 +49,14 @@ export function CreateDirectoryDialog({
     const [create, response] = schemaApi.useCreateDirectoryMutation();
     const inputRef = React.useRef<HTMLInputElement>(null);
 
+    const normalizedDatabasePath = databaseFullPath.replace(/^\/+|\/+$/g, '');
+    const normalizedParentPath = parentPath.replace(/^\/+|\/+$/g, '');
+    const relativeParentPath = transformPath(parentPath, databaseFullPath).replace(
+        /^\/+|\/+$/g,
+        '',
+    );
+    const isDatabaseRoot = normalizedParentPath === normalizedDatabasePath;
+
     const resetErrors = () => {
         setValidationError('');
         response.reset();
@@ -80,43 +89,54 @@ export function CreateDirectoryDialog({
             });
     };
 
-    const relativeParentPath = transformPath(parentPath, databaseFullPath);
-
     return (
         <Dialog open={open} onClose={handleClose} size="s" initialFocus={inputRef}>
             <Dialog.Header caption={i18n('schema.tree.dialog.header')} />
             <form
                 onSubmit={(e) => {
                     e.preventDefault();
-                    const validationError = validateRelativePath(relativePath);
-                    setValidationError(validationError);
-                    if (!validationError) {
+                    const nextValidationError = validateRelativePath(relativePath);
+                    setValidationError(nextValidationError);
+                    if (!nextValidationError) {
                         handleSubmit();
                     }
                 }}
             >
                 <Dialog.Body>
-                    <label htmlFor={relativePathInputId} className={b('label')}>
-                        <span className={b('description')}>
-                            {i18n('schema.tree.dialog.description')}
-                        </span>
-                        {`${relativeParentPath}/`}
-                    </label>
-                    <div className={b('input-wrapper')}>
-                        <TextInput
-                            controlRef={inputRef}
-                            placeholder={i18n('schema.tree.dialog.placeholder')}
-                            value={relativePath}
-                            onUpdate={handleUpdate}
-                            autoFocus
-                            hasClear
-                            autoComplete={false}
-                            disabled={response.isLoading}
-                            validationState={validationError ? 'invalid' : undefined}
-                            id={relativePathInputId}
-                            errorMessage={validationError}
-                        />
+                    <div className={b('label')}>
+                        <Breadcrumbs className={b('breadcrumbs')}>
+                            <Breadcrumbs.Item disabled>
+                                <span className={b('breadcrumb-content')}>
+                                    <DatabaseFill className={b('breadcrumb-icon')} />
+                                    <span>{normalizedDatabasePath}</span>
+                                </span>
+                            </Breadcrumbs.Item>
+                            {!isDatabaseRoot && (
+                                <Breadcrumbs.Item disabled>
+                                    <span className={b('breadcrumb-content')}>
+                                        <FolderFill className={b('breadcrumb-icon')} />
+                                        <span className={b('directory-path')}>
+                                            {relativeParentPath}
+                                        </span>
+                                    </span>
+                                </Breadcrumbs.Item>
+                            )}
+                        </Breadcrumbs>
                     </div>
+                    <TextInput
+                        controlRef={inputRef}
+                        placeholder={i18n('schema.tree.dialog.placeholder')}
+                        aria-label={i18n('schema.tree.dialog.placeholder')}
+                        value={relativePath}
+                        onUpdate={handleUpdate}
+                        autoFocus
+                        hasClear
+                        autoComplete={false}
+                        disabled={response.isLoading}
+                        validationState={validationError ? 'invalid' : undefined}
+                        id={relativePathInputId}
+                        errorMessage={validationError}
+                    />
                     {response.isError && (
                         <ResponseError
                             error={response.error}

src/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -57,6 +57,37 @@
         padding: 23px 12px 17px 20px;
     }
 
+    &__context-menu-item-content-wrapper {
+        padding: var(--g-spacing-half) 0;
+    }
+
+    &__context-menu-item-content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__context-menu-item-title {
+        line-height: 20px;
+    }
+
+    &__context-menu-item-description {
+        line-height: 18px;
+
+        color: var(--g-color-text-secondary);
+    }
+
+    &__context-menu-item_with-description {
+        align-items: flex-start;
+
+        .g-menu__item-icon-end {
+            margin-top: calc(var(--g-spacing-2));
+        }
+    }
+
+    &__context-menu-item-icon-with-description {
+        margin-top: calc(var(--g-spacing-1));
+    }
+
     &__sticky-top {
         z-index: 5;
         @include mixins.sticky-top();