[BIOMAGE-1273] Refactor ProjectDetails component

src/__test__/components/data-management/ProjectDetails.test.jsx

@@ -3,18 +3,22 @@ import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { render, screen } from '@testing-library/react';
-
+import * as rtl from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createStore, applyMiddleware } from 'redux';
+import _ from 'lodash';
+import { fireEvent } from '@testing-library/dom';
+import rootReducer from '../../../redux/reducers/index';
+import * as projectsMetadataCreate from '../../../redux/actions/projects/createMetadataTrack';
 import ProjectDetails from '../../../components/data-management/ProjectDetails';
-
 import initialProjectState, { projectTemplate } from '../../../redux/reducers/projects/initialState';
 import initialSamplesState, { sampleTemplate } from '../../../redux/reducers/samples/initialState';
 import initialExperimentsState from '../../../redux/reducers/experiments/initialState';
 import initialExperimentSettingsState from '../../../redux/reducers/experimentSettings/initialState';
 import UploadStatus from '../../../utils/upload/UploadStatus';
 
 const mockStore = configureStore([thunk]);
-
+const { render, screen } = rtl;
 const width = 600;
 const height = 400;
 
@@ -99,6 +103,11 @@ const withDataState = {
 };
 
 describe('ProjectDetails', () => {
+  let metadataCreated;
+  beforeEach(() => {
+    jest.clearAllMocks();
+    metadataCreated = jest.spyOn(projectsMetadataCreate, 'default');
+  });
   it('Has a title, project ID and description', () => {
     render(
       <Provider store={mockStore(noDataState)}>
@@ -246,4 +255,34 @@ describe('ProjectDetails', () => {
     expect(screen.getByText(sample1Name)).toBeDefined();
     expect(screen.getByText(sample2Name)).toBeDefined();
   });
+
+  it('Creates a metadata column', async () => {
+    const store = createStore(rootReducer, _.cloneDeep(withDataState), applyMiddleware(thunk));
+    render(
+      <Provider store={store}>
+        <ProjectDetails width={width} height={height} />
+      </Provider>,
+    );
+    const addMetadata = screen.getByText('Add metadata');
+    userEvent.click(addMetadata);
+    const field = screen.getByRole('textbox');
+    userEvent.type(field, 'myBrandNewMetadata');
+    fireEvent.keyDown(field, { key: 'Enter', code: 'Enter' });
+    await rtl.waitFor(() => expect(metadataCreated).toBeCalledTimes(1));
+  });
+
+  it('Cancels metadata creation', () => {
+    const store = createStore(rootReducer, _.cloneDeep(withDataState), applyMiddleware(thunk));
+    render(
+      <Provider store={store}>
+        <ProjectDetails width={width} height={height} />
+      </Provider>,
+    );
+    const addMetadata = screen.getByText('Add metadata');
+    userEvent.click(addMetadata);
+    const field = screen.getByRole('textbox');
+    userEvent.type(field, 'somenewMeta');
+    fireEvent.keyDown(field, { key: 'Escape', code: 'Escape' });
+    expect(store.getState().projects[projectUuid].metadataKeys).toEqual(['metadata-1']);
+  });
 });

src/__test__/redux/actions/projects/deleteMetadataTrack.test.js

@@ -1,6 +1,6 @@
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { metadataNameToKey } from '../../../../utils/metadataUtils';
+import { metadataNameToKey } from '../../../../utils/data-management/metadataUtils';
 import deleteMetadataTrack from '../../../../redux/actions/projects/deleteMetadataTrack';
 import initialProjectState from '../../../../redux/reducers/projects';
 import initialSampleState from '../../../../redux/reducers/samples';

src/__test__/redux/actions/projects/updateMetadataTrack.test.js

@@ -1,6 +1,6 @@
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { metadataNameToKey } from '../../../../utils/metadataUtils';
+import { metadataNameToKey } from '../../../../utils/data-management/metadataUtils';
 import updateMetadataTrack from '../../../../redux/actions/projects/updateMetadataTrack';
 import initialProjectState from '../../../../redux/reducers/projects';
 import initialSampleState from '../../../../redux/reducers/samples';

src/__test__/utils/exportQCParameters.test.js

@@ -1,7 +1,7 @@
 import {
   exportQCParameters,
   filterQCParameters,
-} from '../../utils/exportQCParameters';
+} from '../../utils/data-management/exportQCParameters';
 import { qcSteps } from '../../utils/qcSteps';
 
 describe('Export of QC parameters', () => {

src/__test__/utils/metadataUtils.test.js

@@ -2,7 +2,7 @@ import {
   metadataKeyToName,
   metadataNameToKey,
   temporaryMetadataKey,
-} from '../../utils/metadataUtils';
+} from '../../utils/data-management/metadataUtils';
 
 describe('metadataUtils', () => {
   it('metadataKeyToName converts name correctly', () => {

src/components/data-management/DownloadData.jsx

@@ -0,0 +1,167 @@
+/* eslint-disable import/no-unresolved */
+import React, { useEffect } from 'react';
+import _ from 'lodash';
+import {
+  Menu, Tooltip, Dropdown, Button,
+} from 'antd';
+
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { saveAs } from 'file-saver';
+import downloadTypes from 'utils/data-management/downloadTypes';
+import { getFromApiExpectOK } from 'utils/getDataExpectOK';
+import pushNotificationMessage from 'utils/pushNotificationMessage';
+import endUserMessages from 'utils/endUserMessages';
+import pipelineStatus from '../../utils/pipelineStatusValues';
+import { exportQCParameters, filterQCParameters } from '../../utils/data-management/exportQCParameters';
+import { loadBackendStatus } from '../../redux/actions/backendStatus/index';
+
+const DownloadData = (props) => {
+  const {
+    activeProjectUuid,
+  } = props;
+  const dispatch = useDispatch();
+  const activeProject = useSelector((state) => state.projects[activeProjectUuid]);
+  const experimentSettings = useSelector((state) => state.experimentSettings);
+  const backendStatus = useSelector((state) => state.backendStatus);
+  const samples = useSelector((state) => state.samples);
+  const projects = useSelector((state) => state.projects);
+
+  // Change if we have more than one experiment per project
+  const experimentId = activeProject?.experiments[0];
+
+  useEffect(() => {
+    if (experimentId) {
+      dispatch(loadBackendStatus(experimentId));
+    }
+  }, [activeProject]);
+
+  const pipelineHasRun = () => (
+    experimentId
+    && (backendStatus[experimentId]?.status.pipeline?.status === pipelineStatus.SUCCEEDED)
+
+  );
+  const gem2sHasRun = () => (
+    experimentId
+    && (backendStatus[experimentId]?.status?.gem2s?.status === pipelineStatus.SUCCEEDED)
+  );
+
+  const allSamplesAnalysed = () => {
+    // Returns true only if there is at least one sample in the currently active
+    // project AND all samples in the project have been analysed.
+    if (!activeProject?.samples?.length) {
+      return false;
+    }
+    const steps = Object.values(_.omit(experimentSettings?.processing, ['meta']));
+
+    return steps.length > 0
+      // eslint-disable-next-line no-prototype-builtins
+      && activeProject?.samples?.every((s) => steps[0].hasOwnProperty(s));
+  };
+
+  const downloadExperimentData = async (type) => {
+    try {
+      if (!experimentId) throw new Error('No experimentId specified');
+      if (!Object.values(downloadTypes).includes(type)) throw new Error('Invalid download type');
+
+      const { signedUrl } = await getFromApiExpectOK(`/v1/experiments/${experimentId}/download/${type}`);
+      const link = document.createElement('a');
+      link.style.display = 'none';
+      link.href = signedUrl;
+
+      document.body.appendChild(link);
+      link.click();
+
+      setTimeout(() => {
+        URL.revokeObjectURL(link.href);
+        link.parentNode.removeChild(link);
+      }, 0);
+    } catch (e) {
+      pushNotificationMessage('error', endUserMessages.ERROR_DOWNLOADING_DATA);
+    }
+  };
+
+  return (
+    <Dropdown
+      overlay={() => (
+        <Menu>
+          <Menu.Item
+            key='download-raw-seurat'
+            disabled={!gem2sHasRun()}
+            onClick={() => {
+              downloadExperimentData(downloadTypes.RAW_SEURAT_OBJECT);
+            }}
+          >
+            <Tooltip
+              title={
+                gem2sHasRun()
+                  ? 'Samples have been merged'
+                  : 'Launch analysis to merge samples'
+              }
+              placement='left'
+            >
+              Raw Seurat object (.rds)
+            </Tooltip>
+          </Menu.Item>
+          <Menu.Item
+            key='download-processed-seurat'
+            disabled={
+              !pipelineHasRun()
+            }
+            onClick={() => {
+              // Change if we have more than one experiment per project
+              downloadExperimentData(downloadTypes.PROCESSED_SEURAT_OBJECT);
+            }}
+          >
+            <Tooltip
+              title={
+                pipelineHasRun(activeProject?.experiments[0])
+                  ? 'With Data Processing filters and settings applied'
+                  : 'Launch analysis to process data'
+              }
+              placement='left'
+            >
+              Processed Seurat object (.rds)
+            </Tooltip>
+          </Menu.Item>
+          <Menu.Item
+            disabled={!allSamplesAnalysed()}
+            key='download-processing-settings'
+            onClick={() => {
+              const config = _.omit(experimentSettings.processing, ['meta']);
+              const filteredConfig = filterQCParameters(config, activeProject.samples, samples);
+              const blob = exportQCParameters(filteredConfig);
+              saveAs(blob, `${activeProjectUuid.split('-')[0]}_settings.txt`);
+            }}
+          >
+            {
+              allSamplesAnalysed()
+                ? 'Data Processing settings (.txt)'
+                : (
+                  <Tooltip title='One or more of your samples has yet to be analysed' placement='left'>
+                    Data Processing settings (.txt)
+                  </Tooltip>
+                )
+            }
+          </Menu.Item>
+        </Menu>
+      )}
+      trigger={['click']}
+      placement='bottomRight'
+      disabled={
+        projects.ids.length === 0
+            || activeProject?.samples?.length === 0
+      }
+    >
+      <Button>
+        Download
+      </Button>
+    </Dropdown>
+
+  );
+};
+
+DownloadData.propTypes = {
+  activeProjectUuid: PropTypes.string.isRequired,
+};
+export default React.memo(DownloadData);

src/components/data-management/MetadataColumn.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Space, Input } from 'antd';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { rules } from '../../utils/validateInputs';
+import EditableField from '../EditableField';
+import MetadataEditor from './MetadataEditor';
+import { DEFAULT_NA } from '../../redux/reducers/projects/initialState';
+
+import {
+  updateMetadataTrack,
+} from '../../redux/actions/projects';
+
+const MetadataColumn = (props) => {
+  const dispatch = useDispatch();
+  const {
+    name, validateInputs, setCells, deleteMetadataColumn, key, activeProjectUuid,
+  } = props;
+  const metadataNameValidation = [
+    rules.MIN_1_CHAR,
+    rules.ALPHANUM_SPACE,
+    rules.START_WITH_ALPHABET,
+    rules.UNIQUE_NAME_CASE_INSENSITIVE,
+  ];
+  return (
+    <Space>
+      <EditableField
+        deleteEnabled
+        onDelete={(e, currentName) => deleteMetadataColumn(currentName)}
+        onAfterSubmit={(newName) => dispatch(
+          updateMetadataTrack(name, newName, activeProjectUuid),
+        )}
+        value={name}
+        validationFunc={
+          (newName) => validateInputs(newName, metadataNameValidation)
+        }
+      />
+      <MetadataEditor
+        onReplaceEmpty={(value) => setCells(value, key, 'REPLACE_EMPTY')}
+        onReplaceAll={(value) => setCells(value, key, 'REPLACE_ALL')}
+        onClearAll={() => setCells(DEFAULT_NA, key, 'CLEAR_ALL')}
+        massEdit
+      >
+        <Input />
+      </MetadataEditor>
+    </Space>
+  );
+};
+MetadataColumn.propTypes = {
+  name: PropTypes.string.isRequired,
+  validateInputs: PropTypes.func.isRequired,
+  setCells: PropTypes.func.isRequired,
+  deleteMetadataColumn: PropTypes.func.isRequired,
+  key: PropTypes.string.isRequired,
+  activeProjectUuid: PropTypes.string.isRequired,
+};
+export default MetadataColumn;

src/components/data-management/MetadataPopover.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Popover } from 'antd';
 import EditableField from '../EditableField';
-import { metadataKeyToName, metadataNameToKey } from '../../utils/metadataUtils';
+import { metadataKeyToName, metadataNameToKey } from '../../utils/data-management/metadataUtils';
 import validateInputs, { rules } from '../../utils/validateInputs';
 
 const validationChecks = [