Merge pull request #60 from overture-stack/rc/0.5.0

🔖 Rc/0.5.0
overture-stack · Feb 26, 2021 · 2e7eb31 · 2e7eb31
2 parents 9dc8bbb + f7d6102
commit 2e7eb31
Show file tree

Hide file tree

Showing 27 changed files with 3,997 additions and 2,920 deletions.
diff --git a/components/Link.tsx b/components/Link.tsx
@@ -14,4 +14,26 @@ const StyledLink = styled('a')`
   `}
 `;
 
+export const StyledLinkAsButton = styled(StyledLink)`
+  ${({ theme }: { theme: typeof defaultTheme }) => css`
+    color: ${theme.colors.white};
+    background-color: ${theme.colors.accent};
+    ${theme.typography.subheading2};
+    line-height: 24px;
+    border-radius: 5px;
+    border: 1px solid ${theme.colors.accent};
+    padding: 6px 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    text-decoration: none;
+    &:hover {
+      background-color: ${theme.colors.accent_dark};
+      color: ${theme.colors.white};
+    }
+  `}
+`;
+
 export default StyledLink;
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -1,37 +1,14 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { css } from '@emotion/core';
 
 import UserDropdown from './UserDropdown';
 import defaultTheme from './theme';
 import { OvertureLogo } from './theme/icons';
-
-const LoginButton = ({ onClick }: { onClick?: () => any }) => {
-  return (
-    <button
-      onClick={onClick}
-      css={(theme: typeof defaultTheme) => css`
-        ${theme.typography.button};
-        background-color: ${theme.colors.accent};
-        color: ${theme.colors.white};
-        width: 73px;
-        height: 32px;
-        border: 1px solid ${theme.colors.accent};
-        border-radius: 5px;
-        margin: 0.5rem;
-        cursor: pointer;
-        &:hover {
-          ${theme.shadow.default};
-        }
-      `}
-    >
-      Login
-    </button>
-  );
-};
+import useAuthContext from '../global/hooks/useAuthContext';
+import { StyledLinkAsButton } from './Link';
 
 const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System', labIcon }) => {
-  // isLoggedIn state will be reimplemented with real auth state
-  const [isLoggedIn, setIsLoggedIn] = useState(true);
+  const { token } = useAuthContext();
   return (
     <div
       css={(theme: typeof defaultTheme) => css`
@@ -113,7 +90,7 @@ const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System',
             Data Explorer
           </a>
         </div>
