From a780b098b3ec71772fa55ec84533513efdbebc0e Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Sun, 7 Mar 2021 13:53:39 -0500 Subject: [PATCH 01/19] =?UTF-8?q?=F0=9F=94=A7=20add=20optional=20assetPref?= =?UTF-8?q?ix=20for=20installer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Dockerfile | 5 +- components/Link.tsx | 12 +++- components/NavBar.tsx | 98 +++++++++++++++++---------------- components/UserDropdown.tsx | 5 +- global/config.ts | 2 + global/utils/getInternalLink.ts | 8 +++ next.config.js | 2 + pages/_app.tsx | 3 +- pages/logged-in.tsx | 3 +- 9 files changed, 86 insertions(+), 52 deletions(-) create mode 100644 global/utils/getInternalLink.ts diff --git a/Dockerfile b/Dockerfile index 70ac83c4..51c9420a 100644 --- 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/Link.tsx b/components/Link.tsx index 50aac79f..27c87249 100644 --- 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,18 @@ 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 = ({ path, children }: { path: string; children: React.ReactNode }) => { + return ( + + {children} + + ); +}; + export default StyledLink; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index d1fbd163..5b0f3094 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -5,7 +5,7 @@ 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'; const NavBar: React.ComponentType = ({ labName = 'Data Management System', labIcon }) => { const { token } = useAuthContext(); @@ -32,28 +32,29 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', cursor: pointer; `} > - css` - display: flex; - align-items: center; - text-decoration: none; - ${theme.typography.heading}; - color: ${theme.colors.accent_dark}; - `} - > - {labIcon || } - {/* set to default until labname config is implemented */} - {labName && ( - - {labName} - - )} - + + css` + display: flex; + align-items: center; + text-decoration: none; + ${theme.typography.heading}; + color: ${theme.colors.accent_dark}; + `} + > + {labIcon || } + {/* set to default until labname config is implemented */} + {labName && ( + + {labName} + + )} + +
= ({ labName = 'Data Management System', border-right: 2px solid ${theme.colors.white}; `} > - 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 - + + css` + display: flex; + flex: 1; + height: 100%; + justify-content: center; + align-items: center; + text-decoration: none; + color: ${theme.colors.accent2_dark}; + cursor: pointer; + `} + > + Data Explorer + +
{token ? (
= ({ labName = 'Data Management System', justify-content: center; `} > - css` - width: 70px; - ${theme.typography.button}; - line-height: 20px; - `} - href="/login" - > - Log in - + + css` + width: 70px; + ${theme.typography.button}; + line-height: 20px; + `} + > + Log in + +
)} diff --git a/components/UserDropdown.tsx b/components/UserDropdown.tsx index 9acf44f5..e4172540 100644 --- a/components/UserDropdown.tsx +++ b/components/UserDropdown.tsx @@ -7,6 +7,7 @@ import defaultTheme from './theme'; import { Avatar, ChevronDown } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; import { UserWithId } from '../global/types'; +import { InternalLink as Link } from './Link'; const getDisplayName = (user?: UserWithId) => { const greeting = 'Hello'; @@ -153,7 +154,9 @@ const UserDropdown = () => { `} >
  • - Profile & Token + + Profile & Token +
  • logout()}>Logout diff --git a/global/config.ts b/global/config.ts index 784b0b36..2a90103a 100644 --- a/global/config.ts +++ b/global/config.ts @@ -13,6 +13,7 @@ export const getConfig = () => { NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD: publicConfig.NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD || '', NEXT_PUBLIC_ARRANGER_INDEX: publicConfig.NEXT_PUBLIC_ARRANGER_INDEX || '', NEXT_PUBLIC_ARRANGER_API: publicConfig.NEXT_PUBLIC_ARRANGER_API || 'http://localhost:5050', + NEXT_PUBLIC_BASE_PATH: publicConfig.NEXT_PUBLIC_BASE_PATH || '', } as { NEXT_PUBLIC_EGO_API_ROOT: string; NEXT_PUBLIC_EGO_CLIENT_ID: string; @@ -21,5 +22,6 @@ export const getConfig = () => { NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD: string; NEXT_PUBLIC_ARRANGER_INDEX: string; NEXT_PUBLIC_ARRANGER_API: string; + NEXT_PUBLIC_BASE_PATH: string; }; }; diff --git a/global/utils/getInternalLink.ts b/global/utils/getInternalLink.ts new file mode 100644 index 00000000..5d791035 --- /dev/null +++ b/global/utils/getInternalLink.ts @@ -0,0 +1,8 @@ +import urlJoin from 'url-join'; + +import { getConfig } from '../config'; + +export default ({ path }: { path: string }) => { + const { NEXT_PUBLIC_BASE_PATH } = getConfig(); + return urlJoin(NEXT_PUBLIC_BASE_PATH, path); +}; diff --git a/next.config.js b/next.config.js index ee6f3f7f..8c0da582 100644 --- a/next.config.js +++ b/next.config.js @@ -9,5 +9,7 @@ module.exports = withCSS({ NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD: process.env.NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD, NEXT_PUBLIC_ARRANGER_INDEX: process.env.NEXT_PUBLIC_ARRANGER_INDEX, NEXT_PUBLIC_ARRANGER_API: process.env.NEXT_PUBLIC_ARRANGER_API_URL, + NEXT_PUBLIC_BASE_PATH: process.env.ASSET_PREFIX, }, + assetPrefix: process.env.ASSET_PREFIX || '', }); diff --git a/pages/_app.tsx b/pages/_app.tsx index 0ebe15a2..7f859933 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -5,6 +5,7 @@ import { EGO_JWT_KEY } from '../global/utils/constants'; import { PageWithConfig } from '../global/utils/pages/types'; import { useEffect, useState } from 'react'; import Router from 'next/router'; +import getInternalLink from '../global/utils/getInternalLink'; const DMSApp = ({ Component, @@ -18,7 +19,7 @@ const DMSApp = ({ const egoJwt = localStorage.getItem(EGO_JWT_KEY) || undefined; setInitialToken(egoJwt); if (!Component.isPublic && !egoJwt) { - Router.push('/login'); + Router.push(getInternalLink({ path: 'login' })); } }); diff --git a/pages/logged-in.tsx b/pages/logged-in.tsx index 04b1f864..8e022c51 100644 --- a/pages/logged-in.tsx +++ b/pages/logged-in.tsx @@ -8,6 +8,7 @@ import { EGO_JWT_KEY } from '../global/utils/constants'; import Router from 'next/router'; import { isValidJwt } from '../global/utils/egoTokenUtils'; import PageLayout from '../components/PageLayout'; +import getInternalLink from '../global/utils/getInternalLink'; const fetchEgoToken = () => { const { NEXT_PUBLIC_EGO_API_ROOT, NEXT_PUBLIC_EGO_CLIENT_ID } = getConfig(); @@ -39,7 +40,7 @@ const fetchEgoToken = () => { .catch((err) => { console.warn(err); localStorage.removeItem(EGO_JWT_KEY); - Router.push('/login'); + Router.push(getInternalLink({ path: 'login' })); }); }; From a8c4c337d29968b43e5fcc2ab836ef83c4577dd4 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Mon, 8 Mar 2021 10:03:44 -0500 Subject: [PATCH 02/19] fix links --- components/Link.tsx | 10 ---- components/NavBar.tsx | 100 ++++++++++++++++---------------- components/UserDropdown.tsx | 9 +-- global/hooks/useAuthContext.tsx | 3 +- next.config.js | 2 + pages/logged-in.tsx | 2 +- 6 files changed, 59 insertions(+), 67 deletions(-) diff --git a/components/Link.tsx b/components/Link.tsx index 27c87249..8e167a91 100644 --- a/components/Link.tsx +++ b/components/Link.tsx @@ -1,9 +1,7 @@ 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` @@ -38,12 +36,4 @@ export const StyledLinkAsButton = styled(StyledLink)` `} `; -export const InternalLink = ({ path, children }: { path: string; children: React.ReactNode }) => { - return ( - - {children} - - ); -}; - export default StyledLink; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 5b0f3094..29ac80a7 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -5,7 +5,8 @@ import UserDropdown from './UserDropdown'; import defaultTheme from './theme'; import { OvertureLogo } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; -import { StyledLinkAsButton, InternalLink as Link } from './Link'; +import { StyledLinkAsButton } from './Link'; +import getInternalLink from '../global/utils/getInternalLink'; const NavBar: React.ComponentType = ({ labName = 'Data Management System', labIcon }) => { const { token } = useAuthContext(); @@ -32,29 +33,28 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', cursor: pointer; `} > - - css` - display: flex; - align-items: center; - text-decoration: none; - ${theme.typography.heading}; - color: ${theme.colors.accent_dark}; - `} - > - {labIcon || } - {/* set to default until labname config is implemented */} - {labName && ( - - {labName} - - )} - - + css` + display: flex; + align-items: center; + text-decoration: none; + ${theme.typography.heading}; + color: ${theme.colors.accent_dark}; + `} + > + {labIcon || } + {/* set to default until labname config is implemented */} + {labName && ( + + {labName} + + )} + {token ? (
    = ({ labName = 'Data Management System', justify-content: center; `} > - - css` - width: 70px; - ${theme.typography.button}; - line-height: 20px; - `} - > - Log in - - + css` + width: 70px; + ${theme.typography.button}; + line-height: 20px; + `} + > + Log in +
    )} diff --git a/components/UserDropdown.tsx b/components/UserDropdown.tsx index e4172540..4c58a725 100644 --- a/components/UserDropdown.tsx +++ b/components/UserDropdown.tsx @@ -7,7 +7,8 @@ import defaultTheme from './theme'; import { Avatar, ChevronDown } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; import { UserWithId } from '../global/types'; -import { InternalLink as Link } from './Link'; +import Link from 'next/link'; +import getInternalLink from '../global/utils/getInternalLink'; const getDisplayName = (user?: UserWithId) => { const greeting = 'Hello'; @@ -154,9 +155,9 @@ const UserDropdown = () => { `} >
  • - - Profile & Token - + + Profile & Token +
  • logout()}>Logout diff --git a/global/hooks/useAuthContext.tsx b/global/hooks/useAuthContext.tsx index e3addeca..a9b58130 100644 --- a/global/hooks/useAuthContext.tsx +++ b/global/hooks/useAuthContext.tsx @@ -4,6 +4,7 @@ import { useRouter } from 'next/router'; import { EGO_JWT_KEY } from '../utils/constants'; import { decodeToken, extractUser, isValidJwt } from '../utils/egoTokenUtils'; import { UserWithId } from '../../global/types'; +import getInternalLink from '../utils/getInternalLink'; type T_AuthContext = { token?: string; @@ -38,7 +39,7 @@ export const AuthProvider = ({ const logout = () => { removeToken(); - router.push('/repository'); + router.push(getInternalLink({ path: 'repository' })); }; if (token !== egoJwt) { diff --git a/next.config.js b/next.config.js index 8c0da582..550a1871 100644 --- a/next.config.js +++ b/next.config.js @@ -9,6 +9,8 @@ module.exports = withCSS({ NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD: process.env.NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD, NEXT_PUBLIC_ARRANGER_INDEX: process.env.NEXT_PUBLIC_ARRANGER_INDEX, NEXT_PUBLIC_ARRANGER_API: process.env.NEXT_PUBLIC_ARRANGER_API_URL, + // using ASSET_PREFIX for the public runtime BASE_PATH because basePath in the top level config was not working + // with the dms reverse proxy setup NEXT_PUBLIC_BASE_PATH: process.env.ASSET_PREFIX, }, assetPrefix: process.env.ASSET_PREFIX || '', diff --git a/pages/logged-in.tsx b/pages/logged-in.tsx index 8e022c51..27b6187d 100644 --- a/pages/logged-in.tsx +++ b/pages/logged-in.tsx @@ -32,7 +32,7 @@ const fetchEgoToken = () => { .then((jwt) => { if (isValidJwt(jwt)) { localStorage.setItem(EGO_JWT_KEY, jwt); - setTimeout(() => Router.push('/repository'), 2000); + setTimeout(() => Router.push(getInternalLink({ path: 'repository' })), 2000); } else { throw new Error('Invalid jwt, cannot login.'); } From 924ce294de5de0a596a49dde8eb7b6f5f6a7f558 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Mon, 8 Mar 2021 13:24:46 -0500 Subject: [PATCH 03/19] =?UTF-8?q?=F0=9F=94=A7=20Add=20arranger=20admin=20u?= =?UTF-8?q?i=20url=20to=20config?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pages/repository/getConfigError.tsx | 6 ++---- global/config.ts | 2 ++ next.config.js | 1 + 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/components/pages/repository/getConfigError.tsx b/components/pages/repository/getConfigError.tsx index 862ee431..8ac2d03c 100644 --- a/components/pages/repository/getConfigError.tsx +++ b/components/pages/repository/getConfigError.tsx @@ -9,11 +9,9 @@ import { getConfig } from '../../../global/config'; import { Project } from './'; const ArrangerAdminUILink = () => { - const { NEXT_PUBLIC_ARRANGER_API } = getConfig(); - const splitApi: string[] = NEXT_PUBLIC_ARRANGER_API.split('//'); - const adminUiUrl: string = [splitApi[0], '//ui.', splitApi[1]].join(''); + const { NEXT_PUBLIC_ARRANGER_ADMIN_UI } = getConfig(); return ( - + Arranger Admin UI ); diff --git a/global/config.ts b/global/config.ts index 2a90103a..fe40aa17 100644 --- a/global/config.ts +++ b/global/config.ts @@ -13,6 +13,7 @@ export const getConfig = () => { NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD: publicConfig.NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD || '', NEXT_PUBLIC_ARRANGER_INDEX: publicConfig.NEXT_PUBLIC_ARRANGER_INDEX || '', NEXT_PUBLIC_ARRANGER_API: publicConfig.NEXT_PUBLIC_ARRANGER_API || 'http://localhost:5050', + NEXT_PUBLIC_ARRANGER_ADMIN_UI: publicConfig.NEXT_PUBLIC_ARRANGER_ADMIN_UI, NEXT_PUBLIC_BASE_PATH: publicConfig.NEXT_PUBLIC_BASE_PATH || '', } as { NEXT_PUBLIC_EGO_API_ROOT: string; @@ -22,6 +23,7 @@ export const getConfig = () => { NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD: string; NEXT_PUBLIC_ARRANGER_INDEX: string; NEXT_PUBLIC_ARRANGER_API: string; + NEXT_PUBLIC_ARRANGER_ADMIN_UI: string; NEXT_PUBLIC_BASE_PATH: string; }; }; diff --git a/next.config.js b/next.config.js index 550a1871..98441130 100644 --- a/next.config.js +++ b/next.config.js @@ -9,6 +9,7 @@ module.exports = withCSS({ NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD: process.env.NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD, NEXT_PUBLIC_ARRANGER_INDEX: process.env.NEXT_PUBLIC_ARRANGER_INDEX, NEXT_PUBLIC_ARRANGER_API: process.env.NEXT_PUBLIC_ARRANGER_API_URL, + NEXT_PUBLIC_ARRANGER_ADMIN_UI: process.env.NEXT_PUBLIC_ARRANGER_ADMIN_UI_URL, // using ASSET_PREFIX for the public runtime BASE_PATH because basePath in the top level config was not working // with the dms reverse proxy setup NEXT_PUBLIC_BASE_PATH: process.env.ASSET_PREFIX, From b0624285b36d9eaa989b8844f10c4d9acb90ce07 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Mon, 8 Mar 2021 15:21:52 -0500 Subject: [PATCH 04/19] Use next/link --- components/Link.tsx | 8 +++ components/NavBar.tsx | 99 +++++++++++++++++++------------------ components/UserDropdown.tsx | 10 ++-- 3 files changed, 65 insertions(+), 52 deletions(-) diff --git a/components/Link.tsx b/components/Link.tsx index 8e167a91..1b2106cc 100644 --- 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` @@ -36,4 +38,10 @@ export const StyledLinkAsButton = styled(StyledLink)` `} `; +export const InternalLink = ({ children, path }: { children: React.ReactNode; path: string }) => ( + + {children} + +); + export default StyledLink; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 29ac80a7..585e66f8 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -5,7 +5,7 @@ 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 getInternalLink from '../global/utils/getInternalLink'; const NavBar: React.ComponentType = ({ labName = 'Data Management System', labIcon }) => { @@ -33,28 +33,29 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', cursor: pointer; `} > - css` - display: flex; - align-items: center; - text-decoration: none; - ${theme.typography.heading}; - color: ${theme.colors.accent_dark}; - `} - > - {labIcon || } - {/* set to default until labname config is implemented */} - {labName && ( - - {labName} - - )} - + + css` + display: flex; + align-items: center; + text-decoration: none; + ${theme.typography.heading}; + color: ${theme.colors.accent_dark}; + `} + > + {labIcon || } + {/* set to default until labname config is implemented */} + {labName && ( + + {labName} + + )} + + {token ? (
    = ({ labName = 'Data Management System', justify-content: center; `} > - css` - width: 70px; - ${theme.typography.button}; - line-height: 20px; - `} - > - Log in - + + css` + width: 70px; + ${theme.typography.button}; + line-height: 20px; + `} + > + Log in + +
    )} diff --git a/components/UserDropdown.tsx b/components/UserDropdown.tsx index 4c58a725..238bcca4 100644 --- a/components/UserDropdown.tsx +++ b/components/UserDropdown.tsx @@ -7,8 +7,8 @@ import defaultTheme from './theme'; import { Avatar, ChevronDown } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; import { UserWithId } from '../global/types'; -import Link from 'next/link'; import getInternalLink from '../global/utils/getInternalLink'; +import { InternalLink as Link } from './Link'; const getDisplayName = (user?: UserWithId) => { const greeting = 'Hello'; @@ -155,9 +155,11 @@ const UserDropdown = () => { `} >
  • - - Profile & Token - + + + Profile & Token + +
  • logout()}>Logout From 760858dc7e44442e8558723c9e0005c5ad6ff654 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Wed, 10 Mar 2021 14:25:20 -0500 Subject: [PATCH 05/19] =?UTF-8?q?=F0=9F=92=84=20hide=20facebook=20login?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pages/login/index.tsx | 3 ++- global/types.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/pages/login/index.tsx b/components/pages/login/index.tsx index 123a5179..77873b7d 100644 --- a/components/pages/login/index.tsx +++ b/components/pages/login/index.tsx @@ -96,7 +96,8 @@ const providers: ProviderType[] = [ { name: 'Google', path: 'google', icon: GoogleLogo }, { name: 'ORCiD', path: 'orcid', icon: OrcidLogo }, { name: 'GitHub', path: 'github', icon: GitHubLogo }, - { name: 'Facebook', path: '', icon: FacebookLogo }, + // Facebook will be hidden until provider implementation is fixed in Ego https://github.com/overture-stack/ego/issues/555 + // { name: 'Facebook', path: '', icon: FacebookLogo }, { name: 'LinkedIn', path: 'linkedin', icon: LinkedInLogo }, ]; diff --git a/global/types.ts b/global/types.ts index 10631393..54af2cfb 100644 --- a/global/types.ts +++ b/global/types.ts @@ -18,7 +18,7 @@ export enum Language { export enum ProviderType { GOOGLE = 'GOOGLE', - FACEBOOK = 'FACEBOOK', + // FACEBOOK = 'FACEBOOK', // hide from allowed types, related to https://github.com/overture-stack/ego/issues/555 GITHUB = 'GITHUB', LINKEDIN = 'LINKEDIN', ORCID = 'ORCID', From ba11a717fa4719151b03f8fdc63959cb13894c4a Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Wed, 10 Mar 2021 15:17:16 -0500 Subject: [PATCH 06/19] =?UTF-8?q?=F0=9F=92=84=20Set=20max=20width=20on=20t?= =?UTF-8?q?able=20container?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pages/repository/PageContent.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/pages/repository/PageContent.tsx b/components/pages/repository/PageContent.tsx index 021ce8ec..caf5832e 100644 --- a/components/pages/repository/PageContent.tsx +++ b/components/pages/repository/PageContent.tsx @@ -18,6 +18,8 @@ export const Collapsible = styled('div')` `} `; +const FACET_MAX_WIDTH = 270; + const PageContent = (props: PageContentProps) => { return (
    { flex: 3; flex-direction: column; min-width: 250px; - max-width: 270px; + max-width: ${FACET_MAX_WIDTH}px; background-color: ${theme.colors.white}; z-index: 1; ${theme.shadow.right}; @@ -57,6 +59,7 @@ const PageContent = (props: PageContentProps) => { css={css` flex: 8.5; margin: 0 15px 0 15px; + max-width: calc(100vw - ${FACET_MAX_WIDTH + 10}px); `} > From 1acd0f591f98d900c6f7d864174f064083b412f1 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Wed, 10 Mar 2021 15:52:01 -0500 Subject: [PATCH 07/19] remove facebook from icons --- components/pages/user/AuthenticatedBadge.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/pages/user/AuthenticatedBadge.tsx b/components/pages/user/AuthenticatedBadge.tsx index 29a7810b..19a347c7 100644 --- a/components/pages/user/AuthenticatedBadge.tsx +++ b/components/pages/user/AuthenticatedBadge.tsx @@ -17,7 +17,6 @@ import { const providerIcons: { [k in ProviderType]: React.ElementType } = { GOOGLE: GoogleLogo, - FACEBOOK: FacebookLogo, GITHUB: GitHubLogo, LINKEDIN: LinkedInLogo, ORCID: OrcidLogo, From acb2b2f85479b050d9be069d6dbd164eec8a8ed7 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Wed, 10 Mar 2021 17:24:34 -0500 Subject: [PATCH 08/19] =?UTF-8?q?=F0=9F=92=84=20ui=20feedback=20and=20refa?= =?UTF-8?q?ctor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Footer.tsx | 5 ++- components/NavBar.tsx | 29 +++++++++++------ components/UserDropdown.tsx | 32 +++++++++---------- .../pages/{repository => explorer}/Facets.tsx | 0 .../{repository => explorer}/PageContent.tsx | 0 .../{repository => explorer}/QueryBar.tsx | 0 .../{repository => explorer}/RepoTable.tsx | 0 .../getConfigError.tsx | 4 +-- .../pages/{repository => explorer}/index.tsx | 0 .../{repository => explorer}/sqonTypes.ts | 0 components/pages/login/index.tsx | 1 + global/hooks/useAuthContext.tsx | 4 +-- global/utils/constants.ts | 4 +++ pages/_app.tsx | 4 +-- pages/{repository => explorer}/index.tsx | 8 ++--- pages/index.tsx | 4 +-- pages/logged-in.tsx | 6 ++-- 17 files changed, 60 insertions(+), 41 deletions(-) rename components/pages/{repository => explorer}/Facets.tsx (100%) rename components/pages/{repository => explorer}/PageContent.tsx (100%) rename components/pages/{repository => explorer}/QueryBar.tsx (100%) rename components/pages/{repository => explorer}/RepoTable.tsx (100%) rename components/pages/{repository => explorer}/getConfigError.tsx (98%) rename components/pages/{repository => explorer}/index.tsx (100%) rename components/pages/{repository => explorer}/sqonTypes.ts (100%) rename pages/{repository => explorer}/index.tsx (57%) diff --git a/components/Footer.tsx b/components/Footer.tsx index b5f626fc..619e6765 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -53,12 +53,15 @@ const Footer = () => { line-height: 24px; font-weight: normal; padding-right: 10px; + padding-left: 5px; ` } > powered by - + + +
    ); }; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 585e66f8..3515c61c 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -1,15 +1,25 @@ 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, InternalLink as Link } from './Link'; -import getInternalLink from '../global/utils/getInternalLink'; +import { useTheme } from 'emotion-theming'; +import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; const NavBar: React.ComponentType = ({ 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 (
    css` @@ -33,7 +43,7 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', cursor: pointer; `} > - + css` display: flex; @@ -69,15 +79,15 @@ const NavBar: React.ComponentType = ({ 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}; `} > - + css` display: flex; @@ -86,8 +96,9 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', justify-content: center; align-items: center; text-decoration: none; - color: ${theme.colors.accent2_dark}; + color: ${theme.colors.accent_dark}; cursor: pointer; + ${router.pathname === EXPLORER_PATH ? activeLinkStyle : ''} `} > Data Explorer @@ -100,9 +111,9 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', 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}; } `} > @@ -117,7 +128,7 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', justify-content: center; `} > - + css` width: 70px; diff --git a/components/UserDropdown.tsx b/components/UserDropdown.tsx index 238bcca4..e2a71e01 100644 --- a/components/UserDropdown.tsx +++ b/components/UserDropdown.tsx @@ -7,8 +7,9 @@ import defaultTheme from './theme'; import { Avatar, ChevronDown } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; import { UserWithId } from '../global/types'; -import getInternalLink from '../global/utils/getInternalLink'; import { InternalLink as Link } from './Link'; +import { useRouter } from 'next/router'; +import { USER_PATH } from '../global/utils/constants'; const getDisplayName = (user?: UserWithId) => { const greeting = 'Hello'; @@ -28,14 +29,11 @@ const CurrentUser = () => { const { user } = useAuthContext(); return (
    - css` - color: ${theme.colors.accent2_dark}; - display: flex; - align-items: center; - justify-content: center; - ` - } + css={css` + display: flex; + align-items: center; + justify-content: center; + `} > { }, [open]); const theme: typeof defaultTheme = useTheme(); const { logout } = useAuthContext(); + const router = useRouter(); + const fillColor = + router.pathname === USER_PATH ? theme.colors.accent2_dark : theme.colors.accent_dark; + return (
    { onClick={() => setOpen(!open)} > { {open ? ( { /> ) : ( { `} >
  • - - - Profile & Token - + + Profile & Token
  • diff --git a/components/pages/repository/Facets.tsx b/components/pages/explorer/Facets.tsx similarity index 100% rename from components/pages/repository/Facets.tsx rename to components/pages/explorer/Facets.tsx diff --git a/components/pages/repository/PageContent.tsx b/components/pages/explorer/PageContent.tsx similarity index 100% rename from components/pages/repository/PageContent.tsx rename to components/pages/explorer/PageContent.tsx diff --git a/components/pages/repository/QueryBar.tsx b/components/pages/explorer/QueryBar.tsx similarity index 100% rename from components/pages/repository/QueryBar.tsx rename to components/pages/explorer/QueryBar.tsx diff --git a/components/pages/repository/RepoTable.tsx b/components/pages/explorer/RepoTable.tsx similarity index 100% rename from components/pages/repository/RepoTable.tsx rename to components/pages/explorer/RepoTable.tsx diff --git a/components/pages/repository/getConfigError.tsx b/components/pages/explorer/getConfigError.tsx similarity index 98% rename from components/pages/repository/getConfigError.tsx rename to components/pages/explorer/getConfigError.tsx index 8ac2d03c..8c8a9a58 100644 --- a/components/pages/repository/getConfigError.tsx +++ b/components/pages/explorer/getConfigError.tsx @@ -2,11 +2,11 @@ import { ReactNode } from 'react'; import { css } from '@emotion/core'; import { Checkmark, Warning } from '../../theme/icons'; -import theme from '../../theme/'; +import theme from '../../theme'; import StyledLink from '../../Link'; import { getConfig } from '../../../global/config'; -import { Project } from './'; +import { Project } from '.'; const ArrangerAdminUILink = () => { const { NEXT_PUBLIC_ARRANGER_ADMIN_UI } = getConfig(); diff --git a/components/pages/repository/index.tsx b/components/pages/explorer/index.tsx similarity index 100% rename from components/pages/repository/index.tsx rename to components/pages/explorer/index.tsx diff --git a/components/pages/repository/sqonTypes.ts b/components/pages/explorer/sqonTypes.ts similarity index 100% rename from components/pages/repository/sqonTypes.ts rename to components/pages/explorer/sqonTypes.ts diff --git a/components/pages/login/index.tsx b/components/pages/login/index.tsx index 123a5179..fc7b8071 100644 --- a/components/pages/login/index.tsx +++ b/components/pages/login/index.tsx @@ -142,6 +142,7 @@ const LoginPage = () => { ${theme.typography.heading} color: ${theme.colors.accent_dark}; margin: 10px 0; + font-weight: normal; `} > Please choose one of the following log in methods to access your API token for data diff --git a/global/hooks/useAuthContext.tsx b/global/hooks/useAuthContext.tsx index a9b58130..9a163da2 100644 --- a/global/hooks/useAuthContext.tsx +++ b/global/hooks/useAuthContext.tsx @@ -1,7 +1,7 @@ import React, { createContext, useState } from 'react'; import { useRouter } from 'next/router'; -import { EGO_JWT_KEY } from '../utils/constants'; +import { EGO_JWT_KEY, EXPLORER_PATH } from '../utils/constants'; import { decodeToken, extractUser, isValidJwt } from '../utils/egoTokenUtils'; import { UserWithId } from '../../global/types'; import getInternalLink from '../utils/getInternalLink'; @@ -39,7 +39,7 @@ export const AuthProvider = ({ const logout = () => { removeToken(); - router.push(getInternalLink({ path: 'repository' })); + router.push(getInternalLink({ path: EXPLORER_PATH })); }; if (token !== egoJwt) { diff --git a/global/utils/constants.ts b/global/utils/constants.ts index d23f60b1..59a5add4 100644 --- a/global/utils/constants.ts +++ b/global/utils/constants.ts @@ -4,3 +4,7 @@ const { NEXT_PUBLIC_EGO_API_ROOT } = getConfig(); export const EGO_JWT_KEY = 'EGO_JWT'; export const EGO_API_KEY_ENDPOINT = `${NEXT_PUBLIC_EGO_API_ROOT}/o/api_key`; + +export const EXPLORER_PATH = '/explorer'; +export const USER_PATH = '/user'; +export const LOGIN_PATH = '/login'; diff --git a/pages/_app.tsx b/pages/_app.tsx index 7f859933..ae0a70c8 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,7 +1,7 @@ import Root from '../components/Root'; import { AppContext } from 'next/app'; -import { EGO_JWT_KEY } from '../global/utils/constants'; +import { EGO_JWT_KEY, LOGIN_PATH } from '../global/utils/constants'; import { PageWithConfig } from '../global/utils/pages/types'; import { useEffect, useState } from 'react'; import Router from 'next/router'; @@ -19,7 +19,7 @@ const DMSApp = ({ const egoJwt = localStorage.getItem(EGO_JWT_KEY) || undefined; setInitialToken(egoJwt); if (!Component.isPublic && !egoJwt) { - Router.push(getInternalLink({ path: 'login' })); + Router.push(getInternalLink({ path: LOGIN_PATH })); } }); diff --git a/pages/repository/index.tsx b/pages/explorer/index.tsx similarity index 57% rename from pages/repository/index.tsx rename to pages/explorer/index.tsx index 972f861e..f54b4b8c 100644 --- a/pages/repository/index.tsx +++ b/pages/explorer/index.tsx @@ -1,14 +1,14 @@ import React from 'react'; -import Repository from '../../components/pages/repository'; +import Explorer from '../../components/pages/explorer'; import { createPage } from '../../global/utils/pages'; -const RepositoryPage = createPage({ +const ExplorerPage = createPage({ getInitialProps: async ({ query, egoJwt }) => { return { query, egoJwt }; }, isPublic: true, })(() => { - return ; + return ; }); -export default RepositoryPage; +export default ExplorerPage; diff --git a/pages/index.tsx b/pages/index.tsx index 658c4b97..1f988c47 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import RepositoryPage from './repository'; +import ExplorerPage from './explorer'; import { createPage } from '../global/utils/pages'; const HomePage = createPage({ getInitialProps: async () => {}, isPublic: true, })(() => { - return ; + return ; }); export default HomePage; diff --git a/pages/logged-in.tsx b/pages/logged-in.tsx index 27b6187d..9c4548ab 100644 --- a/pages/logged-in.tsx +++ b/pages/logged-in.tsx @@ -4,7 +4,7 @@ import { css } from '@emotion/core'; import { getConfig } from '../global/config'; import { createPage } from '../global/utils/pages'; -import { EGO_JWT_KEY } from '../global/utils/constants'; +import { EGO_JWT_KEY, EXPLORER_PATH, LOGIN_PATH } from '../global/utils/constants'; import Router from 'next/router'; import { isValidJwt } from '../global/utils/egoTokenUtils'; import PageLayout from '../components/PageLayout'; @@ -32,7 +32,7 @@ const fetchEgoToken = () => { .then((jwt) => { if (isValidJwt(jwt)) { localStorage.setItem(EGO_JWT_KEY, jwt); - setTimeout(() => Router.push(getInternalLink({ path: 'repository' })), 2000); + setTimeout(() => Router.push(getInternalLink({ path: EXPLORER_PATH })), 2000); } else { throw new Error('Invalid jwt, cannot login.'); } @@ -40,7 +40,7 @@ const fetchEgoToken = () => { .catch((err) => { console.warn(err); localStorage.removeItem(EGO_JWT_KEY); - Router.push(getInternalLink({ path: 'login' })); + Router.push(getInternalLink({ path: LOGIN_PATH })); }); }; From 591159825e53db836f5e5d23e15489e8b4ba5ac7 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Wed, 10 Mar 2021 21:14:44 -0500 Subject: [PATCH 09/19] Add favicon, page subtitles. move static dir to public/ --- components/Head.tsx | 17 ++++++++--- components/PageLayout.tsx | 32 +++++++++++--------- components/pages/explorer/index.tsx | 2 +- components/pages/login/index.tsx | 2 +- components/pages/user/index.tsx | 2 +- public/favicon.ico | Bin 15086 -> 0 bytes public/images/favicon.ico | Bin 0 -> 802 bytes {static => public/static}/avatar.svg | 0 {static => public/static}/checkmark.svg | 0 {static => public/static}/chevron-down.svg | 0 {static => public/static}/facebook.svg | 0 {static => public/static}/github.svg | 0 {static => public/static}/google.svg | 0 {static => public/static}/illustration.svg | 0 {static => public/static}/linkedin.svg | 0 {static => public/static}/logomark.svg | 0 {static => public/static}/orcid.svg | 0 {static => public/static}/overture-user.svg | 0 {static => public/static}/primary.svg | 0 public/vercel.svg | 4 --- 20 files changed, 34 insertions(+), 25 deletions(-) delete mode 100644 public/favicon.ico create mode 100644 public/images/favicon.ico rename {static => public/static}/avatar.svg (100%) rename {static => public/static}/checkmark.svg (100%) rename {static => public/static}/chevron-down.svg (100%) rename {static => public/static}/facebook.svg (100%) rename {static => public/static}/github.svg (100%) rename {static => public/static}/google.svg (100%) rename {static => public/static}/illustration.svg (100%) rename {static => public/static}/linkedin.svg (100%) rename {static => public/static}/logomark.svg (100%) rename {static => public/static}/orcid.svg (100%) rename {static => public/static}/overture-user.svg (100%) rename {static => public/static}/primary.svg (100%) delete mode 100644 public/vercel.svg diff --git a/components/Head.tsx b/components/Head.tsx index c5881318..db4d4e4a 100644 --- a/components/Head.tsx +++ b/components/Head.tsx @@ -1,15 +1,24 @@ import React from 'react'; import NextHead from 'next/head'; -export default function Head() { +const Head = () => { return ( - {/* TODO: need correct favicon link */} - + ); -} +}; + +export const PageHead = ({ subtitle }: { subtitle?: string }) => { + return ( + + Overture DMS{subtitle ? ` - ${subtitle}` : ''} + + ); +}; + +export default Head; diff --git a/components/PageLayout.tsx b/components/PageLayout.tsx index 986afe49..74acad5e 100644 --- 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 ( -
    css` - display: grid; - grid-template-rows: 50px 1fr; - min-height: 100vh; - ${theme.typography.regular} - color: ${theme.colors.black}; - `} - > - - {children} -
    -
    + <> + +
    css` + display: grid; + grid-template-rows: 50px 1fr; + min-height: 100vh; + ${theme.typography.regular} + color: ${theme.colors.black}; + `} + > + + {children} +
    +
    + ); }; diff --git a/components/pages/explorer/index.tsx b/components/pages/explorer/index.tsx index 0e2df98b..5a7b14da 100644 --- a/components/pages/explorer/index.tsx +++ b/components/pages/explorer/index.tsx @@ -99,7 +99,7 @@ const RepositoryPage = () => { }); return ( - + {ConfigError ? ( {ConfigError} ) : ( diff --git a/components/pages/login/index.tsx b/components/pages/login/index.tsx index fc7b8071..c74ea49e 100644 --- a/components/pages/login/index.tsx +++ b/components/pages/login/index.tsx @@ -102,7 +102,7 @@ const providers: ProviderType[] = [ const LoginPage = () => { return ( - +
    { const { user } = useAuthContext(); return ( - +
    css` diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 4965832f2c9b0605eaa189b7c7fb11124d24e48a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2 z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_ zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT} zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z zrOO{op^o*-AL_t(IjdfE?Pg7wKoqPFi z-?c9UT4=GT6>6c0jUk`}*pZm%LNUg$VB^M(kC+gCfQd$<(I}{FTp0oz2pSR-NiZmH z1uYa%5DP8P*DZbC_jO~NTI#GO^PO|%OlCd|{u9a6tSylmzsa)x20^3@I3|lCRQyGy zXnLViHce%4SRryWHgql;8|tN*RdfCuflQ=MbG1vSx!4B)fae1!dfmJqA9-4c3;@7# zejU00=3Xo@*7%QrD2m88w$u@r*nC8eR_#i5IwzH~=8ZxoS06+i$q{mnD z?cv+!yB}9tRd#lMXL{NN08rv`dYyNA=Yvf5NuDQVxgs3DcNzcyr9&~pM*rl1e{9JC z0Kl`fGy@_%KTN4jhP2iX$6hXuuc`>1I->BRGJLR35Rz(96ba;e|NXZ2-B(A3grsr` z06=@p8ffi#Am9Yy1OPB=%)Ws&cRhd}9Qv;HE7oli!!Q<)uKHVYts%)_L?{*9UvgQd z-e|OBM{q}?N0*bW^sg9WMO=b5<_bg?NN4kt`yQMi?74NdL}JL~muTS2xMuva$`Vhq&3Z(fnxUxdOoWG`EicNRE znk(<0+FA_78F!lD*I5BeH&&bqJX@w~R-%jr03gl^MpSmTdSvg@S{ofnC^7<6n&D|q zzz1i1&cPWUn6$F6_Cz@rWQ3~RMskEja6_Htb>#)uT|zBmvSVxpi!!-EC5cy68+U_@ zpwD-zmln-s&&>D1-5!|!c`e}$yD%Iio=Yt|BrC=!jjGhgKt(>;qC(O0m8!M_cPfga z0RW2ULsadkH~Dxw$sHh<%8SAs$2EO6t)#o)Z_I>;r0ok~`bIF#HSi*oU;sgr63y9l g(jJFiItu{s2W{j$?xS*5Z2$lO07*qoM6N<$g4{Y(eE - - \ No newline at end of file From ed6c03ccfaea34c76cd3b72da6495c8f8d9f4f54 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Wed, 10 Mar 2021 21:33:37 -0500 Subject: [PATCH 10/19] fix width on api info list --- components/pages/user/ApiTokenInfo.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/components/pages/user/ApiTokenInfo.tsx b/components/pages/user/ApiTokenInfo.tsx index b41cb171..19cda3a6 100644 --- a/components/pages/user/ApiTokenInfo.tsx +++ b/components/pages/user/ApiTokenInfo.tsx @@ -155,11 +155,7 @@ const ApiTokenInfo = () => { }, [token]); return ( -
    +

    css` @@ -232,6 +228,7 @@ const ApiTokenInfo = () => { justify-content: space-between; margin-bottom: 2rem; margin-top: 1rem; + max-width: 600px; `} >
    Date: Thu, 11 Mar 2021 09:17:19 -0500 Subject: [PATCH 11/19] fix facets height --- components/pages/explorer/Facets.tsx | 5 ++++- components/pages/explorer/PageContent.tsx | 1 - 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/pages/explorer/Facets.tsx b/components/pages/explorer/Facets.tsx index bc5c1e0c..9c6b28a8 100644 --- a/components/pages/explorer/Facets.tsx +++ b/components/pages/explorer/Facets.tsx @@ -10,6 +10,9 @@ const Aggregations = dynamic( ) as any; const getFacetStyles = (theme: typeof defaultTheme) => css` + height: 100vh; + overflow-y: scroll; + padding-bottom: 2rem; .input-range-wrapper div { ${theme.typography.label2} font-weight: bold; @@ -61,7 +64,7 @@ const getFacetStyles = (theme: typeof defaultTheme) => css` } &.collapsed { background-color: ${theme.colors.grey_2}; - margin: -5px -8px -6px -6px; + margin: -5px -8px -6px -7px; padding: 5px 8px 6px 6px; } & .title { diff --git a/components/pages/explorer/PageContent.tsx b/components/pages/explorer/PageContent.tsx index 021ce8ec..fd78f5b9 100644 --- a/components/pages/explorer/PageContent.tsx +++ b/components/pages/explorer/PageContent.tsx @@ -44,7 +44,6 @@ const PageContent = (props: PageContentProps) => { `} > -
    Date: Thu, 11 Mar 2021 10:41:25 -0500 Subject: [PATCH 12/19] hide worker image on smaller screen --- components/Footer.tsx | 4 ++++ components/pages/login/index.tsx | 32 +++++++++++++++++++++----------- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/components/Footer.tsx b/components/Footer.tsx index 619e6765..3e1dcad9 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -19,6 +19,10 @@ const Footer = () => { padding-right: 18px; ${theme.shadow.default}; z-index: 10; + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; `} > {
      { })}
    -
    css` - flex: 2; - background-color: ${theme.colors.primary}; - `} - >
    - +
    css` + flex: 1; + background-color: ${theme.colors.primary}; + `} + /> +
    + +
    From 314ffac55959f5d2200d08999c683941a121ad7b Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Thu, 11 Mar 2021 11:25:22 -0500 Subject: [PATCH 13/19] fix aggs, footer position. add base_path to favicon link --- components/Footer.tsx | 2 +- components/Head.tsx | 4 +++- components/pages/explorer/Facets.tsx | 2 -- components/pages/explorer/PageContent.tsx | 2 ++ 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/Footer.tsx b/components/Footer.tsx index 3e1dcad9..d5fa08b1 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -19,7 +19,7 @@ const Footer = () => { padding-right: 18px; ${theme.shadow.default}; z-index: 10; - position: absolute; + position: fixed; bottom: 0px; left: 0px; right: 0px; diff --git a/components/Head.tsx b/components/Head.tsx index db4d4e4a..8792666e 100644 --- a/components/Head.tsx +++ b/components/Head.tsx @@ -1,14 +1,16 @@ import React from 'react'; import NextHead from 'next/head'; +import { getConfig } from '../global/config'; const Head = () => { + const { NEXT_PUBLIC_BASE_PATH } = getConfig(); return ( - + ); }; diff --git a/components/pages/explorer/Facets.tsx b/components/pages/explorer/Facets.tsx index 9c6b28a8..27ca72a4 100644 --- a/components/pages/explorer/Facets.tsx +++ b/components/pages/explorer/Facets.tsx @@ -10,8 +10,6 @@ const Aggregations = dynamic( ) as any; const getFacetStyles = (theme: typeof defaultTheme) => css` - height: 100vh; - overflow-y: scroll; padding-bottom: 2rem; .input-range-wrapper div { ${theme.typography.label2} diff --git a/components/pages/explorer/PageContent.tsx b/components/pages/explorer/PageContent.tsx index ec29780e..e30203ce 100644 --- a/components/pages/explorer/PageContent.tsx +++ b/components/pages/explorer/PageContent.tsx @@ -43,6 +43,8 @@ const PageContent = (props: PageContentProps) => { background-color: ${theme.colors.white}; z-index: 1; ${theme.shadow.right}; + height: calc(100vh - 94px); + overflow-y: scroll; `} > From c0c44379f39d82753e8e94c94ab70a40fb66e0da Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Thu, 11 Mar 2021 11:45:18 -0500 Subject: [PATCH 14/19] fix overflow on table container. cleanup. --- components/Footer.tsx | 3 ++- components/NavBar.tsx | 4 ++-- components/pages/explorer/PageContent.tsx | 27 +++++++++-------------- global/utils/constants.ts | 6 +++++ 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/components/Footer.tsx b/components/Footer.tsx index d5fa08b1..eec7b15c 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -5,12 +5,13 @@ import defaultTheme from './theme'; import { OvertureLogoWithText } from './theme/icons'; import StyledLink from './Link'; +import { FOOTER_HEIGHT } from '../global/utils/constants'; const Footer = () => { return (
    css` - height: 47px; + height: ${FOOTER_HEIGHT}px; background-color: ${theme.colors.white}; border-top: 1px solid ${theme.colors.grey_3}; display: flex; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 3515c61c..a3d8ad35 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -8,7 +8,7 @@ import { OvertureLogo } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; import { StyledLinkAsButton, InternalLink as Link } from './Link'; import { useTheme } from 'emotion-theming'; -import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; +import { EXPLORER_PATH, LOGIN_PATH, NAVBAR_HEIGHT, USER_PATH } from '../global/utils/constants'; const NavBar: React.ComponentType = ({ labName = 'Data Management System', labIcon }) => { const { token } = useAuthContext(); @@ -25,7 +25,7 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', css={(theme: typeof defaultTheme) => css` display: flex; justify-content: space-between; - height: 50px; + height: ${NAVBAR_HEIGHT}px; background-color: ${theme.colors.white}; ${theme.shadow.default}; position: sticky; diff --git a/components/pages/explorer/PageContent.tsx b/components/pages/explorer/PageContent.tsx index e30203ce..40ed508f 100644 --- a/components/pages/explorer/PageContent.tsx +++ b/components/pages/explorer/PageContent.tsx @@ -1,24 +1,15 @@ import { css } from '@emotion/core'; -import { useTheme } from 'emotion-theming'; -import styled from '@emotion/styled'; - import RepoTable from './RepoTable'; import Facets from './Facets'; import QueryBar from './QueryBar'; import { PageContentProps } from './index'; -import defaultTheme from '../../theme'; -import Footer from '../../Footer'; - -export const Collapsible = styled('div')` - ${({ theme }: { theme: typeof defaultTheme }) => css` - border-top: 1px solid ${theme.colors.grey_2}; - height: 47px; - width: 100%; - `} -`; - -const FACET_MAX_WIDTH = 270; +import { + FACET_MAX_WIDTH, + FACET_MIN_WIDTH, + FOOTER_HEIGHT, + NAVBAR_HEIGHT, +} from '../../../global/utils/constants'; const PageContent = (props: PageContentProps) => { return ( @@ -38,12 +29,12 @@ const PageContent = (props: PageContentProps) => { css={(theme) => css` flex: 3; flex-direction: column; - min-width: 250px; + min-width: ${FACET_MIN_WIDTH}px; max-width: ${FACET_MAX_WIDTH}px; background-color: ${theme.colors.white}; z-index: 1; ${theme.shadow.right}; - height: calc(100vh - 94px); + height: calc(100vh - ${FOOTER_HEIGHT + NAVBAR_HEIGHT}px); overflow-y: scroll; `} > @@ -54,6 +45,8 @@ const PageContent = (props: PageContentProps) => { display: flex; flex-direction: column; width: 100%; + height: calc(100vh - ${FOOTER_HEIGHT + NAVBAR_HEIGHT}px); + overflow-y: scroll; `} >
    Date: Mon, 15 Mar 2021 16:40:32 -0400 Subject: [PATCH 15/19] =?UTF-8?q?=F0=9F=91=8C=20move=20dimension=20constan?= =?UTF-8?q?ts=20to=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Footer.tsx | 3 +-- components/NavBar.tsx | 4 ++-- components/pages/explorer/PageContent.tsx | 24 +++++++++++------------ components/theme/dimensions.ts | 20 +++++++++++++++++++ components/theme/index.ts | 2 ++ global/utils/constants.ts | 6 ------ 6 files changed, 36 insertions(+), 23 deletions(-) create mode 100644 components/theme/dimensions.ts diff --git a/components/Footer.tsx b/components/Footer.tsx index eec7b15c..16c4a860 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -5,13 +5,12 @@ import defaultTheme from './theme'; import { OvertureLogoWithText } from './theme/icons'; import StyledLink from './Link'; -import { FOOTER_HEIGHT } from '../global/utils/constants'; const Footer = () => { return (
    css` - height: ${FOOTER_HEIGHT}px; + height: ${theme.dimensions.footer.height}px; background-color: ${theme.colors.white}; border-top: 1px solid ${theme.colors.grey_3}; display: flex; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index a3d8ad35..bd1ef169 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -8,7 +8,7 @@ import { OvertureLogo } from './theme/icons'; import useAuthContext from '../global/hooks/useAuthContext'; import { StyledLinkAsButton, InternalLink as Link } from './Link'; import { useTheme } from 'emotion-theming'; -import { EXPLORER_PATH, LOGIN_PATH, NAVBAR_HEIGHT, USER_PATH } from '../global/utils/constants'; +import { EXPLORER_PATH, LOGIN_PATH, USER_PATH } from '../global/utils/constants'; const NavBar: React.ComponentType = ({ labName = 'Data Management System', labIcon }) => { const { token } = useAuthContext(); @@ -25,7 +25,7 @@ const NavBar: React.ComponentType = ({ labName = 'Data Management System', css={(theme: typeof defaultTheme) => css` display: flex; justify-content: space-between; - height: ${NAVBAR_HEIGHT}px; + height: ${theme.dimensions.navbar.height}px; background-color: ${theme.colors.white}; ${theme.shadow.default}; position: sticky; diff --git a/components/pages/explorer/PageContent.tsx b/components/pages/explorer/PageContent.tsx index 40ed508f..cea994fd 100644 --- a/components/pages/explorer/PageContent.tsx +++ b/components/pages/explorer/PageContent.tsx @@ -4,12 +4,6 @@ import Facets from './Facets'; import QueryBar from './QueryBar'; import { PageContentProps } from './index'; -import { - FACET_MAX_WIDTH, - FACET_MIN_WIDTH, - FOOTER_HEIGHT, - NAVBAR_HEIGHT, -} from '../../../global/utils/constants'; const PageContent = (props: PageContentProps) => { return ( @@ -29,31 +23,35 @@ const PageContent = (props: PageContentProps) => { css={(theme) => css` flex: 3; flex-direction: column; - min-width: ${FACET_MIN_WIDTH}px; - max-width: ${FACET_MAX_WIDTH}px; + min-width: ${theme.dimensions.facets.minWidth}px; + max-width: ${theme.dimensions.facets.maxWidth}px; background-color: ${theme.colors.white}; z-index: 1; ${theme.shadow.right}; - height: calc(100vh - ${FOOTER_HEIGHT + NAVBAR_HEIGHT}px); + height: calc( + 100vh - ${theme.dimensions.footer.height + theme.dimensions.navbar.height}px + ); overflow-y: scroll; `} >
    css` display: flex; flex-direction: column; width: 100%; - height: calc(100vh - ${FOOTER_HEIGHT + NAVBAR_HEIGHT}px); + height: calc( + 100vh - ${theme.dimensions.footer.height + theme.dimensions.navbar.height}px + ); overflow-y: scroll; `} >
    css` flex: 8.5; margin: 0 15px 0 15px; - max-width: calc(100vw - ${FACET_MAX_WIDTH + 10}px); + max-width: calc(100vw - ${theme.dimensions.facets.maxWidth + 10}px); `} > diff --git a/components/theme/dimensions.ts b/components/theme/dimensions.ts new file mode 100644 index 00000000..1a2893a4 --- /dev/null +++ b/components/theme/dimensions.ts @@ -0,0 +1,20 @@ +// dimension constants +export const FACET_MAX_WIDTH = 270; +export const FACET_MIN_WIDTH = 250; +export const FOOTER_HEIGHT = 47; +export const NAVBAR_HEIGHT = 50; + +const dimensions = { + navbar: { + height: 50, + }, + footer: { + height: 47, + }, + facets: { + minWidth: 250, + maxWidth: 270, + }, +}; + +export default dimensions; diff --git a/components/theme/index.ts b/components/theme/index.ts index 02bf3d1e..672ef9fc 100644 --- a/components/theme/index.ts +++ b/components/theme/index.ts @@ -1,9 +1,11 @@ import colors from './colors'; import typography from './typography'; import shadow from './shadow'; +import dimensions from './dimensions'; export default { colors, typography, shadow, + dimensions, }; diff --git a/global/utils/constants.ts b/global/utils/constants.ts index 968a35df..59a5add4 100644 --- a/global/utils/constants.ts +++ b/global/utils/constants.ts @@ -8,9 +8,3 @@ export const EGO_API_KEY_ENDPOINT = `${NEXT_PUBLIC_EGO_API_ROOT}/o/api_key`; export const EXPLORER_PATH = '/explorer'; export const USER_PATH = '/user'; export const LOGIN_PATH = '/login'; - -// dimension constants -export const FACET_MAX_WIDTH = 270; -export const FACET_MIN_WIDTH = 250; -export const FOOTER_HEIGHT = 47; -export const NAVBAR_HEIGHT = 50; From 03dc0a7161422795b746e5b2e5648c6abe5812c2 Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Mon, 15 Mar 2021 16:50:24 -0400 Subject: [PATCH 16/19] cleanup --- components/theme/dimensions.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/components/theme/dimensions.ts b/components/theme/dimensions.ts index 1a2893a4..5a44d92e 100644 --- a/components/theme/dimensions.ts +++ b/components/theme/dimensions.ts @@ -1,9 +1,3 @@ -// dimension constants -export const FACET_MAX_WIDTH = 270; -export const FACET_MIN_WIDTH = 250; -export const FOOTER_HEIGHT = 47; -export const NAVBAR_HEIGHT = 50; - const dimensions = { navbar: { height: 50, From bde1f09f238d63f226dbcf52a5902542b3ad937a Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Mon, 15 Mar 2021 17:43:49 -0400 Subject: [PATCH 17/19] =?UTF-8?q?=F0=9F=92=84=20fix=20user=20and=20login?= =?UTF-8?q?=20page=20alignment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/pages/login/index.tsx | 2 +- components/pages/user/index.tsx | 104 ++++++++++++++++--------------- 2 files changed, 56 insertions(+), 50 deletions(-) diff --git a/components/pages/login/index.tsx b/components/pages/login/index.tsx index d0d12336..68ecf0a4 100644 --- a/components/pages/login/index.tsx +++ b/components/pages/login/index.tsx @@ -151,7 +151,7 @@ const LoginPage = () => {
      { return (
      - css` - margin: 1rem 20rem; + css={css` + display: flex; + justify-content: center; + `} + > +
      - {!isEmpty(user) && ( -
      css` - display: flex; - flex-direction: row; - justify-content: space-between; - width: 800px; - margin-top: 1.5rem; - margin-bottom: 0.5rem; - padding-bottom: 2.5rem; - border-bottom: 1px solid ${theme.colors.grey_3}; - `} - > + margin: 1rem 2rem; + width: 800px; + `} + > + {!isEmpty(user) && (
      css` display: flex; flex-direction: row; + justify-content: space-between; + width: 800px; + margin-top: 1.5rem; + margin-bottom: 0.5rem; + padding-bottom: 2.5rem; + border-bottom: 1px solid ${theme.colors.grey_3}; `} > -
      -

      - css` - ${theme.typography.regular}; - font-size: 30px; - line-height: 36px; - color: ${theme.colors.accent_dark}; - margin-bottom: 0.5rem; - margin-top: 0.1rem; - ` - } - > - {`${user?.firstName} ${user?.lastName}`} -

      +
      - css` - ${theme.typography.subheading}; - color: ${theme.colors.accent_dark}; - font-weight: normal; - padding-left: 0.2rem; - ` - } + css={css` + margin-left: 1rem; + `} > - {user?.email || ''} +

      + css` + ${theme.typography.regular}; + font-size: 30px; + line-height: 36px; + color: ${theme.colors.accent_dark}; + margin-bottom: 0.5rem; + margin-top: 0.1rem; + ` + } + > + {`${user?.firstName} ${user?.lastName}`} +

      +
      + css` + ${theme.typography.subheading}; + color: ${theme.colors.accent_dark}; + font-weight: normal; + padding-left: 0.2rem; + ` + } + > + {user?.email || ''} +
      +
      - -
      - )} - {!isEmpty(user) && } + )} + {!isEmpty(user) && } +
      ); From 32053590790e7e593da951b1ede61de562d499ee Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Tue, 16 Mar 2021 09:15:28 -0400 Subject: [PATCH 18/19] refactor to styled components --- components/pages/user/index.tsx | 94 ++++++++++++++++----------------- 1 file changed, 46 insertions(+), 48 deletions(-) diff --git a/components/pages/user/index.tsx b/components/pages/user/index.tsx index 30baae09..43725585 100644 --- a/components/pages/user/index.tsx +++ b/components/pages/user/index.tsx @@ -17,40 +17,62 @@ const StyledPageLayout = styled(PageLayout)` `} `; +const FlexDiv = styled('div')` + display: flex; +`; + +const UserInfoContainer = styled(FlexDiv)` + ${({ theme }: { theme: typeof defaultTheme }) => css` + flex-direction: row; + justify-content: space-between; + width: 800px; + margin-top: 1.5rem; + margin-bottom: 0.5rem; + padding-bottom: 2.5rem; + border-bottom: 1px solid ${theme.colors.grey_3}; + `} +`; + +const UserTitle = styled('h1')` + ${({ theme }: { theme: typeof defaultTheme }) => css` + ${theme.typography.regular}; + font-size: 30px; + line-height: 36px; + color: ${theme.colors.accent_dark}; + margin-bottom: 0.5rem; + margin-top: 0.1rem; + `} +`; + +const UserEmail = styled('div')` + ${({ theme }: { theme: typeof defaultTheme }) => css` + ${theme.typography.subheading}; + color: ${theme.colors.accent_dark}; + font-weight: normal; + padding-left: 0.2rem; + `} +`; + const UserComponent = () => { const { user } = useAuthContext(); return ( -
      -
      {!isEmpty(user) && ( -
      css` - display: flex; - flex-direction: row; - justify-content: space-between; - width: 800px; - margin-top: 1.5rem; - margin-bottom: 0.5rem; - padding-bottom: 2.5rem; - border-bottom: 1px solid ${theme.colors.grey_3}; - `} - > -
      + @@ -60,40 +82,16 @@ const UserComponent = () => { margin-left: 1rem; `} > -

      - css` - ${theme.typography.regular}; - font-size: 30px; - line-height: 36px; - color: ${theme.colors.accent_dark}; - margin-bottom: 0.5rem; - margin-top: 0.1rem; - ` - } - > - {`${user?.firstName} ${user?.lastName}`} -

      -
      - css` - ${theme.typography.subheading}; - color: ${theme.colors.accent_dark}; - font-weight: normal; - padding-left: 0.2rem; - ` - } - > - {user?.email || ''} -
      + {`${user?.firstName} ${user?.lastName}`} + {user?.email || ''}
      -
      + -
      + )} {!isEmpty(user) && } -
      -
    + + ); }; From 376c6fc4f3a59e004ddf5c8c07b060bb07ee7d8c Mon Sep 17 00:00:00 2001 From: Ann Catton Date: Tue, 16 Mar 2021 15:30:37 -0400 Subject: [PATCH 19/19] =?UTF-8?q?=F0=9F=94=96=20rc=200.7.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e9c0b8de..8e62ea9b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dms-ui", - "version": "0.6.0", + "version": "0.7.0", "private": true, "scripts": { "dev": "next dev",