[8.x] [ResponseOps][Cases]Add instructions of how to create a connect…

…or in the create case form (#197041) (#197977)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Cases]Add instructions of how to create a connector in
the create case form
(#197041)](#197041)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Georgiana-Andreea
Onoleață","email":"georgiana.onoleata@elastic.co"},"sourceCommit":{"committedDate":"2024-10-28T11:40:19Z","message":"[ResponseOps][Cases]Add
instructions of how to create a connector in the create case form
(#197041)\n\nCloses
https://github.com/elastic/kibana/issues/189246\r\n\r\n##
Summary\r\n\r\n- A helper text was added in the create case form to tell
the user that\r\nneeds to create a connector in the stack management >
cases > settings\r\nbefore attaching it to a case\r\n- A new \"add
connector\" button was placed in the stack management >\r\ncases >
settings page, in the connectors
section\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7866b41a-11b5-4ca3-bd65-988412ab1e2f\r\n\r\n---------\r\n\r\nCo-authored-by:
Antonio
<antoniodcoelho@gmail.com>","sha":"a904803e05061076685a2a39ca4c11fb2844b01c","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:ResponseOps","v9.0.0","backport:prev-minor","v8.17.0"],"title":"[ResponseOps][Cases]Add
instructions of how to create a connector in the create case
form","number":197041,"url":"https://github.com/elastic/kibana/pull/197041","mergeCommit":{"message":"[ResponseOps][Cases]Add
instructions of how to create a connector in the create case form
(#197041)\n\nCloses
https://github.com/elastic/kibana/issues/189246\r\n\r\n##
Summary\r\n\r\n- A helper text was added in the create case form to tell
the user that\r\nneeds to create a connector in the stack management >
cases > settings\r\nbefore attaching it to a case\r\n- A new \"add
connector\" button was placed in the stack management >\r\ncases >
settings page, in the connectors
section\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7866b41a-11b5-4ca3-bd65-988412ab1e2f\r\n\r\n---------\r\n\r\nCo-authored-by:
Antonio
<antoniodcoelho@gmail.com>","sha":"a904803e05061076685a2a39ca4c11fb2844b01c"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197041","number":197041,"mergeCommit":{"message":"[ResponseOps][Cases]Add
instructions of how to create a connector in the create case form
(#197041)\n\nCloses
https://github.com/elastic/kibana/issues/189246\r\n\r\n##
Summary\r\n\r\n- A helper text was added in the create case form to tell
the user that\r\nneeds to create a connector in the stack management >
cases > settings\r\nbefore attaching it to a case\r\n- A new \"add
connector\" button was placed in the stack management >\r\ncases >
settings page, in the connectors
section\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7866b41a-11b5-4ca3-bd65-988412ab1e2f\r\n\r\n---------\r\n\r\nCo-authored-by:
Antonio
<antoniodcoelho@gmail.com>","sha":"a904803e05061076685a2a39ca4c11fb2844b01c"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Georgiana-Andreea Onoleață <georgiana.onoleata@elastic.co>

x-pack/plugins/cases/public/components/configure_cases/connectors.test.tsx

@@ -21,12 +21,20 @@ import {
 import { ConnectorsDropdown } from './connectors_dropdown';
 import { connectors, actionTypes } from './__mock__';
 import { ConnectorTypes } from '../../../common/types/domain';
+import userEvent from '@testing-library/user-event';
+import { useApplicationCapabilities } from '../../common/lib/kibana';
+
+const useApplicationCapabilitiesMock = useApplicationCapabilities as jest.Mocked<
+  typeof useApplicationCapabilities
+>;
+jest.mock('../../common/lib/kibana');
 
 describe('Connectors', () => {
   let wrapper: ReactWrapper;
   let appMockRender: AppMockRenderer;
   const onChangeConnector = jest.fn();
   const handleShowEditFlyout = jest.fn();
+  const onAddNewConnector = jest.fn();
 
   const props: Props = {
     actionTypes,
@@ -38,6 +46,7 @@ describe('Connectors', () => {
     onChangeConnector,
     selectedConnector: { id: 'none', type: ConnectorTypes.none },
     updateConnectorDisabled: false,
+    onAddNewConnector,
   };
 
   beforeAll(() => {
@@ -104,12 +113,16 @@ describe('Connectors', () => {
   });
 
   it('shows the add connector button', () => {
-    wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
-    wrapper.update();
+    appMockRender.render(<Connectors {...props} />);
 
-    expect(
-      wrapper.find('button[data-test-subj="dropdown-connector-add-connector"]').exists()
-    ).toBeTruthy();
+    expect(screen.getByTestId('add-new-connector')).toBeInTheDocument();
+  });
+
+  it('shows the add connector flyout when the button is clicked', async () => {
+    appMockRender.render(<Connectors {...props} />);
+
+    await userEvent.click(await screen.findByTestId('add-new-connector'));
+    expect(onAddNewConnector).toHaveBeenCalled();
   });
 
   it('the text of the update button is shown correctly', () => {
@@ -156,16 +169,14 @@ describe('Connectors', () => {
   });
 
   it('shows the actions permission message if the user does not have read access to actions', async () => {
-    appMockRender.coreStart.application.capabilities = {
-      ...appMockRender.coreStart.application.capabilities,
-      actions: { save: false, show: false },
-    };
+    useApplicationCapabilitiesMock().actions = { crud: false, read: false };
+
+    appMockRender.render(<Connectors {...props} />);
 
-    const result = appMockRender.render(<Connectors {...props} />);
     expect(
-      result.getByTestId('configure-case-connector-permissions-error-msg')
+      await screen.findByTestId('configure-case-connector-permissions-error-msg')
     ).toBeInTheDocument();
-    expect(result.queryByTestId('case-connectors-dropdown')).toBe(null);
+    expect(screen.queryByTestId('case-connectors-dropdown')).not.toBeInTheDocument();
   });
 
   it('shows the actions permission message if the user does not have access to case connector', async () => {
@@ -177,4 +188,12 @@ describe('Connectors', () => {
     ).toBeInTheDocument();
     expect(result.queryByTestId('case-connectors-dropdown')).toBe(null);
   });
+
+  it('it should hide the "Add Connector" button when the user lacks the capability to add a new connector', () => {
+    useApplicationCapabilitiesMock().actions = { crud: false, read: true };
+
+    appMockRender.render(<Connectors {...props} />);
+
+    expect(screen.queryByTestId('add-new-connector')).not.toBeInTheDocument();
+  });
 });

x-pack/plugins/cases/public/components/configure_cases/connectors.tsx

@@ -13,10 +13,9 @@ import {
   EuiFlexItem,
   EuiLink,
   EuiText,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 
-import { css } from '@emotion/react';
-
 import { ConnectorsDropdown } from './connectors_dropdown';
 import * as i18n from './translations';
 
@@ -39,6 +38,7 @@ export interface Props {
   onChangeConnector: (id: string) => void;
   selectedConnector: { id: string; type: ConnectorTypes };
   updateConnectorDisabled: boolean;
+  onAddNewConnector: () => void;
 }
 const ConnectorsComponent: React.FC<Props> = ({
   actionTypes,
@@ -50,8 +50,10 @@ const ConnectorsComponent: React.FC<Props> = ({
   onChangeConnector,
   selectedConnector,
   updateConnectorDisabled,
+  onAddNewConnector,
 }) => {
   const { actions } = useApplicationCapabilities();
+  const canSave = actions.crud;
   const connector = useMemo(
     () => connectors.find((c) => c.id === selectedConnector.id),
     [connectors, selectedConnector.id]
@@ -95,13 +97,19 @@ const ConnectorsComponent: React.FC<Props> = ({
       >
         <EuiFormRow
           fullWidth
-          css={css`
-            label {
-              width: 100%;
-            }
-          `}
           label={dropDownLabel}
           data-test-subj="case-connectors-form-row"
+          labelAppend={
+            canSave ? (
+              <EuiButtonEmpty
+                size="xs"
+                data-test-subj="add-new-connector"
+                onClick={onAddNewConnector}
+              >
+                {i18n.ADD_CONNECTOR}
+              </EuiButtonEmpty>
+            ) : null
+          }
         >
           <EuiFlexGroup direction="column">
             <EuiFlexItem grow={false}>
@@ -113,7 +121,6 @@ const ConnectorsComponent: React.FC<Props> = ({
                   isLoading={isLoading}
                   onChange={onChangeConnector}
                   data-test-subj="case-connectors-dropdown"
-                  appendAddConnectorButton={true}
                 />
               ) : (
                 <EuiText data-test-subj="configure-case-connector-permissions-error-msg" size="s">

x-pack/plugins/cases/public/components/configure_cases/connectors_dropdown.test.tsx

@@ -15,13 +15,6 @@ import type { Props } from './connectors_dropdown';
 import { ConnectorsDropdown } from './connectors_dropdown';
 import { TestProviders } from '../../common/mock';
 import { connectors } from './__mock__';
-import userEvent from '@testing-library/user-event';
-import { useApplicationCapabilities } from '../../common/lib/kibana';
-
-const useApplicationCapabilitiesMock = useApplicationCapabilities as jest.Mocked<
-  typeof useApplicationCapabilities
->;
-jest.mock('../../common/lib/kibana');
 
 describe('ConnectorsDropdown', () => {
   let wrapper: ReactWrapper;
@@ -388,23 +381,4 @@ describe('ConnectorsDropdown', () => {
     );
     expect(tooltips[0]).toBeInTheDocument();
   });
-
-  test('it should hide the "Add New Connector" button when the user lacks the capability to add a new connector', async () => {
-    const selectedConnector = 'none';
-    useApplicationCapabilitiesMock().actions = { crud: false, read: true };
-    render(
-      <ConnectorsDropdown
-        appendAddConnectorButton={true}
-        connectors={[]}
-        selectedConnector={selectedConnector}
-        disabled={false}
-        isLoading={false}
-        onChange={() => {}}
-      />,
-      { wrapper: ({ children }) => <TestProviders>{children}</TestProviders> }
-    );
-
-    await userEvent.click(screen.getByTestId('dropdown-connectors'));
-    expect(screen.queryByTestId('dropdown-connector-add-connector')).not.toBeInTheDocument();
-  });
 });

x-pack/plugins/cases/public/components/configure_cases/connectors_dropdown.tsx

@@ -6,7 +6,6 @@
  */
 
 import React, { Suspense, useMemo } from 'react';
-import type { EuiThemeComputed } from '@elastic/eui';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -20,7 +19,7 @@ import { css } from '@emotion/react';
 
 import type { ActionConnector } from '../../containers/configure/types';
 import * as i18n from './translations';
-import { useApplicationCapabilities, useKibana } from '../../common/lib/kibana';
+import { useKibana } from '../../common/lib/kibana';
 import { getConnectorIcon, isDeprecatedConnector } from '../utils';
 
 export interface Props {
@@ -29,7 +28,6 @@ export interface Props {
   isLoading: boolean;
   onChange: (id: string) => void;
   selectedConnector: string;
-  appendAddConnectorButton?: boolean;
 }
 
 const suspendedComponentWithProps = (ComponentToSuspend: React.ComponentType) => {
@@ -65,37 +63,14 @@ const noConnectorOption = {
   'data-test-subj': 'dropdown-connector-no-connector',
 };
 
-const addNewConnector = (euiTheme: EuiThemeComputed<{}>) => ({
-  value: 'add-connector',
-  inputDisplay: (
-    <span
-      css={css`
-        font-size: ${euiTheme.font.scale.xs};
-        font-weight: ${euiTheme.font.weight.medium};
-        line-height: ${euiTheme.size.l};
-
-        &:hover {
-          text-decoration: underline;
-        }
-      `}
-    >
-      {i18n.ADD_NEW_CONNECTOR}
-    </span>
-  ),
-  'data-test-subj': 'dropdown-connector-add-connector',
-});
-
 const ConnectorsDropdownComponent: React.FC<Props> = ({
   connectors,
   disabled,
   isLoading,
   onChange,
   selectedConnector,
-  appendAddConnectorButton = false,
 }) => {
   const { triggersActionsUi } = useKibana().services;
-  const { actions } = useApplicationCapabilities();
-  const canSave = actions.crud;
   const { euiTheme } = useEuiTheme();
   const connectorsAsOptions = useMemo(() => {
     const connectorsFormatted = connectors.reduce(
@@ -152,10 +127,6 @@ const ConnectorsDropdownComponent: React.FC<Props> = ({
       [noConnectorOption]
     );
 
-    if (appendAddConnectorButton && canSave) {
-      return [...connectorsFormatted, addNewConnector(euiTheme)];
-    }
-
     return connectorsFormatted;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [connectors]);

x-pack/plugins/cases/public/components/configure_cases/index.test.tsx

@@ -565,8 +565,7 @@ describe('ConfigureCases', () => {
         wrappingComponent: TestProviders as ComponentType<React.PropsWithChildren<{}>>,
       });
 
-      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
-      wrapper.find('button[data-test-subj="dropdown-connector-add-connector"]').simulate('click');
+      wrapper.find('button[data-test-subj="add-new-connector"]').simulate('click');
 
       await waitFor(() => {
         wrapper.update();

x-pack/plugins/cases/public/components/configure_cases/index.tsx

@@ -215,6 +215,10 @@ export const ConfigureCases: React.FC = React.memo(() => {
     []
   );
 
+  const onAddNewConnector = useCallback(() => {
+    setFlyOutVisibility({ type: 'addConnector', visible: true });
+  }, []);
+
   const onChangeConnector = useCallback(
     (id: string) => {
       if (id === 'add-connector') {
@@ -577,6 +581,7 @@ export const ConfigureCases: React.FC = React.memo(() => {
                   onChangeConnector={onChangeConnector}
                   selectedConnector={connector}
                   updateConnectorDisabled={updateConnectorDisabled || !permissions.update}
+                  onAddNewConnector={onAddNewConnector}
                 />
               </div>
               <EuiSpacer size="xl" />

x-pack/plugins/cases/public/components/configure_cases/translations.ts

@@ -35,6 +35,10 @@ export const ADD_NEW_CONNECTOR = i18n.translate('xpack.cases.configureCases.addN
   defaultMessage: 'Add new connector',
 });
 
+export const ADD_CONNECTOR = i18n.translate('xpack.cases.configureCases.addConnector', {
+  defaultMessage: 'Add connector',
+});
+
 export const CASE_CLOSURE_OPTIONS_TITLE = i18n.translate(
   'xpack.cases.configureCases.caseClosureOptionsTitle',
   {

x-pack/plugins/cases/public/components/connector_selector/form.tsx

@@ -12,9 +12,17 @@ import { css } from '@emotion/react';
 
 import type { FieldHook } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
 import { getFieldValidityAndErrorMessage } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
+import { i18n } from '@kbn/i18n';
 import type { ActionConnector } from '../../../common/types/domain';
 import { ConnectorsDropdown } from '../configure_cases/connectors_dropdown';
 
+const ADD_CONNECTOR_HELPER_TEXT = i18n.translate(
+  'xpack.cases.connectorSelector.addConnectorHelperText',
+  {
+    defaultMessage: 'Go to Cases > Settings to add an external incident management system',
+  }
+);
+
 interface ConnectorSelectorProps {
   connectors: ActionConnector[];
   dataTestSubj: string;
@@ -60,7 +68,7 @@ export const ConnectorSelector = ({
       describedByIds={idAria ? [idAria] : undefined}
       error={errorMessage}
       fullWidth
-      helpText={field.helpText}
+      helpText={ADD_CONNECTOR_HELPER_TEXT}
       isInvalid={isInvalid}
       label={field.label}
       labelAppend={field.labelAppend}

x-pack/test/functional_with_es_ssl/apps/cases/group2/configure.ts

@@ -52,8 +52,7 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
       });
 
       it('opens and closes the connectors flyout correctly', async () => {
-        await common.clickAndValidate('dropdown-connectors', 'dropdown-connector-add-connector');
-        await common.clickAndValidate('dropdown-connector-add-connector', 'euiFlyoutCloseButton');
+        await common.clickAndValidate('add-new-connector', 'euiFlyoutCloseButton');
         await testSubjects.click('euiFlyoutCloseButton');
         expect(await testSubjects.exists('euiFlyoutCloseButton')).to.be(false);
       });

x-pack/test_serverless/functional/test_suites/observability/cases/configure.ts

@@ -66,8 +66,7 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
       });
 
       it('opens and closes the connectors flyout correctly', async () => {
-        await common.clickAndValidate('dropdown-connectors', 'dropdown-connector-add-connector');
-        await common.clickAndValidate('dropdown-connector-add-connector', 'euiFlyoutCloseButton');
+        await common.clickAndValidate('add-new-connector', 'euiFlyoutCloseButton');
         await testSubjects.click('euiFlyoutCloseButton');
         expect(await testSubjects.exists('euiFlyoutCloseButton')).to.be(false);
       });

x-pack/test_serverless/functional/test_suites/security/ftr/cases/configure.ts

@@ -66,8 +66,7 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
       });
 
       it('opens and closes the connectors flyout correctly', async () => {
-        await common.clickAndValidate('dropdown-connectors', 'dropdown-connector-add-connector');
-        await common.clickAndValidate('dropdown-connector-add-connector', 'euiFlyoutCloseButton');
+        await common.clickAndValidate('add-new-connector', 'euiFlyoutCloseButton');
         await testSubjects.click('euiFlyoutCloseButton');
         expect(await testSubjects.exists('euiFlyoutCloseButton')).to.be(false);
       });