ydb-embedded-ui 0.1.0 → 0.2.0

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

@@ -1,11 +1,15 @@
 @import '../../../styles/mixins.scss';
 
 .query-editor {
+    position: relative;
+
     display: flex;
-    flex-direction: column;
     flex: 1 1 auto;
-    height: 100%;
-    position: relative;
+    flex-direction: column;
+
+    height: calc(100% - 56px);
+
+    @include query-data-table;
 
     & .yc-button__text {
         display: flex;
@@ -14,44 +18,69 @@
     }
 
     &__monaco {
+        position: relative;
+
         display: flex;
+
         width: 100%;
         height: 100%;
-        position: relative;
+        padding-top: 9px;
     }
 
     &__monaco-wrapper {
         width: 100%;
-        height: 100%;
+        height: calc(100% - 49px);
         min-height: 0;
     }
 
     &__pane-wrapper {
+        z-index: 2;
+
         display: flex;
         flex-direction: column;
-        height: 100%;
-        width: 100%;
+
+        background-color: var(--yc-color-base-background);
+    }
+
+    &__upper-controls {
+        position: absolute;
+        top: -38px;
+        right: 16px;
+
+        display: flex;
+        gap: 12px;
+
+        justify-content: flex-end;
+        align-items: center;
     }
 
     &__controls {
         display: flex;
+        flex: 0 0 40px;
         align-items: flex-end;
-        padding: 10px 0;
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        min-height: 28px;
 
-        & > * {
-            margin-right: 16px;
-        }
+        min-height: 40px;
+        padding: 5px 20px;
+
+        border-top: 1px solid var(--yc-color-line-generic);
+        border-bottom: 1px solid var(--yc-color-line-generic);
+        background-color: var(--yc-color-base-background);
+        gap: 12px;
     }
 
     &__control-run {
         display: flex;
         align-items: center;
-    }
+        .yc-select__option-text {
+            display: none;
+        }
 
-    &__run-switcher {
-        margin-left: 1px;
+        .yc-button__text {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+        }
     }
 
     &__history-controls {
@@ -61,9 +90,9 @@
 
     &__history-label {
         margin-right: 8px;
-    }
 
-    @include query-data-table;
+        color: var(--yc-color-text-secondary);
+    }
 
     &__cell {
         @include cell-container;

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

@@ -1,11 +1,9 @@
 import React, {useEffect, useState, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import MonacoEditor from 'react-monaco-editor';
-import {Loader, Tabs} from '@yandex-cloud/uikit';
+import {Loader, RadioButton} from '@yandex-cloud/uikit';
 import JSONTree from 'react-json-inspector';
 import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
-
-import './QueryExplain.scss';
 import {
     TopologyWrapper,
     CompactTopologyWrapper,
@@ -14,6 +12,16 @@ import {
 } from '@yandex-cloud/paranoid';
 import {renderExplainNode} from '../../../../utils';
 import {explainVersions} from '../../../../store/reducers/explainQuery';
+import QueryExecutionStatus from '../../../../components/QueryExecutionStatus/QueryExecutionStatus';
+import Divider from '../../../../components/Divider/Divider';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+
+import 'react-json-inspector/json-inspector.css';
+import './QueryExplain.scss';
+import {useDispatch, useSelector} from 'react-redux';
+import { disableFullscreen } from '../../../../store/reducers/fullscreen';
 
 const b = cn('kv-query-explain');
 
@@ -41,20 +49,29 @@ const EDITOR_OPTIONS = {
     wrappingIndent: 'indent',
 };
 
-const TabsIds = {
+const ExplainOptionIds = {
     schema: 'schema',
     json: 'json',
     ast: 'ast',
 };
 
-const tabsItems = [
-    {id: TabsIds.schema, title: 'Schema'},
-    {id: TabsIds.json, title: 'JSON'},
-    {id: TabsIds.ast, title: 'AST'},
+const explainOptions = [
+    {value: ExplainOptionIds.schema, content: 'Schema'},
+    {value: ExplainOptionIds.json, content: 'JSON'},
+    {value: ExplainOptionIds.ast, content: 'AST'},
 ];
 
 function QueryExplain(props) {
-    const [activeTab, setActiveTab] = useState(TabsIds.schema);
+    const dispatch = useDispatch()
+    const [activeOption, setActiveOption] = useState(ExplainOptionIds.schema);
+
+    const isFullscreen = useSelector((state) => state.fullscreen);
+
+    useEffect(() => {
+        return () => {
+            dispatch(disableFullscreen());
+        };
+    }, []);
 
     const {explain = {}, theme} = props;
     const {links, nodes, version, graphDepth} = explain;
@@ -95,17 +112,36 @@ function QueryExplain(props) {
     }, [links, nodes, theme, version]);
 
     useEffect(() => {
-        if (!props.ast && activeTab === TabsIds.ast) {
+        if (!props.ast && activeOption === ExplainOptionIds.ast) {
             props.astQuery();
         }
-    }, [activeTab]);
+    }, [activeOption]);
 
-    const onSelectTab = (tabId) => {
-        setActiveTab(tabId);
+    const onSelectOption = (tabId) => {
+        setActiveOption(tabId);
     };
 
-    const renderTextExplain = () => {
+    const renderLoader = () => {
         return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    };
+
+    const renderStub = () => {
+        const {explain} = props;
+        if (!explain) {
+            return 'Explain of query is empty';
+        }
+        if (!explain.nodes.length) {
+            return 'There is no explanation for the request';
+        }
+        return null;
+    };
+
+    const renderTextExplain = () => {
+        const content = (
             <JSONTree
                 data={props.explain?.pristine}
                 isExpanded={() => true}
@@ -115,14 +151,24 @@ function QueryExplain(props) {
                 }}
             />
         );
+        return (
+            <React.Fragment>
+                {content}
+                {renderStub()}
+                {isFullscreen && (
+                    <Fullscreen>
+                        <div className={b('inspector', {fullscreen: true})}>{content}</div>
+                    </Fullscreen>
+                )}
+            </React.Fragment>
+        );
     };
 
     const renderAstExplain = () => {
-        return props.loadingAst ? (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        ) : (
+        if (!props.ast) {
+            return 'There is no AST explanation for the request';
+        }
+        const content = (
             <div className={b('ast')}>
                 <MonacoEditor
                     language={LANGUAGE_S_EXPRESSION_ID}
@@ -132,35 +178,89 @@ function QueryExplain(props) {
                 />
             </div>
         );
+        return (
+            <React.Fragment>
+                {content}
+                {isFullscreen && <Fullscreen>{content}</Fullscreen>}
+            </React.Fragment>
+        );
     };
 
     const renderGraph = () => {
         const graphHeight = `${Math.max(graphDepth * 100, 200)}px`;
-        return (
+        const content = (
             <div
                 className={b('explain-canvas-container', {
-                    hidden: activeTab !== TabsIds.schema,
+                    hidden: activeOption !== ExplainOptionIds.schema,
                 })}
-                style={{height: graphHeight, minHeight: graphHeight}}
+                style={{height: graphHeight, minHeight: graphHeight, width: '100%'}}
             >
                 {graph}
             </div>
         );
+        return (
+            <React.Fragment>
+                {content}
+                {isFullscreen && <Fullscreen>{content}</Fullscreen>}
+                {renderStub()}
+            </React.Fragment>
+        );
+    };
+
+    const renderContent = () => {
+        const {error, loading, loadingAst} = props;
+        if (loading || loadingAst) {
+            return renderLoader();
+        }
+
+        if (error) {
+            return error.data ? error.data : error;
+        }
+
+        switch (activeOption) {
+            case ExplainOptionIds.json: {
+                return renderTextExplain();
+            }
+            case ExplainOptionIds.ast: {
+                return renderAstExplain();
+            }
+            case ExplainOptionIds.schema: {
+                return renderGraph();
+            }
+            default:
+                return null;
+        }
     };
 
     return (
         <React.Fragment>
-            <div className={b('tabs-wrapper')}>
-                <Tabs
-                    items={tabsItems}
-                    onSelectTab={onSelectTab}
-                    activeTab={activeTab}
-                    className={b('tabs')}
-                />
+            <div className={b('controls')}>
+                <div className={b('controls-right')}>
+                    <QueryExecutionStatus hasError={Boolean(props.error)} />
+                    {!props.error && (
+                        <React.Fragment>
+                            <Divider />
+                            <RadioButton
+                                options={explainOptions}
+                                value={activeOption}
+                                onUpdate={onSelectOption}
+                            />
+                        </React.Fragment>
+                    )}
+                </div>
+                <div className={b('controls-left')}>
+                    <EnableFullscreenButton
+                        disabled={Boolean(props.error) || activeOption === ExplainOptionIds.schema}
+                    />
+                    <PaneVisibilityToggleButtons
+                        onCollapse={props.onCollapseResults}
+                        onExpand={props.onExpandResults}
+                        isCollapsed={props.isResultsCollapsed}
+                        initialDirection="bottom"
+                    />
+                </div>
             </div>
-            {activeTab === TabsIds.json && renderTextExplain()}
-            {activeTab === TabsIds.ast && renderAstExplain()}
-            {activeTab === TabsIds.schema && renderGraph()}
+            <div className={b('result')}>{renderContent()}</div>
         </React.Fragment>
     );
 }

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

@@ -1,42 +1,78 @@
 @import '../../../../styles/mixins.scss';
 
 .kv-query-explain {
-    &__tabs {
-        background-color: var(--yc-color-base-background);
+    &__result {
+        display: flex;
+        overflow: auto;
+        flex-grow: 1;
+        flex-direction: column;
+
+        margin-top: 20px;
+        padding: 0px 8px;
     }
-    &__tabs-wrapper {
+    &__controls {
         position: sticky;
+        z-index: 2;
         top: 0;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: 12px 20px;
+
+        border-bottom: 1px solid var(--yc-color-line-generic);
         background-color: var(--yc-color-base-background);
-        padding-bottom: 20px;
-        z-index: 2;
+    }
+    &__controls-right {
+        display: flex;
+        gap: 12px;
+
+        height: 100%;
+    }
+    &__controls-left {
+        display: flex;
+        gap: 4px;
+        .yc-button__text {
+            margin: 0 6px;
+        }
     }
     &__explain-canvas-container {
-        margin-bottom: 20px;
         overflow-y: auto;
+
+        margin-bottom: 20px;
         &_hidden {
             display: none;
         }
     }
     &__inspector {
-        @include json-tree-styles();
         overflow-y: auto;
+
+        width: 100%;
+        @include json-tree-styles();
         &
             .json-inspector__leaf.json-inspector__leaf_root.json-inspector__leaf_expanded.json-inspector__leaf_composite {
             max-width: calc(100% - 50px);
         }
+
+        &_fullscreen {
+            padding: 10px;
+        }
     }
 
     &__ast {
+        width: 100%;
+        height: 100%;
         margin: 20px 0;
+
         white-space: pre-wrap;
-        height: 100%;
     }
     &__loader {
-        width: 100%;
-        margin-top: 20px;
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
+
+        width: 100%;
+        margin-top: 20px;
     }
 }

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

@@ -1,31 +1,61 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
-import {Tabs} from '@yandex-cloud/uikit';
+import {RadioButton} from '@yandex-cloud/uikit';
 import JSONTree from 'react-json-inspector';
 
+import CopyToClipboard from '../../../../components/CopyToClipboard/CopyToClipboard';
+import Divider from '../../../../components/Divider/Divider';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import {disableFullscreen} from '../../../../store/reducers/fullscreen';
+
 import './QueryResult.scss';
+import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
+import QueryExecutionStatus from '../../../../components/QueryExecutionStatus/QueryExecutionStatus';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 
 const b = cn('kv-query-result');
 
-const TabsIds = {
+const resultOptionsIds = {
     result: 'result',
     stats: 'stats',
 };
 
-const tabsItems = [
-    {id: TabsIds.result, title: 'Result'},
-    {id: TabsIds.stats, title: 'Stats'},
+const resultOptions = [
+    {value: resultOptionsIds.result, content: 'Result'},
+    {value: resultOptionsIds.stats, content: 'Stats'},
 ];
 
 function QueryResult(props) {
-    const [activeTab, setActiveTab] = useState(TabsIds.result);
+    const [activeSection, setActiveSection] = useState(resultOptionsIds.result);
+    const isFullscreen = useSelector((state) => state.fullscreen);
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        return () => {
+            dispatch(disableFullscreen());
+        };
+    }, []);
 
-    const onSelectTab = (tabId) => {
-        setActiveTab(tabId);
+    const onSelectSection = (value) => {
+        setActiveSection(value);
     };
 
-    const renderStats = () => {
+    const renderClipboardButton = () => {
+        const {textResults, copyDisabled} = props;
+
         return (
+            <CopyToClipboard
+                text={textResults}
+                title="Copy results"
+                toastText="Results were copied to clipboard successfully"
+                disabled={copyDisabled}
+            />
+        );
+    };
+
+    const renderStats = () => {
+        const content = (
             <JSONTree
                 data={props.stats}
                 isExpanded={() => true}
@@ -35,21 +65,60 @@ function QueryResult(props) {
                 }}
             />
         );
+        return (
+            <React.Fragment>
+                {content}
+                {isFullscreen && (
+                    <Fullscreen>
+                        <div className={b('inspector', {fullscreen: true})}>{content}</div>
+                    </Fullscreen>
+                )}
+            </React.Fragment>
+        );
+    };
+
+    const renderResult = () => {
+        const {result} = props;
+
+        return (
+            <React.Fragment>
+                {result}
+                {isFullscreen && <Fullscreen><div className={b('result', {fullscreen: true})}>{result}</div></Fullscreen>}
+            </React.Fragment>
+        );
     };
 
     return (
         <React.Fragment>
-            {props.stats && (
-                <Tabs
-                    items={tabsItems}
-                    onSelectTab={onSelectTab}
-                    activeTab={activeTab}
-                    className={b('tabs')}
-                />
-            )}
+            <div className={b('controls')}>
+                <div className={b('controls-right')}>
+                    <QueryExecutionStatus hasError={Boolean(props.error)} />
+
+                    {props.stats && !props.error && (
+                        <React.Fragment>
+                            <Divider />
+                            <RadioButton
+                                options={resultOptions}
+                                value={activeSection}
+                                onUpdate={onSelectSection}
+                            />
+                        </React.Fragment>
+                    )}
+                </div>
+                <div className={b('controls-left')}>
+                    {renderClipboardButton()}
+                    <EnableFullscreenButton disabled={Boolean(props.error)}/>
+                    <PaneVisibilityToggleButtons
+                        onCollapse={props.onCollapseResults}
+                        onExpand={props.onExpandResults}
+                        isCollapsed={props.isResultsCollapsed}
+                        initialDirection="bottom"
+                    />
+                </div>
+            </div>
             <div className={b('result')}>
-                {activeTab === TabsIds.result && props.result}
-                {activeTab === TabsIds.stats && renderStats()}
+                {activeSection === resultOptionsIds.result && renderResult()}
+                {activeSection === resultOptionsIds.stats && renderStats()}
             </div>
         </React.Fragment>
     );

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

@@ -2,23 +2,77 @@
 
 .kv-query-result {
     &__result {
-        overflow: auto;
-        margin-top: 20px;
         display: flex;
-        flex-direction: column;
+        overflow: auto;
         flex-grow: 1;
+        flex-direction: column;
+
+        margin-top: 20px;
+        padding: 0px 8px;
+        @include query-data-table();
         & .data-table__table-wrapper {
             padding-bottom: 0;
         }
+        &_fullscreen {
+            width: 100%;
+            padding: 10px;
+        }
     }
-    &__tabs {
+
+    &__controls {
         position: sticky;
+        z-index: 2;
         top: 0;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: 12px 20px;
+
+        border-bottom: 1px solid var(--yc-color-line-generic);
         background-color: var(--yc-color-base-background);
-        z-index: 2;
+    }
+
+    &__controls-right {
+        display: flex;
+        gap: 12px;
+
+        height: 100%;
+    }
+    &__controls-left {
+        display: flex;
+        gap: 4px;
+        .yc-button__text {
+            margin: 0 6px;
+        }
     }
     &__inspector {
-        @include json-tree-styles();
         max-width: calc(100% - 50px);
+        @include json-tree-styles();
+        &_fullscreen {
+            overflow: auto;
+
+            width: 100%;
+            height: 100%;
+            padding: 10px;
+        }
+    }
+
+    &__fullscreen-table-wrapper {
+        overflow: auto;
+
+        width: 100%;
+        height: 100%;
+        margin: 20px;
+
+        background-color: var(--yc-color-base-background);
+        @include table-styles();
+        table {
+            width: 100% !important;
+        }
+        .data-table__table-wrapper {
+            padding: 0 !important;
+        }
     }
 }