From d16c78ba98c58abc69258c81b1b8af9c40bb73af Mon Sep 17 00:00:00 2001
From: Chi Cao Minh <chi.caominh@imply.io>
Date: Mon, 28 Sep 2020 17:13:07 -0700
Subject: [PATCH] Add intent for web console IntervalInput (#10447)

When using the web console to load data by reindexing from Druid, the
`Datasource` and `Interval` inputs are required during the `Connect`
step. Unlike the `Datasource` input, the `Interval` input did not have a
blue outline to indicate that it was required as the `IntervalInput`
component did not support an `intent` property.
---
 web-console/src/components/auto-form/auto-form.tsx          | 5 +++++
 .../__snapshots__/interval-input.spec.tsx.snap              | 2 +-
 .../src/components/interval-input/interval-input.spec.tsx   | 2 ++
 .../src/components/interval-input/interval-input.tsx        | 6 ++++--
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/web-console/src/components/auto-form/auto-form.tsx b/web-console/src/components/auto-form/auto-form.tsx
index 67f45923cbe..59561aca1f7 100644
--- a/web-console/src/components/auto-form/auto-form.tsx
+++ b/web-console/src/components/auto-form/auto-form.tsx
@@ -308,6 +308,11 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
           this.fieldChange(field, v);
         }}
         placeholder={AutoForm.evaluateFunctor(field.placeholder, model, '')}
+        intent={
+          AutoForm.evaluateFunctor(field.required, model, false) && modelValue == null
+            ? AutoForm.REQUIRED_INTENT
+            : undefined
+        }
       />
     );
   }
diff --git a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
index 2ff93507b8a..19a16790143 100644
--- a/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
+++ b/web-console/src/components/interval-input/__snapshots__/interval-input.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`interval calendar component matches snapshot 1`] = `
 <div
-  class="bp3-input-group"
+  class="bp3-input-group bp3-intent-primary"
 >
   <input
     class="bp3-input"
diff --git a/web-console/src/components/interval-input/interval-input.spec.tsx b/web-console/src/components/interval-input/interval-input.spec.tsx
index 0027ad14bef..fd4b8a8718f 100644
--- a/web-console/src/components/interval-input/interval-input.spec.tsx
+++ b/web-console/src/components/interval-input/interval-input.spec.tsx
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { Intent } from '@blueprintjs/core';
 import { render } from '@testing-library/react';
 import React from 'react';
 
@@ -28,6 +29,7 @@ describe('interval calendar component', () => {
         interval={'2010-01-01/2020-01-01'}
         placeholder={'2010-01-01/2020-01-01'}
         onValueChange={() => {}}
+        intent={Intent.PRIMARY}
       />
     );
     const { container } = render(intervalInput);
diff --git a/web-console/src/components/interval-input/interval-input.tsx b/web-console/src/components/interval-input/interval-input.tsx
index 3f9fa02f73d..b56780e6662 100644
--- a/web-console/src/components/interval-input/interval-input.tsx
+++ b/web-console/src/components/interval-input/interval-input.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Button, InputGroup, Popover, Position } from '@blueprintjs/core';
+import { Button, InputGroup, Intent, Popover, Position } from '@blueprintjs/core';
 import { DateRange, DateRangePicker } from '@blueprintjs/datetime';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
@@ -66,10 +66,11 @@ export interface IntervalInputProps {
   interval: string;
   placeholder: string | undefined;
   onValueChange: (interval: string) => void;
+  intent?: Intent;
 }
 
 export const IntervalInput = React.memo(function IntervalInput(props: IntervalInputProps) {
-  const { interval, placeholder, onValueChange } = props;
+  const { interval, placeholder, onValueChange, intent } = props;
 
   return (
     <InputGroup
@@ -99,6 +100,7 @@ export const IntervalInput = React.memo(function IntervalInput(props: IntervalIn
         const value = e.target.value.replace(/[^\-0-9T:/]/g, '').substring(0, 39);
         onValueChange(value);
       }}
+      intent={intent}
     />
   );
 });