ydb-embedded-ui 1.13.1 → 1.14.0

package/dist/utils/query.test.ts

@@ -0,0 +1,189 @@
+import {parseQueryAPIExecuteResponse} from './query';
+
+describe('API utils', () => {
+    describe('json/viewer/query', () => {
+        describe('parseQueryAPIExecuteResponse', () => {
+            describe('old format', () => {
+                describe('plain response', () => {
+                    it('should handle empty response', () => {
+                        expect(parseQueryAPIExecuteResponse(null).result).toBeUndefined();
+                    });
+
+                    it('should parse json string', () => {
+                        const json = {foo: 'bar'};
+                        const response = JSON.stringify(json);
+                        expect(parseQueryAPIExecuteResponse(response).result).toEqual(json);
+                    });
+
+                    // it should not be in the response, but is there because of a bug
+                    it('should ignore request plan as the response', () => {
+                        const response = {queries: 'some queries'};
+                        expect(parseQueryAPIExecuteResponse(response).result).toBeUndefined();
+                    });
+
+                    it('should accept key-value rows', () => {
+                        const response = [{foo: 'bar'}];
+                        expect(parseQueryAPIExecuteResponse(response).result).toEqual(response);
+                    });
+                });
+
+                describe('deep response without stats', () => {
+                    it('should parse json string in the result field', () => {
+                        const json = {foo: 'bar'};
+                        const response = {result: JSON.stringify(json)};
+                        expect(parseQueryAPIExecuteResponse(response).result).toEqual(json);
+                    });
+
+                    // it should not be in the response, but is there because of a bug
+                    it('should ignore request plan in the result field', () => {
+                        const response = {result: {queries: 'some queries'}};
+                        expect(parseQueryAPIExecuteResponse(response).result).toBeUndefined();
+                    });
+
+                    it('should accept key-value rows in the result field', () => {
+                        const response = {result: [{foo: 'bar'}]};
+                        expect(parseQueryAPIExecuteResponse(response).result).toEqual(response.result);
+                    });
+                });
+
+                describe('deep response with stats', () => {
+                    it('should parse json string in the result field', () => {
+                        const json = {foo: 'bar'};
+                        const response = {
+                            result: JSON.stringify(json),
+                            stats: {metric: 'good'},
+                        };
+                        const actual = parseQueryAPIExecuteResponse(response);
+                        expect(actual.result).toEqual(json);
+                        expect(actual.stats).toEqual(response.stats);
+                    });
+
+                    // it should not be in the response, but is there because of a bug
+                    it('should ignore request plan in the result field', () => {
+                        const response = {
+                            result: {queries: 'some queries'},
+                            stats: {metric: 'good'},
+                        };
+                        const actual = parseQueryAPIExecuteResponse(response);
+                        expect(actual.result).toBeUndefined();
+                        expect(actual.stats).toEqual(response.stats);
+                    });
+
+                    it('should accept key-value rows in the result field', () => {
+                        const response = {
+                            result: [{foo: 'bar'}],
+                            stats: {metric: 'good'},
+                        };
+                        const actual = parseQueryAPIExecuteResponse(response);
+                        expect(actual.result).toEqual(response.result);
+                        expect(actual.stats).toEqual(response.stats);
+                    });
+
+                    it('should accept stats without a result', () => {
+                        const response = {
+                            stats: {metric: 'good'},
+                        };
+                        const actual = parseQueryAPIExecuteResponse(response);
+                        expect(actual.result).toBeUndefined();
+                        expect(actual.stats).toEqual(response.stats);
+                    });
+                });
+            });
+
+            describe('new format', () => {
+                describe('response without stats', () => {
+                    it('should parse modern schema', () => {
+                        const response = {
+                            result: [['42', 'hello world']],
+                            columns: [{
+                                name: 'id',
+                                type: 'Uint64?'
+                            }, {
+                                name: 'value',
+                                type: 'Utf8?'
+                            }],
+                        };
+                        const actual = parseQueryAPIExecuteResponse(response);
+                        expect(actual.result).toEqual([{
+                            id: '42',
+                            value: 'hello world'
+                        }]);
+                        expect(actual.columns).toEqual(response.columns);
+                    });
+
+                    it('should handle empty response for classic schema', () => {
+                        expect(parseQueryAPIExecuteResponse(null).result).toBeUndefined();
+                    });
+
+                    it('should parse plain classic schema', () => {
+                        const response = [{foo: 'bar'}];
+                        expect(parseQueryAPIExecuteResponse(response).result).toEqual(response);
+                    });
+
+                    it('should parse deep classic schema', () => {
+                        const response = {result: [{foo: 'bar'}]};
+                        expect(parseQueryAPIExecuteResponse(response).result).toEqual(response.result);
+                    });
+
+                    it('should parse ydb schema', () => {
+                        const response = {result: [{foo: 'bar'}]};
+                        expect(parseQueryAPIExecuteResponse(response).result).toEqual(response.result);
+                    });
+                });
+
+                describe('response with stats', () => {
+                    it('should parse modern schema', () => {
+                        const response = {
+                            result: [['42', 'hello world']],
+                            columns: [{
+                                name: 'id',
+                                type: 'Uint64?'
+                            }, {
+                                name: 'value',
+                                type: 'Utf8?'
+                            }],
+                            stats: {metric: 'good'},
+                        };
+                        const actual = parseQueryAPIExecuteResponse(response);
+                        expect(actual.result).toEqual([{
+                            id: '42',
+                            value: 'hello world'
+                        }]);
+                        expect(actual.columns).toEqual(response.columns);
+                        expect(actual.stats).toEqual(response.stats);
+                    });
+
+                    it('should parse classic schema', () => {
+                        const response = {
+                            result: [{foo: 'bar'}],
+                            stats: {metric: 'good'},
+                        };
+                        const actual = parseQueryAPIExecuteResponse(response);
+                        expect(actual.result).toEqual(response.result);
+                        expect(actual.stats).toEqual(response.stats);
+                    });
+
+                    it('should parse ydb schema', () => {
+                        const response = {
+                            result: [{foo: 'bar'}],
+                            stats: {metric: 'good'},
+                        };
+                        const actual = parseQueryAPIExecuteResponse(response);
+                        expect(actual.result).toEqual(response.result);
+                        expect(actual.stats).toEqual(response.stats);
+                    });
+
+                    it('should accept stats without a result', () => {
+                        const response = {
+                            stats: {metric: 'good'},
+                        };
+                        const actual = parseQueryAPIExecuteResponse(response);
+                        expect(actual.result).toBeUndefined();
+                        expect(actual.columns).toBeUndefined();
+                        expect(actual.stats).toEqual(response.stats);
+                    });
+                });
+            });
+        });
+    });
+});

