@drodil/backstage-plugin-qeta-react 3.25.1 → 3.27.0

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

@@ -1 +1 @@
-{"version":3,"file":"ArticleContent.esm.js","sources":["../../../src/components/ArticleContent/ArticleContent.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Avatar, Grid, makeStyles, Typography } from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useState } from 'react';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { ArticleButtons } from './ArticleButtons';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { CommentSection } from '../CommentSection/CommentSection';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\n\nexport type QetaArticleContentClassKey =\n  | 'content'\n  | 'headerImage'\n  | 'commentSection';\n\nexport const useStyles = makeStyles(\n  theme => {\n    return {\n      content: {\n        fontSize: '110%',\n        paddingTop: theme.spacing(2),\n        paddingBottom: theme.spacing(2),\n        marginBottom: theme.spacing(2),\n        borderBottom: `1px solid ${theme.palette.background.paper}`,\n      },\n      headerImage: {\n        marginBottom: theme.spacing(2),\n        marginTop: theme.spacing(2),\n        height: '250px',\n        objectFit: 'cover',\n        width: '100%',\n        border: `1px solid ${theme.palette.background.paper}`,\n        boxShadow: theme.shadows[1],\n      },\n      commentSection: {\n        borderBottom: `1px solid ${theme.palette.background.paper}`,\n        paddingBottom: theme.spacing(2),\n        marginBottom: theme.spacing(2),\n        marginLeft: 0,\n      },\n    };\n  },\n  { name: 'QetaArticle' },\n);\n\nexport const ArticleContent = (props: {\n  post: PostResponse;\n  views: number;\n}) => {\n  const { post, views } = props;\n  const styles = useStyles();\n  const { t } = useTranslation();\n  const { name, initials, user } = useEntityAuthor(post);\n  const [postEntity, setPostEntity] = useState(post);\n  const onCommentAction = (q: PostResponse, _?: AnswerResponse) => {\n    setPostEntity(q);\n  };\n\n  if (post.type !== 'article') {\n    return (\n      <WarningPanel title=\"Not found\" message=\"Could not find the article\" />\n    );\n  }\n\n  return (\n    <>\n      <Typography variant=\"h2\">{postEntity.title}</Typography>\n      <Grid container alignItems=\"center\">\n        <Grid item>\n          <Avatar\n            src={user?.spec?.profile?.picture}\n            className=\"qetaAvatar avatar\"\n            alt={name}\n            variant=\"rounded\"\n          >\n            {initials}\n          </Avatar>\n        </Grid>\n        <Grid item>\n          <Typography variant=\"subtitle1\">{name}</Typography>\n          <Typography variant=\"caption\">\n            {t('common.views', { count: views })} {' · '}\n            {t('authorBox.postedAtTime')}{' '}\n            <RelativeTimeWithTooltip value={postEntity.created} />\n          </Typography>\n        </Grid>\n      </Grid>\n      <Grid container>\n        <Grid item xs={12}>\n          <ArticleButtons post={postEntity} />\n        </Grid>\n      </Grid>\n      {postEntity.headerImage && (\n        <img\n          src={post.headerImage}\n          alt={post.title}\n          className={styles.headerImage}\n        />\n      )}\n      <MarkdownRenderer\n        content={postEntity.content}\n        className={styles.content}\n        showToc\n      />\n      <Typography variant=\"h6\">{t('common.comments')}</Typography>\n      <CommentSection\n        className={styles.commentSection}\n        post={postEntity}\n        onCommentAction={onCommentAction}\n      />\n      <Grid container>\n        <Grid item xs={12}>\n          <TagsAndEntities entity={postEntity} />\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ArticleContent.esm.js","sources":["../../../src/components/ArticleContent/ArticleContent.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Avatar, Grid, makeStyles, Typography } from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useState } from 'react';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { ArticleButtons } from './ArticleButtons';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { CommentSection } from '../CommentSection/CommentSection';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\n\nexport type QetaArticleContentClassKey =\n  | 'content'\n  | 'headerImage'\n  | 'commentSection';\n\nexport const useStyles = makeStyles(\n  theme => {\n    return {\n      content: {\n        fontSize: '110%',\n        paddingTop: theme.spacing(2),\n        paddingBottom: theme.spacing(2),\n        marginBottom: theme.spacing(2),\n        borderBottom: `1px solid ${theme.palette.background.paper}`,\n      },\n      headerImage: {\n        marginBottom: theme.spacing(2),\n        marginTop: theme.spacing(2),\n        height: '250px',\n        objectFit: 'cover',\n        width: '100%',\n        border: `1px solid ${theme.palette.background.paper}`,\n        boxShadow: theme.shadows[1],\n      },\n      commentSection: {\n        borderBottom: `1px solid ${theme.palette.background.paper}`,\n        paddingBottom: theme.spacing(2),\n        marginBottom: theme.spacing(2),\n        marginLeft: 0,\n      },\n    };\n  },\n  { name: 'QetaArticle' },\n);\n\nexport const ArticleContent = (props: {\n  post: PostResponse;\n  views: number;\n}) => {\n  const { post, views } = props;\n  const styles = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { name, initials, user } = useEntityAuthor(post);\n  const [postEntity, setPostEntity] = useState(post);\n  const onCommentAction = (q: PostResponse, _?: AnswerResponse) => {\n    setPostEntity(q);\n  };\n\n  if (post.type !== 'article') {\n    return (\n      <WarningPanel title=\"Not found\" message=\"Could not find the article\" />\n    );\n  }\n\n  return (\n    <>\n      <Typography variant=\"h2\">{postEntity.title}</Typography>\n      <Grid container alignItems=\"center\">\n        <Grid item>\n          <Avatar\n            src={user?.spec?.profile?.picture}\n            className=\"qetaAvatar avatar\"\n            alt={name}\n            variant=\"rounded\"\n          >\n            {initials}\n          </Avatar>\n        </Grid>\n        <Grid item>\n          <Typography variant=\"subtitle1\">{name}</Typography>\n          <Typography variant=\"caption\">\n            {t('common.views', { count: views })} {' · '}\n            {t('authorBox.postedAtTime')}{' '}\n            <RelativeTimeWithTooltip value={postEntity.created} />\n          </Typography>\n        </Grid>\n      </Grid>\n      <Grid container>\n        <Grid item xs={12}>\n          <ArticleButtons post={postEntity} />\n        </Grid>\n      </Grid>\n      {postEntity.headerImage && (\n        <img\n          src={post.headerImage}\n          alt={post.title}\n          className={styles.headerImage}\n        />\n      )}\n      <MarkdownRenderer\n        content={postEntity.content}\n        className={styles.content}\n        showToc\n      />\n      <Typography variant=\"h6\">{t('common.comments')}</Typography>\n      <CommentSection\n        className={styles.commentSection}\n        post={postEntity}\n        onCommentAction={onCommentAction}\n      />\n      <Grid container>\n        <Grid item xs={12}>\n          <TagsAndEntities entity={postEntity} />\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CAAS,KAAA,KAAA;AACP,IAAO,OAAA;AAAA,MACL,OAAS,EAAA;AAAA,QACP,QAAU,EAAA,MAAA;AAAA,QACV,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC3B,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC9B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC7B,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,WAAW,KAAK,CAAA;AAAA,OAC3D;AAAA,MACA,WAAa,EAAA;AAAA,QACX,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC7B,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC1B,MAAQ,EAAA,OAAA;AAAA,QACR,SAAW,EAAA,OAAA;AAAA,QACX,KAAO,EAAA,MAAA;AAAA,QACP,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,WAAW,KAAK,CAAA,CAAA;AAAA,QACnD,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,OAC5B;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,WAAW,KAAK,CAAA,CAAA;AAAA,QACzD,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC9B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC7B,UAAY,EAAA;AAAA;AACd,KACF;AAAA,GACF;AAAA,EACA,EAAE,MAAM,aAAc;AACxB;AAEa,MAAA,cAAA,GAAiB,CAAC,KAGzB,KAAA;AACJ,EAAM,MAAA,EAAE,IAAM,EAAA,KAAA,EAAU,GAAA,KAAA;AACxB,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,IAAM,EAAA,QAAA,EAAU,IAAK,EAAA,GAAI,gBAAgB,IAAI,CAAA;AACrD,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,IAAI,CAAA;AACjD,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAA,EAAiB,CAAuB,KAAA;AAC/D,IAAA,aAAA,CAAc,CAAC,CAAA;AAAA,GACjB;AAEA,EAAI,IAAA,IAAA,CAAK,SAAS,SAAW,EAAA;AAC3B,IAAA,uBACG,GAAA,CAAA,YAAA,EAAA,EAAa,KAAM,EAAA,WAAA,EAAY,SAAQ,4BAA6B,EAAA,CAAA;AAAA;AAIzE,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAM,EAAA,QAAA,EAAA,UAAA,CAAW,KAAM,EAAA,CAAA;AAAA,oBAC1C,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,YAAW,QACzB,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,IAAM,EAAA,IAAA,EAAM,OAAS,EAAA,OAAA;AAAA,UAC1B,SAAU,EAAA,mBAAA;AAAA,UACV,GAAK,EAAA,IAAA;AAAA,UACL,OAAQ,EAAA,SAAA;AAAA,UAEP,QAAA,EAAA;AAAA;AAAA,OAEL,EAAA,CAAA;AAAA,sBACA,IAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,WAAA,EAAa,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,wBACtC,IAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SACjB,EAAA,QAAA,EAAA;AAAA,UAAA,CAAA,CAAE,cAAgB,EAAA,EAAE,KAAO,EAAA,KAAA,EAAO,CAAA;AAAA,UAAE,GAAA;AAAA,UAAE,QAAA;AAAA,UACtC,EAAE,wBAAwB,CAAA;AAAA,UAAG,GAAA;AAAA,0BAC7B,GAAA,CAAA,uBAAA,EAAA,EAAwB,KAAO,EAAA,UAAA,CAAW,OAAS,EAAA;AAAA,SACtD,EAAA;AAAA,OACF,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EACb,8BAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,IACb,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAe,IAAM,EAAA,UAAA,EAAY,GACpC,CACF,EAAA,CAAA;AAAA,IACC,WAAW,WACV,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAK,IAAK,CAAA,WAAA;AAAA,QACV,KAAK,IAAK,CAAA,KAAA;AAAA,QACV,WAAW,MAAO,CAAA;AAAA;AAAA,KACpB;AAAA,oBAEF,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,SAAS,UAAW,CAAA,OAAA;AAAA,QACpB,WAAW,MAAO,CAAA,OAAA;AAAA,QAClB,OAAO,EAAA;AAAA;AAAA,KACT;AAAA,wBACC,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAM,EAAA,QAAA,EAAA,CAAA,CAAE,iBAAiB,CAAE,EAAA,CAAA;AAAA,oBAC/C,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,WAAW,MAAO,CAAA,cAAA;AAAA,QAClB,IAAM,EAAA,UAAA;AAAA,QACN;AAAA;AAAA,KACF;AAAA,oBACC,GAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EACb,8BAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,IACb,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA,EAAgB,MAAQ,EAAA,UAAA,EAAY,GACvC,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/AuthorBox/AuthorBox.esm.js

@@ -1,17 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
-import { UpdatedByLink, AuthorLink } from '../Links/Links.esm.js';
-import '@backstage/core-plugin-api';
-import '../../api.esm.js';
-import 'react-use';
-import 'react';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { AuthorLink, UpdatedByLink } from '../Links/Links.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@drodil/backstage-plugin-qeta-common';
-import '@backstage/plugin-permission-common';
 import { makeStyles, Box, Grid, Typography, Avatar } from '@material-ui/core';
+import { ExpertIcon } from '../Icons/ExpertIcon.esm.js';
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -36,7 +30,7 @@ const useStyles = makeStyles(
 );
 const AuthorBox = (props) => {
   const { entity } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const { name, initials, user } = useEntityAuthor(entity);
   const styles = useStyles();
   return /* @__PURE__ */ jsx(Box, { className: `qetaAuthorBox ${styles.authorBox}`, children: /* @__PURE__ */ jsxs(
@@ -52,22 +46,14 @@ const AuthorBox = (props) => {
           " ",
           /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: entity.created })
         ] }) }),
-        entity.updated && entity.updatedBy && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, style: { paddingBottom: 0, paddingTop: 0 }, children: /* @__PURE__ */ jsxs(Typography, { className: "qetaAuthorBoxUpdated", variant: "caption", children: [
-          t("authorBox.updatedAtTime"),
-          " ",
-          /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: entity.updated }),
-          " ",
-          t("authorBox.updatedBy"),
-          " ",
-          /* @__PURE__ */ jsx(UpdatedByLink, { entity })
-        ] }) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 2, style: { paddingTop: 0 }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid, { item: true, style: { paddingTop: 0 }, children: /* @__PURE__ */ jsx(
           Avatar,
           {
             src: user?.spec?.profile?.picture,
             className: "qetaAuthorBoxAvatar avatar",
             alt: name,
             variant: "rounded",
+            style: { width: "1.2em", height: "1.2em" },
             children: initials
           }
         ) }),
