Merge pull request #482 from CedricProfessionnel/ReformatingExportAws

Reformat and add asset export (Feature Aws Part)

Author: CedricProfessionnel

src/components/ExportToCognitoS3Dialog/create-assets.js

@@ -0,0 +1,12 @@
+import fetchAFile from "./fetch-a-file"
+const createAssets = async (dataset, configExport, dm) => {
+  await Promise.all(
+    dataset.samples.map(async (sample, index, samples) => {
+      var sampleName = await dm.getSampleName(sample)
+      var blob = await fetchAFile(sample, configExport, dm)
+      if (!blob) return
+      await dm.addAsset(sampleName, blob, dataset.name)
+    })
+  )
+}
+export default createAssets

src/components/ExportToCognitoS3Dialog/fetch-a-file.js

@@ -0,0 +1,25 @@
+const fetchAFile = async (element, configExport, dm) => {
+  var response
+  var url
+  if (dm.getSampleUrl(element) !== undefined) {
+    url = configExport.proxyUrl + dm.getSampleUrl(element)
+    response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "X-Requested-With": "xmlhttprequest",
+      },
+    }).catch((error) => {
+      console.log("Looks like there was a problem: \n", error)
+    })
+    if (response) {
+      const blob = await response.blob()
+      return blob
+    }
+  } else {
+    var text = await dm.getAssetText(element)
+    if (text) return text
+    var time = await dm.getAssetTime(element)
+    if (time) return time
+  }
+}
+export default fetchAFile

src/components/ExportToCognitoS3Dialog/index.js

@@ -5,9 +5,17 @@ import useActiveDatasetManager from "../../hooks/use-active-dataset-manager"
 import isEmpty from "lodash/isEmpty"
 import datasetManagerCognito from "udt-dataset-managers/dist/CognitoDatasetManager"
 import useAuth from "../../utils/auth-handlers/use-auth"
-import { Grid, TextField } from "@material-ui/core"
 import { useTranslation } from "react-i18next"
