@drodil/backstage-plugin-qeta 3.60.0 → 4.0.1

package/README.md

@@ -15,21 +15,16 @@ Add the plugin to your frontend app:
 cd packages/app && yarn add @drodil/backstage-plugin-qeta
 ```
 
-Expose the questions page:
+Register the plugin in your frontend app:
 
 ```ts
 // packages/app/src/App.tsx
-import { QetaPage } from '@drodil/backstage-plugin-qeta';
+import { createApp } from '@backstage/frontend-defaults';
+import qetaPlugin from '@drodil/backstage-plugin-qeta';
 
-// ...
-
-const AppRoutes = () => (
-  <FlatRoutes>
-    // ...
-    <Route path="/qeta" element={<QetaPage />} />
-    // ...
-  </FlatRoutes>
-);
+const app = createApp({
+  features: [qetaPlugin],
+});
 ```
 
 An interface for Q&A is now available at `/qeta`.

package/dist/components/ArticlePage/ArticlePage.esm.js

@@ -2,12 +2,9 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useParams } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import { useSignal } from '@backstage/plugin-signals-react';
-import { WarningPanel } from '@backstage/core-components';
-import { qetaTranslationRef, useQetaConfig, useQetaApi, ContentHeader, PostHistoryButton, FollowPostButton, WriteArticleButton, AddToCollectionButton, AIAnswerCard, ArticleContent } from '@drodil/backstage-plugin-qeta-react';
-import { Container } from '@material-ui/core';
-import { Skeleton } from '@material-ui/lab';
+import { qetaTranslationRef, useQetaConfig, useQetaApi, EditButton, DeleteButton, RestoreButton, PostHistoryButton, FollowPostButton, AddToCollectionButton, AIAnswerCard, ArticleContent, RelativeTimeWithTooltip, AuthorHeaderItem } from '@drodil/backstage-plugin-qeta-react';
+import { Skeleton, Alert, Header, Box } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import LibraryBooksOutlined from '@material-ui/icons/LibraryBooksOutlined';
 
 const ArticlePage = () => {
   const { id } = useParams();
@@ -35,29 +32,74 @@ const ArticlePage = () => {
     return null;
   }
   if (loading) {
-    return /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 200 });
+    return /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 200 });
   }
   if (error || post === void 0) {
-    return /* @__PURE__ */ jsx(WarningPanel, { severity: "error", title: t("articlePage.errorLoading"), children: error?.message });
+    return /* @__PURE__ */ jsx(
+      Alert,
+      {
+        status: "danger",
+        title: t("articlePage.errorLoading"),
+        description: error?.message
+      }
+    );
   }
   if (post.type !== "article") {
-    return /* @__PURE__ */ jsx(WarningPanel, { title: "Not found", message: t("articlePage.notFound") });
+    return /* @__PURE__ */ jsx(
+      Alert,
+      {
+        status: "warning",
+        title: "Not found",
+        description: t("articlePage.notFound")
+      }
+    );
   }
+  const getMetadata = (q) => {
+    const metadata = [
+      {
+        label: t("postHeader.postedAtTime"),
+        value: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: q.created })
+      },
+      {
+        label: t("postHeader.author"),
+        value: /* @__PURE__ */ jsx(AuthorHeaderItem, { userEntityRef: q.author })
+      }
+    ];
+    if (q.updated) {
+      metadata.push({
+        label: t("postHeader.updatedAtTime"),
+        value: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: q.updated })
+      });
+    }
+    if (q.updatedBy) {
+      metadata.push({
+        label: t("postHeader.updatedBy"),
+        value: /* @__PURE__ */ jsx(AuthorHeaderItem, { userEntityRef: q.updatedBy })
+      });
+    }
+    metadata.push({
+      label: t("postHeader.views"),
+      value: views
+    });
+    return metadata;
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      ContentHeader,
+    /* @__PURE__ */ jsx(
+      Header,
       {
         title: post.title,
-        titleIcon: /* @__PURE__ */ jsx(LibraryBooksOutlined, { fontSize: "large" }),
-        children: [
+        metadata: getMetadata(post),
+        customActions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(EditButton, { entity: post, compact: true }),
+          /* @__PURE__ */ jsx(DeleteButton, { entity: post, compact: true }),
+          /* @__PURE__ */ jsx(RestoreButton, { entity: post, compact: true }),
           /* @__PURE__ */ jsx(PostHistoryButton, { post, onRestore: retry }),
           /* @__PURE__ */ jsx(FollowPostButton, { post }),
-          /* @__PURE__ */ jsx(WriteArticleButton, {}),
           /* @__PURE__ */ jsx(AddToCollectionButton, { post })
-        ]
+        ] })
       }
     ),
-    /* @__PURE__ */ jsxs(Container, { maxWidth: false, children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsx(
         AIAnswerCard,
         {

package/dist/components/ArticlePage/ArticlePage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticlePage.esm.js","sources":["../../../src/components/ArticlePage/ArticlePage.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\nimport { useEffect, useState } from 'react';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { WarningPanel } from '@backstage/core-components';\nimport { Article, QetaSignal } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  AddToCollectionButton,\n  AIAnswerCard,\n  ArticleContent,\n  ContentHeader,\n  PostHistoryButton,\n  qetaTranslationRef,\n  useQetaConfig,\n  useQetaApi,\n  WriteArticleButton,\n  FollowPostButton,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Container } from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport LibraryBooksOutlined from '@material-ui/icons/LibraryBooksOutlined';\n\nexport const ArticlePage = () => {\n  const { id } = useParams();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  const [views, setViews] = useState(0);\n\n  const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${id}`);\n\n  const {\n    value: post,\n    loading,\n    error,\n    retry,\n  } = useQetaApi(api => api.getPost(id), [id]);\n\n  useEffect(() => {\n    if (post) {\n      setViews(post.views);\n    }\n  }, [post]);\n\n  useEffect(() => {\n    if (lastSignal?.type === 'post_stats') {\n      setViews(lastSignal.views);\n    }\n  }, [lastSignal]);\n\n  if (disabled.articles) {\n    return null;\n  }\n\n  if (loading) {\n    return <Skeleton variant=\"rect\" height={200} />;\n  }\n\n  if (error || post === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('articlePage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (post.type !== 'article') {\n    return (\n      <WarningPanel title=\"Not found\" message={t('articlePage.notFound')} />\n    );\n  }\n\n  return (\n    <>\n      <ContentHeader\n        title={post.title}\n        titleIcon={<LibraryBooksOutlined fontSize=\"large\" />}\n      >\n        <PostHistoryButton post={post} onRestore={retry} />\n        <FollowPostButton post={post} />\n        <WriteArticleButton />\n        <AddToCollectionButton post={post} />\n      </ContentHeader>\n      <Container maxWidth={false}>\n        <AIAnswerCard\n          article={post as Article}\n          style={{ marginBottom: '2em' }}\n        />\n        <ArticleContent post={post} views={views} />\n      </Container>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAsBO,MAAM,cAAc,MAAM;AAC/B,EAAA,MAAM,EAAE,EAAA,EAAG,GAAI,SAAA,EAAU;AACzB,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,CAAC,CAAA;AAEpC,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAsB,CAAA,UAAA,EAAa,EAAE,CAAA,CAAE,CAAA;AAE9D,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,IAAA;AAAA,IACP,OAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACF,GAAI,WAAW,CAAA,GAAA,KAAO,GAAA,CAAI,QAAQ,EAAE,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAE3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,QAAA,CAAS,KAAK,KAAK,CAAA;AAAA,IACrB;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAA,EAAY,SAAS,YAAA,EAAc;AACrC,MAAA,QAAA,CAAS,WAAW,KAAK,CAAA;AAAA,IAC3B;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,IAAI,SAAS,QAAA,EAAU;AACrB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAQ,MAAA,EAAO,QAAQ,GAAA,EAAK,CAAA;AAAA,EAC/C;AAEA,EAAA,IAAI,KAAA,IAAS,SAAS,MAAA,EAAW;AAC/B,IAAA,uBACE,GAAA,CAAC,gBAAa,QAAA,EAAS,OAAA,EAAQ,OAAO,CAAA,CAAE,0BAA0B,CAAA,EAC/D,QAAA,EAAA,KAAA,EAAO,OAAA,EACV,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,IAAA,CAAK,SAAS,SAAA,EAAW;AAC3B,IAAA,2BACG,YAAA,EAAA,EAAa,KAAA,EAAM,aAAY,OAAA,EAAS,CAAA,CAAE,sBAAsB,CAAA,EAAG,CAAA;AAAA,EAExE;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,OAAO,IAAA,CAAK,KAAA;AAAA,QACZ,SAAA,kBAAW,GAAA,CAAC,oBAAA,EAAA,EAAqB,QAAA,EAAS,OAAA,EAAQ,CAAA;AAAA,QAElD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAY,SAAA,EAAW,KAAA,EAAO,CAAA;AAAA,0BACjD,GAAA,CAAC,oBAAiB,IAAA,EAAY,CAAA;AAAA,8BAC7B,kBAAA,EAAA,EAAmB,CAAA;AAAA,0BACpB,GAAA,CAAC,yBAAsB,IAAA,EAAY;AAAA;AAAA;AAAA,KACrC;AAAA,oBACA,IAAA,CAAC,SAAA,EAAA,EAAU,QAAA,EAAU,KAAA,EACnB,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,IAAA;AAAA,UACT,KAAA,EAAO,EAAE,YAAA,EAAc,KAAA;AAAM;AAAA,OAC/B;AAAA,sBACA,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAY,KAAA,EAAc;AAAA,KAAA,EAC5C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ArticlePage.esm.js","sources":["../../../src/components/ArticlePage/ArticlePage.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\nimport { useEffect, useState } from 'react';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport {\n  Article,\n  PostResponse,\n  QetaSignal,\n} from '@drodil/backstage-plugin-qeta-common';\nimport {\n  AddToCollectionButton,\n  AIAnswerCard,\n  ArticleContent,\n  AuthorHeaderItem,\n  DeleteButton,\n  EditButton,\n  FollowPostButton,\n  PostHistoryButton,\n  qetaTranslationRef,\n  RelativeTimeWithTooltip,\n  RestoreButton,\n  useQetaApi,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport {\n  Alert,\n  Box,\n  Header,\n  HeaderMetadataItem,\n  Skeleton,\n} from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const ArticlePage = () => {\n  const { id } = useParams();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  const [views, setViews] = useState(0);\n\n  const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${id}`);\n\n  const {\n    value: post,\n    loading,\n    error,\n    retry,\n  } = useQetaApi(api => api.getPost(id), [id]);\n\n  useEffect(() => {\n    if (post) {\n      setViews(post.views);\n    }\n  }, [post]);\n\n  useEffect(() => {\n    if (lastSignal?.type === 'post_stats') {\n      setViews(lastSignal.views);\n    }\n  }, [lastSignal]);\n\n  if (disabled.articles) {\n    return null;\n  }\n\n  if (loading) {\n    return <Skeleton width=\"100%\" height={200} />;\n  }\n\n  if (error || post === undefined) {\n    return (\n      <Alert\n        status=\"danger\"\n        title={t('articlePage.errorLoading')}\n        description={error?.message}\n      />\n    );\n  }\n\n  if (post.type !== 'article') {\n    return (\n      <Alert\n        status=\"warning\"\n        title=\"Not found\"\n        description={t('articlePage.notFound')}\n      />\n    );\n  }\n\n  const getMetadata = (q: PostResponse): HeaderMetadataItem[] => {\n    const metadata: HeaderMetadataItem[] = [\n      {\n        label: t('postHeader.postedAtTime'),\n        value: <RelativeTimeWithTooltip value={q.created} />,\n      },\n      {\n        label: t('postHeader.author'),\n        value: <AuthorHeaderItem userEntityRef={q.author} />,\n      },\n    ];\n\n    if (q.updated) {\n      metadata.push({\n        label: t('postHeader.updatedAtTime'),\n        value: <RelativeTimeWithTooltip value={q.updated} />,\n      });\n    }\n    if (q.updatedBy) {\n      metadata.push({\n        label: t('postHeader.updatedBy'),\n        value: <AuthorHeaderItem userEntityRef={q.updatedBy} />,\n      });\n    }\n    metadata.push({\n      label: t('postHeader.views'),\n      value: views,\n    });\n\n    return metadata;\n  };\n\n  return (\n    <>\n      <Header\n        title={post.title}\n        metadata={getMetadata(post)}\n        customActions={\n          <>\n            <EditButton entity={post} compact />\n            <DeleteButton entity={post} compact />\n            <RestoreButton entity={post} compact />\n            <PostHistoryButton post={post} onRestore={retry} />\n            <FollowPostButton post={post} />\n            <AddToCollectionButton post={post} />\n          </>\n        }\n      />\n      <Box>\n        <AIAnswerCard\n          article={post as Article}\n          style={{ marginBottom: '2em' }}\n        />\n        <ArticleContent post={post} views={views} />\n      </Box>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ArticlesPage/ArticlesPage.esm.js

@@ -1,10 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useSearchParams } from 'react-router-dom';
 import { useState, useEffect } from 'react';
-import { qetaTranslationRef, useQetaConfig, ContentHeader, WriteArticleButton, PostsContainer } from '@drodil/backstage-plugin-qeta-react';
+import { qetaTranslationRef, useQetaConfig, WriteArticleButton, PostsContainer } from '@drodil/backstage-plugin-qeta-react';
 import { filterTags } from '@drodil/backstage-plugin-qeta-common';
-import LibraryBooksOutlined from '@material-ui/icons/LibraryBooksOutlined';
-import { Typography } from '@material-ui/core';
+import { Header } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
 const ArticlesPage = () => {
@@ -22,26 +21,10 @@ const ArticlesPage = () => {
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      ContentHeader,
+      Header,
       {
-        titleComponent: /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            variant: "h4",
-            style: { display: "flex", alignItems: "center" },
-            children: [
-              /* @__PURE__ */ jsx(
-                LibraryBooksOutlined,
-                {
-                  fontSize: "large",
-                  style: { marginRight: "8px" }
-                }
-              ),
-              t("articlesPage.title")
-            ]
-          }
-        ),
-        children: /* @__PURE__ */ jsx(WriteArticleButton, { entity: entityRef, tags })
+        title: t("articlesPage.title"),
+        customActions: /* @__PURE__ */ jsx(WriteArticleButton, { entity: entityRef, tags })
       }
     ),
     /* @__PURE__ */ jsx(PostsContainer, { type: "article", defaultView: "grid" })

