@drodil/backstage-plugin-qeta-react 3.7.2 → 3.8.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/EntitiesGrid/EntitiesGrid.esm.js

@@ -9,7 +9,6 @@ import 'react-use/lib/useAsync';
 import useDebounce from 'react-use/lib/useDebounce';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
 import { EntitiesGridContent } from './EntitiesGridContent.esm.js';
-import { NoEntitiesCard } from './NoEntitiesCard.esm.js';
 
 const EntitiesGrid = () => {
   const [page, setPage] = React.useState(1);
@@ -51,9 +50,6 @@ const EntitiesGrid = () => {
       setPageCount(Math.ceil(response.total / entitiesPerPage));
     }
   }, [response, entitiesPerPage]);
-  if (!response?.entities || response.entities.length === 0) {
-    return /* @__PURE__ */ React.createElement(NoEntitiesCard, null);
-  }
   return /* @__PURE__ */ React.createElement(Grid, { container: true, className: "qetaEntitiesContainer" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
     TextField,
     {
@@ -72,7 +68,7 @@ const EntitiesGrid = () => {
       loading,
       error
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), response && response?.total > 0 && /* @__PURE__ */ React.createElement(
     QetaPagination,
     {
       pageSize: entitiesPerPage,

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

@@ -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';\nimport { NoEntitiesCard } from './NoEntitiesCard';\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  if (!response?.entities || response.entities.length === 0) {\n    return <NoEntitiesCard />;\n  }\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      <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    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"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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"}

package/dist/components/EntitiesGrid/EntitiesGridContent.esm.js

@@ -1,6 +1,6 @@
 import { Grid, Typography } from '@material-ui/core';
 import React, { useState, useEffect } from 'react';
-import { Progress, WarningPanel } from '@backstage/core-components';
+import { WarningPanel } from '@backstage/core-components';
 import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
@@ -8,22 +8,30 @@ import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { EntitiesGridItem } from './EntitiesGridItem.esm.js';
+import { NoEntitiesCard } from './NoEntitiesCard.esm.js';
+import { LoadingGrid } from '../LoadingGrid/LoadingGrid.esm.js';
 
 const EntitiesGridContent = (props) => {
   const { response, loading, error } = props;
   const { t } = useTranslation();
   const [initialLoad, setInitialLoad] = useState(true);
   useEffect(() => {
-    if (!initialLoad) {
+    if (!loading) {
       setInitialLoad(false);
     }
   }, [initialLoad, loading]);
-  if (loading && initialLoad) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+  if (loading) {
+    if (initialLoad) {
+      return /* @__PURE__ */ React.createElement(LoadingGrid, null);
+    }
+    return null;
   }
   if (error || response === void 0) {
     return /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: t("entitiesPage.errorLoading") }, error?.message);
   }
+  if (!response?.entities || response.entities.length === 0) {
+    return /* @__PURE__ */ React.createElement(NoEntitiesCard, null);
+  }
   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 }))));
 };
 

package/dist/components/EntitiesGrid/EntitiesGridContent.esm.js.map

@@ -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 { Progress, WarningPanel } from '@backstage/core-components';\nimport { useTranslation } from '../../hooks';\nimport { EntitiesGridItem } from './EntitiesGridItem';\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\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 severity=\"error\" title={t('entitiesPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\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":";;;;;;;;;;;AAOa,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;AAEnD,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,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,2BAA2B,CAChE,EAAA,EAAA,KAAA,EAAO,OACV,CAAA,CAAA;AAAA,GAEJ;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;;;;"}
+{"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;;;;"}

package/dist/components/FilterPanel/FilterPanel.esm.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Box, Grid, FormGroup, FormControlLabel, Checkbox, FormControl, FormLabel, RadioGroup, TextField, Divider, Radio } from '@material-ui/core';
+import { Box, Grid, FormGroup, FormLabel, FormControlLabel, Checkbox, FormControl, RadioGroup, Divider, Tooltip, TextField, Radio } from '@material-ui/core';
 import { Autocomplete } from '@material-ui/lab';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
@@ -39,7 +39,8 @@ const FilterPanel = (props) => {
     showEntityFilter = true,
     showTagFilter = true,
     answerFilters = false,
-    type
+    type,
+    showRankOrder = false
   } = props;
   const styles = useStyles();
   const { value: refs } = useQetaApi((api) => api.getEntities(), []);
