@drodil/backstage-plugin-qeta-react 3.51.0 → 3.52.0

package/dist/components/SuggestionsCard/SuggestionsCard.esm.js

@@ -12,6 +12,7 @@ import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import { selectByPostType } from '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
+import { makeStyles, Card, CardHeader, IconButton, Divider, List, ListItem, ListItemIcon, ListItemText, Typography } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
 import AssistantIcon from '@material-ui/icons/Assistant';
 import HelpOutlinedIcon from '@material-ui/icons/HelpOutlined';
@@ -19,9 +20,9 @@ import CheckIcon from '@material-ui/icons/Check';
 import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';
 import LinkIcon from '@material-ui/icons/Link';
 import RefreshIcon from '@material-ui/icons/Refresh';
-import { useNavigate } from 'react-router-dom';
+import RateReview from '@material-ui/icons/RateReview';
+import { Link } from 'react-router-dom';
 import { questionRouteRef, articleRouteRef, linkRouteRef } from '../../routes.esm.js';
-import { makeStyles, Card, CardHeader, IconButton, Divider, List, ListItem, ListItemIcon, ListItemText, Typography } from '@material-ui/core';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
 import { getPostDisplayDate } from '../../utils/utils.esm.js';
 
@@ -66,13 +67,13 @@ const getRandomVariant = (key) => {
   return `${key}${Math.floor(Math.random() * 5) + 1}`;
 };
 const SuggestionListItem = (props) => {
-  const navigate = useNavigate();
   const classes = useStyles();
   return /* @__PURE__ */ jsxs(
     ListItem,
     {
       button: true,
-      onClick: () => navigate(props.href),
+      component: Link,
+      to: props.href,
       className: classes.listItem,
       children: [
         props.icon && /* @__PURE__ */ jsx(ListItemIcon, { className: classes.listItemIcon, children: props.icon }),
@@ -229,13 +230,42 @@ const RandomPostSuggestionItem = (props) => {
     }
   );
 };
+const NeedsReviewSuggestionItem = (props) => {
+  const { suggestion } = props;
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const questionRoute = useRouteRef(questionRouteRef);
+  const articleRoute = useRouteRef(articleRouteRef);
+  const linkRoute = useRouteRef(linkRouteRef);
+  const route = selectByPostType(
+    suggestion.post.type,
+    questionRoute,
+    articleRoute,
+    linkRoute
+  );
+  const variant = useMemo(
+    () => getRandomVariant("suggestionsCard.needsReview"),
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    SuggestionListItem,
+    {
+      href: route({ id: suggestion.post.id.toString(10) }),
+      icon: /* @__PURE__ */ jsx(RateReview, {}),
+      timestamp: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: suggestion.post.created }),
+      children: t(variant, {
+        title: suggestion.post.title
+      })
+    }
+  );
+};
 const suggestionTypeMap = {
   noCorrectAnswer: NoCorrectAnswerSuggestionItem,
   newQuestion: NewQuestionSuggestionItem,
   newArticle: NewArticleSuggestionItem,
   newLink: NewLinkSuggestionItem,
   draftPost: DraftPostSuggestionItem,
-  randomPost: RandomPostSuggestionItem
+  randomPost: RandomPostSuggestionItem,
+  needsReview: NeedsReviewSuggestionItem
 };
 const SuggestionsCard = () => {
   const { t } = useTranslationRef(qetaTranslationRef);

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

@@ -1 +1 @@
-{"version":3,"file":"SuggestionsCard.esm.js","sources":["../../../src/components/SuggestionsCard/SuggestionsCard.tsx"],"sourcesContent":["import { useQetaApi } from '../../hooks';\nimport { ReactNode, useMemo } from 'react';\nimport { Skeleton } from '@material-ui/lab';\nimport {\n  DraftPostSuggestion,\n  NewArticleSuggestion,\n  NewLinkSuggestion,\n  NewQuestionSuggestion,\n  NoCorrectAnswerSuggestion,\n  selectByPostType,\n  SuggestionsResponse,\n  SuggestionType,\n} from '@drodil/backstage-plugin-qeta-common';\nimport AssistantIcon from '@material-ui/icons/Assistant';\nimport HelpOutlinedIcon from '@material-ui/icons/HelpOutlined';\nimport CheckIcon from '@material-ui/icons/Check';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\nimport LinkIcon from '@material-ui/icons/Link';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport { useNavigate } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, linkRouteRef, questionRouteRef } from '../../routes';\nimport {\n  Card,\n  CardHeader,\n  Divider,\n  IconButton,\n  List,\n  ListItem,\n  ListItemIcon,\n  ListItemText,\n  makeStyles,\n  Typography,\n} from '@material-ui/core';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { getPostDisplayDate } from '../../utils/utils';\n\nconst useStyles = makeStyles(theme => ({\n  card: {\n    height: '100%',\n  },\n  header: {\n    paddingBottom: theme.spacing(1),\n  },\n  listItem: {\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n    },\n    transition: 'background-color 0.2s ease',\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n  },\n  listItemText: {\n    marginTop: theme.spacing(0.5),\n    paddingLeft: theme.spacing(2),\n  },\n  listItemIcon: {\n    minWidth: theme.spacing(5),\n    paddingLeft: theme.spacing(1),\n  },\n  timestamp: {\n    color: theme.palette.text.secondary,\n  },\n  emptyState: {\n    padding: theme.spacing(3),\n    textAlign: 'center',\n    color: theme.palette.text.secondary,\n  },\n  loadingContainer: {\n    display: 'flex',\n    justifyContent: 'center',\n    padding: theme.spacing(3),\n  },\n}));\n\nconst getRandomVariant = (key: string) => {\n  return `${key}${Math.floor(Math.random() * 5) + 1}`;\n};\n\nconst SuggestionListItem = (props: {\n  children: ReactNode;\n  href: string;\n  icon?: ReactNode;\n  timestamp?: ReactNode;\n}) => {\n  const navigate = useNavigate();\n  const classes = useStyles();\n  return (\n    <ListItem\n      button\n      onClick={() => navigate(props.href)}\n      className={classes.listItem}\n    >\n      {props.icon && (\n        <ListItemIcon className={classes.listItemIcon}>\n          {props.icon}\n        </ListItemIcon>\n      )}\n      <ListItemText\n        primary={props.children}\n        secondary={props.timestamp}\n        className={classes.listItemText}\n      />\n    </ListItem>\n  );\n};\n\nconst NoCorrectAnswerSuggestionItem = (props: {\n  suggestion: NoCorrectAnswerSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.noCorrectAnswer'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={questionRoute({ id: suggestion.question.id.toString(10) })}\n      icon={<CheckIcon />}\n      timestamp={\n        <RelativeTimeWithTooltip value={suggestion.question.created} />\n      }\n    >\n      {t(variant as any, {\n        title: suggestion.question.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst NewQuestionSuggestionItem = (props: {\n  suggestion: NewQuestionSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.newQuestion'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={questionRoute({ id: suggestion.question.id.toString(10) })}\n      icon={<HelpOutlinedIcon />}\n      timestamp={\n        <RelativeTimeWithTooltip value={suggestion.question.created} />\n      }\n    >\n      {t(variant as any, {\n        title: suggestion.question.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst DraftPostSuggestionItem = (props: {\n  suggestion: DraftPostSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const linkRoute = useRouteRef(linkRouteRef);\n  const route = selectByPostType(\n    suggestion.post.type,\n    questionRoute,\n    articleRoute,\n    linkRoute,\n  );\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.draftPost'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={route({ id: suggestion.post.id.toString(10) })}\n      icon={<HelpOutlinedIcon />}\n      timestamp={<RelativeTimeWithTooltip value={suggestion.post.created} />}\n    >\n      {t(variant as any, {\n        title: suggestion.post.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst NewArticleSuggestionItem = (props: {\n  suggestion: NewArticleSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.newArticle'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={articleRoute({ id: suggestion.article.id.toString(10) })}\n      icon={<CollectionsBookmarkIcon />}\n      timestamp={\n        <RelativeTimeWithTooltip\n          value={getPostDisplayDate(suggestion.article)}\n        />\n      }\n    >\n      {t(variant as any, {\n        title: suggestion.article.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst NewLinkSuggestionItem = (props: { suggestion: NewLinkSuggestion }) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const linkRoute = useRouteRef(linkRouteRef);\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.newLink'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={linkRoute({ id: suggestion.link.id.toString(10) })}\n      icon={<LinkIcon />}\n      timestamp={\n        <RelativeTimeWithTooltip value={getPostDisplayDate(suggestion.link)} />\n      }\n    >\n      {t(variant as any, {\n        title: suggestion.link.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst RandomPostSuggestionItem = (props: {\n  suggestion: DraftPostSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const linkRoute = useRouteRef(linkRouteRef);\n  const route = selectByPostType(\n    suggestion.post.type,\n    questionRoute,\n    articleRoute,\n    linkRoute,\n  );\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.randomPost'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={route({ id: suggestion.post.id.toString(10) })}\n      icon={<HelpOutlinedIcon />}\n      timestamp={<RelativeTimeWithTooltip value={suggestion.post.created} />}\n    >\n      {t(variant as any, {\n        title: suggestion.post.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst suggestionTypeMap: Record<SuggestionType, any> = {\n  noCorrectAnswer: NoCorrectAnswerSuggestionItem,\n  newQuestion: NewQuestionSuggestionItem,\n  newArticle: NewArticleSuggestionItem,\n  newLink: NewLinkSuggestionItem,\n  draftPost: DraftPostSuggestionItem,\n  randomPost: RandomPostSuggestionItem,\n};\n\nexport const SuggestionsCard = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const classes = useStyles();\n  const {\n    value: response,\n    loading,\n    retry,\n  } = useQetaApi<SuggestionsResponse>(api => api.getSuggestions(), []);\n\n  const suggestions = response?.suggestions ?? [];\n\n  const handleRefresh = () => {\n    retry();\n  };\n\n  const renderContent = () => {\n    if (loading) {\n      return (\n        <List>\n          {Array.from(new Array(5)).map((_, index) => (\n            <ListItem key={index} className={classes.listItem}>\n              <ListItemIcon className={classes.listItemIcon}>\n                <Skeleton variant=\"circle\" width={24} height={24} />\n              </ListItemIcon>\n              <ListItemText\n                primary={<Skeleton variant=\"text\" width=\"80%\" />}\n                secondary={<Skeleton variant=\"text\" width=\"40%\" />}\n                className={classes.listItemText}\n              />\n            </ListItem>\n          ))}\n        </List>\n      );\n    }\n\n    if (suggestions.length === 0) {\n      return (\n        <div className={classes.emptyState}>\n          <AssistantIcon style={{ fontSize: 40 }} />\n          <Typography variant=\"body1\">\n            {t('suggestionsCard.noSuggestions')}\n          </Typography>\n        </div>\n      );\n    }\n\n    return (\n      <List>\n        {suggestions.map((suggestion, index) => {\n          const SuggestionComponent = suggestionTypeMap[suggestion.type];\n          return (\n            <div key={suggestion.id}>\n              <SuggestionComponent suggestion={suggestion} />\n              {index < suggestions.length - 1 && <Divider />}\n            </div>\n          );\n        })}\n      </List>\n    );\n  };\n\n  return (\n    <Card className={classes.card}>\n      <CardHeader\n        className={classes.header}\n        title={t('suggestionsCard.title')}\n        avatar={<AssistantIcon />}\n        titleTypographyProps={{ variant: 'h5' }}\n        action={\n          <IconButton onClick={handleRefresh} disabled={loading}>\n            <RefreshIcon />\n          </IconButton>\n        }\n      />\n      <Divider />\n      {renderContent()}\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SuggestionsCard.esm.js","sources":["../../../src/components/SuggestionsCard/SuggestionsCard.tsx"],"sourcesContent":["import { useQetaApi } from '../../hooks';\nimport { ReactNode, useMemo } from 'react';\nimport { Skeleton } from '@material-ui/lab';\nimport {\n  DraftPostSuggestion,\n  NeedsReviewSuggestion,\n  NewArticleSuggestion,\n  NewLinkSuggestion,\n  NewQuestionSuggestion,\n  NoCorrectAnswerSuggestion,\n  selectByPostType,\n  SuggestionsResponse,\n  SuggestionType,\n} from '@drodil/backstage-plugin-qeta-common';\nimport AssistantIcon from '@material-ui/icons/Assistant';\nimport HelpOutlinedIcon from '@material-ui/icons/HelpOutlined';\nimport CheckIcon from '@material-ui/icons/Check';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\nimport LinkIcon from '@material-ui/icons/Link';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport RateReviewIcon from '@material-ui/icons/RateReview';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, linkRouteRef, questionRouteRef } from '../../routes';\nimport {\n  Card,\n  CardHeader,\n  Divider,\n  IconButton,\n  List,\n  ListItem,\n  ListItemIcon,\n  ListItemText,\n  makeStyles,\n  Typography,\n} from '@material-ui/core';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { getPostDisplayDate } from '../../utils/utils';\n\nconst useStyles = makeStyles(theme => ({\n  card: {\n    height: '100%',\n  },\n  header: {\n    paddingBottom: theme.spacing(1),\n  },\n  listItem: {\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n    },\n    transition: 'background-color 0.2s ease',\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n  },\n  listItemText: {\n    marginTop: theme.spacing(0.5),\n    paddingLeft: theme.spacing(2),\n  },\n  listItemIcon: {\n    minWidth: theme.spacing(5),\n    paddingLeft: theme.spacing(1),\n  },\n  timestamp: {\n    color: theme.palette.text.secondary,\n  },\n  emptyState: {\n    padding: theme.spacing(3),\n    textAlign: 'center',\n    color: theme.palette.text.secondary,\n  },\n  loadingContainer: {\n    display: 'flex',\n    justifyContent: 'center',\n    padding: theme.spacing(3),\n  },\n}));\n\nconst getRandomVariant = (key: string) => {\n  return `${key}${Math.floor(Math.random() * 5) + 1}`;\n};\n\nconst SuggestionListItem = (props: {\n  children: ReactNode;\n  href: string;\n  icon?: ReactNode;\n  timestamp?: ReactNode;\n}) => {\n  const classes = useStyles();\n  return (\n    <ListItem\n      button\n      component={RouterLink}\n      to={props.href}\n      className={classes.listItem}\n    >\n      {props.icon && (\n        <ListItemIcon className={classes.listItemIcon}>\n          {props.icon}\n        </ListItemIcon>\n      )}\n      <ListItemText\n        primary={props.children}\n        secondary={props.timestamp}\n        className={classes.listItemText}\n      />\n    </ListItem>\n  );\n};\n\nconst NoCorrectAnswerSuggestionItem = (props: {\n  suggestion: NoCorrectAnswerSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.noCorrectAnswer'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={questionRoute({ id: suggestion.question.id.toString(10) })}\n      icon={<CheckIcon />}\n      timestamp={\n        <RelativeTimeWithTooltip value={suggestion.question.created} />\n      }\n    >\n      {t(variant as any, {\n        title: suggestion.question.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst NewQuestionSuggestionItem = (props: {\n  suggestion: NewQuestionSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.newQuestion'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={questionRoute({ id: suggestion.question.id.toString(10) })}\n      icon={<HelpOutlinedIcon />}\n      timestamp={\n        <RelativeTimeWithTooltip value={suggestion.question.created} />\n      }\n    >\n      {t(variant as any, {\n        title: suggestion.question.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst DraftPostSuggestionItem = (props: {\n  suggestion: DraftPostSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const linkRoute = useRouteRef(linkRouteRef);\n  const route = selectByPostType(\n    suggestion.post.type,\n    questionRoute,\n    articleRoute,\n    linkRoute,\n  );\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.draftPost'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={route({ id: suggestion.post.id.toString(10) })}\n      icon={<HelpOutlinedIcon />}\n      timestamp={<RelativeTimeWithTooltip value={suggestion.post.created} />}\n    >\n      {t(variant as any, {\n        title: suggestion.post.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst NewArticleSuggestionItem = (props: {\n  suggestion: NewArticleSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.newArticle'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={articleRoute({ id: suggestion.article.id.toString(10) })}\n      icon={<CollectionsBookmarkIcon />}\n      timestamp={\n        <RelativeTimeWithTooltip\n          value={getPostDisplayDate(suggestion.article)}\n        />\n      }\n    >\n      {t(variant as any, {\n        title: suggestion.article.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst NewLinkSuggestionItem = (props: { suggestion: NewLinkSuggestion }) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const linkRoute = useRouteRef(linkRouteRef);\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.newLink'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={linkRoute({ id: suggestion.link.id.toString(10) })}\n      icon={<LinkIcon />}\n      timestamp={\n        <RelativeTimeWithTooltip value={getPostDisplayDate(suggestion.link)} />\n      }\n    >\n      {t(variant as any, {\n        title: suggestion.link.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst RandomPostSuggestionItem = (props: {\n  suggestion: DraftPostSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const linkRoute = useRouteRef(linkRouteRef);\n  const route = selectByPostType(\n    suggestion.post.type,\n    questionRoute,\n    articleRoute,\n    linkRoute,\n  );\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.randomPost'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={route({ id: suggestion.post.id.toString(10) })}\n      icon={<HelpOutlinedIcon />}\n      timestamp={<RelativeTimeWithTooltip value={suggestion.post.created} />}\n    >\n      {t(variant as any, {\n        title: suggestion.post.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst NeedsReviewSuggestionItem = (props: {\n  suggestion: NeedsReviewSuggestion;\n}) => {\n  const { suggestion } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const linkRoute = useRouteRef(linkRouteRef);\n  const route = selectByPostType(\n    suggestion.post.type,\n    questionRoute,\n    articleRoute,\n    linkRoute,\n  );\n  const variant = useMemo(\n    () => getRandomVariant('suggestionsCard.needsReview'),\n    [],\n  );\n  return (\n    <SuggestionListItem\n      href={route({ id: suggestion.post.id.toString(10) })}\n      icon={<RateReviewIcon />}\n      timestamp={<RelativeTimeWithTooltip value={suggestion.post.created} />}\n    >\n      {t(variant as any, {\n        title: suggestion.post.title,\n      })}\n    </SuggestionListItem>\n  );\n};\n\nconst suggestionTypeMap: Record<SuggestionType, any> = {\n  noCorrectAnswer: NoCorrectAnswerSuggestionItem,\n  newQuestion: NewQuestionSuggestionItem,\n  newArticle: NewArticleSuggestionItem,\n  newLink: NewLinkSuggestionItem,\n  draftPost: DraftPostSuggestionItem,\n  randomPost: RandomPostSuggestionItem,\n  needsReview: NeedsReviewSuggestionItem,\n};\n\nexport const SuggestionsCard = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const classes = useStyles();\n  const {\n    value: response,\n    loading,\n    retry,\n  } = useQetaApi<SuggestionsResponse>(api => api.getSuggestions(), []);\n\n  const suggestions = response?.suggestions ?? [];\n\n  const handleRefresh = () => {\n    retry();\n  };\n\n  const renderContent = () => {\n    if (loading) {\n      return (\n        <List>\n          {Array.from(new Array(5)).map((_, index) => (\n            <ListItem key={index} className={classes.listItem}>\n              <ListItemIcon className={classes.listItemIcon}>\n                <Skeleton variant=\"circle\" width={24} height={24} />\n              </ListItemIcon>\n              <ListItemText\n                primary={<Skeleton variant=\"text\" width=\"80%\" />}\n                secondary={<Skeleton variant=\"text\" width=\"40%\" />}\n                className={classes.listItemText}\n              />\n            </ListItem>\n          ))}\n        </List>\n      );\n    }\n\n    if (suggestions.length === 0) {\n      return (\n        <div className={classes.emptyState}>\n          <AssistantIcon style={{ fontSize: 40 }} />\n          <Typography variant=\"body1\">\n            {t('suggestionsCard.noSuggestions')}\n          </Typography>\n        </div>\n      );\n    }\n\n    return (\n      <List>\n        {suggestions.map((suggestion, index) => {\n          const SuggestionComponent = suggestionTypeMap[suggestion.type];\n          return (\n            <div key={suggestion.id}>\n              <SuggestionComponent suggestion={suggestion} />\n              {index < suggestions.length - 1 && <Divider />}\n            </div>\n          );\n        })}\n      </List>\n    );\n  };\n\n  return (\n    <Card className={classes.card}>\n      <CardHeader\n        className={classes.header}\n        title={t('suggestionsCard.title')}\n        avatar={<AssistantIcon />}\n        titleTypographyProps={{ variant: 'h5' }}\n        action={\n          <IconButton onClick={handleRefresh} disabled={loading}>\n            <RefreshIcon />\n          </IconButton>\n        }\n      />\n      <Divider />\n      {renderContent()}\n    </Card>\n  );\n};\n"],"names":["RouterLink","RateReviewIcon"],"mappings":"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"}

package/dist/components/TagsAndEntities/EntityChip.esm.js

@@ -14,8 +14,8 @@ import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { Link } from 'react-router-dom';
 import { Tooltip, Chip, Grid, Box, Typography, Button } from '@material-ui/core';
+import { Link } from 'react-router-dom';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import Visibility from '@material-ui/icons/Visibility';
 import { useTooltipStyles } from '../../hooks/useTooltipStyles.esm.js';

package/dist/components/TagsAndEntities/TagChip.esm.js

@@ -15,8 +15,8 @@ import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { Link } from 'react-router-dom';
 import { Tooltip, Chip, Grid, Box, Typography, Button } from '@material-ui/core';
+import { Link } from 'react-router-dom';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import Visibility from '@material-ui/icons/Visibility';
 import LoyaltyOutlined from '@material-ui/icons/LoyaltyOutlined';

package/dist/components/TagsAndEntities/UserChip.esm.js

@@ -10,9 +10,9 @@ import { useIdentityApi } from '../../hooks/useIdentityApi.esm.js';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
+import { Grid, Box, Avatar, Typography, Button } from '@material-ui/core';
 import '@backstage/plugin-catalog-react';
 import 'react-router-dom';
-import { Grid, Box, Avatar, Typography, Button } from '@material-ui/core';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import Visibility from '@material-ui/icons/Visibility';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';

package/dist/components/TagsGrid/TagsGrid.esm.js

@@ -13,7 +13,7 @@ import { useIsModerator } from '../../hooks/useIsModerator.esm.js';
 import '@backstage/plugin-permission-react';
 import { qetaCreateTagPermission } from '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
+import { useGridPageSize } from '../../hooks/useGridPageSize.esm.js';
 import useDebounce from 'react-use/lib/useDebounce';
 import { TagsGridContent } from './TagsGridContent.esm.js';
 import { Button, Collapse } from '@material-ui/core';
@@ -27,8 +27,7 @@ import FilterList from '@material-ui/icons/FilterList';
 const EXPANDED_LOCAL_STORAGE_KEY = "qeta-tags-filters-expanded";
 const TagsGrid = () => {
   const [page, setPage] = useState(1);
-  const [pageCount, setPageCount] = useState(1);
-  const [tagsPerPage, setTagsPerPage] = useState(25);
+  const tagsPerPage = useGridPageSize("tags", 24);
   const [searchQuery, setSearchQuery] = useState("");
   const { t } = useTranslationRef(qetaTranslationRef);
   const { isModerator } = useIsModerator();
@@ -40,6 +39,9 @@ const TagsGrid = () => {
     orderBy: "postsCount",
     searchQuery: ""
   });
+  const [tags, setTags] = useState([]);
+  const [hasMore, setHasMore] = useState(true);
+  const [total, setTotal] = useState(0);
   useEffect(() => {
     localStorage.setItem(
       EXPANDED_LOCAL_STORAGE_KEY,
@@ -49,6 +51,7 @@ const TagsGrid = () => {
   const onFilterChange = (changes) => {
     const changesArray = Array.isArray(changes) ? changes : [changes];
     setPage(1);
+    setTags([]);
     setFilters((prev) => {
       const newValue = { ...prev };
       for (const { key, value } of changesArray) {
@@ -59,6 +62,7 @@ const TagsGrid = () => {
   };
   const onSearchQueryChange = (val) => {
     setPage(1);
+    setTags([]);
     setSearchQuery(val);
   };
   const {
@@ -86,9 +90,16 @@ const TagsGrid = () => {
   );
   useEffect(() => {
     if (response) {
-      setPageCount(Math.ceil(response.total / tagsPerPage));
+      if (page === 1) {
+        setTags(response.tags);
+      } else {
+        setTags((prev) => [...prev, ...response.tags]);
+      }
+      setHasMore(response.tags.length >= tagsPerPage);
+      setTotal(response.total);
     }
-  }, [response, tagsPerPage]);
+  }, [response, page, tagsPerPage]);
+  const combinedResponse = response ? { ...response, tags, total } : void 0;
   const onTagsModify = () => {
     retry();
   };
@@ -159,21 +170,13 @@ const TagsGrid = () => {
     /* @__PURE__ */ jsx(
       TagsGridContent,
       {
-        response,
+        response: combinedResponse,
         onTagEdit: onTagsModify,
         loading,
         error,
-        isModerator
-      }
-    ),
-    response && response?.total > 0 && /* @__PURE__ */ jsx(
-      QetaPagination,
-      {
-        pageSize: tagsPerPage,
-        handlePageChange: (_e, p) => setPage(p),
-        handlePageSizeChange: (e) => setTagsPerPage(Number(e.target.value)),
-        page,
-        pageCount
+        isModerator,
+        hasMore,
+        loadNextPage: () => setPage((prev) => prev + 1)
       }
     )
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"TagsGrid.esm.js","sources":["../../../src/components/TagsGrid/TagsGrid.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useIsModerator, useQetaApi } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { TagsGridContent } from './TagsGridContent';\nimport { Button } from '@material-ui/core';\nimport { CreateTagModal } from './CreateTagModal';\nimport { qetaCreateTagPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaGridHeader } from '../Utility/QetaGridHeader';\nimport Add from '@material-ui/icons/Add';\n\nimport { Change, FilterPanel, TagFilters } from '../FilterPanel/FilterPanel';\nimport { Collapse } from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-tags-filters-expanded';\n\nexport const TagsGrid = () => {\n  const [page, setPage] = useState(1);\n  const [pageCount, setPageCount] = useState(1);\n  const [tagsPerPage, setTagsPerPage] = useState(25);\n  const [searchQuery, setSearchQuery] = useState('');\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { isModerator } = useIsModerator();\n  const [showFilterPanel, setShowFilterPanel] = useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [filters, setFilters] = useState<TagFilters>({\n    order: 'desc',\n    orderBy: 'postsCount',\n    searchQuery: '',\n  });\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const onFilterChange = (\n    changes: Change<TagFilters> | Change<TagFilters>[],\n  ) => {\n    const changesArray = Array.isArray(changes) ? changes : [changes];\n    setPage(1);\n    setFilters(prev => {\n      const newValue = { ...prev };\n      for (const { key, value } of changesArray) {\n        (newValue as any)[key] = value;\n      }\n      return newValue;\n    });\n  };\n\n  const onSearchQueryChange = (val: string) => {\n    setPage(1);\n    setSearchQuery(val);\n  };\n\n  const {\n    value: response,\n    loading,\n    error,\n    retry,\n  } = useQetaApi(\n    api =>\n      api.getTags({\n        limit: tagsPerPage,\n        offset: (page - 1) * tagsPerPage,\n        checkAccess: true,\n        ...filters,\n      }),\n    [page, tagsPerPage, filters],\n  );\n\n  useDebounce(\n    () => {\n      if (filters.searchQuery !== searchQuery) {\n        setFilters({ ...filters, searchQuery: searchQuery });\n      }\n    },\n    400,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    if (response) {\n      setPageCount(Math.ceil(response.total / tagsPerPage));\n    }\n  }, [response, tagsPerPage]);\n\n  const onTagsModify = () => {\n    retry();\n  };\n\n  const [createModalOpen, setCreateModalOpen] = useState(false);\n  const handleCreateModalOpen = () => setCreateModalOpen(true);\n  const handleCreateModalClose = () => {\n    setCreateModalOpen(false);\n    onTagsModify();\n  };\n\n  return (\n    <>\n      <QetaGridHeader\n        title={response ? t('tagPage.tags', { count: response.total }) : ''}\n        searchBarLabel={t('tagPage.search.label')}\n        loading={loading}\n        onSearch={onSearchQueryChange}\n        buttons={\n          response && (\n            <>\n              <OptionalRequirePermission\n                permission={qetaCreateTagPermission}\n                errorPage={<></>}\n              >\n                <Button\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  startIcon={<Add />}\n                  size=\"small\"\n                  onClick={handleCreateModalOpen}\n                >\n                  {t('tagPage.createTag')}\n                </Button>\n                <CreateTagModal\n                  open={createModalOpen}\n                  onClose={handleCreateModalClose}\n                  isModerator={isModerator}\n                />\n              </OptionalRequirePermission>\n              <Button\n                onClick={() => setShowFilterPanel(!showFilterPanel)}\n                className=\"qetaCollectionsContainerFilterPanelBtn\"\n                startIcon={<FilterList />}\n                style={{ marginLeft: '1em' }}\n              >\n                {t('filterPanel.filterButton')}\n              </Button>\n            </>\n          )\n        }\n      />\n      <Collapse in={showFilterPanel}>\n        <FilterPanel<TagFilters>\n          onChange={onFilterChange}\n          filters={filters}\n          mode=\"tags\"\n        />\n      </Collapse>\n      <TagsGridContent\n        response={response}\n        onTagEdit={onTagsModify}\n        loading={loading}\n        error={error}\n        isModerator={isModerator}\n      />\n      {response && response?.total > 0 && (\n        <QetaPagination\n          pageSize={tagsPerPage}\n          handlePageChange={(_e, p) => setPage(p)}\n          handlePageSizeChange={e => setTagsPerPage(Number(e.target.value))}\n          page={page}\n          pageCount={pageCount}\n        />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TagsGrid.esm.js","sources":["../../../src/components/TagsGrid/TagsGrid.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useGridPageSize, useIsModerator, useQetaApi } from '../../hooks';\n\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { TagsGridContent } from './TagsGridContent';\nimport { Button } from '@material-ui/core';\nimport { CreateTagModal } from './CreateTagModal';\nimport { qetaCreateTagPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaGridHeader } from '../Utility/QetaGridHeader';\nimport Add from '@material-ui/icons/Add';\n\nimport { Change, FilterPanel, TagFilters } from '../FilterPanel/FilterPanel';\nimport { Collapse } from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-tags-filters-expanded';\n\nexport const TagsGrid = () => {\n  const [page, setPage] = useState(1);\n  const tagsPerPage = useGridPageSize('tags', 24);\n  const [searchQuery, setSearchQuery] = useState('');\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { isModerator } = useIsModerator();\n  const [showFilterPanel, setShowFilterPanel] = useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [filters, setFilters] = useState<TagFilters>({\n    order: 'desc',\n    orderBy: 'postsCount',\n    searchQuery: '',\n  });\n  const [tags, setTags] = useState<any[]>([]);\n  const [hasMore, setHasMore] = useState(true);\n  const [total, setTotal] = useState(0);\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const onFilterChange = (\n    changes: Change<TagFilters> | Change<TagFilters>[],\n  ) => {\n    const changesArray = Array.isArray(changes) ? changes : [changes];\n    setPage(1);\n    setTags([]);\n    setFilters(prev => {\n      const newValue = { ...prev };\n      for (const { key, value } of changesArray) {\n        (newValue as any)[key] = value;\n      }\n      return newValue;\n    });\n  };\n\n  const onSearchQueryChange = (val: string) => {\n    setPage(1);\n    setTags([]);\n    setSearchQuery(val);\n  };\n\n  const {\n    value: response,\n    loading,\n    error,\n    retry,\n  } = useQetaApi(\n    api =>\n      api.getTags({\n        limit: tagsPerPage,\n        offset: (page - 1) * tagsPerPage,\n        checkAccess: true,\n        ...filters,\n      }),\n    [page, tagsPerPage, filters],\n  );\n\n  useDebounce(\n    () => {\n      if (filters.searchQuery !== searchQuery) {\n        setFilters({ ...filters, searchQuery: searchQuery });\n      }\n    },\n    400,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    if (response) {\n      if (page === 1) {\n        setTags(response.tags);\n      } else {\n        setTags(prev => [...prev, ...response.tags]);\n      }\n      setHasMore(response.tags.length >= tagsPerPage);\n      setTotal(response.total);\n    }\n  }, [response, page, tagsPerPage]);\n\n  const combinedResponse = response ? { ...response, tags, total } : undefined;\n\n  const onTagsModify = () => {\n    retry();\n  };\n\n  const [createModalOpen, setCreateModalOpen] = useState(false);\n  const handleCreateModalOpen = () => setCreateModalOpen(true);\n  const handleCreateModalClose = () => {\n    setCreateModalOpen(false);\n    onTagsModify();\n  };\n\n  return (\n    <>\n      <QetaGridHeader\n        title={response ? t('tagPage.tags', { count: response.total }) : ''}\n        searchBarLabel={t('tagPage.search.label')}\n        loading={loading}\n        onSearch={onSearchQueryChange}\n        buttons={\n          response && (\n            <>\n              <OptionalRequirePermission\n                permission={qetaCreateTagPermission}\n                errorPage={<></>}\n              >\n                <Button\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  startIcon={<Add />}\n                  size=\"small\"\n                  onClick={handleCreateModalOpen}\n                >\n                  {t('tagPage.createTag')}\n                </Button>\n                <CreateTagModal\n                  open={createModalOpen}\n                  onClose={handleCreateModalClose}\n                  isModerator={isModerator}\n                />\n              </OptionalRequirePermission>\n              <Button\n                onClick={() => setShowFilterPanel(!showFilterPanel)}\n                className=\"qetaCollectionsContainerFilterPanelBtn\"\n                startIcon={<FilterList />}\n                style={{ marginLeft: '1em' }}\n              >\n                {t('filterPanel.filterButton')}\n              </Button>\n            </>\n          )\n        }\n      />\n      <Collapse in={showFilterPanel}>\n        <FilterPanel<TagFilters>\n          onChange={onFilterChange}\n          filters={filters}\n          mode=\"tags\"\n        />\n      </Collapse>\n      <TagsGridContent\n        response={combinedResponse}\n        onTagEdit={onTagsModify}\n        loading={loading}\n        error={error}\n        isModerator={isModerator}\n        hasMore={hasMore}\n        loadNextPage={() => setPage(prev => prev + 1)}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/TagsGrid/TagsGridContent.esm.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { TagGridItem } from './TagGridItem.esm.js';
 import { WarningPanel } from '@backstage/core-components';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
@@ -6,11 +6,29 @@ import { qetaTranslationRef } from '../../translation.esm.js';
 import { NoTagsCard } from './NoTagsCard.esm.js';
 import { LoadingGrid } from '../LoadingGrid/LoadingGrid.esm.js';
 import { Grid } from '@material-ui/core';
+import { useInfiniteScroll } from 'infinite-scroll-hook';
 
 const TagsGridContent = (props) => {
-  const { response, onTagEdit, loading, error, isModerator } = props;
+  const {
+    response,
+    onTagEdit,
+    loading,
+    error,
+    isModerator,
+    hasMore,
+    loadNextPage
+  } = props;
   const { t } = useTranslationRef(qetaTranslationRef);
-  if (loading) {
+  const { containerRef: sentryRef } = useInfiniteScroll({
+    shouldStop: !hasMore || !!error || loading,
+    onLoadMore: async () => {
+      if (loadNextPage) {
+        await loadNextPage();
+      }
+    },
+    offset: "800px"
+  });
+  if (loading && (!response || response.tags.length === 0)) {
     return /* @__PURE__ */ jsx(LoadingGrid, {});
   }
   if (error || response === void 0) {
@@ -19,15 +37,25 @@ const TagsGridContent = (props) => {
   if (!response?.tags || response.tags.length === 0) {
     return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(NoTagsCard, {}) });
   }
-  return /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, alignItems: "stretch", children: response?.tags.map((tag) => /* @__PURE__ */ jsx(
-    TagGridItem,
-    {
-      tag,
-      onTagEdit,
-      isModerator
-    },
-    tag.tag
-  )) });
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, alignItems: "stretch", children: response?.tags.map((tag) => /* @__PURE__ */ jsx(
+      TagGridItem,
+      {
+        tag,
+        onTagEdit,
+        isModerator
+      },
+      tag.tag
+    )) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: sentryRef,
+        style: { width: "100%", marginTop: "10px", textAlign: "center" },
+        children: loading && /* @__PURE__ */ jsx(LoadingGrid, {})
+      }
+    )
+  ] });
 };
 
 export { TagsGridContent };

package/dist/components/TagsGrid/TagsGridContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagsGridContent.esm.js","sources":["../../../src/components/TagsGrid/TagsGridContent.tsx"],"sourcesContent":["import { TagGridItem } from './TagGridItem';\nimport { TagsResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { NoTagsCard } from './NoTagsCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\n\nexport const TagsGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: TagsResponse;\n  onTagEdit: () => void;\n  isModerator?: boolean;\n}) => {\n  const { response, onTagEdit, loading, error, isModerator } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (loading) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('tagPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.tags || response.tags.length === 0) {\n    return (\n      <Grid item xs={12}>\n        <NoTagsCard />\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container spacing={3} alignItems=\"stretch\">\n      {response?.tags.map(tag => (\n        <TagGridItem\n          tag={tag}\n          key={tag.tag}\n          onTagEdit={onTagEdit}\n          isModerator={isModerator}\n        />\n      ))}\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,eAAA,GAAkB,CAAC,KAM1B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,OAAS,EAAA,KAAA,EAAO,aAAgB,GAAA,KAAA;AAC7D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,sBAAsB,CAC3D,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,IAAA,IAAQ,QAAS,CAAA,IAAA,CAAK,WAAW,CAAG,EAAA;AACjD,IACE,uBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,GAAA,CAAC,cAAW,CACd,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,OAAA,EAAS,CAAG,EAAA,UAAA,EAAW,SACpC,EAAA,QAAA,EAAA,QAAA,EAAU,IAAK,CAAA,GAAA,CAAI,CAClB,GAAA,qBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MAEA,SAAA;AAAA,MACA;AAAA,KAAA;AAAA,IAFK,GAAI,CAAA;AAAA,GAIZ,CACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TagsGridContent.esm.js","sources":["../../../src/components/TagsGrid/TagsGridContent.tsx"],"sourcesContent":["import { TagGridItem } from './TagGridItem';\nimport { TagsResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { NoTagsCard } from './NoTagsCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\nimport { useInfiniteScroll } from 'infinite-scroll-hook';\n\nexport const TagsGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: TagsResponse;\n  onTagEdit: () => void;\n  isModerator?: boolean;\n  hasMore?: boolean;\n  loadNextPage?: () => void;\n}) => {\n  const {\n    response,\n    onTagEdit,\n    loading,\n    error,\n    isModerator,\n    hasMore,\n    loadNextPage,\n  } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const { containerRef: sentryRef } = useInfiniteScroll({\n    shouldStop: !hasMore || !!error || loading,\n    onLoadMore: async () => {\n      if (loadNextPage) {\n        await loadNextPage();\n      }\n    },\n    offset: '800px',\n  }) as any;\n\n  if (loading && (!response || response.tags.length === 0)) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('tagPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.tags || response.tags.length === 0) {\n    return (\n      <Grid item xs={12}>\n        <NoTagsCard />\n      </Grid>\n    );\n  }\n\n  return (\n    <div style={{ width: '100%' }}>\n      <Grid container spacing={3} alignItems=\"stretch\">\n        {response?.tags.map(tag => (\n          <TagGridItem\n            tag={tag}\n            key={tag.tag}\n            onTagEdit={onTagEdit}\n            isModerator={isModerator}\n          />\n        ))}\n      </Grid>\n      <div\n        ref={sentryRef}\n        style={{ width: '100%', marginTop: '10px', textAlign: 'center' }}\n      >\n        {loading && <LoadingGrid />}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAUa,MAAA,eAAA,GAAkB,CAAC,KAQ1B,KAAA;AACJ,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAI,iBAAkB,CAAA;AAAA,IACpD,UAAY,EAAA,CAAC,OAAW,IAAA,CAAC,CAAC,KAAS,IAAA,OAAA;AAAA,IACnC,YAAY,YAAY;AACtB,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,MAAM,YAAa,EAAA;AAAA;AACrB,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,IAAI,YAAY,CAAC,QAAA,IAAY,QAAS,CAAA,IAAA,CAAK,WAAW,CAAI,CAAA,EAAA;AACxD,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,sBAAsB,CAC3D,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,IAAA,IAAQ,QAAS,CAAA,IAAA,CAAK,WAAW,CAAG,EAAA;AACjD,IACE,uBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,GAAA,CAAC,cAAW,CACd,EAAA,CAAA;AAAA;AAIJ,EAAA,4BACG,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,KAAA,EAAO,QACnB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,OAAS,EAAA,CAAA,EAAG,YAAW,SACpC,EAAA,QAAA,EAAA,QAAA,EAAU,IAAK,CAAA,GAAA,CAAI,CAClB,GAAA,qBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QAEA,SAAA;AAAA,QACA;AAAA,OAAA;AAAA,MAFK,GAAI,CAAA;AAAA,KAIZ,CACH,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,SAAA;AAAA,QACL,OAAO,EAAE,KAAA,EAAO,QAAQ,SAAW,EAAA,MAAA,EAAQ,WAAW,QAAS,EAAA;AAAA,QAE9D,QAAA,EAAA,OAAA,wBAAY,WAAY,EAAA,EAAA;AAAA;AAAA;AAC3B,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/TemplateList/TemplateForm.esm.js

@@ -13,12 +13,12 @@ import { useIsModerator } from '../../hooks/useIsModerator.esm.js';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
+import { TextField, Button } from '@material-ui/core';
 import { useForm, Controller } from 'react-hook-form';
 import { compact } from 'lodash';
 import { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor.esm.js';
 import { TagInput } from '../PostForm/TagInput.esm.js';
 import { EntitiesInput } from '../PostForm/EntitiesInput.esm.js';
-import { TextField, Button } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 
 const formToRequest = (form) => {

package/dist/components/TemplateList/TemplateList.esm.js

@@ -13,13 +13,13 @@ import { useIsModerator } from '../../hooks/useIsModerator.esm.js';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
+import { Button, Box, List, ListItem, ListItemText, ListItemSecondaryAction, IconButton } from '@material-ui/core';
 import { Progress, WarningPanel } from '@backstage/core-components';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
 import { TemplateForm } from './TemplateForm.esm.js';
 import { useNavigate } from 'react-router-dom';
 import { useLocation } from 'react-use';
-import { Button, Box, List, ListItem, ListItemText, ListItemSecondaryAction, IconButton } from '@material-ui/core';
 
 const TemplateList = () => {
   const { isModerator } = useIsModerator();

package/dist/components/Timeline/Timeline.esm.js

@@ -0,0 +1,83 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import { useApi } from '@backstage/core-plugin-api';
+import { qetaApiRef } from '../../api.esm.js';
+import { TimelineItemCard } from './TimelineItem.esm.js';
+import { Progress, ErrorPanel } from '@backstage/core-components';
+import { Box, Typography } from '@material-ui/core';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import { useInfiniteScroll } from 'infinite-scroll-hook';
+
+const Timeline = (props) => {
+  const { loadMore = true, limit = 30 } = props;
+  const qetaApi = useApi(qetaApiRef);
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(void 0);
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const fetchTimeline = useCallback(
+    async (reset = false) => {
+      try {
+        setLoading(true);
+        const currentOffset = reset ? 0 : offset;
+        const response = await qetaApi.getTimeline({
+          limit,
+          offset: currentOffset
+        });
+        if (reset) {
+          setItems(response.items);
+        } else {
+          setItems((prev) => [...prev, ...response.items]);
+        }
+        setHasMore(loadMore && response.items.length === limit);
+        setOffset(currentOffset + limit);
+      } catch (e) {
+        setError(e);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [qetaApi, offset, limit, loadMore]
+  );
+  useEffect(() => {
+    fetchTimeline(true);
+  }, []);
+  const { containerRef: sentryRef } = useInfiniteScroll({
+    shouldStop: !hasMore || !!error || loading,
+    onLoadMore: async () => {
+      await fetchTimeline(false);
+    },
+    offset: "800px"
+  });
+  if (loading && items.length === 0) {
+    return /* @__PURE__ */ jsx(Progress, {});
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(ErrorPanel, { error });
+  }
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h5", gutterBottom: true, children: t("timeline.title") }),
+    items.map((item, index) => /* @__PURE__ */ jsx(
+      TimelineItemCard,
+      {
+        item
+      },
+      `${item.type}-${item.id}-${index}`
+    )),
+    (loading || hasMore) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: sentryRef,
+        style: { height: "20px", margin: "10px 0", textAlign: "center" },
+        children: loading && /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("timeline.loading") })
+      }
+    ),
+    !hasMore && items.length > 0 && /* @__PURE__ */ jsx("p", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx("b", { children: t("timeline.noMoreItems") }) })
+  ] });
+};
+
+export { Timeline };
+//# sourceMappingURL=Timeline.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.esm.js","sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api';\nimport { TimelineItem } from '@drodil/backstage-plugin-qeta-common';\nimport { TimelineItemCard } from './TimelineItem';\nimport { Progress, ErrorPanel } from '@backstage/core-components';\nimport { Box, Typography } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\n\nimport { useInfiniteScroll } from 'infinite-scroll-hook';\n\nexport interface TimelineProps {\n  loadMore?: boolean;\n  limit?: number;\n}\n\nexport const Timeline = (props: TimelineProps) => {\n  const { loadMore = true, limit = 30 } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const [items, setItems] = useState<TimelineItem[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | undefined>(undefined);\n  const [offset, setOffset] = useState(0);\n  const [hasMore, setHasMore] = useState(true);\n\n  const fetchTimeline = useCallback(\n    async (reset = false) => {\n      try {\n        setLoading(true);\n        const currentOffset = reset ? 0 : offset;\n        const response = await qetaApi.getTimeline({\n          limit,\n          offset: currentOffset,\n        });\n\n        if (reset) {\n          setItems(response.items);\n        } else {\n          setItems(prev => [...prev, ...response.items]);\n        }\n\n        setHasMore(loadMore && response.items.length === limit);\n        setOffset(currentOffset + limit);\n      } catch (e) {\n        setError(e as Error);\n      } finally {\n        setLoading(false);\n      }\n    },\n    [qetaApi, offset, limit, loadMore],\n  );\n\n  useEffect(() => {\n    fetchTimeline(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const { containerRef: sentryRef } = useInfiniteScroll({\n    shouldStop: !hasMore || !!error || loading,\n    onLoadMore: async () => {\n      await fetchTimeline(false);\n    },\n    offset: '800px',\n  });\n\n  if (loading && items.length === 0) {\n    return <Progress />;\n  }\n\n  if (error) {\n    return <ErrorPanel error={error} />;\n  }\n\n  return (\n    <Box>\n      <Typography variant=\"h5\" gutterBottom>\n        {t('timeline.title')}\n      </Typography>\n      {items.map((item, index) => (\n        <TimelineItemCard\n          key={`${item.type}-${item.id}-${index}`}\n          item={item}\n        />\n      ))}\n      {(loading || hasMore) && (\n        <div\n          ref={sentryRef}\n          style={{ height: '20px', margin: '10px 0', textAlign: 'center' }}\n        >\n          {loading && (\n            <Typography variant=\"body2\">{t('timeline.loading')}</Typography>\n          )}\n        </div>\n      )}\n      {!hasMore && items.length > 0 && (\n        <p style={{ textAlign: 'center' }}>\n          <b>{t('timeline.noMoreItems')}</b>\n        </p>\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}