@drodil/backstage-plugin-qeta-react 2.15.0 → 3.0.0

package/dist/components/AnswersContainer/AnswersContainer.esm.js

@@ -0,0 +1,210 @@
+import { useTranslation, useQetaApi } from '../../utils/hooks.esm.js';
+import { Box, Typography, Grid, TextField, Button, Collapse } from '@material-ui/core';
+import React, { useEffect } from 'react';
+import useDebounce from 'react-use/lib/useDebounce';
+import FilterList from '@material-ui/icons/FilterList';
+import { useSearchParams } from 'react-router-dom';
+import { EntityRefLink } from '@backstage/plugin-catalog-react';
+import { useAnalytics } from '@backstage/core-plugin-api';
+import { filterTags } from '@drodil/backstage-plugin-qeta-common';
+import { getFiltersWithDateRange } from '../../utils/utils.esm.js';
+import { filterKeys, FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
+import { AnswerList } from './AnswerList.esm.js';
+
+const AnswersContainer = (props) => {
+  const { tags, author, entity, showFilters, showTitle, title } = props;
+  const analytics = useAnalytics();
+  const [page, setPage] = React.useState(1);
+  const [answersPerPage, setAnswersPerPage] = React.useState(10);
+  const [showFilterPanel, setShowFilterPanel] = React.useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [filters, setFilters] = React.useState({
+    order: "desc",
+    orderBy: "created",
+    searchQuery: "",
+    dateRange: "",
+    noCorrectAnswer: "false",
+    entity: entity ?? "",
+    tags: tags ?? [],
+    noVotes: "false"
+  });
+  const { t } = useTranslation();
+  const onPageChange = (value) => {
+    setPage(value);
+    setSearchParams((prev) => {
+      const newValue = prev;
+      newValue.set("page", String(value));
+      return newValue;
+    });
+  };
+  const onFilterChange = (key, value) => {
+    if (filters[key] === value) {
+      return;
+    }
+    setPage(1);
+    setFilters({ ...filters, ...{ [key]: value } });
+    setSearchParams((prev) => {
+      const newValue = prev;
+      if (!value || value === "false") {
+        newValue.delete(key);
+      } else if (Array.isArray(value)) {
+        if (value.length === 0) {
+          newValue.delete(key);
+        } else {
+          newValue.set(key, value.join(","));
+        }
+      } else if (value.length > 0) {
+        newValue.set(key, value);
+      } else {
+        newValue.delete(key);
+      }
+      return newValue;
+    });
+  };
+  const onSearchQueryChange = (event) => {
+    onPageChange(1);
+    if (event.target.value) {
+      analytics.captureEvent("qeta_search", event.target.value);
+    }
+    setSearchQuery(event.target.value);
+  };
+  useDebounce(
+    () => {
+      if (filters.searchQuery !== searchQuery) {
+        setFilters({ ...filters, searchQuery });
+      }
+    },
+    400,
+    [searchQuery]
+  );
+  useEffect(() => {
+    let filtersApplied = false;
+    searchParams.forEach((value, key) => {
+      try {
+        if (key === "page") {
+          const pv = Number.parseInt(value, 10);
+          if (pv > 0) {
+            setPage(pv);
+          } else {
+            setPage(1);
+          }
+        } else if (key === "answersPerPage") {
+          const qpp = Number.parseInt(value, 10);
+          if (qpp > 0) setAnswersPerPage(qpp);
+        } else if (filterKeys.includes(key)) {
+          filtersApplied = true;
+          if (key === "tags") {
+            filters.tags = filterTags(value) ?? [];
+          } else {
+            filters[key] = value;
+          }
+        }
+      } catch (_e) {
+      }
+    });
+    setFilters(filters);
+    if (filtersApplied) {
+      setShowFilterPanel(true);
+    }
+  }, [searchParams, filters]);
+  const {
+    value: response,
+    loading,
+    error
+  } = useQetaApi(
+    (api) => {
+      return api.getAnswers({
+        limit: answersPerPage,
+        offset: (page - 1) * answersPerPage,
+        author,
+        ...getFiltersWithDateRange(filters)
+      });
+    },
+    [page, filters, answersPerPage]
+  );
+  const onPageSizeChange = (value) => {
+    if (response) {
+      let newPage = page;
+      while (newPage * value > response.total) {
+        newPage -= 1;
+      }
+      onPageChange(Math.max(1, newPage));
+    }
+    setAnswersPerPage(value);
+    setSearchParams((prev) => {
+      const newValue = prev;
+      newValue.set("answersPerPage", String(value));
+      return newValue;
+    });
+  };
+  let shownTitle = title;
+  let link = void 0;
+  if (author) {
+    shownTitle = `${t("answerContainer.title.answersBy")} `;
+    link = /* @__PURE__ */ React.createElement(EntityRefLink, { entityRef: author, hideIcon: true, defaultKind: "user" });
+  } else if (entity) {
+    shownTitle = `${t("answerContainer.title.answersAbout")} `;
+    link = /* @__PURE__ */ React.createElement(EntityRefLink, { entityRef: entity });
+  } else if (tags) {
+    shownTitle = t("answerContainer.title.answersTagged", {
+      tags: tags.join(", ")
+    });
+  }
+  return /* @__PURE__ */ React.createElement(Box, { className: "qetaAnswersContainer" }, showTitle && /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "h5",
+      className: "qetaAnswersContainerTitle",
+      style: { marginBottom: "1.5rem" }
+    },
+    shownTitle,
+    " ",
+    link
+  ), /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 4 }, /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      id: "search-bar",
+      fullWidth: true,
+      onChange: onSearchQueryChange,
+      label: t("answerContainer.search.label"),
+      className: "qetaAnswersContainerSearchInput",
+      variant: "outlined",
+      placeholder: t("answerContainer.search.placeholder"),
+      size: "small",
+      style: { marginBottom: "5px" }
+    }
+  ))), /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: "qetaAnswersContainerAnswerCount" }, t("common.answers", { count: response?.total ?? 0 }))), (showFilters ?? true) && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      onClick: () => setShowFilterPanel(!showFilterPanel),
+      className: "qetaAnswerContainerFilterPanelBtn",
+      startIcon: /* @__PURE__ */ React.createElement(FilterList, null)
+    },
+    t("filterPanel.filterButton")
+  ))), (showFilters ?? true) && /* @__PURE__ */ React.createElement(Collapse, { in: showFilterPanel }, /* @__PURE__ */ React.createElement(
+    FilterPanel,
+    {
+      onChange: onFilterChange,
+      filters,
+      answerFilters: true
+    }
+  )), /* @__PURE__ */ React.createElement(
+    AnswerList,
+    {
+      loading,
+      error,
+      response,
+      onPageChange,
+      onPageSizeChange,
+      entity,
+      page,
+      pageSize: answersPerPage,
+      entityPage: entity !== void 0,
+      tags
+    }
+  ));
+};
+
+export { AnswersContainer };
+//# sourceMappingURL=AnswersContainer.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnswersContainer.esm.js","sources":["../../../src/components/AnswersContainer/AnswersContainer.tsx"],"sourcesContent":["import { useQetaApi, useTranslation } from '../../utils';\nimport {\n  Box,\n  Button,\n  Collapse,\n  Grid,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport React, { useEffect } from 'react';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport FilterList from '@material-ui/icons/FilterList';\nimport { useSearchParams } from 'react-router-dom';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { useAnalytics } from '@backstage/core-plugin-api';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { getFiltersWithDateRange } from '../../utils/utils';\nimport {\n  FilterKey,\n  filterKeys,\n  FilterPanel,\n  Filters,\n} from '../FilterPanel/FilterPanel';\nimport { AnswerList } from './AnswerList';\n\nexport interface AnswersContainerProps {\n  tags?: string[];\n  author?: string;\n  entity?: string;\n  showFilters?: boolean;\n  showTitle?: boolean;\n  title?: string;\n}\n\nexport const AnswersContainer = (props: AnswersContainerProps) => {\n  const { tags, author, entity, showFilters, showTitle, title } = props;\n  const analytics = useAnalytics();\n  const [page, setPage] = React.useState(1);\n  const [answersPerPage, setAnswersPerPage] = React.useState(10);\n  const [showFilterPanel, setShowFilterPanel] = React.useState(false);\n  const [searchParams, setSearchParams] = useSearchParams();\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const [filters, setFilters] = React.useState<Filters>({\n    order: 'desc',\n    orderBy: 'created',\n    searchQuery: '',\n    dateRange: '',\n    noCorrectAnswer: 'false',\n    entity: entity ?? '',\n    tags: tags ?? [],\n    noVotes: 'false',\n  });\n  const { t } = useTranslation();\n\n  const onPageChange = (value: number) => {\n    setPage(value);\n    setSearchParams(prev => {\n      const newValue = prev;\n      newValue.set('page', String(value));\n      return newValue;\n    });\n  };\n\n  const onFilterChange = (key: FilterKey, value: string | string[]) => {\n    if (filters[key] === value) {\n      return;\n    }\n\n    setPage(1);\n    setFilters({ ...filters, ...{ [key]: value } });\n    setSearchParams(prev => {\n      const newValue = prev;\n      if (!value || value === 'false') {\n        newValue.delete(key);\n      } else if (Array.isArray(value)) {\n        if (value.length === 0) {\n          newValue.delete(key);\n        } else {\n          newValue.set(key, value.join(','));\n        }\n      } else if (value.length > 0) {\n        newValue.set(key, value);\n      } else {\n        newValue.delete(key);\n      }\n      return newValue;\n    });\n  };\n\n  const onSearchQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onPageChange(1);\n    if (event.target.value) {\n      analytics.captureEvent('qeta_search', event.target.value);\n    }\n    setSearchQuery(event.target.value);\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    let filtersApplied = false;\n    searchParams.forEach((value, key) => {\n      try {\n        if (key === 'page') {\n          const pv = Number.parseInt(value, 10);\n          if (pv > 0) {\n            setPage(pv);\n          } else {\n            setPage(1);\n          }\n        } else if (key === 'answersPerPage') {\n          const qpp = Number.parseInt(value, 10);\n          if (qpp > 0) setAnswersPerPage(qpp);\n        } else if (filterKeys.includes(key as FilterKey)) {\n          filtersApplied = true;\n          if (key === 'tags') {\n            filters.tags = filterTags(value) ?? [];\n          } else {\n            (filters as any)[key] = value;\n          }\n        }\n      } catch (_e) {\n        // NOOP\n      }\n    });\n    setFilters(filters);\n    if (filtersApplied) {\n      setShowFilterPanel(true);\n    }\n  }, [searchParams, filters]);\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api => {\n      return api.getAnswers({\n        limit: answersPerPage,\n        offset: (page - 1) * answersPerPage,\n        author,\n        ...(getFiltersWithDateRange(filters) as any),\n      });\n    },\n    [page, filters, answersPerPage],\n  );\n\n  const onPageSizeChange = (value: number) => {\n    if (response) {\n      let newPage = page;\n      while (newPage * value > response.total) {\n        newPage -= 1;\n      }\n      onPageChange(Math.max(1, newPage));\n    }\n    setAnswersPerPage(value);\n    setSearchParams(prev => {\n      const newValue = prev;\n      newValue.set('answersPerPage', String(value));\n      return newValue;\n    });\n  };\n\n  let shownTitle = title;\n  let link = undefined;\n  if (author) {\n    shownTitle = `${t('answerContainer.title.answersBy')} `;\n    link = <EntityRefLink entityRef={author} hideIcon defaultKind=\"user\" />;\n  } else if (entity) {\n    shownTitle = `${t('answerContainer.title.answersAbout')} `;\n    link = <EntityRefLink entityRef={entity} />;\n  } else if (tags) {\n    shownTitle = t('answerContainer.title.answersTagged', {\n      tags: tags.join(', '),\n    });\n  }\n\n  return (\n    <Box className=\"qetaAnswersContainer\">\n      {showTitle && (\n        <Typography\n          variant=\"h5\"\n          className=\"qetaAnswersContainerTitle\"\n          style={{ marginBottom: '1.5rem' }}\n        >\n          {shownTitle} {link}\n        </Typography>\n      )}\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <TextField\n            id=\"search-bar\"\n            fullWidth\n            onChange={onSearchQueryChange}\n            label={t('answerContainer.search.label')}\n            className=\"qetaAnswersContainerSearchInput\"\n            variant=\"outlined\"\n            placeholder={t('answerContainer.search.placeholder')}\n            size=\"small\"\n            style={{ marginBottom: '5px' }}\n          />\n        </Grid>\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item>\n          <Typography variant=\"h6\" className=\"qetaAnswersContainerAnswerCount\">\n            {t('common.answers', { count: response?.total ?? 0 })}\n          </Typography>\n        </Grid>\n        {(showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => setShowFilterPanel(!showFilterPanel)}\n              className=\"qetaAnswerContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel\n            onChange={onFilterChange}\n            filters={filters}\n            answerFilters\n          />\n        </Collapse>\n      )}\n\n      <AnswerList\n        loading={loading}\n        error={error}\n        response={response}\n        onPageChange={onPageChange}\n        onPageSizeChange={onPageSizeChange}\n        entity={entity}\n        page={page}\n        pageSize={answersPerPage}\n        entityPage={entity !== undefined}\n        tags={tags}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ArticleContent/ArticleButtons.esm.js