package/dist/components/ArticlesPage/ArticlesPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticlesPage.esm.js","sources":["../../../src/components/ArticlesPage/ArticlesPage.tsx"],"sourcesContent":["import { useSearchParams } from 'react-router-dom';\nimport { useEffect, useState } from 'react';\nimport {\n  ContentHeader,\n  PostsContainer,\n  qetaTranslationRef,\n  useQetaConfig,\n  WriteArticleButton,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport LibraryBooksOutlined from '@material-ui/icons/LibraryBooksOutlined';\nimport { Typography } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const ArticlesPage = () => {\n  const [searchParams] = useSearchParams();\n\n  const [entityRef, setEntityRef] = useState<string | undefined>(undefined);\n  const [tags, setTags] = useState<string[] | undefined>(undefined);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  useEffect(() => {\n    setEntityRef(searchParams.get('entity') ?? undefined);\n    setTags(filterTags(searchParams.get('tags')));\n  }, [searchParams, setEntityRef]);\n\n  if (disabled.articles) {\n    return null;\n  }\n\n  return (\n    <>\n      <ContentHeader\n        titleComponent={\n          <Typography\n            variant=\"h4\"\n            style={{ display: 'flex', alignItems: 'center' }}\n          >\n            <LibraryBooksOutlined\n              fontSize=\"large\"\n              style={{ marginRight: '8px' }}\n            />\n            {t('articlesPage.title')}\n          </Typography>\n        }\n      >\n        <WriteArticleButton entity={entityRef} tags={tags} />\n      </ContentHeader>\n      <PostsContainer type=\"article\" defaultView=\"grid\" />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAcO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,eAAA,EAAgB;AAEvC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA6B,MAAS,CAAA;AACxE,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA+B,MAAS,CAAA;AAChE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,YAAA,CAAa,GAAA,CAAI,QAAQ,CAAA,IAAK,MAAS,CAAA;AACpD,IAAA,OAAA,CAAQ,UAAA,CAAW,YAAA,CAAa,GAAA,CAAI,MAAM,CAAC,CAAC,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,YAAA,EAAc,YAAY,CAAC,CAAA;AAE/B,EAAA,IAAI,SAAS,QAAA,EAAU;AACrB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,cAAA,kBACE,IAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,IAAA;AAAA,YACR,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAQ,YAAY,QAAA,EAAS;AAAA,YAE/C,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,oBAAA;AAAA,gBAAA;AAAA,kBACC,QAAA,EAAS,OAAA;AAAA,kBACT,KAAA,EAAO,EAAE,WAAA,EAAa,KAAA;AAAM;AAAA,eAC9B;AAAA,cACC,EAAE,oBAAoB;AAAA;AAAA;AAAA,SACzB;AAAA,QAGF,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,MAAA,EAAQ,SAAA,EAAW,IAAA,EAAY;AAAA;AAAA,KACrD;AAAA,oBACA,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAK,SAAA,EAAU,aAAY,MAAA,EAAO;AAAA,GAAA,EACpD,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ArticlesPage.esm.js","sources":["../../../src/components/ArticlesPage/ArticlesPage.tsx"],"sourcesContent":["import { useSearchParams } from 'react-router-dom';\nimport { useEffect, useState } from 'react';\nimport {\n  PostsContainer,\n  qetaTranslationRef,\n  useQetaConfig,\n  WriteArticleButton,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { Header } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const ArticlesPage = () => {\n  const [searchParams] = useSearchParams();\n\n  const [entityRef, setEntityRef] = useState<string | undefined>(undefined);\n  const [tags, setTags] = useState<string[] | undefined>(undefined);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  useEffect(() => {\n    setEntityRef(searchParams.get('entity') ?? undefined);\n    setTags(filterTags(searchParams.get('tags')));\n  }, [searchParams, setEntityRef]);\n\n  if (disabled.articles) {\n    return null;\n  }\n\n  return (\n    <>\n      <Header\n        title={t('articlesPage.title')}\n        customActions={<WriteArticleButton entity={entityRef} tags={tags} />}\n      />\n      <PostsContainer type=\"article\" defaultView=\"grid\" />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAYO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,eAAA,EAAgB;AAEvC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA6B,MAAS,CAAA;AACxE,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA+B,MAAS,CAAA;AAChE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,YAAA,CAAa,GAAA,CAAI,QAAQ,CAAA,IAAK,MAAS,CAAA;AACpD,IAAA,OAAA,CAAQ,UAAA,CAAW,YAAA,CAAa,GAAA,CAAI,MAAM,CAAC,CAAC,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,YAAA,EAAc,YAAY,CAAC,CAAA;AAE/B,EAAA,IAAI,SAAS,QAAA,EAAU;AACrB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,oBAAoB,CAAA;AAAA,QAC7B,aAAA,kBAAe,GAAA,CAAC,kBAAA,EAAA,EAAmB,MAAA,EAAQ,WAAW,IAAA,EAAY;AAAA;AAAA,KACpE;AAAA,oBACA,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAK,SAAA,EAAU,aAAY,MAAA,EAAO;AAAA,GAAA,EACpD,CAAA;AAEJ;;;;"}

package/dist/components/AskPage/AskPage.esm.js

@@ -1,12 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Progress, InfoCard } from '@backstage/core-components';
 import { useState, useEffect } from 'react';
 import { stringifyEntityRef } from '@backstage/catalog-model';
-import { useQetaConfig, useAI, useQetaApi, useQetaContext, qetaTranslationRef, SelectTemplateList, ContentHeader, PostForm, AIAnswerCard } from '@drodil/backstage-plugin-qeta-react';
+import { useQetaConfig, useAI, useQetaApi, useQetaContext, qetaTranslationRef, SelectTemplateList, PostForm, AIAnswerCard } from '@drodil/backstage-plugin-qeta-react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useEntityPresentation } from '@backstage/plugin-catalog-react';
 import { filterTags } from '@drodil/backstage-plugin-qeta-common';
-import { Box, Grid } from '@material-ui/core';
+import { Box, Skeleton, Header } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
 const AskPage = () => {
@@ -46,7 +45,7 @@ const AskPage = () => {
     return null;
   }
   if (loading) {
-    return /* @__PURE__ */ jsx(Box, { role: "status", "aria-label": t("common.loading"), children: /* @__PURE__ */ jsx(Progress, {}) });
+    return /* @__PURE__ */ jsx(Box, { role: "status", "aria-label": t("common.loading"), children: /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 200 }) });
   }
   if (!id && value && value.templates && value.total > 0 && template === void 0) {
     return /* @__PURE__ */ jsx(Box, { role: "region", "aria-label": t("askPage.templateSelection"), children: /* @__PURE__ */ jsx(
@@ -76,8 +75,8 @@ const AskPage = () => {
     });
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ContentHeader, { title }),
-    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, direction: "column", children: /* @__PURE__ */ jsx(Grid, { item: true, style: { width: "100%" }, children: /* @__PURE__ */ jsxs(InfoCard, { children: [
+    /* @__PURE__ */ jsx(Header, { title }),
+    /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsx(
         PostForm,
         {
@@ -94,7 +93,7 @@ const AskPage = () => {
         }
       ),
       /* @__PURE__ */ jsx(AIAnswerCard, { draft })
-    ] }) }) })
+    ] })
   ] });
 };
 