-const orangeText = { color: "orange" }
+import { TextField, Grid, IconButton } from "@material-ui/core"
+import WarningHeader from "./warning-header"
+import initConfigExport from "./init-config-export"
+import SettingDialog from "./interface-setting-export.js"
+import createAssets from "./create-assets"
+import { setIn } from "seamless-immutable"
+import {
+  Settings as SettingsIcon,
+  Storage as StorageIcon,
+} from "@material-ui/icons/"
 
 const customStyles = {
   headCells: {
@@ -62,6 +70,7 @@ export default ({ open, onClose }) => {
     )
   }
   const [refreshInterface, setRefreshInterface] = useState(false)
+  const [configExport, setConfigExport] = useState(initConfigExport)
 
   const getCurrentDataset = async () => {
     if (currentDataset) return currentDataset
@@ -73,6 +82,10 @@ export default ({ open, onClose }) => {
   const getProjectName = () => {
     if (!currentDataset) return
     if (!currentDataset.name) return
+    if (currentDataset.name === "New undefined Dataset") {
+      setNameProjectToCreate("")
+      return ""
+    }
     setNameProjectToCreate(currentDataset.name)
     return currentDataset.name
   }
@@ -135,14 +148,30 @@ export default ({ open, onClose }) => {
   const handleCreateProject = async () => {
     if (!currentDataset) return
     var dataset = currentDataset
-    dataset = dataset.setIn(["name"], nameProjectToCreate)
+
+    dataset = await dataset.setIn(["name"], nameProjectToCreate)
+
     if (nameProjectExist) await dm.removeSamplesFolder(nameProjectToCreate)
+    if (nameProjectExist && configExport.typeAssetExport === "withProxy")
+      await dm.removeAssetsFolder(nameProjectToCreate)
+    if (configExport.typeAssetExport === "withProxy") {
+      dataset = await renameAllSamples(dataset)
+      await createAssets(dataset, configExport, dm)
+    }
     await dm.setDataset(dataset)
     await activeDatasetManager.setDataset(dataset)
-    await getProjects()
     onClose()
   }
 
+  const renameAllSamples = async (dataset) => {
+    var samples = await Promise.all(
+      await dataset.samples.map(async (sample, index, samples) => {
+        return await dm.addNamesToSample(sample, index, samples)
+      })
+    )
+    return (dataset = await setIn(dataset, ["samples"], samples))
+  }
+
   return (
     <SimpleDialog
       title={t("export-project")}
@@ -158,13 +187,12 @@ export default ({ open, onClose }) => {
       ]}
     >
       {
-        <Grid container spacing={0}>
+        <Grid container spacing={1}>
           <Grid container item xs={12} spacing={0} justify="center">
-            {nameProjectExist ? (
-              <p style={orangeText}>{t("warning-project-exist")}</p>
-            ) : (
-              <p></p>
-            )}
+            <WarningHeader
+              nameProjectToCreate={nameProjectToCreate}
+              nameProjectExist={nameProjectExist}
+            />
           </Grid>
           <Grid container item xs={12} spacing={0} justify="center">
             <TextField
@@ -176,21 +204,42 @@ export default ({ open, onClose }) => {
               }}
               value={nameProjectToCreate}
             />
+            <IconButton
+              onClick={() => {
+                setConfigExport({
+                  ...configExport,
+                  contentDialogBoxIsSetting: !configExport.contentDialogBoxIsSetting,
+                })
+              }}
+            >
+              {configExport.contentDialogBoxIsSetting ? (
+                <StorageIcon id="StorageIcon" />
+              ) : (
+                <SettingsIcon id="SettingIcon" />
+              )}
+            </IconButton>
           </Grid>
           <Grid container item xs={12} spacing={0} justify="center">
-            {!isEmpty(projects) && (
-              <DataTable
-                expandableRows
-                expandableRowsComponent={<ExpandedRow />}
-                dense
-                noHeader
-                noTableHead
-                columns={columns}
-                selectableRowSelected={(row) => row.isSelected}
-                data={projects}
-                pagination={projects.length > 10}
-                paginationPerPage={10}
-                paginationRowsPerPageOptions={[10, 20, 25, 50, 100, 200]}
+            {!configExport.contentDialogBoxIsSetting ? (
+              !isEmpty(projects) && (
+                <DataTable
+                  expandableRows
+                  expandableRowsComponent={<ExpandedRow />}
+                  dense
+                  noHeader
+                  noTableHead
+                  columns={columns}
+                  selectableRowSelected={(row) => row.isSelected}
+                  data={projects}
+                  pagination={projects.length > 10}
+                  paginationPerPage={10}
+                  paginationRowsPerPageOptions={[10, 20, 25, 50, 100, 200]}
+                />
+              )
+            ) : (
+              <SettingDialog
+                configExport={configExport}
+                setConfigExport={setConfigExport}
               />
             )}
           </Grid>

src/components/ExportToCognitoS3Dialog/init-config-export.js

@@ -0,0 +1,6 @@
+const basicConfig = {
+  contentDialogBoxIsSetting: false,
+  typeAssetExport: "none",
+  proxyUrl: "https://cors-anywhere.herokuapp.com/",
+}
+export default basicConfig

src/components/ExportToCognitoS3Dialog/interface-setting-export.js

@@ -0,0 +1,63 @@
+import React from "react"
+import {
+  Grid,
+  FormControl,
+  FormLabel,
+  RadioGroup,
+  FormControlLabel,
+  Radio,
+  TextField,
+} from "@material-ui/core"
+const settingDialog = ({ configExport, setConfigExport }) => {
+  return (
+    <Grid container xs={12} spacing={0}>
+      <Grid container item xs={12} spacing={1} justify="center" direction="row">
+        <Grid xs={6}>
+          <FormControl component="fieldset">
+            <FormLabel component="legend">Assets processing</FormLabel>
+            <RadioGroup
+              aria-label="option1"
+              onChange={(event) => {
+                setConfigExport({
+                  ...configExport,
+                  typeAssetExport: event.target.value,
+                })
+              }}
+            >
+              <FormControlLabel
+                value="none"
+                control={<Radio />}
+                label="Don't upload assets"
+                checked={configExport.typeAssetExport === "none"}
+              />
+              <FormControlLabel
+                value="withProxy"
+                control={<Radio />}
+                label="Use a proxy"
+                checked={configExport.typeAssetExport === "withProxy"}
+              />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
+        <Grid container item xs={6} spacing={1} direction="column">
+          <FormLabel>Proxy url</FormLabel>
+          <TextField
+            id="proxy"
+            onChange={(event) => {
+              setConfigExport({
+                ...configExport,
+                proxyUrl: event.target.value,
+              })
+            }}
+            onFocus={(event) => {
+              event.target.select()
+            }}
+            value={configExport.proxyUrl}
+          />
+        </Grid>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default settingDialog

src/components/ExportToCognitoS3Dialog/warning-header.js

@@ -0,0 +1,18 @@
+import React from "react"
+const WarningHeader = ({ nameProjectExist, nameProjectToCreate }) => {
+  const orangeText = { color: "orange", textAlign: "center" }
+  var text = `Warning :`
+  if (nameProjectExist)
+    text += ` This project name already exist. If you continue the existing project with the same name will be replaced.\n`
+  if (nameProjectToCreate === "") text += ` Please enter a project name.\n`
+  return text === `Warning :` ? (
+    <div></div>
+  ) : (
+    <div style={orangeText}>
+      {text.split("\n").map((obj, i) => {
+        return <div key={i}>{obj}</div>
+      })}
+    </div>
+  )
+}
+export default WarningHeader