Adds FileTypesWithFunctionalEquivalents component; updates form table…

… component to accept needed style changes; adds Google Font icons and license.

cypress/component/Forms/forms.spec.jsx

@@ -410,17 +410,14 @@ describe('FormField - Tests', () => {
     });
 
     it('should remove single on click', () => {
-      cy.spy(props, 'onChange');
+      cy.spy(props, 'onChange').as('onChange');
       mount(<FormField {...props}/>);
       cy.get('#dataCustodianEmail').type('[email protected]');
       cy.get('#dataCustodianEmail').type('{enter}');
-      const firstPill = cy.get('.formField-dataCustodianEmail .pill').first();
-      firstPill.should('exist');
-      firstPill.click();
-      firstPill.then(() => {
-        expect(props.onChange).to.be.calledWith({key: 'dataCustodianEmail', value: [], isValid: true}); // code value
-        cy.get('.formField-dataCustodianEmail .pill').should('not.exist');
-      });
+      cy.get('.formField-dataCustodianEmail .pill').first().should('exist');
+      cy.get('.formField-dataCustodianEmail .pill').first().click();
+      cy.get('.formField-dataCustodianEmail .pill').should('not.exist');
+      cy.get('@onChange').should('have.been.called.with', {key: 'dataCustodianEmail', value: [], isValid: true});
     });
 
     it('should remove [x, 1, 2] from array on click', () => {
@@ -577,7 +574,7 @@ describe('FormField - Tests', () => {
       mount(<FormField {...props}/>);
       cy.get('#studyType').type('asdf{enter}');
       cy.get('#studyType').then(() => {
-        expect(props.onChange).to.not.be.called;
+        expect(props.onChange).to.have.callCount(0);
       });
     });
 
@@ -816,6 +813,28 @@ describe('FormField - Tests', () => {
         cy.get('#delete-table-row-fileTypes-0').should('be.disabled');
       });
     });
+
+    it('should be able to override some style elements', ()=>{
+      const customProps = {
+        ...props,
+        styleProps: {
+          enableAddingRowStyle: {
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'flex-start',
+            marginTop: 10
+          },
+          addingRowButtonClassName: 'button-complex-submission',
+          addRowButtonIconClassName: 'button-icon button-icon-circle-plus-outline',
+          removeRowButtonIconClassName: 'button-icon button-icon-close'
+        }
+      };
+      mount(<FormTable {...customProps} />);
+      cy.get('#fileTypes-0-functionalEquivalence').type('hello');
+      cy.get('#add-new-table-row-fileTypes').should('have.class','button-complex-submission');
+      cy.get('#add-new-table-row-fileTypes').find('span').should('have.class','button-icon-circle-plus-outline');
+      cy.get('#delete-table-row-fileTypes-0').find('span').should('have.class', 'button-icon-close');
+    });
   });
   describe('Prop validation', () => {
     it('should not allow mounting if unknown prop', (done) => {

src/components/forms/DraftFileUpload.tsx

@@ -10,8 +10,8 @@ export type DraftFileUploadProps = {
     draftId: string,
     defaultValue: FileStorageObject,
     id: string,
-    onAddFile: Function,
-    onDeleteFile: Function,
+    onAddFile: (event: ChangeEvent<HTMLInputElement>, id: string) => Promise<void>,
+    onDeleteFile: (draftId:string, fileId: number, id:string) => Promise<void>,
     required?: boolean,
     title: string
 }

src/components/forms/FileTypesWithFunctionalEquivalents.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {FormFieldTypes, FormTable} from './forms';
+
+export type FileTypeAndFunctionalEquivalence = {
+    type: string,
+    value: string
+}
+export type FileTypesWithFunctionalEquivalentsProps = {
+    id: string,
+    onChange: ({key, value} :{key: string, value: never}) => void,
+    defaultValue: Array<FileTypeAndFunctionalEquivalence>
+}
+
+export const FileTypesWithFunctionalEquivalents = (props: FileTypesWithFunctionalEquivalentsProps) => {
+    const {id, onChange, defaultValue} = props;
+    return (<FormTable
+        id={id}
+        formFields={[
+            {
+                id: id + '_fileType',
+                name: 'fileType',
+                title: 'File Type',
+                type: FormFieldTypes.SELECT,
+                selectOptions: ['Arrays', 'Genome', 'Exome', 'Survey', 'Phenotype'],
+            },
+            {
+                id: id + '_functionalEquivalence',
+                name: 'functionalEquivalence',
+                title: 'Functional Equivalence',
+                placeholder: 'Type',
+            }
+        ]}
+        defaultValue={defaultValue}
+        enableAddingRow={true}
+        addRowLabel='Add File'
+        minLength={1}
+        onChange={onChange}
+        styleProps={{enableAddingRowStyle:{ display: 'flex', width: '100%', justifyContent: 'flex-start', marginTop: 10 },
+            addingRowButtonClassName:'button-complex-submission',
+            addRowButtonIconClassName:'button-icon button-icon-circle-plus-outline',
+            removeRowButtonIconClassName:'button-icon button-icon-close'
+            }}
+    />);
+}

src/components/forms/forms.jsx

@@ -330,9 +330,14 @@ export const FormTable = (config) => {
     id, formFields,
     enableAddingRow, addRowLabel,
     disabled, onChange, minLength,
-    validation, onValidationChange, defaultValue
+    validation, onValidationChange, defaultValue, styleProps = {}
   } = config;
-
+  const {
+    enableAddingRowStyle = { display: 'flex', width: '100%', justifyContent: 'flex-end', marginTop: 10 },
+    addingRowButtonClassName = 'pill form-btn btn-xs',
+    addRowButtonIconClassName = 'glyphicon glyphicon-plus',
+    removeRowButtonIconClassName = 'glyphicon glyphicon-remove'
+  } = styleProps
   const [formValue, setFormValue] = useState(defaultValue || [{}]);
 
   const key = getKey(config);
@@ -393,28 +398,29 @@ export const FormTable = (config) => {
               onValidationChange({ key: getKey(config), validation: validationClone });
             }
           }}>
-          <span className='glyphicon glyphicon-remove' />
+          <span className={removeRowButtonIconClassName} />
         </button>
       </div>
     ))}
     {/* add new row to table button */}
     {enableAddingRow && (
-      <div style={{ display: 'flex', width: '100%', justifyContent: 'flex-end', marginTop: 10 }}>
+      <div style={enableAddingRowStyle}>
         <button
-          id={`add-new-table-row-${id}`}
-          key={`add-new-table-row-${id}`}
-          className='pill form-btn btn-xs'
-          type='button'
-          onClick={() => {
-            const formValueClone = cloneDeep(formValue);
-            formValueClone.push({});
-            setFormValue(formValueClone);
-            onChange({key: key, value: formValueClone, isValid: true });
-          }}
-          style={{ marginTop: 10 }}
+            id={`add-new-table-row-${id}`}
+            key={`add-new-table-row-${id}`}
+            className={addingRowButtonClassName}
+            type='button'
+            onClick={() => {
+              const formValueClone = cloneDeep(formValue);
+              formValueClone.push({});
+              setFormValue(formValueClone);
+              onChange({key: key, value: formValueClone, isValid: true});
+            }}
+            style={{marginTop: 10}}
         >
           {addRowLabel || 'Add New'}
-          <span className='glyphicon glyphicon-plus' style={{ marginLeft: '8px' }} />
+          <span className={addRowButtonIconClassName}
+                style={{marginLeft: '8px'}}/>
         </button>
       </div>
     )}

