npm - @drodil/backstage-plugin-qeta-react - Versions diffs - 3.28.2 → 3.29.1 - Mend

@drodil/backstage-plugin-qeta-react 3.28.2 → 3.29.1

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 (113) hide show

package/dist/components/PostsContainer/PostListItem.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PostListItem.esm.js","sources":["../../../src/components/PostsContainer/PostListItem.tsx"],"sourcesContent":["import { Link } from '@backstage/core-components';\nimport { useEffect, useState } from 'react';\nimport DOMPurify from 'dompurify';\nimport {\n PostResponse,\n PostType,\n QetaSignal,\n removeMarkdownFormatting,\n truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { FavoriteButton } from '../Buttons/FavoriteButton';\nimport { capitalize } from 'lodash';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\nimport HelpOutlined from '@material-ui/icons/HelpOutlined';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { VoteButtonContainer } from '../Utility/VoteButtonContainer';\nimport { UserLink } from '../Links';\nimport {\n Chip,\n Grid,\n makeStyles,\n Typography,\n useTheme,\n} from '@material-ui/core';\nimport { SmallAvatar } from '../Utility/SmallAvatar';\n\nexport interface PostListItemProps {\n post: PostResponse;\n entity?: string;\n type?: PostType;\n}\n\nconst useStyles = makeStyles(() => ({\n author: {\n alignItems: 'center',\n display: 'flex',\n height: '24px',\n },\n timestamp: {\n marginLeft: '0.3em',\n },\n}));\n\nexport const PostListItem = (props: PostListItemProps) => {\n const { post, entity, type } = props;\n\n const [correctAnswer, setCorrectAnswer] = useState(post.correctAnswer);\n const [answersCount, setAnswersCount] = useState(post.answersCount);\n const [views, setViews] = useState(post.views);\n const { t } = useTranslationRef(qetaTranslationRef);\n const styles = useStyles();\n\n const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${post.id}`);\n\n useEffect(() => {\n if (lastSignal?.type === 'post_stats') {\n setCorrectAnswer(lastSignal.correctAnswer);\n setAnswersCount(lastSignal.answersCount);\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 theme = useTheme();\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 return (\n <Grid\n container\n spacing={2}\n justifyContent=\"flex-start\"\n style={{ padding: '0.7em', paddingBottom: '1.0em' }}\n >\n <Grid item style={{ paddingTop: '0em', marginTop: '-0.5em' }}>\n <VoteButtonContainer>\n <VoteButtons entity={post} />\n <FavoriteButton entity={post} />\n </VoteButtonContainer>\n </Grid>\n <Grid\n item\n style={{ display: 'inline-block', width: 'calc(100% - 53px)' }}\n >\n <Grid container>\n <Grid\n item\n container\n alignItems=\"center\"\n spacing={0}\n justifyContent=\"space-between\"\n xs={12}\n style={{\n paddingTop: '0',\n paddingBottom: '0.5em',\n marginLeft: '-0.2em',\n }}\n >\n <Grid item style={{ display: 'flex', alignItems: 'center' }}>\n {type === undefined && (\n <Chip\n color=\"secondary\"\n size=\"small\"\n style={{ marginBottom: 0 }}\n label={`${capitalize(post.type)}`}\n icon={\n post.type === 'question' ? (\n <HelpOutlined />\n ) : (\n <CollectionsBookmarkIcon />\n )\n }\n />\n )}\n {post.type === 'question' && (\n <Chip\n variant=\"outlined\"\n size=\"small\"\n style={{\n marginBottom: 0,\n userSelect: 'none',\n // eslint-disable-next-line no-nested-ternary\n borderColor: correctAnswer\n ? theme.palette.success.main\n : answersCount === 0\n ? theme.palette.warning.main\n : undefined,\n }}\n label={t('common.answers', {\n count: answersCount,\n })}\n />\n )}\n <Chip\n variant=\"outlined\"\n size=\"small\"\n style={{ marginBottom: 0 }}\n label={t('common.viewsShort', {\n count: views,\n })}\n />\n </Grid>\n <Grid item>\n <Typography\n variant=\"caption\"\n display=\"inline\"\n className={styles.author}\n >\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={styles.timestamp}>\n <RelativeTimeWithTooltip value={post.created} />\n </Link>\n </Typography>\n </Grid>\n </Grid>\n <Grid item xs={12} style={{ paddingTop: '0px' }}>\n <Typography variant=\"h5\" component=\"div\">\n <Link to={href} className=\"qetaPostListItemQuestionBtn\">\n {post.title}\n </Link>\n </Typography>\n <Typography\n variant=\"body2\"\n noWrap\n component=\"div\"\n className=\"qetaPostListItemContent\"\n style={{ marginTop: '0.6em' }}\n >\n {DOMPurify.sanitize(\n truncate(removeMarkdownFormatting(post.content), 150),\n )}\n </Typography>\n </Grid>\n <Grid item xs={12}>\n <TagsAndEntities entity={post} />\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"PostListItem.esm.js","sources":["../../../src/components/PostsContainer/PostListItem.tsx"],"sourcesContent":["import { Link } from '@backstage/core-components';\nimport { useEffect, useState } from 'react';\nimport DOMPurify from 'dompurify';\nimport {\n PostResponse,\n PostType,\n QetaSignal,\n removeMarkdownFormatting,\n truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n Box,\n Chip,\n makeStyles,\n Tooltip,\n Typography,\n useTheme,\n} from '@material-ui/core';\nimport { AuthorBox } from '../AuthorBox/AuthorBox';\nimport numeral from 'numeral';\nimport QuestionAnswer from '@material-ui/icons/QuestionAnswer';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\n\nexport interface PostListItemProps {\n post: PostResponse;\n entity?: string;\n type?: PostType;\n showTypeLabel?: boolean;\n}\n\nconst useStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start',\n padding: theme.spacing(0.5, 2, 2, 2),\n minHeight: 64,\n transition: 'all 0.2s ease-in-out',\n '&:hover': {\n '& $title': {\n color: theme.palette.primary.main,\n '& a': {\n textDecoration: 'underline',\n },\n },\n },\n },\n metaCol: {\n minWidth: 55,\n maxWidth: 55,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-end',\n justifyContent: 'center',\n marginRight: 16,\n gap: 8,\n },\n metaBox: {\n width: 55,\n textAlign: 'center',\n borderRadius: 6,\n padding: '6px 0px',\n fontWeight: 600,\n fontSize: '18px',\n background: theme.palette.background.paper,\n color: theme.palette.text.primary,\n border: `1px solid ${theme.palette.divider}`,\n lineHeight: '16px',\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 title: {\n fontWeight: 700,\n color: theme.palette.text.primary,\n marginBottom: 2,\n marginTop: 0,\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n lineHeight: 1.2,\n '& a': {\n color: 'inherit',\n textDecoration: 'none',\n },\n },\n content: {\n color: theme.palette.text.secondary,\n margin: '2px 0 4px 0',\n display: '-webkit-box',\n WebkitLineClamp: 2,\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n minHeight: '24px',\n },\n authorRow: {\n display: 'flex',\n alignItems: 'center',\n gap: 6,\n marginTop: 2,\n marginBottom: 2,\n justifyContent: 'flex-end',\n },\n tags: {\n marginTop: 2,\n display: 'flex',\n flexWrap: 'wrap',\n overflow: 'hidden',\n flex: '1 1 0',\n minWidth: 0,\n },\n tagsRow: {\n display: 'flex',\n flexDirection: 'row',\n marginTop: 8,\n gap: 8,\n },\n authorBoxContainer: {\n flex: '0 0 220px',\n width: 220,\n minWidth: 220,\n maxWidth: 220,\n display: 'flex',\n justifyContent: 'flex-end',\n },\n contentContainer: {\n flex: 1,\n minWidth: 0,\n display: 'flex',\n justifyContent: 'stretch',\n flexDirection: 'column',\n height: '100%',\n },\n titleContainer: {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n justifyContent: 'space-between',\n },\n titleWrapper: {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n flex: 1,\n minWidth: 0,\n },\n typeLabel: {\n marginLeft: theme.spacing(1),\n padding: '0.5rem 0.5rem',\n flexShrink: 0,\n },\n}));\n\nfunction formatShortNumber(num: number): string {\n return num >= 1000 ? numeral(num).format('0.0 a') : num.toString();\n}\n\nexport const PostListItem = (props: PostListItemProps) => {\n const { post, entity, showTypeLabel } = props;\n const [correctAnswer, setCorrectAnswer] = useState(post.correctAnswer);\n const [answersCount, setAnswersCount] = useState(post.answersCount);\n const [views, setViews] = useState(post.views);\n const { t } = useTranslationRef(qetaTranslationRef);\n const styles = useStyles();\n const theme = useTheme();\n const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${post.id}`);\n\n useEffect(() => {\n if (lastSignal?.type === 'post_stats') {\n setCorrectAnswer(lastSignal.correctAnswer);\n setAnswersCount(lastSignal.answersCount);\n setViews(lastSignal.views);\n }\n }, [lastSignal]);\n\n const questionRoute = useRouteRef(questionRouteRef);\n const articleRoute = useRouteRef(articleRouteRef);\n\n const route = post.type === 'question' ? questionRoute : articleRoute;\n const href = entity\n ? `${route({ id: post.id.toString(10) })}?entity=${entity}`\n : route({ id: post.id.toString(10) });\n\n return (\n <Box className={styles.root}>\n <Box className={styles.metaCol} aria-label={t('common.postStats')}>\n <Tooltip title={post.score >= 1000 ? post.score : ''} arrow>\n <Box\n className={styles.metaBox}\n aria-label={t('common.votesCount', { count: post.score })}\n >\n {formatShortNumber(post.score)}\n <div\n style={{\n fontWeight: 400,\n fontSize: '13px',\n color: theme.palette.text.secondary,\n }}\n >\n {t('common.votes')}\n </div>\n </Box>\n </Tooltip>\n {post.type === 'question' && (\n <Box\n className={\n correctAnswer\n ? `${styles.metaBox} ${styles.answersBoxAnswered}`\n : `${styles.metaBox} ${styles.answersBox}`\n }\n aria-label={t('common.answersCount', { count: answersCount })}\n >\n <Tooltip title={answersCount >= 1000 ? answersCount : ''} arrow>\n <span>{formatShortNumber(answersCount)}</span>\n </Tooltip>\n <div style={{ fontWeight: 400, fontSize: '13px' }}>\n {t('common.answers')}\n </div>\n </Box>\n )}\n <Tooltip title={views >= 1000 ? views : ''} arrow>\n <Box\n className={styles.metaBox}\n aria-label={t('common.viewsCount', { count: views })}\n >\n {formatShortNumber(views)}\n <div\n style={{\n fontWeight: 400,\n fontSize: '13px',\n color: theme.palette.text.secondary,\n }}\n >\n {t('common.views')}\n </div>\n </Box>\n </Tooltip>\n </Box>\n <Box className={styles.contentContainer}>\n <Box className={styles.titleContainer}>\n <Box className={styles.titleWrapper}>\n <Typography component=\"div\" className={styles.title}>\n <Link\n to={href}\n className=\"qetaPostListItemQuestionBtn\"\n aria-label={post.title}\n tabIndex={0}\n style={{ color: 'inherit', textDecoration: 'none' }}\n >\n {post.title}\n </Link>\n </Typography>\n </Box>\n {showTypeLabel && post.type && (\n <Chip\n size=\"small\"\n icon={\n post.type === 'question' ? (\n <QuestionAnswer />\n ) : (\n <CollectionsBookmarkIcon />\n )\n }\n label={t(`common.${post.type}`)}\n className={styles.typeLabel}\n />\n )}\n </Box>\n <Typography variant=\"body2\" component=\"div\" className={styles.content}>\n <Link\n to={href}\n style={{ color: 'inherit', textDecoration: 'none' }}\n aria-label={t('common.readMore')}\n >\n {DOMPurify.sanitize(\n truncate(removeMarkdownFormatting(post.content), 200),\n )}\n </Link>\n </Typography>\n <Box className={styles.tagsRow}>\n <Box className={styles.tags}>\n <TagsAndEntities entity={post} />\n </Box>\n <Box className={styles.authorBoxContainer}>\n <AuthorBox\n userEntityRef={post.author}\n time={post.created}\n label={t('authorBox.postedAtTime')}\n expert={Boolean(post.experts && post.experts.length > 0)}\n anonymous={post.anonymous}\n />\n </Box>\n </Box>\n </Box>\n </Box>\n );\n};\n"],"names":["QuestionAnswer"],"mappings":";;;;;;;;;;;;;;;;;AAoCA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,KAAA;AAAA,IACf,UAAY,EAAA,YAAA;AAAA,IACZ,SAAS,KAAM,CAAA,OAAA,CAAQ,GAAK,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,IACnC,SAAW,EAAA,EAAA;AAAA,IACX,UAAY,EAAA,sBAAA;AAAA,IACZ,SAAW,EAAA;AAAA,MACT,UAAY,EAAA;AAAA,QACV,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,QAC7B,KAAO,EAAA;AAAA,UACL,cAAgB,EAAA;AAAA;AAClB;AACF;AACF,GACF;AAAA,EACA,OAAS,EAAA;AAAA,IACP,QAAU,EAAA,EAAA;AAAA,IACV,QAAU,EAAA,EAAA;AAAA,IACV,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,QAAA;AAAA,IACf,UAAY,EAAA,UAAA;AAAA,IACZ,cAAgB,EAAA,QAAA;AAAA,IAChB,WAAa,EAAA,EAAA;AAAA,IACb,GAAK,EAAA;AAAA,GACP;AAAA,EACA,OAAS,EAAA;AAAA,IACP,KAAO,EAAA,EAAA;AAAA,IACP,SAAW,EAAA,QAAA;AAAA,IACX,YAAc,EAAA,CAAA;AAAA,IACd,OAAS,EAAA,SAAA;AAAA,IACT,UAAY,EAAA,GAAA;AAAA,IACZ,QAAU,EAAA,MAAA;AAAA,IACV,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,KAAA;AAAA,IACrC,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,IAC1B,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAA,CAAA;AAAA,IAC1C,UAAY,EAAA;AAAA,GACd;AAAA,EACA,UAAY,EAAA;AAAA,IACV,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA;AAAA,IAClC,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,IAC1B,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,QAAQ,IAAI,CAAA;AAAA,GACjD;AAAA,EACA,kBAAoB,EAAA;AAAA,IAClB,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,IAClC,OAAO,KAAM,CAAA,OAAA,CAAQ,gBAAgB,KAAM,CAAA,OAAA,CAAQ,QAAQ,IAAI,CAAA;AAAA,IAC/D,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,QAAQ,IAAI,CAAA;AAAA,GACjD;AAAA,EACA,KAAO,EAAA;AAAA,IACL,UAAY,EAAA,GAAA;AAAA,IACZ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,IAC1B,YAAc,EAAA,CAAA;AAAA,IACd,SAAW,EAAA,CAAA;AAAA,IACX,YAAc,EAAA,UAAA;AAAA,IACd,QAAU,EAAA,QAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,UAAY,EAAA,GAAA;AAAA,IACZ,KAAO,EAAA;AAAA,MACL,KAAO,EAAA,SAAA;AAAA,MACP,cAAgB,EAAA;AAAA;AAClB,GACF;AAAA,EACA,OAAS,EAAA;AAAA,IACP,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,IAC1B,MAAQ,EAAA,aAAA;AAAA,IACR,OAAS,EAAA,aAAA;AAAA,IACT,eAAiB,EAAA,CAAA;AAAA,IACjB,eAAiB,EAAA,UAAA;AAAA,IACjB,QAAU,EAAA,QAAA;AAAA,IACV,YAAc,EAAA,UAAA;AAAA,IACd,SAAW,EAAA;AAAA,GACb;AAAA,EACA,SAAW,EAAA;AAAA,IACT,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,GAAK,EAAA,CAAA;AAAA,IACL,SAAW,EAAA,CAAA;AAAA,IACX,YAAc,EAAA,CAAA;AAAA,IACd,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,SAAW,EAAA,CAAA;AAAA,IACX,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,MAAA;AAAA,IACV,QAAU,EAAA,QAAA;AAAA,IACV,IAAM,EAAA,OAAA;AAAA,IACN,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,KAAA;AAAA,IACf,SAAW,EAAA,CAAA;AAAA,IACX,GAAK,EAAA;AAAA,GACP;AAAA,EACA,kBAAoB,EAAA;AAAA,IAClB,IAAM,EAAA,WAAA;AAAA,IACN,KAAO,EAAA,GAAA;AAAA,IACP,QAAU,EAAA,GAAA;AAAA,IACV,QAAU,EAAA,GAAA;AAAA,IACV,OAAS,EAAA,MAAA;AAAA,IACT,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,gBAAkB,EAAA;AAAA,IAChB,IAAM,EAAA,CAAA;AAAA,IACN,QAAU,EAAA,CAAA;AAAA,IACV,OAAS,EAAA,MAAA;AAAA,IACT,cAAgB,EAAA,SAAA;AAAA,IAChB,aAAe,EAAA,QAAA;AAAA,IACf,MAAQ,EAAA;AAAA,GACV;AAAA,EACA,cAAgB,EAAA;AAAA,IACd,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,IAAM,EAAA,CAAA;AAAA,IACN,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,SAAW,EAAA;AAAA,IACT,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC3B,OAAS,EAAA,eAAA;AAAA,IACT,UAAY,EAAA;AAAA;AAEhB,CAAE,CAAA,CAAA;AAEF,SAAS,kBAAkB,GAAqB,EAAA;AAC9C,EAAO,OAAA,GAAA,IAAO,MAAO,OAAQ,CAAA,GAAG,EAAE,MAAO,CAAA,OAAO,CAAI,GAAA,GAAA,CAAI,QAAS,EAAA;AACnE;AAEa,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAA,MAAM,EAAE,IAAA,EAAM,MAAQ,EAAA,aAAA,EAAkB,GAAA,KAAA;AACxC,EAAA,MAAM,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA,CAAS,KAAK,aAAa,CAAA;AACrE,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA,CAAS,KAAK,YAAY,CAAA;AAClE,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,KAAK,KAAK,CAAA;AAC7C,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAA,MAAM,EAAE,UAAW,EAAA,GAAI,UAAsB,CAAa,UAAA,EAAA,IAAA,CAAK,EAAE,CAAE,CAAA,CAAA;AAEnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,UAAA,EAAY,SAAS,YAAc,EAAA;AACrC,MAAA,gBAAA,CAAiB,WAAW,aAAa,CAAA;AACzC,MAAA,eAAA,CAAgB,WAAW,YAAY,CAAA;AACvC,MAAA,QAAA,CAAS,WAAW,KAAK,CAAA;AAAA;AAC3B,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,aAAA,GAAgB,YAAY,gBAAgB,CAAA;AAClD,EAAM,MAAA,YAAA,GAAe,YAAY,eAAe,CAAA;AAEhD,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,IAAS,KAAA,UAAA,GAAa,aAAgB,GAAA,YAAA;AACzD,EAAM,MAAA,IAAA,GAAO,MACT,GAAA,CAAA,EAAG,KAAM,CAAA,EAAE,IAAI,IAAK,CAAA,EAAA,CAAG,QAAS,CAAA,EAAE,CAAE,EAAC,CAAC,CAAW,QAAA,EAAA,MAAM,CACvD,CAAA,GAAA,KAAA,CAAM,EAAE,EAAA,EAAI,KAAK,EAAG,CAAA,QAAA,CAAS,EAAE,CAAA,EAAG,CAAA;AAEtC,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,IACrB,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OAAI,SAAW,EAAA,MAAA,CAAO,SAAS,YAAY,EAAA,CAAA,CAAE,kBAAkB,CAC9D,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,OAAA,EAAA,EAAQ,OAAO,IAAK,CAAA,KAAA,IAAS,MAAO,IAAK,CAAA,KAAA,GAAQ,EAAI,EAAA,KAAA,EAAK,IACzD,EAAA,QAAA,kBAAA,IAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,WAAW,MAAO,CAAA,OAAA;AAAA,UAClB,cAAY,CAAE,CAAA,mBAAA,EAAqB,EAAE,KAAO,EAAA,IAAA,CAAK,OAAO,CAAA;AAAA,UAEvD,QAAA,EAAA;AAAA,YAAA,iBAAA,CAAkB,KAAK,KAAK,CAAA;AAAA,4BAC7B,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,KAAO,EAAA;AAAA,kBACL,UAAY,EAAA,GAAA;AAAA,kBACZ,QAAU,EAAA,MAAA;AAAA,kBACV,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,iBAC5B;AAAA,gBAEC,YAAE,cAAc;AAAA;AAAA;AACnB;AAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,MACC,IAAA,CAAK,SAAS,UACb,oBAAA,IAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,SACE,EAAA,aAAA,GACI,CAAG,EAAA,MAAA,CAAO,OAAO,CAAI,CAAA,EAAA,MAAA,CAAO,kBAAkB,CAAA,CAAA,GAC9C,CAAG,EAAA,MAAA,CAAO,OAAO,CAAA,CAAA,EAAI,OAAO,UAAU,CAAA,CAAA;AAAA,UAE5C,cAAY,CAAE,CAAA,qBAAA,EAAuB,EAAE,KAAA,EAAO,cAAc,CAAA;AAAA,UAE5D,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAO,YAAgB,IAAA,GAAA,GAAO,YAAe,GAAA,EAAA,EAAI,KAAK,EAAA,IAAA,EAC7D,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAM,QAAkB,EAAA,iBAAA,CAAA,YAAY,GAAE,CACzC,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,GAAK,EAAA,QAAA,EAAU,MAAO,EAAA,EAC7C,QAAE,EAAA,CAAA,CAAA,gBAAgB,CACrB,EAAA;AAAA;AAAA;AAAA,OACF;AAAA,sBAEF,GAAA,CAAC,WAAQ,KAAO,EAAA,KAAA,IAAS,MAAO,KAAQ,GAAA,EAAA,EAAI,OAAK,IAC/C,EAAA,QAAA,kBAAA,IAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,WAAW,MAAO,CAAA,OAAA;AAAA,UAClB,cAAY,CAAE,CAAA,mBAAA,EAAqB,EAAE,KAAA,EAAO,OAAO,CAAA;AAAA,UAElD,QAAA,EAAA;AAAA,YAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,4BACxB,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,KAAO,EAAA;AAAA,kBACL,UAAY,EAAA,GAAA;AAAA,kBACZ,QAAU,EAAA,MAAA;AAAA,kBACV,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,iBAC5B;AAAA,gBAEC,YAAE,cAAc;AAAA;AAAA;AACnB;AAAA;AAAA,OAEJ,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,oBACC,IAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,gBACrB,EAAA,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,cACrB,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,YACrB,EAAA,QAAA,kBAAA,GAAA,CAAC,cAAW,SAAU,EAAA,KAAA,EAAM,SAAW,EAAA,MAAA,CAAO,KAC5C,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA,IAAA;AAAA,YACJ,SAAU,EAAA,6BAAA;AAAA,YACV,cAAY,IAAK,CAAA,KAAA;AAAA,YACjB,QAAU,EAAA,CAAA;AAAA,YACV,KAAO,EAAA,EAAE,KAAO,EAAA,SAAA,EAAW,gBAAgB,MAAO,EAAA;AAAA,YAEjD,QAAK,EAAA,IAAA,CAAA;AAAA;AAAA,WAEV,CACF,EAAA,CAAA;AAAA,QACC,aAAA,IAAiB,KAAK,IACrB,oBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,OAAA;AAAA,YACL,IAAA,EACE,KAAK,IAAS,KAAA,UAAA,uBACXA,kBAAe,EAAA,EAAA,CAAA,uBAEf,uBAAwB,EAAA,EAAA,CAAA;AAAA,YAG7B,KAAO,EAAA,CAAA,CAAE,CAAU,OAAA,EAAA,IAAA,CAAK,IAAI,CAAE,CAAA,CAAA;AAAA,YAC9B,WAAW,MAAO,CAAA;AAAA;AAAA;AACpB,OAEJ,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,WAAU,KAAM,EAAA,SAAA,EAAW,OAAO,OAC5D,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA,IAAA;AAAA,UACJ,KAAO,EAAA,EAAE,KAAO,EAAA,SAAA,EAAW,gBAAgB,MAAO,EAAA;AAAA,UAClD,YAAA,EAAY,EAAE,iBAAiB,CAAA;AAAA,UAE9B,QAAU,EAAA,SAAA,CAAA,QAAA;AAAA,YACT,QAAS,CAAA,wBAAA,CAAyB,IAAK,CAAA,OAAO,GAAG,GAAG;AAAA;AACtD;AAAA,OAEJ,EAAA,CAAA;AAAA,sBACC,IAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,OACrB,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,GAAA,EAAA,EAAI,WAAW,MAAO,CAAA,IAAA,EACrB,8BAAC,eAAgB,EAAA,EAAA,MAAA,EAAQ,MAAM,CACjC,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,kBACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,eAAe,IAAK,CAAA,MAAA;AAAA,YACpB,MAAM,IAAK,CAAA,OAAA;AAAA,YACX,KAAA,EAAO,EAAE,wBAAwB,CAAA;AAAA,YACjC,QAAQ,OAAQ,CAAA,IAAA,CAAK,WAAW,IAAK,CAAA,OAAA,CAAQ,SAAS,CAAC,CAAA;AAAA,YACvD,WAAW,IAAK,CAAA;AAAA;AAAA,SAEpB,EAAA;AAAA,OACF,EAAA;AAAA,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -16,7 +16,7 @@ import { qetaTranslationRef } from '../../translation.esm.js';
 import '@backstage/plugin-permission-react';
 import '@backstage/plugin-permission-common';
 import 'react';
-import { Box, Typography, Grid, Button, Collapse } from '@material-ui/core';
+import { Box, Grid, Typography, Button, Collapse } from '@material-ui/core';
 import '@material-ui/icons/AddCircle';
 import '@material-ui/icons/RemoveCircle';
 import '../../api.esm.js';
@@ -27,6 +27,7 @@ import 'react-use/lib/useAsync';
 import '@material-ui/icons/Visibility';
 import '@material-ui/icons/VisibilityOff';
 import '../Buttons/ButtonContainer.esm.js';
+import { ViewToggle } from '../ViewToggle/ViewToggle.esm.js';
 import { capitalize } from 'lodash';
 import { usePaginatedPosts } from '../../hooks/usePaginatedPosts.esm.js';
 import { SearchBar } from '../SearchBar/SearchBar.esm.js';
@@ -44,7 +45,10 @@ const PostsContainer = (props) => {
     favorite,
     showAskButton,
     showWriteButton,
-    showNoQuestionsBtn
+    showNoQuestionsBtn,
+    showTypeLabel,
+    view,
+    onViewChange
   } = props;
   const {
     onSearchQueryChange,
@@ -84,70 +88,76 @@ const PostsContainer = (props) => {
     });
   }
   return /* @__PURE__ */ jsxs(Box, { className: "qetaPostsContainer", children: [
-    showTitle && /* @__PURE__ */ jsxs(
-      Typography,
-      {
-        variant: "h5",
-        className: "qetaPostsContainerTitle",
-        style: { marginBottom: "1.5em" },
-        children: [
-          shownTitle,
-          " ",
-          link,
-          " ",
-          btn
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsx(
-        SearchBar,
-        {
-          onSearch: onSearchQueryChange,
-          label: t("postsContainer.search.label", {
-            itemType: itemType.toLowerCase()
-          }),
-          loading
-        }
-      ) }),
-      showAskButton && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-        AskQuestionButton,
+    showTitle && /* @__PURE__ */ jsx(Box, { mb: 3, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(
+        Typography,
         {
-          entity: entity ?? filters.entity,
-          entityPage: entity !== void 0,
-          tags
+          variant: "h5",
+          className: "qetaPostsContainerTitle",
+          style: { fontWeight: 500, paddingBottom: 2 },
+          children: [
+            shownTitle,
+            " ",
+            link,
+            " ",
+            btn
+          ]
         }
       ) }),
-      showWriteButton && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-        WriteArticleButton,
-        {
-          entity: entity ?? filters.entity,
-          entityPage: entity !== void 0,
-          tags
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "space-between", children: [
-      response && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(Grid, { item: true, children: [
+        showAskButton && /* @__PURE__ */ jsx(
+          AskQuestionButton,
+          {
+            entity: entity ?? filters.entity,
+            entityPage: entity !== void 0,
+            tags
+          }
+        ),
+        showWriteButton && /* @__PURE__ */ jsx(
+          WriteArticleButton,
+          {
+            entity: entity ?? filters.entity,
+            entityPage: entity !== void 0,
+            tags
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid, { container: true, alignItems: "flex-end", justifyContent: "space-between", children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsx(
+      SearchBar,
+      {
+        onSearch: onSearchQueryChange,
+        label: t("postsContainer.search.label", {
+          itemType: itemType.toLowerCase()
+        }),
+        loading
+      }
+    ) }) }),
+    response && /* @__PURE__ */ jsx(Box, { mt: 2, mb: 2, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
         Typography,
         {
           variant: "h6",
           className: "qetaPostsContainerQuestionCount",
+          style: { fontWeight: 500, paddingBottom: 2 },
           children: t("common.posts", { count: response?.total ?? 0, itemType })
         }
       ) }),
-      response && (showFilters ?? true) && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: () => {
-            setShowFilterPanel(!showFilterPanel);
-          },
-          className: "qetaPostsContainerFilterPanelBtn",
-          startIcon: /* @__PURE__ */ jsx(FilterList, {}),
-          children: t("filterPanel.filterButton")
-        }
-      ) })
-    ] }),
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, alignItems: "center", children: [
+        view && onViewChange && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(ViewToggle, { view, onChange: onViewChange }) }),
+        (showFilters ?? true) && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => {
+              setShowFilterPanel(!showFilterPanel);
+            },
+            className: "qetaPostsContainerFilterPanelBtn",
+            startIcon: /* @__PURE__ */ jsx(FilterList, {}),
+            children: t("filterPanel.filterButton")
+          }
+        ) })
+      ] }) })
+    ] }) }),
     (showFilters ?? true) && /* @__PURE__ */ jsx(Collapse, { in: showFilterPanel, children: /* @__PURE__ */ jsx(
       FilterPanel,
       {
@@ -173,7 +183,8 @@ const PostsContainer = (props) => {
         showNoQuestionsBtn,
         entityPage: entity !== void 0,
         tags: tags ?? filters.tags,
-        type
+        type,
+        showTypeLabel
       }
     )
   ] });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PostsContainer.esm.js","sources":["../../../src/components/PostsContainer/PostsContainer.tsx"],"sourcesContent":["import {\n CommonFilterPanelProps,\n FilterPanel,\n PostFilters,\n} from '../FilterPanel/FilterPanel';\nimport { PostList } from './PostList';\nimport { AskQuestionButton } from '../Buttons/AskQuestionButton';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { TagFollowButton } from '../Buttons/TagFollowButton';\nimport { EntityFollowButton } from '../Buttons/EntityFollowButton';\nimport { WriteArticleButton } from '../Buttons';\nimport { capitalize } from 'lodash';\nimport {\n PaginatedPostsProps,\n usePaginatedPosts,\n} from '../../hooks/usePaginatedPosts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { SearchBar } from '../SearchBar/SearchBar';\nimport { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\n\nexport const PostsContainer = (\n props: PaginatedPostsProps & {\n entity?: string;\n filterPanelProps?: CommonFilterPanelProps;\n },\n) => {\n const {\n type,\n tags,\n author,\n entity,\n showFilters,\n showTitle,\n title,\n favorite,\n showAskButton,\n showWriteButton,\n showNoQuestionsBtn,\n } = props;\n const {\n onSearchQueryChange,\n filters,\n response,\n loading,\n error,\n setShowFilterPanel,\n showFilterPanel,\n onFilterChange,\n onPageChange,\n onPageSizeChange,\n page,\n postsPerPage,\n pageCount,\n } = usePaginatedPosts(props);\n const { t } = useTranslationRef(qetaTranslationRef);\n\n const itemType = capitalize(t(`common.${type ?? 'post'}`, {}));\n let shownTitle = title;\n let link = undefined;\n let btn = undefined;\n if (author) {\n shownTitle = t(`postsContainer.title.by`, { itemType });\n link = <EntityRefLink entityRef={author} hideIcon defaultKind=\"user\" />;\n } else if (entity) {\n shownTitle = t(`postsContainer.title.about`, { itemType });\n link = <EntityRefLink entityRef={entity} />;\n btn = <EntityFollowButton entityRef={entity} />;\n } else if (tags) {\n shownTitle = `#${tags.join(', #')}`;\n if (tags.length === 1) {\n btn = <TagFollowButton tag={tags[0]} />;\n }\n } else if (favorite) {\n shownTitle = t('postsContainer.title.favorite', {\n itemType: itemType.toLowerCase(),\n });\n }\n\n return (\n <Box className=\"qetaPostsContainer\">\n {showTitle && (\n <Typography\n variant=\"h5\"\n className=\"qetaPostsContainerTitle\"\n style={{ marginBottom: '1.5em' }}\n >\n {shownTitle} {link} {btn}\n </Typography>\n )}\n <Grid container justifyContent=\"space-between\">\n <Grid item xs={12} md={4}>\n <SearchBar\n onSearch={onSearchQueryChange}\n label={t('postsContainer.search.label', {\n itemType: itemType.toLowerCase(),\n })}\n loading={loading}\n />\n </Grid>\n {showAskButton && (\n <Grid item>\n <AskQuestionButton\n entity={entity ?? filters.entity}\n entityPage={entity !== undefined}\n tags={tags}\n />\n </Grid>\n )}\n {showWriteButton && (\n <Grid item>\n <WriteArticleButton\n entity={entity ?? filters.entity}\n entityPage={entity !== undefined}\n tags={tags}\n />\n </Grid>\n )}\n </Grid>\n <Grid container justifyContent=\"space-between\">\n {response && (\n <Grid item>\n <Typography\n variant=\"h6\"\n className=\"qetaPostsContainerQuestionCount\"\n >\n {t('common.posts', { count: response?.total ?? 0, itemType })}\n </Typography>\n </Grid>\n )}\n {response && (showFilters ?? true) && (\n <Grid item>\n <Button\n onClick={() => {\n setShowFilterPanel(!showFilterPanel);\n }}\n className=\"qetaPostsContainerFilterPanelBtn\"\n startIcon={<FilterList />}\n >\n {t('filterPanel.filterButton')}\n </Button>\n </Grid>\n )}\n </Grid>\n {(showFilters ?? true) && (\n <Collapse in={showFilterPanel}>\n <FilterPanel<PostFilters>\n onChange={onFilterChange}\n filters={filters}\n type={type}\n showEntityFilter={entity === undefined}\n {...props.filterPanelProps}\n />\n </Collapse>\n )}\n <PostList\n loading={loading}\n error={error}\n response={response}\n onPageChange={onPageChange}\n onPageSizeChange={onPageSizeChange}\n entity={entity ?? filters.entity}\n page={page}\n pageSize={postsPerPage}\n pageCount={pageCount}\n showNoQuestionsBtn={showNoQuestionsBtn}\n entityPage={entity !== undefined}\n tags={tags ?? filters.tags}\n type={type}\n />\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"PostsContainer.esm.js","sources":["../../../src/components/PostsContainer/PostsContainer.tsx"],"sourcesContent":["import {\n CommonFilterPanelProps,\n FilterPanel,\n PostFilters,\n} from '../FilterPanel/FilterPanel';\nimport { PostList } from './PostList';\nimport { AskQuestionButton } from '../Buttons/AskQuestionButton';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { TagFollowButton } from '../Buttons/TagFollowButton';\nimport { EntityFollowButton } from '../Buttons/EntityFollowButton';\nimport { WriteArticleButton } from '../Buttons';\nimport { ViewToggle, ViewType } from '../ViewToggle/ViewToggle';\nimport { capitalize } from 'lodash';\nimport {\n PaginatedPostsProps,\n usePaginatedPosts,\n} from '../../hooks/usePaginatedPosts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { SearchBar } from '../SearchBar/SearchBar';\nimport { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\n\nexport const PostsContainer = (\n props: PaginatedPostsProps & {\n entity?: string;\n filterPanelProps?: CommonFilterPanelProps;\n showTypeLabel?: boolean;\n view?: ViewType;\n onViewChange?: (view: ViewType) => void;\n },\n) => {\n const {\n type,\n tags,\n author,\n entity,\n showFilters,\n showTitle,\n title,\n favorite,\n showAskButton,\n showWriteButton,\n showNoQuestionsBtn,\n showTypeLabel,\n view,\n onViewChange,\n } = props;\n const {\n onSearchQueryChange,\n filters,\n response,\n loading,\n error,\n setShowFilterPanel,\n showFilterPanel,\n onFilterChange,\n onPageChange,\n onPageSizeChange,\n page,\n postsPerPage,\n pageCount,\n } = usePaginatedPosts(props);\n const { t } = useTranslationRef(qetaTranslationRef);\n\n const itemType = capitalize(t(`common.${type ?? 'post'}`, {}));\n let shownTitle = title;\n let link = undefined;\n let btn = undefined;\n if (author) {\n shownTitle = t(`postsContainer.title.by`, { itemType });\n link = <EntityRefLink entityRef={author} hideIcon defaultKind=\"user\" />;\n } else if (entity) {\n shownTitle = t(`postsContainer.title.about`, { itemType });\n link = <EntityRefLink entityRef={entity} />;\n btn = <EntityFollowButton entityRef={entity} />;\n } else if (tags) {\n shownTitle = `#${tags.join(', #')}`;\n if (tags.length === 1) {\n btn = <TagFollowButton tag={tags[0]} />;\n }\n } else if (favorite) {\n shownTitle = t('postsContainer.title.favorite', {\n itemType: itemType.toLowerCase(),\n });\n }\n\n return (\n <Box className=\"qetaPostsContainer\">\n {showTitle && (\n <Box mb={3}>\n <Grid container alignItems=\"center\" justifyContent=\"space-between\">\n <Grid item>\n <Typography\n variant=\"h5\"\n className=\"qetaPostsContainerTitle\"\n style={{ fontWeight: 500, paddingBottom: 2 }}\n >\n {shownTitle} {link} {btn}\n </Typography>\n </Grid>\n <Grid item>\n {showAskButton && (\n <AskQuestionButton\n entity={entity ?? filters.entity}\n entityPage={entity !== undefined}\n tags={tags}\n />\n )}\n {showWriteButton && (\n <WriteArticleButton\n entity={entity ?? filters.entity}\n entityPage={entity !== undefined}\n tags={tags}\n />\n )}\n </Grid>\n </Grid>\n </Box>\n )}\n <Grid container alignItems=\"flex-end\" justifyContent=\"space-between\">\n <Grid item xs={12} md={4}>\n <SearchBar\n onSearch={onSearchQueryChange}\n label={t('postsContainer.search.label', {\n itemType: itemType.toLowerCase(),\n })}\n loading={loading}\n />\n </Grid>\n </Grid>\n {response && (\n <Box mt={2} mb={2}>\n <Grid container alignItems=\"center\" justifyContent=\"space-between\">\n <Grid item>\n <Typography\n variant=\"h6\"\n className=\"qetaPostsContainerQuestionCount\"\n style={{ fontWeight: 500, paddingBottom: 2 }}\n >\n {t('common.posts', { count: response?.total ?? 0, itemType })}\n </Typography>\n </Grid>\n <Grid item>\n <Grid container spacing={1} alignItems=\"center\">\n {view && onViewChange && (\n <Grid item>\n <ViewToggle view={view} onChange={onViewChange} />\n </Grid>\n )}\n {(showFilters ?? true) && (\n <Grid item>\n <Button\n onClick={() => {\n setShowFilterPanel(!showFilterPanel);\n }}\n className=\"qetaPostsContainerFilterPanelBtn\"\n startIcon={<FilterList />}\n >\n {t('filterPanel.filterButton')}\n </Button>\n </Grid>\n )}\n </Grid>\n </Grid>\n </Grid>\n </Box>\n )}\n {(showFilters ?? true) && (\n <Collapse in={showFilterPanel}>\n <FilterPanel<PostFilters>\n onChange={onFilterChange}\n filters={filters}\n type={type}\n showEntityFilter={entity === undefined}\n {...props.filterPanelProps}\n />\n </Collapse>\n )}\n <PostList\n loading={loading}\n error={error}\n response={response}\n onPageChange={onPageChange}\n onPageSizeChange={onPageSizeChange}\n entity={entity ?? filters.entity}\n page={page}\n pageSize={postsPerPage}\n pageCount={pageCount}\n showNoQuestionsBtn={showNoQuestionsBtn}\n entityPage={entity !== undefined}\n tags={tags ?? filters.tags}\n type={type}\n showTypeLabel={showTypeLabel}\n />\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}

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

