replaced the link component with anchor for external links

bhklab · Apr 17, 2023 · 4a89c25 · 4a89c25
1 parent db3b34e
commit 4a89c25
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 3 deletions.
diff --git a/client/src/components/Admin/Admin.js b/client/src/components/Admin/Admin.js
@@ -37,7 +37,7 @@ const TabNavigation = styled.div`
 `;
 
 const Admin = () => {
-    const [selectedMenu, setSelectedMenu] = useState('processed-data-obj');
+    const [selectedMenu, setSelectedMenu] = useState('create-pipeline');
 
     return(
         <StyledPage>

diff --git a/client/src/components/Admin/CreatePipeline.js b/client/src/components/Admin/CreatePipeline.js
@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import CustomInputText from '../Shared/CustomInputText';
 import CustomMessages from '../Shared/CustomMessages';
 import { Button } from 'primereact/button';
+import { RadioButton } from 'primereact/radiobutton';
 import AdditionalFields from './SubComponents/AdditionalFields';
 import styled from 'styled-components';
 import Loader from 'react-loader-spinner';
@@ -13,6 +14,29 @@ const StyledCreatePipeline = styled.div`
     max-width: 600px;
     margin-bottom: 10px;
   }
+  .radio-buttons {
+    display: flex;
+    margin-bottom: 20px;
+    font-size: 12px;
+    .radio-button-field {
+      margin-right: 20px;
+      .radio-button-label {
+        margin-left: 5px;
+      }
+    }
+  }
+  .multiple-file-field {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    max-width: 600px;
+    .multiple-file-textfield {
+      margin-right: 10px;
+    }
+    .delete-btn {
+      margin-right: 10px;
+    }
+  }
   .additional-fields {
     margin-left: 10px;
   }
@@ -41,9 +65,11 @@ const CreatePipeline = () => {
     git_url: "",
     dvc_git: "",
     object_name: "",
+    object_names: [''],
     additional_repo: [],
     additional_parameters: []
   });
+  const [numFiles, setNumFiles] = useState('single');
   const [submitting, setSubmitting] = useState(false);
   const [showMsg, setShowMsg] = useState(false);
   const [submitMessage, setSubmitMessage] = useState({});
@@ -73,6 +99,33 @@ const CreatePipeline = () => {
     setPipeline({...pipeline, [fieldType]: fields});
   }
 
+  const addFilename = (e) => {
+    let names = [...pipeline.object_names];
+    names.push('');
+    setPipeline({
+      ...pipeline, 
+      object_names: names
+    });
+  }
+
+  const updateFilename = (index) => (e) => {
+    let names = [...pipeline.object_names];
+    names[index] = e.target.value;
+    setPipeline({
+      ...pipeline, 
+      object_names: names
+    });
+  }
+
+  const removeFilename = (index) => (e) => {
+    let names = [...pipeline.object_names];
+    names.splice(index, 1);
+    setPipeline({
+      ...pipeline, 
+      object_names: names
+    });   
+  }
+
   const submit = async (e) => {
     e.preventDefault();
     setSubmitting(true);
@@ -122,6 +175,53 @@ const CreatePipeline = () => {
           value={pipeline.dvc_git} 
           onChange={(e) => {setPipeline({...pipeline, dvc_git: e.target.value})}}
       />
+      <div>
+        <h4>File Name(s)</h4>
+        <div className="radio-buttons">
+          <div className="radio-button-field flex align-items-center">
+            <RadioButton inputId="filename-single" name="filename" value="single" checked={numFiles === 'single'} onChange={(e) => {setNumFiles(e.value)}} />
+            <label htmlFor="filename-single" className="radio-button-label">Single File</label>
+          </div>
+          <div className="radio-button-field flex align-items-center">
+            <RadioButton inputId="filename-multiple" name="filename" value="multiple" checked={numFiles === 'multiple'} onChange={(e) => {setNumFiles(e.value)}} />
+            <label htmlFor="filename-multiple" className="radio-button-label">Multiple Files</label>
+          </div>
+        </div>
+        {
+          numFiles === 'single' &&
+          <CustomInputText 
+            className='textfield'
+            label='File name:'
+            value={pipeline.object_name} 
+            onChange={(e) => {setPipeline({...pipeline, object_name: e.target.value})}}
+          />
+        }
+        {
+          numFiles === 'multiple' &&
+              pipeline.object_names.map((name, i) => (
+                <div className='multiple-file-field' key={i}>
+                  <CustomInputText 
+                    className='multiple-file-textfield'
+                    label='File name:'
+                    value={name} 
+                    onChange={updateFilename(i)}
+                  />
+                  {
+                    i > 0 &&
+                    <Button 
+                      className='p-button-danger delete-btn'
+                      icon='pi pi-times' 
+                      onClick={removeFilename(i)} 
+                    />
+                  }
+                  <Button 
+                    icon='pi pi-plus' 
+                    onClick={addFilename} 
+                  />
+                </div>
+              ))
+        }
+      </div>
       <div className='additional-fields'>
         <AdditionalFields 
           header='Additional Repositories'

diff --git a/client/src/components/Admin/ProcessedDataObjects.js b/client/src/components/Admin/ProcessedDataObjects.js
@@ -91,7 +91,7 @@ const ProcessedDataObjects = () => {
 
     const doiTemplate = (rowData, column) => (
         rowData.doi ? 
-        <Link to={`http://doi.org/${rowData.doi}`} target="_blank">{rowData.doi}</Link>
+        <a href={`http://doi.org/${rowData.doi}`} target="_blank">{rowData.doi}</a>
         :
         ''
     );

diff --git a/routes/api/view/admin.js b/routes/api/view/admin.js
@@ -59,6 +59,10 @@ const createPipeline = async (req, res) => {
             }
         }
         pipeline.additional_parameters = additionalParams;
+        pipeline.object_names = pipeline.object_names.filter(name => name.length > 0);
+        if(pipeline.object_names.length === 0){
+            pipeline.object_names = null;
+        }
         const res = await axios.post(
             `${process.env.DATA_PROCESSING_API}/api/pipeline/create`, 
             pipeline,