feat: add view to schema (#834)

package.json

@@ -48,7 +48,7 @@
     "url": "^0.11.3",
     "use-query-params": "^2.2.1",
     "web-vitals": "^1.1.2",
-    "ydb-ui-components": "^4.0.0"
+    "ydb-ui-components": "^4.1.0"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -92,6 +92,8 @@ export const TOPIC_PAGES = [overview, consumers, partitions, nodes, describe];
 export const EXTERNAL_DATA_SOURCE_PAGES = [overview, describe];
 export const EXTERNAL_TABLE_PAGES = [overview, describe];
 
+export const VIEW_PAGES = [overview, describe];
+
 // verbose mapping to guarantee correct tabs for new path types
 // TS will error when a new type is added but not mapped here
 const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
@@ -113,6 +115,8 @@ const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
 
     [EPathType.EPathTypeExternalDataSource]: EXTERNAL_DATA_SOURCE_PAGES,
     [EPathType.EPathTypeExternalTable]: EXTERNAL_TABLE_PAGES,
+
+    [EPathType.EPathTypeView]: VIEW_PAGES,
 };
 
 export const getPagesByType = (type?: EPathType) => (type && pathTypeToPages[type]) || DIR_PAGES;

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

@@ -90,6 +90,7 @@ function Overview({type, tenantName}: OverviewProps) {
             [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={data} />,
             [EPathType.EPathTypeExternalTable]: () => <ExternalTableInfo data={data} />,
             [EPathType.EPathTypeExternalDataSource]: () => <ExternalDataSourceInfo data={data} />,
+            [EPathType.EPathTypeView]: undefined,
         };
 
         return (

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -44,7 +44,7 @@ import {
     PaneVisibilityToggleButtons,
     paneVisibilityToggleReducerCreator,
 } from '../utils/paneVisibilityToggleHelpers';
-import {isIndexTable, isTableType} from '../utils/schema';
+import {isIndexTableType, isTableType, isViewType} from '../utils/schema';
 
 import './ObjectSummary.scss';
 
@@ -103,15 +103,17 @@ export function ObjectSummary({
     const currentSchemaData = currentObjectData?.PathDescription?.Self;
 
     React.useEffect(() => {
-        const isTable = isTableType(type);
+        // TODO: enable schema tab for view when supported
+        const isTable = isTableType(type) && !isViewType(type);
 
         if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === summaryTab)) {
             dispatch(setSummaryTab(TENANT_SUMMARY_TABS_IDS.overview));
         }
     }, [dispatch, type, summaryTab]);
 
     const renderTabs = () => {
-        const isTable = isTableType(type);
+        // TODO: enable schema tab for view when supported
+        const isTable = isTableType(type) && !isViewType(type);
         const tabsItems = isTable ? [...TENANT_INFO_TABS, ...TENANT_SCHEMA_TAB] : TENANT_INFO_TABS;
 
         return (
@@ -160,6 +162,7 @@ export function ObjectSummary({
             [EPathType.EPathTypeExternalDataSource]: () => (
                 <ExternalDataSourceSummary data={currentObjectData} />
             ),
+            [EPathType.EPathTypeView]: undefined,
         };
 
         let component =
@@ -239,7 +242,7 @@ export function ObjectSummary({
     };
 
     const renderCommonInfoControls = () => {
-        const showPreview = isTableType(type) && !isIndexTable(subType);
+        const showPreview = isTableType(type) && !isIndexTableType(subType);
         return (
             <React.Fragment>
                 {showPreview && (

src/containers/Tenant/Query/Preview/Preview.tsx

@@ -10,7 +10,7 @@ import type {EPathType} from '../../../../types/api/schema';
 import {cn} from '../../../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
-import {isExternalTable, isTableType} from '../../utils/schema';
+import {isExternalTableType, isTableType} from '../../utils/schema';
 import i18n from '../i18n';
 
 import './Preview.scss';
@@ -32,7 +32,7 @@ export const Preview = ({database, type}: PreviewProps) => {
 
     const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
     const {currentData, isFetching, error} = previewApi.useSendQueryQuery(
-        {database, query, action: isExternalTable(type) ? 'execute-query' : 'execute-scan'},
+        {database, query, action: isExternalTableType(type) ? 'execute-query' : 'execute-scan'},
         {pollingInterval: autorefresh, skip: !isPreviewAvailable},
     );
     const loading = isFetching && currentData === undefined;

src/containers/Tenant/Schema/SchemaViewer/helpers.tsx

@@ -11,7 +11,12 @@ import type {
     TFamilyDescription,
 } from '../../../../types/api/schema';
 import {EColumnCodec} from '../../../../types/api/schema';
-import {isColumnEntityType, isExternalTable, isRowTable, isTableType} from '../../utils/schema';
+import {
+    isColumnEntityType,
+    isExternalTableType,
+    isRowTableType,
+    isTableType,
+} from '../../utils/schema';
 
 export const SchemaViewerColumns = {
     id: 'Id',
@@ -69,7 +74,7 @@ export function prepareColumnDescriptions(
         const columnTableSchema = prepareOlapTableSchema(description);
         keyColumnIds = columnTableSchema.KeyColumnIds ?? [];
         columns = columnTableSchema.Columns ?? [];
-    } else if (isExternalTable(type)) {
+    } else if (isExternalTableType(type)) {
         columns = scheme?.PathDescription?.ExternalTableDescription?.Columns ?? [];
     } else {
         keyColumnIds = scheme?.PathDescription?.Table?.KeyColumnIds ?? [];
@@ -120,7 +125,7 @@ export function prepareSchemaTableColumns(options: {
         },
     ];
 
-    if (!isExternalTable(options.type)) {
+    if (!isExternalTableType(options.type)) {
         // External tables don't have key columns
         columns.push({
             name: SchemaViewerColumns.key,
@@ -164,7 +169,7 @@ export function prepareSchemaTableColumns(options: {
         },
     );
 
-    if (options.withFamilies && isRowTable(options.type)) {
+    if (options.withFamilies && isRowTableType(options.type)) {
         columns.push(
             {
                 name: SchemaViewerColumns.familyName,

src/containers/Tenant/i18n/en.json

@@ -10,15 +10,16 @@
 
   "actions.copied": "The path is copied to the clipboard",
   "actions.notCopied": "Couldn’t copy the path",
-  "actions.externalTableSelectUnavailable": "Select query for external tables available only with 'YQL - QueryService' query mode. You need to turn in additional query modes in settings to enable it",
 
   "actions.copyPath": "Copy path",
   "actions.openPreview": "Open preview",
   "actions.createTable": "Create table...",
   "actions.createExternalTable": "Create external table...",
   "actions.createTopic": "Create topic...",
+  "actions.createView": "Create view...",
   "actions.dropTable": "Drop table...",
   "actions.dropTopic": "Drop topic...",
+  "actions.dropView": "Drop view...",
   "actions.alterTable": "Alter table...",
   "actions.alterTopic": "Alter topic...",
   "actions.selectQuery": "Select query...",

src/containers/Tenant/i18n/index.ts

@@ -1,8 +1,7 @@
 import {registerKeysets} from '../../../utils/i18n';
 
 import en from './en.json';
-import ru from './ru.json';
 
 const COMPONENT = 'ydb-tenant';
 
-export default registerKeysets(COMPONENT, {en, ru});
+export default registerKeysets(COMPONENT, {en});

src/containers/Tenant/utils/queryTemplates.ts

@@ -111,3 +111,11 @@ ALTER TOPIC \`${path}\`
 export const dropTopicTemplate = (path: string) => {
     return `DROP TOPIC \`${path}\`;`;
 };
+
+export const createViewTemplate = (path: string) => {
+    return `CREATE VIEW \`${path}/my_view\` WITH (security_invoker = TRUE) AS SELECT 1;`;
+};
+
+export const dropViewTemplate = (path: string) => {
+    return `DROP VIEW \`${path}\`;`;
+};

src/containers/Tenant/utils/schema.ts

@@ -35,6 +35,8 @@ const pathTypeToNodeType: Record<EPathType, NavigationTreeNodeType | undefined>
 
     [EPathType.EPathTypeExternalDataSource]: 'external_data_source',
     [EPathType.EPathTypeExternalTable]: 'external_table',
+
+    [EPathType.EPathTypeView]: 'view',
 };
 
 export const mapPathTypeToNavigationTreeType = (
@@ -67,8 +69,11 @@ const pathTypeToEntityName: Record<EPathType, string | undefined> = {
     [EPathType.EPathTypeColumnTable]: 'Columntable',
     [EPathType.EPathTypeCdcStream]: 'Changefeed',
     [EPathType.EPathTypePersQueueGroup]: 'Topic',
+
     [EPathType.EPathTypeExternalDataSource]: 'External Data Source',
     [EPathType.EPathTypeExternalTable]: 'External Table',
+
+    [EPathType.EPathTypeView]: 'View',
 };
 
 export const mapPathTypeToEntityName = (
@@ -97,6 +102,8 @@ const pathTypeToIsTable: Record<EPathType, boolean> = {
 
     [EPathType.EPathTypeExternalTable]: true,
 
+    [EPathType.EPathTypeView]: true,
+
     [EPathType.EPathTypeInvalid]: false,
     [EPathType.EPathTypeDir]: false,
     [EPathType.EPathTypeSubDomain]: false,
@@ -121,7 +128,7 @@ const pathSubTypeToIsIndexImpl: Record<EPathSubType, boolean> = {
     [EPathSubType.EPathSubTypeEmpty]: false,
 };
 
-export const isIndexTable = (subType?: EPathSubType) =>
+export const isIndexTableType = (subType?: EPathSubType) =>
     (subType && pathSubTypeToIsIndexImpl[subType]) ?? false;
 
 // ====================
@@ -138,8 +145,11 @@ const pathTypeToIsColumn: Record<EPathType, boolean> = {
     [EPathType.EPathTypeExtSubDomain]: false,
     [EPathType.EPathTypeCdcStream]: false,
     [EPathType.EPathTypePersQueueGroup]: false,
+
     [EPathType.EPathTypeExternalDataSource]: false,
     [EPathType.EPathTypeExternalTable]: false,
+
+    [EPathType.EPathTypeView]: false,
 };
 
 export const isColumnEntityType = (type?: EPathType) => (type && pathTypeToIsColumn[type]) ?? false;
@@ -158,8 +168,11 @@ const pathTypeToIsDatabase: Record<EPathType, boolean> = {
     [EPathType.EPathTypeTableIndex]: false,
     [EPathType.EPathTypeCdcStream]: false,
     [EPathType.EPathTypePersQueueGroup]: false,
+
     [EPathType.EPathTypeExternalDataSource]: false,
     [EPathType.EPathTypeExternalTable]: false,
+
+    [EPathType.EPathTypeView]: false,
 };
 
 export const isDatabaseEntityType = (type?: EPathType) =>
@@ -183,8 +196,11 @@ const pathTypeToEntityWithMergedImplementation: Record<EPathType, boolean> = {
     [EPathType.EPathTypeSubDomain]: false,
     [EPathType.EPathTypeTableIndex]: false,
     [EPathType.EPathTypeExtSubDomain]: false,
+
     [EPathType.EPathTypeExternalDataSource]: false,
     [EPathType.EPathTypeExternalTable]: false,
+
+    [EPathType.EPathTypeView]: false,
 };
 
 export const isEntityWithMergedImplementation = (type?: EPathType) =>
@@ -207,6 +223,8 @@ const pathTypeToChildless: Record<EPathType, boolean> = {
     [EPathType.EPathTypeExternalDataSource]: true,
     [EPathType.EPathTypeExternalTable]: true,
 
+    [EPathType.EPathTypeView]: true,
+
     [EPathType.EPathTypeInvalid]: false,
     [EPathType.EPathTypeColumnStore]: false,
     [EPathType.EPathTypeColumnTable]: false,
@@ -237,12 +255,15 @@ const mapPathTypeToIsWithTopic: Record<EPathType, boolean> = {
 
     [EPathType.EPathTypeExternalDataSource]: false,
     [EPathType.EPathTypeExternalTable]: false,
+
+    [EPathType.EPathTypeView]: false,
 };
 
 export const isPathTypeWithTopic = (type?: EPathType) =>
     (type && mapPathTypeToIsWithTopic[type]) ?? false;
 
 // ====================
 
-export const isExternalTable = (type?: EPathType) => type === EPathType.EPathTypeExternalTable;
-export const isRowTable = (type?: EPathType) => type === EPathType.EPathTypeTable;
+export const isExternalTableType = (type?: EPathType) => type === EPathType.EPathTypeExternalTable;
+export const isRowTableType = (type?: EPathType) => type === EPathType.EPathTypeTable;
+export const isViewType = (type?: EPathType) => type === EPathType.EPathTypeView;

src/containers/Tenant/utils/schemaActions.ts

@@ -14,8 +14,10 @@ import {
     createExternalTableTemplate,
     createTableTemplate,
     createTopicTemplate,
+    createViewTemplate,
     dropExternalTableTemplate,
     dropTopicTemplate,
+    dropViewTemplate,
     selectQueryTemplate,
     upsertQueryTemplate,
 } from './queryTemplates';
@@ -54,6 +56,8 @@ const bindActions = (
         createTopic: inputQuery(createTopicTemplate, 'script'),
         alterTopic: inputQuery(alterTopicTemplate, 'script'),
         dropTopic: inputQuery(dropTopicTemplate, 'script'),
+        createView: inputQuery(createViewTemplate, 'script'),
+        dropView: inputQuery(dropViewTemplate, 'script'),
         copyPath: () => {
             try {
                 copy(path);
@@ -86,6 +90,7 @@ export const getActions =
             [
                 {text: i18n('actions.createTable'), action: actions.createTable},
                 {text: i18n('actions.createTopic'), action: actions.createTopic},
+                {text: i18n('actions.createView'), action: actions.createView},
             ],
         ];
         const TABLE_SET: ActionsSet = [
@@ -121,6 +126,12 @@ export const getActions =
             [{text: i18n('actions.createExternalTable'), action: actions.createExternalTable}],
         ];
 
+        const VIEW_SET = [
+            [copyItem],
+            [{text: i18n('actions.selectQuery'), action: actions.selectQuery}],
+            [{text: i18n('actions.dropView'), action: actions.dropView}],
+        ];
+
         const JUST_COPY: ActionsSet = [copyItem];
 
         // verbose mapping to guarantee a correct actions set for new node types
@@ -140,6 +151,8 @@ export const getActions =
 
             external_table: EXTERNAL_TABLE_SET,
             external_data_source: EXTERNAL_DATA_SOURCE_SET,
+
+            view: VIEW_SET,
         };
 
         return nodeTypeToActions[type];

src/containers/Tenant/utils/schemaControls.tsx

@@ -60,6 +60,8 @@ export const getControls =
 
             external_table: openPreview,
             external_data_source: undefined,
+
+            view: openPreview,
         };
 
         return nodeTypeToControls[type];