@drodil/backstage-plugin-qeta-react 3.12.4 → 3.13.0

package/dist/api.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"api.esm.js","sources":["../src/api.ts"],"sourcesContent":["import { createApiRef } from '@backstage/core-plugin-api';\nimport { QetaApi } from '@drodil/backstage-plugin-qeta-common';\n\nexport const qetaApiRef = createApiRef<QetaApi>({\n  id: 'plugin.qeta.service',\n});\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa,YAAsB,CAAA;AAAA,EAC9C,EAAI,EAAA,qBAAA;AACN,CAAC;;;;"}
+{"version":3,"file":"api.esm.js","sources":["../src/api.ts"],"sourcesContent":["import { createApiRef } from '@backstage/core-plugin-api';\nimport { QetaApi } from '@drodil/backstage-plugin-qeta-common';\n\nexport const qetaApiRef = createApiRef<QetaApi>({\n  id: 'plugin.qeta.service',\n});\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa,YAAsB,CAAA;AAAA,EAC9C,EAAI,EAAA;AACN,CAAC;;;;"}

package/dist/components/AIAnswerCard/AIAnswerCard.esm.js

@@ -1,11 +1,4 @@
 import React__default, { useCallback } from 'react';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardHeader from '@mui/material/CardHeader';
-import Collapse from '@mui/material/Collapse';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
 import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer.esm.js';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import '../../api.esm.js';
@@ -13,14 +6,22 @@ import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import 'react-use/lib/useAsync';
 import { useAI } from '../../hooks/useAI.esm.js';
-import FlareIcon from '@mui/icons-material/Flare';
+import FlareIcon from '@material-ui/icons/Flare';
 import useDebounce from 'react-use/lib/useDebounce';
-import Skeleton from '@mui/material/Skeleton';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import { makeStyles, Card, CardHeader, Typography, Tooltip, IconButton, Collapse, CardContent } from '@material-ui/core';
+import { Skeleton } from '@material-ui/lab';
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    marginTop: "1em",
+    backgroundColor: theme.palette.background.default,
+    border: `3px solid ${theme.palette.status.ok}`
+  }
+}));
 const EXPANDED_LOCAL_STORAGE_KEY = "qeta-ai-expanded";
 const AIAnswerCard = (props) => {
   const { question, draft, article, style, debounceMs = 3e3 } = props;
@@ -33,6 +34,7 @@ const AIAnswerCard = (props) => {
   const { t } = useTranslation();
   const config = useApi(configApiRef);
   const botName = config.getOptionalString("qeta.aiBotName") ?? "AI";
+  const styles = useStyles();
   const {
     isAIEnabled,
     isNewQuestionsEnabled,
@@ -99,58 +101,44 @@ const AIAnswerCard = (props) => {
   if (!isEnabled() || answer === null) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement(
-    Card,
+  return /* @__PURE__ */ React__default.createElement(Card, { style, className: styles.root }, /* @__PURE__ */ React__default.createElement(
+    CardHeader,
     {
-      sx: (theme) => ({
-        marginTop: theme.spacing(3),
-        backgroundColor: theme.palette.background.default,
-        border: `3px solid ${theme.palette.status.ok}`
-      }),
-      style
-    },
-    /* @__PURE__ */ React__default.createElement(
-      CardHeader,
-      {
-        avatar: /* @__PURE__ */ React__default.createElement(FlareIcon, null),
-        style: !expanded ? { paddingBottom: "1rem" } : {},
-        title: /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, article ? t("aiAnswerCard.summary", { name: botName }) : t("aiAnswerCard.answer", { name: botName })),
-        action: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, canEdit && isEnabled() && /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("aiAnswerCard.regenerate") }, /* @__PURE__ */ React__default.createElement(
+      avatar: /* @__PURE__ */ React__default.createElement(FlareIcon, null),
+      style: !expanded ? { paddingBottom: "1em" } : {},
+      title: /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, article ? t("aiAnswerCard.summary", { name: botName }) : t("aiAnswerCard.answer", { name: botName })),
+      action: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, canEdit && isEnabled() && /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("aiAnswerCard.regenerate") }, /* @__PURE__ */ React__default.createElement(
+        IconButton,
+        {
+          onClick: () => {
+            setAnswer(void 0);
+            fetchAnswer({ regenerate: true });
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(RefreshIcon, null)
+      )), /* @__PURE__ */ React__default.createElement(
+        Tooltip,
+        {
+          title: expanded ? t("aiAnswerCard.hide") : t("aiAnswerCard.show")
+        },
+        /* @__PURE__ */ React__default.createElement(
           IconButton,
           {
             onClick: () => {
-              setAnswer(void 0);
-              fetchAnswer({ regenerate: true });
+              setExpanded(!expanded);
+              localStorage.setItem(
+                EXPANDED_LOCAL_STORAGE_KEY,
+                expanded ? "false" : "true"
+              );
             },
-            size: "large"
-          },
-          /* @__PURE__ */ React__default.createElement(RefreshIcon, null)
-        )), /* @__PURE__ */ React__default.createElement(
-          Tooltip,
-          {
-            title: expanded ? t("aiAnswerCard.hide") : t("aiAnswerCard.show")
+            "aria-expanded": expanded
           },
-          /* @__PURE__ */ React__default.createElement(
-            IconButton,
-            {
-              onClick: () => {
-                setExpanded(!expanded);
-                localStorage.setItem(
-                  EXPANDED_LOCAL_STORAGE_KEY,
-                  expanded ? "false" : "true"
-                );
-              },
-              "aria-expanded": expanded,
-              size: "large"
-            },
-            expanded ? /* @__PURE__ */ React__default.createElement(KeyboardArrowUpIcon, null) : /* @__PURE__ */ React__default.createElement(KeyboardArrowDownIcon, null)
-          )
-        )),
-        subheader: answer ? /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: answer.created ?? /* @__PURE__ */ new Date() }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, t("aiAnswerCard.loading"))
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(Collapse, { in: expanded, timeout: 0, unmountOnExit: true, mountOnEnter: true }, /* @__PURE__ */ React__default.createElement(CardContent, null, answer === void 0 && /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rectangular", height: 200, animation: "wave" }), answer && /* @__PURE__ */ React__default.createElement(MarkdownRenderer, { content: answer.answer })))
-  );
+          expanded ? /* @__PURE__ */ React__default.createElement(KeyboardArrowUpIcon, null) : /* @__PURE__ */ React__default.createElement(KeyboardArrowDownIcon, null)
+        )
+      )),
+      subheader: answer ? /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: answer.created ?? /* @__PURE__ */ new Date() }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, t("aiAnswerCard.loading"))
+    }
+  ), /* @__PURE__ */ React__default.createElement(Collapse, { in: expanded, timeout: 0, unmountOnExit: true, mountOnEnter: true }, /* @__PURE__ */ React__default.createElement(CardContent, null, answer === void 0 && /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rect", height: 200, animation: "wave" }), answer && /* @__PURE__ */ React__default.createElement(MarkdownRenderer, { content: answer.answer }))));
 };
 
 export { AIAnswerCard };

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

@@ -1 +1 @@
-{"version":3,"file":"AIAnswerCard.esm.js","sources":["../../../src/components/AIAnswerCard/AIAnswerCard.tsx"],"sourcesContent":["import {\n  AIQuery,\n  AIResponse,\n  Article,\n  Post,\n} from '@drodil/backstage-plugin-qeta-common';\nimport React, { useCallback } from 'react';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport CardHeader from '@mui/material/CardHeader';\nimport Collapse from '@mui/material/Collapse';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useAI, useTranslation } from '../../hooks';\nimport FlareIcon from '@mui/icons-material/Flare';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport Skeleton from '@mui/material/Skeleton';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport RefreshIcon from '@mui/icons-material/Refresh';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';\n\nexport type AIAnswerCardProps = {\n  question?: Post;\n  draft?: {\n    title: string;\n    content: string;\n  };\n  article?: Article;\n  debounceMs?: number;\n  style?: React.CSSProperties;\n};\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-ai-expanded';\n\nexport const AIAnswerCard = (props: AIAnswerCardProps) => {\n  const { question, draft, article, style, debounceMs = 3000 } = props;\n  const [answer, setAnswer] = React.useState<AIResponse | null | undefined>(\n    undefined,\n  );\n  const [expanded, setExpanded] = React.useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const { t } = useTranslation();\n  const config = useApi(configApiRef);\n  const botName = config.getOptionalString('qeta.aiBotName') ?? 'AI';\n\n  const {\n    isAIEnabled,\n    isNewQuestionsEnabled,\n    isExistingQuestionsEnabled,\n    isArticleSummaryEnabled,\n    answerExistingQuestion,\n    answerDraftQuestion,\n    summarizeArticle,\n  } = useAI();\n\n  const fetchAnswer = useCallback(\n    (options?: AIQuery) => {\n      if (!isAIEnabled) {\n        return;\n      }\n\n      if (question) {\n        answerExistingQuestion(question.id, options).then(res => {\n          setAnswer(res);\n        });\n      } else if (article) {\n        summarizeArticle(article.id, options).then(res => {\n          setAnswer(res);\n        });\n      } else if (\n        draft &&\n        draft.title &&\n        draft.content &&\n        draft.title.length + draft.content.length > 30\n      ) {\n        answerDraftQuestion(draft).then(res => {\n          setAnswer(res);\n        });\n      } else {\n        setAnswer(null);\n      }\n    },\n    [\n      isAIEnabled,\n      question,\n      article,\n      draft,\n      answerExistingQuestion,\n      summarizeArticle,\n      answerDraftQuestion,\n    ],\n  );\n\n  useDebounce(\n    () => {\n      fetchAnswer();\n    },\n    debounceMs,\n    [answerExistingQuestion, answerDraftQuestion, isAIEnabled, question, draft],\n  );\n\n  const isEnabled = (): boolean => {\n    if (!isAIEnabled) {\n      return false;\n    }\n    if (question) {\n      return Boolean(isExistingQuestionsEnabled);\n    }\n    if (article) {\n      return Boolean(isArticleSummaryEnabled);\n    }\n    if (draft) {\n      return Boolean(isNewQuestionsEnabled);\n    }\n    return false;\n  };\n  const canEdit = question?.canEdit || article?.canEdit || false;\n\n  if (!isEnabled() || answer === null) {\n    return null;\n  }\n\n  return (\n    <Card\n      sx={theme => ({\n        marginTop: theme.spacing(3),\n        backgroundColor: theme.palette.background.default,\n        border: `3px solid ${theme.palette.status.ok}`,\n      })}\n      style={style}\n    >\n      <CardHeader\n        avatar={<FlareIcon />}\n        style={!expanded ? { paddingBottom: '1rem' } : {}}\n        title={\n          <Typography variant=\"h5\">\n            {article\n              ? t('aiAnswerCard.summary', { name: botName })\n              : t('aiAnswerCard.answer', { name: botName })}\n          </Typography>\n        }\n        action={\n          <>\n            {canEdit && isEnabled() && (\n              <Tooltip title={t('aiAnswerCard.regenerate')}>\n                <IconButton\n                  onClick={() => {\n                    setAnswer(undefined);\n                    fetchAnswer({ regenerate: true });\n                  }}\n                  size=\"large\"\n                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            <Tooltip\n              title={expanded ? t('aiAnswerCard.hide') : t('aiAnswerCard.show')}\n            >\n              <IconButton\n                onClick={() => {\n                  setExpanded(!expanded);\n                  localStorage.setItem(\n                    EXPANDED_LOCAL_STORAGE_KEY,\n                    expanded ? 'false' : 'true',\n                  );\n                }}\n                aria-expanded={expanded}\n                size=\"large\"\n              >\n                {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}\n              </IconButton>\n            </Tooltip>\n          </>\n        }\n        subheader={\n          answer ? (\n            <RelativeTimeWithTooltip value={answer.created ?? new Date()} />\n          ) : (\n            <>{t('aiAnswerCard.loading')}</>\n          )\n        }\n      />\n      <Collapse in={expanded} timeout={0} unmountOnExit mountOnEnter>\n        <CardContent>\n          {answer === undefined && (\n            <Skeleton variant=\"rectangular\" height={200} animation=\"wave\" />\n          )}\n          {answer && <MarkdownRenderer content={answer.answer} />}\n        </CardContent>\n      </Collapse>\n    </Card>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"AIAnswerCard.esm.js","sources":["../../../src/components/AIAnswerCard/AIAnswerCard.tsx"],"sourcesContent":["import {\n  AIQuery,\n  AIResponse,\n  Article,\n  Post,\n} from '@drodil/backstage-plugin-qeta-common';\nimport React, { useCallback } from 'react';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useAI, useTranslation } from '../../hooks';\nimport FlareIcon from '@material-ui/icons/Flare';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  Collapse,\n  IconButton,\n  makeStyles,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginTop: '1em',\n    backgroundColor: theme.palette.background.default,\n    border: `3px solid ${theme.palette.status.ok}`,\n  },\n}));\n\nexport type AIAnswerCardProps = {\n  question?: Post;\n  draft?: {\n    title: string;\n    content: string;\n  };\n  article?: Article;\n  debounceMs?: number;\n  style?: React.CSSProperties;\n};\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-ai-expanded';\n\nexport const AIAnswerCard = (props: AIAnswerCardProps) => {\n  const { question, draft, article, style, debounceMs = 3000 } = props;\n  const [answer, setAnswer] = React.useState<AIResponse | null | undefined>(\n    undefined,\n  );\n  const [expanded, setExpanded] = React.useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const { t } = useTranslation();\n  const config = useApi(configApiRef);\n  const botName = config.getOptionalString('qeta.aiBotName') ?? 'AI';\n  const styles = useStyles();\n\n  const {\n    isAIEnabled,\n    isNewQuestionsEnabled,\n    isExistingQuestionsEnabled,\n    isArticleSummaryEnabled,\n    answerExistingQuestion,\n    answerDraftQuestion,\n    summarizeArticle,\n  } = useAI();\n\n  const fetchAnswer = useCallback(\n    (options?: AIQuery) => {\n      if (!isAIEnabled) {\n        return;\n      }\n\n      if (question) {\n        answerExistingQuestion(question.id, options).then(res => {\n          setAnswer(res);\n        });\n      } else if (article) {\n        summarizeArticle(article.id, options).then(res => {\n          setAnswer(res);\n        });\n      } else if (\n        draft &&\n        draft.title &&\n        draft.content &&\n        draft.title.length + draft.content.length > 30\n      ) {\n        answerDraftQuestion(draft).then(res => {\n          setAnswer(res);\n        });\n      } else {\n        setAnswer(null);\n      }\n    },\n    [\n      isAIEnabled,\n      question,\n      article,\n      draft,\n      answerExistingQuestion,\n      summarizeArticle,\n      answerDraftQuestion,\n    ],\n  );\n\n  useDebounce(\n    () => {\n      fetchAnswer();\n    },\n    debounceMs,\n    [answerExistingQuestion, answerDraftQuestion, isAIEnabled, question, draft],\n  );\n\n  const isEnabled = (): boolean => {\n    if (!isAIEnabled) {\n      return false;\n    }\n    if (question) {\n      return Boolean(isExistingQuestionsEnabled);\n    }\n    if (article) {\n      return Boolean(isArticleSummaryEnabled);\n    }\n    if (draft) {\n      return Boolean(isNewQuestionsEnabled);\n    }\n    return false;\n  };\n  const canEdit = question?.canEdit || article?.canEdit || false;\n\n  if (!isEnabled() || answer === null) {\n    return null;\n  }\n\n  return (\n    <Card style={style} className={styles.root}>\n      <CardHeader\n        avatar={<FlareIcon />}\n        style={!expanded ? { paddingBottom: '1em' } : {}}\n        title={\n          <Typography variant=\"h5\">\n            {article\n              ? t('aiAnswerCard.summary', { name: botName })\n              : t('aiAnswerCard.answer', { name: botName })}\n          </Typography>\n        }\n        action={\n          <>\n            {canEdit && isEnabled() && (\n              <Tooltip title={t('aiAnswerCard.regenerate')}>\n                <IconButton\n                  onClick={() => {\n                    setAnswer(undefined);\n                    fetchAnswer({ regenerate: true });\n                  }}\n                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            <Tooltip\n              title={expanded ? t('aiAnswerCard.hide') : t('aiAnswerCard.show')}\n            >\n              <IconButton\n                onClick={() => {\n                  setExpanded(!expanded);\n                  localStorage.setItem(\n                    EXPANDED_LOCAL_STORAGE_KEY,\n                    expanded ? 'false' : 'true',\n                  );\n                }}\n                aria-expanded={expanded}\n              >\n                {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}\n              </IconButton>\n            </Tooltip>\n          </>\n        }\n        subheader={\n          answer ? (\n            <RelativeTimeWithTooltip value={answer.created ?? new Date()} />\n          ) : (\n            <>{t('aiAnswerCard.loading')}</>\n          )\n        }\n      />\n      <Collapse in={expanded} timeout={0} unmountOnExit mountOnEnter>\n        <CardContent>\n          {answer === undefined && (\n            <Skeleton variant=\"rect\" height={200} animation=\"wave\" />\n          )}\n          {answer && <MarkdownRenderer content={answer.answer} />}\n        </CardContent>\n      </Collapse>\n    </Card>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/AnswerCard/AnswerCard.esm.js