@@ -0,0 +1,90 @@
+import { useVoting, useTranslation } from '../../utils/hooks.esm.js';
+import React from 'react';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import { makeStyles, Grid, Tooltip, IconButton, Typography } from '@material-ui/core';
+import ArrowDownward from '@material-ui/icons/ArrowDownward';
+import { FavoriteButton } from '../Buttons/FavoriteButton.esm.js';
+import { LinkButton } from '../Buttons/LinkButton.esm.js';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { editArticleRouteRef } from '../../routes.esm.js';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { DeleteModal } from '../DeleteModal/DeleteModal.esm.js';
+import EditIcon from '@material-ui/icons/Edit';
+
+const useStyles = makeStyles((theme) => {
+  return {
+    container: {
+      width: "100%",
+      paddingTop: "0.5rem",
+      paddingBottom: "0.5rem",
+      borderTop: `1px solid ${theme.palette.background.paper}`,
+      borderBottom: `1px solid ${theme.palette.background.paper}`
+    },
+    scoreText: {
+      marginLeft: "0.5rem",
+      userSelect: "none"
+    }
+  };
+});
+const ArticleButtons = (props) => {
+  const { post } = props;
+  const { voteUpTooltip, ownVote, voteUp, score, voteDownTooltip, voteDown } = useVoting(post);
+  const styles = useStyles();
+  const { t } = useTranslation();
+  const editArticleRoute = useRouteRef(editArticleRouteRef);
+  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
+  const handleDeleteModalOpen = () => setDeleteModalOpen(true);
+  const handleDeleteModalClose = () => setDeleteModalOpen(false);
+  const own = props.post.own ?? false;
+  return /* @__PURE__ */ React.createElement("div", { className: styles.container }, /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Tooltip, { title: voteUpTooltip }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "vote up",
+      color: ownVote > 0 ? "primary" : "default",
+      className: ownVote > 0 ? "qetaVoteUpSelected" : "qetaVoteUp",
+      disabled: own,
+      size: "small",
+      onClick: voteUp
+    },
+    /* @__PURE__ */ React.createElement(ArrowUpward, null)
+  ))), /* @__PURE__ */ React.createElement(Tooltip, { title: voteDownTooltip }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "vote down",
+      color: ownVote < 0 ? "primary" : "default",
+      className: ownVote < 0 ? "qetaVoteDownSelected" : "qetaVoteDown",
+      disabled: own,
+      size: "small",
+      onClick: voteDown
+    },
+    /* @__PURE__ */ React.createElement(ArrowDownward, null)
+  ))), /* @__PURE__ */ React.createElement(Tooltip, { title: t("common.score", { score: score.toString(10) }) }, /* @__PURE__ */ React.createElement(Typography, { className: styles.scoreText, display: "inline" }, score))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(FavoriteButton, { entity: post }), /* @__PURE__ */ React.createElement(LinkButton, { entity: post }), (post.canEdit || post.canDelete) && /* @__PURE__ */ React.createElement(React.Fragment, null, post.canDelete && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: t("articlePage.deleteButton") }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      size: "small",
+      color: "secondary",
+      onClick: handleDeleteModalOpen
+    },
+    /* @__PURE__ */ React.createElement(DeleteIcon, null)
+  )), /* @__PURE__ */ React.createElement(
+    DeleteModal,
+    {
+      open: deleteModalOpen,
+      onClose: handleDeleteModalClose,
+      entity: post
+    }
+  )), post.canEdit && /* @__PURE__ */ React.createElement(Tooltip, { title: t("articlePage.editButton") }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      size: "small",
+      color: "primary",
+      href: editArticleRoute({
+        id: post.id.toString(10)
+      })
+    },
+    /* @__PURE__ */ React.createElement(EditIcon, null)
+  ))))));
+};
+
+export { ArticleButtons, useStyles };
+//# sourceMappingURL=ArticleButtons.esm.js.map

