npm - @drodil/backstage-plugin-qeta-react - Versions diffs - 3.28.1 → 3.29.0 - Mend

@drodil/backstage-plugin-qeta-react 3.28.1 → 3.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

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

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import { useSignal } from '@backstage/plugin-signals-react';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { questionRouteRef, articleRouteRef } from '../../routes.esm.js';
-import { Card, CardActionArea, CardMedia, CardContent, Typography, Box, Grid, Tooltip, IconButton } from '@material-ui/core';
+import { makeStyles, Card, CardActionArea, CardMedia, CardContent, Typography, Box, Tooltip, IconButton } from '@material-ui/core';
 import DOMPurify from 'dompurify';
 import { useNavigate } from 'react-router-dom';
 import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities.esm.js';
@@ -20,16 +20,105 @@ import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import { UserLink } from '../Links/Links.esm.js';
 import { SmallAvatar } from '../Utility/SmallAvatar.esm.js';
+import numeral from 'numeral';
+const useStyles = makeStyles((theme) => ({
+  card: {
+    height: "100%"
+  },
+  cardContent: {
+    padding: theme.spacing(1.5, 2, 1, 2)
+  },
+  cardContentFooter: {
+    padding: theme.spacing(1, 2, 1.5, 2)
+  },
+  title: {
+    fontSize: "1.08rem",
+    fontWeight: 600,
+    marginBottom: theme.spacing(0.5)
+  },
+  content: {
+    marginBottom: 0
+  },
+  footer: {
+    paddingTop: theme.spacing(1),
+    marginTop: theme.spacing(0.5)
+  },
+  statsContainer: {
+    display: "flex",
+    gap: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  statsGroup: {
+    display: "flex",
+    gap: theme.spacing(1)
+  },
+  statBox: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    padding: theme.spacing(0.5, 1),
+    borderRadius: theme.spacing(0.75),
+    background: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+    minWidth: 60,
+    gap: theme.spacing(0.5)
+  },
+  statValue: {
+    fontWeight: 600,
+    fontSize: "1rem",
+    lineHeight: 1.1
+  },
+  statLabel: {
+    fontWeight: 400,
+    fontSize: "0.75rem",
+    color: theme.palette.text.secondary
+  },
+  answersBox: {
+    background: theme.palette.warning.light,
+    color: theme.palette.text.primary,
+    border: `1px solid ${theme.palette.warning.main}`
+  },
+  answersBoxAnswered: {
+    background: theme.palette.success.main,
+    color: theme.palette.getContrastText(theme.palette.success.main),
+    border: `1px solid ${theme.palette.success.dark}`
+  },
+  avatar: {
+    width: 24,
+    height: 24
+  },
+  rankingControls: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: theme.spacing(0.5),
+    marginTop: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    borderTop: `1px solid ${theme.palette.divider}`
+  },
+  rankingButton: {
+    padding: theme.spacing(0.5)
+  }
+}));
+function formatShortNumber(num) {
+  return num >= 1e3 ? numeral(num).format("0.0 a") : num.toString();
+}
 const PostsGridItem = (props) => {
   const { post, entity, allowRanking, onRankUpdate, collectionId } = props;
   const [views, setViews] = useState(post.views);
+  const [correctAnswer, setCorrectAnswer] = useState(post.correctAnswer);
+  const [answersCount, setAnswersCount] = useState(post.answersCount);
   const qetaApi = useApi(qetaApiRef);
   const { t } = useTranslationRef(qetaTranslationRef);
+  const classes = useStyles();
   const { lastSignal } = useSignal(`qeta:post_${post.id}`);
   useEffect(() => {
     if (lastSignal?.type === "post_stats") {
       setViews(lastSignal.views);
+      setCorrectAnswer(lastSignal.correctAnswer);
+      setAnswersCount(lastSignal.answersCount);
     }
   }, [lastSignal]);
   const questionRoute = useRouteRef(questionRouteRef);
@@ -50,60 +139,131 @@ const PostsGridItem = (props) => {
       }
     });
   };
