@drodil/backstage-plugin-qeta-react 3.14.0 → 3.15.0

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

@@ -0,0 +1,92 @@
+import { Modal, Backdrop, Typography, Grid, TextField, Button } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import React__default from 'react';
+import { useApi } from '@backstage/core-plugin-api';
+import { qetaApiRef } from '../../api.esm.js';
+import 'react-use';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import '@backstage/catalog-model';
+import 'dataloader';
+import '@backstage/plugin-catalog-react';
+import 'react-use/lib/useAsync';
+import { ModalContent } from '../Utility/ModalContent.esm.js';
+
+const CreateTagModal = (props) => {
+  const { open, onClose } = props;
+  const [tag, setTag] = React__default.useState("");
+  const [description, setDescription] = React__default.useState("");
+  const { t } = useTranslation();
+  const [error, setError] = React__default.useState(false);
+  const qetaApi = useApi(qetaApiRef);
+  const handleCreate = () => {
+    qetaApi.createTag(tag, description).then((ret) => {
+      if (ret) {
+        setTag("");
+        setDescription("");
+        onClose();
+        return;
+      }
+      setError(true);
+    }).catch(() => {
+      setError(true);
+    });
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    Modal,
+    {
+      open,
+      onClose,
+      className: "qetaCreateTagModal",
+      "aria-labelledby": "modal-modal-title",
+      "aria-describedby": "modal-modal-description",
+      closeAfterTransition: true,
+      BackdropComponent: Backdrop,
+      BackdropProps: {
+        timeout: 500
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(ModalContent, null, error && /* @__PURE__ */ React__default.createElement(Alert, { severity: "error" }, t("createTagModal.errorPosting")), /* @__PURE__ */ React__default.createElement(
+      Typography,
+      {
+        id: "modal-modal-title",
+        className: "qetaCreateTagModalTitle",
+        variant: "h6",
+        component: "h2",
+        style: { marginBottom: "1em" }
+      },
+      t("createTagModal.title")
+    ), /* @__PURE__ */ React__default.createElement(Grid, { container: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(
+      TextField,
+      {
+        variant: "outlined",
+        label: t("createTagModal.tagInput"),
+        style: { width: "100%" },
+        required: true,
+        value: tag,
+        onChange: (e) => setTag(e.target.value)
+      }
+    )), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(
+      TextField,
+      {
+        variant: "outlined",
+        label: t("createTagModal.description"),
+        multiline: true,
+        minRows: 10,
+        style: { width: "100%" },
+        value: description ?? "",
+        onChange: (e) => setDescription(e.target.value)
+      }
+    ))), /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        onClick: handleCreate,
+        className: "qetaCreateTagModalSaveBtn",
+        color: "secondary"
+      },
+      t("createTagModal.createButton")
+    ), /* @__PURE__ */ React__default.createElement(Button, { onClick: onClose, className: "qetaCreateTagModalCancelBtn" }, t("createTagModal.cancelButton")))
+  );
+};
+
+export { CreateTagModal };
+//# sourceMappingURL=CreateTagModal.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreateTagModal.esm.js","sources":["../../../src/components/TagsGrid/CreateTagModal.tsx"],"sourcesContent":["import {\n  Backdrop,\n  Button,\n  Grid,\n  Modal,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport React from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../hooks';\nimport { ModalContent } from '../Utility/ModalContent';\n\nexport const CreateTagModal = (props: {\n  open: boolean;\n  onClose: () => void;\n}) => {\n  const { open, onClose } = props;\n  const [tag, setTag] = React.useState('');\n  const [description, setDescription] = React.useState('');\n  const { t } = useTranslation();\n  const [error, setError] = React.useState(false);\n  const qetaApi = useApi(qetaApiRef);\n\n  const handleCreate = () => {\n    qetaApi\n      .createTag(tag, description)\n      .then(ret => {\n        if (ret) {\n          setTag('');\n          setDescription('');\n          onClose();\n          return;\n        }\n        setError(true);\n      })\n      .catch(() => {\n        setError(true);\n      });\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      className=\"qetaCreateTagModal\"\n      aria-labelledby=\"modal-modal-title\"\n      aria-describedby=\"modal-modal-description\"\n      closeAfterTransition\n      BackdropComponent={Backdrop}\n      BackdropProps={{\n        timeout: 500,\n      }}\n    >\n      <ModalContent>\n        {error && (\n          <Alert severity=\"error\">{t('createTagModal.errorPosting')}</Alert>\n        )}\n        <Typography\n          id=\"modal-modal-title\"\n          className=\"qetaCreateTagModalTitle\"\n          variant=\"h6\"\n          component=\"h2\"\n          style={{ marginBottom: '1em' }}\n        >\n          {t('createTagModal.title')}\n        </Typography>\n        <Grid container>\n          <Grid item xs={12}>\n            <TextField\n              variant=\"outlined\"\n              label={t('createTagModal.tagInput')}\n              style={{ width: '100%' }}\n              required\n              value={tag}\n              onChange={e => setTag(e.target.value)}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <TextField\n              variant=\"outlined\"\n              label={t('createTagModal.description')}\n              multiline\n              minRows={10}\n              style={{ width: '100%' }}\n              value={description ?? ''}\n              onChange={e => setDescription(e.target.value)}\n            />\n          </Grid>\n        </Grid>\n        <Button\n          onClick={handleCreate}\n          className=\"qetaCreateTagModalSaveBtn\"\n          color=\"secondary\"\n        >\n          {t('createTagModal.createButton')}\n        </Button>\n        <Button onClick={onClose} className=\"qetaCreateTagModalCancelBtn\">\n          {t('createTagModal.cancelButton')}\n        </Button>\n      </ModalContent>\n    </Modal>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -48,7 +48,8 @@ const EditTagModal = (props) => {
         id: "modal-modal-title",
         className: "qetaEditTagModalTitle",
         variant: "h6",