src/images/google-svg/LICENSE.md

@@ -0,0 +1,14 @@
+The files in this directory were generated on 2/25/2025 using Google's Icon generator.
+
+At the time the icons were generated, they were subject to the APACHE LICENSE, VERSION 2.0:
+https://www.apache.org/licenses/LICENSE-2.0.html
+
+URLs to regenerate the icons:
+
+[Upload](https://fonts.google.com/icons?selected=Material+Symbols+Outlined:upload:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=upload&icon.size=24&icon.color=%234D72AA)
+
+[Add](https://fonts.google.com/icons?selected=Material+Symbols+Outlined:add_circle:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=circle&icon.size=24&icon.color=%234D72AA)
+
+[Delete](https://fonts.google.com/icons?selected=Material+Symbols+Outlined:add_circle:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=circle&icon.size=24&icon.color=%234D72AA)
+
+[X](https://fonts.google.com/icons?selected=Material+Symbols+Outlined:close_small:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=remove&icon.size=24&icon.color=%234D72AA)

src/styles/buttons.css

@@ -24,3 +24,43 @@
   color: white;
   background-color: #094887;
 }
+
+.button-complex-submission {
+  font-family: Montserrat, serif;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: -0.3px;
+  text-align: center;
+  color: #005D9A;
+  background-color: white;
+  min-width: 120px;
+  top: 3733px;
+  left: 67px;
+  border-radius: 4px;
+  border: 1px solid #4D72AA;
+  padding: 4px 8px;
+  gap: 4px;
+}
+
+.button-icon {
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+}
+
+.button-icon-circle-plus-outline {
+  content: url('/src/images/google-svg/add_circle.svg');
+}
+
+.button-icon-close-small {
+  content: url('/src/images/google-svg/close_small.svg');
+}
+
+.button-icon-close {
+  content: url('/src/images/google-svg/close.svg');
+}
+
+.button-icon-file-upload {
+  content: url('/src/images/google-svg/upload.svg')
+}
+