OpenAI Preconfigured Connector Dashboard Link

x-pack/plugins/stack_connectors/public/connector_types/openai/connector.tsx

@@ -5,22 +5,21 @@
  * 2.0.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import {
   ActionConnectorFieldsProps,
   SimpleConnectorForm,
 } from '@kbn/triggers-actions-ui-plugin/public';
 import { SelectField } from '@kbn/es-ui-shared-plugin/static/forms/components';
-import { EuiLink, EuiSpacer } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 import {
   UseField,
   useFormContext,
   useFormData,
 } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
-import { useKibana } from '@kbn/triggers-actions-ui-plugin/public';
 import { fieldValidators } from '@kbn/es-ui-shared-plugin/static/forms/helpers';
+import DashboardLink from './dashboard_link';
 import { OpenAiProviderType } from '../../../common/openai/constants';
-import { useGetDashboard } from './use_get_dashboard';
 import * as i18n from './translations';
 import {
   azureAiConfig,
@@ -37,24 +36,6 @@ const ConnectorFields: React.FC<ActionConnectorFieldsProps> = ({ readOnly, isEdi
     watch: ['config.apiProvider'],
   });
 
-  const {
-    services: {
-      application: { navigateToUrl },
-    },
-  } = useKibana();
-
-  const { dashboardUrl } = useGetDashboard({ connectorId: id });
-
-  const onClick = useCallback(
-    (e) => {
-      e.preventDefault();
-      if (dashboardUrl) {
-        navigateToUrl(dashboardUrl);
-      }
-    },
-    [dashboardUrl, navigateToUrl]
-  );
-
   const selectedProviderDefaultValue = useMemo(
     () =>
       getFieldDefaultValue<OpenAiProviderType>('config.apiProvider') ?? OpenAiProviderType.OpenAi,
@@ -104,10 +85,12 @@ const ConnectorFields: React.FC<ActionConnectorFieldsProps> = ({ readOnly, isEdi
           secretsFormSchema={azureAiSecrets}
         />
       )}
-      {isEdit && dashboardUrl != null && (
-        <EuiLink data-test-subj="link-gen-ai-token-dashboard" onClick={onClick}>
-          {i18n.USAGE_DASHBOARD_LINK(selectedProviderDefaultValue, name)}
-        </EuiLink>
+      {isEdit && (
+        <DashboardLink
+          connectorId={id}
+          connectorName={name}
+          selectedProvider={selectedProviderDefaultValue}
+        />
       )}
     </>
   );

x-pack/plugins/stack_connectors/public/connector_types/openai/dashboard_link.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback } from 'react';
+import { EuiLink } from '@elastic/eui';
+import { useKibana } from '@kbn/triggers-actions-ui-plugin/public';
+import * as i18n from './translations';
+import { useGetDashboard } from './use_get_dashboard';
+
+interface Props {
+  connectorId: string;
+  connectorName: string;
+  selectedProvider?: string;
+}
+// tested from ./connector.test.tsx
+export const DashboardLink: React.FC<Props> = ({
+  connectorId,
+  connectorName,
+  selectedProvider = '',
+}) => {
+  const { dashboardUrl } = useGetDashboard({ connectorId });
+  const {
+    services: {
+      application: { navigateToUrl },
+    },
+  } = useKibana();
+  const onClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (dashboardUrl) {
+        navigateToUrl(dashboardUrl);
+      }
+    },
+    [dashboardUrl, navigateToUrl]
+  );
+  return dashboardUrl != null ? (
+    <EuiLink data-test-subj="link-gen-ai-token-dashboard" onClick={onClick}>
+      {i18n.USAGE_DASHBOARD_LINK(selectedProvider, connectorName)}
+    </EuiLink>
+  ) : null;
+};
+
+// eslint-disable-next-line import/no-default-export
+export { DashboardLink as default };

x-pack/plugins/stack_connectors/public/connector_types/openai/openai.tsx

@@ -57,5 +57,6 @@ export function getConnectorType(): OpenAIConnector {
     },
     actionConnectorFields: lazy(() => import('./connector')),
     actionParamsFields: lazy(() => import('./params')),
+    actionReadOnlyElement: lazy(() => import('./dashboard_link')),
   };
 }

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

