ydb-embedded-ui 4.5.2 → 4.7.0

package/dist/containers/Tenant/QueryEditor/SavedQueries/SavedQueries.js

@@ -1,161 +0,0 @@
-import React, {useRef, useState} from 'react';
-import _ from 'lodash';
-import cn from 'bem-cn-lite';
-import {Dialog, Popup, Button} from '@gravity-ui/uikit';
-
-import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
-import {Icon} from '../../../../components/Icon';
-import './SavedQueries.scss';
-import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
-import {useDispatch} from 'react-redux';
-
-const b = cn('saved-queries');
-
-const MAX_QUERY_HEIGHT = 3;
-
-function SavedQueries({savedQueries, changeUserInput, onDeleteQuery}) {
-    const [isSavedQueriesVisible, setIsSavedQueriesVisible] = useState(false);
-    const [isDeleteDialogVisible, setIsDeleteDialogVisible] = useState(false);
-    const [queryNameToDelete, setQueryNameToDelete] = useState(null);
-
-    const [popupForceRender, setPopupForceRender] = useState(null);
-
-    const dispatch = useDispatch();
-    const anchor = useRef(null);
-
-    const onShowSavedQueriesClick = () => {
-        setIsSavedQueriesVisible(true);
-    };
-
-    const onCloseSavedQueries = () => {
-        setIsSavedQueriesVisible(false);
-    };
-
-    const onSavedQueryClick = (queryText, queryName) => {
-        return () => {
-            changeUserInput({input: queryText});
-            dispatch(setQueryNameToEdit(queryName));
-            setIsSavedQueriesVisible(false);
-        };
-    };
-
-    const onDeleteQueryClick = (queryName) => {
-        return (event) => {
-            event.stopPropagation();
-            setIsDeleteDialogVisible(true);
-            setQueryNameToDelete(queryName);
-        };
-    };
-
-    const closeDeleteDialog = () => {
-        setIsDeleteDialogVisible(false);
-        setQueryNameToDelete(null);
-    };
-
-    const onClickCancelDelete = (e) => {
-        e.stopPropagation();
-        closeDeleteDialog();
-    };
-
-    const onConfirmDeleteClick = (e) => {
-        e.stopPropagation();
-        onDeleteQuery(queryNameToDelete);
-        closeDeleteDialog();
-        setPopupForceRender(queryNameToDelete);
-    };
-
-    const renderDialog = () => {
-        return (
-            <Dialog
-                open={isDeleteDialogVisible}
-                hasCloseButton={false}
-                size="s"
-                onClose={onClickCancelDelete}
-                onEnterKeyDown={onConfirmDeleteClick}
-            >
-                <Dialog.Header caption="Delete query" />
-                <Dialog.Body className={b('dialog-body')}>
-                    Are you sure you want to delete query
-                    <span className={b('dialog-query-name')}>{` ${queryNameToDelete}?`}</span>
-                </Dialog.Body>
-                <Dialog.Footer
-                    textButtonApply="Delete"
-                    textButtonCancel="Cancel"
-                    onClickButtonCancel={onClickCancelDelete}
-                    onClickButtonApply={onConfirmDeleteClick}
-                />
-            </Dialog>
-        );
-    };
-    const renderSavedQueries = () => {
-        return (
-            <Popup
-                key={popupForceRender}
-                className={b('popup-wrapper')}
-                anchorRef={anchor}
-                open={isSavedQueriesVisible}
-                placement={['bottom-end']}
-                onClose={onCloseSavedQueries}
-            >
-                <div className={b()}>
-                    <div className={b('saved-queries-row', {header: true})}>
-                        <div className={b('query-name')}>Name</div>
-                        <div className={b('query-body', {header: true})}>
-                            <span>QueryText</span>
-                        </div>
-                    </div>
-                    <div>
-                        {_.sortBy(savedQueries, (query) => query.name.toLowerCase()).map(
-                            (query) => {
-                                return (
-                                    <div
-                                        className={b('saved-queries-row')}
-                                        onClick={onSavedQueryClick(query.body, query.name)}
-                                        key={query.name}
-                                    >
-                                        <div className={b('query-name')}>{query.name}</div>
-                                        <div className={b('query-body')}>
-                                            <TruncatedQuery
-                                                value={query.body}
-                                                maxQueryHeight={MAX_QUERY_HEIGHT}
-                                            />
-                                        </div>
-                                        <div className={b('query-controls')}>
-                                            <Icon
-                                                name="pencil"
-                                                viewBox="0 0 24 24"
-                                                height={14}
-                                                width={14}
-                                                className={b('control-button')}
-                                            />
-                                            <Icon
-                                                name="trash"
-                                                viewBox="0 0 24 24"
-                                                height={14}
-                                                width={14}
-                                                className={b('control-button')}
-                                                onClick={onDeleteQueryClick(query.name)}
-                                            />
-                                        </div>
-                                    </div>
-                                );
-                            },
-                        )}
-                    </div>
-                </div>
-            </Popup>
-        );
-    };
-
-    return (
-        <React.Fragment>
-            <Button ref={anchor} onClick={onShowSavedQueriesClick}>
-                Saved queries
-            </Button>
-            {isSavedQueriesVisible && renderSavedQueries()}
-            {isDeleteDialogVisible && queryNameToDelete && renderDialog()}
-        </React.Fragment>
-    );
-}
-
-export default SavedQueries;

