plugins/graphiql: replace example page with minimal graphiql page

plugins/graphiql/src/components/ExampleComponent/ExampleComponent.tsx

@@ -1,59 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * 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, { FC } from 'react';
-import { Typography, Grid } from '@material-ui/core';
-import {
-  InfoCard,
-  Header,
-  Page,
-  pageTheme,
-  Content,
-  ContentHeader,
-  HeaderLabel,
-  SupportButton,
-} from '@backstage/core';
-import ExampleFetchComponent from '../ExampleFetchComponent';
-
-const ExampleComponent: FC<{}> = () => (
-  <Page theme={pageTheme.tool}>
-    <Header title="Welcome to graphiql!" subtitle="Optional subtitle">
-      <HeaderLabel label="Owner" value="Team X" />
-      <HeaderLabel label="Lifecycle" value="Alpha" />
-    </Header>
-    <Content>
-      <ContentHeader title="Plugin title">
-        <SupportButton>A description of your plugin goes here.</SupportButton>
-      </ContentHeader>
-      <Grid container spacing={3} direction="column">
-        <Grid item>
-          <InfoCard title="Information card">
-            <Typography variant="body1">
-              All content should be wrapped in a card like this.
-            </Typography>
-          </InfoCard>
-        </Grid>
-        <Grid item>
-          <InfoCard title="Example User List (fetching data from randomuser.me)">
-            <ExampleFetchComponent />
-          </InfoCard>
-        </Grid>
-      </Grid>
-    </Content>
-  </Page>
-);
-
-export default ExampleComponent;

plugins/graphiql/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx

@@ -1,119 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * 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, { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Alert from '@material-ui/lab/Alert';
-import { useAsync } from 'react-use';
-import { Progress } from '@backstage/core';
-
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-  avatar: {
-    height: 32,
-    width: 32,
-    borderRadius: '50%',
-  },
-});
-
-type User = {
-  gender: string; // "male"
-  name: {
-    title: string; // "Mr",
-    first: string; // "Duane",
-    last: string; // "Reed"
-  };
-  location: object; // {street: {number: 5060, name: "Hickory Creek Dr"}, city: "Albany", state: "New South Wales",…}
-  email: string; // "duane.reed@example.com"
-  login: object; // {uuid: "4b785022-9a23-4ab9-8a23-cb3fb43969a9", username: "blackdog796", password: "patch",…}
-  dob: object; // {date: "1983-06-22T12:30:23.016Z", age: 37}
-  registered: object; // {date: "2006-06-13T18:48:28.037Z", age: 14}
-  phone: string; // "07-2154-5651"
-  cell: string; // "0405-592-879"
-  id: {
-    name: string; // "TFN",
-    value: string; // "796260432"
-  };
-  picture: { medium: string }; // {medium: "https://randomuser.me/api/portraits/men/95.jpg",…}
-  nat: string; // "AU"
-};
-
-type DenseTableProps = {
-  users: User[];
-};
-
-export const DenseTable: FC<DenseTableProps> = ({ users }) => {
-  const classes = useStyles();
-
-  return (
-    <TableContainer>
-      <Table className={classes.table} size="small" aria-label="a dense table">
-        <TableHead>
-          <TableRow>
-            <TableCell>Avatar</TableCell>
-            <TableCell>Name</TableCell>
-            <TableCell>Email</TableCell>
-            <TableCell>Nationality</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {users.map(user => (
-            <TableRow key={user.email}>
-              <TableCell>
-                <img
-                  src={user.picture.medium}
-                  className={classes.avatar}
-                  alt={user.name.first}
-                />
-              </TableCell>
-              <TableCell>
-                {user.name.first} {user.name.last}
-              </TableCell>
-              <TableCell>{user.email}</TableCell>
-              <TableCell>{user.nat}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-};
-
-const ExampleFetchComponent: FC<{}> = () => {
-  const { value, loading, error } = useAsync(async (): Promise<User[]> => {
-    const response = await fetch('https://randomuser.me/api/?results=20');
-    const data = await response.json();
-    return data.results;
-  }, []);
-
-  if (loading) {
-    return <Progress />;
-  } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
-  }
-
-  return <DenseTable users={value || []} />;
-};
-
-export default ExampleFetchComponent;

plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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, { FC, useState } from 'react';
+import { Tabs, Tab } from '@material-ui/core';
+import { Page, pageTheme, Content, Header, HeaderLabel } from '@backstage/core';
+import 'graphiql/graphiql.css';
+import GraphiQL from 'graphiql';
+
+const tabs = [
+  {
+    title: 'GitLab',
+    fetcher: async (params: any) => {
+      const res = await fetch('https://gitlab.com/api/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(params),
+      });
+      return res.json();
+    },
+  },
+  {
+    title: 'Countries',
+    fetcher: async (params: any) => {
+      const res = await fetch('https://countries.trevorblades.com/', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(params),
+      });
+      return res.json();
+    },
+  },
+];
+
+export const GraphiQLPage: FC<{}> = () => {
+  const [tabIndex, setTabIndex] = useState(0);
+
+  return (
+    <Page theme={pageTheme.tool}>
+      <Header title="GraphiQL">
+        <HeaderLabel label="Owner" value="Spotify" />
+        <HeaderLabel label="Lifecycle" value="Alpha" />
+      </Header>
+      <Content noPadding>
+        <Tabs value={tabIndex} onChange={(_, value) => setTabIndex(value)}>
+          {tabs.map(({ title }, index) => (
+            <Tab key={index} label={title} value={index} />
+          ))}
+        </Tabs>
+        <GraphiQL key={tabIndex} fetcher={tabs[tabIndex].fetcher} />
+      </Content>
+    </Page>
+  );
+};

plugins/graphiql/src/components/GraphiQLPage/graphiql.d.ts

@@ -14,15 +14,17 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { render } from '@testing-library/react';
-import mockFetch from 'jest-fetch-mock';
-import ExampleFetchComponent from './ExampleFetchComponent';
+declare module 'graphiql' {
+  import { FC } from 'react';
 
-describe('ExampleFetchComponent', () => {
-  it('should render', async () => {
-    mockFetch.mockResponse(() => new Promise(() => {}));
-    const rendered = render(<ExampleFetchComponent />);
-    expect(await rendered.findByTestId('progress')).toBeInTheDocument();
-  });
-});
+  type Props = {
+    fetcher: (params: any) => Promise<any>;
+    schema?: any;
+    storage?: Storage;
+    editorTheme?: string;
+  };
+
+  const GraphiQL: FC<Props>;
+
+  export default GraphiQL;
+}

plugins/graphiql/src/components/GraphiQLPage/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './ExampleComponent';
+export * from './GraphiQLPage';

plugins/graphiql/src/components/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './ExampleFetchComponent';
+export * from './GraphiQLPage';

plugins/graphiql/src/plugin.ts

@@ -15,11 +15,11 @@
  */
 
 import { createPlugin } from '@backstage/core';
-import ExampleComponent from './components/ExampleComponent';
+import { GraphiQLPage } from './components';
 
 export const plugin = createPlugin({
   id: 'graphiql',
   register({ router }) {
-    router.registerRoute('/graphiql', ExampleComponent);
+    router.registerRoute('/graphiql', GraphiQLPage);
   },
 });