ydb-embedded-ui 0.1.0 → 0.2.0

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,94 @@
+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 = () => {
+        return (
+            <Popup
+                className={b('popup-wrapper')}
+                anchorRef={anchor}
+                open={isHistoryVisible}
+                placement={['bottom-end']}
+                onClose={onCloseHistory}
+            >
+                <div className={b()}>
+                    {history.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>
+                                {history?.reverse().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;