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.
This commit is contained in:
Chi Cao Minh 2020-09-28 17:13:07 -07:00 committed by GitHub
parent 5356d8821b
commit d16c78ba98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 3 deletions

View File

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

View File

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

View File

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

View File

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