fix(QueriesNavigation): align navigation layout and schema with design

src/components/ClusterRow/ClusterRow.scss

@@ -0,0 +1,11 @@
+.qp-cluster-row {
+    width: 100%;
+    padding: 0 var(--g-spacing-3) 0 var(--g-spacing-4);
+    box-sizing: border-box;
+    cursor: pointer;
+
+    &__title {
+        flex-grow: 1;
+        min-width: 0;
+    }
+}

src/components/ClusterRow/ClusterRow.tsx

@@ -1,6 +1,7 @@
 import React, {FC} from 'react';
 import {Avatar, Flex, Text} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
+import './ClusterRow.scss';
 import {NavigationCluster} from '../../types/navigation';
 
 const block = cn('qp-cluster-row');

src/components/FieldsSearchToolbar/FieldsSearchToolbar.tsx

@@ -27,6 +27,7 @@ export function FieldsSearchToolbar<K extends string = string>({
 
     return (
         <SearchWithButtons
+            gap={2}
             value={search}
             placeholder={searchPlaceholder}
             onUpdate={onSearchUpdate}
@@ -36,6 +37,7 @@ export function FieldsSearchToolbar<K extends string = string>({
                     ? [
                           <FieldsSelector<K>
                               key="fields-selector"
+                              buttonView="flat"
                               fields={fields}
                               value={visibleFields}
                               onChange={onVisibleFieldsChange}

src/components/FieldsSelector/FieldsSelector.tsx

@@ -1,5 +1,5 @@
 import React, {ReactNode, useState} from 'react';
-import {Button, Flex, Icon, Popup, Text} from '@gravity-ui/uikit';
+import {Button, type ButtonProps, Flex, Icon, Popup, Text} from '@gravity-ui/uikit';
 import GearIcon from '@gravity-ui/icons/svgs/gear.svg';
 import CheckIcon from '@gravity-ui/icons/svgs/check.svg';
 import {useToggle} from '../../helpers/useToggle';
@@ -17,6 +17,7 @@ export type FieldsSelectorProps<K extends string = string> = {
     value: K[];
     onChange: (value: K[]) => void;
     buttonLabel?: string;
+    buttonView?: ButtonProps['view'];
 };
 
 const block = cn('qp-fields-selector');
@@ -26,6 +27,7 @@ export const FieldsSelector = <K extends string = string>({
     value,
     onChange,
     buttonLabel = i18n('action_configure-visible-fields'),
+    buttonView = 'normal',
 }: FieldsSelectorProps<K>) => {
     const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null);
     const [open, toggleOpen] = useToggle(false);
@@ -37,7 +39,13 @@ export const FieldsSelector = <K extends string = string>({
 
     return (
         <>
-            <Button ref={setButtonElement} onClick={toggleOpen} aria-label={buttonLabel}>
+            <Button
+                view={buttonView}
+                size="m"
+                ref={setButtonElement}
+                onClick={toggleOpen}
+                aria-label={buttonLabel}
+            >
                 <Icon data={GearIcon} size={16} />
             </Button>
             <Popup

src/components/NavigationActionButtons/NavigationActionButtons.tsx

@@ -1,19 +1,21 @@
 import React from 'react';
-import {Button, Flex} from '@gravity-ui/uikit';
+import {Button, type ButtonProps, Flex} from '@gravity-ui/uikit';
 import type {NavigationAction} from '../../types/navigation';
 
 export type NavigationActionButtonsProps<TArg> = {
     actions?: Array<NavigationAction<TArg>>;
     arg: TArg;
     className?: string;
     buttonClassName?: string;
+    size?: ButtonProps['size'];
 };
 
 export function NavigationActionButtons<TArg>({
     actions,
     arg,
     className,
     buttonClassName,
+    size = 's',
 }: NavigationActionButtonsProps<TArg>) {
     const visibleActions = actions?.filter((action) => !action.hidden) ?? [];
 
@@ -27,7 +29,7 @@ export function NavigationActionButtons<TArg>({
                 <Button
                     key={action.id}
                     view="flat"
-                    size="s"
+                    size={size}
                     disabled={action.disabled}
                     title={action.title}
                     aria-label={action.title}

src/components/NavigationItemRow/NavigationItemRow.scss

@@ -0,0 +1,16 @@
+.qp-navigation-item-row {
+    width: 100%;
+    padding: 0 var(--g-spacing-3) 0 var(--g-spacing-4);
+    box-sizing: border-box;
+    cursor: pointer;
+
+    &__title {
+        flex-grow: 1;
+        min-width: 0;
+    }
+
+    &_disabled {
+        color: var(--g-color-text-secondary);
+        cursor: default;
+    }
+}

src/components/NavigationItemRow/NavigationItemRow.tsx

@@ -1,6 +1,7 @@
 import React, {FC} from 'react';
 import {Flex, Icon, Text} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
+import './NavigationItemRow.scss';
 import {NavigationItem} from '../../types/navigation';
 import {getDefaultNavigationIcon} from '../../helpers/getDefaultNavigationIcon';
 

src/components/SearchWithButtons/SearchWithButtons.tsx

@@ -1,5 +1,5 @@
 import React, {FC} from 'react';
-import {Flex, TextInput} from '@gravity-ui/uikit';
+import {Flex, type FlexProps, TextInput} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
 import './SearchWithButtons.scss';
 
@@ -11,6 +11,7 @@ export type SearchWithButtonsProps = {
     endButtons?: React.ReactNode[];
     onUpdate?: (value: string) => void;
     className?: string;
+    gap?: FlexProps['gap'];
 };
 
 const block = cn('qp-search-with-buttons');
@@ -26,12 +27,13 @@ export const SearchWithButtons: FC<SearchWithButtonsProps> = ({
     endButtons,
     onUpdate,
     className,
+    gap = 1,
 }) => {
     const hasInnerButtons = Boolean(innerButtons?.length);
     const hasEndButtons = Boolean(endButtons?.length);
 
     return (
-        <Flex gap={1} className={block(null, className)}>
+        <Flex gap={gap} className={block(null, className)}>
             <TextInput
                 className={block('input')}
                 value={value}

src/helpers/getDefaultNavigationIcon.ts

@@ -1,6 +1,6 @@
 import type {IconData} from '@gravity-ui/uikit';
 import BanIcon from '@gravity-ui/icons/svgs/ban.svg';
-import EyeSlashIcon from '@gravity-ui/icons/svgs/eye-slash.svg';
+import CircleQuestionIcon from '@gravity-ui/icons/svgs/circle-question.svg';
 import FileTextIcon from '@gravity-ui/icons/svgs/file-text.svg';
 import FolderIcon from '@gravity-ui/icons/svgs/folder.svg';
 import LayoutHeaderCellsLargeIcon from '@gravity-ui/icons/svgs/layout-header-cells-large.svg';
@@ -26,7 +26,7 @@ export function getDefaultNavigationIcon(
         case 'link':
             return LinkIcon;
         case 'unknown':
-            return EyeSlashIcon;
+            return CircleQuestionIcon;
         default:
             return BanIcon;
     }

src/modules/ClustersList/ClustersList.tsx

@@ -4,7 +4,6 @@ import type {NavigationCluster, RenderNavigationCluster} from '../../types/navig
 import {ClusterRow} from '../../components/ClusterRow';
 import {LazyList} from '../../components/LazyList';
 import {NAVIGATION_ROW_HEIGHT} from '../../constants/row';
-import './ClustersList.scss';
 
 const block = cn('qp-clusters-list');
 

src/modules/NavigationDetail/NavigationDetail.scss

@@ -1,13 +1,26 @@
 .qp-navigation-detail {
-  min-width: 0;
+    min-width: 0;
 
-  &__tabs {
-    overflow-x: auto;
-  }
+    &__header,
+    &__tabs,
+    &__search,
+    &__content {
+        margin-inline: var(--g-spacing-3) var(--g-spacing-2);
+    }
 
-  &__content {
-    min-width: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
+    &__header,
+    &__tabs,
+    &__search {
+        flex-shrink: 0;
+    }
+
+    &__tabs {
+        overflow-x: auto;
+    }
+
+    &__content {
+        min-width: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
 }

src/modules/NavigationDetail/NavigationDetail.tsx

@@ -97,6 +97,7 @@ export const NavigationDetail: React.FC<NavigationDetailProps> = ({
     return (
         <Flex direction="column" gap={2} className={block(null, className)}>
             <NavigationHeader
+                className={block('header')}
                 location={location}
                 actions={mergedActions}
                 renderActions={renderActions}
@@ -114,6 +115,7 @@ export const NavigationDetail: React.FC<NavigationDetailProps> = ({
                     />
                     {config.hasSearch && (
                         <SearchWithButtons
+                            className={block('search')}
                             placeholder={config.searchPlaceholder}
                             value={search}
                             onUpdate={handleSearchUpdate}

src/modules/NavigationHeader/NavigationHeader.tsx

@@ -40,7 +40,7 @@ export const NavigationHeader: FC<NavigationHeaderProps> = ({
             {renderActions ? (
                 renderActions({location, actions: actions ?? []})
             ) : (
-                <NavigationActionButtons actions={actions} arg={location} />
+                <NavigationActionButtons size="m" actions={actions} arg={location} />
             )}
         </Flex>
     );

src/modules/NavigationItemsList/NavigationItemsList.scss

@@ -1,65 +1,40 @@
-.qp-navigation-item-row {
-  width: 100%;
-  padding: 0 var(--g-spacing-2);
-  box-sizing: border-box;
-  cursor: pointer;
-
-  &__title {
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  &_disabled {
-    color: var(--g-color-text-secondary);
-    cursor: default;
-  }
-}
-
-.qp-navigation-items-list-header {
-  padding: 0 var(--g-spacing-2);
-
-  &__button {
-    padding-left: 0;
-  }
-}
-
 .qp-navigation-items-list {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 
-  &__header {
-    height: 28px;
-  }
+    &__header {
+        height: 28px;
+    }
 
-  &__list {
-    flex-grow: 1;
-    min-height: 0;
+    &__list {
+        flex-grow: 1;
+        min-height: 0;
 
-    .g-list__item_selected:hover {
-      background-color: var(--g-color-base-selection-hover);
+        .g-list__item_selected:hover {
+            background-color: var(--g-color-base-selection-hover);
+        }
     }
-  }
 
-  &__empty {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    min-height: 0;
-  }
+    &__empty {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        min-height: 0;
+    }
 
-  &__parent-row {
-    flex-shrink: 0;
-    height: 32px;
-    cursor: pointer;
+    &__parent-row {
+        flex-shrink: 0;
+        height: 32px;
+        cursor: pointer;
 
-    &:hover {
-      background-color: var(--g-color-base-simple-hover);
+        &:hover {
+            background-color: var(--g-color-base-simple-hover);
+        }
     }
-  }
 
-  &__empty-content {
-    flex-grow: 1;
-    min-height: 0;
-  }
+    &__empty-content {
+        flex-grow: 1;
+        min-height: 0;
+    }
 }

src/modules/NavigationItemsList/internal/NavigationItemsListHeader.scss

@@ -1,6 +1,7 @@
 .qp-navigation-items-list-header {
-  &__sort {
-    cursor: pointer;
-    user-select: none;
-  }
-}
+    padding: 0 var(--g-spacing-3) 0 var(--g-spacing-4);
+    &__sort {
+        cursor: pointer;
+        user-select: none;
+    }
+}