Remove "Upgrade" badge on disabled action types in the create connect…

…or flyout (elastic#61111) * Remove "Upgrade" badge on disabled action types in the create connector flyout * Fix height of disabled cards Co-authored-by: defazio <[email protected]>
YulNaumenko · Mar 24, 2020 · 0f31bb9 · 0f31bb9
1 parent 6ed72d9
commit 0f31bb9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.scss b/x-pack/plugins/triggers_actions_ui/public/application/lib/check_action_type_enabled.scss
@@ -7,3 +7,10 @@
     box-shadow: none;
   }
 }
+
+.actConnectorsListGrid {
+  .euiToolTipAnchor,
+  .euiCard {
+    height: 100%;
+  }
+}
diff --git a/...rs_actions_ui/public/application/sections/action_connector_form/action_type_menu.test.tsx b/...rs_actions_ui/public/application/sections/action_connector_form/action_type_menu.test.tsx
@@ -184,11 +184,6 @@ describe('connector_add_flyout', () => {
       </ActionsConnectorsContextProvider>
     );
 
-    const element = wrapper.find('[data-test-subj="my-action-type-card"]');
-    expect(element.exists()).toBeTruthy();
-    expect(element.first().prop('betaBadgeLabel')).toEqual('Upgrade');
-    expect(element.first().prop('betaBadgeTooltipContent')).toEqual(
-      'This connector requires a Gold license.'
-    );
+    expect(wrapper.find('EuiToolTip [data-test-subj="my-action-type-card"]').exists()).toBeTruthy();
   });
 });
diff --git a/...riggers_actions_ui/public/application/sections/action_connector_form/action_type_menu.tsx b/...riggers_actions_ui/public/application/sections/action_connector_form/action_type_menu.tsx
@@ -6,6 +6,7 @@
 import React, { useEffect, useState } from 'react';
 import { EuiFlexItem, EuiCard, EuiIcon, EuiFlexGrid, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { EuiToolTip } from '@elastic/eui';
 import { ActionType, ActionTypeIndex } from '../../../types';
 import { loadActionTypes } from '../../lib/action_connector_api';
 import { useActionsConnectorsContext } from '../../context/actions_connectors_context';
@@ -81,21 +82,19 @@ export const ActionTypeMenu = ({
           description={item.selectMessage}
           isDisabled={!checkEnabledResult.isEnabled}
           onClick={() => onActionTypeChange(item.actionType)}
-          betaBadgeLabel={
-            checkEnabledResult.isEnabled
-              ? undefined
-              : i18n.translate(
-                  'xpack.triggersActionsUI.sections.actionsConnectorsList.upgradeBadge',
-                  { defaultMessage: 'Upgrade' }
-                )
-          }
-          betaBadgeTooltipContent={
-            checkEnabledResult.isEnabled ? undefined : checkEnabledResult.message
-          }
         />
       );
 
-      return <EuiFlexItem key={index}>{card}</EuiFlexItem>;
+      return (
+        <EuiFlexItem key={index}>
+          {checkEnabledResult.isEnabled && card}
+          {checkEnabledResult.isEnabled === false && (
+            <EuiToolTip position="top" content={checkEnabledResult.message}>
+              {card}
+            </EuiToolTip>
+          )}
+        </EuiFlexItem>
+      );
     });
 
   return (