-        component: "h2"
+        component: "h2",
+        style: { marginBottom: "1em" }
       },
       t("editTagModal.title", { tag: tag.tag })
     ), /* @__PURE__ */ React__default.createElement(Grid, { container: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"EditTagModal.esm.js","sources":["../../../src/components/TagsGrid/EditTagModal.tsx"],"sourcesContent":["import { TagResponse } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Backdrop,\n  Button,\n  Grid,\n  Modal,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport React from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../hooks';\nimport { ModalContent } from '../Utility/ModalContent';\n\nexport const EditTagModal = (props: {\n  tag: TagResponse;\n  open: boolean;\n  onClose: () => void;\n}) => {\n  const { tag, open, onClose } = props;\n  const [description, setDescription] = React.useState(tag.description);\n  const { t } = useTranslation();\n  const [error, setError] = React.useState(false);\n  const qetaApi = useApi(qetaApiRef);\n\n  const handleUpdate = () => {\n    qetaApi\n      .updateTag(tag.tag, description)\n      .then(ret => {\n        if (ret) {\n          onClose();\n          return;\n        }\n        setError(true);\n      })\n      .catch(() => {\n        setError(true);\n      });\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      className=\"qetaEditTagModal\"\n      aria-labelledby=\"modal-modal-title\"\n      aria-describedby=\"modal-modal-description\"\n      closeAfterTransition\n      BackdropComponent={Backdrop}\n      BackdropProps={{\n        timeout: 500,\n      }}\n    >\n      <ModalContent>\n        {error && (\n          <Alert severity=\"error\">{t('editTagModal.errorPosting')}</Alert>\n        )}\n        <Typography\n          id=\"modal-modal-title\"\n          className=\"qetaEditTagModalTitle\"\n          variant=\"h6\"\n          component=\"h2\"\n        >\n          {t('editTagModal.title', { tag: tag.tag })}\n        </Typography>\n        <Grid container>\n          <Grid item xs={12}>\n            <TextField\n              variant=\"outlined\"\n              label={t('editTagModal.description')}\n              multiline\n              minRows={10}\n              style={{ width: '100%' }}\n              value={description ?? ''}\n              onChange={e => setDescription(e.target.value)}\n            />\n          </Grid>\n        </Grid>\n        <Button\n          onClick={handleUpdate}\n          className=\"qetaEditTagModalSaveBtn\"\n          color=\"secondary\"\n        >\n          {t('editTagModal.saveButton')}\n        </Button>\n        <Button onClick={onClose} className=\"qetaEditTagModalCancelBtn\">\n          {t('editTagModal.cancelButton')}\n        </Button>\n      </ModalContent>\n    </Modal>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"EditTagModal.esm.js","sources":["../../../src/components/TagsGrid/EditTagModal.tsx"],"sourcesContent":["import { TagResponse } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Backdrop,\n  Button,\n  Grid,\n  Modal,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport React from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../hooks';\nimport { ModalContent } from '../Utility/ModalContent';\n\nexport const EditTagModal = (props: {\n  tag: TagResponse;\n  open: boolean;\n  onClose: () => void;\n}) => {\n  const { tag, open, onClose } = props;\n  const [description, setDescription] = React.useState(tag.description);\n  const { t } = useTranslation();\n  const [error, setError] = React.useState(false);\n  const qetaApi = useApi(qetaApiRef);\n\n  const handleUpdate = () => {\n    qetaApi\n      .updateTag(tag.tag, description)\n      .then(ret => {\n        if (ret) {\n          onClose();\n          return;\n        }\n        setError(true);\n      })\n      .catch(() => {\n        setError(true);\n      });\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      className=\"qetaEditTagModal\"\n      aria-labelledby=\"modal-modal-title\"\n      aria-describedby=\"modal-modal-description\"\n      closeAfterTransition\n      BackdropComponent={Backdrop}\n      BackdropProps={{\n        timeout: 500,\n      }}\n    >\n      <ModalContent>\n        {error && (\n          <Alert severity=\"error\">{t('editTagModal.errorPosting')}</Alert>\n        )}\n        <Typography\n          id=\"modal-modal-title\"\n          className=\"qetaEditTagModalTitle\"\n          variant=\"h6\"\n          component=\"h2\"\n          style={{ marginBottom: '1em' }}\n        >\n          {t('editTagModal.title', { tag: tag.tag })}\n        </Typography>\n        <Grid container>\n          <Grid item xs={12}>\n            <TextField\n              variant=\"outlined\"\n              label={t('editTagModal.description')}\n              multiline\n              minRows={10}\n              style={{ width: '100%' }}\n              value={description ?? ''}\n              onChange={e => setDescription(e.target.value)}\n            />\n          </Grid>\n        </Grid>\n        <Button\n          onClick={handleUpdate}\n          className=\"qetaEditTagModalSaveBtn\"\n          color=\"secondary\"\n        >\n          {t('editTagModal.saveButton')}\n        </Button>\n        <Button onClick={onClose} className=\"qetaEditTagModalCancelBtn\">\n          {t('editTagModal.cancelButton')}\n        </Button>\n      </ModalContent>\n    </Modal>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAgBa,MAAA,YAAA,GAAe,CAAC,KAIvB,KAAA;AACJ,EAAA,MAAM,EAAE,GAAA,EAAK,IAAM,EAAA,OAAA,EAAY,GAAA,KAAA;AAC/B,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,IAAIA,cAAM,CAAA,QAAA,CAAS,IAAI,WAAW,CAAA;AACpE,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAAA,cAAA,CAAM,SAAS,KAAK,CAAA;AAC9C,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AAEjC,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,OAAA,CACG,UAAU,GAAI,CAAA,GAAA,EAAK,WAAW,CAAA,CAC9B,KAAK,CAAO,GAAA,KAAA;AACX,MAAA,IAAI,GAAK,EAAA;AACP,QAAQ,OAAA,EAAA;AACR,QAAA;AAAA;AAEF,MAAA,QAAA,CAAS,IAAI,CAAA;AAAA,KACd,CACA,CAAA,KAAA,CAAM,MAAM;AACX,MAAA,QAAA,CAAS,IAAI,CAAA;AAAA,KACd,CAAA;AAAA,GACL;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAU,EAAA,kBAAA;AAAA,MACV,iBAAgB,EAAA,mBAAA;AAAA,MAChB,kBAAiB,EAAA,yBAAA;AAAA,MACjB,oBAAoB,EAAA,IAAA;AAAA,MACpB,iBAAmB,EAAA,QAAA;AAAA,MACnB,aAAe,EAAA;AAAA,QACb,OAAS,EAAA;AAAA;AACX,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA,CAAC,YACE,EAAA,IAAA,EAAA,KAAA,oBACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,UAAS,OAAS,EAAA,EAAA,CAAA,CAAE,2BAA2B,CAAE,CAE1D,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,mBAAA;AAAA,QACH,SAAU,EAAA,uBAAA;AAAA,QACV,OAAQ,EAAA,IAAA;AAAA,QACR,SAAU,EAAA,IAAA;AAAA,QACV,KAAA,EAAO,EAAE,YAAA,EAAc,KAAM;AAAA,OAAA;AAAA,MAE5B,EAAE,oBAAsB,EAAA,EAAE,GAAK,EAAA,GAAA,CAAI,KAAK;AAAA,KAC3C,kBACCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAA,+CACZ,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EACb,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,UAAA;AAAA,QACR,KAAA,EAAO,EAAE,0BAA0B,CAAA;AAAA,QACnC,SAAS,EAAA,IAAA;AAAA,QACT,OAAS,EAAA,EAAA;AAAA,QACT,KAAA,EAAO,EAAE,KAAA,EAAO,MAAO,EAAA;AAAA,QACvB,OAAO,WAAe,IAAA,EAAA;AAAA,QACtB,QAAU,EAAA,CAAA,CAAA,KAAK,cAAe,CAAA,CAAA,CAAE,OAAO,KAAK;AAAA;AAAA,KAEhD,CACF,CACA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,YAAA;AAAA,QACT,SAAU,EAAA,yBAAA;AAAA,QACV,KAAM,EAAA;AAAA,OAAA;AAAA,MAEL,EAAE,yBAAyB;AAAA,KAC9B,kBACCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,OAAA,EAAS,WAAU,2BACjC,EAAA,EAAA,CAAA,CAAE,2BAA2B,CAChC,CACF;AAAA,GACF;AAEJ;;;;"}

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

@@ -14,6 +14,12 @@ import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
 import 'react-use/lib/useAsync';
+import { useIsModerator } from '../../hooks/useIsModerator.esm.js';
+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';
 
 const TagGridItem = (props) => {
   const { tag, onTagEdit } = props;
@@ -21,12 +27,19 @@ const TagGridItem = (props) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const tags = useTagsFollow();
+  const isModerator = useIsModerator();
   const [editModalOpen, setEditModalOpen] = React__default.useState(false);
   const handleEditModalOpen = () => setEditModalOpen(true);
   const handleEditModalClose = () => {
     setEditModalOpen(false);
     onTagEdit();
   };
+  const [deleteModalOpen, setDeleteModalOpen] = React__default.useState(false);
+  const handleDeleteModalOpen = () => setDeleteModalOpen(true);
+  const handleDeleteModalClose = () => {
+    setDeleteModalOpen(false);
+    onTagEdit();
+  };
   return /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React__default.createElement(
     Card,
     {
@@ -48,7 +61,8 @@ const TagGridItem = (props) => {
           } else {
             tags.followTag(tag.tag);
           }
-        }
+        },
+        startIcon: tags.isFollowingTag(tag.tag) ? /* @__PURE__ */ React__default.createElement(VisibilityOff, null) : /* @__PURE__ */ React__default.createElement(Visibility, null)
       },
       tags.isFollowingTag(tag.tag) ? t("tagButton.unfollow") : t("tagButton.follow")
     ))), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
