🔧 20 - config

.env.schema

@@ -7,4 +7,5 @@ NEXT_PUBLIC_EGO_CLIENT_ID=dms-ui-dev
 ######### Arranger
 NEXT_PUBLIC_ARRANGER_PROJECT_ID=
 NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD=
-NEXT_PUBLIC_ARRANGER_INDEX=
+NEXT_PUBLIC_ARRANGER_INDEX=
+NEXT_PUBLIC_ARRANGER_API_URL=

components/Footer.tsx

@@ -22,6 +22,8 @@ const Footer = () => {
         justify-content: flex-end;
         align-items: center;
         padding-right: 18px;
+        ${theme.shadow.default};
+        z-index: 10;
       `}
     >
       <StyledLink

components/PageLayout.tsx

@@ -3,6 +3,7 @@ import { css } from '@emotion/core';
 
 import defaultTheme from './theme';
 import NavBar from './NavBar';
+import Footer from './Footer';
 
 const PageLayout = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -18,6 +19,7 @@ const PageLayout = ({ children }: { children: React.ReactNode }) => {
     >
       <NavBar />
       {children}
+      <Footer />
     </div>
   );
 };

components/pages/login/index.tsx

@@ -97,7 +97,6 @@ const LoginPage = () => {
           flex: 1;
           flex-direction: row;
           position: relative;
-          min-width: 1440px;
         `}
       >
         <div

components/pages/repository/PageContent.tsx

@@ -37,8 +37,8 @@ const PageContent = (props: PageContentProps) => {
             min-width: 250px;
             max-width: 270px;
             background-color: ${theme.colors.white};
-            ${theme.shadow.default}
             z-index: 1;
+            ${theme.shadow.right};
           `}
         >
           <Facets {...props} />
@@ -60,7 +60,6 @@ const PageContent = (props: PageContentProps) => {
             <QueryBar {...props} />
             <RepoTable {...props} />
           </div>
-          <Footer />
         </div>
       </div>
     </div>

components/pages/repository/index.tsx

@@ -6,6 +6,7 @@ import PageLayout from '../../PageLayout';
 import { RepoFiltersType } from './sqonTypes';
 import { getConfig } from '../../../global/config';
 import { css } from '@emotion/core';
+import createArrangerFetcher from '../../utils/arrangerFetcher';
 
 const Arranger = dynamic(
   () => import('@arranger/components/dist/Arranger').then((comp) => comp.Arranger),
@@ -33,9 +34,10 @@ export interface PageContentProps {
   fetchData?: (projectId: string) => Promise<any>;
 }
 
+const arrangerFetcher = createArrangerFetcher({});
+
 const RepositoryPage = () => {
   const { ARRANGER_PROJECT_ID, ARRANGER_GRAPHQL_FIELD, ARRANGER_INDEX } = getConfig();
-
   return (
     <PageLayout>
       {/* TODO: arranger config error handling tbd */}
@@ -56,7 +58,7 @@ const RepositoryPage = () => {
               `
             }
           >
-            Arranger is missing configuration values. Please check your ".env.local" file.
+            Arranger is missing configuration values. Please check your ".env" file.
             <ul>
               <li>Project ID: {ARRANGER_PROJECT_ID || 'missing'}</li>
               <li>GraphQL Field: {ARRANGER_GRAPHQL_FIELD || 'missing'}</li>
