#3346 duplicate freactal fences provider into redux

src/common/constants.js

@@ -82,7 +82,6 @@ export const GEN3 = 'gen3';
 export const FENCES = [GEN3, DCF];
 
 export const CAVATICA = 'cavatica';
-export const SERVICES = [...FENCES, CAVATICA];
 
 export const GOOGLE = 'google';
 export const FACEBOOK = 'facebook';
@@ -198,3 +197,5 @@ export const DB_GA_P = 'dbGaP';
 
 export const generateUrlForDbGap = (dbGaPStudyId) =>
   `https://www.ncbi.nlm.nih.gov/projects/gap/cgi-bin/study.cgi?study_id=${dbGaPStudyId}.v1.p1`;
+
+export const INTEGRATION_PREFIX = 'integration_';

src/components/ContextProvider/ContextProvider.js

@@ -7,13 +7,12 @@ import { EGO_JWT_KEY } from 'common/constants';
 import { ApiContext, initializeApi } from 'services/api';
 import history, { HistoryContext } from 'services/history';
 import { logoutAll } from 'services/login';
-import { provideFenceConnections, provideLoggedInUser } from 'stateProviders';
+import { provideLoggedInUser } from 'stateProviders';
 
 import ScrollbarSizeProvider from './ScrollbarSizeProvider';
 
 export default compose(
   provideLoggedInUser,
-  provideFenceConnections,
   injectState,
 )(({ children }) => (
   <HistoryContext.Provider>

src/components/Fence/FenceAuthorizedStudies.js

@@ -1,18 +1,18 @@
-import React, { Fragment } from 'react';
-import { Spin } from 'antd';
-import { injectState } from 'freactal';
-import get from 'lodash/get';
+import React from 'react';
 import { compose } from 'recompose';
 
+import useFenceConnections from 'hooks/useFenceConnections';
+import useFenceStudies from 'hooks/useFenceStudies';
 import RightChevron from 'icons/DoubleChevronRightIcon';
 import StackIcon from 'icons/StackIcon';
+import { withApi } from 'services/api';
 import { withHistory } from 'services/history';
-import { fenceConnectionInitializeHoc } from 'stateProviders/provideFenceConnections';
 import Column from 'uikit/Column';
 import { Span } from 'uikit/Core';
 import ExternalLink from 'uikit/ExternalLink';
 import { PromptMessageContainer } from 'uikit/PromptMessage';
 import Row from 'uikit/Row';
+import { Spinner } from 'uikit/Spinner';
 
 import './FenceAuthorizedStudies.css';
 
@@ -29,61 +29,57 @@ const sqonForStudy = (studyId) => ({
   ],
 });
 
-const FenceProjectList = ({ history, fenceConnectionsInitialized, authStudies }) =>
-  !fenceConnectionsInitialized ? (
-    <Spin />
-  ) : (
-    authStudies.map(({ id, studyShortName }) => {
-      const sqon = sqonForStudy(id);
-      return (
-        <Row className={'itemRowContainer'} key={id}>
-          <Column justifyContent="center" p={15}>
-            <StackIcon width={20} />
-          </Column>
-          <Column flex={1} justifyContent="center" pr={10}>
-            <Span>
-              <strong>{studyShortName}</strong> ({`${id}`})
-            </Span>
-          </Column>
-          <Column justifyContent="center">
-            <ExternalLink hasExternalIcon={false}>
-              <Span
-                onClick={() => history.push(`/search/file?sqon=${encodeURI(JSON.stringify(sqon))}`)}
-              >
-                {'View data files'} <RightChevron width={10} fill={'#90278e'} />
-              </Span>
-            </ExternalLink>
-          </Column>
-        </Row>
-      );
-    })
-  );
-
 const FenceAuthorizedStudies = compose(
+  withApi,
   withHistory,
-  injectState,
-  fenceConnectionInitializeHoc,
-)(({ fence, history, state: { fenceStudies, fenceConnectionsInitialized } }) => {
-  const authStudies = get(fenceStudies, `${fence}.authorizedStudies`, []);
+)(({ onCloseModalCb, api, fence, history }) => {
+  const { isFetchingAllFenceConnections } = useFenceConnections(api, [fence]);
+  const { isFetchingAllFenceStudies, fenceAuthStudies } = useFenceStudies(api);
+
+  const isLoadingStudies = isFetchingAllFenceConnections || isFetchingAllFenceStudies;
+  if (isLoadingStudies) {
+    return <Spinner />;
+  }
   return (
     <div className={'fenceAuthorizedStudiesContainer'}>
       <Column>
-        {authStudies.length ? (
-          <Fragment>
+        {fenceAuthStudies.length ? (
+          <>
             <Row style={{ margin: '10px 0' }}>
               <Span className="title" fontWeight={'bold'}>
                 {' '}
                 You have access to controlled datasets from the following studies:
               </Span>
             </Row>
             <Column pl={15}>
-              <FenceProjectList
-                authStudies={authStudies}
-                history={history}
-                fenceConnectionsInitialized={fenceConnectionsInitialized}
-              />
+              {fenceAuthStudies.map(({ id, studyShortName }) => (
+                <Row className={'itemRowContainer'} key={id}>
+                  <Column justifyContent="center" p={15}>
+                    <StackIcon width={20} />
+                  </Column>
+                  <Column flex={1} justifyContent="center" pr={10}>
+                    <Span>
+                      <strong>{studyShortName}</strong> ({`${id}`})
+                    </Span>
+                  </Column>
+                  <Column justifyContent="center">
+                    <ExternalLink hasExternalIcon={false}>
+                      <Span
+                        onClick={() => {
+                          history.push(
+                            `/search/file?sqon=${encodeURI(JSON.stringify(sqonForStudy(id)))}`,
+                          );
+                          onCloseModalCb();
+                        }}
+                      >
+                        {'View data files'} <RightChevron width={10} fill={'#90278e'} />
+                      </Span>
+                    </ExternalLink>
+                  </Column>
+                </Row>
+              ))}
             </Column>
-          </Fragment>
+          </>
         ) : (
           <Row>
             <PromptMessageContainer warning mb={0} width={'100%'}>

src/components/FileRepo/CustomColumns/ActionsColumn.js

@@ -20,7 +20,6 @@ import Tooltip from 'uikit/Tooltip';
 import { ControlledIcon } from '../ui';
 
 import './customColumns.css';
-const enhance = compose(withApi);
 
 const FenceDownloadButton = ({ fence, kfId }) =>
   // DCF files currently aren't available to download, so we show tooltip and grey out button
@@ -59,29 +58,6 @@ FenceDownloadButton.propTypes = {
   kfId: PropTypes.string.isRequired,
 };
 
-const ActionItems = ({ value, fence, hasAccess }) => (
-  <>
-    {hasAccess ? (
-      <FenceDownloadButton fence={fence} kfId={value} />
-    ) : (
-      <Tooltip
-        position="bottom"
-        interactive
-        html={<Row p={'10px'}>You do not have access to this file.</Row>}
-      >
-        <ControlledIcon fill={theme.lightBlue} />
-      </Tooltip>
-    )}
-  </>
-);
-
-ActionItems.propTypes = {
-  fence: PropTypes.string.isRequired,
-  file: PropTypes.object.isRequired,
-  hasAccess: PropTypes.bool.isRequired,
-  value: PropTypes.any.isRequired,
-};
-
 const ActionsColumn = ({ value, api, fenceAcls }) => (
   <Query
     renderError
@@ -116,6 +92,13 @@ const ActionsColumn = ({ value, api, fenceAcls }) => (
       },
     }}
     render={({ loading: loadingQuery, data }) => {
+      if (loadingQuery) {
+        return (
+          <Row center className={'action-column-row'}>
+            <Spin size={'small'} />
+          </Row>
+        );
+      }
       const file = get(data, 'file.hits.edges[0].node', {});
       const acl = file.acl || [];
       const repository = file.repository;
@@ -125,7 +108,19 @@ const ActionsColumn = ({ value, api, fenceAcls }) => (
           {loadingQuery ? (
             <Spin size={'small'} />
           ) : (
-            <ActionItems value={value} fence={repository} hasAccess={hasAccess} file={file} />
+            <>
+              {hasAccess ? (
+                <FenceDownloadButton fence={repository} kfId={value} />
+              ) : (
+                <Tooltip
+                  position="bottom"
+                  interactive
+                  html={<Row p={'10px'}>You do not have access to this file.</Row>}
+                >
+                  <ControlledIcon fill={theme.lightBlue} />
+                </Tooltip>
+              )}
+            </>
           )}
         </Row>
       );
@@ -139,4 +134,4 @@ ActionsColumn.propTypes = {
   fenceAcls: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
-export default enhance(ActionsColumn);
+export default compose(withApi)(ActionsColumn);