@@ -56,9 +70,27 @@ const TagGridItem = (props) => {
       {
         size: "small",
         onClick: handleEditModalOpen,
-        variant: "outlined"
+        variant: "outlined",
+        startIcon: /* @__PURE__ */ React__default.createElement(EditIcon, null)
       },
       t("tagButton.edit")
+    )), isModerator && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        size: "small",
+        onClick: handleDeleteModalOpen,
+        variant: "contained",
+        color: "secondary",
+        startIcon: /* @__PURE__ */ React__default.createElement(DeleteIcon, null)
+      },
+      t("tagButton.delete")
+    ), /* @__PURE__ */ React__default.createElement(
+      DeleteModal,
+      {
+        open: deleteModalOpen,
+        onClose: handleDeleteModalClose,
+        entity: tag
+      }
     ))))
   ), /* @__PURE__ */ React__default.createElement(
     EditTagModal,

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 React 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, useTranslation } from '../../hooks';\n\nexport const TagGridItem = (props: {\n  tag: TagResponse;\n  onTagEdit: () => void;\n}) => {\n  const { tag, onTagEdit } = props;\n  const tagRoute = useRouteRef(tagRouteRef);\n  const navigate = useNavigate();\n  const { t } = useTranslation();\n  const tags = useTagsFollow();\n\n  const [editModalOpen, setEditModalOpen] = React.useState(false);\n  const handleEditModalOpen = () => setEditModalOpen(true);\n  const handleEditModalClose = () => {\n    setEditModalOpen(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            <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                >\n                  {tags.isFollowingTag(tag.tag)\n                    ? t('tagButton.unfollow')\n                    : t('tagButton.follow')}\n                </Button>\n              </Tooltip>\n            </Grid>\n            <Grid item>\n              <Button\n                size=\"small\"\n                onClick={handleEditModalOpen}\n                variant=\"outlined\"\n              >\n                {t('tagButton.edit')}\n              </Button>\n            </Grid>\n          </Grid>\n        </CardActions>\n      </Card>\n      <EditTagModal\n        tag={tag}\n        open={editModalOpen}\n        onClose={handleEditModalClose}\n      />\n    </Grid>\n  );\n};\n"],"names":["React"],"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 {\n  Button,\n  Card,\n  CardActionArea,\n  CardActions,\n  CardContent,\n  CardHeader,\n  Grid,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport React 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 { useIsModerator, useTagsFollow, useTranslation } 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';\n\nexport const TagGridItem = (props: {\n  tag: TagResponse;\n  onTagEdit: () => void;\n}) => {\n  const { tag, onTagEdit } = props;\n  const tagRoute = useRouteRef(tagRouteRef);\n  const navigate = useNavigate();\n  const { t } = useTranslation();\n  const tags = useTagsFollow();\n  const isModerator = useIsModerator();\n\n  const [editModalOpen, setEditModalOpen] = React.useState(false);\n  const handleEditModalOpen = () => setEditModalOpen(true);\n  const handleEditModalClose = () => {\n    setEditModalOpen(false);\n    onTagEdit();\n  };\n\n  const [deleteModalOpen, setDeleteModalOpen] = React.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            <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            <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            {isModerator && (\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      />\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -7,17 +7,20 @@ import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
 import 'react-use/lib/useAsync';
+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 } from '@material-ui/core';
+import { Grid, Typography, Button } from '@material-ui/core';
+import { CreateTagModal } from './CreateTagModal.esm.js';
 
 const TagsGrid = () => {
   const [page, setPage] = React__default.useState(1);
   const [pageCount, setPageCount] = React__default.useState(1);
   const [tagsPerPage, setTagsPerPage] = React__default.useState(25);
   const [searchQuery, setSearchQuery] = React__default.useState("");
+  const isModerator = useIsModerator();
   const { t } = useTranslation();
   const [filters, setFilters] = React__default.useState({
     order: "desc",
@@ -55,20 +58,41 @@ const TagsGrid = () => {
       setPageCount(Math.ceil(response.total / tagsPerPage));
     }
   }, [response, tagsPerPage]);
-  const onTagEdit = () => {
+  const onTagsModify = () => {
     retry();
   };
+  const [createModalOpen, setCreateModalOpen] = React__default.useState(false);
+  const handleCreateModalOpen = () => setCreateModalOpen(true);
+  const handleCreateModalClose = () => {
+    setCreateModalOpen(false);
+    onTagsModify();
+  };
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid, { container: true, className: "qetaTagsContainer" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12, md: 4 }, /* @__PURE__ */ React__default.createElement(
     SearchBar,
     {
       onSearch: onSearchQueryChange,
       label: t("tagPage.search.label")
     }
-  ))), /* @__PURE__ */ React__default.createElement(Grid, { container: true, justifyContent: "space-between" }, response && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h6", className: "qetaTagsContainerTitle" }, t("tagPage.tags", { count: response.total }))), /* @__PURE__ */ React__default.createElement(
+  ))), /* @__PURE__ */ React__default.createElement(Grid, { container: true, justifyContent: "space-between" }, response && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: isModerator ? 8 : 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h6", className: "qetaTagsContainerTitle" }, t("tagPage.tags", { count: response.total }))), response && isModerator && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "contained",
+      color: "primary",
+      onClick: handleCreateModalOpen,
+      style: { float: "right" }
+    },
+    t("tagPage.createTag")
+  ), /* @__PURE__ */ React__default.createElement(
+    CreateTagModal,
+    {
+      open: createModalOpen,
+      onClose: handleCreateModalClose
+    }
+  )), /* @__PURE__ */ React__default.createElement(
     TagsGridContent,
     {
       response,
-      onTagEdit,
+      onTagEdit: onTagsModify,
       loading,
       error
     }

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

@@ -1 +1 @@
-{"version":3,"file":"TagsGrid.esm.js","sources":["../../../src/components/TagsGrid/TagsGrid.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { TagsGridContent } from './TagsGridContent';\nimport { SearchBar } from '../SearchBar/SearchBar';\nimport { Grid, Typography } from '@material-ui/core';\n\ntype TagFilters = {\n  order: 'asc' | 'desc';\n  orderBy: 'tag' | 'followersCount' | 'postsCount';\n  searchQuery: string;\n};\n\nexport const TagsGrid = () => {\n  const [page, setPage] = React.useState(1);\n  const [pageCount, setPageCount] = React.useState(1);\n  const [tagsPerPage, setTagsPerPage] = React.useState(25);\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const { t } = useTranslation();\n  const [filters, setFilters] = React.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        ...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 onTagEdit = () => {\n    retry();\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          />\n        </Grid>\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        {response && (\n          <Grid item xs={12}>\n            <Typography variant=\"h6\" className=\"qetaTagsContainerTitle\">\n              {t('tagPage.tags', { count: response.total })}\n            </Typography>\n          </Grid>\n        )}\n        <TagsGridContent\n          response={response}\n          onTagEdit={onTagEdit}\n          loading={loading}\n          error={error}\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":["React"],"mappings":";;;;;;;;;;;;;;;AAcO,MAAM,WAAW,MAAM;AAC5B,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAAA,cAAA,CAAM,SAAS,CAAC,CAAA;AACxC,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAAA,cAAA,CAAM,SAAS,CAAC,CAAA;AAClD,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAAM,SAAS,EAAE,CAAA;AACvD,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAAM,SAAS,EAAE,CAAA;AACvD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAM,QAAqB,CAAA;AAAA,IACvD,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,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,YAAY,MAAM;AACtB,IAAM,KAAA,EAAA;AAAA,GACR;AAEA,EAAA,uBAEIA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,SAAU,EAAA,mBAAA,EAAA,kBACvBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAI,IAAI,CACrB,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,mBAAA;AAAA,MACV,KAAA,EAAO,EAAE,sBAAsB;AAAA;AAAA,GAEnC,CACF,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,cAAA,EAAe,eAC5B,EAAA,EAAA,QAAA,oBACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,EACb,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAK,EAAA,SAAA,EAAU,4BAChC,CAAE,CAAA,cAAA,EAAgB,EAAE,KAAA,EAAO,QAAS,CAAA,KAAA,EAAO,CAC9C,CACF,CAEF,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA;AAAA,GAED,EAAA,QAAA,IAAY,QAAU,EAAA,KAAA,GAAQ,CAC7B,oBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,WAAA;AAAA,MACV,gBAAkB,EAAA,CAAC,EAAI,EAAA,CAAA,KAAM,QAAQ,CAAC,CAAA;AAAA,MACtC,sBAAsB,CAAK,CAAA,KAAA,cAAA,CAAe,OAAO,CAAE,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,MAChE,IAAA;AAAA,MACA;AAAA;AAAA,GAGN,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TagsGrid.esm.js","sources":["../../../src/components/TagsGrid/TagsGrid.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useIsModerator, useQetaApi, useTranslation } 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';\n\ntype TagFilters = {\n  order: 'asc' | 'desc';\n  orderBy: 'tag' | 'followersCount' | 'postsCount';\n  searchQuery: string;\n};\n\nexport const TagsGrid = () => {\n  const [page, setPage] = React.useState(1);\n  const [pageCount, setPageCount] = React.useState(1);\n  const [tagsPerPage, setTagsPerPage] = React.useState(25);\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const isModerator = useIsModerator();\n  const { t } = useTranslation();\n  const [filters, setFilters] = React.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        ...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] = React.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          />\n        </Grid>\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        {response && (\n          <Grid item xs={isModerator ? 8 : 12}>\n            <Typography variant=\"h6\" className=\"qetaTagsContainerTitle\">\n              {t('tagPage.tags', { count: response.total })}\n            </Typography>\n          </Grid>\n        )}\n        {response && isModerator && (\n          <Grid item xs={4}>\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            />\n          </Grid>\n        )}\n        <TagsGridContent\n          response={response}\n          onTagEdit={onTagsModify}\n          loading={loading}\n          error={error}\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":["React"],"mappings":"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"}

package/dist/components/UsersGrid/UsersGridItem.esm.js

@@ -11,6 +11,8 @@ import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
 import { useUserFollow } from '../../hooks/useUserFollow.esm.js';
 import { useIdentityApi } from '../../hooks/useIdentityApi.esm.js';
 import { Grid, Card, CardActionArea, CardHeader, Avatar, CardContent, Typography, CardActions, Tooltip, Button } from '@material-ui/core';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import Visibility from '@material-ui/icons/Visibility';
 
 const UsersGridItem = (props) => {
   const { user } = props;
@@ -82,7 +84,8 @@ const UsersGridItem = (props) => {
           } else {
             users.followUser(user.userRef);
           }
-        }
+        },
+        startIcon: users.isFollowingUser(user.userRef) ? /* @__PURE__ */ React__default.createElement(VisibilityOff, null) : /* @__PURE__ */ React__default.createElement(Visibility, null)
       },
       users.isFollowingUser(user.userRef) ? t("userButton.unfollow") : t("userButton.follow")
     )))))