@@ -25,6 +25,7 @@ import 'react-use/lib/useAsync';
 import '@material-ui/icons/Visibility';
 import '@material-ui/icons/VisibilityOff';
 import '../Buttons/ButtonContainer.esm.js';
+import { ViewToggle } from '../ViewToggle/ViewToggle.esm.js';
 import FilterList from '@material-ui/icons/FilterList';
 import { FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
 import { PostsGridContent } from './PostsGridContent.esm.js';
@@ -45,7 +46,9 @@ const PostsGrid = (props) => {
     showAskButton,
     showWriteButton,
     showNoQuestionsBtn,
-    allowRanking
+    allowRanking,
+    view,
+    onViewChange
   } = props;
   const { t } = useTranslationRef(qetaTranslationRef);
   const {
@@ -127,25 +130,29 @@ const PostsGrid = (props) => {
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "space-between", children: [
-      response && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+    response && /* @__PURE__ */ jsx(Box, { mt: 2, mb: 2, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
         Typography,
         {
           variant: "h6",
           className: "qetaPostsContainerQuestionCount",
+          style: { fontWeight: 500, paddingBottom: 2 },
           children: t("common.posts", { count: response?.total ?? 0, itemType })
         }
       ) }),
-      response && (showFilters ?? true) && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: () => setShowFilterPanel(!showFilterPanel),
-          className: "qetaPostsContainerFilterPanelBtn",
-          startIcon: /* @__PURE__ */ jsx(FilterList, {}),
-          children: t("filterPanel.filterButton")
-        }
-      ) })
-    ] }),
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, alignItems: "center", children: [
+        view && onViewChange && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(ViewToggle, { view, onChange: onViewChange }) }),
+        (showFilters ?? true) && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => setShowFilterPanel(!showFilterPanel),
+            className: "qetaPostsContainerFilterPanelBtn",
+            startIcon: /* @__PURE__ */ jsx(FilterList, {}),
+            children: t("filterPanel.filterButton")
+          }
+        ) })
+      ] }) })
+    ] }) }),
     (showFilters ?? true) && /* @__PURE__ */ jsx(Collapse, { in: showFilterPanel, children: /* @__PURE__ */ jsx(
       FilterPanel,
       {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PostsGrid.esm.js","sources":["../../../src/components/PostsGrid/PostsGrid.tsx"],"sourcesContent":["import { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport {\n AskQuestionButton,\n EntityFollowButton,\n TagFollowButton,\n WriteArticleButton,\n} from '../Buttons';\nimport FilterList from '@material-ui/icons/FilterList';\nimport {\n CommonFilterPanelProps,\n FilterPanel,\n PostFilters,\n} from '../FilterPanel/FilterPanel';\nimport { PostsGridContent } from './PostsGridContent';\nimport { capitalize } from 'lodash';\nimport {\n PaginatedPostsProps,\n usePaginatedPosts,\n} from '../../hooks/usePaginatedPosts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { SearchBar } from '../SearchBar/SearchBar';\nimport { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';\n\nexport type PostGridProps = PaginatedPostsProps & {\n allowRanking?: boolean;\n filterPanelProps?: CommonFilterPanelProps;\n};\n\nexport const PostsGrid = (props: PostGridProps) => {\n const {\n type,\n tags,\n author,\n entity,\n showFilters,\n showTitle,\n title,\n favorite,\n showAskButton,\n showWriteButton,\n showNoQuestionsBtn,\n allowRanking,\n } = props;\n const { t } = useTranslationRef(qetaTranslationRef);\n const {\n onSearchQueryChange,\n filters,\n response,\n loading,\n error,\n setShowFilterPanel,\n showFilterPanel,\n onFilterChange,\n onPageSizeChange,\n postsPerPage,\n page,\n pageCount,\n onPageChange,\n retry,\n } = usePaginatedPosts(props);\n\n const itemType = capitalize(t(`common.${type ?? 'post'}`, {}));\n let shownTitle = title;\n let link = undefined;\n let btn = undefined;\n if (author) {\n shownTitle = t(`postsContainer.title.by`, { itemType });\n link = <EntityRefLink entityRef={author} hideIcon defaultKind=\"user\" />;\n } else if (entity) {\n shownTitle = t(`postsContainer.title.about`, { itemType });\n link = <EntityRefLink entityRef={entity} />;\n btn = <EntityFollowButton entityRef={entity} />;\n } else if (tags) {\n shownTitle = `#${tags.join(', #')}`;\n if (tags.length === 1) {\n btn = <TagFollowButton tag={tags[0]} />;\n }\n } else if (favorite) {\n shownTitle = t('postsContainer.title.favorite', { itemType });\n }\n\n return (\n <Box className=\"qetaPostsGrid\">\n {showTitle && (\n <Typography\n variant=\"h5\"\n className=\"qetaPostsGridTitle\"\n style={{ marginBottom: '1.5em' }}\n >\n {shownTitle} {link} {btn}\n </Typography>\n )}\n <Grid container justifyContent=\"space-between\">\n <Grid item xs={12} md={4}>\n <SearchBar\n onSearch={onSearchQueryChange}\n label={t('postsContainer.search.label', {\n itemType: itemType.toLowerCase(),\n })}\n loading={loading}\n />\n </Grid>\n {showAskButton && (\n <Grid item>\n <AskQuestionButton\n entity={entity ?? filters.entity}\n entityPage={entity !== undefined}\n tags={tags}\n />\n </Grid>\n )}\n {showWriteButton && (\n <Grid item>\n <WriteArticleButton\n entity={entity ?? filters.entity}\n entityPage={entity !== undefined}\n tags={tags}\n />\n </Grid>\n )}\n </Grid>\n <Grid container justifyContent=\"space-between\">\n {response && (\n <Grid item>\n <Typography\n variant=\"h6\"\n className=\"qetaPostsContainerQuestionCount\"\n >\n {t('common.posts', { count: response?.total ?? 0, itemType })}\n </Typography>\n </Grid>\n )}\n {response && (showFilters ?? true) && (\n <Grid item>\n <Button\n onClick={() => setShowFilterPanel(!showFilterPanel)}\n className=\"qetaPostsContainerFilterPanelBtn\"\n startIcon={<FilterList />}\n >\n {t('filterPanel.filterButton')}\n </Button>\n </Grid>\n )}\n </Grid>\n {(showFilters ?? true) && (\n <Collapse in={showFilterPanel}>\n <FilterPanel<PostFilters>\n onChange={onFilterChange}\n filters={filters}\n type={type}\n {...props.filterPanelProps}\n />\n </Collapse>\n )}\n <PostsGridContent\n loading={loading}\n error={error}\n response={response}\n entity={entity}\n showNoQuestionsBtn={showNoQuestionsBtn}\n onPageSizeChange={onPageSizeChange}\n pageSize={postsPerPage}\n entityPage={entity !== undefined}\n tags={tags}\n type={type}\n page={page}\n pageCount={pageCount}\n onPageChange={onPageChange}\n onRankUpdate={() => retry()}\n collectionId={props.collectionId}\n allowRanking={allowRanking}\n />\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"PostsGrid.esm.js","sources":["../../../src/components/PostsGrid/PostsGrid.tsx"],"sourcesContent":["import { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport {\n AskQuestionButton,\n EntityFollowButton,\n TagFollowButton,\n WriteArticleButton,\n} from '../Buttons';\nimport { ViewToggle, ViewType } from '../ViewToggle/ViewToggle';\nimport FilterList from '@material-ui/icons/FilterList';\nimport {\n CommonFilterPanelProps,\n FilterPanel,\n PostFilters,\n} from '../FilterPanel/FilterPanel';\nimport { PostsGridContent } from './PostsGridContent';\nimport { capitalize } from 'lodash';\nimport {\n PaginatedPostsProps,\n usePaginatedPosts,\n} from '../../hooks/usePaginatedPosts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';\nimport { SearchBar } from '../SearchBar/SearchBar.tsx';\n\nexport type PostGridProps = PaginatedPostsProps & {\n allowRanking?: boolean;\n filterPanelProps?: CommonFilterPanelProps;\n view?: ViewType;\n onViewChange?: (view: ViewType) => void;\n};\n\nexport const PostsGrid = (props: PostGridProps) => {\n const {\n type,\n tags,\n author,\n entity,\n showFilters,\n showTitle,\n title,\n favorite,\n showAskButton,\n showWriteButton,\n showNoQuestionsBtn,\n allowRanking,\n view,\n onViewChange,\n } = props;\n const { t } = useTranslationRef(qetaTranslationRef);\n const {\n onSearchQueryChange,\n filters,\n response,\n loading,\n error,\n setShowFilterPanel,\n showFilterPanel,\n onFilterChange,\n onPageSizeChange,\n postsPerPage,\n page,\n pageCount,\n onPageChange,\n retry,\n } = usePaginatedPosts(props);\n\n const itemType = capitalize(t(`common.${type ?? 'post'}`, {}));\n let shownTitle = title;\n let link = undefined;\n let btn = undefined;\n if (author) {\n shownTitle = t(`postsContainer.title.by`, { itemType });\n link = <EntityRefLink entityRef={author} hideIcon defaultKind=\"user\" />;\n } else if (entity) {\n shownTitle = t(`postsContainer.title.about`, { itemType });\n link = <EntityRefLink entityRef={entity} />;\n btn = <EntityFollowButton entityRef={entity} />;\n } else if (tags) {\n shownTitle = `#${tags.join(', #')}`;\n if (tags.length === 1) {\n btn = <TagFollowButton tag={tags[0]} />;\n }\n } else if (favorite) {\n shownTitle = t('postsContainer.title.favorite', { itemType });\n }\n\n return (\n <Box className=\"qetaPostsGrid\">\n {showTitle && (\n <Typography\n variant=\"h5\"\n className=\"qetaPostsGridTitle\"\n style={{ marginBottom: '1.5em' }}\n >\n {shownTitle} {link} {btn}\n </Typography>\n )}\n <Grid container justifyContent=\"space-between\">\n <Grid item xs={12} md={4}>\n <SearchBar\n onSearch={onSearchQueryChange}\n label={t('postsContainer.search.label', {\n itemType: itemType.toLowerCase(),\n })}\n loading={loading}\n />\n </Grid>\n {showAskButton && (\n <Grid item>\n <AskQuestionButton\n entity={entity ?? filters.entity}\n entityPage={entity !== undefined}\n tags={tags}\n />\n </Grid>\n )}\n {showWriteButton && (\n <Grid item>\n <WriteArticleButton\n entity={entity ?? filters.entity}\n entityPage={entity !== undefined}\n tags={tags}\n />\n </Grid>\n )}\n </Grid>\n {response && (\n <Box mt={2} mb={2}>\n <Grid container alignItems=\"center\" justifyContent=\"space-between\">\n <Grid item>\n <Typography\n variant=\"h6\"\n className=\"qetaPostsContainerQuestionCount\"\n style={{ fontWeight: 500, paddingBottom: 2 }}\n >\n {t('common.posts', { count: response?.total ?? 0, itemType })}\n </Typography>\n </Grid>\n <Grid item>\n <Grid container spacing={1} alignItems=\"center\">\n {view && onViewChange && (\n <Grid item>\n <ViewToggle view={view} onChange={onViewChange} />\n </Grid>\n )}\n {(showFilters ?? true) && (\n <Grid item>\n <Button\n onClick={() => setShowFilterPanel(!showFilterPanel)}\n className=\"qetaPostsContainerFilterPanelBtn\"\n startIcon={<FilterList />}\n >\n {t('filterPanel.filterButton')}\n </Button>\n </Grid>\n )}\n </Grid>\n </Grid>\n </Grid>\n </Box>\n )}\n {(showFilters ?? true) && (\n <Collapse in={showFilterPanel}>\n <FilterPanel<PostFilters>\n onChange={onFilterChange}\n filters={filters}\n type={type}\n {...props.filterPanelProps}\n />\n </Collapse>\n )}\n <PostsGridContent\n loading={loading}\n error={error}\n response={response}\n entity={entity}\n showNoQuestionsBtn={showNoQuestionsBtn}\n onPageSizeChange={onPageSizeChange}\n pageSize={postsPerPage}\n entityPage={entity !== undefined}\n tags={tags}\n type={type}\n page={page}\n pageCount={pageCount}\n onPageChange={onPageChange}\n onRankUpdate={() => retry()}\n collectionId={props.collectionId}\n allowRanking={allowRanking}\n />\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}

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

@@ -72,9 +72,10 @@ const PostsGridContent = (props) => {
         container: true,
         direction: "row",
         alignItems: "stretch",
+        justifyContent: "space-between",
         style: { marginTop: "1rem" },
         children: response.posts.map((p) => {
-          return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(Grid, { item: true, lg: 12, xl: 6, children: /* @__PURE__ */ jsx(
             PostsGridItem,
             {
               post: p,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PostsGridContent.esm.js","sources":["../../../src/components/PostsGrid/PostsGridContent.tsx"],"sourcesContent":["import { PostsResponse, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { ChangeEvent, useRef } from 'react';\nimport { WarningPanel } from '@backstage/core-components';\nimport { NoPostsCard } from '../PostsContainer/NoPostsCard';\nimport { Box, Grid } from '@material-ui/core';\nimport { PostsGridItem } from './PostsGridItem';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\n\nexport const PostsGridContent = (props: {\n loading: boolean;\n error: any;\n response?: PostsResponse;\n entity?: string;\n tags?: string[];\n showNoQuestionsBtn?: boolean;\n onPageSizeChange: (size: number) => void;\n pageSize: number;\n entityPage?: boolean;\n type?: PostType;\n onPageChange: (page: number) => void;\n page: number;\n pageCount: number;\n allowRanking?: boolean;\n onRankUpdate?: () => void;\n collectionId?: number;\n}) => {\n const {\n loading,\n error,\n response,\n entity,\n showNoQuestionsBtn = true,\n onPageSizeChange,\n pageSize,\n entityPage,\n tags,\n type,\n onPageChange,\n page,\n pageCount,\n } = props;\n const { t } = useTranslationRef(qetaTranslationRef);\n const gridRef = useRef<HTMLDivElement \| null>(null);\n\n const handlePageChange = (_event: ChangeEvent<unknown>, value: number) => {\n if (gridRef.current) {\n gridRef.current.scrollIntoView();\n }\n onPageChange(value);\n };\n\n const handlePageSizeChange = (event: ChangeEvent<{ value: unknown }>) => {\n if (gridRef.current) {\n gridRef.current.scrollIntoView();\n }\n onPageSizeChange(Number.parseInt(event.target.value as string, 10));\n };\n\n if (loading) {\n return <LoadingGrid />;\n }\n\n const itemType = (type ?? 'post') as any;\n\n if (error \|\| response === undefined) {\n return (\n <WarningPanel\n severity=\"error\"\n title={t('postsList.errorLoading', { itemType })}\n >\n {error?.message}\n </WarningPanel>\n );\n }\n\n if (!response.posts \|\| response.posts.length === 0) {\n return (\n <NoPostsCard\n showNoPostsBtn={showNoQuestionsBtn}\n entity={entity}\n entityPage={entityPage}\n tags={tags}\n type={type}\n />\n );\n }\n\n return (\n <div ref={gridRef}>\n <Box sx={{ mt: 2 }} className=\"qetaPostsGrid\">\n <Grid\n container\n direction=\"row\"\n alignItems=\"stretch\"\n style={{ marginTop: '1rem' }}\n >\n {response.posts.map(p => {\n return (\n <Grid item xs={12} key={p.id}>\n <PostsGridItem\n post={p}\n type={type}\n entity={entity}\n allowRanking={props.allowRanking}\n onRankUpdate={props.onRankUpdate}\n collectionId={props.collectionId}\n />\n </Grid>\n );\n })}\n </Grid>\n <QetaPagination\n pageSize={pageSize}\n handlePageChange={handlePageChange}\n handlePageSizeChange={handlePageSizeChange}\n page={page}\n pageCount={pageCount}\n tooltip={t('postsList.postsPerPage', { itemType })}\n />\n </Box>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAWa,MAAA,gBAAA,GAAmB,CAAC,KAiB3B,KAAA;AACJ,EAAM,MAAA;AAAA,IACJ,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,kBAAqB,GAAA,IAAA;AAAA,IACrB,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAM,MAAA,OAAA,GAAU,OAA8B,IAAI,CAAA;AAElD,EAAM,MAAA,gBAAA,GAAmB,CAAC,MAAA,EAA8B,KAAkB,KAAA;AACxE,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,OAAA,CAAQ,QAAQ,cAAe,EAAA;AAAA;AAEjC,IAAA,YAAA,CAAa,KAAK,CAAA;AAAA,GACpB;AAEA,EAAM,MAAA,oBAAA,GAAuB,CAAC,KAA2C,KAAA;AACvE,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,OAAA,CAAQ,QAAQ,cAAe,EAAA;AAAA;AAEjC,IAAA,gBAAA,CAAiB,OAAO,QAAS,CAAA,KAAA,CAAM,MAAO,CAAA,KAAA,EAAiB,EAAE,CAAC,CAAA;AAAA,GACpE;AAEA,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAA,MAAM,WAAY,IAAQ,IAAA,MAAA;AAE1B,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,KAAO,EAAA,CAAA,CAAE,wBAA0B,EAAA,EAAE,UAAU,CAAA;AAAA,QAE9C,QAAO,EAAA,KAAA,EAAA;AAAA;AAAA,KACV;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAS,CAAA,KAAA,IAAS,QAAS,CAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AAClD,IACE,uBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,cAAgB,EAAA,kBAAA;AAAA,QAChB,MAAA;AAAA,QACA,UAAA;AAAA,QACA,IAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA;AAIJ,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,OAAA,EACR,QAAC,kBAAA,IAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,EAAI,EAAA,CAAA,EAAK,EAAA,SAAA,EAAU,eAC5B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAS,EAAA,IAAA;AAAA,QACT,SAAU,EAAA,KAAA;AAAA,QACV,UAAW,EAAA,SAAA;AAAA,QACX,KAAA,EAAO,EAAE,SAAA,EAAW,MAAO,EAAA;AAAA,QAE1B,QAAA,EAAA,QAAA,CAAS,KAAM,CAAA,GAAA,CAAI,CAAK,CAAA,KAAA;AACvB,UAAA,~~uBACG~~,~~GAAA~~,~~CAAA~~,IAAA,~~EAAA~~,~~EAAK~~,~~IAAI~~,EAAA,~~IAAA~~,~~EAAC~~,IAAI,~~EACb~~,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,IAAM,EAAA,CAAA;AAAA,cACN,IAAA;AAAA,cACA,MAAA;AAAA,cACA,cAAc,KAAM,CAAA,YAAA;AAAA,cACpB,cAAc,KAAM,CAAA,YAAA;AAAA,cACpB,cAAc,KAAM,CAAA;AAAA;AAAA,WACtB,EAAA,~~EARsB~~,EAAE,~~EAS1B~~,CAAA;AAAA,SAEH;AAAA;AAAA,KACH;AAAA,oBACA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,gBAAA;AAAA,QACA,oBAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA;AAAA,QACA,OAAS,EAAA,CAAA,CAAE,wBAA0B,EAAA,EAAE,UAAU;AAAA;AAAA;AACnD,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"PostsGridContent.esm.js","sources":["../../../src/components/PostsGrid/PostsGridContent.tsx"],"sourcesContent":["import { PostsResponse, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { ChangeEvent, useRef } from 'react';\nimport { WarningPanel } from '@backstage/core-components';\nimport { NoPostsCard } from '../PostsContainer/NoPostsCard';\nimport { Box, Grid } from '@material-ui/core';\nimport { PostsGridItem } from './PostsGridItem';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\n\nexport const PostsGridContent = (props: {\n loading: boolean;\n error: any;\n response?: PostsResponse;\n entity?: string;\n tags?: string[];\n showNoQuestionsBtn?: boolean;\n onPageSizeChange: (size: number) => void;\n pageSize: number;\n entityPage?: boolean;\n type?: PostType;\n onPageChange: (page: number) => void;\n page: number;\n pageCount: number;\n allowRanking?: boolean;\n onRankUpdate?: () => void;\n collectionId?: number;\n}) => {\n const {\n loading,\n error,\n response,\n entity,\n showNoQuestionsBtn = true,\n onPageSizeChange,\n pageSize,\n entityPage,\n tags,\n type,\n onPageChange,\n page,\n pageCount,\n } = props;\n const { t } = useTranslationRef(qetaTranslationRef);\n const gridRef = useRef<HTMLDivElement \| null>(null);\n\n const handlePageChange = (_event: ChangeEvent<unknown>, value: number) => {\n if (gridRef.current) {\n gridRef.current.scrollIntoView();\n }\n onPageChange(value);\n };\n\n const handlePageSizeChange = (event: ChangeEvent<{ value: unknown }>) => {\n if (gridRef.current) {\n gridRef.current.scrollIntoView();\n }\n onPageSizeChange(Number.parseInt(event.target.value as string, 10));\n };\n\n if (loading) {\n return <LoadingGrid />;\n }\n\n const itemType = (type ?? 'post') as any;\n\n if (error \|\| response === undefined) {\n return (\n <WarningPanel\n severity=\"error\"\n title={t('postsList.errorLoading', { itemType })}\n >\n {error?.message}\n </WarningPanel>\n );\n }\n\n if (!response.posts \|\| response.posts.length === 0) {\n return (\n <NoPostsCard\n showNoPostsBtn={showNoQuestionsBtn}\n entity={entity}\n entityPage={entityPage}\n tags={tags}\n type={type}\n />\n );\n }\n\n return (\n <div ref={gridRef}>\n <Box sx={{ mt: 2 }} className=\"qetaPostsGrid\">\n <Grid\n container\n direction=\"row\"\n alignItems=\"stretch\"\n justifyContent=\"space-between\"\n style={{ marginTop: '1rem' }}\n >\n {response.posts.map(p => {\n return (\n <Grid item lg={12} xl={6} key={p.id}>\n <PostsGridItem\n post={p}\n type={type}\n entity={entity}\n allowRanking={props.allowRanking}\n onRankUpdate={props.onRankUpdate}\n collectionId={props.collectionId}\n />\n </Grid>\n );\n })}\n </Grid>\n <QetaPagination\n pageSize={pageSize}\n handlePageChange={handlePageChange}\n handlePageSizeChange={handlePageSizeChange}\n page={page}\n pageCount={pageCount}\n tooltip={t('postsList.postsPerPage', { itemType })}\n />\n </Box>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}