@drodil/backstage-plugin-qeta-react 3.48.2 → 3.49.1

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

@@ -1,146 +1,246 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { truncate, removeMarkdownFormatting } from '@drodil/backstage-plugin-qeta-common';
-import { Grid, Card, CardActionArea, CardHeader, CardContent, Typography, Tooltip, CardActions, Button } from '@material-ui/core';
+import { TagFollowButton } from '../Buttons/TagFollowButton.esm.js';
+import { makeStyles, Grid, Card, Box, Avatar, Tooltip, Typography, IconButton, Menu, MenuItem, ListItemIcon, ListItemText, CardContent } from '@material-ui/core';
 import { useState } from 'react';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { tagRouteRef } from '../../routes.esm.js';
-import { useNavigate } from 'react-router-dom';
 import { EditTagModal } from './EditTagModal.esm.js';
 import DOMPurify from 'dompurify';
-import '../../api.esm.js';
-import 'react-use';
-import { useTagsFollow } from '../../hooks/useTagsFollow.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import { EntityRefLink } from '@backstage/plugin-catalog-react';
-import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { qetaTranslationRef } from '../../translation.esm.js';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@backstage/plugin-permission-common';
 import { DeleteModal } from '../DeleteModal/DeleteModal.esm.js';
 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 MoreVertIcon from '@material-ui/icons/MoreVert';
+import LocalOfferIcon from '@material-ui/icons/LocalOffer';
+import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
+import PeopleIcon from '@material-ui/icons/People';
+import LinkIcon from '@material-ui/icons/Link';
+import DescriptionIcon from '@material-ui/icons/Description';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import useGridItemStyles from '../GridItemStyles/useGridItemStyles.esm.js';
 import { useTooltipStyles } from '../../hooks/useTooltipStyles.esm.js';
+import { ClickableLink } from '../Utility/ClickableLink.esm.js';
 
