@drodil/backstage-plugin-qeta 3.60.0 → 4.0.0

package/dist/components/QetaSearchResultListItem/QetaSearchResultListItem.esm.js

@@ -1,33 +1,18 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DateTime } from 'luxon';
-import { Link } from '@backstage/core-components';
+import { Link } from 'react-router-dom';
+import { Text } from '@backstage/ui';
 import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
-import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';
-import { ListItem, ListItemIcon, ListItemText, Divider, makeStyles } from '@material-ui/core';
 import { selectByPostType, truncate, removeMarkdownFormatting } from '@drodil/backstage-plugin-qeta-common';
 import { EntityRefLink } from '@backstage/plugin-catalog-react';
-import HelpOutlined from '@material-ui/icons/HelpOutlined';
-import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
 import DOMPurify from 'dompurify';
 import { capitalize } from 'lodash';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '@drodil/backstage-plugin-qeta-react';
-import LinkIcon from '@material-ui/icons/Link';
 import { parseEntityRef } from '@backstage/catalog-model';
+import { RiQuestionLine, RiBookOpenLine, RiLink, RiPlayList2Line } from '@remixicon/react';
+import styles from './QetaSearchResultListItem.module.css.esm.js';
 
-const useStyles = makeStyles({
-  excerptText: {
-    display: "block",
-    marginTop: "0.2rem",
-    marginBottom: "0.4rem"
-  },
-  excerpt: {
-    lineHeight: "1.55"
-  },
-  itemText: {
-    wordBreak: "break-all"
-  }
-});
 const isQetaSearchDocument = (document) => {
   return "docType" in document && (document.docType === "qeta_post" || document.docType === "qeta_collection");
 };
