Release 2.0.0 (#281)

Major Changes:
FIltering from backend
Performance Improvement
Tabbed Dashboard
File Centric workflow
Styling updates

.env

@@ -1,6 +0,0 @@
-REACT_APP_BACKEND_GETUSERINFO_API=https://k9dc.essential-dev.com/fence/login/
-REACT_APP_LOGIN_URL=https://nci-crdc-staging.datacommons.io/user/oauth2/authorize?client_id=82pslYFJqA7auRvKYfTOK67jzQAMb8f6C33tlmZz&response_type=code&redirect_uri=https%3A%2F%2Fk9dc.essential-dev.com%2F&scope=openid%20user
-REACT_APP_USER_LOGOUT_URL=https://k9dc.essential-dev.com/fence/logout
-REACT_APP_BACKEND_API=http://localhost:8080/v1/graphql/
-REACT_APP_APPLICATION_VERSION=YYYY_MM_DD/HH:MM
-REACT_APP_ABOUT_CONTENT_URL= https://raw.githubusercontent.com/CBIIT/ctdc-codebase/master/src/main/frontend/src/content/dev/aboutPagesContent.yaml

config/webpack.config.js

@@ -18,12 +18,11 @@ const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const paths = require('./paths');
-const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-
+const paths = require('./paths');
+const getClientEnvironment = require('./env');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

package.json

@@ -3,19 +3,20 @@
   "name": "bento-frontend",
   "version": "0.1.0",
   "dependencies": {
+    "@apollo/client": "^3.3.4",
+    "@apollo/react-components": "^4.0.0",
     "@babel/core": "7.2.2",
     "@material-ui/core": "^4.10.0",
     "@material-ui/icons": "^4.9.1",
     "@svgr/webpack": "4.1.0",
-    "apollo-boost": "^0.4.3",
     "axios": "^0.19.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^9.0.0",
     "babel-jest": "23.6.0",
     "babel-loader": "8.0.5",
     "babel-plugin-named-asset-import": "^0.3.4",
     "babel-preset-react-app": "^7.0.1",
-    "bento-components": "^0.1.32",
+    "bento-components": "^0.1.45",
     "bfj": "6.1.1",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "classnames": "^2.2.6",
@@ -30,7 +31,7 @@
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.1",
     "graphiql": "^1.0.3",
-    "graphql": "^14.4.2",
+    "graphql": "^14.7.0",
     "graphql-tag": "^2.11.0",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
@@ -51,15 +52,16 @@
     "postcss-safe-parser": "4.0.1",
     "query-string": "^6.8.3",
     "react": "^16.8.2",
-    "react-apollo": "^2.5.8",
-    "react-apollo-hooks": "^0.5.0",
+    "react-apollo": "^3.1.5",
     "react-app-polyfill": "^0.2.1",
     "react-dev-utils": "^7.0.3",
     "react-dom": "^16.8.2",
+    "react-loading-skeleton": "^2.1.1",
     "react-redux": "^7.2.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scroll": "^1.7.16",
+    "react-swipeable-views": "^0.13.9",
     "react-syntax-highlighter": "^10.2.0",
     "react-toastify": "^4.5.2",
     "react-uuid": "^1.0.2",

public/index.html

@@ -25,6 +25,12 @@
       Ideal size: 32x32 px.
     -->
     <link rel="shortcut icon" href="https://raw.githubusercontent.com/CBIIT/bento-frontend/master/public/favicon.ico" />
+
+    <!--
+      Inject environment variable to windows object. 
+    -->
+    <script src="./injectEnv.js"></script>
+
     <!--
       Change line below to update title for the application.
       Ideal Length: <= 33 Characters.

public/injectEnv.js

@@ -0,0 +1,8 @@
+window.injectedEnv ={
+	REACT_APP_BACKEND_GETUSERINFO_API:'https://k9dc.essential-dev.com/fence/login/',
+	REACT_APP_LOGIN_URL:'https://nci-crdc-staging.datacommons.io/user/oauth2/authorize?client_id=82pslYFJqA7auRvKYfTOK67jzQAMb8f6C33tlmZz&response_type=code&redirect_uri=https%3A%2F%2Fk9dc.essential-dev.com%2F&scope=openid%20user',
+	REACT_APP_USER_LOGOUT_URL:'https://k9dc.essential-dev.com/fence/logout',
+	REACT_APP_BACKEND_API:'http://localhost:8080/v1/graphql/',
+	REACT_APP_APPLICATION_VERSION:'YYYY_MM_DD/HH:MM',
+	REACT_APP_ABOUT_CONTENT_URL:'https://raw.githubusercontent.com/CBIIT/bento-frontend/master/src/content/dev/aboutPagesContent.yaml',
+};

src/bento/armDetailData.js

@@ -1,4 +1,11 @@
 import gql from 'graphql-tag';
+import { FileOnRowsSelect } from '../utils/fileTable';
+
+// --------------- Tooltip configuration --------------
+export const tooltipContent = {
+  src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/action/help/materialicons/24px.svg',
+  alt: 'tooltipIcon',
+};
 
 // -------------- Case ID area configurations --------------
 const header = {
@@ -41,11 +48,16 @@ const subsections = [
   },
 ];
 
-// --------------- File table configuration --------------
+// Ideal size for externalLinkIcon is 16x16 px
+export const externalLinkIcon = {
+  src: 'https://raw.githubusercontent.com/CBIIT/bento-frontend/master/src/assets/program/externalLinkIcon.svg',
+  alt: 'External link icon',
+};
 
+// --------------- File table configuration --------------
 const table = {
   // Set 'display' to false to hide the table entirely
-  display: false,
+  display: true,
   // Table title
   title: 'ASSOCIATED FILES',
   // Field name for files data, need to be updated only when using a different GraphQL query
@@ -54,7 +66,29 @@ const table = {
   defaultSortField: 'file_name',
   // 'asc' or 'desc'
   defaultSortDirection: 'asc',
-  // A maximum of 10 columns are allowed
+  // Set 'selectableRows' to true to show the row selection
+  selectableRows: true,
+  tooltipMessage: 'Click button to add selected files.',
+  helpMessage: 'Here help message',
+  // Text to appear on Add to cart button
+  buttonText: 'Add Selected Files',
+  saveButtonDefaultStyle: {
+    color: '#fff',
+    backgroundColor: '#09A175',
+    opacity: '1',
+    border: '0px',
+    cursor: 'pointer',
+  },
+  ActiveSaveButtonDefaultStyle: {
+    disabled: 'true',
+    opacity: '0.3',
+    cursor: 'auto',
+  },
+  DeactiveSaveButtonDefaultStyle: {
+    cursor: 'pointer',
+    opacity: 'unset',
+    border: 'unset',
+  },
   columns: [
     {
       dataField: 'file_name',
@@ -64,10 +98,6 @@ const table = {
       dataField: 'file_type',
       header: 'File Type',
     },
-    {
-      dataField: 'association',
-      header: 'Association',
-    },
     {
       dataField: 'file_description',
       header: 'Description',
@@ -83,6 +113,9 @@ const table = {
       formatBytes: true,
     },
   ],
+  // Util Functions
+  // Custom function on selct checkbox is selected.
+  customOnRowsSelect: FileOnRowsSelect,
 };
 
 // --------------- GraphQL query configuration --------------