+const useStyles = makeStyles((theme) => ({
+  statsGrid: {
+    marginTop: "auto"
+  },
+  statItem: {
+    padding: theme.spacing(1),
+    borderRadius: theme.shape.borderRadius,
+    width: "100%",
+    height: "100%",
+    justifyContent: "center"
+  },
+  flexColumn: {
+    display: "flex",
+    flexDirection: "column"
+  }
+}));
 const TagGridItem = (props) => {
   const { tag, onTagEdit, isModerator } = props;
   const tagRoute = useRouteRef(tagRouteRef);
-  const navigate = useNavigate();
   const { t } = useTranslationRef(qetaTranslationRef);
-  const tags = useTagsFollow();
   const classes = useGridItemStyles();
+  const localClasses = useStyles();
   const tooltipStyles = useTooltipStyles();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const handleMenuClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleMenuClose = (_event, _reason) => {
+    setAnchorEl(null);
+  };
   const [editModalOpen, setEditModalOpen] = useState(false);
-  const handleEditModalOpen = () => setEditModalOpen(true);
+  const handleEditModalOpen = (event) => {
+    handleMenuClose();
+    setEditModalOpen(true);
+  };
   const handleEditModalClose = () => {
     setEditModalOpen(false);
     onTagEdit();
   };
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
-  const handleDeleteModalOpen = () => setDeleteModalOpen(true);
+  const handleDeleteModalOpen = (event) => {
+    handleMenuClose();
+    setDeleteModalOpen(true);
+  };
   const handleDeleteModalClose = () => {
     setDeleteModalOpen(false);
     onTagEdit();
   };
-  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 })
-          ] }),
-          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 ? "" : ", "
-            ] }))
-          ] }),
-          tag.description && /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              title: tag.description,
-              arrow: true,
-              classes: {
-                tooltip: tooltipStyles.tooltip,
-                arrow: tooltipStyles.tooltipArrow
-              },
-              children: /* @__PURE__ */ jsx(Typography, { className: classes.description, variant: "body2", children: DOMPurify.sanitize(
-                truncate(removeMarkdownFormatting(tag.description), 80)
-              ) })
-            }
-          )
-        ] })
-      ] }),
-      /* @__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);
+  const href = tagRoute({ tag: tag.tag });
+  return /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, sm: 6, md: 6, xl: 4, children: [
+    /* @__PURE__ */ jsx(Card, { className: classes.card, children: /* @__PURE__ */ jsxs(ClickableLink, { href, ariaLabel: tag.tag, children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          className: classes.cardHeader,
+          display: "flex",
+          alignItems: "center",
+          children: [
+            /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                variant: "rounded",
+                className: "avatar",
+                style: { marginRight: 16 },
+                children: /* @__PURE__ */ jsx(LocalOfferIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx(Tooltip, { title: tag.tag, arrow: true, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", noWrap: true, children: tag.tag }) }) }),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                display: "flex",
+                alignItems: "center",
+                flexShrink: 0,
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(TagFollowButton, { tag: tag.tag }),
+                  tag.canEdit || tag.canDelete ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(IconButton, { "aria-label": "settings", onClick: handleMenuClick, children: /* @__PURE__ */ jsx(MoreVertIcon, {}) }),
+                    /* @__PURE__ */ jsxs(
+                      Menu,
+                      {
+                        id: "tag-menu",
+                        anchorEl,
+                        keepMounted: true,
+                        open: Boolean(anchorEl),
+                        onClose: handleMenuClose,
+                        getContentAnchorEl: null,
+                        anchorOrigin: {
+                          vertical: "bottom",
+                          horizontal: "right"
+                        },
+                        transformOrigin: {
+                          vertical: "top",
+                          horizontal: "right"
+                        },
+                        children: [
+                          tag.canEdit && /* @__PURE__ */ jsxs(
+                            MenuItem,
+                            {
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleEditModalOpen();
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(ListItemIcon, { style: { minWidth: "32px" }, children: /* @__PURE__ */ jsx(EditIcon, { fontSize: "small" }) }),
+                                /* @__PURE__ */ jsx(ListItemText, { primary: t("tagButton.edit") })
+                              ]
+                            }
+                          ),
+                          tag.canDelete && /* @__PURE__ */ jsxs(
+                            MenuItem,
+                            {
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleDeleteModalOpen();
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(ListItemIcon, { style: { minWidth: "32px" }, children: /* @__PURE__ */ jsx(DeleteIcon, { fontSize: "small" }) }),
+                                /* @__PURE__ */ jsx(ListItemText, { primary: t("tagButton.delete") })
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] }) : null
+                ]
               }
-            },
-            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__ */ jsxs(
+        CardContent,
+        {
+          className: `${classes.cardContent} ${localClasses.flexColumn}`,
+          children: [
+            tag.description && /* @__PURE__ */ jsx(Box, { mb: 2, children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: tag.description,
+                arrow: true,
+                classes: {
+                  tooltip: tooltipStyles.tooltip,
+                  arrow: tooltipStyles.tooltipArrow
+                },
+                children: /* @__PURE__ */ jsx(Typography, { className: classes.description, variant: "body2", children: DOMPurify.sanitize(
+                  truncate(removeMarkdownFormatting(tag.description), 80)
+                ) })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, className: localClasses.statsGrid, children: [
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: tag.questionsCount }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.questions") })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: tag.articlesCount }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.articles") })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: tag.linksCount }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.links") })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: tag.followerCount }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.followersPlain") })
+                  ]
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    ] }) }),
     /* @__PURE__ */ jsx(
       EditTagModal,
       {
@@ -149,6 +249,14 @@ const TagGridItem = (props) => {
         onClose: handleEditModalClose,
         isModerator
       }
+    ),
+    /* @__PURE__ */ jsx(
+      DeleteModal,
+      {
+        open: deleteModalOpen,
+        onClose: handleDeleteModalClose,
+        entity: tag
+      }
     )
   ] });
 };

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