package/dist/components/ArticleContent/ArticleButtons.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleButtons.esm.js","sources":["../../../src/components/ArticleContent/ArticleButtons.tsx"],"sourcesContent":["import { PostResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation, useVoting } from '../../utils/hooks';\nimport React from 'react';\nimport ArrowUpward from '@material-ui/icons/ArrowUpward';\nimport {\n  Grid,\n  IconButton,\n  makeStyles,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport ArrowDownward from '@material-ui/icons/ArrowDownward';\nimport { FavoriteButton } from '../Buttons/FavoriteButton';\nimport { LinkButton } from '../Buttons/LinkButton';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { editArticleRouteRef } from '../../routes';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport { DeleteModal } from '../DeleteModal';\nimport EditIcon from '@material-ui/icons/Edit';\n\nexport const useStyles = makeStyles(theme => {\n  return {\n    container: {\n      width: '100%',\n      paddingTop: '0.5rem',\n      paddingBottom: '0.5rem',\n      borderTop: `1px solid ${theme.palette.background.paper}`,\n      borderBottom: `1px solid ${theme.palette.background.paper}`,\n    },\n    scoreText: {\n      marginLeft: '0.5rem',\n      userSelect: 'none',\n    },\n  };\n});\n\nexport const ArticleButtons = (props: { post: PostResponse }) => {\n  const { post } = props;\n  const { voteUpTooltip, ownVote, voteUp, score, voteDownTooltip, voteDown } =\n    useVoting(post);\n  const styles = useStyles();\n  const { t } = useTranslation();\n  const editArticleRoute = useRouteRef(editArticleRouteRef);\n  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n\n  const own = props.post.own ?? false;\n\n  return (\n    <div className={styles.container}>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item>\n          <Tooltip title={voteUpTooltip}>\n            <span>\n              <IconButton\n                aria-label=\"vote up\"\n                color={ownVote > 0 ? 'primary' : 'default'}\n                className={ownVote > 0 ? 'qetaVoteUpSelected' : 'qetaVoteUp'}\n                disabled={own}\n                size=\"small\"\n                onClick={voteUp}\n              >\n                <ArrowUpward />\n              </IconButton>\n            </span>\n          </Tooltip>\n          <Tooltip title={voteDownTooltip}>\n            <span>\n              <IconButton\n                aria-label=\"vote down\"\n                color={ownVote < 0 ? 'primary' : 'default'}\n                className={\n                  ownVote < 0 ? 'qetaVoteDownSelected' : 'qetaVoteDown'\n                }\n                disabled={own}\n                size=\"small\"\n                onClick={voteDown}\n              >\n                <ArrowDownward />\n              </IconButton>\n            </span>\n          </Tooltip>\n          <Tooltip title={t('common.score', { score: score.toString(10) })}>\n            <Typography className={styles.scoreText} display=\"inline\">\n              {score}\n            </Typography>\n          </Tooltip>\n        </Grid>\n        <Grid item>\n          <FavoriteButton entity={post} />\n          <LinkButton entity={post} />\n          {(post.canEdit || post.canDelete) && (\n            <>\n              {post.canDelete && (\n                <>\n                  <Tooltip title={t('articlePage.deleteButton')}>\n                    <IconButton\n                      size=\"small\"\n                      color=\"secondary\"\n                      onClick={handleDeleteModalOpen}\n                    >\n                      <DeleteIcon />\n                    </IconButton>\n                  </Tooltip>\n                  <DeleteModal\n                    open={deleteModalOpen}\n                    onClose={handleDeleteModalClose}\n                    entity={post}\n                  />\n                </>\n              )}\n              {post.canEdit && (\n                <Tooltip title={t('articlePage.editButton')}>\n                  <IconButton\n                    size=\"small\"\n                    color=\"primary\"\n                    href={editArticleRoute({\n                      id: post.id.toString(10),\n                    })}\n                  >\n                    <EditIcon />\n                  </IconButton>\n                </Tooltip>\n              )}\n            </>\n          )}\n        </Grid>\n      </Grid>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ArticleContent/ArticleContent.esm.js

@@ -0,0 +1,78 @@
+import { makeStyles, Typography, Grid, Avatar } from '@material-ui/core';
+import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer.esm.js';
+import React from 'react';
+import { useTranslation, useEntityAuthor } from '../../utils/hooks.esm.js';
+import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
+import { ArticleButtons } from './ArticleButtons.esm.js';
+import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities.esm.js';
+import { CommentSection } from '../CommentSection/CommentSection.esm.js';
+
+const useStyles = makeStyles((theme) => {
+  return {
+    content: {
+      fontSize: "1.1rem",
+      lineHeight: "1.5rem",
+      paddingTop: "1rem",
+      paddingBottom: "1rem",
+      marginBottom: "1rem",
+      borderBottom: `1px solid ${theme.palette.background.paper}`
+    },
+    headerImage: {
+      objectFit: "cover",
+      width: "100%",
+      height: "200px",
+      marginBottom: "1rem",
+      marginTop: "1rem"
+    },
+    commentSection: {
+      borderBottom: `1px solid ${theme.palette.background.paper}`,
+      paddingBottom: "1rem",
+      marginBottom: "1rem",
+      marginLeft: 0
+    }
+  };
+});
+const ArticleContent = (props) => {
+  const { post, views } = props;
+  const styles = useStyles();
+  const { t } = useTranslation();
+  const { name, initials, user } = useEntityAuthor(post);
+  const [postEntity, setPostEntity] = React.useState(post);
+  const onCommentAction = (q, _) => {
+    setPostEntity(q);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h2" }, postEntity.title), /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    Avatar,
+    {
+      src: user?.spec?.profile?.picture,
+      className: "qetaAvatar avatar",
+      alt: name,
+      variant: "rounded"
+    },
+    initials
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, name), /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, t("common.views", { count: views }), " ", " \xB7 ", t("authorBox.postedAtTime"), " ", /* @__PURE__ */ React.createElement(RelativeTimeWithTooltip, { value: postEntity.created })))), /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(ArticleButtons, { post: postEntity }))), postEntity.headerImage && /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: post.headerImage,
+      alt: post.title,
+      className: styles.headerImage
+    }
+  ), /* @__PURE__ */ React.createElement(
+    MarkdownRenderer,
+    {
+      content: postEntity.content,
+      className: styles.content
+    }
+  ), /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, t("common.comments")), /* @__PURE__ */ React.createElement(
+    CommentSection,
+    {
+      className: styles.commentSection,
+      post: postEntity,
+      onCommentDelete: onCommentAction,
+      onCommentPost: onCommentAction
+    }
+  ), /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(TagsAndEntities, { entity: postEntity }))));
+};
+
+export { ArticleContent, useStyles };
+//# sourceMappingURL=ArticleContent.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleContent.esm.js","sources":["../../../src/components/ArticleContent/ArticleContent.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Avatar, Grid, makeStyles, Typography } from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport React from 'react';\nimport { useEntityAuthor, useTranslation } from '../../utils/hooks';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { ArticleButtons } from './ArticleButtons';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { CommentSection } from '../CommentSection/CommentSection';\n\nexport const useStyles = makeStyles(theme => {\n  return {\n    content: {\n      fontSize: '1.1rem',\n      lineHeight: '1.5rem',\n      paddingTop: '1rem',\n      paddingBottom: '1rem',\n      marginBottom: '1rem',\n      borderBottom: `1px solid ${theme.palette.background.paper}`,\n    },\n    headerImage: {\n      objectFit: 'cover',\n      width: '100%',\n      height: '200px',\n      marginBottom: '1rem',\n      marginTop: '1rem',\n    },\n    commentSection: {\n      borderBottom: `1px solid ${theme.palette.background.paper}`,\n      paddingBottom: '1rem',\n      marginBottom: '1rem',\n      marginLeft: 0,\n    },\n  };\n});\n\nexport const ArticleContent = (props: {\n  post: PostResponse;\n  views: number;\n}) => {\n  const { post, views } = props;\n  const styles = useStyles();\n  const { t } = useTranslation();\n  const { name, initials, user } = useEntityAuthor(post);\n  const [postEntity, setPostEntity] = React.useState(post);\n  const onCommentAction = (q: PostResponse, _?: AnswerResponse) => {\n    setPostEntity(q);\n  };\n\n  return (\n    <>\n      <Typography variant=\"h2\">{postEntity.title}</Typography>\n      <Grid container alignItems=\"center\">\n        <Grid item>\n          <Avatar\n            src={user?.spec?.profile?.picture}\n            className=\"qetaAvatar avatar\"\n            alt={name}\n            variant=\"rounded\"\n          >\n            {initials}\n          </Avatar>\n        </Grid>\n        <Grid item>\n          <Typography variant=\"subtitle1\">{name}</Typography>\n          <Typography variant=\"caption\">\n            {t('common.views', { count: views })} {' · '}\n            {t('authorBox.postedAtTime')}{' '}\n            <RelativeTimeWithTooltip value={postEntity.created} />\n          </Typography>\n        </Grid>\n      </Grid>\n      <Grid container>\n        <Grid item xs={12}>\n          <ArticleButtons post={postEntity} />\n        </Grid>\n      </Grid>\n      {postEntity.headerImage && (\n        <img\n          src={post.headerImage}\n          alt={post.title}\n          className={styles.headerImage}\n        />\n      )}\n      <MarkdownRenderer\n        content={postEntity.content}\n        className={styles.content}\n      />\n      <Typography variant=\"h6\">{t('common.comments')}</Typography>\n      <CommentSection\n        className={styles.commentSection}\n        post={postEntity}\n        onCommentDelete={onCommentAction}\n        onCommentPost={onCommentAction}\n      />\n      <Grid container>\n        <Grid item xs={12}>\n          <TagsAndEntities entity={postEntity} />\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/AuthorBox/AuthorBox.esm.js