@@ -66,6 +68,7 @@ const RepositoryPage = () => {
         </div>
       ) : (
         <Arranger
+          api={arrangerFetcher}
           projectId={ARRANGER_PROJECT_ID}
           graphqlField={ARRANGER_GRAPHQL_FIELD}
           index={ARRANGER_INDEX}

components/theme/shadow.ts

@@ -2,6 +2,11 @@ const defaultShadow = `
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.08);
 `;
 
+const rightShadow = `
+  box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.1), 3px 0 5px -2px rgba(0, 0, 0, 0.08);
+`;
+
 export default {
   default: defaultShadow,
+  right: rightShadow,
 };

components/utils/ajax.ts

@@ -0,0 +1,25 @@
+/***************
+Arranger does not work with fetch lib right out of the box, so using this implementation from
+https://github.com/IHCC-cohorts/ihcc-ui/blob/develop/src/pages/cohortRepo/arrangerFetcher/ajax.ts
+for now
+ ***************/
+
+import axios from 'axios';
+
+const ajax = axios.create();
+
+ajax.interceptors.request.use(
+  (config) => {
+    // set Authorization headers on a per request basis
+    // setting headers on axios get/put/post or common seems to be shared accross all axios instances
+    config.headers = {
+      ...config.headers,
+    };
+    return config;
+  },
+  (err) => {
+    return Promise.reject(err);
+  },
+);
+
+export default ajax;

components/utils/arrangerFetcher.ts

@@ -0,0 +1,27 @@
+import urlJoin from 'url-join';
+import { getConfig } from '../../global/config';
+import ajax from './ajax';
+
+const createArrangerFetcher = ({
+  onError = (err: any) => Promise.reject(err),
+  defaultHeaders = {},
+} = {}) => ({ method = 'post', body = {}, headers = {} }) => {
+  const { ARRANGER_API, ARRANGER_PROJECT_ID } = getConfig();
+  const uri = urlJoin(ARRANGER_API, ARRANGER_PROJECT_ID, '/graphql');
+  return ajax
+    .post(uri, body, {
+      headers: {
+        'Content-Type': 'application/json',
+        ...(defaultHeaders || {}),
+        ...headers,
+      },
+    })
+    .then((response: { data: any }) => {
+      return response.data;
+    })
+    .catch((err: { response: any }) => {
+      return onError(err);
+    });
+};
+
+export default createArrangerFetcher;

global/config.ts

@@ -1,18 +1,23 @@
+import getNextConfig from 'next/config';
+
 export const getConfig = () => {
+  const publicConfig: { [k: string]: string } = getNextConfig()?.publicRuntimeConfig || {};
+
   return {
-    EGO_API_ROOT: process.env.NEXT_PUBLIC_EGO_API_ROOT || 'http://localhost:8088',
-    EGO_CLIENT_ID: process.env.NEXT_PUBLIC_EGO_CLIENT_ID || '',
+    EGO_API_ROOT: publicConfig.EGO_API_ROOT || 'http://localhost:8088',
+    EGO_CLIENT_ID: publicConfig.EGO_CLIENT_ID || '',
     EGO_PUBLIC_KEY:
-      process.env.EGO_PUBLIC_KEY ||
+      publicConfig.EGO_PUBLIC_KEY ||
       `-----BEGIN PUBLIC KEY-----\r\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0lOqMuPLCVusc6szklNXQL1FHhSkEgR7An+8BllBqTsRHM4bRYosseGFCbYPn8r8FsWuMDtxp0CwTyMQR2PCbJ740DdpbE1KC6jAfZxqcBete7gP0tooJtbvnA6X4vNpG4ukhtUoN9DzNOO0eqMU0Rgyy5HjERdYEWkwTNB30i9I+nHFOSj4MGLBSxNlnuo3keeomCRgtimCx+L/K3HNo0QHTG1J7RzLVAchfQT0lu3pUJ8kB+UM6/6NG+fVyysJyRZ9gadsr4gvHHckw8oUBp2tHvqBEkEdY+rt1Mf5jppt7JUV7HAPLB/qR5jhALY2FX/8MN+lPLmb/nLQQichVQIDAQAB\r\n-----END PUBLIC KEY-----`,
-    EGO_GOOGLE_ID: process.env.NEXT_PUBLIC_EGO_GOOGLE_ID || 'google',
-    EGO_LINKEDIN_ID: process.env.NEXT_PUBLIC_EGO_LINKEDIN_ID || 'linkedin',
-    EGO_FACEBOOK_ID: process.env.NEXT_PUBLIC_EGO_FACEBOOK_ID || 'facebook',
-    EGO_GITHUB_ID: process.env.NEXT_PUBLIC_EGO_GITHUB_ID || 'github',
-    EGO_ORCID_ID: process.env.NEXT_PUBLIC_EGO_ORCID_ID || 'orcid',
-    ARRANGER_PROJECT_ID: process.env.NEXT_PUBLIC_ARRANGER_PROJECT_ID || '',
-    ARRANGER_GRAPHQL_FIELD: process.env.NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD || '',
-    ARRANGER_INDEX: process.env.NEXT_PUBLIC_ARRANGER_INDEX || '',
+    EGO_GOOGLE_ID: publicConfig.EGO_GOOGLE_ID || 'google',
+    EGO_LINKEDIN_ID: publicConfig.EGO_LINKEDIN_ID || 'linkedin',
+    EGO_FACEBOOK_ID: publicConfig.EGO_FACEBOOK_ID || 'facebook',
+    EGO_GITHUB_ID: publicConfig.EGO_GITHUB_ID || 'github',
+    EGO_ORCID_ID: publicConfig.EGO_ORCID_ID || 'orcid',
+    ARRANGER_PROJECT_ID: publicConfig.ARRANGER_PROJECT_ID || '',
+    ARRANGER_GRAPHQL_FIELD: publicConfig.ARRANGER_GRAPHQL_FIELD || '',
+    ARRANGER_INDEX: publicConfig.ARRANGER_INDEX || '',
+    ARRANGER_API: publicConfig.ARRANGER_API || 'http://localhost:5050',
   } as {
     EGO_API_ROOT: string;
     EGO_CLIENT_ID: string;
@@ -25,5 +30,6 @@ export const getConfig = () => {
     ARRANGER_PROJECT_ID: string;
     ARRANGER_GRAPHQL_FIELD: string;
     ARRANGER_INDEX: string;
+    ARRANGER_API: string;
   };
 };

next.config.js

@@ -1,2 +1,12 @@
-const withCSS = require("@zeit/next-css");
-module.exports = withCSS({});
+const withCSS = require('@zeit/next-css');
+module.exports = withCSS({
+  publicRuntimeConfig: {
+    EGO_API_ROOT: process.env.NEXT_PUBLIC_EGO_API_ROOT,
+    EGO_CLIENT_ID: process.env.NEXT_PUBLIC_EGO_CLIENT_ID,
+    EGO_PUBLIC_KEY: process.env.EGO_PUBLIC_KEY,
+    ARRANGER_PROJECT_ID: process.env.NEXT_PUBLIC_ARRANGER_PROJECT_ID,
+    ARRANGER_GRAPHQL_FIELD: process.env.NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD,
+    ARRANGER_INDEX: process.env.NEXT_PUBLIC_ARRANGER_INDEX,
+    ARRANGER_API: process.env.NEXT_PUBLIC_ARRANGER_API_URL,
+  },
+});

package.json

@@ -14,6 +14,7 @@
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
     "@zeit/next-css": "^1.0.1",
+    "axios": "^0.20.0",
     "emotion-theming": "^10.0.27",
     "next": "9.5.3",
     "query-string": "^6.13.2",