Merge pull request #653 from spotify/rugvip/dev-utils

Add new dev-utils package with createDevApp() to simplify plugin dev setup

plugins/graphiql/dev/index.tsx

@@ -14,56 +14,27 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
-import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
-import HomeIcon from '@material-ui/icons/Home';
-import { ThemeProvider, CssBaseline } from '@material-ui/core';
-import {
-  createApp,
-  SidebarPage,
-  Sidebar,
-  SidebarItem,
-  SidebarSpacer,
-  ApiRegistry,
-} from '@backstage/core';
-import { lightTheme } from '@backstage/theme';
+import { createDevApp } from '@backstage/dev-utils';
 import { plugin, GraphQLEndpoints, graphQlBrowseApiRef } from '../src';
 
-const graphQlBrowseApi = GraphQLEndpoints.from([
-  GraphQLEndpoints.create({
-    id: 'gitlab',
-    title: 'GitLab',
-    url: 'https://gitlab.com/api/graphql',
-  }),
-  GraphQLEndpoints.create({
-    id: 'countries',
-    title: 'Countries',
-    url: 'https://countries.trevorblades.com/',
-  }),
-]);
-
-const app = createApp();
-app.registerApis(ApiRegistry.from([[graphQlBrowseApiRef, graphQlBrowseApi]]));
-app.registerPlugin(plugin);
-const AppComponent = app.build();
-
-const App: FC<{}> = () => {
-  return (
-    <ThemeProvider theme={lightTheme}>
-      <CssBaseline>
-        <BrowserRouter>
-          <SidebarPage>
-            <Sidebar>
-              <SidebarSpacer />
-              <SidebarItem icon={HomeIcon} to="/graphiql" text="Home" />
-            </Sidebar>
-            <AppComponent />
-          </SidebarPage>
-        </BrowserRouter>
-      </CssBaseline>
-    </ThemeProvider>
-  );
-};
-
-ReactDOM.render(<App />, document.getElementById('root'));
+createDevApp()
+  .registerPlugin(plugin)
+  .registerApiFactory({
+    implements: graphQlBrowseApiRef,
+    deps: {},
+    factory() {
+      return GraphQLEndpoints.from([
+        GraphQLEndpoints.create({
+          id: 'gitlab',
+          title: 'GitLab',
+          url: 'https://gitlab.com/api/graphql',
+        }),
+        GraphQLEndpoints.create({
+          id: 'countries',
+          title: 'Countries',
+          url: 'https://countries.trevorblades.com/',
+        }),
+      ]);
+    },
+  })
+  .render();

plugins/graphiql/package.json

@@ -27,6 +27,8 @@
   },
   "devDependencies": {
     "@backstage/cli": "^0.1.1-alpha.4",
+    "@backstage/dev-utils": "^0.1.1-alpha.4",
+    "@backstage/test-utils": "^0.1.1-alpha.4",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -38,7 +40,6 @@
   },
   "dependencies": {
     "@backstage/core": "^0.1.1-alpha.4",
-    "@backstage/test-utils": "^0.1.1-alpha.4",
     "@backstage/theme": "^0.1.1-alpha.4",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",

plugins/home-page/dev/index.tsx

@@ -14,41 +14,9 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
-import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
-import HomeIcon from '@material-ui/icons/Home';
-import { ThemeProvider, CssBaseline } from '@material-ui/core';
-import {
-  createApp,
-  SidebarPage,
-  Sidebar,
-  SidebarItem,
-  SidebarSpacer,
-} from '@backstage/core';
-import { lightTheme } from '@backstage/theme';
+import { createDevApp } from '@backstage/dev-utils';
 import { plugin } from '../src/plugin';
 
-const app = createApp();
-app.registerPlugin(plugin);
-const AppComponent = app.build();
-
-const App: FC<{}> = () => {
-  return (
-    <ThemeProvider theme={lightTheme}>
-      <CssBaseline>
-        <BrowserRouter>
-          <SidebarPage>
-            <Sidebar>
-              <SidebarSpacer />
-              <SidebarItem icon={HomeIcon} to="/home" text="Home" />
-            </Sidebar>
-            <AppComponent />
-          </SidebarPage>
-        </BrowserRouter>
-      </CssBaseline>
-    </ThemeProvider>
-  );
-};
-
-ReactDOM.render(<App />, document.getElementById('root'));
+createDevApp()
+  .registerPlugin(plugin)
+  .render();

plugins/home-page/package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@backstage/cli": "^0.1.1-alpha.4",
+    "@backstage/dev-utils": "^0.1.1-alpha.4",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",