#2208: Dependency upgrades epic (#2391)

icgc-argo · Sep 14, 2022 · 69c51df · 69c51df
1 parent bcfc147
commit 69c51df
Show file tree

Hide file tree

Showing 223 changed files with 15,233 additions and 19,473 deletions.
diff --git a/.babelrc b/.babelrc
@@ -10,8 +10,5 @@
     ],
     ["@emotion/babel-preset-css-prop", { "autoLabel": true }]
   ],
-  "plugins": [
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-object-rest-spread"
-  ]
+  "plugins": ["@babel/plugin-proposal-optional-chaining"]
 }
diff --git a/.gitignore b/.gitignore
@@ -60,6 +60,7 @@ typings/
 # next.js build output
 .next
 out/
+next-env.d.ts
 
 # Testing
 test_reports
@@ -70,10 +71,15 @@ chromedriver.log
 # VSCode
 .vscode
 
+# graphql-codegen generated files
+generated
+
 .graphqlconfig
 .cache
 
 **/.DS_STORE
+
+tsconfig.tsbuildinfo
 /test-results/
 /playwright-report/
 /playwright/.cache/
diff --git a/Jenkinsfile.groovy b/Jenkinsfile.groovy
@@ -75,9 +75,6 @@ spec:
                     sh "npm ci"
                     sh "npm run test"
                 }
-                container('node') {
-                    sh "GATEWAY_API_ROOT=https://argo-gateway.dev.argo.cancercollaboratory.org/ npm run test-gql-validation"
-                }
             }
         }
 
