@drodil/backstage-plugin-qeta-react 3.52.6 → 3.53.0

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

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

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

@@ -5,17 +5,22 @@ import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import 'react';
+import '@backstage/plugin-signals-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import '../../hooks/useListItemStyles.esm.js';
 import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
-import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { qetaTranslationRef } from '../../translation.esm.js';
 import { useUserFollow } from '../../hooks/useUserFollow.esm.js';
 import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
 import { Tooltip, IconButton } from '@material-ui/core';
+import 'react-router-dom';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
 
 const UserFollowButton = (props) => {
   const { userRef, style } = props;

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

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

package/dist/components/CollectionsContainer/CollectionListItem.esm.js

@@ -0,0 +1,143 @@
+import { jsxs, jsx } 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, ListItemAvatar, Box, Typography, Tooltip } from '@material-ui/core';
+import DOMPurify from 'dompurify';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import { CollectionFollowButton } from '../Buttons/CollectionFollowButton.esm.js';
+import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
+import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
+import PeopleIcon from '@material-ui/icons/People';
+import LinkIcon from '@material-ui/icons/Link';
+import DescriptionIcon from '@material-ui/icons/Description';
+import { Link } from 'react-router-dom';
+import '../../api.esm.js';
+import 'react-use';
+import 'react';
+import '@backstage/plugin-signals-react';
+import { useListItemStyles } from '../../hooks/useListItemStyles.esm.js';
+import '@backstage/catalog-model';
+import 'dataloader';
+import '@backstage/plugin-catalog-react';
+import 'react-use/lib/useAsync';
+import '@backstage/plugin-permission-react';
+import '@backstage/plugin-permission-common';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  content: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    marginLeft: theme.spacing(2)
+  },
+  title: {
+    fontWeight: 600
+  },
+  description: {
+    color: theme.palette.text.secondary,
+    fontSize: "0.875rem",
+    marginTop: theme.spacing(0.5),
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  statsWrapper: {
+    display: "flex",
+    gap: theme.spacing(3),
+    marginLeft: theme.spacing(2),
+    alignItems: "center",
+    [theme.breakpoints.down("sm")]: {
+      display: "none"
+    }
+  },
+  statItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    color: theme.palette.text.secondary
+  },
+  actions: {
+    marginLeft: theme.spacing(2)
+  },
+  avatar: {
+    width: 50,
+    height: 50,
+    borderRadius: theme.shape.borderRadius,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.palette.type === "dark" ? theme.palette.grey[800] : theme.palette.grey[200],
+    color: theme.palette.text.secondary
+  },
+  image: {
+    objectFit: "cover",
+    width: "100%",
+    height: "100%",
+    borderRadius: theme.shape.borderRadius
+  }
+}));
+const CollectionListItem = (props) => {
+  const { collection } = props;
+  const classes = useStyles();
+  const listItemClasses = useListItemStyles();
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const collectionRoute = useRouteRef(collectionRouteRef);
+  const href = collectionRoute({ id: collection.id.toString(10) });
+  return /* @__PURE__ */ jsxs(Link, { to: href, className: listItemClasses.root, children: [
+    /* @__PURE__ */ jsx(ListItemAvatar, { className: classes.avatar, children: collection.headerImage ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: collection.headerImage,
+        alt: collection.title,
+        className: classes.image,
+        onError: (e) => {
+          e.currentTarget.style.display = "none";
+          e.currentTarget.parentElement.innerHTML = "";
+        }
+      }
+    ) : /* @__PURE__ */ jsx(PlaylistPlayIcon, {}) }),
+    /* @__PURE__ */ jsxs(Box, { className: classes.content, children: [
+      /* @__PURE__ */ jsx(Typography, { className: classes.title, noWrap: true, children: collection.title }),
+      collection.description && /* @__PURE__ */ jsx(Typography, { className: classes.description, children: DOMPurify.sanitize(
+        truncate(removeMarkdownFormatting(collection.description), 100)
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { className: classes.statsWrapper, children: [
+      /* @__PURE__ */ jsx(Tooltip, { title: t("common.questions"), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: collection.questionsCount })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("common.articles"), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: collection.articlesCount })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("common.links"), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: collection.linksCount })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("common.followersPlain"), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: collection.followers })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: classes.actions,
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        children: /* @__PURE__ */ jsx(CollectionFollowButton, { collection })
+      }
+    )
+  ] });
+};
+
+export { CollectionListItem };
+//# sourceMappingURL=CollectionListItem.esm.js.map

