Feat/vadc sprint22

docs/portal_config.md

@@ -708,6 +708,21 @@ Below is an example, with inline comments describing what each JSON block config
   "connectSrcCSPWhitelist": [ // optional; Array of urls to add to the header CSP (Content-Security-Policy) connect-src 'self'
     "https://example.s3.amazonaws.com" // full url to be added
   ],
+  "analysisTools": [ // analysis apps to be diplayed at the /analysis/ page.
+    {
+      "appId": "myAppId", // Optional. Can be used to ensure the app path after the /analysis/ subpath is fixed, e.g. URL https://SERVER-DOMAIN/analysis/myAppId. If not set, then "title" (below) is used.
+      "title": "My app title", // App title/name, also displayed on the App card in the /analysis page
+      "description": "My app description", // App title/name, also displayed on the App card in the /analysis page
+      "image": "/src/img/analysis-icons/myapp-image.svg",  // App logo/image to be displayed on the App card in the /analysis page
+      "needsTeamProject": true // Optional. Whether the app needs a "team project" selection to be made by the user first. If true, it will force the user to select a "team project" first. See also https://github.com/uc-cdis/data-portal/pull/1445
+    },
+    {
+      "title": "My other app",
+      "description": "etc",
+      "image": "/src/img/analysis-icons/etc.svg",
+    },
+    ...
+  ],
   "stridesPortalURL": "https://strides-admin-portal.org", // optional; If configured, will display a link on the workspace page which can direct user to the STRIDES admin portal,
   "registrationConfigs": { // optional; Required when using Kayako integration with Study/Workspace registration
       "features":{ // Optional; Required when using study/Workspace registration

src/Analysis/Analysis.jsx

@@ -23,7 +23,7 @@ class Analysis extends React.Component {
           {CheckForTeamProjectApplication(analysisApps) && (
             <Col flex='1 0 auto'>
               <QueryClientProvider client={new QueryClient()} contextSharing>
-                <TeamProjectHeader showButton />
+                <TeamProjectHeader isEditable />
               </QueryClientProvider>
             </Col>
           )}

src/Analysis/AnalysisApp.jsx

@@ -1,18 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types'; // see https://github.com/facebook/prop-types#prop-types
 import Select from 'react-select';
-import { Spin } from 'antd';
+import { Spin, Row, Col } from 'antd';
 import Button from '@gen3/ui-component/dist/components/Button';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { TourProvider } from '@reactour/tour';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import BackLink from '../components/BackLink';
 import HIVCohortFilter from '../HIVCohortFilter/HIVCohortFilter';
 import { analysisApps } from '../localconf';
-import './AnalysisApp.css';
 import sessionMonitor from '../SessionMonitor';
 import GWASContainer from './GWASApp/GWASContainer';
 import GWASResultsContainer from './GWASResults/GWASResultsContainer';
+import CheckForTeamProjectApplication from './SharedUtils/TeamProject/Utils/CheckForTeamProjectApplication';
+import TeamProjectHeader from './SharedUtils/TeamProject/TeamProjectHeader/TeamProjectHeader';
+import './AnalysisApp.css';
 
 const queryClient = new QueryClient();
 
@@ -146,7 +148,11 @@ class AnalysisApp extends React.Component {
               className='analysis-app__iframe'
               title='Analysis App'
               frameBorder='0'
-              src={`${this.state.app.applicationUrl}`}
+              src={
+                this.state.app.title === 'OHDSI Atlas'
+                  ? `${this.state.app.applicationUrl}#/home?teamproject=${localStorage.getItem('teamProject')}`
+                  : `${this.state.app.applicationUrl}`
+              }
               onLoad={this.handleIframeApp}
             />
           </div>
@@ -227,7 +233,22 @@ class AnalysisApp extends React.Component {
         <BackLink url='/analysis' label='Back to Apps' />
         {loaded ? (
           <div className='analysis-app'>
-            <h2 className='analysis-app__title'>{app.title}</h2>
+            <Row>
+              <Col flex='1 0 auto'>
+                <h2>{app.title}</h2>
+              </Col>
+              {CheckForTeamProjectApplication(analysisApps) && (
+                <Col flex='1 0 auto'>
+                  <QueryClientProvider
+                    client={new QueryClient()}
+                    contextSharing
+                  >
+                    <TeamProjectHeader isEditable={false} />
+                  </QueryClientProvider>
+                </Col>
+              )}
+            </Row>
+
             <p className='analysis-app__description'>{app.description}</p>
             <div
               className={`${

src/Analysis/GWASApp/GWASContainer.jsx

@@ -3,7 +3,6 @@ import { Space, Button } from 'antd';
 import ProgressBar from './Components/ProgressBar/ProgressBar';
 import { GWASAppSteps, checkFinalPopulationSizeZero } from './Utils/constants';
 import { SourceContextProvider } from './Utils/Source';
-import initialState from './Utils/StateManagement/InitialState';
 import reducer from './Utils/StateManagement/reducer';
 import ACTIONS from './Utils/StateManagement/Actions';
 import AttritionTableWrapper from './Components/AttritionTableWrapper/AttritionTableWrapper';
@@ -13,10 +12,11 @@ import SelectOutcome from './Steps/SelectOutcome/SelectOutcome';
 import SelectCovariates from './Steps/SelectCovariates/SelectCovariates';
 import DismissibleMessagesList from './Components/DismissibleMessagesList/DismissibleMessagesList';
 import MakeFullscreenButton from './Components/MakeFullscreenButton/MakeFullscreenButton';
+import InitializeCurrentState from './Utils/StateManagement/InitializeCurrentState';
 import './GWASApp.css';
 
 const GWASContainer = () => {
-  const [state, dispatch] = useReducer(reducer, initialState);
+  const [state, dispatch] = useReducer(reducer, InitializeCurrentState());
 
   const generateStep = () => {
     switch (state.currentStep) {

src/Analysis/GWASApp/Utils/StateManagement/InitialState.js

@@ -11,7 +11,7 @@ const initialState = {
   finalPopulationSizes: [],
   selectionMode: '',
   messages: [],
-  selectedTeamProject: 'temporary-test-teamproject01', // TODO - remove and leave '' when teamproject selection is ready
+  selectedTeamProject: localStorage.getItem('teamProject'),
 };
 
 export default initialState;

src/Analysis/GWASApp/Utils/StateManagement/InitializeCurrentState.js

@@ -0,0 +1,8 @@
+import initialState from './InitialState';
+
+const InitializeCurrentState = () => ({
+  ...initialState,
+  selectedTeamProject: localStorage.getItem('teamProject'),
+});
+
+export default InitializeCurrentState;

src/Analysis/GWASResults/Views/Home/Home.jsx

@@ -10,7 +10,8 @@ const Home = () => {
   const refetchInterval = 5000;
 
   async function fetchGwasWorkflows() {
-    const workflowsEndpoint = `${gwasWorkflowPath}workflows`;
+    const currentTeamProject = localStorage.getItem('teamProject');
+    const workflowsEndpoint = `${gwasWorkflowPath}workflows?team_projects=${currentTeamProject}`;
     const getWorkflows = await fetch(workflowsEndpoint);
     return getWorkflows.json();
   }

src/Analysis/SharedUtils/TeamProject/TeamProjectHeader/TeamProjectHeader.css

@@ -1,8 +1,12 @@
+.analysis .team-project-header {
+  line-height: 80px;
+}
+
 .team-project-header {
   text-align: right;
   color: #2e77b8;
   font-size: 20px;
-  line-height: 80px;
+  margin-top: 2px;
 }
 
 .team-project-header_modal-button {

src/Analysis/SharedUtils/TeamProject/TeamProjectHeader/TeamProjectHeader.jsx

@@ -1,31 +1,36 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
 import EditIcon from './Icons/EditIcon';
 import isEnterOrSpace from '../../IsEnterOrSpace';
 import TeamProjectModal from '../TeamProjectModal/TeamProjectModal';
 import './TeamProjectHeader.css';
 
-const TeamProjectHeader = ({ showButton }) => {
+const TeamProjectHeader = ({ isEditable }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [bannerText, setBannerText] = useState('- -');
   const showModal = () => {
     setIsModalOpen(true);
   };
+  const history = useHistory();
 
   useEffect(() => {
     const storedTeamProject = localStorage.getItem('teamProject');
     if (storedTeamProject) {
       setBannerText(storedTeamProject);
-    } else {
+    } else if (isEditable) {
       showModal();
+    } else if (!isEditable && !storedTeamProject) {
+      // non-editable view should redirect to app selection if user doesn't have a storedTeamProject
+      history.push('/analysis');
     }
-  }, []);
+  }, [history, isEditable]);
 
   return (
     <React.Fragment>
-      <h3 className='team-project-header'>
+      <div className='team-project-header'>
         <strong>Team Project</strong> / {bannerText}
-        {showButton && (
+        {isEditable && (
           <span
             className='team-project-header_modal-button'
             tabIndex='0'
@@ -41,8 +46,8 @@ const TeamProjectHeader = ({ showButton }) => {
             <EditIcon />
           </span>
         )}
-      </h3>
-      {showButton && (
+      </div>
+      {isEditable && (
         <TeamProjectModal
           isModalOpen={isModalOpen}
           setIsModalOpen={setIsModalOpen}
@@ -54,11 +59,11 @@ const TeamProjectHeader = ({ showButton }) => {
 };
 
 TeamProjectHeader.propTypes = {
-  showButton: PropTypes.bool,
+  isEditable: PropTypes.bool,
 };
 
 TeamProjectHeader.defaultProps = {
-  showButton: false,
+  isEditable: false,
 };
 
 export default TeamProjectHeader;

src/Analysis/SharedUtils/TeamProject/TeamProjectHeader/TeamProjectHeader.stories.jsx

@@ -15,12 +15,12 @@ const Template = (args) => (
   </div>
 );
 
-export const withButton = Template.bind({});
-withButton.args = {
-  showButton: true,
+export const isEditable = Template.bind({});
+isEditable.args = {
+  isEditable: true,
 };
 
-export const withNoButton = Template.bind({});
-withNoButton.args = {
-  showButton: false,
+export const notEditable = Template.bind({});
+notEditable.args = {
+  isEditable: false,
 };

src/Analysis/SharedUtils/TeamProject/TeamProjectHeader/TeamProjectHeader.test.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import '@testing-library/jest-dom';
 import TeamProjectHeader from './TeamProjectHeader';
@@ -17,22 +19,38 @@ beforeEach(() => {
   });
 });
 
-test('renders TeamProjectHeader with default props', () => {
+test('renders TeamProjectHeader with default props when isEditable is true and no local storage', () => {
   localStorageMock.getItem.mockReturnValueOnce(null);
   render(
     <QueryClientProvider client={new QueryClient()} contextSharing>
-      <TeamProjectHeader />
+      <TeamProjectHeader isEditable />
     </QueryClientProvider>,
   );
   // Assert that the component renders without crashing without button
   expect(screen.getByText('Team Project')).toBeInTheDocument();
   expect(screen.getByText('/ - -')).toBeInTheDocument();
 });
 
-test('renders TeamProjectHeader with edit button when showButton is true and can open modal', () => {
+test(`Calls useHistory for redirect to analysis page when isEditable is
+  false and teamProject is not set in local storage`, () => {
+  localStorageMock.getItem.mockReturnValueOnce(null);
+  const history = createMemoryHistory();
+
+  render(
+    <Router history={history}>
+      <QueryClientProvider client={new QueryClient()} contextSharing>
+        <TeamProjectHeader isEditable={false} />
+      </QueryClientProvider>
+    </Router>,
+  );
+
+  expect(history.location.pathname).toBe('/analysis');
+});
+
+test('renders TeamProjectHeader with edit button when isEditable is true and can open modal', () => {
   render(
     <QueryClientProvider client={new QueryClient()} contextSharing>
-      <TeamProjectHeader showButton />
+      <TeamProjectHeader isEditable />
     </QueryClientProvider>,
   );
 

src/Analysis/SharedUtils/TeamProject/TeamProjectModal/TeamProjectModal.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, Spin, Select } from 'antd';
+import {
+  Button, Modal, Spin, Select,
+} from 'antd';
 import { useQuery } from 'react-query';
 import queryConfig from '../../QueryConfig';
 import LoadingErrorMessage from '../../LoadingErrorMessage/LoadingErrorMessage';
@@ -9,7 +11,7 @@ import './TeamProjectModal.css';
 
 const TeamProjectModal = ({ isModalOpen, setIsModalOpen, setBannerText }) => {
   const [selectedTeamProject, setSelectedTeamProject] = useState(
-    localStorage.getItem('teamProject')
+    localStorage.getItem('teamProject'),
   );
 
   const closeAndUpdateTeamProject = () => {
@@ -21,7 +23,7 @@ const TeamProjectModal = ({ isModalOpen, setIsModalOpen, setBannerText }) => {
   const { data, status } = useQuery(
     'teamprojects',
     fetchArboristTeamProjectRoles,
-    queryConfig
+    queryConfig,
   );
 
   let modalContent = (

src/Analysis/SharedUtils/TeamProject/TeamProjectModal/TeamProjectModal.test.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import {
+  render, screen, fireEvent, waitFor,
+} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { useQuery } from 'react-query';
 import TeamProjectModal from './TeamProjectModal';
@@ -16,12 +18,12 @@ describe('TeamProjectModal', () => {
         isModalOpen
         setIsModalOpen={() => {}}
         setBannerText={() => {}}
-      />
+      />,
     );
 
     expect(screen.getByText(/Please wait.../i)).toBeInTheDocument();
     expect(
-      screen.getByText(/Retrieving the list of team projects./i)
+      screen.getByText(/Retrieving the list of team projects./i),
     ).toBeInTheDocument();
   });
 
@@ -40,17 +42,17 @@ describe('TeamProjectModal', () => {
         isModalOpen
         setIsModalOpen={setIsModalOpen}
         setBannerText={setBannerText}
-      />
+      />,
     );
 
     await waitFor(() => screen.getByText(/Please select your team./i));
     expect(
-      screen.getByText(/-select one of the team projects below-/i)
+      screen.getByText(/-select one of the team projects below-/i),
     ).toBeInTheDocument();
 
     expect(screen.getByRole('combobox')).toBeInTheDocument();
     expect(screen.getByText('Submit').closest('button')).toHaveAttribute(
-      'disabled'
+      'disabled',
     );
   });
 
@@ -72,19 +74,18 @@ describe('TeamProjectModal', () => {
         isModalOpen
         setIsModalOpen={setIsModalOpen}
         setBannerText={setBannerText}
-      />
+      />,
     );
 
     await waitFor(() => screen.getByText(/Please select your team./i));
 
-    expect(() =>
-      screen.getByText('select one of the team projects below')
+    expect(() => screen.getByText('select one of the team projects below'),
     ).toThrow('Unable to find an element');
     expect(screen.getByText('test string')).toBeInTheDocument();
     expect(screen.getByRole('combobox')).toBeInTheDocument();
     expect(screen.getByText('Submit')).toBeInTheDocument();
     expect(screen.getByText('Submit').closest('button')).not.toHaveAttribute(
-      'disabled'
+      'disabled',
     );
   });
 
@@ -106,7 +107,7 @@ describe('TeamProjectModal', () => {
         isModalOpen
         setIsModalOpen={setIsModalOpen}
         setBannerText={setBannerText}
-      />
+      />,
     );
 
     await waitFor(() => screen.getByText(/Please select your team./i));