[Alerting] Add "Start trial" button for connectors (#61774)

When Kibana is certain actions (connectors) disabled due to insufficient licensing we now display buttons that lead to both the Subscriptions page and the License Management page (where the user can start a trial).

Author: gmmorris

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 manageLink = callout.find('EuiButton');
+    expect(manageLink).toHaveLength(1);
+    expect(manageLink.getElements()[0].props.href).toMatchInlineSnapshot(
+      `"/app/kibana#/management/elasticsearch/license_management/"`
+    );
+
+    const subscriptionLink = callout.find('EuiButtonEmpty');
+    expect(subscriptionLink).toHaveLength(1);
+    expect(subscriptionLink.getElements()[0].props.href).toMatchInlineSnapshot(
+      `"https://www.elastic.co/subscriptions"`
+    );
   });
 });
+
+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,23 +276,44 @@ export const ConnectorAddFlyout = ({
   );
 };
 
-const upgradeYourLicenseCallOut = (
+const UpgradeYourLicenseCallOut = ({ http }: { http: HttpSetup }) => (
   <EuiCallOut
     title={i18n.translate(
       'xpack.triggersActionsUI.sections.actionConnectorAdd.upgradeYourPlanBannerTitle',
-      { defaultMessage: 'Upgrade your plan to access more connector types' }
+      { defaultMessage: 'Upgrade your license to access all connectors' }
     )}
   >
     <FormattedMessage
       id="xpack.triggersActionsUI.sections.actionConnectorAdd.upgradeYourPlanBannerMessage"
-      defaultMessage="With an upgraded license, you have the option to connect to more 3rd party services."
+      defaultMessage="Upgrade your license or start a 30-day free trial for immediate access to all third-party connectors."
     />
-    <EuiSpacer size="xs" />
-    <EuiLink href={VIEW_LICENSE_OPTIONS_LINK} target="_blank">
-      <FormattedMessage
-        id="xpack.triggersActionsUI.sections.actionConnectorAdd.upgradeYourPlanBannerLinkTitle"
-        defaultMessage="Upgrade now"
-      />
-    </EuiLink>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup gutterSize="s" wrap={true}>
+      <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>
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          href={VIEW_LICENSE_OPTIONS_LINK}
+          iconType="popout"
+          iconSide="right"
+          target="_blank"
+        >
+          <FormattedMessage
+            id="xpack.triggersActionsUI.sections.actionConnectorAdd.upgradeYourPlanBannerLinkTitle"
+            defaultMessage="Subscription plans"
+          />
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </EuiCallOut>
 );