@drodil/backstage-plugin-qeta-react 3.7.1 → 3.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AIAnswerCard/AIAnswerCard.esm.js +15 -5
- package/dist/components/AIAnswerCard/AIAnswerCard.esm.js.map +1 -1
- package/dist/components/CommentSection/CommentList.esm.js +7 -1
- package/dist/components/CommentSection/CommentList.esm.js.map +1 -1
- package/dist/components/EntitiesGrid/EntitiesGrid.esm.js +1 -5
- package/dist/components/EntitiesGrid/EntitiesGrid.esm.js.map +1 -1
- package/dist/components/EntitiesGrid/EntitiesGridContent.esm.js +12 -4
- package/dist/components/EntitiesGrid/EntitiesGridContent.esm.js.map +1 -1
- package/dist/components/FilterPanel/FilterPanel.esm.js +112 -71
- package/dist/components/FilterPanel/FilterPanel.esm.js.map +1 -1
- package/dist/components/LoadingGrid/LoadingGrid.esm.js +18 -0
- package/dist/components/LoadingGrid/LoadingGrid.esm.js.map +1 -0
- package/dist/components/PostForm/EntitiesInput.esm.js +4 -1
- package/dist/components/PostForm/EntitiesInput.esm.js.map +1 -1
- package/dist/components/PostForm/TagInput.esm.js +22 -4
- package/dist/components/PostForm/TagInput.esm.js.map +1 -1
- package/dist/components/PostsContainer/PostList.esm.js +10 -6
- package/dist/components/PostsContainer/PostList.esm.js.map +1 -1
- package/dist/components/PostsContainer/PostsContainer.esm.js +8 -1
- package/dist/components/PostsContainer/PostsContainer.esm.js.map +1 -1
- package/dist/components/PostsGrid/PostsGrid.esm.js +18 -5
- package/dist/components/PostsGrid/PostsGrid.esm.js.map +1 -1
- package/dist/components/PostsGrid/PostsGridContent.esm.js +20 -6
- package/dist/components/PostsGrid/PostsGridContent.esm.js.map +1 -1
- package/dist/components/PostsGrid/PostsGridItem.esm.js +33 -5
- package/dist/components/PostsGrid/PostsGridItem.esm.js.map +1 -1
- package/dist/components/QuestionCard/QuestionCard.esm.js +49 -39
- package/dist/components/QuestionCard/QuestionCard.esm.js.map +1 -1
- package/dist/components/TagsGrid/TagsGrid.esm.js +1 -5
- package/dist/components/TagsGrid/TagsGrid.esm.js.map +1 -1
- package/dist/components/TagsGrid/TagsGridContent.esm.js +12 -4
- package/dist/components/TagsGrid/TagsGridContent.esm.js.map +1 -1
- package/dist/components/UsersGrid/UsersGrid.esm.js +1 -5
- package/dist/components/UsersGrid/UsersGrid.esm.js.map +1 -1
- package/dist/components/UsersGrid/UsersGridContent.esm.js +14 -6
- package/dist/components/UsersGrid/UsersGridContent.esm.js.map +1 -1
- package/dist/hooks/usePaginatedPosts.esm.js +8 -5
- package/dist/hooks/usePaginatedPosts.esm.js.map +1 -1
- package/dist/hooks/useStyles.esm.js +2 -1
- package/dist/hooks/useStyles.esm.js.map +1 -1
- package/dist/index.d.ts +20 -4
- package/dist/translation.esm.js +14 -1
- package/dist/translation.esm.js.map +1 -1
- package/package.json +2 -2
|
@@ -14,6 +14,7 @@ import { Skeleton } from '@material-ui/lab';
|
|
|
14
14
|
import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
|
|
15
15
|
import RefreshIcon from '@material-ui/icons/Refresh';
|
|
16
16
|
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
|
|
17
|
+
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
|
|
17
18
|
|
|
18
19
|
const useStyles = makeStyles(
|
|
19
20
|
(theme) => createStyles({
|
|
@@ -26,12 +27,15 @@ const useStyles = makeStyles(
|
|
|
26
27
|
}),
|
|
27
28
|
{ name: "QetaAIAnswerCard" }
|
|
28
29
|
);
|
|
30
|
+
const EXPANDED_LOCAL_STORAGE_KEY = "qeta-ai-expanded";
|
|
29
31
|
const AIAnswerCard = (props) => {
|
|
30
32
|
const { question, draft, article, style, debounceMs = 3e3 } = props;
|
|
31
33
|
const [answer, setAnswer] = React.useState(
|
|
32
34
|
void 0
|
|
33
35
|
);
|
|
34
|
-
const [expanded, setExpanded] = React.useState(
|
|
36
|
+
const [expanded, setExpanded] = React.useState(
|
|
37
|
+
localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === "true"
|
|
38
|
+
);
|
|
35
39
|
const styles = useStyles();
|
|
36
40
|
const { t } = useTranslation();
|
|
37
41
|
const config = useApi(configApiRef);
|
|
@@ -108,7 +112,7 @@ const AIAnswerCard = (props) => {
|
|
|
108
112
|
avatar: /* @__PURE__ */ React.createElement(FlareIcon, null),
|
|
109
113
|
style: !expanded ? { paddingBottom: "1rem" } : {},
|
|
110
114
|
title: /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, article ? t("aiAnswerCard.summary", { name: botName }) : t("aiAnswerCard.answer", { name: botName })),
|
|
111
|
-
action: /* @__PURE__ */ React.createElement(React.Fragment, null, canEdit && /* @__PURE__ */ React.createElement(Tooltip, { title: t("aiAnswerCard.regenerate") }, /* @__PURE__ */ React.createElement(
|
|
115
|
+
action: /* @__PURE__ */ React.createElement(React.Fragment, null, canEdit && isEnabled() && /* @__PURE__ */ React.createElement(Tooltip, { title: t("aiAnswerCard.regenerate") }, /* @__PURE__ */ React.createElement(
|
|
112
116
|
IconButton,
|
|
113
117
|
{
|
|
114
118
|
onClick: () => {
|
|
@@ -125,13 +129,19 @@ const AIAnswerCard = (props) => {
|
|
|
125
129
|
/* @__PURE__ */ React.createElement(
|
|
126
130
|
IconButton,
|
|
127
131
|
{
|
|
128
|
-
onClick: () =>
|
|
132
|
+
onClick: () => {
|
|
133
|
+
setExpanded(!expanded);
|
|
134
|
+
localStorage.setItem(
|
|
135
|
+
EXPANDED_LOCAL_STORAGE_KEY,
|
|
136
|
+
expanded ? "false" : "true"
|
|
137
|
+
);
|
|
138
|
+
},
|
|
129
139
|
"aria-expanded": expanded
|
|
130
140
|
},
|
|
131
|
-
/* @__PURE__ */ React.createElement(KeyboardArrowDownIcon, null)
|
|
141
|
+
expanded ? /* @__PURE__ */ React.createElement(KeyboardArrowUpIcon, null) : /* @__PURE__ */ React.createElement(KeyboardArrowDownIcon, null)
|
|
132
142
|
)
|
|
133
143
|
)),
|
|
134
|
-
subheader: answer
|
|
144
|
+
subheader: answer ? /* @__PURE__ */ React.createElement(RelativeTimeWithTooltip, { value: answer.created ?? /* @__PURE__ */ new Date() }) : /* @__PURE__ */ React.createElement(React.Fragment, null, t("aiAnswerCard.loading"))
|
|
135
145
|
}
|
|
136
146
|
), /* @__PURE__ */ React.createElement(Collapse, { in: expanded, timeout: 0, unmountOnExit: true, mountOnEnter: true }, /* @__PURE__ */ React.createElement(CardContent, null, answer === void 0 && /* @__PURE__ */ React.createElement(Skeleton, { variant: "rect", height: 200, animation: "wave" }), answer && /* @__PURE__ */ React.createElement(
|
|
137
147
|
MarkdownRenderer,
|
|
@@ -1 +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\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(false);\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 && (\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={() => setExpanded(!expanded)}\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 }\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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"}
|
|
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';\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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"}
|
|
@@ -15,10 +15,16 @@ const useStyles = makeStyles(
|
|
|
15
15
|
(theme) => {
|
|
16
16
|
return {
|
|
17
17
|
commentBox: {
|
|
18
|
-
|
|
18
|
+
padding: theme.spacing(2),
|
|
19
|
+
"&:hover": {
|
|
20
|
+
backgroundColor: theme.palette.background.paper
|
|
21
|
+
}
|
|
19
22
|
},
|
|
20
23
|
markdown: {
|
|
21
24
|
display: "inline",
|
|
25
|
+
"& *:first-child": {
|
|
26
|
+
marginTop: 0
|
|
27
|
+
},
|
|
22
28
|
"& *:last-child": {
|
|
23
29
|
display: "inline"
|
|
24
30
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommentList.esm.js","sources":["../../../src/components/CommentSection/CommentList.tsx"],"sourcesContent":["import {\n AnswerResponse,\n PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Box, Divider, makeStyles, Typography } from '@material-ui/core';\nimport React from 'react';\nimport { Link } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip';\nimport { AuthorLink } from '../Links/Links';\nimport { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../hooks';\n\nexport const useStyles = makeStyles(\n theme => {\n return {\n commentBox: {\n
|
|
1
|
+
{"version":3,"file":"CommentList.esm.js","sources":["../../../src/components/CommentSection/CommentList.tsx"],"sourcesContent":["import {\n AnswerResponse,\n PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Box, Divider, makeStyles, Typography } from '@material-ui/core';\nimport React from 'react';\nimport { Link } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip';\nimport { AuthorLink } from '../Links/Links';\nimport { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../hooks';\n\nexport const useStyles = makeStyles(\n theme => {\n return {\n commentBox: {\n padding: theme.spacing(2),\n '&:hover': {\n backgroundColor: theme.palette.background.paper,\n },\n },\n markdown: {\n display: 'inline',\n '& *:first-child': {\n marginTop: 0,\n },\n '& *:last-child': {\n display: 'inline',\n },\n },\n };\n },\n { name: 'QetaCommentList' },\n);\n\nexport const CommentList = (props: {\n onCommentDelete: (question: PostResponse, answer?: AnswerResponse) => void;\n question: PostResponse;\n answer?: AnswerResponse;\n}) => {\n const { question, answer, onCommentDelete } = props;\n const entity = answer ?? question;\n const qetaApi = useApi(qetaApiRef);\n const { t } = useTranslation();\n const styles = useStyles();\n\n const deleteComment = (id: number) => {\n if (answer) {\n qetaApi.deleteAnswerComment(question.id, answer.id, id).then(a => {\n onCommentDelete(question, a);\n return;\n });\n }\n qetaApi.deletePostComment(question.id, id).then(q => onCommentDelete(q));\n };\n\n if (!entity.comments || entity.comments.length === 0) {\n return null;\n }\n\n return (\n <Box marginBottom={2}>\n {entity.comments?.map(c => {\n return (\n <div key={c.id}>\n <Box className={`${styles.commentBox} qetaCommentBox`}>\n <MarkdownRenderer\n content={c.content}\n className={styles.markdown}\n />\n <Typography variant=\"caption\" className=\"qetaCommentMetadata\">\n {' – '}\n <AuthorLink entity={c} />{' '}\n <RelativeTimeWithTooltip value={c.created} />\n {(c.own || c.canDelete) && (\n <>\n {' / '}\n <Link\n underline=\"none\"\n to=\"#\"\n className=\"qetaCommentDeleteBtn\"\n onClick={() => deleteComment(c.id)}\n >\n {t('commentList.deleteLink')}\n </Link>\n </>\n )}\n </Typography>\n </Box>\n <Divider />\n </div>\n );\n })}\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,6 @@ import 'react-use/lib/useAsync';
|
|
|
9
9
|
import useDebounce from 'react-use/lib/useDebounce';
|
|
10
10
|
import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
|
|
11
11
|
import { EntitiesGridContent } from './EntitiesGridContent.esm.js';
|
|
12
|
-
import { NoEntitiesCard } from './NoEntitiesCard.esm.js';
|
|
13
12
|
|
|
14
13
|
const EntitiesGrid = () => {
|
|
15
14
|
const [page, setPage] = React.useState(1);
|
|
@@ -51,9 +50,6 @@ const EntitiesGrid = () => {
|
|
|
51
50
|
setPageCount(Math.ceil(response.total / entitiesPerPage));
|
|
52
51
|
}
|
|
53
52
|
}, [response, entitiesPerPage]);
|
|
54
|
-
if (!response?.entities || response.entities.length === 0) {
|
|
55
|
-
return /* @__PURE__ */ React.createElement(NoEntitiesCard, null);
|
|
56
|
-
}
|
|
57
53
|
return /* @__PURE__ */ React.createElement(Grid, { container: true, className: "qetaEntitiesContainer" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
|
|
58
54
|
TextField,
|
|
59
55
|
{
|
|
@@ -72,7 +68,7 @@ const EntitiesGrid = () => {
|
|
|
72
68
|
loading,
|
|
73
69
|
error
|
|
74
70
|
}
|
|
75
|
-
), /* @__PURE__ */ React.createElement(
|
|
71
|
+
), response && response?.total > 0 && /* @__PURE__ */ React.createElement(
|
|
76
72
|
QetaPagination,
|
|
77
73
|
{
|
|
78
74
|
pageSize: entitiesPerPage,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EntitiesGrid.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGrid.tsx"],"sourcesContent":["import { Grid, IconButton, TextField } from '@material-ui/core';\nimport React, { useEffect } from 'react';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { EntitiesGridContent } from './EntitiesGridContent';\
|
|
1
|
+
{"version":3,"file":"EntitiesGrid.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGrid.tsx"],"sourcesContent":["import { Grid, IconButton, TextField } from '@material-ui/core';\nimport React, { useEffect } from 'react';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { EntitiesGridContent } from './EntitiesGridContent';\n\ntype EntityFilters = {\n order: 'asc' | 'desc';\n orderBy?: 'entityRef';\n searchQuery: string;\n};\n\nexport const EntitiesGrid = () => {\n const [page, setPage] = React.useState(1);\n const [pageCount, setPageCount] = React.useState(1);\n const [entitiesPerPage, setEntitiesPerPage] = React.useState(25);\n const [searchQuery, setSearchQuery] = React.useState('');\n const [filters, setFilters] = React.useState<EntityFilters>({\n order: 'desc',\n searchQuery: '',\n });\n const { t } = useTranslation();\n\n const {\n value: response,\n loading,\n error,\n } = useQetaApi(\n api =>\n api.getEntities({\n limit: entitiesPerPage,\n offset: (page - 1) * entitiesPerPage,\n ...filters,\n }),\n [entitiesPerPage, page, filters],\n );\n\n const onSearchQueryChange = (val: string) => {\n setPage(1);\n setSearchQuery(val);\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 / entitiesPerPage));\n }\n }, [response, entitiesPerPage]);\n\n return (\n <Grid container className=\"qetaEntitiesContainer\">\n <Grid item xs={12}>\n <TextField\n id=\"search-bar\"\n className=\"text qetaEntitiesContainerSearchInput\"\n onChange={(\n event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n ) => onSearchQueryChange(event.target.value)}\n label={t('entitiesPage.search.label')}\n variant=\"outlined\"\n placeholder={t('entitiesPage.search.placeholder')}\n size=\"small\"\n />\n <IconButton type=\"submit\" aria-label=\"search\" />\n </Grid>\n <EntitiesGridContent\n response={response}\n loading={loading}\n error={error}\n />\n {response && response?.total > 0 && (\n <QetaPagination\n pageSize={entitiesPerPage}\n handlePageChange={(_e, p) => setPage(p)}\n handlePageSizeChange={e => setEntitiesPerPage(Number(e.target.value))}\n page={page}\n pageCount={pageCount}\n />\n )}\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Grid, Typography } from '@material-ui/core';
|
|
2
2
|
import React, { useState, useEffect } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { WarningPanel } from '@backstage/core-components';
|
|
4
4
|
import '@backstage/core-plugin-api';
|
|
5
5
|
import '../../api.esm.js';
|
|
6
6
|
import 'react-use';
|
|
@@ -8,22 +8,30 @@ import { useTranslation } from '../../hooks/useTranslation.esm.js';
|
|
|
8
8
|
import '../../hooks/useStyles.esm.js';
|
|
9
9
|
import 'react-use/lib/useAsync';
|
|
10
10
|
import { EntitiesGridItem } from './EntitiesGridItem.esm.js';
|
|
11
|
+
import { NoEntitiesCard } from './NoEntitiesCard.esm.js';
|
|
12
|
+
import { LoadingGrid } from '../LoadingGrid/LoadingGrid.esm.js';
|
|
11
13
|
|
|
12
14
|
const EntitiesGridContent = (props) => {
|
|
13
15
|
const { response, loading, error } = props;
|
|
14
16
|
const { t } = useTranslation();
|
|
15
17
|
const [initialLoad, setInitialLoad] = useState(true);
|
|
16
18
|
useEffect(() => {
|
|
17
|
-
if (!
|
|
19
|
+
if (!loading) {
|
|
18
20
|
setInitialLoad(false);
|
|
19
21
|
}
|
|
20
22
|
}, [initialLoad, loading]);
|
|
21
|
-
if (loading
|
|
22
|
-
|
|
23
|
+
if (loading) {
|
|
24
|
+
if (initialLoad) {
|
|
25
|
+
return /* @__PURE__ */ React.createElement(LoadingGrid, null);
|
|
26
|
+
}
|
|
27
|
+
return null;
|
|
23
28
|
}
|
|
24
29
|
if (error || response === void 0) {
|
|
25
30
|
return /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: t("entitiesPage.errorLoading") }, error?.message);
|
|
26
31
|
}
|
|
32
|
+
if (!response?.entities || response.entities.length === 0) {
|
|
33
|
+
return /* @__PURE__ */ React.createElement(NoEntitiesCard, null);
|
|
34
|
+
}
|
|
27
35
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: "qetaEntitiesContainerTitle" }, t("entitiesPage.entities", { count: response.total }))), /* @__PURE__ */ React.createElement(Grid, { container: true, item: true, xs: 12, alignItems: "stretch" }, response?.entities.map((entity) => /* @__PURE__ */ React.createElement(EntitiesGridItem, { entity, key: entity.entityRef }))));
|
|
28
36
|
};
|
|
29
37
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EntitiesGridContent.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridContent.tsx"],"sourcesContent":["import { Grid, Typography } from '@material-ui/core';\nimport React, { useEffect, useState } from 'react';\nimport { EntitiesResponse } from '@drodil/backstage-plugin-qeta-common';\nimport {
|
|
1
|
+
{"version":3,"file":"EntitiesGridContent.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridContent.tsx"],"sourcesContent":["import { Grid, Typography } from '@material-ui/core';\nimport React, { useEffect, useState } from 'react';\nimport { EntitiesResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslation } from '../../hooks';\nimport { EntitiesGridItem } from './EntitiesGridItem';\nimport { NoEntitiesCard } from './NoEntitiesCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\n\nexport const EntitiesGridContent = (props: {\n loading: boolean;\n error: any;\n response?: EntitiesResponse;\n}) => {\n const { response, loading, error } = props;\n const { t } = useTranslation();\n const [initialLoad, setInitialLoad] = useState(true);\n useEffect(() => {\n if (!loading) {\n setInitialLoad(false);\n }\n }, [initialLoad, loading]);\n\n if (loading) {\n if (initialLoad) {\n return <LoadingGrid />;\n }\n return null;\n }\n\n if (error || response === undefined) {\n return (\n <WarningPanel severity=\"error\" title={t('entitiesPage.errorLoading')}>\n {error?.message}\n </WarningPanel>\n );\n }\n\n if (!response?.entities || response.entities.length === 0) {\n return <NoEntitiesCard />;\n }\n\n return (\n <>\n <Grid item xs={12}>\n <Typography variant=\"h6\" className=\"qetaEntitiesContainerTitle\">\n {t('entitiesPage.entities', { count: response.total })}\n </Typography>\n </Grid>\n <Grid container item xs={12} alignItems=\"stretch\">\n {response?.entities.map(entity => (\n <EntitiesGridItem entity={entity} key={entity.entityRef} />\n ))}\n </Grid>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AASa,MAAA,mBAAA,GAAsB,CAAC,KAI9B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACrC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AACnD,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,OAAS,EAAA;AACX,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,2CAAQ,WAAY,EAAA,IAAA,CAAA,CAAA;AAAA,KACtB;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,2BAA2B,CAChE,EAAA,EAAA,KAAA,EAAO,OACV,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,IAAI,CAAC,QAAU,EAAA,QAAA,IAAY,QAAS,CAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzD,IAAA,2CAAQ,cAAe,EAAA,IAAA,CAAA,CAAA;AAAA,GACzB;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAA,sCACZ,UAAW,EAAA,EAAA,OAAA,EAAQ,MAAK,SAAU,EAAA,4BAAA,EAAA,EAChC,EAAE,uBAAyB,EAAA,EAAE,OAAO,QAAS,CAAA,KAAA,EAAO,CACvD,CACF,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IAAC,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAI,YAAW,SACrC,EAAA,EAAA,QAAA,EAAU,SAAS,GAAI,CAAA,CAAA,MAAA,yCACrB,gBAAiB,EAAA,EAAA,MAAA,EAAgB,KAAK,MAAO,CAAA,SAAA,EAAW,CAC1D,CACH,CACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
|
-
import { Box, Grid, FormGroup, FormControlLabel, Checkbox, FormControl,
|
|
2
|
+
import { Box, Grid, FormGroup, FormLabel, FormControlLabel, Checkbox, FormControl, RadioGroup, Divider, Tooltip, TextField, Radio } from '@material-ui/core';
|
|
3
3
|
import { Autocomplete } from '@material-ui/lab';
|
|
4
4
|
import { stringifyEntityRef } from '@backstage/catalog-model';
|
|
5
5
|
import { useApi } from '@backstage/core-plugin-api';
|
|
@@ -39,7 +39,8 @@ const FilterPanel = (props) => {
|
|
|
39
39
|
showEntityFilter = true,
|
|
40
40
|
showTagFilter = true,
|
|
41
41
|
answerFilters = false,
|
|
42
|
-
type
|
|
42
|
+
type,
|
|
43
|
+
showRankOrder = false
|
|
43
44
|
} = props;
|
|
44
45
|
const styles = useStyles();
|
|
45
46
|
const { value: refs } = useQetaApi((api) => api.getEntities(), []);
|
|
@@ -51,6 +52,7 @@ const FilterPanel = (props) => {
|
|
|
51
52
|
const [availableTags, setAvailableTags] = React.useState(
|
|
52
53
|
null
|
|
53
54
|
);
|
|
55
|
+
const [tagDescriptions, setTagDescriptions] = React.useState({});
|
|
54
56
|
useEffect(() => {
|
|
55
57
|
if (tags && tags.tags && tags.total > 0 || filters.tags) {
|
|
56
58
|
const ts = (tags?.tags ?? []).map((tag) => tag.tag);
|
|
@@ -58,6 +60,15 @@ const FilterPanel = (props) => {
|
|
|
58
60
|
ts.push(...filters.tags);
|
|
59
61
|
}
|
|
60
62
|
setAvailableTags([...new Set(ts)]);
|
|
63
|
+
setTagDescriptions(
|
|
64
|
+
tags?.tags.reduce((acc, tag) => {
|
|
65
|
+
if (!tag.description) {
|
|
66
|
+
return acc;
|
|
67
|
+
}
|
|
68
|
+
acc[tag.tag] = tag.description;
|
|
69
|
+
return acc;
|
|
70
|
+
}, {}) ?? {}
|
|
71
|
+
);
|
|
61
72
|
}
|
|
62
73
|
}, [tags, filters.tags]);
|
|
63
74
|
useEffect(() => {
|
|
@@ -107,79 +118,102 @@ const FilterPanel = (props) => {
|
|
|
107
118
|
}
|
|
108
119
|
onChange(event.target.name, value);
|
|
109
120
|
};
|
|
110
|
-
return /* @__PURE__ */ React.createElement(Box, { className: `qetaFilterPanel ${styles.filterPanel}` }, /* @__PURE__ */ React.createElement(
|
|
111
|
-
|
|
112
|
-
{
|
|
113
|
-
control: /* @__PURE__ */ React.createElement(
|
|
114
|
-
Checkbox,
|
|
115
|
-
{
|
|
116
|
-
size: "small",
|
|
117
|
-
name: "noAnswers",
|
|
118
|
-
onChange: handleChange,
|
|
119
|
-
checked: filters.noAnswers === "true"
|
|
120
|
-
}
|
|
121
|
-
),
|
|
122
|
-
label: t("filterPanel.noAnswers.label")
|
|
123
|
-
}
|
|
124
|
-
), type !== "article" && /* @__PURE__ */ React.createElement(
|
|
125
|
-
FormControlLabel,
|
|
121
|
+
return /* @__PURE__ */ React.createElement(Box, { className: `qetaFilterPanel ${styles.filterPanel}` }, /* @__PURE__ */ React.createElement(
|
|
122
|
+
Grid,
|
|
126
123
|
{
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
name: "noCorrectAnswer",
|
|
132
|
-
checked: filters.noCorrectAnswer === "true",
|
|
133
|
-
onChange: handleChange
|
|
134
|
-
}
|
|
135
|
-
),
|
|
136
|
-
label: t("filterPanel.noCorrectAnswers.label")
|
|
137
|
-
}
|
|
138
|
-
), /* @__PURE__ */ React.createElement(
|
|
139
|
-
FormControlLabel,
|
|
140
|
-
{
|
|
141
|
-
control: /* @__PURE__ */ React.createElement(
|
|
142
|
-
Checkbox,
|
|
143
|
-
{
|
|
144
|
-
size: "small",
|
|
145
|
-
name: "noVotes",
|
|
146
|
-
checked: filters.noVotes === "true",
|
|
147
|
-
onChange: handleChange
|
|
148
|
-
}
|
|
149
|
-
),
|
|
150
|
-
label: t("filterPanel.noVotes.label")
|
|
151
|
-
}
|
|
152
|
-
))), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 2, xs: 4 }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-order-by" }, t("filterPanel.orderBy.label")), /* @__PURE__ */ React.createElement(
|
|
153
|
-
RadioGroup,
|
|
154
|
-
{
|
|
155
|
-
"aria-labelledby": "qeta-filter-order-by",
|
|
156
|
-
name: "orderBy",
|
|
157
|
-
value: filters.orderBy,
|
|
158
|
-
onChange: handleChange
|
|
159
|
-
},
|
|
160
|
-
radioSelect("created", t("filterPanel.orderBy.created")),
|
|
161
|
-
!answerFilters && radioSelect("views", t("filterPanel.orderBy.views")),
|
|
162
|
-
radioSelect("score", t("filterPanel.orderBy.score")),
|
|
163
|
-
!answerFilters && radioSelect("answersCount", t("filterPanel.orderBy.answers")),
|
|
164
|
-
radioSelect("updated", t("filterPanel.orderBy.updated"))
|
|
165
|
-
))), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 2, xs: 4 }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-order" }, t("filterPanel.order.label")), /* @__PURE__ */ React.createElement(
|
|
166
|
-
RadioGroup,
|
|
167
|
-
{
|
|
168
|
-
"aria-labelledby": "qeta-filter-order",
|
|
169
|
-
name: "order",
|
|
170
|
-
value: filters.order,
|
|
171
|
-
onChange: handleChange
|
|
124
|
+
container: true,
|
|
125
|
+
spacing: 4,
|
|
126
|
+
alignItems: "stretch",
|
|
127
|
+
justifyContent: "space-evenly"
|
|
172
128
|
},
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
129
|
+
/* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(FormGroup, null, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-quick" }, t("filterPanel.quickFilters.label")), !answerFilters && type !== "article" && /* @__PURE__ */ React.createElement(
|
|
130
|
+
FormControlLabel,
|
|
131
|
+
{
|
|
132
|
+
control: /* @__PURE__ */ React.createElement(
|
|
133
|
+
Checkbox,
|
|
134
|
+
{
|
|
135
|
+
size: "small",
|
|
136
|
+
name: "noAnswers",
|
|
137
|
+
onChange: handleChange,
|
|
138
|
+
checked: filters.noAnswers === "true"
|
|
139
|
+
}
|
|
140
|
+
),
|
|
141
|
+
label: t("filterPanel.noAnswers.label")
|
|
142
|
+
}
|
|
143
|
+
), type !== "article" && /* @__PURE__ */ React.createElement(
|
|
144
|
+
FormControlLabel,
|
|
145
|
+
{
|
|
146
|
+
control: /* @__PURE__ */ React.createElement(
|
|
147
|
+
Checkbox,
|
|
148
|
+
{
|
|
149
|
+
size: "small",
|
|
150
|
+
name: "noCorrectAnswer",
|
|
151
|
+
checked: filters.noCorrectAnswer === "true",
|
|
152
|
+
onChange: handleChange
|
|
153
|
+
}
|
|
154
|
+
),
|
|
155
|
+
label: t("filterPanel.noCorrectAnswers.label")
|
|
156
|
+
}
|
|
157
|
+
), /* @__PURE__ */ React.createElement(
|
|
158
|
+
FormControlLabel,
|
|
159
|
+
{
|
|
160
|
+
control: /* @__PURE__ */ React.createElement(
|
|
161
|
+
Checkbox,
|
|
162
|
+
{
|
|
163
|
+
size: "small",
|
|
164
|
+
name: "noVotes",
|
|
165
|
+
checked: filters.noVotes === "true",
|
|
166
|
+
onChange: handleChange
|
|
167
|
+
}
|
|
168
|
+
),
|
|
169
|
+
label: t("filterPanel.noVotes.label")
|
|
170
|
+
}
|
|
171
|
+
))),
|
|
172
|
+
/* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-order-by" }, t("filterPanel.orderBy.label")), /* @__PURE__ */ React.createElement(
|
|
173
|
+
RadioGroup,
|
|
174
|
+
{
|
|
175
|
+
"aria-labelledby": "qeta-filter-order-by",
|
|
176
|
+
name: "orderBy",
|
|
177
|
+
value: filters.orderBy,
|
|
178
|
+
onChange: handleChange,
|
|
179
|
+
style: {
|
|
180
|
+
display: "grid",
|
|
181
|
+
gridTemplateColumns: "1fr 1fr",
|
|
182
|
+
gap: "0 1rem"
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
showRankOrder && radioSelect("rank", t("filterPanel.orderBy.rank")),
|
|
186
|
+
radioSelect("created", t("filterPanel.orderBy.created")),
|
|
187
|
+
radioSelect("title", t("filterPanel.orderBy.title")),
|
|
188
|
+
!answerFilters && radioSelect("views", t("filterPanel.orderBy.views")),
|
|
189
|
+
radioSelect("score", t("filterPanel.orderBy.score")),
|
|
190
|
+
!answerFilters && radioSelect("trend", t("filterPanel.orderBy.trend")),
|
|
191
|
+
!answerFilters && radioSelect("answersCount", t("filterPanel.orderBy.answers")),
|
|
192
|
+
radioSelect("updated", t("filterPanel.orderBy.updated"))
|
|
193
|
+
))),
|
|
194
|
+
/* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-order" }, t("filterPanel.order.label")), /* @__PURE__ */ React.createElement(
|
|
195
|
+
RadioGroup,
|
|
196
|
+
{
|
|
197
|
+
"aria-labelledby": "qeta-filter-order",
|
|
198
|
+
name: "order",
|
|
199
|
+
value: filters.order,
|
|
200
|
+
onChange: handleChange
|
|
201
|
+
},
|
|
202
|
+
radioSelect("desc", t("filterPanel.order.desc")),
|
|
203
|
+
radioSelect("asc", t("filterPanel.order.asc"))
|
|
204
|
+
)))
|
|
205
|
+
), /* @__PURE__ */ React.createElement(Box, { marginY: "24px" }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "stretch", justifyContent: "space-evenly" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(DateRangeFilter, { value: filters.dateRange, onChange })), showEntityFilter && availableEntities && availableEntities.length > 0 && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
|
|
176
206
|
Autocomplete,
|
|
177
207
|
{
|
|
178
208
|
multiple: false,
|
|
209
|
+
disablePortal: true,
|
|
179
210
|
className: "qetaEntityFilter",
|
|
180
211
|
value: selectedEntity ?? null,
|
|
181
212
|
id: "entities-select",
|
|
182
213
|
options: availableEntities,
|
|
214
|
+
renderOption: (option) => {
|
|
215
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: stringifyEntityRef(option) }, /* @__PURE__ */ React.createElement("span", null, getEntityTitle(option))));
|
|
216
|
+
},
|
|
183
217
|
getOptionLabel: getEntityTitle,
|
|
184
218
|
getOptionSelected: (o, v) => {
|
|
185
219
|
if (!o || !v) {
|
|
@@ -199,23 +233,30 @@ const FilterPanel = (props) => {
|
|
|
199
233
|
TextField,
|
|
200
234
|
{
|
|
201
235
|
...params,
|
|
236
|
+
style: { minWidth: "200px" },
|
|
202
237
|
variant: "outlined",
|
|
203
238
|
margin: "normal",
|
|
204
239
|
label: t("filterPanel.filters.entity.label"),
|
|
205
|
-
placeholder: t(
|
|
206
|
-
"filterPanel.filters.entity.placeholder"
|
|
207
|
-
)
|
|
240
|
+
placeholder: t("filterPanel.filters.entity.placeholder")
|
|
208
241
|
}
|
|
209
242
|
)
|
|
210
243
|
}
|
|
211
|
-
), showTagFilter && availableTags && availableTags.length > 0 && /* @__PURE__ */ React.createElement(
|
|
244
|
+
)), showTagFilter && availableTags && availableTags.length > 0 && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
|
|
212
245
|
Autocomplete,
|
|
213
246
|
{
|
|
214
247
|
multiple: true,
|
|
248
|
+
style: { minWidth: "200px" },
|
|
249
|
+
disablePortal: true,
|
|
215
250
|
className: "qetaTagFilter",
|
|
216
251
|
value: filters.tags,
|
|
217
252
|
id: "tags-select",
|
|
218
253
|
options: availableTags,
|
|
254
|
+
renderOption: (option) => {
|
|
255
|
+
if (tagDescriptions[option]) {
|
|
256
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: tagDescriptions[option] }, /* @__PURE__ */ React.createElement("span", null, option)));
|
|
257
|
+
}
|
|
258
|
+
return option;
|
|
259
|
+
},
|
|
219
260
|
onChange: (_e, newValue) => {
|
|
220
261
|
handleChange({
|
|
221
262
|
target: {
|
|
@@ -235,7 +276,7 @@ const FilterPanel = (props) => {
|
|
|
235
276
|
}
|
|
236
277
|
)
|
|
237
278
|
}
|
|
238
|
-
)))
|
|
279
|
+
))));
|
|
239
280
|
};
|
|
240
281
|
|
|
241
282
|
export { FilterPanel, filterKeys };
|