-        {isLoggedIn ? (
+        {token ? (
           <div
             css={(theme) => css`
               width: 195px;
@@ -136,7 +113,16 @@ const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System',
               justify-content: center;
             `}
           >
-            <LoginButton onClick={() => console.log('Logging in')} />
+            <StyledLinkAsButton
+              css={(theme) => css`
+                width: 70px;
+                ${theme.typography.button};
+                line-height: 20px;
+              `}
+              href="/login"
+            >
+              Log in
+            </StyledLinkAsButton>
           </div>
         )}
       </div>

diff --git a/components/Root.tsx b/components/Root.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { ThemeProvider } from 'emotion-theming';
 import defaultTheme from './theme';
 import Head from './Head';
+import { AuthProvider } from '../global/hooks/useAuthContext';
 
-const Root = ({ children }: { children: React.ReactElement }) => {
+const Root = ({ children, egoJwt }: { children: React.ReactElement; egoJwt?: string }) => {
   return (
     <>
       <style>
@@ -26,7 +27,9 @@ const Root = ({ children }: { children: React.ReactElement }) => {
       `}
       </style>
       <Head />
-      <ThemeProvider theme={defaultTheme}>{children}</ThemeProvider>
+      <AuthProvider egoJwt={egoJwt}>
+        <ThemeProvider theme={defaultTheme}>{children}</ThemeProvider>
+      </AuthProvider>
     </>
   );
 };

diff --git a/components/UserDropdown.tsx b/components/UserDropdown.tsx
@@ -5,51 +5,71 @@ import { useTheme } from 'emotion-theming';
 
 import defaultTheme from './theme';
 import { Avatar, ChevronDown } from './theme/icons';
+import useAuthContext from '../global/hooks/useAuthContext';
+import { UserWithId } from '../global/types';
 
-const CurrentUser = ({ userName = 'TestUser' }: { userName?: string }) => (
-  <div
-    css={(theme) =>
-      css`
-        color: ${theme.colors.accent2_dark};
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      `
+const getDisplayName = (user?: UserWithId) => {
+  const greeting = 'Hello';
+  if (user) {
+    if (user.firstName) {
+      return `${greeting}, ${user.firstName}`;
+    } else if (user.lastName) {
+      return `${greeting}, ${user.lastName}`;
+    } else if (user.email) {
+      return `${greeting}, ${user.email}`;
     }
-  >
-    <span
-      css={css`
-        padding-left: 5px;
-        padding-right: 5px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 142px;
-      `}
+  }
+  return greeting;
+};
+
+const CurrentUser = () => {
+  const { user } = useAuthContext();
+  return (
+    <div
+      css={(theme) =>
+        css`
+          color: ${theme.colors.accent2_dark};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        `
+      }
     >
-      Hello, {userName}
-    </span>
-  </div>
-);
+      <span
+        css={css`
+          padding-left: 5px;
+          padding-right: 5px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 142px;
+        `}
+      >
+        {getDisplayName(user)}
+      </span>
+    </div>
+  );
+};
 
 const StyledListLink = styled('a')`
   ${({ theme }: { theme: typeof defaultTheme }) => css`
-text-decoration: none;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  background: (theme.colors.white)};
-  padding: 6px 12px;
-  color: ${theme.colors.black};
-  border: 1px solid ${theme.colors.grey_3};
-  outline: none;
-  font-size: 16px;
-  cursor: pointer;
-  width: 100%;
-  &:hover {
-    background-color: ${theme.colors.grey_1};
-  }
-`}
+    text-decoration: none;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    background: (theme.colors.white)};
+    padding: 6px 12px;
+    color: ${theme.colors.black};
+    background-color: ${theme.colors.white};
+    border: 1px solid ${theme.colors.grey_3};
+    outline: none;
+    font-size: 16px;
+    cursor: pointer;
+    width: 100%;
+    &:hover {
+      background-color: ${theme.colors.grey_1};
+    }
+  `}
 `;
 
 const UserDropdown = () => {
@@ -76,6 +96,7 @@ const UserDropdown = () => {
     };
   }, [open]);
   const theme: typeof defaultTheme = useTheme();
+  const { logout } = useAuthContext();
   return (
     <div
       ref={node}
@@ -134,9 +155,8 @@ const UserDropdown = () => {
           <li>
             <StyledListLink href="/user">Profile & Token</StyledListLink>
           </li>
-          {/* TODO: implement logout */}
           <li>
-            <StyledListLink>Logout</StyledListLink>
+            <StyledListLink onClick={() => logout()}>Logout</StyledListLink>
           </li>
         </ul>
       )}

diff --git a/components/pages/login/index.tsx b/components/pages/login/index.tsx
@@ -46,6 +46,9 @@ const LoginButton = ({
           border: 1px solid ${theme.colors.accent};
           cursor: ${disabled ? 'not-allowed' : 'pointer'};
           opacity: ${disabled ? 0.4 : 1};
+          &:hover {
+            border: 1px solid ${theme.colors.accent_dark};
+          }
         `}
       >
         <span
@@ -68,6 +71,11 @@ const LoginButton = ({
               background-color: ${theme.colors.accent};
               color: ${theme.colors.white};
               ${theme.typography.button}
+              border-radius: 0 3px 3px 0;
+              &:hover {
+                background-color: ${theme.colors.accent_dark};
+                color: ${theme.colors.white};
+              }
             `
           }
         >
@@ -87,9 +95,9 @@ type ProviderType = {
 const providers: ProviderType[] = [
   { name: 'Google', path: 'google', icon: GoogleLogo },
   { name: 'ORCiD', path: 'orcid', icon: OrcidLogo },
-  { name: 'GitHub', path: '', icon: GitHubLogo },
+  { name: 'GitHub', path: 'github', icon: GitHubLogo },
   { name: 'Facebook', path: '', icon: FacebookLogo },
-  { name: 'LinkedIn', path: '', icon: LinkedInLogo },
+  { name: 'LinkedIn', path: 'linkedin', icon: LinkedInLogo },
 ];
 
 const LoginPage = () => {

diff --git a/components/pages/repository/RepoTable.tsx b/components/pages/repository/RepoTable.tsx
@@ -1,8 +1,10 @@
 import { css } from '@emotion/core';
 import dynamic from 'next/dynamic';
+import urlJoin from 'url-join';
 
 import { PageContentProps } from './index';
 import defaultTheme from '../../theme';
+import { getConfig } from '../../../global/config';
 
 const Table = dynamic(
   () => import('@arranger/components/dist/Arranger').then((comp) => comp.Table),
@@ -203,13 +205,16 @@ const getTableStyle = (theme: typeof defaultTheme) => css`
 `;
 
 const RepoTable = (props: PageContentProps) => {
+  const { NEXT_PUBLIC_ARRANGER_API, NEXT_PUBLIC_ARRANGER_PROJECT_ID } = getConfig();
+
   return (
     <div css={(theme) => getTableStyle(theme)}>
       <Table
         {...props}
         showFilterInput={false}
         columnDropdownText={'Columns'}
         exportTSVText={'Download'}
+        downloadUrl={urlJoin(NEXT_PUBLIC_ARRANGER_API, NEXT_PUBLIC_ARRANGER_PROJECT_ID, 'download')}
       />
     </div>
   );