@@ -51,6 +52,7 @@ const FilterPanel = (props) => {
   const [availableTags, setAvailableTags] = React.useState(
     null
   );
+  const [tagDescriptions, setTagDescriptions] = React.useState({});
   useEffect(() => {
     if (tags && tags.tags && tags.total > 0 || filters.tags) {
       const ts = (tags?.tags ?? []).map((tag) => tag.tag);
@@ -58,6 +60,15 @@ const FilterPanel = (props) => {
         ts.push(...filters.tags);
       }
       setAvailableTags([...new Set(ts)]);
+      setTagDescriptions(
+        tags?.tags.reduce((acc, tag) => {
+          if (!tag.description) {
+            return acc;
+          }
+          acc[tag.tag] = tag.description;
+          return acc;
+        }, {}) ?? {}
+      );
     }
   }, [tags, filters.tags]);
   useEffect(() => {
@@ -107,79 +118,102 @@ const FilterPanel = (props) => {
     }
     onChange(event.target.name, value);
   };
-  return /* @__PURE__ */ React.createElement(Box, { className: `qetaFilterPanel ${styles.filterPanel}` }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 4 }, /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3, xs: 4 }, /* @__PURE__ */ React.createElement(FormGroup, null, !answerFilters && type !== "article" && /* @__PURE__ */ React.createElement(
-    FormControlLabel,
-    {
-      control: /* @__PURE__ */ React.createElement(
-        Checkbox,
-        {
-          size: "small",
-          name: "noAnswers",
-          onChange: handleChange,
-          checked: filters.noAnswers === "true"
-        }
-      ),
-      label: t("filterPanel.noAnswers.label")
-    }
-  ), type !== "article" && /* @__PURE__ */ React.createElement(
-    FormControlLabel,
+  return /* @__PURE__ */ React.createElement(Box, { className: `qetaFilterPanel ${styles.filterPanel}` }, /* @__PURE__ */ React.createElement(
+    Grid,
     {
-      control: /* @__PURE__ */ React.createElement(
-        Checkbox,
-        {
-          size: "small",
-          name: "noCorrectAnswer",
-          checked: filters.noCorrectAnswer === "true",
-          onChange: handleChange
-        }
-      ),
-      label: t("filterPanel.noCorrectAnswers.label")
-    }
-  ), /* @__PURE__ */ React.createElement(
-    FormControlLabel,
-    {
-      control: /* @__PURE__ */ React.createElement(
-        Checkbox,
-        {
-          size: "small",
-          name: "noVotes",
-          checked: filters.noVotes === "true",
-          onChange: handleChange
-        }
-      ),
-      label: t("filterPanel.noVotes.label")
-    }
-  ))), /* @__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(
-    RadioGroup,
-    {
-      "aria-labelledby": "qeta-filter-order-by",
-      name: "orderBy",
-      value: filters.orderBy,
-      onChange: handleChange
-    },
-    radioSelect("created", t("filterPanel.orderBy.created")),
-    !answerFilters && radioSelect("views", t("filterPanel.orderBy.views")),
-    radioSelect("score", t("filterPanel.orderBy.score")),
-    !answerFilters && radioSelect("answersCount", t("filterPanel.orderBy.answers")),
-    radioSelect("updated", t("filterPanel.orderBy.updated"))
-  ))), /* @__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(
-    RadioGroup,
-    {
-      "aria-labelledby": "qeta-filter-order",
-      name: "order",
-      value: filters.order,
-      onChange: handleChange
+      container: true,
+      spacing: 4,
+      alignItems: "stretch",
+      justifyContent: "space-evenly"
     },
-    radioSelect("desc", t("filterPanel.order.desc")),
-    radioSelect("asc", t("filterPanel.order.asc"))
-  ))), (availableEntities && availableEntities.length > 0 || availableTags && availableTags.length > 0) && (showEntityFilter || showTagFilter) && /* @__PURE__ */ React.createElement(Grid, { item: true, md: 4, xs: 8 }, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-entity" }, t("filterPanel.filters.label")), showEntityFilter && availableEntities && availableEntities.length > 0 && /* @__PURE__ */ React.createElement(
+    /* @__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(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            size: "small",
+            name: "noAnswers",
+            onChange: handleChange,
+            checked: filters.noAnswers === "true"
+          }
+        ),
+        label: t("filterPanel.noAnswers.label")
+      }
+    ), type !== "article" && /* @__PURE__ */ React.createElement(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            size: "small",
+            name: "noCorrectAnswer",
+            checked: filters.noCorrectAnswer === "true",
+            onChange: handleChange
+          }
+        ),
+        label: t("filterPanel.noCorrectAnswers.label")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            size: "small",
+            name: "noVotes",
+            checked: filters.noVotes === "true",
+            onChange: handleChange
+          }
+        ),
+        label: t("filterPanel.noVotes.label")
+      }
+    ))),
+    /* @__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(
+      RadioGroup,
+      {
+        "aria-labelledby": "qeta-filter-order-by",
+        name: "orderBy",
+        value: filters.orderBy,
+        onChange: handleChange,
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "0 1rem"
+        }
+      },
+      showRankOrder && radioSelect("rank", t("filterPanel.orderBy.rank")),
+      radioSelect("created", t("filterPanel.orderBy.created")),
+      radioSelect("title", t("filterPanel.orderBy.title")),
+      !answerFilters && radioSelect("views", t("filterPanel.orderBy.views")),
+      radioSelect("score", t("filterPanel.orderBy.score")),
+      !answerFilters && radioSelect("trend", t("filterPanel.orderBy.trend")),
+      !answerFilters && radioSelect("answersCount", t("filterPanel.orderBy.answers")),
+      radioSelect("updated", t("filterPanel.orderBy.updated"))
+    ))),
+    /* @__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(
+      RadioGroup,
+      {
+        "aria-labelledby": "qeta-filter-order",
+        name: "order",
+        value: filters.order,
+        onChange: handleChange
+      },
+      radioSelect("desc", t("filterPanel.order.desc")),
+      radioSelect("asc", t("filterPanel.order.asc"))
+    )))
+  ), /* @__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(
     Autocomplete,
     {
       multiple: false,
+      disablePortal: true,
       className: "qetaEntityFilter",
       value: selectedEntity ?? null,
       id: "entities-select",
       options: availableEntities,
+      renderOption: (option) => {
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: stringifyEntityRef(option) }, /* @__PURE__ */ React.createElement("span", null, getEntityTitle(option))));
+      },
       getOptionLabel: getEntityTitle,
       getOptionSelected: (o, v) => {
         if (!o || !v) {
@@ -199,23 +233,30 @@ const FilterPanel = (props) => {
         TextField,
         {
           ...params,
+          style: { minWidth: "200px" },
           variant: "outlined",
           margin: "normal",
           label: t("filterPanel.filters.entity.label"),
-          placeholder: t(
-            "filterPanel.filters.entity.placeholder"
-          )
+          placeholder: t("filterPanel.filters.entity.placeholder")
         }
       )
     }
-  ), showTagFilter && availableTags && availableTags.length > 0 && /* @__PURE__ */ React.createElement(
+  )), showTagFilter && availableTags && availableTags.length > 0 && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
       multiple: true,
