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

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

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

Files changed (113) hide show

package/dist/components/TagsAndEntities/TagChip.esm.js CHANGED Viewed

@@ -20,6 +20,7 @@ import { Tooltip, Chip, Grid, Box, Typography, Button } from '@material-ui/core'
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import Visibility from '@material-ui/icons/Visibility';
 import LoyaltyOutlined from '@material-ui/icons/LoyaltyOutlined';
+import { useTooltipStyles } from '../../hooks/useTooltipStyles.esm.js';
 const cache = /* @__PURE__ */ new Map();
 const TagTooltip = (props) => {
@@ -98,6 +99,7 @@ const TagChip = (props) => {
   const tagRoute = useRouteRef(tagRouteRef);
   const navigate = useNavigate();
   const { tag } = props;
+  const classes = useTooltipStyles();
   return /* @__PURE__ */ jsx(
     Tooltip,
     {
@@ -105,6 +107,10 @@ const TagChip = (props) => {
       title: /* @__PURE__ */ jsx(TagTooltip, { tag }),
       enterDelay: 400,
       interactive: true,
+      classes: {
+        tooltip: classes.tooltip,
+        arrow: classes.tooltipArrow
+      },
       children: /* @__PURE__ */ jsx(
         Chip,
         {

package/dist/components/TagsAndEntities/TagChip.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagChip.esm.js","sources":["../../../src/components/TagsAndEntities/TagChip.tsx"],"sourcesContent":["import { CSSProperties, useEffect, useState } from 'react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { tagRouteRef } from '../../routes';\nimport { qetaApiRef } from '../../api';\nimport { TagResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useNavigate } from 'react-router-dom';\nimport { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';\nimport { useTagsFollow } from '../../hooks';\nimport {\n Box,\n Button,\n Chip,\n Grid,\n Tooltip,\n Typography,\n} from '@material-ui/core';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\nimport LoyaltyOutlined from '@material-ui/icons/LoyaltyOutlined';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nconst cache: Map<string, TagResponse> = new Map();\n\nconst TagTooltip = (props: { tag: string }) => {\n const { tag } = props;\n const qetaApi = useApi(qetaApiRef);\n const { t } = useTranslationRef(qetaTranslationRef);\n const tags = useTagsFollow();\n const [resp, setResp] = useState<undefined \| TagResponse>();\n\n useEffect(() => {\n if (cache.has(tag)) {\n setResp(cache.get(tag));\n return;\n }\n\n qetaApi.getTag(tag).then(res => {\n if (res) {\n cache.set(tag, res);\n setResp(res);\n } else {\n setResp({\n id: 0,\n tag,\n postsCount: 0,\n followerCount: 0,\n description: t('tagChip.nonExistingTag'),\n });\n }\n });\n }, [qetaApi, tag, t]);\n\n if (!resp) {\n return null;\n }\n\n return (\n <Grid container style={{ padding: '0.5em' }} spacing={1}>\n <Grid item xs={12}>\n <Box style={{ display: 'flex', alignItems: 'center' }}>\n <LoyaltyOutlined fontSize=\"small\" />\n <Typography\n variant=\"subtitle1\"\n style={{\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n }}\n >\n {tag}\n </Typography>\n </Box>\n {resp.id > 0 && (\n <Typography variant=\"subtitle2\">\n {t('common.posts', { count: resp.postsCount, itemType: 'post' })}\n {' · '}\n {t('common.followers', { count: resp.followerCount })}\n </Typography>\n )}\n </Grid>\n {resp.description && (\n <Grid item xs={12}>\n <MarkdownRenderer content={resp.description} />\n </Grid>\n )}\n {!tags.loading && resp.id !== 0 && (\n <Grid item xs={12}>\n <Button\n size=\"small\"\n variant=\"outlined\"\n color={tags.isFollowingTag(tag) ? 'secondary' : 'primary'}\n onClick={() => {\n if (tags.isFollowingTag(tag)) {\n tags.unfollowTag(tag);\n } else {\n tags.followTag(tag);\n }\n }}\n startIcon={\n tags.isFollowingTag(tag) ? <VisibilityOff /> : <Visibility />\n }\n >\n {tags.isFollowingTag(tag)\n ? t('tagButton.unfollow')\n : t('tagButton.follow')}\n </Button>\n </Grid>\n )}\n </Grid>\n );\n};\n\nexport const TagChip = (props: {\n tag: string;\n style?: CSSProperties;\n useHref?: boolean;\n}) => {\n const tagRoute = useRouteRef(tagRouteRef);\n const navigate = useNavigate();\n const { tag } = props;\n return (\n <Tooltip\n arrow\n title={<TagTooltip tag={tag} />}\n enterDelay={400}\n interactive\n >\n <Chip\n label={tag}\n size=\"small\"\n className=\"qetaTagChip\"\n component=\"a\"\n style={props.style}\n href={props.useHref ? tagRoute({ tag }) : undefined}\n target={props.useHref ? '_blank' : undefined}\n onClick={\n !props.useHref\n ? () => {\n navigate(tagRoute({ tag }));\n }\n : undefined\n }\n clickable\n />\n </Tooltip>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;AAsBA~~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~~MAEX~~,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA,GAAA;AAAA,UACP,IAAK,EAAA,OAAA;AAAA,UACL,SAAU,EAAA,aAAA;AAAA,UACV,SAAU,EAAA,GAAA;AAAA,UACV,OAAO,KAAM,CAAA,KAAA;AAAA,UACb,MAAM,KAAM,CAAA,OAAA,GAAU,SAAS,EAAE,GAAA,EAAK,CAAI,GAAA,KAAA,CAAA;AAAA,UAC1C,MAAA,EAAQ,KAAM,CAAA,OAAA,GAAU,QAAW,GAAA,KAAA,CAAA;AAAA,UACnC,OACE,EAAA,CAAC,KAAM,CAAA,OAAA,GACH,MAAM;AACJ,YAAA,QAAA,CAAS,QAAS,CAAA,EAAE,GAAI,EAAC,CAAC,CAAA;AAAA,WAE5B,GAAA,KAAA,CAAA;AAAA,UAEN,SAAS,EAAA;AAAA;AAAA;AACX;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"TagChip.esm.js","sources":["../../../src/components/TagsAndEntities/TagChip.tsx"],"sourcesContent":["import { CSSProperties, useEffect, useState } from 'react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { tagRouteRef } from '../../routes';\nimport { qetaApiRef } from '../../api';\nimport { TagResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useNavigate } from 'react-router-dom';\nimport { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';\nimport { useTagsFollow } from '../../hooks';\nimport {\n Box,\n Button,\n Chip,\n Grid,\n Tooltip,\n Typography,\n} from '@material-ui/core';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\nimport LoyaltyOutlined from '@material-ui/icons/LoyaltyOutlined';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTooltipStyles } from '../../hooks/useTooltipStyles';\n\nconst cache: Map<string, TagResponse> = new Map();\n\nconst TagTooltip = (props: { tag: string }) => {\n const { tag } = props;\n const qetaApi = useApi(qetaApiRef);\n const { t } = useTranslationRef(qetaTranslationRef);\n const tags = useTagsFollow();\n const [resp, setResp] = useState<undefined \| TagResponse>();\n\n useEffect(() => {\n if (cache.has(tag)) {\n setResp(cache.get(tag));\n return;\n }\n\n qetaApi.getTag(tag).then(res => {\n if (res) {\n cache.set(tag, res);\n setResp(res);\n } else {\n setResp({\n id: 0,\n tag,\n postsCount: 0,\n followerCount: 0,\n description: t('tagChip.nonExistingTag'),\n });\n }\n });\n }, [qetaApi, tag, t]);\n\n if (!resp) {\n return null;\n }\n\n return (\n <Grid container style={{ padding: '0.5em' }} spacing={1}>\n <Grid item xs={12}>\n <Box style={{ display: 'flex', alignItems: 'center' }}>\n <LoyaltyOutlined fontSize=\"small\" />\n <Typography\n variant=\"subtitle1\"\n style={{\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n }}\n >\n {tag}\n </Typography>\n </Box>\n {resp.id > 0 && (\n <Typography variant=\"subtitle2\">\n {t('common.posts', { count: resp.postsCount, itemType: 'post' })}\n {' · '}\n {t('common.followers', { count: resp.followerCount })}\n </Typography>\n )}\n </Grid>\n {resp.description && (\n <Grid item xs={12}>\n <MarkdownRenderer content={resp.description} />\n </Grid>\n )}\n {!tags.loading && resp.id !== 0 && (\n <Grid item xs={12}>\n <Button\n size=\"small\"\n variant=\"outlined\"\n color={tags.isFollowingTag(tag) ? 'secondary' : 'primary'}\n onClick={() => {\n if (tags.isFollowingTag(tag)) {\n tags.unfollowTag(tag);\n } else {\n tags.followTag(tag);\n }\n }}\n startIcon={\n tags.isFollowingTag(tag) ? <VisibilityOff /> : <Visibility />\n }\n >\n {tags.isFollowingTag(tag)\n ? t('tagButton.unfollow')\n : t('tagButton.follow')}\n </Button>\n </Grid>\n )}\n </Grid>\n );\n};\n\nexport const TagChip = (props: {\n tag: string;\n style?: CSSProperties;\n useHref?: boolean;\n}) => {\n const tagRoute = useRouteRef(tagRouteRef);\n const navigate = useNavigate();\n const { tag } = props;\n const classes = useTooltipStyles();\n return (\n <Tooltip\n arrow\n title={<TagTooltip tag={tag} />}\n enterDelay={400}\n interactive\n classes={{\n tooltip: classes.tooltip,\n arrow: classes.tooltipArrow,\n }}\n >\n <Chip\n label={tag}\n size=\"small\"\n className=\"qetaTagChip\"\n component=\"a\"\n style={props.style}\n href={props.useHref ? tagRoute({ tag }) : undefined}\n target={props.useHref ? '_blank' : undefined}\n onClick={\n !props.useHref\n ? () => {\n navigate(tagRoute({ tag }));\n }\n : undefined\n }\n clickable\n />\n </Tooltip>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/TagsGrid/TagGridItem.esm.js CHANGED Viewed

@@ -23,6 +23,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
 import Visibility from '@material-ui/icons/Visibility';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import useGridItemStyles from '../GridItemStyles/useGridItemStyles.esm.js';
 const TagGridItem = (props) => {
   const { tag, onTagEdit, isModerator } = props;
@@ -30,6 +31,7 @@ const TagGridItem = (props) => {
   const navigate = useNavigate();
   const { t } = useTranslationRef(qetaTranslationRef);
   const tags = useTagsFollow();
+  const classes = useGridItemStyles();
   const [editModalOpen, setEditModalOpen] = useState(false);
   const handleEditModalOpen = () => setEditModalOpen(true);
   const handleEditModalClose = () => {
@@ -42,91 +44,90 @@ const TagGridItem = (props) => {
     setDeleteModalOpen(false);
     onTagEdit();
   };
-  return /* @__PURE__ */ jsxs(Grid, { item: true, xs: 4, children: [
-    /* @__PURE__ */ jsxs(
-      Card,
-      {
-        variant: "outlined",
-        style: { height: "100%", display: "flex", flexDirection: "column" },
-        children: [
-          /* @__PURE__ */ jsxs(CardActionArea, { onClick: () => navigate(tagRoute({ tag: tag.tag })), children: [
-            /* @__PURE__ */ jsx(CardHeader, { title: tag.tag }),
-            /* @__PURE__ */ jsxs(CardContent, { children: [
-              /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
-                t("common.posts", { count: tag.postsCount, itemType: "post" }),
-                " \xB7 ",
-                t("common.followers", { count: tag.followerCount })
-              ] }),
-              /* @__PURE__ */ jsx("br", {}),
-              tag.experts && tag.experts.length > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
-                t("common.experts"),
-                ": ",
-                tag.experts.map((e, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(EntityRefLink, { entityRef: e }, e),
-                  i === tag.experts.length - 1 ? "" : ","
-                ] }))
-              ] }),
-              /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
-                " ",
-                DOMPurify.sanitize(
-                  truncate(removeMarkdownFormatting(tag.description ?? ""), 150)
-                )
-              ] })
-            ] })
+  return /* @__PURE__ */ jsxs(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(tagRoute({ tag: tag.tag })), children: [
+        /* @__PURE__ */ jsx(
+          CardHeader,
+          {
+            className: classes.cardHeader,
+            title: /* @__PURE__ */ jsx("span", { className: classes.ellipsis, children: tag.tag }),
+            titleTypographyProps: { variant: "h6" }
+          }
+        ),
+        /* @__PURE__ */ jsxs(CardContent, { className: classes.cardContent, children: [
+          /* @__PURE__ */ jsxs(Typography, { className: classes.stats, variant: "caption", children: [
+            t("common.posts", { count: tag.postsCount, itemType: "post" }),
+            " \xB7 ",
+            t("common.followers", { count: tag.followerCount })
           ] }),
-          /* @__PURE__ */ jsx(CardActions, { style: { marginTop: "auto" }, children: /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "center", children: [
-            /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Tooltip, { title: t("tagButton.tooltip"), children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "small",
-                variant: "outlined",
-                color: tags.isFollowingTag(tag.tag) ? "secondary" : "primary",
-                onClick: () => {
-                  if (tags.isFollowingTag(tag.tag)) {
-                    tags.unfollowTag(tag.tag);
-                  } else {
-                    tags.followTag(tag.tag);
-                  }
-                },
-                startIcon: tags.isFollowingTag(tag.tag) ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {}),
-                children: tags.isFollowingTag(tag.tag) ? t("tagButton.unfollow") : t("tagButton.follow")
-              }
-            ) }) }),
-            tag.canEdit && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "small",
-                onClick: handleEditModalOpen,
-                variant: "outlined",
-                startIcon: /* @__PURE__ */ jsx(EditIcon, {}),
-                children: t("tagButton.edit")
+          tag.experts && tag.experts.length > 0 && /* @__PURE__ */ jsxs(Typography, { className: classes.experts, variant: "caption", children: [
+            t("common.experts"),
+            ": ",
+            tag.experts.map((e, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(EntityRefLink, { entityRef: e }, e),
+              i === tag.experts.length - 1 ? "" : ", "
+            ] }))
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { className: classes.description, variant: "body2", children: DOMPurify.sanitize(
+            truncate(removeMarkdownFormatting(tag.description ?? ""), 150)
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(CardActions, { className: classes.cardActions, children: /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "center", spacing: 1, children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Tooltip, { title: t("tagButton.tooltip"), children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: classes.actionButton,
+            size: "small",
+            variant: "outlined",
+            color: tags.isFollowingTag(tag.tag) ? "secondary" : "primary",
+            onClick: () => {
+              if (tags.isFollowingTag(tag.tag)) {
+                tags.unfollowTag(tag.tag);
+              } else {
+                tags.followTag(tag.tag);
               }
-            ) }),
-            tag.canDelete && /* @__PURE__ */ jsxs(Grid, { item: true, children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  size: "small",
-                  onClick: handleDeleteModalOpen,
-                  variant: "contained",
-                  color: "secondary",
-                  startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
-                  children: t("tagButton.delete")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                DeleteModal,
-                {
-                  open: deleteModalOpen,
-                  onClose: handleDeleteModalClose,
-                  entity: tag
-                }
-              )
-            ] })
-          ] }) })
-        ]
-      }
-    ),
+            },
+            startIcon: tags.isFollowingTag(tag.tag) ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {}),
+            children: tags.isFollowingTag(tag.tag) ? t("tagButton.unfollow") : t("tagButton.follow")
+          }
+        ) }) }),
+        tag.canEdit && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: classes.actionButton,
+            size: "small",
+            onClick: handleEditModalOpen,
+            variant: "outlined",
+            startIcon: /* @__PURE__ */ jsx(EditIcon, {}),
+            children: t("tagButton.edit")
+          }
+        ) }),
+        tag.canDelete && /* @__PURE__ */ jsxs(Grid, { item: true, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: classes.actionButton,
+              size: "small",
+              onClick: handleDeleteModalOpen,
+              variant: "contained",
+              color: "secondary",
+              startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
+              children: t("tagButton.delete")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DeleteModal,
+            {
+              open: deleteModalOpen,
+              onClose: handleDeleteModalClose,
+              entity: tag
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
     /* @__PURE__ */ jsx(
       EditTagModal,
       {

package/dist/components/TagsGrid/TagGridItem.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagGridItem.esm.js","sources":["../../../src/components/TagsGrid/TagGridItem.tsx"],"sourcesContent":["import {\n removeMarkdownFormatting,\n TagResponse,\n truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport {\n Button,\n Card,\n CardActionArea,\n CardActions,\n CardContent,\n CardHeader,\n Grid,\n Tooltip,\n Typography,\n} from '@material-ui/core';\nimport { useState } from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { tagRouteRef } from '../../routes';\nimport { useNavigate } from 'react-router-dom';\nimport { EditTagModal } from './EditTagModal';\nimport DOMPurify from 'dompurify';\nimport { useTagsFollow } from '../../hooks';\nimport { DeleteModal } from '../DeleteModal';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport const TagGridItem = (props: {\n tag: TagResponse;\n onTagEdit: () => void;\n isModerator?: boolean;\n}) => {\n const { tag, onTagEdit, isModerator } = props;\n const tagRoute = useRouteRef(tagRouteRef);\n const navigate = useNavigate();\n const { t } = useTranslationRef(qetaTranslationRef);\n const tags = useTagsFollow();\n\n const [editModalOpen, setEditModalOpen] = useState(false);\n const handleEditModalOpen = () => setEditModalOpen(true);\n const handleEditModalClose = () => {\n setEditModalOpen(false);\n onTagEdit();\n };\n\n const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n const handleDeleteModalClose = () => {\n setDeleteModalOpen(false);\n onTagEdit();\n };\n\n return (\n <Grid item xs={4}>\n <Card\n variant=\"outlined\"\n style={{ height: '100%', display: 'flex', flexDirection: 'column' }}\n >\n <CardActionArea onClick={() => navigate(tagRoute({ tag: tag.tag }))}>\n <CardHeader title={tag.tag} />\n <CardContent>\n <Typography variant=\"caption\">\n {t('common.posts', { count: tag.postsCount, itemType: 'post' })}\n {' · '}\n {t('common.followers', { count: tag.followerCount })}\n </Typography>\n <br />\n {tag.experts && tag.experts.length > 0 && (\n <Typography variant=\"caption\">\n {t('common.experts')}\n {': '}\n {tag.experts.map((e, i) => (\n <>\n <EntityRefLink key={e} entityRef={e} />\n {i === tag.experts!.length - 1 ? '' : ','}\n </>\n ))}\n </Typography>\n )}\n <Typography variant=\"body2\">\n {' '}\n {DOMPurify.sanitize(\n truncate(removeMarkdownFormatting(tag.description ?? ''), 150),\n )}\n </Typography>\n </CardContent>\n </CardActionArea>\n <CardActions style={{ marginTop: 'auto' }}>\n <Grid container justifyContent=\"center\">\n <Grid item>\n <Tooltip title={t('tagButton.tooltip')}>\n <Button\n size=\"small\"\n variant=\"outlined\"\n color={tags.isFollowingTag(tag.tag) ? 'secondary' : 'primary'}\n onClick={() => {\n if (tags.isFollowingTag(tag.tag)) {\n tags.unfollowTag(tag.tag);\n } else {\n tags.followTag(tag.tag);\n }\n }}\n startIcon={\n tags.isFollowingTag(tag.tag) ? (\n <VisibilityOff />\n ) : (\n <Visibility />\n )\n }\n >\n {tags.isFollowingTag(tag.tag)\n ? t('tagButton.unfollow')\n : t('tagButton.follow')}\n </Button>\n </Tooltip>\n </Grid>\n {tag.canEdit && (\n <Grid item>\n <Button\n size=\"small\"\n onClick={handleEditModalOpen}\n variant=\"outlined\"\n startIcon={<EditIcon />}\n >\n {t('tagButton.edit')}\n </Button>\n </Grid>\n )}\n {tag.canDelete && (\n <Grid item>\n <Button\n size=\"small\"\n onClick={handleDeleteModalOpen}\n variant=\"contained\"\n color=\"secondary\"\n startIcon={<DeleteIcon />}\n >\n {t('tagButton.delete')}\n </Button>\n <DeleteModal\n open={deleteModalOpen}\n onClose={handleDeleteModalClose}\n entity={tag}\n />\n </Grid>\n )}\n </Grid>\n </CardActions>\n </Card>\n <EditTagModal\n tag={tag}\n open={editModalOpen}\n onClose={handleEditModalClose}\n isModerator={isModerator}\n />\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"TagGridItem.esm.js","sources":["../../../src/components/TagsGrid/TagGridItem.tsx"],"sourcesContent":["import {\n removeMarkdownFormatting,\n TagResponse,\n truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport {\n Button,\n Card,\n CardActionArea,\n CardActions,\n CardContent,\n CardHeader,\n Grid,\n Tooltip,\n Typography,\n} from '@material-ui/core';\nimport { useState } from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { tagRouteRef } from '../../routes';\nimport { useNavigate } from 'react-router-dom';\nimport { EditTagModal } from './EditTagModal';\nimport DOMPurify from 'dompurify';\nimport { useTagsFollow } from '../../hooks';\nimport { DeleteModal } from '../DeleteModal';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport Visibility from '@material-ui/icons/Visibility';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\n\nexport const TagGridItem = (props: {\n tag: TagResponse;\n onTagEdit: () => void;\n isModerator?: boolean;\n}) => {\n const { tag, onTagEdit, isModerator } = props;\n const tagRoute = useRouteRef(tagRouteRef);\n const navigate = useNavigate();\n const { t } = useTranslationRef(qetaTranslationRef);\n const tags = useTagsFollow();\n const classes = useGridItemStyles();\n\n const [editModalOpen, setEditModalOpen] = useState(false);\n const handleEditModalOpen = () => setEditModalOpen(true);\n const handleEditModalClose = () => {\n setEditModalOpen(false);\n onTagEdit();\n };\n\n const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n const handleDeleteModalClose = () => {\n setDeleteModalOpen(false);\n onTagEdit();\n };\n\n return (\n <Grid item xs={12} sm={6} md={4} xl={3}>\n <Card className={classes.card} variant=\"outlined\">\n <CardActionArea onClick={() => navigate(tagRoute({ tag: tag.tag }))}>\n <CardHeader\n className={classes.cardHeader}\n title={<span className={classes.ellipsis}>{tag.tag}</span>}\n titleTypographyProps={{ variant: 'h6' }}\n />\n <CardContent className={classes.cardContent}>\n <Typography className={classes.stats} variant=\"caption\">\n {t('common.posts', { count: tag.postsCount, itemType: 'post' })}\n {' · '}\n {t('common.followers', { count: tag.followerCount })}\n </Typography>\n {tag.experts && tag.experts.length > 0 && (\n <Typography className={classes.experts} variant=\"caption\">\n {t('common.experts')}\n {': '}\n {tag.experts.map((e, i) => (\n <>\n <EntityRefLink key={e} entityRef={e} />\n {i === tag.experts!.length - 1 ? '' : ', '}\n </>\n ))}\n </Typography>\n )}\n <Typography className={classes.description} variant=\"body2\">\n {DOMPurify.sanitize(\n truncate(removeMarkdownFormatting(tag.description ?? ''), 150),\n )}\n </Typography>\n </CardContent>\n </CardActionArea>\n <CardActions className={classes.cardActions}>\n <Grid container justifyContent=\"center\" spacing={1}>\n <Grid item>\n <Tooltip title={t('tagButton.tooltip')}>\n <Button\n className={classes.actionButton}\n size=\"small\"\n variant=\"outlined\"\n color={tags.isFollowingTag(tag.tag) ? 'secondary' : 'primary'}\n onClick={() => {\n if (tags.isFollowingTag(tag.tag)) {\n tags.unfollowTag(tag.tag);\n } else {\n tags.followTag(tag.tag);\n }\n }}\n startIcon={\n tags.isFollowingTag(tag.tag) ? (\n <VisibilityOff />\n ) : (\n <Visibility />\n )\n }\n >\n {tags.isFollowingTag(tag.tag)\n ? t('tagButton.unfollow')\n : t('tagButton.follow')}\n </Button>\n </Tooltip>\n </Grid>\n {tag.canEdit && (\n <Grid item>\n <Button\n className={classes.actionButton}\n size=\"small\"\n onClick={handleEditModalOpen}\n variant=\"outlined\"\n startIcon={<EditIcon />}\n >\n {t('tagButton.edit')}\n </Button>\n </Grid>\n )}\n {tag.canDelete && (\n <Grid item>\n <Button\n className={classes.actionButton}\n size=\"small\"\n onClick={handleDeleteModalOpen}\n variant=\"contained\"\n color=\"secondary\"\n startIcon={<DeleteIcon />}\n >\n {t('tagButton.delete')}\n </Button>\n <DeleteModal\n open={deleteModalOpen}\n onClose={handleDeleteModalClose}\n entity={tag}\n />\n </Grid>\n )}\n </Grid>\n </CardActions>\n </Card>\n <EditTagModal\n tag={tag}\n open={editModalOpen}\n onClose={handleEditModalClose}\n isModerator={isModerator}\n />\n </Grid>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCa,MAAA,WAAA,GAAc,CAAC,KAItB,KAAA;AACJ,EAAA,MAAM,EAAE,GAAA,EAAK,SAAW,EAAA,WAAA,EAAgB,GAAA,KAAA;AACxC,EAAM,MAAA,QAAA,GAAW,YAAY,WAAW,CAAA;AACxC,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,OAAO,aAAc,EAAA;AAC3B,EAAA,MAAM,UAAU,iBAAkB,EAAA;AAElC,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,EAAM,MAAA,mBAAA,GAAsB,MAAM,gBAAA,CAAiB,IAAI,CAAA;AACvD,EAAA,MAAM,uBAAuB,MAAM;AACjC,IAAA,gBAAA,CAAiB,KAAK,CAAA;AACtB,IAAU,SAAA,EAAA;AAAA,GACZ;AAEA,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5D,EAAM,MAAA,qBAAA,GAAwB,MAAM,kBAAA,CAAmB,IAAI,CAAA;AAC3D,EAAA,MAAM,yBAAyB,MAAM;AACnC,IAAA,kBAAA,CAAmB,KAAK,CAAA;AACxB,IAAU,SAAA,EAAA;AAAA,GACZ;AAEA,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EAAI,EAAA,EAAA,EAAI,CAAG,EAAA,EAAA,EAAI,CAAG,EAAA,EAAA,EAAI,CACnC,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,IAAA,EAAM,SAAQ,UACrC,EAAA,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,cAAA,EAAA,EAAe,OAAS,EAAA,MAAM,QAAS,CAAA,QAAA,CAAS,EAAE,GAAA,EAAK,GAAI,CAAA,GAAA,EAAK,CAAC,CAChE,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,WAAW,OAAQ,CAAA,UAAA;AAAA,YACnB,uBAAQ,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,OAAQ,CAAA,QAAA,EAAW,cAAI,GAAI,EAAA,CAAA;AAAA,YACnD,oBAAA,EAAsB,EAAE,OAAA,EAAS,IAAK;AAAA;AAAA,SACxC;AAAA,wBACC,IAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,WAC9B,EAAA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,KAAA,EAAO,SAAQ,SAC3C,EAAA,QAAA,EAAA;AAAA,YAAA,CAAA,CAAE,gBAAgB,EAAE,KAAA,EAAO,IAAI,UAAY,EAAA,QAAA,EAAU,QAAQ,CAAA;AAAA,YAC7D,QAAA;AAAA,YACA,EAAE,kBAAoB,EAAA,EAAE,KAAO,EAAA,GAAA,CAAI,eAAe;AAAA,WACrD,EAAA,CAAA;AAAA,UACC,GAAI,CAAA,OAAA,IAAW,GAAI,CAAA,OAAA,CAAQ,MAAS,GAAA,CAAA,oBAClC,IAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,OAAA,CAAQ,OAAS,EAAA,OAAA,EAAQ,SAC7C,EAAA,QAAA,EAAA;AAAA,YAAA,CAAA,CAAE,gBAAgB,CAAA;AAAA,YAClB,IAAA;AAAA,YACA,IAAI,OAAQ,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,sBAEjB,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,aAAA,EAAA,EAAsB,SAAW,EAAA,CAAA,EAAA,EAAd,CAAiB,CAAA;AAAA,cACpC,CAAM,KAAA,GAAA,CAAI,OAAS,CAAA,MAAA,GAAS,IAAI,EAAK,GAAA;AAAA,aAAA,EACxC,CACD;AAAA,WACH,EAAA,CAAA;AAAA,8BAED,UAAW,EAAA,EAAA,SAAA,EAAW,QAAQ,WAAa,EAAA,OAAA,EAAQ,SACjD,QAAU,EAAA,SAAA,CAAA,QAAA;AAAA,YACT,SAAS,wBAAyB,CAAA,GAAA,CAAI,WAAe,IAAA,EAAE,GAAG,GAAG;AAAA,WAEjE,EAAA;AAAA,SACF,EAAA;AAAA,OACF,EAAA,CAAA;AAAA,sBACC,GAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,WAC9B,EAAA,QAAA,kBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,cAAA,EAAe,QAAS,EAAA,OAAA,EAAS,CAC/C,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,CAAA,CAAE,mBAAmB,CACnC,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,OAAQ,CAAA,YAAA;AAAA,YACnB,IAAK,EAAA,OAAA;AAAA,YACL,OAAQ,EAAA,UAAA;AAAA,YACR,OAAO,IAAK,CAAA,cAAA,CAAe,GAAI,CAAA,GAAG,IAAI,WAAc,GAAA,SAAA;AAAA,YACpD,SAAS,MAAM;AACb,cAAA,IAAI,IAAK,CAAA,cAAA,CAAe,GAAI,CAAA,GAAG,CAAG,EAAA;AAChC,gBAAK,IAAA,CAAA,WAAA,CAAY,IAAI,GAAG,CAAA;AAAA,eACnB,MAAA;AACL,gBAAK,IAAA,CAAA,SAAA,CAAU,IAAI,GAAG,CAAA;AAAA;AACxB,aACF;AAAA,YACA,SAAA,EACE,IAAK,CAAA,cAAA,CAAe,GAAI,CAAA,GAAG,oBACxB,GAAA,CAAA,aAAA,EAAA,EAAc,CAEf,mBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,CAAA;AAAA,YAIf,QAAA,EAAA,IAAA,CAAK,eAAe,GAAI,CAAA,GAAG,IACxB,CAAE,CAAA,oBAAoB,CACtB,GAAA,CAAA,CAAE,kBAAkB;AAAA;AAAA,WAE5B,CACF,EAAA,CAAA;AAAA,QACC,GAAI,CAAA,OAAA,oBACF,GAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,OAAQ,CAAA,YAAA;AAAA,YACnB,IAAK,EAAA,OAAA;AAAA,YACL,OAAS,EAAA,mBAAA;AAAA,YACT,OAAQ,EAAA,UAAA;AAAA,YACR,SAAA,sBAAY,QAAS,EAAA,EAAA,CAAA;AAAA,YAEpB,YAAE,gBAAgB;AAAA;AAAA,SAEvB,EAAA,CAAA;AAAA,QAED,GAAI,CAAA,SAAA,oBACF,IAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,OAAQ,CAAA,YAAA;AAAA,cACnB,IAAK,EAAA,OAAA;AAAA,cACL,OAAS,EAAA,qBAAA;AAAA,cACT,OAAQ,EAAA,WAAA;AAAA,cACR,KAAM,EAAA,WAAA;AAAA,cACN,SAAA,sBAAY,UAAW,EAAA,EAAA,CAAA;AAAA,cAEtB,YAAE,kBAAkB;AAAA;AAAA,WACvB;AAAA,0BACA,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,IAAM,EAAA,eAAA;AAAA,cACN,OAAS,EAAA,sBAAA;AAAA,cACT,MAAQ,EAAA;AAAA;AAAA;AACV,SACF,EAAA;AAAA,OAAA,EAEJ,CACF,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAM,EAAA,aAAA;AAAA,QACN,OAAS,EAAA,oBAAA;AAAA,QACT;AAAA;AAAA;AACF,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -13,11 +13,12 @@ import { useIsModerator } from '../../hooks/useIsModerator.esm.js';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
 import useDebounce from 'react-use/lib/useDebounce';
 import { TagsGridContent } from './TagsGridContent.esm.js';
-import { SearchBar } from '../SearchBar/SearchBar.esm.js';
-import { Grid, Typography, Button } from '@material-ui/core';
+import { Button, Grid } from '@material-ui/core';
 import { CreateTagModal } from './CreateTagModal.esm.js';
 import { qetaCreateTagPermission } from '@drodil/backstage-plugin-qeta-common';
 import { OptionalRequirePermission } from '../Utility/OptionalRequirePermission.esm.js';
+import { QetaGridHeader } from '../Utility/QetaGridHeader.esm.js';
+import Add from '@material-ui/icons/Add';
 const TagsGrid = () => {
   const [page, setPage] = useState(1);
@@ -73,43 +74,45 @@ const TagsGrid = () => {
     onTagsModify();
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, className: "qetaTagsContainer", children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsx(
-      SearchBar,
+    /* @__PURE__ */ jsx(
+      QetaGridHeader,
       {
+        title: response ? t("tagPage.tags", { count: response.total }) : "",
+        searchBarLabel: t("tagPage.search.label"),
+        loading,
         onSearch: onSearchQueryChange,
-        label: t("tagPage.search.label"),
-        loading
+        buttons: response && /* @__PURE__ */ jsxs(
+          OptionalRequirePermission,
+          {
+            permission: qetaCreateTagPermission,
+            errorPage: /* @__PURE__ */ jsx(Fragment, {}),
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outlined",
+                  color: "primary",
+                  startIcon: /* @__PURE__ */ jsx(Add, {}),
+                  size: "small",
+                  onClick: handleCreateModalOpen,
+                  style: { float: "right" },
+                  children: t("tagPage.createTag")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CreateTagModal,
+                {
+                  open: createModalOpen,
+                  onClose: handleCreateModalClose,
+                  isModerator
+                }
+              )
+            ]
+          }
+        )
       }
-    ) }) }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "space-between", children: [
-      response && /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", className: "qetaTagsContainerTitle", children: t("tagPage.tags", { count: response.total }) }) }),
-      response && /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsxs(
-        OptionalRequirePermission,
-        {
-          permission: qetaCreateTagPermission,
-          errorPage: /* @__PURE__ */ jsx(Fragment, {}),
-          children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "contained",
-                color: "primary",
-                onClick: handleCreateModalOpen,
-                style: { float: "right" },
-                children: t("tagPage.createTag")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              CreateTagModal,
-              {
-                open: createModalOpen,
-                onClose: handleCreateModalClose,
-                isModerator
-              }
-            )
-          ]
-        }
-      ) }),
+    ),
+    /* @__PURE__ */ jsxs(Grid, { container: true, children: [
       /* @__PURE__ */ jsx(
         TagsGridContent,
         {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TagsGrid.esm.js","sources":["../../../src/components/TagsGrid/TagsGrid.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useIsModerator, useQetaApi } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { TagsGridContent } from './TagsGridContent';\nimport { ~~SearchBar } from '../SearchBar/SearchBar';\nimport {~~ Button, Grid, ~~Typography~~ } from '@material-ui/core';\nimport { CreateTagModal } from './CreateTagModal';\nimport { qetaCreateTagPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\ntype TagFilters = {\n order: 'asc' \| 'desc';\n orderBy: 'tag' \| 'followersCount' \| 'postsCount';\n searchQuery: string;\n};\n\nexport const TagsGrid = () => {\n const [page, setPage] = useState(1);\n const [pageCount, setPageCount] = useState(1);\n const [tagsPerPage, setTagsPerPage] = useState(25);\n const [searchQuery, setSearchQuery] = useState('');\n const { t } = useTranslationRef(qetaTranslationRef);\n const { isModerator } = useIsModerator();\n const [filters, setFilters] = useState<TagFilters>({\n order: 'desc',\n orderBy: 'tag',\n searchQuery: '',\n });\n\n const onSearchQueryChange = (val: string) => {\n setPage(1);\n setSearchQuery(val);\n };\n\n const {\n value: response,\n loading,\n error,\n retry,\n } = useQetaApi(\n api =>\n api.getTags({\n limit: tagsPerPage,\n offset: (page - 1) * tagsPerPage,\n checkAccess: true,\n ...filters,\n }),\n [page, tagsPerPage, filters],\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 / tagsPerPage));\n }\n }, [response, tagsPerPage]);\n\n const onTagsModify = () => {\n retry();\n };\n\n const [createModalOpen, setCreateModalOpen] = useState(false);\n const handleCreateModalOpen = () => setCreateModalOpen(true);\n const handleCreateModalClose = () => {\n setCreateModalOpen(false);\n onTagsModify();\n };\n\n return (\n <>\n <~~Grid container className=\"qetaTagsContainer~~\~~">\~~n ~~<Grid~~ ~~item~~ ~~xs=~~{12} ~~md={4~~}~~>\n <SearchBar~~\n ~~onSearch~~={~~onSearchQueryChange}\n label={~~t('tagPage.search.label')}\n loading={loading}\n ~~/>\n~~ ~~</Grid>\n </Grid>\n <Grid container justifyContent=\"space-between\">\n {response && (\n <Grid item xs~~={8}~~>\n <Typography variant=\"h6~~\~~" className=\"qetaTagsContainerTitle\">\~~n {~~t('tagPage.tags', { count: response.total })}~~\n ~~</Typography>\n~~ ~~</Grid>\n )}\n {~~response && (\n ~~<Grid item xs={4}>\n~~ <OptionalRequirePermission\n permission={qetaCreateTagPermission}\n errorPage={<></>}\n >\n <Button\n variant=\"~~contained~~\"\n color=\"primary\"\n onClick={handleCreateModalOpen}\n style={{ float: 'right' }}\n >\n {t('tagPage.createTag')}\n </Button>\n <CreateTagModal\n open={createModalOpen}\n onClose={handleCreateModalClose}\n isModerator={isModerator}\n />\n </OptionalRequirePermission>\n ~~</Grid>\~~n )}\n <TagsGridContent\n response={response}\n onTagEdit={onTagsModify}\n loading={loading}\n error={error}\n isModerator={isModerator}\n />\n {response && response?.total > 0 && (\n <QetaPagination\n pageSize={tagsPerPage}\n handlePageChange={(_e, p) => setPage(p)}\n handlePageSizeChange={e => setTagsPerPage(Number(e.target.value))}\n page={page}\n pageCount={pageCount}\n />\n )}\n </Grid>\n </>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;AAmBO~~,MAAM,WAAW,MAAM;AAC5B,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,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,cAAe,EAAA;AACvC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAqB,CAAA;AAAA,IACjD,KAAO,EAAA,MAAA;AAAA,IACP,OAAS,EAAA,KAAA;AAAA,IACT,WAAa,EAAA;AAAA,GACd,CAAA;AAED,EAAM,MAAA,mBAAA,GAAsB,CAAC,GAAgB,KAAA;AAC3C,IAAA,OAAA,CAAQ,CAAC,CAAA;AACT,IAAA,cAAA,CAAe,GAAG,CAAA;AAAA,GACpB;AAEA,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACE,GAAA,UAAA;AAAA,IACF,CAAA,GAAA,KACE,IAAI,OAAQ,CAAA;AAAA,MACV,KAAO,EAAA,WAAA;AAAA,MACP,MAAA,EAAA,CAAS,OAAO,CAAK,IAAA,WAAA;AAAA,MACrB,WAAa,EAAA,IAAA;AAAA,MACb,GAAG;AAAA,KACJ,CAAA;AAAA,IACH,CAAC,IAAM,EAAA,WAAA,EAAa,OAAO;AAAA,GAC7B;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,WAAW,CAAC,CAAA;AAAA;AACtD,GACC,EAAA,CAAC,QAAU,EAAA,WAAW,CAAC,CAAA;AAE1B,EAAA,MAAM,eAAe,MAAM;AACzB,IAAM,KAAA,EAAA;AAAA,GACR;AAEA,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5D,EAAM,MAAA,qBAAA,GAAwB,MAAM,kBAAA,CAAmB,IAAI,CAAA;AAC3D,EAAA,MAAM,yBAAyB,MAAM;AACnC,IAAA,kBAAA,CAAmB,KAAK,CAAA;AACxB,IAAa,YAAA,EAAA;AAAA,GACf;AAEA,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA~~,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,SAAA,EAAU,mBACxB,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~~,~~sBAAsB~~,CAAA~~;AAAA~~,~~QAC/B;AAAA;AAAA~~,~~OAEJ~~,~~CACF~~,~~EAAA~~,~~CAAA;AAAA,oBACC,IAAA,CAAA,IAAA,~~EAAA,~~EAAK~~,~~SAAS~~,~~EAAA~~,~~IAAA,~~EAAC,~~gBAAe~~,~~eAC5B~~,EAAA~~,QAAA,EAAA~~;AAAA,~~MACC~~,~~QAAA~~,~~oBAAA~~,~~GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,QAAA,kBAAA,GAAA,CAAC,cAAW,OAAQ,EAAA,IAAA,EAAK,WAAU,wBAChC,EAAA,QAAA,EAAA,CAAA,CAAE,gBAAgB,~~EAAE,~~KAAA~~,~~EAAO,SAAS,KAAM,EAAC,GAC9C,CACF,EAAA,~~CAAA;AAAA,~~MAED~~,~~4BACE~~,~~GAAA~~,~~CAAA~~,~~IAAA,~~EAAA,~~EAAK~~,~~IAAI~~,~~EAAA~~,~~IAAA~~,~~EAAC~~,~~IAAI,CACb,EAAA,QAAA,kBAAA,~~IAAA;AAAA,~~QAAC~~,yBAAA;AAAA,~~QAAA~~;AAAA,~~UACC~~,UAAY,EAAA,uBAAA;AAAA,~~UACZ~~,2BAAa,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA;AAAA,~~UAEb~~,QAAA,EAAA;AAAA,~~4BAAA~~,GAAA;AAAA,~~cAAC~~,MAAA;AAAA,~~cAAA~~;AAAA,~~gBACC~~,OAAQ,EAAA,~~WAAA~~;AAAA,~~gBACR~~,KAAM,EAAA,SAAA;AAAA,~~gBACN~~,OAAS,EAAA,qBAAA;AAAA,~~gBACT~~,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,~~gBAEvB~~,YAAE,mBAAmB;AAAA;AAAA,~~aACxB~~;AAAA,~~4BACA~~,GAAA;AAAA,~~cAAC~~,cAAA;AAAA,~~cAAA~~;AAAA,~~gBACC~~,IAAM,EAAA,eAAA;AAAA,~~gBACN~~,OAAS,EAAA,sBAAA;AAAA,~~gBACT~~;AAAA;AAAA;AACF;AAAA;AAAA,~~OAEJ~~,EAAA,~~CAAA~~;AAAA,~~sBAEF~~,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,QAAA;AAAA,UACA,SAAW,EAAA,YAAA;AAAA,UACX,OAAA;AAAA,UACA,KAAA;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,WAAA;AAAA,UACV,gBAAkB,EAAA,CAAC,EAAI,EAAA,CAAA,KAAM,QAAQ,CAAC,CAAA;AAAA,UACtC,sBAAsB,CAAK,CAAA,KAAA,cAAA,CAAe,OAAO,CAAE,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,UAChE,IAAA;AAAA,UACA;AAAA;AAAA;AACF,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"TagsGrid.esm.js","sources":["../../../src/components/TagsGrid/TagsGrid.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useIsModerator, useQetaApi } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { TagsGridContent } from './TagsGridContent';\nimport { Button, Grid } from '@material-ui/core';\nimport { CreateTagModal } from './CreateTagModal';\nimport { qetaCreateTagPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaGridHeader } from '../Utility/QetaGridHeader';\nimport Add from '@material-ui/icons/Add';\n\ntype TagFilters = {\n order: 'asc' \| 'desc';\n orderBy: 'tag' \| 'followersCount' \| 'postsCount';\n searchQuery: string;\n};\n\nexport const TagsGrid = () => {\n const [page, setPage] = useState(1);\n const [pageCount, setPageCount] = useState(1);\n const [tagsPerPage, setTagsPerPage] = useState(25);\n const [searchQuery, setSearchQuery] = useState('');\n const { t } = useTranslationRef(qetaTranslationRef);\n const { isModerator } = useIsModerator();\n const [filters, setFilters] = useState<TagFilters>({\n order: 'desc',\n orderBy: 'tag',\n searchQuery: '',\n });\n\n const onSearchQueryChange = (val: string) => {\n setPage(1);\n setSearchQuery(val);\n };\n\n const {\n value: response,\n loading,\n error,\n retry,\n } = useQetaApi(\n api =>\n api.getTags({\n limit: tagsPerPage,\n offset: (page - 1) * tagsPerPage,\n checkAccess: true,\n ...filters,\n }),\n [page, tagsPerPage, filters],\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 / tagsPerPage));\n }\n }, [response, tagsPerPage]);\n\n const onTagsModify = () => {\n retry();\n };\n\n const [createModalOpen, setCreateModalOpen] = useState(false);\n const handleCreateModalOpen = () => setCreateModalOpen(true);\n const handleCreateModalClose = () => {\n setCreateModalOpen(false);\n onTagsModify();\n };\n\n return (\n <>\n <QetaGridHeader\n title={response ? t('tagPage.tags', { count: response.total }) : ''}\n searchBarLabel={t('tagPage.search.label')}\n loading={loading}\n onSearch={onSearchQueryChange}\n buttons={\n response && (\n <OptionalRequirePermission\n permission={qetaCreateTagPermission}\n errorPage={<></>}\n >\n <Button\n variant=\"outlined\"\n color=\"primary\"\n startIcon={<Add />}\n size=\"small\"\n onClick={handleCreateModalOpen}\n style={{ float: 'right' }}\n >\n {t('tagPage.createTag')}\n </Button>\n <CreateTagModal\n open={createModalOpen}\n onClose={handleCreateModalClose}\n isModerator={isModerator}\n />\n </OptionalRequirePermission>\n )\n }\n />\n <Grid container>\n <TagsGridContent\n response={response}\n onTagEdit={onTagsModify}\n loading={loading}\n error={error}\n isModerator={isModerator}\n />\n {response && response?.total > 0 && (\n <QetaPagination\n pageSize={tagsPerPage}\n handlePageChange={(_e, p) => setPage(p)}\n handlePageSizeChange={e => setTagsPerPage(Number(e.target.value))}\n page={page}\n pageCount={pageCount}\n />\n )}\n </Grid>\n </>\n );\n};\n"],"names":[],"mappings":"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"}