Skip to content

Commit

Permalink
No blank backend role before adding a new one in Create User page (#1384
Browse files Browse the repository at this point in the history 
)

* Add last backend role empty check

Signed-off-by: nursaadat <SNursultan@dar.kz>
Signed-off-by: Saadat Nursultan <nursultan.saadat@gmail.com>

* Add backend role empty check

Signed-off-by: nursaadat <SNursultan@dar.kz>
Signed-off-by: Saadat Nursultan <nursultan.saadat@gmail.com>

* Add strict comparison

Signed-off-by: nursaadat <SNursultan@dar.kz>
Signed-off-by: Saadat Nursultan <nursultan.saadat@gmail.com>

* Fix lint errors

Signed-off-by: nursaadat <SNursultan@dar.kz>
Signed-off-by: Saadat Nursultan <nursultan.saadat@gmail.com>

* Add tests for backend role panel

Signed-off-by: Saadat Nursultan <nursultan.saadat@gmail.com>

* Fix lint errors

Signed-off-by: Saadat Nursultan <nursultan.saadat@gmail.com>

---------

Signed-off-by: nursaadat <SNursultan@dar.kz>
Signed-off-by: Saadat Nursultan <nursultan.saadat@gmail.com>
Co-authored-by: nursaadat <SNursultan@dar.kz>
Co-authored-by: Saadat Nursultan <nursultan.saadat@gmail.com>
  • Loading branch information
@nurSaadat
3 people authored Apr 3, 2023
1 parent b3b3120 commit 5e99582
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 12 deletions.
43 changes: 33 additions & 10 deletions public/apps/configuration/panels/internal-user-edit/backend-role-panel.tsx
View file
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
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
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();
});
});
});

0 comments on commit 5e99582

Please sign in to comment.