package/dist/components/CollectionsContainer/CollectionListItem.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionListItem.esm.js","sources":["../../../src/components/CollectionsContainer/CollectionListItem.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  ListItemAvatar,\n  makeStyles,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\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';\nimport { Link } from 'react-router-dom';\n\nimport { useListItemStyles } from '../../hooks';\n\nconst useStyles = makeStyles(theme => ({\n  content: {\n    flex: 1,\n    minWidth: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    marginLeft: theme.spacing(2),\n  },\n  title: {\n    fontWeight: 600,\n  },\n  description: {\n    color: theme.palette.text.secondary,\n    fontSize: '0.875rem',\n    marginTop: theme.spacing(0.5),\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  statsWrapper: {\n    display: 'flex',\n    gap: theme.spacing(3),\n    marginLeft: theme.spacing(2),\n    alignItems: 'center',\n    [theme.breakpoints.down('sm')]: {\n      display: 'none',\n    },\n  },\n  statItem: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    color: theme.palette.text.secondary,\n  },\n  actions: {\n    marginLeft: theme.spacing(2),\n  },\n  avatar: {\n    width: 50,\n    height: 50,\n    borderRadius: theme.shape.borderRadius,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor:\n      theme.palette.type === 'dark'\n        ? theme.palette.grey[800]\n        : theme.palette.grey[200],\n    color: theme.palette.text.secondary,\n  },\n  image: {\n    objectFit: 'cover',\n    width: '100%',\n    height: '100%',\n    borderRadius: theme.shape.borderRadius,\n  },\n}));\n\nexport const CollectionListItem = (props: { collection: Collection }) => {\n  const { collection } = props;\n  const classes = useStyles();\n  const listItemClasses = useListItemStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const collectionRoute = useRouteRef(collectionRouteRef);\n  const href = collectionRoute({ id: collection.id.toString(10) });\n\n  return (\n    <Link to={href} className={listItemClasses.root}>\n      <ListItemAvatar className={classes.avatar}>\n        {collection.headerImage ? (\n          <img\n            src={collection.headerImage}\n            alt={collection.title}\n            className={classes.image}\n            onError={e => {\n              (e.currentTarget as HTMLImageElement).style.display = 'none';\n              (e.currentTarget.parentElement as HTMLElement).innerHTML = '';\n            }}\n          />\n        ) : (\n          <PlaylistPlayIcon />\n        )}\n      </ListItemAvatar>\n      <Box className={classes.content}>\n        <Typography className={classes.title} noWrap>\n          {collection.title}\n        </Typography>\n        {collection.description && (\n          <Typography className={classes.description}>\n            {DOMPurify.sanitize(\n              truncate(removeMarkdownFormatting(collection.description), 100),\n            )}\n          </Typography>\n        )}\n      </Box>\n\n      <Box className={classes.statsWrapper}>\n        <Tooltip title={t('common.questions')} arrow>\n          <div className={classes.statItem}>\n            <QuestionAnswerIcon fontSize=\"small\" />\n            <Typography variant=\"body2\">{collection.questionsCount}</Typography>\n          </div>\n        </Tooltip>\n        <Tooltip title={t('common.articles')} arrow>\n          <div className={classes.statItem}>\n            <DescriptionIcon fontSize=\"small\" />\n            <Typography variant=\"body2\">{collection.articlesCount}</Typography>\n          </div>\n        </Tooltip>\n        <Tooltip title={t('common.links')} arrow>\n          <div className={classes.statItem}>\n            <LinkIcon fontSize=\"small\" />\n            <Typography variant=\"body2\">{collection.linksCount}</Typography>\n          </div>\n        </Tooltip>\n        <Tooltip title={t('common.followersPlain')} arrow>\n          <div className={classes.statItem}>\n            <PeopleIcon fontSize=\"small\" />\n            <Typography variant=\"body2\">{collection.followers}</Typography>\n          </div>\n        </Tooltip>\n      </Box>\n\n      <Box\n        className={classes.actions}\n        onClick={e => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n      >\n        <CollectionFollowButton collection={collection} />\n      </Box>\n    </Link>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CollectionsContainer/CollectionsContainer.esm.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import { CollectionsGridItem } from './CollectionsGridItem.esm.js';
+import { CollectionListItem } from './CollectionListItem.esm.js';
+import { QetaEntityContainer } from '../QetaEntityContainer/QetaEntityContainer.esm.js';
+
+const CollectionsContainer = (props) => {
+  const { filterPanelProps, defaultView, owner, prefix } = props;
+  const { t } = useTranslationRef(qetaTranslationRef);
+  return /* @__PURE__ */ jsx(
+    QetaEntityContainer,
+    {
+      prefix: prefix ?? "collections",
+      defaultPageSize: 24,
+      defaultView,
+      initialFilters: {
+        order: "desc",
+        searchQuery: "",
+        orderBy: "created"
+      },
+      fetch: (api, limit, offset, filters) => {
+        return api.getCollections({
+          limit,
+          offset,
+          searchQuery: filters.searchQuery,
+          owner
+        }).then((res) => ({ items: res.collections, total: res.total }));
+      },
+      filterPanelProps: {
+        ...filterPanelProps,
+        mode: "collections"
+      },
+      renderListItem: (collection) => /* @__PURE__ */ jsx(CollectionListItem, { collection }),
+      renderGridItem: (collection) => /* @__PURE__ */ jsx(CollectionsGridItem, { collection }),
+      title: (total) => t("common.collections", { count: total }),
+      searchPlaceholder: t("collectionsPage.search.label"),
+      emptyMessage: t("common.collections", { count: 0 }),
+      getKey: (collection) => collection.id
+    }
+  );
+};
+
+export { CollectionsContainer };
+//# sourceMappingURL=CollectionsContainer.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionsContainer.esm.js","sources":["../../../src/components/CollectionsContainer/CollectionsContainer.tsx"],"sourcesContent":["import { CollectionResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\nimport { CommonFilterPanelProps } from '../FilterPanel/FilterPanel';\nimport { CollectionsGridItem } from './CollectionsGridItem';\nimport { CollectionListItem } from './CollectionListItem';\nimport { QetaEntityContainer } from '../QetaEntityContainer/QetaEntityContainer';\nimport { ViewType } from '../ViewToggle/ViewToggle';\n\nexport const CollectionsContainer = (props: {\n  filterPanelProps?: CommonFilterPanelProps;\n  defaultView?: ViewType;\n  owner?: string;\n  prefix?: string;\n}) => {\n  const { filterPanelProps, defaultView, owner, prefix } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <QetaEntityContainer<CollectionResponse, any>\n      prefix={prefix ?? 'collections'}\n      defaultPageSize={24}\n      defaultView={defaultView}\n      initialFilters={{\n        order: 'desc',\n        searchQuery: '',\n        orderBy: 'created',\n      }}\n      fetch={(api, limit, offset, filters) => {\n        return api\n          .getCollections({\n            limit,\n            offset,\n            searchQuery: filters.searchQuery,\n            owner,\n          })\n          .then(res => ({ items: res.collections, total: res.total }));\n      }}\n      filterPanelProps={{\n        ...filterPanelProps,\n        mode: 'collections',\n      }}\n      renderListItem={collection => (\n        <CollectionListItem collection={collection} />\n      )}\n      renderGridItem={collection => (\n        <CollectionsGridItem collection={collection} />\n      )}\n      title={total => t('common.collections', { count: total })}\n      searchPlaceholder={t('collectionsPage.search.label')}\n      emptyMessage={t('common.collections', { count: 0 })}\n      getKey={collection => collection.id}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AASa,MAAA,oBAAA,GAAuB,CAAC,KAK/B,KAAA;AACJ,EAAA,MAAM,EAAE,gBAAA,EAAkB,WAAa,EAAA,KAAA,EAAO,QAAW,GAAA,KAAA;AACzD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EACE,uBAAA,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,QAAQ,MAAU,IAAA,aAAA;AAAA,MAClB,eAAiB,EAAA,EAAA;AAAA,MACjB,WAAA;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,KAAO,EAAA,MAAA;AAAA,QACP,WAAa,EAAA,EAAA;AAAA,QACb,OAAS,EAAA;AAAA,OACX;AAAA,MACA,KAAO,EAAA,CAAC,GAAK,EAAA,KAAA,EAAO,QAAQ,OAAY,KAAA;AACtC,QAAA,OAAO,IACJ,cAAe,CAAA;AAAA,UACd,KAAA;AAAA,UACA,MAAA;AAAA,UACA,aAAa,OAAQ,CAAA,WAAA;AAAA,UACrB;AAAA,SACD,CACA,CAAA,IAAA,CAAK,CAAQ,GAAA,MAAA,EAAE,KAAO,EAAA,GAAA,CAAI,WAAa,EAAA,KAAA,EAAO,GAAI,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,OAC/D;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,GAAG,gBAAA;AAAA,QACH,IAAM,EAAA;AAAA,OACR;AAAA,MACA,cAAgB,EAAA,CAAA,UAAA,qBACb,GAAA,CAAA,kBAAA,EAAA,EAAmB,UAAwB,EAAA,CAAA;AAAA,MAE9C,cAAgB,EAAA,CAAA,UAAA,qBACb,GAAA,CAAA,mBAAA,EAAA,EAAoB,UAAwB,EAAA,CAAA;AAAA,MAE/C,OAAO,CAAS,KAAA,KAAA,CAAA,CAAE,sBAAsB,EAAE,KAAA,EAAO,OAAO,CAAA;AAAA,MACxD,iBAAA,EAAmB,EAAE,8BAA8B,CAAA;AAAA,MACnD,cAAc,CAAE,CAAA,oBAAA,EAAsB,EAAE,KAAA,EAAO,GAAG,CAAA;AAAA,MAClD,MAAA,EAAQ,gBAAc,UAAW,CAAA;AAAA;AAAA,GACnC;AAEJ;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionsGridItem.esm.js","sources":["../../../src/components/CollectionsContainer/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/ContentHeader/ContentHeader.esm.js

