@drodil/backstage-plugin-qeta 3.59.10 → 4.0.0

package/dist/components/Statistics/StatisticsPage.esm.js

@@ -1,36 +1,37 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { ContentHeader, AskQuestionButton, WriteArticleButton, CreateLinkButton, TopRankingUsers } from '@drodil/backstage-plugin-qeta-react';
+import { useQetaConfig, AskQuestionButton, WriteArticleButton, CreateLinkButton, TopRankingUsers } from '@drodil/backstage-plugin-qeta-react';
 import { GlobalStatsContent } from './GlobalStatsContent.esm.js';
-import { Box, Tab } from '@material-ui/core';
-import EmojiEventsOutlined from '@material-ui/icons/EmojiEventsOutlined';
-import { TabContext, TabList, TabPanel } from '@material-ui/lab';
-import { useState } from 'react';
+import { Header, Tabs, TabList, Tab, TabPanel } from '@backstage/ui';
+import { useState, useEffect } from 'react';
+import styles from './StatisticsPage.module.css.esm.js';
 
 const StatisticsPage = () => {
   const [tab, setTab] = useState("global");
-  const handleChange = (_event, newValue) => {
-    setTab(newValue);
-  };
+  const { disabled } = useQetaConfig();
+  useEffect(() => {
+    if (disabled.questions && tab === "leaderboard") {
+      setTab("global");
+    }
+  }, [disabled.questions, tab]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      ContentHeader,
+    /* @__PURE__ */ jsx(
+      Header,
       {
         title: "Statistics",
-        titleIcon: /* @__PURE__ */ jsx(EmojiEventsOutlined, { fontSize: "large" }),
-        children: [
+        customActions: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(AskQuestionButton, {}),
           /* @__PURE__ */ jsx(WriteArticleButton, {}),
           /* @__PURE__ */ jsx(CreateLinkButton, {})
-        ]
+        ] })
       }
     ),
-    /* @__PURE__ */ jsxs(TabContext, { value: tab, children: [
-      /* @__PURE__ */ jsx(Box, { sx: { borderBottom: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsxs(TabList, { onChange: handleChange, style: { padding: 0 }, children: [
-        /* @__PURE__ */ jsx(Tab, { label: "Global Stats", value: "global" }),
-        /* @__PURE__ */ jsx(Tab, { label: "Leaderboard", value: "leaderboard" })
-      ] }) }),
-      /* @__PURE__ */ jsx(TabPanel, { value: "global", style: { padding: "24px 0" }, children: /* @__PURE__ */ jsx(GlobalStatsContent, {}) }),
-      /* @__PURE__ */ jsx(TabPanel, { value: "leaderboard", style: { padding: "24px 0" }, children: /* @__PURE__ */ jsx(TopRankingUsers, { limit: 10 }) })
+    /* @__PURE__ */ jsxs(Tabs, { selectedKey: tab, onSelectionChange: (key) => setTab(key), children: [
+      /* @__PURE__ */ jsxs(TabList, { children: [
+        /* @__PURE__ */ jsx(Tab, { id: "global", children: "Global Stats" }),
+        !disabled.questions && /* @__PURE__ */ jsx(Tab, { id: "leaderboard", children: "Leaderboard" })
+      ] }),
+      /* @__PURE__ */ jsx(TabPanel, { id: "global", className: styles.tabPanel, children: /* @__PURE__ */ jsx(GlobalStatsContent, {}) }),
+      !disabled.questions && /* @__PURE__ */ jsx(TabPanel, { id: "leaderboard", className: styles.tabPanel, children: /* @__PURE__ */ jsx(TopRankingUsers, { limit: 10 }) })
     ] })
   ] });
 };

