[8.x] [Search][A11Y] Playground -> Open AI form (#202071) (#204428)

# Backport This will backport the following commits from `main` to `8.x`: - [[Search][A11Y] Playground -> Open AI form (#202071)](#202071)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Samiul Monir <[email protected]>
elastic · Dec 16, 2024 · 8cd6eab · 8cd6eab
1 parent e8e5844
commit 8cd6eab
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 11 deletions.
diff --git a/.../public/application/sections/action_connector_form/create_connector_flyout/index.test.tsx b/.../public/application/sections/action_connector_form/create_connector_flyout/index.test.tsx
@@ -9,7 +9,7 @@ import React, { lazy } from 'react';
 
 import { actionTypeRegistryMock } from '../../../action_type_registry.mock';
 import userEvent from '@testing-library/user-event';
-import { waitFor, act } from '@testing-library/react';
+import { waitFor, act, screen } from '@testing-library/react';
 import CreateConnectorFlyout from '.';
 import { AppMockRenderer, createAppMockRenderer } from '../../test_utils';
 import { TECH_PREVIEW_LABEL } from '../../translations';
@@ -426,7 +426,7 @@ describe('CreateConnectorFlyout', () => {
 
   describe('Submitting', () => {
     it('creates a connector correctly', async () => {
-      const { getByTestId } = appMockRenderer.render(
+      const { getByTestId, queryByTestId } = appMockRenderer.render(
         <CreateConnectorFlyout
           actionTypeRegistry={actionTypeRegistry}
           onClose={onClose}
@@ -469,6 +469,70 @@ describe('CreateConnectorFlyout', () => {
         name: 'My test',
         secrets: {},
       });
+      expect(queryByTestId('connector-form-header-error-label')).not.toBeInTheDocument();
+    });
+
+    it('show error message in the form header', async () => {
+      appMockRenderer.render(
+        <CreateConnectorFlyout
+          actionTypeRegistry={actionTypeRegistry}
+          onClose={onClose}
+          onConnectorCreated={onConnectorCreated}
+          onTestConnector={onTestConnector}
+        />
+      );
+
+      await userEvent.click(await screen.findByTestId(`${actionTypeModel.id}-card`));
+      expect(await screen.findByTestId('test-connector-text-field')).toBeInTheDocument();
+
+      await userEvent.type(
+        await screen.findByTestId('test-connector-text-field'),
+        'My text field',
+        {
+          delay: 100,
+        }
+      );
+
+      await userEvent.click(await screen.findByTestId('create-connector-flyout-save-btn'));
+      expect(onClose).not.toHaveBeenCalled();
+      expect(onConnectorCreated).not.toHaveBeenCalled();
+      expect(await screen.findByTestId('connector-form-header-error-label')).toBeInTheDocument();
+    });
+
+    it('removes error message from the form header', async () => {
+      appMockRenderer.render(
+        <CreateConnectorFlyout
+          actionTypeRegistry={actionTypeRegistry}
+          onClose={onClose}
+          onConnectorCreated={onConnectorCreated}
+          onTestConnector={onTestConnector}
+        />
+      );
+
+      await userEvent.click(await screen.findByTestId(`${actionTypeModel.id}-card`));
+      expect(await screen.findByTestId('test-connector-text-field')).toBeInTheDocument();
+
+      await userEvent.type(
+        await screen.findByTestId('test-connector-text-field'),
+        'My text field',
+        {
+          delay: 100,
+        }
+      );
+
+      await userEvent.click(await screen.findByTestId('create-connector-flyout-save-btn'));
+      expect(onClose).not.toHaveBeenCalled();
+      expect(onConnectorCreated).not.toHaveBeenCalled();
+      expect(await screen.findByTestId('connector-form-header-error-label')).toBeInTheDocument();
+
+      await userEvent.type(await screen.findByTestId('nameInput'), 'My test', {
+        delay: 100,
+      });
+
+      await userEvent.click(await screen.findByTestId('create-connector-flyout-save-btn'));
+      expect(onClose).toHaveBeenCalled();
+      expect(onConnectorCreated).toHaveBeenCalled();
+      expect(screen.queryByTestId('connector-form-header-error-label')).not.toBeInTheDocument();
     });
 
     it('runs pre submit validator correctly', async () => {

diff --git a/...ns_ui/public/application/sections/action_connector_form/create_connector_flyout/index.tsx b/...ns_ui/public/application/sections/action_connector_form/create_connector_flyout/index.tsx
@@ -9,6 +9,7 @@ import React, { memo, ReactNode, useCallback, useEffect, useRef, useState } from
 import {
   EuiButton,
   EuiButtonGroup,
+  EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -18,6 +19,7 @@ import {
 
 import { getConnectorCompatibility } from '@kbn/actions-plugin/common';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
 import {
   ActionConnector,
   ActionType,
@@ -60,6 +62,7 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
   const [actionType, setActionType] = useState<ActionType | null>(null);
   const [hasActionsUpgradeableByTrial, setHasActionsUpgradeableByTrial] = useState<boolean>(false);
   const canSave = hasSaveActionsCapability(capabilities);
+  const [showFormErrors, setShowFormErrors] = useState<boolean>(false);
 
   const [preSubmitValidationErrorMessage, setPreSubmitValidationErrorMessage] =
     useState<ReactNode>(null);
@@ -106,6 +109,7 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
 
   const setResetForm = (reset: ResetForm) => {
     resetConnectorForm.current = reset;
+    setShowFormErrors(false);
   };
 
   const onChangeGroupAction = (id: string) => {
@@ -127,6 +131,7 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
 
   const validateAndCreateConnector = useCallback(async () => {
     setPreSubmitValidationErrorMessage(null);
+    setShowFormErrors(false);
 
     const { isValid, data } = await submit();
     if (!isMounted.current) {
@@ -159,6 +164,8 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
 
       const createdConnector = await createConnector(validConnector);
       return createdConnector;
+    } else {
+      setShowFormErrors(true);
     }
   }, [submit, preSubmitValidator, createConnector]);
 
@@ -228,6 +235,23 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
                 <EuiSpacer size="xs" />
               </>
             )}
+            {showFormErrors && (
+              <>
+                <EuiCallOut
+                  size="s"
+                  color="danger"
+                  iconType="warning"
+                  data-test-subj="connector-form-header-error-label"
+                  title={i18n.translate(
+                    'xpack.triggersActionsUI.sections.actionConnectorAdd.headerFormLabel',
+                    {
+                      defaultMessage: 'There are errors in the form',
+                    }
+                  )}
+                />
+                <EuiSpacer size="m" />
+              </>
+            )}
             <ConnectorForm
               actionTypeModel={actionTypeModel}
               connector={initialConnector}

diff --git a/...ui/public/application/sections/action_connector_form/edit_connector_flyout/index.test.tsx b/...ui/public/application/sections/action_connector_form/edit_connector_flyout/index.test.tsx
@@ -9,7 +9,7 @@ import React, { lazy } from 'react';
 
 import { actionTypeRegistryMock } from '../../../action_type_registry.mock';
 import userEvent from '@testing-library/user-event';
-import { waitFor, act } from '@testing-library/react';
+import { waitFor, act, screen } from '@testing-library/react';
 import EditConnectorFlyout from '.';
 import { ActionConnector, EditConnectorTabs, GenericValidationResult } from '../../../../types';
 import { AppMockRenderer, createAppMockRenderer } from '../../test_utils';
@@ -415,7 +415,7 @@ describe('EditConnectorFlyout', () => {
 
   describe('Submitting', () => {
     it('updates the connector correctly', async () => {
-      const { getByTestId } = appMockRenderer.render(
+      const { getByTestId, queryByTestId } = appMockRenderer.render(
         <EditConnectorFlyout
           actionTypeRegistry={actionTypeRegistry}
           onClose={onClose}
@@ -459,6 +459,7 @@ describe('EditConnectorFlyout', () => {
         name: 'My test',
         secrets: {},
       });
+      expect(queryByTestId('connector-form-header-error-label')).not.toBeInTheDocument();
     });
 
     it('updates connector form field with latest value', async () => {
@@ -555,6 +556,39 @@ describe('EditConnectorFlyout', () => {
       });
     });
 
+    it('show error message in the form header', async () => {
+      appMockRenderer.render(
+        <EditConnectorFlyout
+          actionTypeRegistry={actionTypeRegistry}
+          onClose={onClose}
+          connector={connector}
+          onConnectorUpdated={onConnectorUpdated}
+        />
+      );
+
+      expect(await screen.findByTestId('test-connector-text-field')).toBeInTheDocument();
+      await userEvent.clear(screen.getByTestId('nameInput'));
+      await userEvent.click(screen.getByTestId('edit-connector-flyout-save-btn'));
+      expect(await screen.findByTestId('connector-form-header-error-label')).toBeInTheDocument();
+    });
+
+    it('removes error message from the form header', async () => {
+      appMockRenderer.render(
+        <EditConnectorFlyout
+          actionTypeRegistry={actionTypeRegistry}
+          onClose={onClose}
+          connector={connector}
+          onConnectorUpdated={onConnectorUpdated}
+        />
+      );
+
+      await userEvent.clear(screen.getByTestId('nameInput'));
+      await userEvent.type(screen.getByTestId('nameInput'), 'My new name');
+      await userEvent.type(screen.getByTestId('test-connector-secret-text-field'), 'password');
+      await userEvent.click(screen.getByTestId('edit-connector-flyout-save-btn'));
+      expect(screen.queryByTestId('connector-form-header-error-label')).not.toBeInTheDocument();
+    });
+
     it('runs pre submit validator correctly', async () => {
       const errorActionTypeModel = actionTypeRegistryMock.createMockActionTypeModel({
         actionConnectorFields: lazy(() => import('../connector_error_mock')),

diff --git a/...ions_ui/public/application/sections/action_connector_form/edit_connector_flyout/index.tsx b/...ions_ui/public/application/sections/action_connector_form/edit_connector_flyout/index.tsx
@@ -6,7 +6,14 @@
  */
 
 import React, { memo, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { EuiFlyout, EuiFlyoutBody, EuiButton, EuiConfirmModal } from '@elastic/eui';
+import {
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiButton,
+  EuiConfirmModal,
+  EuiCallOut,
+  EuiSpacer,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { ActionTypeExecutorResult, isActionTypeExecutorResult } from '@kbn/actions-plugin/common';
@@ -62,6 +69,7 @@ const EditConnectorFlyoutComponent: React.FC<EditConnectorFlyoutProps> = ({
   const canSave = hasSaveActionsCapability(capabilities);
   const { isLoading: isUpdatingConnector, updateConnector } = useUpdateConnector();
   const { isLoading: isExecutingConnector, executeConnector } = useExecuteConnector();
+  const [showFormErrors, setShowFormErrors] = useState<boolean>(false);
 
   const [preSubmitValidationErrorMessage, setPreSubmitValidationErrorMessage] =
     useState<ReactNode>(null);
@@ -90,6 +98,7 @@ const EditConnectorFlyoutComponent: React.FC<EditConnectorFlyoutProps> = ({
       if (nextPage === EditConnectorTabs.Configuration && testExecutionResult !== none) {
         setTestExecutionResult(none);
       }
+      setShowFormErrors(false);
       setTab(nextPage);
     },
     [testExecutionResult, setTestExecutionResult]
@@ -146,6 +155,7 @@ const EditConnectorFlyoutComponent: React.FC<EditConnectorFlyoutProps> = ({
 
   const onClickSave = useCallback(async () => {
     setPreSubmitValidationErrorMessage(null);
+    setShowFormErrors(false);
 
     const { isValid, data } = await submit();
     if (!isMounted.current) {
@@ -194,6 +204,8 @@ const EditConnectorFlyoutComponent: React.FC<EditConnectorFlyoutProps> = ({
       }
 
       return updatedConnector;
+    } else {
+      setShowFormErrors(true);
     }
   }, [
     onConnectorUpdated,
@@ -218,6 +230,23 @@ const EditConnectorFlyoutComponent: React.FC<EditConnectorFlyoutProps> = ({
         <>
           {isEdit && (
             <>
+              {showFormErrors && (
+                <>
+                  <EuiCallOut
+                    size="s"
+                    color="danger"
+                    iconType="warning"
+                    data-test-subj="connector-form-header-error-label"
+                    title={i18n.translate(
+                      'xpack.triggersActionsUI.sections.editConnectorForm.headerFormLabel',
+                      {
+                        defaultMessage: 'There are errors in the form',
+                      }
+                    )}
+                  />
+                  <EuiSpacer size="m" />
+                </>
+              )}
               <ConnectorForm
                 actionTypeModel={actionTypeModel}
                 connector={getConnectorWithoutSecrets(connector)}
@@ -265,17 +294,18 @@ const EditConnectorFlyoutComponent: React.FC<EditConnectorFlyoutProps> = ({
     );
   }, [
     connector,
+    docLinks.links.alerting.preconfiguredConnectors,
     actionTypeModel,
     isEdit,
-    docLinks.links.alerting.preconfiguredConnectors,
-    hasErrors,
-    isFormModified,
-    isSaved,
-    isSaving,
+    showFormErrors,
+    onFormModifiedChange,
     preSubmitValidationErrorMessage,
     showButtons,
+    isSaved,
+    isSaving,
     onClickSave,
-    onFormModifiedChange,
+    isFormModified,
+    hasErrors,
   ]);
 
   const renderTestTab = useCallback(() => {