@@ -1,16 +1,11 @@
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
 import React__default from 'react';
 import { VoteButtons } from '../Buttons/VoteButtons.esm.js';
 import { AnswerForm } from '../AnswerForm/AnswerForm.esm.js';
 import { AuthorBox } from '../AuthorBox/AuthorBox.esm.js';
 import { CommentSection } from '../CommentSection/CommentSection.esm.js';
 import { LinkButton } from '../Buttons/LinkButton.esm.js';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
 import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer.esm.js';
 import { DeleteModal } from '../DeleteModal/DeleteModal.esm.js';
 import '@backstage/core-plugin-api';
@@ -18,14 +13,43 @@ import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import 'react-use/lib/useAsync';
-import { VoteButtonContainer } from '../Styled/VoteButtonContainer.esm.js';
-import { CardActionContainer } from '../Styled/CardActionContainer.esm.js';
+import { VoteButtonContainer } from '../Utility/VoteButtonContainer.esm.js';
+import { makeStyles, Card, CardContent, Grid, Typography, Button } from '@material-ui/core';
+import '@material-ui/icons/HelpOutline';
+import '@backstage/plugin-permission-react';
+import '@drodil/backstage-plugin-qeta-common';
+import '@backstage/core-components';
+import '../../routes.esm.js';
+import '@material-ui/icons/Visibility';
+import '@material-ui/icons/VisibilityOff';
+import '@material-ui/icons/Create';
+import '@material-ui/icons/PlaylistAdd';
+import '@material-ui/icons/AddCircle';
+import '@material-ui/icons/RemoveCircle';
+import { ButtonContainer } from '../Buttons/ButtonContainer.esm.js';
 
