Merge pull request #7960 from mabashian/6113-6703-cred-file-upload

Support file upload/drag and drop on credential mutliline fields

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/screens/Credential/shared/CredentialForm.jsx

@@ -224,6 +224,7 @@ function CredentialForm({
               <FormFullWidthLayout>
                 <ActionGroup>
                   <Button
+                    id="credential-form-save-button"
                     aria-label={i18n._(t`Save`)}
                     variant="primary"
                     type="button"
@@ -235,6 +236,7 @@ function CredentialForm({
                     credentialTypes[formik.values.credential_type]?.kind ===
                       'external' && (
                       <Button
+                        id="credential-form-test-button"
                         aria-label={i18n._(t`Test`)}
                         variant="secondary"
                         type="button"
@@ -245,6 +247,7 @@ function CredentialForm({
                       </Button>
                     )}
                   <Button
+                    id="credential-form-cancel-button"
                     aria-label={i18n._(t`Cancel`)}
                     variant="secondary"
                     type="button"

awx/ui_next/src/screens/Credential/shared/CredentialForm.test.jsx

@@ -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}',
         });

awx/ui_next/src/screens/Credential/shared/CredentialFormFields/CredentialField.jsx

@@ -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}
+        type="text"
-        resizeOrientation="vertical"
+        filename={fileName}
-        onChange={(value, event) => {
+        onChange={handleFileChange}
-          subFormField.onChange(event);
+        onReadStarted={() => setFileIsUploading(true)}
-        }}
+        onReadFinished={() => setFileIsUploading(false)}
+        isLoading={fileIsUploading}
+        allowEditingUploadedText
         validated={isValid ? 'default' : 'error'}
       />
     );