@@ -82,9 +68,21 @@ const AuthorBox = (props) => {
               overflow: "hidden",
               whiteSpace: "nowrap"
             },
-            children: /* @__PURE__ */ jsx(Box, { style: { paddingLeft: "5px" }, children: /* @__PURE__ */ jsx(AuthorLink, { entity }) })
+            children: /* @__PURE__ */ jsxs(Box, { style: { paddingLeft: "0.3em" }, children: [
+              /* @__PURE__ */ jsx(AuthorLink, { entity }),
+              "expert" in entity && entity.expert && /* @__PURE__ */ jsx(ExpertIcon, {})
+            ] })
           }
-        )
+        ),
+        entity.updated && entity.updatedBy && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, style: { paddingBottom: 0, paddingTop: 0 }, children: /* @__PURE__ */ jsxs(Typography, { className: "qetaAuthorBoxUpdated", variant: "caption", children: [
+          t("authorBox.updatedAtTime"),
+          " ",
+          /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: entity.updated }),
+          " ",
+          t("authorBox.updatedBy"),
+          " ",
+          /* @__PURE__ */ jsx(UpdatedByLink, { entity })
+        ] }) })
       ]
     }
   ) });

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

@@ -1 +1 @@
-{"version":3,"file":"AuthorBox.esm.js","sources":["../../../src/components/AuthorBox/AuthorBox.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { AuthorLink, UpdatedByLink } from '../Links';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { Avatar, Box, Grid, makeStyles, Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles(\n  theme => ({\n    authorBox: {\n      padding: theme.spacing(1),\n      float: 'right',\n      maxWidth: '200px',\n      border: `1px solid ${theme.palette.action.selected}`,\n      '& .avatar': {\n        width: theme.spacing(3),\n        height: theme.spacing(3),\n        fontSize: '1rem',\n      },\n    },\n    authorLink: {\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n    },\n  }),\n  { name: 'QetaAuthorBox' },\n);\n\nexport const AuthorBox = (props: { entity: PostResponse | AnswerResponse }) => {\n  const { entity } = props;\n  const { t } = useTranslation();\n  const { name, initials, user } = useEntityAuthor(entity);\n  const styles = useStyles();\n\n  return (\n    <Box className={`qetaAuthorBox ${styles.authorBox}`}>\n      <Grid\n        container\n        alignItems=\"stretch\"\n        justifyContent=\"flex-start\"\n        spacing={0}\n      >\n        <Grid item xs={12} style={{ paddingBottom: 0 }}>\n          <Typography className=\"qetaAuthorBoxCreated\" variant=\"caption\">\n            {t('authorBox.postedAtTime')}{' '}\n            <RelativeTimeWithTooltip value={entity.created} />\n          </Typography>\n        </Grid>\n        {entity.updated && entity.updatedBy && (\n          <Grid item xs={12} style={{ paddingBottom: 0, paddingTop: 0 }}>\n            <Typography className=\"qetaAuthorBoxUpdated\" variant=\"caption\">\n              {t('authorBox.updatedAtTime')}{' '}\n              <RelativeTimeWithTooltip value={entity.updated} />{' '}\n              {t('authorBox.updatedBy')} <UpdatedByLink entity={entity} />\n            </Typography>\n          </Grid>\n        )}\n        <Grid item xs={2} style={{ paddingTop: 0 }}>\n          <Avatar\n            src={user?.spec?.profile?.picture}\n            className=\"qetaAuthorBoxAvatar avatar\"\n            alt={name}\n            variant=\"rounded\"\n          >\n            {initials}\n          </Avatar>\n        </Grid>\n        <Grid\n          item\n          xs={10}\n          style={{\n            paddingTop: 0,\n            textOverflow: 'ellipsis',\n            overflow: 'hidden',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          <Box style={{ paddingLeft: '5px' }}>\n            <AuthorLink entity={entity} />\n          </Box>\n        </Grid>\n      </Grid>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AuthorBox.esm.js","sources":["../../../src/components/AuthorBox/AuthorBox.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { AuthorLink, UpdatedByLink } from '../Links';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { Avatar, Box, Grid, makeStyles, Typography } from '@material-ui/core';\nimport { ExpertIcon } from '../Icons/ExpertIcon.tsx';\n\nconst useStyles = makeStyles(\n  theme => ({\n    authorBox: {\n      padding: theme.spacing(1),\n      float: 'right',\n      maxWidth: '200px',\n      border: `1px solid ${theme.palette.action.selected}`,\n      '& .avatar': {\n        width: theme.spacing(3),\n        height: theme.spacing(3),\n        fontSize: '1rem',\n      },\n    },\n    authorLink: {\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n    },\n  }),\n  { name: 'QetaAuthorBox' },\n);\n\nexport const AuthorBox = (props: { entity: PostResponse | AnswerResponse }) => {\n  const { entity } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { name, initials, user } = useEntityAuthor(entity);\n  const styles = useStyles();\n\n  return (\n    <Box className={`qetaAuthorBox ${styles.authorBox}`}>\n      <Grid\n        container\n        alignItems=\"stretch\"\n        justifyContent=\"flex-start\"\n        spacing={0}\n      >\n        <Grid item xs={12} style={{ paddingBottom: 0 }}>\n          <Typography className=\"qetaAuthorBoxCreated\" variant=\"caption\">\n            {t('authorBox.postedAtTime')}{' '}\n            <RelativeTimeWithTooltip value={entity.created} />\n          </Typography>\n        </Grid>\n\n        <Grid item style={{ paddingTop: 0 }}>\n          <Avatar\n            src={user?.spec?.profile?.picture}\n            className=\"qetaAuthorBoxAvatar avatar\"\n            alt={name}\n            variant=\"rounded\"\n            style={{ width: '1.2em', height: '1.2em' }}\n          >\n            {initials}\n          </Avatar>\n        </Grid>\n        <Grid\n          item\n          xs={10}\n          style={{\n            paddingTop: 0,\n            textOverflow: 'ellipsis',\n            overflow: 'hidden',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          <Box style={{ paddingLeft: '0.3em' }}>\n            <AuthorLink entity={entity} />\n            {'expert' in entity && entity.expert && <ExpertIcon />}\n          </Box>\n        </Grid>\n        {entity.updated && entity.updatedBy && (\n          <Grid item xs={12} style={{ paddingBottom: 0, paddingTop: 0 }}>\n            <Typography className=\"qetaAuthorBoxUpdated\" variant=\"caption\">\n              {t('authorBox.updatedAtTime')}{' '}\n              <RelativeTimeWithTooltip value={entity.updated} />{' '}\n              {t('authorBox.updatedBy')} <UpdatedByLink entity={entity} />\n            </Typography>\n          </Grid>\n        )}\n      </Grid>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Buttons/AddToCollectionButton.esm.js

@@ -7,10 +7,11 @@ import PlayListAddIcon from '@material-ui/icons/PlaylistAdd';
 import { useApi } from '@backstage/core-plugin-api';
 import { qetaApiRef } from '../../api.esm.js';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
@@ -18,7 +19,7 @@ import '@backstage/plugin-permission-common';
 
 const AddToCollectionButton = (props) => {
   const { post } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const { value: response, retry } = useQetaApi((api) => {
     return api.getCollections({ checkAccess: true });
   }, []);

package/dist/components/Buttons/AddToCollectionButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddToCollectionButton.esm.js","sources":["../../../src/components/Buttons/AddToCollectionButton.tsx"],"sourcesContent":["import { Collection, PostResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useState } from 'react';\nimport {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Grid,\n} from '@material-ui/core';\nimport AddCircle from '@material-ui/icons/AddCircle';\nimport RemoveCircle from '@material-ui/icons/RemoveCircle';\nimport PlayListAddIcon from '@material-ui/icons/PlaylistAdd';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api';\nimport { useQetaApi, useTranslation } from '../../hooks';\n\nexport const AddToCollectionButton = (props: { post: PostResponse }) => {\n  const { post } = props;\n  const { t } = useTranslation();\n  const { value: response, retry } = useQetaApi(api => {\n    return api.getCollections({ checkAccess: true });\n  }, []);\n  const [open, setOpen] = useState(false);\n  const qetaApi = useApi(qetaApiRef);\n\n  const handleClickOpen = () => {\n    setOpen(true);\n  };\n\n  const handleClose = () => {\n    setOpen(false);\n  };\n\n  const handleClick = (collection: Collection) => {\n    if (collection.posts?.find(p => p.id === post.id)) {\n      qetaApi.removePostFromCollection(collection.id, post.id).then(() => {\n        retry();\n      });\n    } else {\n      qetaApi.addPostToCollection(collection.id, post.id).then(() => {\n        retry();\n      });\n    }\n  };\n\n  const collections = (response?.collections ?? []).filter(c => c.canEdit);\n  if (!collections.length) {\n    return null;\n  }\n\n  return (\n    <>\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        onClick={handleClickOpen}\n        startIcon={<PlayListAddIcon />}\n      >\n        {t('addToCollectionButton.title')}\n      </Button>\n      <Dialog open={open} onClose={handleClose} fullWidth>\n        <DialogTitle>{t('addToCollectionButton.manage')}</DialogTitle>\n        <DialogContent>\n          <Grid container>\n            {collections.map(collection => {\n              const isInCollection = collection.posts?.find(\n                p => p.id === post.id,\n              );\n\n              return (\n                <Grid item key={collection.id}>\n                  <Button\n                    variant=\"outlined\"\n                    startIcon={\n                      isInCollection ? <RemoveCircle /> : <AddCircle />\n                    }\n                    color={isInCollection ? 'secondary' : 'primary'}\n                    onClick={() => handleClick(collection)}\n                  >\n                    {collection.title}\n                  </Button>\n                </Grid>\n              );\n            })}\n          </Grid>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={handleClose} color=\"primary\">\n            {t('addToCollectionButton.close')}\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AddToCollectionButton.esm.js","sources":["../../../src/components/Buttons/AddToCollectionButton.tsx"],"sourcesContent":["import { Collection, PostResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useState } from 'react';\nimport {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Grid,\n} from '@material-ui/core';\nimport AddCircle from '@material-ui/icons/AddCircle';\nimport RemoveCircle from '@material-ui/icons/RemoveCircle';\nimport PlayListAddIcon from '@material-ui/icons/PlaylistAdd';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api';\nimport { useQetaApi } from '../../hooks';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport const AddToCollectionButton = (props: { post: PostResponse }) => {\n  const { post } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { value: response, retry } = useQetaApi(api => {\n    return api.getCollections({ checkAccess: true });\n  }, []);\n  const [open, setOpen] = useState(false);\n  const qetaApi = useApi(qetaApiRef);\n\n  const handleClickOpen = () => {\n    setOpen(true);\n  };\n\n  const handleClose = () => {\n    setOpen(false);\n  };\n\n  const handleClick = (collection: Collection) => {\n    if (collection.posts?.find(p => p.id === post.id)) {\n      qetaApi.removePostFromCollection(collection.id, post.id).then(() => {\n        retry();\n      });\n    } else {\n      qetaApi.addPostToCollection(collection.id, post.id).then(() => {\n        retry();\n      });\n    }\n  };\n\n  const collections = (response?.collections ?? []).filter(c => c.canEdit);\n  if (!collections.length) {\n    return null;\n  }\n\n  return (\n    <>\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        onClick={handleClickOpen}\n        startIcon={<PlayListAddIcon />}\n      >\n        {t('addToCollectionButton.title')}\n      </Button>\n      <Dialog open={open} onClose={handleClose} fullWidth>\n        <DialogTitle>{t('addToCollectionButton.manage')}</DialogTitle>\n        <DialogContent>\n          <Grid container>\n            {collections.map(collection => {\n              const isInCollection = collection.posts?.find(\n                p => p.id === post.id,\n              );\n\n              return (\n                <Grid item key={collection.id}>\n                  <Button\n                    variant=\"outlined\"\n                    startIcon={\n                      isInCollection ? <RemoveCircle /> : <AddCircle />\n                    }\n                    color={isInCollection ? 'secondary' : 'primary'}\n                    onClick={() => handleClick(collection)}\n                  >\n                    {collection.title}\n                  </Button>\n                </Grid>\n              );\n            })}\n          </Grid>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={handleClose} color=\"primary\">\n            {t('addToCollectionButton.close')}\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmBa,MAAA,qBAAA,GAAwB,CAAC,KAAkC,KAAA;AACtE,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AACjB,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,KAAO,EAAA,QAAA,EAAU,KAAM,EAAA,GAAI,WAAW,CAAO,GAAA,KAAA;AACnD,IAAA,OAAO,GAAI,CAAA,cAAA,CAAe,EAAE,WAAA,EAAa,MAAM,CAAA;AAAA,GACjD,EAAG,EAAE,CAAA;AACL,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AAEjC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,GACd;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,GACf;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,UAA2B,KAAA;AAC9C,IAAI,IAAA,UAAA,CAAW,OAAO,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,EAAO,KAAA,IAAA,CAAK,EAAE,CAAG,EAAA;AACjD,MAAA,OAAA,CAAQ,yBAAyB,UAAW,CAAA,EAAA,EAAI,KAAK,EAAE,CAAA,CAAE,KAAK,MAAM;AAClE,QAAM,KAAA,EAAA;AAAA,OACP,CAAA;AAAA,KACI,MAAA;AACL,MAAA,OAAA,CAAQ,oBAAoB,UAAW,CAAA,EAAA,EAAI,KAAK,EAAE,CAAA,CAAE,KAAK,MAAM;AAC7D,QAAM,KAAA,EAAA;AAAA,OACP,CAAA;AAAA;AACH,GACF;AAEA,EAAM,MAAA,WAAA,GAAA,CAAe,UAAU,WAAe,IAAA,IAAI,MAAO,CAAA,CAAA,CAAA,KAAK,EAAE,OAAO,CAAA;AACvE,EAAI,IAAA,CAAC,YAAY,MAAQ,EAAA;AACvB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,OAAA;AAAA,QACL,OAAS,EAAA,eAAA;AAAA,QACT,SAAA,sBAAY,eAAgB,EAAA,EAAA,CAAA;AAAA,QAE3B,YAAE,6BAA6B;AAAA;AAAA,KAClC;AAAA,yBACC,MAAO,EAAA,EAAA,IAAA,EAAY,OAAS,EAAA,WAAA,EAAa,WAAS,IACjD,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,WAAA,EAAA,EAAa,QAAE,EAAA,CAAA,CAAA,8BAA8B,CAAE,EAAA,CAAA;AAAA,sBAChD,GAAA,CAAC,iBACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IACZ,EAAA,QAAA,EAAA,WAAA,CAAY,IAAI,CAAc,UAAA,KAAA;AAC7B,QAAM,MAAA,cAAA,GAAiB,WAAW,KAAO,EAAA,IAAA;AAAA,UACvC,CAAA,CAAA,KAAK,CAAE,CAAA,EAAA,KAAO,IAAK,CAAA;AAAA,SACrB;AAEA,QACE,uBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,UAAA;AAAA,YACR,WACE,cAAiB,mBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,CAAA,uBAAM,SAAU,EAAA,EAAA,CAAA;AAAA,YAEjD,KAAA,EAAO,iBAAiB,WAAc,GAAA,SAAA;AAAA,YACtC,OAAA,EAAS,MAAM,WAAA,CAAY,UAAU,CAAA;AAAA,YAEpC,QAAW,EAAA,UAAA,CAAA;AAAA;AAAA,SACd,EAAA,EAVc,WAAW,EAW3B,CAAA;AAAA,OAEH,GACH,CACF,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,aACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAS,WAAa,EAAA,KAAA,EAAM,SACjC,EAAA,QAAA,EAAA,CAAA,CAAE,6BAA6B,CAAA,EAClC,CACF,EAAA;AAAA,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Buttons/AskQuestionButton.esm.js

@@ -4,23 +4,15 @@ import { qetaCreatePostPermission } from '@drodil/backstage-plugin-qeta-common';
 import { LinkButton } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { askRouteRef } from '../../routes.esm.js';
-import '../../api.esm.js';
-import 'react-use';
-import 'react';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@backstage/plugin-permission-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { Box } from '@material-ui/core';
 import { OptionalRequirePermission } from '../Utility/OptionalRequirePermission.esm.js';
 
 const AskQuestionButton = (props) => {
   const { entity, entityPage, tags } = props;
   const askRoute = useRouteRef(askRouteRef);
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const params = new URLSearchParams();
   if (entity) {
     params.set("entity", entity);

package/dist/components/Buttons/AskQuestionButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AskQuestionButton.esm.js","sources":["../../../src/components/Buttons/AskQuestionButton.tsx"],"sourcesContent":["import HelpOutline from '@material-ui/icons/HelpOutline';\nimport { qetaCreatePostPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { LinkButton } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { askRouteRef } from '../../routes';\nimport { useTranslation } from '../../hooks';\nimport { Box } from '@material-ui/core';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\n\nexport const AskQuestionButton = (props: {\n  entity?: string;\n  tags?: string[];\n  entityPage?: boolean;\n}) => {\n  const { entity, entityPage, tags } = props;\n  const askRoute = useRouteRef(askRouteRef);\n  const { t } = useTranslation();\n\n  const params = new URLSearchParams();\n  if (entity) {\n    params.set('entity', entity);\n  }\n  if (entityPage) {\n    params.set('entityPage', 'true');\n  }\n  if (tags && tags.length > 0) {\n    params.set('tags', tags.join(','));\n  }\n\n  return (\n    <OptionalRequirePermission\n      permission={qetaCreatePostPermission}\n      errorPage={<></>}\n    >\n      <Box>\n        <LinkButton\n          variant=\"contained\"\n          size=\"small\"\n          to={\n            entity || tags ? `${askRoute()}?${params.toString()}` : askRoute()\n          }\n          color=\"primary\"\n          startIcon={<HelpOutline />}\n        >\n          {t('askQuestionButton.title')}\n        </LinkButton>\n      </Box>\n    </OptionalRequirePermission>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AASa,MAAA,iBAAA,GAAoB,CAAC,KAI5B,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,UAAY,EAAA,IAAA,EAAS,GAAA,KAAA;AACrC,EAAM,MAAA,QAAA,GAAW,YAAY,WAAW,CAAA;AACxC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAM,MAAA,MAAA,GAAS,IAAI,eAAgB,EAAA;AACnC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,MAAA,CAAA,GAAA,CAAI,UAAU,MAAM,CAAA;AAAA;AAE7B,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,MAAA,CAAA,GAAA,CAAI,cAAc,MAAM,CAAA;AAAA;AAEjC,EAAI,IAAA,IAAA,IAAQ,IAAK,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3B,IAAA,MAAA,CAAO,GAAI,CAAA,MAAA,EAAQ,IAAK,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA;AAAA;AAGnC,EACE,uBAAA,GAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,UAAY,EAAA,wBAAA;AAAA,MACZ,2BAAa,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA;AAAA,MAEb,8BAAC,GACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,IAAK,EAAA,OAAA;AAAA,UACL,EAAA,EACE,MAAU,IAAA,IAAA,GAAO,CAAG,EAAA,QAAA,EAAU,CAAA,CAAA,EAAI,MAAO,CAAA,QAAA,EAAU,CAAA,CAAA,GAAK,QAAS,EAAA;AAAA,UAEnE,KAAM,EAAA,SAAA;AAAA,UACN,SAAA,sBAAY,WAAY,EAAA,EAAA,CAAA;AAAA,UAEvB,YAAE,yBAAyB;AAAA;AAAA,OAEhC,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"AskQuestionButton.esm.js","sources":["../../../src/components/Buttons/AskQuestionButton.tsx"],"sourcesContent":["import HelpOutline from '@material-ui/icons/HelpOutline';\nimport { qetaCreatePostPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { LinkButton } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { askRouteRef } from '../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { Box } from '@material-ui/core';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\n\nexport const AskQuestionButton = (props: {\n  entity?: string;\n  tags?: string[];\n  entityPage?: boolean;\n}) => {\n  const { entity, entityPage, tags } = props;\n  const askRoute = useRouteRef(askRouteRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const params = new URLSearchParams();\n  if (entity) {\n    params.set('entity', entity);\n  }\n  if (entityPage) {\n    params.set('entityPage', 'true');\n  }\n  if (tags && tags.length > 0) {\n    params.set('tags', tags.join(','));\n  }\n\n  return (\n    <OptionalRequirePermission\n      permission={qetaCreatePostPermission}\n      errorPage={<></>}\n    >\n      <Box>\n        <LinkButton\n          variant=\"contained\"\n          size=\"small\"\n          to={\n            entity || tags ? `${askRoute()}?${params.toString()}` : askRoute()\n          }\n          color=\"primary\"\n          startIcon={<HelpOutline />}\n        >\n          {t('askQuestionButton.title')}\n        </LinkButton>\n      </Box>\n    </OptionalRequirePermission>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAUa,MAAA,iBAAA,GAAoB,CAAC,KAI5B,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,UAAY,EAAA,IAAA,EAAS,GAAA,KAAA;AACrC,EAAM,MAAA,QAAA,GAAW,YAAY,WAAW,CAAA;AACxC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAM,MAAA,MAAA,GAAS,IAAI,eAAgB,EAAA;AACnC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,MAAA,CAAA,GAAA,CAAI,UAAU,MAAM,CAAA;AAAA;AAE7B,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,MAAA,CAAA,GAAA,CAAI,cAAc,MAAM,CAAA;AAAA;AAEjC,EAAI,IAAA,IAAA,IAAQ,IAAK,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3B,IAAA,MAAA,CAAO,GAAI,CAAA,MAAA,EAAQ,IAAK,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA;AAAA;AAGnC,EACE,uBAAA,GAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,UAAY,EAAA,wBAAA;AAAA,MACZ,2BAAa,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA;AAAA,MAEb,8BAAC,GACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,IAAK,EAAA,OAAA;AAAA,UACL,EAAA,EACE,MAAU,IAAA,IAAA,GAAO,CAAG,EAAA,QAAA,EAAU,CAAA,CAAA,EAAI,MAAO,CAAA,QAAA,EAAU,CAAA,CAAA,GAAK,QAAS,EAAA;AAAA,UAEnE,KAAM,EAAA,SAAA;AAAA,UACN,SAAA,sBAAY,WAAY,EAAA,EAAA,CAAA;AAAA,UAEvB,YAAE,yBAAyB;AAAA;AAAA,OAEhC,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/Buttons/CollectionFollowButton.esm.js

@@ -2,23 +2,13 @@ import { jsx } from 'react/jsx-runtime';
 import { Tooltip, IconButton } from '@material-ui/core';
 import Visibility from '@material-ui/icons/Visibility';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
-import '@backstage/core-plugin-api';
-import '../../api.esm.js';
-import 'react-use';
-import 'react';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { useCollectionsFollow } from '../../hooks/useCollectionsFollow.esm.js';
-import '@backstage/plugin-permission-react';
-import '@drodil/backstage-plugin-qeta-common';
-import '@backstage/plugin-permission-common';
 
 const CollectionFollowButton = (props) => {
   const { collection, style } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const collections = useCollectionsFollow();
   if (collections.loading) {
     return null;

package/dist/components/Buttons/CollectionFollowButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionFollowButton.esm.js","sources":["../../../src/components/Buttons/CollectionFollowButton.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport { useTranslation } from '../../hooks';\nimport { Collection } from '@drodil/backstage-plugin-qeta-common';\nimport { useCollectionsFollow } from '../../hooks/useCollectionsFollow';\n\nexport const CollectionFollowButton = (props: {\n  collection: Collection;\n  style?: CSSProperties;\n}) => {\n  const { collection, style } = props;\n  const { t } = useTranslation();\n  const collections = useCollectionsFollow();\n  if (collections.loading) {\n    return null;\n  }\n  return (\n    <Tooltip title={t('collectionButton.tooltip')}>\n      <IconButton\n        size=\"small\"\n        color={\n          collections.isFollowingCollection(collection)\n            ? 'secondary'\n            : 'primary'\n        }\n        onClick={() => {\n          if (collections.isFollowingCollection(collection)) {\n            collections.unfollowCollection(collection);\n          } else {\n            collections.followCollection(collection);\n          }\n        }}\n        style={style}\n      >\n        {collections.isFollowingCollection(collection) ? (\n          <VisibilityOff />\n        ) : (\n          <Visibility />\n        )}\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAQa,MAAA,sBAAA,GAAyB,CAAC,KAGjC,KAAA;AACJ,EAAM,MAAA,EAAE,UAAY,EAAA,KAAA,EAAU,GAAA,KAAA;AAC9B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,cAAc,oBAAqB,EAAA;AACzC,EAAA,IAAI,YAAY,OAAS,EAAA;AACvB,IAAO,OAAA,IAAA;AAAA;AAET,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,0BAA0B,CAC1C,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,OAAA;AAAA,MACL,KACE,EAAA,WAAA,CAAY,qBAAsB,CAAA,UAAU,IACxC,WACA,GAAA,SAAA;AAAA,MAEN,SAAS,MAAM;AACb,QAAI,IAAA,WAAA,CAAY,qBAAsB,CAAA,UAAU,CAAG,EAAA;AACjD,UAAA,WAAA,CAAY,mBAAmB,UAAU,CAAA;AAAA,SACpC,MAAA;AACL,UAAA,WAAA,CAAY,iBAAiB,UAAU,CAAA;AAAA;AACzC,OACF;AAAA,MACA,KAAA;AAAA,MAEC,QAAA,EAAA,WAAA,CAAY,sBAAsB,UAAU,CAAA,uBAC1C,aAAc,EAAA,EAAA,CAAA,uBAEd,UAAW,EAAA,EAAA;AAAA;AAAA,GAGlB,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CollectionFollowButton.esm.js","sources":["../../../src/components/Buttons/CollectionFollowButton.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { Collection } from '@drodil/backstage-plugin-qeta-common';\nimport { useCollectionsFollow } from '../../hooks/useCollectionsFollow';\n\nexport const CollectionFollowButton = (props: {\n  collection: Collection;\n  style?: CSSProperties;\n}) => {\n  const { collection, style } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const collections = useCollectionsFollow();\n  if (collections.loading) {\n    return null;\n  }\n  return (\n    <Tooltip title={t('collectionButton.tooltip')}>\n      <IconButton\n        size=\"small\"\n        color={\n          collections.isFollowingCollection(collection)\n            ? 'secondary'\n            : 'primary'\n        }\n        onClick={() => {\n          if (collections.isFollowingCollection(collection)) {\n            collections.unfollowCollection(collection);\n          } else {\n            collections.followCollection(collection);\n          }\n        }}\n        style={style}\n      >\n        {collections.isFollowingCollection(collection) ? (\n          <VisibilityOff />\n        ) : (\n          <Visibility />\n        )}\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASa,MAAA,sBAAA,GAAyB,CAAC,KAGjC,KAAA;AACJ,EAAM,MAAA,EAAE,UAAY,EAAA,KAAA,EAAU,GAAA,KAAA;AAC9B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,cAAc,oBAAqB,EAAA;AACzC,EAAA,IAAI,YAAY,OAAS,EAAA;AACvB,IAAO,OAAA,IAAA;AAAA;AAET,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,0BAA0B,CAC1C,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,OAAA;AAAA,MACL,KACE,EAAA,WAAA,CAAY,qBAAsB,CAAA,UAAU,IACxC,WACA,GAAA,SAAA;AAAA,MAEN,SAAS,MAAM;AACb,QAAI,IAAA,WAAA,CAAY,qBAAsB,CAAA,UAAU,CAAG,EAAA;AACjD,UAAA,WAAA,CAAY,mBAAmB,UAAU,CAAA;AAAA,SACpC,MAAA;AACL,UAAA,WAAA,CAAY,iBAAiB,UAAU,CAAA;AAAA;AACzC,OACF;AAAA,MACA,KAAA;AAAA,MAEC,QAAA,EAAA,WAAA,CAAY,sBAAsB,UAAU,CAAA,uBAC1C,aAAc,EAAA,EAAA,CAAA,uBAEd,UAAW,EAAA,EAAA;AAAA;AAAA,GAGlB,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Buttons/CreateCollectionButton.esm.js

@@ -4,21 +4,13 @@ import { qetaCreateCollectionPermission } from '@drodil/backstage-plugin-qeta-co
 import { LinkButton } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { collectionCreateRouteRef } from '../../routes.esm.js';
-import '../../api.esm.js';
-import 'react-use';
-import 'react';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@backstage/plugin-permission-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { OptionalRequirePermission } from '../Utility/OptionalRequirePermission.esm.js';
 
 const CreateCollectionButton = () => {
   const createRoute = useRouteRef(collectionCreateRouteRef);
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   return /* @__PURE__ */ jsx(
     OptionalRequirePermission,
     {

package/dist/components/Buttons/CreateCollectionButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateCollectionButton.esm.js","sources":["../../../src/components/Buttons/CreateCollectionButton.tsx"],"sourcesContent":["import PlayListAddIcon from '@material-ui/icons/PlaylistAdd';\nimport { qetaCreateCollectionPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { LinkButton } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { collectionCreateRouteRef } from '../../routes';\nimport { useTranslation } from '../../hooks';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\n\nexport const CreateCollectionButton = () => {\n  const createRoute = useRouteRef(collectionCreateRouteRef);\n  const { t } = useTranslation();\n\n  return (\n    <OptionalRequirePermission\n      permission={qetaCreateCollectionPermission}\n      errorPage={<></>}\n    >\n      <LinkButton\n        size=\"small\"\n        variant=\"contained\"\n        to={createRoute()}\n        color=\"primary\"\n        startIcon={<PlayListAddIcon />}\n      >\n        {t('createCollectionButton.title')}\n      </LinkButton>\n    </OptionalRequirePermission>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAQO,MAAM,yBAAyB,MAAM;AAC1C,EAAM,MAAA,WAAA,GAAc,YAAY,wBAAwB,CAAA;AACxD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EACE,uBAAA,GAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,UAAY,EAAA,8BAAA;AAAA,MACZ,2BAAa,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA;AAAA,MAEb,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,OAAA;AAAA,UACL,OAAQ,EAAA,WAAA;AAAA,UACR,IAAI,WAAY,EAAA;AAAA,UAChB,KAAM,EAAA,SAAA;AAAA,UACN,SAAA,sBAAY,eAAgB,EAAA,EAAA,CAAA;AAAA,UAE3B,YAAE,8BAA8B;AAAA;AAAA;AACnC;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"CreateCollectionButton.esm.js","sources":["../../../src/components/Buttons/CreateCollectionButton.tsx"],"sourcesContent":["import PlayListAddIcon from '@material-ui/icons/PlaylistAdd';\nimport { qetaCreateCollectionPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { LinkButton } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { collectionCreateRouteRef } from '../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\n\nexport const CreateCollectionButton = () => {\n  const createRoute = useRouteRef(collectionCreateRouteRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <OptionalRequirePermission\n      permission={qetaCreateCollectionPermission}\n      errorPage={<></>}\n    >\n      <LinkButton\n        size=\"small\"\n        variant=\"contained\"\n        to={createRoute()}\n        color=\"primary\"\n        startIcon={<PlayListAddIcon />}\n      >\n        {t('createCollectionButton.title')}\n      </LinkButton>\n    </OptionalRequirePermission>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AASO,MAAM,yBAAyB,MAAM;AAC1C,EAAM,MAAA,WAAA,GAAc,YAAY,wBAAwB,CAAA;AACxD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EACE,uBAAA,GAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,UAAY,EAAA,8BAAA;AAAA,MACZ,2BAAa,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA;AAAA,MAEb,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,OAAA;AAAA,UACL,OAAQ,EAAA,WAAA;AAAA,UACR,IAAI,WAAY,EAAA;AAAA,UAChB,KAAM,EAAA,SAAA;AAAA,UACN,SAAA,sBAAY,eAAgB,EAAA,EAAA,CAAA;AAAA,UAE3B,YAAE,8BAA8B;AAAA;AAAA;AACnC;AAAA,GACF;AAEJ;;;;"}

package/dist/components/Buttons/EntityFollowButton.esm.js

@@ -5,11 +5,12 @@ import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import 'react';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import { useEntityFollow } from '../../hooks/useEntityFollow.esm.js';
 import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
@@ -18,7 +19,7 @@ import { Tooltip, IconButton } from '@material-ui/core';
 
 const EntityFollowButton = (props) => {
   const { entityRef } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const entities = useEntityFollow();
   if (entities.loading) {
     return null;

package/dist/components/Buttons/EntityFollowButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityFollowButton.esm.js","sources":["../../../src/components/Buttons/EntityFollowButton.tsx"],"sourcesContent":["import Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport { useEntityFollow, useTranslation } from '../../hooks';\nimport { IconButton, Tooltip } from '@material-ui/core';\n\nexport const EntityFollowButton = (props: { entityRef: string }) => {\n  const { entityRef } = props;\n  const { t } = useTranslation();\n  const entities = useEntityFollow();\n  if (entities.loading) {\n    return null;\n  }\n\n  return (\n    <Tooltip title={t('entityButton.tooltip')}>\n      <IconButton\n        disableRipple\n        size=\"small\"\n        color={entities.isFollowingEntity(entityRef) ? 'secondary' : 'primary'}\n        onClick={() => {\n          if (entities.isFollowingEntity(entityRef)) {\n            entities.unfollowEntity(entityRef);\n          } else {\n            entities.followEntity(entityRef);\n          }\n        }}\n      >\n        {entities.isFollowingEntity(entityRef) ? (\n          <VisibilityOff />\n        ) : (\n          <Visibility />\n        )}\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAKa,MAAA,kBAAA,GAAqB,CAAC,KAAiC,KAAA;AAClE,EAAM,MAAA,EAAE,WAAc,GAAA,KAAA;AACtB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,WAAW,eAAgB,EAAA;AACjC,EAAA,IAAI,SAAS,OAAS,EAAA;AACpB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,sBAAsB,CACtC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,IAAA;AAAA,MACb,IAAK,EAAA,OAAA;AAAA,MACL,KAAO,EAAA,QAAA,CAAS,iBAAkB,CAAA,SAAS,IAAI,WAAc,GAAA,SAAA;AAAA,MAC7D,SAAS,MAAM;AACb,QAAI,IAAA,QAAA,CAAS,iBAAkB,CAAA,SAAS,CAAG,EAAA;AACzC,UAAA,QAAA,CAAS,eAAe,SAAS,CAAA;AAAA,SAC5B,MAAA;AACL,UAAA,QAAA,CAAS,aAAa,SAAS,CAAA;AAAA;AACjC,OACF;AAAA,MAEC,QAAA,EAAA,QAAA,CAAS,kBAAkB,SAAS,CAAA,uBAClC,aAAc,EAAA,EAAA,CAAA,uBAEd,UAAW,EAAA,EAAA;AAAA;AAAA,GAGlB,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EntityFollowButton.esm.js","sources":["../../../src/components/Buttons/EntityFollowButton.tsx"],"sourcesContent":["import Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport { useEntityFollow } from '../../hooks';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport const EntityFollowButton = (props: { entityRef: string }) => {\n  const { entityRef } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const entities = useEntityFollow();\n  if (entities.loading) {\n    return null;\n  }\n\n  return (\n    <Tooltip title={t('entityButton.tooltip')}>\n      <IconButton\n        disableRipple\n        size=\"small\"\n        color={entities.isFollowingEntity(entityRef) ? 'secondary' : 'primary'}\n        onClick={() => {\n          if (entities.isFollowingEntity(entityRef)) {\n            entities.unfollowEntity(entityRef);\n          } else {\n            entities.followEntity(entityRef);\n          }\n        }}\n      >\n        {entities.isFollowingEntity(entityRef) ? (\n          <VisibilityOff />\n        ) : (\n          <Visibility />\n        )}\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAOa,MAAA,kBAAA,GAAqB,CAAC,KAAiC,KAAA;AAClE,EAAM,MAAA,EAAE,WAAc,GAAA,KAAA;AACtB,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,WAAW,eAAgB,EAAA;AACjC,EAAA,IAAI,SAAS,OAAS,EAAA;AACpB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,sBAAsB,CACtC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,IAAA;AAAA,MACb,IAAK,EAAA,OAAA;AAAA,MACL,KAAO,EAAA,QAAA,CAAS,iBAAkB,CAAA,SAAS,IAAI,WAAc,GAAA,SAAA;AAAA,MAC7D,SAAS,MAAM;AACb,QAAI,IAAA,QAAA,CAAS,iBAAkB,CAAA,SAAS,CAAG,EAAA;AACzC,UAAA,QAAA,CAAS,eAAe,SAAS,CAAA;AAAA,SAC5B,MAAA;AACL,UAAA,QAAA,CAAS,aAAa,SAAS,CAAA;AAAA;AACjC,OACF;AAAA,MAEC,QAAA,EAAA,QAAA,CAAS,kBAAkB,SAAS,CAAA,uBAClC,aAAc,EAAA,EAAA,CAAA,uBAEd,UAAW,EAAA,EAAA;AAAA;AAAA,GAGlB,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Buttons/FavoriteButton.esm.js

@@ -5,20 +5,13 @@ import { useApi } from '@backstage/core-plugin-api';
 import StarIcon from '@material-ui/icons/Star';
 import StarOutlineIcon from '@material-ui/icons/StarOutline';
 import { qetaApiRef } from '../../api.esm.js';
-import 'react-use';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@drodil/backstage-plugin-qeta-common';
-import '@backstage/plugin-permission-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 
 const FavoriteButton = (props) => {
   const [entity, setEntity] = useState(props.entity);
   const qetaApi = useApi(qetaApiRef);
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const favoriteQuestion = () => {
     qetaApi.favoritePost(entity.id).then((response) => {
       setEntity(response);

package/dist/components/Buttons/FavoriteButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FavoriteButton.esm.js","sources":["../../../src/components/Buttons/FavoriteButton.tsx"],"sourcesContent":["import { PostResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport { useState, Fragment } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport StarIcon from '@material-ui/icons/Star';\nimport StarOutlineIcon from '@material-ui/icons/StarOutline';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../hooks';\n\nexport const FavoriteButton = (props: { entity: PostResponse }) => {\n  const [entity, setEntity] = useState<PostResponse>(props.entity);\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslation();\n\n  const favoriteQuestion = () => {\n    qetaApi.favoritePost(entity.id).then(response => {\n      setEntity(response);\n    });\n  };\n\n  const unfavoriteQuestion = () => {\n    qetaApi.unfavoritePost(entity.id).then(response => {\n      setEntity(response);\n    });\n  };\n\n  return (\n    <Fragment>\n      {entity.favorite ? (\n        <Tooltip title={t('favorite.remove')}>\n          <IconButton\n            aria-label=\"unfavorite\"\n            size=\"small\"\n            onClick={unfavoriteQuestion}\n            className=\"qetaUnfavoriteBtn\"\n          >\n            <StarIcon />\n          </IconButton>\n        </Tooltip>\n      ) : (\n        <Tooltip title={t('favorite.add')}>\n          <IconButton\n            aria-label=\"favorite\"\n            size=\"small\"\n            onClick={favoriteQuestion}\n            className=\"qetaFavoriteBtn\"\n          >\n            <StarOutlineIcon />\n          </IconButton>\n        </Tooltip>\n      )}\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AASa,MAAA,cAAA,GAAiB,CAAC,KAAoC,KAAA;AACjE,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA,CAAuB,MAAM,MAAM,CAAA;AAC/D,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,MAAM,mBAAmB,MAAM;AAC7B,IAAA,OAAA,CAAQ,YAAa,CAAA,MAAA,CAAO,EAAE,CAAA,CAAE,KAAK,CAAY,QAAA,KAAA;AAC/C,MAAA,SAAA,CAAU,QAAQ,CAAA;AAAA,KACnB,CAAA;AAAA,GACH;AAEA,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAA,OAAA,CAAQ,cAAe,CAAA,MAAA,CAAO,EAAE,CAAA,CAAE,KAAK,CAAY,QAAA,KAAA;AACjD,MAAA,SAAA,CAAU,QAAQ,CAAA;AAAA,KACnB,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,GAAA,CAAC,YACE,QAAO,EAAA,MAAA,CAAA,QAAA,uBACL,OAAQ,EAAA,EAAA,KAAA,EAAO,CAAE,CAAA,iBAAiB,CACjC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,YAAA;AAAA,MACX,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,kBAAA;AAAA,MACT,SAAU,EAAA,mBAAA;AAAA,MAEV,8BAAC,QAAS,EAAA,EAAA;AAAA;AAAA,KAEd,CAEA,mBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,CAAA,CAAE,cAAc,CAC9B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,UAAA;AAAA,MACX,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,gBAAA;AAAA,MACT,SAAU,EAAA,iBAAA;AAAA,MAEV,8BAAC,eAAgB,EAAA,EAAA;AAAA;AAAA,KAErB,CAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FavoriteButton.esm.js","sources":["../../../src/components/Buttons/FavoriteButton.tsx"],"sourcesContent":["import { PostResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport { useState, Fragment } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport StarIcon from '@material-ui/icons/Star';\nimport StarOutlineIcon from '@material-ui/icons/StarOutline';\nimport { qetaApiRef } from '../../api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport const FavoriteButton = (props: { entity: PostResponse }) => {\n  const [entity, setEntity] = useState<PostResponse>(props.entity);\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const favoriteQuestion = () => {\n    qetaApi.favoritePost(entity.id).then(response => {\n      setEntity(response);\n    });\n  };\n\n  const unfavoriteQuestion = () => {\n    qetaApi.unfavoritePost(entity.id).then(response => {\n      setEntity(response);\n    });\n  };\n\n  return (\n    <Fragment>\n      {entity.favorite ? (\n        <Tooltip title={t('favorite.remove')}>\n          <IconButton\n            aria-label=\"unfavorite\"\n            size=\"small\"\n            onClick={unfavoriteQuestion}\n            className=\"qetaUnfavoriteBtn\"\n          >\n            <StarIcon />\n          </IconButton>\n        </Tooltip>\n      ) : (\n        <Tooltip title={t('favorite.add')}>\n          <IconButton\n            aria-label=\"favorite\"\n            size=\"small\"\n            onClick={favoriteQuestion}\n            className=\"qetaFavoriteBtn\"\n          >\n            <StarOutlineIcon />\n          </IconButton>\n        </Tooltip>\n      )}\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAUa,MAAA,cAAA,GAAiB,CAAC,KAAoC,KAAA;AACjE,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA,CAAuB,MAAM,MAAM,CAAA;AAC/D,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,MAAM,mBAAmB,MAAM;AAC7B,IAAA,OAAA,CAAQ,YAAa,CAAA,MAAA,CAAO,EAAE,CAAA,CAAE,KAAK,CAAY,QAAA,KAAA;AAC/C,MAAA,SAAA,CAAU,QAAQ,CAAA;AAAA,KACnB,CAAA;AAAA,GACH;AAEA,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAA,OAAA,CAAQ,cAAe,CAAA,MAAA,CAAO,EAAE,CAAA,CAAE,KAAK,CAAY,QAAA,KAAA;AACjD,MAAA,SAAA,CAAU,QAAQ,CAAA;AAAA,KACnB,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,GAAA,CAAC,YACE,QAAO,EAAA,MAAA,CAAA,QAAA,uBACL,OAAQ,EAAA,EAAA,KAAA,EAAO,CAAE,CAAA,iBAAiB,CACjC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,YAAA;AAAA,MACX,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,kBAAA;AAAA,MACT,SAAU,EAAA,mBAAA;AAAA,MAEV,8BAAC,QAAS,EAAA,EAAA;AAAA;AAAA,KAEd,CAEA,mBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,CAAA,CAAE,cAAc,CAC9B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,UAAA;AAAA,MACX,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,gBAAA;AAAA,MACT,SAAU,EAAA,iBAAA;AAAA,MAEV,8BAAC,eAAgB,EAAA,EAAA;AAAA;AAAA,KAErB,CAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Buttons/LinkButton.esm.js

@@ -1,22 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
-import { useApi, alertApiRef } from '@backstage/core-plugin-api';
-import '../../api.esm.js';
-import 'react-use';
-import 'react';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@drodil/backstage-plugin-qeta-common';
-import '@backstage/plugin-permission-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { Tooltip, IconButton } from '@material-ui/core';
 import LinkIcon from '@material-ui/icons/Link';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 
 const LinkButton = (props) => {
   const isQuestion = "title" in props.entity;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const alertApi = useApi(alertApiRef);
   const copyToClipboard = () => {
     const url = new URL(window.location.href);

package/dist/components/Buttons/LinkButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.esm.js","sources":["../../../src/components/Buttons/LinkButton.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation } from '../../hooks';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport Link from '@material-ui/icons/Link';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\n\nexport const LinkButton = (props: {\n  entity: PostResponse | AnswerResponse;\n  className?: string;\n}) => {\n  const isQuestion = 'title' in props.entity;\n  const { t } = useTranslation();\n  const alertApi = useApi(alertApiRef);\n  const copyToClipboard = () => {\n    const url = new URL(window.location.href);\n    if (!isQuestion) {\n      url.hash = `#answer_${props.entity.id}`;\n    }\n    window.navigator.clipboard.writeText(url.toString());\n    alertApi.post({\n      message: t('link.copied'),\n      severity: 'info',\n      display: 'transient',\n    });\n  };\n\n  return (\n    <Tooltip title={isQuestion ? t('link.post') : t('link.answer')}>\n      <IconButton\n        aria-label={t('link.aria')}\n        size=\"small\"\n        onClick={copyToClipboard}\n        className={props.className}\n      >\n        <Link />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":["Link"],"mappings":";;;;;;;;;;;;;;;;AASa,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAM,MAAA,UAAA,GAAa,WAAW,KAAM,CAAA,MAAA;AACpC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,MAAM,GAAM,GAAA,IAAI,GAAI,CAAA,MAAA,CAAO,SAAS,IAAI,CAAA;AACxC,IAAA,IAAI,CAAC,UAAY,EAAA;AACf,MAAA,GAAA,CAAI,IAAO,GAAA,CAAA,QAAA,EAAW,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA;AAEvC,IAAA,MAAA,CAAO,SAAU,CAAA,SAAA,CAAU,SAAU,CAAA,GAAA,CAAI,UAAU,CAAA;AACnD,IAAA,QAAA,CAAS,IAAK,CAAA;AAAA,MACZ,OAAA,EAAS,EAAE,aAAa,CAAA;AAAA,MACxB,QAAU,EAAA,MAAA;AAAA,MACV,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,UAAA,GAAa,EAAE,WAAW,CAAA,GAAI,CAAE,CAAA,aAAa,CAC3D,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,EAAE,WAAW,CAAA;AAAA,MACzB,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,eAAA;AAAA,MACT,WAAW,KAAM,CAAA,SAAA;AAAA,MAEjB,8BAACA,QAAK,EAAA,EAAA;AAAA;AAAA,GAEV,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LinkButton.esm.js","sources":["../../../src/components/Buttons/LinkButton.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport Link from '@material-ui/icons/Link';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\n\nexport const LinkButton = (props: {\n  entity: PostResponse | AnswerResponse;\n  className?: string;\n}) => {\n  const isQuestion = 'title' in props.entity;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const alertApi = useApi(alertApiRef);\n  const copyToClipboard = () => {\n    const url = new URL(window.location.href);\n    if (!isQuestion) {\n      url.hash = `#answer_${props.entity.id}`;\n    }\n    window.navigator.clipboard.writeText(url.toString());\n    alertApi.post({\n      message: t('link.copied'),\n      severity: 'info',\n      display: 'transient',\n    });\n  };\n\n  return (\n    <Tooltip title={isQuestion ? t('link.post') : t('link.answer')}>\n      <IconButton\n        aria-label={t('link.aria')}\n        size=\"small\"\n        onClick={copyToClipboard}\n        className={props.className}\n      >\n        <Link />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":["Link"],"mappings":";;;;;;;AAUa,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAM,MAAA,UAAA,GAAa,WAAW,KAAM,CAAA,MAAA;AACpC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,MAAM,GAAM,GAAA,IAAI,GAAI,CAAA,MAAA,CAAO,SAAS,IAAI,CAAA;AACxC,IAAA,IAAI,CAAC,UAAY,EAAA;AACf,MAAA,GAAA,CAAI,IAAO,GAAA,CAAA,QAAA,EAAW,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA;AAEvC,IAAA,MAAA,CAAO,SAAU,CAAA,SAAA,CAAU,SAAU,CAAA,GAAA,CAAI,UAAU,CAAA;AACnD,IAAA,QAAA,CAAS,IAAK,CAAA;AAAA,MACZ,OAAA,EAAS,EAAE,aAAa,CAAA;AAAA,MACxB,QAAU,EAAA,MAAA;AAAA,MACV,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,UAAA,GAAa,EAAE,WAAW,CAAA,GAAI,CAAE,CAAA,aAAa,CAC3D,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,EAAE,WAAW,CAAA;AAAA,MACzB,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,eAAA;AAAA,MACT,WAAW,KAAM,CAAA,SAAA;AAAA,MAEjB,8BAACA,QAAK,EAAA,EAAA;AAAA;AAAA,GAEV,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Buttons/TagFollowButton.esm.js

@@ -5,11 +5,12 @@ import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import { useTagsFollow } from '../../hooks/useTagsFollow.esm.js';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import 'react';
 import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
@@ -18,7 +19,7 @@ import { Tooltip, IconButton } from '@material-ui/core';
 
 const TagFollowButton = (props) => {
   const { tag } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const tags = useTagsFollow();
   if (tags.loading) {
     return null;

package/dist/components/Buttons/TagFollowButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagFollowButton.esm.js","sources":["../../../src/components/Buttons/TagFollowButton.tsx"],"sourcesContent":["import Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport { useTagsFollow, useTranslation } from '../../hooks';\nimport { IconButton, Tooltip } from '@material-ui/core';\n\nexport const TagFollowButton = (props: { tag: string }) => {\n  const { tag } = props;\n  const { t } = useTranslation();\n  const tags = useTagsFollow();\n  if (tags.loading) {\n    return null;\n  }\n  return (\n    <Tooltip title={t('tagButton.tooltip')}>\n      <IconButton\n        disableRipple\n        size=\"small\"\n        color={tags.isFollowingTag(tag) ? 'secondary' : 'primary'}\n        onClick={() => {\n          if (tags.isFollowingTag(tag)) {\n            tags.unfollowTag(tag);\n          } else {\n            tags.followTag(tag);\n          }\n        }}\n      >\n        {tags.isFollowingTag(tag) ? <VisibilityOff /> : <Visibility />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAKa,MAAA,eAAA,GAAkB,CAAC,KAA2B,KAAA;AACzD,EAAM,MAAA,EAAE,KAAQ,GAAA,KAAA;AAChB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,OAAO,aAAc,EAAA;AAC3B,EAAA,IAAI,KAAK,OAAS,EAAA;AAChB,IAAO,OAAA,IAAA;AAAA;AAET,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,mBAAmB,CACnC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,IAAA;AAAA,MACb,IAAK,EAAA,OAAA;AAAA,MACL,KAAO,EAAA,IAAA,CAAK,cAAe,CAAA,GAAG,IAAI,WAAc,GAAA,SAAA;AAAA,MAChD,SAAS,MAAM;AACb,QAAI,IAAA,IAAA,CAAK,cAAe,CAAA,GAAG,CAAG,EAAA;AAC5B,UAAA,IAAA,CAAK,YAAY,GAAG,CAAA;AAAA,SACf,MAAA;AACL,UAAA,IAAA,CAAK,UAAU,GAAG,CAAA;AAAA;AACpB,OACF;AAAA,MAEC,QAAA,EAAA,IAAA,CAAK,eAAe,GAAG,CAAA,uBAAK,aAAc,EAAA,EAAA,CAAA,uBAAM,UAAW,EAAA,EAAA;AAAA;AAAA,GAEhE,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TagFollowButton.esm.js","sources":["../../../src/components/Buttons/TagFollowButton.tsx"],"sourcesContent":["import Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport { useTagsFollow } from '../../hooks';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport const TagFollowButton = (props: { tag: string }) => {\n  const { tag } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const tags = useTagsFollow();\n  if (tags.loading) {\n    return null;\n  }\n  return (\n    <Tooltip title={t('tagButton.tooltip')}>\n      <IconButton\n        disableRipple\n        size=\"small\"\n        color={tags.isFollowingTag(tag) ? 'secondary' : 'primary'}\n        onClick={() => {\n          if (tags.isFollowingTag(tag)) {\n            tags.unfollowTag(tag);\n          } else {\n            tags.followTag(tag);\n          }\n        }}\n      >\n        {tags.isFollowingTag(tag) ? <VisibilityOff /> : <Visibility />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAOa,MAAA,eAAA,GAAkB,CAAC,KAA2B,KAAA;AACzD,EAAM,MAAA,EAAE,KAAQ,GAAA,KAAA;AAChB,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,OAAO,aAAc,EAAA;AAC3B,EAAA,IAAI,KAAK,OAAS,EAAA;AAChB,IAAO,OAAA,IAAA;AAAA;AAET,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,mBAAmB,CACnC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,IAAA;AAAA,MACb,IAAK,EAAA,OAAA;AAAA,MACL,KAAO,EAAA,IAAA,CAAK,cAAe,CAAA,GAAG,IAAI,WAAc,GAAA,SAAA;AAAA,MAChD,SAAS,MAAM;AACb,QAAI,IAAA,IAAA,CAAK,cAAe,CAAA,GAAG,CAAG,EAAA;AAC5B,UAAA,IAAA,CAAK,YAAY,GAAG,CAAA;AAAA,SACf,MAAA;AACL,UAAA,IAAA,CAAK,UAAU,GAAG,CAAA;AAAA;AACpB,OACF;AAAA,MAEC,QAAA,EAAA,IAAA,CAAK,eAAe,GAAG,CAAA,uBAAK,aAAc,EAAA,EAAA,CAAA,uBAAM,UAAW,EAAA,EAAA;AAAA;AAAA,GAEhE,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Buttons/UserFollowButton.esm.js

@@ -5,10 +5,11 @@ import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import 'react';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { useUserFollow } from '../../hooks/useUserFollow.esm.js';
 import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
@@ -18,7 +19,7 @@ import { Tooltip, IconButton } from '@material-ui/core';
 
 const UserFollowButton = (props) => {
   const { userRef, style } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const users = useUserFollow();
   if (users.loading) {
     return null;

package/dist/components/Buttons/UserFollowButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserFollowButton.esm.js","sources":["../../../src/components/Buttons/UserFollowButton.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport { useTranslation, useUserFollow } from '../../hooks';\nimport { IconButton, Tooltip } from '@material-ui/core';\n\nexport const UserFollowButton = (props: {\n  userRef: string;\n  style?: CSSProperties;\n}) => {\n  const { userRef, style } = props;\n  const { t } = useTranslation();\n  const users = useUserFollow();\n  if (users.loading) {\n    return null;\n  }\n\n  return (\n    <Tooltip title={t('userButton.tooltip')}>\n      <IconButton\n        disableRipple\n        size=\"small\"\n        color={users.isFollowingUser(userRef) ? 'secondary' : 'primary'}\n        onClick={() => {\n          if (users.isFollowingUser(userRef)) {\n            users.unfollowUser(userRef);\n          } else {\n            users.followUser(userRef);\n          }\n        }}\n        style={style}\n      >\n        {users.isFollowingUser(userRef) ? <VisibilityOff /> : <Visibility />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAMa,MAAA,gBAAA,GAAmB,CAAC,KAG3B,KAAA;AACJ,EAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA;AAC3B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,QAAQ,aAAc,EAAA;AAC5B,EAAA,IAAI,MAAM,OAAS,EAAA;AACjB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,oBAAoB,CACpC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,IAAA;AAAA,MACb,IAAK,EAAA,OAAA;AAAA,MACL,KAAO,EAAA,KAAA,CAAM,eAAgB,CAAA,OAAO,IAAI,WAAc,GAAA,SAAA;AAAA,MACtD,SAAS,MAAM;AACb,QAAI,IAAA,KAAA,CAAM,eAAgB,CAAA,OAAO,CAAG,EAAA;AAClC,UAAA,KAAA,CAAM,aAAa,OAAO,CAAA;AAAA,SACrB,MAAA;AACL,UAAA,KAAA,CAAM,WAAW,OAAO,CAAA;AAAA;AAC1B,OACF;AAAA,MACA,KAAA;AAAA,MAEC,QAAA,EAAA,KAAA,CAAM,gBAAgB,OAAO,CAAA,uBAAK,aAAc,EAAA,EAAA,CAAA,uBAAM,UAAW,EAAA,EAAA;AAAA;AAAA,GAEtE,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UserFollowButton.esm.js","sources":["../../../src/components/Buttons/UserFollowButton.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport { useUserFollow } from '../../hooks';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const UserFollowButton = (props: {\n  userRef: string;\n  style?: CSSProperties;\n}) => {\n  const { userRef, style } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const users = useUserFollow();\n  if (users.loading) {\n    return null;\n  }\n\n  return (\n    <Tooltip title={t('userButton.tooltip')}>\n      <IconButton\n        disableRipple\n        size=\"small\"\n        color={users.isFollowingUser(userRef) ? 'secondary' : 'primary'}\n        onClick={() => {\n          if (users.isFollowingUser(userRef)) {\n            users.unfollowUser(userRef);\n          } else {\n            users.followUser(userRef);\n          }\n        }}\n        style={style}\n      >\n        {users.isFollowingUser(userRef) ? <VisibilityOff /> : <Visibility />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAQa,MAAA,gBAAA,GAAmB,CAAC,KAG3B,KAAA;AACJ,EAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA;AAC3B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,QAAQ,aAAc,EAAA;AAC5B,EAAA,IAAI,MAAM,OAAS,EAAA;AACjB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,oBAAoB,CACpC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,IAAA;AAAA,MACb,IAAK,EAAA,OAAA;AAAA,MACL,KAAO,EAAA,KAAA,CAAM,eAAgB,CAAA,OAAO,IAAI,WAAc,GAAA,SAAA;AAAA,MACtD,SAAS,MAAM;AACb,QAAI,IAAA,KAAA,CAAM,eAAgB,CAAA,OAAO,CAAG,EAAA;AAClC,UAAA,KAAA,CAAM,aAAa,OAAO,CAAA;AAAA,SACrB,MAAA;AACL,UAAA,KAAA,CAAM,WAAW,OAAO,CAAA;AAAA;AAC1B,OACF;AAAA,MACA,KAAA;AAAA,MAEC,QAAA,EAAA,KAAA,CAAM,gBAAgB,OAAO,CAAA,uBAAK,aAAc,EAAA,EAAA,CAAA,uBAAM,UAAW,EAAA,EAAA;AAAA;AAAA,GAEtE,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Buttons/WriteArticleButton.esm.js

@@ -4,23 +4,15 @@ import { qetaCreatePostPermission } from '@drodil/backstage-plugin-qeta-common';
 import { LinkButton } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { writeRouteRef } from '../../routes.esm.js';
-import '../../api.esm.js';
-import 'react-use';
-import 'react';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@backstage/plugin-permission-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { Box } from '@material-ui/core';
 import { OptionalRequirePermission } from '../Utility/OptionalRequirePermission.esm.js';
 
 const WriteArticleButton = (props) => {
   const { entity, entityPage, tags } = props;
   const writeRoute = useRouteRef(writeRouteRef);
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const params = new URLSearchParams();
   if (entity) {
     params.set("entity", entity);

package/dist/components/Buttons/WriteArticleButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"WriteArticleButton.esm.js","sources":["../../../src/components/Buttons/WriteArticleButton.tsx"],"sourcesContent":["import CreateIcon from '@material-ui/icons/Create';\nimport { qetaCreatePostPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { LinkButton } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { writeRouteRef } from '../../routes';\nimport { useTranslation } from '../../hooks';\nimport { Box } from '@material-ui/core';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\n\nexport const WriteArticleButton = (props: {\n  entity?: string;\n  tags?: string[];\n  entityPage?: boolean;\n}) => {\n  const { entity, entityPage, tags } = props;\n  const writeRoute = useRouteRef(writeRouteRef);\n  const { t } = useTranslation();\n\n  const params = new URLSearchParams();\n  if (entity) {\n    params.set('entity', entity);\n  }\n  if (entityPage) {\n    params.set('entityPage', 'true');\n  }\n  if (tags && tags.length > 0) {\n    params.set('tags', tags.join(','));\n  }\n\n  return (\n    <OptionalRequirePermission\n      permission={qetaCreatePostPermission}\n      errorPage={<></>}\n    >\n      <Box sx={{ marginLeft: 2 }}>\n        <LinkButton\n          size=\"small\"\n          variant=\"contained\"\n          to={\n            entity || tags\n              ? `${writeRoute()}?${params.toString()}`\n              : writeRoute()\n          }\n          color=\"primary\"\n          startIcon={<CreateIcon />}\n        >\n          {t('writeArticleButton.title')}\n        </LinkButton>\n      </Box>\n    </OptionalRequirePermission>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AASa,MAAA,kBAAA,GAAqB,CAAC,KAI7B,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,UAAY,EAAA,IAAA,EAAS,GAAA,KAAA;AACrC,EAAM,MAAA,UAAA,GAAa,YAAY,aAAa,CAAA;AAC5C,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAM,MAAA,MAAA,GAAS,IAAI,eAAgB,EAAA;AACnC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,MAAA,CAAA,GAAA,CAAI,UAAU,MAAM,CAAA;AAAA;AAE7B,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,MAAA,CAAA,GAAA,CAAI,cAAc,MAAM,CAAA;AAAA;AAEjC,EAAI,IAAA,IAAA,IAAQ,IAAK,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3B,IAAA,MAAA,CAAO,GAAI,CAAA,MAAA,EAAQ,IAAK,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA;AAAA;AAGnC,EACE,uBAAA,GAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,UAAY,EAAA,wBAAA;AAAA,MACZ,2BAAa,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA;AAAA,MAEb,8BAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,UAAA,EAAY,GACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,OAAA;AAAA,UACL,OAAQ,EAAA,WAAA;AAAA,UACR,EAAA,EACE,MAAU,IAAA,IAAA,GACN,CAAG,EAAA,UAAA,EAAY,CAAA,CAAA,EAAI,MAAO,CAAA,QAAA,EAAU,CAAA,CAAA,GACpC,UAAW,EAAA;AAAA,UAEjB,KAAM,EAAA,SAAA;AAAA,UACN,SAAA,sBAAY,UAAW,EAAA,EAAA,CAAA;AAAA,UAEtB,YAAE,0BAA0B;AAAA;AAAA,OAEjC,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"WriteArticleButton.esm.js","sources":["../../../src/components/Buttons/WriteArticleButton.tsx"],"sourcesContent":["import CreateIcon from '@material-ui/icons/Create';\nimport { qetaCreatePostPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { LinkButton } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { writeRouteRef } from '../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { Box } from '@material-ui/core';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\n\nexport const WriteArticleButton = (props: {\n  entity?: string;\n  tags?: string[];\n  entityPage?: boolean;\n}) => {\n  const { entity, entityPage, tags } = props;\n  const writeRoute = useRouteRef(writeRouteRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const params = new URLSearchParams();\n  if (entity) {\n    params.set('entity', entity);\n  }\n  if (entityPage) {\n    params.set('entityPage', 'true');\n  }\n  if (tags && tags.length > 0) {\n    params.set('tags', tags.join(','));\n  }\n\n  return (\n    <OptionalRequirePermission\n      permission={qetaCreatePostPermission}\n      errorPage={<></>}\n    >\n      <Box sx={{ marginLeft: 2 }}>\n        <LinkButton\n          size=\"small\"\n          variant=\"contained\"\n          to={\n            entity || tags\n              ? `${writeRoute()}?${params.toString()}`\n              : writeRoute()\n          }\n          color=\"primary\"\n          startIcon={<CreateIcon />}\n        >\n          {t('writeArticleButton.title')}\n        </LinkButton>\n      </Box>\n    </OptionalRequirePermission>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAUa,MAAA,kBAAA,GAAqB,CAAC,KAI7B,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,UAAY,EAAA,IAAA,EAAS,GAAA,KAAA;AACrC,EAAM,MAAA,UAAA,GAAa,YAAY,aAAa,CAAA;AAC5C,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAM,MAAA,MAAA,GAAS,IAAI,eAAgB,EAAA;AACnC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,MAAA,CAAA,GAAA,CAAI,UAAU,MAAM,CAAA;AAAA;AAE7B,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,MAAA,CAAA,GAAA,CAAI,cAAc,MAAM,CAAA;AAAA;AAEjC,EAAI,IAAA,IAAA,IAAQ,IAAK,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3B,IAAA,MAAA,CAAO,GAAI,CAAA,MAAA,EAAQ,IAAK,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA;AAAA;AAGnC,EACE,uBAAA,GAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,UAAY,EAAA,wBAAA;AAAA,MACZ,2BAAa,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA;AAAA,MAEb,8BAAC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,UAAA,EAAY,GACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,OAAA;AAAA,UACL,OAAQ,EAAA,WAAA;AAAA,UACR,EAAA,EACE,MAAU,IAAA,IAAA,GACN,CAAG,EAAA,UAAA,EAAY,CAAA,CAAA,EAAI,MAAO,CAAA,QAAA,EAAU,CAAA,CAAA,GACpC,UAAW,EAAA;AAAA,UAEjB,KAAM,EAAA,SAAA;AAAA,UACN,SAAA,sBAAY,UAAW,EAAA,EAAA,CAAA;AAAA,UAEtB,YAAE,0BAA0B;AAAA;AAAA,OAEjC,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}