feat: add icons to schema actions and templates

Author: artemmufazalov

package-lock.json

@@ -18,7 +18,7 @@
     "@gravity-ui/date-components": "^3.2.3",
     "@gravity-ui/date-utils": "^2.5.6",
     "@gravity-ui/i18n": "^1.7.0",
-    "@gravity-ui/icons": "^2.13.0",
+    "@gravity-ui/icons": "^2.16.0",
     "@gravity-ui/illustrations": "^2.1.0",
     "@gravity-ui/navigation": "^3.3.9",
     "@gravity-ui/paranoid": "^3.0.0",
@@ -59,7 +59,7 @@
     "use-query-params": "^2.2.1",
     "uuid": "^10.0.0",
     "web-vitals": "^1.1.2",
-    "ydb-ui-components": "^5.0.0",
+    "ydb-ui-components": "^5.1.0",
     "zod": "^3.24.1"
   },
   "scripts": {

package.json

@@ -1,6 +1,15 @@
 import React from 'react';
 
-import {ChevronDown} from '@gravity-ui/icons';
+import {
+    ArrowsOppositeToDots,
+    ChevronDown,
+    FileArrowRightOut,
+    FileText,
+    LayoutHeaderCells,
+    PencilToSquare,
+    Persons,
+} from '@gravity-ui/icons';
+import type {DropdownMenuItem} from '@gravity-ui/uikit';
 import {Button, DropdownMenu} from '@gravity-ui/uikit';
 
 import {useChangeInputWithConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
@@ -18,9 +27,10 @@ export function NewSQL() {
 
     const actions = bindActions(onTemplateClick);
 
-    const items = [
+    const items: DropdownMenuItem[] = [
         {
             text: i18n('menu.tables'),
+            iconStart: <LayoutHeaderCells />,
             items: [
                 {
                     text: i18n('action.create-row-table'),
@@ -74,6 +84,7 @@ export function NewSQL() {
         },
         {
             text: i18n('menu.topics'),
+            iconStart: <FileText />,
             items: [
                 {
                     text: i18n('action.create-topic'),
@@ -91,6 +102,7 @@ export function NewSQL() {
         },
         {
             text: i18n('menu.replication'),
+            iconStart: <ArrowsOppositeToDots />,
             items: [
                 {
                     text: i18n('action.create-async-replication'),
@@ -108,6 +120,7 @@ export function NewSQL() {
         },
         {
             text: i18n('menu.transfer'),
+            iconStart: <FileArrowRightOut />,
             items: [
                 {
                     text: i18n('action.create-transfer'),
@@ -125,6 +138,7 @@ export function NewSQL() {
         },
         {
             text: i18n('menu.capture'),
+            iconStart: <PencilToSquare />,
             items: [
                 {
                     text: i18n('action.create-cdc-stream'),
@@ -134,6 +148,7 @@ export function NewSQL() {
         },
         {
             text: i18n('menu.users'),
+            iconStart: <Persons />,
             items: [
                 {
                     text: i18n('action.create-user'),

src/containers/Tenant/Query/NewSQL/NewSQL.tsx

@@ -75,6 +75,7 @@ export const getSchemaControls =
 
             table: openPreview,
             column_table: openPreview,
+            system_table: openPreview,
 
             index_table: undefined,
             topic: isTopicPreviewAvailable && !isCdcTopic ? openPreview : undefined,

src/containers/Tenant/utils/controls.tsx

@@ -1,4 +1,4 @@
-import {Copy, PlugConnection} from '@gravity-ui/icons';
+import {CirclePlus, Copy, PlugConnection} from '@gravity-ui/icons';
 import {Flex, Spin} from '@gravity-ui/uikit';
 import copy from 'copy-to-clipboard';
 import type {NavigationTreeNodeType} from 'ydb-ui-components';
@@ -183,12 +183,12 @@ export const getActions =
         const copyItem: ActionsSet[0] = {
             text: i18n('actions.copyPath'),
             action: actions.copyPath,
-            iconEnd: <Copy />,
+            iconStart: <Copy />,
         };
         const connectToDBItem = {
             text: i18n('actions.connectToDB'),
             action: actions.getConnectToDBDialog,
-            iconEnd: <PlugConnection />,
+            iconStart: <PlugConnection />,
         };
 
         const createEntitiesSet = [
@@ -224,6 +224,7 @@ export const getActions =
             const createDirectoryItem = {
                 text: i18n('actions.createDirectory'),
                 action: actions.createDirectory,
+                iconStart: <CirclePlus />,
             };
 
             DB_SET.splice(1, 0, [createDirectoryItem]);
@@ -258,6 +259,10 @@ export const getActions =
                 {text: i18n('actions.upsertQuery'), action: actions.upsertQuery},
             ],
         ];
+        const SYSTEM_TABLE_SET: ActionsSet = [
+            [copyItem],
+            [{text: i18n('actions.selectQuery'), action: actions.selectQuery}],
+        ];
 
         const TOPIC_SET: ActionsSet = [
             [copyItem],
@@ -324,6 +329,7 @@ export const getActions =
 
             table: ROW_TABLE_SET,
             column_table: COLUMN_TABLE_SET,
+            system_table: SYSTEM_TABLE_SET,
 
             index_table: JUST_COPY,
             topic: TOPIC_SET,