@drodil/backstage-plugin-qeta-react 3.52.6 → 3.53.0

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

@@ -4,19 +4,24 @@ import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer.esm.js';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
+import '@backstage/plugin-signals-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import '../../hooks/useListItemStyles.esm.js';
 import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
-import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { qetaTranslationRef } from '../../translation.esm.js';
 import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
 import { useAI } from '../../hooks/useAI.esm.js';
 import { makeStyles, Card, CardHeader, Typography, Tooltip, IconButton, Collapse, CardContent } from '@material-ui/core';
-import Flare from '@material-ui/icons/Flare';
+import 'react-router-dom';
 import useDebounce from 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
+import { useUserSettings } from '../../hooks/useUserSettings.esm.js';
+import Flare from '@material-ui/icons/Flare';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
@@ -30,17 +35,15 @@ const useStyles = makeStyles((theme) => ({
     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;
   const [answer, setAnswer] = useState(null);
-  const [expanded, setExpanded] = useState(
-    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === "true"
-  );
   const { t } = useTranslationRef(qetaTranslationRef);
   const config = useApi(configApiRef);
   const botName = config.getOptionalString("qeta.aiBotName") ?? "AI";
   const styles = useStyles();
+  const { getSetting, setSetting } = useUserSettings();
+  const [expanded, setExpanded] = useState(getSetting("aiAnswerExpanded"));
   const {
     isAIEnabled,
     isNewQuestionsEnabled,
@@ -135,10 +138,7 @@ const AIAnswerCard = (props) => {
                 {
                   onClick: () => {
                     setExpanded(!expanded);
-                    localStorage.setItem(
-                      EXPANDED_LOCAL_STORAGE_KEY,
-                      expanded ? "false" : "true"
-                    );
+                    setSetting("aiAnswerExpanded", !expanded);
                   },
                   "aria-expanded": expanded,
                   children: expanded ? /* @__PURE__ */ jsx(KeyboardArrowUpIcon, {}) : /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {})

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 { CSSProperties, useCallback, useState } from 'react';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useAI } 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';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\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?: 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] = useState<AIResponse | null | undefined>(null);\n  const [expanded, setExpanded] = useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const { t } = useTranslationRef(qetaTranslationRef);\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        setAnswer(null);\n        return;\n      }\n\n      if (question) {\n        answerExistingQuestion(question.id, options)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\n          });\n      } else if (article) {\n        summarizeArticle(article.id, options)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\n          });\n      } else if (\n        draft &&\n        draft.title &&\n        draft.content &&\n        draft.title.length + draft.content.length > 30\n      ) {\n        answerDraftQuestion(draft)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\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":["FlareIcon"],"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 { CSSProperties, useCallback, useState } from 'react';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useAI } from '../../hooks';\nimport { useUserSettings } from '../../hooks/useUserSettings';\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';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\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?: CSSProperties;\n};\n\nexport const AIAnswerCard = (props: AIAnswerCardProps) => {\n  const { question, draft, article, style, debounceMs = 3000 } = props;\n  const [answer, setAnswer] = useState<AIResponse | null | undefined>(null);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const config = useApi(configApiRef);\n  const botName = config.getOptionalString('qeta.aiBotName') ?? 'AI';\n  const styles = useStyles();\n  const { getSetting, setSetting } = useUserSettings();\n  const [expanded, setExpanded] = useState(getSetting('aiAnswerExpanded'));\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        setAnswer(null);\n        return;\n      }\n\n      if (question) {\n        answerExistingQuestion(question.id, options)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\n          });\n      } else if (article) {\n        summarizeArticle(article.id, options)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\n          });\n      } else if (\n        draft &&\n        draft.title &&\n        draft.content &&\n        draft.title.length + draft.content.length > 30\n      ) {\n        answerDraftQuestion(draft)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\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                  setSetting('aiAnswerExpanded', !expanded);\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":["FlareIcon"],"mappings":"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"}

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

@@ -13,6 +13,8 @@ import { OptionalRequirePermission } from '../Utility/OptionalRequirePermission.
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
 import 'react-use';
+import '@backstage/plugin-signals-react';
+import '../../hooks/useListItemStyles.esm.js';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import 'dataloader';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
@@ -20,6 +22,9 @@ import { useIdentityApi } from '../../hooks/useIdentityApi.esm.js';
 import { useIsModerator } from '../../hooks/useIsModerator.esm.js';
 import '@backstage/plugin-permission-react';
 import '@backstage/plugin-permission-common';
+import 'react-router-dom';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
 import { EntitiesInput } from '../PostForm/EntitiesInput.esm.js';
 
 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 { useCallback, useEffect, useState } from 'react';\nimport {\n  alertApiRef,\n  configApiRef,\n  useAnalytics,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport {\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 { PostAnonymouslyCheckbox } from '../PostAnonymouslyCheckbox/PostAnonymouslyCheckbox';\nimport { useConfirmNavigationIfEdited } from '../../utils/utils';\nimport { qetaApiRef } from '../../api';\nimport {\n  Box,\n  Button,\n  Card,\n  CardContent,\n  Typography,\n  useTheme,\n} from '@material-ui/core';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useIdentityApi, useIsModerator } from '../../hooks';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { EntitiesInput } from '../PostForm/EntitiesInput';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\n\ntype AnswerFormData = {\n  postId: number;\n  answer: string;\n  images: number[];\n  author?: Entity;\n  anonymous?: boolean;\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] = useState<AnswerFormData>(\n    getDefaultValues(post.id),\n  );\n  const analytics = useAnalytics();\n  const { isModerator } = useIsModerator();\n  const { value: identity } = useIdentityApi(\n    api => api.getBackstageIdentity(),\n    [],\n  );\n  const theme = useTheme();\n  const [error, setError] = useState(false);\n  const [posting, setPosting] = useState(false);\n  const catalogApi = useApi(catalogApiRef);\n  const [images, setImages] = useState<number[]>([]);\n  const [edited, setEdited] = useState(false);\n  const qetaApi = useApi(qetaApiRef);\n  const configApi = useApi(configApiRef);\n  const allowAnonymouns = configApi.getOptionalBoolean('qeta.allowAnonymous');\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const alertApi = useApi(alertApiRef);\n\n  const {\n    handleSubmit,\n    control,\n    formState: { errors, isSubmitting },\n    reset,\n  } = useForm<AnswerFormData>({\n    values,\n    defaultValues: getDefaultValues(post.id),\n  });\n\n  const postAnswer = (data: AnswerFormData) => {\n    setPosting(true);\n\n    if (id) {\n      qetaApi\n        .updateAnswer(id, {\n          postId: post.id,\n          answer: data.answer,\n          author: data.author ? stringifyEntityRef(data.author) : undefined,\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 => {\n          alertApi.post({\n            message: e.message,\n            display: 'transient',\n            severity: 'error',\n          });\n          setError(true);\n        })\n        .finally(() => setPosting(false));\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 => {\n        alertApi.post({\n          message: e.message,\n          display: 'transient',\n          severity: 'error',\n        });\n        setError(true);\n      })\n      .finally(() => setPosting(false));\n  };\n\n  useEffect(() => {\n    if (id) {\n      qetaApi\n        .getAnswer(post.id, id)\n        .then(a => {\n          if ('content' in a) {\n            setValues({ postId: post.id, answer: a.content, images: a.images });\n            setImages(a.images);\n            catalogApi.getEntityByRef(a.author).then(data => {\n              if (data) {\n                setValues(v => {\n                  return { ...v, author: data };\n                });\n              }\n            });\n          } else {\n            setError(true);\n          }\n        })\n        .catch(e => {\n          alertApi.post({\n            message: e.message,\n            display: 'transient',\n            severity: 'error',\n          });\n          setError(true);\n        });\n    }\n  }, [alertApi, catalogApi, id, post, qetaApi]);\n\n  useEffect(() => {\n    if (!id && identity?.userEntityRef) {\n      catalogApi.getEntityByRef(identity.userEntityRef).then(data => {\n        if (data) {\n          setValues(v => {\n            return { ...v, author: data };\n          });\n        }\n      });\n    }\n  }, [catalogApi, id, identity]);\n\n  useEffect(() => {\n    reset(values);\n  }, [values, reset]);\n\n  useConfirmNavigationIfEdited(edited);\n\n  const onImageUpload = useCallback(\n    (imageId: number) => {\n      setImages(prevImages => [...prevImages, imageId]);\n    },\n    [setImages],\n  );\n\n  return (\n    <OptionalRequirePermission\n      permission={qetaCreateAnswerPermission}\n      errorPage={<></>}\n    >\n      <Card variant=\"outlined\">\n        <CardContent>\n          <form\n            onSubmit={handleSubmit(postAnswer)}\n            onChange={() => {\n              setEdited(true);\n            }}\n          >\n            <Typography variant=\"h6\">Your answer</Typography>\n            {error && (\n              <WarningPanel\n                severity=\"error\"\n                title={t('answerForm.errorPosting')}\n              />\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                  disabled={post.status === 'obsolete'}\n                  error={'answer' in errors}\n                  placeholder={t('answerForm.contentInput.placeholder')}\n                  onImageUpload={onImageUpload}\n                  answerId={id ? Number(id) : undefined}\n                />\n              )}\n              name=\"answer\"\n            />\n            {isModerator && id && (\n              <Box mt={1} mb={1}>\n                <Controller\n                  control={control}\n                  render={({ field, fieldState: { error: authorError } }) => {\n                    return (\n                      <EntitiesInput\n                        label={t('postForm.authorInput.label')}\n                        placeholder={t('postForm.authorInput.placeholder')}\n                        hideHelpText\n                        disabled={post.status === 'obsolete'}\n                        multiple={false}\n                        kind={['User']}\n                        required\n                        {...field}\n                        error={authorError}\n                      />\n                    );\n                  }}\n                  name=\"author\"\n                />\n              </Box>\n            )}\n            {allowAnonymouns && !id && (\n              <PostAnonymouslyCheckbox\n                control={control}\n                disabled={post.status === 'obsolete'}\n                label={t('anonymousCheckbox.answerAnonymously')}\n              />\n            )}\n            <Button\n              variant=\"contained\"\n              type=\"submit\"\n              color=\"primary\"\n              disabled={posting || isSubmitting || post.status === 'obsolete'}\n              style={{ marginTop: theme.spacing(2) }}\n            >\n              {posting || isSubmitting ? (\n                <span>\n                  {t('answerForm.submitting')}{' '}\n                  <span className=\"spinner-border spinner-border-sm\" />\n                </span>\n              ) : (\n                t(\n                  id\n                    ? 'answerForm.submit.existingAnswer'\n                    : 'answerForm.submit.newAnswer',\n                )\n              )}\n            </Button>\n          </form>\n        </CardContent>\n      </Card>\n    </OptionalRequirePermission>\n  );\n};\n"],"names":[],"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 { useCallback, useEffect, useState } from 'react';\nimport {\n  alertApiRef,\n  configApiRef,\n  useAnalytics,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport {\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 { PostAnonymouslyCheckbox } from '../PostAnonymouslyCheckbox/PostAnonymouslyCheckbox';\nimport { useConfirmNavigationIfEdited } from '../../utils/utils';\nimport { qetaApiRef } from '../../api';\nimport {\n  Box,\n  Button,\n  Card,\n  CardContent,\n  Typography,\n  useTheme,\n} from '@material-ui/core';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useIdentityApi, useIsModerator } from '../../hooks';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { EntitiesInput } from '../PostForm/EntitiesInput';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\n\ntype AnswerFormData = {\n  postId: number;\n  answer: string;\n  images: number[];\n  author?: Entity;\n  anonymous?: boolean;\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] = useState<AnswerFormData>(\n    getDefaultValues(post.id),\n  );\n  const analytics = useAnalytics();\n  const { isModerator } = useIsModerator();\n  const { value: identity } = useIdentityApi(\n    api => api.getBackstageIdentity(),\n    [],\n  );\n  const theme = useTheme();\n  const [error, setError] = useState(false);\n  const [posting, setPosting] = useState(false);\n  const catalogApi = useApi(catalogApiRef);\n  const [images, setImages] = useState<number[]>([]);\n  const [edited, setEdited] = useState(false);\n  const qetaApi = useApi(qetaApiRef);\n  const configApi = useApi(configApiRef);\n  const allowAnonymouns = configApi.getOptionalBoolean('qeta.allowAnonymous');\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const alertApi = useApi(alertApiRef);\n\n  const {\n    handleSubmit,\n    control,\n    formState: { errors, isSubmitting },\n    reset,\n  } = useForm<AnswerFormData>({\n    values,\n    defaultValues: getDefaultValues(post.id),\n  });\n\n  const postAnswer = (data: AnswerFormData) => {\n    setPosting(true);\n\n    if (id) {\n      qetaApi\n        .updateAnswer(id, {\n          postId: post.id,\n          answer: data.answer,\n          author: data.author ? stringifyEntityRef(data.author) : undefined,\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 => {\n          alertApi.post({\n            message: e.message,\n            display: 'transient',\n            severity: 'error',\n          });\n          setError(true);\n        })\n        .finally(() => setPosting(false));\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 => {\n        alertApi.post({\n          message: e.message,\n          display: 'transient',\n          severity: 'error',\n        });\n        setError(true);\n      })\n      .finally(() => setPosting(false));\n  };\n\n  useEffect(() => {\n    if (id) {\n      qetaApi\n        .getAnswer(post.id, id)\n        .then(a => {\n          if ('content' in a) {\n            setValues({ postId: post.id, answer: a.content, images: a.images });\n            setImages(a.images);\n            catalogApi.getEntityByRef(a.author).then(data => {\n              if (data) {\n                setValues(v => {\n                  return { ...v, author: data };\n                });\n              }\n            });\n          } else {\n            setError(true);\n          }\n        })\n        .catch(e => {\n          alertApi.post({\n            message: e.message,\n            display: 'transient',\n            severity: 'error',\n          });\n          setError(true);\n        });\n    }\n  }, [alertApi, catalogApi, id, post, qetaApi]);\n\n  useEffect(() => {\n    if (!id && identity?.userEntityRef) {\n      catalogApi.getEntityByRef(identity.userEntityRef).then(data => {\n        if (data) {\n          setValues(v => {\n            return { ...v, author: data };\n          });\n        }\n      });\n    }\n  }, [catalogApi, id, identity]);\n\n  useEffect(() => {\n    reset(values);\n  }, [values, reset]);\n\n  useConfirmNavigationIfEdited(edited);\n\n  const onImageUpload = useCallback(\n    (imageId: number) => {\n      setImages(prevImages => [...prevImages, imageId]);\n    },\n    [setImages],\n  );\n\n  return (\n    <OptionalRequirePermission\n      permission={qetaCreateAnswerPermission}\n      errorPage={<></>}\n    >\n      <Card variant=\"outlined\">\n        <CardContent>\n          <form\n            onSubmit={handleSubmit(postAnswer)}\n            onChange={() => {\n              setEdited(true);\n            }}\n          >\n            <Typography variant=\"h6\">Your answer</Typography>\n            {error && (\n              <WarningPanel\n                severity=\"error\"\n                title={t('answerForm.errorPosting')}\n              />\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                  disabled={post.status === 'obsolete'}\n                  error={'answer' in errors}\n                  placeholder={t('answerForm.contentInput.placeholder')}\n                  onImageUpload={onImageUpload}\n                  answerId={id ? Number(id) : undefined}\n                />\n              )}\n              name=\"answer\"\n            />\n            {isModerator && id && (\n              <Box mt={1} mb={1}>\n                <Controller\n                  control={control}\n                  render={({ field, fieldState: { error: authorError } }) => {\n                    return (\n                      <EntitiesInput\n                        label={t('postForm.authorInput.label')}\n                        placeholder={t('postForm.authorInput.placeholder')}\n                        hideHelpText\n                        disabled={post.status === 'obsolete'}\n                        multiple={false}\n                        kind={['User']}\n                        required\n                        {...field}\n                        error={authorError}\n                      />\n                    );\n                  }}\n                  name=\"author\"\n                />\n              </Box>\n            )}\n            {allowAnonymouns && !id && (\n              <PostAnonymouslyCheckbox\n                control={control}\n                disabled={post.status === 'obsolete'}\n                label={t('anonymousCheckbox.answerAnonymously')}\n              />\n            )}\n            <Button\n              variant=\"contained\"\n              type=\"submit\"\n              color=\"primary\"\n              disabled={posting || isSubmitting || post.status === 'obsolete'}\n              style={{ marginTop: theme.spacing(2) }}\n            >\n              {posting || isSubmitting ? (\n                <span>\n                  {t('answerForm.submitting')}{' '}\n                  <span className=\"spinner-border spinner-border-sm\" />\n                </span>\n              ) : (\n                t(\n                  id\n                    ? 'answerForm.submit.existingAnswer'\n                    : 'answerForm.submit.newAnswer',\n                )\n              )}\n            </Button>\n          </form>\n        </CardContent>\n      </Card>\n    </OptionalRequirePermission>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -20,16 +20,18 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "row",
     alignItems: "flex-start",
     height: "100%",
-    padding: theme.spacing(2.5, 2, 2, 2),
+    padding: theme.spacing(1, 2),
     minHeight: 80,
     transition: "all 0.2s ease-in-out",
-    borderRadius: theme.shape.borderRadius,
     "&:hover": {
       backgroundColor: theme.palette.action.hover,
       "& $title": {
         color: theme.palette.primary.main
       }
     },
+    "&:first-child": {
+      paddingTop: theme.spacing(2)
+    },
     cursor: "pointer"
   },
   metaCol: {

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

@@ -1 +1 @@
-{"version":3,"file":"AnswerListItem.esm.js","sources":["../../../src/components/AnswersContainer/AnswerListItem.tsx"],"sourcesContent":["import { useState } 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 { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { questionRouteRef } from '../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { Box, makeStyles, Tooltip, Typography } from '@material-ui/core';\nimport numeral from 'numeral';\nimport ThumbUp from '@material-ui/icons/ThumbUp';\nimport CheckCircle from '@material-ui/icons/CheckCircle';\nimport { useNavigate } from 'react-router-dom';\nimport { AuthorBox } from '../AuthorBox/AuthorBox';\n\nexport interface AnswerListItemProps {\n  answer: AnswerResponse;\n  entity?: string;\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    height: '100%',\n    padding: theme.spacing(2.5, 2, 2, 2),\n    minHeight: 80,\n    transition: 'all 0.2s ease-in-out',\n    borderRadius: theme.shape.borderRadius,\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n      '& $title': {\n        color: theme.palette.primary.main,\n      },\n    },\n    cursor: 'pointer',\n  },\n  metaCol: {\n    minWidth: 64,\n    maxWidth: 64,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginRight: theme.spacing(1.5),\n    gap: theme.spacing(0.75),\n  },\n  metaItem: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing(0.5),\n    color: theme.palette.text.secondary,\n    width: '100%',\n    fontSize: '15px',\n  },\n  metaItemActive: {\n    color: theme.palette.success.main,\n    fontWeight: 500,\n  },\n  metaIcon: {\n    fontSize: 16,\n  },\n  title: {\n    fontWeight: 700,\n    fontSize: '1.1rem',\n    color: theme.palette.text.primary,\n    marginBottom: theme.spacing(0.5),\n    textOverflow: 'ellipsis',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    lineHeight: 1.2,\n    textDecoration: 'none',\n  },\n  content: {\n    color: theme.palette.text.primary,\n    opacity: 0.9,\n    margin: '4px 0 8px 0',\n    display: '-webkit-box',\n    WebkitLineClamp: 2,\n    WebkitBoxOrient: 'vertical',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    fontSize: '0.95rem',\n    minHeight: '20px',\n  },\n  tagsRow: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '100%',\n    marginTop: 'auto',\n  },\n  tags: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: 4,\n  },\n  authorBoxContainer: {\n    marginLeft: 'auto',\n    display: 'flex',\n    alignItems: 'center',\n  },\n  contentContainer: {\n    flex: 1,\n    minWidth: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  },\n  titleContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    justifyContent: 'space-between',\n    marginBottom: theme.spacing(0.5),\n  },\n  titleWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    flex: 1,\n    minWidth: 0,\n  },\n}));\n\nfunction formatShortNumber(num: number): string {\n  return num >= 1000 ? numeral(num).format('0.0 a') : num.toString();\n}\n\nexport const AnswerListItem = (props: AnswerListItemProps) => {\n  const { answer, entity } = props;\n  const [score] = useState(answer.score);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const styles = useStyles();\n  const navigate = useNavigate();\n\n  const questionRoute = useRouteRef(questionRouteRef);\n\n  const href = 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  const handleClick = (e: React.MouseEvent) => {\n    if (\n      (e.target as HTMLElement).closest('a') ||\n      (e.target as HTMLElement).closest('button')\n    ) {\n      return;\n    }\n    navigate(href);\n  };\n\n  return (\n    <Box className={styles.root} onClick={handleClick}>\n      <Box className={styles.metaCol} aria-label={t('common.postStats')}>\n        <Tooltip title={t('common.votesCount', { count: score })} arrow>\n          <Box className={styles.metaItem}>\n            <ThumbUp className={styles.metaIcon} />\n            <Typography variant=\"caption\" style={{ fontSize: 'inherit' }}>\n              {formatShortNumber(score)}\n            </Typography>\n          </Box>\n        </Tooltip>\n        {answer.correct && (\n          <Tooltip title={t('authorBox.correctAnswer')} arrow>\n            <Box className={`${styles.metaItem} ${styles.metaItemActive}`}>\n              <CheckCircle className={styles.metaIcon} />\n            </Box>\n          </Tooltip>\n        )}\n      </Box>\n\n      <Box className={styles.contentContainer}>\n        <Box className={styles.titleContainer}>\n          <Box className={styles.titleWrapper}>\n            <Typography component=\"div\" className={styles.title}>\n              {t('answer.questionTitle', {\n                question: answer.post?.title ?? '',\n              })}\n            </Typography>\n          </Box>\n        </Box>\n\n        <Typography variant=\"body2\" component=\"div\" className={styles.content}>\n          <span\n            dangerouslySetInnerHTML={{\n              __html: DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(answer.content), 200),\n              ),\n            }}\n          />\n        </Typography>\n\n        <Box className={styles.tagsRow}>\n          <Box className={styles.tags}>\n            {answer.post && <TagsAndEntities entity={answer.post} />}\n          </Box>\n          <Box className={styles.authorBoxContainer}>\n            <AuthorBox\n              userEntityRef={answer.author}\n              time={answer.created}\n              label={t('answer.answeredTime')}\n              anonymous={answer.anonymous}\n              compact\n            />\n          </Box>\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AnswerListItem.esm.js","sources":["../../../src/components/AnswersContainer/AnswerListItem.tsx"],"sourcesContent":["import { useState } 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 { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { questionRouteRef } from '../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { Box, makeStyles, Tooltip, Typography } from '@material-ui/core';\nimport numeral from 'numeral';\nimport ThumbUp from '@material-ui/icons/ThumbUp';\nimport CheckCircle from '@material-ui/icons/CheckCircle';\nimport { useNavigate } from 'react-router-dom';\nimport { AuthorBox } from '../AuthorBox/AuthorBox';\n\nexport interface AnswerListItemProps {\n  answer: AnswerResponse;\n  entity?: string;\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    height: '100%',\n    padding: theme.spacing(1, 2),\n    minHeight: 80,\n    transition: 'all 0.2s ease-in-out',\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n      '& $title': {\n        color: theme.palette.primary.main,\n      },\n    },\n    '&:first-child': {\n      paddingTop: theme.spacing(2),\n    },\n    cursor: 'pointer',\n  },\n  metaCol: {\n    minWidth: 64,\n    maxWidth: 64,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    marginRight: theme.spacing(1.5),\n    gap: theme.spacing(0.75),\n  },\n  metaItem: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing(0.5),\n    color: theme.palette.text.secondary,\n    width: '100%',\n    fontSize: '15px',\n  },\n  metaItemActive: {\n    color: theme.palette.success.main,\n    fontWeight: 500,\n  },\n  metaIcon: {\n    fontSize: 16,\n  },\n  title: {\n    fontWeight: 700,\n    fontSize: '1.1rem',\n    color: theme.palette.text.primary,\n    marginBottom: theme.spacing(0.5),\n    textOverflow: 'ellipsis',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    lineHeight: 1.2,\n    textDecoration: 'none',\n  },\n  content: {\n    color: theme.palette.text.primary,\n    opacity: 0.9,\n    margin: '4px 0 8px 0',\n    display: '-webkit-box',\n    WebkitLineClamp: 2,\n    WebkitBoxOrient: 'vertical',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    fontSize: '0.95rem',\n    minHeight: '20px',\n  },\n  tagsRow: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '100%',\n    marginTop: 'auto',\n  },\n  tags: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: 4,\n  },\n  authorBoxContainer: {\n    marginLeft: 'auto',\n    display: 'flex',\n    alignItems: 'center',\n  },\n  contentContainer: {\n    flex: 1,\n    minWidth: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n  },\n  titleContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    justifyContent: 'space-between',\n    marginBottom: theme.spacing(0.5),\n  },\n  titleWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n    flex: 1,\n    minWidth: 0,\n  },\n}));\n\nfunction formatShortNumber(num: number): string {\n  return num >= 1000 ? numeral(num).format('0.0 a') : num.toString();\n}\n\nexport const AnswerListItem = (props: AnswerListItemProps) => {\n  const { answer, entity } = props;\n  const [score] = useState(answer.score);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const styles = useStyles();\n  const navigate = useNavigate();\n\n  const questionRoute = useRouteRef(questionRouteRef);\n\n  const href = 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  const handleClick = (e: React.MouseEvent) => {\n    if (\n      (e.target as HTMLElement).closest('a') ||\n      (e.target as HTMLElement).closest('button')\n    ) {\n      return;\n    }\n    navigate(href);\n  };\n\n  return (\n    <Box className={styles.root} onClick={handleClick}>\n      <Box className={styles.metaCol} aria-label={t('common.postStats')}>\n        <Tooltip title={t('common.votesCount', { count: score })} arrow>\n          <Box className={styles.metaItem}>\n            <ThumbUp className={styles.metaIcon} />\n            <Typography variant=\"caption\" style={{ fontSize: 'inherit' }}>\n              {formatShortNumber(score)}\n            </Typography>\n          </Box>\n        </Tooltip>\n        {answer.correct && (\n          <Tooltip title={t('authorBox.correctAnswer')} arrow>\n            <Box className={`${styles.metaItem} ${styles.metaItemActive}`}>\n              <CheckCircle className={styles.metaIcon} />\n            </Box>\n          </Tooltip>\n        )}\n      </Box>\n\n      <Box className={styles.contentContainer}>\n        <Box className={styles.titleContainer}>\n          <Box className={styles.titleWrapper}>\n            <Typography component=\"div\" className={styles.title}>\n              {t('answer.questionTitle', {\n                question: answer.post?.title ?? '',\n              })}\n            </Typography>\n          </Box>\n        </Box>\n\n        <Typography variant=\"body2\" component=\"div\" className={styles.content}>\n          <span\n            dangerouslySetInnerHTML={{\n              __html: DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(answer.content), 200),\n              ),\n            }}\n          />\n        </Typography>\n\n        <Box className={styles.tagsRow}>\n          <Box className={styles.tags}>\n            {answer.post && <TagsAndEntities entity={answer.post} />}\n          </Box>\n          <Box className={styles.authorBoxContainer}>\n            <AuthorBox\n              userEntityRef={answer.author}\n              time={answer.created}\n              label={t('answer.answeredTime')}\n              anonymous={answer.anonymous}\n              compact\n            />\n          </Box>\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,248 +1,76 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import useDebounce from 'react-use/lib/useDebounce';
-import { useSearchParams } from 'react-router-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { EntityRefLink } from '@backstage/plugin-catalog-react';
-import { useAnalytics } from '@backstage/core-plugin-api';
-import { filterTags } from '@drodil/backstage-plugin-qeta-common';
 import { getFiltersWithDateRange } from '../../utils/utils.esm.js';
-import { filterKeys, FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
-import { AnswerList } from './AnswerList.esm.js';
-import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
-import '../../api.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
+import { QetaEntityContainer } from '../QetaEntityContainer/QetaEntityContainer.esm.js';
+import { AnswerListItem } from './AnswerListItem.esm.js';
+import { AnswersGridItem } from './AnswersGridItem.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@backstage/plugin-permission-common';
-import { Box, Grid, Typography, Button, Collapse } from '@material-ui/core';
-import { SearchBar } from '../SearchBar/SearchBar.esm.js';
-import FilterList from '@material-ui/icons/FilterList';
 
-const EXPANDED_LOCAL_STORAGE_KEY = "qeta-answer-filters-expanded";
 const AnswersContainer = (props) => {
-  const { tags, author, entity, showFilters, showTitle, title } = props;
-  const analytics = useAnalytics();
-  const [page, setPage] = useState(1);
-  const [answersPerPage, setAnswersPerPage] = useState(25);
-  const [showFilterPanel, setShowFilterPanel] = useState(
-    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === "true"
-  );
-  const [answers, setAnswers] = useState([]);
-  const [hasMore, setHasMore] = useState(true);
-  const [total, setTotal] = useState(0);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [searchQuery, setSearchQuery] = useState("");
-  const [filters, setFilters] = useState({
-    order: "desc",
-    orderBy: "created",
-    searchQuery: "",
-    dateRange: "",
-    entities: entity ? [entity] : void 0,
-    tags: tags ?? [],
-    noVotes: "false"
-  });
+  const { tags, author, entity, showFilters, title, showTitle, prefix } = props;
   const { t } = useTranslationRef(qetaTranslationRef);
-  useEffect(() => {
-    localStorage.setItem(
-      EXPANDED_LOCAL_STORAGE_KEY,
-      showFilterPanel ? "true" : "false"
-    );
-  }, [showFilterPanel]);
-  const onFilterChange = (changes) => {
-    const changesArray = Array.isArray(changes) ? changes : [changes];
-    setPage(1);
-    setAnswers([]);
-    setFilters((prev) => {
-      const newValue = { ...prev };
-      for (const { key, value } of changesArray) {
-        newValue[key] = value;
-      }
-      return newValue;
-    });
-    setSearchParams((prev) => {
-      const newValue = prev;
-      for (const { key, value } of changesArray) {
-        if (!value || value === "false") {
-          newValue.delete(key);
-        } else if (Array.isArray(value)) {
-          if (value.length === 0) {
-            newValue.delete(key);
-          } else {
-            newValue.set(key, value.join(","));
-          }
-        } else if (value.length > 0) {
-          newValue.set(key, value);
-        } else {
-          newValue.delete(key);
-        }
-      }
-      return newValue;
-    });
+  const fetchAnswers = async (api, limit, offset, filters) => {
+    return api.getAnswers({
+      limit,
+      offset,
+      author,
+      ...getFiltersWithDateRange(filters)
+    }).then((response) => ({
+      items: response.answers,
+      total: response.total
+    }));
   };
-  const onSearchQueryChange = (query) => {
-    setPage(1);
-    setAnswers([]);
-    if (query) {
-      analytics.captureEvent("qeta_search", query);
-    }
-    setSearchQuery(query);
-  };
-  useDebounce(
-    () => {
-      if (filters.searchQuery !== searchQuery) {
-        setPage(1);
-        setAnswers([]);
-        setFilters({ ...filters, searchQuery });
-      }
-    },
-    400,
-    [searchQuery]
-  );
-  useEffect(() => {
-    let filtersApplied = false;
-    searchParams.forEach((value, key) => {
-      try {
-        if (key === "page") {
-          const pv = Number.parseInt(value, 10);
-          if (pv > 0) {
-            setPage(pv);
-          } else {
-            setPage(1);
-            setAnswers([]);
-          }
-        } else if (key === "answersPerPage") {
-          const qpp = Number.parseInt(value, 10);
-          if (qpp > 0) setAnswersPerPage(qpp);
-        } else if (filterKeys.includes(key)) {
-          filtersApplied = true;
-          if (key === "tags") {
-            filters.tags = filterTags(value.split(",")) ?? [];
-          } else if (key === "entities") {
-            filters.entities = value.split(",");
-          } else {
-            filters[key] = value;
-          }
-        }
-      } catch (_e) {
-      }
-    });
-    setFilters(filters);
-    if (filtersApplied) {
-      setShowFilterPanel(true);
-    }
-  }, [searchParams, filters]);
-  const {
-    value: response,
-    loading,
-    error
-  } = useQetaApi(
-    (api) => {
-      return api.getAnswers({
-        limit: answersPerPage,
-        offset: (page - 1) * answersPerPage,
-        author,
-        ...getFiltersWithDateRange(filters)
-      });
-    },
-    [page, filters, answersPerPage]
-  );
-  useEffect(() => {
-    if (response) {
-      if (page === 1) {
-        setAnswers(response.answers);
-      } else {
-        setAnswers((prev) => [...prev, ...response.answers]);
-      }
-      setHasMore(response.answers.length >= answersPerPage);
-      setTotal(response.total);
-    }
-  }, [response, page, answersPerPage]);
-  const combinedResponse = response ? {
-    ...response,
-    answers: page === 1 && !loading ? response.answers : answers,
-    total
-  } : void 0;
-  let shownTitle = title;
-  let link = void 0;
+  let resolvedTitle = title;
   if (author) {
-    shownTitle = `${t("answerContainer.title.answersBy")} `;
-    link = /* @__PURE__ */ jsx(EntityRefLink, { entityRef: author, hideIcon: true, defaultKind: "user" });
+    resolvedTitle = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t("answerContainer.title.answersBy", {}),
+      " ",
+      /* @__PURE__ */ jsx(EntityRefLink, { entityRef: author, hideIcon: true, defaultKind: "user" })
+    ] });
   } else if (entity) {
-    shownTitle = `${t("answerContainer.title.answersAbout")} `;
-    link = /* @__PURE__ */ jsx(EntityRefLink, { entityRef: entity });
+    resolvedTitle = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t("answerContainer.title.answersAbout", {}),
+      " ",
+      /* @__PURE__ */ jsx(EntityRefLink, { entityRef: entity })
+    ] });
   } else if (tags) {
-    shownTitle = t("answerContainer.title.answersTagged", {
+    resolvedTitle = t("answerContainer.title.answersTagged", {
       tags: tags.join(", ")
     });
   }
-  return /* @__PURE__ */ jsxs(Box, { className: "qetaAnswersContainer", children: [
-    showTitle && /* @__PURE__ */ jsx(Box, { mb: 3, children: /* @__PURE__ */ jsx(Grid, { container: true, alignItems: "center", justifyContent: "space-between", children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(
-      Typography,
-      {
-        variant: "h5",
-        className: "qetaAnswersContainerTitle",
-        style: { fontWeight: 500, paddingBottom: 2 },
-        children: [
-          shownTitle,
-          " ",
-          link
-        ]
-      }
-    ) }) }) }),
-    /* @__PURE__ */ jsx(Grid, { container: true, alignItems: "flex-end", justifyContent: "space-between", children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsx(
-      SearchBar,
-      {
-        onSearch: onSearchQueryChange,
-        label: t("answerContainer.search.label"),
-        loading
-      }
-    ) }) }),
-    response && /* @__PURE__ */ jsx(Box, { mt: 2, mb: 2, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "h6",
-          className: "qetaAnswersContainerAnswerCount",
-          style: { fontWeight: 500, paddingBottom: 2 },
-          children: t("common.answersCount", { count: response?.total ?? 0 })
-        }
-      ) }),
-      (showFilters ?? true) && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: () => {
-            setShowFilterPanel(!showFilterPanel);
-          },
-          className: "qetaAnswerContainerFilterPanelBtn",
-          startIcon: /* @__PURE__ */ jsx(FilterList, {}),
-          children: t("filterPanel.filterButton")
-        }
-      ) })
-    ] }) }),
-    (showFilters ?? true) && /* @__PURE__ */ jsx(Collapse, { in: showFilterPanel, children: /* @__PURE__ */ jsx(
-      FilterPanel,
-      {
-        onChange: onFilterChange,
-        filters
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      AnswerList,
-      {
-        loading,
-        error,
-        response: combinedResponse,
-        entity,
-        entityPage: entity !== void 0,
-        tags,
-        hasMore,
-        loadNextPage: () => setPage((prev) => prev + 1)
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    QetaEntityContainer,
+    {
+      prefix: prefix ?? "answers",
+      fetch: fetchAnswers,
+      renderListItem: (answer) => /* @__PURE__ */ jsx(AnswerListItem, { answer, entity }),
+      renderGridItem: (answer) => /* @__PURE__ */ jsx(AnswersGridItem, { answer, entity }),
+      defaultView: "list",
+      filterPanelProps: showFilters ?? true ? {
+        answerFilters: true
+      } : void 0,
+      initialFilters: {
+        order: "desc",
+        orderBy: "created",
+        searchQuery: "",
+        dateRange: "",
+        entities: entity ? [entity] : void 0,
+        tags: tags ?? [],
+        noVotes: "false"
+      },
+      filterKeys: [
+        "orderBy",
+        "searchQuery",
+        "dateRange",
+        "noVotes",
+        "tags",
+        "entities"
+      ],
+      title: showTitle ? resolvedTitle : void 0,
+      defaultPageSize: 25
+    }
+  );
 };
 
 export { AnswersContainer };