feat(NavigationTree): support external table and data source

Author: artemmufazalov

src/components/NavigationTree/NavigationTreeNode.tsx

@@ -10,6 +10,8 @@ import {TableIcon} from '../icons/Table';
 import {TopicIcon} from '../icons/Topic';
 import {IndexIcon} from '../icons/Index';
 import {ColumnTableIcon} from '../icons/ColumnTable';
+import {ExternalTableIcon} from '../icons/ExternalTable';
+import {ExternalDataSourceIcon} from '../icons/ExternalDataSource';
 import {TreeView} from '../TreeView/TreeView';
 
 export interface NavigationTreeNodeProps {
@@ -41,6 +43,10 @@ function renderIcon(type: NavigationTreeNodeType | string, collapsed: boolean) {
             return <ColumnTableIcon height={16} />;
         case 'topic':
             return <TopicIcon height={16} />;
+        case 'external_table':
+            return <ExternalTableIcon height={16} />;
+        case 'external_data_source':
+            return <ExternalDataSourceIcon height={16} />;
         default:
             return null;
     }

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

@@ -75,17 +75,25 @@ async function fetchPath(path: string) {
                 expandable: true,
             },
             {
-                name: 'table_2',
+                name: 'column_table',
                 type: 'column_table',
             },
             {
-                name: 'table_3',
+                name: 'topic',
                 type: 'topic',
             },
             {
-                name: 'table_4',
+                name: 'table',
                 type: 'table',
             },
+            {
+                name: 'external_table',
+                type: 'external_table',
+            },
+            {
+                name: 'external_data_source',
+                type: 'external_data_source',
+            },
         ];
     }
 

src/components/NavigationTree/types.ts

@@ -7,7 +7,9 @@ export type NavigationTreeNodeType =
     | 'column_table'
     | 'index_table'
     | 'index'
-    | 'topic';
+    | 'topic'
+    | 'external_table'
+    | 'external_data_source';
 
 export interface NavigationTreeDataItem {
     name: string;

src/components/icons/ExternalDataSource.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export function ExternalDataSourceIcon(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M4.46505 1.8125C4.46505 1.38086 4.07442 1 3.63171 1C3.16296 1 2.79838 1.38086 2.79838 1.8125L2.79838 5.0625H1.96505C1.4963 5.0625 1.13171 5.44336 1.13171 5.875C1.13171 6.33203 1.4963 6.6875 1.96505 6.6875V7.5C1.96505 9.48047 3.3713 11.1055 5.29838 11.4863V14H6.96505V11.4863C7.32953 11.4133 7.67677 11.2946 8 11.1363V9.65435C8 9.23408 8.24042 8.91969 8.48107 8.71626C8.72487 8.51017 9.04002 8.35302 9.37409 8.23341C9.64121 8.13778 9.94227 8.05845 10.2678 7.99753C10.288 7.83463 10.2984 7.6686 10.2984 7.5V6.6875C10.7411 6.6875 11.1317 6.33203 11.1317 5.875C11.1317 5.44336 10.7411 5.0625 10.2984 5.0625H9.46505L9.46505 1.8125C9.46505 1.38086 9.07442 1 8.63171 1C8.16296 1 7.79838 1.38086 7.79838 1.8125L7.79838 5.0625H4.46505L4.46505 1.8125Z"
+            />
+            <path d="M15 9.66406V10.3672C15 11.0264 13.5346 11.5391 11.75 11.5391C9.95089 11.5391 8.5 11.0264 8.5 10.3672V9.66406C8.5 9.01953 9.95089 8.49219 11.75 8.49219C13.5346 8.49219 15 9.01953 15 9.66406ZM14.202 11.6416C14.4922 11.5391 14.7824 11.3926 15 11.2314V12.7109C15 13.3701 13.5346 13.8828 11.75 13.8828C9.95089 13.8828 8.5 13.3701 8.5 12.7109V11.2314C8.70312 11.3926 8.9933 11.5391 9.28348 11.6416C9.93638 11.876 10.8069 12.0078 11.75 12.0078C12.6786 12.0078 13.5491 11.876 14.202 11.6416ZM9.28348 13.9854C9.93638 14.2197 10.8069 14.3516 11.75 14.3516C12.6786 14.3516 13.5491 14.2197 14.202 13.9854C14.4922 13.8828 14.7824 13.7363 15 13.5752V14.8203C15 15.4795 13.5346 15.9922 11.75 15.9922C9.95089 15.9922 8.5 15.4795 8.5 14.8203V13.5752C8.70312 13.7363 8.9933 13.8828 9.28348 13.9854Z" />
+        </svg>
+    );
+}

src/components/icons/ExternalTable.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export function ExternalTableIcon(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M4.46505 1.8125C4.46505 1.38086 4.07442 1 3.63171 1C3.16296 1 2.79838 1.38086 2.79838 1.8125L2.79838 5.0625H1.96505C1.4963 5.0625 1.13171 5.44336 1.13171 5.875C1.13171 6.33203 1.4963 6.6875 1.96505 6.6875V7.5C1.96505 9.48047 3.3713 11.1055 5.29838 11.4863V14H7V11.4863V10.5C7 9.68257 7.66409 9 8.51786 9H10.0139C10.1978 8.53702 10.2984 8.0313 10.2984 7.5V6.6875C10.7411 6.6875 11.1317 6.33203 11.1317 5.875C11.1317 5.44336 10.7411 5.0625 10.2984 5.0625H9.46505L9.46505 1.8125C9.46505 1.38086 9.07442 1 8.63171 1C8.16296 1 7.79838 1.38086 7.79838 1.8125L7.79838 5.0625H4.46505L4.46505 1.8125Z"
+            />
+            <path d="M13.9821 9.65002C14.4802 9.65002 14.8929 10.0578 14.8929 10.55V15.05C14.8929 15.5563 14.4802 15.95 13.9821 15.95H8.51786C8.00558 15.95 7.60715 15.5563 7.60715 15.05V10.55C7.60715 10.0578 8.00558 9.65002 8.51786 9.65002H13.9821ZM10.7946 12.8V11.45H8.51786V12.8H10.7946ZM8.51786 13.7V15.05H10.7946V13.7H8.51786ZM11.7054 15.05H13.9821V13.7H11.7054V15.05ZM13.9821 12.8V11.45H11.7054V12.8H13.9821Z" />
+        </svg>
+    );
+}