@drodil/backstage-plugin-qeta-react 3.7.2 → 3.9.0

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

@@ -14,6 +14,7 @@ import { Skeleton } from '@material-ui/lab';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
 
 const useStyles = makeStyles(
   (theme) => createStyles({
@@ -128,7 +129,6 @@ const AIAnswerCard = (props) => {
         /* @__PURE__ */ React.createElement(
           IconButton,
           {
-            color: "primary",
             onClick: () => {
               setExpanded(!expanded);
               localStorage.setItem(
@@ -138,7 +138,7 @@ const AIAnswerCard = (props) => {
             },
             "aria-expanded": expanded
           },
-          /* @__PURE__ */ React.createElement(KeyboardArrowDownIcon, null)
+          expanded ? /* @__PURE__ */ React.createElement(KeyboardArrowUpIcon, null) : /* @__PURE__ */ React.createElement(KeyboardArrowDownIcon, null)
         )
       )),
       subheader: answer ? /* @__PURE__ */ React.createElement(RelativeTimeWithTooltip, { value: answer.created ?? /* @__PURE__ */ new Date() }) : /* @__PURE__ */ React.createElement(React.Fragment, null, t("aiAnswerCard.loading"))

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 {\n  Card,\n  CardContent,\n  CardHeader,\n  Collapse,\n  createStyles,\n  IconButton,\n  makeStyles,\n  Theme,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useAI, useTranslation } from '../../hooks';\nimport FlareIcon from '@material-ui/icons/Flare';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { Skeleton } from '@material-ui/lab';\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';\n\nexport type QetaAIAnswerCardClassKey = 'card';\n\nconst useStyles = makeStyles(\n  (theme: 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(undefined);\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                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            <Tooltip\n              title={expanded ? t('aiAnswerCard.hide') : t('aiAnswerCard.show')}\n            >\n              <IconButton\n                color=\"primary\"\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                <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 && (\n            <MarkdownRenderer\n              content={answer.answer}\n              className={styles.markdown}\n            />\n          )}\n        </CardContent>\n      </Collapse>\n    </Card>\n  );\n};\n"],"names":[],"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 {\n  Card,\n  CardContent,\n  CardHeader,\n  Collapse,\n  createStyles,\n  IconButton,\n  makeStyles,\n  Theme,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useAI, useTranslation } from '../../hooks';\nimport FlareIcon from '@material-ui/icons/Flare';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { Skeleton } from '@material-ui/lab';\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';\n\nexport type QetaAIAnswerCardClassKey = 'card';\n\nconst useStyles = makeStyles(\n  (theme: 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(undefined);\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                >\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 && (\n            <MarkdownRenderer\n              content={answer.answer}\n              className={styles.markdown}\n            />\n          )}\n        </CardContent>\n      </Collapse>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -41,68 +41,78 @@ const AnswerCard = (props) => {
       id: `answer_${answer.id}`,
       className: `qetaAnswerCard ${styles.questionCard} ${highlightedAnswer ? styles.highlight : ""}`
     },
-    /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 0, justifyContent: "flex-start" }, /* @__PURE__ */ React.createElement(Grid, { container: true, item: true, xs: 1, justifyContent: "center" }, /* @__PURE__ */ React.createElement("div", { className: styles.questionCardVote }, /* @__PURE__ */ React.createElement(VoteButtons, { entity: answerEntity, post: question }), /* @__PURE__ */ React.createElement(LinkButton, { entity: answerEntity }))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 11, className: styles.answerCardContent }, editMode ? /* @__PURE__ */ React.createElement(
-      AnswerForm,
-      {
-        post: question,
-        onPost: onAnswerEdit,
-        id: answerEntity.id
-      }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", gutterBottom: true }, /* @__PURE__ */ React.createElement(
-      MarkdownRenderer,
-      {
-        className: "qetaAndwerCardAnswerContent",
-        content: answerEntity.content
-      }
-    )), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(
       Grid,
       {
         container: true,
-        item: true,
-        spacing: 1,
-        justifyContent: "space-between",
-        alignItems: "flex-end",
-        className: styles.questionCardMetadata
+        spacing: 0,
+        justifyContent: "flex-start",
+        style: { flexWrap: "nowrap" }
       },
-      /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 9, style: { alignSelf: "flex-end" } }, (answerEntity.own || answerEntity.canDelete || answerEntity.canEdit) && /* @__PURE__ */ React.createElement(
-        Box,
+      /* @__PURE__ */ React.createElement(Grid, { item: true, justifyContent: "center" }, /* @__PURE__ */ React.createElement("div", { className: styles.questionCardVote }, /* @__PURE__ */ React.createElement(VoteButtons, { entity: answerEntity, post: question }), /* @__PURE__ */ React.createElement(LinkButton, { entity: answerEntity }))),
+      /* @__PURE__ */ React.createElement(Grid, { item: true, className: styles.answerCardContent }, editMode ? /* @__PURE__ */ React.createElement(
+        AnswerForm,
+        {
+          post: question,
+          onPost: onAnswerEdit,
+          id: answerEntity.id
+        }
+      ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", gutterBottom: true }, /* @__PURE__ */ React.createElement(
+        MarkdownRenderer,
+        {
+          className: "qetaAndwerCardAnswerContent",
+          content: answerEntity.content
+        }
+      ))), /* @__PURE__ */ React.createElement(
+        Grid,
         {
-          className: `qetaAnswerCardActions ${styles.questionCardActions}`
+          container: true,
+          item: true,
+          spacing: 1,
+          justifyContent: "space-between",
+          alignItems: "flex-end",
+          className: styles.questionCardMetadata
         },
-        !answerEntity.correct && (answerEntity.own || answerEntity.canDelete) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-          Button,
+        /* @__PURE__ */ React.createElement(Grid, { item: true, style: { alignSelf: "flex-end" } }, (answerEntity.own || answerEntity.canDelete || answerEntity.canEdit) && /* @__PURE__ */ React.createElement(
+          Box,
           {
-            variant: "outlined",
-            size: "small",
-            color: "secondary",
-            onClick: handleDeleteModalOpen,
-            className: `${styles.marginLeft} qetaAnswerCardDeleteBtn`,
-            startIcon: /* @__PURE__ */ React.createElement(DeleteIcon, null)
+            className: `qetaAnswerCardActions ${styles.questionCardActions}`
           },
-          t("deleteModal.deleteButton")
-        ), /* @__PURE__ */ React.createElement(
-          DeleteModal,
-          {
-            open: deleteModalOpen,
-            onClose: handleDeleteModalClose,
-            entity: answerEntity,
-            question
-          }
+          !answerEntity.correct && (answerEntity.own || answerEntity.canDelete) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+            Button,
+            {
+              variant: "outlined",
+              size: "small",
+              color: "secondary",
+              onClick: handleDeleteModalOpen,
+              className: `${styles.marginLeft} qetaAnswerCardDeleteBtn`,
+              startIcon: /* @__PURE__ */ React.createElement(DeleteIcon, null)
+            },
+            t("deleteModal.deleteButton")
+          ), /* @__PURE__ */ React.createElement(
+            DeleteModal,
+            {
+              open: deleteModalOpen,
+              onClose: handleDeleteModalClose,
+              entity: answerEntity,
+              question
+            }
+          )),
+          (answerEntity.own || answerEntity.canEdit) && /* @__PURE__ */ React.createElement(
+            Button,
+            {
+              variant: "outlined",
+              size: "small",
+              startIcon: /* @__PURE__ */ React.createElement(EditIcon, null),
+              onClick: () => setEditMode(true),
+              className: "qetaAnswerCardEditBtn"
+            },
+            t("questionPage.editButton")
+          )
         )),
-        (answerEntity.own || answerEntity.canEdit) && /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            variant: "outlined",
-            size: "small",
-            startIcon: /* @__PURE__ */ React.createElement(EditIcon, null),
-            onClick: () => setEditMode(true),
-            className: "qetaAnswerCardEditBtn"
-          },
-          t("questionPage.editButton")
-        )
-      )),
-      /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3, className: styles.noPadding }, /* @__PURE__ */ React.createElement(AuthorBox, { entity: answerEntity }))
-    )))))
+        /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3, className: styles.noPadding }, /* @__PURE__ */ React.createElement(AuthorBox, { entity: answerEntity }))
+      )))
+    ))
   ), /* @__PURE__ */ React.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 {\n  Box,\n  Button,\n  Card,\n  CardContent,\n  Grid,\n  Typography,\n} from '@material-ui/core';\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 '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { DeleteModal } from '../DeleteModal';\nimport { 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 container spacing={0} justifyContent=\"flex-start\">\n            <Grid container item xs={1} justifyContent=\"center\">\n              <div className={styles.questionCardVote}>\n                <VoteButtons entity={answerEntity} post={question} />\n                <LinkButton entity={answerEntity} />\n              </div>\n            </Grid>\n            <Grid item xs={11} className={styles.answerCardContent}>\n              {editMode ? (\n                <AnswerForm\n                  post={question}\n                  onPost={onAnswerEdit}\n                  id={answerEntity.id}\n                />\n              ) : (\n                <>\n                  <Typography variant=\"body1\" gutterBottom>\n                    <MarkdownRenderer\n                      className=\"qetaAndwerCardAnswerContent\"\n                      content={answerEntity.content}\n                    />\n                  </Typography>\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 xs={9} 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.marginLeft} 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":[],"mappings":"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"}
