Added in FlexColumn.tsx

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

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React, { useState } from 'react';
-import { makeStyles, MenuItem, TextField } from '@material-ui/core';
+import { makeStyles, TextField } from '@material-ui/core';
 
 const useStyles = makeStyles({
   root: {
@@ -26,42 +26,21 @@ const useStyles = makeStyles({
 
 export const ApiBar = () => {
   const classes = useStyles();
-  const apiOptions = [
-    { 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}>
       <TextField
-        select
-        label="API"
-        value={api}
-        onChange={e => setApi(e.target.value)}
-      >
-        {apiOptions.map(option => (
-          <MenuItem key={option.value} value={option.value}>
-            {option.label}
-          </MenuItem>
-        ))}
-      </TextField>
-      {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)}
-          />
-        </>
-      )}
+        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/FlexColumn/FlexColumn.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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, { PropsWithChildren, ReactNode } from 'react';
+
+export declare type FlexColumnProps = {
+  children?: ReactNode;
+};
+
+export const FlexColumn = (props: PropsWithChildren<FlexColumnProps>) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2em',
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,18 @@
+/*
+ * 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 { FlexColumn } from './FlexColumn';
+export type { FlexColumnProps } from './FlexColumn';

plugins/airbrake/dev/index.tsx

@@ -23,6 +23,7 @@ import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { createEntity } from '../src/api/mock/mock-entity';
 import AirplanemodeActiveIcon from '@material-ui/icons/AirplanemodeActive';
 import AirplanemodeInactiveIcon from '@material-ui/icons/AirplanemodeInactive';
+import { FlexColumn } from './components/FlexColumn';
 
 createDevApp()
   .registerPlugin(airbrakePlugin)
@@ -39,17 +40,11 @@ createDevApp()
           subtitle="This uses a fake API"
         />
         <Content>
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '2em',
-            }}
-          >
+          <FlexColumn>
             <EntityProvider entity={createEntity('demo')}>
               <EntityAirbrakeContent />
             </EntityProvider>
-          </div>
+          </FlexColumn>
         </Content>
       </Page>
     ),
@@ -65,18 +60,12 @@ createDevApp()
           subtitle="Test the plugin below"
         />
         <Content>
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '2em',
-            }}
-          >
+          <FlexColumn>
             <ApiBar />
             <EntityProvider entity={createEntity('demo')}>
               <EntityAirbrakeContent />
             </EntityProvider>
-          </div>
+          </FlexColumn>
         </Content>
       </Page>
     ),