chore: nfs improvements

Author: drodil

plugins/qeta/dev/ComponentPage.tsx

@@ -1,20 +1,16 @@
-import { Content, Page } from '@backstage/core-components';
-import { PostsContainer } from '@drodil/backstage-plugin-qeta-react';
-import { Container } from '@material-ui/core';
+import { EntityPostsContent } from '../src';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 
 export const ComponentPage = () => {
   return (
-    <Page themeId="home">
-      <Content>
-        <Container>
-          <PostsContainer
-            entity="component:default/test-component"
-            showTitle
-            showAskButton
-            type="question"
-          />
-        </Container>
-      </Content>
-    </Page>
+    <EntityProvider
+      entity={{
+        apiVersion: 'backstage.io/v1alpha1',
+        kind: 'component',
+        metadata: { name: 'test-component' },
+      }}
+    >
+      <EntityPostsContent />
+    </EntityProvider>
   );
 };

plugins/qeta/dev/index.tsx

@@ -1,11 +1,7 @@
 import { createDevApp } from '@backstage/dev-utils';
 import { QetaPage } from '../src/plugin';
-import {
-  createPlugin,
-  createRoutableExtension,
-} from '@backstage/core-plugin-api';
+import { createPlugin } from '@backstage/core-plugin-api';
 import { qetaRouteRef } from '@drodil/backstage-plugin-qeta-react';
-import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { TablePage } from './TablePage';
 import { HomePage } from './HomePage';
 import { TagPage } from './TagPage';
@@ -20,6 +16,7 @@ import { Box } from '@material-ui/core';
 import { Alert, AlertTitle } from '@material-ui/lab';
 import { searchPage } from './SearchPage';
 import { searchPlugin } from '@backstage/plugin-search';
+import { ComponentPage } from './ComponentPage.tsx';
 
 const IntroElement = () => (
   <Box marginBottom={4}>
@@ -31,14 +28,6 @@ const IntroElement = () => (
   </Box>
 );
 
-export const CatalogEntityPage: () => JSX.Element = catalogPlugin.provide(
-  createRoutableExtension({
-    name: 'CatalogEntityPage',
-    component: () => import('./ComponentPage').then(m => m.ComponentPage),
-    mountPoint: entityRouteRef,
-  }),
-);
-
 const qetaDevPlugin = createPlugin({
   id: 'qetaDev',
   routes: {
@@ -68,8 +57,8 @@ createDevApp()
     path: '/qeta',
   })
   .addPage({
-    element: <CatalogEntityPage />,
-    title: 'Component',
+    element: <ComponentPage />,
+    title: 'Catalog Page',
     path: '/catalog/default/component/test-component',
   })
   .addPage({

plugins/qeta/src/alpha.tsx

@@ -13,7 +13,7 @@ import { qetaApiRef, qetaRouteRef } from '@drodil/backstage-plugin-qeta-react';
 import { discoveryApiRef, fetchApiRef } from '@backstage/core-plugin-api';
 import { QetaClient } from '@drodil/backstage-plugin-qeta-common';
 import LiveHelpIcon from '@material-ui/icons/LiveHelp';
-import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';
+import { EntityContentBlueprint } from '@backstage/plugin-catalog-react/alpha';
 
 const qetaApi = ApiBlueprint.make({
   params: defineParams =>
@@ -38,22 +38,14 @@ const qetaPage = PageBlueprint.make({
   },
 });
 
-const EntityPostsGridCard = EntityCardBlueprint.make({
-  name: 'entity-posts-grid',
-  params: {
-    loader: async () =>
-      import('./components/EntityCards/EntityPostsGridCard').then(m =>
-        compatWrapper(<m.EntityPostsGridCard />),
-      ),
-  },
-});
-
-const EntityPostsContainerCard = EntityCardBlueprint.make({
-  name: 'entity-posts-container',
+const EntityPostsContent = EntityContentBlueprint.make({
+  name: 'entity-posts-content',
   params: {
+    path: '/qeta',
+    title: 'Q&A',
     loader: async () =>
-      import('./components/EntityCards/EntityPostsContainerCard').then(m =>
-        compatWrapper(<m.EntityPostsContainerCard />),
+      import('./components/EntityPostsContent/EntityPostsContent.tsx').then(m =>
+        compatWrapper(<m.EntityPostsContent />),
       ),
   },
 });
@@ -78,13 +70,7 @@ export default createFrontendPlugin({
   routes: convertLegacyRouteRefs({
     root: qetaRouteRef,
   }),
-  extensions: [
-    qetaApi,
-    qetaPage,
-    EntityPostsGridCard,
-    EntityPostsContainerCard,
-    qetaNavItem,
-  ],
+  extensions: [qetaApi, qetaPage, EntityPostsContent, qetaNavItem],
 });
 
 export { qetaTranslationRef } from '@drodil/backstage-plugin-qeta-react';

plugins/qeta/src/components/EntityPostsContent/EntityPostsContent.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import {
+  PostsContainer,
+  PostsContainerProps,
+  ViewType,
+} from '@drodil/backstage-plugin-qeta-react';
+import { Content } from '@backstage/core-components';
+import { stringifyEntityRef } from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { Container } from '@material-ui/core';
+
+export const EntityPostsContent = (props: PostsContainerProps) => {
+  const [view, setView] = useState<ViewType>('list');
+  const { entity } = useEntity();
+  return (
+    <Content>
+      <Container>
+        <PostsContainer
+          {...props}
+          entity={props.entity ? props.entity : stringifyEntityRef(entity)}
+          view={view}
+          onViewChange={setView}
+        />
+      </Container>
+    </Content>
+  );
+};

plugins/qeta/src/components/EntityPostsContent/index.ts

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

plugins/qeta/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './PostsTableCard';
 export * from './EntityCards';
+export * from './EntityPostsContent';
 export * from './Statistics';