@@ -0,0 +1,25 @@
+import { Box, Grid, Typography, Avatar } from '@material-ui/core';
+import React from 'react';
+import { useStyles, useTranslation, useEntityAuthor } from '../../utils/hooks.esm.js';
+import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
+import { UpdatedByLink, AuthorLink } from '../Links/Links.esm.js';
+
+const AuthorBox = (props) => {
+  const { entity } = props;
+  const styles = useStyles();
+  const { t } = useTranslation();
+  const { name, initials, user } = useEntityAuthor(entity);
+  return /* @__PURE__ */ React.createElement(Box, { className: `qetaAuthorBox ${styles.questionCardAuthor}` }, /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0 } }, /* @__PURE__ */ React.createElement(Typography, { className: "qetaAuthorBoxCreated", variant: "caption" }, t("authorBox.postedAtTime"), " ", /* @__PURE__ */ React.createElement(RelativeTimeWithTooltip, { value: entity.created }))), entity.updated && entity.updatedBy && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0, paddingTop: 0 } }, /* @__PURE__ */ React.createElement(Typography, { className: "qetaAuthorBoxUpdated", variant: "caption" }, t("authorBox.updatedAtTime"), " ", /* @__PURE__ */ React.createElement(RelativeTimeWithTooltip, { value: entity.updated }), " ", t("authorBox.updatedBy"), " ", /* @__PURE__ */ React.createElement(UpdatedByLink, { entity }))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(
+    Avatar,
+    {
+      src: user?.spec?.profile?.picture,
+      className: "qetaAuthorBoxAvatar avatar",
+      alt: name,
+      variant: "rounded"
+    },
+    initials
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 10, className: styles.authorLink }, /* @__PURE__ */ React.createElement(Box, { style: { paddingLeft: "5px" } }, /* @__PURE__ */ React.createElement(AuthorLink, { entity })))));
+};
+
+export { AuthorBox };
+//# sourceMappingURL=AuthorBox.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthorBox.esm.js","sources":["../../../src/components/AuthorBox/AuthorBox.tsx"],"sourcesContent":["import { Avatar, Box, Grid, Typography } from '@material-ui/core';\nimport React from 'react';\nimport { useEntityAuthor, useStyles, useTranslation } from '../../utils/hooks';\nimport {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { AuthorLink, UpdatedByLink } from '../Links';\n\nexport const AuthorBox = (props: { entity: PostResponse | AnswerResponse }) => {\n  const { entity } = props;\n  const styles = useStyles();\n  const { t } = useTranslation();\n  const { name, initials, user } = useEntityAuthor(entity);\n\n  return (\n    <Box className={`qetaAuthorBox ${styles.questionCardAuthor}`}>\n      <Grid container alignItems=\"center\">\n        <Grid item xs={12} style={{ paddingBottom: 0 }}>\n          <Typography className=\"qetaAuthorBoxCreated\" variant=\"caption\">\n            {t('authorBox.postedAtTime')}{' '}\n            <RelativeTimeWithTooltip value={entity.created} />\n          </Typography>\n        </Grid>\n        {entity.updated && entity.updatedBy && (\n          <Grid item xs={12} style={{ paddingBottom: 0, paddingTop: 0 }}>\n            <Typography className=\"qetaAuthorBoxUpdated\" variant=\"caption\">\n              {t('authorBox.updatedAtTime')}{' '}\n              <RelativeTimeWithTooltip value={entity.updated} />{' '}\n              {t('authorBox.updatedBy')} <UpdatedByLink entity={entity} />\n            </Typography>\n          </Grid>\n        )}\n        <Grid item xs={2}>\n          <Avatar\n            src={user?.spec?.profile?.picture}\n            className=\"qetaAuthorBoxAvatar avatar\"\n            alt={name}\n            variant=\"rounded\"\n          >\n            {initials}\n          </Avatar>\n        </Grid>\n        <Grid item xs={10} className={styles.authorLink}>\n          <Box style={{ paddingLeft: '5px' }}>\n            <AuthorLink entity={entity} />\n          </Box>\n        </Grid>\n      </Grid>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAUa,MAAA,SAAA,GAAY,CAAC,KAAqD,KAAA;AAC7E,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA,CAAA;AACnB,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAA,MAAM,EAAE,IAAM,EAAA,QAAA,EAAU,IAAK,EAAA,GAAI,gBAAgB,MAAM,CAAA,CAAA;AAEvD,EAAA,2CACG,GAAI,EAAA,EAAA,SAAA,EAAW,iBAAiB,MAAO,CAAA,kBAAkB,sBACvD,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IAAC,EAAA,UAAA,EAAW,4BACxB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,IAAI,KAAO,EAAA,EAAE,eAAe,CAAE,EAAA,EAAA,sCAC1C,UAAW,EAAA,EAAA,SAAA,EAAU,wBAAuB,OAAQ,EAAA,SAAA,EAAA,EAClD,EAAE,wBAAwB,CAAA,EAAG,qBAC7B,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,EAAwB,OAAO,MAAO,CAAA,OAAA,EAAS,CAClD,CACF,CAAA,EACC,OAAO,OAAW,IAAA,MAAA,CAAO,6BACvB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,IAAI,KAAO,EAAA,EAAE,eAAe,CAAG,EAAA,UAAA,EAAY,GACxD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,SAAU,EAAA,sBAAA,EAAuB,SAAQ,SAClD,EAAA,EAAA,CAAA,CAAE,yBAAyB,CAAG,EAAA,GAAA,sCAC9B,uBAAwB,EAAA,EAAA,KAAA,EAAO,OAAO,OAAS,EAAA,CAAA,EAAG,KAClD,CAAE,CAAA,qBAAqB,GAAE,GAAC,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAc,MAAgB,EAAA,CAC5D,CACF,CAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,IAAM,EAAA,IAAA,EAAM,OAAS,EAAA,OAAA;AAAA,MAC1B,SAAU,EAAA,4BAAA;AAAA,MACV,GAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA,SAAA;AAAA,KAAA;AAAA,IAEP,QAAA;AAAA,GAEL,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,UACnC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,KAAO,EAAA,EAAE,WAAa,EAAA,KAAA,EACzB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,MAAgB,EAAA,CAC9B,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/Buttons/AddToCollectionButton.esm.js

