Skip to content
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.

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

[App Search] Credentials: implement working flyout form #81541

Merged
merged 9 commits into from
Oct 26, 2020
Prev Previous commit
Next Next commit
Add key read/write fields
cee-chen committed Oct 22, 2020
commit 8672affb7b55c458254b60952a6a121166768fe0
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { setMockValues, setMockActions } from '../../../../../__mocks__/kea.mock';

import React from 'react';
import { shallow } from 'enzyme';
import { EuiCheckbox } from '@elastic/eui';

import { FormKeyReadWriteAccess } from './';

describe('FormKeyReadWriteAccess', () => {
const values = {
activeApiToken: { read: false, write: false },
};
const actions = {
setTokenReadWrite: jest.fn(),
};

beforeEach(() => {
jest.clearAllMocks();
setMockValues(values);
setMockActions(actions);
});

it('renders', () => {
const wrapper = shallow(<FormKeyReadWriteAccess />);

expect(wrapper.find('h3').text()).toEqual('Read and Write Access Levels');
expect(wrapper.find(EuiCheckbox)).toHaveLength(2);
});

it('controls the checked state for the read checkbox', () => {
setMockValues({
...values,
activeApiToken: { read: true, write: false },
});
const wrapper = shallow(<FormKeyReadWriteAccess />);

expect(wrapper.find('#read').prop('checked')).toEqual(true);
expect(wrapper.find('#write').prop('checked')).toEqual(false);
});

it('controls the checked state for the write checkbox', () => {
setMockValues({
...values,
activeApiToken: { read: false, write: true },
});
const wrapper = shallow(<FormKeyReadWriteAccess />);

expect(wrapper.find('#read').prop('checked')).toEqual(false);
expect(wrapper.find('#write').prop('checked')).toEqual(true);
});

it('calls setTokenReadWrite when the checkboxes are changed', () => {
const wrapper = shallow(<FormKeyReadWriteAccess />);

wrapper.find('#read').simulate('change', { target: { name: 'read', checked: true } });
expect(actions.setTokenReadWrite).toHaveBeenCalledWith({ name: 'read', checked: true });

wrapper.find('#write').simulate('change', { target: { name: 'write', checked: false } });
expect(actions.setTokenReadWrite).toHaveBeenCalledWith({ name: 'write', checked: false });
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { useValues, useActions } from 'kea';
import { EuiCheckbox, EuiText, EuiTitle, EuiSpacer, EuiPanel } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

import { CredentialsLogic } from '../../credentials_logic';
import { ITokenReadWrite } from '../../types';

export const FormKeyReadWriteAccess: React.FC = () => {
const { setTokenReadWrite } = useActions(CredentialsLogic);
const { activeApiToken } = useValues(CredentialsLogic);

return (
<>
<EuiSpacer size="s" />
<EuiPanel>
<EuiTitle size="xs">
<h3>
{i18n.translate('xpack.enterpriseSearch.appSearch.tokens.formReadWrite.label', {
defaultMessage: 'Read and Write Access Levels',
})}
</h3>
</EuiTitle>
<EuiText>
{i18n.translate('xpack.enterpriseSearch.appSearch.tokens.formReadWrite.helpText', {
defaultMessage: 'Only applies to Private API Keys.',
})}
</EuiText>
<EuiSpacer size="s" />
<EuiCheckbox
name="read"
id="read"
checked={activeApiToken.read}
onChange={(e) => setTokenReadWrite(e.target as ITokenReadWrite)}
label={i18n.translate('xpack.enterpriseSearch.appSearch.tokens.formReadWrite.readLabel', {
defaultMessage: 'Read Access',
})}
/>
<EuiCheckbox
name="write"
id="write"
checked={activeApiToken.write}
onChange={(e) => setTokenReadWrite(e.target as ITokenReadWrite)}
label={i18n.translate(
'xpack.enterpriseSearch.appSearch.tokens.formReadWrite.writeLabel',
{ defaultMessage: 'Write Access' }
)}
/>
</EuiPanel>
</>
);
};