feat: add async_replication navigation tree node type (#72)

Author: vovaspace

src/components/NavigationTree/NavigationTreeNode.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {TreeView} from '../TreeView/TreeView';
+import {AsyncReplicationIcon} from '../icons/AsyncReplication';
 import {ColumnTableIcon} from '../icons/ColumnTable';
 import {DatabaseIcon} from '../icons/Database';
 import {ExternalDataSourceIcon} from '../icons/ExternalDataSource';
@@ -32,6 +33,8 @@ export interface NavigationTreeNodeProps {
 
 function renderIcon(type: NavigationTreeNodeType | string, collapsed: boolean) {
     switch (type) {
+        case 'async_replication':
+            return <AsyncReplicationIcon height={16} />;
         case 'database':
             // this icon is larger than the others, therefore 14 for a better fit
             return <DatabaseIcon height={14} />;

src/components/NavigationTree/__stories__/NavigationTree.stories.tsx

@@ -91,6 +91,10 @@ async function fetchPath(path: string) {
                 name: 'table',
                 type: 'table',
             },
+            {
+                name: 'replication',
+                type: 'async_replication',
+            },
             {
                 name: 'external_table',
                 type: 'external_table',
@@ -111,7 +115,7 @@ async function fetchPath(path: string) {
     }
 
     if (path === '/folder_2') {
-        throw new Error('Ошибка');
+        throw new Error('Fetch error.');
     }
 
     if (path === '/folder_3') {

src/components/NavigationTree/types.ts

@@ -1,16 +1,17 @@
 import type {DropdownMenuItemMixed} from '@gravity-ui/uikit';
 
 export type NavigationTreeNodeType =
+    | 'async_replication'
+    | 'column_table'
     | 'database'
     | 'directory'
-    | 'table'
-    | 'column_table'
+    | 'external_data_source'
+    | 'external_table'
     | 'index_table'
     | 'index'
-    | 'topic'
     | 'stream'
-    | 'external_table'
-    | 'external_data_source'
+    | 'table'
+    | 'topic'
     | 'view';
 
 export interface NavigationTreeDataItem {

src/components/icons/AsyncReplication.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export function AsyncReplicationIcon(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M9.22 15.03s-.001 0 0 0a.75.75 0 0 0 1.06-1.06l-.47-.47H10a3.016 3.016 0 0 0 1.507-.405A2.999 2.999 0 0 0 13 10.5V7.896h.003a2.735 2.735 0 0 0 .785-.366 2.75 2.75 0 1 0-2.288.366V10.5A1.5 1.5 0 0 1 10 12h-.19l.47-.47s0 .001 0 0a.75.75 0 0 0-1.06-1.06l-.47.47-1.28 1.28a.75.75 0 0 0 0 1.06l1.75 1.75ZM5.72 2.97a.75.75 0 0 1 1.06 0l.47.47 1.28 1.28a.748.748 0 0 1 0 1.06L6.78 7.53c.001 0 0 0 0 0a.751.751 0 0 1-1.06-1.06L6.19 6H6a1.5 1.5 0 0 0-1.5 1.5v2.604a2.757 2.757 0 0 1 2 2.646 2.738 2.738 0 0 1-1.212 2.28 2.737 2.737 0 0 1-1.538.47A2.747 2.747 0 0 1 1 12.75a2.751 2.751 0 0 1 2-2.646V7.5a2.999 2.999 0 0 1 3-3h.19l-.47-.47a.75.75 0 0 1 0-1.06Zm-.908 9.121A1.246 1.246 0 0 1 5 12.75a1.25 1.25 0 1 1-.188-.659ZM11 5.25a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z"
+            />
+        </svg>
+    );
+}