Merge pull request #79 from overture-stack/rc/0.7.0

🔖 Rc/0.7.0
overture-stack · Mar 16, 2021 · 315eafc · 315eafc
2 parents 0758b27 + 376c6fc
commit 315eafc
Show file tree

Hide file tree

Showing 46 changed files with 308 additions and 211 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,10 +1,13 @@
 FROM node:12.13.1-alpine
 
+ARG ASSET_PREFIX
+ENV ASSET_PREFIX $ASSET_PREFIX
+
 ENV APP_UID=9999
 ENV APP_GID=9999
 
 RUN apk --no-cache add shadow
-RUN groupmod -g $APP_GID node 
+RUN groupmod -g $APP_GID node
 RUN usermod -u $APP_UID -g $APP_GID node
 
 RUN mkdir -p /usr/src

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -10,7 +10,7 @@ const Footer = () => {
   return (
     <div
       css={(theme: typeof defaultTheme) => css`
-        height: 47px;
+        height: ${theme.dimensions.footer.height}px;
         background-color: ${theme.colors.white};
         border-top: 1px solid ${theme.colors.grey_3};
         display: flex;
@@ -19,6 +19,10 @@ const Footer = () => {
         padding-right: 18px;
         ${theme.shadow.default};
         z-index: 10;
+        position: fixed;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
       `}
     >
       <StyledLink
@@ -53,12 +57,15 @@ const Footer = () => {
             line-height: 24px;
             font-weight: normal;
             padding-right: 10px;
+            padding-left: 5px;
           `
         }
       >
         powered by
       </span>
-      <OvertureLogoWithText width={100} height={18} />
+      <a href="https://www.overture.bio/" target="_blank">
+        <OvertureLogoWithText width={100} height={18} />
+      </a>
     </div>
   );
 };

diff --git a/components/Head.tsx b/components/Head.tsx
@@ -1,15 +1,26 @@
 import React from 'react';
 import NextHead from 'next/head';
+import { getConfig } from '../global/config';
 
-export default function Head() {
+const Head = () => {
+  const { NEXT_PUBLIC_BASE_PATH } = getConfig();
   return (
     <NextHead>
-      {/* TODO: need correct favicon link */}
-      <link rel="icon" href="/static/favicon.ico" />
       <link
         href={'https://fonts.googleapis.com/css?family=Lato:300,400,600&display=swap'}
         rel="stylesheet"
       />
+      <link rel="shortcut icon" href={`${NEXT_PUBLIC_BASE_PATH}/images/favicon.ico`} />
     </NextHead>
   );
-}
+};
+
+export const PageHead = ({ subtitle }: { subtitle?: string }) => {
+  return (
+    <NextHead>
+      <title>Overture DMS{subtitle ? ` - ${subtitle}` : ''}</title>
+    </NextHead>
+  );
+};
+
+export default Head;
diff --git a/components/Link.tsx b/components/Link.tsx
@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
+import Link from 'next/link';
 
 import defaultTheme from './theme';
+import getInternalLink from '../global/utils/getInternalLink';
 
 const StyledLink = styled('a')`
   ${({ theme }: { theme: typeof defaultTheme }) => css`
@@ -30,10 +32,16 @@ export const StyledLinkAsButton = styled(StyledLink)`
     position: relative;
     text-decoration: none;
     &:hover {
-      background-color: ${theme.colors.accent_dark};
       color: ${theme.colors.white};
+      background-color: ${theme.colors.accent_dark};
     }
   `}
 `;
 
+export const InternalLink = ({ children, path }: { children: React.ReactNode; path: string }) => (
+  <Link href={getInternalLink({ path })} passHref>
+    {children}
+  </Link>
+);
+
 export default StyledLink;
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -1,20 +1,31 @@
 import React from 'react';
 import { css } from '@emotion/core';
+import { useRouter } from 'next/router';
 
 import UserDropdown from './UserDropdown';
 import defaultTheme from './theme';
 import { OvertureLogo } from './theme/icons';
 import useAuthContext from '../global/hooks/useAuthContext';
-import { StyledLinkAsButton } from './Link';
+import { StyledLinkAsButton, InternalLink as Link } from './Link';
+import { useTheme } from 'emotion-theming';
+import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants';
 
 const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System', labIcon }) => {
   const { token } = useAuthContext();
+  const router = useRouter();
+  const theme: typeof defaultTheme = useTheme();
+
+  const activeLinkStyle = `
+    background-color: ${theme.colors.grey_2};
+    color: ${theme.colors.accent2_dark};
+  `;
+
   return (
     <div
       css={(theme: typeof defaultTheme) => css`
         display: flex;
         justify-content: space-between;
-        height: 50px;
+        height: ${theme.dimensions.navbar.height}px;
         background-color: ${theme.colors.white};
         ${theme.shadow.default};
         position: sticky;
@@ -32,28 +43,29 @@ const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System',
           cursor: pointer;
         `}
       >
-        <a
-          href="/repository"
-          css={(theme) => css`
-            display: flex;
-            align-items: center;
-            text-decoration: none;
-            ${theme.typography.heading};
-            color: ${theme.colors.accent_dark};
-          `}
-        >
-          {labIcon || <OvertureLogo width={35} height={35} />}
-          {/* set to default until labname config is implemented */}
-          {labName && (
-            <span
-              css={css`
-                padding-left: 10px;
-              `}
-            >
-              {labName}
-            </span>
-          )}
-        </a>
+        <Link path={EXPLORER_PATH}>
+          <a
+            css={(theme) => css`
+              display: flex;
+              align-items: center;
+              text-decoration: none;
+              ${theme.typography.heading};
+              color: ${theme.colors.accent_dark};
+            `}
+          >
+            {labIcon || <OvertureLogo width={35} height={35} />}
+            {/* set to default until labname config is implemented */}
+            {labName && (
+              <span
+                css={css`
+                  padding-left: 10px;
+                `}
+              >
+                {labName}
+              </span>
+            )}
+          </a>
+        </Link>
       </div>
       <div
         css={css`
@@ -67,38 +79,41 @@ const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System',
             align-items: center;
             justify-content: center;
             width: 144px;
-            background-color: ${theme.colors.grey_2};
+            background-color: ${theme.colors.white};
             height: 100%;
             &:hover {
-              background-color: ${theme.colors.grey_3};
+              background-color: ${theme.colors.grey_2};
             }
             border-right: 2px solid ${theme.colors.white};
           `}
         >
-          <a
-            css={(theme) => css`
-              display: flex;
-              flex: 1;
-              height: 100%;
-              justify-content: center;
-              align-items: center;
-              text-decoration: none;
-              color: ${theme.colors.accent2_dark};
-            `}
-            href="/repository"
-          >
-            Data Explorer
-          </a>
+          <Link path={EXPLORER_PATH}>
+            <a
+              css={(theme) => css`
+                display: flex;
+                flex: 1;
+                height: 100%;
+                justify-content: center;
+                align-items: center;
+                text-decoration: none;
+                color: ${theme.colors.accent_dark};
+                cursor: pointer;
+                ${router.pathname === EXPLORER_PATH ? activeLinkStyle : ''}
+              `}
+            >
+              Data Explorer
+            </a>
+          </Link>
         </div>
         {token ? (
           <div
             css={(theme) => css`
               width: 195px;
               height: 100%;
               display: flex;
-              background-color: ${theme.colors.grey_2};
+              ${router.pathname === USER_PATH ? activeLinkStyle : ''}
               &:hover {
-                background-color: ${theme.colors.grey_3};
+                background-color: ${theme.colors.grey_2};
               }
             `}
           >
@@ -113,16 +128,17 @@ const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System',
               justify-content: center;
             `}
           >
-            <StyledLinkAsButton
-              css={(theme) => css`
-                width: 70px;
-                ${theme.typography.button};
-                line-height: 20px;
-              `}
-              href="/login"
-            >
-              Log in
-            </StyledLinkAsButton>
+            <Link path={LOGIN_PATH}>
+              <StyledLinkAsButton
+                css={(theme) => css`
+                  width: 70px;
+                  ${theme.typography.button};
+                  line-height: 20px;
+                `}
+              >
+                Log in
+              </StyledLinkAsButton>
+            </Link>
           </div>
         )}
       </div>

diff --git a/components/PageLayout.tsx b/components/PageLayout.tsx
@@ -3,22 +3,26 @@ import { css } from '@emotion/core';
 
 import NavBar from './NavBar';
 import Footer from './Footer';
+import { PageHead } from './Head';
 
-const PageLayout = ({ children }: { children: React.ReactNode }) => {
+const PageLayout = ({ children, subtitle }: { children: React.ReactNode; subtitle?: string }) => {
   return (
-    <div
-      css={(theme) => css`
-        display: grid;
-        grid-template-rows: 50px 1fr;
-        min-height: 100vh;
-        ${theme.typography.regular}
-        color: ${theme.colors.black};
-      `}
-    >
-      <NavBar />
-      {children}
-      <Footer />
-    </div>
+    <>
+      <PageHead subtitle={subtitle}></PageHead>
+      <div
+        css={(theme) => css`
+          display: grid;
+          grid-template-rows: 50px 1fr;
+          min-height: 100vh;
+          ${theme.typography.regular}
+          color: ${theme.colors.black};
+        `}
+      >
+        <NavBar />
+        {children}
+        <Footer />
+      </div>
+    </>
   );
 };