PPS-588 guppy csrf

package.json

@@ -13,7 +13,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@gen3/guppy": "^0.17.1",
+    "@gen3/guppy": "git+https://github.com/uc-cdis/guppy.git#8d2adb7370f63419d34585b24b64d1d875e5b1a7",
     "@gen3/ui-component": "^0.11.4",
     "@reactour/tour": "^2.12.0",
     "@upsetjs/venn.js": "^1.4.2",

src/GuppyDataExplorer/ExplorerFilter/index.jsx

@@ -152,6 +152,7 @@ class ExplorerFilter extends React.Component {
       accessibleFieldCheckList: this.props.accessibleFieldCheckList,
       hideEmptyFilterSection: explorerHideEmptyFilterSection,
       filterValuesToHide: explorerFilterValuesToHide,
+      csrfToken: this.props.csrfToken,
     };
     let filterFragment;
     switch (this.state.selectedAccessFilter) {
@@ -215,6 +216,7 @@ ExplorerFilter.propTypes = {
   unaccessibleFieldObject: PropTypes.object, // inherit from GuppyWrapper
   adminAppliedPreFilters: PropTypes.object, // inherit from GuppyWrapper
   accessibleFieldCheckList: PropTypes.arrayOf(PropTypes.string), // inherit from GuppyWrapper
+  csrfToken: PropTypes.string, // inherit from GuppyWrapper
   getAccessButtonLink: PropTypes.string,
   hideGetAccessButton: PropTypes.bool,
   userFilterFromURL: PropTypes.object,
@@ -234,6 +236,7 @@ ExplorerFilter.defaultProps = {
   unaccessibleFieldObject: {},
   adminAppliedPreFilters: {},
   accessibleFieldCheckList: [],
+  csrfToken: '',
   getAccessButtonLink: undefined,
   hideGetAccessButton: false,
   userFilterFromURL: {},

src/GuppyDataExplorer/GuppyDataExplorer.jsx

@@ -5,6 +5,7 @@ import GuppyWrapper from '@gen3/guppy/dist/components/GuppyWrapper';
 import ExplorerVisualization from './ExplorerVisualization';
 import ExplorerFilter from './ExplorerFilter';
 import ExplorerTopMessageBanner from './ExplorerTopMessageBanner';
+import { csrfToken } from '../configs';
 import { labelToPlural, getQueryParameter, IsValidJSONString } from './utils';
 import {
   GuppyConfigType,
@@ -117,6 +118,7 @@ class GuppyDataExplorer extends React.Component {
           onFilterChange={this.handleFilterChangeForQueryStateUrl}
           rawDataFields={this.props.tableConfig.fields}
           accessibleFieldCheckList={this.props.guppyConfig.accessibleFieldCheckList}
+          csrfToken={csrfToken}
         >
           <ExplorerTopMessageBanner
             className='guppy-data-explorer__top-banner'

src/actions.js

@@ -206,45 +206,22 @@ export const fetchWrapper = ({
 // We first update the session so that the user will be notified
 // if their auth is insufficient to perform the query.
 export const fetchGraphQL = (graphQLParams) => sessionMonitor.updateSession()
-  .then(() => {
-    const request = {
-      credentials: 'include',
-      headers: { ...headers },
-      method: 'POST',
-      body: JSON.stringify(graphQLParams),
-    };
-
-    return fetch(graphqlPath, request)
-      .then((response) => response.text())
-      .then((responseBody) => {
-        try {
-          return JSON.parse(responseBody);
-        } catch (error) {
-          return responseBody;
-        }
-      });
-  });
+  .then(() => fetchWithCreds({ path: graphqlPath, body: JSON.stringify(graphQLParams), method: 'POST' })
+    .then((response) => {
+      if (response.status === 200 && response.data) {
+        return response.data;
+      }
+      return response;
+    }));
 
 export const fetchFlatGraphQL = (graphQLParams) => sessionMonitor.updateSession()
-  .then(() => {
-    const request = {
-      credentials: 'include',
-      headers: { ...headers },
-      method: 'POST',
-      body: JSON.stringify(graphQLParams),
-    };
-
-    const graphqlUrl = guppyGraphQLUrl;
-    return fetch(graphqlUrl, request)
-      .then((response) => response.text())
-      .then((responseBody) => {
-        try {
-          return JSON.parse(responseBody);
-        } catch (error) {
-          return responseBody;
-        }
-      });
-  });
+  .then(() => fetchWithCreds({ path: guppyGraphQLUrl, body: JSON.stringify(graphQLParams), method: 'POST' })
+    .then((response) => {
+      if (response.status === 200 && response.data) {
+        return response.data;
+      }
+      return response;
+    }));
 
 export const handleResponse = (type) => ({ data, status }) => {
   switch (status) {

src/configs.js

@@ -1,12 +1,12 @@
 import { hostname } from './localconf';
 
 export * from './localconf'; // / eslint-disable-line
-const csrftoken = document.cookie.replace(/(?:(?:^|.*;\s*)csrftoken\s*=\s*([^;]*).*$)|^.*$/, '$1');
+export const csrfToken = document.cookie.replace(/(?:(?:^|.*;\s*)csrftoken\s*=\s*([^;]*).*$)|^.*$/, '$1');
 
 export const headers = {
   Accept: 'application/json',
   'Content-Type': 'application/json',
-  'x-csrf-token': csrftoken,
+  'x-csrf-token': csrfToken,
 };
 
 /**

webpack.config.js

@@ -4,6 +4,7 @@ const path = require('path');
 const fs = require('fs');
 
 const basename = process.env.BASENAME || '/';
+const basenameWithTrailingSlash = basename.endsWith('/') ? basename : `${basename}/`;
 const pathPrefix = basename.endsWith('/') ? basename.slice(0, basename.length - 1) : basename;
 const app = process.env.APP || 'dev';
 
@@ -249,7 +250,7 @@ module.exports = {
   output: {
     path: __dirname,
     filename: '[name].js',
-    publicPath: basename,
+    publicPath: basenameWithTrailingSlash,
   },
   optimization,
   devtool,