@drodil/backstage-plugin-qeta-react 3.24.5 → 3.25.0

package/dist/components/PostsTable/PostsTableRow.esm.js

@@ -1,6 +1,6 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Link } from '@backstage/core-components';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
-import React__default from 'react';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { questionRouteRef, articleRouteRef } from '../../routes.esm.js';
 import { AuthorLink } from '../Links/Links.esm.js';
@@ -14,20 +14,26 @@ const PostsTableRow = (props) => {
   const questionRoute = useRouteRef(questionRouteRef);
   const articleRoute = useRouteRef(articleRouteRef);
   const route = post.type === "question" ? questionRoute : articleRoute;
-  return /* @__PURE__ */ React__default.createElement(TableRow, { key: post.id }, /* @__PURE__ */ React__default.createElement(TableCell, null, /* @__PURE__ */ React__default.createElement(Link, { to: route({ id: post.id.toString(10) }) }, post.title)), /* @__PURE__ */ React__default.createElement(TableCell, null, /* @__PURE__ */ React__default.createElement(AuthorLink, { entity: post })), props.showIcon && /* @__PURE__ */ React__default.createElement(TableCell, null, /* @__PURE__ */ React__default.createElement(
-    Chip,
-    {
-      color: "secondary",
-      size: "small",
-      label: `${capitalize(post.type)}`,
-      icon: post.type === "question" ? /* @__PURE__ */ React__default.createElement(HelpOutlined, null) : /* @__PURE__ */ React__default.createElement(CollectionsBookmarkIcon, null)
-    }
-  )), /* @__PURE__ */ React__default.createElement(TableCell, null, /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: post.created })), /* @__PURE__ */ React__default.createElement(TableCell, null, /* @__PURE__ */ React__default.createElement(
-    RelativeTimeWithTooltip,
-    {
-      value: post.updated ? post.updated : post.created
-    }
-  )));
+  return /* @__PURE__ */ jsxs(TableRow, { children: [
+    /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Link, { to: route({ id: post.id.toString(10) }), children: post.title }) }),
+    /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(AuthorLink, { entity: post }) }),
+    props.showIcon && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+      Chip,
+      {
+        color: "secondary",
+        size: "small",
+        label: `${capitalize(post.type)}`,
+        icon: post.type === "question" ? /* @__PURE__ */ jsx(HelpOutlined, {}) : /* @__PURE__ */ jsx(CollectionsBookmarkIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: post.created }) }),
+    /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+      RelativeTimeWithTooltip,
+      {
+        value: post.updated ? post.updated : post.created
+      }
+    ) })
+  ] }, post.id);
 };
 
 export { PostsTableRow };