package/dist/components/Statistics/StatisticsPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatisticsPage.esm.js","sources":["../../../src/components/Statistics/StatisticsPage.tsx"],"sourcesContent":["import {\n  AskQuestionButton,\n  ContentHeader,\n  CreateLinkButton,\n  TopRankingUsers,\n  WriteArticleButton,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { GlobalStatsContent } from './GlobalStatsContent';\nimport { Box, Tab } from '@material-ui/core';\nimport EmojiEventsOutlined from '@material-ui/icons/EmojiEventsOutlined';\nimport { TabContext, TabList, TabPanel } from '@material-ui/lab';\nimport { useState } from 'react';\n\nexport const StatisticsPage = () => {\n  const [tab, setTab] = useState('global');\n\n  const handleChange = (_event: React.ChangeEvent<{}>, newValue: string) => {\n    setTab(newValue);\n  };\n\n  return (\n    <>\n      <ContentHeader\n        title=\"Statistics\"\n        titleIcon={<EmojiEventsOutlined fontSize=\"large\" />}\n      >\n        <AskQuestionButton />\n        <WriteArticleButton />\n        <CreateLinkButton />\n      </ContentHeader>\n      <TabContext value={tab}>\n        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>\n          <TabList onChange={handleChange} style={{ padding: 0 }}>\n            <Tab label=\"Global Stats\" value=\"global\" />\n            <Tab label=\"Leaderboard\" value=\"leaderboard\" />\n          </TabList>\n        </Box>\n        <TabPanel value=\"global\" style={{ padding: '24px 0' }}>\n          <GlobalStatsContent />\n        </TabPanel>\n        <TabPanel value=\"leaderboard\" style={{ padding: '24px 0' }}>\n          <TopRankingUsers limit={10} />\n        </TabPanel>\n      </TabContext>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAaO,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,CAAA,GAAI,SAAS,QAAQ,CAAA;AAEvC,EAAA,MAAM,YAAA,GAAe,CAAC,MAAA,EAA+B,QAAA,KAAqB;AACxE,IAAA,MAAA,CAAO,QAAQ,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,YAAA;AAAA,QACN,SAAA,kBAAW,GAAA,CAAC,mBAAA,EAAA,EAAoB,QAAA,EAAS,OAAA,EAAQ,CAAA;AAAA,QAEjD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA;AAAA,8BAClB,kBAAA,EAAA,EAAmB,CAAA;AAAA,8BACnB,gBAAA,EAAA,EAAiB;AAAA;AAAA;AAAA,KACpB;AAAA,oBACA,IAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,GAAA,EACjB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAI,EAAA,EAAI,EAAE,YAAA,EAAc,CAAA,EAAG,aAAa,SAAA,EAAU,EACjD,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EAAQ,UAAU,YAAA,EAAc,KAAA,EAAO,EAAE,OAAA,EAAS,GAAE,EACnD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,cAAA,EAAe,KAAA,EAAM,QAAA,EAAS,CAAA;AAAA,wBACzC,GAAA,CAAC,GAAA,EAAA,EAAI,KAAA,EAAM,aAAA,EAAc,OAAM,aAAA,EAAc;AAAA,OAAA,EAC/C,CAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,QAAA,EAAS,KAAA,EAAO,EAAE,OAAA,EAAS,QAAA,EAAS,EAClD,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,CAAA,EACtB,CAAA;AAAA,sBACA,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,aAAA,EAAc,KAAA,EAAO,EAAE,OAAA,EAAS,QAAA,EAAS,EACvD,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAO,IAAI,CAAA,EAC9B;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"StatisticsPage.esm.js","sources":["../../../src/components/Statistics/StatisticsPage.tsx"],"sourcesContent":["import {\n  AskQuestionButton,\n  CreateLinkButton,\n  TopRankingUsers,\n  useQetaConfig,\n  WriteArticleButton,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { GlobalStatsContent } from './GlobalStatsContent';\nimport { Header, Tab, TabList, TabPanel, Tabs } from '@backstage/ui';\nimport { useEffect, useState } from 'react';\nimport styles from './StatisticsPage.module.css';\n\nexport const StatisticsPage = () => {\n  const [tab, setTab] = useState('global');\n  const { disabled } = useQetaConfig();\n\n  useEffect(() => {\n    if (disabled.questions && tab === 'leaderboard') {\n      setTab('global');\n    }\n  }, [disabled.questions, tab]);\n\n  return (\n    <>\n      <Header\n        title=\"Statistics\"\n        customActions={\n          <>\n            <AskQuestionButton />\n            <WriteArticleButton />\n            <CreateLinkButton />\n          </>\n        }\n      />\n      <Tabs selectedKey={tab} onSelectionChange={key => setTab(key as string)}>\n        <TabList>\n          <Tab id=\"global\">Global Stats</Tab>\n          {!disabled.questions && <Tab id=\"leaderboard\">Leaderboard</Tab>}\n        </TabList>\n        <TabPanel id=\"global\" className={styles.tabPanel}>\n          <GlobalStatsContent />\n        </TabPanel>\n        {!disabled.questions && (\n          <TabPanel id=\"leaderboard\" className={styles.tabPanel}>\n            <TopRankingUsers limit={10} />\n          </TabPanel>\n        )}\n      </Tabs>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAYO,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,CAAA,GAAI,SAAS,QAAQ,CAAA;AACvC,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAA,CAAS,SAAA,IAAa,GAAA,KAAQ,aAAA,EAAe;AAC/C,MAAA,MAAA,CAAO,QAAQ,CAAA;AAAA,IACjB;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,CAAS,SAAA,EAAW,GAAG,CAAC,CAAA;AAE5B,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,YAAA;AAAA,QACN,+BACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA;AAAA,8BAClB,kBAAA,EAAA,EAAmB,CAAA;AAAA,8BACnB,gBAAA,EAAA,EAAiB;AAAA,SAAA,EACpB;AAAA;AAAA,KAEJ;AAAA,oBACA,IAAA,CAAC,QAAK,WAAA,EAAa,GAAA,EAAK,mBAAmB,CAAA,GAAA,KAAO,MAAA,CAAO,GAAa,CAAA,EACpE,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,QAAA,EAAS,QAAA,EAAA,cAAA,EAAY,CAAA;AAAA,QAC5B,CAAC,QAAA,CAAS,SAAA,wBAAc,GAAA,EAAA,EAAI,EAAA,EAAG,eAAc,QAAA,EAAA,aAAA,EAAW;AAAA,OAAA,EAC3D,CAAA;AAAA,sBACA,GAAA,CAAC,YAAS,EAAA,EAAG,QAAA,EAAS,WAAW,MAAA,CAAO,QAAA,EACtC,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,CAAA,EACtB,CAAA;AAAA,MACC,CAAC,QAAA,CAAS,SAAA,oBACT,GAAA,CAAC,YAAS,EAAA,EAAG,aAAA,EAAc,SAAA,EAAW,MAAA,CAAO,QAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAO,IAAI,CAAA,EAC9B;AAAA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/Statistics/StatisticsPage.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  .StatisticsPage_tabPanel__60a80965a3 {\n    padding: var(--bui-space-6) 0;\n  }\n}\n";
+var styles = {"tabPanel":"StatisticsPage_tabPanel__60a80965a3"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=StatisticsPage.module.css.esm.js.map

package/dist/components/Statistics/StatisticsPage.module.css.esm.js.map

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

package/dist/components/TagPage/TagPage.esm.js

@@ -1,26 +1,23 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { qetaTranslationRef, useIsModerator, qetaApiRef, ContentHeader, TagFollowButton, AskQuestionButton, WriteArticleButton, CreateLinkButton, ContentHeaderCard, PostsContainer, TagsContainer, EditTagModal, DeleteModal } from '@drodil/backstage-plugin-qeta-react';
-import LocalOfferOutlined from '@material-ui/icons/LocalOfferOutlined';
-import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
-import PeopleIcon from '@material-ui/icons/People';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
-import { useApi, alertApiRef } from '@backstage/core-plugin-api';
-import { EntityRefLink } from '@backstage/plugin-catalog-react';
+import { qetaTranslationRef, useQetaConfig, useIsModerator, qetaApiRef, DeleteButton, TagFollowButton, AskQuestionButton, WriteArticleButton, CreateLinkButton, PostsContainer, TagsContainer, EditTagModal, DeleteModal, UserLink } from '@drodil/backstage-plugin-qeta-react';
+import { RiEditLine } from '@remixicon/react';
+import { useApi } from '@backstage/core-plugin-api';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { Typography, Button } from '@material-ui/core';
+import { Header, TooltipTrigger, ButtonIcon, Tooltip } from '@backstage/ui';
+import { toastApiRef } from '@backstage/frontend-plugin-api';
 
 const TagPage = () => {
   const { tag } = useParams();
   const { t } = useTranslationRef(qetaTranslationRef);
+  const { disabled } = useQetaConfig();
   const [resp, setResp] = useState();
   const { isModerator } = useIsModerator();
   const [editModalOpen, setEditModalOpen] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const qetaApi = useApi(qetaApiRef);
-  const alertApi = useApi(alertApiRef);
+  const toastApi = useApi(toastApiRef);
   const fetchTag = () => {
     if (!tag) {
       setResp(void 0);
@@ -31,16 +28,15 @@ const TagPage = () => {
         setResp(res);
       }
     }).catch((e) => {
-      alertApi.post({
-        message: e.message,
-        severity: "error",
-        display: "transient"
+      toastApi.post({
+        title: e.message,
+        status: "warning"
       });
     });
   };
   useEffect(() => {
     fetchTag();
-  }, [qetaApi, tag, alertApi]);
+  }, [qetaApi, tag, toastApi]);
   const handleEditModalClose = () => {
     setEditModalOpen(false);
     fetchTag();
@@ -48,85 +44,60 @@ const TagPage = () => {
   const handleDeleteModalClose = () => {
     setDeleteModalOpen(false);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    tag ? /* @__PURE__ */ jsxs(
-      ContentHeader,
+  if (disabled.tags) {
+    return null;
+  }
+  const getMetadata = (r) => {
+    if (!r) {
+      return [];
+    }
+    const metadata = [
       {
-        title: tag,
-        titleIcon: /* @__PURE__ */ jsx(LocalOfferOutlined, { fontSize: "large" }),
-        children: [
-          /* @__PURE__ */ jsx(TagFollowButton, { tag }),
-          /* @__PURE__ */ jsx(AskQuestionButton, { tags: [tag] }),
-          /* @__PURE__ */ jsx(WriteArticleButton, { tags: [tag] }),
-          /* @__PURE__ */ jsx(CreateLinkButton, { tags: [tag] })
-        ]
-      }
-    ) : /* @__PURE__ */ jsxs(
-      ContentHeader,
+        label: t("metadata.posts"),
+        value: r.postsCount
+      },
       {
-        title: t("tagPage.defaultTitle", {}),
-        titleIcon: /* @__PURE__ */ jsx(LocalOfferOutlined, { fontSize: "large" }),
-        children: [
-          /* @__PURE__ */ jsx(AskQuestionButton, {}),
-          /* @__PURE__ */ jsx(WriteArticleButton, {}),
-          /* @__PURE__ */ jsx(CreateLinkButton, {})
-        ]
+        label: t("metadata.followers"),
+        value: r.followerCount
       }
-    ),
-    resp && /* @__PURE__ */ jsxs(
-      ContentHeaderCard,
+    ];
+    if (r?.experts && r.experts.length > 0) {
+      metadata.push({
+        label: t("common.experts"),
+        value: /* @__PURE__ */ jsx(Fragment, { children: r.experts.map((e, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(UserLink, { entityRef: e }, e),
+          i === r.experts.length - 1 ? "" : ","
+        ] })) })
+      });
+    }
+    return metadata;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Header,
       {
-        description: resp.description,
-        imageIcon: /* @__PURE__ */ jsx(LocalOfferOutlined, { style: { fontSize: 80 } }),
-        stats: [
-          {
-            label: t("common.postsLabel", {
-              count: resp.postsCount,
-              itemType: "post"
-            }),
-            value: resp.postsCount,
-            icon: /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small" })
-          },
-          {
-            label: t("common.followersLabel", { count: resp.followerCount }),
-            value: resp.followerCount,
-            icon: /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small" })
-          }
-        ],
-        children: [
-          resp.experts && resp.experts.length > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
-            t("common.experts"),
-            ": ",
-            resp.experts.map((e, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(EntityRefLink, { entityRef: e }, e),
-              i === resp.experts.length - 1 ? "" : ","
-            ] }))
-          ] }),
-          (resp.canEdit || resp.canDelete) && /* @__PURE__ */ jsxs("div", { style: { marginTop: "1em" }, children: [
-            resp.canEdit && /* @__PURE__ */ jsx(
-              Button,
+        title: tag ?? t("tagPage.defaultTitle", {}),
+        description: resp?.description,
+        metadata: getMetadata(resp),
+        customActions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          resp?.canEdit && /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+            /* @__PURE__ */ jsx(
+              ButtonIcon,
               {
-                variant: "outlined",
-                size: "small",
-                startIcon: /* @__PURE__ */ jsx(EditIcon, {}),
-                onClick: () => setEditModalOpen(true),
-                style: { marginRight: "0.5em" },
-                children: t("tagButton.edit")
+                icon: /* @__PURE__ */ jsx(RiEditLine, { size: 16 }),
+                variant: "secondary",
+                "aria-label": t("common.edit"),
+                onClick: () => setEditModalOpen(true)
               }
             ),
-            resp.canDelete && /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outlined",
-                size: "small",
-                color: "secondary",
-                startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
-                onClick: () => setDeleteModalOpen(true),
-                children: t("tagButton.delete")
-              }
-            )
-          ] })
-        ]
+            /* @__PURE__ */ jsx(Tooltip, { children: t("common.edit") })
+          ] }),
+          resp && /* @__PURE__ */ jsx(DeleteButton, { entity: resp, compact: true }),
+          tag && /* @__PURE__ */ jsx(TagFollowButton, { tag }),
+          tag && /* @__PURE__ */ jsx(AskQuestionButton, { tags: tag ? [tag] : void 0 }),
+          tag && /* @__PURE__ */ jsx(WriteArticleButton, { tags: tag ? [tag] : void 0 }),
+          tag && /* @__PURE__ */ jsx(CreateLinkButton, { tags: tag ? [tag] : void 0 })
+        ] })
       }
     ),
     tag && /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"TagPage.esm.js","sources":["../../../src/components/TagPage/TagPage.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n  AskQuestionButton,\n  ContentHeader,\n  CreateLinkButton,\n  DeleteModal,\n  EditTagModal,\n  PostsContainer,\n  qetaApiRef,\n  qetaTranslationRef,\n  TagFollowButton,\n  TagsContainer,\n  useIsModerator,\n  WriteArticleButton,\n} from '@drodil/backstage-plugin-qeta-react';\nimport LocalOfferOutlined from '@material-ui/icons/LocalOfferOutlined';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport PeopleIcon from '@material-ui/icons/People';\nimport EditIcon from '@material-ui/icons/Edit';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { TagResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { ContentHeaderCard } from '@drodil/backstage-plugin-qeta-react';\nimport { Button, Typography } from '@material-ui/core';\n\nexport const TagPage = () => {\n  const { tag } = useParams();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const [resp, setResp] = useState<undefined | TagResponse>();\n  const { isModerator } = useIsModerator();\n\n  const [editModalOpen, setEditModalOpen] = useState(false);\n  const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n\n  const qetaApi = useApi(qetaApiRef);\n  const alertApi = useApi(alertApiRef);\n\n  const fetchTag = () => {\n    if (!tag) {\n      setResp(undefined);\n      return;\n    }\n\n    qetaApi\n      .getTag(tag)\n      .then(res => {\n        if (res) {\n          setResp(res);\n        }\n      })\n      .catch(e => {\n        alertApi.post({\n          message: e.message,\n          severity: 'error',\n          display: 'transient',\n        });\n      });\n  };\n\n  useEffect(() => {\n    fetchTag();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [qetaApi, tag, alertApi]);\n\n  const handleEditModalClose = () => {\n    setEditModalOpen(false);\n    fetchTag();\n  };\n\n  const handleDeleteModalClose = () => {\n    setDeleteModalOpen(false);\n  };\n\n  return (\n    <>\n      {tag ? (\n        <ContentHeader\n          title={tag}\n          titleIcon={<LocalOfferOutlined fontSize=\"large\" />}\n        >\n          <TagFollowButton tag={tag} />\n          <AskQuestionButton tags={[tag]} />\n          <WriteArticleButton tags={[tag]} />\n          <CreateLinkButton tags={[tag]} />\n        </ContentHeader>\n      ) : (\n        <ContentHeader\n          title={t('tagPage.defaultTitle', {})}\n          titleIcon={<LocalOfferOutlined fontSize=\"large\" />}\n        >\n          <AskQuestionButton />\n          <WriteArticleButton />\n          <CreateLinkButton />\n        </ContentHeader>\n      )}\n      {resp && (\n        <ContentHeaderCard\n          description={resp.description}\n          imageIcon={<LocalOfferOutlined style={{ fontSize: 80 }} />}\n          stats={[\n            {\n              label: t('common.postsLabel', {\n                count: resp.postsCount,\n                itemType: 'post',\n              }),\n              value: resp.postsCount,\n              icon: <QuestionAnswerIcon fontSize=\"small\" />,\n            },\n            {\n              label: t('common.followersLabel', { count: resp.followerCount }),\n              value: resp.followerCount,\n              icon: <PeopleIcon fontSize=\"small\" />,\n            },\n          ]}\n        >\n          {resp.experts && resp.experts.length > 0 && (\n            <Typography variant=\"caption\">\n              {t('common.experts')}\n              {': '}\n              {resp.experts.map((e, i) => (\n                <>\n                  <EntityRefLink key={e} entityRef={e} />\n                  {i === resp.experts!.length - 1 ? '' : ','}\n                </>\n              ))}\n            </Typography>\n          )}\n          {(resp.canEdit || resp.canDelete) && (\n            <div style={{ marginTop: '1em' }}>\n              {resp.canEdit && (\n                <Button\n                  variant=\"outlined\"\n                  size=\"small\"\n                  startIcon={<EditIcon />}\n                  onClick={() => setEditModalOpen(true)}\n                  style={{ marginRight: '0.5em' }}\n                >\n                  {t('tagButton.edit')}\n                </Button>\n              )}\n              {resp.canDelete && (\n                <Button\n                  variant=\"outlined\"\n                  size=\"small\"\n                  color=\"secondary\"\n                  startIcon={<DeleteIcon />}\n                  onClick={() => setDeleteModalOpen(true)}\n                >\n                  {t('tagButton.delete')}\n                </Button>\n              )}\n            </div>\n          )}\n        </ContentHeaderCard>\n      )}\n      {tag && (\n        <PostsContainer\n          tags={[tag ?? '']}\n          filterPanelProps={{ showTagFilter: false }}\n          showTypeLabel\n          defaultView=\"list\"\n          prefix=\"tag-posts\"\n        />\n      )}\n      {!tag && <TagsContainer />}\n      {resp && (\n        <>\n          <EditTagModal\n            tag={resp}\n            open={editModalOpen}\n            onClose={handleEditModalClose}\n            isModerator={isModerator}\n          />\n          <DeleteModal\n            open={deleteModalOpen}\n            onClose={handleDeleteModalClose}\n            entity={resp}\n          />\n        </>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BO,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,EAAE,GAAA,EAAI,GAAI,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAA,EAAkC;AAC1D,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,cAAA,EAAe;AAEvC,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5D,EAAA,MAAM,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAA,MAAM,QAAA,GAAW,OAAO,WAAW,CAAA;AAEnC,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,CAAC,GAAA,EAAK;AACR,MAAA,OAAA,CAAQ,MAAS,CAAA;AACjB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,CACG,MAAA,CAAO,GAAG,CAAA,CACV,IAAA,CAAK,CAAA,GAAA,KAAO;AACX,MAAA,IAAI,GAAA,EAAK;AACP,QAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,MACb;AAAA,IACF,CAAC,CAAA,CACA,KAAA,CAAM,CAAA,CAAA,KAAK;AACV,MAAA,QAAA,CAAS,IAAA,CAAK;AAAA,QACZ,SAAS,CAAA,CAAE,OAAA;AAAA,QACX,QAAA,EAAU,OAAA;AAAA,QACV,OAAA,EAAS;AAAA,OACV,CAAA;AAAA,IACH,CAAC,CAAA;AAAA,EACL,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,EAAS;AAAA,EAEX,CAAA,EAAG,CAAC,OAAA,EAAS,GAAA,EAAK,QAAQ,CAAC,CAAA;AAE3B,EAAA,MAAM,uBAAuB,MAAM;AACjC,IAAA,gBAAA,CAAiB,KAAK,CAAA;AACtB,IAAA,QAAA,EAAS;AAAA,EACX,CAAA;AAEA,EAAA,MAAM,yBAAyB,MAAM;AACnC,IAAA,kBAAA,CAAmB,KAAK,CAAA;AAAA,EAC1B,CAAA;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,GAAA,mBACC,IAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,GAAA;AAAA,QACP,SAAA,kBAAW,GAAA,CAAC,kBAAA,EAAA,EAAmB,QAAA,EAAS,OAAA,EAAQ,CAAA;AAAA,QAEhD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,mBAAgB,GAAA,EAAU,CAAA;AAAA,0BAC3B,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,CAAC,GAAG,CAAA,EAAG,CAAA;AAAA,0BAChC,GAAA,CAAC,kBAAA,EAAA,EAAmB,IAAA,EAAM,CAAC,GAAG,CAAA,EAAG,CAAA;AAAA,0BACjC,GAAA,CAAC,gBAAA,EAAA,EAAiB,IAAA,EAAM,CAAC,GAAG,CAAA,EAAG;AAAA;AAAA;AAAA,KACjC,mBAEA,IAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,CAAE,sBAAA,EAAwB,EAAE,CAAA;AAAA,QACnC,SAAA,kBAAW,GAAA,CAAC,kBAAA,EAAA,EAAmB,QAAA,EAAS,OAAA,EAAQ,CAAA;AAAA,QAEhD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA;AAAA,8BAClB,kBAAA,EAAA,EAAmB,CAAA;AAAA,8BACnB,gBAAA,EAAA,EAAiB;AAAA;AAAA;AAAA,KACpB;AAAA,IAED,IAAA,oBACC,IAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,aAAa,IAAA,CAAK,WAAA;AAAA,QAClB,2BAAW,GAAA,CAAC,kBAAA,EAAA,EAAmB,OAAO,EAAE,QAAA,EAAU,IAAG,EAAG,CAAA;AAAA,QACxD,KAAA,EAAO;AAAA,UACL;AAAA,YACE,KAAA,EAAO,EAAE,mBAAA,EAAqB;AAAA,cAC5B,OAAO,IAAA,CAAK,UAAA;AAAA,cACZ,QAAA,EAAU;AAAA,aACX,CAAA;AAAA,YACD,OAAO,IAAA,CAAK,UAAA;AAAA,YACZ,IAAA,kBAAM,GAAA,CAAC,kBAAA,EAAA,EAAmB,QAAA,EAAS,OAAA,EAAQ;AAAA,WAC7C;AAAA,UACA;AAAA,YACE,OAAO,CAAA,CAAE,uBAAA,EAAyB,EAAE,KAAA,EAAO,IAAA,CAAK,eAAe,CAAA;AAAA,YAC/D,OAAO,IAAA,CAAK,aAAA;AAAA,YACZ,IAAA,kBAAM,GAAA,CAAC,UAAA,EAAA,EAAW,QAAA,EAAS,OAAA,EAAQ;AAAA;AACrC,SACF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,OAAA,IAAW,KAAK,OAAA,CAAQ,MAAA,GAAS,qBACrC,IAAA,CAAC,UAAA,EAAA,EAAW,SAAQ,SAAA,EACjB,QAAA,EAAA;AAAA,YAAA,CAAA,CAAE,gBAAgB,CAAA;AAAA,YAClB,IAAA;AAAA,YACA,KAAK,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,EAAG,sBACpB,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,aAAA,EAAA,EAAsB,SAAA,EAAW,CAAA,EAAA,EAAd,CAAiB,CAAA;AAAA,cACpC,CAAA,KAAM,IAAA,CAAK,OAAA,CAAS,MAAA,GAAS,IAAI,EAAA,GAAK;AAAA,aAAA,EACzC,CACD;AAAA,WAAA,EACH,CAAA;AAAA,UAAA,CAEA,IAAA,CAAK,OAAA,IAAW,IAAA,CAAK,SAAA,qBACrB,IAAA,CAAC,SAAI,KAAA,EAAO,EAAE,SAAA,EAAW,KAAA,EAAM,EAC5B,QAAA,EAAA;AAAA,YAAA,IAAA,CAAK,OAAA,oBACJ,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAQ,UAAA;AAAA,gBACR,IAAA,EAAK,OAAA;AAAA,gBACL,SAAA,sBAAY,QAAA,EAAA,EAAS,CAAA;AAAA,gBACrB,OAAA,EAAS,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAAA,gBACpC,KAAA,EAAO,EAAE,WAAA,EAAa,OAAA,EAAQ;AAAA,gBAE7B,YAAE,gBAAgB;AAAA;AAAA,aACrB;AAAA,YAED,KAAK,SAAA,oBACJ,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAQ,UAAA;AAAA,gBACR,IAAA,EAAK,OAAA;AAAA,gBACL,KAAA,EAAM,WAAA;AAAA,gBACN,SAAA,sBAAY,UAAA,EAAA,EAAW,CAAA;AAAA,gBACvB,OAAA,EAAS,MAAM,kBAAA,CAAmB,IAAI,CAAA;AAAA,gBAErC,YAAE,kBAAkB;AAAA;AAAA;AACvB,WAAA,EAEJ;AAAA;AAAA;AAAA,KAEJ;AAAA,IAED,GAAA,oBACC,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,CAAC,GAAA,IAAO,EAAE,CAAA;AAAA,QAChB,gBAAA,EAAkB,EAAE,aAAA,EAAe,KAAA,EAAM;AAAA,QACzC,aAAA,EAAa,IAAA;AAAA,QACb,WAAA,EAAY,MAAA;AAAA,QACZ,MAAA,EAAO;AAAA;AAAA,KACT;AAAA,IAED,CAAC,GAAA,oBAAO,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,IACvB,wBACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,IAAA;AAAA,UACL,IAAA,EAAM,aAAA;AAAA,UACN,OAAA,EAAS,oBAAA;AAAA,UACT;AAAA;AAAA,OACF;AAAA,sBACA,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAM,eAAA;AAAA,UACN,OAAA,EAAS,sBAAA;AAAA,UACT,MAAA,EAAQ;AAAA;AAAA;AACV,KAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TagPage.esm.js","sources":["../../../src/components/TagPage/TagPage.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n  AskQuestionButton,\n  CreateLinkButton,\n  DeleteButton,\n  DeleteModal,\n  EditTagModal,\n  PostsContainer,\n  qetaApiRef,\n  qetaTranslationRef,\n  TagFollowButton,\n  TagsContainer,\n  useIsModerator,\n  useQetaConfig,\n  UserLink,\n  WriteArticleButton,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { RiEditLine } from '@remixicon/react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { TagResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  ButtonIcon,\n  Header,\n  HeaderMetadataItem,\n  Tooltip,\n  TooltipTrigger,\n} from '@backstage/ui';\nimport { toastApiRef } from '@backstage/frontend-plugin-api';\n\nexport const TagPage = () => {\n  const { tag } = useParams();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n  const [resp, setResp] = useState<undefined | TagResponse>();\n  const { isModerator } = useIsModerator();\n\n  const [editModalOpen, setEditModalOpen] = useState(false);\n  const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n\n  const qetaApi = useApi(qetaApiRef);\n  const toastApi = useApi(toastApiRef);\n\n  const fetchTag = () => {\n    if (!tag) {\n      setResp(undefined);\n      return;\n    }\n\n    qetaApi\n      .getTag(tag)\n      .then(res => {\n        if (res) {\n          setResp(res);\n        }\n      })\n      .catch(e => {\n        toastApi.post({\n          title: e.message,\n          status: 'warning',\n        });\n      });\n  };\n\n  useEffect(() => {\n    fetchTag();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [qetaApi, tag, toastApi]);\n\n  const handleEditModalClose = () => {\n    setEditModalOpen(false);\n    fetchTag();\n  };\n\n  const handleDeleteModalClose = () => {\n    setDeleteModalOpen(false);\n  };\n\n  if (disabled.tags) {\n    return null;\n  }\n\n  const getMetadata = (r?: TagResponse): HeaderMetadataItem[] => {\n    if (!r) {\n      return [];\n    }\n    const metadata: HeaderMetadataItem[] = [\n      {\n        label: t('metadata.posts'),\n        value: r.postsCount,\n      },\n      {\n        label: t('metadata.followers'),\n        value: r.followerCount,\n      },\n    ];\n    if (r?.experts && r.experts.length > 0) {\n      metadata.push({\n        label: t('common.experts'),\n        value: (\n          <>\n            {r.experts.map((e, i) => (\n              <>\n                <UserLink key={e} entityRef={e} />\n                {i === r.experts!.length - 1 ? '' : ','}\n              </>\n            ))}\n          </>\n        ),\n      });\n    }\n    return metadata;\n  };\n\n  return (\n    <>\n      <Header\n        title={tag ?? t('tagPage.defaultTitle', {})}\n        description={resp?.description}\n        metadata={getMetadata(resp)}\n        customActions={\n          <>\n            {resp?.canEdit && (\n              <TooltipTrigger>\n                <ButtonIcon\n                  icon={<RiEditLine size={16} />}\n                  variant=\"secondary\"\n                  aria-label={t('common.edit')}\n                  onClick={() => setEditModalOpen(true)}\n                />\n                <Tooltip>{t('common.edit')}</Tooltip>\n              </TooltipTrigger>\n            )}\n            {resp && <DeleteButton entity={resp} compact />}\n            {tag && <TagFollowButton tag={tag} />}\n            {tag && <AskQuestionButton tags={tag ? [tag] : undefined} />}\n            {tag && <WriteArticleButton tags={tag ? [tag] : undefined} />}\n            {tag && <CreateLinkButton tags={tag ? [tag] : undefined} />}\n          </>\n        }\n      />\n      {tag && (\n        <PostsContainer\n          tags={[tag ?? '']}\n          filterPanelProps={{ showTagFilter: false }}\n          showTypeLabel\n          defaultView=\"list\"\n          prefix=\"tag-posts\"\n        />\n      )}\n      {!tag && <TagsContainer />}\n      {resp && (\n        <>\n          <EditTagModal\n            tag={resp}\n            open={editModalOpen}\n            onClose={handleEditModalClose}\n            isModerator={isModerator}\n          />\n          <DeleteModal\n            open={deleteModalOpen}\n            onClose={handleDeleteModalClose}\n            entity={resp}\n          />\n        </>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/TechDocsAskQuestionAddon/TechDocsAskQuestionAddon.esm.js

@@ -1,25 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { makeStyles, Portal, Typography } from '@material-ui/core';
+import { createPortal } from 'react-dom';
 import { useTechDocsReaderPage, useShadowRootElements } from '@backstage/plugin-techdocs-react';
-import { Link } from '@backstage/core-components';
 import { askRouteRef } from '@drodil/backstage-plugin-qeta-react';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import ContactSupportIcon from '@material-ui/icons/ContactSupport';
+import { RiQuestionAnswerLine } from '@remixicon/react';
 import { stringifyEntityRef } from '@backstage/catalog-model';
+import { Text } from '@backstage/ui';
+import { Link } from 'react-router-dom';
+import styles from './TechDocsAskQuestionAddon.module.css.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    padding: theme.spacing(1)
-  },
-  link: {
-    display: "grid",
-    gridAutoFlow: "column",
-    justifyContent: "flex-end",
-    alignItems: "center"
-  }
-}));
 const TechDocsAskQuestionAddon = () => {
-  const styles = useStyles();
   const { title, subtitle, entityRef } = useTechDocsReaderPage();
   const [mainContent] = useShadowRootElements([
     '[data-md-component="main"] .md-content'
@@ -30,29 +20,30 @@ const TechDocsAskQuestionAddon = () => {
     params.append("entity", stringifyEntityRef(entityRef));
   }
   if (title) {
-    params.append(
-      "title",
-      `Question about "${title}${subtitle ? ` - ${subtitle}` : ""}"`
-    );
+    const subtitleSuffix = subtitle ? ` - ${subtitle}` : "";
+    params.append("title", `Question about "${title}${subtitleSuffix}"`);
   }
   params.append(
     "content",
     `
 
-This question relates to ${window.location.href}`
+This question relates to ${globalThis.location.href}`
+  );
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { className: styles.root, children: /* @__PURE__ */ jsxs(
+      Link,
+      {
+        target: "_blank",
+        className: styles.link,
+        to: `${askRoute()}?${params.toString()}`,
+        children: [
+          /* @__PURE__ */ jsx(RiQuestionAnswerLine, { size: 16 }),
+          /* @__PURE__ */ jsx(Text, { as: "span", children: "Ask a question about the content" })
+        ]
+      }
+    ) }),
+    mainContent ?? document.body
   );
-  return /* @__PURE__ */ jsx(Portal, { container: mainContent, children: /* @__PURE__ */ jsx("div", { className: styles.root, children: /* @__PURE__ */ jsxs(
-    Link,
-    {
-      target: "_blank",
-      className: styles.link,
-      to: `${askRoute()}?${params.toString()}`,
-      children: [
-        /* @__PURE__ */ jsx(ContactSupportIcon, {}),
-        /* @__PURE__ */ jsx(Typography, { children: "Ask a question about the content" })
-      ]
-    }
-  ) }) });
 };
 
 export { TechDocsAskQuestionAddon };

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

@@ -1 +1 @@
-{"version":3,"file":"TechDocsAskQuestionAddon.esm.js","sources":["../../../src/components/TechDocsAskQuestionAddon/TechDocsAskQuestionAddon.tsx"],"sourcesContent":["import { makeStyles, Portal, Typography } from '@material-ui/core';\nimport {\n  useShadowRootElements,\n  useTechDocsReaderPage,\n} from '@backstage/plugin-techdocs-react';\nimport { Link } from '@backstage/core-components';\nimport { askRouteRef } from '@drodil/backstage-plugin-qeta-react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport ContactSupportIcon from '@material-ui/icons/ContactSupport';\nimport { stringifyEntityRef } from '@backstage/catalog-model';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    padding: theme.spacing(1),\n  },\n  link: {\n    display: 'grid',\n    gridAutoFlow: 'column',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n  },\n}));\n\nexport const TechDocsAskQuestionAddon = () => {\n  const styles = useStyles();\n  const { title, subtitle, entityRef } = useTechDocsReaderPage();\n  const [mainContent] = useShadowRootElements([\n    '[data-md-component=\"main\"] .md-content',\n  ]);\n\n  const askRoute = useRouteRef(askRouteRef);\n\n  const params = new URLSearchParams();\n  if (entityRef) {\n    params.append('entity', stringifyEntityRef(entityRef));\n  }\n  if (title) {\n    params.append(\n      'title',\n      `Question about \"${title}${subtitle ? ` - ${subtitle}` : ''}\"`,\n    );\n  }\n  params.append(\n    'content',\n    `\\n\\nThis question relates to ${window.location.href}`,\n  );\n\n  return (\n    <Portal container={mainContent}>\n      <div className={styles.root}>\n        <Link\n          target=\"_blank\"\n          className={styles.link}\n          to={`${askRoute()}?${params.toString()}`}\n        >\n          <ContactSupportIcon />\n          <Typography>Ask a question about the content</Typography>\n        </Link>\n      </div>\n    </Portal>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GAC1B;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,MAAA;AAAA,IACT,YAAA,EAAc,QAAA;AAAA,IACd,cAAA,EAAgB,UAAA;AAAA,IAChB,UAAA,EAAY;AAAA;AAEhB,CAAA,CAAE,CAAA;AAEK,MAAM,2BAA2B,MAAM;AAC5C,EAAA,MAAM,SAAS,SAAA,EAAU;AACzB,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,SAAA,KAAc,qBAAA,EAAsB;AAC7D,EAAA,MAAM,CAAC,WAAW,CAAA,GAAI,qBAAA,CAAsB;AAAA,IAC1C;AAAA,GACD,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,YAAY,WAAW,CAAA;AAExC,EAAA,MAAM,MAAA,GAAS,IAAI,eAAA,EAAgB;AACnC,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,MAAA,CAAO,MAAA,CAAO,QAAA,EAAU,kBAAA,CAAmB,SAAS,CAAC,CAAA;AAAA,EACvD;AACA,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,MAAA,CAAO,MAAA;AAAA,MACL,OAAA;AAAA,MACA,mBAAmB,KAAK,CAAA,EAAG,WAAW,CAAA,GAAA,EAAM,QAAQ,KAAK,EAAE,CAAA,CAAA;AAAA,KAC7D;AAAA,EACF;AACA,EAAA,MAAA,CAAO,MAAA;AAAA,IACL,SAAA;AAAA,IACA;;AAAA,yBAAA,EAAgC,MAAA,CAAO,SAAS,IAAI,CAAA;AAAA,GACtD;AAEA,EAAA,uBACE,GAAA,CAAC,UAAO,SAAA,EAAW,WAAA,EACjB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,IAAA,EACrB,QAAA,kBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAO,QAAA;AAAA,MACP,WAAW,MAAA,CAAO,IAAA;AAAA,MAClB,IAAI,CAAA,EAAG,QAAA,EAAU,CAAA,CAAA,EAAI,MAAA,CAAO,UAAU,CAAA,CAAA;AAAA,MAEtC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,CAAA;AAAA,wBACpB,GAAA,CAAC,cAAW,QAAA,EAAA,kCAAA,EAAgC;AAAA;AAAA;AAAA,KAEhD,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TechDocsAskQuestionAddon.esm.js","sources":["../../../src/components/TechDocsAskQuestionAddon/TechDocsAskQuestionAddon.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport {\n  useShadowRootElements,\n  useTechDocsReaderPage,\n} from '@backstage/plugin-techdocs-react';\nimport { askRouteRef } from '@drodil/backstage-plugin-qeta-react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { RiQuestionAnswerLine } from '@remixicon/react';\nimport { stringifyEntityRef } from '@backstage/catalog-model';\nimport { Text } from '@backstage/ui';\nimport { Link } from 'react-router-dom';\nimport styles from './TechDocsAskQuestionAddon.module.css';\n\nexport const TechDocsAskQuestionAddon = () => {\n  const { title, subtitle, entityRef } = useTechDocsReaderPage();\n  const [mainContent] = useShadowRootElements([\n    '[data-md-component=\"main\"] .md-content',\n  ]);\n\n  const askRoute = useRouteRef(askRouteRef);\n\n  const params = new URLSearchParams();\n  if (entityRef) {\n    params.append('entity', stringifyEntityRef(entityRef));\n  }\n  if (title) {\n    const subtitleSuffix = subtitle ? ` - ${subtitle}` : '';\n    params.append('title', `Question about \"${title}${subtitleSuffix}\"`);\n  }\n  params.append(\n    'content',\n    `\\n\\nThis question relates to ${globalThis.location.href}`,\n  );\n\n  return createPortal(\n    <div className={styles.root}>\n      <Link\n        target=\"_blank\"\n        className={styles.link}\n        to={`${askRoute()}?${params.toString()}`}\n      >\n        <RiQuestionAnswerLine size={16} />\n        <Text as=\"span\">Ask a question about the content</Text>\n      </Link>\n    </div>,\n    mainContent ?? document.body,\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAaO,MAAM,2BAA2B,MAAM;AAC5C,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,SAAA,KAAc,qBAAA,EAAsB;AAC7D,EAAA,MAAM,CAAC,WAAW,CAAA,GAAI,qBAAA,CAAsB;AAAA,IAC1C;AAAA,GACD,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,YAAY,WAAW,CAAA;AAExC,EAAA,MAAM,MAAA,GAAS,IAAI,eAAA,EAAgB;AACnC,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,MAAA,CAAO,MAAA,CAAO,QAAA,EAAU,kBAAA,CAAmB,SAAS,CAAC,CAAA;AAAA,EACvD;AACA,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,MAAM,cAAA,GAAiB,QAAA,GAAW,CAAA,GAAA,EAAM,QAAQ,CAAA,CAAA,GAAK,EAAA;AACrD,IAAA,MAAA,CAAO,OAAO,OAAA,EAAS,CAAA,gBAAA,EAAmB,KAAK,CAAA,EAAG,cAAc,CAAA,CAAA,CAAG,CAAA;AAAA,EACrE;AACA,EAAA,MAAA,CAAO,MAAA;AAAA,IACL,SAAA;AAAA,IACA;;AAAA,yBAAA,EAAgC,UAAA,CAAW,SAAS,IAAI,CAAA;AAAA,GAC1D;AAEA,EAAA,OAAO,YAAA;AAAA,oBACL,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,IAAA,EACrB,QAAA,kBAAA,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAO,QAAA;AAAA,QACP,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,IAAI,CAAA,EAAG,QAAA,EAAU,CAAA,CAAA,EAAI,MAAA,CAAO,UAAU,CAAA,CAAA;AAAA,QAEtC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,MAAM,EAAA,EAAI,CAAA;AAAA,0BAChC,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,QAAA,EAAA,kCAAA,EAAgC;AAAA;AAAA;AAAA,KAClD,EACF,CAAA;AAAA,IACA,eAAe,QAAA,CAAS;AAAA,GAC1B;AACF;;;;"}

package/dist/components/TechDocsAskQuestionAddon/TechDocsAskQuestionAddon.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  .TechDocsAskQuestionAddon_root__e4f5fa866b {\n    padding: var(--bui-space-2);\n  }\n\n  .TechDocsAskQuestionAddon_link__e4f5fa866b {\n    display: grid;\n    grid-auto-flow: column;\n    justify-content: flex-end;\n    align-items: center;\n    gap: var(--bui-space-1);\n  }\n}\n";
+var styles = {"root":"TechDocsAskQuestionAddon_root__e4f5fa866b","link":"TechDocsAskQuestionAddon_link__e4f5fa866b"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=TechDocsAskQuestionAddon.module.css.esm.js.map

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

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