Merge pull request #16 from factly/feat/support-directory-upload

100mi · web-flow · commit 93043872bfba · 2023-04-11T11:38:46.000+05:30
Added support for upload via file directory
diff --git a/studio/src/components/expectationcard.js b/studio/src/components/expectationcard.js
@@ -5,7 +5,7 @@ import { DownloadOutlined } from '@ant-design/icons';
 import { Typography } from 'antd';
 import { CSVLink } from 'react-csv';
 const { Link } = Typography;
-function ExpectationCard(Expectation) {
+function ExpectationCard({ Expectation , fileName }) {
   const { Expectation_name } = Expectation;
   const [show, setShow] = React.useState(false);
   const isResultNested = () => {
@@ -144,6 +144,7 @@ function ExpectationCard(Expectation) {
                 hideOnSinglePage: true,
               }}
               scroll={{ x: 1000, y: 500 }}
+              title={() => <b>{fileName}</b>}
             />
           </>
         ) : (
diff --git a/studio/src/components/googleSheets.js b/studio/src/components/googleSheets.js
@@ -8,7 +8,7 @@ import { CloudUploadOutlined } from '@ant-design/icons';
 import { getGoogleSheetsValidations } from '../actions/metafactsValidly';
 // import { setFormErrors } from '../utils/form';
 
-function GoogleSheetsForm({ style, ...props }) {
+function GoogleSheetsForm({  loading , style, ...props }) {
   const dispatch = useDispatch();
   const [form] = Form.useForm();
   const [showModal, setShowModal] = useState(false);
@@ -73,7 +73,7 @@ function GoogleSheetsForm({ style, ...props }) {
               span: 16,
             }}
           >
-            <Button type="primary" htmlType="submit">
+            <Button type="primary" loading={loading} htmlType="submit">
               Submit
             </Button>
           </Form.Item>
diff --git a/studio/src/components/s3metafacts.js b/studio/src/components/s3metafacts.js
@@ -8,7 +8,7 @@ import { getMetaTableDataFromS3 } from '../actions/metafacts';
 import { CloudUploadOutlined } from '@ant-design/icons';
 import { setFormErrors } from '../utils/form';
 
-function S3metafactsForm({ style, ...props }) {
+function S3metafactsForm({ loading , style, ...props }) {
   const dispatch = useDispatch();
   const [form] = Form.useForm();
   const [showModal, setShowModal] = useState(false);
@@ -73,7 +73,7 @@ function S3metafactsForm({ style, ...props }) {
               span: 16,
             }}
           >
-            <Button type="primary" htmlType="submit">
+            <Button type="primary" loading={loading} htmlType="submit">
               Submit
             </Button>
           </Form.Item>
diff --git a/studio/src/components/upload.js b/studio/src/components/upload.js
@@ -0,0 +1,31 @@
+import { Form, Radio } from 'antd';
+import React, { useState } from 'react';
+
+function useUploadForm() {
+  const [isDirectory, setIsDirectory] = useState(false);
+
+  const onChange = (e) => {
+    setIsDirectory(e.target.value);
+  };
+
+  function UploadForm() {
+    return (
+      <Form
+        name="basic"
+        labelCol={{ span: 0 }}
+        wrapperCol={{ span: 24 }}
+      >
+        <Form.Item label="Upload by">
+          <Radio.Group onChange={onChange} value={isDirectory}>
+            <Radio value={false}>Files</Radio>
+            <Radio value={true}>Directory</Radio>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+    );
+  }
+
+  return [UploadForm, isDirectory];
+}
+
+export default useUploadForm;
diff --git a/studio/src/pages/metafacts/index.js b/studio/src/pages/metafacts/index.js
@@ -6,6 +6,7 @@ import { CSVLink } from 'react-csv';
 import { useHistory } from 'react-router-dom';
 import { addFiles, getMetaTableData, setUploadButton } from '../../actions/metafacts';
 import S3metafactsForm from '../../components/s3metafacts';
+import useUploadForm from '../../components/upload';
 function Metafacts() {
   const dispatch = useDispatch();
   const history = useHistory();
@@ -25,41 +26,41 @@ function Metafacts() {
   };
   const columns = [
     {
-      title: 'formats_available',
-      dataIndex: 'formats_available',
-      key: 'formats_available',
+        "title": "output_file_name",
+        "dataIndex": "output_file_name",
+        "key": "output_file_name"
     },
     {
-      title: 'granularity',
-      dataIndex: 'granularity',
-      key: 'granularity',
+        "title": "units",
+        "dataIndex": "units",
+        "key": "units"
     },
     {
-      title: 'is_public',
-      dataIndex: 'is_public',
-      key: 'is_public',
+        "title": "temporal_coverage",
+        "dataIndex": "temporal_coverage",
+        "key": "temporal_coverage"
     },
     {
-      title: 'output_file_name',
-      dataIndex: 'output_file_name',
-      key: 'output_file_name',
+        "title": "granularity",
+        "dataIndex": "granularity",
+        "key": "granularity"
     },
     {
-      title: 'spatial_coverage',
-      dataIndex: 'spatial_coverage',
-      key: 'spatial_coverage',
+        "title": "spatial_coverage",
+        "dataIndex": "spatial_coverage",
+        "key": "spatial_coverage"
     },
     {
-      title: 'temporal_coverage',
-      dataIndex: 'temporal_coverage',
-      key: 'temporal_coverage',
+        "title": "formats_available",
+        "dataIndex": "formats_available",
+        "key": "formats_available"
     },
     {
-      title: 'units',
-      dataIndex: 'units',
-      key: 'units',
-    },
-  ];
+        "title": "is_public",
+        "dataIndex": "is_public",
+        "key": "is_public"
+    }
+]
   // const columnsDynamic = Object.entries(metaTabledata).map((filenameValuePair, index) => {
   //   const columns = Object.entries(filenameValuePair[1]).map((columnValuePair, index) => {
   //     return {
@@ -88,17 +89,25 @@ function Metafacts() {
       dispatch(getMetaTableData(validlyDatasets));
     }
   }, [validlyDatasets, dispatch, metafactsDatasets.length]);
+  
+  const [UploadForm, isDirectory] = useUploadForm();
+  const uploadProps = {
+    showUploadList: false,
+    ...(isDirectory ? { directory: true } : {}),
+    accept: "text/csv",
+    beforeUpload: (file, fileList) => {
+      dispatch(addFiles(fileList));
+      dispatch(setUploadButton(true));
+      return false;
+    },
+    multiple: true,
+  };
   return (
     <>
+    <UploadForm></UploadForm>
       <Space size={'small'}>
         <Upload
-          showUploadList={false}
-          beforeUpload={(file, fileList) => {
-            dispatch(addFiles(fileList));
-            dispatch(setUploadButton(true));
-            return false;
-          }}
-          multiple
+          {...uploadProps}
         >
           <Button icon={<UploadOutlined />}>Select Local Files</Button>
           <Button>
@@ -112,7 +121,7 @@ function Metafacts() {
           {' '}
           Upload Local Files{' '}
         </Button>
-        <S3metafactsForm style={{ marginLeft: '75px' }} />
+        <S3metafactsForm loading={loading} style={{ marginLeft: '75px' }} />
       </Space>
       {showTable ? (
         <Button style={{ marginBottom: '10px', float: 'right' }} type="primary">
diff --git a/studio/src/pages/validly/index.js b/studio/src/pages/validly/index.js
@@ -7,7 +7,7 @@ import {
 } from '../../actions/validly';
 import React from 'react';
 import 'antd/dist/antd.css';
-import { Upload, Button, Collapse, Card, Row, Col, Spin } from 'antd';
+import { Upload, Button, Collapse, Card, Row, Col, Spin, Radio, Form } from 'antd';
 import customExpandIcon from '../../components/customexpandicon';
 import ExpectationCard from '../../components/expectationcard';
 import { Space } from 'antd';
@@ -19,6 +19,7 @@ import {
   getMetaFactsValidationData,
   setMetaFactsUploadButton,
 } from '../../actions/metafactsValidly';
+import useUploadForm from '../../components/upload';
 const { Panel } = Collapse;
 function Validly({ mode = 'datasets' }) {
   const dispatch = useDispatch();
@@ -58,10 +59,19 @@ function Validly({ mode = 'datasets' }) {
     }
     dispatch(addExpectationCard(updateExpectationsArray(expectations, expectation, index)));
   };
+  const [UploadForm, isDirectory] = useUploadForm();
+  const uploadProps = {
+    showUploadList: false,
+    beforeUpload: handleUpload,
+    multiple: true,
+    accept : "text/csv",
+    ...(isDirectory ? { directory: true } : {}),
+  };
   return (
     <div className="App">
+      <UploadForm></UploadForm>
       <Space size={'small'}>
-        <Upload showUploadList={false} beforeUpload={handleUpload} multiple>
+        <Upload {...uploadProps}>
           <Button icon={<UploadOutlined />}>Select Files</Button>
           <Button>
             {' '}
@@ -74,7 +84,7 @@ function Validly({ mode = 'datasets' }) {
           {' '}
           Start Upload{' '}
         </Button>
-        {mode === 'metafacts' ? <GoogleSheetsForm /> : null}
+        {mode === 'metafacts' ? <GoogleSheetsForm loading={loading}/> : null}
       </Space>
       {loading ? (
         <Spin size="default" style={{ display: 'block', marginTop: '15%' }} />
@@ -133,7 +143,7 @@ function Validly({ mode = 'datasets' }) {
                 </Col>
                 <Col span={16}>
                   {expectations[index] ? (
-                    <ExpectationCard {...expectations[index]}></ExpectationCard>
+                    <ExpectationCard Expectation={{...expectations[index]}} fileName={file.filename.split('/').pop().split('.')[0]} ></ExpectationCard>
                   ) : null}
                 </Col>
               </Row>
