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

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

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

Files changed (111) hide show

package/dist/components/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';\n\nimport as React 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 { 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 { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\nimport { CommentForm } from './CommentForm.tsx';\nimport { useConfirmNavigationIfEdited } from '../../utils';\n\nexport type QetaCommentSectionClassKey = 'root' \| 'addCommentButton';\n\nconst useStyles = makeStyles(\n () => ({\n root: {\n ~~marginTop~~: '~~1em~~',\n },\n addCommentButton: {},\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}) => {\n const { answer, post, onCommentAction } = props;\n const analytics = useAnalytics();\n const qetaApi = useApi(qetaApiRef);\n const [posting, setPosting] = React.useState(false);\n const [formVisible, setFormVisible] = useState(false);\n const [edited, setEdited] = React.useState(false);\n const { t } = useTranslationRef(qetaTranslationRef);\n const styles = useStyles();\n\n const postComment = (data: { content: string }) => {\n setPosting(true);\n if (answer) {\n qetaApi.commentAnswer(post.id, answer.id, data.content).then(a => {\n setFormVisible(false);\n analytics.captureEvent('comment', 'answer');\n setPosting(false);\n setEdited(false);\n onCommentAction(post, a);\n });\n return;\n }\n\n qetaApi.commentPost(post.id, data.content).then(q => {\n setFormVisible(false);\n analytics.captureEvent('comment', post.type);\n setPosting(false);\n setEdited(false);\n onCommentAction(q);\n });\n };\n\n useConfirmNavigationIfEdited(edited);\n\n return (\n <Box\n ~~marginLeft={9}\n~~ className={`${styles.root} ${props.className} qetaCommentSection`}\n >\n <CommentList\n post={post}\n answer={answer}\n onCommentAction={onCommentAction}\n />\n <OptionalRequirePermission\n permission={qetaCreateCommentPermission}\n errorPage={<></>}\n >\n {!formVisible && (\n <Grid container justifyContent=\"flex-end\">\n <Grid item>\n <Button\n size=\"small\"\n startIcon={<AddCommentIcon />}\n onClick={() => setFormVisible(true)}\n >\n {t('commentSection.addComment')}\n </Button>\n </Grid>\n </Grid>\n )}\n {formVisible && (\n <CommentForm\n submit={postComment}\n saveButtonTitle={t('commentSection.post')}\n disabled={posting}\n />\n )}\n </OptionalRequirePermission>\n </Box>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;AAsBA~~,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,~~OAAO~~;AAAA,~~IACL~~,~~IAAM~~,EAAA;AAAA,~~MACJ~~,SAAW,EAAA;AAAA,~~KACb~~;AAAA,IACA,~~kBAAkB~~;~~AAAC~~,~~GACrB~~,CAAA;AAAA,EACA,EAAE,MAAM,oBAAqB;AAC/B,CAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,KAKzB,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,IAAM,EAAA,eAAA,EAAoB,GAAA,KAAA;AAC1C,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA;AAChD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,SAAS,SAAU,EAAA;~~AAEzB~~,EAAM,MAAA,WAAA,GAAc,CAAC,IAA8B,KAAA;AACjD,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,IAAI,MAAQ,EAAA;AACV,MAAQ,OAAA,CAAA,aAAA,CAAc,KAAK,EAAI,EAAA,MAAA,CAAO,IAAI,IAAK,CAAA,OAAO,CAAE,CAAA,IAAA,CAAK,CAAK,CAAA,KAAA;AAChE,QAAA,cAAA,CAAe,KAAK,CAAA;AACpB,QAAU,SAAA,CAAA,YAAA,CAAa,WAAW,QAAQ,CAAA;AAC1C,QAAA,UAAA,CAAW,KAAK,CAAA;AAChB,QAAA,SAAA,CAAU,KAAK,CAAA;AACf,QAAA,eAAA,CAAgB,MAAM,CAAC,CAAA;AAAA,OACxB,CAAA;AACD,MAAA;AAAA;AAGF,IAAA,OAAA,CAAQ,YAAY,IAAK,CAAA,EAAA,EAAI,KAAK,OAAO,CAAA,CAAE,KAAK,CAAK,CAAA,KAAA;AACnD,MAAA,cAAA,CAAe,KAAK,CAAA;AACpB,MAAU,SAAA,CAAA,YAAA,CAAa,SAAW,EAAA,IAAA,CAAK,IAAI,CAAA;AAC3C,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA,SAAA,CAAU,KAAK,CAAA;AACf,MAAA,eAAA,CAAgB,CAAC,CAAA;AAAA,KAClB,CAAA;AAAA,GACH;AAEA,EAAA,4BAAA,CAA6B,MAAM,CAAA;AAEnC,EACE,uBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,~~UAAY~~,EAAA,CAAA;AAAA,~~MACZ~~,~~WAAW~~,~~CAAG~~,EAAA,~~MAAA~~,~~CAAO~~,IAAI,CAAA,CAAA,~~EAAI~~,~~MAAM~~,~~SAAS~~,CAAA,mBAAA,CAAA;AAAA,~~MAE5C~~,~~QAAA~~,EAAA;AAAA,~~wBAAA~~,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,MAAA;AAAA,YACA;AAAA;AAAA,~~SACF~~;AAAA,~~wBACA~~,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,oBACC,GAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,gBAAe,UAC7B,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,QAAA,kBAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,IAAK,EAAA,OAAA;AAAA,kBACL,~~SAAA~~,~~sBAAY~~,cAAe,EAAA,EAAA,CAAA;AAAA,~~kBAC3B~~,OAAA,EAAS,MAAM,cAAA,CAAe,IAAI,CAAA;AAAA,~~kBAEjC~~,YAAE,2BAA2B;AAAA;AAAA,iBAElC,CACF,EAAA,CAAA;AAAA,cAED,WACC,oBAAA,GAAA;AAAA,gBAAC,WAAA;AAAA,gBAAA;AAAA,kBACC,MAAQ,EAAA,WAAA;AAAA,kBACR,eAAA,EAAiB,EAAE,qBAAqB,CAAA;AAAA,kBACxC,QAAU,EAAA;AAAA;AAAA;~~AACZ~~;AAAA;AAAA;AAEJ;AAAA;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"CommentSection.esm.js","sources":["../../../src/components/CommentSection/CommentSection.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus /\nimport { useState } from 'react';\n\nimport as React 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 { 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\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 fontSize: '0.875rem',\n textTransform: 'none',\n color: theme.palette.text.secondary,\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 }),\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}) => {\n const { answer, post, onCommentAction } = props;\n const analytics = useAnalytics();\n const qetaApi = useApi(qetaApiRef);\n const [posting, setPosting] = React.useState(false);\n const [formVisible, setFormVisible] = useState(false);\n const [edited, setEdited] = React.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\n const postComment = (data: { content: string }) => {\n setPosting(true);\n if (answer) {\n qetaApi.commentAnswer(post.id, answer.id, data.content).then(a => {\n setFormVisible(false);\n analytics.captureEvent('comment', 'answer');\n setPosting(false);\n setEdited(false);\n onCommentAction(post, a);\n });\n return;\n }\n\n qetaApi.commentPost(post.id, data.content).then(q => {\n setFormVisible(false);\n analytics.captureEvent('comment', post.type);\n setPosting(false);\n setEdited(false);\n onCommentAction(q);\n });\n };\n\n useConfirmNavigationIfEdited(edited);\n\n return (\n <Box\n className={`${styles.root} ${styles.commentSection} ${props.className} qetaCommentSection`}\n >\n {/* Hide/Show Comments Button /}\n {commentsCount > 0 && (\n <Box display=\"flex\" alignItems=\"center\" pl={1}>\n <Button\n size=\"small\"\n onClick={() => setCommentsVisible(v => !v)}\n style={{ textTransform: 'none', padding: '0.5rem 0.8rem' }}\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 {/ Comments List */}\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 && (\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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"}

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Box, Grid, Typography } from '@material-ui/core';
+import { Box, Grid } from '@material-ui/core';
 import { useState, useEffect } from 'react';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import '@backstage/core-plugin-api';
