Web console: switch to switches instead of checkboxes (#10454)

* switch to switches * add img alt * add relative * change icons * update snapshot
2020-09-30 15:13:22 -07:00 · 2020-09-30 15:13:22 -07:00 · d09fd8b035
parent 753bce324b
commit d09fd8b035
12 changed files with 131 additions and 79 deletions
--- 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"
+      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"
        />
-  </label>
+      </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>
 `;
--- a/web-console/src/components/menu-checkbox/menu-checkbox.scss
+++ b/web-console/src/components/menu-checkbox/menu-checkbox.scss
@ -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;
-  }
-}
--- 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 React from 'react';

 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();
  });
--- 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: MenuCheckboxProps) {
+  const { text, checked, onChange } = props;

-export function MenuCheckbox(props: ICheckboxProps) {
  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}
+    />
  );
 }
--- 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 @@ exports[`show log describe show log 1`] = `
    class="top-actions"
  >
    <label
-      class="bp3-control bp3-checkbox"
+      class="bp3-control bp3-switch tail-log"
    >
      <input
        checked=""
--- 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;
-  }
 }
--- 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 @@ export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
  }

  componentWillUnmount(): void {
+    this.showLogQueryManager.terminate();
    this.removeTailer();
  }

@ -143,7 +144,8 @@ export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
      <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}
--- 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 @@ export const TableColumnSelector = React.memo(function TableColumnSelector(
    <Menu className="table-column-selector-menu">
      {columns.map(column => (
        <MenuCheckbox
-          label={column}
+          text={column}
          key={column}
          checked={isColumnShown(column)}
          onChange={() => onChange(column)}
--- 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 @@ exports[`warning checklist matches snapshot 1`] = `
  class="warning-checklist"
 >
  <label
-    class="bp3-control bp3-checkbox"
+    class="bp3-control bp3-switch"
  >
    <input
      type="checkbox"
@ -16,7 +16,7 @@ exports[`warning checklist matches snapshot 1`] = `
    Check A
  </label>
  <label
-    class="bp3-control bp3-checkbox"
+    class="bp3-control bp3-switch"
  >
    <input
      type="checkbox"
@ -27,7 +27,7 @@ exports[`warning checklist matches snapshot 1`] = `
    Check B
  </label>
  <label
-    class="bp3-control bp3-checkbox"
+    class="bp3-control bp3-switch"
  >
    <input
      type="checkbox"
--- 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 @@ export const WarningChecklist = React.memo(function WarningChecklist(props: Warn

  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>
  );
 });
--- 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 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
          });
        }}
      >
-        <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>
    );
--- 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 @@ import {
  HotkeysTarget,
  Intent,
  Menu,
+  MenuDivider,
  MenuItem,
  Popover,
  Position,
@ -105,14 +106,24 @@ export class RunButton extends React.PureComponent<RunButtonProps> {
          target="_blank"
        />
        <MenuItem icon={IconNames.HISTORY} text="Query history" onClick={onHistory} />
-        {!runeMode && (
-          <>
-            {onExplain && (
+        {!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 && (
+          <>
            <MenuCheckbox
              checked={useApproximateCountDistinct}
-              label="Use approximate COUNT(DISTINCT)"
+              text="Use approximate COUNT(DISTINCT)"
              onChange={() => {
                onQueryContextChange(
                  setUseApproximateCountDistinct(queryContext, !useApproximateCountDistinct),
@ -121,7 +132,7 @@ export class RunButton extends React.PureComponent<RunButtonProps> {
            />
            <MenuCheckbox
              checked={useApproximateTopN}
-              label="Use approximate TopN"
+              text="Use approximate TopN"
              onChange={() => {
                onQueryContextChange(setUseApproximateTopN(queryContext, !useApproximateTopN));
              }}
@ -130,22 +141,11 @@ export class RunButton extends React.PureComponent<RunButtonProps> {
        )}
        <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>
    );
  }