npm - @drodil/backstage-plugin-qeta-react - Versions diffs - 3.48.1 → 3.49.0 - Mend

@drodil/backstage-plugin-qeta-react 3.48.1 → 3.49.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 (139) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CommentSection.esm.js","sources":["../../../src/components/CommentSection/CommentSection.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\nimport { useState } from 'react';\nimport { Box, Button, Grid, makeStyles } from '@material-ui/core';\nimport {\n AnswerResponse,\n PostResponse,\n qetaCreateCommentPermission,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { alertApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport { CommentList } from './CommentList';\nimport { qetaApiRef } from '../../api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport AddCommentIcon from '@material-ui/icons/AddComment';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport ExpandLessIcon from '@material-ui/icons/ExpandLess';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\nimport { CommentForm } from './CommentForm.tsx';\nimport { useConfirmNavigationIfEdited } from '../../utils';\n\nexport type QetaCommentSectionClassKey =\n \| 'root'\n \| 'addCommentButton'\n \| 'commentSection'\n \| 'commentForm'\n \| 'prominentButton';\n\nconst useStyles = makeStyles(\n theme => ({\n root: {},\n commentSection: {\n position: 'relative',\n marginLeft: theme.spacing(3.5),\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n left: theme.spacing(1),\n height: 'calc(100% - 46px)',\n width: '1px',\n backgroundColor: theme.palette.divider,\n opacity: 0.4,\n transition: 'all 0.2s ease-in-out',\n zIndex: 1,\n },\n },\n addCommentButton: {\n textTransform: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n color: theme.palette.text.secondary,\n marginTop: '3px',\n '&:hover': {\n backgroundColor: 'transparent',\n color: theme.palette.primary.main,\n },\n },\n commentForm: {\n marginLeft: theme.spacing(2.5),\n marginTop: theme.spacing(1),\n },\n prominentButton: {\n marginTop: theme.spacing(3),\n marginBottom: theme.spacing(2),\n marginLeft: theme.spacing(1),\n padding: theme.spacing(1, 2.5),\n textTransform: 'none',\n fontSize: '1rem',\n },\n }),\n { name: 'QetaCommentSection' },\n);\n\nexport const CommentSection = (props: {\n onCommentAction: (post: PostResponse, answer?: AnswerResponse) => void;\n post: PostResponse;\n answer?: AnswerResponse;\n className?: string;\n showProminentButton?: boolean;\n}) => {\n const { answer, post, onCommentAction, showProminentButton = false } = props;\n const analytics = useAnalytics();\n const qetaApi = useApi(qetaApiRef);\n const [posting, setPosting] = useState(false);\n const [formVisible, setFormVisible] = useState(false);\n const [edited, setEdited] = useState(false);\n const { t } = useTranslationRef(qetaTranslationRef);\n const styles = useStyles();\n\n // Determine the entity to get comments from\n const entity = answer ?? post;\n const commentsCount = entity.comments?.length \|\| 0;\n const [commentsVisible, setCommentsVisible] = useState(true);\n const alertApi = useApi(alertApiRef);\n\n const postComment = (data: { content: string }) => {\n setPosting(true);\n if (answer) {\n qetaApi\n .commentAnswer(post.id, answer.id, data.content)\n .catch(e =>\n alertApi.post({\n message: e.message,\n severity: 'error',\n display: 'transient',\n }),\n )\n .then(a => {\n setFormVisible(false);\n analytics.captureEvent('comment', 'answer');\n setEdited(false);\n if (a) {\n onCommentAction(post, a);\n }\n })\n .finally(() => setPosting(false));\n } else {\n qetaApi\n .commentPost(post.id, data.content)\n .catch(e =>\n alertApi.post({\n message: e.message,\n severity: 'error',\n display: 'transient',\n }),\n )\n .then(q => {\n setFormVisible(false);\n analytics.captureEvent('comment', 'question');\n setEdited(false);\n if (q) {\n onCommentAction(q);\n }\n })\n .finally(() => setPosting(false));\n }\n };\n\n useConfirmNavigationIfEdited(edited);\n\n if (post.status !== 'active') {\n return null;\n }\n\n return (\n <Box\n className={`${styles.root} ${styles.commentSection} ${props.className} qetaCommentSection`}\n >\n {commentsCount > 0 && (\n <Box display=\"flex\" alignItems=\"center\" pl={1}>\n <Button\n size=\"small\"\n variant=\"text\"\n onClick={() => setCommentsVisible(v => !v)}\n style={{\n textTransform: 'none',\n padding: '0.5rem 0.8rem',\n border: 'none',\n backgroundColor: 'transparent',\n }}\n endIcon={\n commentsVisible ? (\n <ExpandMoreIcon fontSize=\"small\" />\n ) : (\n <ExpandLessIcon fontSize=\"small\" />\n )\n }\n >\n {`${commentsCount} ${t('common.comments')}`}\n </Button>\n </Box>\n )}\n {commentsVisible && (\n <Box pl={1}>\n <CommentList\n post={post}\n answer={answer}\n onCommentAction={onCommentAction}\n />\n </Box>\n )}\n <OptionalRequirePermission\n permission={qetaCreateCommentPermission}\n errorPage={<></>}\n >\n {!formVisible && showProminentButton && (\n <Grid container justifyContent=\"flex-start\">\n <Grid item>\n <Button\n variant=\"contained\"\n color=\"primary\"\n size=\"large\"\n startIcon={<AddCommentIcon />}\n onClick={() => setFormVisible(true)}\n className={styles.prominentButton}\n >\n {t('commentSection.leaveComment')}\n </Button>\n </Grid>\n </Grid>\n )}\n {!formVisible && !showProminentButton && (\n <Grid container justifyContent=\"flex-end\">\n <Grid item>\n <Button\n size=\"small\"\n startIcon={<AddCommentIcon fontSize=\"small\" />}\n onClick={() => setFormVisible(true)}\n className={styles.addCommentButton}\n >\n {t('commentSection.addComment')}\n </Button>\n </Grid>\n </Grid>\n )}\n {formVisible && (\n <Box className={styles.commentForm}>\n <CommentForm\n submit={postComment}\n saveButtonTitle={t('commentSection.post')}\n disabled={posting}\n />\n </Box>\n )}\n </OptionalRequirePermission>\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"CommentSection.esm.js","sources":["../../../src/components/CommentSection/CommentSection.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\nimport { useState } from 'react';\nimport { Box, Button, Grid, makeStyles } from '@material-ui/core';\nimport {\n AnswerResponse,\n PostResponse,\n qetaCreateCommentPermission,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { alertApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport { CommentList } from './CommentList';\nimport { qetaApiRef } from '../../api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport AddCommentIcon from '@material-ui/icons/AddComment';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport ExpandLessIcon from '@material-ui/icons/ExpandLess';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\nimport { CommentForm } from './CommentForm.tsx';\nimport { useConfirmNavigationIfEdited } from '../../utils';\n\nexport type QetaCommentSectionClassKey =\n \| 'root'\n \| 'addCommentButton'\n \| 'commentSection'\n \| 'commentForm'\n \| 'prominentButton';\n\nconst useStyles = makeStyles(\n theme => ({\n root: {},\n commentSection: {\n position: 'relative',\n marginLeft: theme.spacing(3.5),\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n left: theme.spacing(1),\n height: 'calc(100% - 46px)',\n width: '1px',\n backgroundColor: theme.palette.divider,\n opacity: 0.4,\n transition: 'all 0.2s ease-in-out',\n zIndex: 1,\n },\n },\n addCommentButton: {\n textTransform: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n color: theme.palette.text.secondary,\n marginTop: '3px',\n '&:hover': {\n backgroundColor: 'transparent',\n color: theme.palette.primary.main,\n },\n },\n commentForm: {\n marginLeft: theme.spacing(2.5),\n marginTop: theme.spacing(1),\n },\n prominentButton: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(2),\n marginLeft: theme.spacing(1),\n padding: theme.spacing(1, 2.5),\n textTransform: 'none',\n fontSize: '1rem',\n },\n }),\n { name: 'QetaCommentSection' },\n);\n\nexport const CommentSection = (props: {\n onCommentAction: (post: PostResponse, answer?: AnswerResponse) => void;\n post: PostResponse;\n answer?: AnswerResponse;\n className?: string;\n showProminentButton?: boolean;\n}) => {\n const { answer, post, onCommentAction, showProminentButton = false } = props;\n const analytics = useAnalytics();\n const qetaApi = useApi(qetaApiRef);\n const [posting, setPosting] = useState(false);\n const [formVisible, setFormVisible] = useState(false);\n const [edited, setEdited] = useState(false);\n const { t } = useTranslationRef(qetaTranslationRef);\n const styles = useStyles();\n\n // Determine the entity to get comments from\n const entity = answer ?? post;\n const commentsCount = entity.comments?.length \|\| 0;\n const [commentsVisible, setCommentsVisible] = useState(true);\n const alertApi = useApi(alertApiRef);\n\n const postComment = (data: { content: string }) => {\n setPosting(true);\n if (answer) {\n qetaApi\n .commentAnswer(post.id, answer.id, data.content)\n .catch(e =>\n alertApi.post({\n message: e.message,\n severity: 'error',\n display: 'transient',\n }),\n )\n .then(a => {\n setFormVisible(false);\n analytics.captureEvent('comment', 'answer');\n setEdited(false);\n if (a) {\n onCommentAction(post, a);\n }\n })\n .finally(() => setPosting(false));\n } else {\n qetaApi\n .commentPost(post.id, data.content)\n .catch(e =>\n alertApi.post({\n message: e.message,\n severity: 'error',\n display: 'transient',\n }),\n )\n .then(q => {\n setFormVisible(false);\n analytics.captureEvent('comment', 'question');\n setEdited(false);\n if (q) {\n onCommentAction(q);\n }\n })\n .finally(() => setPosting(false));\n }\n };\n\n useConfirmNavigationIfEdited(edited);\n\n if (post.status !== 'active') {\n return null;\n }\n\n return (\n <Box\n className={`${styles.root} ${styles.commentSection} ${props.className} qetaCommentSection`}\n >\n {commentsCount > 0 && (\n <Box display=\"flex\" alignItems=\"center\" pl={1}>\n <Button\n size=\"small\"\n variant=\"text\"\n onClick={() => setCommentsVisible(v => !v)}\n style={{\n textTransform: 'none',\n padding: '0.5rem 0.8rem',\n border: 'none',\n backgroundColor: 'transparent',\n }}\n endIcon={\n commentsVisible ? (\n <ExpandMoreIcon fontSize=\"small\" />\n ) : (\n <ExpandLessIcon fontSize=\"small\" />\n )\n }\n >\n {`${commentsCount} ${t('common.comments')}`}\n </Button>\n </Box>\n )}\n {commentsVisible && (\n <Box pl={1}>\n <CommentList\n post={post}\n answer={answer}\n onCommentAction={onCommentAction}\n />\n </Box>\n )}\n <OptionalRequirePermission\n permission={qetaCreateCommentPermission}\n errorPage={<></>}\n >\n {!formVisible && showProminentButton && (\n <Grid container justifyContent=\"flex-start\">\n <Grid item>\n <Button\n variant=\"contained\"\n color=\"primary\"\n size=\"large\"\n startIcon={<AddCommentIcon />}\n onClick={() => setFormVisible(true)}\n className={styles.prominentButton}\n >\n {t('commentSection.leaveComment')}\n </Button>\n </Grid>\n </Grid>\n )}\n {!formVisible && !showProminentButton && (\n <Grid container justifyContent=\"flex-end\">\n <Grid item>\n <Button\n size=\"small\"\n startIcon={<AddCommentIcon fontSize=\"small\" />}\n onClick={() => setFormVisible(true)}\n className={styles.addCommentButton}\n >\n {t('commentSection.addComment')}\n </Button>\n </Grid>\n </Grid>\n )}\n {formVisible && (\n <Box className={styles.commentForm}>\n <CommentForm\n submit={postComment}\n saveButtonTitle={t('commentSection.post')}\n disabled={posting}\n onDiscard={() => setFormVisible(false)}\n />\n </Box>\n )}\n </OptionalRequirePermission>\n </Box>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA2BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,MAAM,EAAC;AAAA,IACP,cAAgB,EAAA;AAAA,MACd,QAAU,EAAA,UAAA;AAAA,MACV,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,MAC7B,WAAa,EAAA;AAAA,QACX,OAAS,EAAA,IAAA;AAAA,QACT,QAAU,EAAA,UAAA;AAAA,QACV,IAAA,EAAM,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QACrB,MAAQ,EAAA,mBAAA;AAAA,QACR,KAAO,EAAA,KAAA;AAAA,QACP,eAAA,EAAiB,MAAM,OAAQ,CAAA,OAAA;AAAA,QAC/B,OAAS,EAAA,GAAA;AAAA,QACT,UAAY,EAAA,sBAAA;AAAA,QACZ,MAAQ,EAAA;AAAA;AACV,KACF;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,aAAe,EAAA,MAAA;AAAA,MACf,eAAiB,EAAA,aAAA;AAAA,MACjB,MAAQ,EAAA,MAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,MAC1B,SAAW,EAAA,KAAA;AAAA,MACX,SAAW,EAAA;AAAA,QACT,eAAiB,EAAA,aAAA;AAAA,QACjB,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA;AAAA;AAC/B,KACF;AAAA,IACA,WAAa,EAAA;AAAA,MACX,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,MAC7B,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC5B;AAAA,IACA,eAAiB,EAAA;AAAA,MACf,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC1B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC7B,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,GAAG,CAAA;AAAA,MAC7B,aAAe,EAAA,MAAA;AAAA,MACf,QAAU,EAAA;AAAA;AACZ,GACF,CAAA;AAAA,EACA,EAAE,MAAM,oBAAqB;AAC/B,CAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,KAMzB,KAAA;AACJ,EAAA,MAAM,EAAE,MAAQ,EAAA,IAAA,EAAM,eAAiB,EAAA,mBAAA,GAAsB,OAAU,GAAA,KAAA;AACvE,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAC1C,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,SAAS,SAAU,EAAA;AAGzB,EAAA,MAAM,SAAS,MAAU,IAAA,IAAA;AACzB,EAAM,MAAA,aAAA,GAAgB,MAAO,CAAA,QAAA,EAAU,MAAU,IAAA,CAAA;AACjD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AAEnC,EAAM,MAAA,WAAA,GAAc,CAAC,IAA8B,KAAA;AACjD,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,OAAA,CACG,cAAc,IAAK,CAAA,EAAA,EAAI,OAAO,EAAI,EAAA,IAAA,CAAK,OAAO,CAC9C,CAAA,KAAA;AAAA,QAAM,CAAA,CAAA,KACL,SAAS,IAAK,CAAA;AAAA,UACZ,SAAS,CAAE,CAAA,OAAA;AAAA,UACX,QAAU,EAAA,OAAA;AAAA,UACV,OAAS,EAAA;AAAA,SACV;AAAA,OACH,CACC,KAAK,CAAK,CAAA,KAAA;AACT,QAAA,cAAA,CAAe,KAAK,CAAA;AACpB,QAAU,SAAA,CAAA,YAAA,CAAa,WAAW,QAAQ,CAAA;AAC1C,QAAA,SAAA,CAAU,KAAK,CAAA;AACf,QAAA,IAAI,CAAG,EAAA;AACL,UAAA,eAAA,CAAgB,MAAM,CAAC,CAAA;AAAA;AACzB,OACD,CACA,CAAA,OAAA,CAAQ,MAAM,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,KAC7B,MAAA;AACL,MAAA,OAAA,CACG,WAAY,CAAA,IAAA,CAAK,EAAI,EAAA,IAAA,CAAK,OAAO,CACjC,CAAA,KAAA;AAAA,QAAM,CAAA,CAAA,KACL,SAAS,IAAK,CAAA;AAAA,UACZ,SAAS,CAAE,CAAA,OAAA;AAAA,UACX,QAAU,EAAA,OAAA;AAAA,UACV,OAAS,EAAA;AAAA,SACV;AAAA,OACH,CACC,KAAK,CAAK,CAAA,KAAA;AACT,QAAA,cAAA,CAAe,KAAK,CAAA;AACpB,QAAU,SAAA,CAAA,YAAA,CAAa,WAAW,UAAU,CAAA;AAC5C,QAAA,SAAA,CAAU,KAAK,CAAA;AACf,QAAA,IAAI,CAAG,EAAA;AACL,UAAA,eAAA,CAAgB,CAAC,CAAA;AAAA;AACnB,OACD,CACA,CAAA,OAAA,CAAQ,MAAM,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA;AACpC,GACF;AAEA,EAAA,4BAAA,CAA6B,MAAM,CAAA;AAEnC,EAAI,IAAA,IAAA,CAAK,WAAW,QAAU,EAAA;AAC5B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,MAAO,CAAA,IAAI,IAAI,MAAO,CAAA,cAAc,CAAI,CAAA,EAAA,KAAA,CAAM,SAAS,CAAA,mBAAA,CAAA;AAAA,MAEpE,QAAA,EAAA;AAAA,QAAgB,aAAA,GAAA,CAAA,wBACd,GAAI,EAAA,EAAA,OAAA,EAAQ,QAAO,UAAW,EAAA,QAAA,EAAS,IAAI,CAC1C,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,OAAA;AAAA,YACL,OAAQ,EAAA,MAAA;AAAA,YACR,OAAS,EAAA,MAAM,kBAAmB,CAAA,CAAA,CAAA,KAAK,CAAC,CAAC,CAAA;AAAA,YACzC,KAAO,EAAA;AAAA,cACL,aAAe,EAAA,MAAA;AAAA,cACf,OAAS,EAAA,eAAA;AAAA,cACT,MAAQ,EAAA,MAAA;AAAA,cACR,eAAiB,EAAA;AAAA,aACnB;AAAA,YACA,OAAA,EACE,eACE,mBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,SAAQ,CAEjC,mBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AAAA,YAIpC,QAAG,EAAA,CAAA,EAAA,aAAa,CAAI,CAAA,EAAA,CAAA,CAAE,iBAAiB,CAAC,CAAA;AAAA;AAAA,SAE7C,EAAA,CAAA;AAAA,QAED,eACC,oBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,MAAA;AAAA,YACA;AAAA;AAAA,SAEJ,EAAA,CAAA;AAAA,wBAEF,IAAA;AAAA,UAAC,yBAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA,2BAAA;AAAA,YACZ,2BAAa,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA;AAAA,YAEZ,QAAA,EAAA;AAAA,cAAC,CAAA,WAAA,IAAe,mBACf,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,cAAA,EAAe,YAC7B,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,QAAA,kBAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,OAAQ,EAAA,WAAA;AAAA,kBACR,KAAM,EAAA,SAAA;AAAA,kBACN,IAAK,EAAA,OAAA;AAAA,kBACL,SAAA,sBAAY,cAAe,EAAA,EAAA,CAAA;AAAA,kBAC3B,OAAA,EAAS,MAAM,cAAA,CAAe,IAAI,CAAA;AAAA,kBAClC,WAAW,MAAO,CAAA,eAAA;AAAA,kBAEjB,YAAE,6BAA6B;AAAA;AAAA,iBAEpC,CACF,EAAA,CAAA;AAAA,cAED,CAAC,WAAA,IAAe,CAAC,mBAAA,oBACf,GAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,cAAe,EAAA,UAAA,EAC7B,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,QAAA,kBAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,IAAK,EAAA,OAAA;AAAA,kBACL,SAAW,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA;AAAA,kBAC5C,OAAA,EAAS,MAAM,cAAA,CAAe,IAAI,CAAA;AAAA,kBAClC,WAAW,MAAO,CAAA,gBAAA;AAAA,kBAEjB,YAAE,2BAA2B;AAAA;AAAA,iBAElC,CACF,EAAA,CAAA;AAAA,cAED,WACC,oBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAW,OAAO,WACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,gBAAC,WAAA;AAAA,gBAAA;AAAA,kBACC,MAAQ,EAAA,WAAA;AAAA,kBACR,eAAA,EAAiB,EAAE,qBAAqB,CAAA;AAAA,kBACxC,QAAU,EAAA,OAAA;AAAA,kBACV,SAAA,EAAW,MAAM,cAAA,CAAe,KAAK;AAAA;AAAA,eAEzC,EAAA;AAAA;AAAA;AAAA;AAEJ;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/ContentHeader/ContentHeader.esm.js ADDED Viewed

@@ -0,0 +1,83 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyles, Box, Typography } from '@material-ui/core';
+import '@material-ui/icons/HelpOutline';
+import '@drodil/backstage-plugin-qeta-common';
+import '@backstage/core-plugin-api';
+import '../../routes.esm.js';
+import '@backstage/core-plugin-api/alpha';
+import '../../translation.esm.js';
+import '@backstage/plugin-permission-react';
+import '@backstage/plugin-permission-common';
+import '@backstage/core-components';
+import '@material-ui/icons/Visibility';
+import '@material-ui/icons/VisibilityOff';
+import '../../api.esm.js';
+import 'react-use';
+import 'react';
+import '@backstage/catalog-model';
+import 'dataloader';
+import '@backstage/plugin-catalog-react';
+import 'react-use/lib/useAsync';
+import '@material-ui/icons/Create';
+import '@material-ui/icons/Link';
+import '@material-ui/icons/OpenInNew';
+import '@material-ui/icons/PlaylistAdd';
+import '@material-ui/icons/AddCircle';
+import '@material-ui/icons/RemoveCircle';
+import { ButtonContainer } from '../Buttons/ButtonContainer.esm.js';
+const useStyles = makeStyles((theme) => ({
+  root: {
+    marginBottom: theme.spacing(3),
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: theme.spacing(2)
+  },
+  title: {
+    fontWeight: 700,
+    marginBottom: 0
+  },
+  titleIcon: {
+    marginRight: theme.spacing(1),
+    display: "flex",
+    alignItems: "center"
+  },
+  description: {
+    color: theme.palette.text.secondary
+  }
+}));
+const ContentHeader = (props) => {
+  const { title, titleIcon, description, children, titleComponent } = props;
+  const classes = useStyles();
+  return /* @__PURE__ */ jsxs(Box, { className: classes.root, children: [
+    /* @__PURE__ */ jsxs(Box, { flex: "1 1 auto", mr: 2, children: [
+      /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", mb: 1, children: titleComponent ? /* @__PURE__ */ jsx(Fragment, { children: titleComponent }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        titleIcon && /* @__PURE__ */ jsx(Box, { className: classes.titleIcon, children: titleIcon }),
+        title && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "h4",
+            component: "h1",
+            className: classes.title,
+            children: title
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body2",
+          className: classes.description,
+          component: "div",
+          children: description
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Box, { flex: "0 0 auto", children: /* @__PURE__ */ jsx(ButtonContainer, { children }) })
+  ] });
+};
+export { ContentHeader };
+//# sourceMappingURL=ContentHeader.esm.js.map

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

@@ -0,0 +1 @@

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

package/dist/components/ContentHeaderCard/ContentHeaderCard.esm.js ADDED Viewed

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makeStyles, Card, CardContent, Grid, Box, CardMedia, Typography, Tooltip } from '@material-ui/core';
+import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer.esm.js';
+import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities.esm.js';
+const useStyles = makeStyles((theme) => ({
+  card: {
+    marginBottom: theme.spacing(3),
+    backgroundColor: theme.palette.background.paper,
+    borderLeft: `4px solid ${theme.palette.primary.main}`
+  },
+  content: {
+    padding: theme.spacing(3),
+    "&:last-child": {
+      paddingBottom: theme.spacing(3)
+    }
+  },
+  headerContent: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "center"
+  },
+  statsRow: {
+    display: "flex",
+    gap: theme.spacing(4),
+    marginTop: theme.spacing(2),
+    flexWrap: "wrap"
+  },
+  statItem: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  },
+  statValue: {
+    fontWeight: "bold",
+    fontSize: "1.2rem",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1)
+  },
+  statLabel: {
+    color: theme.palette.text.secondary,
+    textTransform: "uppercase",
+    fontSize: "0.75rem",
+    letterSpacing: "0.05em"
+  },
+  description: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    color: theme.palette.text.secondary
+  },
+  media: {
+    height: 180,
+    width: 180,
+    borderRadius: theme.shape.borderRadius,
+    objectFit: "cover",
+    objectPosition: "50% 50%",
+    boxShadow: theme.shadows[2]
+  },
+  mediaContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingRight: theme.spacing(3),
+    [theme.breakpoints.down("xs")]: {
+      paddingRight: 0,
+      marginBottom: theme.spacing(2)
+    }
+  }
+}));
+const ContentHeaderCard = (props) => {
+  const {
+    title,
+    description,
+    image,
+    imageIcon,
+    stats,
+    tagsAndEntities,
+    actions,
+    children
+  } = props;
+  const classes = useStyles();
+  return /* @__PURE__ */ jsx(Card, { className: classes.card, variant: "outlined", children: /* @__PURE__ */ jsx(CardContent, { className: classes.content, children: /* @__PURE__ */ jsxs(Grid, { container: true, children: [
+    (image || imageIcon) && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Box, { className: classes.mediaContainer, children: image ? /* @__PURE__ */ jsx(
+      CardMedia,
+      {
+        className: classes.media,
+        image,
+        component: "img"
+      }
+    ) : /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: classes.media,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        bgcolor: "background.default",
+        color: "primary.main",
+        children: imageIcon
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(Grid, { item: true, xs: true, container: true, className: classes.headerContent, children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ jsx(Box, { children: title && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "h4",
+                component: "h1",
+                gutterBottom: true,
+                style: { fontWeight: "bold" },
+                children: title
+              }
+            ) }),
+            actions && /* @__PURE__ */ jsx(Box, { children: actions })
+          ]
+        }
+      ),
+      description && /* @__PURE__ */ jsx(Box, { className: classes.description, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: description }) }),
+      tagsAndEntities && (tagsAndEntities.entity || tagsAndEntities.tags && tagsAndEntities.tags.length > 0 || tagsAndEntities.entities && tagsAndEntities.entities.length > 0) && /* @__PURE__ */ jsx(Box, { mb: 2, children: /* @__PURE__ */ jsx(
+        TagsAndEntities,
+        {
+          entity: tagsAndEntities.entity || {
+            tags: tagsAndEntities.tags,
+            entities: tagsAndEntities.entities
+          }
+        }
+      ) }),
+      stats && stats.length > 0 && /* @__PURE__ */ jsx(Box, { className: classes.statsRow, children: stats.map((stat, index) => /* @__PURE__ */ jsx(Tooltip, { title: stat.label, children: /* @__PURE__ */ jsxs(Box, { className: classes.statItem, children: [
+        /* @__PURE__ */ jsxs(Typography, { className: classes.statValue, color: "primary", children: [
+          stat.icon,
+          " ",
+          stat.value
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { className: classes.statLabel, children: stat.label })
+      ] }) }, index)) }),
+      children && /* @__PURE__ */ jsx(Box, { mt: 2, children })
+    ] })
+  ] }) }) });
+};
+export { ContentHeaderCard };
+//# sourceMappingURL=ContentHeaderCard.esm.js.map