package/dist/components/AskPage/AskPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AskPage.esm.js","sources":["../../../src/components/AskPage/AskPage.tsx"],"sourcesContent":["import { InfoCard, Progress } from '@backstage/core-components';\nimport { useEffect, useState } from 'react';\nimport { stringifyEntityRef } from '@backstage/catalog-model';\nimport {\n  AIAnswerCard,\n  ContentHeader,\n  PostForm,\n  qetaTranslationRef,\n  QuestionFormValues,\n  SelectTemplateList,\n  useAI,\n  useQetaApi,\n  useQetaConfig,\n  useQetaContext,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { filterTags, Template } from '@drodil/backstage-plugin-qeta-common';\nimport { Box, Grid } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const AskPage = () => {\n  const { id } = useParams();\n  const [searchParams] = useSearchParams();\n  const { disabled } = useQetaConfig();\n  const { isNewQuestionsEnabled } = useAI();\n  const { value, loading } = useQetaApi(api => api.getTemplates());\n  const [draft, setDraft] = useState<\n    { title: string; content: string } | undefined\n  >(undefined);\n  const { setDraftQuestion } = useQetaContext();\n\n  useEffect(() => {\n    return () => {\n      setDraftQuestion?.(undefined);\n    };\n  }, [setDraftQuestion]);\n\n  const [template, setTemplate] = useState<Template | null | undefined>(\n    undefined,\n  );\n\n  const entity = searchParams.get('entity') ?? undefined;\n  const entityPage = searchParams.get('entityPage') === 'true';\n  const questionTitle = searchParams.get('title') ?? undefined;\n  const content = searchParams.get('content') ?? undefined;\n  const tags = filterTags(searchParams.get('tags'));\n  const { t } = useTranslationRef(qetaTranslationRef);\n  let title;\n  if (id) {\n    title = t('askPage.title.existingQuestion');\n  } else if (entity) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const representation = useEntityPresentation(entity);\n    title = t('askPage.title.entityQuestion', {\n      entity: representation.primaryTitle,\n    });\n  } else {\n    title = t('askPage.title.newQuestion');\n  }\n\n  if (disabled.questions) {\n    return null;\n  }\n\n  if (loading) {\n    return (\n      <Box role=\"status\" aria-label={t('common.loading')}>\n        <Progress />\n      </Box>\n    );\n  }\n\n  if (\n    !id &&\n    value &&\n    value.templates &&\n    value.total > 0 &&\n    template === undefined\n  ) {\n    return (\n      <Box role=\"region\" aria-label={t('askPage.templateSelection')}>\n        <SelectTemplateList\n          templates={value}\n          onTemplateSelect={temp => setTemplate(temp)}\n          aria-label={t('askPage.selectTemplate')}\n        />\n      </Box>\n    );\n  }\n\n  const handleFormChange = (data: QuestionFormValues) => {\n    if (setDraftQuestion) {\n      setDraftQuestion({\n        title: data.title,\n        content: data.content,\n        tags: data.tags,\n        entities: data.entities?.map(stringifyEntityRef),\n      });\n    }\n    if (!isNewQuestionsEnabled) {\n      return;\n    }\n    setDraft({\n      title: data.title,\n      content: data.content,\n    });\n  };\n\n  return (\n    <>\n      <ContentHeader title={title} />\n      <Grid container spacing={3} direction=\"column\">\n        <Grid item style={{ width: '100%' }}>\n          <InfoCard>\n            <PostForm\n              id={id}\n              entity={entity}\n              entityPage={entityPage}\n              tags={tags}\n              type=\"question\"\n              template={template}\n              onFormChange={handleFormChange}\n              aria-label={t('askPage.questionForm')}\n              title={questionTitle}\n              content={content}\n            />\n            <AIAnswerCard draft={draft} />\n          </InfoCard>\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AskPage.esm.js","sources":["../../../src/components/AskPage/AskPage.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { stringifyEntityRef } from '@backstage/catalog-model';\nimport {\n  AIAnswerCard,\n  PostForm,\n  qetaTranslationRef,\n  QuestionFormValues,\n  SelectTemplateList,\n  useAI,\n  useQetaApi,\n  useQetaConfig,\n  useQetaContext,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { filterTags, Template } from '@drodil/backstage-plugin-qeta-common';\nimport { Box, Header, Skeleton } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const AskPage = () => {\n  const { id } = useParams();\n  const [searchParams] = useSearchParams();\n  const { disabled } = useQetaConfig();\n  const { isNewQuestionsEnabled } = useAI();\n  const { value, loading } = useQetaApi(api => api.getTemplates());\n  const [draft, setDraft] = useState<\n    { title: string; content: string } | undefined\n  >(undefined);\n  const { setDraftQuestion } = useQetaContext();\n\n  useEffect(() => {\n    return () => {\n      setDraftQuestion?.(undefined);\n    };\n  }, [setDraftQuestion]);\n\n  const [template, setTemplate] = useState<Template | null | undefined>(\n    undefined,\n  );\n\n  const entity = searchParams.get('entity') ?? undefined;\n  const entityPage = searchParams.get('entityPage') === 'true';\n  const questionTitle = searchParams.get('title') ?? undefined;\n  const content = searchParams.get('content') ?? undefined;\n  const tags = filterTags(searchParams.get('tags'));\n  const { t } = useTranslationRef(qetaTranslationRef);\n  let title;\n  if (id) {\n    title = t('askPage.title.existingQuestion');\n  } else if (entity) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const representation = useEntityPresentation(entity);\n    title = t('askPage.title.entityQuestion', {\n      entity: representation.primaryTitle,\n    });\n  } else {\n    title = t('askPage.title.newQuestion');\n  }\n\n  if (disabled.questions) {\n    return null;\n  }\n\n  if (loading) {\n    return (\n      <Box role=\"status\" aria-label={t('common.loading')}>\n        <Skeleton width=\"100%\" height={200} />\n      </Box>\n    );\n  }\n\n  if (\n    !id &&\n    value &&\n    value.templates &&\n    value.total > 0 &&\n    template === undefined\n  ) {\n    return (\n      <Box role=\"region\" aria-label={t('askPage.templateSelection')}>\n        <SelectTemplateList\n          templates={value}\n          onTemplateSelect={temp => setTemplate(temp)}\n          aria-label={t('askPage.selectTemplate')}\n        />\n      </Box>\n    );\n  }\n\n  const handleFormChange = (data: QuestionFormValues) => {\n    if (setDraftQuestion) {\n      setDraftQuestion({\n        title: data.title,\n        content: data.content,\n        tags: data.tags,\n        entities: data.entities?.map(stringifyEntityRef),\n      });\n    }\n    if (!isNewQuestionsEnabled) {\n      return;\n    }\n    setDraft({\n      title: data.title,\n      content: data.content,\n    });\n  };\n\n  return (\n    <>\n      <Header title={title} />\n      <Box>\n        <PostForm\n          id={id}\n          entity={entity}\n          entityPage={entityPage}\n          tags={tags}\n          type=\"question\"\n          template={template}\n          onFormChange={handleFormChange}\n          aria-label={t('askPage.questionForm')}\n          title={questionTitle}\n          content={content}\n        />\n        <AIAnswerCard draft={draft} />\n      </Box>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CollectionCreatePage/CollectionCreatePage.esm.js

@@ -1,8 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useParams } from 'react-router-dom';
-import { ContentHeader, InfoCard } from '@backstage/core-components';
 import { qetaTranslationRef, useQetaConfig, CollectionForm } from '@drodil/backstage-plugin-qeta-react';
-import { Grid } from '@material-ui/core';
+import { Header, Box } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
 const CollectionCreatePage = () => {
@@ -19,8 +18,8 @@ const CollectionCreatePage = () => {
     title = t("collectionCreatePage.title.newCollection");
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ContentHeader, { title }),
-    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, direction: "column", children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(InfoCard, { children: /* @__PURE__ */ jsx(CollectionForm, { id }) }) }) })
+    /* @__PURE__ */ jsx(Header, { title }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CollectionForm, { id }) })
   ] });
 };
 