+{"version":3,"file":"AnswerCard.esm.js","sources":["../../../src/components/AnswerCard/AnswerCard.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Card,\n  CardContent,\n  Grid,\n  Typography,\n} from '@material-ui/core';\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 '@material-ui/icons/Delete';\nimport EditIcon from '@material-ui/icons/Edit';\nimport {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { DeleteModal } from '../DeleteModal';\nimport { 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={0}\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}>\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.marginLeft} 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":[],"mappings":"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"}

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

@@ -28,7 +28,6 @@ const AnswersContainer = (props) => {
     orderBy: "created",
     searchQuery: "",
     dateRange: "",
-    noCorrectAnswer: "false",
     entity: entity ?? "",
     tags: tags ?? [],
     noVotes: "false"
@@ -42,26 +41,32 @@ const AnswersContainer = (props) => {
       return newValue;
     });
   };
-  const onFilterChange = (key, value) => {
-    if (filters[key] === value) {
-      return;
-    }
+  const onFilterChange = (changes) => {
+    const changesArray = Array.isArray(changes) ? changes : [changes];
     setPage(1);
-    setFilters({ ...filters, ...{ [key]: value } });
+    setFilters((prev) => {
+      const newValue = { ...prev };
+      for (const { key, value } of changesArray) {
+        newValue[key] = value;
+      }
+      return newValue;
+    });
     setSearchParams((prev) => {
       const newValue = prev;
-      if (!value || value === "false") {
-        newValue.delete(key);
-      } else if (Array.isArray(value)) {
-        if (value.length === 0) {
+      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.set(key, value.join(","));
+          newValue.delete(key);
         }
-      } else if (value.length > 0) {
-        newValue.set(key, value);
-      } else {
-        newValue.delete(key);
       }
       return newValue;
     });
@@ -190,8 +195,7 @@ const AnswersContainer = (props) => {
     FilterPanel,
     {
       onChange: onFilterChange,
-      filters,
-      answerFilters: true
+      filters
     }
   )), /* @__PURE__ */ React.createElement(
     AnswerList,

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

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

package/dist/components/CollectionsGrid/CollectionsGrid.esm.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Grid, TextField, IconButton } from '@material-ui/core';
+import { Box, Grid, TextField, IconButton, Typography, Button, Collapse } from '@material-ui/core';
 import { CollectionsGridContent } from './CollectionsGridContent.esm.js';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import '@backstage/core-plugin-api';
@@ -9,18 +9,22 @@ import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import useDebounce from 'react-use/lib/useDebounce';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
-import { NoCollectionsCard } from './NoCollectionsCard.esm.js';
+import { FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
+import FilterList from '@material-ui/icons/FilterList';
+import { getFiltersWithDateRange } from '../../utils/utils.esm.js';
 
 const CollectionsGrid = (props) => {
+  const { showFilters } = props;
   const { t } = useTranslation();
   const [page, setPage] = React.useState(1);
   const [pageCount, setPageCount] = React.useState(1);
   const [searchQuery, setSearchQuery] = React.useState("");
   const [collectionsPerPage, setCollectionsPerPage] = React.useState(25);
+  const [showFilterPanel, setShowFilterPanel] = React.useState(false);
   const [filters, setFilters] = React.useState({
     order: "desc",
     searchQuery: "",
-    owner: props.owner
+    orderBy: "created"
   });
   const {
     value: response,
@@ -31,7 +35,7 @@ const CollectionsGrid = (props) => {
       return api.getCollections({
         limit: collectionsPerPage,
         offset: (page - 1) * collectionsPerPage,
-        ...filters
+        ...getFiltersWithDateRange(filters)
       });
     },
     [collectionsPerPage, page, filters]
@@ -50,10 +54,18 @@ const CollectionsGrid = (props) => {
       setPageCount(Math.ceil(response.total / collectionsPerPage));
     }
   }, [response, collectionsPerPage]);
-  if (!response?.collections || response.collections.length === 0) {
-    return /* @__PURE__ */ React.createElement(NoCollectionsCard, null);
-  }
-  return /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+  const onFilterChange = (changes) => {
+    const changesArray = Array.isArray(changes) ? changes : [changes];
+    setPage(1);
+    setFilters((prev) => {
+      const newValue = { ...prev };
+      for (const { key, value } of changesArray) {
+        newValue[key] = value;
+      }
+      return newValue;
+    });
+  };
+  return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 4 }, /* @__PURE__ */ React.createElement(
     TextField,
     {
       id: "search-bar",
@@ -64,14 +76,28 @@ const CollectionsGrid = (props) => {
       placeholder: t("collectionsPage.search.placeholder"),
       size: "small"
     }
-  ), /* @__PURE__ */ React.createElement(IconButton, { type: "submit", "aria-label": "search" })), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(IconButton, { type: "submit", "aria-label": "search" }))), /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-between" }, response && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: "qetaCollectionsContainerdCount" }, t("common.collections", { count: response?.total ?? 0 }))), response && (showFilters ?? true) && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      onClick: () => setShowFilterPanel(!showFilterPanel),
+      className: "qetaCollectionsContainerFilterPanelBtn",
+      startIcon: /* @__PURE__ */ React.createElement(FilterList, null)
+    },
+    t("filterPanel.filterButton")
+  ))), (showFilters ?? true) && /* @__PURE__ */ React.createElement(Collapse, { in: showFilterPanel }, /* @__PURE__ */ React.createElement(
+    FilterPanel,
+    {
+      onChange: onFilterChange,
+      filters
+    }
+  )), /* @__PURE__ */ React.createElement(
     CollectionsGridContent,
     {
       loading,
       error,
       response
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), response && response?.total > 0 && /* @__PURE__ */ React.createElement(
     QetaPagination,
     {
       pageSize: collectionsPerPage,

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionsGrid.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGrid.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Grid, IconButton, TextField } from '@material-ui/core';\nimport { CollectionsGridContent } from './CollectionsGridContent';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { NoCollectionsCard } from './NoCollectionsCard';\n\nexport type CollectionsGridProps = {\n  owner?: string;\n};\n\ntype CollectionFilters = {\n  order: 'asc' | 'desc';\n  orderBy?: 'created' | 'owner';\n  searchQuery: string;\n  owner?: string;\n};\n\nexport const CollectionsGrid = (props: CollectionsGridProps) => {\n  const { t } = useTranslation();\n  const [page, setPage] = React.useState(1);\n  const [pageCount, setPageCount] = React.useState(1);\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const [collectionsPerPage, setCollectionsPerPage] = React.useState(25);\n  const [filters, setFilters] = React.useState<CollectionFilters>({\n    order: 'desc',\n    searchQuery: '',\n    owner: props.owner,\n  });\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api => {\n      return api.getCollections({\n        limit: collectionsPerPage,\n        offset: (page - 1) * collectionsPerPage,\n        ...filters,\n      });\n    },\n    [collectionsPerPage, page, filters],\n  );\n\n  useDebounce(\n    () => {\n      if (filters.searchQuery !== searchQuery) {\n        setFilters({ ...filters, searchQuery: searchQuery });\n      }\n    },\n    400,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    if (response) {\n      setPageCount(Math.ceil(response.total / collectionsPerPage));\n    }\n  }, [response, collectionsPerPage]);\n\n  if (!response?.collections || response.collections.length === 0) {\n    return <NoCollectionsCard />;\n  }\n\n  return (\n    <Grid container>\n      <Grid item xs={12}>\n        <TextField\n          id=\"search-bar\"\n          className=\"text qetaUsersContainerSearchInput\"\n          onChange={(\n            event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n          ) => setSearchQuery(event.target.value)}\n          label={t('collectionsPage.search.label')}\n          variant=\"outlined\"\n          placeholder={t('collectionsPage.search.placeholder')}\n          size=\"small\"\n        />\n        <IconButton type=\"submit\" aria-label=\"search\" />\n      </Grid>\n\n      <CollectionsGridContent\n        loading={loading}\n        error={error}\n        response={response}\n      />\n      <QetaPagination\n        pageSize={collectionsPerPage}\n        handlePageChange={(_e, p) => setPage(p)}\n        handlePageSizeChange={e =>\n          setCollectionsPerPage(Number(e.target.value))\n        }\n        page={page}\n        pageCount={pageCount}\n      />\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CollectionsGrid.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGrid.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport {\n  Box,\n  Button,\n  Collapse,\n  Grid,\n  IconButton,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport { CollectionsGridContent } from './CollectionsGridContent';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { CollectionFilters, FilterPanel } from '../FilterPanel/FilterPanel';\nimport FilterList from '@material-ui/icons/FilterList';\nimport { getFiltersWithDateRange } from '../../utils';\n\nexport type CollectionsGridProps = {\n  owner?: string;\n  showFilters?: boolean;\n};\n\nexport type CollectionFilterChange = {\n  key: keyof CollectionFilters;\n  value?: CollectionFilters[keyof CollectionFilters];\n};\n\nexport const CollectionsGrid = (props: CollectionsGridProps) => {\n  const { showFilters } = props;\n  const { t } = useTranslation();\n  const [page, setPage] = React.useState(1);\n  const [pageCount, setPageCount] = React.useState(1);\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const [collectionsPerPage, setCollectionsPerPage] = React.useState(25);\n  const [showFilterPanel, setShowFilterPanel] = React.useState(false);\n  const [filters, setFilters] = React.useState<CollectionFilters>({\n    order: 'desc',\n    searchQuery: '',\n    orderBy: 'created',\n  });\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api => {\n      return api.getCollections({\n        limit: collectionsPerPage,\n        offset: (page - 1) * collectionsPerPage,\n        ...(getFiltersWithDateRange(filters) as any),\n      });\n    },\n    [collectionsPerPage, page, filters],\n  );\n\n  useDebounce(\n    () => {\n      if (filters.searchQuery !== searchQuery) {\n        setFilters({ ...filters, searchQuery: searchQuery });\n      }\n    },\n    400,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    if (response) {\n      setPageCount(Math.ceil(response.total / collectionsPerPage));\n    }\n  }, [response, collectionsPerPage]);\n\n  const onFilterChange = (\n    changes: CollectionFilterChange | CollectionFilterChange[],\n  ) => {\n    const changesArray = Array.isArray(changes) ? changes : [changes];\n    setPage(1);\n    setFilters(prev => {\n      const newValue = { ...prev };\n      for (const { key, value } of changesArray) {\n        (newValue as any)[key] = value;\n      }\n      return newValue;\n    });\n  };\n\n  return (\n    <Box>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <TextField\n            id=\"search-bar\"\n            className=\"text qetaUsersContainerSearchInput\"\n            onChange={(\n              event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n            ) => setSearchQuery(event.target.value)}\n            label={t('collectionsPage.search.label')}\n            variant=\"outlined\"\n            placeholder={t('collectionsPage.search.placeholder')}\n            size=\"small\"\n          />\n          <IconButton type=\"submit\" aria-label=\"search\" />\n        </Grid>\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        {response && (\n          <Grid item>\n            <Typography variant=\"h6\" className=\"qetaCollectionsContainerdCount\">\n              {t('common.collections', { count: response?.total ?? 0 })}\n            </Typography>\n          </Grid>\n        )}\n        {response && (showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => setShowFilterPanel(!showFilterPanel)}\n              className=\"qetaCollectionsContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel<CollectionFilters>\n            onChange={onFilterChange}\n            filters={filters}\n          />\n        </Collapse>\n      )}\n      <CollectionsGridContent\n        loading={loading}\n        error={error}\n        response={response}\n      />\n      {response && response?.total > 0 && (\n        <QetaPagination\n          pageSize={collectionsPerPage}\n          handlePageChange={(_e, p) => setPage(p)}\n          handlePageSizeChange={e =>\n            setCollectionsPerPage(Number(e.target.value))\n          }\n          page={page}\n          pageCount={pageCount}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CollectionsGrid/CollectionsGridContent.esm.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Progress, WarningPanel } from '@backstage/core-components';
-import { Grid, Typography } from '@material-ui/core';
+import { WarningPanel } from '@backstage/core-components';
+import { Grid } from '@material-ui/core';
 import { CollectionsGridItem } from './CollectionsGridItem.esm.js';
 import '@backstage/core-plugin-api';
 import '../../api.esm.js';
@@ -8,18 +8,20 @@ import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
+import { LoadingGrid } from '../LoadingGrid/LoadingGrid.esm.js';
+import { NoCollectionsCard } from './NoCollectionsCard.esm.js';
 
 const CollectionsGridContent = (props) => {
   const { loading, error, response } = props;
   const [initialLoad, setInitialLoad] = useState(true);
   const { t } = useTranslation();
   useEffect(() => {
-    if (!initialLoad) {
+    if (!loading) {
       setInitialLoad(false);
     }
   }, [initialLoad, loading]);
   if (loading && initialLoad) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+    return /* @__PURE__ */ React.createElement(LoadingGrid, null);
   }
   if (error || response === void 0) {
     return /* @__PURE__ */ React.createElement(
@@ -31,10 +33,10 @@ const CollectionsGridContent = (props) => {
       error?.message
     );
   }
-  if (initialLoad && (!response.collections || response.collections.length === 0)) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+  if (!response.collections || response.collections.length === 0) {
+    return /* @__PURE__ */ React.createElement(NoCollectionsCard, null);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: "qetaPostsContainerQuestionCount" }, t("common.collections", { count: response?.total ?? 0 }))), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     Grid,
     {
       container: true,

package/dist/components/CollectionsGrid/CollectionsGridContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionsGridContent.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGridContent.tsx"],"sourcesContent":["import { CollectionsResponse } from '@drodil/backstage-plugin-qeta-common';\nimport React, { useEffect, useState } from 'react';\nimport { Progress, WarningPanel } from '@backstage/core-components';\nimport { Grid, Typography } from '@material-ui/core';\nimport { CollectionsGridItem } from './CollectionsGridItem';\nimport { useTranslation } from '../../hooks';\n\nexport const CollectionsGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: CollectionsResponse;\n}) => {\n  const { loading, error, response } = props;\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  if (loading && initialLoad) {\n    return <Progress />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel\n        severity=\"error\"\n        title={t('postsList.errorLoading', { itemType: 'collections' })}\n      >\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (\n    initialLoad &&\n    (!response.collections || response.collections.length === 0)\n  ) {\n    return <Progress />;\n  }\n\n  return (\n    <>\n      <Grid item>\n        <Typography variant=\"h6\" className=\"qetaPostsContainerQuestionCount\">\n          {t('common.collections', { count: response?.total ?? 0 })}\n        </Typography>\n      </Grid>\n      <Grid\n        container\n        item\n        direction=\"row\"\n        alignItems=\"stretch\"\n        style={{ marginTop: '1rem' }}\n      >\n        {response.collections.map(p => {\n          return (\n            <Grid item xs={12} md={4} lg={3} key={p.id}>\n              <CollectionsGridItem collection={p} />\n            </Grid>\n          );\n        })}\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAOa,MAAA,sBAAA,GAAyB,CAAC,KAIjC,KAAA;AACJ,EAAA,MAAM,EAAE,OAAA,EAAS,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AACrC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AACnD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAE7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,WAAa,EAAA;AAChB,MAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,KACtB;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,OAAO,CAAC,CAAA,CAAA;AAEzB,EAAA,IAAI,WAAW,WAAa,EAAA;AAC1B,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA,CAAA;AAAA,GACnB;AAEA,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,OAAO,CAAE,CAAA,wBAAA,EAA0B,EAAE,QAAA,EAAU,eAAe,CAAA;AAAA,OAAA;AAAA,MAE7D,KAAO,EAAA,OAAA;AAAA,KACV,CAAA;AAAA,GAEJ;AAEA,EAAA,IACE,gBACC,CAAC,QAAA,CAAS,eAAe,QAAS,CAAA,WAAA,CAAY,WAAW,CAC1D,CAAA,EAAA;AACA,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA,CAAA;AAAA,GACnB;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,IAAK,EAAA,EAAA,IAAA,EAAI,wBACP,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,IAAK,EAAA,SAAA,EAAU,qCAChC,CAAE,CAAA,oBAAA,EAAsB,EAAE,KAAO,EAAA,QAAA,EAAU,SAAS,CAAE,EAAC,CAC1D,CACF,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,IAAI,EAAA,IAAA;AAAA,MACJ,SAAU,EAAA,KAAA;AAAA,MACV,UAAW,EAAA,SAAA;AAAA,MACX,KAAA,EAAO,EAAE,SAAA,EAAW,MAAO,EAAA;AAAA,KAAA;AAAA,IAE1B,QAAA,CAAS,WAAY,CAAA,GAAA,CAAI,CAAK,CAAA,KAAA;AAC7B,MAAA,2CACG,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,IAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EAAG,KAAK,CAAE,CAAA,EAAA,EAAA,sCACrC,mBAAoB,EAAA,EAAA,UAAA,EAAY,GAAG,CACtC,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GAEL,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CollectionsGridContent.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGridContent.tsx"],"sourcesContent":["import { CollectionsResponse } from '@drodil/backstage-plugin-qeta-common';\nimport React, { useEffect, useState } from 'react';\nimport { WarningPanel } from '@backstage/core-components';\nimport { Grid } from '@material-ui/core';\nimport { CollectionsGridItem } from './CollectionsGridItem';\nimport { useTranslation } from '../../hooks';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { NoCollectionsCard } from './NoCollectionsCard';\n\nexport const CollectionsGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: CollectionsResponse;\n}) => {\n  const { loading, error, response } = props;\n  const [initialLoad, setInitialLoad] = useState(true);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (!loading) {\n      setInitialLoad(false);\n    }\n  }, [initialLoad, loading]);\n\n  if (loading && initialLoad) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel\n        severity=\"error\"\n        title={t('postsList.errorLoading', { itemType: 'collections' })}\n      >\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response.collections || response.collections.length === 0) {\n    return <NoCollectionsCard />;\n  }\n\n  return (\n    <>\n      <Grid\n        container\n        item\n        direction=\"row\"\n        alignItems=\"stretch\"\n        style={{ marginTop: '1rem' }}\n      >\n        {response.collections.map(p => {\n          return (\n            <Grid item xs={12} md={4} lg={3} key={p.id}>\n              <CollectionsGridItem collection={p} />\n            </Grid>\n          );\n        })}\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AASa,MAAA,sBAAA,GAAyB,CAAC,KAIjC,KAAA;AACJ,EAAA,MAAM,EAAE,OAAA,EAAS,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AACrC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AACnD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAE7B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,KACtB;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,OAAO,CAAC,CAAA,CAAA;AAEzB,EAAA,IAAI,WAAW,WAAa,EAAA;AAC1B,IAAA,2CAAQ,WAAY,EAAA,IAAA,CAAA,CAAA;AAAA,GACtB;AAEA,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,OAAO,CAAE,CAAA,wBAAA,EAA0B,EAAE,QAAA,EAAU,eAAe,CAAA;AAAA,OAAA;AAAA,MAE7D,KAAO,EAAA,OAAA;AAAA,KACV,CAAA;AAAA,GAEJ;AAEA,EAAA,IAAI,CAAC,QAAS,CAAA,WAAA,IAAe,QAAS,CAAA,WAAA,CAAY,WAAW,CAAG,EAAA;AAC9D,IAAA,2CAAQ,iBAAkB,EAAA,IAAA,CAAA,CAAA;AAAA,GAC5B;AAEA,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,IAAI,EAAA,IAAA;AAAA,MACJ,SAAU,EAAA,KAAA;AAAA,MACV,UAAW,EAAA,SAAA;AAAA,MACX,KAAA,EAAO,EAAE,SAAA,EAAW,MAAO,EAAA;AAAA,KAAA;AAAA,IAE1B,QAAA,CAAS,WAAY,CAAA,GAAA,CAAI,CAAK,CAAA,KAAA;AAC7B,MAAA,2CACG,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,IAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EAAG,KAAK,CAAE,CAAA,EAAA,EAAA,sCACrC,mBAAoB,EAAA,EAAA,UAAA,EAAY,GAAG,CACtC,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GAEL,CAAA,CAAA;AAEJ;;;;"}