ydb-embedded-ui 6.5.0 → 6.6.0

package/dist/containers/App/App.scss

@@ -28,8 +28,6 @@ body,
 :root {
     --g-color-base-yellow-light: rgba(255, 199, 0, 0.15);
     --g-color-base-yellow-medium: rgba(255, 219, 77, 0.4);
-
-    --data-table-row-height: 40px;
 }
 
 .g-root {
@@ -74,42 +72,12 @@ body,
 .app {
     height: 100%;
     @include flex-container();
+    @include data-table-styles();
 
     &__main {
         overflow: auto;
         @include flex-container();
     }
-
-    .data-table {
-        width: 100%;
-        @include body-2-typography();
-
-        &__table {
-            max-width: 100%;
-
-            border-spacing: 0;
-            border-collapse: separate;
-        }
-    }
-
-    .data-table__th {
-        font-weight: bold;
-
-        border-top: unset;
-        border-right: unset;
-        border-left: unset;
-    }
-
-    .data-table__sticky .data-table__th,
-    .data-table__td {
-        height: var(--data-table-row-height);
-
-        vertical-align: middle;
-
-        border-top: unset;
-        border-right: unset;
-        border-left: unset;
-    }
 }
 
 .error {

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss

@@ -54,12 +54,6 @@
         &:not(:last-child) {
             margin-bottom: var(--diagnostics-section-margin);
         }
-
-        th {
-            height: 40px;
-
-            vertical-align: middle;
-        }
     }
 
     &__top-queries-row {

package/dist/containers/Tenant/Info/View/View.scss

@@ -0,0 +1,13 @@
+@import '../../../../styles/mixins.scss';
+
+.ydb-view-info {
+    @include flex-container();
+
+    &__properties-list {
+        max-width: calc(100% - 40px);
+    }
+
+    &__title {
+        @include info-viewer-title();
+    }
+}

package/dist/package.json

@@ -0,0 +1,174 @@
+{
+    "name": "ydb-embedded-ui",
+    "version": "6.6.0",
+    "files": [
+        "dist"
+    ],
+    "main": "dist/lib.js",
+    "repository": {
+        "type": "git",
+        "url": "git@github.com:ydb-platform/ydb-embedded-ui.git"
+    },
+    "dependencies": {
+        "@bem-react/classname": "^1.6.0",
+        "@gravity-ui/axios-wrapper": "^1.4.1",
+        "@gravity-ui/chartkit": "^5.5.0",
+        "@gravity-ui/components": "^3.6.2",
+        "@gravity-ui/date-utils": "^2.4.0",
+        "@gravity-ui/i18n": "^1.5.0",
+        "@gravity-ui/icons": "^2.9.1",
+        "@gravity-ui/navigation": "^2.10.0",
+        "@gravity-ui/paranoid": "^2.0.1",
+        "@gravity-ui/react-data-table": "^2.1.1",
+        "@gravity-ui/uikit": "^6.15.0",
+        "@gravity-ui/websql-autocomplete": "^9.1.0",
+        "@reduxjs/toolkit": "^2.2.3",
+        "axios": "^1.6.8",
+        "colord": "^2.9.3",
+        "copy-to-clipboard": "^3.3.3",
+        "crc-32": "^1.2.2",
+        "history": "^4.10.1",
+        "lodash": "^4.17.21",
+        "monaco-editor": "^0.48.0",
+        "numeral": "^2.0.6",
+        "path-to-regexp": "^3.0.0",
+        "qs": "^6.12.0",
+        "react-error-boundary": "^4.0.13",
+        "react-helmet-async": "2.0.4",
+        "react-json-inspector": "^7.1.1",
+        "react-list": "^0.8.17",
+        "react-monaco-editor": "^0.55.0",
+        "react-redux": "^9.1.0",
+        "react-router": "^5.3.4",
+        "react-router-dom": "^5.3.4",
+        "react-split": "^2.0.14",
+        "redux": "^5.0.1",
+        "redux-location-state": "^2.8.2",
+        "tslib": "^2.6.2",
+        "url": "^0.11.3",
+        "use-query-params": "^2.2.1",
+        "web-vitals": "^1.1.2",
+        "ydb-ui-components": "^4.2.0",
+        "zod": "^3.23.8"
+    },
+    "scripts": {
+        "analyze": "source-map-explorer 'build/static/js/*.js'",
+        "start": "react-app-rewired start",
+        "dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://localhost:8765 REACT_APP_META_BACKEND=undefined npm start",
+        "build": "rm -rf build && DISABLE_ESLINT_PLUGIN=true react-app-rewired build",
+        "//build:embedded": "echo 'PUBLIC_URL is a setting for create-react-app. Embedded version is built and hosted as is on ydb servers, with no way of knowing the final URL pattern. PUBLIC_URL=. keeps paths to all static relative, allowing servers to handle them as needed'",
+        "build:embedded": "GENERATE_SOURCEMAP=false PUBLIC_URL=. REACT_APP_BACKEND=http://localhost:8765 REACT_APP_META_BACKEND=undefined npm run build",
+        "build:embedded:archive": "npm run build:embedded && mv build embedded-ui && zip -r embedded-ui.zip embedded-ui && rm -rf embedded-ui",
+        "lint": "run-p lint:*",
+        "lint:js": "eslint  --ext .js,.jsx,.ts,.tsx .",
+        "lint:styles": "stylelint 'src/**/*.{css,scss}'",
+        "lint:other": "npm run prettier -- --check",
+        "prettier": "prettier '**/*.{json,yaml,yml,md}'",
+        "unimported": "npx unimported --no-cache",
+        "package": "rm -rf dist && tsc -p tsconfig.package.json && copyfiles -u 1 'src/**/*.{css,scss,svg}' dist",
+        "test": "react-app-rewired test",
+        "eject": "react-scripts eject",
+        "prepublishOnly": "npm run package",
+        "typecheck": "tsc --noEmit",
+        "prepare": "husky",
+        "test:e2e:install": "npx playwright install --with-deps",
+        "test:e2e": "npx playwright test --config=playwright.config.ts"
+    },
+    "lint-staged": {
+        "*.{scss, css}": [
+            "stylelint --fix --quiet"
+        ],
+        "*.{js,jsx,ts,tsx}": [
+            "eslint --fix --quiet"
+        ],
+        "*.{json,yaml,yml,md}": [
+            "prettier --write"
+        ]
+    },
+    "jest": {
+        "verbose": true,
+        "moduleFileExtensions": [
+            "js",
+            "json",
+            "ts",
+            "tsx"
+        ],
+        "rootDir": ".",
+        "transform": {
+            "^.+\\.[jt]sx?$": "ts-jest"
+        },
+        "coverageDirectory": "./coverage",
+        "collectCoverageFrom": [
+            "src/**/*.{ts,tsx,js,jsx}"
+        ],
+        "testEnvironment": "jsdom",
+        "moduleNameMapper": {
+            "\\.(css|less|scss|sass)$": "jest-transform-css",
+            "^axios$": "axios/dist/node/axios.cjs",
+            "^@gravity-ui/uikit/toaster-singleton-react-18$": "@gravity-ui/uikit/build/cjs/toaster-singleton-react-18.js"
+        }
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@commitlint/cli": "^19.2.1",
+        "@commitlint/config-conventional": "^19.1.0",
+        "@gravity-ui/eslint-config": "^3.2.0",
+        "@gravity-ui/prettier-config": "^1.1.0",
+        "@gravity-ui/stylelint-config": "^4.0.1",
+        "@gravity-ui/tsconfig": "^1.0.0",
+        "@playwright/test": "^1.42.1",
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/react": "^14.2.2",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/jest": "^29.5.12",
+        "@types/lodash": "^4.17.0",
+        "@types/numeral": "^2.0.5",
+        "@types/qs": "^6.9.14",
+        "@types/react": "^18.2.73",
+        "@types/react-dom": "^18.2.23",
+        "@types/react-router": "^5.1.20",
+        "@types/react-router-dom": "^5.3.3",
+        "copyfiles": "^2.4.1",
+        "http-proxy-middleware": "^2.0.6",
+        "husky": "^9.0.11",
+        "jest-transform-css": "^6.0.1",
+        "lint-staged": "^15.2.2",
+        "npm-run-all": "^4.1.5",
+        "postcss": "^8.4.38",
+        "prettier": "^3.2.5",
+        "prop-types": "^15.8.1",
+        "react": "^18.2.0",
+        "react-app-rewired": "^2.2.1",
+        "react-dom": "^18.2.0",
+        "react-scripts": "^5.0.1",
+        "sass": "^1.72.0",
+        "source-map-explorer": "^2.5.3",
+        "stylelint": "^15.0.0",
+        "ts-jest": "^29.1.2",
+        "typescript": "^5.4.3"
+    },
+    "peerDependencies": {
+        "prop-types": "^15.8.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "overrides": {
+        "fork-ts-checker-webpack-plugin": "^9.0.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "redux": "^5.0.1",
+        "typescript": "^5.4.3",
+        "monaco-editor": "^0.48.0"
+    }
+}

package/dist/{containers → src/containers}/Tenant/Diagnostics/Diagnostics.js

@@ -72,7 +72,7 @@ function Diagnostics(props) {
                 return (_jsx(DetailedOverview, { type: type, tenantName: tenantNameString, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps }));
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
-                return _jsx(SchemaViewer, { path: currentSchemaPath, type: type, withFamilies: true });
+                return (_jsx(SchemaViewer, { path: currentSchemaPath, tenantName: tenantName, type: type, extended: true }));
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
                 return _jsx(TopQueries, { path: tenantNameString, type: type });

package/dist/{containers → src/containers}/Tenant/Diagnostics/DiagnosticsPages.d.ts

@@ -7,6 +7,9 @@ type Page = {
 export declare const ASYNC_REPLICATION_PAGES: ({
     id: "overview";
     title: string;
+} | {
+    id: "tablets";
+    title: string;
 } | {
     id: "describe";
     title: string;
@@ -102,6 +105,9 @@ export declare const CDC_STREAM_PAGES: ({
 } | {
     id: "nodes";
     title: string;
+} | {
+    id: "tablets";
+    title: string;
 } | {
     id: "describe";
     title: string;
@@ -118,6 +124,9 @@ export declare const TOPIC_PAGES: ({
 } | {
     id: "nodes";
     title: string;
+} | {
+    id: "tablets";
+    title: string;
 } | {
     id: "describe";
     title: string;

package/dist/{containers → src/containers}/Tenant/Diagnostics/DiagnosticsPages.js

@@ -52,7 +52,7 @@ const partitions = {
     id: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
     title: 'Partitions',
 };
-export const ASYNC_REPLICATION_PAGES = [overview, describe];
+export const ASYNC_REPLICATION_PAGES = [overview, tablets, describe];
 export const DATABASE_PAGES = [
     overview,
     topQueries,
@@ -66,8 +66,8 @@ export const DATABASE_PAGES = [
 export const TABLE_PAGES = [overview, schema, topShards, nodes, graph, tablets, hotKeys, describe];
 export const COLUMN_TABLE_PAGES = [overview, schema, topShards, nodes, graph, tablets, describe];
 export const DIR_PAGES = [overview, topShards, nodes, describe];
-export const CDC_STREAM_PAGES = [overview, consumers, partitions, nodes, describe];
-export const TOPIC_PAGES = [overview, consumers, partitions, nodes, describe];
+export const CDC_STREAM_PAGES = [overview, consumers, partitions, nodes, tablets, describe];
+export const TOPIC_PAGES = [overview, consumers, partitions, nodes, tablets, describe];
 export const EXTERNAL_DATA_SOURCE_PAGES = [overview, describe];
 export const EXTERNAL_TABLE_PAGES = [overview, describe];
 export const VIEW_PAGES = [overview, describe];

package/dist/{containers → src/containers}/Tenant/Diagnostics/Overview/Overview.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { EPathType } from '../../../../types/api/schema';
 interface OverviewProps {
     type?: EPathType;
     tenantName?: string;
 }
-declare function Overview({ type, tenantName }: OverviewProps): import("react/jsx-runtime").JSX.Element;
+declare function Overview({ type, tenantName }: OverviewProps): string | number | true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
 export default Overview;

package/dist/{containers → src/containers}/Tenant/Diagnostics/Overview/Overview.js

@@ -11,6 +11,7 @@ import { EPathType } from '../../../../types/api/schema';
 import { useTypedSelector } from '../../../../utils/hooks';
 import { ExternalDataSourceInfo } from '../../Info/ExternalDataSource/ExternalDataSource';
 import { ExternalTableInfo } from '../../Info/ExternalTable/ExternalTable';
+import { ViewInfo } from '../../Info/View/View';
 import { isColumnEntityType, isEntityWithMergedImplementation, isTableType, } from '../../utils/schema';
 import { AsyncReplicationInfo } from './AsyncReplicationInfo';
 import { ChangefeedInfo } from './ChangefeedInfo';
@@ -63,7 +64,7 @@ function Overview({ type, tenantName }) {
             [EPathType.EPathTypePersQueueGroup]: () => _jsx(TopicInfo, { data: data }),
             [EPathType.EPathTypeExternalTable]: () => _jsx(ExternalTableInfo, { data: data }),
             [EPathType.EPathTypeExternalDataSource]: () => _jsx(ExternalDataSourceInfo, { data: data }),
-            [EPathType.EPathTypeView]: undefined,
+            [EPathType.EPathTypeView]: () => _jsx(ViewInfo, { data: data }),
             [EPathType.EPathTypeReplication]: () => _jsx(AsyncReplicationInfo, { data: data }),
         };
         return ((type && ((_a = pathTypeToComponent[type]) === null || _a === void 0 ? void 0 : _a.call(pathTypeToComponent))) || (_jsx(TableInfo, { data: data, type: type, olapStats: olapStats })));
@@ -74,6 +75,6 @@ function Overview({ type, tenantName }) {
     if (overviewError) {
         return _jsx(ResponseError, { error: overviewError });
     }
-    return _jsx("div", { children: renderContent() });
+    return renderContent();
 }
 export default Overview;

package/dist/src/containers/Tenant/Info/View/View.d.ts

@@ -0,0 +1,7 @@
+import type { TEvDescribeSchemeResult } from '../../../../types/api/schema';
+import './View.scss';
+interface ViewInfoProps {
+    data?: TEvDescribeSchemeResult;
+}
+export declare function ViewInfo({ data }: ViewInfoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/containers/Tenant/Info/View/View.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DefinitionList } from '@gravity-ui/components';
+import { Text } from '@gravity-ui/uikit';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { cn } from '../../../../utils/cn';
+import { useTypedSelector } from '../../../../utils/hooks';
+import { getEntityName } from '../../utils';
+import i18n from '../i18n';
+const b = cn('ydb-view-info');
+import './View.scss';
+const prepareViewItems = (data) => {
+    var _a, _b;
+    const queryText = (_b = (_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.ViewDescription) === null || _b === void 0 ? void 0 : _b.QueryText;
+    return [
+        {
+            name: i18n('view.query-text'),
+            copyText: queryText,
+            content: (_jsx(Text, { variant: "code-2", wordBreak: "break-word", children: queryText })),
+        },
+    ];
+};
+export function ViewInfo({ data }) {
+    const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
+    const { error: schemaError } = useTypedSelector((state) => state.schema);
+    if (schemaError) {
+        return _jsx(ResponseError, { error: schemaError });
+    }
+    if (!data) {
+        return _jsxs("div", { className: "error", children: ["No ", entityName, " data"] });
+    }
+    return (_jsxs("div", { className: b(null), children: [_jsx("div", { className: b('title'), children: entityName }), _jsx(DefinitionList, { nameMaxWidth: 200, copyPosition: "outside", className: b('properties-list'), items: prepareViewItems(data) })] }));
+}

package/dist/{containers → src/containers}/Tenant/Info/i18n/en.json

@@ -4,5 +4,6 @@
     "external-objects.location": "Location",
     "external-objects.auth-method": "Auth Method",
     "external-objects.auth-method.none": "None",
-    "external-objects.auth-method.service-account": "Service Account"
+    "external-objects.auth-method.service-account": "Service Account",
+    "view.query-text": "Query Text"
 }

package/dist/{containers → src/containers}/Tenant/Info/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: "external-objects.source-type" | "external-objects.data-source" | "external-objects.location" | "external-objects.auth-method" | "external-objects.auth-method.none" | "external-objects.auth-method.service-account", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "external-objects.source-type" | "external-objects.data-source" | "external-objects.location" | "external-objects.auth-method" | "external-objects.auth-method.none" | "external-objects.auth-method.service-account" | "view.query-text", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/{containers → src/containers}/Tenant/Info/i18n/index.js

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

package/dist/{containers → src/containers}/Tenant/ObjectSummary/ObjectSummary.d.ts

@@ -4,9 +4,10 @@ import './ObjectSummary.scss';
 interface ObjectSummaryProps {
     type?: EPathType;
     subType?: EPathSubType;
+    tenantName?: string;
     onCollapseSummary: VoidFunction;
     onExpandSummary: VoidFunction;
     isCollapsed: boolean;
 }
-export declare function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummary, isCollapsed, }: ObjectSummaryProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ObjectSummary({ type, subType, tenantName, onCollapseSummary, onExpandSummary, isCollapsed, }: ObjectSummaryProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/{containers → src/containers}/Tenant/ObjectSummary/ObjectSummary.js

@@ -29,7 +29,7 @@ import { SchemaViewer } from '../Schema/SchemaViewer/SchemaViewer';
 import { TENANT_INFO_TABS, TENANT_SCHEMA_TAB, TenantTabsGroups } from '../TenantPages';
 import i18n from '../i18n';
 import { PaneVisibilityActionTypes, PaneVisibilityToggleButtons, paneVisibilityToggleReducerCreator, } from '../utils/paneVisibilityToggleHelpers';
-import { isIndexTableType, isTableType, isViewType } from '../utils/schema';
+import { isIndexTableType, isTableType } from '../utils/schema';
 import './ObjectSummary.scss';
 const b = cn('object-summary');
 const getTenantCommonInfoState = () => {
@@ -40,7 +40,7 @@ const getTenantCommonInfoState = () => {
         collapsed,
     };
 };
-export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummary, isCollapsed, }) {
+export function ObjectSummary({ type, subType, tenantName, onCollapseSummary, onExpandSummary, isCollapsed, }) {
     var _a, _b, _c;
     const dispatch = useTypedDispatch();
     const [commonInfoVisibilityState, dispatchCommonInfoVisibilityState] = React.useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED), undefined, getTenantCommonInfoState);
@@ -50,20 +50,17 @@ export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummar
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
-    const { name: tenantName } = queryParams;
     const pathData = tenantName ? (_b = (_a = data[tenantName.toString()]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Self : undefined;
     const currentObjectData = currentSchemaPath ? data[currentSchemaPath] : undefined;
     const currentSchemaData = (_c = currentObjectData === null || currentObjectData === void 0 ? void 0 : currentObjectData.PathDescription) === null || _c === void 0 ? void 0 : _c.Self;
     React.useEffect(() => {
-        // TODO: enable schema tab for view when supported
-        const isTable = isTableType(type) && !isViewType(type);
+        const isTable = isTableType(type);
         if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === summaryTab)) {
             dispatch(setSummaryTab(TENANT_SUMMARY_TABS_IDS.overview));
         }
     }, [dispatch, type, summaryTab]);
     const renderTabs = () => {
-        // TODO: enable schema tab for view when supported
-        const isTable = isTableType(type) && !isViewType(type);
+        const isTable = isTableType(type);
         const tabsItems = isTable ? [...TENANT_INFO_TABS, ...TENANT_SCHEMA_TAB] : TENANT_INFO_TABS;
         return (_jsx("div", { className: b('tabs'), children: _jsx(Tabs, { size: "l", items: tabsItems, activeTab: summaryTab, wrapTo: ({ id }, node) => {
                     const path = createHref(routes.tenant, undefined, Object.assign(Object.assign({}, queryParams), { name: tenantName, [TenantTabsGroups.summaryTab]: id }));
@@ -123,7 +120,7 @@ export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummar
                 return _jsx(Acl, {});
             }
             case TENANT_SUMMARY_TABS_IDS.schema: {
-                return _jsx(SchemaViewer, { type: type, path: currentSchemaPath });
+                return (_jsx(SchemaViewer, { type: type, path: currentSchemaPath, tenantName: tenantName }));
             }
             default: {
                 return renderObjectOverview();

package/dist/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.d.ts

@@ -0,0 +1,10 @@
+import type { EPathType } from '../../../../types/api/schema';
+import './SchemaViewer.scss';
+interface SchemaViewerProps {
+    type?: EPathType;
+    path?: string;
+    tenantName?: string | null;
+    extended?: boolean;
+}
+export declare const SchemaViewer: ({ type, path, tenantName, extended }: SchemaViewerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import DataTable from '@gravity-ui/react-data-table';
+import { skipToken } from '@reduxjs/toolkit/query';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
+import { viewSchemaApi } from '../../../../store/reducers/viewSchema/viewSchema';
+import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
+import { useTypedSelector } from '../../../../utils/hooks';
+import { isColumnEntityType, isExternalTableType, isRowTableType, isViewType, } from '../../utils/schema';
+import { SCHEMA_COLUMNS_WIDTH_LS_KEY, SCHEMA_TABLE_COLUMS_IDS, getColumnTableColumns, getExternalTableColumns, getRowTableColumns, getViewColumns, } from './columns';
+import { prepareSchemaData, prepareViewSchema } from './prepareData';
+import { b } from './shared';
+import './SchemaViewer.scss';
+export const SchemaViewer = ({ type, path, tenantName, extended = false }) => {
+    const { data: schemaData, loading } = useTypedSelector((state) => state.schema);
+    const currentObjectData = path ? schemaData[path] : undefined;
+    const viewSchemaRequestParams = isViewType(type) && path && tenantName ? { path, database: tenantName } : skipToken;
+    const { data: viewColumnsData, isLoading: isViewSchemaLoading } = viewSchemaApi.useGetViewSchemaQuery(viewSchemaRequestParams);
+    const tableData = React.useMemo(() => {
+        if (isViewType(type)) {
+            return prepareViewSchema(viewColumnsData);
+        }
+        return prepareSchemaData(type, currentObjectData);
+    }, [currentObjectData, type, viewColumnsData]);
+    const columns = React.useMemo(() => {
+        if (isViewType(type)) {
+            return getViewColumns();
+        }
+        if (isExternalTableType(type)) {
+            return getExternalTableColumns();
+        }
+        if (isColumnEntityType(type)) {
+            return getColumnTableColumns();
+        }
+        if (isRowTableType(type)) {
+            return getRowTableColumns(extended);
+        }
+        return [];
+    }, [type, extended]);
+    const renderContent = () => {
+        if (loading || isViewSchemaLoading) {
+            return _jsx(TableSkeleton, {});
+        }
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: SCHEMA_COLUMNS_WIDTH_LS_KEY, data: tableData, columns: columns, settings: DEFAULT_TABLE_SETTINGS, initialSortOrder: {
+                columnId: SCHEMA_TABLE_COLUMS_IDS.isKeyColumn,
+                order: DataTable.ASCENDING,
+            } }));
+    };
+    return _jsx("div", { className: b(null), children: renderContent() });
+};

package/dist/src/containers/Tenant/Schema/SchemaViewer/columns.d.ts

@@ -0,0 +1,16 @@
+import type { SchemaColumn } from './types';
+export declare const SCHEMA_COLUMNS_WIDTH_LS_KEY = "schemaTableColumnsWidth";
+export declare const SCHEMA_TABLE_COLUMS_IDS: {
+    id: "id";
+    name: "name";
+    isKeyColumn: "isKeyColumn";
+    type: "type";
+    notNull: "notNull";
+    familyName: "familyName";
+    prefferedPoolKind: "prefferedPoolKind";
+    columnCodec: "columnCodec";
+};
+export declare function getViewColumns(): SchemaColumn[];
+export declare function getExternalTableColumns(): SchemaColumn[];
+export declare function getColumnTableColumns(): SchemaColumn[];
+export declare function getRowTableColumns(extended: boolean): SchemaColumn[];