External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-18 21:21:21 -03:30
Code Issues Packages Projects Releases Wiki Activity

Support file upload/drag and drop on credential mutliline fields

Browse Source
This commit is contained in:
mabashian 2020-08-21 08:08:51 -04:00
parent cce66e366f
commit 2d2108b1de
3 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
awx/ui_next/src/index.jsx
View File

@ -7,8 +7,8 @@ import { BrandName } from './variables';
document.title = `Ansible ${BrandName}`;
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
// <React.StrictMode>
<App />,
// </React.StrictMode>,
document.getElementById('app') || document.createElement('div')
);

22
awx/ui_next/src/screens/Credential/shared/CredentialForm.test.jsx
View File

@ -163,7 +163,7 @@ describe('<CredentialForm />', () => {
wrapper.find('textarea#credential-ssh_key_data').prop('value')
).toBe('');
await act(async () => {
wrapper.find('FileUpload').invoke('onChange')({
wrapper.find('FileUpload#credential-gce-file').invoke('onChange')({
name: 'foo.json',
text: () =>
'{"client_email":"testemail@ansible.com","project_id":"test123","private_key":"-----BEGIN PRIVATE KEY-----\\nAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\\n-----END PRIVATE KEY-----\\n"}',
@ -184,7 +184,9 @@ describe('<CredentialForm />', () => {
});
test('should clear expected fields when file clear button clicked', async () => {
await act(async () => {
wrapper.find('FileUploadField').invoke('onClearButtonClick')();
wrapper
.find('FileUploadField#credential-gce-file')
.invoke('onClearButtonClick')();
});
wrapper.update();
expect(wrapper.find('input#credential-username').prop('value')).toBe('');
@ -193,6 +195,20 @@ describe('<CredentialForm />', () => {
wrapper.find('textarea#credential-ssh_key_data').prop('value')
).toBe('');
});
test('should update field when RSA Private Key file uploaded', async () => {
await act(async () => {
wrapper.find('FileUpload#credential-ssh_key_data').invoke('onChange')(
'-----BEGIN PRIVATE KEY-----\\nBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB\\n-----END PRIVATE KEY-----\\n',
'foo.key'
);
});
wrapper.update();
expect(
wrapper.find('textarea#credential-ssh_key_data').prop('value')
).toBe(
'-----BEGIN PRIVATE KEY-----\\nBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB\\n-----END PRIVATE KEY-----\\n'
);
});
test('should show error when error thrown parsing JSON', async () => {
await act(async () => {
await wrapper
@ -204,7 +220,7 @@ describe('<CredentialForm />', () => {
'Select a JSON formatted service account key to autopopulate the following fields.'
);
await act(async () => {
wrapper.find('FileUpload').invoke('onChange')({
wrapper.find('FileUpload#credential-gce-file').invoke('onChange')({
name: 'foo.json',
text: () => '{not good json}',
});

32
awx/ui_next/src/screens/Credential/shared/CredentialFormFields/CredentialField.jsx
View File

@ -1,12 +1,13 @@
import React from 'react';
import React, { useState } from 'react';
import { useField, useFormikContext } from 'formik';
import { shape, string } from 'prop-types';
import styled from 'styled-components';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
FileUpload as PFFileUpload,
FormGroup,
InputGroup,
TextArea,
TextInput,
} from '@patternfly/react-core';
import { FieldTooltip, PasswordInput } from '../../../../components/FormField';
@ -16,19 +17,32 @@ import { required } from '../../../../util/validators';
import { CredentialPluginField } from './CredentialPlugins';
import BecomeMethodField from './BecomeMethodField';
const FileUpload = styled(PFFileUpload)`
flex-grow: 1;
`;
function CredentialInput({ fieldOptions, credentialKind, ...rest }) {
const [subFormField, meta] = useField(`inputs.${fieldOptions.id}`);
const [fileName, setFileName] = useState('');
const [fileIsUploading, setFileIsUploading] = useState(false);
const [subFormField, meta, helpers] = useField(`inputs.${fieldOptions.id}`);
const isValid = !(meta.touched && meta.error);
if (fieldOptions.multiline) {
const handleFileChange = (value, filename) => {
helpers.setValue(value);
setFileName(filename);
};
return (
<TextArea
<FileUpload
{...subFormField}
id={`credential-${fieldOptions.id}`}
rows={6}
resizeOrientation="vertical"
onChange={(value, event) => {
subFormField.onChange(event);
}}
type="text"
filename={fileName}
onChange={handleFileChange}
onReadStarted={() => setFileIsUploading(true)}
onReadFinished={() => setFileIsUploading(false)}
isLoading={fileIsUploading}
allowEditingUploadedText
validated={isValid ? 'default' : 'error'}
/>
);