package/dist/components/PostsTable/PostsTableRow.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostsTableRow.esm.js","sources":["../../../src/components/PostsTable/PostsTableRow.tsx"],"sourcesContent":["import { Post } from '@drodil/backstage-plugin-qeta-common';\nimport { Link } from '@backstage/core-components';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport React from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport { AuthorLink } from '../Links';\nimport { Chip, TableCell, TableRow } from '@material-ui/core';\nimport { capitalize } from 'lodash';\nimport HelpOutlined from '@material-ui/icons/HelpOutlined';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\n\nexport const PostsTableRow = (props: { post: Post; showIcon?: boolean }) => {\n  const { post } = props;\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n\n  const route = post.type === 'question' ? questionRoute : articleRoute;\n\n  return (\n    <TableRow key={post.id}>\n      <TableCell>\n        <Link to={route({ id: post.id.toString(10) })}>{post.title}</Link>\n      </TableCell>\n      <TableCell>\n        <AuthorLink entity={post} />\n      </TableCell>\n      {props.showIcon && (\n        <TableCell>\n          <Chip\n            color=\"secondary\"\n            size=\"small\"\n            label={`${capitalize(post.type)}`}\n            icon={\n              post.type === 'question' ? (\n                <HelpOutlined />\n              ) : (\n                <CollectionsBookmarkIcon />\n              )\n            }\n          />\n        </TableCell>\n      )}\n      <TableCell>\n        <RelativeTimeWithTooltip value={post.created} />\n      </TableCell>\n      <TableCell>\n        <RelativeTimeWithTooltip\n          value={post.updated ? post.updated : post.created}\n        />\n      </TableCell>\n    </TableRow>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;AAYa,MAAA,aAAA,GAAgB,CAAC,KAA8C,KAAA;AAC1E,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AACjB,EAAM,MAAA,aAAA,GAAgB,YAAY,gBAAgB,CAAA;AAClD,EAAM,MAAA,YAAA,GAAe,YAAY,eAAe,CAAA;AAEhD,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,IAAS,KAAA,UAAA,GAAa,aAAgB,GAAA,YAAA;AAEzD,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,GAAK,EAAA,IAAA,CAAK,sBACjBA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,KAAM,CAAA,EAAE,EAAI,EAAA,IAAA,CAAK,GAAG,QAAS,CAAA,EAAE,CAAE,EAAC,KAAI,IAAK,CAAA,KAAM,CAC7D,CAAA,+CACC,SACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,MAAA,EAAQ,MAAM,CAC5B,CAAA,EACC,KAAM,CAAA,QAAA,iDACJ,SACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,WAAA;AAAA,MACN,IAAK,EAAA,OAAA;AAAA,MACL,KAAO,EAAA,CAAA,EAAG,UAAW,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA,CAAA;AAAA,MAC/B,IAAA,EACE,KAAK,IAAS,KAAA,UAAA,gDACX,YAAa,EAAA,IAAA,CAAA,gDAEb,uBAAwB,EAAA,IAAA;AAAA;AAAA,GAIjC,CAAA,kBAEDA,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,EAAwB,KAAO,EAAA,IAAA,CAAK,OAAS,EAAA,CAChD,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,SACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,IAAA,CAAK,OAAU,GAAA,IAAA,CAAK,UAAU,IAAK,CAAA;AAAA;AAAA,GAE9C,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PostsTableRow.esm.js","sources":["../../../src/components/PostsTable/PostsTableRow.tsx"],"sourcesContent":["import { Post } from '@drodil/backstage-plugin-qeta-common';\nimport { Link } from '@backstage/core-components';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport { AuthorLink } from '../Links';\nimport { Chip, TableCell, TableRow } from '@material-ui/core';\nimport { capitalize } from 'lodash';\nimport HelpOutlined from '@material-ui/icons/HelpOutlined';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\n\nexport const PostsTableRow = (props: { post: Post; showIcon?: boolean }) => {\n  const { post } = props;\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n\n  const route = post.type === 'question' ? questionRoute : articleRoute;\n\n  return (\n    <TableRow key={post.id}>\n      <TableCell>\n        <Link to={route({ id: post.id.toString(10) })}>{post.title}</Link>\n      </TableCell>\n      <TableCell>\n        <AuthorLink entity={post} />\n      </TableCell>\n      {props.showIcon && (\n        <TableCell>\n          <Chip\n            color=\"secondary\"\n            size=\"small\"\n            label={`${capitalize(post.type)}`}\n            icon={\n              post.type === 'question' ? (\n                <HelpOutlined />\n              ) : (\n                <CollectionsBookmarkIcon />\n              )\n            }\n          />\n        </TableCell>\n      )}\n      <TableCell>\n        <RelativeTimeWithTooltip value={post.created} />\n      </TableCell>\n      <TableCell>\n        <RelativeTimeWithTooltip\n          value={post.updated ? post.updated : post.created}\n        />\n      </TableCell>\n    </TableRow>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAWa,MAAA,aAAA,GAAgB,CAAC,KAA8C,KAAA;AAC1E,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AACjB,EAAM,MAAA,aAAA,GAAgB,YAAY,gBAAgB,CAAA;AAClD,EAAM,MAAA,YAAA,GAAe,YAAY,eAAe,CAAA;AAEhD,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,IAAS,KAAA,UAAA,GAAa,aAAgB,GAAA,YAAA;AAEzD,EAAA,4BACG,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,aACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,EAAI,EAAA,KAAA,CAAM,EAAE,EAAI,EAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,EAAE,CAAE,EAAC,CAAI,EAAA,QAAA,EAAA,IAAA,CAAK,OAAM,CAC7D,EAAA,CAAA;AAAA,wBACC,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,MAAA,EAAQ,MAAM,CAC5B,EAAA,CAAA;AAAA,IACC,KAAA,CAAM,QACL,oBAAA,GAAA,CAAC,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,WAAA;AAAA,QACN,IAAK,EAAA,OAAA;AAAA,QACL,KAAO,EAAA,CAAA,EAAG,UAAW,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA,CAAA;AAAA,QAC/B,IAAA,EACE,KAAK,IAAS,KAAA,UAAA,uBACX,YAAa,EAAA,EAAA,CAAA,uBAEb,uBAAwB,EAAA,EAAA;AAAA;AAAA,KAIjC,EAAA,CAAA;AAAA,wBAED,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,2BAAwB,KAAO,EAAA,IAAA,CAAK,SAAS,CAChD,EAAA,CAAA;AAAA,wBACC,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,uBAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,IAAA,CAAK,OAAU,GAAA,IAAA,CAAK,UAAU,IAAK,CAAA;AAAA;AAAA,KAE9C,EAAA;AAAA,GAAA,EAAA,EA9Ba,KAAK,EA+BpB,CAAA;AAEJ;;;;"}

package/dist/components/QetaPagination/QetaPagination.esm.js

@@ -1,12 +1,16 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
+import 'react';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
 import 'react-use/lib/useAsync';
+import '@backstage/plugin-permission-react';
+import '@drodil/backstage-plugin-qeta-common';
+import '@backstage/plugin-permission-common';
 import { makeStyles, Grid, Tooltip, FormControl, Select, MenuItem } from '@material-ui/core';
 import { Pagination } from '@material-ui/lab';
 
@@ -26,42 +30,46 @@ const QetaPagination = (props) => {
   const { handlePageChange, handlePageSizeChange, page, pageCount, tooltip } = props;
   const { t } = useTranslation();
   const styles = useStyles();
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsxs(
     Grid,
     {
       container: true,
       className: styles.root,
       spacing: 0,
       alignItems: "center",
-      justifyContent: "center"
-    },
-    /* @__PURE__ */ React__default.createElement(Tooltip, { title: tooltip ?? t("pagination.defaultTooltip"), arrow: true }, /* @__PURE__ */ React__default.createElement(FormControl, { variant: "outlined" }, /* @__PURE__ */ React__default.createElement(
-      Select,
-      {
-        value: props.pageSize,
-        onChange: handlePageSizeChange,
-        variant: "outlined",
-        className: styles.pageSizeSelect
-      },
-      /* @__PURE__ */ React__default.createElement(MenuItem, { value: 5 }, "5"),
-      /* @__PURE__ */ React__default.createElement(MenuItem, { value: 10 }, "10"),
-      /* @__PURE__ */ React__default.createElement(MenuItem, { value: 25 }, "25"),
-      /* @__PURE__ */ React__default.createElement(MenuItem, { value: 50 }, "50"),
-      /* @__PURE__ */ React__default.createElement(MenuItem, { value: 100 }, "100")
-    ))),
-    /* @__PURE__ */ React__default.createElement(
-      Pagination,
-      {
-        page,
-        onChange: handlePageChange,
-        count: pageCount,
-        size: "large",
-        variant: "outlined",
-        className: styles.pagination,
-        showFirstButton: true,
-        showLastButton: true
-      }
-    )
+      justifyContent: "center",
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, { title: tooltip ?? t("pagination.defaultTooltip"), arrow: true, children: /* @__PURE__ */ jsx(FormControl, { variant: "outlined", children: /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: props.pageSize,
+            onChange: handlePageSizeChange,
+            variant: "outlined",
+            className: styles.pageSizeSelect,
+            children: [
+              /* @__PURE__ */ jsx(MenuItem, { value: 5, children: "5" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 10, children: "10" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 25, children: "25" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 50, children: "50" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 100, children: "100" })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            page,
+            onChange: handlePageChange,
+            count: pageCount,
+            size: "large",
+            variant: "outlined",
+            className: styles.pagination,
+            showFirstButton: true,
+            showLastButton: true
+          }
+        )
+      ]
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"QetaPagination.esm.js","sources":["../../../src/components/QetaPagination/QetaPagination.tsx"],"sourcesContent":["import React from 'react';\nimport { useTranslation } from '../../hooks';\nimport {\n  FormControl,\n  Grid,\n  makeStyles,\n  MenuItem,\n  Select,\n  Tooltip,\n} from '@material-ui/core';\nimport { Pagination } from '@material-ui/lab';\n\nexport type QetaPaginationClassKeys = 'root' | 'pageSizeSelect' | 'pagination';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {\n      marginTop: '2em',\n    },\n    pageSizeSelect: {\n      marginRight: '1em',\n    },\n    pagination: {},\n  }),\n  { name: 'QetaPagination' },\n);\n\nexport const QetaPagination = (props: {\n  pageSize: number;\n  handlePageChange: (_event: React.ChangeEvent<unknown>, value: number) => void;\n  handlePageSizeChange: (event: React.ChangeEvent<{ value: unknown }>) => void;\n  page: number;\n  tooltip?: string;\n  pageCount: number;\n}) => {\n  const { handlePageChange, handlePageSizeChange, page, pageCount, tooltip } =\n    props;\n  const { t } = useTranslation();\n  const styles = useStyles();\n  return (\n    <Grid\n      container\n      className={styles.root}\n      spacing={0}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n    >\n      <Tooltip title={tooltip ?? t('pagination.defaultTooltip')} arrow>\n        <FormControl variant=\"outlined\">\n          <Select\n            value={props.pageSize}\n            onChange={handlePageSizeChange}\n            variant=\"outlined\"\n            className={styles.pageSizeSelect}\n          >\n            <MenuItem value={5}>5</MenuItem>\n            <MenuItem value={10}>10</MenuItem>\n            <MenuItem value={25}>25</MenuItem>\n            <MenuItem value={50}>50</MenuItem>\n            <MenuItem value={100}>100</MenuItem>\n          </Select>\n        </FormControl>\n      </Tooltip>\n      <Pagination\n        page={page}\n        onChange={handlePageChange}\n        count={pageCount}\n        size=\"large\"\n        variant=\"outlined\"\n        className={styles.pagination}\n        showFirstButton\n        showLastButton\n      />\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,OAAO;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA;AAAA,KACb;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,WAAa,EAAA;AAAA,KACf;AAAA,IACA,YAAY;AAAC,GACf,CAAA;AAAA,EACA,EAAE,MAAM,gBAAiB;AAC3B,CAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,KAOzB,KAAA;AACJ,EAAA,MAAM,EAAE,gBAAkB,EAAA,oBAAA,EAAsB,IAAM,EAAA,SAAA,EAAW,SAC/D,GAAA,KAAA;AACF,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,OAAS,EAAA,CAAA;AAAA,MACT,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA;AAAA,KAAA;AAAA,oBAEdA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,OAAA,IAAW,CAAE,CAAA,2BAA2B,CAAG,EAAA,KAAA,EAAK,IAC9D,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,WAAY,EAAA,EAAA,OAAA,EAAQ,UACnB,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAO,KAAM,CAAA,QAAA;AAAA,QACb,QAAU,EAAA,oBAAA;AAAA,QACV,OAAQ,EAAA,UAAA;AAAA,QACR,WAAW,MAAO,CAAA;AAAA,OAAA;AAAA,sBAEjBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAA,EAAG,GAAC,CAAA;AAAA,sBACpBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAA,EAAI,IAAE,CAAA;AAAA,sBACtBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAA,EAAI,IAAE,CAAA;AAAA,sBACtBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAA,EAAI,IAAE,CAAA;AAAA,sBACtBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,GAAA,EAAA,EAAK,KAAG;AAAA,KAE7B,CACF,CAAA;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,QAAU,EAAA,gBAAA;AAAA,QACV,KAAO,EAAA,SAAA;AAAA,QACP,IAAK,EAAA,OAAA;AAAA,QACL,OAAQ,EAAA,UAAA;AAAA,QACR,WAAW,MAAO,CAAA,UAAA;AAAA,QAClB,eAAe,EAAA,IAAA;AAAA,QACf,cAAc,EAAA;AAAA;AAAA;AAChB,GACF;AAEJ;;;;"}
+{"version":3,"file":"QetaPagination.esm.js","sources":["../../../src/components/QetaPagination/QetaPagination.tsx"],"sourcesContent":["import { ChangeEvent } from 'react';\nimport { useTranslation } from '../../hooks';\nimport {\n  FormControl,\n  Grid,\n  makeStyles,\n  MenuItem,\n  Select,\n  Tooltip,\n} from '@material-ui/core';\nimport { Pagination } from '@material-ui/lab';\n\nexport type QetaPaginationClassKeys = 'root' | 'pageSizeSelect' | 'pagination';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {\n      marginTop: '2em',\n    },\n    pageSizeSelect: {\n      marginRight: '1em',\n    },\n    pagination: {},\n  }),\n  { name: 'QetaPagination' },\n);\n\nexport const QetaPagination = (props: {\n  pageSize: number;\n  handlePageChange: (_event: ChangeEvent<unknown>, value: number) => void;\n  handlePageSizeChange: (event: ChangeEvent<{ value: unknown }>) => void;\n  page: number;\n  tooltip?: string;\n  pageCount: number;\n}) => {\n  const { handlePageChange, handlePageSizeChange, page, pageCount, tooltip } =\n    props;\n  const { t } = useTranslation();\n  const styles = useStyles();\n  return (\n    <Grid\n      container\n      className={styles.root}\n      spacing={0}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n    >\n      <Tooltip title={tooltip ?? t('pagination.defaultTooltip')} arrow>\n        <FormControl variant=\"outlined\">\n          <Select\n            value={props.pageSize}\n            onChange={handlePageSizeChange}\n            variant=\"outlined\"\n            className={styles.pageSizeSelect}\n          >\n            <MenuItem value={5}>5</MenuItem>\n            <MenuItem value={10}>10</MenuItem>\n            <MenuItem value={25}>25</MenuItem>\n            <MenuItem value={50}>50</MenuItem>\n            <MenuItem value={100}>100</MenuItem>\n          </Select>\n        </FormControl>\n      </Tooltip>\n      <Pagination\n        page={page}\n        onChange={handlePageChange}\n        count={pageCount}\n        size=\"large\"\n        variant=\"outlined\"\n        className={styles.pagination}\n        showFirstButton\n        showLastButton\n      />\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,OAAO;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA;AAAA,KACb;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,WAAa,EAAA;AAAA,KACf;AAAA,IACA,YAAY;AAAC,GACf,CAAA;AAAA,EACA,EAAE,MAAM,gBAAiB;AAC3B,CAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,KAOzB,KAAA;AACJ,EAAA,MAAM,EAAE,gBAAkB,EAAA,oBAAA,EAAsB,IAAM,EAAA,SAAA,EAAW,SAC/D,GAAA,KAAA;AACF,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,OAAS,EAAA,CAAA;AAAA,MACT,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,QAAA;AAAA,MAEf,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,OAAA,IAAW,CAAE,CAAA,2BAA2B,CAAG,EAAA,KAAA,EAAK,IAC9D,EAAA,QAAA,kBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,OAAA,EAAQ,UACnB,EAAA,QAAA,kBAAA,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAO,KAAM,CAAA,QAAA;AAAA,YACb,QAAU,EAAA,oBAAA;AAAA,YACV,OAAQ,EAAA,UAAA;AAAA,YACR,WAAW,MAAO,CAAA,cAAA;AAAA,YAElB,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAG,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,8BACpB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,GAAA,EAAK,QAAG,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,WAE7B,CACF,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,QAAU,EAAA,gBAAA;AAAA,YACV,KAAO,EAAA,SAAA;AAAA,YACP,IAAK,EAAA,OAAA;AAAA,YACL,OAAQ,EAAA,UAAA;AAAA,YACR,WAAW,MAAO,CAAA,UAAA;AAAA,YAClB,eAAe,EAAA,IAAA;AAAA,YACf,cAAc,EAAA;AAAA;AAAA;AAChB;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/QuestionCard/QuestionCard.esm.js

@@ -1,4 +1,5 @@
-import React__default, { useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 import { VoteButtons } from '../Buttons/VoteButtons.esm.js';
 import { DeleteModal } from '../DeleteModal/DeleteModal.esm.js';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -19,6 +20,9 @@ import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
 import 'react-use/lib/useAsync';
+import '@backstage/plugin-permission-react';
+import '@drodil/backstage-plugin-qeta-common';
+import '@backstage/plugin-permission-common';
 import { VoteButtonContainer } from '../Utility/VoteButtonContainer.esm.js';
 import { makeStyles, Card, CardContent, Grid, Box, Button } from '@material-ui/core';
 
@@ -49,8 +53,8 @@ const QuestionCard = (props) => {
   const { question } = props;
   const navigate = useNavigate();
   const editQuestionRoute = useRouteRef(editQuestionRouteRef);
-  const [deleteModalOpen, setDeleteModalOpen] = React__default.useState(false);
-  const [questionEntity, setQuestionEntity] = React__default.useState(question);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [questionEntity, setQuestionEntity] = useState(question);
   const handleDeleteModalOpen = () => setDeleteModalOpen(true);
   const handleDeleteModalClose = () => setDeleteModalOpen(false);
   const { t } = useTranslation();
@@ -70,69 +74,91 @@ const QuestionCard = (props) => {
       }
     }
   }, [highlightedAnswer]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Card, { variant: "outlined", className: styles.root }, /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(
-    Grid,
-    {
-      container: true,
-      spacing: 2,
-      justifyContent: "flex-start",
-      style: { flexWrap: "nowrap" }
-    },
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(VoteButtonContainer, null, /* @__PURE__ */ React__default.createElement(VoteButtons, { entity: questionEntity }), /* @__PURE__ */ React__default.createElement(FavoriteButton, { entity: questionEntity }), /* @__PURE__ */ React__default.createElement(LinkButton, { entity: questionEntity }))),
-    /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Card, { variant: "outlined", className: styles.root, children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(
       Grid,
       {
-        item: true,
-        className: styles.contentContainer,
-        style: { flexGrow: "1" }
-      },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true, className: styles.markdownContainer }, /* @__PURE__ */ React__default.createElement(MarkdownRenderer, { content: questionEntity.content })),
-      /* @__PURE__ */ React__default.createElement(
-        Grid,
-        {
-          container: true,
-          item: true,
-          spacing: 1,
-          justifyContent: "space-between",
-          alignItems: "flex-end",
-          className: styles.metadata
-        },
-        /* @__PURE__ */ React__default.createElement(Grid, { item: true, style: { alignSelf: "flex-end" } }, /* @__PURE__ */ React__default.createElement(TagsAndEntities, { entity: questionEntity }), (question.canEdit || question.canDelete) && /* @__PURE__ */ React__default.createElement(Box, { className: styles.buttons }, question.canEdit && /* @__PURE__ */ React__default.createElement(
-          Button,
-          {
-            variant: "outlined",
-            size: "small",
-            startIcon: /* @__PURE__ */ React__default.createElement(EditIcon, null),
-            onClick: () => navigate(
-              editQuestionRoute({
-                id: question.id.toString(10)
-              })
-            ),
-            className: "qetaQuestionCardEditBtn"
-          },
-          t("questionPage.editButton")
-        ), question.canDelete && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-          Button,
-          {
-            variant: "outlined",
-            size: "small",
-            color: "secondary",
-            onClick: handleDeleteModalOpen,
-            startIcon: /* @__PURE__ */ React__default.createElement(DeleteIcon, null)
-          },
-          t("deleteModal.deleteButton")
-        ), /* @__PURE__ */ React__default.createElement(
-          DeleteModal,
-          {
-            open: deleteModalOpen,
-            onClose: handleDeleteModalClose,
-            entity: questionEntity
-          }
-        )))),
-        /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React__default.createElement(AuthorBox, { entity: questionEntity }))
-      )
-    )
-  ))), /* @__PURE__ */ React__default.createElement(CommentSection, { post: questionEntity, onCommentAction }));
+        container: true,
+        spacing: 2,
+        justifyContent: "flex-start",
+        style: { flexWrap: "nowrap" },
+        children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(VoteButtonContainer, { children: [
+            /* @__PURE__ */ jsx(VoteButtons, { entity: questionEntity }),
+            /* @__PURE__ */ jsx(FavoriteButton, { entity: questionEntity }),
+            /* @__PURE__ */ jsx(LinkButton, { entity: questionEntity })
+          ] }) }),
+          /* @__PURE__ */ jsxs(
+            Grid,
+            {
+              item: true,
+              className: styles.contentContainer,
+              style: { flexGrow: "1" },
+              children: [
+                /* @__PURE__ */ jsx(Grid, { item: true, className: styles.markdownContainer, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: questionEntity.content }) }),
+                /* @__PURE__ */ jsxs(
+                  Grid,
+                  {
+                    container: true,
+                    item: true,
+                    spacing: 1,
+                    justifyContent: "space-between",
+                    alignItems: "flex-end",
+                    className: styles.metadata,
+                    children: [
+                      /* @__PURE__ */ jsxs(Grid, { item: true, style: { alignSelf: "flex-end" }, children: [
+                        /* @__PURE__ */ jsx(TagsAndEntities, { entity: questionEntity }),
+                        (question.canEdit || question.canDelete) && /* @__PURE__ */ jsxs(Box, { className: styles.buttons, children: [
+                          question.canEdit && /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "outlined",
+                              size: "small",
+                              startIcon: /* @__PURE__ */ jsx(EditIcon, {}),
+                              onClick: () => navigate(
+                                editQuestionRoute({
+                                  id: question.id.toString(10)
+                                })
+                              ),
+                              className: "qetaQuestionCardEditBtn",
+                              children: t("questionPage.editButton")
+                            }
+                          ),
+                          question.canDelete && /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              Button,
+                              {
+                                variant: "outlined",
+                                size: "small",
+                                color: "secondary",
+                                onClick: handleDeleteModalOpen,
+                                startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
+                                children: t("deleteModal.deleteButton")
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              DeleteModal,
+                              {
+                                open: deleteModalOpen,
+                                onClose: handleDeleteModalClose,
+                                entity: questionEntity
+                              }
+                            )
+                          ] })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsx(AuthorBox, { entity: questionEntity }) })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(CommentSection, { post: questionEntity, onCommentAction })
+  ] });
 };
 
 export { QuestionCard };

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