+const useStyles = makeStyles((theme) => ({
+  answerCard: {
+    marginTop: "1em"
+  },
+  highlight: {
+    animation: "highlight 5s"
+  },
+  "@keyframes highlight": {
+    "0%": {
+      boxShadow: `0px 0px 0px 3px ${theme.palette.secondary.light}`
+    },
+    "100%": {
+      boxShadow: "none"
+    }
+  }
+}));
 const AnswerCard = (props) => {
   const { answer, question } = props;
   const [editMode, setEditMode] = React__default.useState(false);
   const [answerEntity, setAnswerEntity] = React__default.useState(answer);
   const { t } = useTranslation();
+  const styles = useStyles();
   const [deleteModalOpen, setDeleteModalOpen] = React__default.useState(false);
   const handleDeleteModalOpen = () => setDeleteModalOpen(true);
   const handleDeleteModalClose = () => setDeleteModalOpen(false);
@@ -43,18 +67,7 @@ const AnswerCard = (props) => {
     Card,
     {
       id: `answer_${answer.id}`,
-      sx: (theme) => ({
-        marginTop: 3,
-        "@keyframes highlight": {
-          "0%": {
-            boxShadow: `0px 0px 0px 3px ${theme.palette.secondary.light}`
-          },
-          "100%": {
-            boxShadow: "none"
-          }
-        },
-        animation: highlightedAnswer ? "highlight 5s" : "none"
-      })
+      className: `qetaAnswerCard ${styles.answerCard} ${highlightedAnswer ? styles.highlight : ""}`
     },
     /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(
       Grid,
@@ -69,8 +82,7 @@ const AnswerCard = (props) => {
         Grid,
         {
           item: true,
-          marginLeft: 1,
-          sx: { display: "inline-block", width: "calc(100% - 70px)" }
+          style: { display: "inline-block", width: "calc(100% - 70px)" }
         },
         editMode ? /* @__PURE__ */ React__default.createElement(
           AnswerForm,
@@ -79,25 +91,23 @@ const AnswerCard = (props) => {
             onPost: onAnswerEdit,
             id: answerEntity.id
           }
-        ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid, { item: true, sx: { minHeight: "3rem", paddingTop: 1 } }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1", gutterBottom: true }, /* @__PURE__ */ React__default.createElement(MarkdownRenderer, { content: answerEntity.content }))), /* @__PURE__ */ React__default.createElement(
+        ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid, { item: true, style: { minHeight: "6em", paddingTop: "0.5em" } }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1", gutterBottom: true }, /* @__PURE__ */ React__default.createElement(MarkdownRenderer, { content: answerEntity.content }))), /* @__PURE__ */ React__default.createElement(
           Grid,
           {
             container: true,
             item: true,
             spacing: 1,
             justifyContent: "space-between",
-            alignItems: "flex-end",
-            sx: { marginTop: 3 }
+            alignItems: "flex-end"
           },
-          /* @__PURE__ */ React__default.createElement(Grid, { item: true, style: { alignSelf: "flex-end" } }, (answerEntity.own || answerEntity.canDelete || answerEntity.canEdit) && /* @__PURE__ */ React__default.createElement(CardActionContainer, null, !answerEntity.correct && (answerEntity.own || answerEntity.canDelete) && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+          /* @__PURE__ */ React__default.createElement(Grid, { item: true, style: { alignSelf: "flex-end" } }, (answerEntity.own || answerEntity.canDelete || answerEntity.canEdit) && /* @__PURE__ */ React__default.createElement(ButtonContainer, null, !answerEntity.correct && (answerEntity.own || answerEntity.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),
-              sx: { marginRight: 1 }
+              startIcon: /* @__PURE__ */ React__default.createElement(DeleteIcon, null)
             },
             t("deleteModal.deleteButton")
           ), /* @__PURE__ */ React__default.createElement(
@@ -119,7 +129,7 @@ const AnswerCard = (props) => {
             },
             t("questionPage.editButton")
           ))),
-          /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3, sx: { padding: 0 } }, /* @__PURE__ */ React__default.createElement(AuthorBox, { entity: answerEntity }))
+          /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React__default.createElement(AuthorBox, { entity: answerEntity }))
         ))
       )
     ))

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