@@ -39,7 +24,6 @@ const isQetaCollectionDocument = (document) => {
 };
 const Excerpt = (props) => {
   const { document, highlight } = props;
-  const classes = useStyles();
   const { t } = useTranslationRef(qetaTranslationRef);
   const text = DOMPurify.sanitize(
     truncate(
@@ -53,26 +37,34 @@ const Excerpt = (props) => {
       defaultNamespace: "default"
     });
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("span", { className: classes.excerptText, children: [
-        capitalize(t(`common.${document.postType}`)),
-        " \xB7 ",
-        t("searchResult.created"),
-        " ",
-        DateTime.fromISO(document.created.toString()).toRelative(),
-        " \xB7 ",
-        /* @__PURE__ */ jsx(EntityRefLink, { entityRef: authorEntity, hideIcon: true }),
-        document.postType !== "link" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          " \xB7 ",
-          t("common.score", { score: document.score.toString(10) })
-        ] }),
-        " \xB7 ",
-        document.postType === "link" && t("common.clicksCount", { count: document.views }),
-        document.postType !== "link" && t("common.viewsShort", { count: document.views }),
-        document.postType !== "link" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          " \xB7 ",
-          t("common.answersCount", { count: document.answerCount })
-        ] })
-      ] }),
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          className: styles.excerptMeta,
+          variant: "body-small",
+          color: "secondary",
+          children: [
+            capitalize(t(`common.${document.postType}`)),
+            " \xB7 ",
+            t("searchResult.created"),
+            " ",
+            DateTime.fromISO(document.created.toString()).toRelative(),
+            " \xB7 ",
+            /* @__PURE__ */ jsx(EntityRefLink, { entityRef: authorEntity, hideIcon: true }),
+            document.postType !== "link" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              " \xB7 ",
+              t("common.score", { score: document.score.toString(10) })
+            ] }),
+            " \xB7 ",
+            document.postType === "link" && t("common.clicksCount", { count: document.views }),
+            document.postType !== "link" && t("common.viewsShort", { count: document.views }),
+            document.postType !== "link" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              " \xB7 ",
+              t("common.answersCount", { count: document.answerCount })
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx(Fragment, { children: highlight?.fields.text ? /* @__PURE__ */ jsx(
         HighlightedSearchResultText,
         {
@@ -88,20 +80,28 @@ const Excerpt = (props) => {
       defaultNamespace: "default"
     });
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("span", { className: classes.excerptText, children: [
-        capitalize(t(`common.collection`)),
-        " \xB7 ",
-        t("searchResult.created"),
-        " ",
-        DateTime.fromISO(document.created.toString()).toRelative(),
-        " \xB7 ",
-        /* @__PURE__ */ jsx(EntityRefLink, { entityRef: ownerEntity, hideIcon: true }),
-        " \xB7 ",
-        t("common.posts", {
-          count: document.postsCount,
-          itemType: t("common.post")
-        })
-      ] }),
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          className: styles.excerptMeta,
+          variant: "body-small",
+          color: "secondary",
+          children: [
+            capitalize(t(`common.collection`)),
+            " \xB7 ",
+            t("searchResult.created"),
+            " ",
+            DateTime.fromISO(document.created.toString()).toRelative(),
+            " \xB7 ",
+            /* @__PURE__ */ jsx(EntityRefLink, { entityRef: ownerEntity, hideIcon: true }),
+            " \xB7 ",
+            t("common.posts", {
+              count: document.postsCount,
+              itemType: t("common.post")
+            })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx(Fragment, { children: highlight?.fields.text ? /* @__PURE__ */ jsx(
         HighlightedSearchResultText,
         {
@@ -119,20 +119,19 @@ const ResultIcon = (props) => {
   if (isQetaPostDocument(document)) {
     return selectByPostType(
       document.postType,
-      /* @__PURE__ */ jsx(HelpOutlined, {}),
-      /* @__PURE__ */ jsx(CollectionsBookmarkIcon, {}),
-      /* @__PURE__ */ jsx(LinkIcon, {})
+      /* @__PURE__ */ jsx(RiQuestionLine, { size: 20 }),
+      /* @__PURE__ */ jsx(RiBookOpenLine, { size: 20 }),
+      /* @__PURE__ */ jsx(RiLink, { size: 20 })
     );
   }
-  return /* @__PURE__ */ jsx(PlaylistPlayIcon, {});
+  return /* @__PURE__ */ jsx(RiPlayList2Line, { size: 20 });
 };
 const QetaSearchResultListItem = (props) => {
-  const classes = useStyles();
   const { result, highlight, hideIcon } = props;
   if (!result || !isQetaSearchDocument(result)) {
     return null;
   }
-  const title = /* @__PURE__ */ jsx(Link, { noTrack: true, to: result.location, children: highlight?.fields.title ? /* @__PURE__ */ jsx(
+  const title = /* @__PURE__ */ jsx(Link, { to: result.location, children: highlight?.fields.title ? /* @__PURE__ */ jsx(
     HighlightedSearchResultText,
     {
       text: highlight.fields.title,
@@ -142,30 +141,20 @@ const QetaSearchResultListItem = (props) => {
   ) : result.title });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
-      ListItem,
+      "article",
       {
-        alignItems: "center",
-        role: "article",
+        className: styles.resultItem,
         "aria-labelledby": `search-result-${result.title}`,
         children: [
-          hideIcon !== true && /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(ResultIcon, { document: result, "aria-hidden": "true" }) }),
-          /* @__PURE__ */ jsx(
-            ListItemText,
-            {
-              primary: title,
-              secondary: /* @__PURE__ */ jsx(Excerpt, { document: result, highlight }),
-              className: classes.itemText,
-              primaryTypographyProps: {
-                variant: "h6",
-                id: `search-result-${result.title}`,
-                component: "h3"
-              }
-            }
-          )
+          hideIcon !== true && /* @__PURE__ */ jsx("span", { className: styles.resultIcon, children: /* @__PURE__ */ jsx(ResultIcon, { document: result, "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsxs("div", { className: styles.itemText, children: [
+            /* @__PURE__ */ jsx("h3", { id: `search-result-${result.title}`, className: styles.title, children: title }),
+            /* @__PURE__ */ jsx("div", { className: styles.excerpt, children: /* @__PURE__ */ jsx(Excerpt, { document: result, highlight }) })
+          ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Divider, { component: "li", "aria-hidden": "true" })
+    /* @__PURE__ */ jsx("hr", { className: styles.divider, "aria-hidden": "true" })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"QetaSearchResultListItem.esm.js","sources":["../../../src/components/QetaSearchResultListItem/QetaSearchResultListItem.tsx"],"sourcesContent":["import { DateTime } from 'luxon';\nimport { Link } from '@backstage/core-components';\nimport {\n  IndexableDocument,\n  ResultHighlight,\n} from '@backstage/plugin-search-common';\nimport { HighlightedSearchResultText } from '@backstage/plugin-search-react';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\nimport {\n  Divider,\n  ListItem,\n  ListItemIcon,\n  ListItemText,\n  makeStyles,\n} from '@material-ui/core';\nimport {\n  QetaCollectionDocument,\n  QetaPostDocument,\n  QetaSearchDocument,\n  removeMarkdownFormatting,\n  selectByPostType,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport HelpOutlined from '@material-ui/icons/HelpOutlined';\nimport PlaylistPlay from '@material-ui/icons/PlaylistPlay';\nimport DOMPurify from 'dompurify';\nimport { capitalize } from 'lodash';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '@drodil/backstage-plugin-qeta-react';\nimport LinkIcon from '@material-ui/icons/Link';\nimport { parseEntityRef } from '@backstage/catalog-model';\n\nconst useStyles = makeStyles({\n  excerptText: {\n    display: 'block',\n    marginTop: '0.2rem',\n    marginBottom: '0.4rem',\n  },\n  excerpt: {\n    lineHeight: '1.55',\n  },\n  itemText: {\n    wordBreak: 'break-all',\n  },\n});\n\nexport type QetaSearchResultListItemProps = {\n  result?: IndexableDocument;\n  highlight?: ResultHighlight;\n  rank?: number;\n  hideIcon?: boolean;\n};\n\nconst isQetaSearchDocument = (\n  document: IndexableDocument,\n): document is QetaSearchDocument => {\n  return (\n    'docType' in document &&\n    (document.docType === 'qeta_post' || document.docType === 'qeta_collection')\n  );\n};\n\nconst isQetaPostDocument = (\n  document: QetaSearchDocument,\n): document is QetaPostDocument => {\n  return document.docType === 'qeta_post';\n};\n\nconst isQetaCollectionDocument = (\n  document: QetaSearchDocument,\n): document is QetaCollectionDocument => {\n  return document.docType === 'qeta_collection';\n};\n\nconst Excerpt = (props: {\n  document: QetaSearchDocument;\n  highlight?: ResultHighlight;\n}) => {\n  const { document, highlight } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const text = DOMPurify.sanitize(\n    truncate(\n      removeMarkdownFormatting(highlight?.fields.text ?? document.text),\n      300,\n    ),\n  );\n\n  if (isQetaPostDocument(document)) {\n    const authorEntity = parseEntityRef(document.author, {\n      defaultKind: 'user',\n      defaultNamespace: 'default',\n    });\n    return (\n      <>\n        <span className={classes.excerptText}>\n          {capitalize(t(`common.${document.postType}`))}\n          {' · '}\n          {t('searchResult.created')}{' '}\n          {DateTime.fromISO(document.created.toString() as string).toRelative()}\n          {' · '}\n          <EntityRefLink entityRef={authorEntity} hideIcon />\n          {document.postType !== 'link' && (\n            <>\n              {' · '}\n              {t('common.score', { score: document.score.toString(10) })}\n            </>\n          )}\n          {' · '}\n          {document.postType === 'link' &&\n            t('common.clicksCount', { count: document.views })}\n          {document.postType !== 'link' &&\n            t('common.viewsShort', { count: document.views })}\n          {document.postType !== 'link' && (\n            <>\n              {' · '}\n              {t('common.answersCount', { count: document.answerCount })}\n            </>\n          )}\n        </span>\n        <>\n          {highlight?.fields.text ? (\n            <HighlightedSearchResultText\n              text={text}\n              preTag={highlight.preTag}\n              postTag={highlight.postTag}\n            />\n          ) : (\n            text\n          )}\n        </>\n      </>\n    );\n  } else if (isQetaCollectionDocument(document)) {\n    const ownerEntity = parseEntityRef(document.owner, {\n      defaultKind: 'user',\n      defaultNamespace: 'default',\n    });\n    return (\n      <>\n        <span className={classes.excerptText}>\n          {capitalize(t(`common.collection`))}\n          {' · '}\n          {t('searchResult.created')}{' '}\n          {DateTime.fromISO(document.created.toString() as string).toRelative()}\n          {' · '}\n          <EntityRefLink entityRef={ownerEntity} hideIcon />\n          {' · '}\n          {t('common.posts', {\n            count: document.postsCount,\n            itemType: t('common.post'),\n          })}\n        </span>\n        <>\n          {highlight?.fields.text ? (\n            <HighlightedSearchResultText\n              text={text}\n              preTag={highlight.preTag}\n              postTag={highlight.postTag}\n            />\n          ) : (\n            text\n          )}\n        </>\n      </>\n    );\n  }\n\n  return null;\n};\n\nconst ResultIcon = (props: { document: QetaSearchDocument }) => {\n  const { document } = props;\n  if (isQetaPostDocument(document)) {\n    return selectByPostType(\n      document.postType,\n      <HelpOutlined />,\n      <CollectionsBookmarkIcon />,\n      <LinkIcon />,\n    );\n  }\n\n  return <PlaylistPlay />;\n};\n\nexport const QetaSearchResultListItem = (\n  props: QetaSearchResultListItemProps,\n) => {\n  const classes = useStyles();\n  const { result, highlight, hideIcon } = props;\n\n  if (!result || !isQetaSearchDocument(result)) {\n    return null;\n  }\n\n  const title = (\n    <Link noTrack to={result.location}>\n      {highlight?.fields.title ? (\n        <HighlightedSearchResultText\n          text={highlight.fields.title}\n          preTag={highlight.preTag}\n          postTag={highlight.postTag}\n        />\n      ) : (\n        result.title\n      )}\n    </Link>\n  );\n\n  return (\n    <>\n      <ListItem\n        alignItems=\"center\"\n        role=\"article\"\n        aria-labelledby={`search-result-${result.title}`}\n      >\n        {hideIcon !== true && (\n          <ListItemIcon>\n            <ResultIcon document={result} aria-hidden=\"true\" />\n          </ListItemIcon>\n        )}\n        <ListItemText\n          primary={title}\n          secondary={<Excerpt document={result} highlight={highlight} />}\n          className={classes.itemText}\n          primaryTypographyProps={{\n            variant: 'h6',\n            id: `search-result-${result.title}`,\n            component: 'h3',\n          }}\n        />\n      </ListItem>\n\n      <Divider component=\"li\" aria-hidden=\"true\" />\n    </>\n  );\n};\n"],"names":["PlaylistPlay"],"mappings":"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"}
+{"version":3,"file":"QetaSearchResultListItem.esm.js","sources":["../../../src/components/QetaSearchResultListItem/QetaSearchResultListItem.tsx"],"sourcesContent":["import { DateTime } from 'luxon';\nimport { Link } from 'react-router-dom';\nimport { Text } from '@backstage/ui';\nimport {\n  IndexableDocument,\n  ResultHighlight,\n} from '@backstage/plugin-search-common';\nimport { HighlightedSearchResultText } from '@backstage/plugin-search-react';\nimport {\n  QetaCollectionDocument,\n  QetaPostDocument,\n  QetaSearchDocument,\n  removeMarkdownFormatting,\n  selectByPostType,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport DOMPurify from 'dompurify';\nimport { capitalize } from 'lodash';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '@drodil/backstage-plugin-qeta-react';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport {\n  RiBookOpenLine,\n  RiLink,\n  RiPlayList2Line,\n  RiQuestionLine,\n} from '@remixicon/react';\nimport styles from './QetaSearchResultListItem.module.css';\n\nexport type QetaSearchResultListItemProps = {\n  result?: IndexableDocument;\n  highlight?: ResultHighlight;\n  rank?: number;\n  hideIcon?: boolean;\n};\n\nconst isQetaSearchDocument = (\n  document: IndexableDocument,\n): document is QetaSearchDocument => {\n  return (\n    'docType' in document &&\n    (document.docType === 'qeta_post' || document.docType === 'qeta_collection')\n  );\n};\n\nconst isQetaPostDocument = (\n  document: QetaSearchDocument,\n): document is QetaPostDocument => {\n  return document.docType === 'qeta_post';\n};\n\nconst isQetaCollectionDocument = (\n  document: QetaSearchDocument,\n): document is QetaCollectionDocument => {\n  return document.docType === 'qeta_collection';\n};\n\nconst Excerpt = (props: {\n  document: QetaSearchDocument;\n  highlight?: ResultHighlight;\n}) => {\n  const { document, highlight } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const text = DOMPurify.sanitize(\n    truncate(\n      removeMarkdownFormatting(highlight?.fields.text ?? document.text),\n      300,\n    ),\n  );\n\n  if (isQetaPostDocument(document)) {\n    const authorEntity = parseEntityRef(document.author, {\n      defaultKind: 'user',\n      defaultNamespace: 'default',\n    });\n    return (\n      <>\n        <Text\n          className={styles.excerptMeta}\n          variant=\"body-small\"\n          color=\"secondary\"\n        >\n          {capitalize(t(`common.${document.postType}`))}\n          {' · '}\n          {t('searchResult.created')}{' '}\n          {DateTime.fromISO(document.created.toString() as string).toRelative()}\n          {' · '}\n          <EntityRefLink entityRef={authorEntity} hideIcon />\n          {document.postType !== 'link' && (\n            <>\n              {' · '}\n              {t('common.score', { score: document.score.toString(10) })}\n            </>\n          )}\n          {' · '}\n          {document.postType === 'link' &&\n            t('common.clicksCount', { count: document.views })}\n          {document.postType !== 'link' &&\n            t('common.viewsShort', { count: document.views })}\n          {document.postType !== 'link' && (\n            <>\n              {' · '}\n              {t('common.answersCount', { count: document.answerCount })}\n            </>\n          )}\n        </Text>\n        <>\n          {highlight?.fields.text ? (\n            <HighlightedSearchResultText\n              text={text}\n              preTag={highlight.preTag}\n              postTag={highlight.postTag}\n            />\n          ) : (\n            text\n          )}\n        </>\n      </>\n    );\n  } else if (isQetaCollectionDocument(document)) {\n    const ownerEntity = parseEntityRef(document.owner, {\n      defaultKind: 'user',\n      defaultNamespace: 'default',\n    });\n    return (\n      <>\n        <Text\n          className={styles.excerptMeta}\n          variant=\"body-small\"\n          color=\"secondary\"\n        >\n          {capitalize(t(`common.collection`))}\n          {' · '}\n          {t('searchResult.created')}{' '}\n          {DateTime.fromISO(document.created.toString() as string).toRelative()}\n          {' · '}\n          <EntityRefLink entityRef={ownerEntity} hideIcon />\n          {' · '}\n          {t('common.posts', {\n            count: document.postsCount,\n            itemType: t('common.post'),\n          })}\n        </Text>\n        <>\n          {highlight?.fields.text ? (\n            <HighlightedSearchResultText\n              text={text}\n              preTag={highlight.preTag}\n              postTag={highlight.postTag}\n            />\n          ) : (\n            text\n          )}\n        </>\n      </>\n    );\n  }\n\n  return null;\n};\n\nconst ResultIcon = (props: { document: QetaSearchDocument }) => {\n  const { document } = props;\n  if (isQetaPostDocument(document)) {\n    return selectByPostType(\n      document.postType,\n      <RiQuestionLine size={20} />,\n      <RiBookOpenLine size={20} />,\n      <RiLink size={20} />,\n    );\n  }\n\n  return <RiPlayList2Line size={20} />;\n};\n\nexport const QetaSearchResultListItem = (\n  props: QetaSearchResultListItemProps,\n) => {\n  const { result, highlight, hideIcon } = props;\n\n  if (!result || !isQetaSearchDocument(result)) {\n    return null;\n  }\n\n  const title = (\n    <Link to={result.location}>\n      {highlight?.fields.title ? (\n        <HighlightedSearchResultText\n          text={highlight.fields.title}\n          preTag={highlight.preTag}\n          postTag={highlight.postTag}\n        />\n      ) : (\n        result.title\n      )}\n    </Link>\n  );\n\n  return (\n    <>\n      <article\n        className={styles.resultItem}\n        aria-labelledby={`search-result-${result.title}`}\n      >\n        {hideIcon !== true && (\n          <span className={styles.resultIcon}>\n            <ResultIcon document={result} aria-hidden=\"true\" />\n          </span>\n        )}\n        <div className={styles.itemText}>\n          <h3 id={`search-result-${result.title}`} className={styles.title}>\n            {title}\n          </h3>\n          <div className={styles.excerpt}>\n            <Excerpt document={result} highlight={highlight} />\n          </div>\n        </div>\n      </article>\n\n      <hr className={styles.divider} aria-hidden=\"true\" />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/QetaSearchResultListItem/QetaSearchResultListItem.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "@layer components {\n  .QetaSearchResultListItem_resultItem__b13ac318ed {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bui-space-3);\n    list-style: none;\n    padding: var(--bui-space-3) 0;\n  }\n\n  .QetaSearchResultListItem_resultIcon__b13ac318ed {\n    display: inline-flex;\n    color: var(--bui-fg-secondary);\n    margin-top: 2px;\n    flex-shrink: 0;\n  }\n\n  .QetaSearchResultListItem_itemText__b13ac318ed {\n    min-width: 0;\n    word-break: break-word;\n  }\n\n  .QetaSearchResultListItem_title__b13ac318ed {\n    margin: 0 0 var(--bui-space-1) 0;\n    font-size: var(--bui-font-size-4);\n    font-weight: var(--bui-font-weight-semibold);\n  }\n\n  .QetaSearchResultListItem_excerptMeta__b13ac318ed {\n    display: block;\n    margin-top: 0.2rem;\n    margin-bottom: 0.4rem;\n  }\n\n  .QetaSearchResultListItem_excerpt__b13ac318ed {\n    line-height: 1.55;\n  }\n\n  .QetaSearchResultListItem_divider__b13ac318ed {\n    border: 0;\n    border-top: 1px solid var(--bui-border-1);\n    margin: 0;\n  }\n}\n";
+var styles = {"resultItem":"QetaSearchResultListItem_resultItem__b13ac318ed","resultIcon":"QetaSearchResultListItem_resultIcon__b13ac318ed","itemText":"QetaSearchResultListItem_itemText__b13ac318ed","title":"QetaSearchResultListItem_title__b13ac318ed","excerptMeta":"QetaSearchResultListItem_excerptMeta__b13ac318ed","excerpt":"QetaSearchResultListItem_excerpt__b13ac318ed","divider":"QetaSearchResultListItem_divider__b13ac318ed"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=QetaSearchResultListItem.module.css.esm.js.map

package/dist/components/QetaSearchResultListItem/QetaSearchResultListItem.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QetaSearchResultListItem.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/QuestionPage/QuestionPage.esm.js

@@ -1,24 +1,12 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
-import { WarningPanel } from '@backstage/core-components';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
-import { qetaTranslationRef, useQetaConfig, useQetaApi, ContentHeader, PostHistoryButton, FollowPostButton, AskQuestionButton, ContentHeaderButton, AddToCollectionButton, DraftBanner, DeletedBanner, ObsoleteBanner, QuestionCard, AIAnswerCard, AnswerCard, AnswerForm, RelativeTimeWithTooltip, UpdatedByLink } from '@drodil/backstage-plugin-qeta-react';
-import Comment from '@material-ui/icons/Comment';
+import { qetaTranslationRef, useQetaConfig, useQetaApi, EditButton, DeleteButton, RestoreButton, PostHistoryButton, FollowPostButton, ContentHeaderButton, AddToCollectionButton, DraftBanner, DeletedBanner, ObsoleteBanner, QuestionCard, AIAnswerCard, AnswerCard, AnswerForm, RelativeTimeWithTooltip, AuthorHeaderItem } from '@drodil/backstage-plugin-qeta-react';
 import { useSignal } from '@backstage/plugin-signals-react';
-import { Box, Grid, Typography, FormControl, TextField, MenuItem, makeStyles } from '@material-ui/core';
-import { Skeleton } from '@material-ui/lab';
+import { Box, Skeleton, Flex, Alert, Header, Text, Select } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import HelpOutline from '@material-ui/icons/HelpOutline';
+import { RiChat3Line } from '@remixicon/react';
 
-const useDescriptionStyles = makeStyles(
-  () => ({
-    root: {},
-    box: {
-      display: "inline"
-    }
-  }),
-  { name: "QetaDescription" }
-);
 const QuestionPage = () => {
   const { id } = useParams();
   const { t } = useTranslationRef(qetaTranslationRef);
@@ -26,7 +14,6 @@ const QuestionPage = () => {
   const [answers, setAnswers] = useState([]);
   const [newAnswers, setNewAnswers] = useState([]);
   const [answerSort, setAnswerSort] = useState("default");
-  const dStyles = useDescriptionStyles();
   const [answersCount, setAnswersCount] = useState(0);
   const [views, setViews] = useState(0);
   const { lastSignal } = useSignal(`qeta:post_${id}`);
@@ -97,65 +84,81 @@ const QuestionPage = () => {
     setAnswers(answers.filter((a) => a.id !== answer.id));
     setAnswersCount((prev) => prev - 1);
   };
-  const getDescription = (q) => {
-    return /* @__PURE__ */ jsxs("span", { className: dStyles.root, children: [
-      /* @__PURE__ */ jsxs(Box, { fontWeight: "fontWeightMedium", className: dStyles.box, children: [
-        t("authorBox.postedAtTime"),
-        " ",
-        /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: q.created }),
-        " \xB7 "
-      ] }),
-      q.updated && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(Box, { fontWeight: "fontWeightMedium", className: dStyles.box, children: [
-        t("authorBox.updatedAtTime"),
-        " ",
-        /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: q.updated }),
-        " ",
-        t("authorBox.updatedBy"),
-        " ",
-        /* @__PURE__ */ jsx(UpdatedByLink, { entity: q }),
-        " \xB7 "
-      ] }) }),
-      /* @__PURE__ */ jsx(Box, { fontWeight: "fontWeightMedium", className: dStyles.box, children: t("common.viewsCount", { count: views }) })
-    ] });
+  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;
   };
   if (disabled.questions) {
     return null;
   }
   if (loading) {
     return /* @__PURE__ */ jsxs(Box, { role: "status", "aria-label": t("common.loading"), children: [
-      /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 200, animation: "wave" }),
-      /* @__PURE__ */ jsxs(Box, { mt: 2, children: [
-        /* @__PURE__ */ jsx(Skeleton, { variant: "text", height: 40, width: "60%", animation: "wave" }),
-        /* @__PURE__ */ jsx(Skeleton, { variant: "text", height: 20, width: "40%", animation: "wave" }),
-        /* @__PURE__ */ jsx(Skeleton, { variant: "text", height: 20, width: "80%", animation: "wave" })
+      /* @__PURE__ */ jsx(Skeleton, { height: 200 }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", mt: "4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { height: 40, width: "60%" }),
+        /* @__PURE__ */ jsx(Skeleton, { height: 20, width: "40%" }),
+        /* @__PURE__ */ jsx(Skeleton, { height: 20, width: "80%" })
       ] })
     ] });
   }
   if (error || question === void 0) {
     return /* @__PURE__ */ jsx(
-      WarningPanel,
+      Alert,
       {
-        severity: "error",
+        status: "danger",
         title: t("questionPage.errorLoading"),
-        "aria-live": "assertive",
-        children: error?.message
+        description: error?.message,
+        "aria-live": "assertive"
       }
     );
   }
   if (question.type !== "question") {
-    return /* @__PURE__ */ jsx(WarningPanel, { title: "Not found", message: t("questionPage.notFound") });
+    return /* @__PURE__ */ jsx(
+      Alert,
+      {
+        status: "warning",
+        title: "Not found",
+        description: t("questionPage.notFound")
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      ContentHeader,
+    /* @__PURE__ */ jsx(
+      Header,
       {
         title: question.title,
-        description: getDescription(question),
-        titleIcon: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "large" }),
-        children: [
+        metadata: getMetadata(question),
+        customActions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(EditButton, { entity: question, compact: true }),
+          /* @__PURE__ */ jsx(DeleteButton, { entity: question, compact: true }),
+          /* @__PURE__ */ jsx(RestoreButton, { entity: question, compact: true }),
           /* @__PURE__ */ jsx(PostHistoryButton, { post: question, onRestore: retry }),
           /* @__PURE__ */ jsx(FollowPostButton, { post: question }),
-          /* @__PURE__ */ jsx(AskQuestionButton, {}),
           /* @__PURE__ */ jsx(
             ContentHeaderButton,
             {
@@ -169,13 +172,13 @@ const QuestionPage = () => {
                   }
                 }
               },
-              icon: /* @__PURE__ */ jsx(Comment, {}),
+              icon: /* @__PURE__ */ jsx(RiChat3Line, {}),
               disabled: question.status === "obsolete",
               children: t("questionPage.answerButton")
             }
           ),
           /* @__PURE__ */ jsx(AddToCollectionButton, { post: question })
-        ]
+        ] })
       }
     ),
     question.status === "draft" && /* @__PURE__ */ jsx(DraftBanner, {}),
@@ -184,56 +187,74 @@ const QuestionPage = () => {
     /* @__PURE__ */ jsx(QuestionCard, { question }),
     /* @__PURE__ */ jsx(AIAnswerCard, { question, debounceMs: 0 }),
     (question.status === "active" || question.status === "obsolete") && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Box, { sx: { mt: 3, mb: 2 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "space-between", alignItems: "center", children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("common.answersCount", {
+      /* @__PURE__ */ jsxs(Flex, { justify: "between", align: "center", mt: "6", mb: "4", children: [
+        /* @__PURE__ */ jsx(Text, { variant: "title-x-small", children: t("common.answersCount", {
           count: answersCount
-        }) }) }),
-        sortedAnswers.length > 1 && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(
-          TextField,
+        }) }),
+        sortedAnswers.length > 1 && /* @__PURE__ */ jsx(
+          Select,
           {
-            select: true,
             size: "small",
             label: t("questionPage.sortAnswers.label"),
             value: answerSort,
-            onChange: (val) => setAnswerSort(val.target.value),
-            inputProps: {
-              name: "sortAnswers",
-              id: "sort-answers",
-              "aria-label": t("questionPage.sortAnswers.label"),
-              "aria-describedby": "sort-answers-helper"
-            },
-            variant: "outlined",
-            SelectProps: {
-              MenuProps: {
-                "aria-label": t("questionPage.sortAnswers.menuLabel")
+            onChange: (key) => setAnswerSort(String(key)),
+            options: [
+              {
+                id: "default",
+                label: t("questionPage.sortAnswers.default")
+              },
+              {
+                id: "created_desc",
+                label: t("questionPage.sortAnswers.createdDesc")
+              },
+              {
+                id: "created_asc",
+                label: t("questionPage.sortAnswers.createdAsc")
+              },
+              {
+                id: "score_desc",
+                label: t("questionPage.sortAnswers.scoreDesc")
+              },
+              {
+                id: "score_asc",
+                label: t("questionPage.sortAnswers.scoreAsc")
+              },
+              {
+                id: "comments_desc",
+                label: t("questionPage.sortAnswers.commentsDesc")
+              },
+              {
+                id: "comments_asc",
+                label: t("questionPage.sortAnswers.commentsAsc")
+              },
+              {
+                id: "author_desc",
+                label: t("questionPage.sortAnswers.authorDesc")
+              },
+              {
+                id: "author_asc",
+                label: t("questionPage.sortAnswers.authorAsc")
+              },
+              {
+                id: "updated_desc",
+                label: t("questionPage.sortAnswers.updatedDesc")
+              },
+              {
+                id: "updated_asc",
+                label: t("questionPage.sortAnswers.updatedAsc")
               }
-            },
-            children: [
-              /* @__PURE__ */ jsx(MenuItem, { value: "default", children: t("questionPage.sortAnswers.default") }),
-              /* @__PURE__ */ jsx(MenuItem, { value: "created_desc", children: t("questionPage.sortAnswers.createdDesc") }),
-              /* @__PURE__ */ jsx(MenuItem, { value: "created_asc", children: t("questionPage.sortAnswers.createdAsc") }),
-              /* @__PURE__ */ jsx(MenuItem, { value: "score_desc", children: t("questionPage.sortAnswers.scoreDesc") }),
-              /* @__PURE__ */ jsx(MenuItem, { value: "score_asc", children: t("questionPage.sortAnswers.scoreAsc") }),
-              /* @__PURE__ */ jsx(MenuItem, { value: "comments_desc", children: t("questionPage.sortAnswers.commentsDesc") }),
-              /* @__PURE__ */ jsx(MenuItem, { value: "comments_asc", children: t("questionPage.sortAnswers.commentsAsc") }),
-              /* @__PURE__ */ jsx(MenuItem, { value: "author_desc", children: t("questionPage.sortAnswers.authorDesc") }),
-              /* @__PURE__ */ jsx(MenuItem, { value: "author_asc", children: t("questionPage.sortAnswers.authorAsc") }),
-              /* @__PURE__ */ jsx(MenuItem, { value: "updated_desc", children: t("questionPage.sortAnswers.updatedDesc") }),
-              /* @__PURE__ */ jsx(MenuItem, { value: "updated_asc", children: t("questionPage.sortAnswers.updatedAsc") })
             ]
           }
-        ) }) })
-      ] }) }),
-      sortedAnswers.map((a) => {
-        return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1 }, children: /* @__PURE__ */ jsx(
-          AnswerCard,
-          {
-            answer: a,
-            question,
-            onAnswerDelete
-          }
-        ) }, a.id) }, a.id);
-      }),
+        )
+      ] }),
+      sortedAnswers.map((a) => /* @__PURE__ */ jsx(Box, { mb: "2", children: /* @__PURE__ */ jsx(
+        AnswerCard,
+        {
+          answer: a,
+          question,
+          onAnswerDelete
+        }
+      ) }, a.id)),
       question.status === "active" && /* @__PURE__ */ jsx("div", { id: "qeta-answer-form", children: /* @__PURE__ */ jsx(AnswerForm, { post: question, onPost: onAnswerPost }) })
     ] })
   ] });