@@ -0,0 +1,68 @@
+import { useTranslation, useStyles, useQetaApi } from '../../utils/hooks.esm.js';
+import React from 'react';
+import { Button, Dialog, DialogTitle, DialogContent, Grid, DialogActions } from '@material-ui/core';
+import AddCircle from '@material-ui/icons/AddCircle';
+import RemoveCircle from '@material-ui/icons/RemoveCircle';
+import PlayListAddIcon from '@material-ui/icons/PlaylistAdd';
+import { useApi } from '@backstage/core-plugin-api';
+import { qetaApiRef } from '../../api.esm.js';
+
+const AddToCollectionButton = (props) => {
+  const { post } = props;
+  const { t } = useTranslation();
+  const styles = useStyles();
+  const { value: response, retry } = useQetaApi((api) => {
+    return api.getCollections();
+  }, []);
+  const [open, setOpen] = React.useState(false);
+  const qetaApi = useApi(qetaApiRef);
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleClick = (collection) => {
+    if (collection.posts?.find((p) => p.id === post.id)) {
+      qetaApi.removePostFromCollection(collection.id, post.id).then(() => {
+        retry();
+      });
+    } else {
+      qetaApi.addPostToCollection(collection.id, post.id).then(() => {
+        retry();
+      });
+    }
+  };
+  const collections = (response?.collections ?? []).filter((c) => c.canEdit);
+  if (!collections.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      size: "small",
+      onClick: handleClickOpen,
+      className: `${styles.marginLeft} qetaAddToCollectionBtn`,
+      startIcon: /* @__PURE__ */ React.createElement(PlayListAddIcon, null)
+    },
+    t("addToCollectionButton.title")
+  ), /* @__PURE__ */ React.createElement(Dialog, { open, onClose: handleClose, fullWidth: true }, /* @__PURE__ */ React.createElement(DialogTitle, null, t("addToCollectionButton.manage")), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Grid, { container: true }, collections.map((collection) => {
+    const isInCollection = collection.posts?.find(
+      (p) => p.id === post.id
+    );
+    return /* @__PURE__ */ React.createElement(Grid, { item: true, key: collection.id }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "outlined",
+        startIcon: isInCollection ? /* @__PURE__ */ React.createElement(RemoveCircle, null) : /* @__PURE__ */ React.createElement(AddCircle, null),
+        color: isInCollection ? "secondary" : "primary",
+        onClick: () => handleClick(collection)
+      },
+      collection.title
+    ));
+  }))), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: handleClose, color: "primary" }, t("addToCollectionButton.close")))));
+};
+
+export { AddToCollectionButton };
+//# sourceMappingURL=AddToCollectionButton.esm.js.map

