feat: allow setting entity to ask in URL param

Author: drodil

docs/catalog.md

@@ -0,0 +1,34 @@
+# Integration with catalog
+
+You can integrate list of questions ans question post form to the catalog page. Create a new component to
+packages/app/src/components/catalog/EntityPage/content/QetaContent.tsx:
+
+```ts
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { Container } from '@material-ui/core';
+import { stringifyEntityRef } from '@backstage/catalog-model';
+import React from 'react';
+import { AskForm, QuestionsContainer } from '@drodil/backstage-plugin-qeta';
+
+export const QetaContent = () => {
+  const { entity } = useEntity();
+
+  return (
+    <Container>
+      <QuestionsContainer entity={stringifyEntityRef(entity)} />
+      <AskForm
+        entity={stringifyEntityRef(entity)}
+        onPost={q => console.log(q)}
+      />
+    </Container>
+  );
+};
+```
+
+This can then be added to the specific component pages as a new tab, for example:
+
+```ts
+<EntityLayout.Route path="/qeta" title="Q&A">
+  <QetaContent />
+</EntityLayout.Route>
+```

docs/index.md

@@ -8,3 +8,4 @@
 ## Usage
 
 - [Integration with `@backstage/plugin-search`](search.md)
+- [Integration with Backstage catalog](catalog.md)

plugins/qeta/src/components/AskForm/AskForm.tsx

@@ -4,7 +4,7 @@ import { Alert, Autocomplete } from '@material-ui/lab';
 import React, { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import 'react-mde/lib/styles/css/react-mde-all.css';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
   QetaApi,
   qetaApiRef,
@@ -78,12 +78,15 @@ export const AskForm = (props: {
 }) => {
   const { id, entity, onPost } = props;
   const navigate = useNavigate();
+  const [entityRef, setEntityRef] = React.useState(entity);
   const [values, setValues] = React.useState(getDefaultValues());
   const [error, setError] = React.useState(false);
   const [availableTags, setAvailableTags] = React.useState<string[] | null>([]);
+  const [searchParams, _setSearchParams] = useSearchParams();
   const [availableEntities, setAvailableEntities] = React.useState<
     Entity[] | null
   >([]);
+
   const qetaApi = useApi(qetaApiRef);
   const catalogApi = useApi(catalogApiRef);
   const configApi = useApi(configApiRef);
@@ -131,6 +134,15 @@ export const AskForm = (props: {
       .catch(_e => setError(true));
   };
 
+  useEffect(() => {
+    if (!entityRef) {
+      const e = searchParams.get('entity');
+      if (e) {
+        setEntityRef(e);
+      }
+    }
+  }, [entityRef, searchParams]);
+
   useEffect(() => {
     if (id) {
       getValues(qetaApi, catalogApi, id).then(data => {
@@ -140,14 +152,17 @@ export const AskForm = (props: {
   }, [qetaApi, catalogApi, id]);
 
   useEffect(() => {
-    if (entity) {
-      catalogApi.getEntityByRef(entity).then(data => {
+    if (entityRef) {
+      catalogApi.getEntityByRef(entityRef).then(data => {
         if (data) {
-          setValues({ ...values, entities: [data] });
+          setValues(v => {
+            return { ...v, entities: [data] };
+          });
+          setAvailableEntities([data]);
         }
       });
     }
-  }, [catalogApi, entity, values]);
+  }, [catalogApi, entityRef]);
 
   useEffect(() => {
     reset(values);
@@ -165,6 +180,9 @@ export const AskForm = (props: {
   }, [qetaApi]);
 
   useEffect(() => {
+    if (entityRef) {
+      return;
+    }
     let entityKinds = configApi.getOptionalStringArray('qeta.entityKinds');
     if (!entityKinds) {
       entityKinds = ['Component'];
@@ -184,7 +202,7 @@ export const AskForm = (props: {
       .then(data =>
         data ? setAvailableEntities(data.items) : setAvailableEntities(null),
       );
-  }, [catalogApi, configApi]);
+  }, [catalogApi, entityRef, configApi]);
 
   return (
     <form onSubmit={handleSubmit(postQuestion)}>
@@ -254,7 +272,7 @@ export const AskForm = (props: {
           render={({ field: { onChange, value } }) => (
             <Autocomplete
               multiple
-              hidden={!!entity}
+              hidden={!!entityRef}
               value={value}
               id="entities-select"
               options={availableEntities}

plugins/qeta/src/components/QuestionsContainer/QuestionList.tsx

@@ -12,8 +12,9 @@ export const QuestionList = (props: {
   error: any;
   response?: QuestionsResponse;
   onPageChange: (page: number) => void;
+  entity?: string;
 }) => {
-  const { loading, error, response, onPageChange } = props;
+  const { loading, error, response, onPageChange, entity } = props;
   const [page, setPage] = React.useState(1);
   const pageSize = 10;
   const styles = useStyles();
@@ -47,7 +48,10 @@ export const QuestionList = (props: {
           <Typography variant="h6">No questions found</Typography>
         </Grid>
         <Grid item>
-          <Button href="/qeta/ask" startIcon={<HelpOutline />}>
+          <Button
+            href={entity ? `/qeta/ask?entity=${entity}` : '/qeta/ask'}
+            startIcon={<HelpOutline />}
+          >
             Go ahead and ask one!
           </Button>
         </Grid>

plugins/qeta/src/components/QuestionsContainer/QuestionsContainer.tsx

@@ -79,6 +79,7 @@ export const QuestionsContainer = (props: QuestionsContainerProps) => {
         error={error}
         response={response}
         onPageChange={onPageChange}
+        entity={entity}
       />
     </Box>
   );