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

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>
 `;

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();
   });

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}
+    />
   );
 }

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=""

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;
-  }
 }

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}

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)}

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"

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>
   );
 });

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>
     );

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 && (
+          <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 @@ 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>
     );
   }