Web console: fix data loader schema table column ordering bug and other polish

web-console/e2e-tests/component/load-data/config/partition.ts

@@ -26,10 +26,10 @@ import { getLabeledInput, selectSuggestibleInput, setLabeledInput } from '../../
  * Possible values for partition step segment granularity.
  */
 export enum SegmentGranularity {
-  HOUR = 'HOUR',
-  DAY = 'DAY',
-  MONTH = 'MONTH',
-  YEAR = 'YEAR',
+  HOUR = 'hour',
+  DAY = 'day',
+  MONTH = 'month',
+  YEAR = 'year',
 }
 
 const PARTITIONING_TYPE = 'Partitioning type';

web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`auto-form snapshot matches snapshot 1`] = `
+exports[`AutoForm matches snapshot 1`] = `
 <div
   className="auto-form"
 >
@@ -132,5 +132,16 @@ exports[`auto-form snapshot matches snapshot 1`] = `
       placeholder=""
     />
   </Memo(FormGroupWithInfo)>
+  <Blueprint3.FormGroup
+    key="more-or-less"
+  >
+    <Blueprint3.Button
+      fill={true}
+      minimal={true}
+      onClick={[Function]}
+      rightIcon="chevron-down"
+      text="Show more"
+    />
+  </Blueprint3.FormGroup>
 </div>
 `;

web-console/src/components/auto-form/auto-form.spec.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 
 import { AutoForm } from './auto-form';
 
-describe('auto-form snapshot', () => {
+describe('AutoForm', () => {
   it('matches snapshot', () => {
     const autoForm = shallow(
       <AutoForm
@@ -34,6 +34,9 @@ describe('auto-form snapshot', () => {
           { name: 'testFive', type: 'string-array' },
           { name: 'testSix', type: 'json' },
           { name: 'testSeven', type: 'json' },
+
+          { name: 'testNotDefined', type: 'string', defined: false },
+          { name: 'testAdvanced', type: 'string', hideInMore: true },
         ]}
         model={String}
         onChange={() => {}}

web-console/src/components/auto-form/auto-form.tsx

@@ -17,6 +17,7 @@
  */
 
 import { Button, ButtonGroup, FormGroup, Intent, NumericInput } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 
 import { deepDelete, deepGet, deepSet } from '../../utils';
@@ -54,6 +55,7 @@ export interface Field<M> {
   disabled?: Functor<M, boolean>;
   defined?: Functor<M, boolean>;
   required?: Functor<M, boolean>;
+  hideInMore?: Functor<M, boolean>;
   adjustment?: (model: M) => M;
   issueWithValue?: (value: any) => string | undefined;
 }
@@ -68,7 +70,14 @@ export interface AutoFormProps<M> {
   globalAdjustment?: (model: M) => M;
 }
 
-export class AutoForm<T extends Record<string, any>> extends React.PureComponent<AutoFormProps<T>> {
+export interface AutoFormState {
+  showMore: boolean;
+}
+
+export class AutoForm<T extends Record<string, any>> extends React.PureComponent<
+  AutoFormProps<T>,
+  AutoFormState
+> {
   static REQUIRED_INTENT = Intent.PRIMARY;
 
   static makeLabelName(label: string): string {
@@ -138,7 +147,9 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
 
   constructor(props: AutoFormProps<T>) {
     super(props);
-    this.state = {};
+    this.state = {
+      showMore: false,
+    };
   }
 
   private fieldChange = (field: Field<T>, newValue: any) => {
@@ -391,7 +402,6 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
   private renderField = (field: Field<T>) => {
     const { model } = this.props;
     if (!model) return;
-    if (!AutoForm.evaluateFunctor(field.defined, model, true)) return;
 
     const label = field.label || AutoForm.makeLabelName(field.name);
     return (
@@ -415,12 +425,46 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
     );
   }
 
+  renderMoreOrLess() {
+    const { showMore } = this.state;
+
+    return (
+      <FormGroup key="more-or-less">
+        <Button
+          text={showMore ? 'Show less' : 'Show more'}
+          rightIcon={showMore ? IconNames.CHEVRON_UP : IconNames.CHEVRON_DOWN}
+          minimal
+          fill
+          onClick={() => {
+            this.setState(({ showMore }) => ({ showMore: !showMore }));
+          }}
+        />
+      </FormGroup>
+    );
+  }
+
   render(): JSX.Element {
     const { fields, model, showCustom } = this.props;
+    const { showMore } = this.state;
+
+    let shouldShowMore = false;
+    const shownFields = fields.filter(field => {
+      if (AutoForm.evaluateFunctor(field.defined, model, true)) {
+        if (AutoForm.evaluateFunctor(field.hideInMore, model, false)) {
+          shouldShowMore = true;
+          return showMore;
+        }
+        return true;
+      } else {
+        return false;
+      }
+    });
+
     return (
       <div className="auto-form">
-        {model && fields.map(this.renderField)}
+        {model && shownFields.map(this.renderField)}
         {model && showCustom && showCustom(model) && this.renderCustom()}
+        {shouldShowMore && this.renderMoreOrLess()}
       </div>
     );
   }

web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap

@@ -17,6 +17,10 @@ exports[`coordinator dynamic config matches snapshot 1`] = `
     </Memo(ExternalLink)>
     .
   </p>
+  <Memo(FormJsonSelector)
+    onChange={[Function]}
+    tab="form"
+  />
   <AutoForm
     fields={
       Array [
@@ -47,13 +51,11 @@ exports[`coordinator dynamic config matches snapshot 1`] = `
         Object {
           "defaultValue": false,
           "info": <React.Fragment>
-            Send kill tasks for ALL dataSources if property
-
+            Send kill tasks for ALL dataSources if property 
             <Unknown>
               druid.coordinator.kill.on
             </Unknown>
-             is true. If this is set to true then
-
+             is true. If this is set to true then 
             <Unknown>
               killDataSourceWhitelist
             </Unknown>