Feat/gwas unified flow outcome card

src/Analysis/GWASV2/Components/Covariates/Covariates.css

@@ -11,13 +11,15 @@
   margin-top: 8px;
 }
 
+.GWASV2 .outcome-card {
+  background: #cae6f1;
+}
+
 .GWASV2 .dichotomous-card {
-  width: 189px;
   background: #ebfad3;
 }
 
 .GWASV2 .continuous-card {
-  width: 189px;
   background: #fde3d6;
 }
 

src/Analysis/GWASV2/Components/Covariates/CovariatesCardList.stories.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import CovariatesCardsList from './CovariatesCardsList';
+import ValidInitialState from '../../TestData/InitialStates/ValidInitialState';
+import './Covariates.css';
+import '../../Steps/SelectCovariates/SelectCovariates.css';
+import '../../GWASV2.css';
+
+export default {
+  title: 'Tests3/GWASV2/CovariatesCardsList',
+  component: CovariatesCardsList,
+};
+
+const Template = (args) => (
+  <div className='GWASV2'>
+    <div className='GWASUI-row'>
+      <div className='GWASUI-double-column'></div>
+      <div className='GWASUI-column GWASUI-card-column'>
+        <CovariatesCardsList
+          {...args}
+          deleteCovariate={(chosenCovariate) =>
+            alert('called deleteCovariate Method')
+          }
+        />
+      </div>
+    </div>
+  </div>
+);
+
+export const SuccessState = Template.bind({});
+SuccessState.args = ValidInitialState;

src/Analysis/GWASV2/Components/Covariates/CovariatesCardList.test.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { DeleteOutlined } from '@ant-design/icons';
+import CovariatesCardsList from './CovariatesCardsList';
+import ValidInitialState from '../../TestData/InitialStates/ValidInitialState';
+
+describe('CovariatesCardsList component', () => {
+  let wrapper;
+  const mockDeleteCovariate = jest.fn();
+
+  beforeEach(() => {
+    const mockProps = {
+      outcome: ValidInitialState.outcome,
+      covariates: ValidInitialState.covariates,
+      deleteCovariate: mockDeleteCovariate,
+    };
+    wrapper = mount(<CovariatesCardsList {...mockProps} />);
+  });
+
+  it('should render an outcome card', () => {
+    expect(wrapper.find('.outcome-card').exists()).toBe(true);
+    expect(wrapper.find('.outcome-card .ant-card-meta-title').text()).toBe(
+      'Outcome Phenotype'
+    );
+    expect(
+      wrapper.find('.outcome-card .ant-card-meta-description').text()
+    ).toBe('Attribute8');
+  });
+
+  it('should render covariate cards', () => {
+    expect(wrapper.find('.dichotomous-card').exists()).toBe(true);
+    expect(
+      wrapper
+        .find('.dichotomous-card .ant-card-meta-title')
+        .last()
+        .text()
+    ).toBe('Dichotomous Covariate');
+    expect(
+      wrapper
+        .find('.dichotomous-card .ant-card-meta-description')
+        .last()
+        .text()
+    ).toBe('test dichotomous covariate');
+
+    expect(wrapper.find('.continuous-card').exists()).toBe(true);
+    expect(
+      wrapper
+        .find('.continuous-card .ant-card-meta-title')
+        .last()
+        .text()
+    ).toBe('Continuous Covariate');
+    expect(
+      wrapper
+        .find('.continuous-card .ant-card-meta-description')
+        .last()
+        .text()
+    ).toBe('Attribute83');
+  });
+
+  it('should call deleteCovariate when the delete icon is clicked', () => {
+    wrapper
+      .find(DeleteOutlined)
+      .first()
+      .simulate('click');
+    expect(mockDeleteCovariate).toHaveBeenCalledWith({
+      variable_type: 'custom_dichotomous',
+      provided_name: 'test dichotomous covariate',
+      concept_id: 2000000123,
+    });
+    wrapper
+      .find(DeleteOutlined)
+      .last()
+      .simulate('click');
+    expect(mockDeleteCovariate).toHaveBeenCalledWith({
+      variable_type: 'concept',
+      concept_name: 'Attribute83',
+      concept_id: 2000000873,
+    });
+  });
+});

src/Analysis/GWASV2/Components/Covariates/CovariatesCardsList.jsx

@@ -5,13 +5,21 @@ import { Card } from 'antd';
 
 const { Meta } = Card;
 
-const CovariatesCardsList = ({ covariates, deleteCovariate }) => (
+const CovariatesCardsList = ({ covariates, outcome, deleteCovariate }) => (
   <div className='GWASUI-cdList'>
+    {outcome && (
+      <Card className='outcome-card'>
+        <Meta
+          title='Outcome Phenotype'
+          description={`${outcome.provided_name || outcome.concept_name}`}
+        />
+      </Card>
+    )}
     {covariates.map((covariate, key) => (
-      <React.Fragment key={key}>
+      <React.Fragment key={covariate + key}>
         {covariate.provided_name && (
           <Card
-            key={`cd-list-option-${key}`}
+            key={`cd-list-option-${covariate + key}`}
             className='dichotomous-card'
             actions={[
               <DeleteOutlined
@@ -53,8 +61,13 @@ const CovariatesCardsList = ({ covariates, deleteCovariate }) => (
 );
 
 CovariatesCardsList.propTypes = {
-  covariates: PropTypes.array.isRequired,
+  covariates: PropTypes.array,
+  outcome: PropTypes.object,
   deleteCovariate: PropTypes.func.isRequired,
 };
+CovariatesCardsList.defaultProps = {
+  outcome: null,
+  covariates: [],
+};
 
 export default CovariatesCardsList;

src/Analysis/GWASV2/Steps/SelectCovariates/SelectCovariates.jsx

@@ -82,6 +82,7 @@ const SelectCovariates = ({
         <div className='GWASUI-column GWASUI-card-column'>
           <CovariatesCardsList
             covariates={covariates}
+            outcome={outcome}
             deleteCovariate={(chosenCovariate) => dispatch({
               type: ACTIONS.DELETE_COVARIATE,
               payload: chosenCovariate,

src/Analysis/GWASV2/Steps/SelectOutcome/SelectOutcome.jsx

@@ -76,6 +76,7 @@ const SelectOutcome = ({
       <div className='GWASUI-column GWASUI-card-column'>
         <CovariatesCardsList
           covariates={covariates}
+          outcome={outcome}
           deleteCovariate={(chosenCovariate) => dispatch({
             type: ACTIONS.DELETE_COVARIATE,
             payload: chosenCovariate,

src/Analysis/GWASV2/TestData/InitialStates/ValidInitialState.js

@@ -10,6 +10,11 @@ const ValidInitialState = {
     size: 510904,
   },
   covariates: [
+    {
+      variable_type: 'custom_dichotomous',
+      provided_name: 'test dichotomous covariate',
+      concept_id: 2000000123,
+    },
     {
       variable_type: 'concept',
       concept_id: 2000000873,