From f4433d80c4fe6ad1ddf00bd8bcda99c15dc38450 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Wed, 30 Sep 2020 17:31:48 +0200 Subject: 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/src/apollo.ts | 12 +++--------- webui/src/components/Label.tsx | 2 +- webui/src/index.tsx | 2 +- webui/src/layout/CurrentIdentity.tsx | 2 +- webui/src/layout/Header.tsx | 2 +- webui/src/pages/bug/Bug.tsx | 4 ++-- webui/src/pages/bug/CommentForm.tsx | 2 +- webui/src/pages/bug/LabelChange.tsx | 2 +- webui/src/pages/bug/Message.tsx | 2 +- webui/src/pages/bug/SetStatus.tsx | 2 +- webui/src/pages/bug/SetTitle.tsx | 2 +- webui/src/pages/bug/Timeline.tsx | 2 +- webui/src/pages/list/BugRow.tsx | 4 ++-- webui/src/pages/list/Filter.tsx | 6 +++--- webui/src/pages/list/FilterToolbar.tsx | 6 +++--- webui/src/pages/list/ListQuery.tsx | 14 ++++++++------ 16 files changed, 31 insertions(+), 35 deletions(-) (limited to 'webui/src') diff --git a/webui/src/apollo.ts b/webui/src/apollo.ts index 785f0e7f0..998608426 100644 --- a/webui/src/apollo.ts +++ b/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, }), }); diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx index 1fb8caeaf..4aaa6bb61 100644 --- a/webui/src/components/Label.tsx +++ b/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', diff --git a/webui/src/index.tsx b/webui/src/index.tsx index 9bdaddcae..f07b869d7 100644 --- a/webui/src/index.tsx +++ b/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'; diff --git a/webui/src/layout/CurrentIdentity.tsx b/webui/src/layout/CurrentIdentity.tsx index 21f489ef7..8cd3585b0 100644 --- a/webui/src/layout/CurrentIdentity.tsx +++ b/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), }, diff --git a/webui/src/layout/Header.tsx b/webui/src/layout/Header.tsx index 317d3e234..b0fae3cc9 100644 --- a/webui/src/layout/Header.tsx +++ b/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, }, diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx index 34a3aa268..8d6d11cc8 100644 --- a/webui/src/pages/bug/Bug.tsx +++ b/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 && ( None yet )} - {bug.labels.map(l => ( + {bug.labels.map((l) => (
    • diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index 3724baf09..f2a2eb6c1 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/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 => ({ +const useStyles = makeStyles((theme) => ({ container: { margin: theme.spacing(2, 0), padding: theme.spacing(0, 2, 2, 2), diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx index 93fa8a32e..c40636c11 100644 --- a/webui/src/pages/bug/LabelChange.tsx +++ b/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, diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 4a438b775..91549483a 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/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', }, diff --git a/webui/src/pages/bug/SetStatus.tsx b/webui/src/pages/bug/SetStatus.tsx index e9674424d..855848f90 100644 --- a/webui/src/pages/bug/SetStatus.tsx +++ b/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, diff --git a/webui/src/pages/bug/SetTitle.tsx b/webui/src/pages/bug/SetTitle.tsx index 64b97517b..98bea928f 100644 --- a/webui/src/pages/bug/SetTitle.tsx +++ b/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, diff --git a/webui/src/pages/bug/Timeline.tsx b/webui/src/pages/bug/Timeline.tsx index 73c88cdfd..6e1d242e0 100644 --- a/webui/src/pages/bug/Timeline.tsx +++ b/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), diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx index 9c1883a38..8d8fb5cbc 100644 --- a/webui/src/pages/list/BugRow.tsx +++ b/webui/src/pages/list/BugRow.tsx @@ -42,7 +42,7 @@ const BugStatus: React.FC = ({ } }; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ cell: { display: 'flex', alignItems: 'center', @@ -92,7 +92,7 @@ function BugRow({ bug }: Props) { {bug.title} {bug.labels.length > 0 && ( - {bug.labels.map(l => ( + {bug.labels.map((l) => ( diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx index 0635e7f05..5c4a3d17e 100644 --- a/webui/src/pages/list/Filter.tsx +++ b/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 }; +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().concat(...parts).join(' '); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ element: { ...theme.typography.body2, color: '#444', diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx index c568a9dd3..216264168 100644 --- a/webui/src/pages/list/FilterToolbar.tsx +++ b/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 diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index 2d8c698a5..7eb6f4c5e 100644 --- a/webui/src/pages/list/ListQuery.tsx +++ b/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 => ({ +const useStyles = makeStyles((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; -- cgit v1.2.3