package/dist/components/CollectionCreatePage/CollectionCreatePage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionCreatePage.esm.js","sources":["../../../src/components/CollectionCreatePage/CollectionCreatePage.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\nimport { ContentHeader, InfoCard } from '@backstage/core-components';\nimport {\n  CollectionForm,\n  qetaTranslationRef,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Grid } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const CollectionCreatePage = () => {\n  const { id } = useParams();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  if (disabled.collections) {\n    return null;\n  }\n\n  let title;\n  if (id) {\n    title = t('collectionCreatePage.title.existingCollection');\n  } else {\n    title = t('collectionCreatePage.title.newCollection');\n  }\n  return (\n    <>\n      <ContentHeader title={title} />\n      <Grid container spacing={3} direction=\"column\">\n        <Grid item>\n          <InfoCard>\n            <CollectionForm id={id} />\n          </InfoCard>\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAUO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,EAAE,EAAA,EAAG,GAAI,SAAA,EAAU;AACzB,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,IAAI,SAAS,WAAA,EAAa;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA;AACJ,EAAA,IAAI,EAAA,EAAI;AACN,IAAA,KAAA,GAAQ,EAAE,+CAA+C,CAAA;AAAA,EAC3D,CAAA,MAAO;AACL,IAAA,KAAA,GAAQ,EAAE,0CAA0C,CAAA;AAAA,EACtD;AACA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,iBAAc,KAAA,EAAc,CAAA;AAAA,wBAC5B,IAAA,EAAA,EAAK,SAAA,EAAS,MAAC,OAAA,EAAS,CAAA,EAAG,WAAU,QAAA,EACpC,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAA,EAAI,IAAA,EACR,8BAAC,QAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,kBAAe,EAAA,EAAQ,CAAA,EAC1B,GACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CollectionCreatePage.esm.js","sources":["../../../src/components/CollectionCreatePage/CollectionCreatePage.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\nimport {\n  CollectionForm,\n  qetaTranslationRef,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Box, Header } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const CollectionCreatePage = () => {\n  const { id } = useParams();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  if (disabled.collections) {\n    return null;\n  }\n\n  let title;\n  if (id) {\n    title = t('collectionCreatePage.title.existingCollection');\n  } else {\n    title = t('collectionCreatePage.title.newCollection');\n  }\n  return (\n    <>\n      <Header title={title} />\n      <Box>\n        <CollectionForm id={id} />\n      </Box>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AASO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,EAAE,EAAA,EAAG,GAAI,SAAA,EAAU;AACzB,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,IAAI,SAAS,WAAA,EAAa;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA;AACJ,EAAA,IAAI,EAAA,EAAI;AACN,IAAA,KAAA,GAAQ,EAAE,+CAA+C,CAAA;AAAA,EAC3D,CAAA,MAAO;AACL,IAAA,KAAA,GAAQ,EAAE,0CAA0C,CAAA;AAAA,EACtD;AACA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAO,KAAA,EAAc,CAAA;AAAA,oBACtB,GAAA,CAAC,GAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,IAAQ,CAAA,EAC1B;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/CollectionPage/CollectionPage.esm.js

@@ -1,27 +1,14 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useParams, useNavigate } from 'react-router-dom';
-import { qetaTranslationRef, useQetaConfig, collectionEditRouteRef, useQetaApi, ContentHeader, CollectionFollowButton, ContentHeaderCard, PostsContainer, DeleteModal } from '@drodil/backstage-plugin-qeta-react';
-import { Skeleton } from '@material-ui/lab';
-import { WarningPanel } from '@backstage/core-components';
-import { Typography, Button, Grid } from '@material-ui/core';
+import { useParams } from 'react-router-dom';
+import { qetaTranslationRef, useQetaConfig, useQetaApi, EditButton, DeleteButton, CollectionFollowButton, TagsAndEntities, PostsContainer } from '@drodil/backstage-plugin-qeta-react';
+import { Skeleton, Alert, Header, Grid, Box } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { useState } from 'react';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
-import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
-import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
-import PeopleIcon from '@material-ui/icons/People';
-import { useRouteRef } from '@backstage/core-plugin-api';
+import { EntityRefLink } from '@backstage/plugin-catalog-react';
 
 const CollectionPage = () => {
   const { id } = useParams();
   const { t } = useTranslationRef(qetaTranslationRef);
   const { disabled } = useQetaConfig();
-  const navigate = useNavigate();
-  const editCollectionRoute = useRouteRef(collectionEditRouteRef);
-  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
-  const handleDeleteModalOpen = () => setDeleteModalOpen(true);
-  const handleDeleteModalClose = () => setDeleteModalOpen(false);
   const {
     value: collection,
     loading,
@@ -31,71 +18,48 @@ const CollectionPage = () => {
     return null;
   }
   if (loading) {
-    return /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 200 });
+    return /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 200 });
   }
   if (error || collection === void 0) {
-    return /* @__PURE__ */ jsx(WarningPanel, { severity: "error", title: t("questionPage.errorLoading", {}), children: error?.message });
+    return /* @__PURE__ */ jsx(
+      Alert,
+      {
+        status: "danger",
+        title: t("questionPage.errorLoading", {}),
+        description: error?.message
+      }
+    );
   }
