Add isDisabled prop to EuiSuperDatePicker

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Added `partial` glyph to `EuiIcon` ([#2152](https://github.com/elastic/eui/pull/2152))
 - Added `tall`, `fullWidth`, and `isInvalid` props to `EuiFilePicker` ([#2145](https://github.com/elastic/eui/pull/2145))
 - Added exports for `react-beautiful-dnd` interfaces used by EUI components ([#2173](https://github.com/elastic/eui/pull/2173))
+- Added `isDisabled` prop & styles to `EuiSuperDatePicker` ([#2139](https://github.com/elastic/eui/pull/2139))
 
 **Bug fixes**
 

src-docs/src/views/date_picker/super_date_picker.js

@@ -22,6 +22,7 @@ function MyCustomQuickSelectPanel({ applyTime }) {
 export default class extends Component {
   state = {
     recentlyUsedRanges: [],
+    isDiasabled: false,
     isLoading: false,
     showUpdateButton: true,
     isAutoRefreshOnly: false,
@@ -87,6 +88,12 @@ export default class extends Component {
     });
   };
 
+  toggleDisabled = () => {
+    this.setState(prevState => ({
+      isDisabled: !prevState.isDisabled,
+    }));
+  };
+
   toggleShowApplyButton = () => {
     this.setState(prevState => ({
       showUpdateButton: !prevState.showUpdateButton,
@@ -162,8 +169,15 @@ export default class extends Component {
           onChange={this.toggleShowCustomQuickSelectPanel}
           checked={this.state.showCustomQuickSelectPanel}
         />
+         
+        <EuiSwitch
+          label="Is disabled"
+          onChange={this.toggleDisabled}
+          checked={this.state.isDisabled}
+        />
         <EuiSpacer />
         <EuiSuperDatePicker
+          isDisabled={this.state.isDisabled}
           isLoading={this.state.isLoading}
           start={this.state.start}
           end={this.state.end}

src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap

@@ -9,6 +9,7 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
   <EuiFlexItem>
     <EuiFormControlLayout
       className="euiSuperDatePicker"
+      isDisabled={false}
       prepend={
         <EuiQuickSelectPopover
           applyRefreshInterval={null}
@@ -60,6 +61,7 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
           dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
           end="now"
           isAutoRefreshOnly={false}
+          isDisabled={false}
           isPaused={true}
           recentlyUsedRanges={Array []}
           refreshInterval={0}
@@ -77,6 +79,7 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
         <button
           className="euiSuperDatePicker__prettyFormat"
           data-test-subj="superDatePickerShowDatesButton"
+          disabled={false}
           onClick={[Function]}
         >
           Last 15 minutes

src/components/date_picker/super_date_picker/_super_date_picker.scss

@@ -33,14 +33,24 @@
   justify-content: space-between;
   text-align: left;
 
-  &:hover,
+  &:not(:disabled):hover,
   &:focus {
     text-decoration: none;
 
     .euiSuperDatePicker__prettyFormatLink {
       text-decoration: underline;
     }
   }
+
+  &:disabled {
+    background-color: $euiFormBackgroundDisabledColor;
+    color: $euiColorDarkShade;
+    cursor: not-allowed;
+
+    .euiSuperDatePicker__prettyFormatLink {
+      display: none;
+    }
+  }
 }
 
 .euiSuperDatePicker__prettyFormatLink {

src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss

@@ -32,6 +32,12 @@
       background-image: euiFormControlGradient($euiColorDanger);
     }
   }
+
+  &:disabled {
+    background-color: $euiFormBackgroundDisabledColor;
+    color: $euiColorDarkShade;
+    cursor: default;
+  }
 }
 
 .euiDatePopoverButton--start {

src/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -10,6 +10,7 @@ import { EuiDatePopoverContent } from './date_popover_content';
 export function EuiDatePopoverButton(props) {
   const {
     position,
+    isDisabled,
     isInvalid,
     needsUpdating,
     value,
@@ -30,6 +31,7 @@ export function EuiDatePopoverButton(props) {
       'euiDatePopoverButton-isSelected': isOpen,
       'euiDatePopoverButton-isInvalid': isInvalid,
       'euiDatePopoverButton-needsUpdating': needsUpdating,
+      'euiDatePopoverButton-disabled': isDisabled,
     },
   ]);
 
@@ -45,6 +47,7 @@ export function EuiDatePopoverButton(props) {
       onClick={onPopoverToggle}
       className={classes}
       title={title}
+      disabled={isDisabled}
       data-test-subj={`superDatePicker${position}DatePopoverButton`}
       {...buttonProps}>
       {formatTimeString(value, dateFormat, roundUp)}
@@ -75,6 +78,7 @@ export function EuiDatePopoverButton(props) {
 EuiDatePopoverButton.propTypes = {
   position: PropTypes.oneOf(['start', 'end']),
   isInvalid: PropTypes.bool,
+  isDisabled: PropTypes.bool,
   needsUpdating: PropTypes.bool,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap

@@ -11,6 +11,7 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
       data-test-subj="superDatePickerToggleQuickMenuButton"
       iconSide="right"
       iconType="arrowDown"
+      isDisabled={false}
       onClick={[Function]}
       size="xs"
       textProps={
@@ -97,6 +98,7 @@ exports[`EuiQuickSelectPopover isAutoRefreshOnly 1`] = `
       data-test-subj="superDatePickerToggleQuickMenuButton"
       iconSide="right"
       iconType="arrowDown"
+      isDisabled={false}
       onClick={[Function]}
       size="xs"
       textProps={

src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -106,6 +106,7 @@ export class EuiQuickSelectPopover extends Component {
         size="xs"
         iconType="arrowDown"
         iconSide="right"
+        isDisabled={this.props.isDisabled}
         data-test-subj="superDatePickerToggleQuickMenuButton">
         <EuiIcon
           type={
@@ -145,12 +146,12 @@ EuiQuickSelectPopover.propTypes = {
   start: PropTypes.string.isRequired,
   end: PropTypes.string.isRequired,
   applyRefreshInterval: PropTypes.func,
+  isDisabled: PropTypes.bool.isRequired,
   isPaused: PropTypes.bool.isRequired,
   refreshInterval: PropTypes.number.isRequired,
   commonlyUsedRanges: PropTypes.arrayOf(commonlyUsedRangeShape).isRequired,
   dateFormat: PropTypes.string.isRequired,
   recentlyUsedRanges: PropTypes.arrayOf(recentlyUsedRangeShape).isRequired,
   isAutoRefreshOnly: PropTypes.bool.isRequired,
-  isAutoRefreshOnly: PropTypes.bool.isRequired,
   customQuickSelectPanels: PropTypes.arrayOf(quickSelectPanelShape),
 };

src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.js

@@ -10,6 +10,7 @@ const defaultProps = {
   applyRefreshInterval: noop,
   start: 'now-15m',
   end: 'now',
+  isDisabled: false,
   isPaused: true,
   refreshInterval: 0,
   commonlyUsedRanges: [{ start: 'now/d', end: 'now/d', label: 'Today' }],

src/components/date_picker/super_date_picker/super_date_picker.js

@@ -51,6 +51,7 @@ function isRangeInvalid(start, end) {
 export class EuiSuperDatePicker extends Component {
   static propTypes = {
     isLoading: PropTypes.bool,
+    isDisabled: PropTypes.bool,
     /**
      * String as either datemath (e.g.: now, now-15m, now-15m/m) or
      * absolute date in the format 'YYYY-MM-DDTHH:mm:ss.SSSZ'
@@ -110,6 +111,7 @@ export class EuiSuperDatePicker extends Component {
     start: 'now-15m',
     end: 'now',
     isPaused: true,
+    isDisabled: false,
     refreshInterval: 0,
     commonlyUsedRanges: commonDurationRanges,
     dateFormat: 'MMM D, YYYY @ HH:mm:ss.SSS',
@@ -279,6 +281,7 @@ export class EuiSuperDatePicker extends Component {
 
   renderDatePickerRange = () => {
     const { start, end, hasChanged, isInvalid } = this.state;
+    const { isDisabled } = this.props;
 
     if (this.props.isAutoRefreshOnly) {
       return (
@@ -309,8 +312,11 @@ export class EuiSuperDatePicker extends Component {
           startDateControl={<div />}
           endDateControl={<div />}>
           <button
-            className="euiSuperDatePicker__prettyFormat"
+            className={classNames('euiSuperDatePicker__prettyFormat', {
+              'euiSuperDatePicker__prettyFormat--disabled': isDisabled,
+            })}
             data-test-subj="superDatePickerShowDatesButton"
+            disabled={isDisabled}
             onClick={this.hidePrettyDuration}>
             {prettyDuration(
               start,
@@ -336,6 +342,7 @@ export class EuiSuperDatePicker extends Component {
             position="start"
             needsUpdating={hasChanged}
             isInvalid={isInvalid}
+            isDisabled={isDisabled}
             onChange={this.setStart}
             value={start}
             dateFormat={this.props.dateFormat}
@@ -349,6 +356,7 @@ export class EuiSuperDatePicker extends Component {
             position="end"
             needsUpdating={hasChanged}
             isInvalid={isInvalid}
+            isDisabled={isDisabled}
             onChange={this.setEnd}
             value={end}
             dateFormat={this.props.dateFormat}
@@ -381,7 +389,7 @@ export class EuiSuperDatePicker extends Component {
         <EuiSuperUpdateButton
           needsUpdate={this.state.hasChanged}
           isLoading={this.props.isLoading}
-          isDisabled={this.state.isInvalid}
+          isDisabled={this.props.isDisabled || this.state.isInvalid}
           onClick={this.handleClickUpdateButton}
           data-test-subj="superDatePickerApplyTimeButton"
         />
@@ -398,6 +406,7 @@ export class EuiSuperDatePicker extends Component {
         applyRefreshInterval={
           this.props.onRefreshChange ? this.onRefreshChange : null
         }
+        isDisabled={this.props.isDisabled}
         isPaused={this.props.isPaused}
         refreshInterval={this.props.refreshInterval}
         commonlyUsedRanges={this.props.commonlyUsedRanges}
@@ -423,6 +432,7 @@ export class EuiSuperDatePicker extends Component {
         <EuiFlexItem>
           <EuiFormControlLayout
             className="euiSuperDatePicker"
+            isDisabled={this.props.isDisabled}
             prepend={quickSelect}>
             {this.renderDatePickerRange()}
           </EuiFormControlLayout>

src/components/form/form_control_layout/_form_control_layout.scss

@@ -89,3 +89,9 @@
     }
   }
 }
+
+.euiFormControlLayout-isDisabled,
+.euiFormControlLayout-isDisabled .euiDatePickerRange--inGroup {
+  background-color: $euiFormBackgroundDisabledColor;
+  color: $euiColorDarkShade;
+}

src/components/form/form_control_layout/form_control_layout.tsx

@@ -51,6 +51,7 @@ type EuiFormControlLayoutProps = CommonProps &
     clear?: EuiFormControlLayoutIconsProps['clear'];
     fullWidth?: boolean;
     isLoading?: boolean;
+    isDisabled?: boolean;
     className?: string;
     compressed?: boolean;
     readOnly?: boolean;
@@ -72,6 +73,7 @@ export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
       clear,
       fullWidth,
       isLoading,
+      isDisabled,
       compressed,
       className,
       prepend,
@@ -87,6 +89,7 @@ export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
         'euiFormControlLayout--compressed': compressed,
         'euiFormControlLayout--readOnly': readOnly,
         'euiFormControlLayout--group': prepend || append,
+        'euiFormControlLayout-isDisabled': isDisabled,
       },
       className
     );