-  return /* @__PURE__ */ jsxs(Card, { style: { height: "100%" }, children: [
-    /* @__PURE__ */ jsxs(CardActionArea, { onClick: () => navigate(href), children: [
-      post.headerImage && /* @__PURE__ */ jsx(
-        CardMedia,
-        {
-          component: "img",
-          height: "140",
-          image: post.headerImage,
-          alt: post.title
-        }
-      ),
-      /* @__PURE__ */ jsxs(CardContent, { style: { paddingBottom: "0.5rem" }, children: [
-        /* @__PURE__ */ jsx(Typography, { gutterBottom: true, variant: "h6", component: "div", children: post.title }),
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", gutterBottom: true, children: DOMPurify.sanitize(
-          truncate(removeMarkdownFormatting(post.content), 400)
-        ) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(CardContent, { style: { paddingTop: "0.5rem" }, children: [
-      /* @__PURE__ */ jsx(TagsAndEntities, { entity: post }),
-      /* @__PURE__ */ jsx(Box, { style: { paddingLeft: "0.2rem", paddingTop: "0.5rem" }, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", justifyContent: "space-between", children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: t("common.views", { count: views }) }) }),
-        /* @__PURE__ */ jsxs(Grid, { item: true, children: [
-          /* @__PURE__ */ jsx(
-            SmallAvatar,
+  return /* @__PURE__ */ jsxs(Card, { className: classes.card, children: [
+    /* @__PURE__ */ jsxs(
+      CardActionArea,
+      {
+        onClick: () => navigate(href),
+        "aria-label": post.title,
+        tabIndex: 0,
+        role: "link",
+        style: { outline: "none" },
+        children: [
+          post.headerImage && /* @__PURE__ */ jsx(
+            CardMedia,
             {
-              src: user?.spec?.profile?.picture,
-              alt: name,
-              variant: "rounded",
-              children: initials
+              component: "img",
+              height: "140",
+              image: post.headerImage,
+              alt: post.title,
+              style: { objectFit: "cover" }
             }
           ),
-          /* @__PURE__ */ jsx(UserLink, { entityRef: post.author, anonymous: post.anonymous }),
-          " ",
-          /* @__PURE__ */ jsx(Link, { to: href, className: "qetaPostListItemQuestionBtn", children: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: post.created }) })
+          /* @__PURE__ */ jsxs(CardContent, { className: classes.cardContent, children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                gutterBottom: true,
+                variant: "h6",
+                component: "div",
+                className: classes.title,
+                children: post.title
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "body2",
+                color: "textSecondary",
+                gutterBottom: true,
+                className: classes.content,
+                children: DOMPurify.sanitize(
+                  truncate(removeMarkdownFormatting(post.content), 400)
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(CardContent, { className: classes.cardContentFooter, children: [
+      /* @__PURE__ */ jsx(TagsAndEntities, { entity: post }),
+      /* @__PURE__ */ jsxs(Box, { className: classes.footer, children: [
+        /* @__PURE__ */ jsxs(Box, { className: classes.statsContainer, children: [
+          /* @__PURE__ */ jsxs(Box, { className: classes.statsGroup, children: [
+            /* @__PURE__ */ jsx(Tooltip, { title: post.score >= 1e3 ? post.score : "", arrow: true, children: /* @__PURE__ */ jsxs(Box, { className: classes.statBox, children: [
+              /* @__PURE__ */ jsx(Typography, { className: classes.statValue, children: formatShortNumber(post.score) }),
+              /* @__PURE__ */ jsx(Typography, { className: classes.statLabel, children: t("common.votes") })
+            ] }) }),
+            post.type === "question" && /* @__PURE__ */ jsx(Tooltip, { title: answersCount >= 1e3 ? answersCount : "", arrow: true, children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                className: `${classes.statBox} ${correctAnswer ? classes.answersBoxAnswered : classes.answersBox}`,
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { className: classes.statValue, children: formatShortNumber(answersCount) }),
+                  /* @__PURE__ */ jsx(Typography, { className: classes.statLabel, children: t("common.answers") })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Tooltip, { title: views >= 1e3 ? views : "", arrow: true, children: /* @__PURE__ */ jsxs(Box, { className: classes.statBox, children: [
+              /* @__PURE__ */ jsx(Typography, { className: classes.statValue, children: formatShortNumber(views) }),
+              /* @__PURE__ */ jsx(Typography, { className: classes.statLabel, children: t("common.views") })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { className: classes.statsGroup, children: [
+            /* @__PURE__ */ jsx(
+              SmallAvatar,
+              {
+                src: user?.spec?.profile?.picture,
+                alt: name,
+                variant: "rounded",
+                className: classes.avatar,
+                children: initials
+              }
+            ),
+            /* @__PURE__ */ jsx(UserLink, { entityRef: post.author, anonymous: post.anonymous }),
+            /* @__PURE__ */ jsx(Link, { to: href, className: "qetaPostListItemQuestionBtn", children: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: post.created }) })
+          ] })
+        ] }),
+        allowRanking && /* @__PURE__ */ jsxs(Box, { className: classes.rankingControls, children: [
+          /* @__PURE__ */ jsx(Tooltip, { title: t("ranking.top"), children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => rank("top"),
+              className: classes.rankingButton,
+              children: /* @__PURE__ */ jsx(VerticalAlignTopIcon, { fontSize: "small" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: t("ranking.up"), children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => rank("up"),
+              className: classes.rankingButton,
+              children: /* @__PURE__ */ jsx(KeyboardArrowUpIcon, { fontSize: "small" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: t("ranking.down"), children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => rank("down"),
+              className: classes.rankingButton,
+              children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { fontSize: "small" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: t("ranking.bottom"), children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => rank("bottom"),
+              className: classes.rankingButton,
+              children: /* @__PURE__ */ jsx(VerticalAlignBottomIcon, { fontSize: "small" })
+            }
+          ) })
         ] })
-      ] }) }),
-      allowRanking && /* @__PURE__ */ jsxs(
-        Box,
-        {
-          style: {
-            paddingRight: "0.2em",
-            paddingTop: "0.8em",
-            paddingBottom: "0.2em",
-            float: "right"
-          },
-          children: [
-            /* @__PURE__ */ jsx(Tooltip, { title: t("ranking.top"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => rank("top"), children: /* @__PURE__ */ jsx(VerticalAlignTopIcon, {}) }) }),
-            /* @__PURE__ */ jsx(Tooltip, { title: t("ranking.up"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => rank("up"), children: /* @__PURE__ */ jsx(KeyboardArrowUpIcon, {}) }) }),
-            /* @__PURE__ */ jsx(Tooltip, { title: t("ranking.down"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => rank("down"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {}) }) }),
-            /* @__PURE__ */ jsx(Tooltip, { title: t("ranking.bottom"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => rank("bottom"), children: /* @__PURE__ */ jsx(VerticalAlignBottomIcon, {}) }) })
-          ]
-        }
-      )
+      ] })
     ] })
   ] });
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PostsGridItem.esm.js","sources":["../../../src/components/PostsGrid/PostsGridItem.tsx"],"sourcesContent":["import {\n PostResponse,\n PostType,\n QetaSignal,\n removeMarkdownFormatting,\n truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useEffect, useState } from 'react';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport {\n Box,\n Card,\n CardActionArea,\n CardContent,\n CardMedia,\n Grid,\n IconButton,\n Tooltip,\n Typography,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useNavigate } from 'react-router-dom';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { Link } from '@backstage/core-components';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { qetaApiRef } from '../../api';\nimport VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop';\nimport VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom';\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport { UserLink } from '../Links';\nimport { SmallAvatar } from '../Utility/SmallAvatar';\n\nexport interface PostsGridItemProps {\n post: PostResponse;\n entity?: string;\n type?: PostType;\n allowRanking?: boolean;\n onRankUpdate?: () => void;\n collectionId?: number;\n}\n\nexport const PostsGridItem = (props: PostsGridItemProps) => {\n const { post, entity, allowRanking, onRankUpdate, collectionId } = props;\n const [views, setViews] = useState(post.views);\n const qetaApi = useApi(qetaApiRef);\n const { t } = useTranslationRef(qetaTranslationRef);\n\n const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${post.id}`);\n\n useEffect(() => {\n if (lastSignal?.type === 'post_stats') {\n setViews(lastSignal.views);\n }\n }, [lastSignal]);\n\n const questionRoute = useRouteRef(questionRouteRef);\n const articleRoute = useRouteRef(articleRouteRef);\n const { name, initials, user } = useEntityAuthor(post);\n const navigate = useNavigate();\n\n const route = post.type === 'question' ? questionRoute : articleRoute;\n const href = entity\n ? `${route({\n id: post.id.toString(10),\n })}?entity=${entity}`\n : route({ id: post.id.toString(10) });\n\n const rank = (direction: 'top' \| 'bottom' \| 'up' \| 'down') => {\n if (!collectionId) {\n return;\n }\n qetaApi.rankPostInCollection(collectionId, post.id, direction).then(res => {\n if (res) {\n onRankUpdate?.();\n }\n });\n };\n\n return (\n <Card style={{ height: '100%' }}>\n <CardActionArea onClick={() => navigate(href)}>\n {post.headerImage && (\n <CardMedia\n component=\"img\"\n height=\"140\"\n image={post.headerImage}\n alt={post.title}\n />\n )}\n <CardContent style={{ paddingBottom: '0.5rem' }}>\n <Typography gutterBottom variant=\"h6\" component=\"div\">\n {post.title}\n </Typography>\n <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n {DOMPurify.sanitize(\n truncate(removeMarkdownFormatting(post.content), 400),\n )}\n </Typography>\n </CardContent>\n </CardActionArea>\n <CardContent style={{ paddingTop: '0.5rem' }}>\n <TagsAndEntities entity={post} />\n <Box style={{ paddingLeft: '0.2rem', paddingTop: '0.5rem' }}>\n <Grid container alignItems=\"center\" justifyContent=\"space-between\">\n <Grid item>\n <Typography variant=\"subtitle2\">\n {t('common.views', { count: views })}\n </Typography>\n </Grid>\n <Grid item>\n <SmallAvatar\n src={user?.spec?.profile?.picture}\n alt={name}\n variant=\"rounded\"\n >\n {initials}\n </SmallAvatar>\n <UserLink entityRef={post.author} anonymous={post.anonymous} />{' '}\n <Link to={href} className=\"qetaPostListItemQuestionBtn\">\n <RelativeTimeWithTooltip value={post.created} />\n </Link>\n </Grid>\n </Grid>\n </Box>\n {allowRanking && (\n <Box\n style={{\n paddingRight: '0.2em',\n paddingTop: '0.8em',\n paddingBottom: '0.2em',\n float: 'right',\n }}\n >\n <Tooltip title={t('ranking.top')}>\n <IconButton size=\"small\" onClick={() => rank('top')}>\n <VerticalAlignTopIcon />\n </IconButton>\n </Tooltip>\n <Tooltip title={t('ranking.up')}>\n <IconButton size=\"small\" onClick={() => rank('up')}>\n <KeyboardArrowUpIcon />\n </IconButton>\n </Tooltip>\n <Tooltip title={t('ranking.down')}>\n <IconButton size=\"small\" onClick={() => rank('down')}>\n <KeyboardArrowDownIcon />\n </IconButton>\n </Tooltip>\n <Tooltip title={t('ranking.bottom')}>\n <IconButton size=\"small\" onClick={() => rank('bottom')}>\n <VerticalAlignBottomIcon />\n </IconButton>\n </Tooltip>\n </Box>\n )}\n </CardContent>\n </Card>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"PostsGridItem.esm.js","sources":["../../../src/components/PostsGrid/PostsGridItem.tsx"],"sourcesContent":["import {\n PostResponse,\n PostType,\n QetaSignal,\n removeMarkdownFormatting,\n truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useEffect, useState } from 'react';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport {\n Box,\n Card,\n CardActionArea,\n CardContent,\n CardMedia,\n IconButton,\n Tooltip,\n Typography,\n makeStyles,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useNavigate } from 'react-router-dom';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { Link } from '@backstage/core-components';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { qetaApiRef } from '../../api';\nimport VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop';\nimport VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom';\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport { UserLink } from '../Links';\nimport { SmallAvatar } from '../Utility/SmallAvatar';\nimport numeral from 'numeral';\n\nexport interface PostsGridItemProps {\n post: PostResponse;\n entity?: string;\n type?: PostType;\n allowRanking?: boolean;\n onRankUpdate?: () => void;\n collectionId?: number;\n}\n\nconst useStyles = makeStyles(theme => ({\n card: {\n height: '100%',\n },\n cardContent: {\n padding: theme.spacing(1.5, 2, 1, 2),\n },\n cardContentFooter: {\n padding: theme.spacing(1, 2, 1.5, 2),\n },\n title: {\n fontSize: '1.08rem',\n fontWeight: 600,\n marginBottom: theme.spacing(0.5),\n },\n content: {\n marginBottom: 0,\n },\n footer: {\n paddingTop: theme.spacing(1),\n marginTop: theme.spacing(0.5),\n },\n statsContainer: {\n display: 'flex',\n gap: theme.spacing(1),\n marginBottom: theme.spacing(1),\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n statsGroup: {\n display: 'flex',\n gap: theme.spacing(1),\n },\n statBox: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n padding: theme.spacing(0.5, 1),\n borderRadius: theme.spacing(0.75),\n background: theme.palette.background.paper,\n border: `1px solid ${theme.palette.divider}`,\n minWidth: 60,\n gap: theme.spacing(0.5),\n },\n statValue: {\n fontWeight: 600,\n fontSize: '1rem',\n lineHeight: 1.1,\n },\n statLabel: {\n fontWeight: 400,\n fontSize: '0.75rem',\n color: theme.palette.text.secondary,\n },\n answersBox: {\n background: theme.palette.warning.light,\n color: theme.palette.text.primary,\n border: `1px solid ${theme.palette.warning.main}`,\n },\n answersBoxAnswered: {\n background: theme.palette.success.main,\n color: theme.palette.getContrastText(theme.palette.success.main),\n border: `1px solid ${theme.palette.success.dark}`,\n },\n avatar: {\n width: 24,\n height: 24,\n },\n rankingControls: {\n display: 'flex',\n justifyContent: 'flex-end',\n gap: theme.spacing(0.5),\n marginTop: theme.spacing(1),\n paddingTop: theme.spacing(1),\n borderTop: `1px solid ${theme.palette.divider}`,\n },\n rankingButton: {\n padding: theme.spacing(0.5),\n },\n}));\n\nfunction formatShortNumber(num: number): string {\n return num >= 1000 ? numeral(num).format('0.0 a') : num.toString();\n}\n\nexport const PostsGridItem = (props: PostsGridItemProps) => {\n const { post, entity, allowRanking, onRankUpdate, collectionId } = props;\n const [views, setViews] = useState(post.views);\n const [correctAnswer, setCorrectAnswer] = useState(post.correctAnswer);\n const [answersCount, setAnswersCount] = useState(post.answersCount);\n const qetaApi = useApi(qetaApiRef);\n const { t } = useTranslationRef(qetaTranslationRef);\n const classes = useStyles();\n\n const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${post.id}`);\n\n useEffect(() => {\n if (lastSignal?.type === 'post_stats') {\n setViews(lastSignal.views);\n setCorrectAnswer(lastSignal.correctAnswer);\n setAnswersCount(lastSignal.answersCount);\n }\n }, [lastSignal]);\n\n const questionRoute = useRouteRef(questionRouteRef);\n const articleRoute = useRouteRef(articleRouteRef);\n const { name, initials, user } = useEntityAuthor(post);\n const navigate = useNavigate();\n\n const route = post.type === 'question' ? questionRoute : articleRoute;\n const href = entity\n ? `${route({\n id: post.id.toString(10),\n })}?entity=${entity}`\n : route({ id: post.id.toString(10) });\n\n const rank = (direction: 'top' \| 'bottom' \| 'up' \| 'down') => {\n if (!collectionId) {\n return;\n }\n qetaApi.rankPostInCollection(collectionId, post.id, direction).then(res => {\n if (res) {\n onRankUpdate?.();\n }\n });\n };\n\n return (\n <Card className={classes.card}>\n <CardActionArea\n onClick={() => navigate(href)}\n aria-label={post.title}\n tabIndex={0}\n role=\"link\"\n style={{ outline: 'none' }}\n >\n {post.headerImage && (\n <CardMedia\n component=\"img\"\n height=\"140\"\n image={post.headerImage}\n alt={post.title}\n style={{ objectFit: 'cover' }}\n />\n )}\n <CardContent className={classes.cardContent}>\n <Typography\n gutterBottom\n variant=\"h6\"\n component=\"div\"\n className={classes.title}\n >\n {post.title}\n </Typography>\n <Typography\n variant=\"body2\"\n color=\"textSecondary\"\n gutterBottom\n className={classes.content}\n >\n {DOMPurify.sanitize(\n truncate(removeMarkdownFormatting(post.content), 400),\n )}\n </Typography>\n </CardContent>\n </CardActionArea>\n <CardContent className={classes.cardContentFooter}>\n <TagsAndEntities entity={post} />\n <Box className={classes.footer}>\n <Box className={classes.statsContainer}>\n <Box className={classes.statsGroup}>\n <Tooltip title={post.score >= 1000 ? post.score : ''} arrow>\n <Box className={classes.statBox}>\n <Typography className={classes.statValue}>\n {formatShortNumber(post.score)}\n </Typography>\n <Typography className={classes.statLabel}>\n {t('common.votes')}\n </Typography>\n </Box>\n </Tooltip>\n {post.type === 'question' && (\n <Tooltip title={answersCount >= 1000 ? answersCount : ''} arrow>\n <Box\n className={`${classes.statBox} ${\n correctAnswer\n ? classes.answersBoxAnswered\n : classes.answersBox\n }`}\n >\n <Typography className={classes.statValue}>\n {formatShortNumber(answersCount)}\n </Typography>\n <Typography className={classes.statLabel}>\n {t('common.answers')}\n </Typography>\n </Box>\n </Tooltip>\n )}\n <Tooltip title={views >= 1000 ? views : ''} arrow>\n <Box className={classes.statBox}>\n <Typography className={classes.statValue}>\n {formatShortNumber(views)}\n </Typography>\n <Typography className={classes.statLabel}>\n {t('common.views')}\n </Typography>\n </Box>\n </Tooltip>\n </Box>\n <Box className={classes.statsGroup}>\n <SmallAvatar\n src={user?.spec?.profile?.picture}\n alt={name}\n variant=\"rounded\"\n className={classes.avatar}\n >\n {initials}\n </SmallAvatar>\n <UserLink entityRef={post.author} anonymous={post.anonymous} />\n <Link to={href} className=\"qetaPostListItemQuestionBtn\">\n <RelativeTimeWithTooltip value={post.created} />\n </Link>\n </Box>\n </Box>\n {allowRanking && (\n <Box className={classes.rankingControls}>\n <Tooltip title={t('ranking.top')}>\n <IconButton\n size=\"small\"\n onClick={() => rank('top')}\n className={classes.rankingButton}\n >\n <VerticalAlignTopIcon fontSize=\"small\" />\n </IconButton>\n </Tooltip>\n <Tooltip title={t('ranking.up')}>\n <IconButton\n size=\"small\"\n onClick={() => rank('up')}\n className={classes.rankingButton}\n >\n <KeyboardArrowUpIcon fontSize=\"small\" />\n </IconButton>\n </Tooltip>\n <Tooltip title={t('ranking.down')}>\n <IconButton\n size=\"small\"\n onClick={() => rank('down')}\n className={classes.rankingButton}\n >\n <KeyboardArrowDownIcon fontSize=\"small\" />\n </IconButton>\n </Tooltip>\n <Tooltip title={t('ranking.bottom')}>\n <IconButton\n size=\"small\"\n onClick={() => rank('bottom')}\n className={classes.rankingButton}\n >\n <VerticalAlignBottomIcon fontSize=\"small\" />\n </IconButton>\n </Tooltip>\n </Box>\n )}\n </Box>\n </CardContent>\n </Card>\n );\n};\n"],"names":[],"mappings":"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"}

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

@@ -7,10 +7,12 @@ import { Pagination } from '@material-ui/lab';
 const useStyles = makeStyles(
   () => ({
     root: {
-      marginTop: "2em"
+      marginTop: "2em",
+      marginBottom: "2em"
     },
     pageSizeSelect: {
-      marginRight: "1em"
+      marginRight: "1em",
+      maxHeight: "42px"
     },
     pagination: {}
   }),

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

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

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

@@ -19,7 +19,7 @@ import { VoteButtonContainer } from '../Utility/VoteButtonContainer.esm.js';
 import { makeStyles, Card, CardContent, Grid, Box, Button } from '@material-ui/core';
 const useStyles = makeStyles(
-  () => ({
+  (theme) => ({
     root: {},
     contentContainer: {
       marginLeft: "0.5em",
@@ -36,7 +36,7 @@ const useStyles = makeStyles(
       }
     },
     metadata: {
-      marginTop: "1em"
+      marginTop: theme.spacing(3)
     }
   }),
   { name: "QetaQuestionCard" }
@@ -89,55 +89,84 @@ const QuestionCard = (props) => {
               children: [
                 /* @__PURE__ */ jsx(Grid, { item: true, className: styles.markdownContainer, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: questionEntity.content }) }),
                 /* @__PURE__ */ jsxs(
-                  Grid,
+                  Box,
                   {
-                    container: true,
-                    item: true,
-                    spacing: 1,
-                    justifyContent: "space-between",
+                    display: "flex",
                     alignItems: "flex-end",
+                    justifyContent: "space-between",
                     className: styles.metadata,
+                    style: { width: "100%" },
                     children: [
-                      /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(TagsAndEntities, { entity: questionEntity }) }),
-                      /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsx(AuthorBox, { entity: questionEntity }) }),
-                      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: (question.canEdit || question.canDelete) && /* @__PURE__ */ jsxs(Box, { className: styles.buttons, children: [
-                        question.canEdit && /* @__PURE__ */ jsx(
-                          Button,
-                          {
-                            variant: "outlined",
-                            size: "small",
-                            startIcon: /* @__PURE__ */ jsx(EditIcon, {}),
-                            onClick: () => navigate(
-                              editQuestionRoute({
-                                id: question.id.toString(10)
-                              })
-                            ),
-                            className: "qetaQuestionCardEditBtn",
-                            children: t("questionPage.editButton")
-                          }
-                        ),
-                        question.canDelete && /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsxs(Box, { flex: "1 1 0%", minWidth: 0, children: [
+                        /* @__PURE__ */ jsx(TagsAndEntities, { entity: questionEntity }),
+                        (question.canEdit || question.canDelete) && /* @__PURE__ */ jsxs(Box, { className: styles.buttons, children: [
+                          question.canEdit && /* @__PURE__ */ jsx(
                             Button,
                             {
                               variant: "outlined",
                               size: "small",
-                              color: "secondary",
-                              onClick: handleDeleteModalOpen,
-                              startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
-                              children: t("deleteModal.deleteButton")
+                              startIcon: /* @__PURE__ */ jsx(EditIcon, {}),
+                              onClick: () => navigate(
+                                editQuestionRoute({
+                                  id: question.id.toString(9)
+                                })
+                              ),
+                              className: "qetaQuestionCardEditBtn",
+                              children: t("questionPage.editButton")
                             }
                           ),
-                          /* @__PURE__ */ jsx(
-                            DeleteModal,
-                            {
-                              open: deleteModalOpen,
-                              onClose: handleDeleteModalClose,
-                              entity: questionEntity
-                            }
-                          )
+                          question.canDelete && /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              Button,
+                              {
+                                variant: "outlined",
+                                size: "small",
+                                color: "secondary",
+                                onClick: handleDeleteModalOpen,
+                                startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
+                                children: t("deleteModal.deleteButton")
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              DeleteModal,
+                              {
+                                open: deleteModalOpen,
+                                onClose: handleDeleteModalClose,
+                                entity: questionEntity
+                              }
+                            )
+                          ] })
                         ] })
-                      ] }) })
+                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        Box,
+                        {
+                          display: "flex",
+                          minWidth: 230,
+                          style: { gap: "8px" },
+                          ml: 1,
+                          children: [
+                            questionEntity.updated && questionEntity.updatedBy && /* @__PURE__ */ jsx(
+                              AuthorBox,
+                              {
+                                userEntityRef: questionEntity.updatedBy,
+                                time: questionEntity.updated,
+                                label: t("authorBox.updatedAtTime"),
+                                anonymous: questionEntity.anonymous
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              AuthorBox,
+                              {
+                                userEntityRef: questionEntity.author,
+                                time: questionEntity.created,
+                                label: t("authorBox.postedAtTime"),
+                                anonymous: questionEntity.anonymous
+                              }
+                            )
+                          ]
+                        }
+                      )
                     ]
                   }
                 )

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

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