@drodil/backstage-plugin-qeta-react 3.10.0 → 3.10.1

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

@@ -11,7 +11,6 @@ import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { useAI } from '../../hooks/useAI.esm.js';
 import FlareIcon from '@mui/icons-material/Flare';
@@ -21,20 +20,7 @@ import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTime
 import RefreshIcon from '@mui/icons-material/Refresh';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import makeStyles from '@mui/styles/makeStyles';
-import createStyles from '@mui/styles/createStyles';
 
-const useStyles = makeStyles(
-  (theme) => createStyles({
-    card: {
-      marginTop: theme.spacing(3),
-      backgroundColor: theme.palette.background.default,
-      border: `3px solid ${theme.palette.status.ok}`
-    },
-    markdown: {}
-  }),
-  { name: "QetaAIAnswerCard" }
-);
 const EXPANDED_LOCAL_STORAGE_KEY = "qeta-ai-expanded";
 const AIAnswerCard = (props) => {
   const { question, draft, article, style, debounceMs = 3e3 } = props;
@@ -44,7 +30,6 @@ const AIAnswerCard = (props) => {
   const [expanded, setExpanded] = React__default.useState(
     localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === "true"
   );
-  const styles = useStyles();
   const { t } = useTranslation();
   const config = useApi(configApiRef);
   const botName = config.getOptionalString("qeta.aiBotName") ?? "AI";
@@ -114,52 +99,58 @@ const AIAnswerCard = (props) => {
   if (!isEnabled() || answer === null) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement(Card, { className: styles.card, style }, /* @__PURE__ */ React__default.createElement(
-    CardHeader,
+  return /* @__PURE__ */ React__default.createElement(
+    Card,
     {
-      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(
-        IconButton,
-        {
-          onClick: () => {
-            setAnswer(void 0);
-            fetchAnswer({ regenerate: true });
-          },
-          size: "large"
-        },
-        /* @__PURE__ */ React__default.createElement(RefreshIcon, null)
-      )), /* @__PURE__ */ React__default.createElement(
-        Tooltip,
-        {
-          title: expanded ? t("aiAnswerCard.hide") : t("aiAnswerCard.show")
-        },
-        /* @__PURE__ */ React__default.createElement(
+      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(
           IconButton,
           {
             onClick: () => {
-              setExpanded(!expanded);
-              localStorage.setItem(
-                EXPANDED_LOCAL_STORAGE_KEY,
-                expanded ? "false" : "true"
-              );
+              setAnswer(void 0);
+              fetchAnswer({ regenerate: 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,
-      className: styles.markdown
-    }
-  ))));
+          /* @__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: () => {
+                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 })))
+  );
 };
 
 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';\nimport makeStyles from '@mui/styles/makeStyles';\nimport createStyles from '@mui/styles/createStyles';\n\nexport type QetaAIAnswerCardClassKey = 'card';\n\nconst useStyles = makeStyles(\n  theme =>\n    createStyles({\n      card: {\n        marginTop: theme.spacing(3),\n        backgroundColor: theme.palette.background.default,\n        border: `3px solid ${theme.palette.status.ok}`,\n      },\n      markdown: {},\n    }),\n  { name: 'QetaAIAnswerCard' },\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 styles = useStyles();\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 className={styles.card} style={style}>\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 && (\n            <MarkdownRenderer\n              content={answer.answer}\n              className={styles.markdown}\n            />\n          )}\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 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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"}

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

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
@@ -18,12 +17,12 @@ import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import { useStyles } from '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
+import { VoteButtonContainer } from '../Styled/VoteButtonContainer.esm.js';
+import { CardActionContainer } from '../Styled/CardActionContainer.esm.js';
 
 const AnswerCard = (props) => {
   const { answer, question } = props;
-  const styles = useStyles();
   const [editMode, setEditMode] = React__default.useState(false);
   const [answerEntity, setAnswerEntity] = React__default.useState(answer);
   const { t } = useTranslation();
@@ -44,7 +43,18 @@ const AnswerCard = (props) => {
     Card,
     {
       id: `answer_${answer.id}`,
-      className: `qetaAnswerCard ${styles.questionCard} ${highlightedAnswer ? styles.highlight : ""}`
+      sx: (theme) => ({
+        marginTop: 3,
+        "@keyframes highlight": {
+          "0%": {
+            boxShadow: `0px 0px 0px 3px ${theme.palette.secondary.light}`
+          },
+          "100%": {
+            boxShadow: "none"
+          }
+        },
+        animation: highlightedAnswer ? "highlight 5s" : "none"
+      })
     },
     /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(
       Grid,
@@ -54,44 +64,40 @@ const AnswerCard = (props) => {
         justifyContent: "flex-start",
         style: { flexWrap: "nowrap" }
       },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true, justifyContent: "center" }, /* @__PURE__ */ React__default.createElement("div", { className: styles.questionCardVote }, /* @__PURE__ */ React__default.createElement(VoteButtons, { entity: answerEntity, post: question }), /* @__PURE__ */ React__default.createElement(LinkButton, { entity: answerEntity }))),
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true, className: styles.answerCardContent, marginLeft: 1 }, editMode ? /* @__PURE__ */ React__default.createElement(
-        AnswerForm,
-        {
-          post: question,
-          onPost: onAnswerEdit,
-          id: answerEntity.id
-        }
-      ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1", gutterBottom: true }, /* @__PURE__ */ React__default.createElement(
-        MarkdownRenderer,
-        {
-          className: "qetaAndwerCardAnswerContent",
-          content: answerEntity.content
-        }
-      ))), /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true, justifyContent: "center" }, /* @__PURE__ */ React__default.createElement(VoteButtonContainer, null, /* @__PURE__ */ React__default.createElement(VoteButtons, { entity: answerEntity, post: question }), /* @__PURE__ */ React__default.createElement(LinkButton, { entity: answerEntity }))),
+      /* @__PURE__ */ React__default.createElement(
         Grid,
         {
-          container: true,
           item: true,
-          spacing: 1,
-          justifyContent: "space-between",
-          alignItems: "flex-end",
-          className: styles.questionCardMetadata
+          marginLeft: 1,
+          sx: { display: "inline-block", width: "calc(100% - 70px)" }
         },
-        /* @__PURE__ */ React__default.createElement(Grid, { item: true, style: { alignSelf: "flex-end" } }, (answerEntity.own || answerEntity.canDelete || answerEntity.canEdit) && /* @__PURE__ */ React__default.createElement(
-          Box,
+        editMode ? /* @__PURE__ */ React__default.createElement(
+          AnswerForm,
+          {
+            post: question,
+            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(
+          Grid,
           {
-            className: `qetaAnswerCardActions ${styles.questionCardActions}`
+            container: true,
+            item: true,
+            spacing: 1,
+            justifyContent: "space-between",
+            alignItems: "flex-end",
+            sx: { marginTop: 3 }
           },
-          !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(CardActionContainer, 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,
-              className: `${styles.marginRight} qetaAnswerCardDeleteBtn`,
-              startIcon: /* @__PURE__ */ React__default.createElement(DeleteIcon, null)
+              startIcon: /* @__PURE__ */ React__default.createElement(DeleteIcon, null),
+              sx: { marginRight: 1 }
             },
             t("deleteModal.deleteButton")
           ), /* @__PURE__ */ React__default.createElement(
@@ -102,8 +108,7 @@ const AnswerCard = (props) => {
               entity: answerEntity,
               question
             }
-          )),
-          (answerEntity.own || answerEntity.canEdit) && /* @__PURE__ */ React__default.createElement(
+          )), (answerEntity.own || answerEntity.canEdit) && /* @__PURE__ */ React__default.createElement(
             Button,
             {
               variant: "outlined",
@@ -113,10 +118,10 @@ const AnswerCard = (props) => {
               className: "qetaAnswerCardEditBtn"
             },
             t("questionPage.editButton")
-          )
-        )),
-        /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3, className: styles.noPadding }, /* @__PURE__ */ React__default.createElement(AuthorBox, { entity: answerEntity }))
-      )))
+          ))),
+          /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3, sx: { padding: 0 } }, /* @__PURE__ */ React__default.createElement(AuthorBox, { entity: answerEntity }))
+        ))
+      )
     ))
   ), /* @__PURE__ */ React__default.createElement(
     CommentSection,

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

@@ -1 +1 @@
-{"version":3,"file":"AnswerCard.esm.js","sources":["../../../src/components/AnswerCard/AnswerCard.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport 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 { useStyles, useTranslation } from '../../hooks';\n\nexport const AnswerCard = (props: {\n  answer: AnswerResponse;\n  question: PostResponse;\n}) => {\n  const { answer, question } = props;\n  const styles = useStyles();\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        className={`qetaAnswerCard ${styles.questionCard} ${\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              <div className={styles.questionCardVote}>\n                <VoteButtons entity={answerEntity} post={question} />\n                <LinkButton entity={answerEntity} />\n              </div>\n            </Grid>\n            <Grid item className={styles.answerCardContent} marginLeft={1}>\n              {editMode ? (\n                <AnswerForm\n                  post={question}\n                  onPost={onAnswerEdit}\n                  id={answerEntity.id}\n                />\n              ) : (\n                <>\n                  <Grid item>\n                    <Typography variant=\"body1\" gutterBottom>\n                      <MarkdownRenderer\n                        className=\"qetaAndwerCardAnswerContent\"\n                        content={answerEntity.content}\n                      />\n                    </Typography>\n                  </Grid>\n                  <Grid\n                    container\n                    item\n                    spacing={1}\n                    justifyContent=\"space-between\"\n                    alignItems=\"flex-end\"\n                    className={styles.questionCardMetadata}\n                  >\n                    <Grid item style={{ alignSelf: 'flex-end' }}>\n                      {(answerEntity.own ||\n                        answerEntity.canDelete ||\n                        answerEntity.canEdit) && (\n                        <Box\n                          className={`qetaAnswerCardActions ${styles.questionCardActions}`}\n                        >\n                          {!answerEntity.correct &&\n                            (answerEntity.own || answerEntity.canDelete) && (\n                              <>\n                                <Button\n                                  variant=\"outlined\"\n                                  size=\"small\"\n                                  color=\"secondary\"\n                                  onClick={handleDeleteModalOpen}\n                                  className={`${styles.marginRight} qetaAnswerCardDeleteBtn`}\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                        </Box>\n                      )}\n                    </Grid>\n                    <Grid item xs={3} className={styles.noPadding}>\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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"}
+{"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":"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"}

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

@@ -13,7 +13,6 @@ import { qetaApiRef } from '../../api.esm.js';
 import { useFormStyles } from '../../hooks/useFormStyles.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 
 const getDefaultValues = (postId) => {

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 { useFormStyles } from '../../hooks/useFormStyles';\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 styles = useFormStyles();\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        className={`${styles.form} qetaAnswerForm`}\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          className={`qetaAnswerFormPostBtn ${styles.postButton}`}\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 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 { useFormStyles } from '../../hooks/useFormStyles';\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 styles = useFormStyles();\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        className={`${styles.form} qetaAnswerForm`}\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          className={`qetaAnswerFormPostBtn ${styles.postButton}`}\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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"}

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

@@ -11,7 +11,6 @@ import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
 

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 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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"}

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

@@ -13,15 +13,14 @@ import { questionRouteRef, userRouteRef } from '../../routes.esm.js';
 import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import { useStyles } from '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
+import { VoteButtonContainer } from '../Styled/VoteButtonContainer.esm.js';
 
 const AnswerListItem = (props) => {
   const { answer, entity } = props;
   const questionRoute = useRouteRef(questionRouteRef);
   const userRoute = useRouteRef(userRouteRef);
-  const styles = useStyles();
   const { name, initials, user } = useEntityAuthor(answer);
   const { t } = useTranslation();
   const getAnswerLink = () => {
@@ -31,66 +30,44 @@ const AnswerListItem = (props) => {
       id: answer.postId.toString(10)
     })}/#answer_${answer.id}`;
   };
-  return /* @__PURE__ */ React__default.createElement(
-    Grid,
+  return /* @__PURE__ */ React__default.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-start" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, justifyContent: "center", style: { paddingTop: "0px" } }, /* @__PURE__ */ React__default.createElement(VoteButtonContainer, null, /* @__PURE__ */ React__default.createElement(VoteButtons, { entity: answer }))), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Grid, { container: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5", component: "div" }, /* @__PURE__ */ React__default.createElement(
+    Link,
     {
-      container: true,
-      spacing: 2,
-      className: styles.questionListItem,
-      justifyContent: "flex-start"
+      to: getAnswerLink(),
+      className: "qetaAnswerListItemQuestionBtn"
     },
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true, justifyContent: "center", style: { paddingTop: "0px" } }, /* @__PURE__ */ React__default.createElement("div", { className: styles.questionCardVote }, /* @__PURE__ */ React__default.createElement(VoteButtons, { entity: answer }))),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true, className: styles.questionListItemContent }, /* @__PURE__ */ React__default.createElement(Grid, { container: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5", component: "div" }, /* @__PURE__ */ React__default.createElement(
-      Link,
-      {
-        to: getAnswerLink(),
-        className: "qetaAnswerListItemQuestionBtn"
-      },
-      t("answer.questionTitle", {
-        question: answer.post?.title ?? ""
-      })
-    )), /* @__PURE__ */ React__default.createElement(
-      Typography,
-      {
-        variant: "caption",
-        noWrap: true,
-        component: "div",
-        className: "qetaQuestionListItemContent",
-        style: { marginBottom: "5px" }
-      },
-      DOMPurify.sanitize(
-        truncate(removeMarkdownFormatting(answer.content), 150)
-      )
-    ), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, answer.post && /* @__PURE__ */ React__default.createElement(TagsAndEntities, { entity: answer.post }), /* @__PURE__ */ React__default.createElement(
-      Typography,
-      {
-        variant: "caption",
-        display: "inline",
-        className: `${styles.questionListItemAuthor} qetaAnswerListItemAuthor`
-      },
-      /* @__PURE__ */ React__default.createElement(
-        Avatar,
-        {
-          src: user?.spec?.profile?.picture,
-          className: styles.questionListItemAvatar,
-          alt: name,
-          variant: "rounded"
-        },
-        initials
-      ),
-      answer.author === "anonymous" ? t("common.anonymousAuthor") : /* @__PURE__ */ React__default.createElement(Link, { to: `${userRoute()}/${answer.author}` }, name),
-      " ",
-      /* @__PURE__ */ React__default.createElement(
-        Link,
-        {
-          to: getAnswerLink(),
-          className: "qetaQuestionListItemQuestionBtn"
-        },
-        `${t("answer.answeredTime")} `,
-        /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: answer.created })
-      )
-    )))))
-  );
+    t("answer.questionTitle", {
+      question: answer.post?.title ?? ""
+    })
+  )), /* @__PURE__ */ React__default.createElement(
+    Typography,
+    {
+      variant: "caption",
+      noWrap: true,
+      component: "div",
+      className: "qetaQuestionListItemContent",
+      style: { marginBottom: "5px" }
+    },
+    DOMPurify.sanitize(
+      truncate(removeMarkdownFormatting(answer.content), 150)
+    )
+  ), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, answer.post && /* @__PURE__ */ React__default.createElement(TagsAndEntities, { entity: answer.post }), /* @__PURE__ */ React__default.createElement(Typography, { variant: "caption", display: "inline" }, /* @__PURE__ */ React__default.createElement(
+    Avatar,
+    {
+      src: user?.spec?.profile?.picture,
+      alt: name,
+      variant: "rounded"
+    },
+    initials
+  ), answer.author === "anonymous" ? t("common.anonymousAuthor") : /* @__PURE__ */ React__default.createElement(Link, { to: `${userRoute()}/${answer.author}` }, name), " ", /* @__PURE__ */ React__default.createElement(
+    Link,
+    {
+      to: getAnswerLink(),
+      className: "qetaQuestionListItemQuestionBtn"
+    },
+    `${t("answer.answeredTime")} `,
+    /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: answer.created })
+  )))))));
 };
 
 export { AnswerListItem };