feat(teamProjectsHeader): Added working storybook

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import TeamProjectHeader from './TeamProjectHeader';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
 export default {
   title: 'TESTS1/SharedUtils/TeamProjectHeader',
@@ -8,7 +9,9 @@ export default {
 
 const Template = (args) => (
   <div className='GWASApp'>
-    <TeamProjectHeader {...args} />
+    <QueryClientProvider client={new QueryClient()} contextSharing>
+      <TeamProjectHeader {...args}/>
+    </QueryClientProvider>,
   </div>
 );
 

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Modal, Spin, Select } from 'antd';
 import { useQuery } from 'react-query';
 import queryConfig from '../../QueryConfig';
+import LoadingErrorMessage from '../../LoadingErrorMessage/LoadingErrorMessage';
 import fetchArboristTeamProjectRoles from '../../teamProjectApi';
 import './TeamProjectModal.css';
 
@@ -25,75 +26,85 @@ const TeamProjectModal = ({ isModalOpen, setIsModalOpen, setBannerText }) => {
 
   let modalContent = (
     <React.Fragment>
-      <div className='spinner-container'>
-        <Spin /> Retrieving the list of team projects.
-        <br />
-        Please wait...
-      </div>
+      <Modal
+        open={isModalOpen}
+        className='team-project-modal'
+        title='Team Projects'
+        closable={false}
+        maskClosable={false}
+        keyboard={false}
+        footer={false}
+      >
+        <div className='spinner-container'>
+          <Spin /> Retrieving the list of team projects.
+          <br />
+          Please wait...
+        </div>
+      </Modal>
     </React.Fragment>
   );
 
   if (status === 'error') {
     modalContent = (
-      <LoadingErrorMessage
-        message={'Error while trying to retrieve user access details'}
-      />
+      <Modal
+        open={isModalOpen}
+        className='team-project-modal'
+        title='Team Projects'
+        closable={false}
+        maskClosable={false}
+        keyboard={false}
+        footer={false}
+      >
+        <LoadingErrorMessage
+          message={'Error while trying to retrieve user access details'}
+        />
+      </Modal>
     );
   }
   if (data) {
-    // check to make sure stored value is within returned team names
-    const isStoredTeamNameValid =()=> {
-      let valid = false
-      if(selectedTeamProject) {
-        data.teams.forEach(team => {if(team.teamName === selectedTeamProject) valid = true});
-      }
-      return valid;
-    }
-
+    console.log("data",data)
     modalContent = (
       <React.Fragment>
-        <div className='team-project-modal_modal-description'>
-          Please select your team.
-        </div>
-        <Select
-          id='input-selectTeamProjectDropDown'
-          labelInValue
-          defaultValue={isStoredTeamNameValid()? selectedTeamProject: null}
-          onChange={(e) => setSelectedTeamProject(e.value)}
-          placeholder='-select one of the team projects below-'
-          fieldNames={{ label: 'teamName', value: 'teamName' }}
-          options={data.teams}
-          dropdownStyle={{ width: '100%' }}
-        />
+        <Modal
+          className='team-project-modal'
+          title='Team Projects'
+          open={isModalOpen}
+          onCancel={() => setIsModalOpen(false)}
+          closable={localStorage.getItem('teamProject')}
+          maskClosable={localStorage.getItem('teamProject')}
+          keyboard={localStorage.getItem('teamProject')}
+          footer={
+            localStorage.getItem('teamProject') && [
+              <Button
+                key='submit'
+                type='primary'
+                disabled={!selectedTeamProject}
+                onClick={() => closeAndUpdateTeamProject()}
+              >
+                Submit
+              </Button>,
+            ]
+          }
+        >
+          {JSON.stringify(data)}
+          <div className='team-project-modal_modal-description'>
+            Please select your team.
+          </div>
+          <Select
+            id='input-selectTeamProjectDropDown'
+            labelInValue
+            defaultValue={selectedTeamProject}
+            onChange={(e) => setSelectedTeamProject(e.value)}
+            placeholder='-select one of the team projects below-'
+            fieldNames={{ label: 'teamName', value: 'teamName' }}
+            options={data.teams}
+            dropdownStyle={{ width: '100%' }}
+          />
+        </Modal>
       </React.Fragment>
     );
   }
-  return (
-
-    <Modal
-      className='team-project-modal'
-      title='Team Projects'
-      open={isModalOpen}
-      onCancel={() => setIsModalOpen(false)}
-      closable={localStorage.getItem('teamProject')}
-      maskClosable={localStorage.getItem('teamProject')}
-      keyboard={localStorage.getItem('teamProject')}
-      footer={
-        localStorage.getItem('teamProject') && [
-          <Button
-            key='submit'
-            type='primary'
-            disabled={!selectedTeamProject}
-            onClick={() => closeAndUpdateTeamProject()}
-          >
-            Submit
-          </Button>,
-        ]
-      }
-    >
-      {modalContent}
-    </Modal>
-  );
+  return <>{modalContent}</>;
 };
 
 TeamProjectModal.propTypes = {

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import TeamProjectModal from './TeamProjectModal';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { rest } from 'msw';
+
+export default {
+  title: 'TESTS1/SharedUtils/TeamProjectModal',
+  component: TeamProjectModal,
+};
+
+const mockedQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: { retry: false },
+  },
+});
+
+const Template = (args) => (
+  <div className='GWASApp'>
+    <QueryClientProvider client={mockedQueryClient}  contextSharing>
+      <TeamProjectModal {...args} />
+    </QueryClientProvider>
+    ,
+  </div>
+);
+
+export const MockedFailureNoUserAccess = Template.bind({});
+MockedFailureNoUserAccess.args = {
+  isModalOpen: true,
+  setIsModalOpen: () => false,
+  setBannerText: () => 'new banner text ' + Math.random,
+};
+
+export const MockedSuccess = Template.bind({});
+MockedSuccess.args = {
+  isModalOpen: true,
+  setIsModalOpen: () => false,
+  setBannerText: () => 'new banner text ' + Math.random,
+};
+/*
+MockedSuccess.parameters = {
+  msw: {
+    handlers: [
+      rest.get(`http://localhost/authz/mapping`, (req, res, ctx) => {
+        const { argowrapperpath } = req.params;
+        return res(
+          ctx.delay(3000),
+          ctx.json({
+            "teams": [
+              { "teamName": '/gwas_projects/project1' },
+              { "teamName": '/gwas_projects/project2' },
+            ],
+          })
+        );
+      }),
+    ],
+  },
+};
+*/
+MockedSuccess.parameters = {
+  msw: {
+    handlers: [
+      rest.get(
+        'http://:arboristapi/authz/mapping',
+        (req, res, ctx) => {
+            return res(
+              ctx.delay(1000),
+              ctx.json({
+                "/gwas_projects/project11": [
+                  {
+                      "service": "atlas-argo-wrapper-and-cohort-middleware",
+                      "method": "access"
+                  }
+              ],
+              "/gwas_projects/project22": [
+                  {
+                      "service": "atlas-argo-wrapper-and-cohort-middleware",
+                      "method": "access"
+                  }
+              ],
+              "/somethingelse": [
+                  {
+                      "service": "requestor",
+                      "method": "create"
+                  }
+              ],
+              })
+            );
+          }
+      ),
+    ],
+  },
+};

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

@@ -61,7 +61,7 @@ describe('TeamProjectModal', () => {
 
     // Mocking the success state
     useQuery.mockReturnValueOnce({
-      data: { teams: [{ value: 'selectedValue', label: 'Selected Value' }] },
+      data: { teams: [{ value: 'test string', label: 'test string' }] },
       status: 'success',
     });
 
@@ -86,13 +86,13 @@ describe('TeamProjectModal', () => {
     expect(screen.getByText(/Submit/i)).toBeInTheDocument();
   });
 
-  test('sets text based on localstorage state, calls setBannerText and closes modal on submit button click', async () => {
+  test('sets defaultValue text based on localstorage state, calls setBannerText and closes modal on submit button click', async () => {
     // Mocking the local storage variable
     localStorage.setItem('teamProject', 'test string');
 
     // Mocking the success state
     useQuery.mockReturnValueOnce({
-      data: { teams: [{ value: 'selectedValue', label: 'Selected Value' }] },
+      data: { teams: [{ value: 'test string', label: 'test string' }] },
       status: 'success',
     });