update emotion 11, and vulnerable deps (#147)

overture-stack · Apr 6, 2022 · e164d2a · e164d2a
1 parent 8f7af74
commit e164d2a
Show file tree

Hide file tree

Showing 48 changed files with 2,343 additions and 5,468 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/babel.config.js 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
@@ -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
@@ -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;
-}) => (
-  <div
-    css={css`
-      display: flex;
-      flex: 1;
-      ${styles}
-    `}
-  >
-    <ErrorContentContainer size={size}>
-      {title ? (
-        <div>
-          <ErrorTitle size={size}>
-            <ErrorIcon
-              {...getIconDimensions(size)}
-              style={css`
-                ${getIconStyle(size)}
-              `}
-            />{' '}
-            {title}
-            {dismissible && (
-              <DismissIcon height={15} width={15} fill={defaultTheme.colors.error_dark} />
-            )}
-          </ErrorTitle>
-          {children}
-        </div>
-      ) : (
-        <div
-          css={css`
-            display: flex;
-            flex-direction: row;
-          `}
-        >
-          <span>
-            <ErrorIcon
-              {...getIconDimensions(size)}
-              style={css`
-                ${getIconStyle(size)}
-              `}
-            />
-          </span>
+}) => {
+  const theme = useTheme();
+
+  return (
+    <div
+      className={className}
+      css={css`
+        display: flex;
+        flex: 1;
+      `}
+    >
+      <ErrorContentContainer size={size}>
+        {title ? (
+          <div>
+            <ErrorTitle size={size}>
+              <ErrorIcon
+                {...getIconDimensions(size)}
+                style={css`
+                  ${getIconStyle(size)}
+                `}
+              />{' '}
+              {title}
+              {dismissible && <DismissIcon height={15} width={15} fill={theme.colors.error_dark} />}
+            </ErrorTitle>
+            {children}
+          </div>
+        ) : (
           <div
             css={css`
-              margin-left: 10px;
-              margin-right: 10px;
               display: flex;
-              align-items: center;
-              justify-content: center;
+              flex-direction: row;
             `}
           >
-            {children}
+            <span>
+              <ErrorIcon
+                {...getIconDimensions(size)}
+                style={css`
+                  ${getIconStyle(size)}
+                `}
+              />
+            </span>
+            <div
+              css={css`
+                margin-left: 10px;
+                margin-right: 10px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              `}
+            >
+              {children}
+            </div>
+            {dismissible && (
+              <IconButton
+                onClick={(e: React.MouseEvent) => (onDismiss ? onDismiss() : () => null)}
+                Icon={DismissIcon}
+                height={12}
+                width={12}
+                fill={theme.colors.error_dark}
+              />
+            )}
           </div>
-          {dismissible && (
-            <IconButton
-              onClick={(e: React.MouseEvent) => (onDismiss ? onDismiss() : () => null)}
-              Icon={DismissIcon}
-              height={12}
-              width={12}
-              fill={defaultTheme.colors.error_dark}
-            />
-          )}
-        </div>
-      )}
-    </ErrorContentContainer>
-  </div>
-);
+        )}
+      </ErrorContentContainer>
+    </div>
+  );
+};
 
 export default ErrorNotification;
diff --git 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
@@ -21,27 +21,13 @@
 
 import React from 'react';
 import NextHead from 'next/head';
-import { getConfig } from '../global/config';
 
-const Head = () => {
-  const { NEXT_PUBLIC_BASE_PATH } = getConfig();
-  return (
-    <NextHead>
-      <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 }) => {
+const PageHead = ({ subtitle }: { subtitle?: string }) => {
   return (
     <NextHead>
       <title>Overture DMS{subtitle ? ` - ${subtitle}` : ''}</title>
     </NextHead>
   );
 };
 
-export default Head;
+export default PageHead;
diff --git 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
@@ -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
@@ -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
@@ -20,15 +20,14 @@
  */
 
 import React from 'react';
-import { css } from '@emotion/core';
+import { css, useTheme } from '@emotion/react';
 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 { 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
@@ -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 = ({
       <ErrorNotification
         size="lg"
         title={errorTitle}
-        styles={`
+        css={css`
           flex-direction: column;
           justify-content: center;
           align-items: center;

diff --git a/components/Root.tsx b/components/Root.tsx
@@ -20,13 +20,13 @@
  */
 
 import React from 'react';
-import { ThemeProvider } from 'emotion-theming';
-import defaultTheme from './theme';
-import Head from './Head';
+import { ThemeProvider } from '@emotion/react';
 import { AuthProvider } from '../global/hooks/useAuthContext';
 import { PageContext } from '../global/hooks/usePageContext';
 import { ClientSideGetInitialPropsContext } from '../global/utils/pages/types';
 
+import defaultTheme from './theme';
+
 const Root = ({
   children,
   egoJwt,
@@ -57,7 +57,7 @@ const Root = ({
         }
       `}
       </style>
-      <Head />
+
       <AuthProvider egoJwt={egoJwt}>
         <PageContext.Provider value={pageContext}>
           <ThemeProvider theme={defaultTheme}>{children}</ThemeProvider>

diff --git 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
@@ -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 (
-    <div css={(theme) => getFacetStyles(theme)}>
+    <div css={getFacetStyles(theme)}>
       <h2
-        css={(theme) => css`
+        css={css`
           ${theme.typography.subheading}
           padding: 6px 0 2px 8px;
           margin: 0;
@@ -258,6 +259,7 @@ const Facets = (props: PageContentProps) => {
       >
         Filters
       </h2>
+
       <Aggregations {...props} />
     </div>
   );

diff --git 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';