@drodil/backstage-plugin-qeta-react 3.49.0 → 3.49.1

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

@@ -10,11 +10,16 @@ const OpenLinkButton = (props) => {
   const { entity, className, style } = props;
   const qetaApi = useApi(qetaApiRef);
   const { t } = useTranslationRef(qetaTranslationRef);
+  if (!entity.url) {
+    return null;
+  }
   const handleClick = (event) => {
     event.stopPropagation();
+    event.preventDefault();
     qetaApi.clickLink(entity.id);
+    window.open(entity.url, "_blank", "noopener,noreferrer");
   };
-  return /* @__PURE__ */ jsx(Tooltip, { title: t("link.open"), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Tooltip, { title: `${t("link.open")}: ${entity.url}`, children: /* @__PURE__ */ jsx(
     IconButton,
     {
       component: "a",

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

@@ -1 +1 @@
-{"version":3,"file":"OpenLinkButton.esm.js","sources":["../../../src/components/Buttons/OpenLinkButton.tsx"],"sourcesContent":["import { PostResponse } 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 OpenLinkIcon from '@material-ui/icons/OpenInNew';\nimport { qetaApiRef } from '../../api.ts';\nimport { useApi } from '@backstage/core-plugin-api';\n\nexport const OpenLinkButton = (props: {\n  entity: PostResponse;\n  className?: string;\n  style?: React.CSSProperties;\n}) => {\n  const { entity, className, style } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    event.stopPropagation();\n    qetaApi.clickLink(entity.id);\n  };\n\n  return (\n    <Tooltip title={t('link.open')}>\n      <IconButton\n        component=\"a\"\n        href={entity.url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        aria-label={t('link.open')}\n        size=\"small\"\n        onClick={handleClick}\n        className={className}\n        style={style}\n      >\n        <OpenLinkIcon />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAQa,MAAA,cAAA,GAAiB,CAAC,KAIzB,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAW,EAAA,KAAA,EAAU,GAAA,KAAA;AACrC,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAM,MAAA,WAAA,GAAc,CAClB,KACG,KAAA;AACH,IAAA,KAAA,CAAM,eAAgB,EAAA;AACtB,IAAQ,OAAA,CAAA,SAAA,CAAU,OAAO,EAAE,CAAA;AAAA,GAC7B;AAEA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,WAAW,CAC3B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,GAAA;AAAA,MACV,MAAM,MAAO,CAAA,GAAA;AAAA,MACb,MAAO,EAAA,QAAA;AAAA,MACP,GAAI,EAAA,qBAAA;AAAA,MACJ,YAAA,EAAY,EAAE,WAAW,CAAA;AAAA,MACzB,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,KAAA;AAAA,MAEA,8BAAC,YAAa,EAAA,EAAA;AAAA;AAAA,GAElB,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OpenLinkButton.esm.js","sources":["../../../src/components/Buttons/OpenLinkButton.tsx"],"sourcesContent":["import { PostResponse } 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 OpenLinkIcon from '@material-ui/icons/OpenInNew';\nimport { qetaApiRef } from '../../api.ts';\nimport { useApi } from '@backstage/core-plugin-api';\n\nexport const OpenLinkButton = (props: {\n  entity: PostResponse;\n  className?: string;\n  style?: React.CSSProperties;\n}) => {\n  const { entity, className, style } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (!entity.url) {\n    return null;\n  }\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    event.stopPropagation();\n    event.preventDefault();\n    qetaApi.clickLink(entity.id);\n    window.open(entity.url, '_blank', 'noopener,noreferrer');\n  };\n\n  return (\n    <Tooltip title={`${t('link.open')}: ${entity.url}`}>\n      <IconButton\n        component=\"a\"\n        href={entity.url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        aria-label={t('link.open')}\n        size=\"small\"\n        onClick={handleClick}\n        className={className}\n        style={style}\n      >\n        <OpenLinkIcon />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAQa,MAAA,cAAA,GAAiB,CAAC,KAIzB,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAW,EAAA,KAAA,EAAU,GAAA,KAAA;AACrC,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAI,IAAA,CAAC,OAAO,GAAK,EAAA;AACf,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,WAAA,GAAc,CAClB,KACG,KAAA;AACH,IAAA,KAAA,CAAM,eAAgB,EAAA;AACtB,IAAA,KAAA,CAAM,cAAe,EAAA;AACrB,IAAQ,OAAA,CAAA,SAAA,CAAU,OAAO,EAAE,CAAA;AAC3B,IAAA,MAAA,CAAO,IAAK,CAAA,MAAA,CAAO,GAAK,EAAA,QAAA,EAAU,qBAAqB,CAAA;AAAA,GACzD;AAEA,EACE,uBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAO,CAAG,EAAA,CAAA,CAAE,WAAW,CAAC,CAAA,EAAA,EAAK,MAAO,CAAA,GAAG,CAC9C,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,GAAA;AAAA,MACV,MAAM,MAAO,CAAA,GAAA;AAAA,MACb,MAAO,EAAA,QAAA;AAAA,MACP,GAAI,EAAA,qBAAA;AAAA,MACJ,YAAA,EAAY,EAAE,WAAW,CAAA;AAAA,MACzB,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,KAAA;AAAA,MAEA,8BAAC,YAAa,EAAA,EAAA;AAAA;AAAA,GAElB,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CollectionsGrid/CollectionsGridItem.esm.js

@@ -1,14 +1,14 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { truncate, removeMarkdownFormatting } from '@drodil/backstage-plugin-qeta-common';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { collectionRouteRef } from '../../routes.esm.js';
 import { makeStyles, Card, CardMedia, Box, CardContent, Typography, Grid } from '@material-ui/core';
 import DOMPurify from 'dompurify';
-import { useNavigate } from 'react-router-dom';
 import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
 import { CollectionFollowButton } from '../Buttons/CollectionFollowButton.esm.js';
+import { ClickableLink } from '../Utility/ClickableLink.esm.js';
 import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
 import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
 import PeopleIcon from '@material-ui/icons/People';
@@ -61,9 +61,8 @@ const CollectionsGridItem = (props) => {
   const classes = useStyles();
   const { t } = useTranslationRef(qetaTranslationRef);
   const collectionRoute = useRouteRef(collectionRouteRef);
-  const navigate = useNavigate();
   const href = collectionRoute({ id: collection.id.toString(10) });
-  return /* @__PURE__ */ jsxs(Card, { className: classes.card, onClick: () => navigate(href), children: [
+  return /* @__PURE__ */ jsx(Card, { className: classes.card, children: /* @__PURE__ */ jsxs(ClickableLink, { href, ariaLabel: collection.title, children: [
     collection.headerImage ? /* @__PURE__ */ jsx(
       CardMedia,
       {
@@ -94,13 +93,12 @@ const CollectionsGridItem = (props) => {
               children: [
                 /* @__PURE__ */ jsx(Typography, { gutterBottom: true, variant: "h6", component: "div", children: collection.title }),
                 /* @__PURE__ */ jsx(
-                  "div",
+                  Box,
                   {
-                    onClick: (e) => e.stopPropagation(),
-                    onKeyPress: () => {
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
                     },
-                    role: "button",
-                    tabIndex: 0,
                     children: /* @__PURE__ */ jsx(CollectionFollowButton, { collection })
                   }
                 )
@@ -172,7 +170,7 @@ const CollectionsGridItem = (props) => {
         ]
       }
     )
-  ] });
+  ] }) });
 };
 
 export { CollectionsGridItem };

package/dist/components/CollectionsGrid/CollectionsGridItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionsGridItem.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGridItem.tsx"],"sourcesContent":["import {\n  Collection,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { collectionRouteRef } from '../../routes';\nimport {\n  Card,\n  CardContent,\n  CardMedia,\n  Grid,\n  Typography,\n  Box,\n  makeStyles,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useNavigate } from 'react-router-dom';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { CollectionFollowButton } from '../Buttons/CollectionFollowButton';\nimport PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport PeopleIcon from '@material-ui/icons/People';\nimport LinkIcon from '@material-ui/icons/Link';\nimport DescriptionIcon from '@material-ui/icons/Description';\n\nexport interface PostsGridItemProps {\n  collection: Collection;\n}\n\nconst useStyles = makeStyles(theme => ({\n  placeholderImage: {\n    height: 140,\n    width: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    background:\n      theme.palette.type === 'dark'\n        ? `linear-gradient(135deg, ${theme.palette.grey[800]} 0%, ${theme.palette.grey[900]} 100%)`\n        : `linear-gradient(135deg, ${theme.palette.grey[200]} 0%, ${theme.palette.grey[300]} 100%)`,\n    color: theme.palette.text.secondary,\n    opacity: 0.8,\n  },\n  card: {\n    height: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    cursor: 'pointer',\n    position: 'relative',\n    '&:hover::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      backgroundColor: 'currentColor',\n      opacity: theme.palette.action.hoverOpacity || 0.04,\n      borderRadius: theme.shape.borderRadius,\n      pointerEvents: 'none',\n    },\n  },\n  statsGrid: {\n    marginTop: 'auto',\n  },\n  statItem: {\n    padding: theme.spacing(1),\n    borderRadius: theme.shape.borderRadius,\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n  },\n}));\n\nexport const CollectionsGridItem = (props: PostsGridItemProps) => {\n  const { collection } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const collectionRoute = useRouteRef(collectionRouteRef);\n  const navigate = useNavigate();\n  const href = collectionRoute({ id: collection.id.toString(10) });\n\n  return (\n    <Card className={classes.card} onClick={() => navigate(href)}>\n      {collection.headerImage ? (\n        <CardMedia\n          component=\"img\"\n          height=\"140\"\n          onError={e => (e.currentTarget.style.display = 'none')}\n          image={collection.headerImage}\n          alt={collection.title}\n          style={{ objectFit: 'cover' }}\n        />\n      ) : (\n        <Box className={classes.placeholderImage}>\n          <PlaylistPlayIcon style={{ fontSize: 60 }} />\n        </Box>\n      )}\n      <CardContent\n        style={{\n          paddingBottom: '0.5rem',\n          flexGrow: 1,\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"space-between\"\n          alignItems=\"flex-start\"\n        >\n          <Typography gutterBottom variant=\"h6\" component=\"div\">\n            {collection.title}\n          </Typography>\n          <div\n            onClick={e => e.stopPropagation()}\n            onKeyPress={() => {}}\n            role=\"button\"\n            tabIndex={0}\n          >\n            <CollectionFollowButton collection={collection} />\n          </div>\n        </Box>\n        {collection.description && (\n          <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n            {DOMPurify.sanitize(\n              truncate(removeMarkdownFormatting(collection.description), 200),\n            )}\n          </Typography>\n        )}\n        <Box mt={2}>\n          <TagsAndEntities entity={collection} />\n        </Box>\n        <Grid container spacing={1} className={classes.statsGrid}>\n          <Grid item xs={3}>\n            <Box\n              display=\"flex\"\n              flexDirection=\"column\"\n              alignItems=\"center\"\n              className={classes.statItem}\n            >\n              <QuestionAnswerIcon fontSize=\"small\" color=\"disabled\" />\n              <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                {collection.questionsCount}\n              </Typography>\n              <Typography variant=\"caption\" color=\"textSecondary\">\n                {t('common.questions')}\n              </Typography>\n            </Box>\n          </Grid>\n          <Grid item xs={3}>\n            <Box\n              display=\"flex\"\n              flexDirection=\"column\"\n              alignItems=\"center\"\n              className={classes.statItem}\n            >\n              <DescriptionIcon fontSize=\"small\" color=\"disabled\" />\n              <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                {collection.articlesCount}\n              </Typography>\n              <Typography variant=\"caption\" color=\"textSecondary\">\n                {t('common.articles')}\n              </Typography>\n            </Box>\n          </Grid>\n          <Grid item xs={3}>\n            <Box\n              display=\"flex\"\n              flexDirection=\"column\"\n              alignItems=\"center\"\n              className={classes.statItem}\n            >\n              <LinkIcon fontSize=\"small\" color=\"disabled\" />\n              <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                {collection.linksCount}\n              </Typography>\n              <Typography variant=\"caption\" color=\"textSecondary\">\n                {t('common.links')}\n              </Typography>\n            </Box>\n          </Grid>\n          <Grid item xs={3}>\n            <Box\n              display=\"flex\"\n              flexDirection=\"column\"\n              alignItems=\"center\"\n              className={classes.statItem}\n            >\n              <PeopleIcon fontSize=\"small\" color=\"disabled\" />\n              <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                {collection.followers}\n              </Typography>\n              <Typography variant=\"caption\" color=\"textSecondary\">\n                {t('common.followersPlain')}\n              </Typography>\n            </Box>\n          </Grid>\n        </Grid>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CollectionsGridItem.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGridItem.tsx"],"sourcesContent":["import {\n  Collection,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { collectionRouteRef } from '../../routes';\nimport {\n  Box,\n  Card,\n  CardContent,\n  CardMedia,\n  Grid,\n  makeStyles,\n  Typography,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { CollectionFollowButton } from '../Buttons/CollectionFollowButton';\nimport { ClickableLink } from '../Utility/ClickableLink';\nimport PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport PeopleIcon from '@material-ui/icons/People';\nimport LinkIcon from '@material-ui/icons/Link';\nimport DescriptionIcon from '@material-ui/icons/Description';\n\nexport interface PostsGridItemProps {\n  collection: Collection;\n}\n\nconst useStyles = makeStyles(theme => ({\n  placeholderImage: {\n    height: 140,\n    width: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    background:\n      theme.palette.type === 'dark'\n        ? `linear-gradient(135deg, ${theme.palette.grey[800]} 0%, ${theme.palette.grey[900]} 100%)`\n        : `linear-gradient(135deg, ${theme.palette.grey[200]} 0%, ${theme.palette.grey[300]} 100%)`,\n    color: theme.palette.text.secondary,\n    opacity: 0.8,\n  },\n  card: {\n    height: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    cursor: 'pointer',\n    position: 'relative',\n    '&:hover::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      backgroundColor: 'currentColor',\n      opacity: theme.palette.action.hoverOpacity || 0.04,\n      borderRadius: theme.shape.borderRadius,\n      pointerEvents: 'none',\n    },\n  },\n  statsGrid: {\n    marginTop: 'auto',\n  },\n  statItem: {\n    padding: theme.spacing(1),\n    borderRadius: theme.shape.borderRadius,\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n  },\n}));\n\nexport const CollectionsGridItem = (props: PostsGridItemProps) => {\n  const { collection } = props;\n  const classes = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const collectionRoute = useRouteRef(collectionRouteRef);\n  const href = collectionRoute({ id: collection.id.toString(10) });\n\n  return (\n    <Card className={classes.card}>\n      <ClickableLink href={href} ariaLabel={collection.title}>\n        {collection.headerImage ? (\n          <CardMedia\n            component=\"img\"\n            height=\"140\"\n            onError={e => (e.currentTarget.style.display = 'none')}\n            image={collection.headerImage}\n            alt={collection.title}\n            style={{ objectFit: 'cover' }}\n          />\n        ) : (\n          <Box className={classes.placeholderImage}>\n            <PlaylistPlayIcon style={{ fontSize: 60 }} />\n          </Box>\n        )}\n        <CardContent\n          style={{\n            paddingBottom: '0.5rem',\n            flexGrow: 1,\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            justifyContent=\"space-between\"\n            alignItems=\"flex-start\"\n          >\n            <Typography gutterBottom variant=\"h6\" component=\"div\">\n              {collection.title}\n            </Typography>\n            <Box\n              onClick={e => {\n                e.preventDefault();\n                e.stopPropagation();\n              }}\n            >\n              <CollectionFollowButton collection={collection} />\n            </Box>\n          </Box>\n          {collection.description && (\n            <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n              {DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(collection.description), 200),\n              )}\n            </Typography>\n          )}\n          <Box mt={2}>\n            <TagsAndEntities entity={collection} />\n          </Box>\n          <Grid container spacing={1} className={classes.statsGrid}>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={classes.statItem}\n              >\n                <QuestionAnswerIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {collection.questionsCount}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.questions')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={classes.statItem}\n              >\n                <DescriptionIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {collection.articlesCount}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.articles')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={classes.statItem}\n              >\n                <LinkIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {collection.linksCount}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.links')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={classes.statItem}\n              >\n                <PeopleIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {collection.followers}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.followersPlain')}\n                </Typography>\n              </Box>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </ClickableLink>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/EntitiesGrid/EntitiesGridItem.esm.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { EntityFollowButton } from '../Buttons/EntityFollowButton.esm.js';
 import { makeStyles, Grid, Card, Box, Avatar, Tooltip, Typography, CardContent } from '@material-ui/core';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import { useNavigate } from 'react-router-dom';
 import { useEntityPresentation } from '@backstage/plugin-catalog-react';
 import { entityRouteRef } from '../../routes.esm.js';
 import { parseEntityRef } from '@backstage/catalog-model';
@@ -13,6 +12,7 @@ import PeopleIcon from '@material-ui/icons/People';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
 import useGridItemStyles from '../GridItemStyles/useGridItemStyles.esm.js';
+import { ClickableLink } from '../Utility/ClickableLink.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   statsGrid: {
@@ -35,99 +35,99 @@ const EntitiesGridItem = (props) => {
   const classes = useGridItemStyles();
   const localClasses = useStyles();
   const entityRoute = useRouteRef(entityRouteRef);
-  const navigate = useNavigate();
   const { t } = useTranslationRef(qetaTranslationRef);
   const compound = parseEntityRef(entity.entityRef);
   const { primaryTitle, Icon, secondaryTitle } = useEntityPresentation(compound);
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, xl: 4, children: /* @__PURE__ */ jsxs(
-    Card,
-    {
-      className: classes.card,
-      style: { cursor: "pointer" },
-      onClick: () => navigate(entityRoute({ entityRef: entity.entityRef })),
-      children: [
-        /* @__PURE__ */ jsxs(Box, { className: classes.cardHeader, display: "flex", alignItems: "center", children: [
+  const href = entityRoute({ entityRef: entity.entityRef });
+  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, xl: 4, children: /* @__PURE__ */ jsx(Card, { className: classes.card, children: /* @__PURE__ */ jsxs(ClickableLink, { href, ariaLabel: primaryTitle, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: classes.cardHeader,
+        display: "flex",
+        alignItems: "center",
+        children: [
           Icon && /* @__PURE__ */ jsx(Avatar, { style: { marginRight: 16 }, children: /* @__PURE__ */ jsx(Icon, {}) }),
           /* @__PURE__ */ jsx(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", noWrap: true, children: primaryTitle }) }) }),
-          /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(
-            "div",
+          /* @__PURE__ */ jsx(
+            Box,
             {
-              onClick: (e) => e.stopPropagation(),
-              onKeyPress: () => {
+              flexShrink: 0,
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
               },
-              role: "button",
-              tabIndex: 0,
               children: /* @__PURE__ */ jsx(EntityFollowButton, { entityRef: entity.entityRef })
             }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CardContent,
+      {
+        className: `${classes.cardContent} ${localClasses.flexColumn}`,
+        children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, className: localClasses.statsGrid, children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              className: localClasses.statItem,
+              children: [
+                /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small", color: "disabled" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.questionsCount }),
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.questions", {}) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              className: localClasses.statItem,
+              children: [
+                /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small", color: "disabled" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.articlesCount }),
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.articles", {}) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              className: localClasses.statItem,
+              children: [
+                /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small", color: "disabled" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.linksCount }),
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.links", {}) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              className: localClasses.statItem,
+              children: [
+                /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small", color: "disabled" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.followerCount }),
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.followers", {}) })
+              ]
+            }
           ) })
-        ] }),
-        /* @__PURE__ */ jsx(
-          CardContent,
-          {
-            className: `${classes.cardContent} ${localClasses.flexColumn}`,
-            children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, className: localClasses.statsGrid, children: [
-              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  className: localClasses.statItem,
-                  children: [
-                    /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small", color: "disabled" }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.questionsCount }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.questions", {}) })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  className: localClasses.statItem,
-                  children: [
-                    /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small", color: "disabled" }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.articlesCount }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.articles", {}) })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  className: localClasses.statItem,
-                  children: [
-                    /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small", color: "disabled" }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.linksCount }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.links", {}) })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  className: localClasses.statItem,
-                  children: [
-                    /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small", color: "disabled" }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.followerCount }),
-                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.followers", {}) })
-                  ]
-                }
-              ) })
-            ] })
-          }
-        )
-      ]
-    }
-  ) });
+        ] })
+      }
+    )
+  ] }) }) });
 };
 
 export { EntitiesGridItem };