package/dist/containers/Tenant/QueryEditor/SavedQueries/SavedQueries.scss

@@ -1,93 +0,0 @@
-$popup-width: 700px;
-
-.saved-queries {
-    $block: &;
-    padding: 12px 16px;
-    &__popup-wrapper {
-        overflow: hidden;
-
-        width: $popup-width;
-        max-width: $popup-width !important;
-
-        border-radius: 4px;
-        :nth-child(2) {
-            overflow-y: auto;
-
-            max-height: 50vh;
-        }
-
-        &::before {
-            width: $popup-width;
-
-            border-radius: 4px;
-        }
-    }
-    &__saved-queries-row {
-        display: flex;
-        align-items: center;
-
-        padding: 8px 5px;
-
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        &:hover {
-            cursor: pointer;
-
-            color: var(--yc-color-text-link-hover);
-            background: var(--yc-color-base-simple-hover);
-            #{$block}__query-controls {
-                display: flex;
-            }
-        }
-        &_header {
-            font-weight: 500;
-            &:hover {
-                cursor: auto;
-
-                color: var(--yc-color-text-primary);
-                background: var(--yc-color-base-background);
-            }
-        }
-    }
-    &__query-name {
-        overflow: hidden;
-        flex: 0 0 90px;
-
-        max-width: 90px;
-        margin-right: 8px;
-
-        font-weight: 500;
-        white-space: pre-wrap;
-        text-overflow: ellipsis;
-    }
-    &__query-body {
-        overflow: hidden;
-        flex-grow: 1;
-
-        max-width: 75%;
-
-        white-space: pre;
-        text-overflow: ellipsis;
-        &_header {
-            display: flex;
-            justify-content: center;
-        }
-    }
-    &__query-controls {
-        display: none;
-    }
-    &__control-button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        width: 24px;
-
-        color: var(--yc-color-text-hint);
-        &:hover {
-            color: var(--yc-color-text-secondary);
-        }
-    }
-    &__dialog-query-name {
-        font-weight: 500;
-    }
-}

package/dist/containers/Tenant/QueryEditor/i18n/en.json

@@ -1,3 +0,0 @@
-{
-  "controls.query-mode-selector_type": "Type:"
-}

package/dist/containers/Tenant/QueryEditor/i18n/ru.json

@@ -1,3 +0,0 @@
-{
-  "controls.query-mode-selector_type": "Тип:"
-}

package/dist/store/reducers/header.ts

@@ -1,26 +0,0 @@
-import {Reducer} from 'redux';
-
-const SET_HEADER = 'SET_HEADER';
-
-type IHeaderAction = ReturnType<typeof setHeader>;
-export type HeaderItemType = {text: string; link?: string};
-
-const initialState: HeaderItemType[] = [];
-
-const header: Reducer<HeaderItemType[], IHeaderAction> = function (state = initialState, action) {
-    switch (action.type) {
-        case SET_HEADER:
-            return action.data;
-        default:
-            return state;
-    }
-};
-
-export function setHeader(headerItems: HeaderItemType[]) {
-    return {
-        type: SET_HEADER,
-        data: headerItems,
-    } as const;
-}
-
-export default header;