From e164d2ae98f2a52acddb2d32eced356183467d28 Mon Sep 17 00:00:00 2001 From: Anders Richardsson <2107110+caravinci@users.noreply.github.com> Date: Fri, 1 Apr 2022 11:11:34 -0400 Subject: [PATCH] update emotion 11, and vulnerable deps (#147) --- .babelrc | 4 - babel.config.js | 14 + components/Button.tsx | 2 +- components/ErrorNotification.tsx | 131 +- components/Footer.tsx | 2 +- components/Head.tsx | 18 +- components/IconButton.tsx | 2 +- components/Link.tsx | 2 +- components/Loader.tsx | 2 +- components/NavBar.tsx | 3 +- components/PageLayout.tsx | 6 +- components/Root.tsx | 8 +- components/UserDropdown.tsx | 3 +- components/pages/explorer/Facets.tsx | 12 +- components/pages/explorer/PageContent.tsx | 2 +- components/pages/explorer/QueryBar.tsx | 9 +- components/pages/explorer/RepoTable.tsx | 10 +- components/pages/explorer/getConfigError.tsx | 2 +- components/pages/explorer/index.tsx | 5 +- components/pages/login/index.tsx | 2 +- components/pages/user/ApiTokenInfo.tsx | 119 +- components/pages/user/AuthenticatedBadge.tsx | 3 +- components/pages/user/index.tsx | 2 +- components/theme/emotion.d.ts | 6 + components/theme/icons/avatar.tsx | 2 +- components/theme/icons/checkmark.tsx | 2 +- components/theme/icons/chevron_down.tsx | 2 +- components/theme/icons/dismiss.tsx | 2 +- components/theme/icons/error.tsx | 2 +- components/theme/icons/facebook.tsx | 2 +- components/theme/icons/github.tsx | 2 +- components/theme/icons/google.tsx | 2 +- components/theme/icons/illustration.tsx | 2 +- components/theme/icons/linkedin.tsx | 2 +- components/theme/icons/orcid.tsx | 2 +- components/theme/icons/overture_logo.tsx | 2 +- .../theme/icons/overture_logo_with_text.tsx | 2 +- components/theme/icons/overture_user.tsx | 2 +- components/theme/icons/spinner.tsx | 2 +- components/theme/icons/types.ts | 2 +- components/theme/icons/warning.tsx | 2 +- components/theme/index.ts | 5 +- components/theme/typography.ts | 2 +- package-lock.json | 7324 +++++------------ package.json | 29 +- pages/_document.tsx | 28 + pages/logged-in.tsx | 2 +- tsconfig.json | 18 +- 48 files changed, 2343 insertions(+), 5468 deletions(-) delete mode 100644 .babelrc create mode 100644 babel.config.js create mode 100644 components/theme/emotion.d.ts create mode 100644 pages/_document.tsx diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 8ce15820..00000000 --- a/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": [["next/babel"], ["@emotion/babel-preset-css-prop"]], - "plugins": [] -} diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 00000000..6eb07b00 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,14 @@ +module.exports = { + plugins: ['@emotion/babel-plugin'], + presets: [ + [ + 'next/babel', + { + 'preset-react': { + runtime: 'automatic', + importSource: '@emotion/react', + }, + }, + ], + ], +}; diff --git a/components/Button.tsx b/components/Button.tsx index 4f6bbaf0..badc22a4 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -20,7 +20,7 @@ */ import React, { ReactNode, ReactNodeArray } from 'react'; -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import defaultTheme from './theme'; diff --git a/components/ErrorNotification.tsx b/components/ErrorNotification.tsx index 87984310..f8e8267c 100644 --- a/components/ErrorNotification.tsx +++ b/components/ErrorNotification.tsx @@ -19,12 +19,11 @@ * */ -import { css } from '@emotion/core'; +import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import React from 'react'; import IconButton from './IconButton'; -import defaultTheme from './theme'; import { Error as ErrorIcon } from './theme/icons'; import DismissIcon from './theme/icons/dismiss'; @@ -61,8 +60,8 @@ const getContainerStyles = (size: ErrorSize) => `, }[size]); -const ErrorContentContainer = styled('div')` - ${({ theme, size }: { theme: typeof defaultTheme; size: ErrorSize }) => css` +const ErrorContentContainer = styled('div')<{ size: ErrorSize }>` + ${({ theme, size }) => css` border: 1px solid ${theme.colors.error_2}; border-radius: 5px; ${theme.shadow.default}; @@ -111,82 +110,86 @@ const ErrorTitle = styled('h1')` const ErrorNotification = ({ children, + className, title, size, - styles = '', onDismiss, dismissible = false, + ...props }: { children: React.ReactNode; + className?: string; title?: string; size: ErrorSize; styles?: string; onDismiss?: Function; dismissible?: boolean; -}) => ( -
- - {title ? ( -
- - {' '} - {title} - {dismissible && ( - - )} - - {children} -
- ) : ( -
- - - +}) => { + const theme = useTheme(); + + return ( +
+ + {title ? ( +
+ + {' '} + {title} + {dismissible && } + + {children} +
+ ) : (
- {children} + + + +
+ {children} +
+ {dismissible && ( + (onDismiss ? onDismiss() : () => null)} + Icon={DismissIcon} + height={12} + width={12} + fill={theme.colors.error_dark} + /> + )}
- {dismissible && ( - (onDismiss ? onDismiss() : () => null)} - Icon={DismissIcon} - height={12} - width={12} - fill={defaultTheme.colors.error_dark} - /> - )} -
- )} - -
-); + )} + +
+ ); +}; export default ErrorNotification; diff --git a/components/Footer.tsx b/components/Footer.tsx index 6f91f1cc..f6afae4e 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -20,7 +20,7 @@ */ import React from 'react'; -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import defaultTheme from './theme'; import { OvertureLogoWithText } from './theme/icons'; import StyledLink from './Link'; diff --git a/components/Head.tsx b/components/Head.tsx index d6f22e5e..79dc9962 100644 --- a/components/Head.tsx +++ b/components/Head.tsx @@ -21,22 +21,8 @@ import React from 'react'; import NextHead from 'next/head'; -import { getConfig } from '../global/config'; -const Head = () => { - const { NEXT_PUBLIC_BASE_PATH } = getConfig(); - return ( - - - - - ); -}; - -export const PageHead = ({ subtitle }: { subtitle?: string }) => { +const PageHead = ({ subtitle }: { subtitle?: string }) => { return ( Overture DMS{subtitle ? ` - ${subtitle}` : ''} @@ -44,4 +30,4 @@ export const PageHead = ({ subtitle }: { subtitle?: string }) => { ); }; -export default Head; +export default PageHead; diff --git a/components/IconButton.tsx b/components/IconButton.tsx index e99d8b42..035e4f4e 100644 --- a/components/IconButton.tsx +++ b/components/IconButton.tsx @@ -19,7 +19,7 @@ * */ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { IconProps } from './theme/icons/types'; const IconButton = ({ diff --git a/components/Link.tsx b/components/Link.tsx index da26bf9b..1eaf7a89 100644 --- a/components/Link.tsx +++ b/components/Link.tsx @@ -20,7 +20,7 @@ */ import styled from '@emotion/styled'; -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import Link from 'next/link'; import defaultTheme from './theme'; diff --git a/components/Loader.tsx b/components/Loader.tsx index 0989c4b3..cc26c478 100644 --- a/components/Loader.tsx +++ b/components/Loader.tsx @@ -19,7 +19,7 @@ * */ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; // TODO: this is a placeholder Loader const Loader = () => { diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 4ac426c3..580f714b 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -20,7 +20,7 @@ */ import React from 'react'; -import { css } from '@emotion/core'; +import { css, useTheme } from '@emotion/react'; import { useRouter } from 'next/router'; import UserDropdown from './UserDropdown'; @@ -28,7 +28,6 @@ import defaultTheme from './theme'; 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 { getConfig } from '../global/config'; diff --git a/components/PageLayout.tsx b/components/PageLayout.tsx index a5ab6743..afb000c9 100644 --- a/components/PageLayout.tsx +++ b/components/PageLayout.tsx @@ -20,11 +20,11 @@ */ import React, { ReactNode } from 'react'; -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import NavBar from './NavBar'; import Footer from './Footer'; -import { PageHead } from './Head'; +import PageHead from './Head'; import ErrorNotification from './ErrorNotification'; const PageLayout = ({ children, subtitle }: { children: ReactNode; subtitle?: string }) => { @@ -62,7 +62,7 @@ export const ErrorPageLayout = ({ - + {children} diff --git a/components/UserDropdown.tsx b/components/UserDropdown.tsx index a8d1a322..29aae36e 100644 --- a/components/UserDropdown.tsx +++ b/components/UserDropdown.tsx @@ -20,9 +20,8 @@ */ import React, { useEffect, useState, useRef } from 'react'; -import { css } from '@emotion/core'; +import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { useTheme } from 'emotion-theming'; import defaultTheme from './theme'; import { Avatar, ChevronDown } from './theme/icons'; diff --git a/components/pages/explorer/Facets.tsx b/components/pages/explorer/Facets.tsx index 17476b51..ad02b99c 100644 --- a/components/pages/explorer/Facets.tsx +++ b/components/pages/explorer/Facets.tsx @@ -19,18 +19,18 @@ * */ -import { css } from '@emotion/core'; import dynamic from 'next/dynamic'; +import { css, useTheme } from '@emotion/react'; import { PageContentProps } from '.'; -import defaultTheme from '../../theme'; +import { DMSThemeInterface } from '../../theme'; const Aggregations = dynamic( import('@arranger/components/dist/Arranger').then((comp) => comp.Aggregations), { ssr: false }, ) as any; -const getFacetStyles = (theme: typeof defaultTheme) => css` +const getFacetStyles = (theme: DMSThemeInterface) => css` padding-bottom: 2rem; .input-range-wrapper div { ${theme.typography.label2} @@ -246,10 +246,11 @@ const getFacetStyles = (theme: typeof defaultTheme) => css` `; const Facets = (props: PageContentProps) => { + const theme: DMSThemeInterface = useTheme(); return ( -
getFacetStyles(theme)}> +

css` + css={css` ${theme.typography.subheading} padding: 6px 0 2px 8px; margin: 0; @@ -258,6 +259,7 @@ const Facets = (props: PageContentProps) => { > Filters

+
); diff --git a/components/pages/explorer/PageContent.tsx b/components/pages/explorer/PageContent.tsx index 669940c8..51f2dbca 100644 --- a/components/pages/explorer/PageContent.tsx +++ b/components/pages/explorer/PageContent.tsx @@ -19,7 +19,7 @@ * */ -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import RepoTable from './RepoTable'; import Facets from './Facets'; import QueryBar from './QueryBar'; diff --git a/components/pages/explorer/QueryBar.tsx b/components/pages/explorer/QueryBar.tsx index f3aefdec..f325d523 100644 --- a/components/pages/explorer/QueryBar.tsx +++ b/components/pages/explorer/QueryBar.tsx @@ -19,11 +19,11 @@ * */ -import { css } from '@emotion/core'; import dynamic from 'next/dynamic'; +import { css, useTheme } from '@emotion/react'; import { Row } from 'react-grid-system'; -import defaultTheme from '../../theme'; +import { DMSThemeInterface } from '../../theme'; import { PageContentProps } from '.'; const CurrentSQON = dynamic( @@ -31,7 +31,7 @@ const CurrentSQON = dynamic( { ssr: false }, ) as any; -const getCss = (theme: typeof defaultTheme) => css` +const getCss = (theme: DMSThemeInterface) => css` ${theme.shadow.default}; & .sqon-view { background-color: transparent; @@ -147,10 +147,11 @@ const getCss = (theme: typeof defaultTheme) => css` `; const QueryBar = (props: PageContentProps) => { + const theme = useTheme(); return ( css` + css={css` min-height: 48px; margin: 10px 0; background-color: ${theme.colors.white}; diff --git a/components/pages/explorer/RepoTable.tsx b/components/pages/explorer/RepoTable.tsx index 778a5047..f1a22e49 100644 --- a/components/pages/explorer/RepoTable.tsx +++ b/components/pages/explorer/RepoTable.tsx @@ -19,14 +19,13 @@ * */ -import { css } from '@emotion/core'; import dynamic from 'next/dynamic'; +import { css, useTheme } from '@emotion/react'; import urlJoin from 'url-join'; -import { useTheme } from 'emotion-theming'; import { PageContentProps } from './index'; import StyledLink from '../../Link'; -import defaultTheme from '../../theme'; +import { DMSThemeInterface } from '../../theme'; import { getConfig } from '../../../global/config'; const Table = dynamic( @@ -34,7 +33,7 @@ const Table = dynamic( { ssr: false }, ) as any; -const getTableStyle = (theme: typeof defaultTheme) => css` +const getTableStyle = (theme: DMSThemeInterface) => css` border-radius: 5px; background-color: ${theme.colors.white}; padding: 8px; @@ -230,12 +229,12 @@ const getTableStyle = (theme: typeof defaultTheme) => css` `; const RepoTable = (props: PageContentProps) => { - const theme: typeof defaultTheme = useTheme(); const { NEXT_PUBLIC_ARRANGER_API, NEXT_PUBLIC_ARRANGER_PROJECT_ID, NEXT_PUBLIC_ARRANGER_MANIFEST_COLUMNS, } = getConfig(); + const theme = useTheme(); const manifestColumns = NEXT_PUBLIC_ARRANGER_MANIFEST_COLUMNS.split(',') .filter((field) => field.trim()) // break it into arrays, and ensure there's no empty field names .map((fieldName) => fieldName.replace(/['"]+/g, '').trim()); @@ -282,6 +281,7 @@ const RepoTable = (props: PageContentProps) => { columnDropdownText={'Columns'} exporter={customExporters} downloadUrl={urlJoin(NEXT_PUBLIC_ARRANGER_API, NEXT_PUBLIC_ARRANGER_PROJECT_ID, 'download')} + enableSelectedTableRowsExporterFilter />
); diff --git a/components/pages/explorer/getConfigError.tsx b/components/pages/explorer/getConfigError.tsx index f231aa93..d13474ec 100644 --- a/components/pages/explorer/getConfigError.tsx +++ b/components/pages/explorer/getConfigError.tsx @@ -20,7 +20,7 @@ */ import { ReactNode } from 'react'; -import { css } from '@emotion/core'; +import { css } from '@emotion/react'; import { Checkmark, Warning } from '../../theme/icons'; import theme from '../../theme'; diff --git a/components/pages/explorer/index.tsx b/components/pages/explorer/index.tsx index 7c428ad8..a846ef2d 100644 --- a/components/pages/explorer/index.tsx +++ b/components/pages/explorer/index.tsx @@ -21,6 +21,7 @@ import dynamic from 'next/dynamic'; import urlJoin from 'url-join'; +import { css, useTheme } from '@emotion/react'; import PageContent from './PageContent'; import PageLayout from '../../PageLayout'; @@ -32,7 +33,6 @@ import { useEffect, useState } from 'react'; import ErrorNotification from '../../ErrorNotification'; import getConfigError from './getConfigError'; import Loader from '../../Loader'; -import { css } from '@emotion/core'; import sleep from '../../utils/sleep'; const Arranger = dynamic( @@ -89,6 +89,7 @@ const RepositoryPage = () => { NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD, NEXT_PUBLIC_ARRANGER_INDEX, } = getConfig(); + const theme = useTheme(); const [availableProjects, setAvailableProjects] = useState([]); const [loadingProjects, setLoadingProjects] = useState(true); @@ -149,7 +150,7 @@ const RepositoryPage = () => { css` + ${({ theme }) => css` ${theme.typography.label}; background: ${theme.colors.grey_6}; border-radius: 2px; @@ -143,7 +142,7 @@ const ApiTokenInfo = () => { const [isCopyingToken, setIsCopyingToken] = React.useState(false); const [copySuccess, setCopySuccess] = React.useState(false); const [requestError, setRequestError] = React.useState(null); - const theme: typeof defaultTheme = useTheme(); + const theme = useTheme(); // still need to display any errors for the generate request, as permissions may have changed in between // the time a user signed in and when they attempted to generate a token @@ -303,26 +302,22 @@ const ApiTokenInfo = () => { return (

- css` - ${theme.typography.regular}; - font-size: 24px; - line-height: 40px; - color: ${theme.colors.accent_dark}; - ` - } + css={css` + ${theme.typography.regular}; + font-size: 24px; + line-height: 40px; + color: ${theme.colors.accent_dark}; + `} > API Token

    - css` - ${theme.typography.subheading}; - font-weight: normal; - color: ${theme.colors.accent_dark}; - margin-bottom: 1rem; - ` - } + css={css` + ${theme.typography.subheading}; + font-weight: normal; + color: ${theme.colors.accent_dark}; + margin-bottom: 1rem; + `} >
  1. Your API token is used to download controlled access data.
  2. @@ -353,7 +348,7 @@ const ApiTokenInfo = () => { > css` + css={css` background-color: ${theme.colors.error_1}; color: ${theme.colors.accent_dark}; `} @@ -391,16 +386,14 @@ const ApiTokenInfo = () => {