graphql-voyager: bump dep to 2.0 + add dev setup

.changeset/odd-students-mix.md

@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+Workaround for style type inconsistencies within Material-UI v4 that could cause type errors when using font weights from the theme as styles.

.changeset/tidy-foxes-perform.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-graphql-voyager': minor
+---
+
+Bumped `graphql-voyager` dependency to 2.0. The `workerURI` and `loadWorker` options have been removed, as they are not longer needed.

packages/theme/package.json

@@ -38,6 +38,7 @@
   },
   "peerDependencies": {
     "@material-ui/core": "^4.12.2",
+    "@material-ui/styles": "^4.11.0",
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
     "react-dom": "^16.13.1 || ^17.0.0"

packages/theme/src/v4/types.ts

@@ -22,6 +22,7 @@ import type {
   PaletteOptions as MuiPaletteOptions,
   Palette as MuiPalette,
 } from '@material-ui/core/styles/createPalette';
+import { CSSProperties } from '@material-ui/styles/withStyles';
 import {
   BackstagePaletteAdditions,
   BackstageThemeAdditions,
@@ -104,3 +105,21 @@ declare module '@material-ui/core/styles/createTheme' {
 
   interface ThemeOptions extends Partial<BackstageThemeAdditions> {}
 }
+
+// This fixes as type incompatibility that is caused by a variance in the declaration of
+// the font weight types in the MUI v4 theme typography and styles such as through `makeStyles()`.
+// The font weight in styles are defined to be `CSSProperties["fontWeight"]` from `csstype`, while the
+// front weight in the typography are defined to be `React.CSSProperties["fontWeight"]` from `@types/react`.
+//
+// This is usually not an issue, but with a bad combination of `csstype` version and the wrong Yarn workspace
+// hoisting, you can end up in a case where font weights from the theme are not assignable as styles.
+//
+// This makes sure that the font weights in the theme are compatible with the styles.
+declare module '@material-ui/core/styles/createTypography' {
+  interface Typography {
+    fontWeightLight: CSSProperties['fontWeight'];
+    fontWeightRegular: CSSProperties['fontWeight'];
+    fontWeightMedium: CSSProperties['fontWeight'];
+    fontWeightBold: CSSProperties['fontWeight'];
+  }
+}

plugins/graphql-voyager/api-report.md

@@ -9,7 +9,6 @@ import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { VoyagerDisplayOptions } from 'graphql-voyager/typings/components/Voyager';
-import { WorkerCallback } from 'graphql-voyager/typings/utils/types';
 
 // @public (undocumented)
 export type GraphQLVoyagerApi = {
@@ -29,8 +28,6 @@ export type GraphQLVoyagerEndpoint = {
     displayOptions?: VoyagerDisplayOptions;
     hideDocs?: boolean;
     hideSettings?: boolean;
-    workerURI?: string;
-    loadWorker?: WorkerCallback;
   };
 };
 

plugins/graphql-voyager/dev/index.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { createDevApp } from '@backstage/dev-utils';
+import {
+  graphqlVoyagerPlugin,
+  graphQlVoyagerApiRef,
+  GraphQLVoyagerEndpoints,
+  GraphqlVoyagerPage,
+} from '../src';
+
+createDevApp()
+  .registerPlugin(graphqlVoyagerPlugin)
+  .registerApi({
+    api: graphQlVoyagerApiRef,
+    deps: {},
+    factory() {
+      return GraphQLVoyagerEndpoints.from([
+        {
+          id: 'graphql-voyager-endpoint-id',
+          title: 'Countries',
+          introspectionErrorMessage:
+            'Unable to perform introspection, make sure you are on the correct environment.',
+          introspection: async query => {
+            const res = await fetch('https://countries.trevorblades.com', {
+              method: 'POST',
+              body: JSON.stringify({ query }),
+              headers: {
+                'Content-Type': 'application/json',
+              },
+            });
+
+            return res.json();
+          },
+          voyagerProps: {
+            hideDocs: true,
+          },
+        },
+      ]);
+    },
+  })
+  .addPage({
+    title: 'GQL Voyager',
+    element: <GraphqlVoyagerPage />,
+  })
+  .render();

plugins/graphql-voyager/package.json

@@ -35,7 +35,7 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "graphql-voyager": "^1.0.0-rc.31",
+    "graphql-voyager": "^2.0.0",
     "react-use": "^17.2.4"
   },
   "peerDependencies": {

plugins/graphql-voyager/src/lib/api/types.ts

@@ -15,7 +15,6 @@
  */
 import { createApiRef } from '@backstage/core-plugin-api';
 import { VoyagerDisplayOptions } from 'graphql-voyager/typings/components/Voyager';
-import { WorkerCallback } from 'graphql-voyager/typings/utils/types';
 
 /** @public */
 export type GraphQLVoyagerEndpoint = {
@@ -27,8 +26,6 @@ export type GraphQLVoyagerEndpoint = {
     displayOptions?: VoyagerDisplayOptions;
     hideDocs?: boolean;
     hideSettings?: boolean;
-    workerURI?: string;
-    loadWorker?: WorkerCallback;
   };
 };