package/dist/components/Buttons/AddToCollectionButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddToCollectionButton.esm.js","sources":["../../../src/components/Buttons/AddToCollectionButton.tsx"],"sourcesContent":["import { Collection, PostResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useQetaApi, useStyles, useTranslation } from '../../utils';\nimport React from 'react';\nimport {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Grid,\n} from '@material-ui/core';\nimport AddCircle from '@material-ui/icons/AddCircle';\nimport RemoveCircle from '@material-ui/icons/RemoveCircle';\nimport PlayListAddIcon from '@material-ui/icons/PlaylistAdd';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api';\n\nexport const AddToCollectionButton = (props: { post: PostResponse }) => {\n  const { post } = props;\n  const { t } = useTranslation();\n  const styles = useStyles();\n  const { value: response, retry } = useQetaApi(api => {\n    return api.getCollections();\n  }, []);\n  const [open, setOpen] = React.useState(false);\n  const qetaApi = useApi(qetaApiRef);\n\n  const handleClickOpen = () => {\n    setOpen(true);\n  };\n\n  const handleClose = () => {\n    setOpen(false);\n  };\n\n  const handleClick = (collection: Collection) => {\n    if (collection.posts?.find(p => p.id === post.id)) {\n      qetaApi.removePostFromCollection(collection.id, post.id).then(() => {\n        retry();\n      });\n    } else {\n      qetaApi.addPostToCollection(collection.id, post.id).then(() => {\n        retry();\n      });\n    }\n  };\n\n  const collections = (response?.collections ?? []).filter(c => c.canEdit);\n  if (!collections.length) {\n    return null;\n  }\n\n  return (\n    <div>\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        onClick={handleClickOpen}\n        className={`${styles.marginLeft} qetaAddToCollectionBtn`}\n        startIcon={<PlayListAddIcon />}\n      >\n        {t('addToCollectionButton.title')}\n      </Button>\n      <Dialog open={open} onClose={handleClose} fullWidth>\n        <DialogTitle>{t('addToCollectionButton.manage')}</DialogTitle>\n        <DialogContent>\n          <Grid container>\n            {collections.map(collection => {\n              const isInCollection = collection.posts?.find(\n                p => p.id === post.id,\n              );\n\n              return (\n                <Grid item key={collection.id}>\n                  <Button\n                    variant=\"outlined\"\n                    startIcon={\n                      isInCollection ? <RemoveCircle /> : <AddCircle />\n                    }\n                    color={isInCollection ? 'secondary' : 'primary'}\n                    onClick={() => handleClick(collection)}\n                  >\n                    {collection.title}\n                  </Button>\n                </Grid>\n              );\n            })}\n          </Grid>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={handleClose} color=\"primary\">\n            {t('addToCollectionButton.close')}\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Buttons/AskQuestionButton.esm.js

