[Alerting] Add "Start trial" button for connectors

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.test.tsx

@@ -42,20 +42,7 @@ describe('connector_add_flyout', () => {
   });
 
   it('renders action type menu on flyout open', () => {
-    const actionType = {
-      id: 'my-action-type',
-      iconClass: 'test',
-      selectMessage: 'test',
-      validateConnector: (): ValidationResult => {
-        return { errors: {} };
-      },
-      validateParams: (): ValidationResult => {
-        const validationResult = { errors: {} };
-        return validationResult;
-      },
-      actionConnectorFields: null,
-      actionParamsFields: null,
-    };
+    const actionType = createActionType();
     actionTypeRegistry.get.mockReturnValueOnce(actionType);
     actionTypeRegistry.has.mockReturnValue(true);
 
@@ -88,6 +75,83 @@ describe('connector_add_flyout', () => {
       </ActionsConnectorsContextProvider>
     );
     expect(wrapper.find('ActionTypeMenu')).toHaveLength(1);
-    expect(wrapper.find('[data-test-subj="my-action-type-card"]').exists()).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="${actionType.id}-card"]`).exists()).toBeTruthy();
+  });
+
+  it('renders banner with subscription links when features are disbaled due to licensing ', () => {
+    const actionType = createActionType();
+    const disabledActionType = createActionType();
+
+    actionTypeRegistry.get.mockReturnValueOnce(actionType);
+    actionTypeRegistry.has.mockReturnValue(true);
+
+    const wrapper = mountWithIntl(
+      <ActionsConnectorsContextProvider
+        value={{
+          http: deps!.http,
+          toastNotifications: deps!.toastNotifications,
+          actionTypeRegistry: deps!.actionTypeRegistry,
+          capabilities: deps!.capabilities,
+          reloadConnectors: () => {
+            return new Promise<void>(() => {});
+          },
+        }}
+      >
+        <ConnectorAddFlyout
+          addFlyoutVisible={true}
+          setAddFlyoutVisibility={() => {}}
+          actionTypes={[
+            {
+              id: actionType.id,
+              enabled: true,
+              name: 'Test',
+              enabledInConfig: true,
+              enabledInLicense: true,
+              minimumLicenseRequired: 'basic',
+            },
+            {
+              id: disabledActionType.id,
+              enabled: true,
+              name: 'Test',
+              enabledInConfig: true,
+              enabledInLicense: false,
+              minimumLicenseRequired: 'gold',
+            },
+          ]}
+        />
+      </ActionsConnectorsContextProvider>
+    );
+    const callout = wrapper.find('UpgradeYourLicenseCallOut');
+    expect(callout).toHaveLength(1);
+
+    const subscriptionLinks = callout.find('EuiButton');
+    expect(subscriptionLinks).toHaveLength(2);
+
+    const [linkToSubscribePage, linkToManageLicense] = subscriptionLinks.getElements();
+
+    expect(linkToSubscribePage.props.href).toMatchInlineSnapshot(
+      `"https://www.elastic.co/subscriptions"`
+    );
+    expect(linkToManageLicense.props.href).toMatchInlineSnapshot(
+      `"/app/kibana#/management/elasticsearch/license_management/"`
+    );
   });
 });
+
+let count = 0;
+function createActionType() {
+  return {
+    id: `my-action-type-${++count}`,
+    iconClass: 'test',
+    selectMessage: 'test',
+    validateConnector: (): ValidationResult => {
+      return { errors: {} };
+    },
+    validateParams: (): ValidationResult => {
+      const validationResult = { errors: {} };
+      return validationResult;
+    },
+    actionConnectorFields: null,
+    actionParamsFields: null,
+  };
+}

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx

@@ -19,9 +19,9 @@ import {
   EuiFlyoutBody,
   EuiBetaBadge,
   EuiCallOut,
-  EuiLink,
   EuiSpacer,
 } from '@elastic/eui';
+import { HttpSetup } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
 import { ActionTypeMenu } from './action_type_menu';
 import { ActionConnectorForm, validateBaseProperties } from './action_connector_form';
@@ -32,6 +32,7 @@ import { createActionConnector } from '../../lib/action_connector_api';
 import { useActionsConnectorsContext } from '../../context/actions_connectors_context';
 import { VIEW_LICENSE_OPTIONS_LINK } from '../../../common/constants';
 import { PLUGIN } from '../../constants/plugin';
+import { BASE_PATH as LICENSE_MANAGEMENT_BASE_PATH } from '../../../../../license_management/common/constants';
 
 export interface ConnectorAddFlyoutProps {
   addFlyoutVisible: boolean;
@@ -217,7 +218,13 @@ export const ConnectorAddFlyout = ({
         </EuiFlexGroup>
       </EuiFlyoutHeader>
       <EuiFlyoutBody
-        banner={!actionType && hasActionsDisabledByLicense && upgradeYourLicenseCallOut}
+        banner={
+          !actionType && hasActionsDisabledByLicense ? (
+            <UpgradeYourLicenseCallOut http={http} />
+          ) : (
+            <Fragment />
+          )
+        }
       >
         {currentForm}
       </EuiFlyoutBody>
@@ -269,7 +276,7 @@ export const ConnectorAddFlyout = ({
   );
 };
 
-const upgradeYourLicenseCallOut = (
+const UpgradeYourLicenseCallOut = ({ http }: { http: HttpSetup }) => (
   <EuiCallOut
     title={i18n.translate(
       'xpack.triggersActionsUI.sections.actionConnectorAdd.upgradeYourPlanBannerTitle',
@@ -281,11 +288,32 @@ const upgradeYourLicenseCallOut = (
       defaultMessage="With an upgraded license, you have the option to connect to more 3rd party services."
     />
     <EuiSpacer size="xs" />
-    <EuiLink href={VIEW_LICENSE_OPTIONS_LINK} target="_blank">
-      <FormattedMessage
-        id="xpack.triggersActionsUI.sections.actionConnectorAdd.upgradeYourPlanBannerLinkTitle"
-        defaultMessage="Upgrade now"
-      />
-    </EuiLink>
+    <EuiFlexGroup gutterSize="s" wrap={true}>
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          href={VIEW_LICENSE_OPTIONS_LINK}
+          iconType="popout"
+          iconSide="right"
+          target="_blank"
+        >
+          <FormattedMessage
+            id="xpack.triggersActionsUI.sections.actionConnectorAdd.upgradeYourPlanBannerLinkTitle"
+            defaultMessage="Upgrade now"
+          />
+        </EuiButton>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          href={`${http.basePath.get()}/app/kibana#${LICENSE_MANAGEMENT_BASE_PATH}`}
+          iconType="gear"
+          target="_blank"
+        >
+          <FormattedMessage
+            id="xpack.triggersActionsUI.sections.actionConnectorAdd.manageLicensePlanBannerLinkTitle"
+            defaultMessage="Manage license"
+          />
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </EuiCallOut>
 );