-  const title = /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-    /* @__PURE__ */ jsx(PlaylistPlayIcon, { fontSize: "large", style: { marginRight: "8px" } }),
-    /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", children: collection.title })
-  ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(ContentHeader, { titleComponent: title, children: [
-      /* @__PURE__ */ jsx(CollectionFollowButton, { collection }),
-      collection.canEdit && /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "contained",
-          color: "primary",
-          startIcon: /* @__PURE__ */ jsx(EditIcon, {}),
-          onClick: () => editCollectionRoute && navigate(
-            editCollectionRoute({
-              id: collection.id.toString(10)
-            })
-          ),
-          children: t("templateList.editButton", {})
-        }
-      ),
-      collection.canDelete && /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "outlined",
-          color: "secondary",
-          startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
-          onClick: handleDeleteModalOpen,
-          children: t("templateList.deleteButton", {})
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
-        ContentHeaderCard,
-        {
-          description: collection.description,
-          image: collection.headerImage,
-          imageIcon: /* @__PURE__ */ jsx(PlaylistPlayIcon, { style: { fontSize: 80 } }),
-          tagsAndEntities: { entity: collection },
-          stats: [
-            {
-              label: t("common.postsLabel", {
-                count: collection.postsCount,
-                itemType: "post"
-              }),
-              value: collection.postsCount,
-              icon: /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small" })
-            },
-            {
-              label: t("common.followersLabel", {
-                count: collection.followers
-              }),
-              value: collection.followers,
-              icon: /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small" })
-            }
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        title: collection.title,
+        description: collection.description,
+        metadata: [
+          {
+            label: t("metadata.posts"),
+            value: collection.postsCount
+          },
+          {
+            label: t("metadata.followers"),
+            value: collection.followers
+          },
+          {
+            label: t("metadata.owner"),
+            value: /* @__PURE__ */ jsx(EntityRefLink, { entityRef: collection.owner })
+          }
+        ],
+        customActions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(EditButton, { entity: collection, compact: true }),
+          /* @__PURE__ */ jsx(DeleteButton, { entity: collection, compact: true }),
+          /* @__PURE__ */ jsx(CollectionFollowButton, { collection })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Grid.Root, { columns: { sm: "12" }, gap: "6", children: [
+      /* @__PURE__ */ jsx(Grid.Item, { colSpan: { sm: "12" }, children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(TagsAndEntities, { entity: collection }) }) }),
+      /* @__PURE__ */ jsx(Grid.Item, { colSpan: { sm: "12" }, children: /* @__PURE__ */ jsx(
         PostsContainer,
         {
           collectionId: collection.id,
@@ -105,15 +69,7 @@ const CollectionPage = () => {
           prefix: "collection-posts"
         }
       ) })
-    ] }),
-    collection.canDelete && /* @__PURE__ */ jsx(
-      DeleteModal,
-      {
-        open: deleteModalOpen,
-        onClose: handleDeleteModalClose,
-        entity: collection
-      }
-    )
+    ] })
   ] });
 };
 