@@ -0,0 +1,40 @@
+import HelpOutline from '@material-ui/icons/HelpOutline';
+import React from 'react';
+import { RequirePermission } from '@backstage/plugin-permission-react';
+import { qetaCreatePostPermission } from '@drodil/backstage-plugin-qeta-common';
+import { LinkButton } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { askRouteRef } from '../../routes.esm.js';
+import { useTranslation, useStyles } from '../../utils/hooks.esm.js';
+
+const AskQuestionButton = (props) => {
+  const { entity, entityPage, tags } = props;
+  const askRoute = useRouteRef(askRouteRef);
+  const { t } = useTranslation();
+  const styles = useStyles();
+  const params = new URLSearchParams();
+  if (entity) {
+    params.set("entity", entity);
+  }
+  if (entityPage) {
+    params.set("entityPage", "true");
+  }
+  if (tags && tags.length > 0) {
+    params.set("tags", tags.join(","));
+  }
+  return /* @__PURE__ */ React.createElement(RequirePermission, { permission: qetaCreatePostPermission, errorPage: /* @__PURE__ */ React.createElement(React.Fragment, null) }, /* @__PURE__ */ React.createElement(
+    LinkButton,
+    {
+      variant: "contained",
+      size: "small",
+      to: entity || tags ? `${askRoute()}?${params.toString()}` : askRoute(),
+      color: "primary",
+      className: `${styles.marginLeft} qetaAskQuestionBtn`,
+      startIcon: /* @__PURE__ */ React.createElement(HelpOutline, null)
+    },
+    t("askQuestionButton.title")
+  ));
+};
+
+export { AskQuestionButton };
+//# sourceMappingURL=AskQuestionButton.esm.js.map

