[Backport] Web console: use arrayIngestMode: array

licenses.yaml

@@ -5056,7 +5056,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Imply Data
-version: 0.21.4
+version: 0.21.9
 
 ---
 

web-console/package.json

@@ -68,7 +68,7 @@
     "@blueprintjs/datetime2": "^0.9.35",
     "@blueprintjs/icons": "^4.16.0",
     "@blueprintjs/popover2": "^1.14.9",
-    "@druid-toolkit/query": "^0.21.4",
+    "@druid-toolkit/query": "^0.21.9",
     "@druid-toolkit/visuals-core": "^0.3.3",
     "@druid-toolkit/visuals-react": "^0.3.3",
     "ace-builds": "~1.4.14",

web-console/script/create-sql-docs.js

@@ -29,7 +29,15 @@ const MINIMUM_EXPECTED_NUMBER_OF_DATA_TYPES = 14;
 const initialFunctionDocs = {
   TABLE: [['external', convertMarkdownToHtml('Defines a logical table from an external.')]],
   EXTERN: [
-    ['inputSource, inputFormat, rowSignature?', convertMarkdownToHtml('Reads external data')],
+    ['inputSource, inputFormat, rowSignature?', convertMarkdownToHtml('Reads external data.')],
+  ],
+  TYPE: [
+    [
+      'nativeType',
+      convertMarkdownToHtml(
+        'A purely type system modification function what wraps a Druid native type to make it into a SQL type.',
+      ),
+    ],
   ],
 };
 
@@ -70,7 +78,7 @@ const readDoc = async () => {
     await fs.readFile('../docs/querying/sql-array-functions.md', 'utf-8'),
     await fs.readFile('../docs/querying/sql-multivalue-string-functions.md', 'utf-8'),
     await fs.readFile('../docs/querying/sql-json-functions.md', 'utf-8'),
-    await fs.readFile('../docs/querying/sql-operators.md', 'utf-8')
+    await fs.readFile('../docs/querying/sql-operators.md', 'utf-8'),
   ].join('\n');
 
   const lines = data.split('\n');

web-console/src/blueprint-overrides/_index.scss

@@ -24,3 +24,4 @@
 @import 'components/forms/common';
 @import 'components/navbar/navbar';
 @import 'components/card/card';
+@import 'special-switch-modes';

web-console/src/blueprint-overrides/_special-switch-modes.scss

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+.bp4-dark .bp4-switch.bp4-control {
+  &.legacy-switch {
+    input:checked ~ .bp4-control-indicator {
+      background: $orange5;
+    }
+
+    &:hover input:checked ~ .bp4-control-indicator {
+      background: $orange2;
+    }
+  }
+
+  &.danger-switch {
+    input:checked ~ .bp4-control-indicator {
+      background: $red5;
+    }
+
+    &:hover input:checked ~ .bp4-control-indicator {
+      background: $red2;
+    }
+  }
+}

