disabled add button when no datasource selected

elastic · Sep 23, 2019 · 72b08a0 · 72b08a0
1 parent 20751be
commit 72b08a0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/_field_picker.scss b/x-pack/legacy/plugins/graph/public/components/field_manager/_field_picker.scss
@@ -11,3 +11,13 @@
   @include gphFieldBadgeSize;
   color: $euiColorPrimary;
 }
+
+.gphFieldPicker__button--disabled {
+  color: $euiTextColor;
+  cursor: not-allowed !important;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx
@@ -7,6 +7,7 @@
 import React, { useState, useEffect, ReactNode } from 'react';
 import { EuiPopover, EuiSelectable, EuiBadge } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import classNames from 'classnames';
 import { WorkspaceField } from '../../types';
 
 import { FieldIcon } from './field_icon';
@@ -24,6 +25,8 @@ export function FieldPicker({ fieldMap, selectField, deselectField }: FieldPicke
   const unselectedFields = allFields.filter(field => !field.selected);
   const hasSelectedFields = unselectedFields.length < allFields.length;
 
+  const hasFields = allFields.length > 0;
+
   const [fieldOptions, setFieldOptions] = useState(toOptions(allFields));
 
   useEffect(() => {
@@ -51,12 +54,17 @@ export function FieldPicker({ fieldMap, selectField, deselectField }: FieldPicke
       panelPaddingSize="none"
       button={
         <EuiBadge
-          className="gphFieldPicker__button"
+          className={classNames('gphFieldPicker__button', {
+            'gphFieldPicker__button--disabled': !hasFields,
+          })}
           color="hollow"
           iconType="plusInCircleFilled"
-          onClick={() => setOpen(true)}
+          onClick={() => {
+            if (hasFields) {
+              setOpen(true);
+            }
+          }}
           onClickAriaLabel={badgeDescription}
-          title=""
         >
           {badgeDescription}
         </EuiBadge>