package/dist/components/Buttons/AskQuestionButton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AskQuestionButton.esm.js","sources":["../../../src/components/Buttons/AskQuestionButton.tsx"],"sourcesContent":["import HelpOutline from '@material-ui/icons/HelpOutline';\nimport React from 'react';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\nimport { qetaCreatePostPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { LinkButton } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { askRouteRef } from '../../routes';\nimport { useStyles, useTranslation } from '../../utils/hooks';\n\nexport const AskQuestionButton = (props: {\n  entity?: string;\n  tags?: string[];\n  entityPage?: boolean;\n}) => {\n  const { entity, entityPage, tags } = props;\n  const askRoute = useRouteRef(askRouteRef);\n  const { t } = useTranslation();\n  const styles = useStyles();\n\n  const params = new URLSearchParams();\n  if (entity) {\n    params.set('entity', entity);\n  }\n  if (entityPage) {\n    params.set('entityPage', 'true');\n  }\n  if (tags && tags.length > 0) {\n    params.set('tags', tags.join(','));\n  }\n\n  return (\n    <RequirePermission permission={qetaCreatePostPermission} errorPage={<></>}>\n      <LinkButton\n        variant=\"contained\"\n        size=\"small\"\n        to={entity || tags ? `${askRoute()}?${params.toString()}` : askRoute()}\n        color=\"primary\"\n        className={`${styles.marginLeft} qetaAskQuestionBtn`}\n        startIcon={<HelpOutline />}\n      >\n        {t('askQuestionButton.title')}\n      </LinkButton>\n    </RequirePermission>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,iBAAA,GAAoB,CAAC,KAI5B,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,UAAY,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACrC,EAAM,MAAA,QAAA,GAAW,YAAY,WAAW,CAAA,CAAA;AACxC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AAEzB,EAAM,MAAA,MAAA,GAAS,IAAI,eAAgB,EAAA,CAAA;AACnC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,MAAA,CAAA,GAAA,CAAI,UAAU,MAAM,CAAA,CAAA;AAAA,GAC7B;AACA,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,MAAA,CAAA,GAAA,CAAI,cAAc,MAAM,CAAA,CAAA;AAAA,GACjC;AACA,EAAI,IAAA,IAAA,IAAQ,IAAK,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3B,IAAA,MAAA,CAAO,GAAI,CAAA,MAAA,EAAQ,IAAK,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,GACnC;AAEA,EAAA,2CACG,iBAAkB,EAAA,EAAA,UAAA,EAAY,wBAA0B,EAAA,SAAA,0DAAa,CACpE,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACR,IAAK,EAAA,OAAA;AAAA,MACL,EAAA,EAAI,MAAU,IAAA,IAAA,GAAO,CAAG,EAAA,QAAA,EAAU,CAAA,CAAA,EAAI,MAAO,CAAA,QAAA,EAAU,CAAA,CAAA,GAAK,QAAS,EAAA;AAAA,MACrE,KAAM,EAAA,SAAA;AAAA,MACN,SAAA,EAAW,CAAG,EAAA,MAAA,CAAO,UAAU,CAAA,mBAAA,CAAA;AAAA,MAC/B,SAAA,sCAAY,WAAY,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,IAEvB,EAAE,yBAAyB,CAAA;AAAA,GAEhC,CAAA,CAAA;AAEJ;;;;"}