package/dist/components/UsersGrid/UsersGridItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UsersGridItem.esm.js","sources":["../../../src/components/UsersGrid/UsersGridItem.tsx"],"sourcesContent":["import { UserResponse } from '@drodil/backstage-plugin-qeta-common';\nimport React from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { userRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useIdentityApi, useTranslation, useUserFollow } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\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';\n\nexport const UsersGridItem = (props: { user: UserResponse }) => {\n  const { user } = props;\n  const userRoute = useRouteRef(userRouteRef);\n  const navigate = useNavigate();\n  const { t } = useTranslation();\n  const compound = parseEntityRef(user.userRef);\n  const { primaryTitle, Icon } = useEntityPresentation(compound);\n  const { name, initials, user: userEntity } = useEntityAuthor(user);\n  const users = useUserFollow();\n  const {\n    value: currentUser,\n    loading: loadingUser,\n    error: userError,\n  } = useIdentityApi(api => api.getBackstageIdentity(), []);\n\n  return (\n    <Grid item xs={4}>\n      <Card\n        variant=\"outlined\"\n        style={{ height: '100%', display: 'flex', flexDirection: 'column' }}\n      >\n        <CardActionArea\n          onClick={() => navigate(`${userRoute()}/${user.userRef}`)}\n        >\n          <CardHeader\n            title={primaryTitle}\n            avatar={\n              Icon ? (\n                <Avatar\n                  src={userEntity?.spec?.profile?.picture}\n                  className=\"avatar\"\n                  alt={name}\n                  variant=\"rounded\"\n                >\n                  {initials}\n                </Avatar>\n              ) : null\n            }\n          />\n          <CardContent>\n            <Typography variant=\"caption\">\n              {t('common.posts', {\n                count: user.totalQuestions,\n                itemType: 'question',\n              })}\n              {' · '}\n              {t('common.answers', {\n                count: user.totalAnswers,\n              })}\n              {' · '}\n              {t('common.posts', {\n                count: user.totalArticles,\n                itemType: 'article',\n              })}\n              {' · '}\n              {t('common.posts', {\n                count: user.totalComments,\n                itemType: 'comment',\n              })}\n              {' · '}\n              {t('common.votes', {\n                count: user.totalVotes,\n              })}\n              {' · '}\n              {t('common.viewsShort', {\n                count: user.totalViews,\n              })}\n            </Typography>\n          </CardContent>\n        </CardActionArea>\n        {!loadingUser &&\n          !userError &&\n          currentUser?.userEntityRef !== user.userRef && (\n            <CardActions style={{ marginTop: 'auto' }}>\n              <Grid container justifyContent=\"center\">\n                <Grid item>\n                  <Tooltip title={t('userButton.tooltip')}>\n                    <Button\n                      size=\"small\"\n                      variant=\"outlined\"\n                      color={\n                        users.isFollowingUser(user.userRef)\n                          ? 'secondary'\n                          : 'primary'\n                      }\n                      onClick={() => {\n                        if (users.isFollowingUser(user.userRef)) {\n                          users.unfollowUser(user.userRef);\n                        } else {\n                          users.followUser(user.userRef);\n                        }\n                      }}\n                    >\n                      {users.isFollowingUser(user.userRef)\n                        ? t('userButton.unfollow')\n                        : t('userButton.follow')}\n                    </Button>\n                  </Tooltip>\n                </Grid>\n              </Grid>\n            </CardActions>\n          )}\n      </Card>\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"UsersGridItem.esm.js","sources":["../../../src/components/UsersGrid/UsersGridItem.tsx"],"sourcesContent":["import { UserResponse } from '@drodil/backstage-plugin-qeta-common';\nimport React from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { userRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useIdentityApi, useTranslation, useUserFollow } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\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 VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\n\nexport const UsersGridItem = (props: { user: UserResponse }) => {\n  const { user } = props;\n  const userRoute = useRouteRef(userRouteRef);\n  const navigate = useNavigate();\n  const { t } = useTranslation();\n  const compound = parseEntityRef(user.userRef);\n  const { primaryTitle, Icon } = useEntityPresentation(compound);\n  const { name, initials, user: userEntity } = useEntityAuthor(user);\n  const users = useUserFollow();\n  const {\n    value: currentUser,\n    loading: loadingUser,\n    error: userError,\n  } = useIdentityApi(api => api.getBackstageIdentity(), []);\n\n  return (\n    <Grid item xs={4}>\n      <Card\n        variant=\"outlined\"\n        style={{ height: '100%', display: 'flex', flexDirection: 'column' }}\n      >\n        <CardActionArea\n          onClick={() => navigate(`${userRoute()}/${user.userRef}`)}\n        >\n          <CardHeader\n            title={primaryTitle}\n            avatar={\n              Icon ? (\n                <Avatar\n                  src={userEntity?.spec?.profile?.picture}\n                  className=\"avatar\"\n                  alt={name}\n                  variant=\"rounded\"\n                >\n                  {initials}\n                </Avatar>\n              ) : null\n            }\n          />\n          <CardContent>\n            <Typography variant=\"caption\">\n              {t('common.posts', {\n                count: user.totalQuestions,\n                itemType: 'question',\n              })}\n              {' · '}\n              {t('common.answers', {\n                count: user.totalAnswers,\n              })}\n              {' · '}\n              {t('common.posts', {\n                count: user.totalArticles,\n                itemType: 'article',\n              })}\n              {' · '}\n              {t('common.posts', {\n                count: user.totalComments,\n                itemType: 'comment',\n              })}\n              {' · '}\n              {t('common.votes', {\n                count: user.totalVotes,\n              })}\n              {' · '}\n              {t('common.viewsShort', {\n                count: user.totalViews,\n              })}\n            </Typography>\n          </CardContent>\n        </CardActionArea>\n        {!loadingUser &&\n          !userError &&\n          currentUser?.userEntityRef !== user.userRef && (\n            <CardActions style={{ marginTop: 'auto' }}>\n              <Grid container justifyContent=\"center\">\n                <Grid item>\n                  <Tooltip title={t('userButton.tooltip')}>\n                    <Button\n                      size=\"small\"\n                      variant=\"outlined\"\n                      color={\n                        users.isFollowingUser(user.userRef)\n                          ? 'secondary'\n                          : 'primary'\n                      }\n                      onClick={() => {\n                        if (users.isFollowingUser(user.userRef)) {\n                          users.unfollowUser(user.userRef);\n                        } else {\n                          users.followUser(user.userRef);\n                        }\n                      }}\n                      startIcon={\n                        users.isFollowingUser(user.userRef) ? (\n                          <VisibilityOff />\n                        ) : (\n                          <Visibility />\n                        )\n                      }\n                    >\n                      {users.isFollowingUser(user.userRef)\n                        ? t('userButton.unfollow')\n                        : t('userButton.follow')}\n                    </Button>\n                  </Tooltip>\n                </Grid>\n              </Grid>\n            </CardActions>\n          )}\n      </Card>\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Utility/ModalContent.esm.js