web-console/src/components/array-mode-switch/__snapshots__/array-mode-swtich.spec.tsx.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ArrayModeSwitch matches snapshot 1`] = `
+<div
+  class="bp4-form-group form-group-with-info"
+>
+  <div
+    class="bp4-form-content"
+  >
+    <label
+      class="bp4-control bp4-switch legacy-switch"
+    >
+      <input
+        checked=""
+        type="checkbox"
+      />
+      <span
+        class="bp4-control-indicator"
+      />
+      Store ARRAYs as MVDs
+    </label>
+    <span
+      aria-haspopup="true"
+      class="info-popover bp4-popover2-target"
+    >
+      <span
+        aria-hidden="true"
+        class="bp4-icon bp4-icon-info-sign"
+        icon="info-sign"
+      >
+        <svg
+          data-icon="info-sign"
+          height="14"
+          role="img"
+          viewBox="0 0 16 16"
+          width="14"
+        >
+          <path
+            d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+</div>
+`;

web-console/src/components/array-mode-switch/array-mode-switch.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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.
+ */
+
+import { Switch } from '@blueprintjs/core';
+import React from 'react';
+
+import type { ArrayMode } from '../../druid-models';
+import { getLink } from '../../links';
+import { ExternalLink } from '../external-link/external-link';
+import { FormGroupWithInfo } from '../form-group-with-info/form-group-with-info';
+import { PopoverText } from '../popover-text/popover-text';
+
+export interface ArrayModeSwitchProps {
+  arrayMode: ArrayMode;
+  changeArrayMode(newArrayMode: ArrayMode): void;
+}
+
+export const ArrayModeSwitch = React.memo(function ArrayModeSwitch(props: ArrayModeSwitchProps) {
+  const { arrayMode, changeArrayMode } = props;
+
+  return (
+    <FormGroupWithInfo
+      inlineInfo
+      info={
+        <PopoverText>
+          <p>
+            Store arrays as multi-value string columns instead of arrays. Note that all detected
+            array elements will be coerced to strings if you choose this option, and data will
+            behave more like a string than an array at query time. See{' '}
+            <ExternalLink href={`${getLink('DOCS')}/querying/arrays`}>array docs</ExternalLink> and{' '}
+            <ExternalLink href={`${getLink('DOCS')}/querying/multi-value-dimensions`}>
+              mvd docs
+            </ExternalLink>{' '}
+            for more details about the differences between arrays and multi-value strings.
+          </p>
+        </PopoverText>
+      }
+    >
+      <Switch
+        label="Store ARRAYs as MVDs"
+        className="legacy-switch"
+        checked={arrayMode === 'multi-values'}
+        onChange={() => changeArrayMode(arrayMode === 'arrays' ? 'multi-values' : 'arrays')}
+      />
+    </FormGroupWithInfo>
+  );
+});

web-console/src/components/array-mode-switch/array-mode-swtich.spec.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { ArrayModeSwitch } from './array-mode-switch';
+
+describe('ArrayModeSwitch', () => {
+  it('matches snapshot', () => {
+    const arrayInput = <ArrayModeSwitch arrayMode="multi-values" changeArrayMode={() => {}} />;
+
+    const { container } = render(arrayInput);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/index.ts

@@ -19,6 +19,7 @@
 export * from './action-cell/action-cell';
 export * from './action-icon/action-icon';
 export * from './array-input/array-input';
+export * from './array-mode-switch/array-mode-switch';
 export * from './auto-form/auto-form';
 export * from './braced-text/braced-text';
 export * from './center-message/center-message';

web-console/src/components/warning-checklist/__snapshots__/warning-checklist.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`WarningChecklist matches snapshot 1`] = `
   class="warning-checklist"
 >
   <label
-    class="bp4-control bp4-switch"
+    class="bp4-control bp4-switch danger-switch"
   >
     <input
       type="checkbox"
@@ -16,7 +16,7 @@ exports[`WarningChecklist matches snapshot 1`] = `
     Check A
   </label>
   <label
-    class="bp4-control bp4-switch"
+    class="bp4-control bp4-switch danger-switch"
   >
     <input
       type="checkbox"
@@ -27,7 +27,7 @@ exports[`WarningChecklist matches snapshot 1`] = `
     Check B
   </label>
   <label
-    class="bp4-control bp4-switch"
+    class="bp4-control bp4-switch danger-switch"
   >
     <input
       type="checkbox"

web-console/src/components/warning-checklist/warning-checklist.tsx

@@ -40,7 +40,7 @@ export const WarningChecklist = React.memo(function WarningChecklist(props: Warn
   return (
     <div className="warning-checklist">
       {checks.map((check, i) => (
-        <Switch key={i} onChange={() => doCheck(i)}>
+        <Switch key={i} className="danger-switch" onChange={() => doCheck(i)}>
           {check}
         </Switch>
       ))}