Small name refactoring and improvement to dev

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

plugins/airbrake/api-report.md

@@ -8,10 +8,10 @@
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { RouteRef } from '@backstage/core-plugin-api';
 
-// Warning: (ae-missing-release-tag) "AirbrakePage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+// Warning: (ae-missing-release-tag) "AirbrakeWidget" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const AirbrakePage: () => JSX.Element;
+export const AirbrakeWidget: () => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "airbrakePlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

plugins/airbrake/dev/index.tsx

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { AirbrakePage, airbrakePlugin } from '../src/plugin';
+import { AirbrakeWidget, airbrakePlugin } from '../src/plugin';
 import {
   Content,
   ContentHeader,
@@ -30,7 +30,10 @@ createDevApp()
   .addPage({
     element: (
       <Page themeId="tool">
-        <Header title="Airbrake" subtitle="Errors in your application">
+        <Header
+          title="Airbrake demo application"
+          subtitle="Test the widget below"
+        >
           <HeaderLabel label="Owner" value="Owner" />
           <HeaderLabel label="Lifecycle" value="Alpha" />
         </Header>
@@ -40,7 +43,7 @@ createDevApp()
               A description of your plugin goes here.
             </SupportButton>
           </ContentHeader>
-          <AirbrakePage />
+          <AirbrakeWidget />
         </Content>
       </Page>
     ),

plugins/airbrake/src/index.test.ts

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AirbrakePage, airbrakePlugin } from './index';
+import { AirbrakeWidget, airbrakePlugin } from './index';
 
 describe('The Airbrake plugin index file', () => {
   it('exports the plugin and page', async () => {
-    expect(AirbrakePage).toBeTruthy();
+    expect(AirbrakeWidget).toBeTruthy();
     expect(airbrakePlugin).toBeTruthy();
   });
 });

plugins/airbrake/src/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { airbrakePlugin, AirbrakePage } from './plugin';
+export { airbrakePlugin, AirbrakeWidget } from './plugin';

plugins/airbrake/src/plugin.test.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { AirbrakePage, airbrakePlugin } from './plugin';
+import { AirbrakeWidget, airbrakePlugin } from './plugin';
 import { renderWithEffects } from '@backstage/test-utils';
 import { createApp } from '@backstage/app-defaults';
 import { Route } from 'react-router';
@@ -48,7 +48,7 @@ describe('Airbrake', () => {
     const rendered = await renderWithEffects(
       <AppProvider>
         <AppRouter>
-          <Route path="/airbrake" element={<AirbrakePage />} />
+          <Route path="/airbrake" element={<AirbrakeWidget />} />
         </AppRouter>
       </AppProvider>,
     );

plugins/airbrake/src/plugin.ts

@@ -27,7 +27,7 @@ export const airbrakePlugin = createPlugin({
   },
 });
 
-export const AirbrakePage = airbrakePlugin.provide(
+export const AirbrakeWidget = airbrakePlugin.provide(
   createRoutableExtension({
     name: 'AirbrakePage',
     component: () =>