@@ -1 +1 @@
-{"version":3,"file":"QuestionCard.esm.js","sources":["../../../src/components/QuestionCard/QuestionCard.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport React, { useEffect } from 'react';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { DeleteModal } from '../DeleteModal/DeleteModal';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport { FavoriteButton } from '../Buttons/FavoriteButton';\nimport { AuthorBox } from '../AuthorBox/AuthorBox';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { CommentSection } from '../CommentSection/CommentSection';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { LinkButton } from '../Buttons/LinkButton';\nimport { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';\nimport { editQuestionRouteRef } from '../../routes';\nimport { useNavigate } from 'react-router-dom';\nimport { useTranslation } from '../../hooks';\nimport { VoteButtonContainer } from '../Utility/VoteButtonContainer';\nimport {\n  Box,\n  Button,\n  Card,\n  CardContent,\n  Grid,\n  makeStyles,\n} from '@material-ui/core';\n\nexport type QuestionCardClassKeys =\n  | 'root'\n  | 'contentContainer'\n  | 'markdownContainer'\n  | 'buttons'\n  | 'metadata';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {},\n    contentContainer: {\n      marginLeft: '0.5em',\n      width: 'calc(100% - 70px)',\n    },\n    markdownContainer: {\n      minHeight: '6em',\n      paddingBottom: '0.5em',\n    },\n    buttons: {\n      marginTop: '1em',\n      '& *:not(:last-child)': {\n        marginRight: '0.3em',\n      },\n    },\n    metadata: {\n      marginTop: '1em',\n    },\n  }),\n  { name: 'QetaQuestionCard' },\n);\n\nexport const QuestionCard = (props: { question: PostResponse }) => {\n  const { question } = props;\n  const navigate = useNavigate();\n  const editQuestionRoute = useRouteRef(editQuestionRouteRef);\n  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);\n  const [questionEntity, setQuestionEntity] = React.useState(question);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n  const { t } = useTranslation();\n  const onCommentAction = (q: PostResponse, _?: AnswerResponse) => {\n    setQuestionEntity(q);\n  };\n  const styles = useStyles();\n\n  const highlightedAnswer = window.location.hash.slice(1) ?? undefined;\n  useEffect(() => {\n    if (highlightedAnswer) {\n      try {\n        const element = document.querySelector(`#${highlightedAnswer}`);\n        if (element) {\n          element.scrollIntoView();\n        }\n      } catch (e) {\n        // NOOP\n      }\n    }\n  }, [highlightedAnswer]);\n\n  return (\n    <>\n      <Card variant=\"outlined\" className={styles.root}>\n        <CardContent>\n          <Grid\n            container\n            spacing={2}\n            justifyContent=\"flex-start\"\n            style={{ flexWrap: 'nowrap' }}\n          >\n            <Grid item>\n              <VoteButtonContainer>\n                <VoteButtons entity={questionEntity} />\n                <FavoriteButton entity={questionEntity} />\n                <LinkButton entity={questionEntity} />\n              </VoteButtonContainer>\n            </Grid>\n            <Grid\n              item\n              className={styles.contentContainer}\n              style={{ flexGrow: '1' }}\n            >\n              <Grid item className={styles.markdownContainer}>\n                <MarkdownRenderer content={questionEntity.content} />\n              </Grid>\n              <Grid\n                container\n                item\n                spacing={1}\n                justifyContent=\"space-between\"\n                alignItems=\"flex-end\"\n                className={styles.metadata}\n              >\n                <Grid item style={{ alignSelf: 'flex-end' }}>\n                  <TagsAndEntities entity={questionEntity} />\n                  {(question.canEdit || question.canDelete) && (\n                    <Box className={styles.buttons}>\n                      {question.canEdit && (\n                        <Button\n                          variant=\"outlined\"\n                          size=\"small\"\n                          startIcon={<EditIcon />}\n                          onClick={() =>\n                            navigate(\n                              editQuestionRoute({\n                                id: question.id.toString(10),\n                              }),\n                            )\n                          }\n                          className=\"qetaQuestionCardEditBtn\"\n                        >\n                          {t('questionPage.editButton')}\n                        </Button>\n                      )}\n                      {question.canDelete && (\n                        <>\n                          <Button\n                            variant=\"outlined\"\n                            size=\"small\"\n                            color=\"secondary\"\n                            onClick={handleDeleteModalOpen}\n                            startIcon={<DeleteIcon />}\n                          >\n                            {t('deleteModal.deleteButton')}\n                          </Button>\n                          <DeleteModal\n                            open={deleteModalOpen}\n                            onClose={handleDeleteModalClose}\n                            entity={questionEntity}\n                          />\n                        </>\n                      )}\n                    </Box>\n                  )}\n                </Grid>\n                <Grid item xs={3}>\n                  <AuthorBox entity={questionEntity} />\n                </Grid>\n              </Grid>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n      <CommentSection post={questionEntity} onCommentAction={onCommentAction} />\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"QuestionCard.esm.js","sources":["../../../src/components/QuestionCard/QuestionCard.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useState, useEffect } from 'react';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { DeleteModal } from '../DeleteModal/DeleteModal';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport { FavoriteButton } from '../Buttons/FavoriteButton';\nimport { AuthorBox } from '../AuthorBox/AuthorBox';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { CommentSection } from '../CommentSection/CommentSection';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { LinkButton } from '../Buttons/LinkButton';\nimport { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';\nimport { editQuestionRouteRef } from '../../routes';\nimport { useNavigate } from 'react-router-dom';\nimport { useTranslation } from '../../hooks';\nimport { VoteButtonContainer } from '../Utility/VoteButtonContainer';\nimport {\n  Box,\n  Button,\n  Card,\n  CardContent,\n  Grid,\n  makeStyles,\n} from '@material-ui/core';\n\nexport type QuestionCardClassKeys =\n  | 'root'\n  | 'contentContainer'\n  | 'markdownContainer'\n  | 'buttons'\n  | 'metadata';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {},\n    contentContainer: {\n      marginLeft: '0.5em',\n      width: 'calc(100% - 70px)',\n    },\n    markdownContainer: {\n      minHeight: '6em',\n      paddingBottom: '0.5em',\n    },\n    buttons: {\n      marginTop: '1em',\n      '& *:not(:last-child)': {\n        marginRight: '0.3em',\n      },\n    },\n    metadata: {\n      marginTop: '1em',\n    },\n  }),\n  { name: 'QetaQuestionCard' },\n);\n\nexport const QuestionCard = (props: { question: PostResponse }) => {\n  const { question } = props;\n  const navigate = useNavigate();\n  const editQuestionRoute = useRouteRef(editQuestionRouteRef);\n  const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n  const [questionEntity, setQuestionEntity] = useState(question);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n  const { t } = useTranslation();\n  const onCommentAction = (q: PostResponse, _?: AnswerResponse) => {\n    setQuestionEntity(q);\n  };\n  const styles = useStyles();\n\n  const highlightedAnswer = window.location.hash.slice(1) ?? undefined;\n  useEffect(() => {\n    if (highlightedAnswer) {\n      try {\n        const element = document.querySelector(`#${highlightedAnswer}`);\n        if (element) {\n          element.scrollIntoView();\n        }\n      } catch (e) {\n        // NOOP\n      }\n    }\n  }, [highlightedAnswer]);\n\n  return (\n    <>\n      <Card variant=\"outlined\" className={styles.root}>\n        <CardContent>\n          <Grid\n            container\n            spacing={2}\n            justifyContent=\"flex-start\"\n            style={{ flexWrap: 'nowrap' }}\n          >\n            <Grid item>\n              <VoteButtonContainer>\n                <VoteButtons entity={questionEntity} />\n                <FavoriteButton entity={questionEntity} />\n                <LinkButton entity={questionEntity} />\n              </VoteButtonContainer>\n            </Grid>\n            <Grid\n              item\n              className={styles.contentContainer}\n              style={{ flexGrow: '1' }}\n            >\n              <Grid item className={styles.markdownContainer}>\n                <MarkdownRenderer content={questionEntity.content} />\n              </Grid>\n              <Grid\n                container\n                item\n                spacing={1}\n                justifyContent=\"space-between\"\n                alignItems=\"flex-end\"\n                className={styles.metadata}\n              >\n                <Grid item style={{ alignSelf: 'flex-end' }}>\n                  <TagsAndEntities entity={questionEntity} />\n                  {(question.canEdit || question.canDelete) && (\n                    <Box className={styles.buttons}>\n                      {question.canEdit && (\n                        <Button\n                          variant=\"outlined\"\n                          size=\"small\"\n                          startIcon={<EditIcon />}\n                          onClick={() =>\n                            navigate(\n                              editQuestionRoute({\n                                id: question.id.toString(10),\n                              }),\n                            )\n                          }\n                          className=\"qetaQuestionCardEditBtn\"\n                        >\n                          {t('questionPage.editButton')}\n                        </Button>\n                      )}\n                      {question.canDelete && (\n                        <>\n                          <Button\n                            variant=\"outlined\"\n                            size=\"small\"\n                            color=\"secondary\"\n                            onClick={handleDeleteModalOpen}\n                            startIcon={<DeleteIcon />}\n                          >\n                            {t('deleteModal.deleteButton')}\n                          </Button>\n                          <DeleteModal\n                            open={deleteModalOpen}\n                            onClose={handleDeleteModalClose}\n                            entity={questionEntity}\n                          />\n                        </>\n                      )}\n                    </Box>\n                  )}\n                </Grid>\n                <Grid item xs={3}>\n                  <AuthorBox entity={questionEntity} />\n                </Grid>\n              </Grid>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n      <CommentSection post={questionEntity} onCommentAction={onCommentAction} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js

@@ -1,11 +1,12 @@
-import React__default, { useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 import RelativeTime from 'react-relative-time';
 import { Tooltip } from '@material-ui/core';
 
 const RelativeTimeWithTooltip = (props) => {
   const { value } = props;
   let date = value;
-  const [updates, setUpdates] = React__default.useState(1);
+  const [updates, setUpdates] = useState(1);
   useEffect(() => {
     const interval = setInterval(() => {
       setUpdates(updates === 1 ? 0 : 1);
@@ -15,7 +16,7 @@ const RelativeTimeWithTooltip = (props) => {
   if (typeof date === "string" || date instanceof String) {
     date = new Date(date);
   }
-  return /* @__PURE__ */ React__default.createElement(Tooltip, { title: date.toLocaleString(navigator.languages) }, /* @__PURE__ */ React__default.createElement("div", { style: { display: "inline" } }, /* @__PURE__ */ React__default.createElement(RelativeTime, { value: date })));
+  return /* @__PURE__ */ jsx(Tooltip, { title: date.toLocaleString(navigator.languages), children: /* @__PURE__ */ jsx("div", { style: { display: "inline" }, children: /* @__PURE__ */ jsx(RelativeTime, { value: date }) }) });
 };
 
 export { RelativeTimeWithTooltip };

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

@@ -1 +1 @@
-{"version":3,"file":"RelativeTimeWithTooltip.esm.js","sources":["../../../src/components/RelativeTimeWithTooltip/RelativeTimeWithTooltip.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n// @ts-ignore\nimport RelativeTime from 'react-relative-time';\nimport { Tooltip } from '@material-ui/core';\n\nexport const RelativeTimeWithTooltip = (props: { value: Date | string }) => {\n  const { value } = props;\n  let date = value;\n  const [updates, setUpdates] = React.useState(1);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setUpdates(updates === 1 ? 0 : 1);\n    }, 30000);\n    return () => clearInterval(interval);\n  }, [updates, setUpdates]);\n\n  if (typeof date === 'string' || date instanceof String) {\n    date = new Date(date);\n  }\n\n  return (\n    <Tooltip title={date.toLocaleString(navigator.languages)}>\n      <div style={{ display: 'inline' }}>\n        <RelativeTime value={date} />\n      </div>\n    </Tooltip>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAKa,MAAA,uBAAA,GAA0B,CAAC,KAAoC,KAAA;AAC1E,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA;AAClB,EAAA,IAAI,IAAO,GAAA,KAAA;AACX,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAA,cAAA,CAAM,SAAS,CAAC,CAAA;AAE9C,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,YAAY,MAAM;AACjC,MAAW,UAAA,CAAA,OAAA,KAAY,CAAI,GAAA,CAAA,GAAI,CAAC,CAAA;AAAA,OAC/B,GAAK,CAAA;AACR,IAAO,OAAA,MAAM,cAAc,QAAQ,CAAA;AAAA,GAClC,EAAA,CAAC,OAAS,EAAA,UAAU,CAAC,CAAA;AAExB,EAAA,IAAI,OAAO,IAAA,KAAS,QAAY,IAAA,IAAA,YAAgB,MAAQ,EAAA;AACtD,IAAO,IAAA,GAAA,IAAI,KAAK,IAAI,CAAA;AAAA;AAGtB,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,WAAQ,KAAO,EAAA,IAAA,CAAK,eAAe,SAAU,CAAA,SAAS,qBACpDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,OAAO,EAAE,OAAA,EAAS,UACrB,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,gBAAa,KAAO,EAAA,IAAA,EAAM,CAC7B,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RelativeTimeWithTooltip.esm.js","sources":["../../../src/components/RelativeTimeWithTooltip/RelativeTimeWithTooltip.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\n// @ts-ignore\nimport RelativeTime from 'react-relative-time';\nimport { Tooltip } from '@material-ui/core';\n\nexport const RelativeTimeWithTooltip = (props: { value: Date | string }) => {\n  const { value } = props;\n  let date = value;\n  const [updates, setUpdates] = useState(1);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setUpdates(updates === 1 ? 0 : 1);\n    }, 30000);\n    return () => clearInterval(interval);\n  }, [updates, setUpdates]);\n\n  if (typeof date === 'string' || date instanceof String) {\n    date = new Date(date);\n  }\n\n  return (\n    <Tooltip title={date.toLocaleString(navigator.languages)}>\n      <div style={{ display: 'inline' }}>\n        <RelativeTime value={date} />\n      </div>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;AAKa,MAAA,uBAAA,GAA0B,CAAC,KAAoC,KAAA;AAC1E,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA;AAClB,EAAA,IAAI,IAAO,GAAA,KAAA;AACX,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,CAAC,CAAA;AAExC,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,YAAY,MAAM;AACjC,MAAW,UAAA,CAAA,OAAA,KAAY,CAAI,GAAA,CAAA,GAAI,CAAC,CAAA;AAAA,OAC/B,GAAK,CAAA;AACR,IAAO,OAAA,MAAM,cAAc,QAAQ,CAAA;AAAA,GAClC,EAAA,CAAC,OAAS,EAAA,UAAU,CAAC,CAAA;AAExB,EAAA,IAAI,OAAO,IAAA,KAAS,QAAY,IAAA,IAAA,YAAgB,MAAQ,EAAA;AACtD,IAAO,IAAA,GAAA,IAAI,KAAK,IAAI,CAAA;AAAA;AAGtB,EACE,uBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,IAAA,CAAK,eAAe,SAAU,CAAA,SAAS,GACrD,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,OAAO,EAAE,OAAA,EAAS,UACrB,EAAA,QAAA,kBAAA,GAAA,CAAC,gBAAa,KAAO,EAAA,IAAA,EAAM,GAC7B,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/SearchBar/SearchBar.esm.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { makeStyles, Paper, IconButton, CircularProgress, InputBase } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 import CloseIcon from '@material-ui/icons/Close';
@@ -28,52 +29,54 @@ const useStyles = makeStyles(
 );
 const SearchBar = (props) => {
   const { label, onSearch, loading } = props;
-  const [searchQuery, setSearchQuery] = React.useState("");
+  const [searchQuery, setSearchQuery] = useState("");
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     Paper,
     {
       component: "form",
       className: classes.root,
-      onSubmit: (e) => e.preventDefault()
-    },
-    /* @__PURE__ */ React.createElement(
-      IconButton,
-      {
-        type: "button",
-        "aria-label": "search",
-        className: classes.iconButton
-      },
-      loading ? /* @__PURE__ */ React.createElement(CircularProgress, { size: "1em" }) : /* @__PURE__ */ React.createElement(SearchIcon, { color: "disabled" })
-    ),
-    /* @__PURE__ */ React.createElement(
-      InputBase,
-      {
-        className: classes.input,
-        placeholder: label,
-        value: searchQuery,
-        inputProps: {
-          "aria-label": label,
-          onChange: (event) => {
-            onSearch(event.target.value);
-            setSearchQuery(event.target.value);
+      onSubmit: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            "aria-label": "search",
+            className: classes.iconButton,
+            children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "1em" }) : /* @__PURE__ */ jsx(SearchIcon, { color: "disabled" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InputBase,
+          {
+            className: classes.input,
+            placeholder: label,
+            value: searchQuery,
+            inputProps: {
+              "aria-label": label,
+              onChange: (event) => {
+                onSearch(event.target.value);
+                setSearchQuery(event.target.value);
+              }
+            }
           }
-        }
-      }
-    ),
-    searchQuery && /* @__PURE__ */ React.createElement(
-      IconButton,
-      {
-        type: "button",
-        "aria-label": "clear",
-        className: classes.iconButton,
-        onClick: () => {
-          onSearch("");
-          setSearchQuery("");
-        }
-      },
-      /* @__PURE__ */ React.createElement(CloseIcon, null)
-    )
+        ),
+        searchQuery && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            "aria-label": "clear",
+            className: classes.iconButton,
+            onClick: () => {
+              onSearch("");
+              setSearchQuery("");
+            },
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      ]
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  CircularProgress,\n  IconButton,\n  InputBase,\n  makeStyles,\n  Paper,\n  Theme,\n} from '@material-ui/core';\nimport SearchIcon from '@material-ui/icons/Search';\nimport CloseIcon from '@material-ui/icons/Close';\n\nexport type QetaSearchBarClassKeys =\n  | 'root'\n  | 'input'\n  | 'iconButton'\n  | 'divider';\n\nconst useStyles = makeStyles(\n  (theme: Theme) => ({\n    root: {\n      padding: '2px 4px',\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 300,\n      boxShadow: 'none',\n    },\n    input: {\n      marginLeft: theme.spacing(1),\n      flex: 1,\n    },\n    iconButton: {\n      padding: 5,\n    },\n    divider: {\n      height: 28,\n      margin: 4,\n    },\n  }),\n  { name: 'QetaSearchBar' },\n);\n\nexport const SearchBar = (props: {\n  label: string;\n  onSearch: (query: string) => void;\n  loading?: boolean;\n}) => {\n  const { label, onSearch, loading } = props;\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const classes = useStyles();\n\n  return (\n    <Paper\n      component=\"form\"\n      className={classes.root}\n      onSubmit={e => e.preventDefault()}\n    >\n      <IconButton\n        type=\"button\"\n        aria-label=\"search\"\n        className={classes.iconButton}\n      >\n        {loading ? (\n          <CircularProgress size=\"1em\" />\n        ) : (\n          <SearchIcon color=\"disabled\" />\n        )}\n      </IconButton>\n      <InputBase\n        className={classes.input}\n        placeholder={label}\n        value={searchQuery}\n        inputProps={{\n          'aria-label': label,\n          onChange: (\n            event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n          ) => {\n            onSearch(event.target.value);\n            setSearchQuery(event.target.value);\n          },\n        }}\n      />\n      {searchQuery && (\n        <IconButton\n          type=\"button\"\n          aria-label=\"clear\"\n          className={classes.iconButton}\n          onClick={() => {\n            onSearch('');\n            setSearchQuery('');\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </Paper>\n  );\n};\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAC,KAAkB,MAAA;AAAA,IACjB,IAAM,EAAA;AAAA,MACJ,OAAS,EAAA,SAAA;AAAA,MACT,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,QAAU,EAAA,GAAA;AAAA,MACV,SAAW,EAAA;AAAA,KACb;AAAA,IACA,KAAO,EAAA;AAAA,MACL,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,IAAM,EAAA;AAAA,KACR;AAAA,IACA,UAAY,EAAA;AAAA,MACV,OAAS,EAAA;AAAA,KACX;AAAA,IACA,OAAS,EAAA;AAAA,MACP,MAAQ,EAAA,EAAA;AAAA,MACR,MAAQ,EAAA;AAAA;AACV,GACF,CAAA;AAAA,EACA,EAAE,MAAM,eAAgB;AAC1B,CAAA;AAEa,MAAA,SAAA,GAAY,CAAC,KAIpB,KAAA;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,QAAU,EAAA,OAAA,EAAY,GAAA,KAAA;AACrC,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,KAAA,CAAM,SAAS,EAAE,CAAA;AACvD,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,MAAA;AAAA,MACV,WAAW,OAAQ,CAAA,IAAA;AAAA,MACnB,QAAA,EAAU,CAAK,CAAA,KAAA,CAAA,CAAE,cAAe;AAAA,KAAA;AAAA,oBAEhC,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,QAAA;AAAA,QACL,YAAW,EAAA,QAAA;AAAA,QACX,WAAW,OAAQ,CAAA;AAAA,OAAA;AAAA,MAElB,OAAA,uCACE,gBAAiB,EAAA,EAAA,IAAA,EAAK,OAAM,CAE7B,mBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAM,UAAW,EAAA;AAAA,KAEjC;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAQ,CAAA,KAAA;AAAA,QACnB,WAAa,EAAA,KAAA;AAAA,QACb,KAAO,EAAA,WAAA;AAAA,QACP,UAAY,EAAA;AAAA,UACV,YAAc,EAAA,KAAA;AAAA,UACd,QAAA,EAAU,CACR,KACG,KAAA;AACH,YAAS,QAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAC3B,YAAe,cAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA;AACnC;AACF;AAAA,KACF;AAAA,IACC,WACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,QAAA;AAAA,QACL,YAAW,EAAA,OAAA;AAAA,QACX,WAAW,OAAQ,CAAA,UAAA;AAAA,QACnB,SAAS,MAAM;AACb,UAAA,QAAA,CAAS,EAAE,CAAA;AACX,UAAA,cAAA,CAAe,EAAE,CAAA;AAAA;AACnB,OAAA;AAAA,0CAEC,SAAU,EAAA,IAAA;AAAA;AACb,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport {\n  CircularProgress,\n  IconButton,\n  InputBase,\n  makeStyles,\n  Paper,\n  Theme,\n} from '@material-ui/core';\nimport SearchIcon from '@material-ui/icons/Search';\nimport CloseIcon from '@material-ui/icons/Close';\n\nexport type QetaSearchBarClassKeys =\n  | 'root'\n  | 'input'\n  | 'iconButton'\n  | 'divider';\n\nconst useStyles = makeStyles(\n  (theme: Theme) => ({\n    root: {\n      padding: '2px 4px',\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 300,\n      boxShadow: 'none',\n    },\n    input: {\n      marginLeft: theme.spacing(1),\n      flex: 1,\n    },\n    iconButton: {\n      padding: 5,\n    },\n    divider: {\n      height: 28,\n      margin: 4,\n    },\n  }),\n  { name: 'QetaSearchBar' },\n);\n\nexport const SearchBar = (props: {\n  label: string;\n  onSearch: (query: string) => void;\n  loading?: boolean;\n}) => {\n  const { label, onSearch, loading } = props;\n  const [searchQuery, setSearchQuery] = useState('');\n  const classes = useStyles();\n\n  return (\n    <Paper\n      component=\"form\"\n      className={classes.root}\n      onSubmit={e => e.preventDefault()}\n    >\n      <IconButton\n        type=\"button\"\n        aria-label=\"search\"\n        className={classes.iconButton}\n      >\n        {loading ? (\n          <CircularProgress size=\"1em\" />\n        ) : (\n          <SearchIcon color=\"disabled\" />\n        )}\n      </IconButton>\n      <InputBase\n        className={classes.input}\n        placeholder={label}\n        value={searchQuery}\n        inputProps={{\n          'aria-label': label,\n          onChange: (\n            event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n          ) => {\n            onSearch(event.target.value);\n            setSearchQuery(event.target.value);\n          },\n        }}\n      />\n      {searchQuery && (\n        <IconButton\n          type=\"button\"\n          aria-label=\"clear\"\n          className={classes.iconButton}\n          onClick={() => {\n            onSearch('');\n            setSearchQuery('');\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </Paper>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAC,KAAkB,MAAA;AAAA,IACjB,IAAM,EAAA;AAAA,MACJ,OAAS,EAAA,SAAA;AAAA,MACT,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,QAAU,EAAA,GAAA;AAAA,MACV,SAAW,EAAA;AAAA,KACb;AAAA,IACA,KAAO,EAAA;AAAA,MACL,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,IAAM,EAAA;AAAA,KACR;AAAA,IACA,UAAY,EAAA;AAAA,MACV,OAAS,EAAA;AAAA,KACX;AAAA,IACA,OAAS,EAAA;AAAA,MACP,MAAQ,EAAA,EAAA;AAAA,MACR,MAAQ,EAAA;AAAA;AACV,GACF,CAAA;AAAA,EACA,EAAE,MAAM,eAAgB;AAC1B,CAAA;AAEa,MAAA,SAAA,GAAY,CAAC,KAIpB,KAAA;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,QAAU,EAAA,OAAA,EAAY,GAAA,KAAA;AACrC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,MAAA;AAAA,MACV,WAAW,OAAQ,CAAA,IAAA;AAAA,MACnB,QAAA,EAAU,CAAK,CAAA,KAAA,CAAA,CAAE,cAAe,EAAA;AAAA,MAEhC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,QAAA;AAAA,YACL,YAAW,EAAA,QAAA;AAAA,YACX,WAAW,OAAQ,CAAA,UAAA;AAAA,YAElB,QAAA,EAAA,OAAA,uBACE,gBAAiB,EAAA,EAAA,IAAA,EAAK,OAAM,CAE7B,mBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAM,UAAW,EAAA;AAAA;AAAA,SAEjC;AAAA,wBACA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,WAAW,OAAQ,CAAA,KAAA;AAAA,YACnB,WAAa,EAAA,KAAA;AAAA,YACb,KAAO,EAAA,WAAA;AAAA,YACP,UAAY,EAAA;AAAA,cACV,YAAc,EAAA,KAAA;AAAA,cACd,QAAA,EAAU,CACR,KACG,KAAA;AACH,gBAAS,QAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAC3B,gBAAe,cAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA;AACnC;AACF;AAAA,SACF;AAAA,QACC,WACC,oBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,QAAA;AAAA,YACL,YAAW,EAAA,OAAA;AAAA,YACX,WAAW,OAAQ,CAAA,UAAA;AAAA,YACnB,SAAS,MAAM;AACb,cAAA,QAAA,CAAS,EAAE,CAAA;AACX,cAAA,cAAA,CAAe,EAAE,CAAA;AAAA,aACnB;AAAA,YAEA,8BAAC,SAAU,EAAA,EAAA;AAAA;AAAA;AACb;AAAA;AAAA,GAEJ;AAEJ;;;;"}