@@ -4,7 +4,7 @@ import React__default from 'react';
 const useStyles = makeStyles((theme) => ({
   content: {
     position: "absolute",
-    top: "20%",
+    top: "50%",
     left: "50%",
     transform: "translate(-50%, -50%)",
     width: 400,

package/dist/components/Utility/ModalContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.esm.js","sources":["../../../src/components/Utility/ModalContent.tsx"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\nimport React from 'react';\n\nconst useStyles = makeStyles(theme => ({\n  content: {\n    position: 'absolute',\n    top: '20%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: 400,\n    backgroundColor: theme.palette.background.default,\n    border: `1px solid ${theme.palette.action.selected}`,\n    borderRadius: theme.shape.borderRadius,\n    padding: '2em',\n    '& button': {\n      marginTop: '2em',\n      float: 'right',\n    },\n  },\n}));\n\nexport const ModalContent = React.forwardRef<\n  HTMLDivElement,\n  { children: React.ReactNode }\n>((props: { children: React.ReactNode }, ref) => {\n  const styles = useStyles();\n  return (\n    <div tabIndex={-1} className={styles.content} ref={ref}>\n      {props.children}\n    </div>\n  );\n});\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,OAAS,EAAA;AAAA,IACP,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,KAAA;AAAA,IACL,IAAM,EAAA,KAAA;AAAA,IACN,SAAW,EAAA,uBAAA;AAAA,IACX,KAAO,EAAA,GAAA;AAAA,IACP,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,OAAA;AAAA,IAC1C,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAO,QAAQ,CAAA,CAAA;AAAA,IAClD,YAAA,EAAc,MAAM,KAAM,CAAA,YAAA;AAAA,IAC1B,OAAS,EAAA,KAAA;AAAA,IACT,UAAY,EAAA;AAAA,MACV,SAAW,EAAA,KAAA;AAAA,MACX,KAAO,EAAA;AAAA;AACT;AAEJ,CAAE,CAAA,CAAA;AAEK,MAAM,YAAe,GAAAA,cAAA,CAAM,UAGhC,CAAA,CAAC,OAAsC,GAAQ,KAAA;AAC/C,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,SAAI,QAAU,EAAA,CAAA,CAAA,EAAI,WAAW,MAAO,CAAA,OAAA,EAAS,GAC3C,EAAA,EAAA,KAAA,CAAM,QACT,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ModalContent.esm.js","sources":["../../../src/components/Utility/ModalContent.tsx"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\nimport React from 'react';\n\nconst useStyles = makeStyles(theme => ({\n  content: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: 400,\n    backgroundColor: theme.palette.background.default,\n    border: `1px solid ${theme.palette.action.selected}`,\n    borderRadius: theme.shape.borderRadius,\n    padding: '2em',\n    '& button': {\n      marginTop: '2em',\n      float: 'right',\n    },\n  },\n}));\n\nexport const ModalContent = React.forwardRef<\n  HTMLDivElement,\n  { children: React.ReactNode }\n>((props: { children: React.ReactNode }, ref) => {\n  const styles = useStyles();\n  return (\n    <div tabIndex={-1} className={styles.content} ref={ref}>\n      {props.children}\n    </div>\n  );\n});\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,OAAS,EAAA;AAAA,IACP,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,KAAA;AAAA,IACL,IAAM,EAAA,KAAA;AAAA,IACN,SAAW,EAAA,uBAAA;AAAA,IACX,KAAO,EAAA,GAAA;AAAA,IACP,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,OAAA;AAAA,IAC1C,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAO,QAAQ,CAAA,CAAA;AAAA,IAClD,YAAA,EAAc,MAAM,KAAM,CAAA,YAAA;AAAA,IAC1B,OAAS,EAAA,KAAA;AAAA,IACT,UAAY,EAAA;AAAA,MACV,SAAW,EAAA,KAAA;AAAA,MACX,KAAO,EAAA;AAAA;AACT;AAEJ,CAAE,CAAA,CAAA;AAEK,MAAM,YAAe,GAAAA,cAAA,CAAM,UAGhC,CAAA,CAAC,OAAsC,GAAQ,KAAA;AAC/C,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,SAAI,QAAU,EAAA,CAAA,CAAA,EAAI,WAAW,MAAO,CAAA,OAAA,EAAS,GAC3C,EAAA,EAAA,KAAA,CAAM,QACT,CAAA;AAEJ,CAAC;;;;"}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import { IdentityApi } from '@backstage/core-plugin-api';
 import * as _drodil_backstage_plugin_qeta_common from '@drodil/backstage-plugin-qeta-common';
-import { QetaApi, PostType, PostResponse, Template, PostsResponse, AnswersResponse, AnswerResponse, Collection, PostsQuery, CollectionResponse, Post, Answer, Comment, Stat, StatisticsResponse, UserStat, GlobalStat, TemplatesResponse, Article, UserResponse, AIQuery } from '@drodil/backstage-plugin-qeta-common';
+import { QetaApi, PostType, PostResponse, Template, PostsResponse, AnswersResponse, AnswerResponse, Collection, PostsQuery, CollectionResponse, TagResponse, Post, Answer, Comment, Stat, StatisticsResponse, UserStat, GlobalStat, TemplatesResponse, Article, UserResponse, AIQuery } from '@drodil/backstage-plugin-qeta-common';
 import React, { CSSProperties } from 'react';
 import { Entity, UserEntity } from '@backstage/catalog-model';
 import { LinkProps } from '@backstage/core-components';
@@ -84,14 +84,16 @@ type Change<T extends Filters> = {
     key: keyof T;
     value: string | string[];
 };
-interface FilterPanelProps<T extends Filters> {
-    onChange: (changes: Change<T> | Change<T>[]) => void;
-    filters: T;
+interface CommonFilterPanelProps {
     showEntityFilter?: boolean;
     showTagFilter?: boolean;
     answerFilters?: boolean;
     type?: PostType;
 }
+interface FilterPanelProps<T extends Filters> extends CommonFilterPanelProps {
+    onChange: (changes: Change<T> | Change<T>[]) => void;
+    filters: T;
+}
 declare const FilterPanel: <T extends Filters>(props: FilterPanelProps<T>) => React.JSX.Element;
 
 type PaginatedPostsProps = PostFilters & {
@@ -109,6 +111,7 @@ type PaginatedPostsProps = PostFilters & {
 
 declare const PostsContainer: (props: PaginatedPostsProps & {
     entity?: string;
+    filterPanelProps?: CommonFilterPanelProps;
 }) => React.JSX.Element;
 
 declare const PostList: (props: {
@@ -219,7 +222,7 @@ declare const MarkdownRenderer: (props: {
 }) => React.JSX.Element;
 
 declare const DeleteModal: (props: {
-    entity: PostResponse | AnswerResponse | CollectionResponse;
+    entity: PostResponse | AnswerResponse | CollectionResponse | TagResponse;
     open: boolean;
     onClose: () => void;
     question?: PostResponse;
@@ -309,6 +312,7 @@ declare const UsersGrid: () => React.JSX.Element;
 
 type PostGridProps = PaginatedPostsProps & {
     allowRanking?: boolean;
+    filterPanelProps?: CommonFilterPanelProps;
 };
 declare const PostsGrid: (props: PostGridProps) => React.JSX.Element;
 
@@ -327,6 +331,7 @@ declare const CollectionForm: (props: CollectionFormProps) => React.JSX.Element;
 type CollectionsGridProps = {
     owner?: string;
     showFilters?: boolean;
+    filterPanelProps?: CommonFilterPanelProps;
 };
 declare const CollectionsGrid: (props: CollectionsGridProps) => React.JSX.Element;
 
@@ -505,6 +510,13 @@ declare const useTranslation: () => {
         readonly "editTagModal.description": "Tag description";
         readonly "editTagModal.saveButton": "Save";
         readonly "editTagModal.cancelButton": "Cancel";
+        readonly "createTagModal.title": "Create a new tag";
+        readonly "createTagModal.errorPosting": "Failed to create";
+        readonly "createTagModal.description": "Tag description";
+        readonly "createTagModal.cancelButton": "Cancel";
+        readonly "createTagModal.tagInput": "Tag";
+        readonly "createTagModal.createButton": "Create";
+        readonly "deleteModal.title.tag": "Are you sure you want to delete this tag?";
         readonly "deleteModal.title.answer": "Are you sure you want to delete this answer?";
         readonly "deleteModal.title.question": "Are you sure you want to delete this post?";
         readonly "deleteModal.title.collection": "Are you sure you want to delete this collection?";
@@ -570,9 +582,9 @@ declare const useTranslation: () => {
         readonly "templateList.descriptionInput.helperText": "Template description, what is it used for?";
         readonly "templateList.submit.existingTemplate": "Save";
         readonly "templateList.submit.newTemplate": "Create";
+        readonly "templateList.createButton": "Create";
         readonly "templateList.deleteButton": "Delete";
         readonly "templateList.editButton": "Edit";
-        readonly "templateList.createButton": "Create";
         readonly "templateList.noTemplates": "No templates";
         readonly "templateList.noTemplatesDescription": "Create a new template to get started";
         readonly "templateList.questionTitleInput.label": "Default question title";
@@ -678,6 +690,7 @@ declare const useTranslation: () => {
         readonly "tagPage.search.placeholder": "Search...";
         readonly "tagPage.errorLoading": "Could not load tags";
         readonly "tagPage.defaultTitle": "Tags";
+        readonly "tagPage.createTag": "Create tag";
         readonly "tagPage.tags_zero": "No tags";
         readonly "tagPage.tags_one": "{{count}} tag";
         readonly "tagPage.tags_other": "{{count}} tags";
@@ -722,6 +735,7 @@ declare const useTranslation: () => {
         readonly "collectionButton.tooltip": "By following a collection, you will get notified when ever a new post is added to the collection";
         readonly "collectionButton.unfollow": "Unfollow";
         readonly "tagButton.edit": "Edit";
+        readonly "tagButton.delete": "Delete";
         readonly "tagButton.follow": "Follow";
         readonly "tagButton.tooltip": "By following a tag, you will get notified when ever a new post with that tag is posted";
         readonly "tagButton.unfollow": "Unfollow";

package/dist/translation.esm.js

@@ -164,11 +164,20 @@ const qetaTranslationRef = createTranslationRef({
       saveButton: "Save",
       cancelButton: "Cancel"
     },
+    createTagModal: {
+      title: "Create a new tag",
+      tagInput: "Tag",
+      description: "Tag description",
+      errorPosting: "Failed to create",
+      createButton: "Create",
+      cancelButton: "Cancel"
+    },
     deleteModal: {
       title: {
         question: "Are you sure you want to delete this post?",
         answer: "Are you sure you want to delete this answer?",
-        collection: "Are you sure you want to delete this collection?"
+        collection: "Are you sure you want to delete this collection?",
+        tag: "Are you sure you want to delete this tag?"
       },
       errorDeleting: "Failed to delete",
       deleteButton: "Delete",
@@ -490,6 +499,7 @@ const qetaTranslationRef = createTranslationRef({
     tagPage: {
       errorLoading: "Could not load tags",
       defaultTitle: "Tags",
+      createTag: "Create tag",
       search: {
         label: "Search tag",
         placeholder: "Search..."
@@ -558,6 +568,7 @@ const qetaTranslationRef = createTranslationRef({
       follow: "Follow",
       unfollow: "Unfollow",
       edit: "Edit",
+      delete: "Delete",
       tooltip: "By following a tag, you will get notified when ever a new post with that tag is posted"
     },
     entityButton: {