Skip to content

[Backport 2.x] No blank backend role before adding a new one in Create User page #1391

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RyanL1997 merged 1 commit into from
Apr 4, 2023
Merged

[Backport 2.x] No blank backend role before adding a new one in Create User page #1391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 33 additions & 10 deletions public/apps/configuration/panels/internal-user-edit/backend-role-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -67,6 +75,7 @@ function generateBackendRolesPanels(
</Fragment>
);
});

return <>{panels}</>;
}

Expand All @@ -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(['']);
Expand All @@ -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
Expand Down
125 changes: 125 additions & 0 deletions ...nfiguration/panels/internal-user-edit/test/__snapshots__/backend-role-panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
`;
20 changes: 18 additions & 2 deletions public/apps/configuration/panels/internal-user-edit/test/backend-role-panel.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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();
});
});
});