@@ -16,7 +16,7 @@ import '@backstage/plugin-permission-common';
 import useDebounce from 'react-use/lib/useDebounce';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
 import { EntitiesGridContent } from './EntitiesGridContent.esm.js';
-import { SearchBar } from '../SearchBar/SearchBar.esm.js';
+import { QetaGridHeader } from '../Utility/QetaGridHeader.esm.js';
 const EntitiesGrid = () => {
   const [page, setPage] = useState(1);
@@ -59,33 +59,35 @@ const EntitiesGrid = () => {
     }
   }, [response, entitiesPerPage]);
   return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "space-between", children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsx(
-      SearchBar,
-      {
-        onSearch: onSearchQueryChange,
-        label: t("entitiesPage.search.label"),
-        loading
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "space-between", children: response && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", className: "qetaCollectionsContainerdCount", children: t("common.entities", { count: response?.total ?? 0 }) }) }) }),
     /* @__PURE__ */ jsx(
-      EntitiesGridContent,
+      QetaGridHeader,
       {
-        response,
+        title: response ? t("common.entities", { count: response?.total ?? 0 }) : "",
+        searchBarLabel: t("entitiesPage.search.label"),
         loading,
-        error
+        onSearch: onSearchQueryChange
       }
     ),
-    response && response?.total > 0 && /* @__PURE__ */ jsx(
-      QetaPagination,
-      {
-        pageSize: entitiesPerPage,
-        handlePageChange: (_e, p) => setPage(p),
-        handlePageSizeChange: (e) => setEntitiesPerPage(Number(e.target.value)),
-        page,
-        pageCount
-      }
-    )
+    /* @__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
+        }
+      )
+    ] })
   ] });
 };

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, ~~Typography~~ } 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 { ~~SearchBar } from '../SearchBar/SearchBar';\nimport {~~ useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\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 if (filters.searchQuery !== searchQuery) {\n setFilters({ ...filters, searchQuery: searchQuery });\n }\n },\n 400,\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 <~~Grid container justifyContent=\"space-between~~\~~">\~~n ~~<Grid~~ ~~item~~ ~~xs=~~{12} ~~md={4}>\n <SearchBar~~\n ~~onSearch={onSearchQueryChange~~}\n ~~label~~={t('entitiesPage.search.label')}\n loading={loading}\n ~~/>\n~~ ~~</Grid>\~~n ~~</Grid>\~~n <Grid container justifyContent=\"~~space-between~~\">\n ~~{response && (\n~~ <~~Grid item>\n <Typography variant=\"h6~~\~~" className=\"qetaCollectionsContainerdCount\">\~~n ~~{t('common.entities', { count: response?.total ?? 0 })}\n </Typography>\n~~ ~~</Grid>\n )}\n </Grid>\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":";;;;;;;;;;;;;;;;;;;;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,MAAI,IAAA,OAAA,CAAQ,gBAAgB,WAAa,EAAA;AACvC,QAAA,UAAA,CAAW,EAAE,GAAG,OAAS,EAAA,WAAA,EAA0B,CAAA;AAAA;AACrD,KACF;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,~~CAAC~~,~~IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,~~cAAA,~~EAAe~~,~~eAC7B~~,~~EAAA~~,~~QAAA~~,~~kBAAA~~,GAAA,~~CAAC~~,~~IAAK~~,~~EAAA~~,EAAA,~~IAAA~~,~~EAAI~~,~~IAAC~~,EAAA,~~EAAA~~,~~EAAI~~,~~EAAI~~,~~EAAA~~,~~EAAA~~,~~EAAI,CACrB,EAAA,QAAA,kBAAA,~~GAAA~~;AAAA~~,~~MAAC,SAAA;AAAA,MAAA;AAAA,QACC,QAAU,~~EAAA~~,mBAAA~~;AAAA,~~QACV~~,~~KAAA~~,~~EAAO~~,EAAE,2BAA2B,CAAA;AAAA,~~QACpC~~;AAAA~~;AAAA~~,~~OAEJ~~,~~CACF~~,EAAA,~~CAAA~~;AAAA,~~oBACA~~,~~GAAA~~,~~CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,cAAA,EAAe,eAC5B,EAAA,QAAA,EAAA,QAAA,oBACE,GAAA,~~CAAA,IAAA,EAAA,EAAK,~~IAAI~~,EAAA,IAAA,~~EACR~~,~~QAAC~~,~~kBAAA~~,~~GAAA,CAAA,UAAA,~~EAAA,~~EAAW~~,~~OAAQ,~~EAAA~~,IAAA,EAAK,SAAU,EAAA,gCAAA,EAChC,QAAE,EAAA,CAAA,CAAA,iBAAA,EAAmB,EAAE,KAAA,EAAO,QAAU,EAAA,KAAA,IAAS,CAAE,EAAC,CACvD,EAAA,CAAA,EACF,CAEJ,EAAA,CAAA~~;AAAA,~~oBACA~~,GAAA;AAAA,~~MAAC~~,mBAAA;AAAA,~~MAAA~~;AAAA,~~QACC~~,QAAA;AAAA,~~QACA~~,OAAA;AAAA,~~QACA~~;AAAA;AAAA,~~KACF~~;AAAA,~~IACC~~,QAAA,IAAY,QAAU,EAAA,KAAA,GAAQ,CAC7B,oBAAA,GAAA;AAAA,~~MAAC~~,cAAA;AAAA,~~MAAA~~;AAAA,~~QACC~~,QAAU,EAAA,eAAA;AAAA,~~QACV~~,gBAAkB,EAAA,CAAC,EAAI,EAAA,CAAA,KAAM,QAAQ,CAAC,CAAA;AAAA,~~QACtC~~,sBAAsB,~~CAAK~~,CAAA,KAAA,kBAAA,CAAmB,OAAO,CAAE,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,~~QACpE~~,IAAA;AAAA,~~QACA~~;AAAA;AAAA;AACF,~~GAEJ~~,EAAA,CAAA;AAEJ;;;;"}
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 if (filters.searchQuery !== searchQuery) {\n setFilters({ ...filters, searchQuery: searchQuery });\n }\n },\n 400,\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":"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"}

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Grid, Card, CardActionArea, CardHeader, Avatar, CardContent, Typography, CardActions, Tooltip, Button } from '@material-ui/core';
+import { Grid, Card, CardActionArea, CardHeader, Tooltip, Avatar, CardContent, Typography, CardActions, Button } from '@material-ui/core';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { useNavigate } from 'react-router-dom';
 import { useEntityPresentation } from '@backstage/plugin-catalog-react';
@@ -18,64 +18,62 @@ import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import Visibility from '@material-ui/icons/Visibility';
+import useGridItemStyles from '../GridItemStyles/useGridItemStyles.esm.js';
 const EntitiesGridItem = (props) => {
   const { entity } = props;
+  const classes = useGridItemStyles();
   const entityRoute = useRouteRef(entityRouteRef);
   const navigate = useNavigate();
   const { t } = useTranslationRef(qetaTranslationRef);
   const entityFollow = useEntityFollow();
   const compound = parseEntityRef(entity.entityRef);
-  const { primaryTitle, Icon } = useEntityPresentation(compound);
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
-    Card,
-    {
-      variant: "outlined",
-      style: { height: "100%", display: "flex", flexDirection: "column" },
-      children: [
-        /* @__PURE__ */ jsxs(
-          CardActionArea,
-          {
-            onClick: () => navigate(entityRoute({ entityRef: entity.entityRef })),
-            children: [
-              /* @__PURE__ */ jsx(
-                CardHeader,
-                {
-                  title: primaryTitle,
-                  avatar: Icon ? /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(Icon, {}) }) : null
-                }
-              ),
-              /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
-                t("common.posts", {
-                  count: entity.postsCount,
-                  itemType: "post"
-                }),
-                " \xB7 ",
-                t("common.followers", { count: entity.followerCount })
-              ] }) })
-            ]
+  const { primaryTitle, Icon, secondaryTitle } = useEntityPresentation(compound);
+  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, xl: 3, children: /* @__PURE__ */ jsxs(Card, { className: classes.card, variant: "outlined", children: [
+    /* @__PURE__ */ jsxs(
+      CardActionArea,
+      {
+        onClick: () => navigate(entityRoute({ entityRef: entity.entityRef })),
+        children: [
+          /* @__PURE__ */ jsx(
+            CardHeader,
+            {
+              className: classes.cardHeader,
+              title: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, children: /* @__PURE__ */ jsx("span", { className: classes.ellipsis, children: primaryTitle }) }),
+              titleTypographyProps: { variant: "h6" },
+              avatar: Icon ? /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(Icon, {}) }) : null
+            }
+          ),
+          /* @__PURE__ */ jsx(CardContent, { className: classes.cardContent, children: /* @__PURE__ */ jsxs(Typography, { className: classes.stats, variant: "caption", children: [
+            t("common.posts", {
+              count: entity.postsCount,
+              itemType: "post"
+            }),
+            " \xB7 ",
+            t("common.followers", { count: entity.followerCount })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(CardActions, { className: classes.cardActions, children: /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "center", children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Tooltip, { title: t("entityButton.tooltip"), children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: classes.actionButton,
+        size: "small",
+        variant: "outlined",
+        color: entityFollow.isFollowingEntity(entity.entityRef) ? "secondary" : "primary",
+        onClick: () => {
+          if (entityFollow.isFollowingEntity(entity.entityRef)) {
+            entityFollow.unfollowEntity(entity.entityRef);
+          } else {
+            entityFollow.followEntity(entity.entityRef);
           }
-        ),
-        /* @__PURE__ */ jsx(CardActions, { style: { marginTop: "auto" }, children: /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "center", children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Tooltip, { title: t("entityButton.tooltip"), children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            variant: "outlined",
-            color: entityFollow.isFollowingEntity(entity.entityRef) ? "secondary" : "primary",
-            onClick: () => {
-              if (entityFollow.isFollowingEntity(entity.entityRef)) {
-                entityFollow.unfollowEntity(entity.entityRef);
-              } else {
-                entityFollow.followEntity(entity.entityRef);
-              }
-            },
-            startIcon: entityFollow.isFollowingEntity(entity.entityRef) ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {}),
-            children: entityFollow.isFollowingEntity(entity.entityRef) ? t("entityButton.unfollow") : t("entityButton.follow")
-          }
-        ) }) }) }) })
-      ]
-    }
-  ) });
+        },
+        startIcon: entityFollow.isFollowingEntity(entity.entityRef) ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {}),
+        children: entityFollow.isFollowingEntity(entity.entityRef) ? t("entityButton.unfollow") : t("entityButton.follow")
+      }
+    ) }) }) }) })
+  ] }) });
 };
 export { EntitiesGridItem };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EntitiesGridItem.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridItem.tsx"],"sourcesContent":["import { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport {\n Avatar,\n Button,\n Card,\n CardActionArea,\n CardActions,\n CardContent,\n CardHeader,\n Grid,\n Tooltip,\n Typography,\n} from '@material-ui/core';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useEntityFollow } from '../../hooks';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport const EntitiesGridItem = (props: { entity: EntityResponse }) => {\n const { entity } = props;\n const entityRoute = useRouteRef(entityRouteRef);\n const navigate = useNavigate();\n const { t } = useTranslationRef(qetaTranslationRef);\n const entityFollow = useEntityFollow();\n const compound = parseEntityRef(entity.entityRef);\n const { primaryTitle, Icon } = useEntityPresentation(compound);\n\n return (\n <Grid item xs={3}>\n <Card\n variant=\"outlined\"~~\n style={{ height: '100%', display: 'flex', flexDirection: 'column' }}\n~~ >\n <CardActionArea\n onClick={() => navigate(entityRoute({ entityRef: entity.entityRef }))}\n >\n <CardHeader\n title={primaryTitle}\n avatar={\n Icon ? (\n <Avatar>\n <Icon />\n </Avatar>\n ) : null\n }\n />\n <CardContent>\n <Typography variant=\"caption\">\n {t('common.posts', {\n count: entity.postsCount,\n itemType: 'post',\n })}\n {' · '}\n {t('common.followers', { count: entity.followerCount })}\n </Typography>\n </CardContent>\n </CardActionArea>\n <CardActions ~~style~~={~~{ marginTop: 'auto'~~ }}>\n <Grid container justifyContent=\"center\">\n <Grid item>\n <Tooltip title={t('entityButton.tooltip')}>\n <Button\n size=\"small\"\n variant=\"outlined\"\n color={\n entityFollow.isFollowingEntity(entity.entityRef)\n ? 'secondary'\n : 'primary'\n }\n onClick={() => {\n if (entityFollow.isFollowingEntity(entity.entityRef)) {\n entityFollow.unfollowEntity(entity.entityRef);\n } else {\n entityFollow.followEntity(entity.entityRef);\n }\n }}\n startIcon={\n entityFollow.isFollowingEntity(entity.entityRef) ? (\n <VisibilityOff />\n ) : (\n <Visibility />\n )\n }\n >\n {entityFollow.isFollowingEntity(entity.entityRef)\n ? t('entityButton.unfollow')\n : t('entityButton.follow')}\n </Button>\n </Tooltip>\n </Grid>\n </Grid>\n </CardActions>\n </Card>\n </Grid>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;AAwBa~~,MAAA,gBAAA,GAAmB,CAAC,KAAsC,KAAA;AACrE,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,EAAM,MAAA,WAAA,GAAc,YAAY,cAAc,CAAA;AAC9C,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,eAAe,eAAgB,EAAA;AACrC,EAAM,MAAA,QAAA,GAAW,cAAe,CAAA,MAAA,CAAO,SAAS,CAAA;AAChD,EAAA,MAAM,EAAE,~~YAAA~~,~~EAAc~~,~~IAAK~~,EAAA,~~GAAI~~,sBAAsB,QAAQ,CAAA;~~AAE7D~~,EAAA,~~uBACG~~,~~GAAA~~,~~CAAA~~,IAAA,~~EAAA~~,~~EAAK~~,~~IAAI~~,EAAA,~~IAAA~~,~~EAAC~~,IAAI,~~CACb~~,EAAA,~~QAAA~~,~~kBAAA~~,~~IAAA;AAAA~~,~~IAAC~~,~~IAAA;AAAA~~,~~IAAA;AAAA~~,~~MACC~~,~~OAAQ~~,~~EAAA~~,~~UAAA;AAAA~~,~~MACR~~,~~OAAO~~,~~EAAE~~,~~MAAA~~,~~EAAQ~~,~~QAAQ~~,~~OAAS~~,~~EAAA~~,~~MAAA~~,~~EAAQ~~,~~eAAe~~,~~QAAS,~~EAAA~~;AAAA~~,~~MAElE,~~QAAA,EAAA;AAAA,~~wBAAA~~,IAAA;AAAA,~~UAAC~~,cAAA;AAAA,~~UAAA~~;AAAA,~~YACC~~,OAAA,EAAS,MAAM,QAAS,CAAA,WAAA,CAAY,EAAE,SAAW,EAAA,MAAA,CAAO,SAAU,EAAC,CAAC,CAAA;AAAA,~~YAEpE~~,QAAA,EAAA;AAAA,~~8BAAA~~,GAAA;AAAA,~~gBAAC~~,UAAA;AAAA,~~gBAAA~~;AAAA,~~kBACC~~,~~KAAO~~,EAAA,~~YAAA~~;AAAA,~~kBACP~~,QACE,IACE,mBAAA,GAAA,CAAC,UACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,GACR,CACE,GAAA;AAAA;AAAA,~~eAER~~;AAAA,~~8BACC~~,GAAA,CAAA,WAAA,~~EAAA~~,~~EACC,~~QAAC,kBAAA,IAAA,CAAA,UAAA,EAAA,EAAW,~~SAAQ~~,~~SACjB~~,EAAA,QAAA,EAAA;AAAA,~~gBAAA~~,CAAA,CAAE,cAAgB,EAAA;AAAA,~~kBACjB~~,OAAO,MAAO,CAAA,UAAA;AAAA,~~kBACd~~,QAAU,EAAA;AAAA,~~iBACX~~,CAAA;AAAA,~~gBACA~~,QAAA;AAAA,~~gBACA~~,EAAE,kBAAoB,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,eAAe;AAAA,~~eAAA~~,EACxD,CACF,EAAA;AAAA;AAAA;AAAA,~~SACF~~;AAAA,~~wBACA~~,GAAA,CAAC,eAAY,~~KAAO~~,EAAA,~~EAAE~~,~~WAAW~~,~~MAAO~~,~~EAAA,EACtC,~~QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,~~SAAS~~,EAAA,~~IAAA~~,~~EAAC~~,~~gBAAe~~,~~QAC7B~~,~~EAAA,QAAA,~~kBAAA,GAAA,~~CAAC~~,~~QAAK~~,~~IAAI~~,EAAA,~~IAAA~~,~~EACR~~,~~8BAAC~~,~~OAAQ~~,~~EAAA~~,EAAA,~~KAAA~~,~~EAAO,~~CAAE,~~CAAA,~~sBAAsB,CACtC,EAAA,QAAA,kBAAA,GAAA;AAAA,~~UAAC~~,MAAA;AAAA,~~UAAA~~;AAAA,~~YACC~~,IAAK,EAAA,OAAA;AAAA,~~YACL~~,OAAQ,EAAA,UAAA;AAAA,~~YACR~~,OACE,YAAa,CAAA,iBAAA,CAAkB,MAAO,CAAA,SAAS,IAC3C,WACA,GAAA,SAAA;AAAA,~~YAEN~~,SAAS,MAAM;AACb,~~cAAA~~,IAAI,YAAa,CAAA,iBAAA,CAAkB,MAAO,CAAA,SAAS,CAAG,EAAA;AACpD,~~gBAAa~~,YAAA,CAAA,cAAA,CAAe,OAAO,SAAS,CAAA;AAAA,~~eACvC~~,MAAA;AACL,~~gBAAa~~,YAAA,CAAA,YAAA,CAAa,OAAO,SAAS,CAAA;AAAA;AAC5C,~~aACF~~;AAAA,~~YACA~~,SAAA,EACE,YAAa,CAAA,iBAAA,CAAkB,MAAO,CAAA,SAAS,oBAC5C,GAAA,CAAA,aAAA,EAAA,EAAc,CAEf,mBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,CAAA;AAAA,~~YAIf~~,QAAA,EAAA,YAAA,CAAa,kBAAkB,MAAO,CAAA,SAAS,IAC5C,CAAE,CAAA,uBAAuB,CACzB,GAAA,CAAA,CAAE,qBAAqB;AAAA;AAAA,~~SAC7B~~,EACF,CACF,EAAA,CAAA,EACF,CACF,EAAA;AAAA~~;AAAA;AAAA~~,~~GAEJ~~,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"EntitiesGridItem.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridItem.tsx"],"sourcesContent":["import { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport {\n Avatar,\n Button,\n Card,\n CardActionArea,\n CardActions,\n CardContent,\n CardHeader,\n Grid,\n Tooltip,\n Typography,\n} from '@material-ui/core';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useEntityFollow } from '../../hooks';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\n\nexport const EntitiesGridItem = (props: { entity: EntityResponse }) => {\n const { entity } = props;\n const classes = useGridItemStyles();\n const entityRoute = useRouteRef(entityRouteRef);\n const navigate = useNavigate();\n const { t } = useTranslationRef(qetaTranslationRef);\n const entityFollow = useEntityFollow();\n const compound = parseEntityRef(entity.entityRef);\n const { primaryTitle, Icon, secondaryTitle } =\n useEntityPresentation(compound);\n\n return (\n <Grid item xs={12} sm={6} md={4} xl={3}>\n <Card className={classes.card} variant=\"outlined\">\n <CardActionArea\n onClick={() => navigate(entityRoute({ entityRef: entity.entityRef }))}\n >\n <CardHeader\n className={classes.cardHeader}\n title={\n <Tooltip title={secondaryTitle ?? ''} arrow>\n <span className={classes.ellipsis}>{primaryTitle}</span>\n </Tooltip>\n }\n titleTypographyProps={{ variant: 'h6' }}\n avatar={\n Icon ? (\n <Avatar>\n <Icon />\n </Avatar>\n ) : null\n }\n />\n <CardContent className={classes.cardContent}>\n <Typography className={classes.stats} variant=\"caption\">\n {t('common.posts', {\n count: entity.postsCount,\n itemType: 'post',\n })}\n {' · '}\n {t('common.followers', { count: entity.followerCount })}\n </Typography>\n </CardContent>\n </CardActionArea>\n <CardActions className={classes.cardActions}>\n <Grid container justifyContent=\"center\">\n <Grid item>\n <Tooltip title={t('entityButton.tooltip')}>\n <Button\n className={classes.actionButton}\n size=\"small\"\n variant=\"outlined\"\n color={\n entityFollow.isFollowingEntity(entity.entityRef)\n ? 'secondary'\n : 'primary'\n }\n onClick={() => {\n if (entityFollow.isFollowingEntity(entity.entityRef)) {\n entityFollow.unfollowEntity(entity.entityRef);\n } else {\n entityFollow.followEntity(entity.entityRef);\n }\n }}\n startIcon={\n entityFollow.isFollowingEntity(entity.entityRef) ? (\n <VisibilityOff />\n ) : (\n <Visibility />\n )\n }\n >\n {entityFollow.isFollowingEntity(entity.entityRef)\n ? t('entityButton.unfollow')\n : t('entityButton.follow')}\n </Button>\n </Tooltip>\n </Grid>\n </Grid>\n </CardActions>\n </Card>\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/FilterPanel/DateRangeFilter.esm.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { formatDate } from '../../utils/utils.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
@@ -11,7 +11,10 @@ const useStyles = makeStyles(
     textInput: {
       minWidth: "230px",
       marginTop: theme.spacing(2),
-      marginBottom: theme.spacing(2)
+      marginBottom: theme.spacing(2),
+      '& input[type="date"]': {
+        colorScheme: theme.palette.type === "dark" ? "dark" : "light"
+      }
     }
   }),
   { name: "QetaDateRangeFilter" }
@@ -37,19 +40,22 @@ const DateRangeFilter = (props) => {
       setToDate(value.split("--")[1] || "");
     }
   }, [value]);
-  const handleCustom = (from, to) => {
-    const startDate = new Date(from ?? fromDate);
-    const endDate = new Date(to ?? toDate);
-    if (startDate <= endDate) {
-      setValidation({ isValid: true });
-      onChange(`${formatDate(startDate)}--${formatDate(endDate)}`);
-    } else {
-      setValidation({
-        isValid: false,
-        message: t("datePicker.invalidRange")
-      });
-    }
-  };
+  const handleCustom = useCallback(
+    (from, to) => {
+      const startDate = new Date(from ?? fromDate);
+      const endDate = new Date(to ?? toDate);
+      if (startDate <= endDate) {
+        setValidation({ isValid: true });
+        onChange(`${formatDate(startDate)}--${formatDate(endDate)}`);
+      } else {
+        setValidation({
+          isValid: false,
+          message: t("datePicker.invalidRange")
+        });
+      }
+    },
+    [onChange, fromDate, toDate, t]
+  );
   return /* @__PURE__ */ jsxs(Grid, { container: true, className: styles.root, children: [
     validation.message && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { color: "error", variant: "body2", children: validation.message }) }),
     /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(
@@ -57,18 +63,20 @@ const DateRangeFilter = (props) => {
       {
         select: true,
         className: styles.textInput,
-        label: t("datePicker.range.label"),
-        value: dateRangeOption || "select",
+        value: dateRangeOption || "date-range",
         onChange: (e) => {
           if (e.target.value !== "custom") {
-            onChange(e.target.value === "select" ? "" : e.target.value);
+            onChange(e.target.value === "date-range" ? "" : e.target.value);
+          } else {
+            handleCustom();
           }
           setDateRangeOption(e.target.value);
         },
         variant: "outlined",
-        defaultValue: "select",
+        defaultValue: "date-range",
+        fullWidth: true,
         children: [
-          /* @__PURE__ */ jsx(MenuItem, { value: "select", children: t("datePicker.range.default") }),
+          /* @__PURE__ */ jsx(MenuItem, { value: "date-range", children: t("datePicker.range.label") }),
           /* @__PURE__ */ jsx(MenuItem, { value: "7-days", children: t("datePicker.range.last7days") }),
           /* @__PURE__ */ jsx(MenuItem, { value: "30-days", children: t("datePicker.range.last30days") }),
           /* @__PURE__ */ jsx(MenuItem, { value: "custom", children: t("datePicker.range.custom") })

package/dist/components/FilterPanel/DateRangeFilter.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateRangeFilter.esm.js","sources":["../../../src/components/FilterPanel/DateRangeFilter.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { formatDate } from '../../utils/utils';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n Grid,\n makeStyles,\n MenuItem,\n TextField,\n Typography,\n} from '@material-ui/core';\n\nexport interface DateRangeFilterProps {\n value?: string;\n onChange: (value: string \| string[]) => void;\n}\n\ntype DateRangeValidation = {\n isValid: boolean;\n message?: string;\n};\n\nconst useStyles = makeStyles(\n theme => ({\n root: {},\n textInput: {\n minWidth: '230px',\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2),\n },\n }),\n { name: 'QetaDateRangeFilter' },\n);\n\nexport const DateRangeFilter = (props: DateRangeFilterProps) => {\n const { value, onChange } = props;\n const styles = useStyles();\n const [dateRangeOption, setDateRangeOption] = useState<string \| undefined>(\n value,\n );\n const { t } = useTranslationRef(qetaTranslationRef);\n const localDate = formatDate(new Date());\n const [fromDate, setFromDate] = useState(localDate);\n const [toDate, setToDate] = useState(localDate);\n const [validation, setValidation] = useState<DateRangeValidation>({\n isValid: true,\n });\n\n useEffect(() => {\n setDateRangeOption(value \|\| '');\n if (value && value.indexOf('--') >= 0) {\n setDateRangeOption('custom');\n setFromDate(value.split('--')[0] \|\| '');\n setToDate(value.split('--')[1] \|\| '');\n }\n }, [value]);\n\n const handleCustom = (from?: string, to?: string) => {\n const startDate = new Date(from ?? fromDate);\n const endDate = new Date(to ?? toDate);\n if (startDate <= endDate) {\n setValidation({ isValid: true });\n onChange(`${formatDate(startDate)}--${formatDate(endDate)}`);\n } else {\n setValidation({\n isValid: false,\n message: t('datePicker.invalidRange'),\n });\n }\n };\n\n return (\n <Grid container className={styles.root}>\n {validation.message && (\n <Grid item xs={12}>\n <Typography color=\"error\" variant=\"body2\">\n {validation.message}\n </Typography>\n </Grid>\n )}\n <Grid item>\n <TextField\n select\n className={styles.textInput}\n ~~label={t('datePicker.range.label')}\n~~ value={dateRangeOption \|\| '~~select~~'}\n onChange={e => {\n if (e.target.value !== 'custom') {\n onChange(e.target.value === '~~select~~' ? '' : e.target.value);\n }\n setDateRangeOption(e.target.value);\n }}\n variant=\"outlined\"\n defaultValue=\"~~select~~\"\n >\n <MenuItem value=\"~~select~~\">{t('datePicker.range.~~default~~')}</MenuItem>\n <MenuItem value=\"7-days\">{t('datePicker.range.last7days')}</MenuItem>\n <MenuItem value=\"30-days\">\n {t('datePicker.range.last30days')}\n </MenuItem>\n <MenuItem value=\"custom\">{t('datePicker.range.custom')}</MenuItem>\n </TextField>\n </Grid>\n {dateRangeOption === 'custom' && (\n <>\n <Grid item>\n <TextField\n className={styles.textInput}\n variant=\"outlined\"\n label={t('datePicker.from')}\n id=\"from-date\"\n type=\"date\"\n value={fromDate}\n InputLabelProps={{ shrink: true }}\n error={!validation.isValid}\n onChange={e => {\n handleCustom(e.target.value);\n }}\n inputProps={{\n max: toDate \|\| localDate,\n }}\n />\n </Grid>\n <Grid item>\n <TextField\n className={styles.textInput}\n variant=\"outlined\"\n label={t('datePicker.to')}\n id=\"to-date\"\n type=\"date\"\n value={toDate}\n InputLabelProps={{ shrink: true }}\n error={!validation.isValid}\n onChange={e => {\n handleCustom(undefined, e.target.value);\n }}\n inputProps={{\n min: fromDate,\n max: localDate,\n }}\n />\n </Grid>\n </>\n )}\n </Grid>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAsBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,MAAM,EAAC;AAAA,IACP,SAAW,EAAA;AAAA,MACT,QAAU,EAAA,OAAA;AAAA,MACV,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC1B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;~~AAC/B~~,GACF,CAAA;AAAA,EACA,EAAE,MAAM,qBAAsB;AAChC,CAAA;AAEa,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AAC5B,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAM,MAAA,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,QAAA;AAAA,IAC5C;AAAA,GACF;AACA,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,SAAY,GAAA,UAAA,iBAAe,IAAA,IAAA,EAAM,CAAA;AACvC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,SAAS,CAAA;AAClD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,SAAS,CAAA;AAC9C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAA8B,CAAA;AAAA,IAChE,OAAS,EAAA;AAAA,GACV,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,kBAAA,CAAmB,SAAS,EAAE,CAAA;AAC9B,IAAA,IAAI,KAAS,IAAA,KAAA,CAAM,OAAQ,CAAA,IAAI,KAAK,CAAG,EAAA;AACrC,MAAA,kBAAA,CAAmB,QAAQ,CAAA;AAC3B,MAAA,WAAA,CAAY,MAAM,KAAM,CAAA,IAAI,CAAE,CAAA,CAAC,KAAK,EAAE,CAAA;AACtC,MAAA,SAAA,CAAU,MAAM,KAAM,CAAA,IAAI,CAAE,CAAA,CAAC,KAAK,EAAE,CAAA;AAAA;AACtC,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,~~EAAM~~,~~MAAA~~,~~YAAA~~,~~GAAe~~,CAAC,~~IAAA~~,~~EAAe,~~EAAgB,KAAA;~~AACnD~~,~~IAAA~~,MAAM,SAAY,GAAA,IAAI,IAAK,CAAA,IAAA,IAAQ,QAAQ,CAAA;AAC3C,~~IAAA~~,MAAM,OAAU,GAAA,IAAI,IAAK,CAAA,EAAA,IAAM,MAAM,CAAA;AACrC,~~IAAA~~,IAAI,aAAa,OAAS,EAAA;AACxB,~~MAAc~~,aAAA,CAAA,EAAE,OAAS,EAAA,IAAA,EAAM,CAAA;AAC/B,~~MAAS~~,QAAA,CAAA,CAAA,EAAG,WAAW,SAAS,CAAC,KAAK,UAAW,CAAA,OAAO,CAAC,CAAE,CAAA,CAAA;AAAA,~~KACtD~~,MAAA;AACL,~~MAAc~~,aAAA,CAAA;AAAA,~~QACZ~~,OAAS,EAAA,KAAA;AAAA,~~QACT~~,OAAA,EAAS,EAAE,yBAAyB;AAAA,~~OACrC~~,CAAA;AAAA;AACH,~~GACF~~;AAEA,EAAA,4BACG,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,SAAA,EAAW,OAAO,IAC/B,EAAA,QAAA,EAAA;AAAA,IAAA,UAAA,CAAW,OACV,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EACb,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,OAAM,OAAQ,EAAA,OAAA,EAAQ,OAC/B,EAAA,QAAA,EAAA,UAAA,CAAW,SACd,CACF,EAAA,CAAA;AAAA,oBAEF,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,WAAW,MAAO,CAAA,SAAA;AAAA,QAClB,~~KAAA,EAAO,EAAE,wBAAwB,CAAA;AAAA,QACjC,~~OAAO,eAAmB,IAAA,~~QAAA~~;AAAA,QAC1B,UAAU,CAAK,CAAA,KAAA;AACb,UAAI,IAAA,CAAA,CAAE,MAAO,CAAA,KAAA,KAAU,QAAU,EAAA;AAC/B,YAAA,QAAA,CAAS,EAAE,MAAO,CAAA,KAAA,KAAU,~~WAAW~~,EAAK,GAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA;~~AAE5D~~,UAAmB,kBAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,SACnC;AAAA,QACA,OAAQ,EAAA,UAAA;AAAA,QACR,YAAa,EAAA,~~QAAA~~;AAAA,~~QAEb~~,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAM,~~QAAU~~,EAAA,QAAA,EAAA,CAAA,CAAE,~~0BAA0B~~,CAAE,EAAA,CAAA;AAAA,~~8BACvD~~,QAAS,EAAA,EAAA,KAAA,EAAM,QAAU,EAAA,QAAA,EAAA,CAAA,CAAE,4BAA4B,CAAE,EAAA,CAAA;AAAA,8BACzD,QAAS,EAAA,EAAA,KAAA,EAAM,SACb,EAAA,QAAA,EAAA,CAAA,CAAE,6BAA6B,CAClC,EAAA,CAAA;AAAA,8BACC,QAAS,EAAA,EAAA,KAAA,EAAM,QAAU,EAAA,QAAA,EAAA,CAAA,CAAE,yBAAyB,CAAE,EAAA;AAAA;AAAA;AAAA,KAE3D,EAAA,CAAA;AAAA,IACC,eAAA,KAAoB,4BAEjB,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,WAAW,MAAO,CAAA,SAAA;AAAA,UAClB,OAAQ,EAAA,UAAA;AAAA,UACR,KAAA,EAAO,EAAE,iBAAiB,CAAA;AAAA,UAC1B,EAAG,EAAA,WAAA;AAAA,UACH,IAAK,EAAA,MAAA;AAAA,UACL,KAAO,EAAA,QAAA;AAAA,UACP,eAAA,EAAiB,EAAE,MAAA,EAAQ,IAAK,EAAA;AAAA,UAChC,KAAA,EAAO,CAAC,UAAW,CAAA,OAAA;AAAA,UACnB,UAAU,CAAK,CAAA,KAAA;AACb,YAAa,YAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,WAC7B;AAAA,UACA,UAAY,EAAA;AAAA,YACV,KAAK,MAAU,IAAA;AAAA;AACjB;AAAA,OAEJ,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,WAAW,MAAO,CAAA,SAAA;AAAA,UAClB,OAAQ,EAAA,UAAA;AAAA,UACR,KAAA,EAAO,EAAE,eAAe,CAAA;AAAA,UACxB,EAAG,EAAA,SAAA;AAAA,UACH,IAAK,EAAA,MAAA;AAAA,UACL,KAAO,EAAA,MAAA;AAAA,UACP,eAAA,EAAiB,EAAE,MAAA,EAAQ,IAAK,EAAA;AAAA,UAChC,KAAA,EAAO,CAAC,UAAW,CAAA,OAAA;AAAA,UACnB,UAAU,CAAK,CAAA,KAAA;AACb,YAAa,YAAA,CAAA,KAAA,CAAA,EAAW,CAAE,CAAA,MAAA,CAAO,KAAK,CAAA;AAAA,WACxC;AAAA,UACA,UAAY,EAAA;AAAA,YACV,GAAK,EAAA,QAAA;AAAA,YACL,GAAK,EAAA;AAAA;AACP;AAAA,OAEJ,EAAA;AAAA,KACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"DateRangeFilter.esm.js","sources":["../../../src/components/FilterPanel/DateRangeFilter.tsx"],"sourcesContent":["import { useEffect, useState, useCallback } from 'react';\nimport { formatDate } from '../../utils/utils';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n Grid,\n makeStyles,\n MenuItem,\n TextField,\n Typography,\n} from '@material-ui/core';\n\nexport interface DateRangeFilterProps {\n value?: string;\n onChange: (value: string \| string[]) => void;\n}\n\ntype DateRangeValidation = {\n isValid: boolean;\n message?: string;\n};\n\nconst useStyles = makeStyles(\n theme => ({\n root: {},\n textInput: {\n minWidth: '230px',\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2),\n '& input[type=\"date\"]': {\n colorScheme: theme.palette.type === 'dark' ? 'dark' : 'light',\n },\n },\n }),\n { name: 'QetaDateRangeFilter' },\n);\n\nexport const DateRangeFilter = (props: DateRangeFilterProps) => {\n const { value, onChange } = props;\n const styles = useStyles();\n const [dateRangeOption, setDateRangeOption] = useState<string \| undefined>(\n value,\n );\n const { t } = useTranslationRef(qetaTranslationRef);\n const localDate = formatDate(new Date());\n const [fromDate, setFromDate] = useState(localDate);\n const [toDate, setToDate] = useState(localDate);\n const [validation, setValidation] = useState<DateRangeValidation>({\n isValid: true,\n });\n\n useEffect(() => {\n setDateRangeOption(value \|\| '');\n if (value && value.indexOf('--') >= 0) {\n setDateRangeOption('custom');\n setFromDate(value.split('--')[0] \|\| '');\n setToDate(value.split('--')[1] \|\| '');\n }\n }, [value]);\n\n const handleCustom = useCallback(\n (from?: string, to?: string) => {\n const startDate = new Date(from ?? fromDate);\n const endDate = new Date(to ?? toDate);\n if (startDate <= endDate) {\n setValidation({ isValid: true });\n onChange(`${formatDate(startDate)}--${formatDate(endDate)}`);\n } else {\n setValidation({\n isValid: false,\n message: t('datePicker.invalidRange'),\n });\n }\n },\n [onChange, fromDate, toDate, t],\n );\n\n return (\n <Grid container className={styles.root}>\n {validation.message && (\n <Grid item xs={12}>\n <Typography color=\"error\" variant=\"body2\">\n {validation.message}\n </Typography>\n </Grid>\n )}\n <Grid item>\n <TextField\n select\n className={styles.textInput}\n value={dateRangeOption \|\| 'date-range'}\n onChange={e => {\n if (e.target.value !== 'custom') {\n onChange(e.target.value === 'date-range' ? '' : e.target.value);\n } else {\n handleCustom();\n }\n setDateRangeOption(e.target.value);\n }}\n variant=\"outlined\"\n defaultValue=\"date-range\"\n fullWidth\n >\n <MenuItem value=\"date-range\">{t('datePicker.range.label')}</MenuItem>\n <MenuItem value=\"7-days\">{t('datePicker.range.last7days')}</MenuItem>\n <MenuItem value=\"30-days\">\n {t('datePicker.range.last30days')}\n </MenuItem>\n <MenuItem value=\"custom\">{t('datePicker.range.custom')}</MenuItem>\n </TextField>\n </Grid>\n {dateRangeOption === 'custom' && (\n <>\n <Grid item>\n <TextField\n className={styles.textInput}\n variant=\"outlined\"\n label={t('datePicker.from')}\n id=\"from-date\"\n type=\"date\"\n value={fromDate}\n InputLabelProps={{ shrink: true }}\n error={!validation.isValid}\n onChange={e => {\n handleCustom(e.target.value);\n }}\n inputProps={{\n max: toDate \|\| localDate,\n }}\n />\n </Grid>\n <Grid item>\n <TextField\n className={styles.textInput}\n variant=\"outlined\"\n label={t('datePicker.to')}\n id=\"to-date\"\n type=\"date\"\n value={toDate}\n InputLabelProps={{ shrink: true }}\n error={!validation.isValid}\n onChange={e => {\n handleCustom(undefined, e.target.value);\n }}\n inputProps={{\n min: fromDate,\n max: localDate,\n }}\n />\n </Grid>\n </>\n )}\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import { DateRangeFilter } from './DateRangeFilter.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
@@ -8,6 +8,7 @@ import { EntitiesInput } from '../PostForm/EntitiesInput.esm.js';
 import { TagInput } from '../PostForm/TagInput.esm.js';
 import { useStarredEntities, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { useApi, identityApiRef } from '@backstage/core-plugin-api';
+import { useSearchParams } from 'react-router-dom';
 import { makeStyles, Box, Grid, FormGroup, FormLabel, FormControlLabel, Checkbox, FormControl, RadioGroup, Divider, Tooltip, IconButton, Radio } from '@material-ui/core';
 import AdjustIcon from '@material-ui/icons/Adjust';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
@@ -72,6 +73,27 @@ const FilterPanel = (props) => {
   const catalogApi = useApi(catalogApiRef);
   const identityApi = useApi(identityApiRef);
   const styles = useStyles();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    if (initializedRef.current) {
+      return;
+    }
+    initializedRef.current = true;
+    const changes = [];
+    searchParams.forEach((value, key) => {
+      if (filterKeys.includes(key)) {
+        if (key === "tags" || key === "entities") {
+          changes.push({ key, value: value.split(",") });
+        } else {
+          changes.push({ key, value });
+        }
+      }
+    });
+    if (changes.length > 0) {
+      onChange(changes);
+    }
+  }, [searchParams, onChange]);
   useEffect(() => {
     identityApi.getBackstageIdentity().then((identity) => {
       catalogApi.getEntities({
@@ -90,6 +112,17 @@ const FilterPanel = (props) => {
     if (event.target.type === "checkbox") {
       value = event.target.checked ? "true" : "false";
     }
+    setSearchParams((prev) => {
+      const newParams = new URLSearchParams(prev);
+      if (!value || value === "false" || Array.isArray(value) && value.length === 0) {
+        newParams.delete(event.target.name);
+      } else if (Array.isArray(value)) {
+        newParams.set(event.target.name, value.join(","));
+      } else {
+        newParams.set(event.target.name, value);
+      }
+      return newParams;
+    });
     onChange({ key: event.target.name, value });
   };
   const handleStarredEntities = useCallback(