No blank backend role before adding a new one in Create User page

public/apps/configuration/panels/internal-user-edit/backend-role-panel.tsx

@@ -22,35 +22,43 @@ import {
   EuiFormRow,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash';
-import React, { Dispatch, Fragment, SetStateAction } from 'react';
+import React, { Dispatch, Fragment, SetStateAction, useState } from 'react';
 import {
   appendElementToArray,
   removeElementFromArray,
   updateElementInArrayHandler,
 } from '../../utils/array-state-utils';
 import { PanelWithHeader } from '../../utils/panel-with-header';
-import { FormRow } from '../../utils/form-row';
 import { DocLinks, LIMIT_WIDTH_INPUT_CLASS } from '../../constants';
 
 function generateBackendRolesPanels(
   backendRoles: string[],
-  setBackendRoles: Dispatch<SetStateAction<string[]>>
+  setBackendRoles: Dispatch<SetStateAction<string[]>>,
+  emptyRoleIndex: number,
+  roleEmptyErrorMessage: string,
+  setRoleEmptyErrorMessage: Dispatch<SetStateAction<string>>
 ) {
   const panels = backendRoles.map((backendRole, arrayIndex) => {
     return (
       <Fragment key={`backend-role-${arrayIndex}`}>
         <EuiFlexGroup>
           <EuiFlexItem className={LIMIT_WIDTH_INPUT_CLASS}>
-            <FormRow headerText={arrayIndex === 0 ? 'Backend role' : ''}>
+            <EuiFormRow
+              label={arrayIndex === 0 ? 'Backend role' : ''}
+              error={roleEmptyErrorMessage}
+              isInvalid={arrayIndex === emptyRoleIndex && !isEmpty(roleEmptyErrorMessage)}
+            >
               <EuiFieldText
+                isInvalid={arrayIndex === emptyRoleIndex && !isEmpty(roleEmptyErrorMessage)}
                 id={`backend-role-${arrayIndex}`}
                 value={backendRole}
-                onChange={(e) =>
-                  updateElementInArrayHandler(setBackendRoles, [arrayIndex])(e.target.value)
-                }
+                onChange={(e) => {
+                  updateElementInArrayHandler(setBackendRoles, [arrayIndex])(e.target.value);
+                  setRoleEmptyErrorMessage('');
+                }}
                 placeholder="Type in backend role"
               />
-            </FormRow>
+            </EuiFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiFormRow hasEmptyLabelSpace={arrayIndex === 0 ? true : false}>
@@ -67,6 +75,7 @@ function generateBackendRolesPanels(
       </Fragment>
     );
   });
+
   return <>{panels}</>;
 }
 
@@ -75,6 +84,8 @@ export function BackendRolePanel(props: {
   setState: Dispatch<SetStateAction<string[]>>;
 }) {
   const { state, setState } = props;
+  const [roleEmptyErrorMessage, setRoleEmptyErrorMessage] = useState('');
+  const [emptyRoleIndex, setEmptyRoleIndex] = useState(-1);
   // Show one empty row if there is no data.
   if (isEmpty(state)) {
     setState(['']);
@@ -86,12 +97,24 @@ export function BackendRolePanel(props: {
       helpLink={DocLinks.AccessControlDoc}
       optional
     >
-      {generateBackendRolesPanels(state, setState)}
+      {generateBackendRolesPanels(
+        state,
+        setState,
+        emptyRoleIndex,
+        roleEmptyErrorMessage,
+        setRoleEmptyErrorMessage
+      )}
       <EuiSpacer />
       <EuiButton
         id="backend-role-add-row"
         onClick={() => {
-          appendElementToArray(setState, [], '');
+          if (state.indexOf('') !== -1) {
+            setRoleEmptyErrorMessage('Type a backend role before adding a new one');
+            setEmptyRoleIndex(state.indexOf(''));
+          } else {
+            setRoleEmptyErrorMessage('');
+            appendElementToArray(setState, [], '');
+          }
         }}
       >
         Add another backend role

public/apps/configuration/panels/internal-user-edit/test/__snapshots__/backend-role-panel.test.tsx.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`User editing - backend role panel BackendRolePanel add backend role when one of the previous roles is blank 1`] = `
+<PanelWithHeader
+  headerSubText="Backend roles are used to map users from external authentication systems, such as LDAP or SAML to OpenSearch security roles."
+  headerText="Backend roles"
+  helpLink="https://opensearch.org/docs/latest/security-plugin/access-control/index/"
+  optional={true}
+>
+  <EuiFlexGroup>
+    <EuiFlexItem
+      className="limit-width-input"
+    >
+      <EuiFormRow
+        describedByIds={Array []}
+        display="row"
+        error=""
+        fullWidth={false}
+        hasChildLabel={true}
+        hasEmptyLabelSpace={false}
+        isInvalid={false}
+        label="Backend role"
+        labelType="label"
+      >
+        <EuiFieldText
+          id="backend-role-0"
+          isInvalid={false}
+          onChange={[Function]}
+          placeholder="Type in backend role"
+          value="admin"
+        />
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiFormRow
+        describedByIds={Array []}
+        display="row"
+        fullWidth={false}
+        hasChildLabel={true}
+        hasEmptyLabelSpace={true}
+        labelType="label"
+      >
+        <EuiButton
+          color="danger"
+          id="backend-role-delete-0"
+          onClick={[Function]}
+        >
+          Remove
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup>
+    <EuiFlexItem
+      className="limit-width-input"
+    >
+      <EuiFormRow
+        describedByIds={Array []}
+        display="row"
+        error=""
+        fullWidth={false}
+        hasChildLabel={true}
+        hasEmptyLabelSpace={false}
+        isInvalid={false}
+        label=""
+        labelType="label"
+      >
+        <EuiFieldText
+          id="backend-role-1"
+          isInvalid={false}
+          onChange={[Function]}
+          placeholder="Type in backend role"
+          value="HR"
+        />
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiFormRow
+        describedByIds={Array []}
+        display="row"
+        fullWidth={false}
+        hasChildLabel={true}
+        hasEmptyLabelSpace={false}
+        labelType="label"
+      >
+        <EuiButton
+          color="danger"
+          id="backend-role-delete-1"
+          onClick={[Function]}
+        >
+          Remove
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer />
+  <EuiButton
+    id="backend-role-add-row"
+    onClick={[Function]}
+  >
+    Add another backend role
+  </EuiButton>
+</PanelWithHeader>
+`;
+
+exports[`User editing - backend role panel BackendRolePanel add backend role when the previous role is blank 1`] = `
+<PanelWithHeader
+  headerSubText="Backend roles are used to map users from external authentication systems, such as LDAP or SAML to OpenSearch security roles."
+  headerText="Backend roles"
+  helpLink="https://opensearch.org/docs/latest/security-plugin/access-control/index/"
+  optional={true}
+>
+  <EuiSpacer />
+  <EuiButton
+    id="backend-role-add-row"
+    onClick={[Function]}
+  >
+    Add another backend role
+  </EuiButton>
+</PanelWithHeader>
+`;

public/apps/configuration/panels/internal-user-edit/test/backend-role-panel.test.tsx

@@ -13,8 +13,8 @@
  *   permissions and limitations under the License.
  */
 
-import { EuiFieldText, EuiFlexGroup } from '@elastic/eui';
-import { shallow } from 'enzyme';
+import { EuiFieldText, EuiFlexGroup, EuiFormRow } from '@elastic/eui';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import {
   appendElementToArray,
@@ -27,6 +27,7 @@ jest.mock('../../../utils/array-state-utils', () => ({
   appendElementToArray: jest.fn(),
   removeElementFromArray: jest.fn(),
   updateElementInArrayHandler: jest.fn().mockReturnValue(jest.fn()),
+  setRoleEmptyErrorMessage: jest.fn(),
 }));
 
 describe('User editing - backend role panel', () => {
@@ -71,5 +72,20 @@ describe('User editing - backend role panel', () => {
 
       expect(removeElementFromArray).toBeCalledWith(setState, [], 0);
     });
+
+    // TODO: Fix the tests for backend role error message
+    it('add backend role when the previous role is blank', () => {
+      const component = shallow(<BackendRolePanel state={[]} setState={setState} />);
+      component.find('#backend-role-add-row').simulate('click');
+      component.find('#backend-role-add-row').simulate('click');
+      expect(component).toMatchSnapshot();
+    });
+
+    it('add backend role when one of the previous roles is blank', () => {
+      const component = shallow(<BackendRolePanel state={sampleState} setState={setState} />);
+      component.find('#backend-role-0').simulate('change', { target: { value: '' } });
+      component.find('#backend-role-add-row').simulate('click');
+      expect(component).toMatchSnapshot();
+    });
   });
 });