Handles Excel file uploads

Signed-off-by: Sean Sundberg <seansund@us.ibm.com>

src/utils/strings.ts

@@ -2,3 +2,19 @@
 export const isString = (val: unknown): val is string => {
     return !!(val) && (typeof val === 'string')
 }
+
+export const joinList = (list: string[], join: string = 'and'): string => {
+    if (list.length === 0) {
+        return ''
+    }
+
+    if (list.length === 1) {
+        return list[0]
+    }
+
+    if (list.length === 2) {
+        return list.join(' ' + join + ' ')
+    }
+
+    return joinList([list.slice(0, list.length - 1).join(', '), list.slice(list.length - 1)[0]], join)
+}

src/views/CsvDocumentAddView/CsvDocumentAddView.tsx

@@ -6,6 +6,7 @@ import {Button, ComposedModal, FileUploader, ModalBody, ModalFooter, ModalHeader
 import './CsvDocumentAddView.scss'
 import {CsvDocumentModel} from "../../models";
 import {FileUploadApi, fileUploadApi} from "../../services";
+import {joinList} from "../../utils";
 
 export interface CsvDocumentAddViewProps {
     show: boolean;
@@ -50,18 +51,20 @@ export const CsvDocumentAddView: React.FunctionComponent<CsvDocumentAddViewProps
             })
     }
 
+    const acceptList = ['.csv', '.xlsx', '.xlsb']
+
     return (<ComposedModal open={true} onClose={() => onNewDocument()} className="csv-document-add-modal">
-        <ModalHeader label="Documents">Add a CSV document</ModalHeader>
+        <ModalHeader label="Documents">Add document</ModalHeader>
         <ModalBody>
-            <p>Upload the CSV document for AI prediction.</p>
+            <p style={{paddingBottom: '10px'}}>Upload the document for AI prediction. Allowed file types are {joinList(acceptList, 'or')}.</p>
             <FileUploader
-                labelTitle="Add CSV document"
+                labelTitle=""
                 labelDescription="Max file size is 500mb."
                 buttonLabel="Select file"
                 buttonKind="primary"
                 size="md"
                 filenameStatus={fileStatus}
-                accept={['.csv']}
+                accept={acceptList}
                 multiple={false}
                 disabled={false}
                 iconDescription="Delete file"

src/views/CsvDocumentDetailView/CsvDocumentDetailView.tsx

@@ -206,14 +206,14 @@ const PredictionDetailView: React.FunctionComponent<PredictionDetailViewProps> =
         return (<></>)
     }
 
-    const headerData: DataTableHeader[] = Object.keys(documents[0].data)
+    const headerData: DataTableHeader[] = [
+        {header: 'Prediction', key: 'predictionValue'},
+        {header: 'Confidence', key: 'confidence'},
+        {header: 'Agree', key: 'agree'}
+    ]
+        .concat(Object.keys(documents[0].data)
         .filter(val => val !== 'id' && val !== 'documentId' && val !== 'providedValue')
-        .map(key => ({key, header: key}))
-        .concat([
-            {header: 'Prediction', key: 'predictionValue'},
-            {header: 'Confidence', key: 'confidence'},
-            {header: 'Agree', key: 'agree'}
-        ])
+        .map(key => ({key, header: key})))
 
     const rowData = loadable.data.map(predictionResultToRowData(documents))
 

src/views/CsvDocumentListView/CsvDocumentsListView.tsx

@@ -81,7 +81,7 @@ export const CsvDocumentsListView: React.FunctionComponent<CsvDocumentsListViewP
                 headerData={headerData}
                 rowData={rowData.map(csvDocumentToRow)}
                 onRowClick={navigateToDetails}
-                toolbarButtonText="Add CSV document"
+                toolbarButtonText="Add document"
                 onToolbarButtonClick={() => setShowAddModal(true)}
             />
         </div>