Feat/vadc sprint23 (#1649)

* VADC-1482:  Updated buttons' colors in Eurler diagram according to 508 (#1626)

* fix(cardDescriptionParsing): initial commit (#1612)

* fix(cardDescriptionParsing): initial commit

* fix(cardDescriptionParsing): ranner linter and fixed error

* Bugfix/combo box labels (#1611)

* bugfix(comboBoxLabels): Began dev of new select box component, need to resolve issues with setting selectedValue

* bugfix(comboBoxLabels): made select box a controllable component, moved IsEnterOrSpace into accessibilityUtils folder

* bugfix(comboBoxLabels): removed console.log statements

* bugfix(comboBoxLabels): ran linter

* bugfix(comboBoxLabels): removed commented code

* bugfix(comboBoxLabels): ran linter

* bugfix(comboBoxLabels): Added Teams Dropdown test

* bugfix(comboBoxLabels): updated  Teams Dropdown test

* bugfix(comboBoxLabels): removed unneeded div element from TeamDropdown

* fix(comboBoxLabels): Updated label text

* fix(comboBoxLabels): Updated unit test

* VADC-1420: Fixed modal button color to ensure accessibility (#1615)

* fix(vadc-1420): Fixed modal button color to ensure accessibility

* Updated background/border/hover colors for modal window

* (VADC-1430): fix(vaLogoAltText)

* VADC-1479: Updated Previous/Next buttons' colors for VA GWAS according to 508 (#1618)

* fix(vadc-1479): Updated colors for the GWAS next/previous buttons

* fix(vadc-1479): Undo automatic discovery style changes

* fix(vadc-1479): Updated class in CSS for Previous/Next buttons

* Use updated colors only for active button (#1620)

* VADC-1516: Updated colors for the buttons in the GWAS modal according to 508 (#1621)

* fix(vadc-1516): Updated colors for the buttons in the GWAS modal

* fix(vadc-1516): Unify style order

* fix(vadc-1516): Refactor CSS

* fix(vadc-1516): Added comment

* fix(vadc-1516): Updated text color for the dropdown in the Team's modal

* fix(vadc-1516): formatting

* fix(vadc-1516): formatting

* fix(vadc-1516): formatting

* fix(vadc-1516): formatting

* fix(vadc-1482):  Updated button colors in Eurler diagram

* fix(vadc-1482): Updated focus color for the Eurler diagram

---------

Co-authored-by: Jarvis <[email protected]>

* fix: improve error message for Euler diagram

...replacing it with a more generic error message that applies better to
all possible error scenarios

* Fix/enable legacy vs new data dictionary - part2 (#1629)

* fix: revert and bring back old data dictionary button component

...from https://github.com/uc-cdis/data-portal/tree/5dc09282573e93f8e11d44f53d65e3cf677256c6/src/Analysis/AtlasDataDictionary/AtlasDataDictionaryButton
...which in turn is a restore from older code #1478

* fix: using AtlasLegacyDataDictionaryButton for the legacy scenario

* fix: remove unused variables

* fix: fix AtlasLegacyDataDictionaryButton tests

* feat: use feature flag legacyDataDictionary instead of analysis app attribute

* fix: remove duplicated AtlasDataDictionaryButton css file

* fix: use project specific feature flag name

* VADC-1544: Refactor CSS to be more generic (#1635)

* fix discovery batch loading (#1632)

* fix discovery batch loading

* fix return as needed

* fix(vadc-1544): Refactor CSS

* Branch fix

* Missing syntax added

* Undo

* Undo

* fix(vadc-1544): Refactor CSS to LESS

* fix(vadc-1544): Formatting

* fix(vadc-1544): Formatting

---------

Co-authored-by: Mingfei Shao <[email protected]>

* add aria label for popup message

* remove commit from wrong file

* VADC-1472: Change Back to Apps link color according to 508 guidelines (#1640)

* fix(vadc-1472): Change link color

* fix(vadc-1472): eslint-new configuration

* Merge master into release branch 22  (#1643)

* fix discovery batch loading (#1632)

* fix discovery batch loading

* fix return as needed

* new changes for B3 WALDER project to make changes for discovery porta… (#1551)

* new changes for B3 WALDER project to make changes for discovery portal in PRC

* spacing changes for code

* changes suggested by mingfei

* changes made after mingfei's comments and meeting

* eslint on openfillrequestformbutton

* added missing variables in discovey config

* added null condition and ran eslint

* added check for null to pass npm test

* added check for null to pass npm test

* refactor: simplify button logic by removing redundant check

* refactor: remove redundant  check from disabled condition

* changes for failing test

* new variable fillRequestFormCheckField added

* changes for if condition

* if condition fixes

* new property added to allow checkboxes if not logged in

* revert change

* removed extra space

* changed text for tooltip

* fixes for props variable

* Update src/Discovery/DiscoveryActionBar/components/OpenFillRequestFormButton.tsx

Co-authored-by: Mingfei Shao <[email protected]>

* changes for tooltip if multiple flags are on

* Update src/Discovery/DiscoveryListView.tsx

Co-authored-by: Mingfei Shao <[email protected]>

---------

Co-authored-by: Mingfei Shao <[email protected]>

* Update team project filter (#1633)

* update team project filter

* update unit test

* (VADC-1444): add please login to access text to login page (#1617)

* (VADC-1439): add link to access denied page (#1616)

* VADC-1448: add logout warning (#1636)

* (VADC-1455, VADC-1454, VADC-1424): mis 508 fixes (#1637)

* Fix/vadc 1417 (#1638)

* update link color

* styling format

---------

Co-authored-by: Mingfei Shao <[email protected]>
Co-authored-by: Urvi Sheth <[email protected]>
Co-authored-by: Jian <[email protected]>

* VADC-1477, VADC-1487: Fix pagination colors according to 508 guidelines (#1646)

* fix(vadc-1477): Fix pagination colors

* Formatting

* fix(vadc-1477): More pagination styles

* Fix/radio buttons508 (#1644)

* fix(radioButtons508): initial commit

* fix(radioButtons508): resolved eslint issues with proptypes

* fix(radioButtons508): removed unintentional changes from auto formatting

* fix(radioButtons508): Updated aria label texts

* VADC-1486: Fix selected phenotypes/covariates colors according to 508 guidelines (#1648)

* fix(vadc-1486): Fix selected phenotypes/covariates colors

* fix(vadc-1486): Restore styles for gwas and teams modals

---------

Co-authored-by: vzpgb <[email protected]>
Co-authored-by: pieterlukasse <[email protected]>
Co-authored-by: Mingfei Shao <[email protected]>
Co-authored-by: tianj7 <[email protected]>
Co-authored-by: Shawn O'Connor <[email protected]>
Co-authored-by: Urvi Sheth <[email protected]>
Co-authored-by: Jian <[email protected]>

docs/portal_config.md

@@ -204,6 +204,7 @@ Below is an example, with inline comments describing what each JSON block config
     "studyRegistration": true, // optional, whether to enable the study registration feature
     "workspaceRegistration": true, // optional, whether to enable the workspace registration feature
     "workspaceTokenServiceRefreshTokenAtLogin": true, // optional, whether to refresh the WTS token directly at portal login (recommended mode). If not set, this refresh happens only when the user enters the workspace section of the portal (default/old/previous mode).
+    "legacyVADCDataDictionary": false, // optional, VADC specific. Set to "true" to ensure the new version of the /analysis/AtlasDataDictionary data dictionary is displayed the user navigates to /analysis/AtlasDataDictionary, and when the user clicks on the data dictionary button in when in the Atlas app page.
   },
   "dataExplorerConfig": { // required only if featureFlags.explorer is true; configuration for the Data Explorer (/explorer); can be replaced by explorerConfig, see Multi Tab Explorer doc
     "charts": { // optional; indicates which charts to display in the Data Explorer
@@ -756,7 +757,6 @@ Below is an example, with inline comments describing what each JSON block config
       "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
-      "dataDictionaryVersion": "new", // Optional, for custom AtlasDataDictionary. Set to "new" to ensure the new version of the /analysis/AtlasDataDictionary data dictionary when the user navigates to /analysis/AtlasDataDictionary.
     },
     {
       "title": "My other app",

package.json

@@ -199,7 +199,7 @@
     "schema": "node ./data/getSchema",
     "params": "node ./data/getTexts > src/params.js",
     "eslint": "./node_modules/.bin/eslint --ext js --ext jsx --ext ts --ext tsx --ignore-pattern '**/__generated__/**' --ignore-pattern '**/*.min.js' --ignore-pattern '**/setupJest.js' --ignore-pattern '**/gqlHelper.js' --ignore-pattern '**/formHooks.jsx' --ignore-pattern '**/*.stories.jsx' --fix src data",
-    "eslint-new": "./node_modules/.bin/eslint  --no-error-on-unmatched-pattern  --ext js --ext jsx --ext ts --ext tsx --ignore-pattern '**/__generated__/**' --ignore-pattern '**/*.ejs' --ignore-pattern '**/*.min.js' --ignore-pattern '**/setupJest.js' --ignore-pattern '**/gqlHelper.js' --ignore-pattern '**/formHooks.jsx'  --ignore-pattern '**/*.json'   --ignore-pattern '**/Dockerfile'  --ignore-pattern '**/*.png'  --ignore-pattern '**/*.ico' --ignore-pattern '**/*.stories.jsx' --ignore-pattern '**/*.css'  --ignore-pattern '**/*.md'  --ignore-pattern '**/*.yml' --ignore-pattern '**/*.conf' --quiet --fix $(git diff --name-only master | xargs)",
+    "eslint-new": "./node_modules/.bin/eslint  --no-error-on-unmatched-pattern  --ext js --ext jsx --ext ts --ext tsx --ignore-pattern '**/__generated__/**' --ignore-pattern '**/*.ejs' --ignore-pattern '**/*.min.js' --ignore-pattern '**/setupJest.js' --ignore-pattern '**/gqlHelper.js' --ignore-pattern '**/formHooks.jsx'  --ignore-pattern '**/*.json'   --ignore-pattern '**/Dockerfile'  --ignore-pattern '**/*.png'  --ignore-pattern '**/*.ico' --ignore-pattern '**/*.stories.jsx' --ignore-pattern '**/*.css' --ignore-pattern '**/*.less'  --ignore-pattern '**/*.md'  --ignore-pattern '**/*.yml' --ignore-pattern '**/*.conf' --quiet --fix $(git diff --name-only master | xargs)",
     "elint": "./node_modules/.bin/eslint --ext js --ext jsx --ext ts --ext tsx --ignore-pattern '**/__generated__/**' --ignore-pattern '**/*.min.js' --ignore-pattern '**/setupJest.js'",
     "storybook": "npm run params && start-storybook -p 6006 -s .storybook/public",
     "stylelint": "stylelint 'src/**/*.less' 'src/**/*.css' --config .stylelintrc.js --fix",

src/Analysis/Analysis.jsx

@@ -7,7 +7,6 @@ import AppCard from './AppCard';
 import TeamProjectHeader from './SharedUtils/TeamProject/TeamProjectHeader/TeamProjectHeader';
 import CheckForTeamProjectApplication from './SharedUtils/TeamProject/Utils/CheckForTeamProjectApplication';
 import './Analysis.less';
-import './SharedUtils/AccessibilityUtils/AccessibilityCSS/Accessibility.css';
 
 class Analysis extends React.Component {
   openApp = (app) => {

src/Analysis/AnalysisApp.jsx

@@ -15,8 +15,11 @@ 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';
 import AtlasDataDictionaryButton from './AtlasDataDictionary/AtlasDataDictionaryButton/AtlasDataDictionaryButton';
+import AtlasLegacyDataDictionaryButton from './AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton';
+import isEnabled from '../helpers/featureFlags';
+import './AnalysisApp.css';
+import './SharedUtils/AccessibilityUtils/AccessibilityStyles/Accessibility.less';
 
 const queryClient = new QueryClient();
 
@@ -139,7 +142,7 @@ class AnalysisApp extends React.Component {
       return (
         <div className='analysis-app_flex_row'>
           <AtlasDataDictionaryContainer
-            dataDictionaryVersion={analysisApps[app].dataDictionaryVersion}
+            useLegacyDataDictionary={isEnabled('legacyVADCDataDictionary')}
           />
         </div>
       );
@@ -168,7 +171,9 @@ class AnalysisApp extends React.Component {
         <React.Fragment>
           <div className='analysis-app__iframe-wrapper'>
             {this.state.app.title === 'OHDSI Atlas' && (
-              <AtlasDataDictionaryButton />
+              isEnabled('legacyVADCDataDictionary')
+                ? <AtlasLegacyDataDictionaryButton />
+                : <AtlasDataDictionaryButton />
             )}
             <iframe
               className='analysis-app__iframe'

src/Analysis/AtlasDataDictionary/AtlasDataDictionaryContainer.tsx

@@ -1,21 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useLocation, useHistory, useRouteMatch } from 'react-router-dom';
-import ProtectedContent from '../../Login/ProtectedContent';
 import AtlasDataDictionaryLoading from './AtlasDataDictionaryTable/AtlasDataDictionaryLoading';
-import AtlasDataDictionaryButton from './AtlasDataDictionaryButton/AtlasDataDictionaryButton';
+import AtlasLegacyDataDictionaryButton from './AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton';
 import './AtlasDataDictionary.css';
 
-const AtlasDataDictionaryContainer = ({ dataDictionaryVersion }) => {
-  const location = useLocation();
-  const history = useHistory();
-  const match = useRouteMatch();
-
-  if (!dataDictionaryVersion || !dataDictionaryVersion.includes('new')) {
-    // Default legacy component: render a div with AtlasDataDictionaryButton when
-    // no dataDictionaryVersion is set or it does not include 'new':
+const AtlasDataDictionaryContainer = ({ useLegacyDataDictionary }) => {
+  if (useLegacyDataDictionary) {
+    // Default legacy component: render a div with AtlasLegacyDataDictionaryButton when
+    // useLegacyDataDictionary is set to true:
     return (
-      <div style={{ width: '100%' }}><AtlasDataDictionaryButton /></div>
+      <div style={{ width: '100%' }}><AtlasLegacyDataDictionaryButton /></div>
     );
   }
   return (
@@ -26,11 +20,11 @@ const AtlasDataDictionaryContainer = ({ dataDictionaryVersion }) => {
 };
 
 AtlasDataDictionaryContainer.propTypes = {
-  dataDictionaryVersion: PropTypes.string,
+  useLegacyDataDictionary: PropTypes.bool,
 };
 
 AtlasDataDictionaryContainer.defaultProps = {
-  dataDictionaryVersion: null,
+  useLegacyDataDictionary: false,
 };
 
 export default AtlasDataDictionaryContainer;

src/Analysis/AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Modal } from 'antd';
+import Button from '@gen3/ui-component/dist/components/Button';
+import '../AtlasDataDictionaryButton/AtlasDataDictionaryButton.css';
+
+const AtlasLegacyDataDictionaryButton = () => {
+  const dataDictionaryURL = 'https://vincicentral.vinci.med.va.gov/SitePages/VINCI_University-VADC_Academy.aspx';
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className='atlas-data-dictionary-button' data-testid='atlas-data-dictionary-button'>
+      <Modal
+        title="You're now leaving the VA Data Commons"
+        open={isModalOpen}
+        className='atlas-data-dictionary-button-modal'
+        onOk={() => {
+          window.open(dataDictionaryURL, '_blank');
+          handleCancel();
+        }}
+        onCancel={handleCancel}
+      >
+        <p>
+          The VADC website, privacy and security policies don&apos;t apply to the
+          site or app you&apos;re about to visit.
+        </p>
+      </Modal>
+      <Button
+        className='analysis-app__button'
+        onClick={showModal}
+        label='MVP Data Dictionary'
+        buttonType='secondary'
+        rightIcon='external-link'
+      />
+    </div>
+  );
+};
+export default AtlasLegacyDataDictionaryButton;

src/Analysis/AtlasDataDictionary/AtlasLegacyDataDictionaryButton/AtlasLegacyDataDictionaryButton.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import AtlasLegacyDataDictionaryButton from './AtlasLegacyDataDictionaryButton';
+
+describe('AtlasLegacyDataDictionaryButton', () => {
+  it('renders the AtlasLegacyDataDictionaryButton component with an "MVP Data Dictionary" Button', () => {
+    const { getByRole, getByTestId } = render(<AtlasLegacyDataDictionaryButton />);
+    expect(getByRole('button')).toBeInTheDocument();
+    expect(getByRole('button')).toHaveTextContent('MVP Data Dictionary');
+    expect(getByTestId('atlas-data-dictionary-button')).toBeInTheDocument();
+  });
+
+  it('shows the Modal when the button is clicked', () => {
+    const { getByRole, queryByText } = render(<AtlasLegacyDataDictionaryButton />);
+    fireEvent.click(getByRole('button'));
+    expect(queryByText('You\'re now leaving the VA Data Commons')).toBeInTheDocument();
+  });
+});

src/Analysis/GWASApp/Components/Covariates/Covariates.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
-import { Table, Spin } from 'antd';
+import { Table, Spin, Radio } from 'antd';
 import { fetchCovariates } from '../../Utils/cohortMiddlewareApi';
 import queryConfig from '../../../SharedUtils/QueryConfig';
 import { useFetch, useFilter } from '../../Utils/formHooks';
@@ -14,7 +14,7 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
   const covariates = useQuery(
     ['covariates', source],
     () => fetchCovariates(source),
-    queryConfig,
+    queryConfig
   );
 
   const [searchTerm, setSearchTerm] = useState('');
@@ -26,11 +26,13 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
   const filteredCovariates = useFilter(
     fetchedCovariates,
     searchTerm,
-    'concept_name',
+    'concept_name'
   );
 
   // remove already selected Covariates from list
-  const displayedCovariates = filteredCovariates.filter((x) => !submittedCovariateIds.includes(x.concept_id));
+  const displayedCovariates = filteredCovariates.filter(
+    (x) => !submittedCovariateIds.includes(x.concept_id)
+  );
 
   const covariateSelection = () => ({
     type: 'radio',
@@ -39,6 +41,13 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
     onChange: (_, selectedRows) => {
       handleSelect(selectedRows[0]);
     },
+    renderCell: (checked, record) => (
+      <Radio
+        checked={checked}
+        value={record.concept_id}
+        aria-label={'Row action: concept selection'}
+      />
+    ),
   });
 
   const covariateTableConfig = [
@@ -111,10 +120,12 @@ const Covariates = ({ selected, handleSelect, submittedCovariateIds }) => {
 Covariates.propTypes = {
   selected: PropTypes.object,
   handleSelect: PropTypes.func.isRequired,
+  submittedCovariateIds: PropTypes.array,
 };
 
 Covariates.defaultProps = {
   selected: null,
+  submittedCovariateIds: null,
 };
 
 export default Covariates;

src/Analysis/GWASApp/Components/SelectCohort/Utils/CohortDefinitions.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
-import { Table, Spin } from 'antd';
+import { Table, Spin, Radio } from 'antd';
 import { fetchCohortDefinitions } from '../../../Utils/cohortMiddlewareApi';
 import queryConfig from '../../../../SharedUtils/QueryConfig';
 import { useFetch, useFilter } from '../../../Utils/formHooks';
@@ -19,7 +19,7 @@ const CohortDefinitions = ({
     ['cohortdefinitions', source, selectedTeamProject],
     () => fetchCohortDefinitions(source, selectedTeamProject),
     // only call this once the source is not undefined
-    { enabled: source !== undefined, ...queryConfig },
+    { enabled: source !== undefined, ...queryConfig }
   );
   const fetchedCohorts = useFetch(cohorts, 'cohort_definitions_and_stats');
   const displayedCohorts = useFilter(fetchedCohorts, searchTerm, 'cohort_name');
@@ -33,6 +33,13 @@ const CohortDefinitions = ({
     onChange: (_, selectedRows) => {
       handleCohortSelect(selectedRows[0]);
     },
+    renderCell: (checked, record) => (
+      <Radio
+        checked={checked}
+        value={record.cohort_definition_id}
+        aria-label={'Row action: study population selection'}
+      />
+    ),
   });
   const cohortTableConfig = [
     {
@@ -46,7 +53,8 @@ const CohortDefinitions = ({
       key: 'size',
     },
   ];
-  if (cohorts?.status === 'error') return <React.Fragment>Error getting data for table</React.Fragment>;
+  if (cohorts?.status === 'error')
+    return <React.Fragment>Error getting data for table</React.Fragment>;
 
   return cohorts?.status === 'success' ? (
     <Table

src/Analysis/GWASApp/Utils/constants.js

@@ -19,7 +19,7 @@ export const GWASAppSteps = [
 export const MESSAGES = {
   OVERLAP_ERROR: {
     title:
-      'None of the persons in the (remaining) population of your selected cohorts overlap with the study population',
+      'One or more groups have no overlap with the (remaining) population of any of the other groups',
     messageType: 'warning',
   },
   NO_BINS_ERROR: {