@@ -95,9 +92,6 @@ spec:
                 branch "develop"
             }
             steps {
-                container('node') {
-                    sh "GATEWAY_API_ROOT=https://argo-gateway.dev.argo.cancercollaboratory.org/ npm run test-gql-validation"
-                }
                 container('docker') {
                     withCredentials([usernamePassword(credentialsId:'argoContainers', usernameVariable: 'USERNAME', passwordVariable: 'PASSWORD')]) {
                         sh "docker login ${dockerRegistry} -u $USERNAME -p $PASSWORD"
@@ -117,9 +111,6 @@ spec:
                 branch "master"
             }
             steps {
-                container('node') {
-                    sh "GATEWAY_API_ROOT=https://argo-gateway.qa.argo.cancercollaboratory.org/ npm run test-gql-validation"
-                }
                 container('docker') {
                     withCredentials([usernamePassword(credentialsId: 'argoGithub', passwordVariable: 'GIT_PASSWORD', usernameVariable: 'GIT_USERNAME')]) {
                         sh "git tag ${version}"

diff --git a/README.md b/README.md
@@ -41,6 +41,17 @@ To keep commit messages consistent, we use [gitmoji](https://gitmoji.dev). To ea
   - `Cmd+Shift+B`, then select `tsc:build - tsconfig.json`
   - This will report errors in vscode's `PROBLEMS` tab
 
+### GraphQL
+
+- We use [GraphQL Code Generator](https://www.graphql-code-generator.com/) to generate an introspection schema and types.
+- Install the [GraphQL VSCode plugin](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) for code suggestions based on the schema as well as syntax highlighting.
+
+- On first build, comment out the `schema` item in `graphql.config.yaml`, because the schema hasn't been generated yet. After building once, uncomment that line.
+- Modify `./codegen.yml` to get the schema either from your configured API or a local file.
+- `npm run gql-check` to check your GraphQL files and run a build.
+- `npm run dev` will also watch for GraphQL changes.
+- Name your GraphQL documents appropriately: They need to go in a `gql` folder and have `_QUERY` `_MUTATION` `_FRAGMENT` at the end of the filename. They also need to be `*.ts` files.
+
 ## Uikit
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/378c5fea-f016-406c-9449-f3099441b0b1/deploy-status)](https://app.netlify.com/sites/argo-ui-storybook/deploys)

diff --git a/codegen.yml b/codegen.yml
@@ -0,0 +1,13 @@
+schema:
+  # remote
+  - ${GATEWAY_API_ROOT}/graphql
+  # local
+  # - generated/gql_schema.json
+documents: [./**/gql/*.ts]
+generates:
+  generated/gql_schema.json:
+    plugins:
+      - introspection
+  generated/gql_types.tsx:
+    plugins:
+      - typescript
diff --git a/components/ApplicationRoot.tsx b/components/ApplicationRoot.tsx
@@ -17,8 +17,7 @@
  * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import ApolloClient from 'apollo-client';
-import { ApolloLink } from 'apollo-link';
+import { ApolloClient, ApolloLink, ApolloProvider } from '@apollo/client';
 import { ToasterContext, useToastState } from 'global/hooks/toaster';
 import useAuthContext, { AuthProvider } from 'global/hooks/useAuthContext';
 import { PageContext } from 'global/hooks/usePageContext';
@@ -29,7 +28,6 @@ import { css, styled, ThemeProvider } from '@icgc-argo/uikit';
 import ToastStack from '@icgc-argo/uikit/notifications/ToastStack';
 import urljoin from 'url-join';
 import Head from 'components/Head';
-import { ApolloProvider } from '@apollo/react-hooks';
 import get from 'lodash/get';
 import { createUploadLink } from 'apollo-upload-client';
 import { ClientSideGetInitialPropsContext } from 'global/utils/pages/types';

diff --git a/components/Head.tsx b/components/Head.tsx
@@ -23,7 +23,7 @@ import NextHead from 'next/head';
 export default function Head() {
   return (
     <NextHead>
-      <link rel="icon" href="/static/favicon.ico" />
+      <link rel="icon" href="/public/favicon.ico" />
     </NextHead>
   );
 }
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -29,6 +29,7 @@ import { canReadSomeProgram, isDccMember, isRdpcMember } from 'global/utils/egoJ
 import { getDefaultRedirectPathForUser } from 'global/utils/pages';
 import useFiltersContext from './pages/file-repository/hooks/useFiltersContext';
 import Link from 'next/link';
+import Image from 'next/image';
 import * as React from 'react';
 import { css } from '@icgc-argo/uikit';
 import AppBar, {
@@ -52,6 +53,7 @@ import ModalPortal from './Modal';
 import ProgramServicesModal from './pages/Homepage/ProgramServicesModal';
 import useClickAway from '@icgc-argo/uikit/utils/useClickAway';
 import { useScreenClass } from 'react-grid-system';
+import ArgoLogo from 'images/argo-logo.svg';
 
 const NavBarLoginButton = () => {
   const { asPath: path, query } = usePageContext();
@@ -234,17 +236,18 @@ export default function Navbar({ hideLinks = false, disableLogoLink = false }) {
       `}
     >
       <Section>
-        <Logo
-          DomComponent={(props) =>
-            disableLogoLink ? (
-              <div {...props} />
-            ) : (
-              <Link prefetch href={`/`}>
-                <a {...props} id="home-login" />
-              </Link>
-            )
-          }
-        />
+        <Link href={disableLogoLink ? '#' : '/'} id="home-login">
+          <div
+            css={css`
+              padding: 0 18px;
+              &:hover {
+                cursor: ${disableLogoLink ? 'normal' : 'pointer'};
+              }
+            `}
+          >
+            <Image alt="ICGC ARGO" layout="fixed" src={ArgoLogo} width="208" height="60" />
+          </div>
+        </Link>
 
         {isMobileDropdownOpen && <MobileDropdown />}
 

diff --git a/components/SystemAlerts/SYSTEM_ALERTS.gql b/components/SystemAlerts/SYSTEM_ALERTS.gql
diff --git a/next-env.d.ts → ...s/SystemAlerts/gql/SYSTEM_ALERTS_QUERY.ts b/next-env.d.ts → ...s/SystemAlerts/gql/SYSTEM_ALERTS_QUERY.ts
@@ -17,23 +17,18 @@
  * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-/// <reference types="next" />
-/// <reference types="next/types/global" />
+import { gql } from '@apollo/client';
 
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
+const SYSTEM_ALERTS_QUERY = gql`
+  query SystemAlerts {
+    systemAlerts {
+      dismissable
+      id
+      level
+      message
+      title
+    }
+  }
+`;
 
-declare module '*.jpg' {
-  const content: string;
-  export default content;
-}
-declare module '*.md' {
-  const content: string;
-  export default content;
-}
-declare module '*.gql' {
-  const content: string;
-  export default content;
-}
+export default SYSTEM_ALERTS_QUERY;
diff --git a/components/SystemAlerts/index.tsx b/components/SystemAlerts/index.tsx
@@ -18,10 +18,10 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { LOCAL_STORAGE_SYSTEM_ALERTS_KEY } from 'global/constants';
 import SystemAlert from '@icgc-argo/uikit/SystemAlert';
-import SYSTEM_ALERTS_QUERY from './SYSTEM_ALERTS.gql';
+import SYSTEM_ALERTS_QUERY from './gql/SYSTEM_ALERTS_QUERY';
 
 type SystemAlert = {
   dismissable: boolean;

diff --git a/components/pages/403.tsx b/components/pages/403.tsx
@@ -25,8 +25,9 @@ import HyperLink from '@icgc-argo/uikit/Link';
 import Link from 'next/link';
 import { getConfig } from 'global/config';
 import { Row, Col } from 'react-grid-system';
-import image from 'static/dna-locked.svg';
-import logoMark from 'static/logomark.svg';
+import dnaLockedImage from 'images/dna-locked.svg';
+import logoMarkImage from 'images/logomark.svg';
+import Image from 'next/image';
 
 export default function Error403Page() {
   const { DOCS_URL_ROOT } = getConfig();
@@ -48,16 +49,19 @@ export default function Error403Page() {
             `}
           >
             4
-            <img
+            <Image
               css={css`
                 margin: 0 8px -2px;
               `}
-              alt="Logo mark"
-              src={logoMark}
+              alt="0"
+              src={logoMarkImage}
+              layout="fixed"
+              width={70}
+              height={71}
             />
             3
           </Typography>
-          <Typography as="div" variant="subtitle" color="secondary">
+          <Typography as="h2" variant="subtitle" color="secondary">
             Forbidden
           </Typography>
           <Typography
@@ -87,7 +91,7 @@ export default function Error403Page() {
             text-align: center;
           `}
         >
-          <img alt="Broken dna" src={image} />
+          <Image alt="Locked DNA" src={dnaLockedImage} layout="fixed" width={273} height={300} />
         </Col>
       </Row>
     </ErrorLayout>

diff --git a/components/pages/404.tsx b/components/pages/404.tsx
@@ -25,8 +25,9 @@ import HyperLink from '@icgc-argo/uikit/Link';
 import { getConfig } from 'global/config';
 import Link from 'next/link';
 import { Row, Col } from 'react-grid-system';
-import image from 'static/dna-broken.svg';
-import logoMark from 'static/logomark.svg';
+import dnaBrokenImage from 'images/dna-broken.svg';
+import logoMarkImage from 'images/logomark.svg';
+import Image from 'next/image';
 
 export default function Error404Page() {
   const { DOCS_URL_ROOT } = getConfig();
@@ -48,16 +49,19 @@ export default function Error404Page() {
             `}
           >
             4
-            <img
+            <Image
               css={css`
                 margin: 0 8px -2px;
               `}
-              alt="Logo mark"
-              src={logoMark}
+              alt="0"
+              src={logoMarkImage}
+              layout="fixed"
+              width={70}
+              height={71}
             />
             4
           </Typography>
-          <Typography as="div" variant="subtitle" color="secondary">
+          <Typography as="h2" variant="subtitle" color="secondary">
             Page not Found
           </Typography>
           <Typography variant="subtitle2">
@@ -82,7 +86,7 @@ export default function Error404Page() {
             text-align: center;
           `}
         >
-          <img alt="Broken dna" src={image} />
+          <Image alt="Broken DNA" src={dnaBrokenImage} layout="fixed" width={276} height={300} />
         </Col>
       </Row>
     </ErrorLayout>

diff --git a/components/pages/500.tsx b/components/pages/500.tsx
@@ -25,8 +25,9 @@ import HyperLink from '@icgc-argo/uikit/Link';
 import { getConfig } from 'global/config';
 import Link from 'next/link';
 import { Row, Col } from 'react-grid-system';
-import image from 'static/dna-broken.svg';
-import logoMark from 'static/logomark.svg';
+import dnaBrokenImage from 'images/dna-broken.svg';
+import logoMarkImage from 'images/logomark.svg';
+import Image from 'next/image';
 
 export default function Error500Page() {
   const { DOCS_URL_ROOT } = getConfig();
@@ -48,16 +49,19 @@ export default function Error500Page() {
             `}
           >
             5
-            <img
+            <Image
               css={css`
                 margin: 0 8px -2px;
               `}
-              alt="Logo mark"
-              src={logoMark}
+              alt="0"
+              src={logoMarkImage}
+              layout="fixed"
+              width={70}
+              height={71}
             />
             0
           </Typography>
-          <Typography as="div" variant="subtitle" color="secondary">
+          <Typography as="h2" variant="subtitle" color="secondary">
             Internal Server Error
           </Typography>
           <Typography variant="subtitle2">Oops! We cannot handle this request.</Typography>
@@ -80,7 +84,7 @@ export default function Error500Page() {
             text-align: center;
           `}
         >
-          <img alt="Broken dna" src={image} />
+          <Image alt="Broken DNA" src={dnaBrokenImage} layout="fixed" width={276} height={300} />
         </Col>
       </Row>
     </ErrorLayout>

diff --git a/components/pages/ClientError.tsx b/components/pages/ClientError.tsx
@@ -22,6 +22,8 @@ import React from 'react';
 import { css } from '@icgc-argo/uikit';
 import A from '@icgc-argo/uikit/Link';
 import Typography from '@icgc-argo/uikit/Typography';
+import clientErrorImage from 'images/client-error.svg';
+import Image from 'next/image';
 
 export default function Error404Page() {
   const handleReloadClick = () => window.location.reload();
@@ -77,7 +79,13 @@ export default function Error404Page() {
           </Typography>
         </div>
         <div>
-          <img alt="Bug in the code" src="/static/client-error.svg" />
+          <Image
+            alt="Bug in the code"
+            src={clientErrorImage}
+            layout="fixed"
+            width={514}
+            height={350}
+          />
         </div>
       </div>
     </ErrorLayout>