restrcuture plugin

packages/app/src/App.tsx

@@ -33,7 +33,6 @@ import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
 import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
-import { WorkflowsPage } from '@internal/plugin-workflows';
 
 const app = createApp({
   apis,
@@ -92,7 +91,6 @@ const routes = (
     </Route>
     <Route path="/settings" element={<UserSettingsPage />} />
     <Route path="/catalog-graph" element={<CatalogGraphPage />} />
-    <Route path="/workflows" element={<WorkflowsPage />} />
   </FlatRoutes>
 );
 

packages/app/src/components/catalog/EntityPage.tsx

@@ -58,6 +58,8 @@ import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 
 import { EntityKubernetesContent } from '@backstage/plugin-kubernetes';
 
+import {EntityWorkflowsContent} from '@internal/plugin-workflows'
+
 const techdocsContent = (
   <EntityTechdocsContent>
     <TechDocsAddons>
@@ -347,6 +349,9 @@ const systemPage = (
     <EntityLayout.Route path="/kubernetes" title="Kubernetes">
       <EntityKubernetesContent refreshIntervalMs={30000} />
     </EntityLayout.Route>
+    <EntityLayout.Route path="/workflows" title="Workflows">
+      <EntityWorkflowsContent />
+    </EntityLayout.Route>
   </EntityLayout>
 );
 

plugins/workflows/dev/index.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import { createDevApp } from '@backstage/dev-utils';
-import { workflowsPlugin, WorkflowsPage } from '../src/plugin';
-
-createDevApp()
-  .registerPlugin(workflowsPlugin)
-  .addPage({
-    element: <WorkflowsPage />,
-    title: 'Root Page',
-    path: '/workflows'
-  })
-  .render();
+// import React from 'react';
+// import { createDevApp } from '@backstage/dev-utils';
+// import { workflowsPlugin, EntityWorkflowsContent } from '../src/plugin';
+//
+// createDevApp()
+//   .registerPlugin(workflowsPlugin)
+//   .addPage({
+//     element: <WorkflowsPage />,
+//     title: 'Root Page',
+//     path: '/workflows'
+//   })
+//   .render();

plugins/workflows/src/components/BlueprintComponent/ExampleComponent.tsx

@@ -12,9 +12,9 @@ import {
   HeaderLabel,
   SupportButton,
 } from '@backstage/core-components';
-import { ExampleFetchComponent } from '../ExampleFetchComponent';
+import {FetchTFState} from "./FetchTFState";
 
-export const ExampleComponent = () => (
+export const BlueprintsComponent = () => (
   <Page themeId="tool">
     <Header title="Blueprint information">
       <HeaderLabel label="Owner" value="Team X" />
@@ -42,7 +42,7 @@ export const ExampleComponent = () => (
           </InfoCard>
         </Grid>
         <Grid item>
-          <ExampleFetchComponent />
+          <FetchTFState />
         </Grid>
       </Grid>
     </Content>

plugins/workflows/src/components/BlueprintComponent/FetchTFState.tsx

@@ -52,7 +52,7 @@ export const TFTable = (props: TFTableProps) => {
   );
 }
 
-export const ExampleFetchComponent = () => {
+export const FetchTFState = () => {
 
   const tfdata = tfstate as TFState
   const resources =  tfdata.resources.map(value => {

plugins/workflows/src/components/BlueprintComponent/index.ts

@@ -0,0 +1 @@
+export { BlueprintsComponent } from './ExampleComponent';

plugins/workflows/src/components/ExampleComponent/index.ts

@@ -1 +0,0 @@
-export { ExampleComponent } from './ExampleComponent';

plugins/workflows/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ExampleFetchComponent } from './ExampleFetchComponent';
-import { rest } from 'msw';
-import { setupServer } from 'msw/node';
-import { setupRequestMockHandlers } from '@backstage/test-utils';
-
-describe('ExampleFetchComponent', () => {
-  const server = setupServer();
-  // Enable sane handlers for network requests
-  setupRequestMockHandlers(server);
-
-  // setup mock response
-  beforeEach(() => {
-    server.use(
-      rest.get('https://randomuser.me/*', (_, res, ctx) =>
-        res(ctx.status(200), ctx.delay(2000), ctx.json({})),
-      ),
-    );
-  });
-  it('should render', async () => {
-    await render(<ExampleFetchComponent />);
-    expect(await screen.findByTestId('progress')).toBeInTheDocument();
-  });
-});

plugins/workflows/src/components/ExampleFetchComponent/index.ts

@@ -1 +0,0 @@
-export { ExampleFetchComponent } from './ExampleFetchComponent';

plugins/workflows/src/index.ts

@@ -1 +1 @@
-export { workflowsPlugin, WorkflowsPage } from './plugin';
+export { workflowsPlugin, EntityWorkflowsContent } from './plugin';

plugins/workflows/src/plugin.ts

@@ -1,19 +1,19 @@
 import { createPlugin, createRoutableExtension } from '@backstage/core-plugin-api';
 
-import { rootRouteRef } from './routes';
+import { rootCatalogWorkflowsRouteRef } from './routes';
 
 export const workflowsPlugin = createPlugin({
   id: 'workflows',
   routes: {
-    root: rootRouteRef,
+    entityContent: rootCatalogWorkflowsRouteRef,
   },
 });
 
-export const WorkflowsPage = workflowsPlugin.provide(
+export const EntityWorkflowsContent = workflowsPlugin.provide(
   createRoutableExtension({
-    name: 'WorkflowsPage',
+    name: 'EntityWorkflowsContent',
     component: () =>
-      import('./components/ExampleComponent').then(m => m.ExampleComponent),
-    mountPoint: rootRouteRef,
+      import('./components/BlueprintComponent').then(m => m.BlueprintsComponent),
+    mountPoint: rootCatalogWorkflowsRouteRef,
   }),
 );

plugins/workflows/src/routes.ts

@@ -1,5 +1,5 @@
 import { createRouteRef } from '@backstage/core-plugin-api';
 
-export const rootRouteRef = createRouteRef({
+export const rootCatalogWorkflowsRouteRef = createRouteRef({
   id: 'workflows',
 });