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

package/dist/components/PostsGrid/PostsGridItem.esm.js

@@ -4,19 +4,16 @@ import { useState, useEffect } from 'react';
 import { useSignal } from '@backstage/plugin-signals-react';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { questionRouteRef, articleRouteRef } from '../../routes.esm.js';
-import { Card, CardActionArea, CardMedia, CardContent, Typography, Box, Tooltip, IconButton } from '@material-ui/core';
+import { Card, CardActionArea, CardMedia, CardContent, Typography, Box, Grid, Tooltip, IconButton } from '@material-ui/core';
 import DOMPurify from 'dompurify';
 import { useNavigate } from 'react-router-dom';
 import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities.esm.js';
 import { Link } from '@backstage/core-components';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
-import { qetaApiRef } from '../../api.esm.js';
-import 'react-use';
-import { useTranslation } from '../../hooks/useTranslation.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 '@backstage/plugin-permission-common';
+import { qetaApiRef } from '../../api.esm.js';
 import VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop';
 import VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom';
 import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
@@ -28,7 +25,7 @@ const PostsGridItem = (props) => {
   const { post, entity, allowRanking, onRankUpdate, collectionId } = props;
   const [views, setViews] = useState(post.views);
   const qetaApi = useApi(qetaApiRef);
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const { lastSignal } = useSignal(`qeta:post_${post.id}`);
   useEffect(() => {
     if (lastSignal?.type === "post_stats") {
@@ -73,29 +70,30 @@ const PostsGridItem = (props) => {
     ] }),
     /* @__PURE__ */ jsxs(CardContent, { style: { paddingTop: "0.5rem" }, children: [
       /* @__PURE__ */ jsx(TagsAndEntities, { entity: post }),
-      /* @__PURE__ */ jsx(Box, { style: { paddingLeft: "0.2rem", paddingTop: "0.5rem" }, children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
-        /* @__PURE__ */ jsx(
-          SmallAvatar,
-          {
-            src: user?.spec?.profile?.picture,
-            alt: name,
-            variant: "rounded",
-            children: initials
-          }
-        ),
-        /* @__PURE__ */ jsx(UserLink, { entityRef: post.author, anonymous: post.anonymous }),
-        " ",
-        /* @__PURE__ */ jsx(Link, { to: href, className: "qetaPostListItemQuestionBtn", children: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: post.created }) }),
-        " \xB7 ",
-        t("common.views", { count: views })
+      /* @__PURE__ */ jsx(Box, { style: { paddingLeft: "0.2rem", paddingTop: "0.5rem" }, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: t("common.views", { count: views }) }) }),
+        /* @__PURE__ */ jsxs(Grid, { item: true, children: [
+          /* @__PURE__ */ jsx(
+            SmallAvatar,
+            {
+              src: user?.spec?.profile?.picture,
+              alt: name,
+              variant: "rounded",
+              children: initials
+            }
+          ),
+          /* @__PURE__ */ jsx(UserLink, { entityRef: post.author, anonymous: post.anonymous }),
+          " ",
+          /* @__PURE__ */ jsx(Link, { to: href, className: "qetaPostListItemQuestionBtn", children: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: post.created }) })
+        ] })
       ] }) }),
       allowRanking && /* @__PURE__ */ jsxs(
         Box,
         {
           style: {
             paddingRight: "0.2em",
-            paddingTop: "0.5em",
-            paddingBottom: "0.5em",
+            paddingTop: "0.8em",
+            paddingBottom: "0.2em",
             float: "right"
           },
           children: [

package/dist/components/PostsGrid/PostsGridItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostsGridItem.esm.js","sources":["../../../src/components/PostsGrid/PostsGridItem.tsx"],"sourcesContent":["import {\n  PostResponse,\n  PostType,\n  QetaSignal,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useEffect, useState } from 'react';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport {\n  Box,\n  Card,\n  CardActionArea,\n  CardContent,\n  CardMedia,\n  IconButton,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useNavigate } from 'react-router-dom';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { Link } from '@backstage/core-components';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { qetaApiRef } from '../../api';\nimport VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop';\nimport VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom';\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport { UserLink } from '../Links';\nimport { SmallAvatar } from '../Utility/SmallAvatar';\n\nexport interface PostsGridItemProps {\n  post: PostResponse;\n  entity?: string;\n  type?: PostType;\n  allowRanking?: boolean;\n  onRankUpdate?: () => void;\n  collectionId?: number;\n}\n\nexport const PostsGridItem = (props: PostsGridItemProps) => {\n  const { post, entity, allowRanking, onRankUpdate, collectionId } = props;\n  const [views, setViews] = useState(post.views);\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslation();\n\n  const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${post.id}`);\n\n  useEffect(() => {\n    if (lastSignal?.type === 'post_stats') {\n      setViews(lastSignal.views);\n    }\n  }, [lastSignal]);\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const { name, initials, user } = useEntityAuthor(post);\n  const navigate = useNavigate();\n\n  const route = post.type === 'question' ? questionRoute : articleRoute;\n  const href = entity\n    ? `${route({\n        id: post.id.toString(10),\n      })}?entity=${entity}`\n    : route({ id: post.id.toString(10) });\n\n  const rank = (direction: 'top' | 'bottom' | 'up' | 'down') => {\n    if (!collectionId) {\n      return;\n    }\n    qetaApi.rankPostInCollection(collectionId, post.id, direction).then(res => {\n      if (res) {\n        onRankUpdate?.();\n      }\n    });\n  };\n\n  return (\n    <Card style={{ height: '100%' }}>\n      <CardActionArea onClick={() => navigate(href)}>\n        {post.headerImage && (\n          <CardMedia\n            component=\"img\"\n            height=\"140\"\n            image={post.headerImage}\n            alt={post.title}\n          />\n        )}\n        <CardContent style={{ paddingBottom: '0.5rem' }}>\n          <Typography gutterBottom variant=\"h6\" component=\"div\">\n            {post.title}\n          </Typography>\n          <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n            {DOMPurify.sanitize(\n              truncate(removeMarkdownFormatting(post.content), 400),\n            )}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      <CardContent style={{ paddingTop: '0.5rem' }}>\n        <TagsAndEntities entity={post} />\n        <Box style={{ paddingLeft: '0.2rem', paddingTop: '0.5rem' }}>\n          <Typography variant=\"caption\">\n            <SmallAvatar\n              src={user?.spec?.profile?.picture}\n              alt={name}\n              variant=\"rounded\"\n            >\n              {initials}\n            </SmallAvatar>\n            <UserLink entityRef={post.author} anonymous={post.anonymous} />{' '}\n            <Link to={href} className=\"qetaPostListItemQuestionBtn\">\n              <RelativeTimeWithTooltip value={post.created} />\n            </Link>\n            {' · '}\n            {t('common.views', { count: views })}\n          </Typography>\n        </Box>\n        {allowRanking && (\n          <Box\n            style={{\n              paddingRight: '0.2em',\n              paddingTop: '0.5em',\n              paddingBottom: '0.5em',\n              float: 'right',\n            }}\n          >\n            <Tooltip title={t('ranking.top')}>\n              <IconButton size=\"small\" onClick={() => rank('top')}>\n                <VerticalAlignTopIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.up')}>\n              <IconButton size=\"small\" onClick={() => rank('up')}>\n                <KeyboardArrowUpIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.down')}>\n              <IconButton size=\"small\" onClick={() => rank('down')}>\n                <KeyboardArrowDownIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.bottom')}>\n              <IconButton size=\"small\" onClick={() => rank('bottom')}>\n                <VerticalAlignBottomIcon />\n              </IconButton>\n            </Tooltip>\n          </Box>\n        )}\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6Ca,MAAA,aAAA,GAAgB,CAAC,KAA8B,KAAA;AAC1D,EAAA,MAAM,EAAE,IAAM,EAAA,MAAA,EAAQ,YAAc,EAAA,YAAA,EAAc,cAAiB,GAAA,KAAA;AACnE,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,KAAK,KAAK,CAAA;AAC7C,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,MAAM,EAAE,UAAW,EAAA,GAAI,UAAsB,CAAa,UAAA,EAAA,IAAA,CAAK,EAAE,CAAE,CAAA,CAAA;AAEnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,UAAA,EAAY,SAAS,YAAc,EAAA;AACrC,MAAA,QAAA,CAAS,WAAW,KAAK,CAAA;AAAA;AAC3B,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,aAAA,GAAgB,YAAY,gBAAgB,CAAA;AAClD,EAAM,MAAA,YAAA,GAAe,YAAY,eAAe,CAAA;AAChD,EAAA,MAAM,EAAE,IAAM,EAAA,QAAA,EAAU,IAAK,EAAA,GAAI,gBAAgB,IAAI,CAAA;AACrD,EAAA,MAAM,WAAW,WAAY,EAAA;AAE7B,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,IAAS,KAAA,UAAA,GAAa,aAAgB,GAAA,YAAA;AACzD,EAAM,MAAA,IAAA,GAAO,MACT,GAAA,CAAA,EAAG,KAAM,CAAA;AAAA,IACP,EAAI,EAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,EAAE;AAAA,GACxB,CAAC,CAAW,QAAA,EAAA,MAAM,CACnB,CAAA,GAAA,KAAA,CAAM,EAAE,EAAA,EAAI,IAAK,CAAA,EAAA,CAAG,QAAS,CAAA,EAAE,GAAG,CAAA;AAEtC,EAAM,MAAA,IAAA,GAAO,CAAC,SAAgD,KAAA;AAC5D,IAAA,IAAI,CAAC,YAAc,EAAA;AACjB,MAAA;AAAA;AAEF,IAAA,OAAA,CAAQ,qBAAqB,YAAc,EAAA,IAAA,CAAK,IAAI,SAAS,CAAA,CAAE,KAAK,CAAO,GAAA,KAAA;AACzE,MAAA,IAAI,GAAK,EAAA;AACP,QAAe,YAAA,IAAA;AAAA;AACjB,KACD,CAAA;AAAA,GACH;AAEA,EAAA,4BACG,IAAK,EAAA,EAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,QACrB,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,cAAe,EAAA,EAAA,OAAA,EAAS,MAAM,QAAA,CAAS,IAAI,CACzC,EAAA,QAAA,EAAA;AAAA,MAAA,IAAA,CAAK,WACJ,oBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,SAAU,EAAA,KAAA;AAAA,UACV,MAAO,EAAA,KAAA;AAAA,UACP,OAAO,IAAK,CAAA,WAAA;AAAA,UACZ,KAAK,IAAK,CAAA;AAAA;AAAA,OACZ;AAAA,2BAED,WAAY,EAAA,EAAA,KAAA,EAAO,EAAE,aAAA,EAAe,UACnC,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,cAAY,IAAC,EAAA,OAAA,EAAQ,MAAK,SAAU,EAAA,KAAA,EAC7C,eAAK,KACR,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,OAAM,eAAgB,EAAA,YAAA,EAAY,MAC3D,QAAU,EAAA,SAAA,CAAA,QAAA;AAAA,UACT,QAAS,CAAA,wBAAA,CAAyB,IAAK,CAAA,OAAO,GAAG,GAAG;AAAA,SAExD,EAAA;AAAA,OACF,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,yBACC,WAAY,EAAA,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,UAChC,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,eAAA,EAAA,EAAgB,QAAQ,IAAM,EAAA,CAAA;AAAA,sBAC9B,GAAA,CAAA,GAAA,EAAA,EAAI,KAAO,EAAA,EAAE,WAAa,EAAA,QAAA,EAAU,UAAY,EAAA,QAAA,EAC/C,EAAA,QAAA,kBAAA,IAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAClB,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,IAAM,EAAA,IAAA,EAAM,OAAS,EAAA,OAAA;AAAA,YAC1B,GAAK,EAAA,IAAA;AAAA,YACL,OAAQ,EAAA,SAAA;AAAA,YAEP,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,4BACC,QAAS,EAAA,EAAA,SAAA,EAAW,KAAK,MAAQ,EAAA,SAAA,EAAW,KAAK,SAAW,EAAA,CAAA;AAAA,QAAG,GAAA;AAAA,wBAChE,GAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAI,IAAM,EAAA,SAAA,EAAU,6BACxB,EAAA,QAAA,kBAAA,GAAA,CAAC,uBAAwB,EAAA,EAAA,KAAA,EAAO,IAAK,CAAA,OAAA,EAAS,CAChD,EAAA,CAAA;AAAA,QACC,QAAA;AAAA,QACA,CAAE,CAAA,cAAA,EAAgB,EAAE,KAAA,EAAO,OAAO;AAAA,OAAA,EACrC,CACF,EAAA,CAAA;AAAA,MACC,YACC,oBAAA,IAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA;AAAA,YACL,YAAc,EAAA,OAAA;AAAA,YACd,UAAY,EAAA,OAAA;AAAA,YACZ,aAAe,EAAA,OAAA;AAAA,YACf,KAAO,EAAA;AAAA,WACT;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,CAAA,CAAE,aAAa,CAAA,EAC7B,8BAAC,UAAW,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,OAAA,EAAS,MAAM,IAAK,CAAA,KAAK,GAChD,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,GACxB,CACF,EAAA,CAAA;AAAA,gCACC,OAAQ,EAAA,EAAA,KAAA,EAAO,EAAE,YAAY,CAAA,EAC5B,8BAAC,UAAW,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,OAAA,EAAS,MAAM,IAAK,CAAA,IAAI,GAC/C,QAAC,kBAAA,GAAA,CAAA,mBAAA,EAAA,EAAoB,GACvB,CACF,EAAA,CAAA;AAAA,gCACC,OAAQ,EAAA,EAAA,KAAA,EAAO,EAAE,cAAc,CAAA,EAC9B,8BAAC,UAAW,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,OAAA,EAAS,MAAM,IAAK,CAAA,MAAM,GACjD,QAAC,kBAAA,GAAA,CAAA,qBAAA,EAAA,EAAsB,GACzB,CACF,EAAA,CAAA;AAAA,gCACC,OAAQ,EAAA,EAAA,KAAA,EAAO,EAAE,gBAAgB,CAAA,EAChC,8BAAC,UAAW,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,OAAA,EAAS,MAAM,IAAK,CAAA,QAAQ,GACnD,QAAC,kBAAA,GAAA,CAAA,uBAAA,EAAA,EAAwB,GAC3B,CACF,EAAA;AAAA;AAAA;AAAA;AACF,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PostsGridItem.esm.js","sources":["../../../src/components/PostsGrid/PostsGridItem.tsx"],"sourcesContent":["import {\n  PostResponse,\n  PostType,\n  QetaSignal,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useEffect, useState } from 'react';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport {\n  Box,\n  Card,\n  CardActionArea,\n  CardContent,\n  CardMedia,\n  Grid,\n  IconButton,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useNavigate } from 'react-router-dom';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { Link } from '@backstage/core-components';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { qetaApiRef } from '../../api';\nimport VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop';\nimport VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom';\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport { UserLink } from '../Links';\nimport { SmallAvatar } from '../Utility/SmallAvatar';\n\nexport interface PostsGridItemProps {\n  post: PostResponse;\n  entity?: string;\n  type?: PostType;\n  allowRanking?: boolean;\n  onRankUpdate?: () => void;\n  collectionId?: number;\n}\n\nexport const PostsGridItem = (props: PostsGridItemProps) => {\n  const { post, entity, allowRanking, onRankUpdate, collectionId } = props;\n  const [views, setViews] = useState(post.views);\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${post.id}`);\n\n  useEffect(() => {\n    if (lastSignal?.type === 'post_stats') {\n      setViews(lastSignal.views);\n    }\n  }, [lastSignal]);\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const { name, initials, user } = useEntityAuthor(post);\n  const navigate = useNavigate();\n\n  const route = post.type === 'question' ? questionRoute : articleRoute;\n  const href = entity\n    ? `${route({\n        id: post.id.toString(10),\n      })}?entity=${entity}`\n    : route({ id: post.id.toString(10) });\n\n  const rank = (direction: 'top' | 'bottom' | 'up' | 'down') => {\n    if (!collectionId) {\n      return;\n    }\n    qetaApi.rankPostInCollection(collectionId, post.id, direction).then(res => {\n      if (res) {\n        onRankUpdate?.();\n      }\n    });\n  };\n\n  return (\n    <Card style={{ height: '100%' }}>\n      <CardActionArea onClick={() => navigate(href)}>\n        {post.headerImage && (\n          <CardMedia\n            component=\"img\"\n            height=\"140\"\n            image={post.headerImage}\n            alt={post.title}\n          />\n        )}\n        <CardContent style={{ paddingBottom: '0.5rem' }}>\n          <Typography gutterBottom variant=\"h6\" component=\"div\">\n            {post.title}\n          </Typography>\n          <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n            {DOMPurify.sanitize(\n              truncate(removeMarkdownFormatting(post.content), 400),\n            )}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      <CardContent style={{ paddingTop: '0.5rem' }}>\n        <TagsAndEntities entity={post} />\n        <Box style={{ paddingLeft: '0.2rem', paddingTop: '0.5rem' }}>\n          <Grid container alignItems=\"center\" justifyContent=\"space-between\">\n            <Grid item>\n              <Typography variant=\"subtitle2\">\n                {t('common.views', { count: views })}\n              </Typography>\n            </Grid>\n            <Grid item>\n              <SmallAvatar\n                src={user?.spec?.profile?.picture}\n                alt={name}\n                variant=\"rounded\"\n              >\n                {initials}\n              </SmallAvatar>\n              <UserLink entityRef={post.author} anonymous={post.anonymous} />{' '}\n              <Link to={href} className=\"qetaPostListItemQuestionBtn\">\n                <RelativeTimeWithTooltip value={post.created} />\n              </Link>\n            </Grid>\n          </Grid>\n        </Box>\n        {allowRanking && (\n          <Box\n            style={{\n              paddingRight: '0.2em',\n              paddingTop: '0.8em',\n              paddingBottom: '0.2em',\n              float: 'right',\n            }}\n          >\n            <Tooltip title={t('ranking.top')}>\n              <IconButton size=\"small\" onClick={() => rank('top')}>\n                <VerticalAlignTopIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.up')}>\n              <IconButton size=\"small\" onClick={() => rank('up')}>\n                <KeyboardArrowUpIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.down')}>\n              <IconButton size=\"small\" onClick={() => rank('down')}>\n                <KeyboardArrowDownIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.bottom')}>\n              <IconButton size=\"small\" onClick={() => rank('bottom')}>\n                <VerticalAlignBottomIcon />\n              </IconButton>\n            </Tooltip>\n          </Box>\n        )}\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PostsTable/PostsTable.esm.js

@@ -5,10 +5,11 @@ import { PostsTableRow } from './PostsTableRow.esm.js';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import '@backstage/core-plugin-api';
 import '../../api.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';
@@ -23,7 +24,7 @@ const PostsTable = (props) => {
   );
   const [quickFilter, setQuickFilter] = useState(props.quickFilter ?? "latest");
   const [refresh, setRefresh] = useState(0);
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const [filters, setFilters] = useState({
     order: "desc",
     orderBy: "created",

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

@@ -1 +1 @@
-{"version":3,"file":"PostsTable.esm.js","sources":["../../../src/components/PostsTable/PostsTable.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { LinkButton, Progress, WarningPanel } from '@backstage/core-components';\nimport { PostsTableRow } from './PostsTableRow';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport {\n  Button,\n  ButtonGroup,\n  Grid,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TablePagination,\n  TableRow,\n  Typography,\n} from '@material-ui/core';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport { PostType } from '@drodil/backstage-plugin-qeta-common';\n\ntype QuickFilterType = 'latest' | 'favorites' | 'most_viewed';\n\nexport const PostsTable = (props: {\n  hideTitle?: boolean;\n  rowsPerPage?: number;\n  quickFilter?: QuickFilterType;\n  postType?: PostType;\n}) => {\n  const [page, setPage] = useState(1);\n  const [questionsPerPage, setQuestionsPerPage] = useState(\n    props.rowsPerPage ?? 10,\n  );\n  const [quickFilter, setQuickFilter] = useState(props.quickFilter ?? 'latest');\n  const [refresh, setRefresh] = useState(0);\n  const { t } = useTranslation();\n  const [filters, setFilters] = useState({\n    order: 'desc',\n    orderBy: 'created',\n    noAnswers: 'false',\n    noCorrectAnswer: 'false',\n    noVotes: 'false',\n    searchQuery: '',\n    favorite: false,\n  });\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api =>\n      api.getPosts({\n        type: props.postType,\n        limit: questionsPerPage,\n        offset: (page - 1) * questionsPerPage,\n        includeEntities: true,\n        ...(filters as any),\n      }),\n    [page, filters, questionsPerPage, refresh],\n  );\n\n  const handleQuickFilterChange = (filter: QuickFilterType) => {\n    setQuickFilter(filter);\n    if (filter === 'latest') {\n      setFilters({\n        ...filters,\n        order: 'desc',\n        orderBy: 'created',\n        favorite: false,\n      });\n    } else if (filter === 'favorites') {\n      setFilters({\n        ...filters,\n        order: 'desc',\n        orderBy: 'created',\n        favorite: true,\n      });\n    } else if (filter === 'most_viewed') {\n      setFilters({\n        ...filters,\n        order: 'desc',\n        orderBy: 'views',\n        favorite: false,\n      });\n    }\n  };\n\n  const handleChangePage = (_: unknown, newPage: number) => {\n    setPage(newPage + 1);\n  };\n\n  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {\n    setQuestionsPerPage(parseInt(event.target.value, 10));\n    setPage(1);\n  };\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('postsTable.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  return (\n    <>\n      <Grid\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        style={{ marginBottom: '1em' }}\n        className=\"qetaPostsTableGrid\"\n      >\n        <Grid item>\n          {props.hideTitle === true ? null : (\n            <Typography variant=\"h5\">{t('pluginName')}</Typography>\n          )}\n        </Grid>\n        <Grid item>\n          <ButtonGroup>\n            <Button\n              color={quickFilter === 'latest' ? 'primary' : undefined}\n              onClick={() => handleQuickFilterChange('latest')}\n            >\n              {t('postsTable.latest')}\n            </Button>\n            <Button\n              color={quickFilter === 'favorites' ? 'primary' : undefined}\n              onClick={() => handleQuickFilterChange('favorites')}\n            >\n              {t('postsTable.favorites')}\n            </Button>\n            <Button\n              color={quickFilter === 'most_viewed' ? 'primary' : undefined}\n              onClick={() => handleQuickFilterChange('most_viewed')}\n            >\n              {t('postsTable.mostViewed')}\n            </Button>\n          </ButtonGroup>\n          <LinkButton\n            to=\"#\"\n            variant=\"text\"\n            onClick={() => setRefresh(refresh + 1)}\n          >\n            <RefreshIcon />\n          </LinkButton>\n        </Grid>\n      </Grid>\n      <TableContainer>\n        <Table className=\"qetaQuestionsTable\">\n          <TableHead>\n            <TableRow>\n              <TableCell>{t('postsTable.cells.title')}</TableCell>\n              <TableCell>{t('postsTable.cells.author')}</TableCell>\n              {props.postType === undefined && (\n                <TableCell>{t('postsTable.cells.type')}</TableCell>\n              )}\n              <TableCell>{t('postsTable.cells.asked')}</TableCell>\n              <TableCell>{t('postsTable.cells.updated')}</TableCell>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {loading ? (\n              <TableRow>\n                <TableCell>\n                  <Progress />\n                </TableCell>\n              </TableRow>\n            ) : null}\n            {response.posts.map(q => (\n              <PostsTableRow\n                key={q.id}\n                post={q}\n                showIcon={props.postType === undefined}\n              />\n            ))}\n          </TableBody>\n        </Table>\n        <TablePagination\n          rowsPerPageOptions={[5, 10, 20, 30, 40, 50]}\n          component=\"div\"\n          count={response.total}\n          rowsPerPage={questionsPerPage}\n          page={page - 1}\n          onPageChange={handleChangePage}\n          onRowsPerPageChange={handleChangeRowsPerPage}\n        />\n      </TableContainer>\n    </>\n  );\n};\n\n/**\n * @deprecated Use `PostsTable` instead\n */\nexport const QuestionsTable = PostsTable;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PostsTable.esm.js","sources":["../../../src/components/PostsTable/PostsTable.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { LinkButton, Progress, WarningPanel } from '@backstage/core-components';\nimport { PostsTableRow } from './PostsTableRow';\nimport { useQetaApi } from '../../hooks';\nimport {\n  Button,\n  ButtonGroup,\n  Grid,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TablePagination,\n  TableRow,\n  Typography,\n} from '@material-ui/core';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport { PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\ntype QuickFilterType = 'latest' | 'favorites' | 'most_viewed';\n\nexport const PostsTable = (props: {\n  hideTitle?: boolean;\n  rowsPerPage?: number;\n  quickFilter?: QuickFilterType;\n  postType?: PostType;\n}) => {\n  const [page, setPage] = useState(1);\n  const [questionsPerPage, setQuestionsPerPage] = useState(\n    props.rowsPerPage ?? 10,\n  );\n  const [quickFilter, setQuickFilter] = useState(props.quickFilter ?? 'latest');\n  const [refresh, setRefresh] = useState(0);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const [filters, setFilters] = useState({\n    order: 'desc',\n    orderBy: 'created',\n    noAnswers: 'false',\n    noCorrectAnswer: 'false',\n    noVotes: 'false',\n    searchQuery: '',\n    favorite: false,\n  });\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api =>\n      api.getPosts({\n        type: props.postType,\n        limit: questionsPerPage,\n        offset: (page - 1) * questionsPerPage,\n        includeEntities: true,\n        ...(filters as any),\n      }),\n    [page, filters, questionsPerPage, refresh],\n  );\n\n  const handleQuickFilterChange = (filter: QuickFilterType) => {\n    setQuickFilter(filter);\n    if (filter === 'latest') {\n      setFilters({\n        ...filters,\n        order: 'desc',\n        orderBy: 'created',\n        favorite: false,\n      });\n    } else if (filter === 'favorites') {\n      setFilters({\n        ...filters,\n        order: 'desc',\n        orderBy: 'created',\n        favorite: true,\n      });\n    } else if (filter === 'most_viewed') {\n      setFilters({\n        ...filters,\n        order: 'desc',\n        orderBy: 'views',\n        favorite: false,\n      });\n    }\n  };\n\n  const handleChangePage = (_: unknown, newPage: number) => {\n    setPage(newPage + 1);\n  };\n\n  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {\n    setQuestionsPerPage(parseInt(event.target.value, 10));\n    setPage(1);\n  };\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('postsTable.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  return (\n    <>\n      <Grid\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        style={{ marginBottom: '1em' }}\n        className=\"qetaPostsTableGrid\"\n      >\n        <Grid item>\n          {props.hideTitle === true ? null : (\n            <Typography variant=\"h5\">{t('pluginName')}</Typography>\n          )}\n        </Grid>\n        <Grid item>\n          <ButtonGroup>\n            <Button\n              color={quickFilter === 'latest' ? 'primary' : undefined}\n              onClick={() => handleQuickFilterChange('latest')}\n            >\n              {t('postsTable.latest')}\n            </Button>\n            <Button\n              color={quickFilter === 'favorites' ? 'primary' : undefined}\n              onClick={() => handleQuickFilterChange('favorites')}\n            >\n              {t('postsTable.favorites')}\n            </Button>\n            <Button\n              color={quickFilter === 'most_viewed' ? 'primary' : undefined}\n              onClick={() => handleQuickFilterChange('most_viewed')}\n            >\n              {t('postsTable.mostViewed')}\n            </Button>\n          </ButtonGroup>\n          <LinkButton\n            to=\"#\"\n            variant=\"text\"\n            onClick={() => setRefresh(refresh + 1)}\n          >\n            <RefreshIcon />\n          </LinkButton>\n        </Grid>\n      </Grid>\n      <TableContainer>\n        <Table className=\"qetaQuestionsTable\">\n          <TableHead>\n            <TableRow>\n              <TableCell>{t('postsTable.cells.title')}</TableCell>\n              <TableCell>{t('postsTable.cells.author')}</TableCell>\n              {props.postType === undefined && (\n                <TableCell>{t('postsTable.cells.type')}</TableCell>\n              )}\n              <TableCell>{t('postsTable.cells.asked')}</TableCell>\n              <TableCell>{t('postsTable.cells.updated')}</TableCell>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {loading ? (\n              <TableRow>\n                <TableCell>\n                  <Progress />\n                </TableCell>\n              </TableRow>\n            ) : null}\n            {response.posts.map(q => (\n              <PostsTableRow\n                key={q.id}\n                post={q}\n                showIcon={props.postType === undefined}\n              />\n            ))}\n          </TableBody>\n        </Table>\n        <TablePagination\n          rowsPerPageOptions={[5, 10, 20, 30, 40, 50]}\n          component=\"div\"\n          count={response.total}\n          rowsPerPage={questionsPerPage}\n          page={page - 1}\n          onPageChange={handleChangePage}\n          onRowsPerPageChange={handleChangeRowsPerPage}\n        />\n      </TableContainer>\n    </>\n  );\n};\n\n/**\n * @deprecated Use `PostsTable` instead\n */\nexport const QuestionsTable = PostsTable;\n"],"names":[],"mappings":"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"}

package/dist/components/QetaPagination/QetaPagination.esm.js

@@ -1,16 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-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 '@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 { makeStyles, Grid, Tooltip, FormControl, Select, MenuItem } from '@material-ui/core';
 import { Pagination } from '@material-ui/lab';
 
@@ -28,7 +18,7 @@ const useStyles = makeStyles(
 );
 const QetaPagination = (props) => {
   const { handlePageChange, handlePageSizeChange, page, pageCount, tooltip } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const styles = useStyles();
   return /* @__PURE__ */ jsxs(
     Grid,

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

@@ -1 +1 @@
-{"version":3,"file":"QetaPagination.esm.js","sources":["../../../src/components/QetaPagination/QetaPagination.tsx"],"sourcesContent":["import { ChangeEvent } from 'react';\nimport { useTranslation } from '../../hooks';\nimport {\n  FormControl,\n  Grid,\n  makeStyles,\n  MenuItem,\n  Select,\n  Tooltip,\n} from '@material-ui/core';\nimport { Pagination } from '@material-ui/lab';\n\nexport type QetaPaginationClassKeys = 'root' | 'pageSizeSelect' | 'pagination';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {\n      marginTop: '2em',\n    },\n    pageSizeSelect: {\n      marginRight: '1em',\n    },\n    pagination: {},\n  }),\n  { name: 'QetaPagination' },\n);\n\nexport const QetaPagination = (props: {\n  pageSize: number;\n  handlePageChange: (_event: ChangeEvent<unknown>, value: number) => void;\n  handlePageSizeChange: (event: ChangeEvent<{ value: unknown }>) => void;\n  page: number;\n  tooltip?: string;\n  pageCount: number;\n}) => {\n  const { handlePageChange, handlePageSizeChange, page, pageCount, tooltip } =\n    props;\n  const { t } = useTranslation();\n  const styles = useStyles();\n  return (\n    <Grid\n      container\n      className={styles.root}\n      spacing={0}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n    >\n      <Tooltip title={tooltip ?? t('pagination.defaultTooltip')} arrow>\n        <FormControl variant=\"outlined\">\n          <Select\n            value={props.pageSize}\n            onChange={handlePageSizeChange}\n            variant=\"outlined\"\n            className={styles.pageSizeSelect}\n          >\n            <MenuItem value={5}>5</MenuItem>\n            <MenuItem value={10}>10</MenuItem>\n            <MenuItem value={25}>25</MenuItem>\n            <MenuItem value={50}>50</MenuItem>\n            <MenuItem value={100}>100</MenuItem>\n          </Select>\n        </FormControl>\n      </Tooltip>\n      <Pagination\n        page={page}\n        onChange={handlePageChange}\n        count={pageCount}\n        size=\"large\"\n        variant=\"outlined\"\n        className={styles.pagination}\n        showFirstButton\n        showLastButton\n      />\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,OAAO;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA;AAAA,KACb;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,WAAa,EAAA;AAAA,KACf;AAAA,IACA,YAAY;AAAC,GACf,CAAA;AAAA,EACA,EAAE,MAAM,gBAAiB;AAC3B,CAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,KAOzB,KAAA;AACJ,EAAA,MAAM,EAAE,gBAAkB,EAAA,oBAAA,EAAsB,IAAM,EAAA,SAAA,EAAW,SAC/D,GAAA,KAAA;AACF,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,OAAS,EAAA,CAAA;AAAA,MACT,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,QAAA;AAAA,MAEf,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,OAAA,IAAW,CAAE,CAAA,2BAA2B,CAAG,EAAA,KAAA,EAAK,IAC9D,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,OAAA,EAAQ,UACnB,EAAA,QAAA,kBAAA,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAO,KAAM,CAAA,QAAA;AAAA,YACb,QAAU,EAAA,oBAAA;AAAA,YACV,OAAQ,EAAA,UAAA;AAAA,YACR,WAAW,MAAO,CAAA,cAAA;AAAA,YAElB,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAG,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,8BACpB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,GAAA,EAAK,QAAG,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,WAE7B,CACF,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,QAAU,EAAA,gBAAA;AAAA,YACV,KAAO,EAAA,SAAA;AAAA,YACP,IAAK,EAAA,OAAA;AAAA,YACL,OAAQ,EAAA,UAAA;AAAA,YACR,WAAW,MAAO,CAAA,UAAA;AAAA,YAClB,eAAe,EAAA,IAAA;AAAA,YACf,cAAc,EAAA;AAAA;AAAA;AAChB;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"QetaPagination.esm.js","sources":["../../../src/components/QetaPagination/QetaPagination.tsx"],"sourcesContent":["import { ChangeEvent } from 'react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n  FormControl,\n  Grid,\n  makeStyles,\n  MenuItem,\n  Select,\n  Tooltip,\n} from '@material-ui/core';\nimport { Pagination } from '@material-ui/lab';\n\nexport type QetaPaginationClassKeys = 'root' | 'pageSizeSelect' | 'pagination';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {\n      marginTop: '2em',\n    },\n    pageSizeSelect: {\n      marginRight: '1em',\n    },\n    pagination: {},\n  }),\n  { name: 'QetaPagination' },\n);\n\nexport const QetaPagination = (props: {\n  pageSize: number;\n  handlePageChange: (_event: ChangeEvent<unknown>, value: number) => void;\n  handlePageSizeChange: (event: ChangeEvent<{ value: unknown }>) => void;\n  page: number;\n  tooltip?: string;\n  pageCount: number;\n}) => {\n  const { handlePageChange, handlePageSizeChange, page, pageCount, tooltip } =\n    props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const styles = useStyles();\n  return (\n    <Grid\n      container\n      className={styles.root}\n      spacing={0}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n    >\n      <Tooltip title={tooltip ?? t('pagination.defaultTooltip')} arrow>\n        <FormControl variant=\"outlined\">\n          <Select\n            value={props.pageSize}\n            onChange={handlePageSizeChange}\n            variant=\"outlined\"\n            className={styles.pageSizeSelect}\n          >\n            <MenuItem value={5}>5</MenuItem>\n            <MenuItem value={10}>10</MenuItem>\n            <MenuItem value={25}>25</MenuItem>\n            <MenuItem value={50}>50</MenuItem>\n            <MenuItem value={100}>100</MenuItem>\n          </Select>\n        </FormControl>\n      </Tooltip>\n      <Pagination\n        page={page}\n        onChange={handlePageChange}\n        count={pageCount}\n        size=\"large\"\n        variant=\"outlined\"\n        className={styles.pagination}\n        showFirstButton\n        showLastButton\n      />\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,OAAO;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA;AAAA,KACb;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,WAAa,EAAA;AAAA,KACf;AAAA,IACA,YAAY;AAAC,GACf,CAAA;AAAA,EACA,EAAE,MAAM,gBAAiB;AAC3B,CAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,KAOzB,KAAA;AACJ,EAAA,MAAM,EAAE,gBAAkB,EAAA,oBAAA,EAAsB,IAAM,EAAA,SAAA,EAAW,SAC/D,GAAA,KAAA;AACF,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,OAAS,EAAA,CAAA;AAAA,MACT,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,QAAA;AAAA,MAEf,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,OAAA,IAAW,CAAE,CAAA,2BAA2B,CAAG,EAAA,KAAA,EAAK,IAC9D,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,OAAA,EAAQ,UACnB,EAAA,QAAA,kBAAA,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAO,KAAM,CAAA,QAAA;AAAA,YACb,QAAU,EAAA,oBAAA;AAAA,YACV,OAAQ,EAAA,UAAA;AAAA,YACR,WAAW,MAAO,CAAA,cAAA;AAAA,YAElB,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAG,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,8BACpB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,GAAA,EAAK,QAAG,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,WAE7B,CACF,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,QAAU,EAAA,gBAAA;AAAA,YACV,KAAO,EAAA,SAAA;AAAA,YACP,IAAK,EAAA,OAAA;AAAA,YACL,OAAQ,EAAA,UAAA;AAAA,YACR,WAAW,MAAO,CAAA,UAAA;AAAA,YAClB,eAAe,EAAA,IAAA;AAAA,YACf,cAAc,EAAA;AAAA;AAAA;AAChB;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/QuestionCard/QuestionCard.esm.js

@@ -13,16 +13,8 @@ import { LinkButton } from '../Buttons/LinkButton.esm.js';
 import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer.esm.js';
 import { editQuestionRouteRef } from '../../routes.esm.js';
 import { useNavigate } from 'react-router-dom';
-import '../../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';
 import { VoteButtonContainer } from '../Utility/VoteButtonContainer.esm.js';
 import { makeStyles, Card, CardContent, Grid, Box, Button } from '@material-ui/core';
 
@@ -57,7 +49,7 @@ const QuestionCard = (props) => {
   const [questionEntity, setQuestionEntity] = useState(question);
   const handleDeleteModalOpen = () => setDeleteModalOpen(true);
   const handleDeleteModalClose = () => setDeleteModalOpen(false);
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const onCommentAction = (q, _) => {
     setQuestionEntity(q);
   };
@@ -106,48 +98,46 @@ const QuestionCard = (props) => {
                     alignItems: "flex-end",
                     className: styles.metadata,
                     children: [
-                      /* @__PURE__ */ jsxs(Grid, { item: true, style: { alignSelf: "flex-end" }, children: [
-                        /* @__PURE__ */ jsx(TagsAndEntities, { entity: questionEntity }),
-                        (question.canEdit || question.canDelete) && /* @__PURE__ */ jsxs(Box, { className: styles.buttons, children: [
-                          question.canEdit && /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(TagsAndEntities, { entity: questionEntity }) }),
+                      /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsx(AuthorBox, { entity: questionEntity }) }),
+                      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: (question.canEdit || question.canDelete) && /* @__PURE__ */ jsxs(Box, { className: styles.buttons, children: [
+                        question.canEdit && /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "outlined",
+                            size: "small",
+                            startIcon: /* @__PURE__ */ jsx(EditIcon, {}),
+                            onClick: () => navigate(
+                              editQuestionRoute({
+                                id: question.id.toString(10)
+                              })
+                            ),
+                            className: "qetaQuestionCardEditBtn",
+                            children: t("questionPage.editButton")
+                          }
+                        ),
+                        question.canDelete && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(
                             Button,
                             {
                               variant: "outlined",
                               size: "small",
-                              startIcon: /* @__PURE__ */ jsx(EditIcon, {}),
-                              onClick: () => navigate(
-                                editQuestionRoute({
-                                  id: question.id.toString(10)
-                                })
-                              ),
-                              className: "qetaQuestionCardEditBtn",
-                              children: t("questionPage.editButton")
+                              color: "secondary",
+                              onClick: handleDeleteModalOpen,
+                              startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
+                              children: t("deleteModal.deleteButton")
                             }
                           ),
-                          question.canDelete && /* @__PURE__ */ jsxs(Fragment, { children: [
-                            /* @__PURE__ */ jsx(
-                              Button,
-                              {
-                                variant: "outlined",
-                                size: "small",
-                                color: "secondary",
-                                onClick: handleDeleteModalOpen,
-                                startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
-                                children: t("deleteModal.deleteButton")
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              DeleteModal,
-                              {
-                                open: deleteModalOpen,
-                                onClose: handleDeleteModalClose,
-                                entity: questionEntity
-                              }
-                            )
-                          ] })
+                          /* @__PURE__ */ jsx(
+                            DeleteModal,
+                            {
+                              open: deleteModalOpen,
+                              onClose: handleDeleteModalClose,
+                              entity: questionEntity
+                            }
+                          )
                         ] })
-                      ] }),
-                      /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsx(AuthorBox, { entity: questionEntity }) })
+                      ] }) })
                     ]
                   }
                 )

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

@@ -1 +1 @@
-{"version":3,"file":"QuestionCard.esm.js","sources":["../../../src/components/QuestionCard/QuestionCard.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useState, useEffect } from 'react';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { DeleteModal } from '../DeleteModal/DeleteModal';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport { FavoriteButton } from '../Buttons/FavoriteButton';\nimport { AuthorBox } from '../AuthorBox/AuthorBox';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { CommentSection } from '../CommentSection/CommentSection';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { LinkButton } from '../Buttons/LinkButton';\nimport { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';\nimport { editQuestionRouteRef } from '../../routes';\nimport { useNavigate } from 'react-router-dom';\nimport { useTranslation } from '../../hooks';\nimport { VoteButtonContainer } from '../Utility/VoteButtonContainer';\nimport {\n  Box,\n  Button,\n  Card,\n  CardContent,\n  Grid,\n  makeStyles,\n} from '@material-ui/core';\n\nexport type QuestionCardClassKeys =\n  | 'root'\n  | 'contentContainer'\n  | 'markdownContainer'\n  | 'buttons'\n  | 'metadata';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {},\n    contentContainer: {\n      marginLeft: '0.5em',\n      width: 'calc(100% - 70px)',\n    },\n    markdownContainer: {\n      minHeight: '6em',\n      paddingBottom: '0.5em',\n    },\n    buttons: {\n      marginTop: '1em',\n      '& *:not(:last-child)': {\n        marginRight: '0.3em',\n      },\n    },\n    metadata: {\n      marginTop: '1em',\n    },\n  }),\n  { name: 'QetaQuestionCard' },\n);\n\nexport const QuestionCard = (props: { question: PostResponse }) => {\n  const { question } = props;\n  const navigate = useNavigate();\n  const editQuestionRoute = useRouteRef(editQuestionRouteRef);\n  const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n  const [questionEntity, setQuestionEntity] = useState(question);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n  const { t } = useTranslation();\n  const onCommentAction = (q: PostResponse, _?: AnswerResponse) => {\n    setQuestionEntity(q);\n  };\n  const styles = useStyles();\n\n  const highlightedAnswer = window.location.hash.slice(1) ?? undefined;\n  useEffect(() => {\n    if (highlightedAnswer) {\n      try {\n        const element = document.querySelector(`#${highlightedAnswer}`);\n        if (element) {\n          element.scrollIntoView();\n        }\n      } catch (e) {\n        // NOOP\n      }\n    }\n  }, [highlightedAnswer]);\n\n  return (\n    <>\n      <Card variant=\"outlined\" className={styles.root}>\n        <CardContent>\n          <Grid\n            container\n            spacing={2}\n            justifyContent=\"flex-start\"\n            style={{ flexWrap: 'nowrap' }}\n          >\n            <Grid item>\n              <VoteButtonContainer>\n                <VoteButtons entity={questionEntity} />\n                <FavoriteButton entity={questionEntity} />\n                <LinkButton entity={questionEntity} />\n              </VoteButtonContainer>\n            </Grid>\n            <Grid\n              item\n              className={styles.contentContainer}\n              style={{ flexGrow: '1' }}\n            >\n              <Grid item className={styles.markdownContainer}>\n                <MarkdownRenderer content={questionEntity.content} />\n              </Grid>\n              <Grid\n                container\n                item\n                spacing={1}\n                justifyContent=\"space-between\"\n                alignItems=\"flex-end\"\n                className={styles.metadata}\n              >\n                <Grid item style={{ alignSelf: 'flex-end' }}>\n                  <TagsAndEntities entity={questionEntity} />\n                  {(question.canEdit || question.canDelete) && (\n                    <Box className={styles.buttons}>\n                      {question.canEdit && (\n                        <Button\n                          variant=\"outlined\"\n                          size=\"small\"\n                          startIcon={<EditIcon />}\n                          onClick={() =>\n                            navigate(\n                              editQuestionRoute({\n                                id: question.id.toString(10),\n                              }),\n                            )\n                          }\n                          className=\"qetaQuestionCardEditBtn\"\n                        >\n                          {t('questionPage.editButton')}\n                        </Button>\n                      )}\n                      {question.canDelete && (\n                        <>\n                          <Button\n                            variant=\"outlined\"\n                            size=\"small\"\n                            color=\"secondary\"\n                            onClick={handleDeleteModalOpen}\n                            startIcon={<DeleteIcon />}\n                          >\n                            {t('deleteModal.deleteButton')}\n                          </Button>\n                          <DeleteModal\n                            open={deleteModalOpen}\n                            onClose={handleDeleteModalClose}\n                            entity={questionEntity}\n                          />\n                        </>\n                      )}\n                    </Box>\n                  )}\n                </Grid>\n                <Grid item xs={3}>\n                  <AuthorBox entity={questionEntity} />\n                </Grid>\n              </Grid>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n      <CommentSection post={questionEntity} onCommentAction={onCommentAction} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"QuestionCard.esm.js","sources":["../../../src/components/QuestionCard/QuestionCard.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useEffect, useState } from 'react';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { DeleteModal } from '../DeleteModal/DeleteModal';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport { FavoriteButton } from '../Buttons/FavoriteButton';\nimport { AuthorBox } from '../AuthorBox/AuthorBox';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { CommentSection } from '../CommentSection/CommentSection';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { LinkButton } from '../Buttons/LinkButton';\nimport { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';\nimport { editQuestionRouteRef } from '../../routes';\nimport { useNavigate } from 'react-router-dom';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { VoteButtonContainer } from '../Utility/VoteButtonContainer';\nimport {\n  Box,\n  Button,\n  Card,\n  CardContent,\n  Grid,\n  makeStyles,\n} from '@material-ui/core';\n\nexport type QuestionCardClassKeys =\n  | 'root'\n  | 'contentContainer'\n  | 'markdownContainer'\n  | 'buttons'\n  | 'metadata';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {},\n    contentContainer: {\n      marginLeft: '0.5em',\n      width: 'calc(100% - 70px)',\n    },\n    markdownContainer: {\n      minHeight: '6em',\n      paddingBottom: '0.5em',\n    },\n    buttons: {\n      marginTop: '1em',\n      '& *:not(:last-child)': {\n        marginRight: '0.3em',\n      },\n    },\n    metadata: {\n      marginTop: '1em',\n    },\n  }),\n  { name: 'QetaQuestionCard' },\n);\n\nexport const QuestionCard = (props: { question: PostResponse }) => {\n  const { question } = props;\n  const navigate = useNavigate();\n  const editQuestionRoute = useRouteRef(editQuestionRouteRef);\n  const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n  const [questionEntity, setQuestionEntity] = useState(question);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const onCommentAction = (q: PostResponse, _?: AnswerResponse) => {\n    setQuestionEntity(q);\n  };\n  const styles = useStyles();\n\n  const highlightedAnswer = window.location.hash.slice(1) ?? undefined;\n  useEffect(() => {\n    if (highlightedAnswer) {\n      try {\n        const element = document.querySelector(`#${highlightedAnswer}`);\n        if (element) {\n          element.scrollIntoView();\n        }\n      } catch (e) {\n        // NOOP\n      }\n    }\n  }, [highlightedAnswer]);\n\n  return (\n    <>\n      <Card variant=\"outlined\" className={styles.root}>\n        <CardContent>\n          <Grid\n            container\n            spacing={2}\n            justifyContent=\"flex-start\"\n            style={{ flexWrap: 'nowrap' }}\n          >\n            <Grid item>\n              <VoteButtonContainer>\n                <VoteButtons entity={questionEntity} />\n                <FavoriteButton entity={questionEntity} />\n                <LinkButton entity={questionEntity} />\n              </VoteButtonContainer>\n            </Grid>\n            <Grid\n              item\n              className={styles.contentContainer}\n              style={{ flexGrow: '1' }}\n            >\n              <Grid item className={styles.markdownContainer}>\n                <MarkdownRenderer content={questionEntity.content} />\n              </Grid>\n              <Grid\n                container\n                item\n                spacing={1}\n                justifyContent=\"space-between\"\n                alignItems=\"flex-end\"\n                className={styles.metadata}\n              >\n                <Grid item xs={8}>\n                  <TagsAndEntities entity={questionEntity} />\n                </Grid>\n                <Grid item xs={3}>\n                  <AuthorBox entity={questionEntity} />\n                </Grid>\n                <Grid item xs={12}>\n                  {(question.canEdit || question.canDelete) && (\n                    <Box className={styles.buttons}>\n                      {question.canEdit && (\n                        <Button\n                          variant=\"outlined\"\n                          size=\"small\"\n                          startIcon={<EditIcon />}\n                          onClick={() =>\n                            navigate(\n                              editQuestionRoute({\n                                id: question.id.toString(10),\n                              }),\n                            )\n                          }\n                          className=\"qetaQuestionCardEditBtn\"\n                        >\n                          {t('questionPage.editButton')}\n                        </Button>\n                      )}\n                      {question.canDelete && (\n                        <>\n                          <Button\n                            variant=\"outlined\"\n                            size=\"small\"\n                            color=\"secondary\"\n                            onClick={handleDeleteModalOpen}\n                            startIcon={<DeleteIcon />}\n                          >\n                            {t('deleteModal.deleteButton')}\n                          </Button>\n                          <DeleteModal\n                            open={deleteModalOpen}\n                            onClose={handleDeleteModalClose}\n                            entity={questionEntity}\n                          />\n                        </>\n                      )}\n                    </Box>\n                  )}\n                </Grid>\n              </Grid>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n      <CommentSection post={questionEntity} onCommentAction={onCommentAction} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/SelectTemplateList/SelectTemplateList.esm.js

@@ -1,21 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-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 '@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 { Card, CardHeader, CardContent, List, ListItem, ListItemText, ListItemSecondaryAction, Button } from '@material-ui/core';
 
 const SelectTemplateList = (props) => {
   const { templates, onTemplateSelect } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   if (templates.total === 0) {
     return null;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"SelectTemplateList.esm.js","sources":["../../../src/components/SelectTemplateList/SelectTemplateList.tsx"],"sourcesContent":["import {\n  Template,\n  TemplatesResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation } from '../../hooks';\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  List,\n  ListItem,\n  ListItemSecondaryAction,\n  ListItemText,\n} from '@material-ui/core';\n\nexport const SelectTemplateList = (props: {\n  templates: TemplatesResponse;\n  onTemplateSelect: (template: Template | null) => void;\n}) => {\n  const { templates, onTemplateSelect } = props;\n  const { t } = useTranslation();\n  if (templates.total === 0) {\n    return null;\n  }\n\n  return (\n    <Card>\n      <CardHeader title={t('templateSelectList.title')} />\n      <CardContent>\n        <List style={{ width: '100%' }}>\n          {templates.templates.map((template, index) => (\n            <ListItem key={index}>\n              <ListItemText\n                primary={template.title}\n                secondary={template.description}\n              />\n              <ListItemSecondaryAction>\n                <Button\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  onClick={() => onTemplateSelect(template)}\n                >\n                  {t('templateSelectList.selectButton')}\n                </Button>\n              </ListItemSecondaryAction>\n            </ListItem>\n          ))}\n          <ListItem>\n            <ListItemText\n              primary={t('templateSelectList.genericQuestion')}\n              secondary={t('templateSelectList.genericQuestionDescription')}\n            />\n            <ListItemSecondaryAction>\n              <Button\n                variant=\"outlined\"\n                color=\"primary\"\n                onClick={() => onTemplateSelect(null)}\n              >\n                {t('templateSelectList.selectButton')}\n              </Button>\n            </ListItemSecondaryAction>\n          </ListItem>\n        </List>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAgBa,MAAA,kBAAA,GAAqB,CAAC,KAG7B,KAAA;AACJ,EAAM,MAAA,EAAE,SAAW,EAAA,gBAAA,EAAqB,GAAA,KAAA;AACxC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAI,IAAA,SAAA,CAAU,UAAU,CAAG,EAAA;AACzB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,CAAE,CAAA,0BAA0B,CAAG,EAAA,CAAA;AAAA,oBAClD,GAAA,CAAC,eACC,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,OAAO,EAAE,KAAA,EAAO,QACnB,EAAA,QAAA,EAAA;AAAA,MAAA,SAAA,CAAU,UAAU,GAAI,CAAA,CAAC,QAAU,EAAA,KAAA,0BACjC,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,SAAS,QAAS,CAAA,KAAA;AAAA,YAClB,WAAW,QAAS,CAAA;AAAA;AAAA,SACtB;AAAA,4BACC,uBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,UAAA;AAAA,YACR,KAAM,EAAA,SAAA;AAAA,YACN,OAAA,EAAS,MAAM,gBAAA,CAAiB,QAAQ,CAAA;AAAA,YAEvC,YAAE,iCAAiC;AAAA;AAAA,SAExC,EAAA;AAAA,OAAA,EAAA,EAba,KAcf,CACD,CAAA;AAAA,2BACA,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,EAAE,oCAAoC,CAAA;AAAA,YAC/C,SAAA,EAAW,EAAE,+CAA+C;AAAA;AAAA,SAC9D;AAAA,4BACC,uBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,UAAA;AAAA,YACR,KAAM,EAAA,SAAA;AAAA,YACN,OAAA,EAAS,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAAA,YAEnC,YAAE,iCAAiC;AAAA;AAAA,SAExC,EAAA;AAAA,OACF,EAAA;AAAA,KAAA,EACF,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SelectTemplateList.esm.js","sources":["../../../src/components/SelectTemplateList/SelectTemplateList.tsx"],"sourcesContent":["import {\n  Template,\n  TemplatesResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  List,\n  ListItem,\n  ListItemSecondaryAction,\n  ListItemText,\n} from '@material-ui/core';\n\nexport const SelectTemplateList = (props: {\n  templates: TemplatesResponse;\n  onTemplateSelect: (template: Template | null) => void;\n}) => {\n  const { templates, onTemplateSelect } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  if (templates.total === 0) {\n    return null;\n  }\n\n  return (\n    <Card>\n      <CardHeader title={t('templateSelectList.title')} />\n      <CardContent>\n        <List style={{ width: '100%' }}>\n          {templates.templates.map((template, index) => (\n            <ListItem key={index}>\n              <ListItemText\n                primary={template.title}\n                secondary={template.description}\n              />\n              <ListItemSecondaryAction>\n                <Button\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  onClick={() => onTemplateSelect(template)}\n                >\n                  {t('templateSelectList.selectButton')}\n                </Button>\n              </ListItemSecondaryAction>\n            </ListItem>\n          ))}\n          <ListItem>\n            <ListItemText\n              primary={t('templateSelectList.genericQuestion')}\n              secondary={t('templateSelectList.genericQuestionDescription')}\n            />\n            <ListItemSecondaryAction>\n              <Button\n                variant=\"outlined\"\n                color=\"primary\"\n                onClick={() => onTemplateSelect(null)}\n              >\n                {t('templateSelectList.selectButton')}\n              </Button>\n            </ListItemSecondaryAction>\n          </ListItem>\n        </List>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiBa,MAAA,kBAAA,GAAqB,CAAC,KAG7B,KAAA;AACJ,EAAM,MAAA,EAAE,SAAW,EAAA,gBAAA,EAAqB,GAAA,KAAA;AACxC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAI,IAAA,SAAA,CAAU,UAAU,CAAG,EAAA;AACzB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,4BACG,IACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,CAAE,CAAA,0BAA0B,CAAG,EAAA,CAAA;AAAA,oBAClD,GAAA,CAAC,eACC,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,OAAO,EAAE,KAAA,EAAO,QACnB,EAAA,QAAA,EAAA;AAAA,MAAA,SAAA,CAAU,UAAU,GAAI,CAAA,CAAC,QAAU,EAAA,KAAA,0BACjC,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,SAAS,QAAS,CAAA,KAAA;AAAA,YAClB,WAAW,QAAS,CAAA;AAAA;AAAA,SACtB;AAAA,4BACC,uBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,UAAA;AAAA,YACR,KAAM,EAAA,SAAA;AAAA,YACN,OAAA,EAAS,MAAM,gBAAA,CAAiB,QAAQ,CAAA;AAAA,YAEvC,YAAE,iCAAiC;AAAA;AAAA,SAExC,EAAA;AAAA,OAAA,EAAA,EAba,KAcf,CACD,CAAA;AAAA,2BACA,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,EAAE,oCAAoC,CAAA;AAAA,YAC/C,SAAA,EAAW,EAAE,+CAA+C;AAAA;AAAA,SAC9D;AAAA,4BACC,uBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,UAAA;AAAA,YACR,KAAM,EAAA,SAAA;AAAA,YACN,OAAA,EAAS,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAAA,YAEnC,YAAE,iCAAiC;AAAA;AAAA,SAExC,EAAA;AAAA,OACF,EAAA;AAAA,KAAA,EACF,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/StatsChart/StatsChart.esm.js

@@ -5,17 +5,8 @@ import { makeStyles, createStyles, Typography, ButtonGroup, IconButton } from '@
 import ShowChartIcon from '@material-ui/icons/ShowChart';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import { useIsDarkTheme } from '../../hooks/useIsDarkTheme.esm.js';
-import '@backstage/core-plugin-api';
-import '../../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';
 import { isGlobalStat, isUserStat } from './util.esm.js';
 
 const useStyles = makeStyles(
@@ -281,7 +272,7 @@ const StatsLineChart = (props) => {
   ) });
 };
 const StatsChart = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const [chart, setChart] = useState("line");
   if (!props.data || props.data.length === 0) {
     return /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: t("stats.noStats") });

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

@@ -1 +1 @@
-{"version":3,"file":"StatsChart.esm.js","sources":["../../../src/components/StatsChart/StatsChart.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { Stat } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport {\n  ButtonGroup,\n  createStyles,\n  IconButton,\n  makeStyles,\n  Theme,\n  Typography,\n} from '@material-ui/core';\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\nimport BarChartIcon from '@material-ui/icons/BarChart';\nimport { useIsDarkTheme } from '../../hooks/useIsDarkTheme';\nimport { useTranslation } from '../../hooks';\nimport { isGlobalStat, isUserStat } from './util';\n\nexport type QetaStatsChartClassKey =\n  | 'tooltipLabel'\n  | 'tooltipWrapper'\n  | 'xAxis'\n  | 'lineChart'\n  | 'barChart';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      tooltipLabel: {\n        color: theme.palette.text.primary,\n      },\n      tooltipWrapper: {\n        backgroundColor: `${theme.palette.background.default} !important`,\n        border: 'none !important',\n      },\n      xAxis: {\n        color: `${theme.palette.text.primary} !important`,\n      },\n      lineChart: {},\n      barChart: {},\n    }),\n  { name: 'QetaStatsChart' },\n);\n\ntype StatType = {\n  dataKey:\n    | 'totalViews'\n    | 'totalQuestions'\n    | 'totalAnswers'\n    | 'totalComments'\n    | 'totalVotes'\n    | 'totalUsers'\n    | 'totalTags'\n    | 'totalArticles'\n    | 'totalFollowers';\n  name: string;\n  color: string;\n  enabled: boolean;\n  globalStat: boolean;\n  userStat: boolean;\n};\n\nconst DEFAULT_STATS: StatType[] = [\n  {\n    dataKey: 'totalViews',\n    name: 'Total views',\n    color: '#8884d8',\n    enabled: false,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalQuestions',\n    name: 'Total questions',\n    color: '#82ca9d',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalAnswers',\n    name: 'Total answers',\n    color: '#ff7300',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalComments',\n    name: 'Total comments',\n    color: '#739973',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalVotes',\n    name: 'Total votes',\n    color: '#d88884',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalUsers',\n    name: 'Total users',\n    color: '#ff0000',\n    enabled: true,\n    globalStat: true,\n    userStat: false,\n  },\n  {\n    dataKey: 'totalTags',\n    name: 'Total tags',\n    color: '#ff00ff',\n    enabled: true,\n    globalStat: true,\n    userStat: false,\n  },\n  {\n    dataKey: 'totalArticles',\n    name: 'Total articles',\n    color: '#00ff00',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalFollowers',\n    name: 'Total followers',\n    color: '#ff0000',\n    enabled: true,\n    globalStat: false,\n    userStat: true,\n  },\n];\n\nconst useChartState = (data: Stat[]) => {\n  const styles = useStyles();\n  const isDark = useIsDarkTheme();\n  const globalStats = isGlobalStat(data[0]);\n  const isUserStats = isUserStat(data[0]);\n  const [stats, setStats] = useState<StatType[]>(\n    DEFAULT_STATS.filter(stat => {\n      if (globalStats && !stat.globalStat) {\n        return false;\n      }\n      return !(isUserStats && !stat.userStat);\n    }),\n  );\n\n  const toggleStat = useCallback(\n    (name: string) => {\n      setStats(prev =>\n        prev.map(stat =>\n          stat.name === name ? { ...stat, enabled: !stat.enabled } : stat,\n        ),\n      );\n    },\n    [setStats],\n  );\n  const isDisabled = useCallback(\n    (name: string) => {\n      return stats.find(stat => stat.name === name)?.enabled === false;\n    },\n    [stats],\n  );\n\n  return { styles, isDark, toggleStat, stats, isDisabled };\n};\n\nconst StatsBarChart = (props: { data: Stat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  const localStyles = useStyles();\n  return (\n    <ResponsiveContainer height={400} width=\"100%\">\n      <BarChart\n        data={props.data}\n        width={900}\n        height={300}\n        className={localStyles.barChart}\n      >\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n        />\n        {stats.map(stat => (\n          <Bar\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            fill={stat.color}\n          />\n        ))}\n        <CartesianGrid stroke=\"#ccc\" />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={{ cursor: 'pointer' }}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </BarChart>\n    </ResponsiveContainer>\n  );\n};\n\nconst StatsLineChart = (props: { data: Stat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  const localStyles = useStyles();\n  return (\n    <ResponsiveContainer height={400} width=\"100%\">\n      <LineChart\n        data={props.data}\n        width={900}\n        height={300}\n        className={localStyles.lineChart}\n      >\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n        />\n        {stats.map(stat => (\n          <Line\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            stroke={stat.color}\n          />\n        ))}\n        <CartesianGrid stroke=\"#ccc\" />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={{ cursor: 'pointer' }}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </LineChart>\n    </ResponsiveContainer>\n  );\n};\n\nexport const StatsChart = (props: { data: Stat[] }) => {\n  const { t } = useTranslation();\n  const [chart, setChart] = useState<'line' | 'bar'>('line');\n\n  if (!props.data || props.data.length === 0) {\n    return <Typography variant=\"subtitle1\">{t('stats.noStats')}</Typography>;\n  }\n  const data = props.data\n    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())\n    .map(d => ({ ...d, hidden: 0 }));\n\n  return (\n    <>\n      {chart === 'line' ? (\n        <StatsLineChart data={data} />\n      ) : (\n        <StatsBarChart data={data} />\n      )}\n      <ButtonGroup aria-label=\"Chart type\" style={{ float: 'right' }}>\n        <IconButton\n          aria-label=\"Line chart\"\n          onClick={() => {\n            setChart('line');\n          }}\n        >\n          <ShowChartIcon />\n        </IconButton>\n        <IconButton\n          aria-label=\"Bar chart\"\n          onClick={() => {\n            setChart('bar');\n          }}\n        >\n          <BarChartIcon />\n        </IconButton>\n      </ButtonGroup>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"StatsChart.esm.js","sources":["../../../src/components/StatsChart/StatsChart.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { Stat } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport {\n  ButtonGroup,\n  createStyles,\n  IconButton,\n  makeStyles,\n  Theme,\n  Typography,\n} from '@material-ui/core';\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\nimport BarChartIcon from '@material-ui/icons/BarChart';\nimport { useIsDarkTheme } from '../../hooks/useIsDarkTheme';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { isGlobalStat, isUserStat } from './util';\n\nexport type QetaStatsChartClassKey =\n  | 'tooltipLabel'\n  | 'tooltipWrapper'\n  | 'xAxis'\n  | 'lineChart'\n  | 'barChart';\n\nconst useStyles = makeStyles(\n  (theme: Theme) =>\n    createStyles({\n      tooltipLabel: {\n        color: theme.palette.text.primary,\n      },\n      tooltipWrapper: {\n        backgroundColor: `${theme.palette.background.default} !important`,\n        border: 'none !important',\n      },\n      xAxis: {\n        color: `${theme.palette.text.primary} !important`,\n      },\n      lineChart: {},\n      barChart: {},\n    }),\n  { name: 'QetaStatsChart' },\n);\n\ntype StatType = {\n  dataKey:\n    | 'totalViews'\n    | 'totalQuestions'\n    | 'totalAnswers'\n    | 'totalComments'\n    | 'totalVotes'\n    | 'totalUsers'\n    | 'totalTags'\n    | 'totalArticles'\n    | 'totalFollowers';\n  name: string;\n  color: string;\n  enabled: boolean;\n  globalStat: boolean;\n  userStat: boolean;\n};\n\nconst DEFAULT_STATS: StatType[] = [\n  {\n    dataKey: 'totalViews',\n    name: 'Total views',\n    color: '#8884d8',\n    enabled: false,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalQuestions',\n    name: 'Total questions',\n    color: '#82ca9d',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalAnswers',\n    name: 'Total answers',\n    color: '#ff7300',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalComments',\n    name: 'Total comments',\n    color: '#739973',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalVotes',\n    name: 'Total votes',\n    color: '#d88884',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalUsers',\n    name: 'Total users',\n    color: '#ff0000',\n    enabled: true,\n    globalStat: true,\n    userStat: false,\n  },\n  {\n    dataKey: 'totalTags',\n    name: 'Total tags',\n    color: '#ff00ff',\n    enabled: true,\n    globalStat: true,\n    userStat: false,\n  },\n  {\n    dataKey: 'totalArticles',\n    name: 'Total articles',\n    color: '#00ff00',\n    enabled: true,\n    globalStat: true,\n    userStat: true,\n  },\n  {\n    dataKey: 'totalFollowers',\n    name: 'Total followers',\n    color: '#ff0000',\n    enabled: true,\n    globalStat: false,\n    userStat: true,\n  },\n];\n\nconst useChartState = (data: Stat[]) => {\n  const styles = useStyles();\n  const isDark = useIsDarkTheme();\n  const globalStats = isGlobalStat(data[0]);\n  const isUserStats = isUserStat(data[0]);\n  const [stats, setStats] = useState<StatType[]>(\n    DEFAULT_STATS.filter(stat => {\n      if (globalStats && !stat.globalStat) {\n        return false;\n      }\n      return !(isUserStats && !stat.userStat);\n    }),\n  );\n\n  const toggleStat = useCallback(\n    (name: string) => {\n      setStats(prev =>\n        prev.map(stat =>\n          stat.name === name ? { ...stat, enabled: !stat.enabled } : stat,\n        ),\n      );\n    },\n    [setStats],\n  );\n  const isDisabled = useCallback(\n    (name: string) => {\n      return stats.find(stat => stat.name === name)?.enabled === false;\n    },\n    [stats],\n  );\n\n  return { styles, isDark, toggleStat, stats, isDisabled };\n};\n\nconst StatsBarChart = (props: { data: Stat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  const localStyles = useStyles();\n  return (\n    <ResponsiveContainer height={400} width=\"100%\">\n      <BarChart\n        data={props.data}\n        width={900}\n        height={300}\n        className={localStyles.barChart}\n      >\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n        />\n        {stats.map(stat => (\n          <Bar\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            fill={stat.color}\n          />\n        ))}\n        <CartesianGrid stroke=\"#ccc\" />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={{ cursor: 'pointer' }}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </BarChart>\n    </ResponsiveContainer>\n  );\n};\n\nconst StatsLineChart = (props: { data: Stat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  const localStyles = useStyles();\n  return (\n    <ResponsiveContainer height={400} width=\"100%\">\n      <LineChart\n        data={props.data}\n        width={900}\n        height={300}\n        className={localStyles.lineChart}\n      >\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n        />\n        {stats.map(stat => (\n          <Line\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            stroke={stat.color}\n          />\n        ))}\n        <CartesianGrid stroke=\"#ccc\" />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={{ cursor: 'pointer' }}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </LineChart>\n    </ResponsiveContainer>\n  );\n};\n\nexport const StatsChart = (props: { data: Stat[] }) => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const [chart, setChart] = useState<'line' | 'bar'>('line');\n\n  if (!props.data || props.data.length === 0) {\n    return <Typography variant=\"subtitle1\">{t('stats.noStats')}</Typography>;\n  }\n  const data = props.data\n    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())\n    .map(d => ({ ...d, hidden: 0 }));\n\n  return (\n    <>\n      {chart === 'line' ? (\n        <StatsLineChart data={data} />\n      ) : (\n        <StatsBarChart data={data} />\n      )}\n      <ButtonGroup aria-label=\"Chart type\" style={{ float: 'right' }}>\n        <IconButton\n          aria-label=\"Line chart\"\n          onClick={() => {\n            setChart('line');\n          }}\n        >\n          <ShowChartIcon />\n        </IconButton>\n        <IconButton\n          aria-label=\"Bar chart\"\n          onClick={() => {\n            setChart('bar');\n          }}\n        >\n          <BarChartIcon />\n        </IconButton>\n      </ButtonGroup>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}