Feat: enable old and new data dictionary for VA

docs/portal_config.md

@@ -747,7 +747,8 @@ Below is an example, with inline comments describing what each JSON block config
       "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
+      "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",

src/Analysis/AnalysisApp.jsx

@@ -138,7 +138,9 @@ class AnalysisApp extends React.Component {
     case 'AtlasDataDictionary': {
       return (
         <div className='analysis-app_flex_row'>
-          <AtlasDataDictionaryContainer />
+          <AtlasDataDictionaryContainer
+            dataDictionaryVersion={analysisApps[app].dataDictionaryVersion}
+          />
         </div>
       );
     }

src/Analysis/AtlasDataDictionary/AtlasDataDictionaryContainer.tsx

@@ -1,24 +1,36 @@
 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 './AtlasDataDictionary.css';
 
-const AtlasDataDictionaryContainer = () => {
+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':
+    return (
+      <div style={{ width: '100%' }}><AtlasDataDictionaryButton /></div>
+    );
+  }
   return (
     <div className='atlas-data-dictionary-container'>
-      <ProtectedContent
-        public
-        location={location}
-        history={history}
-        match={match}
-        component={() => <AtlasDataDictionaryLoading />}
-      />
+      <AtlasDataDictionaryLoading />
     </div>
   );
 };
 
+AtlasDataDictionaryContainer.propTypes = {
+  dataDictionaryVersion: PropTypes.string,
+};
+
+AtlasDataDictionaryContainer.defaultProps = {
+  dataDictionaryVersion: null,
+};
+
 export default AtlasDataDictionaryContainer;