package/dist/components/ContentHeaderCard/ContentHeaderCard.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ContentHeaderCard.esm.js","sources":["../../../src/components/ContentHeaderCard/ContentHeaderCard.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport {\n Box,\n Card,\n CardContent,\n CardMedia,\n Grid,\n makeStyles,\n Tooltip,\n Typography,\n} from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { Collection } from '@drodil/backstage-plugin-qeta-common';\n\nconst useStyles = makeStyles(theme => ({\n card: {\n marginBottom: theme.spacing(3),\n backgroundColor: theme.palette.background.paper,\n borderLeft: `4px solid ${theme.palette.primary.main}`,\n },\n content: {\n padding: theme.spacing(3),\n '&:last-child': {\n paddingBottom: theme.spacing(3),\n },\n },\n headerContent: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n justifyContent: 'center',\n },\n statsRow: {\n display: 'flex',\n gap: theme.spacing(4),\n marginTop: theme.spacing(2),\n flexWrap: 'wrap',\n },\n statItem: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n statValue: {\n fontWeight: 'bold',\n fontSize: '1.2rem',\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n },\n statLabel: {\n color: theme.palette.text.secondary,\n textTransform: 'uppercase',\n fontSize: '0.75rem',\n letterSpacing: '0.05em',\n },\n description: {\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2),\n color: theme.palette.text.secondary,\n },\n media: {\n height: 180,\n width: 180,\n borderRadius: theme.shape.borderRadius,\n objectFit: 'cover',\n objectPosition: '50% 50%',\n boxShadow: theme.shadows[2],\n },\n mediaContainer: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n paddingRight: theme.spacing(3),\n [theme.breakpoints.down('xs')]: {\n paddingRight: 0,\n marginBottom: theme.spacing(2),\n },\n },\n}));\n\nexport interface ContentHeaderCardProps {\n title?: ReactNode;\n description?: string;\n image?: string;\n imageIcon?: ReactNode;\n tagsAndEntities?: {\n entity?: Collection;\n tags?: string[];\n entities?: string[];\n };\n stats?: {\n label: string;\n value: ReactNode;\n icon?: ReactNode;\n }[];\n actions?: ReactNode;\n children?: ReactNode;\n}\n\nexport const ContentHeaderCard = (props: ContentHeaderCardProps) => {\n const {\n title,\n description,\n image,\n imageIcon,\n stats,\n tagsAndEntities,\n actions,\n children,\n } = props;\n const classes = useStyles();\n\n return (\n <Card className={classes.card} variant=\"outlined\">\n <CardContent className={classes.content}>\n <Grid container>\n {(image || imageIcon) && (\n <Grid item>\n <Box className={classes.mediaContainer}>\n {image ? (\n <CardMedia\n className={classes.media}\n image={image}\n component=\"img\"\n />\n ) : (\n <Box\n className={classes.media}\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n bgcolor=\"background.default\"\n color=\"primary.main\"\n >\n {imageIcon}\n </Box>\n )}\n </Box>\n </Grid>\n )}\n\n <Grid item xs container className={classes.headerContent}>\n <Box\n display=\"flex\"\n justifyContent=\"space-between\"\n alignItems=\"flex-start\"\n width=\"100%\"\n >\n <Box>\n {title && (\n <Typography\n variant=\"h4\"\n component=\"h1\"\n gutterBottom\n style={{ fontWeight: 'bold' }}\n >\n {title}\n </Typography>\n )}\n </Box>\n {actions && <Box>{actions}</Box>}\n </Box>\n\n {description && (\n <Box className={classes.description}>\n <MarkdownRenderer content={description} />\n </Box>\n )}\n\n {tagsAndEntities &&\n (tagsAndEntities.entity ||\n (tagsAndEntities.tags && tagsAndEntities.tags.length > 0) ||\n (tagsAndEntities.entities &&\n tagsAndEntities.entities.length > 0)) && (\n <Box mb={2}>\n <TagsAndEntities\n entity={\n tagsAndEntities.entity ||\n ({\n tags: tagsAndEntities.tags,\n entities: tagsAndEntities.entities,\n } as any)\n }\n />\n </Box>\n )}\n\n {stats && stats.length > 0 && (\n <Box className={classes.statsRow}>\n {stats.map((stat, index) => (\n <Tooltip key={index} title={stat.label}>\n <Box className={classes.statItem}>\n <Typography className={classes.statValue} color=\"primary\">\n {stat.icon} {stat.value}\n </Typography>\n <Typography className={classes.statLabel}>\n {stat.label}\n </Typography>\n </Box>\n </Tooltip>\n ))}\n </Box>\n )}\n {children && <Box mt={2}>{children}</Box>}\n </Grid>\n </Grid>\n </CardContent>\n </Card>\n );\n};\n"],"names":[],"mappings":";;;;;AAeA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,IAAM,EAAA;AAAA,IACJ,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,KAAA;AAAA,IAC1C,UAAY,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,QAAQ,IAAI,CAAA;AAAA,GACrD;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,cAAgB,EAAA;AAAA,MACd,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAChC,GACF;AAAA,EACA,aAAe,EAAA;AAAA,IACb,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,QAAA;AAAA,IACf,MAAQ,EAAA,MAAA;AAAA,IACR,cAAgB,EAAA;AAAA,GAClB;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,QAAA;AAAA,IACf,UAAY,EAAA;AAAA,GACd;AAAA,EACA,SAAW,EAAA;AAAA,IACT,UAAY,EAAA,MAAA;AAAA,IACZ,QAAU,EAAA,QAAA;AAAA,IACV,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,GACtB;AAAA,EACA,SAAW,EAAA;AAAA,IACT,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,IAC1B,aAAe,EAAA,WAAA;AAAA,IACf,QAAU,EAAA,SAAA;AAAA,IACV,aAAe,EAAA;AAAA,GACjB;AAAA,EACA,WAAa,EAAA;AAAA,IACX,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA,GAC5B;AAAA,EACA,KAAO,EAAA;AAAA,IACL,MAAQ,EAAA,GAAA;AAAA,IACR,KAAO,EAAA,GAAA;AAAA,IACP,YAAA,EAAc,MAAM,KAAM,CAAA,YAAA;AAAA,IAC1B,SAAW,EAAA,OAAA;AAAA,IACX,cAAgB,EAAA,SAAA;AAAA,IAChB,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,GAC5B;AAAA,EACA,cAAgB,EAAA;AAAA,IACd,OAAS,EAAA,MAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,IACZ,cAAgB,EAAA,QAAA;AAAA,IAChB,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,CAAC,KAAM,CAAA,WAAA,CAAY,IAAK,CAAA,IAAI,CAAC,GAAG;AAAA,MAC9B,YAAc,EAAA,CAAA;AAAA,MACd,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAC/B;AAEJ,CAAE,CAAA,CAAA;AAqBW,MAAA,iBAAA,GAAoB,CAAC,KAAkC,KAAA;AAClE,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,eAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA,EAAK,SAAW,EAAA,OAAA,CAAQ,MAAM,OAAQ,EAAA,UAAA,EACrC,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAY,WAAW,OAAQ,CAAA,OAAA,EAC9B,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IACX,EAAA,QAAA,EAAA;AAAA,IAAS,CAAA,KAAA,IAAA,SAAA,qBACR,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EACR,8BAAC,GAAI,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,cAAA,EACrB,QACC,EAAA,KAAA,mBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAQ,CAAA,KAAA;AAAA,QACnB,KAAA;AAAA,QACA,SAAU,EAAA;AAAA;AAAA,KAGZ,mBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAQ,CAAA,KAAA;AAAA,QACnB,OAAQ,EAAA,MAAA;AAAA,QACR,UAAW,EAAA,QAAA;AAAA,QACX,cAAe,EAAA,QAAA;AAAA,QACf,OAAQ,EAAA,oBAAA;AAAA,QACR,KAAM,EAAA,cAAA;AAAA,QAEL,QAAA,EAAA;AAAA;AAAA,OAGP,CACF,EAAA,CAAA;AAAA,oBAGF,IAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAE,MAAC,SAAS,EAAA,IAAA,EAAC,SAAW,EAAA,OAAA,CAAQ,aACzC,EAAA,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,MAAA;AAAA,UACR,cAAe,EAAA,eAAA;AAAA,UACf,UAAW,EAAA,YAAA;AAAA,UACX,KAAM,EAAA,MAAA;AAAA,UAEN,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,OACE,QACC,EAAA,KAAA,oBAAA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,OAAQ,EAAA,IAAA;AAAA,gBACR,SAAU,EAAA,IAAA;AAAA,gBACV,YAAY,EAAA,IAAA;AAAA,gBACZ,KAAA,EAAO,EAAE,UAAA,EAAY,MAAO,EAAA;AAAA,gBAE3B,QAAA,EAAA;AAAA;AAAA,aAGP,EAAA,CAAA;AAAA,YACC,OAAA,oBAAY,GAAA,CAAA,GAAA,EAAA,EAAK,QAAQ,EAAA,OAAA,EAAA;AAAA;AAAA;AAAA,OAC5B;AAAA,MAEC,WAAA,oBACE,GAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,aACtB,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA,EAAiB,OAAS,EAAA,WAAA,EAAa,CAC1C,EAAA,CAAA;AAAA,MAGD,oBACE,eAAgB,CAAA,MAAA,IACd,gBAAgB,IAAQ,IAAA,eAAA,CAAgB,KAAK,MAAS,GAAA,CAAA,IACtD,eAAgB,CAAA,QAAA,IACf,gBAAgB,QAAS,CAAA,MAAA,GAAS,sBACnC,GAAA,CAAA,GAAA,EAAA,EAAI,IAAI,CACP,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,MAAA,EACE,gBAAgB,MACf,IAAA;AAAA,YACC,MAAM,eAAgB,CAAA,IAAA;AAAA,YACtB,UAAU,eAAgB,CAAA;AAAA;AAC5B;AAAA,OAGN,EAAA,CAAA;AAAA,MAGH,KAAA,IAAS,MAAM,MAAS,GAAA,CAAA,wBACtB,GAAI,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,QAAA,EACrB,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAM,EAAA,KAAA,qBACf,GAAA,CAAA,OAAA,EAAA,EAAoB,KAAO,EAAA,IAAA,CAAK,OAC/B,QAAC,kBAAA,IAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,QACtB,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,SAAA,EAAW,OAAM,SAC7C,EAAA,QAAA,EAAA;AAAA,UAAK,IAAA,CAAA,IAAA;AAAA,UAAK,GAAA;AAAA,UAAE,IAAK,CAAA;AAAA,SACpB,EAAA,CAAA;AAAA,4BACC,UAAW,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,SAAA,EAC5B,eAAK,KACR,EAAA;AAAA,OACF,EAAA,CAAA,EAAA,EARY,KASd,CACD,CACH,EAAA,CAAA;AAAA,MAED,QAAY,oBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,GAAI,QAAS,EAAA;AAAA,KACrC,EAAA;AAAA,GAAA,EACF,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Box, Grid } from '@material-ui/core';
+import { Box, Button, Collapse } from '@material-ui/core';
 import { useState, useEffect } from 'react';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import '@backstage/core-plugin-api';
@@ -17,16 +17,40 @@ import useDebounce from 'react-use/lib/useDebounce';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
 import { EntitiesGridContent } from './EntitiesGridContent.esm.js';
 import { QetaGridHeader } from '../Utility/QetaGridHeader.esm.js';
+import { FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
+import FilterList from '@material-ui/icons/FilterList';
+const EXPANDED_LOCAL_STORAGE_KEY = "qeta-entities-filters-expanded";
 const EntitiesGrid = () => {
   const [page, setPage] = useState(1);
   const [pageCount, setPageCount] = useState(1);
   const [entitiesPerPage, setEntitiesPerPage] = useState(25);
   const [searchQuery, setSearchQuery] = useState("");
+  const [showFilterPanel, setShowFilterPanel] = useState(
+    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === "true"
+  );
   const [filters, setFilters] = useState({
     order: "desc",
+    orderBy: "postsCount",
     searchQuery: ""
   });
+  useEffect(() => {
+    localStorage.setItem(
+      EXPANDED_LOCAL_STORAGE_KEY,
+      showFilterPanel ? "true" : "false"
+    );
+  }, [showFilterPanel]);
+  const onFilterChange = (changes) => {
+    const changesArray = Array.isArray(changes) ? changes : [changes];
+    setPage(1);
+    setFilters((prev) => {
+      const newValue = { ...prev };
+      for (const { key, value } of changesArray) {
+        newValue[key] = value;
+      }
+      return newValue;
+    });
+  };
   const { t } = useTranslationRef(qetaTranslationRef);
   const {
     value: response,
@@ -46,7 +70,9 @@ const EntitiesGrid = () => {
   };
   useDebounce(
     () => {
-      setFilters({ ...filters, searchQuery });
+      if (filters.searchQuery !== searchQuery) {
+        setFilters({ ...filters, searchQuery });
+      }
     },
     300,
     [searchQuery]
@@ -63,29 +89,43 @@ const EntitiesGrid = () => {
         title: response ? t("common.entities", { count: response?.total ?? 0 }) : "",
         searchBarLabel: t("entitiesPage.search.label"),
         loading,
-        onSearch: onSearchQueryChange
+        onSearch: onSearchQueryChange,
+        buttons: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => setShowFilterPanel(!showFilterPanel),
+            startIcon: /* @__PURE__ */ jsx(FilterList, {}),
+            children: t("filterPanel.filterButton")
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "center", children: [
-      /* @__PURE__ */ jsx(
-        EntitiesGridContent,
-        {
-          response,
-          loading,
-          error
-        }
-      ),
-      response && response?.total > 0 && /* @__PURE__ */ jsx(
-        QetaPagination,
-        {
-          pageSize: entitiesPerPage,
-          handlePageChange: (_e, p) => setPage(p),
-          handlePageSizeChange: (e) => setEntitiesPerPage(Number(e.target.value)),
-          page,
-          pageCount
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx(Collapse, { in: showFilterPanel, children: /* @__PURE__ */ jsx(
+      FilterPanel,
+      {
+        onChange: onFilterChange,
+        filters,
+        mode: "entities"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      EntitiesGridContent,
+      {
+        response,
+        loading,
+        error
+      }
+    ),
+    response && response?.total > 0 && /* @__PURE__ */ jsx(
+      QetaPagination,
+      {
+        pageSize: entitiesPerPage,
+        handlePageChange: (_e, p) => setPage(p),
+        handlePageSizeChange: (e) => setEntitiesPerPage(Number(e.target.value)),
+        page,
+        pageCount
+      }
+    )
   ] });
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EntitiesGrid.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGrid.tsx"],"sourcesContent":["import { Box, ~~Grid~~ } from '@material-ui/core';\nimport { useEffect, useState } from 'react';\nimport { useQetaApi } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { EntitiesGridContent } from './EntitiesGridContent';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaGridHeader } from '../Utility/QetaGridHeader';\n\~~ntype~~ EntityFilters = ~~{\n order:~~ '~~asc~~' \| '~~desc~~';\~~n orderBy?:~~ '~~entityRef~~';\n ~~searchQuery:~~ ~~string~~;\n~~};\n~~\nexport const EntitiesGrid = () => {\n const [page, setPage] = useState(1);\n const [pageCount, setPageCount] = useState(1);\n const [entitiesPerPage, setEntitiesPerPage] = useState(25);\n const [searchQuery, setSearchQuery] = useState('');\n const [filters, setFilters] = useState<EntityFilters>({\n order: 'desc',\n searchQuery: '',\n });\n const { t } = useTranslationRef(qetaTranslationRef);\n\n const {\n value: response,\n loading,\n error,\n } = useQetaApi(\n api =>\n api.getEntities({\n limit: entitiesPerPage,\n offset: (page - 1) * entitiesPerPage,\n ...filters,\n }),\n [entitiesPerPage, page, filters],\n );\n\n const onSearchQueryChange = (val: string) => {\n setPage(1);\n setSearchQuery(val);\n };\n\n useDebounce(\n () => {\n setFilters({ ...filters, searchQuery: searchQuery });\n },\n 300,\n [searchQuery],\n );\n\n useEffect(() => {\n if (response) {\n setPageCount(Math.ceil(response.total / entitiesPerPage));\n }\n }, [response, entitiesPerPage]);\n\n return (\n <Box>\n <QetaGridHeader\n title={\n response ? t('common.entities', { count: response?.total ?? 0 }) : ''\n }\n searchBarLabel={t('entitiesPage.search.label')}\n loading={loading}\n onSearch={onSearchQueryChange}\n />\n <~~Grid~~ ~~container justifyContent~~=\"~~center~~\">\n <EntitiesGridContent\n response={response}\n loading={loading}\n error={error}\n />\n {response && response?.total > 0 && (\n <QetaPagination\n pageSize={entitiesPerPage}\n handlePageChange={(_e, p) => setPage(p)}\n handlePageSizeChange={e ~~=>\n~~ setEntitiesPerPage(Number(e.target.value))\n }\n page={page}\n pageCount={pageCount}\n />\n )}\n ~~</Grid>\n~~ </Box>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;AAgBO~~,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAClC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,CAAC,CAAA;AAC5C,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,EAAE,CAAA;AACzD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAwB,CAAA;AAAA,IACpD,KAAO,EAAA,MAAA;AAAA,IACP,WAAa,EAAA;AAAA,GACd,CAAA;~~AACD~~,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACE,GAAA,UAAA;AAAA,IACF,CAAA,GAAA,KACE,IAAI,WAAY,CAAA;AAAA,MACd,KAAO,EAAA,eAAA;AAAA,MACP,MAAA,EAAA,CAAS,OAAO,CAAK,IAAA,eAAA;AAAA,MACrB,GAAG;AAAA,KACJ,CAAA;AAAA,IACH,CAAC,eAAiB,EAAA,IAAA,EAAM,OAAO;AAAA,GACjC;AAEA,EAAM,MAAA,mBAAA,GAAsB,CAAC,GAAgB,KAAA;AAC3C,IAAA,OAAA,CAAQ,CAAC,CAAA;AACT,IAAA,cAAA,CAAe,GAAG,CAAA;AAAA,GACpB;AAEA,EAAA,WAAA;AAAA,IACE,MAAM;AACJ,~~MAAA~~,UAAA,CAAW,EAAE,GAAG,OAAS,EAAA,WAAA,EAA0B,CAAA;AAAA,~~KACrD~~;AAAA,IACA,GAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,YAAA,CAAa,IAAK,CAAA,IAAA,CAAK,QAAS,CAAA,KAAA,GAAQ,eAAe,CAAC,CAAA;AAAA;AAC1D,GACC,EAAA,CAAC,QAAU,EAAA,eAAe,CAAC,CAAA;AAE9B,EAAA,4BACG,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,KAAA,EACE,QAAW,GAAA,CAAA,CAAE,iBAAmB,EAAA,EAAE,OAAO,QAAU,EAAA,KAAA,IAAS,CAAE,EAAC,CAAI,GAAA,EAAA;AAAA,QAErE,cAAA,EAAgB,EAAE,2BAA2B,CAAA;AAAA,QAC7C,OAAA;AAAA,QACA,QAAU,EAAA;AAAA;AAAA,~~KACZ~~;AAAA,~~oBACC~~,~~IAAA~~,CAAA,~~IAAA~~,EAAA,~~EAAK~~,~~SAAS~~,EAAA,~~IAAA~~,~~EAAC~~,~~gBAAe~~,~~QAC7B~~,EAAA,QAAA,EAAA;AAAA,~~sBAAA~~,GAAA;AAAA,~~QAAC~~,mBAAA;AAAA,~~QAAA~~;AAAA,~~UACC~~,QAAA;AAAA,~~UACA~~,OAAA;AAAA,~~UACA~~;AAAA;AAAA,~~OACF~~;AAAA,~~MACC~~,QAAA,IAAY,QAAU,EAAA,KAAA,GAAQ,CAC7B,oBAAA,GAAA;AAAA,~~QAAC~~,cAAA;AAAA,~~QAAA~~;AAAA,~~UACC~~,QAAU,EAAA,eAAA;AAAA,~~UACV~~,gBAAkB,EAAA,CAAC,EAAI,EAAA,CAAA,KAAM,QAAQ,CAAC,CAAA;AAAA,~~UACtC~~,sBAAsB,~~CACpB~~,CAAA,KAAA,kBAAA,CAAmB,OAAO,CAAE,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,~~UAE3C~~,IAAA;AAAA,~~UACA~~;AAAA;AAAA;AACF,~~KAEJ~~,EAAA~~;AAAA~~,~~GACF,EAAA,~~CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"EntitiesGrid.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGrid.tsx"],"sourcesContent":["import { Box } from '@material-ui/core';\nimport { useEffect, useState } from 'react';\nimport { useQetaApi } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { EntitiesGridContent } from './EntitiesGridContent';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaGridHeader } from '../Utility/QetaGridHeader';\n\nimport { Change, EntityFilters, FilterPanel } from '../FilterPanel/FilterPanel';\nimport { Collapse, Button } from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-entities-filters-expanded';\n\nexport const EntitiesGrid = () => {\n const [page, setPage] = useState(1);\n const [pageCount, setPageCount] = useState(1);\n const [entitiesPerPage, setEntitiesPerPage] = useState(25);\n const [searchQuery, setSearchQuery] = useState('');\n const [showFilterPanel, setShowFilterPanel] = useState(\n localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n );\n const [filters, setFilters] = useState<EntityFilters>({\n order: 'desc',\n orderBy: 'postsCount',\n searchQuery: '',\n });\n\n useEffect(() => {\n localStorage.setItem(\n EXPANDED_LOCAL_STORAGE_KEY,\n showFilterPanel ? 'true' : 'false',\n );\n }, [showFilterPanel]);\n\n const onFilterChange = (\n changes: Change<EntityFilters> \| Change<EntityFilters>[],\n ) => {\n const changesArray = Array.isArray(changes) ? changes : [changes];\n setPage(1);\n setFilters(prev => {\n const newValue = { ...prev };\n for (const { key, value } of changesArray) {\n (newValue as any)[key] = value;\n }\n return newValue;\n });\n };\n const { t } = useTranslationRef(qetaTranslationRef);\n\n const {\n value: response,\n loading,\n error,\n } = useQetaApi(\n api =>\n api.getEntities({\n limit: entitiesPerPage,\n offset: (page - 1) * entitiesPerPage,\n ...filters,\n }),\n [entitiesPerPage, page, filters],\n );\n\n const onSearchQueryChange = (val: string) => {\n setPage(1);\n setSearchQuery(val);\n };\n\n useDebounce(\n () => {\n if (filters.searchQuery !== searchQuery) {\n setFilters({ ...filters, searchQuery: searchQuery });\n }\n },\n 300,\n [searchQuery],\n );\n\n useEffect(() => {\n if (response) {\n setPageCount(Math.ceil(response.total / entitiesPerPage));\n }\n }, [response, entitiesPerPage]);\n\n return (\n <Box>\n <QetaGridHeader\n title={\n response ? t('common.entities', { count: response?.total ?? 0 }) : ''\n }\n searchBarLabel={t('entitiesPage.search.label')}\n loading={loading}\n onSearch={onSearchQueryChange}\n buttons={\n <Button\n onClick={() => setShowFilterPanel(!showFilterPanel)}\n startIcon={<FilterList />}\n >\n {t('filterPanel.filterButton')}\n </Button>\n }\n />\n <Collapse in={showFilterPanel}>\n <FilterPanel<EntityFilters>\n onChange={onFilterChange}\n filters={filters}\n mode=\"entities\"\n />\n </Collapse>\n <EntitiesGridContent\n response={response}\n loading={loading}\n error={error}\n />\n {response && response?.total > 0 && (\n <QetaPagination\n pageSize={entitiesPerPage}\n handlePageChange={(_e, p) => setPage(p)}\n handlePageSizeChange={e => setEntitiesPerPage(Number(e.target.value))}\n page={page}\n pageCount={pageCount}\n />\n )}\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/EntitiesGrid/EntitiesGridContent.esm.js CHANGED Viewed

@@ -19,7 +19,7 @@ const EntitiesGridContent = (props) => {
   if (!response?.entities || response.entities.length === 0) {
     return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(NoEntitiesCard, {}) });
   }
-  return /* @__PURE__ */ jsx(Grid, { container: true, item: true, xs: 12, alignItems: "stretch", children: response?.entities.map((entity) => /* @__PURE__ */ jsx(EntitiesGridItem, { entity }, entity.entityRef)) });
+  return /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, alignItems: "stretch", children: response?.entities.map((entity) => /* @__PURE__ */ jsx(EntitiesGridItem, { entity }, entity.entityRef)) });
 };
 export { EntitiesGridContent };

package/dist/components/EntitiesGrid/EntitiesGridContent.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EntitiesGridContent.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridContent.tsx"],"sourcesContent":["import { EntitiesResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { EntitiesGridItem } from './EntitiesGridItem';\nimport { NoEntitiesCard } from './NoEntitiesCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\n\nexport const EntitiesGridContent = (props: {\n loading: boolean;\n error: any;\n response?: EntitiesResponse;\n}) => {\n const { response, loading, error } = props;\n const { t } = useTranslationRef(qetaTranslationRef);\n\n if (loading) {\n return <LoadingGrid />;\n }\n\n if (error \|\| response === undefined) {\n return (\n <WarningPanel severity=\"error\" title={t('entitiesPage.errorLoading')}>\n {error?.message}\n </WarningPanel>\n );\n }\n\n if (!response?.entities \|\| response.entities.length === 0) {\n return (\n <Grid item xs={12}>\n <NoEntitiesCard />\n </Grid>\n );\n }\n\n return (\n <Grid container ~~item xs~~={12} alignItems=\"stretch\">\n {response?.entities.map(entity => (\n <EntitiesGridItem entity={entity} key={entity.entityRef} />\n ))}\n </Grid>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,mBAAA,GAAsB,CAAC,KAI9B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA;AACrC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,2BAA2B,CAChE,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,QAAA,IAAY,QAAS,CAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzD,IACE,uBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAClB,EAAA,CAAA;AAAA;AAIJ,~~EACE~~,~~uBAAA~~,~~GAAA~~,~~CAAC~~,~~QAAK,SAAS,~~EAAA,~~IAAA~~,~~EAAC~~,~~MAAI~~,~~IAAC~~,EAAA,~~EAAA~~,~~EAAI~~,~~IAAI~~,~~UAAW~~,EAAA,~~SAAA~~,~~EACrC~~,~~oBAAU~~,QAAS,CAAA,GAAA,CAAI,4BACrB,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAqB,MAAO,CAAA,SAAW,CAC1D,CACH,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"EntitiesGridContent.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridContent.tsx"],"sourcesContent":["import { EntitiesResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { EntitiesGridItem } from './EntitiesGridItem';\nimport { NoEntitiesCard } from './NoEntitiesCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\n\nexport const EntitiesGridContent = (props: {\n loading: boolean;\n error: any;\n response?: EntitiesResponse;\n}) => {\n const { response, loading, error } = props;\n const { t } = useTranslationRef(qetaTranslationRef);\n\n if (loading) {\n return <LoadingGrid />;\n }\n\n if (error \|\| response === undefined) {\n return (\n <WarningPanel severity=\"error\" title={t('entitiesPage.errorLoading')}>\n {error?.message}\n </WarningPanel>\n );\n }\n\n if (!response?.entities \|\| response.entities.length === 0) {\n return (\n <Grid item xs={12}>\n <NoEntitiesCard />\n </Grid>\n );\n }\n\n return (\n <Grid container spacing={3} alignItems=\"stretch\">\n {response?.entities.map(entity => (\n <EntitiesGridItem entity={entity} key={entity.entityRef} />\n ))}\n </Grid>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,mBAAA,GAAsB,CAAC,KAI9B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA;AACrC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,2BAA2B,CAChE,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,QAAA,IAAY,QAAS,CAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzD,IACE,uBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAClB,EAAA,CAAA;AAAA;AAIJ,EAAA,2BACG,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,OAAS,EAAA,CAAA,EAAG,YAAW,SACpC,EAAA,QAAA,EAAA,QAAA,EAAU,QAAS,CAAA,GAAA,CAAI,4BACrB,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAqB,MAAO,CAAA,SAAW,CAC1D,CACH,EAAA,CAAA;AAEJ;;;;"}