package/dist/components/CollectionPage/CollectionPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionPage.esm.js","sources":["../../../src/components/CollectionPage/CollectionPage.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\nimport {\n  CollectionFollowButton,\n  ContentHeader,\n  DeleteModal,\n  collectionEditRouteRef,\n  qetaTranslationRef,\n  useQetaApi,\n  PostsContainer,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Skeleton } from '@material-ui/lab';\nimport { WarningPanel } from '@backstage/core-components';\nimport { Button, Grid, Typography } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { useState } from 'react';\nimport EditIcon from '@material-ui/icons/Edit';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport PeopleIcon from '@material-ui/icons/People';\nimport { useNavigate } from 'react-router-dom';\nimport { ContentHeaderCard } from '@drodil/backstage-plugin-qeta-react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\n\nexport const CollectionPage = () => {\n  const { id } = useParams();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n  const navigate = useNavigate();\n  const editCollectionRoute = useRouteRef(collectionEditRouteRef);\n  const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n\n  const {\n    value: collection,\n    loading,\n    error,\n  } = useQetaApi(api => api.getCollection(id), [id]);\n\n  if (disabled.collections) {\n    return null;\n  }\n\n  if (loading) {\n    return <Skeleton variant=\"rect\" height={200} />;\n  }\n\n  if (error || collection === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('questionPage.errorLoading', {})}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  const title = (\n    <div style={{ display: 'flex', alignItems: 'center' }}>\n      <PlaylistPlayIcon fontSize=\"large\" style={{ marginRight: '8px' }} />\n      <Typography variant=\"h5\" component=\"h2\">\n        {collection.title}\n      </Typography>\n    </div>\n  );\n\n  return (\n    <>\n      <ContentHeader titleComponent={title}>\n        <CollectionFollowButton collection={collection} />\n        {collection.canEdit && (\n          <Button\n            variant=\"contained\"\n            color=\"primary\"\n            startIcon={<EditIcon />}\n            onClick={() =>\n              editCollectionRoute &&\n              navigate(\n                editCollectionRoute({\n                  id: collection.id.toString(10),\n                }),\n              )\n            }\n          >\n            {t('templateList.editButton', {})}\n          </Button>\n        )}\n        {collection.canDelete && (\n          <Button\n            variant=\"outlined\"\n            color=\"secondary\"\n            startIcon={<DeleteIcon />}\n            onClick={handleDeleteModalOpen}\n          >\n            {t('templateList.deleteButton', {})}\n          </Button>\n        )}\n      </ContentHeader>\n      <Grid container>\n        <Grid item xs={12}>\n          <ContentHeaderCard\n            description={collection.description}\n            image={collection.headerImage}\n            imageIcon={<PlaylistPlayIcon style={{ fontSize: 80 }} />}\n            tagsAndEntities={{ entity: collection }}\n            stats={[\n              {\n                label: t('common.postsLabel', {\n                  count: collection.postsCount,\n                  itemType: 'post',\n                }),\n                value: collection.postsCount,\n                icon: <QuestionAnswerIcon fontSize=\"small\" />,\n              },\n              {\n                label: t('common.followersLabel', {\n                  count: collection.followers,\n                }),\n                value: collection.followers,\n                icon: <PeopleIcon fontSize=\"small\" />,\n              },\n            ]}\n          />\n        </Grid>\n        <Grid item xs={12}>\n          <PostsContainer\n            collectionId={collection.id}\n            orderBy=\"rank\"\n            allowRanking={collection.canEdit}\n            defaultView=\"grid\"\n            prefix=\"collection-posts\"\n          />\n        </Grid>\n      </Grid>\n      {collection.canDelete && (\n        <DeleteModal\n          open={deleteModalOpen}\n          onClose={handleDeleteModalClose}\n          entity={collection}\n        />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CollectionPage.esm.js","sources":["../../../src/components/CollectionPage/CollectionPage.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\nimport {\n  CollectionFollowButton,\n  DeleteButton,\n  EditButton,\n  PostsContainer,\n  qetaTranslationRef,\n  TagsAndEntities,\n  useQetaApi,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Alert, Box, Grid, Header, Skeleton } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\n\nexport const CollectionPage = () => {\n  const { id } = useParams();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  const {\n    value: collection,\n    loading,\n    error,\n  } = useQetaApi(api => api.getCollection(id), [id]);\n\n  if (disabled.collections) {\n    return null;\n  }\n\n  if (loading) {\n    return <Skeleton width=\"100%\" height={200} />;\n  }\n\n  if (error || collection === undefined) {\n    return (\n      <Alert\n        status=\"danger\"\n        title={t('questionPage.errorLoading', {})}\n        description={error?.message}\n      />\n    );\n  }\n\n  return (\n    <>\n      <Header\n        title={collection.title}\n        description={collection.description}\n        metadata={[\n          {\n            label: t('metadata.posts'),\n            value: collection.postsCount,\n          },\n          {\n            label: t('metadata.followers'),\n            value: collection.followers,\n          },\n          {\n            label: t('metadata.owner'),\n            value: <EntityRefLink entityRef={collection.owner} />,\n          },\n        ]}\n        customActions={\n          <>\n            <EditButton entity={collection} compact />\n            <DeleteButton entity={collection} compact />\n            <CollectionFollowButton collection={collection} />\n          </>\n        }\n      />\n      <Grid.Root columns={{ sm: '12' }} gap=\"6\">\n        <Grid.Item colSpan={{ sm: '12' }}>\n          <Box>\n            <TagsAndEntities entity={collection} />\n          </Box>\n        </Grid.Item>\n        <Grid.Item colSpan={{ sm: '12' }}>\n          <PostsContainer\n            collectionId={collection.id}\n            orderBy=\"rank\"\n            allowRanking={collection.canEdit}\n            defaultView=\"grid\"\n            prefix=\"collection-posts\"\n          />\n        </Grid.Item>\n      </Grid.Root>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CollectionsPage/CollectionsPage.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { qetaTranslationRef, useQetaConfig, ContentHeader, CreateCollectionButton, CollectionsContainer } from '@drodil/backstage-plugin-qeta-react';
-import PlaylistPlayOutlined from '@material-ui/icons/PlaylistPlayOutlined';
+import { qetaTranslationRef, useQetaConfig, CreateCollectionButton, CollectionsContainer } from '@drodil/backstage-plugin-qeta-react';
+import { Header } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
 const CollectionsPage = () => {
@@ -11,11 +11,10 @@ const CollectionsPage = () => {
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      ContentHeader,
+      Header,
       {
         title: t("collectionsPage.title"),
-        titleIcon: /* @__PURE__ */ jsx(PlaylistPlayOutlined, { fontSize: "large" }),
-        children: /* @__PURE__ */ jsx(CreateCollectionButton, {})
+        customActions: /* @__PURE__ */ jsx(CreateCollectionButton, {})
       }
     ),
     /* @__PURE__ */ jsx(CollectionsContainer, {})

package/dist/components/CollectionsPage/CollectionsPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionsPage.esm.js","sources":["../../../src/components/CollectionsPage/CollectionsPage.tsx"],"sourcesContent":["import {\n  CollectionsContainer,\n  ContentHeader,\n  CreateCollectionButton,\n  qetaTranslationRef,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport PlaylistPlayOutlined from '@material-ui/icons/PlaylistPlayOutlined';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const CollectionsPage = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  if (disabled.collections) {\n    return null;\n  }\n\n  return (\n    <>\n      <ContentHeader\n        title={t('collectionsPage.title')}\n        titleIcon={<PlaylistPlayOutlined fontSize=\"large\" />}\n      >\n        <CreateCollectionButton />\n      </ContentHeader>\n      <CollectionsContainer />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAUO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,IAAI,SAAS,WAAA,EAAa;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,uBAAuB,CAAA;AAAA,QAChC,SAAA,kBAAW,GAAA,CAAC,oBAAA,EAAA,EAAqB,QAAA,EAAS,OAAA,EAAQ,CAAA;AAAA,QAElD,8BAAC,sBAAA,EAAA,EAAuB;AAAA;AAAA,KAC1B;AAAA,wBACC,oBAAA,EAAA,EAAqB;AAAA,GAAA,EACxB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CollectionsPage.esm.js","sources":["../../../src/components/CollectionsPage/CollectionsPage.tsx"],"sourcesContent":["import {\n  CollectionsContainer,\n  CreateCollectionButton,\n  qetaTranslationRef,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Header } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const CollectionsPage = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  if (disabled.collections) {\n    return null;\n  }\n\n  return (\n    <>\n      <Header\n        title={t('collectionsPage.title')}\n        customActions={<CreateCollectionButton />}\n      />\n      <CollectionsContainer />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AASO,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,IAAI,SAAS,WAAA,EAAa;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,uBAAuB,CAAA;AAAA,QAChC,aAAA,sBAAgB,sBAAA,EAAA,EAAuB;AAAA;AAAA,KACzC;AAAA,wBACC,oBAAA,EAAA,EAAqB;AAAA,GAAA,EACxB,CAAA;AAEJ;;;;"}