package/dist/utils/query.ts

@@ -0,0 +1,156 @@
+import {YQLType} from '../types';
+import type {
+    AnyExecuteResponse,
+    CommonFields,
+    DeepExecuteResponse,
+    DeprecatedExecuteResponsePlain,
+    ExecuteClassicResponsePlain,
+    ExecuteModernResponse,
+    KeyValueRow,
+    QueryAPIExecuteResponse,
+    Schemas,
+} from '../types/api/query';
+import type {IQueryResult} from '../types/store/query';
+
+// eslint-disable-next-line complexity
+export const getColumnType = (type: string) => {
+    switch (type.replace(/\?$/, '')) {
+        case YQLType.Bool:
+            return 'boolean';
+        case YQLType.Int8:
+        case YQLType.Int16:
+        case YQLType.Int32:
+        case YQLType.Int64:
+        case YQLType.Uint8:
+        case YQLType.Uint16:
+        case YQLType.Uint32:
+        case YQLType.Uint64:
+        case YQLType.Float:
+        case YQLType.Double:
+        case YQLType.Decimal:
+            return 'number';
+        case YQLType.String:
+        case YQLType.Utf8:
+        case YQLType.Json:
+        case YQLType.JsonDocument:
+        case YQLType.Yson:
+        case YQLType.Uuid:
+            return 'string';
+        case YQLType.Date:
+        case YQLType.Datetime:
+        case YQLType.Timestamp:
+        case YQLType.Interval:
+        case YQLType.TzDate:
+        case YQLType.TzDateTime:
+        case YQLType.TzTimestamp:
+            return 'date';
+        default:
+            return undefined;
+    }
+}
+
+const parseExecuteModernResponse = (data: ExecuteModernResponse): IQueryResult => {
+    const {result, columns, ...restData} = data;
+
+    return {
+        result: result && columns && result.map((row) => {
+            return row.reduce((newRow: KeyValueRow, cellData, columnIndex) => {
+                const {name} = columns[columnIndex];
+                newRow[name] = cellData;
+                return newRow;
+            }, {});
+        }),
+        columns,
+        ...restData,
+    };
+};
+
+const parseDeprecatedExecuteResponseValue = (data?: DeprecatedExecuteResponsePlain | ExecuteClassicResponsePlain): KeyValueRow[] | undefined => {
+    if (!data) {
+        return undefined;
+    }
+
+    if (typeof data === 'string') {
+        try {
+            return JSON.parse(data);
+        } catch (e) {
+            return undefined;
+        }
+    }
+
+    if (Array.isArray(data)) {
+        return data;
+    }
+
+    // Plan is not a valid response in this case
+    return undefined;
+};
+
+const hasResult = (data: AnyExecuteResponse): data is DeepExecuteResponse => Boolean(
+    data && typeof data === 'object' && 'result' in data
+);
+
+const isModern = (response: AnyExecuteResponse): response is ExecuteModernResponse => Boolean(
+    response &&
+    !Array.isArray(response) &&
+    Array.isArray((response as ExecuteModernResponse).result) &&
+    Array.isArray((response as ExecuteModernResponse).columns)
+);
+
+const hasCommonFields = (data: AnyExecuteResponse): data is CommonFields => Boolean(
+    data && typeof data === 'object' && ('ast' in data || 'plan' in data || 'stats' in data)
+);
+
+// complex logic because of the variety of possible responses
+// after all backends are updated to the latest version, it can be simplified
+export const parseQueryAPIExecuteResponse = <T extends Schemas>(data: QueryAPIExecuteResponse<T>): IQueryResult => {
+    if (!data) {
+        return {};
+    }
+
+    if (hasResult(data)) {
+        if (isModern(data)) {
+            return parseExecuteModernResponse(data);
+        }
+
+        return {
+            ...data,
+            result: parseDeprecatedExecuteResponseValue(data.result),
+        };
+    }
+
+    if (hasCommonFields(data)) {
+        return data;
+    }
+
+    return {
+        result: parseDeprecatedExecuteResponseValue(data),
+    };
+};
+
+export const prepareQueryResponse = (data?: KeyValueRow[]) => {
+    if (!Array.isArray(data)) {
+        return [];
+    }
+
+    return data.map((row) => {
+        const formattedData: KeyValueRow = {};
+
+        for (const field in row) {
+            if (Object.prototype.hasOwnProperty.call(row, field)) {
+                const type = typeof row[field];
+                if (type === 'object' || type === 'boolean' || Array.isArray(row[field])) {
+                    formattedData[field] = JSON.stringify(row[field]);
+                } else {
+                    formattedData[field] = row[field];
+                }
+            }
+        }
+
+        return formattedData;
+    });
+};
+
+export function prepareQueryError(error: any) {
+    return error.data?.error?.message || error.data || error.statusText || JSON.stringify(error);
+}

