Added the UI ability to change APIs

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>

plugins/airbrake/dev/components/ApiBar/ApiBar.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2022 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, { useState } from 'react';
+import { Select, SelectItem } from '@backstage/core-components';
+import { makeStyles, TextField } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    gap: '1em',
+    flexWrap: 'wrap',
+  },
+});
+
+export const ApiBar = () => {
+  const classes = useStyles();
+  const apiOptions: SelectItem[] = [
+    { label: 'Fake', value: 'fake' },
+    { label: 'Real', value: 'real' },
+  ];
+  const [api, setApi] = useState<string>('fake');
+  const [projectId, setProjectId] = useState<number>();
+  const [apiKey, setApiKey] = useState<string>('');
+
+  return (
+    <div className={classes.root}>
+      <Select
+        items={apiOptions}
+        label="API"
+        selected={api}
+        onChange={newValue => setApi(newValue as string)}
+      />
+      {api === 'real' && (
+        <>
+          <TextField
+            label="Project ID"
+            value={projectId}
+            onChange={e => setProjectId(parseInt(e.target.value, 10))}
+          />
+          <TextField
+            label="API Key"
+            value={apiKey}
+            onChange={e => setApiKey(e.target.value)}
+          />
+        </>
+      )}
+    </div>
+  );
+};

plugins/airbrake/dev/components/ApiBar/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export { ApiBar } from './ApiBar';

plugins/airbrake/dev/index.tsx

@@ -16,15 +16,9 @@
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
 import { airbrakePlugin, EntityAirbrakeContent } from '../src';
-import {
-  Content,
-  ContentHeader,
-  Header,
-  HeaderLabel,
-  Page,
-  SupportButton,
-} from '@backstage/core-components';
 import { airbrakeApiRef, MockAirbrakeApi } from '../src/api';
+import { ApiBar } from './components/ApiBar';
+import { Content, Header, Page } from '@backstage/core-components';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { createEntity } from '../src/api/mock/mock-entity';
 
@@ -41,19 +35,20 @@ createDevApp()
         <Header
           title="Airbrake demo application"
           subtitle="Test the plugin below"
-        >
-          <HeaderLabel label="Owner" value="Owner" />
-          <HeaderLabel label="Lifecycle" value="Alpha" />
-        </Header>
+        />
         <Content>
-          <ContentHeader title="Airbrake">
-            <SupportButton>
-              A description of your plugin goes here.
-            </SupportButton>
-          </ContentHeader>
-          <EntityProvider entity={createEntity('demo')}>
-            <EntityAirbrakeContent />
-          </EntityProvider>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '2em',
+            }}
+          >
+            <ApiBar />
+            <EntityProvider entity={createEntity('demo')}>
+              <EntityAirbrakeContent />
+            </EntityProvider>
+          </div>
         </Content>
       </Page>
     ),