Web console: switch to switches instead of checkboxes (#10454)
* switch to switches
* add img alt
* add relative
* change icons
* update snapshot
diff --git a/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap b/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap
index 24b2770..96312ff 100644
--- a/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap
+++ b/web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap
@@ -1,18 +1,71 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`menu checkbox matches snapshot 1`] = `
+exports[`MenuCheckbox matches snapshot checked 1`] = `
<li
- class="menu-checkbox"
+ class=""
>
- <label
- class="bp3-control bp3-checkbox"
+ <a
+ class="bp3-menu-item menu-checkbox"
>
- <input
- type="checkbox"
- />
<span
- class="bp3-control-indicator"
- />
- </label>
+ class="bp3-icon bp3-icon-tick-circle"
+ icon="tick-circle"
+ >
+ <svg
+ data-icon="tick-circle"
+ height="16"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <desc>
+ tick-circle
+ </desc>
+ <path
+ d="M8 16c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm4-11c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ <div
+ class="bp3-text-overflow-ellipsis bp3-fill"
+ >
+ hello
+ </div>
+ </a>
+</li>
+`;
+
+exports[`MenuCheckbox matches snapshot unchecked 1`] = `
+<li
+ class=""
+>
+ <a
+ class="bp3-menu-item menu-checkbox"
+ >
+ <span
+ class="bp3-icon bp3-icon-circle"
+ icon="circle"
+ >
+ <svg
+ data-icon="circle"
+ height="16"
+ viewBox="0 0 16 16"
+ width="16"
+ >
+ <desc>
+ circle
+ </desc>
+ <path
+ d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
+ fill-rule="evenodd"
+ />
+ </svg>
+ </span>
+ <div
+ class="bp3-text-overflow-ellipsis bp3-fill"
+ >
+ hello
+ </div>
+ </a>
</li>
`;
diff --git a/web-console/src/components/menu-checkbox/menu-checkbox.scss b/web-console/src/components/menu-checkbox/menu-checkbox.scss
deleted file mode 100644
index 8d4963a..0000000
--- a/web-console/src/components/menu-checkbox/menu-checkbox.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.menu-checkbox {
- height: 30px;
- padding: 7px 4px;
-
- label {
- margin: 0;
- }
-}
diff --git a/web-console/src/components/menu-checkbox/menu-checkbox.spec.tsx b/web-console/src/components/menu-checkbox/menu-checkbox.spec.tsx
index ef938a8..5e64aba 100644
--- a/web-console/src/components/menu-checkbox/menu-checkbox.spec.tsx
+++ b/web-console/src/components/menu-checkbox/menu-checkbox.spec.tsx
@@ -21,9 +21,15 @@
import { MenuCheckbox } from './menu-checkbox';
-describe('menu checkbox', () => {
- it('matches snapshot', () => {
- const menuCheckbox = <MenuCheckbox />;
+describe('MenuCheckbox', () => {
+ it('matches snapshot checked', () => {
+ const menuCheckbox = <MenuCheckbox text="hello" checked onChange={() => {}} />;
+ const { container } = render(menuCheckbox);
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ it('matches snapshot unchecked', () => {
+ const menuCheckbox = <MenuCheckbox text="hello" checked={false} onChange={() => {}} />;
const { container } = render(menuCheckbox);
expect(container.firstChild).toMatchSnapshot();
});
diff --git a/web-console/src/components/menu-checkbox/menu-checkbox.tsx b/web-console/src/components/menu-checkbox/menu-checkbox.tsx
index e79db83..10cdad1 100644
--- a/web-console/src/components/menu-checkbox/menu-checkbox.tsx
+++ b/web-console/src/components/menu-checkbox/menu-checkbox.tsx
@@ -16,15 +16,26 @@
* limitations under the License.
*/
-import { Checkbox, ICheckboxProps } from '@blueprintjs/core';
+import { MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
import React from 'react';
-import './menu-checkbox.scss';
+export interface MenuCheckboxProps {
+ text: string;
+ checked: boolean;
+ onChange: () => void;
+}
-export function MenuCheckbox(props: ICheckboxProps) {
+export function MenuCheckbox(props: MenuCheckboxProps) {
+ const { text, checked, onChange } = props;
+
return (
- <li className="menu-checkbox">
- <Checkbox {...props} />
- </li>
+ <MenuItem
+ className="menu-checkbox"
+ icon={checked ? IconNames.TICK_CIRCLE : IconNames.CIRCLE}
+ text={text}
+ onClick={onChange}
+ shouldDismissPopover={false}
+ />
);
}
diff --git a/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap b/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap
index 1dfe370..233b9e8 100644
--- a/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap
+++ b/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap
@@ -8,7 +8,7 @@
class="top-actions"
>
<label
- class="bp3-control bp3-checkbox"
+ class="bp3-control bp3-switch tail-log"
>
<input
checked=""
diff --git a/web-console/src/components/show-log/show-log.scss b/web-console/src/components/show-log/show-log.scss
index 6dfb87b..18e7bac 100644
--- a/web-console/src/components/show-log/show-log.scss
+++ b/web-console/src/components/show-log/show-log.scss
@@ -21,15 +21,23 @@
height: 100%;
.top-actions {
+ position: relative;
text-align: right;
padding-bottom: 10px;
& > * {
display: inline-block;
}
+
+ .tail-log {
+ position: absolute;
+ top: 6px;
+ left: 0;
+ }
}
.main-area {
+ position: relative;
height: calc(100% - 40px);
textarea {
@@ -41,9 +49,4 @@
line-height: 13px;
}
}
-
- .bp3-checkbox {
- float: left;
- margin-top: 5px;
- }
}
diff --git a/web-console/src/components/show-log/show-log.tsx b/web-console/src/components/show-log/show-log.tsx
index 48fe705..a4409d2 100644
--- a/web-console/src/components/show-log/show-log.tsx
+++ b/web-console/src/components/show-log/show-log.tsx
@@ -16,7 +16,7 @@
* limitations under the License.
*/
-import { AnchorButton, Button, ButtonGroup, Checkbox, Intent } from '@blueprintjs/core';
+import { AnchorButton, Button, ButtonGroup, Intent, Switch } from '@blueprintjs/core';
import axios from 'axios';
import copy from 'copy-to-clipboard';
import React from 'react';
@@ -94,6 +94,7 @@
}
componentWillUnmount(): void {
+ this.showLogQueryManager.terminate();
this.removeTailer();
}
@@ -143,7 +144,8 @@
<div className="show-log">
<div className="top-actions">
{status === 'RUNNING' && (
- <Checkbox
+ <Switch
+ className="tail-log"
label="Tail log"
checked={this.state.tail}
onChange={this.handleCheckboxChange}
diff --git a/web-console/src/components/table-column-selector/table-column-selector.tsx b/web-console/src/components/table-column-selector/table-column-selector.tsx
index fc5359e..6cdd951 100644
--- a/web-console/src/components/table-column-selector/table-column-selector.tsx
+++ b/web-console/src/components/table-column-selector/table-column-selector.tsx
@@ -41,7 +41,7 @@
<Menu className="table-column-selector-menu">
{columns.map(column => (
<MenuCheckbox
- label={column}
+ text={column}
key={column}
checked={isColumnShown(column)}
onChange={() => onChange(column)}
diff --git a/web-console/src/components/warning-checklist/__snapshots__/warning-checklist.spec.tsx.snap b/web-console/src/components/warning-checklist/__snapshots__/warning-checklist.spec.tsx.snap
index afadb07..93970fc 100644
--- a/web-console/src/components/warning-checklist/__snapshots__/warning-checklist.spec.tsx.snap
+++ b/web-console/src/components/warning-checklist/__snapshots__/warning-checklist.spec.tsx.snap
@@ -5,7 +5,7 @@
class="warning-checklist"
>
<label
- class="bp3-control bp3-checkbox"
+ class="bp3-control bp3-switch"
>
<input
type="checkbox"
@@ -16,7 +16,7 @@
Check A
</label>
<label
- class="bp3-control bp3-checkbox"
+ class="bp3-control bp3-switch"
>
<input
type="checkbox"
@@ -27,7 +27,7 @@
Check B
</label>
<label
- class="bp3-control bp3-checkbox"
+ class="bp3-control bp3-switch"
>
<input
type="checkbox"
diff --git a/web-console/src/components/warning-checklist/warning-checklist.tsx b/web-console/src/components/warning-checklist/warning-checklist.tsx
index cef323f..9c2b37f 100644
--- a/web-console/src/components/warning-checklist/warning-checklist.tsx
+++ b/web-console/src/components/warning-checklist/warning-checklist.tsx
@@ -16,7 +16,7 @@
* limitations under the License.
*/
-import { Checkbox } from '@blueprintjs/core';
+import { Switch } from '@blueprintjs/core';
import React, { useState } from 'react';
export interface WarningChecklistProps {
@@ -38,9 +38,9 @@
return (
<div className="warning-checklist">
- {checks.map((check, i) => {
- return <Checkbox key={i} label={check} onChange={() => doCheck(check)} />;
- })}
+ {checks.map((check, i) => (
+ <Switch key={i} label={check} onChange={() => doCheck(check)} />
+ ))}
</div>
);
});
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 75ba008..49b814e 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -689,7 +689,10 @@
});
}}
>
- <img src={UrlBaser.base(`/assets/${getIngestionImage(comboType)}.png`)} />
+ <img
+ src={UrlBaser.base(`/assets/${getIngestionImage(comboType)}.png`)}
+ alt={`Ingestion tile for ${comboType}`}
+ />
<p>{getIngestionTitle(comboType)}</p>
</Card>
);
diff --git a/web-console/src/views/query-view/run-button/run-button.tsx b/web-console/src/views/query-view/run-button/run-button.tsx
index 2d62191..afa7d4e 100644
--- a/web-console/src/views/query-view/run-button/run-button.tsx
+++ b/web-console/src/views/query-view/run-button/run-button.tsx
@@ -24,6 +24,7 @@
HotkeysTarget,
Intent,
Menu,
+ MenuDivider,
MenuItem,
Popover,
Position,
@@ -105,14 +106,24 @@
target="_blank"
/>
<MenuItem icon={IconNames.HISTORY} text="Query history" onClick={onHistory} />
+ {!runeMode && onExplain && (
+ <MenuItem icon={IconNames.CLEAN} text="Explain SQL query" onClick={onExplain} />
+ )}
+ {runeMode && (
+ <MenuItem icon={IconNames.ALIGN_LEFT} text="Prettify JSON" onClick={onPrettier} />
+ )}
+ <MenuItem
+ icon={IconNames.PROPERTIES}
+ text="Edit context"
+ onClick={onEditContext}
+ label={numContextKeys ? pluralIfNeeded(numContextKeys, 'key') : undefined}
+ />
+ <MenuDivider />
{!runeMode && (
<>
- {onExplain && (
- <MenuItem icon={IconNames.CLEAN} text="Explain SQL query" onClick={onExplain} />
- )}
<MenuCheckbox
checked={useApproximateCountDistinct}
- label="Use approximate COUNT(DISTINCT)"
+ text="Use approximate COUNT(DISTINCT)"
onChange={() => {
onQueryContextChange(
setUseApproximateCountDistinct(queryContext, !useApproximateCountDistinct),
@@ -121,7 +132,7 @@
/>
<MenuCheckbox
checked={useApproximateTopN}
- label="Use approximate TopN"
+ text="Use approximate TopN"
onChange={() => {
onQueryContextChange(setUseApproximateTopN(queryContext, !useApproximateTopN));
}}
@@ -130,22 +141,11 @@
)}
<MenuCheckbox
checked={useCache}
- label="Use cache"
+ text="Use cache"
onChange={() => {
onQueryContextChange(setUseCache(queryContext, !useCache));
}}
/>
- {!runeMode && (
- <MenuItem
- icon={IconNames.PROPERTIES}
- text="Edit context"
- onClick={onEditContext}
- labelElement={numContextKeys ? pluralIfNeeded(numContextKeys, 'key') : undefined}
- />
- )}
- {runeMode && (
- <MenuItem icon={IconNames.ALIGN_LEFT} text="Prettify JSON" onClick={onPrettier} />
- )}
</Menu>
);
}
