Adding header text when all fields are required in the form

elastic · Nov 29, 2024 · 16ea0af · 16ea0af
1 parent 721b4be
commit 16ea0af
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 1 deletion.
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
@@ -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,35 @@ describe('CreateConnectorFlyout', () => {
         name: 'My test',
         secrets: {},
       });
+      expect(queryByTestId('requiredFieldErrorMsg')).not.toBeInTheDocument();
+    });
+
+    it('show Required all fields message', async () => {
+      const { getByTestId } = appMockRenderer.render(
+        <CreateConnectorFlyout
+          actionTypeRegistry={actionTypeRegistry}
+          onClose={onClose}
+          onConnectorCreated={onConnectorCreated}
+          onTestConnector={onTestConnector}
+        />
+      );
+      await act(() => Promise.resolve());
+
+      await userEvent.click(getByTestId(`${actionTypeModel.id}-card`));
+
+      await waitFor(() => {
+        expect(getByTestId('test-connector-text-field')).toBeInTheDocument();
+      });
+
+      await userEvent.type(getByTestId('test-connector-text-field'), 'My text field', {
+        delay: 100,
+      });
+
+      await userEvent.click(getByTestId('create-connector-flyout-save-btn'));
+
+      expect(onClose).not.toHaveBeenCalled();
+      expect(onConnectorCreated).not.toHaveBeenCalled();
+      expect(getByTestId('requiredFieldErrorMsg')).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
@@ -60,6 +60,7 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
   const [actionType, setActionType] = useState<ActionType | null>(null);
   const [hasActionsUpgradeableByTrial, setHasActionsUpgradeableByTrial] = useState<boolean>(false);
   const canSave = hasSaveActionsCapability(capabilities);
+  const [isRequiredFieldError, setIsRequiredFieldError] = useState<boolean>(false);
 
   const [preSubmitValidationErrorMessage, setPreSubmitValidationErrorMessage] =
     useState<ReactNode>(null);
@@ -106,6 +107,7 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
 
   const setResetForm = (reset: ResetForm) => {
     resetConnectorForm.current = reset;
+    setIsRequiredFieldError(false);
   };
 
   const onChangeGroupAction = (id: string) => {
@@ -159,6 +161,11 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
 
       const createdConnector = await createConnector(validConnector);
       return createdConnector;
+    } else {
+      if (Object.keys(data).length === 0) {
+        setIsRequiredFieldError(true);
+      }
+      return;
     }
   }, [submit, preSubmitValidator, createConnector]);
 
@@ -228,6 +235,17 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
                 <EuiSpacer size="xs" />
               </>
             )}
+            {isRequiredFieldError && (
+              <>
+                <p data-test-subj="requiredFieldErrorMsg">
+                  <FormattedMessage
+                    id="xpack.triggersActionsUI.sections.actionConnectorAdd.requiredFieldError"
+                    defaultMessage="All fields are required"
+                  />
+                </p>
+                <EuiSpacer size="m" />
+              </>
+            )}
             <ConnectorForm
               actionTypeModel={actionTypeModel}
               connector={initialConnector}