package/dist/utils/tests/providers.tsx

@@ -0,0 +1,29 @@
+import React, {PropsWithChildren} from 'react';
+import {Provider} from 'react-redux'
+import {render} from '@testing-library/react'
+import type {RenderOptions} from '@testing-library/react'
+
+import configureStore from '../../store';
+
+interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
+    storeConfiguration?: {
+        store?: any;
+        history?: any;
+    };
+}
+
+export const renderWithStore = (
+    ui: React.ReactElement,
+    {
+        storeConfiguration = configureStore(),
+        ...renderOptions
+    }: ExtendedRenderOptions = {}
+) => {
+    const {store} = storeConfiguration;
+
+    function Wrapper({children}: PropsWithChildren<{}>) {
+        return <Provider store={store}>{children}</Provider>
+    }
+
+    return {store, ...render(ui, {wrapper: Wrapper, ...renderOptions})}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "files": [
     "dist"
   ],
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@yandex-cloud/i18n": "0.6.0",
-    "@yandex-cloud/paranoid": "1.0.0",
+    "@yandex-cloud/paranoid": "^1.2.1",
     "@yandex-cloud/react-data-table": "0.2.1",
     "axios": "0.19.2",
     "bem-cn-lite": "4.0.0",

package/dist/store/utils.js

@@ -1,51 +0,0 @@
-import createToast from '../utils/createToast';
-import {SET_UNAUTHENTICATED} from './reducers/authentication';
-
-export const nop = (result) => result;
-
-export function createRequestActionTypes(prefix, type) {
-    return {
-        REQUEST: `${prefix}/${type}_REQUEST`,
-        SUCCESS: `${prefix}/${type}_SUCCESS`,
-        FAILURE: `${prefix}/${type}_FAILURE`,
-    };
-}
-
-export function createApiRequest({actions, request, dataHandler = nop}) {
-    const doRequest = async function (dispatch, getState) {
-        dispatch({
-            type: actions.REQUEST,
-        });
-
-        try {
-            const result = await request;
-            const data = dataHandler(result, getState);
-
-            dispatch({
-                type: actions.SUCCESS,
-                data,
-            });
-
-            return data;
-        } catch (error) {
-            if (error && error.status === 401) {
-                dispatch({
-                    type: SET_UNAUTHENTICATED.SUCCESS,
-                });
-            } else if (error && Number(error.status) >= 500 && error.statusText) {
-                createToast({
-                    name: 'Request failure',
-                    title: 'Request failure',
-                    type: 'error',
-                    content: `${error.status} ${error.statusText}`,
-                });
-            }
-            dispatch({
-                type: actions.FAILURE,
-                error,
-            });
-        }
-    };
-
-    return doRequest;
-}