+      style: { minWidth: "200px" },
+      disablePortal: true,
       className: "qetaTagFilter",
       value: filters.tags,
       id: "tags-select",
       options: availableTags,
+      renderOption: (option) => {
+        if (tagDescriptions[option]) {
+          return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: tagDescriptions[option] }, /* @__PURE__ */ React.createElement("span", null, option)));
+        }
+        return option;
+      },
       onChange: (_e, newValue) => {
         handleChange({
           target: {
@@ -235,7 +276,7 @@ const FilterPanel = (props) => {
         }
       )
     }
-  ))), /* @__PURE__ */ React.createElement(Box, { marginY: "24px" }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(DateRangeFilter, { value: filters.dateRange, onChange }));
+  ))));
 };
 
 export { FilterPanel, filterKeys };

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

@@ -1 +1 @@
-{"version":3,"file":"FilterPanel.esm.js","sources":["../../../src/components/FilterPanel/FilterPanel.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport {\n  Box,\n  Checkbox,\n  Divider,\n  FormControl,\n  FormControlLabel,\n  FormGroup,\n  FormLabel,\n  Grid,\n  Radio,\n  RadioGroup,\n  TextField,\n} from '@material-ui/core';\nimport { Autocomplete } from '@material-ui/lab';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { getEntityTitle } from '../../utils/utils';\nimport { DateRangeFilter } from './DateRangeFilter';\nimport { PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { useQetaApi, useStyles, useTranslation } from '../../hooks';\n\nconst radioSelect = (value: string, label: string) => {\n  return (\n    <FormControlLabel\n      value={value}\n      control={<Radio size=\"small\" />}\n      label={label}\n    />\n  );\n};\n\nexport const filterKeys = [\n  'orderBy',\n  'order',\n  'noAnswers',\n  'noCorrectAnswer',\n  'noVotes',\n  'entity',\n  'tags',\n  'dateRange',\n] as const;\nexport type FilterKey = (typeof filterKeys)[number];\n\nexport type Filters = {\n  order: string;\n  orderBy: string;\n  noAnswers?: string;\n  noCorrectAnswer: string;\n  noVotes: string;\n  searchQuery: string;\n  entity?: string;\n  tags?: string[];\n  dateRange?: string;\n  collectionId?: number;\n};\n\nexport interface FilterPanelProps {\n  onChange: (key: FilterKey, value: string | string[]) => void;\n  filters: Filters;\n  showEntityFilter?: boolean;\n  showTagFilter?: boolean;\n  answerFilters?: boolean;\n  type?: PostType;\n}\n\nexport const FilterPanel = (props: FilterPanelProps) => {\n  const {\n    onChange,\n    filters,\n    showEntityFilter = true,\n    showTagFilter = true,\n    answerFilters = false,\n    type,\n  } = props;\n  const styles = useStyles();\n  const { value: refs } = useQetaApi(api => api.getEntities(), []);\n  const { value: tags } = useQetaApi(api => api.getTags(), []);\n  const catalogApi = useApi(catalogApiRef);\n  const { t } = useTranslation();\n  const [availableEntities, setAvailableEntities] = React.useState<\n    Entity[] | null\n  >(null);\n  const [selectedEntity, setSelectedEntity] = React.useState<\n    Entity | undefined\n  >(undefined);\n  const [availableTags, setAvailableTags] = React.useState<string[] | null>(\n    null,\n  );\n\n  useEffect(() => {\n    if ((tags && tags.tags && tags.total > 0) || filters.tags) {\n      const ts = (tags?.tags ?? []).map(tag => tag.tag);\n      if (filters.tags) {\n        ts.push(...filters.tags);\n      }\n      setAvailableTags([...new Set(ts)]);\n    }\n  }, [tags, filters.tags]);\n\n  useEffect(() => {\n    const entityRefs: string[] = [];\n    if (filters.entity && !Array.isArray(filters.entity)) {\n      entityRefs.push(filters.entity);\n    }\n    if (refs && refs.entities && refs.total > 0) {\n      refs.entities.forEach(ref => {\n        // ignore currently selected entity if exist in refs\n        if (ref.entityRef !== filters.entity) {\n          entityRefs.push(ref.entityRef);\n        }\n      });\n    }\n    if (entityRefs.length > 0) {\n      catalogApi\n        .getEntitiesByRefs({\n          entityRefs,\n          fields: [\n            'kind',\n            'metadata.name',\n            'metadata.namespace',\n            'metadata.title',\n          ],\n        })\n        .then(resp => {\n          const filtered = resp.items.filter(i => i !== undefined) as Entity[];\n          setAvailableEntities(filtered);\n        });\n    }\n  }, [filters.entity, catalogApi, refs]);\n\n  useEffect(() => {\n    if (filters.entity && availableEntities) {\n      const value = availableEntities.find(\n        e => stringifyEntityRef(e) === filters.entity,\n      );\n      setSelectedEntity(value);\n      if (!value) {\n        onChange('entity', '');\n      }\n    } else {\n      setSelectedEntity(undefined);\n    }\n  }, [availableEntities, filters.entity, onChange]);\n\n  const handleChange = (event: {\n    target: {\n      value: string | string[];\n      type?: string;\n      name: string;\n      checked?: boolean;\n    };\n  }) => {\n    let value = event.target.value;\n    if (event.target.type === 'checkbox') {\n      value = event.target.checked ? 'true' : 'false';\n    }\n    onChange(event.target.name as FilterKey, value);\n  };\n\n  return (\n    <Box className={`qetaFilterPanel ${styles.filterPanel}`}>\n      <Grid container spacing={4}>\n        <Grid item md={3} xs={4}>\n          <FormGroup>\n            {!answerFilters && type !== 'article' && (\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    size=\"small\"\n                    name=\"noAnswers\"\n                    onChange={handleChange}\n                    checked={filters.noAnswers === 'true'}\n                  />\n                }\n                label={t('filterPanel.noAnswers.label')}\n              />\n            )}\n            {type !== 'article' && (\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    size=\"small\"\n                    name=\"noCorrectAnswer\"\n                    checked={filters.noCorrectAnswer === 'true'}\n                    onChange={handleChange}\n                  />\n                }\n                label={t('filterPanel.noCorrectAnswers.label')}\n              />\n            )}\n            <FormControlLabel\n              control={\n                <Checkbox\n                  size=\"small\"\n                  name=\"noVotes\"\n                  checked={filters.noVotes === 'true'}\n                  onChange={handleChange}\n                />\n              }\n              label={t('filterPanel.noVotes.label')}\n            />\n          </FormGroup>\n        </Grid>\n        <Grid item md={2} xs={4}>\n          <FormControl>\n            <FormLabel id=\"qeta-filter-order-by\">\n              {t('filterPanel.orderBy.label')}\n            </FormLabel>\n            <RadioGroup\n              aria-labelledby=\"qeta-filter-order-by\"\n              name=\"orderBy\"\n              value={filters.orderBy}\n              onChange={handleChange}\n            >\n              {radioSelect('created', t('filterPanel.orderBy.created'))}\n              {!answerFilters &&\n                radioSelect('views', t('filterPanel.orderBy.views'))}\n              {radioSelect('score', t('filterPanel.orderBy.score'))}\n              {!answerFilters &&\n                radioSelect('answersCount', t('filterPanel.orderBy.answers'))}\n              {radioSelect('updated', t('filterPanel.orderBy.updated'))}\n            </RadioGroup>\n          </FormControl>\n        </Grid>\n        <Grid item md={2} xs={4}>\n          <FormControl>\n            <FormLabel id=\"qeta-filter-order\">\n              {t('filterPanel.order.label')}\n            </FormLabel>\n            <RadioGroup\n              aria-labelledby=\"qeta-filter-order\"\n              name=\"order\"\n              value={filters.order}\n              onChange={handleChange}\n            >\n              {radioSelect('desc', t('filterPanel.order.desc'))}\n              {radioSelect('asc', t('filterPanel.order.asc'))}\n            </RadioGroup>\n          </FormControl>\n        </Grid>\n        {((availableEntities && availableEntities.length > 0) ||\n          (availableTags && availableTags.length > 0)) &&\n          (showEntityFilter || showTagFilter) && (\n            <Grid item md={4} xs={8}>\n              <FormLabel id=\"qeta-filter-entity\">\n                {t('filterPanel.filters.label')}\n              </FormLabel>\n              {showEntityFilter &&\n                availableEntities &&\n                availableEntities.length > 0 && (\n                  <Autocomplete\n                    multiple={false}\n                    className=\"qetaEntityFilter\"\n                    value={selectedEntity ?? null}\n                    id=\"entities-select\"\n                    options={availableEntities}\n                    getOptionLabel={getEntityTitle}\n                    getOptionSelected={(o, v) => {\n                      if (!o || !v) {\n                        return false;\n                      }\n                      return stringifyEntityRef(o) === stringifyEntityRef(v);\n                    }}\n                    onChange={(_e, newValue) => {\n                      handleChange({\n                        target: {\n                          name: 'entity',\n                          value: newValue ? stringifyEntityRef(newValue) : '',\n                        },\n                      });\n                    }}\n                    renderInput={params => (\n                      <TextField\n                        {...params}\n                        variant=\"outlined\"\n                        margin=\"normal\"\n                        label={t('filterPanel.filters.entity.label')}\n                        placeholder={t(\n                          'filterPanel.filters.entity.placeholder',\n                        )}\n                      />\n                    )}\n                  />\n                )}\n              {showTagFilter && availableTags && availableTags.length > 0 && (\n                <Autocomplete\n                  multiple\n                  className=\"qetaTagFilter\"\n                  value={filters.tags}\n                  id=\"tags-select\"\n                  options={availableTags}\n                  onChange={(_e, newValue) => {\n                    handleChange({\n                      target: {\n                        name: 'tags',\n                        value: newValue,\n                      },\n                    });\n                  }}\n                  renderInput={params => (\n                    <TextField\n                      {...params}\n                      variant=\"outlined\"\n                      margin=\"normal\"\n                      label={t('filterPanel.filters.tag.label')}\n                      placeholder={t('filterPanel.filters.tag.placeholder')}\n                    />\n                  )}\n                />\n              )}\n            </Grid>\n          )}\n      </Grid>\n      <Box marginY=\"24px\">\n        <Divider />\n      </Box>\n      <DateRangeFilter value={filters.dateRange} onChange={onChange} />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilterPanel.esm.js","sources":["../../../src/components/FilterPanel/FilterPanel.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport {\n  Box,\n  Checkbox,\n  Divider,\n  FormControl,\n  FormControlLabel,\n  FormGroup,\n  FormLabel,\n  Grid,\n  Radio,\n  RadioGroup,\n  TextField,\n  Tooltip,\n} from '@material-ui/core';\nimport { Autocomplete } from '@material-ui/lab';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { getEntityTitle } from '../../utils/utils';\nimport { DateRangeFilter } from './DateRangeFilter';\nimport { PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { useQetaApi, useStyles, useTranslation } from '../../hooks';\n\nconst radioSelect = (value: string, label: string) => {\n  return (\n    <FormControlLabel\n      value={value}\n      control={<Radio size=\"small\" />}\n      label={label}\n    />\n  );\n};\n\nexport const filterKeys = [\n  'orderBy',\n  'order',\n  'noAnswers',\n  'noCorrectAnswer',\n  'noVotes',\n  'entity',\n  'tags',\n  'dateRange',\n] as const;\nexport type FilterKey = (typeof filterKeys)[number];\n\nexport type Filters = {\n  order: string;\n  orderBy: string;\n  noAnswers?: string;\n  noCorrectAnswer: string;\n  noVotes: string;\n  searchQuery: string;\n  entity?: string;\n  tags?: string[];\n  dateRange?: string;\n  collectionId?: number;\n  type?: PostType;\n};\n\nexport interface FilterPanelProps {\n  onChange: (key: FilterKey, value: string | string[]) => void;\n  filters: Filters;\n  showEntityFilter?: boolean;\n  showTagFilter?: boolean;\n  answerFilters?: boolean;\n  type?: PostType;\n  showRankOrder?: boolean;\n}\n\nexport const FilterPanel = (props: FilterPanelProps) => {\n  const {\n    onChange,\n    filters,\n    showEntityFilter = true,\n    showTagFilter = true,\n    answerFilters = false,\n    type,\n    showRankOrder = false,\n  } = props;\n  const styles = useStyles();\n  const { value: refs } = useQetaApi(api => api.getEntities(), []);\n  const { value: tags } = useQetaApi(api => api.getTags(), []);\n  const catalogApi = useApi(catalogApiRef);\n  const { t } = useTranslation();\n  const [availableEntities, setAvailableEntities] = React.useState<\n    Entity[] | null\n  >(null);\n  const [selectedEntity, setSelectedEntity] = React.useState<\n    Entity | undefined\n  >(undefined);\n  const [availableTags, setAvailableTags] = React.useState<string[] | null>(\n    null,\n  );\n  const [tagDescriptions, setTagDescriptions] = React.useState<\n    Record<string, string>\n  >({});\n\n  useEffect(() => {\n    if ((tags && tags.tags && tags.total > 0) || filters.tags) {\n      const ts = (tags?.tags ?? []).map(tag => tag.tag);\n      if (filters.tags) {\n        ts.push(...filters.tags);\n      }\n      setAvailableTags([...new Set(ts)]);\n      setTagDescriptions(\n        tags?.tags.reduce((acc, tag) => {\n          if (!tag.description) {\n            return acc;\n          }\n          acc[tag.tag] = tag.description;\n          return acc;\n        }, {} as Record<string, string>) ?? {},\n      );\n    }\n  }, [tags, filters.tags]);\n\n  useEffect(() => {\n    const entityRefs: string[] = [];\n    if (filters.entity && !Array.isArray(filters.entity)) {\n      entityRefs.push(filters.entity);\n    }\n    if (refs && refs.entities && refs.total > 0) {\n      refs.entities.forEach(ref => {\n        // ignore currently selected entity if exist in refs\n        if (ref.entityRef !== filters.entity) {\n          entityRefs.push(ref.entityRef);\n        }\n      });\n    }\n    if (entityRefs.length > 0) {\n      catalogApi\n        .getEntitiesByRefs({\n          entityRefs,\n          fields: [\n            'kind',\n            'metadata.name',\n            'metadata.namespace',\n            'metadata.title',\n          ],\n        })\n        .then(resp => {\n          const filtered = resp.items.filter(i => i !== undefined) as Entity[];\n          setAvailableEntities(filtered);\n        });\n    }\n  }, [filters.entity, catalogApi, refs]);\n\n  useEffect(() => {\n    if (filters.entity && availableEntities) {\n      const value = availableEntities.find(\n        e => stringifyEntityRef(e) === filters.entity,\n      );\n      setSelectedEntity(value);\n      if (!value) {\n        onChange('entity', '');\n      }\n    } else {\n      setSelectedEntity(undefined);\n    }\n  }, [availableEntities, filters.entity, onChange]);\n\n  const handleChange = (event: {\n    target: {\n      value: string | string[];\n      type?: string;\n      name: string;\n      checked?: boolean;\n    };\n  }) => {\n    let value = event.target.value;\n    if (event.target.type === 'checkbox') {\n      value = event.target.checked ? 'true' : 'false';\n    }\n    onChange(event.target.name as FilterKey, value);\n  };\n\n  return (\n    <Box className={`qetaFilterPanel ${styles.filterPanel}`}>\n      <Grid\n        container\n        spacing={4}\n        alignItems=\"stretch\"\n        justifyContent=\"space-evenly\"\n      >\n        <Grid item>\n          <FormGroup>\n            <FormLabel id=\"qeta-filter-quick\">\n              {t('filterPanel.quickFilters.label')}\n            </FormLabel>\n            {!answerFilters && type !== 'article' && (\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    size=\"small\"\n                    name=\"noAnswers\"\n                    onChange={handleChange}\n                    checked={filters.noAnswers === 'true'}\n                  />\n                }\n                label={t('filterPanel.noAnswers.label')}\n              />\n            )}\n            {type !== 'article' && (\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    size=\"small\"\n                    name=\"noCorrectAnswer\"\n                    checked={filters.noCorrectAnswer === 'true'}\n                    onChange={handleChange}\n                  />\n                }\n                label={t('filterPanel.noCorrectAnswers.label')}\n              />\n            )}\n            <FormControlLabel\n              control={\n                <Checkbox\n                  size=\"small\"\n                  name=\"noVotes\"\n                  checked={filters.noVotes === 'true'}\n                  onChange={handleChange}\n                />\n              }\n              label={t('filterPanel.noVotes.label')}\n            />\n          </FormGroup>\n        </Grid>\n        <Grid item>\n          <FormControl>\n            <FormLabel id=\"qeta-filter-order-by\">\n              {t('filterPanel.orderBy.label')}\n            </FormLabel>\n            <RadioGroup\n              aria-labelledby=\"qeta-filter-order-by\"\n              name=\"orderBy\"\n              value={filters.orderBy}\n              onChange={handleChange}\n              style={{\n                display: 'grid',\n                gridTemplateColumns: '1fr 1fr',\n                gap: '0 1rem',\n              }}\n            >\n              {showRankOrder &&\n                radioSelect('rank', t('filterPanel.orderBy.rank'))}\n              {radioSelect('created', t('filterPanel.orderBy.created'))}\n              {radioSelect('title', t('filterPanel.orderBy.title'))}\n              {!answerFilters &&\n                radioSelect('views', t('filterPanel.orderBy.views'))}\n              {radioSelect('score', t('filterPanel.orderBy.score'))}\n              {!answerFilters &&\n                radioSelect('trend', t('filterPanel.orderBy.trend'))}\n              {!answerFilters &&\n                radioSelect('answersCount', t('filterPanel.orderBy.answers'))}\n              {radioSelect('updated', t('filterPanel.orderBy.updated'))}\n            </RadioGroup>\n          </FormControl>\n        </Grid>\n        <Grid item>\n          <FormControl>\n            <FormLabel id=\"qeta-filter-order\">\n              {t('filterPanel.order.label')}\n            </FormLabel>\n            <RadioGroup\n              aria-labelledby=\"qeta-filter-order\"\n              name=\"order\"\n              value={filters.order}\n              onChange={handleChange}\n            >\n              {radioSelect('desc', t('filterPanel.order.desc'))}\n              {radioSelect('asc', t('filterPanel.order.asc'))}\n            </RadioGroup>\n          </FormControl>\n        </Grid>\n      </Grid>\n      <Box marginY=\"24px\">\n        <Divider />\n      </Box>\n      <Grid container alignItems=\"stretch\" justifyContent=\"space-evenly\">\n        <Grid item>\n          <DateRangeFilter value={filters.dateRange} onChange={onChange} />\n        </Grid>\n\n        {showEntityFilter &&\n          availableEntities &&\n          availableEntities.length > 0 && (\n            <Grid item>\n              <Autocomplete\n                multiple={false}\n                disablePortal\n                className=\"qetaEntityFilter\"\n                value={selectedEntity ?? null}\n                id=\"entities-select\"\n                options={availableEntities}\n                renderOption={option => {\n                  return (\n                    <>\n                      <Tooltip title={stringifyEntityRef(option)}>\n                        <span>{getEntityTitle(option)}</span>\n                      </Tooltip>\n                    </>\n                  );\n                }}\n                getOptionLabel={getEntityTitle}\n                getOptionSelected={(o, v) => {\n                  if (!o || !v) {\n                    return false;\n                  }\n                  return stringifyEntityRef(o) === stringifyEntityRef(v);\n                }}\n                onChange={(_e, newValue) => {\n                  handleChange({\n                    target: {\n                      name: 'entity',\n                      value: newValue ? stringifyEntityRef(newValue) : '',\n                    },\n                  });\n                }}\n                renderInput={params => (\n                  <TextField\n                    {...params}\n                    style={{ minWidth: '200px' }}\n                    variant=\"outlined\"\n                    margin=\"normal\"\n                    label={t('filterPanel.filters.entity.label')}\n                    placeholder={t('filterPanel.filters.entity.placeholder')}\n                  />\n                )}\n              />\n            </Grid>\n          )}\n        {showTagFilter && availableTags && availableTags.length > 0 && (\n          <Grid item>\n            <Autocomplete\n              multiple\n              style={{ minWidth: '200px' }}\n              disablePortal\n              className=\"qetaTagFilter\"\n              value={filters.tags}\n              id=\"tags-select\"\n              options={availableTags}\n              renderOption={option => {\n                if (tagDescriptions[option]) {\n                  return (\n                    <>\n                      <Tooltip title={tagDescriptions[option]}>\n                        <span>{option}</span>\n                      </Tooltip>\n                    </>\n                  );\n                }\n                return option;\n              }}\n              onChange={(_e, newValue) => {\n                handleChange({\n                  target: {\n                    name: 'tags',\n                    value: newValue,\n                  },\n                });\n              }}\n              renderInput={params => (\n                <TextField\n                  {...params}\n                  variant=\"outlined\"\n                  margin=\"normal\"\n                  label={t('filterPanel.filters.tag.label')}\n                  placeholder={t('filterPanel.filters.tag.placeholder')}\n                />\n              )}\n            />\n          </Grid>\n        )}\n      </Grid>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/LoadingGrid/LoadingGrid.esm.js

@@ -0,0 +1,18 @@
+import { Grid, CircularProgress } from '@material-ui/core';
+import React from 'react';
+
+const LoadingGrid = () => {
+  return /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      container: true,
+      justifyContent: "center",
+      alignItems: "center",
+      style: { height: "20vh" }
+    },
+    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(CircularProgress, null))
+  );
+};
+
+export { LoadingGrid };
+//# sourceMappingURL=LoadingGrid.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingGrid.esm.js","sources":["../../../src/components/LoadingGrid/LoadingGrid.tsx"],"sourcesContent":["import { CircularProgress, Grid } from '@material-ui/core';\nimport React from 'react';\n\nexport const LoadingGrid = () => {\n  return (\n    <Grid\n      container\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      style={{ height: '20vh' }}\n    >\n      <Grid item>\n        <CircularProgress />\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,cAAc,MAAM;AAC/B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,cAAe,EAAA,QAAA;AAAA,MACf,UAAW,EAAA,QAAA;AAAA,MACX,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAO,EAAA;AAAA,KAAA;AAAA,wCAEvB,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,sBAAiB,CACpB,CAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/components/PostForm/EntitiesInput.esm.js

@@ -2,7 +2,7 @@ import { Controller } from 'react-hook-form';
 import { Autocomplete } from '@material-ui/lab';
 import { getEntityTitle } from '../../utils/utils.esm.js';
 import { stringifyEntityRef } from '@backstage/catalog-model';
-import { TextField } from '@material-ui/core';
+import { Tooltip, TextField } from '@material-ui/core';
 import React, { useMemo, useEffect } from 'react';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
@@ -80,6 +80,9 @@ const EntitiesInput = (props) => {
               onChange(newValue);
             }
           },
+          renderOption: (option) => {
+            return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: stringifyEntityRef(option) }, /* @__PURE__ */ React.createElement("span", null, getEntityTitle(option))));
+          },
           renderInput: (params) => /* @__PURE__ */ React.createElement(
             TextField,
             {