[BIOMAGE-1903] add two checkboxes for compliance

src/__test__/components/ContentWrapper.test.jsx

@@ -36,7 +36,11 @@ jest.mock('next/router', () => ({
 }));
 
 jest.mock('@aws-amplify/auth', () => ({
-  currentAuthenticatedUser: jest.fn().mockImplementation(async () => true),
+  currentAuthenticatedUser: jest.fn().mockImplementation(async () => ({
+    attributes: {
+      'custom:agreed_terms': 'true',
+    },
+  })),
   federatedSignIn: jest.fn(),
 }));
 
@@ -124,7 +128,6 @@ describe('ContentWrapper', () => {
     await store.dispatch(updateExperimentInfo({ experimentId, experimentName, sampleIds }));
   });
 
-  // PROBLEMATIC
   it('renders correctly', async () => {
     getBackendStatus.mockImplementation(() => () => ({
       loading: false,

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

@@ -23,9 +23,15 @@ import loadEnvironment from 'redux/actions/networkResources/loadEnvironment';
 import { loadSamples } from 'redux/actions/samples';
 
 import mockDemoExperiments from '__test__/test-utils/mockData/mockDemoExperiments.json';
+import { loadUser } from 'redux/actions/user';
 
 jest.mock('@aws-amplify/auth', () => ({
-  currentAuthenticatedUser: jest.fn(() => Promise.resolve({ attributes: { name: 'mockUserName' } })),
+  currentAuthenticatedUser: jest.fn(() => Promise.resolve({
+    attributes: {
+      name: 'mockUserName',
+      'custom:agreed_terms': 'true',
+    },
+  })),
   federatedSignIn: jest.fn(),
 }));
 
@@ -104,6 +110,8 @@ describe('Samples table', () => {
     // Defaults to project with samples
     await storeState.dispatch(setActiveExperiment(experimentWithSamplesId));
     await storeState.dispatch(loadEnvironment('test'));
+
+    await storeState.dispatch(loadUser());
   });
 
   it('Does not show prompt to upload datasets if samples are available', async () => {

src/__test__/pages/__snapshots__/_error.test.jsx.snap

@@ -143,6 +143,9 @@ Array [
         "saving": false,
       },
     },
+    "user": Object {
+      "current": null,
+    },
   },
 ]
 `;
@@ -290,6 +293,9 @@ Array [
         "saving": false,
       },
     },
+    "user": Object {
+      "current": null,
+    },
   },
 ]
 `;

src/__test__/pages/experiments/[experimentId]/data-management/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import fetchMock, { enableFetchMocks } from 'jest-fetch-mock';
 import { Provider } from 'react-redux';
@@ -21,6 +21,7 @@ import userEvent from '@testing-library/user-event';
 
 import { setActiveExperiment } from 'redux/actions/experiments';
 import loadEnvironment from 'redux/actions/networkResources/loadEnvironment';
+import { loadUser } from 'redux/actions/user';
 
 jest.mock('utils/data-management/downloadFromUrl');
 jest.mock('react-resize-detector', () => (props) => props.children({ width: 100, height: 100 }));
@@ -34,7 +35,12 @@ jest.mock('utils/AppRouteProvider', () => ({
 }));
 
 jest.mock('@aws-amplify/auth', () => ({
-  currentAuthenticatedUser: jest.fn(() => Promise.resolve({ attributes: { name: 'mockUserName' } })),
+  currentAuthenticatedUser: jest.fn(() => Promise.resolve({
+    attributes: {
+      name: 'mockUserName',
+      'custom:agreed_terms': 'true',
+    },
+  })),
   federatedSignIn: jest.fn(),
 }));
 
@@ -53,11 +59,6 @@ const experimentWithoutSamples = experiments.find(
   (experiment) => experiment.samplesOrder.length === 0,
 );
 
-const expectedSampleNames = [
-  'Example 1',
-  'Another-Example no.2',
-];
-
 const experimentWithSamplesId = experimentWithSamples.id;
 const experimentWithoutSamplesId = experimentWithoutSamples.id;
 
@@ -80,6 +81,8 @@ describe('Data Management page', () => {
 
     storeState = makeStore();
     storeState.dispatch(loadEnvironment('test'));
+
+    storeState.dispatch(loadUser());
   });
 
   it('Shows an empty project list if there are no projects', async () => {

src/components/ContentWrapper.jsx

@@ -17,8 +17,6 @@ import {
 } from 'antd';
 import { modules } from 'utils/constants';
 
-import Auth from '@aws-amplify/auth';
-
 import { useAppRouter } from 'utils/AppRouteProvider';
 
 import calculateGem2sRerunStatus from 'utils/data-management/calculateGem2sRerunStatus';
@@ -36,15 +34,15 @@ import Error from 'pages/_error';
 import integrationTestConstants from 'utils/integrationTestConstants';
 import pipelineStatus from 'utils/pipelineStatusValues';
 import BrowserAlert from 'components/BrowserAlert';
+import { loadUser } from 'redux/actions/user';
+import PrivacyPolicyIntercept from './data-management/PrivacyPolicyIntercept';
 
-const { Sider, Footer } = Layout;
-
-const { Paragraph, Text } = Typography;
+const { Sider } = Layout;
+const { Text } = Typography;
 
 const ContentWrapper = (props) => {
   const dispatch = useDispatch();
 
-  const [isAuth, setIsAuth] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
 
   const { routeExperimentId, experimentData, children } = props;
@@ -53,6 +51,7 @@ const ContentWrapper = (props) => {
   const currentExperimentIdRef = useRef(routeExperimentId);
   const activeExperimentId = useSelector((state) => state?.experiments?.meta?.activeExperimentId);
   const activeExperiment = useSelector((state) => state.experiments[activeExperimentId]);
+  const user = useSelector((state) => state.user.current);
 
   const samples = useSelector((state) => state.samples);
 
@@ -138,15 +137,10 @@ const ContentWrapper = (props) => {
   }, [gem2sBackendStatus, activeExperiment, samples, experiment]);
 
   useEffect(() => {
-    Auth.currentAuthenticatedUser()
-      .then(() => setIsAuth(true))
-      .catch(() => {
-        setIsAuth(false);
-        Auth.federatedSignIn();
-      });
+    dispatch(loadUser());
   }, []);
 
-  if (!isAuth) return <></>;
+  if (!user) return <></>;
 
   const BigLogo = () => (
     <div
@@ -330,8 +324,12 @@ const ContentWrapper = (props) => {
       </Menu.Item>
     );
   };
+
+  if (!user) return <></>;
+
   return (
     <>
+      {user?.attributes['custom:agreed_terms'] !== 'true' ? <PrivacyPolicyIntercept user={user} onOk={() => dispatch(loadUser())} /> : <></>}
       <BrowserAlert />
       <Layout style={{ minHeight: '100vh' }}>
         <Sider

src/components/data-management/ExampleExperimentsSpace.jsx

@@ -14,16 +14,17 @@ const ExampleExperimentsSpace = ({ introductionText, imageStyle }) => {
   const dispatch = useDispatch();
 
   const environment = useSelector((state) => state?.networkResources?.environment);
+  const user = useSelector((state) => state?.user?.current);
 
   const [exampleExperiments, setExampleExperiments] = useState([]);
 
   useEffect(() => {
-    if (!environment) return;
+    if (!environment || user?.attributes['custom:agreed_terms'] !== 'true') return;
 
     fetchAPI('/v2/experiments/examples').then((experiments) => {
       setExampleExperiments(experiments);
     }).catch(() => { });
-  }, [environment]);
+  }, [environment, user]);
 
   const cloneIntoCurrentExperiment = async (exampleExperimentId) => {
     const url = `/v2/experiments/${exampleExperimentId}/clone`;

src/components/data-management/PrivacyPolicyIntercept.css

@@ -0,0 +1,4 @@
+.ok-to-the-right-modal .ant-modal-confirm-btns .ant-btn {
+  float: right;
+  margin-left: 10px;
+}

src/components/data-management/PrivacyPolicyIntercept.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Auth from '@aws-amplify/auth';
+
+import {
+  Modal, Space, Checkbox, Typography,
+} from 'antd';
+
+import 'components/data-management/PrivacyPolicyIntercept.css';
+
+import pushNotificationMessage from 'utils/pushNotificationMessage';
+import endUserMessages from 'utils/endUserMessages';
+
+const { Text } = Typography;
+
+const agreedPrivacyPolicyKey = 'custom:agreed_terms';
+const agreedEmailsKey = 'custom:agreed_emails';
+
+const PrivacyPolicyIntercept = (props) => {
+  const { user, onOk } = props;
+
+  const {
+    attributes: {
+      [agreedPrivacyPolicyKey]: originalAgreedPrivacyPolicy,
+      [agreedEmailsKey]: originalAgreedEmails,
+    },
+  } = user;
+
+  const [agreedPrivacyPolicy, setAgreedPrivacyPolicy] = useState(originalAgreedPrivacyPolicy);
+  const [agreedEmails, setAgreedEmails] = useState(originalAgreedEmails ?? 'false');
+
+  const privacyPolicyUrl = 'https://static1.squarespace.com/static/5f355513fc75aa471d47455c/t/61f12e7b7266045b4cb137bc/1643196027265/Biomage_Privacy_Policy_Jan2022.pdf';
+
+  return (
+    <Modal
+      title='Agree to the Biomage privacy policy to continue using Cellenics'
+      visible
+      centered
+      className='ok-to-the-right-modal'
+      cancelText='Sign out'
+      cancelButtonProps={{ danger: true }}
+      okButtonProps={{ disabled: agreedPrivacyPolicy !== 'true' }}
+      closable={false}
+      onOk={async () => {
+        await Auth.updateUserAttributes(
+          user,
+          {
+            [agreedPrivacyPolicyKey]: agreedPrivacyPolicy,
+            [agreedEmailsKey]: agreedEmails,
+          },
+        )
+          .then(() => {
+            pushNotificationMessage('success', endUserMessages.ACCOUNT_DETAILS_UPDATED, 3);
+            onOk();
+          })
+          .catch(() => pushNotificationMessage('error', endUserMessages.ERROR_SAVING, 3));
+      }}
+      onCancel={async () => Auth.signOut()}
+    >
+      <Space direction='vertical'>
+        <Space align='start'>
+          <Checkbox
+            defaultChecked={agreedPrivacyPolicy === 'true'}
+            onChange={(e) => setAgreedPrivacyPolicy(e.target.checked.toString())}
+          />
+          <Text>
+            <span style={{ color: '#ff0000' }}>* </span>
+            I accept the terms of the
+            {' '}
+            <a href={privacyPolicyUrl} target='_blank' rel='noreferrer'> Biomage privacy policy</a>
+            .
+          </Text>
+        </Space>
+        <Space align='start'>
+          <Checkbox
+            defaultChecked={agreedEmails === 'true'}
+            onChange={(e) => setAgreedEmails(e.target.checked.toString())}
+            style={{ marginRight: 10 }}
+          />
+          <Text>
+            I agree to receive updates about new features in Cellenics,
+            research done with Cellenics, and Cellenics community events. (No external marketing.)
+          </Text>
+        </Space>
+      </Space>
+    </Modal>
+  );
+};
+
+PrivacyPolicyIntercept.propTypes = {
+  user: PropTypes.object.isRequired,
+  onOk: PropTypes.func.isRequired,
+};
+
+PrivacyPolicyIntercept.defaultProps = {};
+
+export default PrivacyPolicyIntercept;

src/components/header/UserButton.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import {
   Avatar,
   Button,
@@ -11,24 +11,23 @@ import Auth from '@aws-amplify/auth';
 import endUserMessages from 'utils/endUserMessages';
 import { resetTrackingId } from 'utils/tracking';
 import handleError from 'utils/http/handleError';
+import { loadUser } from 'redux/actions/user';
+import { useDispatch, useSelector } from 'react-redux';
 
 const UserButton = () => {
-  const [user, setUser] = useState();
+  const dispatch = useDispatch();
 
-  const getUser = () => Auth.currentAuthenticatedUser()
-    .then((userData) => userData)
-    .catch((e) => console.log('error during getuser', e));
+  const user = useSelector((state) => state.user.current);
 
   useEffect(() => {
     Hub.listen('auth', ({ payload: { event } }) => {
       switch (event) {
         case 'signIn':
         case 'cognitoHostedUI':
-          getUser().then((userData) => setUser(userData));
+          dispatch(loadUser());
           break;
         case 'signOut':
           resetTrackingId();
-          setUser(null);
           break;
         case 'signIn_failure':
         case 'cognitoHostedUI_failure':
@@ -38,13 +37,11 @@ const UserButton = () => {
           break;
       }
     });
-
-    getUser().then((userData) => setUser(userData));
   }, []);
 
   const content = () => (
     <Menu>
-      <Menu.ItemGroup key='g1' title={`Signed in as ${user.attributes.name}`} />
+      <Menu.ItemGroup key='g1' title={`Signed in as ${user?.attributes.name}`} />
       <Menu.Item key='profile' disabled>Your profile</Menu.Item>
       <Menu.Item key='settings'>
         <Link href='/settings/profile'>

src/pages/data-management/index.jsx

@@ -23,6 +23,7 @@ const DataManagementPage = () => {
 
   const { activeExperimentId } = useSelector((state) => state.experiments.meta);
   const experiments = useSelector(((state) => state.experiments));
+  const user = useSelector((state) => state.user.current);
 
   const activeExperiment = experiments[activeExperimentId];
   const { saving: experimentsSaving } = experiments.meta;
@@ -31,23 +32,25 @@ const DataManagementPage = () => {
   const [newProjectModalVisible, setNewProjectModalVisible] = useState(false);
 
   useEffect(() => {
+    if (user?.attributes['custom:agreed_terms'] !== 'true') return;
+
     if (experiments.ids.length === 0) dispatch(loadExperiments());
-  }, []);
+  }, [user]);
 
   const samplesAreLoaded = () => {
     const loadedSampleIds = Object.keys(samples);
     return activeExperiment.sampleIds.every((sampleId) => loadedSampleIds.includes(sampleId));
   };
 
   useEffect(() => {
-    if (!activeExperimentId) return;
+    if (!activeExperimentId || user?.attributes['custom:agreed_terms'] !== 'true') return;
 
     dispatch(loadProcessingSettings(activeExperimentId));
 
     if (!samplesAreLoaded()) dispatch(loadSamples(activeExperimentId));
 
     dispatch(loadBackendStatus(activeExperimentId));
-  }, [activeExperimentId]);
+  }, [activeExperimentId, user]);
 
   const PROJECTS_LIST = 'Projects';
   const PROJECT_DETAILS = 'Project Details';