@@ -6,18 +6,12 @@
  */
 
 import React, { memo, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import {
-  EuiFlyout,
-  EuiText,
-  EuiFlyoutBody,
-  EuiLink,
-  EuiButton,
-  EuiConfirmModal,
-} from '@elastic/eui';
+import { EuiFlyout, EuiFlyoutBody, EuiButton, EuiConfirmModal } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { ActionTypeExecutorResult, isActionTypeExecutorResult } from '@kbn/actions-plugin/common';
 import { Option, none, some } from 'fp-ts/lib/Option';
+import { ReadOnlyConnectorMessage } from './read_only';
 import {
   ActionConnector,
   ActionTypeModel,
@@ -51,24 +45,6 @@ const getConnectorWithoutSecrets = (
   secrets: {},
 });
 
-const ReadOnlyConnectorMessage: React.FC<{ href: string }> = ({ href }) => {
-  return (
-    <>
-      <EuiText>
-        {i18n.translate('xpack.triggersActionsUI.sections.editConnectorForm.descriptionText', {
-          defaultMessage: 'This connector is readonly.',
-        })}
-      </EuiText>
-      <EuiLink href={href} target="_blank">
-        <FormattedMessage
-          id="xpack.triggersActionsUI.sections.editConnectorForm.preconfiguredHelpLabel"
-          defaultMessage="Learn more about preconfigured connectors."
-        />
-      </EuiLink>
-    </>
-  );
-};
-
 const EditConnectorFlyoutComponent: React.FC<EditConnectorFlyoutProps> = ({
   actionTypeRegistry,
   connector,
@@ -299,7 +275,12 @@ const EditConnectorFlyoutComponent: React.FC<EditConnectorFlyoutProps> = ({
                 )}
               </>
             ) : (
-              <ReadOnlyConnectorMessage href={docLinks.links.alerting.preconfiguredConnectors} />
+              <ReadOnlyConnectorMessage
+                href={docLinks.links.alerting.preconfiguredConnectors}
+                extraComponent={actionTypeModel?.actionReadOnlyElement}
+                connectorId={connector.id}
+                connectorName={connector.name}
+              />
             )
           ) : (
             <TestConnectorForm

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

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { I18nProvider } from '@kbn/i18n-react';
+import { render } from '@testing-library/react';
+import { ReadOnlyConnectorMessage } from './read_only';
+import { ActionTypeModel } from '../../../..';
+
+const ExtraComponent = jest.fn(() => (
+  <div>Extra Component</div>
+)) as unknown as ActionTypeModel['actionReadOnlyElement'];
+describe('ReadOnlyConnectorMessage', () => {
+  it('should render a readonly message with a link to the provided href', () => {
+    const { getByTestId, getByText, queryByText } = render(
+      <ReadOnlyConnectorMessage
+        connectorId="123"
+        connectorName="Test Connector"
+        href="https://example.com/"
+      />,
+      { wrapper: I18nProvider }
+    );
+
+    expect(getByText('This connector is readonly.')).toBeInTheDocument();
+    expect(getByTestId('read-only-link')).toHaveProperty('href', 'https://example.com/');
+    expect(queryByText('Extra Component')).toBeNull();
+  });
+
+  it('should render an extra component if provided', () => {
+    const { getByText } = render(
+      <ReadOnlyConnectorMessage
+        connectorId="123"
+        connectorName="Test Connector"
+        extraComponent={ExtraComponent}
+        href="https://example.com"
+      />,
+      { wrapper: I18nProvider }
+    );
+
+    expect(getByText('Extra Component')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { ActionTypeModel } from '../../../..';
+
+export const ReadOnlyConnectorMessage: React.FC<{
+  connectorId: string;
+  connectorName: string;
+  extraComponent?: ActionTypeModel['actionReadOnlyElement'];
+  href: string;
+}> = ({ connectorId, connectorName, extraComponent, href }) => {
+  const ExtraComponent = extraComponent;
+  return (
+    <>
+      <EuiText>
+        {i18n.translate('xpack.triggersActionsUI.sections.editConnectorForm.descriptionText', {
+          defaultMessage: 'This connector is readonly.',
+        })}
+      </EuiText>
+      <EuiLink data-test-subj="read-only-link" href={href} target="_blank">
+        <FormattedMessage
+          id="xpack.triggersActionsUI.sections.editConnectorForm.preconfiguredHelpLabel"
+          defaultMessage="Learn more about preconfigured connectors."
+        />
+      </EuiLink>
+      {ExtraComponent && (
+        <>
+          <EuiSpacer size="m" />
+          <ExtraComponent connectorId={connectorId} connectorName={connectorName} />
+        </>
+      )}
+    </>
+  );
+};

x-pack/plugins/triggers_actions_ui/public/types.ts

@@ -169,6 +169,10 @@ export interface ActionConnectorFieldsProps {
   isEdit: boolean;
   registerPreSubmitValidator: (validator: ConnectorValidationFunc) => void;
 }
+export interface ActionReadOnlyElementProps {
+  connectorId: string;
+  connectorName: string;
+}
 
 export enum RuleFlyoutCloseReason {
   SAVED,
@@ -253,6 +257,7 @@ export interface ActionTypeModel<ActionConfig = any, ActionSecrets = any, Action
     ComponentType<ActionConnectorFieldsProps>
   > | null;
   actionParamsFields: React.LazyExoticComponent<ComponentType<ActionParamsProps<ActionParams>>>;
+  actionReadOnlyElement?: React.LazyExoticComponent<ComponentType<ActionReadOnlyElementProps>>;
   defaultActionParams?: RecursivePartial<ActionParams>;
   defaultRecoveredActionParams?: RecursivePartial<ActionParams>;
   customConnectorSelectItem?: CustomConnectorSelectionItem;