@@ -1 +1 @@
-{"version":3,"file":"AnswerCard.esm.js","sources":["../../../src/components/AnswerCard/AnswerCard.tsx"],"sourcesContent":["import Button from '@mui/material/Button';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport Grid from '@mui/material/Grid';\nimport Typography from '@mui/material/Typography';\nimport React from 'react';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { AnswerForm } from '../AnswerForm';\nimport { AuthorBox } from '../AuthorBox/AuthorBox';\nimport { CommentSection } from '../CommentSection/CommentSection';\nimport { LinkButton } from '../Buttons/LinkButton';\nimport DeleteIcon from '@mui/icons-material/Delete';\nimport EditIcon from '@mui/icons-material/Edit';\nimport {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { DeleteModal } from '../DeleteModal';\nimport { useTranslation } from '../../hooks';\nimport { VoteButtonContainer } from '../Styled/VoteButtonContainer';\nimport { CardActionContainer } from '../Styled/CardActionContainer';\n\nexport const AnswerCard = (props: {\n  answer: AnswerResponse;\n  question: PostResponse;\n}) => {\n  const { answer, question } = props;\n\n  const [editMode, setEditMode] = React.useState(false);\n  const [answerEntity, setAnswerEntity] = React.useState(answer);\n  const { t } = useTranslation();\n\n  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n  const highlightedAnswer =\n    window.location.hash.slice(1) === `answer_${answer.id}`;\n\n  const onAnswerEdit = (a: AnswerResponse) => {\n    setEditMode(false);\n    setAnswerEntity(a);\n  };\n\n  const onCommentAction = (_: PostResponse, a?: AnswerResponse) => {\n    if (a) {\n      setAnswerEntity(a);\n    }\n  };\n\n  return (\n    <>\n      <Card\n        id={`answer_${answer.id}`}\n        sx={theme => ({\n          marginTop: 3,\n          '@keyframes highlight': {\n            '0%': {\n              boxShadow: `0px 0px 0px 3px ${theme.palette.secondary.light}`,\n            },\n            '100%': {\n              boxShadow: 'none',\n            },\n          },\n          animation: highlightedAnswer ? 'highlight 5s' : 'none',\n        })}\n      >\n        <CardContent>\n          <Grid\n            container\n            spacing={2}\n            justifyContent=\"flex-start\"\n            style={{ flexWrap: 'nowrap' }}\n          >\n            <Grid item justifyContent=\"center\">\n              <VoteButtonContainer>\n                <VoteButtons entity={answerEntity} post={question} />\n                <LinkButton entity={answerEntity} />\n              </VoteButtonContainer>\n            </Grid>\n            <Grid\n              item\n              marginLeft={1}\n              sx={{ display: 'inline-block', width: 'calc(100% - 70px)' }}\n            >\n              {editMode ? (\n                <AnswerForm\n                  post={question}\n                  onPost={onAnswerEdit}\n                  id={answerEntity.id}\n                />\n              ) : (\n                <>\n                  <Grid item sx={{ minHeight: '3rem', paddingTop: 1 }}>\n                    <Typography variant=\"body1\" gutterBottom>\n                      <MarkdownRenderer content={answerEntity.content} />\n                    </Typography>\n                  </Grid>\n                  <Grid\n                    container\n                    item\n                    spacing={1}\n                    justifyContent=\"space-between\"\n                    alignItems=\"flex-end\"\n                    sx={{ marginTop: 3 }}\n                  >\n                    <Grid item style={{ alignSelf: 'flex-end' }}>\n                      {(answerEntity.own ||\n                        answerEntity.canDelete ||\n                        answerEntity.canEdit) && (\n                        <CardActionContainer>\n                          {!answerEntity.correct &&\n                            (answerEntity.own || answerEntity.canDelete) && (\n                              <>\n                                <Button\n                                  variant=\"outlined\"\n                                  size=\"small\"\n                                  color=\"secondary\"\n                                  onClick={handleDeleteModalOpen}\n                                  startIcon={<DeleteIcon />}\n                                  sx={{ marginRight: 1 }}\n                                >\n                                  {t('deleteModal.deleteButton')}\n                                </Button>\n                                <DeleteModal\n                                  open={deleteModalOpen}\n                                  onClose={handleDeleteModalClose}\n                                  entity={answerEntity}\n                                  question={question}\n                                />\n                              </>\n                            )}\n                          {(answerEntity.own || answerEntity.canEdit) && (\n                            <Button\n                              variant=\"outlined\"\n                              size=\"small\"\n                              startIcon={<EditIcon />}\n                              onClick={() => setEditMode(true)}\n                              className=\"qetaAnswerCardEditBtn\"\n                            >\n                              {t('questionPage.editButton')}\n                            </Button>\n                          )}\n                        </CardActionContainer>\n                      )}\n                    </Grid>\n                    <Grid item xs={3} sx={{ padding: 0 }}>\n                      <AuthorBox entity={answerEntity} />\n                    </Grid>\n                  </Grid>\n                </>\n              )}\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n      <CommentSection\n        post={question}\n        answer={answerEntity}\n        onCommentPost={onCommentAction}\n        onCommentDelete={onCommentAction}\n      />\n    </>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBa,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AAE7B,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAAA,cAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AACpD,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAAA,cAAA,CAAM,SAAS,MAAM,CAAA,CAAA;AAC7D,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAE7B,EAAA,MAAM,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAAA,cAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AAClE,EAAM,MAAA,qBAAA,GAAwB,MAAM,kBAAA,CAAmB,IAAI,CAAA,CAAA;AAC3D,EAAM,MAAA,sBAAA,GAAyB,MAAM,kBAAA,CAAmB,KAAK,CAAA,CAAA;AAC7D,EAAM,MAAA,iBAAA,GACJ,OAAO,QAAS,CAAA,IAAA,CAAK,MAAM,CAAC,CAAA,KAAM,CAAU,OAAA,EAAA,MAAA,CAAO,EAAE,CAAA,CAAA,CAAA;AAEvD,EAAM,MAAA,YAAA,GAAe,CAAC,CAAsB,KAAA;AAC1C,IAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjB,IAAA,eAAA,CAAgB,CAAC,CAAA,CAAA;AAAA,GACnB,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAA,EAAiB,CAAuB,KAAA;AAC/D,IAAA,IAAI,CAAG,EAAA;AACL,MAAA,eAAA,CAAgB,CAAC,CAAA,CAAA;AAAA,KACnB;AAAA,GACF,CAAA;AAEA,EAAA,uBAEIA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,CAAU,OAAA,EAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA,MACvB,IAAI,CAAU,KAAA,MAAA;AAAA,QACZ,SAAW,EAAA,CAAA;AAAA,QACX,sBAAwB,EAAA;AAAA,UACtB,IAAM,EAAA;AAAA,YACJ,SAAW,EAAA,CAAA,gBAAA,EAAmB,KAAM,CAAA,OAAA,CAAQ,UAAU,KAAK,CAAA,CAAA;AAAA,WAC7D;AAAA,UACA,MAAQ,EAAA;AAAA,YACN,SAAW,EAAA,MAAA;AAAA,WACb;AAAA,SACF;AAAA,QACA,SAAA,EAAW,oBAAoB,cAAiB,GAAA,MAAA;AAAA,OAClD,CAAA;AAAA,KAAA;AAAA,iDAEC,WACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAS,EAAA,IAAA;AAAA,QACT,OAAS,EAAA,CAAA;AAAA,QACT,cAAe,EAAA,YAAA;AAAA,QACf,KAAA,EAAO,EAAE,QAAA,EAAU,QAAS,EAAA;AAAA,OAAA;AAAA,sBAE5BA,cAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,gBAAe,QACxB,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,2CACEA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,QAAQ,YAAc,EAAA,IAAA,EAAM,UAAU,CACnD,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAW,MAAQ,EAAA,YAAA,EAAc,CACpC,CACF,CAAA;AAAA,sBACAA,cAAA,CAAA,aAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,IAAI,EAAA,IAAA;AAAA,UACJ,UAAY,EAAA,CAAA;AAAA,UACZ,EAAI,EAAA,EAAE,OAAS,EAAA,cAAA,EAAgB,OAAO,mBAAoB,EAAA;AAAA,SAAA;AAAA,QAEzD,QACC,mBAAAA,cAAA,CAAA,aAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAM,EAAA,QAAA;AAAA,YACN,MAAQ,EAAA,YAAA;AAAA,YACR,IAAI,YAAa,CAAA,EAAA;AAAA,WAAA;AAAA,SACnB,mBAGEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EAAE,SAAA,EAAW,MAAQ,EAAA,UAAA,EAAY,CAAE,EAAA,EAAA,+CAC/C,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,YAAA,EAAY,IACtC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,OAAA,EAAS,YAAa,CAAA,OAAA,EAAS,CACnD,CACF,CACA,kBAAAA,cAAA,CAAA,aAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAS,EAAA,IAAA;AAAA,YACT,IAAI,EAAA,IAAA;AAAA,YACJ,OAAS,EAAA,CAAA;AAAA,YACT,cAAe,EAAA,eAAA;AAAA,YACf,UAAW,EAAA,UAAA;AAAA,YACX,EAAA,EAAI,EAAE,SAAA,EAAW,CAAE,EAAA;AAAA,WAAA;AAAA,0BAEnBA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,KAAA,EAAO,EAAE,SAAW,EAAA,UAAA,EAC3B,EAAA,EAAA,CAAA,YAAA,CAAa,GACb,IAAA,YAAA,CAAa,aACb,YAAa,CAAA,OAAA,qBACZA,cAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EACE,CAAC,YAAA,CAAa,YACZ,YAAa,CAAA,GAAA,IAAO,YAAa,CAAA,SAAA,CAAA,oBAE9BA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAQ,EAAA,UAAA;AAAA,cACR,IAAK,EAAA,OAAA;AAAA,cACL,KAAM,EAAA,WAAA;AAAA,cACN,OAAS,EAAA,qBAAA;AAAA,cACT,SAAA,+CAAY,UAAW,EAAA,IAAA,CAAA;AAAA,cACvB,EAAA,EAAI,EAAE,WAAA,EAAa,CAAE,EAAA;AAAA,aAAA;AAAA,YAEpB,EAAE,0BAA0B,CAAA;AAAA,WAE/B,kBAAAA,cAAA,CAAA,aAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,IAAM,EAAA,eAAA;AAAA,cACN,OAAS,EAAA,sBAAA;AAAA,cACT,MAAQ,EAAA,YAAA;AAAA,cACR,QAAA;AAAA,aAAA;AAAA,WAEJ,CAAA,EAAA,CAEF,YAAa,CAAA,GAAA,IAAO,aAAa,OACjC,qBAAAA,cAAA,CAAA,aAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAQ,EAAA,UAAA;AAAA,cACR,IAAK,EAAA,OAAA;AAAA,cACL,SAAA,+CAAY,QAAS,EAAA,IAAA,CAAA;AAAA,cACrB,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,CAAA;AAAA,cAC/B,SAAU,EAAA,uBAAA;AAAA,aAAA;AAAA,YAET,EAAE,yBAAyB,CAAA;AAAA,WAGlC,CAEJ,CAAA;AAAA,0BACCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CAAG,EAAA,EAAA,EAAI,EAAE,OAAA,EAAS,GAC/B,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,SAAU,EAAA,EAAA,MAAA,EAAQ,cAAc,CACnC,CAAA;AAAA,SAEJ,CAAA;AAAA,OAEJ;AAAA,KAEJ,CAAA;AAAA,GAEF,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,IAAM,EAAA,QAAA;AAAA,MACN,MAAQ,EAAA,YAAA;AAAA,MACR,aAAe,EAAA,eAAA;AAAA,MACf,eAAiB,EAAA,eAAA;AAAA,KAAA;AAAA,GAErB,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AnswerCard.esm.js","sources":["../../../src/components/AnswerCard/AnswerCard.tsx"],"sourcesContent":["import React from 'react';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { AnswerForm } from '../AnswerForm';\nimport { AuthorBox } from '../AuthorBox/AuthorBox';\nimport { CommentSection } from '../CommentSection/CommentSection';\nimport { LinkButton } from '../Buttons/LinkButton';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { DeleteModal } from '../DeleteModal';\nimport { useTranslation } from '../../hooks';\nimport { VoteButtonContainer } from '../Utility/VoteButtonContainer';\nimport {\n  Button,\n  Card,\n  CardContent,\n  Grid,\n  makeStyles,\n  Typography,\n} from '@material-ui/core';\nimport { ButtonContainer } from '../Buttons';\n\nconst useStyles = makeStyles(theme => ({\n  answerCard: {\n    marginTop: '1em',\n  },\n  highlight: {\n    animation: 'highlight 5s',\n  },\n  '@keyframes highlight': {\n    '0%': {\n      boxShadow: `0px 0px 0px 3px ${theme.palette.secondary.light}`,\n    },\n    '100%': {\n      boxShadow: 'none',\n    },\n  },\n}));\n\nexport const AnswerCard = (props: {\n  answer: AnswerResponse;\n  question: PostResponse;\n}) => {\n  const { answer, question } = props;\n\n  const [editMode, setEditMode] = React.useState(false);\n  const [answerEntity, setAnswerEntity] = React.useState(answer);\n  const { t } = useTranslation();\n  const styles = useStyles();\n\n  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n  const highlightedAnswer =\n    window.location.hash.slice(1) === `answer_${answer.id}`;\n\n  const onAnswerEdit = (a: AnswerResponse) => {\n    setEditMode(false);\n    setAnswerEntity(a);\n  };\n\n  const onCommentAction = (_: PostResponse, a?: AnswerResponse) => {\n    if (a) {\n      setAnswerEntity(a);\n    }\n  };\n\n  return (\n    <>\n      <Card\n        id={`answer_${answer.id}`}\n        className={`qetaAnswerCard ${styles.answerCard} ${\n          highlightedAnswer ? styles.highlight : ''\n        }`}\n      >\n        <CardContent>\n          <Grid\n            container\n            spacing={2}\n            justifyContent=\"flex-start\"\n            style={{ flexWrap: 'nowrap' }}\n          >\n            <Grid item justifyContent=\"center\">\n              <VoteButtonContainer>\n                <VoteButtons entity={answerEntity} post={question} />\n                <LinkButton entity={answerEntity} />\n              </VoteButtonContainer>\n            </Grid>\n            <Grid\n              item\n              style={{ display: 'inline-block', width: 'calc(100% - 70px)' }}\n            >\n              {editMode ? (\n                <AnswerForm\n                  post={question}\n                  onPost={onAnswerEdit}\n                  id={answerEntity.id}\n                />\n              ) : (\n                <>\n                  <Grid item style={{ minHeight: '6em', paddingTop: '0.5em' }}>\n                    <Typography variant=\"body1\" gutterBottom>\n                      <MarkdownRenderer content={answerEntity.content} />\n                    </Typography>\n                  </Grid>\n                  <Grid\n                    container\n                    item\n                    spacing={1}\n                    justifyContent=\"space-between\"\n                    alignItems=\"flex-end\"\n                  >\n                    <Grid item style={{ alignSelf: 'flex-end' }}>\n                      {(answerEntity.own ||\n                        answerEntity.canDelete ||\n                        answerEntity.canEdit) && (\n                        <ButtonContainer>\n                          {!answerEntity.correct &&\n                            (answerEntity.own || answerEntity.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={answerEntity}\n                                  question={question}\n                                />\n                              </>\n                            )}\n                          {(answerEntity.own || answerEntity.canEdit) && (\n                            <Button\n                              variant=\"outlined\"\n                              size=\"small\"\n                              startIcon={<EditIcon />}\n                              onClick={() => setEditMode(true)}\n                              className=\"qetaAnswerCardEditBtn\"\n                            >\n                              {t('questionPage.editButton')}\n                            </Button>\n                          )}\n                        </ButtonContainer>\n                      )}\n                    </Grid>\n                    <Grid item xs={3}>\n                      <AuthorBox entity={answerEntity} />\n                    </Grid>\n                  </Grid>\n                </>\n              )}\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n      <CommentSection\n        post={question}\n        answer={answerEntity}\n        onCommentPost={onCommentAction}\n        onCommentDelete={onCommentAction}\n      />\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/AnswerForm/AnswerForm.esm.js

@@ -1,6 +1,4 @@
 import { WarningPanel } from '@backstage/core-components';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
 import React__default, { useEffect, useCallback } from 'react';
 import { useAnalytics, useApi, configApiRef } from '@backstage/core-plugin-api';
 import { qetaCreateAnswerPermission } from '@drodil/backstage-plugin-qeta-common';
@@ -13,6 +11,7 @@ import { qetaApiRef } from '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import 'react-use/lib/useAsync';
+import { Typography, Button } from '@material-ui/core';
 
 const getDefaultValues = (postId) => {
   return { postId, answer: "", images: [] };
@@ -144,16 +143,7 @@ const AnswerForm = (props) => {
           label: t("anonymousCheckbox.answerAnonymously")
         }
       ),
-      /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          variant: "outlined",
-          type: "submit",
-          color: "primary",
-          sx: { marginBottom: 2, marginTop: 2 }
-        },
-        id ? t("answerForm.submit.existingAnswer") : t("answerForm.submit.newAnswer")
-      )
+      /* @__PURE__ */ React__default.createElement(Button, { variant: "outlined", type: "submit", color: "primary" }, id ? t("answerForm.submit.existingAnswer") : t("answerForm.submit.newAnswer"))
     )
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"AnswerForm.esm.js","sources":["../../../src/components/AnswerForm/AnswerForm.tsx"],"sourcesContent":["import { WarningPanel } from '@backstage/core-components';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\nimport React, { useCallback, useEffect } from 'react';\nimport { configApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport {\n  AnswerRequest,\n  AnswerResponse,\n  PostResponse,\n  qetaCreateAnswerPermission,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Controller, useForm } from 'react-hook-form';\nimport { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\nimport { PostAnonymouslyCheckbox } from '../PostAnonymouslyCheckbox/PostAnonymouslyCheckbox';\nimport { confirmNavigationIfEdited } from '../../utils/utils';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../hooks';\n\ntype AnswerFormData = {\n  postId: number;\n  answer: string;\n  images: number[];\n};\n\nconst getDefaultValues = (postId: number): AnswerFormData => {\n  return { postId, answer: '', images: [] };\n};\n\nexport const AnswerForm = (props: {\n  post: PostResponse;\n  onPost: (answer: AnswerResponse) => void;\n  id?: number;\n}) => {\n  const { post, onPost, id } = props;\n  const [values, setValues] = React.useState<AnswerFormData>(\n    getDefaultValues(post.id),\n  );\n  const analytics = useAnalytics();\n  const [error, setError] = React.useState(false);\n  const [images, setImages] = React.useState<number[]>([]);\n  const [edited, setEdited] = React.useState(false);\n  const qetaApi = useApi(qetaApiRef);\n  const configApi = useApi(configApiRef);\n  const allowAnonymouns = configApi.getOptionalBoolean('qeta.allowAnonymous');\n  const { t } = useTranslation();\n\n  const {\n    handleSubmit,\n    control,\n    formState: { errors },\n    reset,\n  } = useForm<AnswerRequest>({\n    values,\n    defaultValues: getDefaultValues(post.id),\n  });\n\n  const postAnswer = (data: AnswerRequest) => {\n    if (id) {\n      qetaApi\n        .updateAnswer(id, {\n          postId: post.id,\n          answer: data.answer,\n          images,\n        })\n        .then(a => {\n          if (!a || !('id' in a)) {\n            setError(true);\n            return;\n          }\n          setEdited(false);\n          analytics.captureEvent('edit', 'answer');\n          reset();\n          onPost(a);\n        })\n        .catch(_e => setError(true));\n      return;\n    }\n    // http://localhost:7007/api/qeta/attachments/36e551b1-3be7-479a-8942-b7018434e710\n    qetaApi\n      .postAnswer({\n        postId: post.id,\n        answer: data.answer,\n        images,\n        anonymous: data.anonymous,\n      })\n      .then(a => {\n        if (!a || !('id' in a)) {\n          setError(true);\n          return;\n        }\n        setEdited(false);\n        analytics.captureEvent('post', 'answer');\n        reset();\n        onPost(a);\n      })\n      .catch(_e => setError(true));\n  };\n\n  useEffect(() => {\n    if (id) {\n      qetaApi.getAnswer(post.id, id).then(a => {\n        if ('content' in a) {\n          setValues({ postId: post.id, answer: a.content, images: a.images });\n          setImages(a.images);\n        } else {\n          setError(true);\n        }\n      });\n    }\n  }, [id, post, qetaApi]);\n\n  useEffect(() => {\n    reset(values);\n  }, [values, reset]);\n\n  useEffect(() => {\n    return confirmNavigationIfEdited(edited);\n  }, [edited]);\n\n  const onImageUpload = useCallback(\n    (imageId: number) => {\n      setImages(prevImages => [...prevImages, imageId]);\n    },\n    [setImages],\n  );\n\n  return (\n    <RequirePermission\n      permission={qetaCreateAnswerPermission}\n      errorPage={<></>}\n    >\n      <form\n        onSubmit={handleSubmit(postAnswer)}\n        onChange={() => {\n          setEdited(true);\n        }}\n      >\n        <Typography variant=\"h6\">Your answer</Typography>\n        {error && (\n          <WarningPanel severity=\"error\" title={t('answerForm.errorPosting')} />\n        )}\n        <Controller\n          control={control}\n          defaultValue=\"\"\n          rules={{\n            required: true,\n          }}\n          render={({ field: { onChange, value } }) => (\n            <MarkdownEditor\n              value={value}\n              onChange={onChange}\n              height={200}\n              error={'answer' in errors}\n              config={configApi}\n              placeholder={t('answerForm.contentInput.placeholder')}\n              onImageUpload={onImageUpload}\n              answerId={id ? Number(id) : undefined}\n            />\n          )}\n          name=\"answer\"\n        />\n        {allowAnonymouns && !id && (\n          <PostAnonymouslyCheckbox\n            control={control}\n            label={t('anonymousCheckbox.answerAnonymously')}\n          />\n        )}\n        <Button\n          variant=\"outlined\"\n          type=\"submit\"\n          color=\"primary\"\n          sx={{ marginBottom: 2, marginTop: 2 }}\n        >\n          {id\n            ? t('answerForm.submit.existingAnswer')\n            : t('answerForm.submit.newAnswer')}\n        </Button>\n      </form>\n    </RequirePermission>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"AnswerForm.esm.js","sources":["../../../src/components/AnswerForm/AnswerForm.tsx"],"sourcesContent":["import { WarningPanel } from '@backstage/core-components';\nimport React, { useCallback, useEffect } from 'react';\nimport { configApiRef, useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport {\n  AnswerRequest,\n  AnswerResponse,\n  PostResponse,\n  qetaCreateAnswerPermission,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Controller, useForm } from 'react-hook-form';\nimport { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\nimport { PostAnonymouslyCheckbox } from '../PostAnonymouslyCheckbox/PostAnonymouslyCheckbox';\nimport { confirmNavigationIfEdited } from '../../utils/utils';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../hooks';\nimport { Button, Typography } from '@material-ui/core';\n\ntype AnswerFormData = {\n  postId: number;\n  answer: string;\n  images: number[];\n};\n\nconst getDefaultValues = (postId: number): AnswerFormData => {\n  return { postId, answer: '', images: [] };\n};\n\nexport const AnswerForm = (props: {\n  post: PostResponse;\n  onPost: (answer: AnswerResponse) => void;\n  id?: number;\n}) => {\n  const { post, onPost, id } = props;\n  const [values, setValues] = React.useState<AnswerFormData>(\n    getDefaultValues(post.id),\n  );\n  const analytics = useAnalytics();\n  const [error, setError] = React.useState(false);\n  const [images, setImages] = React.useState<number[]>([]);\n  const [edited, setEdited] = React.useState(false);\n  const qetaApi = useApi(qetaApiRef);\n  const configApi = useApi(configApiRef);\n  const allowAnonymouns = configApi.getOptionalBoolean('qeta.allowAnonymous');\n  const { t } = useTranslation();\n\n  const {\n    handleSubmit,\n    control,\n    formState: { errors },\n    reset,\n  } = useForm<AnswerRequest>({\n    values,\n    defaultValues: getDefaultValues(post.id),\n  });\n\n  const postAnswer = (data: AnswerRequest) => {\n    if (id) {\n      qetaApi\n        .updateAnswer(id, {\n          postId: post.id,\n          answer: data.answer,\n          images,\n        })\n        .then(a => {\n          if (!a || !('id' in a)) {\n            setError(true);\n            return;\n          }\n          setEdited(false);\n          analytics.captureEvent('edit', 'answer');\n          reset();\n          onPost(a);\n        })\n        .catch(_e => setError(true));\n      return;\n    }\n    // http://localhost:7007/api/qeta/attachments/36e551b1-3be7-479a-8942-b7018434e710\n    qetaApi\n      .postAnswer({\n        postId: post.id,\n        answer: data.answer,\n        images,\n        anonymous: data.anonymous,\n      })\n      .then(a => {\n        if (!a || !('id' in a)) {\n          setError(true);\n          return;\n        }\n        setEdited(false);\n        analytics.captureEvent('post', 'answer');\n        reset();\n        onPost(a);\n      })\n      .catch(_e => setError(true));\n  };\n\n  useEffect(() => {\n    if (id) {\n      qetaApi.getAnswer(post.id, id).then(a => {\n        if ('content' in a) {\n          setValues({ postId: post.id, answer: a.content, images: a.images });\n          setImages(a.images);\n        } else {\n          setError(true);\n        }\n      });\n    }\n  }, [id, post, qetaApi]);\n\n  useEffect(() => {\n    reset(values);\n  }, [values, reset]);\n\n  useEffect(() => {\n    return confirmNavigationIfEdited(edited);\n  }, [edited]);\n\n  const onImageUpload = useCallback(\n    (imageId: number) => {\n      setImages(prevImages => [...prevImages, imageId]);\n    },\n    [setImages],\n  );\n\n  return (\n    <RequirePermission\n      permission={qetaCreateAnswerPermission}\n      errorPage={<></>}\n    >\n      <form\n        onSubmit={handleSubmit(postAnswer)}\n        onChange={() => {\n          setEdited(true);\n        }}\n      >\n        <Typography variant=\"h6\">Your answer</Typography>\n        {error && (\n          <WarningPanel severity=\"error\" title={t('answerForm.errorPosting')} />\n        )}\n        <Controller\n          control={control}\n          defaultValue=\"\"\n          rules={{\n            required: true,\n          }}\n          render={({ field: { onChange, value } }) => (\n            <MarkdownEditor\n              value={value}\n              onChange={onChange}\n              height={200}\n              error={'answer' in errors}\n              config={configApi}\n              placeholder={t('answerForm.contentInput.placeholder')}\n              onImageUpload={onImageUpload}\n              answerId={id ? Number(id) : undefined}\n            />\n          )}\n          name=\"answer\"\n        />\n        {allowAnonymouns && !id && (\n          <PostAnonymouslyCheckbox\n            control={control}\n            label={t('anonymousCheckbox.answerAnonymously')}\n          />\n        )}\n        <Button variant=\"outlined\" type=\"submit\" color=\"primary\">\n          {id\n            ? t('answerForm.submit.existingAnswer')\n            : t('answerForm.submit.newAnswer')}\n        </Button>\n      </form>\n    </RequirePermission>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,10 +1,4 @@
 import { Progress, WarningPanel } from '@backstage/core-components';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { AnswerListItem } from './AnswerListItem.esm.js';
 import '@backstage/core-plugin-api';
@@ -13,6 +7,7 @@ import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import 'react-use/lib/useAsync';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
+import { Card, CardContent, Grid, Typography, Box, Divider } from '@material-ui/core';
 
 const AnswerList = (props) => {
   const {
@@ -51,7 +46,7 @@ const AnswerList = (props) => {
     return /* @__PURE__ */ React__default.createElement(WarningPanel, { severity: "error", title: t("answerList.errorLoading") }, error?.message);
   }
   if (initialLoad && (!response.answers || response.answers.length === 0)) {
-    return /* @__PURE__ */ React__default.createElement(Card, { style: { marginTop: "2rem" } }, /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React__default.createElement(Card, { style: { marginTop: "2em" } }, /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(
       Grid,
       {
         container: true,
@@ -63,7 +58,7 @@ const AnswerList = (props) => {
     )));
   }
   const pageCount = response.total < props.pageSize ? 1 : Math.ceil(response.total / props.pageSize);
-  return /* @__PURE__ */ React__default.createElement("div", { ref: listRef }, /* @__PURE__ */ React__default.createElement(Box, { sx: { mt: 2 }, className: "qetaAnswerList" }, /* @__PURE__ */ React__default.createElement(Card, null, /* @__PURE__ */ React__default.createElement(Grid, { container: true, spacing: 2, style: { paddingTop: "1rem" } }, response.answers.map((answer) => {
+  return /* @__PURE__ */ React__default.createElement("div", { ref: listRef }, /* @__PURE__ */ React__default.createElement(Box, { sx: { mt: 2 }, className: "qetaAnswerList" }, /* @__PURE__ */ React__default.createElement(Card, null, /* @__PURE__ */ React__default.createElement(Grid, { container: true, spacing: 2, style: { paddingTop: "1em" } }, response.answers.map((answer) => {
     return /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12, key: answer.id }, /* @__PURE__ */ React__default.createElement(AnswerListItem, { answer, entity }), /* @__PURE__ */ React__default.createElement(Divider, null));
   }))), /* @__PURE__ */ React__default.createElement(
     QetaPagination,

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

@@ -1 +1 @@
-{"version":3,"file":"AnswerList.esm.js","sources":["../../../src/components/AnswersContainer/AnswerList.tsx"],"sourcesContent":["import { Progress, WarningPanel } from '@backstage/core-components';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport Typography from '@mui/material/Typography';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport Grid from '@mui/material/Grid';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnswersResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { AnswerListItem } from './AnswerListItem';\nimport { useTranslation } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { SelectChangeEvent } from '@mui/material/Select';\n\nexport const AnswerList = (props: {\n  loading: boolean;\n  error: any;\n  response?: AnswersResponse;\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (size: number) => void;\n  page: number;\n  pageSize: number;\n  entity?: string;\n  tags?: string[];\n  entityPage?: boolean;\n}) => {\n  const {\n    loading,\n    error,\n    response,\n    onPageChange,\n    entity,\n    page,\n    onPageSizeChange,\n  } = props;\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const [initialLoad, setInitialLoad] = useState(true);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (!initialLoad) {\n      setInitialLoad(false);\n    }\n  }, [initialLoad, loading]);\n\n  const handlePageChange = (\n    _event: React.ChangeEvent<unknown>,\n    value: number,\n  ) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageChange(value);\n  };\n\n  const handlePageSizeChange = (event: SelectChangeEvent<number>) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageSizeChange(Number.parseInt(event.target.value as string, 10));\n  };\n\n  if (loading && initialLoad) {\n    return <Progress />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('answerList.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (initialLoad && (!response.answers || response.answers.length === 0)) {\n    return (\n      <Card style={{ marginTop: '2rem' }}>\n        <CardContent>\n          <Grid\n            container\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            direction=\"column\"\n          >\n            <Grid item>\n              <Typography variant=\"h6\">{t('answerList.noAnswers')}</Typography>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n    );\n  }\n\n  const pageCount =\n    response.total < props.pageSize\n      ? 1\n      : Math.ceil(response.total / props.pageSize);\n\n  return (\n    <div ref={listRef}>\n      <Box sx={{ mt: 2 }} className=\"qetaAnswerList\">\n        <Card>\n          <Grid container spacing={2} style={{ paddingTop: '1rem' }}>\n            {response.answers.map(answer => {\n              return (\n                <Grid item xs={12} key={answer.id}>\n                  <AnswerListItem answer={answer} entity={entity} />\n                  <Divider />\n                </Grid>\n              );\n            })}\n          </Grid>\n        </Card>\n        <QetaPagination\n          pageSize={props.pageSize}\n          handlePageChange={handlePageChange}\n          handlePageSizeChange={handlePageSizeChange}\n          page={page}\n          pageCount={pageCount}\n          tooltip={t('answerList.limitSelect')}\n        />\n      </Box>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"AnswerList.esm.js","sources":["../../../src/components/AnswersContainer/AnswerList.tsx"],"sourcesContent":["import { Progress, WarningPanel } from '@backstage/core-components';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnswersResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { AnswerListItem } from './AnswerListItem';\nimport { useTranslation } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport {\n  Box,\n  Card,\n  CardContent,\n  Divider,\n  Grid,\n  Typography,\n} from '@material-ui/core';\n\nexport const AnswerList = (props: {\n  loading: boolean;\n  error: any;\n  response?: AnswersResponse;\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (size: number) => void;\n  page: number;\n  pageSize: number;\n  entity?: string;\n  tags?: string[];\n  entityPage?: boolean;\n}) => {\n  const {\n    loading,\n    error,\n    response,\n    onPageChange,\n    entity,\n    page,\n    onPageSizeChange,\n  } = props;\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const [initialLoad, setInitialLoad] = useState(true);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (!initialLoad) {\n      setInitialLoad(false);\n    }\n  }, [initialLoad, loading]);\n\n  const handlePageChange = (\n    _event: React.ChangeEvent<unknown>,\n    value: number,\n  ) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageChange(value);\n  };\n\n  const handlePageSizeChange = (\n    event: React.ChangeEvent<{ value: unknown }>,\n  ) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageSizeChange(Number.parseInt(event.target.value as string, 10));\n  };\n\n  if (loading && initialLoad) {\n    return <Progress />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('answerList.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (initialLoad && (!response.answers || response.answers.length === 0)) {\n    return (\n      <Card style={{ marginTop: '2em' }}>\n        <CardContent>\n          <Grid\n            container\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            direction=\"column\"\n          >\n            <Grid item>\n              <Typography variant=\"h6\">{t('answerList.noAnswers')}</Typography>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </Card>\n    );\n  }\n\n  const pageCount =\n    response.total < props.pageSize\n      ? 1\n      : Math.ceil(response.total / props.pageSize);\n\n  return (\n    <div ref={listRef}>\n      <Box sx={{ mt: 2 }} className=\"qetaAnswerList\">\n        <Card>\n          <Grid container spacing={2} style={{ paddingTop: '1em' }}>\n            {response.answers.map(answer => {\n              return (\n                <Grid item xs={12} key={answer.id}>\n                  <AnswerListItem answer={answer} entity={entity} />\n                  <Divider />\n                </Grid>\n              );\n            })}\n          </Grid>\n        </Card>\n        <QetaPagination\n          pageSize={props.pageSize}\n          handlePageChange={handlePageChange}\n          handlePageSizeChange={handlePageSizeChange}\n          page={page}\n          pageCount={pageCount}\n          tooltip={t('answerList.limitSelect')}\n        />\n      </Box>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,6 +1,3 @@
-import Typography from '@mui/material/Typography';
-import Avatar from '@mui/material/Avatar';
-import Grid from '@mui/material/Grid';
 import { Link } from '@backstage/core-components';
 import React__default from 'react';
 import DOMPurify from 'dompurify';
@@ -15,7 +12,8 @@ import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import 'react-use/lib/useAsync';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
-import { VoteButtonContainer } from '../Styled/VoteButtonContainer.esm.js';
+import { VoteButtonContainer } from '../Utility/VoteButtonContainer.esm.js';
+import { Grid, Typography, Avatar } from '@material-ui/core';
 
 const AnswerListItem = (props) => {
   const { answer, entity } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"AnswerListItem.esm.js","sources":["../../../src/components/AnswersContainer/AnswerListItem.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography';\nimport Avatar from '@mui/material/Avatar';\nimport Grid from '@mui/material/Grid';\nimport { Link } from '@backstage/core-components';\nimport React from 'react';\nimport DOMPurify from 'dompurify';\nimport {\n  AnswerResponse,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { questionRouteRef, userRouteRef } from '../../routes';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { VoteButtonContainer } from '../Styled/VoteButtonContainer';\n\nexport interface AnswerListItemProps {\n  answer: AnswerResponse;\n  entity?: string;\n}\n\nexport const AnswerListItem = (props: AnswerListItemProps) => {\n  const { answer, entity } = props;\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const userRoute = useRouteRef(userRouteRef);\n  const { name, initials, user } = useEntityAuthor(answer);\n  const { t } = useTranslation();\n\n  const getAnswerLink = () => {\n    return entity\n      ? `${questionRoute({\n          id: answer.postId.toString(10),\n        })}?entity=${entity}#answer_${answer.id}`\n      : `${questionRoute({\n          id: answer.postId.toString(10),\n        })}/#answer_${answer.id}`;\n  };\n\n  return (\n    <Grid container spacing={2} justifyContent=\"flex-start\">\n      <Grid item justifyContent=\"center\" style={{ paddingTop: '0px' }}>\n        <VoteButtonContainer>\n          <VoteButtons entity={answer} />\n        </VoteButtonContainer>\n      </Grid>\n      <Grid item>\n        <Grid container>\n          <Grid item xs={12}>\n            <Typography variant=\"h5\" component=\"div\">\n              <Link\n                to={getAnswerLink()}\n                className=\"qetaAnswerListItemQuestionBtn\"\n              >\n                {t('answer.questionTitle', {\n                  question: answer.post?.title ?? '',\n                })}\n              </Link>\n            </Typography>\n            <Typography\n              variant=\"caption\"\n              noWrap\n              component=\"div\"\n              className=\"qetaQuestionListItemContent\"\n              style={{ marginBottom: '5px' }}\n            >\n              {DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(answer.content), 150),\n              )}\n            </Typography>\n            <Grid item xs={12}>\n              {answer.post && <TagsAndEntities entity={answer.post} />}\n              <Typography variant=\"caption\" display=\"inline\">\n                <Avatar\n                  src={user?.spec?.profile?.picture}\n                  alt={name}\n                  variant=\"rounded\"\n                >\n                  {initials}\n                </Avatar>\n                {answer.author === 'anonymous' ? (\n                  t('common.anonymousAuthor')\n                ) : (\n                  <Link to={`${userRoute()}/${answer.author}`}>{name}</Link>\n                )}{' '}\n                <Link\n                  to={getAnswerLink()}\n                  className=\"qetaQuestionListItemQuestionBtn\"\n                >\n                  {`${t('answer.answeredTime')} `}\n                  <RelativeTimeWithTooltip value={answer.created} />\n                </Link>\n              </Typography>\n            </Grid>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"AnswerListItem.esm.js","sources":["../../../src/components/AnswersContainer/AnswerListItem.tsx"],"sourcesContent":["import { Link } from '@backstage/core-components';\nimport React from 'react';\nimport DOMPurify from 'dompurify';\nimport {\n  AnswerResponse,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { questionRouteRef, userRouteRef } from '../../routes';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { VoteButtonContainer } from '../Utility/VoteButtonContainer';\nimport { Avatar, Grid, Typography } from '@material-ui/core';\n\nexport interface AnswerListItemProps {\n  answer: AnswerResponse;\n  entity?: string;\n}\n\nexport const AnswerListItem = (props: AnswerListItemProps) => {\n  const { answer, entity } = props;\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const userRoute = useRouteRef(userRouteRef);\n  const { name, initials, user } = useEntityAuthor(answer);\n  const { t } = useTranslation();\n\n  const getAnswerLink = () => {\n    return entity\n      ? `${questionRoute({\n          id: answer.postId.toString(10),\n        })}?entity=${entity}#answer_${answer.id}`\n      : `${questionRoute({\n          id: answer.postId.toString(10),\n        })}/#answer_${answer.id}`;\n  };\n\n  return (\n    <Grid container spacing={2} justifyContent=\"flex-start\">\n      <Grid item justifyContent=\"center\" style={{ paddingTop: '0px' }}>\n        <VoteButtonContainer>\n          <VoteButtons entity={answer} />\n        </VoteButtonContainer>\n      </Grid>\n      <Grid item>\n        <Grid container>\n          <Grid item xs={12}>\n            <Typography variant=\"h5\" component=\"div\">\n              <Link\n                to={getAnswerLink()}\n                className=\"qetaAnswerListItemQuestionBtn\"\n              >\n                {t('answer.questionTitle', {\n                  question: answer.post?.title ?? '',\n                })}\n              </Link>\n            </Typography>\n            <Typography\n              variant=\"caption\"\n              noWrap\n              component=\"div\"\n              className=\"qetaQuestionListItemContent\"\n              style={{ marginBottom: '5px' }}\n            >\n              {DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(answer.content), 150),\n              )}\n            </Typography>\n            <Grid item xs={12}>\n              {answer.post && <TagsAndEntities entity={answer.post} />}\n              <Typography variant=\"caption\" display=\"inline\">\n                <Avatar\n                  src={user?.spec?.profile?.picture}\n                  alt={name}\n                  variant=\"rounded\"\n                >\n                  {initials}\n                </Avatar>\n                {answer.author === 'anonymous' ? (\n                  t('common.anonymousAuthor')\n                ) : (\n                  <Link to={`${userRoute()}/${answer.author}`}>{name}</Link>\n                )}{' '}\n                <Link\n                  to={getAnswerLink()}\n                  className=\"qetaQuestionListItemQuestionBtn\"\n                >\n                  {`${t('answer.answeredTime')} `}\n                  <RelativeTimeWithTooltip value={answer.created} />\n                </Link>\n              </Typography>\n            </Grid>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}