@@ -14,10 +14,15 @@ import '@material-ui/icons/VisibilityOff';
 import '../../api.esm.js';
 import 'react-use';
 import 'react';
+import '@backstage/plugin-signals-react';
+import '../../hooks/useListItemStyles.esm.js';
 import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
 import 'react-use/lib/useAsync';
+import 'react-router-dom';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
 import '@material-ui/icons/Create';
 import '@material-ui/icons/Link';
 import '@material-ui/icons/OpenInNew';
@@ -25,6 +30,7 @@ import '@material-ui/icons/PlaylistAdd';
 import '@material-ui/icons/AddCircle';
 import '@material-ui/icons/RemoveCircle';
 import { ButtonContainer } from '../Buttons/ButtonContainer.esm.js';
+import '../Buttons/RankingButtons.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   root: {

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

@@ -1 +1 @@
-{"version":3,"file":"ContentHeader.esm.js","sources":["../../../src/components/ContentHeader/ContentHeader.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { Box, makeStyles, Typography } from '@material-ui/core';\nimport { ButtonContainer } from '../Buttons';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginBottom: theme.spacing(3),\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n  },\n  title: {\n    fontWeight: 700,\n    marginBottom: 0,\n  },\n  titleIcon: {\n    marginRight: theme.spacing(1),\n    display: 'flex',\n    alignItems: 'center',\n  },\n  description: {\n    color: theme.palette.text.secondary,\n  },\n}));\n\nexport interface ContentHeaderProps {\n  title?: ReactNode;\n  titleIcon?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  titleComponent?: ReactNode;\n}\n\nexport const ContentHeader = (props: ContentHeaderProps) => {\n  const { title, titleIcon, description, children, titleComponent } = props;\n  const classes = useStyles();\n\n  return (\n    <Box className={classes.root}>\n      <Box flex=\"1 1 auto\" mr={2}>\n        <Box display=\"flex\" alignItems=\"center\" mb={1}>\n          {titleComponent ? (\n            <>{titleComponent}</>\n          ) : (\n            <>\n              {titleIcon && (\n                <Box className={classes.titleIcon}>{titleIcon}</Box>\n              )}\n              {title && (\n                <Typography\n                  variant=\"h4\"\n                  component=\"h1\"\n                  className={classes.title}\n                >\n                  {title}\n                </Typography>\n              )}\n            </>\n          )}\n        </Box>\n        <Typography\n          variant=\"body2\"\n          className={classes.description}\n          component=\"div\"\n        >\n          {description}\n        </Typography>\n      </Box>\n      <Box flex=\"0 0 auto\">\n        <ButtonContainer>{children}</ButtonContainer>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,MAAA;AAAA,IACV,cAAgB,EAAA,eAAA;AAAA,IAChB,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,GACtB;AAAA,EACA,KAAO,EAAA;AAAA,IACL,UAAY,EAAA,GAAA;AAAA,IACZ,YAAc,EAAA;AAAA,GAChB;AAAA,EACA,SAAW,EAAA;AAAA,IACT,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC5B,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA;AAAA,GACd;AAAA,EACA,WAAa,EAAA;AAAA,IACX,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AAE9B,CAAE,CAAA,CAAA;AAUW,MAAA,aAAA,GAAgB,CAAC,KAA8B,KAAA;AAC1D,EAAA,MAAM,EAAE,KAAO,EAAA,SAAA,EAAW,WAAa,EAAA,QAAA,EAAU,gBAAmB,GAAA,KAAA;AACpE,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,IACtB,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,IAAA,EAAK,UAAW,EAAA,EAAA,EAAI,CACvB,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,UAAW,EAAA,QAAA,EAAS,EAAI,EAAA,CAAA,EACzC,QACC,EAAA,cAAA,mBAAA,GAAA,CAAA,QAAA,EAAA,EAAG,QAAe,EAAA,cAAA,EAAA,CAAA,mBAGf,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,SAAA,oBACE,GAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,WAAY,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,QAE/C,KACC,oBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,IAAA;AAAA,YACR,SAAU,EAAA,IAAA;AAAA,YACV,WAAW,OAAQ,CAAA,KAAA;AAAA,YAElB,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EAEJ,CAEJ,EAAA,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,OAAA;AAAA,UACR,WAAW,OAAQ,CAAA,WAAA;AAAA,UACnB,SAAU,EAAA,KAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA,wBACC,GAAI,EAAA,EAAA,IAAA,EAAK,YACR,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA,EAAiB,UAAS,CAC7B,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ContentHeader.esm.js","sources":["../../../src/components/ContentHeader/ContentHeader.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { Box, makeStyles, Typography } from '@material-ui/core';\nimport { ButtonContainer } from '../Buttons';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginBottom: theme.spacing(3),\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n  },\n  title: {\n    fontWeight: 700,\n    marginBottom: 0,\n  },\n  titleIcon: {\n    marginRight: theme.spacing(1),\n    display: 'flex',\n    alignItems: 'center',\n  },\n  description: {\n    color: theme.palette.text.secondary,\n  },\n}));\n\nexport interface ContentHeaderProps {\n  title?: ReactNode;\n  titleIcon?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  titleComponent?: ReactNode;\n}\n\nexport const ContentHeader = (props: ContentHeaderProps) => {\n  const { title, titleIcon, description, children, titleComponent } = props;\n  const classes = useStyles();\n\n  return (\n    <Box className={classes.root}>\n      <Box flex=\"1 1 auto\" mr={2}>\n        <Box display=\"flex\" alignItems=\"center\" mb={1}>\n          {titleComponent ? (\n            <>{titleComponent}</>\n          ) : (\n            <>\n              {titleIcon && (\n                <Box className={classes.titleIcon}>{titleIcon}</Box>\n              )}\n              {title && (\n                <Typography\n                  variant=\"h4\"\n                  component=\"h1\"\n                  className={classes.title}\n                >\n                  {title}\n                </Typography>\n              )}\n            </>\n          )}\n        </Box>\n        <Typography\n          variant=\"body2\"\n          className={classes.description}\n          component=\"div\"\n        >\n          {description}\n        </Typography>\n      </Box>\n      <Box flex=\"0 0 auto\">\n        <ButtonContainer>{children}</ButtonContainer>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,MAAA;AAAA,IACV,cAAgB,EAAA,eAAA;AAAA,IAChB,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,GACtB;AAAA,EACA,KAAO,EAAA;AAAA,IACL,UAAY,EAAA,GAAA;AAAA,IACZ,YAAc,EAAA;AAAA,GAChB;AAAA,EACA,SAAW,EAAA;AAAA,IACT,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC5B,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA;AAAA,GACd;AAAA,EACA,WAAa,EAAA;AAAA,IACX,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AAE9B,CAAE,CAAA,CAAA;AAUW,MAAA,aAAA,GAAgB,CAAC,KAA8B,KAAA;AAC1D,EAAA,MAAM,EAAE,KAAO,EAAA,SAAA,EAAW,WAAa,EAAA,QAAA,EAAU,gBAAmB,GAAA,KAAA;AACpE,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,IACtB,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,IAAA,EAAK,UAAW,EAAA,EAAA,EAAI,CACvB,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,UAAW,EAAA,QAAA,EAAS,EAAI,EAAA,CAAA,EACzC,QACC,EAAA,cAAA,mBAAA,GAAA,CAAA,QAAA,EAAA,EAAG,QAAe,EAAA,cAAA,EAAA,CAAA,mBAGf,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,SAAA,oBACE,GAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,WAAY,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,QAE/C,KACC,oBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,IAAA;AAAA,YACR,SAAU,EAAA,IAAA;AAAA,YACV,WAAW,OAAQ,CAAA,KAAA;AAAA,YAElB,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EAEJ,CAEJ,EAAA,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,OAAA;AAAA,UACR,WAAW,OAAQ,CAAA,WAAA;AAAA,UACnB,SAAU,EAAA,KAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA,wBACC,GAAI,EAAA,EAAA,IAAA,EAAK,YACR,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA,EAAiB,UAAS,CAC7B,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/EntitiesContainer/EntitiesContainer.esm.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { QetaEntityContainer } from '../QetaEntityContainer/QetaEntityContainer.esm.js';
+import { EntityListItem } from './EntityListItem.esm.js';
+import { EntitiesGridItem } from './EntitiesGridItem.esm.js';
+import { qetaTranslationRef } from '../../translation.esm.js';
+
+const EntitiesContainer = (props) => {
+  const { filterPanelProps, defaultView } = props;
+  const { t } = useTranslationRef(qetaTranslationRef);
+  return /* @__PURE__ */ jsx(
+    QetaEntityContainer,
+    {
+      prefix: "entities",
+      defaultPageSize: 24,
+      defaultView,
+      initialFilters: {
+        order: "desc",
+        orderBy: "postsCount",
+        searchQuery: ""
+      },
+      fetch: (api, limit, offset, filters) => {
+        return api.getEntities({
+          limit,
+          offset,
+          searchQuery: filters.searchQuery
+        }).then((res) => ({ items: res.entities, total: res.total }));
+      },
+      filterPanelProps: {
+        ...filterPanelProps,
+        mode: "entities"
+      },
+      renderListItem: (entity) => /* @__PURE__ */ jsx(EntityListItem, { entity }),
+      renderGridItem: (entity) => /* @__PURE__ */ jsx(EntitiesGridItem, { entity }),
+      title: (total) => t("entitiesPage.entities", { count: total }),
+      searchPlaceholder: t("entitiesPage.search.label"),
+      emptyMessage: t("entitiesPage.entities", { count: 0 }),
+      getKey: (item) => item.id
+    }
+  );
+};
+
+export { EntitiesContainer };
+//# sourceMappingURL=EntitiesContainer.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntitiesContainer.esm.js","sources":["../../../src/components/EntitiesContainer/EntitiesContainer.tsx"],"sourcesContent":["import { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { QetaEntityContainer } from '../QetaEntityContainer/QetaEntityContainer';\nimport { EntityListItem } from './EntityListItem';\nimport { EntitiesGridItem } from './EntitiesGridItem';\nimport { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  CommonFilterPanelProps,\n  EntityFilters,\n} from '../FilterPanel/FilterPanel';\nimport { qetaTranslationRef } from '../../translation';\nimport { ViewType } from '../ViewToggle/ViewToggle';\n\nexport const EntitiesContainer = (props: {\n  filterPanelProps?: CommonFilterPanelProps;\n  defaultView?: ViewType;\n}) => {\n  const { filterPanelProps, defaultView } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <QetaEntityContainer<EntityResponse, EntityFilters>\n      prefix=\"entities\"\n      defaultPageSize={24}\n      defaultView={defaultView}\n      initialFilters={{\n        order: 'desc',\n        orderBy: 'postsCount',\n        searchQuery: '',\n      }}\n      fetch={(api, limit, offset, filters) => {\n        return api\n          .getEntities({\n            limit,\n            offset,\n            searchQuery: filters.searchQuery,\n          })\n          .then(res => ({ items: res.entities, total: res.total }));\n      }}\n      filterPanelProps={{\n        ...filterPanelProps,\n        mode: 'entities',\n      }}\n      renderListItem={entity => <EntityListItem entity={entity} />}\n      renderGridItem={entity => <EntitiesGridItem entity={entity} />}\n      title={total => t('entitiesPage.entities', { count: total })}\n      searchPlaceholder={t('entitiesPage.search.label')}\n      emptyMessage={t('entitiesPage.entities', { count: 0 })}\n      getKey={item => item.id}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAYa,MAAA,iBAAA,GAAoB,CAAC,KAG5B,KAAA;AACJ,EAAM,MAAA,EAAE,gBAAkB,EAAA,WAAA,EAAgB,GAAA,KAAA;AAC1C,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EACE,uBAAA,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,UAAA;AAAA,MACP,eAAiB,EAAA,EAAA;AAAA,MACjB,WAAA;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,KAAO,EAAA,MAAA;AAAA,QACP,OAAS,EAAA,YAAA;AAAA,QACT,WAAa,EAAA;AAAA,OACf;AAAA,MACA,KAAO,EAAA,CAAC,GAAK,EAAA,KAAA,EAAO,QAAQ,OAAY,KAAA;AACtC,QAAA,OAAO,IACJ,WAAY,CAAA;AAAA,UACX,KAAA;AAAA,UACA,MAAA;AAAA,UACA,aAAa,OAAQ,CAAA;AAAA,SACtB,CACA,CAAA,IAAA,CAAK,CAAQ,GAAA,MAAA,EAAE,KAAO,EAAA,GAAA,CAAI,QAAU,EAAA,KAAA,EAAO,GAAI,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,OAC5D;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,GAAG,gBAAA;AAAA,QACH,IAAM,EAAA;AAAA,OACR;AAAA,MACA,cAAgB,EAAA,CAAA,MAAA,qBAAW,GAAA,CAAA,cAAA,EAAA,EAAe,MAAgB,EAAA,CAAA;AAAA,MAC1D,cAAgB,EAAA,CAAA,MAAA,qBAAW,GAAA,CAAA,gBAAA,EAAA,EAAiB,MAAgB,EAAA,CAAA;AAAA,MAC5D,OAAO,CAAS,KAAA,KAAA,CAAA,CAAE,yBAAyB,EAAE,KAAA,EAAO,OAAO,CAAA;AAAA,MAC3D,iBAAA,EAAmB,EAAE,2BAA2B,CAAA;AAAA,MAChD,cAAc,CAAE,CAAA,uBAAA,EAAyB,EAAE,KAAA,EAAO,GAAG,CAAA;AAAA,MACrD,MAAA,EAAQ,UAAQ,IAAK,CAAA;AAAA;AAAA,GACvB;AAEJ;;;;"}

package/dist/components/{EntitiesGrid → EntitiesContainer}/EntitiesGridItem.esm.js

@@ -1,6 +1,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 { makeStyles, Card, Box, Avatar, Tooltip, Typography, CardContent, Grid } from '@material-ui/core';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { useEntityPresentation } from '@backstage/plugin-catalog-react';
 import { entityRouteRef } from '../../routes.esm.js';
@@ -39,30 +39,22 @@ const EntitiesGridItem = (props) => {
   const compound = parseEntityRef(entity.entityRef);
   const { primaryTitle, Icon, secondaryTitle } = useEntityPresentation(compound);
   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,
-              onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              },
-              children: /* @__PURE__ */ jsx(EntityFollowButton, { entityRef: entity.entityRef })
-            }
-          )
-        ]
-      }
-    ),
+  return /* @__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,
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsx(EntityFollowButton, { entityRef: entity.entityRef })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
       CardContent,
       {
@@ -127,7 +119,7 @@ const EntitiesGridItem = (props) => {
         ] })
       }
     )
-  ] }) }) });
+  ] }) });
 };
 
 export { EntitiesGridItem };

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntitiesGridItem.esm.js","sources":["../../../src/components/EntitiesContainer/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    <Card className={classes.card}>\n      <ClickableLink href={href} ariaLabel={primaryTitle}>\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\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  );\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,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,EAAA,MAAM,OAAO,WAAY,CAAA,EAAE,SAAW,EAAA,MAAA,CAAO,WAAW,CAAA;AAExD,EACE,uBAAA,GAAA,CAAC,QAAK,SAAW,EAAA,OAAA,CAAQ,MACvB,QAAC,kBAAA,IAAA,CAAA,aAAA,EAAA,EAAc,IAAY,EAAA,SAAA,EAAW,YACpC,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,YAAY,OAAQ,EAAA,MAAA,EAAO,YAAW,QAC3D,EAAA,QAAA,EAAA;AAAA,MACC,IAAA,oBAAA,GAAA,CAAC,UAAO,KAAO,EAAA,EAAE,aAAa,EAAG,EAAA,EAC/B,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,CACR,EAAA,CAAA;AAAA,sBAEF,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,sBACA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,UAAY,EAAA,CAAA;AAAA,UACZ,SAAS,CAAK,CAAA,KAAA;AACZ,YAAA,CAAA,CAAE,cAAe,EAAA;AACjB,YAAA,CAAA,CAAE,eAAgB,EAAA;AAAA,WACpB;AAAA,UAEA,QAAC,kBAAA,GAAA,CAAA,kBAAA,EAAA,EAAmB,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA;AAAA;AACnD,KACF,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,WAAW,CAAG,EAAA,OAAA,CAAQ,WAAW,CAAA,CAAA,EAAI,aAAa,UAAU,CAAA,CAAA;AAAA,QAE5D,QAAA,kBAAA,IAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CAAG,EAAA,SAAA,EAAW,aAAa,SAClD,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,CACb,EAAA,QAAA,kBAAA,IAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,OAAQ,EAAA,MAAA;AAAA,cACR,aAAc,EAAA,QAAA;AAAA,cACd,UAAW,EAAA,QAAA;AAAA,cACX,WAAW,YAAa,CAAA,QAAA;AAAA,cAExB,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,kBAAmB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,KAAA,EAAM,UAAW,EAAA,CAAA;AAAA,gCACtD,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,gCACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAM,iBACjC,QAAE,EAAA,CAAA,CAAA,iBAAA,EAAmB,EAAE,CAC1B,EAAA;AAAA;AAAA;AAAA,WAEJ,EAAA,CAAA;AAAA,0BACC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,QAAA,kBAAA,IAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,OAAQ,EAAA,MAAA;AAAA,cACR,aAAc,EAAA,QAAA;AAAA,cACd,UAAW,EAAA,QAAA;AAAA,cACX,WAAW,YAAa,CAAA,QAAA;AAAA,cAExB,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,KAAA,EAAM,UAAW,EAAA,CAAA;AAAA,gCACnD,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,gCACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAM,iBACjC,QAAE,EAAA,CAAA,CAAA,gBAAA,EAAkB,EAAE,CACzB,EAAA;AAAA;AAAA;AAAA,WAEJ,EAAA,CAAA;AAAA,0BACC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,QAAA,kBAAA,IAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,OAAQ,EAAA,MAAA;AAAA,cACR,aAAc,EAAA,QAAA;AAAA,cACd,UAAW,EAAA,QAAA;AAAA,cACX,WAAW,YAAa,CAAA,QAAA;AAAA,cAExB,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,QAAS,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,KAAA,EAAM,UAAW,EAAA,CAAA;AAAA,gCAC5C,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,gCACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAM,iBACjC,QAAE,EAAA,CAAA,CAAA,aAAA,EAAe,EAAE,CACtB,EAAA;AAAA;AAAA;AAAA,WAEJ,EAAA,CAAA;AAAA,0BACC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,QAAA,kBAAA,IAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,OAAQ,EAAA,MAAA;AAAA,cACR,aAAc,EAAA,QAAA;AAAA,cACd,UAAW,EAAA,QAAA;AAAA,cACX,WAAW,YAAa,CAAA,QAAA;AAAA,cAExB,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,UAAW,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,KAAA,EAAM,UAAW,EAAA,CAAA;AAAA,gCAC9C,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,gCACA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAM,iBACjC,QAAE,EAAA,CAAA,CAAA,iBAAA,EAAmB,EAAE,CAC1B,EAAA;AAAA;AAAA;AAAA,WAEJ,EAAA;AAAA,SACF,EAAA;AAAA;AAAA;AACF,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/EntitiesContainer/EntityListItem.esm.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EntityFollowButton } from '../Buttons/EntityFollowButton.esm.js';
+import { makeStyles, ListItemAvatar, Avatar, Box, Tooltip, Typography } from '@material-ui/core';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { useEntityPresentation } from '@backstage/plugin-catalog-react';
+import { entityRouteRef } from '../../routes.esm.js';
+import { parseEntityRef } from '@backstage/catalog-model';
+import LinkIcon from '@material-ui/icons/Link';
+import DescriptionIcon from '@material-ui/icons/Description';
+import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
+import PeopleIcon from '@material-ui/icons/People';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import { Link } from 'react-router-dom';
+import '../../api.esm.js';
+import 'react-use';
+import 'react';
+import '@backstage/plugin-signals-react';
+import { useListItemStyles } from '../../hooks/useListItemStyles.esm.js';
+import 'dataloader';
+import 'react-use/lib/useAsync';
+import '@backstage/plugin-permission-react';
+import '@drodil/backstage-plugin-qeta-common';
+import '@backstage/plugin-permission-common';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  content: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column"
+  },
+  title: {
+    fontWeight: 600
+  },
+  statsWrapper: {
+    display: "flex",
+    gap: theme.spacing(3),
+    marginLeft: theme.spacing(2),
+    alignItems: "center",
+    [theme.breakpoints.down("sm")]: {
+      display: "none"
+    }
+  },
+  statItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    color: theme.palette.text.secondary
+  },
+  actions: {
+    marginLeft: theme.spacing(2)
+  }
+}));
+const EntityListItem = (props) => {
+  const { entity } = props;
+  const classes = useStyles();
+  const listItemClasses = useListItemStyles();
+  const entityRoute = useRouteRef(entityRouteRef);
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const compound = parseEntityRef(entity.entityRef);
+  const { primaryTitle, Icon, secondaryTitle } = useEntityPresentation(compound);
+  const href = entityRoute({ entityRef: entity.entityRef });
+  return /* @__PURE__ */ jsxs(Link, { to: href, className: listItemClasses.root, children: [
+    /* @__PURE__ */ jsx(ListItemAvatar, { children: /* @__PURE__ */ jsx(Avatar, { children: Icon ? /* @__PURE__ */ jsx(Icon, {}) : primaryTitle.charAt(0).toUpperCase() }) }),
+    /* @__PURE__ */ jsx(Box, { className: classes.content, children: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, placement: "top-start", children: /* @__PURE__ */ jsx(Typography, { className: classes.title, noWrap: true, children: primaryTitle }) }) }),
+    /* @__PURE__ */ jsxs(Box, { className: classes.statsWrapper, children: [
+      /* @__PURE__ */ jsx(Tooltip, { title: t("stats.questions", {}), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: entity.questionsCount })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("stats.articles", {}), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: entity.articlesCount })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("stats.links", {}), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: entity.linksCount })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("stats.followers", {}), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: entity.followerCount })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: classes.actions,
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        children: /* @__PURE__ */ jsx(EntityFollowButton, { entityRef: entity.entityRef })
+      }
+    )
+  ] });
+};
+
+export { EntityListItem };
+//# sourceMappingURL=EntityListItem.esm.js.map