@@ -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';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\nimport { useTooltipStyles } from '../../hooks/useTooltipStyles.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  const classes = useGridItemStyles();\n  const tooltipStyles = useTooltipStyles();\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            {tag.description && (\n              <Tooltip\n                title={tag.description}\n                arrow\n                classes={{\n                  tooltip: tooltipStyles.tooltip,\n                  arrow: tooltipStyles.tooltipArrow,\n                }}\n              >\n                <Typography className={classes.description} variant=\"body2\">\n                  {DOMPurify.sanitize(\n                    truncate(removeMarkdownFormatting(tag.description), 80),\n                  )}\n                </Typography>\n              </Tooltip>\n            )}\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":"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"}
+{"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 { TagFollowButton } from '../Buttons/TagFollowButton';\nimport {\n  Avatar,\n  Box,\n  Card,\n  CardContent,\n  Grid,\n  IconButton,\n  ListItemIcon,\n  ListItemText,\n  makeStyles,\n  Menu,\n  MenuItem,\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 { EditTagModal } from './EditTagModal';\nimport DOMPurify from 'dompurify';\nimport { DeleteModal } from '../DeleteModal';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\nimport LocalOfferIcon from '@material-ui/icons/LocalOffer';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport PeopleIcon from '@material-ui/icons/People';\nimport LinkIcon from '@material-ui/icons/Link';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\nimport { useTooltipStyles } from '../../hooks/useTooltipStyles.ts';\nimport { ClickableLink } from '../Utility/ClickableLink';\n\nconst useStyles = makeStyles(theme => ({\n  statsGrid: {\n    marginTop: 'auto',\n  },\n  statItem: {\n    padding: theme.spacing(1),\n    borderRadius: theme.shape.borderRadius,\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n  },\n  flexColumn: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n}));\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 { t } = useTranslationRef(qetaTranslationRef);\n  const classes = useGridItemStyles();\n  const localClasses = useStyles();\n  const tooltipStyles = useTooltipStyles();\n\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const handleMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    setAnchorEl(event.currentTarget);\n  };\n  const handleMenuClose = (\n    _event: {},\n    _reason: 'backdropClick' | 'escapeKeyDown',\n  ) => {\n    setAnchorEl(null);\n  };\n\n  const [editModalOpen, setEditModalOpen] = useState(false);\n  const handleEditModalOpen = (event: React.MouseEvent<HTMLElement>) => {\n    handleMenuClose(event as any, 'backdropClick');\n    setEditModalOpen(true);\n  };\n  const handleEditModalClose = () => {\n    setEditModalOpen(false);\n    onTagEdit();\n  };\n\n  const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n  const handleDeleteModalOpen = (event: React.MouseEvent<HTMLElement>) => {\n    handleMenuClose(event as any, 'backdropClick');\n    setDeleteModalOpen(true);\n  };\n  const handleDeleteModalClose = () => {\n    setDeleteModalOpen(false);\n    onTagEdit();\n  };\n\n  const href = tagRoute({ tag: tag.tag });\n\n  return (\n    <Grid item xs={12} sm={6} md={6} xl={4}>\n      <Card className={classes.card}>\n        <ClickableLink href={href} ariaLabel={tag.tag}>\n          <Box\n            className={classes.cardHeader}\n            display=\"flex\"\n            alignItems=\"center\"\n          >\n            <Avatar\n              variant=\"rounded\"\n              className=\"avatar\"\n              style={{ marginRight: 16 }}\n            >\n              <LocalOfferIcon />\n            </Avatar>\n            <Box flex={1} minWidth={0}>\n              <Tooltip title={tag.tag} arrow>\n                <Typography variant=\"h6\" noWrap>\n                  {tag.tag}\n                </Typography>\n              </Tooltip>\n            </Box>\n            <Box\n              display=\"flex\"\n              alignItems=\"center\"\n              flexShrink={0}\n              onClick={e => {\n                e.preventDefault();\n                e.stopPropagation();\n              }}\n            >\n              <TagFollowButton tag={tag.tag} />\n              {tag.canEdit || tag.canDelete ? (\n                <>\n                  <IconButton aria-label=\"settings\" onClick={handleMenuClick}>\n                    <MoreVertIcon />\n                  </IconButton>\n                  <Menu\n                    id=\"tag-menu\"\n                    anchorEl={anchorEl}\n                    keepMounted\n                    open={Boolean(anchorEl)}\n                    onClose={handleMenuClose}\n                    getContentAnchorEl={null}\n                    anchorOrigin={{\n                      vertical: 'bottom',\n                      horizontal: 'right',\n                    }}\n                    transformOrigin={{\n                      vertical: 'top',\n                      horizontal: 'right',\n                    }}\n                  >\n                    {tag.canEdit && (\n                      <MenuItem\n                        onClick={e => {\n                          e.stopPropagation();\n                          handleEditModalOpen(e);\n                        }}\n                      >\n                        <ListItemIcon style={{ minWidth: '32px' }}>\n                          <EditIcon fontSize=\"small\" />\n                        </ListItemIcon>\n                        <ListItemText primary={t('tagButton.edit')} />\n                      </MenuItem>\n                    )}\n                    {tag.canDelete && (\n                      <MenuItem\n                        onClick={e => {\n                          e.stopPropagation();\n                          handleDeleteModalOpen(e);\n                        }}\n                      >\n                        <ListItemIcon style={{ minWidth: '32px' }}>\n                          <DeleteIcon fontSize=\"small\" />\n                        </ListItemIcon>\n                        <ListItemText primary={t('tagButton.delete')} />\n                      </MenuItem>\n                    )}\n                  </Menu>\n                </>\n              ) : null}\n            </Box>\n          </Box>\n          <CardContent\n            className={`${classes.cardContent} ${localClasses.flexColumn}`}\n          >\n            {tag.description && (\n              <Box mb={2}>\n                <Tooltip\n                  title={tag.description}\n                  arrow\n                  classes={{\n                    tooltip: tooltipStyles.tooltip,\n                    arrow: tooltipStyles.tooltipArrow,\n                  }}\n                >\n                  <Typography className={classes.description} variant=\"body2\">\n                    {DOMPurify.sanitize(\n                      truncate(removeMarkdownFormatting(tag.description), 80),\n                    )}\n                  </Typography>\n                </Tooltip>\n              </Box>\n            )}\n\n            <Grid container spacing={1} className={localClasses.statsGrid}>\n              <Grid item xs={3}>\n                <Box\n                  display=\"flex\"\n                  flexDirection=\"column\"\n                  alignItems=\"center\"\n                  className={localClasses.statItem}\n                >\n                  <QuestionAnswerIcon fontSize=\"small\" color=\"disabled\" />\n                  <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                    {tag.questionsCount}\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"textSecondary\">\n                    {t('common.questions')}\n                  </Typography>\n                </Box>\n              </Grid>\n              <Grid item xs={3}>\n                <Box\n                  display=\"flex\"\n                  flexDirection=\"column\"\n                  alignItems=\"center\"\n                  className={localClasses.statItem}\n                >\n                  <DescriptionIcon fontSize=\"small\" color=\"disabled\" />\n                  <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                    {tag.articlesCount}\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"textSecondary\">\n                    {t('common.articles')}\n                  </Typography>\n                </Box>\n              </Grid>\n              <Grid item xs={3}>\n                <Box\n                  display=\"flex\"\n                  flexDirection=\"column\"\n                  alignItems=\"center\"\n                  className={localClasses.statItem}\n                >\n                  <LinkIcon fontSize=\"small\" color=\"disabled\" />\n                  <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                    {tag.linksCount}\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"textSecondary\">\n                    {t('common.links')}\n                  </Typography>\n                </Box>\n              </Grid>\n              <Grid item xs={3}>\n                <Box\n                  display=\"flex\"\n                  flexDirection=\"column\"\n                  alignItems=\"center\"\n                  className={localClasses.statItem}\n                >\n                  <PeopleIcon fontSize=\"small\" color=\"disabled\" />\n                  <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                    {tag.followerCount}\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"textSecondary\">\n                    {t('common.followersPlain')}\n                  </Typography>\n                </Box>\n              </Grid>\n            </Grid>\n          </CardContent>\n        </ClickableLink>\n      </Card>\n      <EditTagModal\n        tag={tag}\n        open={editModalOpen}\n        onClose={handleEditModalClose}\n        isModerator={isModerator}\n      />\n      <DeleteModal\n        open={deleteModalOpen}\n        onClose={handleDeleteModalClose}\n        entity={tag}\n      />\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -13,13 +13,16 @@ 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 { Button, Grid } from '@material-ui/core';
+import { Button, Collapse } 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';
+import { FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
+import FilterList from '@material-ui/icons/FilterList';
 
+const EXPANDED_LOCAL_STORAGE_KEY = "qeta-tags-filters-expanded";
 const TagsGrid = () => {
   const [page, setPage] = useState(1);
   const [pageCount, setPageCount] = useState(1);
@@ -27,11 +30,31 @@ const TagsGrid = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const { t } = useTranslationRef(qetaTranslationRef);
   const { isModerator } = useIsModerator();
+  const [showFilterPanel, setShowFilterPanel] = useState(
+    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === "true"
+  );
   const [filters, setFilters] = useState({
     order: "desc",
-    orderBy: "tag",
+    orderBy: "postsCount",
     searchQuery: ""
   });
+  useEffect(() => {
+    localStorage.setItem(
+      EXPANDED_LOCAL_STORAGE_KEY,
+      showFilterPanel ? "true" : "false"
+    );
+  }, [showFilterPanel]);
+  const onFilterChange = (changes) => {
+    const changesArray = Array.isArray(changes) ? changes : [changes];
+    setPage(1);
+    setFilters((prev) => {
+      const newValue = { ...prev };
+      for (const { key, value } of changesArray) {
+        newValue[key] = value;
+      }
+      return newValue;
+    });
+  };
   const onSearchQueryChange = (val) => {
     setPage(1);
     setSearchQuery(val);
@@ -81,59 +104,76 @@ const TagsGrid = () => {
         searchBarLabel: t("tagPage.search.label"),
         loading,
         onSearch: onSearchQueryChange,
-        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
-                }
-              )
-            ]
-          }
-        )
+        buttons: response && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__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,
+                    children: t("tagPage.createTag")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CreateTagModal,
+                  {
+                    open: createModalOpen,
+                    onClose: handleCreateModalClose,
+                    isModerator
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: () => setShowFilterPanel(!showFilterPanel),
+              className: "qetaCollectionsContainerFilterPanelBtn",
+              startIcon: /* @__PURE__ */ jsx(FilterList, {}),
+              style: { marginLeft: "1em" },
+              children: t("filterPanel.filterButton")
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: showFilterPanel, children: /* @__PURE__ */ jsx(
+      FilterPanel,
+      {
+        onChange: onFilterChange,
+        filters,
+        mode: "tags"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      TagsGridContent,
+      {
+        response,
+        onTagEdit: onTagsModify,
+        loading,
+        error,
+        isModerator
       }
     ),
-    /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "center", children: [
-      /* @__PURE__ */ jsx(
-        TagsGridContent,
-        {
-          response,
-          onTagEdit: onTagsModify,
-          loading,
-          error,
-          isModerator
-        }
-      ),
-      response && response?.total > 0 && /* @__PURE__ */ jsx(
-        QetaPagination,
-        {
-          pageSize: tagsPerPage,
-          handlePageChange: (_e, p) => setPage(p),
-          handlePageSizeChange: (e) => setTagsPerPage(Number(e.target.value)),
-          page,
-          pageCount
-        }
-      )
-    ] })
+    response && response?.total > 0 && /* @__PURE__ */ jsx(
+      QetaPagination,
+      {
+        pageSize: tagsPerPage,
+        handlePageChange: (_e, p) => setPage(p),
+        handlePageSizeChange: (e) => setTagsPerPage(Number(e.target.value)),
+        page,
+        pageCount
+      }
+    )
   ] });
 };