package/dist/components/EntitiesGrid/EntitiesGridItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntitiesGridItem.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridItem.tsx"],"sourcesContent":["import { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { EntityFollowButton } from '../Buttons/EntityFollowButton';\nimport {\n  Avatar,\n  Card,\n  CardContent,\n  Grid,\n  Tooltip,\n  Typography,\n  Box,\n  makeStyles,\n} from '@material-ui/core';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\n\nimport LinkIcon from '@material-ui/icons/Link';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport PeopleIcon from '@material-ui/icons/People';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\n\nconst useStyles = makeStyles(theme => ({\n  statsGrid: {\n    marginTop: 'auto',\n  },\n  statItem: {\n    padding: theme.spacing(1),\n    borderRadius: theme.shape.borderRadius,\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n  },\n  flexColumn: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n}));\n\nexport const EntitiesGridItem = (props: { entity: EntityResponse }) => {\n  const { entity } = props;\n  const classes = useGridItemStyles();\n  const localClasses = useStyles();\n  const entityRoute = useRouteRef(entityRouteRef);\n  const navigate = useNavigate();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const compound = parseEntityRef(entity.entityRef);\n  const { primaryTitle, Icon, secondaryTitle } =\n    useEntityPresentation(compound);\n\n  return (\n    <Grid item xs={12} sm={6} md={6} xl={4}>\n      <Card\n        className={classes.card}\n        style={{ cursor: 'pointer' }}\n        onClick={() => navigate(entityRoute({ entityRef: entity.entityRef }))}\n      >\n        <Box className={classes.cardHeader} display=\"flex\" alignItems=\"center\">\n          {Icon && (\n            <Avatar style={{ marginRight: 16 }}>\n              <Icon />\n            </Avatar>\n          )}\n          <Box flex={1} minWidth={0}>\n            <Tooltip title={secondaryTitle ?? ''} arrow>\n              <Typography variant=\"h6\" noWrap>\n                {primaryTitle}\n              </Typography>\n            </Tooltip>\n          </Box>\n          <Box flexShrink={0}>\n            <div\n              onClick={e => e.stopPropagation()}\n              onKeyPress={() => {}}\n              role=\"button\"\n              tabIndex={0}\n            >\n              <EntityFollowButton entityRef={entity.entityRef} />\n            </div>\n          </Box>\n        </Box>\n        <CardContent\n          className={`${classes.cardContent} ${localClasses.flexColumn}`}\n        >\n          <Grid container spacing={1} className={localClasses.statsGrid}>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <QuestionAnswerIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {entity.questionsCount}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('stats.questions', {})}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <DescriptionIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {entity.articlesCount}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('stats.articles', {})}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <LinkIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {entity.linksCount}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('stats.links', {})}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <PeopleIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {entity.followerCount}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('stats.followers', {})}\n                </Typography>\n              </Box>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,SAAW,EAAA;AAAA,IACT,SAAW,EAAA;AAAA,GACb;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,YAAA,EAAc,MAAM,KAAM,CAAA,YAAA;AAAA,IAC1B,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA,MAAA;AAAA,IACR,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,UAAY,EAAA;AAAA,IACV,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA;AAAA;AAEnB,CAAE,CAAA,CAAA;AAEW,MAAA,gBAAA,GAAmB,CAAC,KAAsC,KAAA;AACrE,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,EAAA,MAAM,UAAU,iBAAkB,EAAA;AAClC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAM,MAAA,WAAA,GAAc,YAAY,cAAc,CAAA;AAC9C,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAM,MAAA,QAAA,GAAW,cAAe,CAAA,MAAA,CAAO,SAAS,CAAA;AAChD,EAAA,MAAM,EAAE,YAAc,EAAA,IAAA,EAAM,cAAe,EAAA,GACzC,sBAAsB,QAAQ,CAAA;AAEhC,EACE,uBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EAAI,EAAA,EAAA,EAAI,CAAG,EAAA,EAAA,EAAI,CAAG,EAAA,EAAA,EAAI,CACnC,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,IAAA;AAAA,MACnB,KAAA,EAAO,EAAE,MAAA,EAAQ,SAAU,EAAA;AAAA,MAC3B,OAAA,EAAS,MAAM,QAAS,CAAA,WAAA,CAAY,EAAE,SAAW,EAAA,MAAA,CAAO,SAAU,EAAC,CAAC,CAAA;AAAA,MAEpE,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,YAAY,OAAQ,EAAA,MAAA,EAAO,YAAW,QAC3D,EAAA,QAAA,EAAA;AAAA,UACC,IAAA,oBAAA,GAAA,CAAC,UAAO,KAAO,EAAA,EAAE,aAAa,EAAG,EAAA,EAC/B,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,CACR,EAAA,CAAA;AAAA,0BAEF,GAAA,CAAC,OAAI,IAAM,EAAA,CAAA,EAAG,UAAU,CACtB,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,cAAA,IAAkB,IAAI,KAAK,EAAA,IAAA,EACzC,8BAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,MAAK,MAAM,EAAA,IAAA,EAC5B,QACH,EAAA,YAAA,EAAA,CAAA,EACF,CACF,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,GAAI,EAAA,EAAA,UAAA,EAAY,CACf,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,CAAK,CAAA,KAAA,CAAA,CAAE,eAAgB,EAAA;AAAA,cAChC,YAAY,MAAM;AAAA,eAAC;AAAA,cACnB,IAAK,EAAA,QAAA;AAAA,cACL,QAAU,EAAA,CAAA;AAAA,cAEV,QAAC,kBAAA,GAAA,CAAA,kBAAA,EAAA,EAAmB,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA;AAAA,WAErD,EAAA;AAAA,SACF,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,WAAW,CAAG,EAAA,OAAA,CAAQ,WAAW,CAAA,CAAA,EAAI,aAAa,UAAU,CAAA,CAAA;AAAA,YAE5D,QAAA,kBAAA,IAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CAAG,EAAA,SAAA,EAAW,aAAa,SAClD,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,CACb,EAAA,QAAA,kBAAA,IAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,OAAQ,EAAA,MAAA;AAAA,kBACR,aAAc,EAAA,QAAA;AAAA,kBACd,UAAW,EAAA,QAAA;AAAA,kBACX,WAAW,YAAa,CAAA,QAAA;AAAA,kBAExB,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,kBAAmB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,KAAA,EAAM,UAAW,EAAA,CAAA;AAAA,oCACtD,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,KAAA,EAAO,EAAE,UAAY,EAAA,GAAA,EAC9C,EAAA,QAAA,EAAA,MAAA,CAAO,cACV,EAAA,CAAA;AAAA,oCACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAM,iBACjC,QAAE,EAAA,CAAA,CAAA,iBAAA,EAAmB,EAAE,CAC1B,EAAA;AAAA;AAAA;AAAA,eAEJ,EAAA,CAAA;AAAA,8BACC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,QAAA,kBAAA,IAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,OAAQ,EAAA,MAAA;AAAA,kBACR,aAAc,EAAA,QAAA;AAAA,kBACd,UAAW,EAAA,QAAA;AAAA,kBACX,WAAW,YAAa,CAAA,QAAA;AAAA,kBAExB,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,KAAA,EAAM,UAAW,EAAA,CAAA;AAAA,oCACnD,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,KAAA,EAAO,EAAE,UAAY,EAAA,GAAA,EAC9C,EAAA,QAAA,EAAA,MAAA,CAAO,aACV,EAAA,CAAA;AAAA,oCACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAM,iBACjC,QAAE,EAAA,CAAA,CAAA,gBAAA,EAAkB,EAAE,CACzB,EAAA;AAAA;AAAA;AAAA,eAEJ,EAAA,CAAA;AAAA,8BACC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,QAAA,kBAAA,IAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,OAAQ,EAAA,MAAA;AAAA,kBACR,aAAc,EAAA,QAAA;AAAA,kBACd,UAAW,EAAA,QAAA;AAAA,kBACX,WAAW,YAAa,CAAA,QAAA;AAAA,kBAExB,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,QAAS,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,KAAA,EAAM,UAAW,EAAA,CAAA;AAAA,oCAC5C,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,KAAA,EAAO,EAAE,UAAY,EAAA,GAAA,EAC9C,EAAA,QAAA,EAAA,MAAA,CAAO,UACV,EAAA,CAAA;AAAA,oCACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAM,iBACjC,QAAE,EAAA,CAAA,CAAA,aAAA,EAAe,EAAE,CACtB,EAAA;AAAA;AAAA;AAAA,eAEJ,EAAA,CAAA;AAAA,8BACC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,QAAA,kBAAA,IAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,OAAQ,EAAA,MAAA;AAAA,kBACR,aAAc,EAAA,QAAA;AAAA,kBACd,UAAW,EAAA,QAAA;AAAA,kBACX,WAAW,YAAa,CAAA,QAAA;AAAA,kBAExB,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,UAAW,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,KAAA,EAAM,UAAW,EAAA,CAAA;AAAA,oCAC9C,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,KAAA,EAAO,EAAE,UAAY,EAAA,GAAA,EAC9C,EAAA,QAAA,EAAA,MAAA,CAAO,aACV,EAAA,CAAA;AAAA,oCACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAM,iBACjC,QAAE,EAAA,CAAA,CAAA,iBAAA,EAAmB,EAAE,CAC1B,EAAA;AAAA;AAAA;AAAA,eAEJ,EAAA;AAAA,aACF,EAAA;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EntitiesGridItem.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridItem.tsx"],"sourcesContent":["import { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { EntityFollowButton } from '../Buttons/EntityFollowButton';\nimport {\n  Avatar,\n  Box,\n  Card,\n  CardContent,\n  Grid,\n  makeStyles,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\n\nimport LinkIcon from '@material-ui/icons/Link';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport PeopleIcon from '@material-ui/icons/People';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\nimport { ClickableLink } from '../Utility/ClickableLink';\n\nconst useStyles = makeStyles(theme => ({\n  statsGrid: {\n    marginTop: 'auto',\n  },\n  statItem: {\n    padding: theme.spacing(1),\n    borderRadius: theme.shape.borderRadius,\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n  },\n  flexColumn: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n}));\n\nexport const EntitiesGridItem = (props: { entity: EntityResponse }) => {\n  const { entity } = props;\n  const classes = useGridItemStyles();\n  const localClasses = useStyles();\n  const entityRoute = useRouteRef(entityRouteRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const compound = parseEntityRef(entity.entityRef);\n  const { primaryTitle, Icon, secondaryTitle } =\n    useEntityPresentation(compound);\n\n  const href = entityRoute({ entityRef: entity.entityRef });\n\n  return (\n    <Grid item xs={12} sm={6} md={6} xl={4}>\n      <Card className={classes.card}>\n        <ClickableLink href={href} ariaLabel={primaryTitle}>\n          <Box\n            className={classes.cardHeader}\n            display=\"flex\"\n            alignItems=\"center\"\n          >\n            {Icon && (\n              <Avatar style={{ marginRight: 16 }}>\n                <Icon />\n              </Avatar>\n            )}\n            <Box flex={1} minWidth={0}>\n              <Tooltip title={secondaryTitle ?? ''} arrow>\n                <Typography variant=\"h6\" noWrap>\n                  {primaryTitle}\n                </Typography>\n              </Tooltip>\n            </Box>\n            <Box\n              flexShrink={0}\n              onClick={e => {\n                e.preventDefault();\n                e.stopPropagation();\n              }}\n            >\n              <EntityFollowButton entityRef={entity.entityRef} />\n            </Box>\n          </Box>\n          <CardContent\n            className={`${classes.cardContent} ${localClasses.flexColumn}`}\n          >\n            <Grid container spacing={1} className={localClasses.statsGrid}>\n              <Grid item xs={3}>\n                <Box\n                  display=\"flex\"\n                  flexDirection=\"column\"\n                  alignItems=\"center\"\n                  className={localClasses.statItem}\n                >\n                  <QuestionAnswerIcon fontSize=\"small\" color=\"disabled\" />\n                  <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                    {entity.questionsCount}\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"textSecondary\">\n                    {t('stats.questions', {})}\n                  </Typography>\n                </Box>\n              </Grid>\n              <Grid item xs={3}>\n                <Box\n                  display=\"flex\"\n                  flexDirection=\"column\"\n                  alignItems=\"center\"\n                  className={localClasses.statItem}\n                >\n                  <DescriptionIcon fontSize=\"small\" color=\"disabled\" />\n                  <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                    {entity.articlesCount}\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"textSecondary\">\n                    {t('stats.articles', {})}\n                  </Typography>\n                </Box>\n              </Grid>\n              <Grid item xs={3}>\n                <Box\n                  display=\"flex\"\n                  flexDirection=\"column\"\n                  alignItems=\"center\"\n                  className={localClasses.statItem}\n                >\n                  <LinkIcon fontSize=\"small\" color=\"disabled\" />\n                  <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                    {entity.linksCount}\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"textSecondary\">\n                    {t('stats.links', {})}\n                  </Typography>\n                </Box>\n              </Grid>\n              <Grid item xs={3}>\n                <Box\n                  display=\"flex\"\n                  flexDirection=\"column\"\n                  alignItems=\"center\"\n                  className={localClasses.statItem}\n                >\n                  <PeopleIcon fontSize=\"small\" color=\"disabled\" />\n                  <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                    {entity.followerCount}\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"textSecondary\">\n                    {t('stats.followers', {})}\n                  </Typography>\n                </Box>\n              </Grid>\n            </Grid>\n          </CardContent>\n        </ClickableLink>\n      </Card>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/FollowedLists/FollowedCollectionsList.esm.js

@@ -5,7 +5,7 @@ import { useCollectionsFollow } from '../../hooks/useCollectionsFollow.esm.js';
 import { RightListContainer, RightList } from '../Utility/RightList.esm.js';
 import { makeStyles, ListItem, Box, Tooltip, ListItemText } from '@material-ui/core';
 import PlaylistPlayOutlined from '@material-ui/icons/PlaylistPlayOutlined';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { collectionRouteRef } from '../../routes.esm.js';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
@@ -17,6 +17,8 @@ const useStyles = makeStyles((theme) => ({
     minHeight: 28,
     cursor: "pointer",
     transition: "background 0.2s",
+    textDecoration: "none",
+    color: "inherit",
     "&:hover": {
       background: theme.palette.action.hover
     }
@@ -45,31 +47,34 @@ const FollowedCollectionsList = () => {
   const collections = useCollectionsFollow();
   const { t } = useTranslationRef(qetaTranslationRef);
   const classes = useStyles();
-  const navigate = useNavigate();
   const collectionRoute = useRouteRef(collectionRouteRef);
   if (collections.collections.length === 0 || collections.loading) {
     return null;
   }
-  return /* @__PURE__ */ jsx(RightListContainer, { children: /* @__PURE__ */ jsx(RightList, { title: t("rightMenu.followedCollections"), children: collections.collections.map((collection) => /* @__PURE__ */ jsxs(
-    ListItem,
-    {
-      dense: true,
-      button: true,
-      className: classes.listItem,
-      onClick: () => navigate(collectionRoute({ id: collection.id.toString(10) })),
-      children: [
-        /* @__PURE__ */ jsx(Box, { className: classes.iconBox, children: /* @__PURE__ */ jsx(PlaylistPlayOutlined, { fontSize: "small" }) }),
-        /* @__PURE__ */ jsx(Tooltip, { title: collection.title, arrow: true, children: /* @__PURE__ */ jsx(
-          ListItemText,
-          {
-            primary: collection.title,
-            classes: { primary: classes.listItemText }
-          }
-        ) })
-      ]
-    },
-    collection.id
-  )) }) });
+  return /* @__PURE__ */ jsx(RightListContainer, { children: /* @__PURE__ */ jsx(RightList, { title: t("rightMenu.followedCollections"), children: collections.collections.map((collection) => {
+    const href = collectionRoute({ id: collection.id.toString(10) });
+    return /* @__PURE__ */ jsxs(
+      ListItem,
+      {
+        dense: true,
+        button: true,
+        className: classes.listItem,
+        component: Link,
+        to: href,
+        children: [
+          /* @__PURE__ */ jsx(Box, { className: classes.iconBox, children: /* @__PURE__ */ jsx(PlaylistPlayOutlined, { fontSize: "small" }) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: collection.title, arrow: true, children: /* @__PURE__ */ jsx(
+            ListItemText,
+            {
+              primary: collection.title,
+              classes: { primary: classes.listItemText }
+            }
+          ) })
+        ]
+      },
+      collection.id
+    );
+  }) }) });
 };
 
 export { FollowedCollectionsList };

package/dist/components/FollowedLists/FollowedCollectionsList.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FollowedCollectionsList.esm.js","sources":["../../../src/components/FollowedLists/FollowedCollectionsList.tsx"],"sourcesContent":["import { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\nimport { useCollectionsFollow } from '../../hooks/useCollectionsFollow';\nimport { RightList, RightListContainer } from '../Utility/RightList';\nimport {\n  Box,\n  ListItem,\n  ListItemText,\n  makeStyles,\n  Tooltip,\n} from '@material-ui/core';\nimport PlaylistPlayOutlined from '@material-ui/icons/PlaylistPlayOutlined';\nimport { useNavigate } from 'react-router-dom';\nimport { collectionRouteRef } from '../../routes';\nimport { useRouteRef } from '@backstage/core-plugin-api';\n\nconst useStyles = makeStyles(theme => ({\n  listItem: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: '0 4px',\n    minHeight: 28,\n    cursor: 'pointer',\n    transition: 'background 0.2s',\n    '&:hover': {\n      background: theme.palette.action.hover,\n    },\n  },\n  listItemText: {\n    color: theme.palette.text.primary,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    flex: 1,\n  },\n  iconBox: {\n    minWidth: 28,\n    maxWidth: 28,\n    height: 24,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 4,\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(0.5),\n    color: theme.palette.text.secondary,\n  },\n}));\n\nexport const FollowedCollectionsList = () => {\n  const collections = useCollectionsFollow();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const classes = useStyles();\n  const navigate = useNavigate();\n  const collectionRoute = useRouteRef(collectionRouteRef);\n\n  if (collections.collections.length === 0 || collections.loading) {\n    return null;\n  }\n\n  return (\n    <RightListContainer>\n      <RightList title={t('rightMenu.followedCollections')}>\n        {collections.collections.map(collection => (\n          <ListItem\n            key={collection.id}\n            dense\n            button\n            className={classes.listItem}\n            onClick={() =>\n              navigate(collectionRoute({ id: collection.id.toString(10) }))\n            }\n          >\n            <Box className={classes.iconBox}>\n              <PlaylistPlayOutlined fontSize=\"small\" />\n            </Box>\n            <Tooltip title={collection.title} arrow>\n              <ListItemText\n                primary={collection.title}\n                classes={{ primary: classes.listItemText }}\n              />\n            </Tooltip>\n          </ListItem>\n        ))}\n      </RightList>\n    </RightListContainer>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FollowedCollectionsList.esm.js","sources":["../../../src/components/FollowedLists/FollowedCollectionsList.tsx"],"sourcesContent":["import { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\nimport { useCollectionsFollow } from '../../hooks/useCollectionsFollow';\nimport { RightList, RightListContainer } from '../Utility/RightList';\nimport {\n  Box,\n  ListItem,\n  ListItemText,\n  makeStyles,\n  Tooltip,\n} from '@material-ui/core';\nimport PlaylistPlayOutlined from '@material-ui/icons/PlaylistPlayOutlined';\nimport { Link } from 'react-router-dom';\nimport { collectionRouteRef } from '../../routes';\nimport { useRouteRef } from '@backstage/core-plugin-api';\n\nconst useStyles = makeStyles(theme => ({\n  listItem: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: '0 4px',\n    minHeight: 28,\n    cursor: 'pointer',\n    transition: 'background 0.2s',\n    textDecoration: 'none',\n    color: 'inherit',\n    '&:hover': {\n      background: theme.palette.action.hover,\n    },\n  },\n  listItemText: {\n    color: theme.palette.text.primary,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    flex: 1,\n  },\n  iconBox: {\n    minWidth: 28,\n    maxWidth: 28,\n    height: 24,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 4,\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(0.5),\n    color: theme.palette.text.secondary,\n  },\n}));\n\nexport const FollowedCollectionsList = () => {\n  const collections = useCollectionsFollow();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const classes = useStyles();\n  const collectionRoute = useRouteRef(collectionRouteRef);\n\n  if (collections.collections.length === 0 || collections.loading) {\n    return null;\n  }\n\n  return (\n    <RightListContainer>\n      <RightList title={t('rightMenu.followedCollections')}>\n        {collections.collections.map(collection => {\n          const href = collectionRoute({ id: collection.id.toString(10) });\n          return (\n            <ListItem\n              key={collection.id}\n              dense\n              button\n              className={classes.listItem}\n              component={Link}\n              to={href}\n            >\n              <Box className={classes.iconBox}>\n                <PlaylistPlayOutlined fontSize=\"small\" />\n              </Box>\n              <Tooltip title={collection.title} arrow>\n                <ListItemText\n                  primary={collection.title}\n                  classes={{ primary: classes.listItemText }}\n                />\n              </Tooltip>\n            </ListItem>\n          );\n        })}\n      </RightList>\n    </RightListContainer>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/FollowedLists/FollowedEntitiesList.esm.js

@@ -15,7 +15,7 @@ import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
 import { RightListContainer, RightList } from '../Utility/RightList.esm.js';
 import { makeStyles, ListItem, Box, Tooltip, ListItemText } from '@material-ui/core';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { entityRouteRef } from '../../routes.esm.js';
 
 const useStyles = makeStyles((theme) => ({
@@ -26,6 +26,8 @@ const useStyles = makeStyles((theme) => ({
     minHeight: 28,
     cursor: "pointer",
     transition: "background 0.2s",
+    textDecoration: "none",
+    color: "inherit",
     "&:hover": {
       background: theme.palette.action.hover
     }
@@ -52,16 +54,17 @@ const useStyles = makeStyles((theme) => ({
 }));
 const FollowedEntityItem = ({ entityRef }) => {
   const classes = useStyles();
-  const navigate = useNavigate();
   const entityRoute = useRouteRef(entityRouteRef);
   const { primaryTitle, Icon } = useEntityPresentation(entityRef);
+  const href = entityRoute({ entityRef });
   return /* @__PURE__ */ jsxs(
     ListItem,
     {
       dense: true,
       button: true,
       className: classes.listItem,
-      onClick: () => navigate(entityRoute({ entityRef })),
+      component: Link,
+      to: href,
       children: [
         /* @__PURE__ */ jsx(Box, { className: classes.iconBox, children: Icon ? /* @__PURE__ */ jsx(Icon, { fontSize: "small" }) : null }),
         /* @__PURE__ */ jsx(Tooltip, { title: primaryTitle ?? entityRef, arrow: true, children: /* @__PURE__ */ jsx(

package/dist/components/FollowedLists/FollowedEntitiesList.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FollowedEntitiesList.esm.js","sources":["../../../src/components/FollowedLists/FollowedEntitiesList.tsx"],"sourcesContent":["import { useEntityFollow } from '../../hooks';\nimport { RightList, RightListContainer } from '../Utility/RightList';\nimport {\n  Box,\n  ListItem,\n  ListItemText,\n  makeStyles,\n  Tooltip,\n} from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\nimport { useNavigate } from 'react-router-dom';\nimport { entityRouteRef } from '../../routes';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\n\nconst useStyles = makeStyles(theme => ({\n  listItem: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: '0 4px',\n    minHeight: 28,\n    cursor: 'pointer',\n    transition: 'background 0.2s',\n    '&:hover': {\n      background: theme.palette.action.hover,\n    },\n  },\n  listItemText: {\n    color: theme.palette.text.primary,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    flex: 1,\n  },\n  iconBox: {\n    minWidth: 28,\n    maxWidth: 28,\n    height: 24,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 4,\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(0.5),\n    color: theme.palette.text.secondary,\n  },\n}));\n\nconst FollowedEntityItem = ({ entityRef }: { entityRef: string }) => {\n  const classes = useStyles();\n  const navigate = useNavigate();\n  const entityRoute = useRouteRef(entityRouteRef);\n  const { primaryTitle, Icon } = useEntityPresentation(entityRef);\n\n  return (\n    <ListItem\n      dense\n      button\n      className={classes.listItem}\n      onClick={() => navigate(entityRoute({ entityRef: entityRef }))}\n    >\n      <Box className={classes.iconBox}>\n        {Icon ? <Icon fontSize=\"small\" /> : null}\n      </Box>\n      <Tooltip title={primaryTitle ?? entityRef} arrow>\n        <ListItemText\n          primary={primaryTitle ?? entityRef}\n          classes={{ primary: classes.listItemText }}\n        />\n      </Tooltip>\n    </ListItem>\n  );\n};\n\nexport const FollowedEntitiesList = () => {\n  const entities = useEntityFollow();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (entities.entities.length === 0 || entities.loading) {\n    return null;\n  }\n\n  return (\n    <RightListContainer>\n      <RightList title={t('rightMenu.followedEntities')}>\n        {entities.entities.map(entity => (\n          <FollowedEntityItem key={entity} entityRef={entity} />\n        ))}\n      </RightList>\n    </RightListContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,OAAA;AAAA,IACT,SAAW,EAAA,EAAA;AAAA,IACX,MAAQ,EAAA,SAAA;AAAA,IACR,UAAY,EAAA,iBAAA;AAAA,IACZ,SAAW,EAAA;AAAA,MACT,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA;AACnC,GACF;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,IAC1B,UAAY,EAAA,QAAA;AAAA,IACZ,QAAU,EAAA,QAAA;AAAA,IACV,YAAc,EAAA,UAAA;AAAA,IACd,IAAM,EAAA;AAAA,GACR;AAAA,EACA,OAAS,EAAA;AAAA,IACP,QAAU,EAAA,EAAA;AAAA,IACV,QAAU,EAAA,EAAA;AAAA,IACV,MAAQ,EAAA,EAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA,QAAA;AAAA,IAChB,YAAc,EAAA,CAAA;AAAA,IACd,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC5B,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC7B,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AAE9B,CAAE,CAAA,CAAA;AAEF,MAAM,kBAAqB,GAAA,CAAC,EAAE,SAAA,EAAuC,KAAA;AACnE,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA,WAAA,GAAc,YAAY,cAAc,CAAA;AAC9C,EAAA,MAAM,EAAE,YAAA,EAAc,IAAK,EAAA,GAAI,sBAAsB,SAAS,CAAA;AAE9D,EACE,uBAAA,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAK,EAAA,IAAA;AAAA,MACL,MAAM,EAAA,IAAA;AAAA,MACN,WAAW,OAAQ,CAAA,QAAA;AAAA,MACnB,SAAS,MAAM,QAAA,CAAS,YAAY,EAAE,SAAA,EAAsB,CAAC,CAAA;AAAA,MAE7D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,OACrB,EAAA,QAAA,EAAA,IAAA,uBAAQ,IAAK,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA,GAAK,IACtC,EAAA,CAAA;AAAA,4BACC,OAAQ,EAAA,EAAA,KAAA,EAAO,YAAgB,IAAA,SAAA,EAAW,OAAK,IAC9C,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,SAAS,YAAgB,IAAA,SAAA;AAAA,YACzB,OAAS,EAAA,EAAE,OAAS,EAAA,OAAA,CAAQ,YAAa;AAAA;AAAA,SAE7C,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAA;AAEO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,WAAW,eAAgB,EAAA;AACjC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,IAAI,QAAS,CAAA,QAAA,CAAS,MAAW,KAAA,CAAA,IAAK,SAAS,OAAS,EAAA;AACtD,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,2BACG,kBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,aAAU,KAAO,EAAA,CAAA,CAAE,4BAA4B,CAC7C,EAAA,QAAA,EAAA,QAAA,CAAS,SAAS,GAAI,CAAA,CAAA,MAAA,yBACpB,kBAAgC,EAAA,EAAA,SAAA,EAAW,UAAnB,MAA2B,CACrD,GACH,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FollowedEntitiesList.esm.js","sources":["../../../src/components/FollowedLists/FollowedEntitiesList.tsx"],"sourcesContent":["import { useEntityFollow } from '../../hooks';\nimport { RightList, RightListContainer } from '../Utility/RightList';\nimport {\n  Box,\n  ListItem,\n  ListItemText,\n  makeStyles,\n  Tooltip,\n} from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\nimport { Link } from 'react-router-dom';\nimport { entityRouteRef } from '../../routes';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\n\nconst useStyles = makeStyles(theme => ({\n  listItem: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: '0 4px',\n    minHeight: 28,\n    cursor: 'pointer',\n    transition: 'background 0.2s',\n    textDecoration: 'none',\n    color: 'inherit',\n    '&:hover': {\n      background: theme.palette.action.hover,\n    },\n  },\n  listItemText: {\n    color: theme.palette.text.primary,\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    flex: 1,\n  },\n  iconBox: {\n    minWidth: 28,\n    maxWidth: 28,\n    height: 24,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 4,\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(0.5),\n    color: theme.palette.text.secondary,\n  },\n}));\n\nconst FollowedEntityItem = ({ entityRef }: { entityRef: string }) => {\n  const classes = useStyles();\n  const entityRoute = useRouteRef(entityRouteRef);\n  const { primaryTitle, Icon } = useEntityPresentation(entityRef);\n  const href = entityRoute({ entityRef: entityRef });\n\n  return (\n    <ListItem\n      dense\n      button\n      className={classes.listItem}\n      component={Link}\n      to={href}\n    >\n      <Box className={classes.iconBox}>\n        {Icon ? <Icon fontSize=\"small\" /> : null}\n      </Box>\n      <Tooltip title={primaryTitle ?? entityRef} arrow>\n        <ListItemText\n          primary={primaryTitle ?? entityRef}\n          classes={{ primary: classes.listItemText }}\n        />\n      </Tooltip>\n    </ListItem>\n  );\n};\n\nexport const FollowedEntitiesList = () => {\n  const entities = useEntityFollow();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (entities.entities.length === 0 || entities.loading) {\n    return null;\n  }\n\n  return (\n    <RightListContainer>\n      <RightList title={t('rightMenu.followedEntities')}>\n        {entities.entities.map(entity => (\n          <FollowedEntityItem key={entity} entityRef={entity} />\n        ))}\n      </RightList>\n    </RightListContainer>\n  );\n};\n"],"names":[],"mappings":"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"}