From 3ad20f9a59d9983bb2827182e8dc434d34a04a91 Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Mon, 20 Jun 2022 13:29:31 -0300
Subject: [PATCH 01/19] Add get example experiments endpoint call

---
 .../data-management/SamplesTable.jsx          | 64 +++----------------
 1 file changed, 9 insertions(+), 55 deletions(-)

diff --git a/src/components/data-management/SamplesTable.jsx b/src/components/data-management/SamplesTable.jsx
index d48f57e7f2..5fd9f444ac 100644
--- a/src/components/data-management/SamplesTable.jsx
+++ b/src/components/data-management/SamplesTable.jsx
@@ -38,13 +38,14 @@ import { metadataNameToKey, metadataKeyToName, temporaryMetadataKey } from 'util
 import integrationTestConstants from 'utils/integrationTestConstants';
 import getAccountId from 'utils/getAccountId';
 import 'utils/css/data-management.css';
+import fetchAPI from 'utils/http/fetchAPI';
 
 const { Paragraph, Text } = Typography;
 
 const SamplesTable = forwardRef((props, ref) => {
   const dispatch = useDispatch();
   const [tableData, setTableData] = useState([]);
-  const [exampleDatasets, setExampleDatasets] = useState([]);
+  const [exampleDatasets, setExampleExperiments] = useState([]);
 
   const projects = useSelector((state) => state.projects);
   const samples = useSelector((state) => state.samples);
@@ -252,59 +253,12 @@ const SamplesTable = forwardRef((props, ref) => {
     setTableData(newData);
   }, [projects, samples, activeProjectUuid]);
 
-  // Name of file is 1.Example-File_Name.zip
-  // The naming starts from 1
-  const parseFileName = (name) => {
-    const parts = name.split('.');
-
-    // The first part of the file name is the order
-    const order = Number.parseInt(parts[0], 10);
-    if (!order) {
-      console.warn('Invalid dataset file:', name);
-      return null;
-    }
-
-    // Filename may contain dots, so we need to join them
-    const rawFileName = parts.slice(1, parts.length - 1).join('.');
-    const filename = rawFileName.replace(/_/g, ' ');
-
-    return { order, filename };
-  };
-
-  const getPublicDatasets = async () => {
-    const accountId = getAccountId(environment);
-    Storage.configure({
-      bucket: `biomage-public-datasets-${environment}-${accountId}`,
-      customPrefix: {
-        public: '',
-      },
-    });
-
-    const datasets = await Storage.list('');
-
-    // Properly order the datasets
-    const result = new Array(datasets.length).fill(null);
-
-    datasets.forEach((data) => {
-      const parsed = parseFileName(data.key);
-
-      if (!parsed) return;
-
-      // Order begins from 1, but array index begins from 0
-      const insertionIndex = parsed.order - 1;
-      result[insertionIndex] = {
-        filename: data.key,
-        description: parsed.filename,
-      };
-    });
-
-    return result.filter((data) => data !== null);
-  };
-
   useEffect(() => {
     if (!environment) return;
 
-    getPublicDatasets().then((datasets) => { setExampleDatasets(datasets); });
+    fetchAPI('/v2/experiments/examples').then((experiments) => {
+      setExampleExperiments(experiments);
+    });
   }, [environment]);
 
   const downloadPublicDataset = async (filename) => {
@@ -338,14 +292,14 @@ const SamplesTable = forwardRef((props, ref) => {
                 <div style={{ width: 'auto', textAlign: 'left' }}>
                   <ul>
                     {
-                      exampleDatasets.map(({ filename, description }) => (
-                        <li key={filename}>
+                      exampleDatasets.map(({ name }) => (
+                        <li key={name}>
                           <Button
                             type='link'
                             size='small'
-                            onClick={() => downloadPublicDataset(filename)}
+                            onClick={() => downloadPublicDataset(name)}
                           >
-                            {description}
+                            {name}
                           </Button>
                         </li>
                       ))

From 195a14104ac07b9031ab925247e025968067b05a Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Tue, 21 Jun 2022 15:56:48 -0300
Subject: [PATCH 02/19] Add refresh of experiments after the cloning is done

---
 .../data-management/LaunchAnalysisButton.jsx  |  1 +
 .../data-management/SamplesTable.jsx          | 27 +++++++++----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/data-management/LaunchAnalysisButton.jsx b/src/components/data-management/LaunchAnalysisButton.jsx
index 7f07dc1e2f..00a0f56463 100644
--- a/src/components/data-management/LaunchAnalysisButton.jsx
+++ b/src/components/data-management/LaunchAnalysisButton.jsx
@@ -107,6 +107,7 @@ const LaunchAnalysisButton = () => {
     const allSampleMetadataInserted = (sample) => {
       if (!metadataKeysAvailable) return true;
       if (Object.keys(sample.metadata).length !== metadataKeysAvailable) return false;
+
       return Object.values(sample.metadata)
         .every((value) => value.length > 0);
     };
diff --git a/src/components/data-management/SamplesTable.jsx b/src/components/data-management/SamplesTable.jsx
index 5fd9f444ac..8d1dfaed2c 100644
--- a/src/components/data-management/SamplesTable.jsx
+++ b/src/components/data-management/SamplesTable.jsx
@@ -2,7 +2,7 @@
 import React, {
   useEffect, useState, forwardRef, useImperativeHandle,
 } from 'react';
-import Storage from '@aws-amplify/storage';
+
 import { useSelector, useDispatch } from 'react-redux';
 import {
   Table, Row, Col, Typography, Space, Button, Empty,
@@ -26,6 +26,7 @@ import {
   deleteMetadataTrack,
   createMetadataTrack,
   updateValueInMetadataTrack,
+  loadProjects,
 } from 'redux/actions/projects';
 import { DEFAULT_NA } from 'redux/reducers/projects/initialState';
 import { reorderSamples, updateExperiment } from 'redux/actions/experiments';
@@ -33,10 +34,10 @@ import { updateSample } from 'redux/actions/samples';
 
 import UploadStatus from 'utils/upload/UploadStatus';
 import { arrayMoveImmutable } from 'utils/array-move';
-import downloadFromUrl from 'utils/data-management/downloadFromUrl';
+
 import { metadataNameToKey, metadataKeyToName, temporaryMetadataKey } from 'utils/data-management/metadataUtils';
 import integrationTestConstants from 'utils/integrationTestConstants';
-import getAccountId from 'utils/getAccountId';
+
 import 'utils/css/data-management.css';
 import fetchAPI from 'utils/http/fetchAPI';
 
@@ -261,16 +262,12 @@ const SamplesTable = forwardRef((props, ref) => {
     });
   }, [environment]);
 
-  const downloadPublicDataset = async (filename) => {
-    const accountId = getAccountId(environment);
-    const s3Object = await Storage.get(
-      filename,
-      {
-        bucket: `biomage-public-datasets-${environment}-${accountId}`,
-        contentType: 'multipart/form-data',
-      },
-    );
-    downloadFromUrl(s3Object);
+  const cloneIntoCurrentExperiment = async (exampleExperimentId) => {
+    const url = `/v2/experiments/${exampleExperimentId}/clone/${activeProjectUuid}`;
+
+    await fetchAPI(url, { method: 'POST' });
+
+    dispatch(loadProjects());
   };
 
   const noDataText = (
@@ -292,12 +289,12 @@ const SamplesTable = forwardRef((props, ref) => {
                 <div style={{ width: 'auto', textAlign: 'left' }}>
                   <ul>
                     {
-                      exampleDatasets.map(({ name }) => (
+                      exampleDatasets.map(({ id, name }) => (
                         <li key={name}>
                           <Button
                             type='link'
                             size='small'
-                            onClick={() => downloadPublicDataset(name)}
+                            onClick={() => cloneIntoCurrentExperiment(id)}
                           >
                             {name}
                           </Button>

From 1f53222e341f573f8a3ab7c9f3aff28abe0dfe42 Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Tue, 21 Jun 2022 16:49:34 -0300
Subject: [PATCH 03/19] Add mocked demo experimetns response for v2

---
 src/__test__/test-utils/mockAPI.js            |  4 ++
 .../mockData/mockDemoExperiments.json         | 44 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 src/__test__/test-utils/mockData/mockDemoExperiments.json

diff --git a/src/__test__/test-utils/mockAPI.js b/src/__test__/test-utils/mockAPI.js
index f2d984ddcb..86c8729eb5 100644
--- a/src/__test__/test-utils/mockAPI.js
+++ b/src/__test__/test-utils/mockAPI.js
@@ -4,6 +4,7 @@ import _ from 'lodash';
 import cellSetsData from '__test__/data/cell_sets.json';
 import backendStatusData from '__test__/data/backend_status.json';
 import processingConfigData from '__test__/data/processing_config.json';
+import mockDemoExperiments from '__test__/test-utils/mockData/mockDemoExperiments.json';
 
 // A ticket has been created to address this : https://biomage.atlassian.net/browse/BIOMAGE-1553
 import {
@@ -47,6 +48,9 @@ const generateDefaultMockAPIResponses = (experimentId) => ({
   [`experiments/${experimentId}/samples`]: () => promiseResponse(
     JSON.stringify(responseData.samples[0]),
   ),
+  '/v2/experiments/examples': () => promiseResponse(
+    JSON.stringify(mockDemoExperiments),
+  ),
 });
 
 const mockAPI = (apiMapping) => (req) => {
diff --git a/src/__test__/test-utils/mockData/mockDemoExperiments.json b/src/__test__/test-utils/mockData/mockDemoExperiments.json
new file mode 100644
index 0000000000..4c5c1b54d9
--- /dev/null
+++ b/src/__test__/test-utils/mockData/mockDemoExperiments.json
@@ -0,0 +1,44 @@
+[
+  {
+      "id": "840ad7454b1ad68af8c237b3320c7d3a",
+      "name": "Example2",
+      "description": "Analysis description",
+      "samplesOrder": [
+          "3eb4e715-03f1-4dc7-aac8-69d566103fd8"
+      ],
+      "notifyByEmail": false,
+      "createdAt": "2022-06-21 18:23:02.688117+00",
+      "updatedAt": "2022-06-21 18:23:02.688117+00",
+      "metadataKeys": [
+          "Track2"
+      ]
+  },
+  {
+      "id": "a88e9bc2032867a96bf4166369c44b33",
+      "name": "Example0",
+      "description": "Analysis description",
+      "samplesOrder": [
+          "4580cdae-3107-438e-bf8a-3fe28b6ec0a5"
+      ],
+      "notifyByEmail": true,
+      "createdAt": "2022-06-21 18:22:57.868439+00",
+      "updatedAt": "2022-06-21 18:22:57.868439+00",
+      "metadataKeys": [
+          "Track0"
+      ]
+  },
+  {
+      "id": "b6cb756f851e1c9310cc5f3bc0cdcb73",
+      "name": "Example1",
+      "description": "Analysis description",
+      "samplesOrder": [
+          "af808bf4-1cd3-4646-966a-0a253063d2b2"
+      ],
+      "notifyByEmail": true,
+      "createdAt": "2022-06-21 18:22:53.1091+00",
+      "updatedAt": "2022-06-21 18:22:53.1091+00",
+      "metadataKeys": [
+          "Track1"
+      ]
+  }
+]
\ No newline at end of file

From 475c60f829dc7c1926817de83c9edf749d98555a Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Wed, 22 Jun 2022 09:09:00 -0300
Subject: [PATCH 04/19] Improve project update mechanism by maintaining active
 project if possible, also load samples when the project changes

---
 src/components/data-management/SamplesTable.jsx |  6 +++++-
 src/redux/reducers/projects/projectsLoaded.js   | 10 +++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/data-management/SamplesTable.jsx b/src/components/data-management/SamplesTable.jsx
index 9717fc677c..f6bf5f476c 100644
--- a/src/components/data-management/SamplesTable.jsx
+++ b/src/components/data-management/SamplesTable.jsx
@@ -30,7 +30,7 @@ import {
 } from 'redux/actions/projects';
 import { DEFAULT_NA } from 'redux/reducers/projects/initialState';
 import { reorderSamples, updateExperiment } from 'redux/actions/experiments';
-import { updateSample } from 'redux/actions/samples';
+import { loadSamples, updateSample } from 'redux/actions/samples';
 
 import UploadStatus from 'utils/upload/UploadStatus';
 import { arrayMoveImmutable } from 'utils/array-move';
@@ -117,6 +117,10 @@ const SamplesTable = forwardRef((props, ref) => {
     }
   }, [samples, activeProject]);
 
+  useEffect(() => {
+    dispatch(loadSamples(activeProjectUuid));
+  }, [activeProject]);
+
   const deleteMetadataColumn = (name) => {
     dispatch(deleteMetadataTrack(name, activeProjectUuid));
   };
diff --git a/src/redux/reducers/projects/projectsLoaded.js b/src/redux/reducers/projects/projectsLoaded.js
index c12d9b6969..3b42a7a33c 100644
--- a/src/redux/reducers/projects/projectsLoaded.js
+++ b/src/redux/reducers/projects/projectsLoaded.js
@@ -5,13 +5,21 @@ const projectsLoaded = (state, action) => {
   projects.forEach((project) => {
     newProjects[project.uuid] = project;
   });
+
+  let activeProjectId = state.meta.activeProjectUuid;
+
+  // If the current active project no longer exists, change it
+  if (!Object.keys(state).includes(activeProjectId)) {
+    activeProjectId = projects[0]?.uuid;
+  }
+
   return {
     ...state,
     ids,
     loading: false,
     ...newProjects,
     meta: {
-      activeProjectUuid: projects[0]?.uuid,
+      activeProjectUuid: activeProjectId,
     },
   };
 };

From b25630b111810b29587efaf57391f58eb40c9c9e Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Wed, 22 Jun 2022 10:26:52 -0300
Subject: [PATCH 05/19] Make loadSamples only happen if sampleIds changed

---
 src/components/data-management/SamplesTable.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/data-management/SamplesTable.jsx b/src/components/data-management/SamplesTable.jsx
index f6bf5f476c..1decd01a22 100644
--- a/src/components/data-management/SamplesTable.jsx
+++ b/src/components/data-management/SamplesTable.jsx
@@ -41,6 +41,7 @@ import integrationTestConstants from 'utils/integrationTestConstants';
 import 'utils/css/data-management.css';
 import fetchAPI from 'utils/http/fetchAPI';
 import { ClipLoader } from 'react-spinners';
+import useConditionalEffect from 'utils/customHooks/useConditionalEffect';
 
 const { Paragraph, Text } = Typography;
 
@@ -117,9 +118,9 @@ const SamplesTable = forwardRef((props, ref) => {
     }
   }, [samples, activeProject]);
 
-  useEffect(() => {
+  useConditionalEffect(() => {
     dispatch(loadSamples(activeProjectUuid));
-  }, [activeProject]);
+  }, [activeProject.samples]);
 
   const deleteMetadataColumn = (name) => {
     dispatch(deleteMetadataTrack(name, activeProjectUuid));

From 4abc291650da3aa55b0e9b11b8fc0cb28717df4d Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Wed, 22 Jun 2022 10:49:07 -0300
Subject: [PATCH 06/19] Fix one test

---
 .../data-management/SamplesTable.test.jsx     | 63 ++++++++++----
 .../mockData/mockDemoExperiments.json         | 84 +++++++++----------
 2 files changed, 88 insertions(+), 59 deletions(-)

diff --git a/src/__test__/components/data-management/SamplesTable.test.jsx b/src/__test__/components/data-management/SamplesTable.test.jsx
index d0c1de285c..6b3fbc9121 100644
--- a/src/__test__/components/data-management/SamplesTable.test.jsx
+++ b/src/__test__/components/data-management/SamplesTable.test.jsx
@@ -11,8 +11,8 @@ import Storage from '@aws-amplify/storage';
 import _ from 'lodash';
 import { Provider } from 'react-redux';
 
-import mockAPI, { generateDefaultMockAPIResponses, statusResponse } from '__test__/test-utils/mockAPI';
-import { experiments, samples } from '__test__/test-utils/mockData';
+import mockAPI, { generateDefaultMockAPIResponses, promiseResponse, statusResponse } from '__test__/test-utils/mockAPI';
+import { experiments, responseData, samples } from '__test__/test-utils/mockData';
 
 import SamplesTable from 'components/data-management/SamplesTable';
 import { makeStore } from 'redux/store';
@@ -27,6 +27,8 @@ import loadEnvironment from 'redux/actions/networkResources/loadEnvironment';
 import { loadExperiments } from 'redux/actions/experiments';
 import { loadSamples } from 'redux/actions/samples';
 
+import mockDemoExperiments from '__test__/test-utils/mockData/mockDemoExperiments.json';
+
 jest.mock('config');
 
 jest.mock('@aws-amplify/auth', () => ({
@@ -44,11 +46,6 @@ jest.mock('@aws-amplify/storage', () => ({
   ])),
 }));
 
-const expectedSampleNames = [
-  'Example 1',
-  'Another-Example no.2',
-];
-
 jest.mock('utils/data-management/downloadFromUrl');
 
 jest.mock('react-sortable-hoc', () => ({
@@ -86,6 +83,7 @@ const experimentWithoutSamplesId = experimentWithoutSamples.id;
 const customResponses = {
   [`experiments/${experimentWithSamplesId}/samples/${experimentWithSamples.samplesOrder[0]}`]: () => statusResponse(200, 'OK'),
   [`experiments/${experimentWithSamplesId}/samples/position`]: () => statusResponse(200, 'OK'),
+  [`experiments/${mockDemoExperiments[0].id}/clone/${experimentWithoutSamplesId}`]: () => statusResponse(200, 'OK'),
 };
 
 const mockAPIResponse = _.merge(
@@ -115,29 +113,60 @@ describe('Samples table', () => {
     await storeState.dispatch(loadEnvironment('test'));
   });
 
-  it('Shows option to download datasets if there are no samples', async () => {
+  it('Download datasets works correctly and shows up if there are no samples', async () => {
     await renderSamplesTable(storeState);
 
     // Load project without samples
-    storeState.dispatch(setActiveProject(experimentWithoutSamplesId));
+    await act(async () => {
+      await storeState.dispatch(setActiveProject(experimentWithoutSamplesId));
+    });
 
     expect(screen.getByText(/Start uploading your samples by clicking on Add samples./i)).toBeInTheDocument();
     expect(screen.getByText(/Don't have data\? Get started using one of our example datasets:/i)).toBeInTheDocument();
 
-    // There should be n number of example datasets in the correct order
-    const linksContainer = screen.getByText(expectedSampleNames[0]).closest('ul');
-    const links = Array.from(linksContainer.children).map((el) => el.textContent);
+    const exampleExperimentNames = _.map(mockDemoExperiments, 'name');
 
-    expect(links.join(' ')).toEqual(expectedSampleNames.join(' '));
+    exampleExperimentNames.forEach((name) => {
+      expect(screen.getByText(name)).toBeDefined();
+    });
+
+    // Clear mock calls so we can distinguish the new calls made from the old ones
+    fetchMock.mockClear();
+
+    const newExperimentsResponse = _.cloneDeep(responseData.experiments);
 
-    // Clicking on one of the samples downloads the file
-    const exampleFileLink = expectedSampleNames[0];
+    const noSamplesExperiment = newExperimentsResponse.find(
+      ({ id }) => id === experimentWithoutSamplesId,
+    );
+    noSamplesExperiment.samplesOrder = mockDemoExperiments[0].samplesOrder;
+
+    const newApiResponses = _.merge(
+      mockAPIResponse,
+      { experiments: () => promiseResponse(JSON.stringify(newExperimentsResponse)) },
+    );
+
+    fetchMock.mockIf(/.*/, mockAPI(newApiResponses));
 
     await act(async () => {
-      userEvent.click(screen.getByText(exampleFileLink));
+      userEvent.click(screen.getByText(exampleExperimentNames[0]));
     });
 
-    expect(downloadFromUrl).toHaveBeenCalledTimes(1);
+    expect(fetchMock).toHaveBeenCalledWith(
+      `http://localhost:3000/v2/experiments/${mockDemoExperiments[0].id}/clone/${experimentWithoutSamplesId}`,
+      expect.objectContaining({ method: 'POST' }),
+    );
+
+    // Reloads experiments
+    expect(fetchMock).toHaveBeenCalledWith(
+      'http://localhost:3000/v2/experiments',
+      { headers: {} },
+    );
+
+    // Reloads samples for the active experiment (because the samples changed, it wouldnt otherwise)
+    expect(fetchMock).toHaveBeenCalledWith(
+      `http://localhost:3000/v2/experiments/${experimentWithoutSamplesId}/samples`,
+      { headers: {} },
+    );
   });
 
   it('Does not show prompt to upload datasets if samples are available', async () => {
diff --git a/src/__test__/test-utils/mockData/mockDemoExperiments.json b/src/__test__/test-utils/mockData/mockDemoExperiments.json
index 4c5c1b54d9..4bfce2fb5c 100644
--- a/src/__test__/test-utils/mockData/mockDemoExperiments.json
+++ b/src/__test__/test-utils/mockData/mockDemoExperiments.json
@@ -1,44 +1,44 @@
 [
-  {
-      "id": "840ad7454b1ad68af8c237b3320c7d3a",
-      "name": "Example2",
-      "description": "Analysis description",
-      "samplesOrder": [
-          "3eb4e715-03f1-4dc7-aac8-69d566103fd8"
-      ],
-      "notifyByEmail": false,
-      "createdAt": "2022-06-21 18:23:02.688117+00",
-      "updatedAt": "2022-06-21 18:23:02.688117+00",
-      "metadataKeys": [
-          "Track2"
-      ]
-  },
-  {
-      "id": "a88e9bc2032867a96bf4166369c44b33",
-      "name": "Example0",
-      "description": "Analysis description",
-      "samplesOrder": [
-          "4580cdae-3107-438e-bf8a-3fe28b6ec0a5"
-      ],
-      "notifyByEmail": true,
-      "createdAt": "2022-06-21 18:22:57.868439+00",
-      "updatedAt": "2022-06-21 18:22:57.868439+00",
-      "metadataKeys": [
-          "Track0"
-      ]
-  },
-  {
-      "id": "b6cb756f851e1c9310cc5f3bc0cdcb73",
-      "name": "Example1",
-      "description": "Analysis description",
-      "samplesOrder": [
-          "af808bf4-1cd3-4646-966a-0a253063d2b2"
-      ],
-      "notifyByEmail": true,
-      "createdAt": "2022-06-21 18:22:53.1091+00",
-      "updatedAt": "2022-06-21 18:22:53.1091+00",
-      "metadataKeys": [
-          "Track1"
-      ]
-  }
+    {
+        "id": "a88e9bc2032867a96bf4166369c44b33",
+        "name": "Example0",
+        "description": "Analysis description",
+        "samplesOrder": [
+            "4580cdae-3107-438e-bf8a-3fe28b6ec0a5"
+        ],
+        "notifyByEmail": true,
+        "createdAt": "2022-06-21 18:22:57.868439+00",
+        "updatedAt": "2022-06-21 18:22:57.868439+00",
+        "metadataKeys": [
+            "Track0"
+        ]
+    },
+    {
+        "id": "b6cb756f851e1c9310cc5f3bc0cdcb73",
+        "name": "Example1",
+        "description": "Analysis description",
+        "samplesOrder": [
+            "af808bf4-1cd3-4646-966a-0a253063d2b2"
+        ],
+        "notifyByEmail": true,
+        "createdAt": "2022-06-21 18:22:53.1091+00",
+        "updatedAt": "2022-06-21 18:22:53.1091+00",
+        "metadataKeys": [
+            "Track1"
+        ]
+    },
+    {
+        "id": "840ad7454b1ad68af8c237b3320c7d3a",
+        "name": "Example2",
+        "description": "Analysis description",
+        "samplesOrder": [
+            "3eb4e715-03f1-4dc7-aac8-69d566103fd8"
+        ],
+        "notifyByEmail": false,
+        "createdAt": "2022-06-21 18:23:02.688117+00",
+        "updatedAt": "2022-06-21 18:23:02.688117+00",
+        "metadataKeys": [
+            "Track2"
+        ]
+    }
 ]
\ No newline at end of file

From 1a6c358d586ba67c40c24ba1e24ea696d1f03d04 Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Wed, 22 Jun 2022 10:52:17 -0300
Subject: [PATCH 07/19] Remove outdated tests

---
 .../data-management/SamplesTable.test.jsx     | 38 -------------------
 1 file changed, 38 deletions(-)

diff --git a/src/__test__/components/data-management/SamplesTable.test.jsx b/src/__test__/components/data-management/SamplesTable.test.jsx
index 6b3fbc9121..a381c29378 100644
--- a/src/__test__/components/data-management/SamplesTable.test.jsx
+++ b/src/__test__/components/data-management/SamplesTable.test.jsx
@@ -6,8 +6,6 @@ import '@testing-library/jest-dom';
 import fetchMock, { enableFetchMocks } from 'jest-fetch-mock';
 import reactSortableHoc from 'react-sortable-hoc';
 
-import Storage from '@aws-amplify/storage';
-
 import _ from 'lodash';
 import { Provider } from 'react-redux';
 
@@ -21,7 +19,6 @@ import thunk from 'redux-thunk';
 import createTestComponentFactory from '__test__/test-utils/testComponentFactory';
 
 import { loadProjects, setActiveProject } from 'redux/actions/projects';
-import downloadFromUrl from 'utils/data-management/downloadFromUrl';
 
 import loadEnvironment from 'redux/actions/networkResources/loadEnvironment';
 import { loadExperiments } from 'redux/actions/experiments';
@@ -176,41 +173,6 @@ describe('Samples table', () => {
     expect(screen.queryByText(/Don't have data\? Get started using one of our example datasets:/i)).toBeNull();
   });
 
-  it('Does not show option to download sample dataset if there are none available in S3 bucket', async () => {
-    Storage.list.mockImplementationOnce(() => Promise.resolve([]));
-
-    await renderSamplesTable(storeState);
-
-    // Load project without samples
-    storeState.dispatch(setActiveProject(experimentWithoutSamplesId));
-
-    // This prompt to upload samples is still visible
-    expect(screen.getByText(/Start uploading your samples by clicking on Add samples./i)).toBeInTheDocument();
-
-    // But the prompt to download data is not shown anymore
-    expect(screen.queryByText(/Don't have data\? Get started using one of our example datasets:/i)).toBeNull();
-  });
-
-  it('Should not show example datasets with incorrect names', async () => {
-    Storage.list.mockImplementationOnce(() => Promise.resolve([
-      { key: '2.Another-Example_no.2.zip' },
-      { key: '1.Example_1.zip' },
-      { key: 'Dataset_with_no_order.zip' },
-      { key: 'Invalid_key.Dataset.zip' },
-      { key: 'Invalid_key.Dataset_no_extension' },
-    ]));
-
-    await renderSamplesTable(storeState);
-
-    // Load project without samples
-    storeState.dispatch(setActiveProject(experimentWithoutSamplesId));
-
-    const linksContainer = screen.getByText(expectedSampleNames[0]).closest('ul');
-    const links = Array.from(linksContainer.children).map((el) => el.textContent);
-
-    expect(links.join(' ')).toEqual(expectedSampleNames.join(' '));
-  });
-
   it('Should show all the samples', async () => {
     await renderSamplesTable(storeState);
 

From 14894e77e4113ff74b5d12d09211dc4ffc9269bf Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Wed, 22 Jun 2022 11:46:05 -0300
Subject: [PATCH 08/19] Remove redundant test

---
 .../data-management/ProjectDetails.test.jsx   | 32 ++++++++++-------
 .../data-management/index.test.jsx            | 35 -------------------
 .../data-management/SamplesTable.jsx          |  2 +-
 src/utils/customHooks/useConditionalEffect.js |  7 ++--
 4 files changed, 26 insertions(+), 50 deletions(-)

diff --git a/src/__test__/components/data-management/ProjectDetails.test.jsx b/src/__test__/components/data-management/ProjectDetails.test.jsx
index 52b1867afb..ef7099437e 100644
--- a/src/__test__/components/data-management/ProjectDetails.test.jsx
+++ b/src/__test__/components/data-management/ProjectDetails.test.jsx
@@ -1,14 +1,18 @@
+import _ from 'lodash';
 import React from 'react';
-import '@testing-library/jest-dom';
+
 import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import { screen, render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import rootReducer from 'redux/reducers/index';
 import { createStore, applyMiddleware } from 'redux';
-import _ from 'lodash';
+import thunk from 'redux-thunk';
+
+import '@testing-library/jest-dom';
+import configureStore from 'redux-mock-store';
+import { act } from 'react-dom/test-utils';
 import { fireEvent } from '@testing-library/dom';
-import rootReducer from 'redux/reducers/index';
+import userEvent from '@testing-library/user-event';
+import { screen, render, waitFor } from '@testing-library/react';
+
 import * as createMetadataTrack from 'redux/actions/projects/createMetadataTrack';
 import initialProjectState, { projectTemplate } from 'redux/reducers/projects/initialState';
 import initialSamplesState, { sampleTemplate } from 'redux/reducers/samples/initialState';
@@ -18,6 +22,7 @@ import { initialExperimentBackendStatus } from 'redux/reducers/backendStatus/ini
 import PipelineStatus from 'utils/pipelineStatusValues';
 import UploadStatus from 'utils/upload/UploadStatus';
 import ProjectDetails from 'components/data-management/ProjectDetails';
+
 import '__test__/test-utils/setupTests';
 
 const mockNavigateTo = jest.fn();
@@ -227,11 +232,14 @@ describe('ProjectDetails', () => {
 
   it('Creates a metadata column', async () => {
     const store = createStore(rootReducer, _.cloneDeep(withDataState), applyMiddleware(thunk));
-    render(
-      <Provider store={store}>
-        <ProjectDetails width={width} height={height} />
-      </Provider>,
-    );
+    await act(async () => {
+      render(
+        <Provider store={store}>
+          <ProjectDetails width={width} height={height} />
+        </Provider>,
+      );
+    });
+
     const addMetadata = screen.getByText('Add metadata');
     userEvent.click(addMetadata);
     const field = screen.getByRole('textbox');
diff --git a/src/__test__/pages/experiments/[experimentId]/data-management/index.test.jsx b/src/__test__/pages/experiments/[experimentId]/data-management/index.test.jsx
index c17c95dd3e..3c480bed09 100644
--- a/src/__test__/pages/experiments/[experimentId]/data-management/index.test.jsx
+++ b/src/__test__/pages/experiments/[experimentId]/data-management/index.test.jsx
@@ -163,41 +163,6 @@ describe('Data Management page', () => {
     expect(processProjectButton).toBeInTheDocument();
   });
 
-  it('Example datasets are available for download', async () => {
-    await act(async () => {
-      render(
-        <Provider store={storeState}>
-          {dataManagementPageFactory()}
-        </Provider>,
-      );
-    });
-
-    // There are 2 elements with the name of the project,  because of how Antd renders the element
-    // so we're only choosing one
-    const projectName = screen.getAllByText(experimentWithoutSamples.name)[0];
-
-    await act(async () => {
-      userEvent.click(projectName);
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText(/Don't have data\? Get started using one of our example datasets/i)).toBeInTheDocument();
-    });
-
-    const downloadPromises = expectedSampleNames.map(async (sampleName) => {
-      const fileDownloadLink = screen.getByText(sampleName);
-
-      expect(fileDownloadLink).toBeInTheDocument();
-
-      // Clicking the link will trigger downlaod
-      userEvent.click(fileDownloadLink);
-    });
-
-    await Promise.all(downloadPromises);
-
-    expect(downloadFromUrl).toHaveBeenCalledTimes(expectedSampleNames.length);
-  });
-
   it('Shows samples table if project contain samples', async () => {
     // Change to project with samples
     await act(async () => {
diff --git a/src/components/data-management/SamplesTable.jsx b/src/components/data-management/SamplesTable.jsx
index 1decd01a22..e3a7af628f 100644
--- a/src/components/data-management/SamplesTable.jsx
+++ b/src/components/data-management/SamplesTable.jsx
@@ -120,7 +120,7 @@ const SamplesTable = forwardRef((props, ref) => {
 
   useConditionalEffect(() => {
     dispatch(loadSamples(activeProjectUuid));
-  }, [activeProject.samples]);
+  }, [activeProject.samples], { lazy: true });
 
   const deleteMetadataColumn = (name) => {
     dispatch(deleteMetadataTrack(name, activeProjectUuid));
diff --git a/src/utils/customHooks/useConditionalEffect.js b/src/utils/customHooks/useConditionalEffect.js
index 04c2ed96e1..c3471dec07 100644
--- a/src/utils/customHooks/useConditionalEffect.js
+++ b/src/utils/customHooks/useConditionalEffect.js
@@ -4,7 +4,10 @@ import React, { useRef } from 'react';
 // Custom useEffect hook that runs only when
 // a comparator notices a difference between one of the dependencies previous and new values
 // By default, the comparator used is _.isEqual
-const useConditionalEffect = (callback, dependencies, comparator = _.isEqual) => {
+// It can be set as lazy (so that it doesnt run on the first render)
+const useConditionalEffect = (callback, dependencies, optionals = {}) => {
+  const { comparator = _.isEqual, lazy = false } = optionals;
+
   const firstRenderRef = useRef(true);
   const dependenciesRef = useRef(dependencies);
 
@@ -14,7 +17,7 @@ const useConditionalEffect = (callback, dependencies, comparator = _.isEqual) =>
       (currDependency, index) => !comparator(currDependency, dependencies[index]),
     );
 
-    if (firstRenderRef.current || somethingChanged) {
+    if ((firstRenderRef.current && !lazy) || somethingChanged) {
       callback(...args);
     }
 

From ceca63a0bd50528a2d6699680386dde36eb71252 Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Wed, 22 Jun 2022 13:27:38 -0300
Subject: [PATCH 09/19] Renames

---
 .../components/data-management/SamplesTable.test.jsx        | 2 +-
 src/components/data-management/SamplesTable.jsx             | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/__test__/components/data-management/SamplesTable.test.jsx b/src/__test__/components/data-management/SamplesTable.test.jsx
index a381c29378..09bcb835f7 100644
--- a/src/__test__/components/data-management/SamplesTable.test.jsx
+++ b/src/__test__/components/data-management/SamplesTable.test.jsx
@@ -110,7 +110,7 @@ describe('Samples table', () => {
     await storeState.dispatch(loadEnvironment('test'));
   });
 
-  it('Download datasets works correctly and shows up if there are no samples', async () => {
+  it('Clone from example experiment works correctly and shows up if there are no samples', async () => {
     await renderSamplesTable(storeState);
 
     // Load project without samples
diff --git a/src/components/data-management/SamplesTable.jsx b/src/components/data-management/SamplesTable.jsx
index e3a7af628f..37e8305e81 100644
--- a/src/components/data-management/SamplesTable.jsx
+++ b/src/components/data-management/SamplesTable.jsx
@@ -48,7 +48,7 @@ const { Paragraph, Text } = Typography;
 const SamplesTable = forwardRef((props, ref) => {
   const dispatch = useDispatch();
   const [tableData, setTableData] = useState([]);
-  const [exampleDatasets, setExampleExperiments] = useState([]);
+  const [exampleExperiments, setExampleExperiments] = useState([]);
 
   const projects = useSelector((state) => state.projects);
   const samples = useSelector((state) => state.samples);
@@ -288,7 +288,7 @@ const SamplesTable = forwardRef((props, ref) => {
             Start uploading your samples by clicking on Add samples.
           </Paragraph>
           {
-            exampleDatasets.length > 0 && (
+            exampleExperiments.length > 0 && (
               <>
                 <Text>
                   Don&apos;t have data? Get started using one of our example datasets:
@@ -296,7 +296,7 @@ const SamplesTable = forwardRef((props, ref) => {
                 <div style={{ width: 'auto', textAlign: 'left' }}>
                   <ul>
                     {
-                      exampleDatasets.map(({ id, name }) => (
+                      exampleExperiments.map(({ id, name }) => (
                         <li key={name}>
                           <Button
                             type='link'

From 9ddc0277727788acd55108b845a4afccc3b758eb Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Wed, 22 Jun 2022 13:33:14 -0300
Subject: [PATCH 10/19] Reorder tests into internal describe for more
 readibility

---
 .../data-management/SamplesTable.test.jsx     | 116 +++++++++---------
 1 file changed, 60 insertions(+), 56 deletions(-)

diff --git a/src/__test__/components/data-management/SamplesTable.test.jsx b/src/__test__/components/data-management/SamplesTable.test.jsx
index 09bcb835f7..1ec2063f1b 100644
--- a/src/__test__/components/data-management/SamplesTable.test.jsx
+++ b/src/__test__/components/data-management/SamplesTable.test.jsx
@@ -110,62 +110,6 @@ describe('Samples table', () => {
     await storeState.dispatch(loadEnvironment('test'));
   });
 
-  it('Clone from example experiment works correctly and shows up if there are no samples', async () => {
-    await renderSamplesTable(storeState);
-
-    // Load project without samples
-    await act(async () => {
-      await storeState.dispatch(setActiveProject(experimentWithoutSamplesId));
-    });
-
-    expect(screen.getByText(/Start uploading your samples by clicking on Add samples./i)).toBeInTheDocument();
-    expect(screen.getByText(/Don't have data\? Get started using one of our example datasets:/i)).toBeInTheDocument();
-
-    const exampleExperimentNames = _.map(mockDemoExperiments, 'name');
-
-    exampleExperimentNames.forEach((name) => {
-      expect(screen.getByText(name)).toBeDefined();
-    });
-
-    // Clear mock calls so we can distinguish the new calls made from the old ones
-    fetchMock.mockClear();
-
-    const newExperimentsResponse = _.cloneDeep(responseData.experiments);
-
-    const noSamplesExperiment = newExperimentsResponse.find(
-      ({ id }) => id === experimentWithoutSamplesId,
-    );
-    noSamplesExperiment.samplesOrder = mockDemoExperiments[0].samplesOrder;
-
-    const newApiResponses = _.merge(
-      mockAPIResponse,
-      { experiments: () => promiseResponse(JSON.stringify(newExperimentsResponse)) },
-    );
-
-    fetchMock.mockIf(/.*/, mockAPI(newApiResponses));
-
-    await act(async () => {
-      userEvent.click(screen.getByText(exampleExperimentNames[0]));
-    });
-
-    expect(fetchMock).toHaveBeenCalledWith(
-      `http://localhost:3000/v2/experiments/${mockDemoExperiments[0].id}/clone/${experimentWithoutSamplesId}`,
-      expect.objectContaining({ method: 'POST' }),
-    );
-
-    // Reloads experiments
-    expect(fetchMock).toHaveBeenCalledWith(
-      'http://localhost:3000/v2/experiments',
-      { headers: {} },
-    );
-
-    // Reloads samples for the active experiment (because the samples changed, it wouldnt otherwise)
-    expect(fetchMock).toHaveBeenCalledWith(
-      `http://localhost:3000/v2/experiments/${experimentWithoutSamplesId}/samples`,
-      { headers: {} },
-    );
-  });
-
   it('Does not show prompt to upload datasets if samples are available', async () => {
     await renderSamplesTable(storeState);
 
@@ -289,4 +233,64 @@ describe('Samples table', () => {
       },
     );
   });
+
+  describe('Example experiments functionality', () => {
+    beforeEach(async () => {
+      await renderSamplesTable(storeState);
+
+      // Load project without samples
+      await act(async () => {
+        await storeState.dispatch(setActiveProject(experimentWithoutSamplesId));
+      });
+    });
+
+    it('Example experiments show up in an empty experiment', async () => {
+      expect(screen.getByText(/Start uploading your samples by clicking on Add samples./i)).toBeInTheDocument();
+      expect(screen.getByText(/Don't have data\? Get started using one of our example datasets:/i)).toBeInTheDocument();
+
+      const exampleExperimentNames = _.map(mockDemoExperiments, 'name');
+
+      exampleExperimentNames.forEach((name) => {
+        expect(screen.getByText(name)).toBeDefined();
+      });
+    });
+
+    it('Cloning from example experiments works correctly', async () => {
+      // Clear mock calls so we can distinguish the new calls made from the old ones
+      fetchMock.mockClear();
+
+      const newExperimentsResponse = _.cloneDeep(responseData.experiments);
+      const noSamplesExperiment = newExperimentsResponse.find(
+        ({ id }) => id === experimentWithoutSamplesId,
+      );
+      noSamplesExperiment.samplesOrder = mockDemoExperiments[0].samplesOrder;
+      const newApiResponses = _.merge(
+        mockAPIResponse,
+        { experiments: () => promiseResponse(JSON.stringify(newExperimentsResponse)) },
+      );
+      fetchMock.mockIf(/.*/, mockAPI(newApiResponses));
+
+      await act(async () => {
+        userEvent.click(screen.getByText(mockDemoExperiments[0].name));
+      });
+
+      expect(fetchMock).toHaveBeenCalledWith(
+        `http://localhost:3000/v2/experiments/${mockDemoExperiments[0].id}/clone/${experimentWithoutSamplesId}`,
+        expect.objectContaining({ method: 'POST' }),
+      );
+
+      // Reloads experiments
+      expect(fetchMock).toHaveBeenCalledWith(
+        'http://localhost:3000/v2/experiments',
+        { headers: {} },
+      );
+
+      // Reloads samples for the active experiment
+      // (because the samples changed, it wouldnt otherwise)
+      expect(fetchMock).toHaveBeenCalledWith(
+        `http://localhost:3000/v2/experiments/${experimentWithoutSamplesId}/samples`,
+        { headers: {} },
+      );
+    });
+  });
 });

From 042ae4b09963ff8735d29e473daf85d7922f66d5 Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Wed, 22 Jun 2022 14:14:39 -0300
Subject: [PATCH 11/19] Add samplesSubsetIds optional body in clone endpoint

---
 src/components/data-management/SamplesTable.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/data-management/SamplesTable.jsx b/src/components/data-management/SamplesTable.jsx
index 37e8305e81..5f264639c4 100644
--- a/src/components/data-management/SamplesTable.jsx
+++ b/src/components/data-management/SamplesTable.jsx
@@ -272,7 +272,13 @@ const SamplesTable = forwardRef((props, ref) => {
   const cloneIntoCurrentExperiment = async (exampleExperimentId) => {
     const url = `/v2/experiments/${exampleExperimentId}/clone/${activeProjectUuid}`;
 
-    await fetchAPI(url, { method: 'POST' });
+    await fetchAPI(
+      url,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      },
+    );
 
     dispatch(loadProjects());
   };

From 548922e4395b117055b93584fba5a7d3a6016e2f Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Wed, 22 Jun 2022 14:16:32 -0300
Subject: [PATCH 12/19] Add header check

---
 .../components/data-management/SamplesTable.test.jsx         | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/__test__/components/data-management/SamplesTable.test.jsx b/src/__test__/components/data-management/SamplesTable.test.jsx
index 1ec2063f1b..f3d91538dd 100644
--- a/src/__test__/components/data-management/SamplesTable.test.jsx
+++ b/src/__test__/components/data-management/SamplesTable.test.jsx
@@ -276,7 +276,10 @@ describe('Samples table', () => {
 
       expect(fetchMock).toHaveBeenCalledWith(
         `http://localhost:3000/v2/experiments/${mockDemoExperiments[0].id}/clone/${experimentWithoutSamplesId}`,
-        expect.objectContaining({ method: 'POST' }),
+        expect.objectContaining({
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+        }),
       );
 
       // Reloads experiments

From d49e214f0018c47b9303716f41dc5957f991abf0 Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Wed, 22 Jun 2022 16:37:27 -0300
Subject: [PATCH 13/19] Add test

---
 src/__test__/utils/getAccountId.test.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/__test__/utils/getAccountId.test.js

diff --git a/src/__test__/utils/getAccountId.test.js b/src/__test__/utils/getAccountId.test.js
new file mode 100644
index 0000000000..770475a963
--- /dev/null
+++ b/src/__test__/utils/getAccountId.test.js
@@ -0,0 +1,15 @@
+import getAccountId from 'utils/getAccountId';
+
+describe('getAccountId', () => {
+  it('Works in dev env', () => {
+    expect(getAccountId('development')).toEqual('000000000000');
+  });
+
+  it('Works in staging env', () => {
+    expect(getAccountId('staging')).toEqual('242905224710');
+  });
+
+  it('Works in prod env', () => {
+    expect(getAccountId('production')).toEqual('242905224710');
+  });
+});

From 155a347e5824a96b236b14e2062c4e162c03ea66 Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Thu, 23 Jun 2022 11:09:39 -0300
Subject: [PATCH 14/19] Change endpoint and behavior based on pol comments

---
 src/components/data-management/SamplesTable.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/data-management/SamplesTable.jsx b/src/components/data-management/SamplesTable.jsx
index 5f264639c4..7092db86fb 100644
--- a/src/components/data-management/SamplesTable.jsx
+++ b/src/components/data-management/SamplesTable.jsx
@@ -27,6 +27,7 @@ import {
   createMetadataTrack,
   updateValueInMetadataTrack,
   loadProjects,
+  setActiveProject,
 } from 'redux/actions/projects';
 import { DEFAULT_NA } from 'redux/reducers/projects/initialState';
 import { reorderSamples, updateExperiment } from 'redux/actions/experiments';
@@ -270,9 +271,9 @@ const SamplesTable = forwardRef((props, ref) => {
   }, [environment]);
 
   const cloneIntoCurrentExperiment = async (exampleExperimentId) => {
-    const url = `/v2/experiments/${exampleExperimentId}/clone/${activeProjectUuid}`;
+    const url = `/v2/experiments/${exampleExperimentId}/clone`;
 
-    await fetchAPI(
+    const newExperimentId = await fetchAPI(
       url,
       {
         method: 'POST',
@@ -280,7 +281,8 @@ const SamplesTable = forwardRef((props, ref) => {
       },
     );
 
-    dispatch(loadProjects());
+    await dispatch(loadProjects());
+    await dispatch(setActiveProject(newExperimentId));
   };
 
   const noDataText = (

From 7d3c19fba03cca0fd3caf969df7d713081cbeaec Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Thu, 23 Jun 2022 11:27:56 -0300
Subject: [PATCH 15/19] Fix tests

---
 .../data-management/SamplesTable.test.jsx           | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/__test__/components/data-management/SamplesTable.test.jsx b/src/__test__/components/data-management/SamplesTable.test.jsx
index f3d91538dd..2d9c0f2dbb 100644
--- a/src/__test__/components/data-management/SamplesTable.test.jsx
+++ b/src/__test__/components/data-management/SamplesTable.test.jsx
@@ -76,11 +76,13 @@ const experimentWithoutSamples = experiments.find(
 const experimentWithSamplesId = experimentWithSamples.id;
 const experimentWithoutSamplesId = experimentWithoutSamples.id;
 
+const experimentCloneId = 'mockExperimentCloneId';
+
 // Mocking samples update / delete routes
 const customResponses = {
   [`experiments/${experimentWithSamplesId}/samples/${experimentWithSamples.samplesOrder[0]}`]: () => statusResponse(200, 'OK'),
   [`experiments/${experimentWithSamplesId}/samples/position`]: () => statusResponse(200, 'OK'),
-  [`experiments/${mockDemoExperiments[0].id}/clone/${experimentWithoutSamplesId}`]: () => statusResponse(200, 'OK'),
+  [`experiments/${mockDemoExperiments[0].id}/clone`]: () => promiseResponse(JSON.stringify(experimentCloneId)),
 };
 
 const mockAPIResponse = _.merge(
@@ -275,7 +277,7 @@ describe('Samples table', () => {
       });
 
       expect(fetchMock).toHaveBeenCalledWith(
-        `http://localhost:3000/v2/experiments/${mockDemoExperiments[0].id}/clone/${experimentWithoutSamplesId}`,
+        `http://localhost:3000/v2/experiments/${mockDemoExperiments[0].id}/clone`,
         expect.objectContaining({
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
@@ -287,13 +289,6 @@ describe('Samples table', () => {
         'http://localhost:3000/v2/experiments',
         { headers: {} },
       );
-
-      // Reloads samples for the active experiment
-      // (because the samples changed, it wouldnt otherwise)
-      expect(fetchMock).toHaveBeenCalledWith(
-        `http://localhost:3000/v2/experiments/${experimentWithoutSamplesId}/samples`,
-        { headers: {} },
-      );
     });
   });
 });

From f347ee7e3cd3ae5ac0dec333406eb55780ef5104 Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Thu, 23 Jun 2022 13:03:44 -0300
Subject: [PATCH 16/19] Remove line

---
 src/components/data-management/LaunchAnalysisButton.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/data-management/LaunchAnalysisButton.jsx b/src/components/data-management/LaunchAnalysisButton.jsx
index 00a0f56463..7f07dc1e2f 100644
--- a/src/components/data-management/LaunchAnalysisButton.jsx
+++ b/src/components/data-management/LaunchAnalysisButton.jsx
@@ -107,7 +107,6 @@ const LaunchAnalysisButton = () => {
     const allSampleMetadataInserted = (sample) => {
       if (!metadataKeysAvailable) return true;
       if (Object.keys(sample.metadata).length !== metadataKeysAvailable) return false;
-
       return Object.values(sample.metadata)
         .every((value) => value.length > 0);
     };

From 02c21616de62726bb69290bb640c85068b08a0ed Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Thu, 23 Jun 2022 13:19:40 -0300
Subject: [PATCH 17/19] Remove some api v1 code

---
 src/components/data-management/SamplesTable.jsx | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/data-management/SamplesTable.jsx b/src/components/data-management/SamplesTable.jsx
index 7092db86fb..36d6368052 100644
--- a/src/components/data-management/SamplesTable.jsx
+++ b/src/components/data-management/SamplesTable.jsx
@@ -31,7 +31,7 @@ import {
 } from 'redux/actions/projects';
 import { DEFAULT_NA } from 'redux/reducers/projects/initialState';
 import { reorderSamples, updateExperiment } from 'redux/actions/experiments';
-import { loadSamples, updateSample } from 'redux/actions/samples';
+import { loadSamples } from 'redux/actions/samples';
 
 import UploadStatus from 'utils/upload/UploadStatus';
 import { arrayMoveImmutable } from 'utils/array-move';
@@ -149,11 +149,7 @@ const SamplesTable = forwardRef((props, ref) => {
           dataIndex={key}
           rowIdx={rowIdx}
           onAfterSubmit={(newValue) => {
-            if (config.currentApiVersion === api.V1) {
-              dispatch(updateSample(record.uuid, { metadata: { [key]: newValue } }));
-            } else if (config.currentApiVersion === api.V2) {
-              dispatch(updateValueInMetadataTrack(activeProjectUuid, record.uuid, key, newValue));
-            }
+            dispatch(updateValueInMetadataTrack(activeProjectUuid, record.uuid, key, newValue));
           }}
         />
       ),
@@ -202,7 +198,6 @@ const SamplesTable = forwardRef((props, ref) => {
 
   const setCells = (value, metadataKey, actionType) => {
     if (!MASS_EDIT_ACTIONS.includes(actionType)) return;
-    const updateObject = { metadata: { [metadataKey]: value } };
 
     const canUpdateCell = (sampleUuid, action) => {
       if (action !== 'REPLACE_EMPTY') return true;
@@ -218,11 +213,7 @@ const SamplesTable = forwardRef((props, ref) => {
     activeProject.samples.forEach(
       (sampleUuid) => {
         if (canUpdateCell(sampleUuid, actionType)) {
-          if (config.currentApiVersion === api.V1) {
-            dispatch(updateSample(sampleUuid, updateObject));
-          } else if (config.currentApiVersion === api.V2) {
-            dispatch(updateValueInMetadataTrack(activeProjectUuid, sampleUuid, metadataKey, value));
-          }
+          dispatch(updateValueInMetadataTrack(activeProjectUuid, sampleUuid, metadataKey, value));
         }
       },
     );

From 43c538d71af7a66bef556139e3f10221ff342657 Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Mon, 27 Jun 2022 11:16:16 -0300
Subject: [PATCH 18/19] Remove automatic createProject pop up if no experiments

---
 src/pages/data-management/index.jsx | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/src/pages/data-management/index.jsx b/src/pages/data-management/index.jsx
index 4d8f8a274e..8649dee03c 100644
--- a/src/pages/data-management/index.jsx
+++ b/src/pages/data-management/index.jsx
@@ -28,14 +28,10 @@ const DataManagementPage = () => {
 
   const sampleSaving = useSelector((state) => state.samples.meta.saving);
 
-  const {
-    activeProjectUuid,
-    loading: projectsLoading,
-  } = useSelector((state) => state.projects.meta);
+  const { activeProjectUuid } = useSelector((state) => state.projects.meta);
 
   const experiments = useSelector((state) => state.experiments);
   const [newProjectModalVisible, setNewProjectModalVisible] = useState(false);
-  const [justLoggedIn, setJustLoggedIn] = useState(true);
   const activeProject = projectsList[activeProjectUuid];
   const loadedSamples = useSelector((state) => state.samples);
 
@@ -72,19 +68,6 @@ const DataManagementPage = () => {
     if (experiments[activeExperimentId]) updateRunStatus(activeExperimentId);
   }, [activeProjectUuid]);
 
-  useEffect(() => {
-    // only open the modal the first time a user logs in if there are no projects
-    if (justLoggedIn === false || projectsLoading === true) {
-      return;
-    }
-
-    setJustLoggedIn(false);
-
-    if (projectsList.ids.length === 0) {
-      setNewProjectModalVisible(true);
-    }
-  }, [projectsList, projectsLoading]);
-
   const PROJECTS_LIST = 'Projects';
   const PROJECT_DETAILS = 'Project Details';
 

From 5089ceef3b02c3669a733df4b1503715850aca42 Mon Sep 17 00:00:00 2001
From: cosa65 <martin@biomage.net>
Date: Mon, 27 Jun 2022 11:32:39 -0300
Subject: [PATCH 19/19] Add ExampleExperimentSpace component that allows users
 to clone one of the example experiments

---
 .../ExampleExperimentsSpace.jsx               | 93 +++++++++++++++++++
 .../data-management/SamplesTable.jsx          | 84 +++--------------
 src/pages/data-management/index.jsx           | 13 +--
 3 files changed, 107 insertions(+), 83 deletions(-)
 create mode 100644 src/components/data-management/ExampleExperimentsSpace.jsx

diff --git a/src/components/data-management/ExampleExperimentsSpace.jsx b/src/components/data-management/ExampleExperimentsSpace.jsx
new file mode 100644
index 0000000000..c81046f3bb
--- /dev/null
+++ b/src/components/data-management/ExampleExperimentsSpace.jsx
@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Typography, Space, Button, Empty,
+} from 'antd';
+import fetchAPI from 'utils/http/fetchAPI';
+import { loadProjects, setActiveProject } from 'redux/actions/projects';
+import { useDispatch, useSelector } from 'react-redux';
+
+const { Paragraph, Text } = Typography;
+
+const ExampleExperimentsSpace = ({ introductionText, imageStyle }) => {
+  const dispatch = useDispatch();
+
+  const environment = useSelector((state) => state?.networkResources?.environment);
+
+  const [exampleExperiments, setExampleExperiments] = useState([]);
+
+  useEffect(() => {
+    if (!environment) return;
+
+    fetchAPI('/v2/experiments/examples').then((experiments) => {
+      setExampleExperiments(experiments);
+    });
+  }, [environment]);
+
+  const cloneIntoCurrentExperiment = async (exampleExperimentId) => {
+    const url = `/v2/experiments/${exampleExperimentId}/clone`;
+
+    const newExperimentId = await fetchAPI(
+      url,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      },
+    );
+
+    await dispatch(loadProjects());
+    await dispatch(setActiveProject(newExperimentId));
+  };
+
+  return (
+    <Empty
+      imageStyle={imageStyle}
+      description={(
+        <Space size='middle' direction='vertical'>
+          <Paragraph>
+            {introductionText}
+          </Paragraph>
+          {
+            exampleExperiments.length > 0 && (
+              <>
+                <Text>
+                  Don&apos;t have data? Get started using one of our example datasets:
+                </Text>
+                <div style={{ width: 'auto', textAlign: 'left' }}>
+                  <ul>
+                    {
+                      exampleExperiments.map(({ id, name }) => (
+                        <li key={name}>
+                          <Button
+                            type='link'
+                            size='small'
+                            onClick={() => cloneIntoCurrentExperiment(id)}
+                          >
+                            {name}
+                          </Button>
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </div>
+              </>
+            )
+          }
+        </Space>
+      )}
+    />
+  );
+};
+
+ExampleExperimentsSpace.defaultProps = {
+  introductionText: '',
+  imageStyle: {},
+};
+
+ExampleExperimentsSpace.propTypes = {
+  introductionText: PropTypes.string,
+  imageStyle: PropTypes.object,
+};
+
+export default ExampleExperimentsSpace;
diff --git a/src/components/data-management/SamplesTable.jsx b/src/components/data-management/SamplesTable.jsx
index 36d6368052..54c313982f 100644
--- a/src/components/data-management/SamplesTable.jsx
+++ b/src/components/data-management/SamplesTable.jsx
@@ -5,7 +5,7 @@ import React, {
 
 import { useSelector, useDispatch } from 'react-redux';
 import {
-  Table, Row, Col, Typography, Space, Button, Empty,
+  Table, Row, Col, Typography, Space,
 } from 'antd';
 import {
   MenuOutlined,
@@ -15,19 +15,16 @@ import { sortableHandle, sortableContainer, sortableElement } from 'react-sortab
 import config from 'config';
 import { api } from 'utils/constants';
 
-import MetadataColumnTitle from 'components/data-management/MetadataColumn';
+import ExampleExperimentsSpace from 'components/data-management/ExampleExperimentsSpace';
 import MetadataPopover from 'components/data-management/MetadataPopover';
-import {
-  UploadCell, SampleNameCell, EditableFieldCell,
-} from 'components/data-management/SamplesTableCells';
+import MetadataColumnTitle from 'components/data-management/MetadataColumn';
+import { UploadCell, SampleNameCell, EditableFieldCell } from 'components/data-management/SamplesTableCells';
 
 import {
   updateProject,
   deleteMetadataTrack,
   createMetadataTrack,
   updateValueInMetadataTrack,
-  loadProjects,
-  setActiveProject,
 } from 'redux/actions/projects';
 import { DEFAULT_NA } from 'redux/reducers/projects/initialState';
 import { reorderSamples, updateExperiment } from 'redux/actions/experiments';
@@ -40,16 +37,15 @@ import { metadataNameToKey, metadataKeyToName, temporaryMetadataKey } from 'util
 import integrationTestConstants from 'utils/integrationTestConstants';
 
 import 'utils/css/data-management.css';
-import fetchAPI from 'utils/http/fetchAPI';
+
 import { ClipLoader } from 'react-spinners';
 import useConditionalEffect from 'utils/customHooks/useConditionalEffect';
 
-const { Paragraph, Text } = Typography;
+const { Text } = Typography;
 
 const SamplesTable = forwardRef((props, ref) => {
   const dispatch = useDispatch();
   const [tableData, setTableData] = useState([]);
-  const [exampleExperiments, setExampleExperiments] = useState([]);
 
   const projects = useSelector((state) => state.projects);
   const samples = useSelector((state) => state.samples);
@@ -57,7 +53,6 @@ const SamplesTable = forwardRef((props, ref) => {
 
   const { activeProjectUuid } = useSelector((state) => state.projects.meta) || false;
   const activeProject = useSelector((state) => state.projects[activeProjectUuid]) || false;
-  const environment = useSelector((state) => state?.networkResources?.environment);
 
   const [sampleNames, setSampleNames] = useState(new Set());
   const DragHandle = sortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);
@@ -253,67 +248,10 @@ const SamplesTable = forwardRef((props, ref) => {
     setTableData(newData);
   }, [projects, samples, activeProjectUuid]);
 
-  useEffect(() => {
-    if (!environment) return;
-
-    fetchAPI('/v2/experiments/examples').then((experiments) => {
-      setExampleExperiments(experiments);
-    });
-  }, [environment]);
-
-  const cloneIntoCurrentExperiment = async (exampleExperimentId) => {
-    const url = `/v2/experiments/${exampleExperimentId}/clone`;
-
-    const newExperimentId = await fetchAPI(
-      url,
-      {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-      },
-    );
-
-    await dispatch(loadProjects());
-    await dispatch(setActiveProject(newExperimentId));
-  };
-
-  const noDataText = (
-    <Empty
-      imageStyle={{
-        height: 60,
-      }}
-      description={(
-        <Space size='middle' direction='vertical'>
-          <Paragraph>
-            Start uploading your samples by clicking on Add samples.
-          </Paragraph>
-          {
-            exampleExperiments.length > 0 && (
-              <>
-                <Text>
-                  Don&apos;t have data? Get started using one of our example datasets:
-                </Text>
-                <div style={{ width: 'auto', textAlign: 'left' }}>
-                  <ul>
-                    {
-                      exampleExperiments.map(({ id, name }) => (
-                        <li key={name}>
-                          <Button
-                            type='link'
-                            size='small'
-                            onClick={() => cloneIntoCurrentExperiment(id)}
-                          >
-                            {name}
-                          </Button>
-                        </li>
-                      ))
-                    }
-                  </ul>
-                </div>
-              </>
-            )
-          }
-        </Space>
-      )}
+  const noDataComponent = (
+    <ExampleExperimentsSpace
+      introductionText='Start uploading your samples by clicking on Add samples.'
+      imageStyle={{ height: 60 }}
     />
   );
 
@@ -392,7 +330,7 @@ const SamplesTable = forwardRef((props, ref) => {
           dataSource={tableData}
           sticky
           pagination={false}
-          locale={{ emptyText: noDataText }}
+          locale={{ emptyText: noDataComponent }}
           components={{
             body: {
               wrapper: DragContainer,
diff --git a/src/pages/data-management/index.jsx b/src/pages/data-management/index.jsx
index 8649dee03c..ca05340d5b 100644
--- a/src/pages/data-management/index.jsx
+++ b/src/pages/data-management/index.jsx
@@ -1,9 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import {
-  Button, Space, Empty,
-} from 'antd';
+import { Space } from 'antd';
 
 import { ClipLoader } from 'react-spinners';
 import { loadProjects } from 'redux/actions/projects';
@@ -17,6 +15,7 @@ import ProjectDetails from 'components/data-management/ProjectDetails';
 import { loadProcessingSettings } from 'redux/actions/experimentSettings';
 import loadBackendStatus from 'redux/actions/backendStatus/loadBackendStatus';
 import { loadSamples } from 'redux/actions/samples';
+import ExampleExperimentsSpace from 'components/data-management/ExampleExperimentsSpace';
 
 const DataManagementPage = () => {
   const dispatch = useDispatch();
@@ -85,13 +84,7 @@ const DataManagementPage = () => {
       toolbarControls: [],
       component: (width, height) => {
         if (!activeProjectUuid) {
-          return (
-            <Empty
-              description='You have no projects yet.'
-            >
-              <Button type='primary' onClick={() => setNewProjectModalVisible(true)}>Get started</Button>
-            </Empty>
-          );
+          return <ExampleExperimentsSpace introductionText='You have no projects yet.' />;
         }
 
         return (