Skip to content
This repository has been archived by the owner on Aug 2, 2022. It is now read-only.

[UI] Separate SQL and PPL pages #761

Merged
merged 5 commits into from
Sep 30, 2020
Merged

[UI] Separate SQL and PPL pages #761

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3fe9c4a
seperated sql and ppl pages
chloe-zh Sep 29, 2020
9fd15be
Merge remote-tracking branch 'upstream/develop' into seperate-pages
chloe-zh Sep 29, 2020
1e63784
update lockfile
chloe-zh Sep 29, 2020
77dd7e1
added modal when download ppl json/csv/raw formats
chloe-zh Sep 29, 2020
3cee65c
addressed comments
chloe-zh Sep 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 7 additions & 9 deletions workbench/public/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,25 +21,21 @@
}

.sql-console-query-editor {
height: 430px;
max-height: 430px;
height: 280px;
max-height: 280px;
.container-panel {
border-radius: 0px;
box-shadow: none;
}
.sql-query-panel {
border-radius: 0px;
border-width: 1px;
border-right-width: 0.5px;
box-shadow: none;
}
.sql-query-panel-header {
padding: $euiSizeS;
background-color: $euiColorLightestShade;
}
.action-container {
padding: $euiSizeM;
}
.resize-panel {
resize: vertical;
overflow: auto;
Expand All @@ -48,10 +44,12 @@
.sql-editor-link:visited {
background-color: rgb(255,255,255);
}
.sql-editor-button {
margin:10px;
}
}

.action-container {
padding: $euiSizeL;
}

.sql-console-query-result{
height: 577px;
scroll-behavior: smooth;
Expand Down
96 changes: 42 additions & 54 deletions workbench/public/components/Main/__snapshots__/main.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,17 +114,15 @@ exports[`<Main /> spec click clear button 1`] = `
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="sql-console-query-editor"
>
<div>
<div
class="euiPanel sql-console-query-editor container-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
class="sql-console-query-editor"
>
<div
class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiText euiText--medium sql-query-panel-header"
Expand All @@ -134,7 +132,7 @@ exports[`<Main /> spec click clear button 1`] = `
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 18.5rem;"
style="width: 100%; height: 15rem;"
>
<div
class="euiCodeEditorKeyboardHint"
Expand All @@ -157,7 +155,7 @@ exports[`<Main /> spec click clear button 1`] = `
<div
class=" ace_editor ace-sql-console"
id="some_html_id"
style="width: 100%; height: 18.5rem; font-size: 12px;"
style="width: 100%; height: 15rem; font-size: 12px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -300,7 +298,7 @@ exports[`<Main /> spec click clear button 1`] = `
<span
class="euiButton__text"
>
JSON Translation
Explain
</span>
</span>
</button>
Expand Down Expand Up @@ -589,17 +587,15 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="sql-console-query-editor"
>
<div>
<div
class="euiPanel sql-console-query-editor container-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
class="sql-console-query-editor"
>
<div
class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiText euiText--medium sql-query-panel-header"
Expand All @@ -609,7 +605,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 18.5rem;"
style="width: 100%; height: 15rem;"
>
<div
class="euiCodeEditorKeyboardHint"
Expand All @@ -632,7 +628,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
<div
class=" ace_editor ace-sql-console"
id="some_html_id"
style="width: 100%; height: 18.5rem; font-size: 12px;"
style="width: 100%; height: 15rem; font-size: 12px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -775,7 +771,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
<span
class="euiButton__text"
>
JSON Translation
Explain
</span>
</span>
</button>
Expand Down Expand Up @@ -1064,17 +1060,15 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="sql-console-query-editor"
>
<div>
<div
class="euiPanel sql-console-query-editor container-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
class="sql-console-query-editor"
>
<div
class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiText euiText--medium sql-query-panel-header"
Expand All @@ -1084,7 +1078,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 18.5rem;"
style="width: 100%; height: 15rem;"
>
<div
class="euiCodeEditorKeyboardHint"
Expand All @@ -1107,7 +1101,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
<div
class=" ace_editor ace-sql-console"
id="some_html_id"
style="width: 100%; height: 18.5rem; font-size: 12px;"
style="width: 100%; height: 15rem; font-size: 12px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -1250,7 +1244,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
<span
class="euiButton__text"
>
JSON Translation
Explain
</span>
</span>
</button>
Expand Down Expand Up @@ -1539,17 +1533,15 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="sql-console-query-editor"
>
<div>
<div
class="euiPanel sql-console-query-editor container-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
class="sql-console-query-editor"
>
<div
class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiText euiText--medium sql-query-panel-header"
Expand All @@ -1559,7 +1551,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 18.5rem;"
style="width: 100%; height: 15rem;"
>
<div
class="euiCodeEditorKeyboardHint"
Expand All @@ -1582,7 +1574,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
<div
class=" ace_editor ace-sql-console"
id="some_html_id"
style="width: 100%; height: 18.5rem; font-size: 12px;"
style="width: 100%; height: 15rem; font-size: 12px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -1725,7 +1717,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
<span
class="euiButton__text"
>
JSON Translation
Explain
</span>
</span>
</button>
Expand Down Expand Up @@ -2017,17 +2009,15 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="sql-console-query-editor"
>
<div>
<div
class="euiPanel sql-console-query-editor container-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
class="sql-console-query-editor"
>
<div
class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiText euiText--medium sql-query-panel-header"
Expand All @@ -2037,7 +2027,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 18.5rem;"
style="width: 100%; height: 15rem;"
>
<div
class="euiCodeEditorKeyboardHint"
Expand All @@ -2060,7 +2050,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
<div
class=" ace_editor ace-sql-console"
id="some_html_id"
style="width: 100%; height: 18.5rem; font-size: 12px;"
style="width: 100%; height: 15rem; font-size: 12px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -2203,7 +2193,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
<span
class="euiButton__text"
>
JSON Translation
Explain
</span>
</span>
</button>
Expand Down Expand Up @@ -2492,17 +2482,15 @@ exports[`<Main /> spec renders the component 1`] = `
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="sql-console-query-editor"
>
<div>
<div
class="euiPanel sql-console-query-editor container-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
class="sql-console-query-editor"
>
<div
class="euiFlexItem euiFlexItem--flexGrow1 sql-query-panel"
class="euiPanel sql-query-editor container-panel"
>
<div
class="euiText euiText--medium sql-query-panel-header"
Expand All @@ -2512,7 +2500,7 @@ exports[`<Main /> spec renders the component 1`] = `
<div
class="euiCodeEditorWrapper"
data-test-subj="codeEditorContainer"
style="width: 100%; height: 18.5rem;"
style="width: 100%; height: 15rem;"
>
<div
class="euiCodeEditorKeyboardHint"
Expand All @@ -2535,7 +2523,7 @@ exports[`<Main /> spec renders the component 1`] = `
<div
class=" ace_editor ace-sql-console"
id="some_html_id"
style="width: 100%; height: 18.5rem; font-size: 12px;"
style="width: 100%; height: 15rem; font-size: 12px;"
>
<textarea
aria-label="Code Editor"
Expand Down Expand Up @@ -2678,7 +2666,7 @@ exports[`<Main /> spec renders the component 1`] = `
<span
class="euiButton__text"
>
JSON Translation
Explain
</span>
</span>
</button>
Expand Down
2 changes: 1 addition & 1 deletion workbench/public/components/Main/main.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ describe("<Main /> spec", () => {
const { getByText } = render(
<Main httpClient={client} sqlQueriesString={'test'} />
);
const onTranslateButton = getByText('JSON Translation');
const onTranslateButton = getByText('Explain');
const asyncTest = () => {
fireEvent.click(onTranslateButton);
};
Expand Down
Loading