webui: dependencies upgrades

Most upgrades are minor version without breaking changes.

One big upgrade is Apollo 2 -> 3, which required a few changes in the
Apollo setup (see src/apollo.ts).

Other changes are due to changes in Prettier, requiring to add
parenthesis around arrow function parameters.

Because of an incompatibility in older version of typescript-eslint with
newer versions of typescript, I had to switch to the "next" unstable
version of react-scripts. It should not break stuff though.

See typescript-eslint/typescript-eslint#2442

webui/codegen.yaml

@@ -7,6 +7,7 @@ generates:
       - fragment-matcher
     config:
       module: es2015
+      apolloClientVersion: 3
   ./src/gqlTypes.ts:
     plugins:
       - typescript
@@ -15,7 +16,8 @@ generates:
       - introspection
   ./src/:
     plugins:
-      - add: '/* eslint-disable @typescript-eslint/no-unused-vars, import/order */'
+      - add:
+          content: '/* eslint-disable @typescript-eslint/no-unused-vars, import/order */'
       - typescript-operations
       - typescript-react-apollo
     preset: near-operation-file

webui/package.json

@@ -3,45 +3,42 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.3",
+    "@apollo/client": "^3.2.1",
     "@arrows/composition": "^1.2.2",
-    "@material-ui/core": "^4.9.0",
-    "@material-ui/icons": "^4.2.1",
-    "@material-ui/lab": "^4.0.0-alpha.40",
-    "@material-ui/styles": "^4.9.0",
-    "@types/node": "^13.5.3",
-    "@types/react": "^16.9.19",
-    "@types/react-dom": "^16.9.5",
-    "@types/react-router-dom": "^5.1.3",
-    "apollo-boost": "^0.4.7",
-    "clsx": "^1.1.0",
-    "graphql": "^14.6.0",
-    "graphql.macro": "^1.4.2",
-    "moment": "^2.24.0",
-    "react": "^16.8.6",
-    "react-apollo": "^3.1.3",
-    "react-dom": "^16.8.6",
-    "react-moment": "^0.9.7",
-    "react-router": "^5.0.0",
-    "react-router-dom": "^5.0.0",
-    "react-scripts": "^3.4.1",
-    "remark-html": "^10.0.0",
-    "remark-parse": "^7.0.2",
-    "remark-react": "^6.0.0",
-    "typescript": "^3.7.5",
-    "unified": "^8.4.2"
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@material-ui/styles": "^4.10.0",
+    "@types/node": "^14.11.2",
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.5",
+    "clsx": "^1.1.1",
+    "graphql": "^15.3.0",
+    "moment": "^2.29.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-moment": "^1.0.0",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^4.0.0-next.98",
+    "remark-html": "^12.0.0",
+    "remark-parse": "^8.0.3",
+    "remark-react": "^7.0.1",
+    "typescript": "^4.0.3",
+    "unified": "^9.2.0"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^1.15.3",
-    "@graphql-codegen/fragment-matcher": "^1.15.3",
-    "@graphql-codegen/near-operation-file-preset": "^1.15.3",
-    "@graphql-codegen/typescript-operations": "^1.15.3",
-    "@graphql-codegen/typescript-react-apollo": "^1.15.3",
-    "@graphql-codegen/introspection": "^1.15.3",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-graphql": "^3.1.1",
-    "eslint-plugin-prettier": "^3.1.2",
-    "prettier": "^1.19.1"
+    "@graphql-codegen/cli": "^1.17.10",
+    "@graphql-codegen/fragment-matcher": "^1.17.8",
+    "@graphql-codegen/introspection": "^1.18.0",
+    "@graphql-codegen/near-operation-file-preset": "^1.17.11",
+    "@graphql-codegen/typescript-operations": "^1.17.8",
+    "@graphql-codegen/typescript-react-apollo": "^2.0.7",
+    "eslint-config-prettier": "^6.12.0",
+    "eslint-plugin-graphql": "^4.0.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "prettier": "^2.1.2"
   },
   "scripts": {
     "start": "npm run generate && react-scripts start",

webui/src/apollo.ts

@@ -1,17 +1,11 @@
-import ApolloClient from 'apollo-boost';
-import {
-  IntrospectionFragmentMatcher,
-  InMemoryCache,
-} from 'apollo-cache-inmemory';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
 
-import introspectionQueryResultData from './fragmentTypes';
+import introspectionResult from './fragmentTypes';
 
 const client = new ApolloClient({
   uri: '/graphql',
   cache: new InMemoryCache({
-    fragmentMatcher: new IntrospectionFragmentMatcher({
-      introspectionQueryResultData,
-    }),
+    possibleTypes: introspectionResult.possibleTypes,
   }),
 });
 

webui/src/components/Label.tsx

@@ -30,7 +30,7 @@ const createStyle = (color: Color) => ({
   borderBottomColor: darken(_rgb(color), 0.2),
 });
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   label: {
     ...theme.typography.body1,
     padding: '1px 6px 0.5px',

webui/src/index.tsx

@@ -1,5 +1,5 @@
+import { ApolloProvider } from '@apollo/client';
 import React from 'react';
-import { ApolloProvider } from 'react-apollo';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 

webui/src/layout/CurrentIdentity.tsx

@@ -5,7 +5,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 import { useCurrentIdentityQuery } from './CurrentIdentity.generated';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   displayName: {
     marginLeft: theme.spacing(2),
   },

webui/src/layout/Header.tsx

@@ -7,7 +7,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 import CurrentIdentity from './CurrentIdentity';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   offset: {
     ...theme.mixins.toolbar,
   },

webui/src/pages/bug/Bug.tsx

@@ -12,7 +12,7 @@ import { BugFragment } from './Bug.generated';
 import CommentForm from './CommentForm';
 import TimelineQuery from './TimelineQuery';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   main: {
     maxWidth: 1000,
     margin: 'auto',
@@ -103,7 +103,7 @@ function Bug({ bug }: Props) {
             {bug.labels.length === 0 && (
               <span className={classes.noLabel}>None yet</span>
             )}
-            {bug.labels.map(l => (
+            {bug.labels.map((l) => (
               <li className={classes.label} key={l.name}>
                 <Label label={l} key={l.name} />
               </li>

webui/src/pages/bug/CommentForm.tsx

@@ -13,7 +13,7 @@ import { useAddCommentMutation } from './CommentForm.generated';
 import { TimelineDocument } from './TimelineQuery.generated';
 
 type StyleProps = { loading: boolean };
-const useStyles = makeStyles<Theme, StyleProps>(theme => ({
+const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   container: {
     margin: theme.spacing(2, 0),
     padding: theme.spacing(0, 2, 2, 2),

webui/src/pages/bug/LabelChange.tsx

@@ -8,7 +8,7 @@ import Label from 'src/components/Label';
 
 import { LabelChangeFragment } from './LabelChangeFragment.generated';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   main: {
     ...theme.typography.body2,
     marginLeft: theme.spacing(1) + 40,

webui/src/pages/bug/Message.tsx

@@ -10,7 +10,7 @@ import Date from 'src/components/Date';
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   author: {
     fontWeight: 'bold',
   },

webui/src/pages/bug/SetStatus.tsx

@@ -8,7 +8,7 @@ import Date from 'src/components/Date';
 
 import { SetStatusFragment } from './SetStatusFragment.generated';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   main: {
     ...theme.typography.body2,
     marginLeft: theme.spacing(1) + 40,

webui/src/pages/bug/SetTitle.tsx

@@ -7,7 +7,7 @@ import Date from 'src/components/Date';
 
 import { SetTitleFragment } from './SetTitleFragment.generated';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   main: {
     ...theme.typography.body2,
     marginLeft: theme.spacing(1) + 40,

webui/src/pages/bug/Timeline.tsx

@@ -8,7 +8,7 @@ import SetStatus from './SetStatus';
 import SetTitle from './SetTitle';
 import { TimelineItemFragment } from './TimelineQuery.generated';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   main: {
     '& > *:not(:last-child)': {
       marginBottom: theme.spacing(2),

webui/src/pages/list/BugRow.tsx

@@ -42,7 +42,7 @@ const BugStatus: React.FC<StatusProps> = ({
   }
 };
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   cell: {
     display: 'flex',
     alignItems: 'center',
@@ -92,7 +92,7 @@ function BugRow({ bug }: Props) {
               <span className={classes.title}>{bug.title}</span>
               {bug.labels.length > 0 && (
                 <span className={classes.labels}>
-                  {bug.labels.map(l => (
+                  {bug.labels.map((l) => (
                     <Label key={l.name} label={l} />
                   ))}
                 </span>

webui/src/pages/list/Filter.tsx

@@ -9,7 +9,7 @@ import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import { makeStyles } from '@material-ui/core/styles';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 
-export type Query = { [key: string]: Array<string> };
+export type Query = { [key: string]: string[] };
 
 function parse(query: string): Query {
   // TODO: extract the rest of the query?
@@ -57,12 +57,12 @@ function quote(value: string): string {
 
 function stringify(params: Query): string {
   const parts: string[][] = Object.entries(params).map(([key, values]) => {
-    return values.map(value => `${key}:${quote(value)}`);
+    return values.map((value) => `${key}:${quote(value)}`);
   });
   return new Array<string>().concat(...parts).join(' ');
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   element: {
     ...theme.typography.body2,
     color: '#444',

webui/src/pages/list/FilterToolbar.tsx

@@ -17,7 +17,7 @@ import {
 } from './Filter';
 import { useBugCountQuery } from './FilterToolbar.generated';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   toolbar: {
     backgroundColor: theme.palette.grey['100'],
     borderColor: theme.palette.grey['300'],
@@ -123,8 +123,8 @@ function FilterToolbar({ query, queryLocation }: Props) {
           ['edit', 'Recently updated'],
           ['edit-asc', 'Least recently updated'],
         ]}
-        itemActive={key => hasValue('sort', key)}
-        to={key => pipe(replaceParam('sort', key), loc)(params)}
+        itemActive={(key) => hasValue('sort', key)}
+        to={(key) => pipe(replaceParam('sort', key), loc)(params)}
       >
         Sort
       </FilterDropdown>

webui/src/pages/list/ListQuery.tsx

@@ -1,4 +1,4 @@
-import { ApolloError } from 'apollo-boost';
+import { ApolloError } from '@apollo/client';
 import React, { useState, useEffect, useRef } from 'react';
 import { useLocation, useHistory, Link } from 'react-router-dom';
 
@@ -16,7 +16,7 @@ import List from './List';
 import { useListBugsQuery } from './ListQuery.generated';
 
 type StylesProps = { searching?: boolean };
-const useStyles = makeStyles<Theme, StylesProps>(theme => ({
+const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
   main: {
     maxWidth: 800,
     margin: 'auto',
@@ -211,7 +211,7 @@ function ListQuery() {
     if (bugs.pageInfo.hasNextPage) {
       nextPage = {
         ...location,
-        search: editParams(params, p => {
+        search: editParams(params, (p) => {
           p.delete('last');
           p.delete('before');
           p.set('first', perPage);
@@ -223,7 +223,7 @@ function ListQuery() {
     if (bugs.pageInfo.hasPreviousPage) {
       previousPage = {
         ...location,
-        search: editParams(params, p => {
+        search: editParams(params, (p) => {
           p.delete('first');
           p.delete('after');
           p.set('last', perPage);
@@ -234,7 +234,7 @@ function ListQuery() {
   }
 
   // Prepare params without paging for editing filters
-  const paramsWithoutPaging = editParams(params, p => {
+  const paramsWithoutPaging = editParams(params, (p) => {
     p.delete('first');
     p.delete('last');
     p.delete('before');
@@ -243,7 +243,9 @@ function ListQuery() {
   // Returns a new location with the `q` param edited
   const queryLocation = (query: string) => ({
     ...location,
-    search: editParams(paramsWithoutPaging, p => p.set('q', query)).toString(),
+    search: editParams(paramsWithoutPaging, (p) =>
+      p.set('q', query)
+    ).toString(),
   });
 
   let content;

webui/tsconfig.json

@@ -22,7 +22,8 @@
       "node_modules/@types/",
       "types/"
     ],
-    "baseUrl": "."
+    "baseUrl": ".",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"