ydb-embedded-ui 0.1.0 → 1.0.1

package/dist/containers/Tenant/Preview/Preview.js

@@ -4,21 +4,26 @@ import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 
 import DataTable from '@yandex-cloud/react-data-table';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader, Button} from '@yandex-cloud/uikit';
+
+import Icon from '../../../components/Icon/Icon';
+import Fullscreen from '../../../components/Fullscreen/Fullscreen';
 
 import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
 import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
 import {prepareQueryResponse} from '../../../utils/index';
 
-import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Schema/SchemaMain/SchemaMain';
-import {AutoFetcher} from '../../Cluster/Cluster';
+import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
+import {AutoFetcher} from '../../../utils/autofetcher';
+import EnableFullscreenButton from '../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+import {setShowPreview} from '../../../store/reducers/schema';
 
 import './Preview.scss';
 
 const TABLE_SETTINGS = {
-    displayIndices: false,
-    syncHeadOnResize: true,
-    stickyHead: DataTable.MOVING,
+    ...DEFAULT_TABLE_SETTINGS,
+    stripedRows: true,
 };
 
 const b = cn('kv-preview');
@@ -90,6 +95,31 @@ class Preview extends React.Component {
         });
     };
 
+    onClosePreview = () => {
+        this.props.setShowPreview(false);
+    };
+
+    renderHeader = () => {
+        const {currentSchemaPath, error} = this.props;
+        return (
+            <div className={b('header')}>
+                <div className={b('title')}>
+                    Preview <div className={b('table-name')}>{currentSchemaPath}</div>
+                </div>
+                <div className={b('controls-left')}>
+                    <EnableFullscreenButton disabled={Boolean(error)} />
+                    <Button
+                        view="flat-secondary"
+                        onClick={this.onClosePreview}
+                        title="Close preview"
+                    >
+                        <Icon name="close" viewBox={'0 0 16 16'} width={16} height={16} />
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
     renderTable = () => {
         const {data, showTooltip} = this.props;
 
@@ -116,10 +146,12 @@ class Preview extends React.Component {
     };
 
     render() {
-        const {error, loading, data = [], type, wasLoaded} = this.props;
+        const {error, loading, data = [], type, wasLoaded, isFullscreen} = this.props;
+
+        let message;
 
         if (type !== TABLE_TYPE && type !== OLAP_TABLE_TYPE) {
-            return <div className={b('message-container')}>Not available</div>;
+            message = <div className={b('message-container')}>Not available</div>;
         }
 
         if (loading && !wasLoaded) {
@@ -131,16 +163,19 @@ class Preview extends React.Component {
         }
 
         if (error) {
-            return <div className={b('message-container')}>{error.data || error}</div>;
+            message = <div className={b('message-container')}>{error.data || error}</div>;
         }
 
         if (!loading && data.length === 0) {
-            return <div className={b('message-container')}>Table is empty</div>;
+            message = <div className={b('message-container')}>Table is empty</div>;
         }
 
+        const content = message ?? <div className={b('result')}>{this.renderTable()}</div>;
+
         return (
             <div className={b()}>
-                <div className={b('result')}>{this.renderTable()}</div>
+                {this.renderHeader()}
+                {isFullscreen ? <Fullscreen>{content}</Fullscreen> : content}
             </div>
         );
     }
@@ -148,7 +183,7 @@ class Preview extends React.Component {
 
 const mapStateToProps = (state) => {
     const {data = [], loading, error, wasLoaded} = state.preview;
-    const {autorefresh} = state.schema;
+    const {autorefresh, currentSchemaPath} = state.schema;
 
     return {
         data,
@@ -156,6 +191,8 @@ const mapStateToProps = (state) => {
         error,
         autorefresh,
         wasLoaded,
+        currentSchemaPath,
+        isFullscreen: state.fullscreen,
     };
 };
 
@@ -164,6 +201,7 @@ const mapDispatchToProps = {
     showTooltip,
     hideTooltip,
     setQueryOptions,
+    setShowPreview,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Preview);

package/dist/containers/Tenant/Preview/Preview.scss

@@ -1,20 +1,62 @@
 @import '../../../styles/mixins.scss';
 
 .kv-preview {
+    height: 100%;
+    @include query-data-table;
+
+    .yc-button__text {
+        margin: 0 6px;
+    }
+
+    &__header {
+        position: sticky;
+        top: 0;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        height: 40px;
+        padding: 0 19px;
+
+        border-bottom: 1px solid var(--yc-color-line-generic);
+        background-color: var(--yc-color-base-background);
+    }
+
+    &__title {
+        display: flex;
+    }
+
+    &__table-name {
+        margin-left: 4px;
+
+        color: var(--yc-color-text-complementary);
+    }
+
+    &__controls-left {
+        display: flex;
+        gap: 5px;
+    }
     &__message-container {
-        padding: 15px 0;
+        padding: 15px 19px;
     }
 
     &__loader-container {
         display: flex;
         justify-content: center;
         align-items: center;
+
         height: 100%;
     }
 
-    @include query-data-table;
-
     &__cell {
         @include cell-container;
     }
+
+    &__result {
+        overflow: auto;
+
+        height: calc(100% - 40px);
+        padding: 0 19px;
+    }
 }

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

@@ -0,0 +1,85 @@
+$popup-width: 700px;
+
+.kv-queries-history {
+    $block: &;
+    padding: 12px 16px;
+
+    &__empty {
+        font-weight: 600;
+        text-align: center;
+    }
+    &__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: 600;
+            &:hover {
+                cursor: auto;
+
+                color: var(--yc-color-text-primary);
+                background: var(--yc-color-base-background);
+            }
+        }
+    }
+    &__query-body {
+        overflow: hidden;
+        flex-grow: 1;
+
+        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/QueriesHistory/QueriesHistory.tsx

@@ -0,0 +1,95 @@
+import React, {useRef, useState} from 'react';
+import cn from 'bem-cn-lite';
+import _ from 'lodash';
+import {Button, Popup} from '@yandex-cloud/uikit';
+import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {useSelector} from 'react-redux';
+
+import './QueriesHistory.scss';
+
+const b = cn('kv-queries-history');
+
+const MAX_QUERY_HEIGHT = 3;
+
+interface QueriesHistoryProps {
+    changeUserInput: (value: {input: string}) => void;
+}
+
+function QueriesHistory(props: QueriesHistoryProps) {
+    const [isHistoryVisible, setIsHistoryVisible] = useState(false);
+    const history: string[] =
+        useSelector((state: any) => state.executeQuery.history?.queries) ?? [];
+    const anchor = useRef(null);
+
+    const onShowHistoryClick = () => {
+        setIsHistoryVisible(true);
+    };
+
+    const onCloseHistory = () => {
+        setIsHistoryVisible(false);
+    };
+
+    const onQueryClick = (queryText: string) => {
+        const {changeUserInput} = props;
+        return () => {
+            changeUserInput({input: queryText});
+            onCloseHistory();
+        };
+    };
+
+    const renderSavedQueries = () => {
+        const reversedHistory = ([] as string[]).concat(history).reverse();
+        return (
+            <Popup
+                className={b('popup-wrapper')}
+                anchorRef={anchor}
+                open={isHistoryVisible}
+                placement={['bottom-end']}
+                onClose={onCloseHistory}
+            >
+                <div className={b()}>
+                    {reversedHistory.length === 0 ? (
+                        <div className={b('empty')}>History is empty</div>
+                    ) : (
+                        <React.Fragment>
+                            <div className={b('saved-queries-row', {header: true})}>
+                                <div className={b('query-body', {header: true})}>
+                                    <span>QueryText</span>
+                                </div>
+                            </div>
+                            <div>
+                                {reversedHistory.map((query, index) => {
+                                    return (
+                                        <div
+                                            className={b('saved-queries-row')}
+                                            onClick={onQueryClick(query)}
+                                            key={index}
+                                        >
+                                            <div className={b('query-body')}>
+                                                <TruncatedQuery
+                                                    value={query}
+                                                    maxQueryHeight={MAX_QUERY_HEIGHT}
+                                                />
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </React.Fragment>
+                    )}
+                </div>
+            </Popup>
+        );
+    };
+
+    return (
+        <React.Fragment>
+            <Button ref={anchor} onClick={onShowHistoryClick}>
+                Query history
+            </Button>
+            {isHistoryVisible && renderSavedQueries()}
+        </React.Fragment>
+    );
+}
+
+export default QueriesHistory;