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

package/dist/components/TopRankingUsersCard/TopRankingUsersCard.esm.js

@@ -7,15 +7,20 @@ import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import 'react';
 import '@backstage/core-plugin-api';
 import '../../api.esm.js';
+import '@backstage/plugin-signals-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import '../../hooks/useListItemStyles.esm.js';
 import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
-import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { qetaTranslationRef } from '../../translation.esm.js';
 import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
+import 'react-router-dom';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
 
 const useStyles = makeStyles((theme) => {
   return {

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

@@ -1 +1 @@
-{"version":3,"file":"TopRankingUsersCard.esm.js","sources":["../../../src/components/TopRankingUsersCard/TopRankingUsersCard.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport {\n  CardTab,\n  Progress,\n  TabbedCard,\n  WarningPanel,\n} from '@backstage/core-components';\nimport {\n  Avatar,\n  Box,\n  List,\n  ListItem,\n  ListItemAvatar,\n  ListItemText,\n  makeStyles,\n  Paper,\n  Typography,\n} from '@material-ui/core';\nimport { StatisticResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { TrophyIcon } from './TrophyIcon';\nimport { UserLink } from '../Links';\nimport { useQetaApi } from '../../hooks';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nconst useStyles = makeStyles(theme => {\n  return {\n    root: {\n      '& .MuiTabbedCard-root': {\n        borderRadius: '12px',\n        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',\n      },\n      '& .MuiCardHeader-root': {\n        padding: theme.spacing(2, 3),\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      },\n      '& .MuiTabs-root': {\n        backgroundColor: theme.palette.background.paper,\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      },\n    },\n    trophyIcon: {\n      backgroundColor: theme.palette.background.paper,\n      color: theme.palette.text.primary,\n      borderRadius: '50%',\n      boxSizing: 'border-box',\n      padding: '0.5rem',\n      height: 48,\n      width: 48,\n      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',\n      transition: 'transform 0.2s ease-in-out',\n      '&:hover': {\n        transform: 'scale(1.05)',\n      },\n    },\n    votesText: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      marginLeft: '16px',\n      backgroundColor: theme.palette.background.paper,\n      padding: theme.spacing(0.5, 2),\n      borderRadius: '20px',\n      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',\n    },\n    rankingCard: {\n      padding: theme.spacing(2),\n    },\n    rankingCardDescription: {\n      color: theme.palette.text.secondary,\n      marginBottom: theme.spacing(2),\n    },\n    rankingCardList: {\n      '& .MuiListItem-root': {\n        marginBottom: theme.spacing(1),\n        borderRadius: '8px',\n        transition: 'background-color 0.2s ease-in-out',\n        '&:hover': {\n          backgroundColor: theme.palette.action.hover,\n        },\n      },\n    },\n    rankingRow: {\n      display: 'flex',\n      alignItems: 'center',\n      padding: theme.spacing(1.5, 2),\n    },\n    userInfo: {\n      display: 'flex',\n      alignItems: 'center',\n      flex: 1,\n    },\n    position: {\n      fontWeight: 800,\n      marginRight: theme.spacing(2),\n      color: theme.palette.text.secondary,\n      minWidth: '30px',\n      textAlign: 'right',\n    },\n    topPosition: {\n      color: theme.palette.primary.main,\n      fontSize: '1.1rem',\n    },\n    divider: {\n      margin: theme.spacing(2, 0),\n      opacity: 0.5,\n      border: 0,\n      borderBottom: `1px solid ${theme.palette.divider}`,\n    },\n  };\n});\n\ntype RankingIcon = {\n  iconsByRanking: Map<number, ReactNode>;\n  userRankingIcon: ReactNode;\n};\n\nconst DefaultRankingIcons = new Map<number, ReactNode>([\n  [\n    1,\n    <TrophyIcon\n      style={{ color: '#DAA520', height: '2.2rem', width: '2.2rem' }}\n    />,\n  ],\n  [\n    2,\n    <TrophyIcon\n      style={{ color: '#C0C0C0', height: '2.1rem', width: '2.1rem' }}\n    />,\n  ],\n  [\n    3,\n    <TrophyIcon style={{ color: '#B87333', height: '2rem', width: '2rem' }} />,\n  ],\n]);\n\nconst DefaultUserIcon = (\n  <TrophyIcon style={{ height: '2rem', width: '2rem' }} />\n);\n\nconst getOrdinal = (n: number) => {\n  if (n % 10 === 1 && n % 100 !== 11) {\n    return `${n}st`;\n  } else if (n % 10 === 2 && n % 100 !== 12) {\n    return `${n}nd`;\n  } else if (n % 10 === 3 && n % 100 !== 13) {\n    return `${n}rd`;\n  }\n\n  return `${n}th`;\n};\n\nexport const RankingRow = (props: {\n  userRef?: string;\n  total: number;\n  position: number;\n  rankingIcon?: RankingIcon;\n  unit: string;\n}) => {\n  const classes = useStyles();\n  const userRef = props.userRef;\n\n  const ordinalPosition = props?.position ? getOrdinal(props?.position) : '';\n\n  const userIcon = props.rankingIcon?.userRankingIcon\n    ? props.rankingIcon?.userRankingIcon\n    : DefaultUserIcon;\n\n  const topRankingIcon = props.rankingIcon\n    ? props.rankingIcon.iconsByRanking.get(Number(props?.position))\n    : DefaultRankingIcons.get(Number(props?.position)) || DefaultUserIcon;\n\n  const rankingIcon = props?.position > 3 ? userIcon : topRankingIcon;\n\n  return (\n    <ListItem className={classes.rankingRow}>\n      <ListItemAvatar>\n        <Avatar className={classes.trophyIcon}>{rankingIcon}</Avatar>\n      </ListItemAvatar>\n\n      <ListItemText\n        disableTypography\n        className={classes.userInfo}\n        primary={\n          <Box display=\"flex\" alignItems=\"center\">\n            <Typography\n              className={`${classes.position} ${\n                props.position <= 3 ? classes.topPosition : ''\n              }`}\n              variant=\"subtitle1\"\n            >\n              {ordinalPosition}\n            </Typography>\n            <UserLink entityRef={userRef ?? ''} />\n          </Box>\n        }\n      />\n\n      <div className={classes.votesText}>\n        <Typography variant=\"subtitle1\" style={{ fontWeight: 500 }}>\n          {props?.total} {props.unit}\n        </Typography>\n      </div>\n    </ListItem>\n  );\n};\n\nexport const RankingCard = (props: {\n  limit?: number;\n  description: string;\n  statistic?: StatisticResponse;\n  unit: string;\n}) => {\n  const classes = useStyles();\n  const rankingStats = props.limit\n    ? props.statistic?.ranking.slice(0, props.limit)\n    : props.statistic?.ranking;\n\n  return (\n    <Paper elevation={0} className={classes.rankingCard}>\n      <Typography className={classes.rankingCardDescription}>\n        {props.description}\n      </Typography>\n      <List className={classes.rankingCardList}>\n        {rankingStats?.map(authorStats => (\n          <RankingRow\n            total={authorStats.total || 0}\n            position={authorStats.position || 0}\n            userRef={authorStats.author}\n            unit={props.unit}\n            key={authorStats.author}\n          />\n        ))}\n        {!rankingStats?.some(\n          authorStats =>\n            authorStats.author === props.statistic?.loggedUser?.author,\n        ) && (\n          <>\n            <hr className={classes.divider} />\n            <RankingRow\n              total={props.statistic?.loggedUser?.total || 0}\n              position={props.statistic?.loggedUser?.position || 0}\n              userRef={props.statistic?.loggedUser?.author}\n              unit={props.unit}\n            />\n          </>\n        )}\n      </List>\n    </Paper>\n  );\n};\n\nexport const TopRankingUsers = (props: {\n  title?: string;\n  hideTitle?: boolean;\n  limit?: number;\n}) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const {\n    value: topStatistics,\n    loading,\n    error,\n  } = useQetaApi(api =>\n    api.getTopStatisticsHomepage({\n      options: { limit: 50 },\n    }),\n  );\n\n  const tabData = [\n    {\n      title: t('statistics.mostQuestions.title'),\n      description: t('statistics.mostQuestions.description'),\n      unit: 'questions',\n    },\n    {\n      title: t('statistics.mostAnswers.title'),\n      description: t('statistics.mostAnswers.description'),\n      unit: 'answers',\n    },\n    {\n      title: t('statistics.topVotedQuestions.title'),\n      description: t('statistics.topVotedQuestions.description'),\n      unit: 'votes',\n    },\n    {\n      title: t('statistics.topVotedAnswers.title'),\n      description: t('statistics.topVotedAnswers.description'),\n      unit: 'votes',\n    },\n    {\n      title: t('statistics.topVotedCorrectAnswers.title'),\n      description: t('statistics.topVotedCorrectAnswers.description'),\n      unit: 'votes',\n    },\n  ];\n\n  if ((error || topStatistics === undefined) && !loading) {\n    return (\n      <WarningPanel severity=\"error\" title={t('statistics.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  let content: ReactElement[];\n\n  if (loading) {\n    content = [\n      <CardTab>\n        <Box display=\"flex\" justifyContent=\"center\" p={3}>\n          <Progress />\n        </Box>\n      </CardTab>,\n    ];\n  } else if (topStatistics && topStatistics.length > 0) {\n    content = topStatistics?.map((stats, index) => {\n      return (\n        <CardTab label={tabData[index].title} key={tabData[index].title}>\n          <RankingCard\n            description={tabData[index].description}\n            limit={props.limit}\n            statistic={stats}\n            unit={tabData[index].unit}\n          />\n        </CardTab>\n      );\n    });\n  } else {\n    content = [\n      <CardTab>\n        <Box display=\"flex\" justifyContent=\"center\" p={3}>\n          {t('statistics.notAvailable')}\n        </Box>\n      </CardTab>,\n    ];\n  }\n\n  return (\n    <div className={classes.root}>\n      <TabbedCard title={props.title || t('statistics.ranking')}>\n        {content}\n      </TabbedCard>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAyBA,MAAM,SAAA,GAAY,WAAW,CAAS,KAAA,KAAA;AACpC,EAAO,OAAA;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,uBAAyB,EAAA;AAAA,QACvB,YAAc,EAAA,MAAA;AAAA,QACd,SAAW,EAAA;AAAA,OACb;AAAA,MACA,uBAAyB,EAAA;AAAA,QACvB,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,QAC3B,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAA;AAAA,OAClD;AAAA,MACA,iBAAmB,EAAA;AAAA,QACjB,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,KAAA;AAAA,QAC1C,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAA;AAAA;AAClD,KACF;AAAA,IACA,UAAY,EAAA;AAAA,MACV,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,KAAA;AAAA,MAC1C,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,MAC1B,YAAc,EAAA,KAAA;AAAA,MACd,SAAW,EAAA,YAAA;AAAA,MACX,OAAS,EAAA,QAAA;AAAA,MACT,MAAQ,EAAA,EAAA;AAAA,MACR,KAAO,EAAA,EAAA;AAAA,MACP,SAAW,EAAA,8BAAA;AAAA,MACX,UAAY,EAAA,4BAAA;AAAA,MACZ,SAAW,EAAA;AAAA,QACT,SAAW,EAAA;AAAA;AACb,KACF;AAAA,IACA,SAAW,EAAA;AAAA,MACT,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,cAAgB,EAAA,QAAA;AAAA,MAChB,UAAY,EAAA,MAAA;AAAA,MACZ,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,KAAA;AAAA,MAC1C,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,EAAK,CAAC,CAAA;AAAA,MAC7B,YAAc,EAAA,MAAA;AAAA,MACd,SAAW,EAAA;AAAA,KACb;AAAA,IACA,WAAa,EAAA;AAAA,MACX,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC1B;AAAA,IACA,sBAAwB,EAAA;AAAA,MACtB,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,MAC1B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC/B;AAAA,IACA,eAAiB,EAAA;AAAA,MACf,qBAAuB,EAAA;AAAA,QACrB,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC7B,YAAc,EAAA,KAAA;AAAA,QACd,UAAY,EAAA,mCAAA;AAAA,QACZ,SAAW,EAAA;AAAA,UACT,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA;AACxC;AACF,KACF;AAAA,IACA,UAAY,EAAA;AAAA,MACV,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,EAAK,CAAC;AAAA,KAC/B;AAAA,IACA,QAAU,EAAA;AAAA,MACR,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,IAAM,EAAA;AAAA,KACR;AAAA,IACA,QAAU,EAAA;AAAA,MACR,UAAY,EAAA,GAAA;AAAA,MACZ,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC5B,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,SAAA;AAAA,MAC1B,QAAU,EAAA,MAAA;AAAA,MACV,SAAW,EAAA;AAAA,KACb;AAAA,IACA,WAAa,EAAA;AAAA,MACX,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,MAC7B,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,OAAS,EAAA;AAAA,MACP,MAAQ,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,MAC1B,OAAS,EAAA,GAAA;AAAA,MACT,MAAQ,EAAA,CAAA;AAAA,MACR,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAA;AAAA;AAClD,GACF;AACF,CAAC,CAAA;AAOD,MAAM,mBAAA,uBAA0B,GAAuB,CAAA;AAAA,EACrD;AAAA,IACE,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,KAAA,EAAO,WAAW,MAAQ,EAAA,QAAA,EAAU,OAAO,QAAS;AAAA;AAAA;AAC/D,GACF;AAAA,EACA;AAAA,IACE,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,KAAA,EAAO,WAAW,MAAQ,EAAA,QAAA,EAAU,OAAO,QAAS;AAAA;AAAA;AAC/D,GACF;AAAA,EACA;AAAA,IACE,CAAA;AAAA,oBACA,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,KAAA,EAAO,WAAW,MAAQ,EAAA,MAAA,EAAQ,KAAO,EAAA,MAAA,EAAU,EAAA;AAAA;AAE5E,CAAC,CAAA;AAED,MAAM,eAAA,uBACH,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,MAAQ,EAAA,MAAA,EAAQ,KAAO,EAAA,MAAA,EAAU,EAAA,CAAA;AAGxD,MAAM,UAAA,GAAa,CAAC,CAAc,KAAA;AAChC,EAAA,IAAI,CAAI,GAAA,EAAA,KAAO,CAAK,IAAA,CAAA,GAAI,QAAQ,EAAI,EAAA;AAClC,IAAA,OAAO,GAAG,CAAC,CAAA,EAAA,CAAA;AAAA,aACF,CAAI,GAAA,EAAA,KAAO,CAAK,IAAA,CAAA,GAAI,QAAQ,EAAI,EAAA;AACzC,IAAA,OAAO,GAAG,CAAC,CAAA,EAAA,CAAA;AAAA,aACF,CAAI,GAAA,EAAA,KAAO,CAAK,IAAA,CAAA,GAAI,QAAQ,EAAI,EAAA;AACzC,IAAA,OAAO,GAAG,CAAC,CAAA,EAAA,CAAA;AAAA;AAGb,EAAA,OAAO,GAAG,CAAC,CAAA,EAAA,CAAA;AACb,CAAA;AAEa,MAAA,UAAA,GAAa,CAAC,KAMrB,KAAA;AACJ,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,UAAU,KAAM,CAAA,OAAA;AAEtB,EAAA,MAAM,kBAAkB,KAAO,EAAA,QAAA,GAAW,UAAW,CAAA,KAAA,EAAO,QAAQ,CAAI,GAAA,EAAA;AAExE,EAAA,MAAM,WAAW,KAAM,CAAA,WAAA,EAAa,eAChC,GAAA,KAAA,CAAM,aAAa,eACnB,GAAA,eAAA;AAEJ,EAAA,MAAM,iBAAiB,KAAM,CAAA,WAAA,GACzB,MAAM,WAAY,CAAA,cAAA,CAAe,IAAI,MAAO,CAAA,KAAA,EAAO,QAAQ,CAAC,IAC5D,mBAAoB,CAAA,GAAA,CAAI,OAAO,KAAO,EAAA,QAAQ,CAAC,CAAK,IAAA,eAAA;AAExD,EAAA,MAAM,WAAc,GAAA,KAAA,EAAO,QAAW,GAAA,CAAA,GAAI,QAAW,GAAA,cAAA;AAErD,EAAA,uBACG,IAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,OAAA,CAAQ,UAC3B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBACC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAO,WAAW,OAAQ,CAAA,UAAA,EAAa,uBAAY,CACtD,EAAA,CAAA;AAAA,oBAEA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,iBAAiB,EAAA,IAAA;AAAA,QACjB,WAAW,OAAQ,CAAA,QAAA;AAAA,QACnB,yBACG,IAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,YAAW,QAC7B,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,CAAG,EAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA,EAC5B,MAAM,QAAY,IAAA,CAAA,GAAI,OAAQ,CAAA,WAAA,GAAc,EAC9C,CAAA,CAAA;AAAA,cACA,OAAQ,EAAA,WAAA;AAAA,cAEP,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BACC,GAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,OAAA,IAAW,EAAI,EAAA;AAAA,SACtC,EAAA;AAAA;AAAA,KAEJ;AAAA,oBAEC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,SACtB,EAAA,QAAA,kBAAA,IAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,WAAY,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,KAClD,EAAA,QAAA,EAAA;AAAA,MAAO,KAAA,EAAA,KAAA;AAAA,MAAM,GAAA;AAAA,MAAE,KAAM,CAAA;AAAA,KAAA,EACxB,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;AAEa,MAAA,WAAA,GAAc,CAAC,KAKtB,KAAA;AACJ,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,YAAe,GAAA,KAAA,CAAM,KACvB,GAAA,KAAA,CAAM,SAAW,EAAA,OAAA,CAAQ,KAAM,CAAA,CAAA,EAAG,KAAM,CAAA,KAAK,CAC7C,GAAA,KAAA,CAAM,SAAW,EAAA,OAAA;AAErB,EAAA,4BACG,KAAM,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAA,EAAW,QAAQ,WACtC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,sBAAA,EAC5B,gBAAM,WACT,EAAA,CAAA;AAAA,oBACC,IAAA,CAAA,IAAA,EAAA,EAAK,SAAW,EAAA,OAAA,CAAQ,eACtB,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA,EAAc,IAAI,CACjB,WAAA,qBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,YAAY,KAAS,IAAA,CAAA;AAAA,UAC5B,QAAA,EAAU,YAAY,QAAY,IAAA,CAAA;AAAA,UAClC,SAAS,WAAY,CAAA,MAAA;AAAA,UACrB,MAAM,KAAM,CAAA;AAAA,SAAA;AAAA,QACP,WAAY,CAAA;AAAA,OAEpB,CAAA;AAAA,MACA,CAAC,YAAc,EAAA,IAAA;AAAA,QACd,CACE,WAAA,KAAA,WAAA,CAAY,MAAW,KAAA,KAAA,CAAM,WAAW,UAAY,EAAA;AAAA,2BAGpD,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA,EAAG,SAAW,EAAA,OAAA,CAAQ,OAAS,EAAA,CAAA;AAAA,wBAChC,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAO,EAAA,KAAA,CAAM,SAAW,EAAA,UAAA,EAAY,KAAS,IAAA,CAAA;AAAA,YAC7C,QAAU,EAAA,KAAA,CAAM,SAAW,EAAA,UAAA,EAAY,QAAY,IAAA,CAAA;AAAA,YACnD,OAAA,EAAS,KAAM,CAAA,SAAA,EAAW,UAAY,EAAA,MAAA;AAAA,YACtC,MAAM,KAAM,CAAA;AAAA;AAAA;AACd,OACF,EAAA;AAAA,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;AAEa,MAAA,eAAA,GAAkB,CAAC,KAI1B,KAAA;AACJ,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,aAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACE,GAAA,UAAA;AAAA,IAAW,CAAA,GAAA,KACb,IAAI,wBAAyB,CAAA;AAAA,MAC3B,OAAA,EAAS,EAAE,KAAA,EAAO,EAAG;AAAA,KACtB;AAAA,GACH;AAEA,EAAA,MAAM,OAAU,GAAA;AAAA,IACd;AAAA,MACE,KAAA,EAAO,EAAE,gCAAgC,CAAA;AAAA,MACzC,WAAA,EAAa,EAAE,sCAAsC,CAAA;AAAA,MACrD,IAAM,EAAA;AAAA,KACR;AAAA,IACA;AAAA,MACE,KAAA,EAAO,EAAE,8BAA8B,CAAA;AAAA,MACvC,WAAA,EAAa,EAAE,oCAAoC,CAAA;AAAA,MACnD,IAAM,EAAA;AAAA,KACR;AAAA,IACA;AAAA,MACE,KAAA,EAAO,EAAE,oCAAoC,CAAA;AAAA,MAC7C,WAAA,EAAa,EAAE,0CAA0C,CAAA;AAAA,MACzD,IAAM,EAAA;AAAA,KACR;AAAA,IACA;AAAA,MACE,KAAA,EAAO,EAAE,kCAAkC,CAAA;AAAA,MAC3C,WAAA,EAAa,EAAE,wCAAwC,CAAA;AAAA,MACvD,IAAM,EAAA;AAAA,KACR;AAAA,IACA;AAAA,MACE,KAAA,EAAO,EAAE,yCAAyC,CAAA;AAAA,MAClD,WAAA,EAAa,EAAE,+CAA+C,CAAA;AAAA,MAC9D,IAAM,EAAA;AAAA;AACR,GACF;AAEA,EAAA,IAAA,CAAK,KAAS,IAAA,aAAA,KAAkB,KAAc,CAAA,KAAA,CAAC,OAAS,EAAA;AACtD,IACE,uBAAA,GAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,yBAAyB,CAC9D,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAI,IAAA,OAAA;AAEJ,EAAA,IAAI,OAAS,EAAA;AACX,IAAU,OAAA,GAAA;AAAA,sBACP,GAAA,CAAA,OAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,cAAe,EAAA,QAAA,EAAS,CAAG,EAAA,CAAA,EAC7C,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAS,GACZ,CACF,EAAA;AAAA,KACF;AAAA,GACS,MAAA,IAAA,aAAA,IAAiB,aAAc,CAAA,MAAA,GAAS,CAAG,EAAA;AACpD,IAAA,OAAA,GAAU,aAAe,EAAA,GAAA,CAAI,CAAC,KAAA,EAAO,KAAU,KAAA;AAC7C,MAAA,2BACG,OAAQ,EAAA,EAAA,KAAA,EAAO,OAAQ,CAAA,KAAK,EAAE,KAC7B,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,WAAA,EAAa,OAAQ,CAAA,KAAK,CAAE,CAAA,WAAA;AAAA,UAC5B,OAAO,KAAM,CAAA,KAAA;AAAA,UACb,SAAW,EAAA,KAAA;AAAA,UACX,IAAA,EAAM,OAAQ,CAAA,KAAK,CAAE,CAAA;AAAA;AAAA,OALkB,EAAA,EAAA,OAAA,CAAQ,KAAK,CAAA,CAAE,KAO1D,CAAA;AAAA,KAEH,CAAA;AAAA,GACI,MAAA;AACL,IAAU,OAAA,GAAA;AAAA,sBACP,GAAA,CAAA,OAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,GAAA,EAAA,EAAI,OAAQ,EAAA,MAAA,EAAO,cAAe,EAAA,QAAA,EAAS,CAAG,EAAA,CAAA,EAC5C,QAAE,EAAA,CAAA,CAAA,yBAAyB,GAC9B,CACF,EAAA;AAAA,KACF;AAAA;AAGF,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,MACtB,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,KAAO,EAAA,KAAA,CAAM,KAAS,IAAA,CAAA,CAAE,oBAAoB,CAAA,EACrD,mBACH,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TopRankingUsersCard.esm.js","sources":["../../../src/components/TopRankingUsersCard/TopRankingUsersCard.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport {\n  CardTab,\n  Progress,\n  TabbedCard,\n  WarningPanel,\n} from '@backstage/core-components';\nimport {\n  Avatar,\n  Box,\n  List,\n  ListItem,\n  ListItemAvatar,\n  ListItemText,\n  makeStyles,\n  Paper,\n  Typography,\n} from '@material-ui/core';\nimport { StatisticResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { TrophyIcon } from './TrophyIcon';\nimport { UserLink } from '../Links';\nimport { useQetaApi } from '../../hooks';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nconst useStyles = makeStyles(theme => {\n  return {\n    root: {\n      '& .MuiTabbedCard-root': {\n        borderRadius: '12px',\n        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',\n      },\n      '& .MuiCardHeader-root': {\n        padding: theme.spacing(2, 3),\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      },\n      '& .MuiTabs-root': {\n        backgroundColor: theme.palette.background.paper,\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      },\n    },\n    trophyIcon: {\n      backgroundColor: theme.palette.background.paper,\n      color: theme.palette.text.primary,\n      borderRadius: '50%',\n      boxSizing: 'border-box',\n      padding: '0.5rem',\n      height: 48,\n      width: 48,\n      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',\n      transition: 'transform 0.2s ease-in-out',\n      '&:hover': {\n        transform: 'scale(1.05)',\n      },\n    },\n    votesText: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      marginLeft: '16px',\n      backgroundColor: theme.palette.background.paper,\n      padding: theme.spacing(0.5, 2),\n      borderRadius: '20px',\n      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',\n    },\n    rankingCard: {\n      padding: theme.spacing(2),\n    },\n    rankingCardDescription: {\n      color: theme.palette.text.secondary,\n      marginBottom: theme.spacing(2),\n    },\n    rankingCardList: {\n      '& .MuiListItem-root': {\n        marginBottom: theme.spacing(1),\n        borderRadius: '8px',\n        transition: 'background-color 0.2s ease-in-out',\n        '&:hover': {\n          backgroundColor: theme.palette.action.hover,\n        },\n      },\n    },\n    rankingRow: {\n      display: 'flex',\n      alignItems: 'center',\n      padding: theme.spacing(1.5, 2),\n    },\n    userInfo: {\n      display: 'flex',\n      alignItems: 'center',\n      flex: 1,\n    },\n    position: {\n      fontWeight: 800,\n      marginRight: theme.spacing(2),\n      color: theme.palette.text.secondary,\n      minWidth: '30px',\n      textAlign: 'right',\n    },\n    topPosition: {\n      color: theme.palette.primary.main,\n      fontSize: '1.1rem',\n    },\n    divider: {\n      margin: theme.spacing(2, 0),\n      opacity: 0.5,\n      border: 0,\n      borderBottom: `1px solid ${theme.palette.divider}`,\n    },\n  };\n});\n\ntype RankingIcon = {\n  iconsByRanking: Map<number, ReactNode>;\n  userRankingIcon: ReactNode;\n};\n\nconst DefaultRankingIcons = new Map<number, ReactNode>([\n  [\n    1,\n    <TrophyIcon\n      style={{ color: '#DAA520', height: '2.2rem', width: '2.2rem' }}\n    />,\n  ],\n  [\n    2,\n    <TrophyIcon\n      style={{ color: '#C0C0C0', height: '2.1rem', width: '2.1rem' }}\n    />,\n  ],\n  [\n    3,\n    <TrophyIcon style={{ color: '#B87333', height: '2rem', width: '2rem' }} />,\n  ],\n]);\n\nconst DefaultUserIcon = (\n  <TrophyIcon style={{ height: '2rem', width: '2rem' }} />\n);\n\nconst getOrdinal = (n: number) => {\n  if (n % 10 === 1 && n % 100 !== 11) {\n    return `${n}st`;\n  } else if (n % 10 === 2 && n % 100 !== 12) {\n    return `${n}nd`;\n  } else if (n % 10 === 3 && n % 100 !== 13) {\n    return `${n}rd`;\n  }\n\n  return `${n}th`;\n};\n\nexport const RankingRow = (props: {\n  userRef?: string;\n  total: number;\n  position: number;\n  rankingIcon?: RankingIcon;\n  unit: string;\n}) => {\n  const classes = useStyles();\n  const userRef = props.userRef;\n\n  const ordinalPosition = props?.position ? getOrdinal(props?.position) : '';\n\n  const userIcon = props.rankingIcon?.userRankingIcon\n    ? props.rankingIcon?.userRankingIcon\n    : DefaultUserIcon;\n\n  const topRankingIcon = props.rankingIcon\n    ? props.rankingIcon.iconsByRanking.get(Number(props?.position))\n    : DefaultRankingIcons.get(Number(props?.position)) || DefaultUserIcon;\n\n  const rankingIcon = props?.position > 3 ? userIcon : topRankingIcon;\n\n  return (\n    <ListItem className={classes.rankingRow}>\n      <ListItemAvatar>\n        <Avatar className={classes.trophyIcon}>{rankingIcon}</Avatar>\n      </ListItemAvatar>\n\n      <ListItemText\n        disableTypography\n        className={classes.userInfo}\n        primary={\n          <Box display=\"flex\" alignItems=\"center\">\n            <Typography\n              className={`${classes.position} ${\n                props.position <= 3 ? classes.topPosition : ''\n              }`}\n              variant=\"subtitle1\"\n            >\n              {ordinalPosition}\n            </Typography>\n            <UserLink entityRef={userRef ?? ''} />\n          </Box>\n        }\n      />\n\n      <div className={classes.votesText}>\n        <Typography variant=\"subtitle1\" style={{ fontWeight: 500 }}>\n          {props?.total} {props.unit}\n        </Typography>\n      </div>\n    </ListItem>\n  );\n};\n\nexport const RankingCard = (props: {\n  limit?: number;\n  description: string;\n  statistic?: StatisticResponse;\n  unit: string;\n}) => {\n  const classes = useStyles();\n  const rankingStats = props.limit\n    ? props.statistic?.ranking.slice(0, props.limit)\n    : props.statistic?.ranking;\n\n  return (\n    <Paper elevation={0} className={classes.rankingCard}>\n      <Typography className={classes.rankingCardDescription}>\n        {props.description}\n      </Typography>\n      <List className={classes.rankingCardList}>\n        {rankingStats?.map(authorStats => (\n          <RankingRow\n            total={authorStats.total || 0}\n            position={authorStats.position || 0}\n            userRef={authorStats.author}\n            unit={props.unit}\n            key={authorStats.author}\n          />\n        ))}\n        {!rankingStats?.some(\n          authorStats =>\n            authorStats.author === props.statistic?.loggedUser?.author,\n        ) && (\n          <>\n            <hr className={classes.divider} />\n            <RankingRow\n              total={props.statistic?.loggedUser?.total || 0}\n              position={props.statistic?.loggedUser?.position || 0}\n              userRef={props.statistic?.loggedUser?.author}\n              unit={props.unit}\n            />\n          </>\n        )}\n      </List>\n    </Paper>\n  );\n};\n\nexport const TopRankingUsers = (props: {\n  title?: string;\n  hideTitle?: boolean;\n  limit?: number;\n}) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const {\n    value: topStatistics,\n    loading,\n    error,\n  } = useQetaApi(api =>\n    api.getTopStatisticsHomepage({\n      options: { limit: 50 },\n    }),\n  );\n\n  const tabData = [\n    {\n      title: t('statistics.mostQuestions.title'),\n      description: t('statistics.mostQuestions.description'),\n      unit: 'questions',\n    },\n    {\n      title: t('statistics.mostAnswers.title'),\n      description: t('statistics.mostAnswers.description'),\n      unit: 'answers',\n    },\n    {\n      title: t('statistics.topVotedQuestions.title'),\n      description: t('statistics.topVotedQuestions.description'),\n      unit: 'votes',\n    },\n    {\n      title: t('statistics.topVotedAnswers.title'),\n      description: t('statistics.topVotedAnswers.description'),\n      unit: 'votes',\n    },\n    {\n      title: t('statistics.topVotedCorrectAnswers.title'),\n      description: t('statistics.topVotedCorrectAnswers.description'),\n      unit: 'votes',\n    },\n  ];\n\n  if ((error || topStatistics === undefined) && !loading) {\n    return (\n      <WarningPanel severity=\"error\" title={t('statistics.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  let content: ReactElement[];\n\n  if (loading) {\n    content = [\n      <CardTab>\n        <Box display=\"flex\" justifyContent=\"center\" p={3}>\n          <Progress />\n        </Box>\n      </CardTab>,\n    ];\n  } else if (topStatistics && topStatistics.length > 0) {\n    content = topStatistics?.map((stats, index) => {\n      return (\n        <CardTab label={tabData[index].title} key={tabData[index].title}>\n          <RankingCard\n            description={tabData[index].description}\n            limit={props.limit}\n            statistic={stats}\n            unit={tabData[index].unit}\n          />\n        </CardTab>\n      );\n    });\n  } else {\n    content = [\n      <CardTab>\n        <Box display=\"flex\" justifyContent=\"center\" p={3}>\n          {t('statistics.notAvailable')}\n        </Box>\n      </CardTab>,\n    ];\n  }\n\n  return (\n    <div className={classes.root}>\n      <TabbedCard title={props.title || t('statistics.ranking')}>\n        {content}\n      </TabbedCard>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UsersContainer/UserListItem.esm.js

@@ -0,0 +1,133 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { userRouteRef } from '../../routes.esm.js';
+import '../../api.esm.js';
+import 'react-use';
+import 'react';
+import '@backstage/plugin-signals-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import { useListItemStyles } from '../../hooks/useListItemStyles.esm.js';
+import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
+import { useIdentityApi } from '../../hooks/useIdentityApi.esm.js';
+import '@backstage/plugin-permission-react';
+import '@drodil/backstage-plugin-qeta-common';
+import '@backstage/plugin-permission-common';
+import { makeStyles, Avatar, Box, Tooltip, Typography } from '@material-ui/core';
+import { Link } from 'react-router-dom';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
+import { UserFollowButton } from '../Buttons/UserFollowButton.esm.js';
+import Visibility from '@material-ui/icons/Visibility';
+import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
+import ThumbUp from '@material-ui/icons/ThumbUp';
+import CheckCircle from '@material-ui/icons/CheckCircle';
+import DescriptionIcon from '@material-ui/icons/Description';
+import LinkIcon from '@material-ui/icons/Link';
+import EmojiEvents from '@material-ui/icons/EmojiEvents';
+
+const useStyles = makeStyles((theme) => ({
+  content: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    marginLeft: theme.spacing(2)
+  },
+  title: {
+    fontWeight: 600
+  },
+  statsWrapper: {
+    display: "flex",
+    gap: theme.spacing(3),
+    marginLeft: theme.spacing(2),
+    alignItems: "center",
+    [theme.breakpoints.down("sm")]: {
+      display: "none"
+    }
+  },
+  statItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    color: theme.palette.text.secondary
+  },
+  actions: {
+    marginLeft: theme.spacing(2)
+  }
+}));
+const UserListItem = (props) => {
+  const { user } = props;
+  const classes = useStyles();
+  const listItemClasses = useListItemStyles();
+  const userRoute = useRouteRef(userRouteRef);
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const {
+    name,
+    initials,
+    user: userEntity,
+    secondaryTitle
+  } = useEntityAuthor(user);
+  const {
+    value: currentUser,
+    loading: loadingUser,
+    error: userError
+  } = useIdentityApi((api) => api.getBackstageIdentity(), []);
+  const href = `${userRoute()}/${user.userRef}`;
+  return /* @__PURE__ */ jsxs(Link, { to: href, className: listItemClasses.root, children: [
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        src: userEntity?.spec?.profile?.picture,
+        alt: name,
+        variant: "rounded",
+        children: initials
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { className: classes.content, children: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, placement: "top-start", children: /* @__PURE__ */ jsx(Typography, { className: classes.title, noWrap: true, children: name }) }) }),
+    /* @__PURE__ */ jsxs(Box, { className: classes.statsWrapper, children: [
+      /* @__PURE__ */ jsx(Tooltip, { title: t("impactCard.reputation"), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(EmojiEvents, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: user.reputation })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("common.questions"), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: user.totalQuestions })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("common.answers"), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(CheckCircle, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: user.totalAnswers })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("common.articles"), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: user.totalArticles })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("common.links"), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: user.totalLinks })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("common.votes"), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(ThumbUp, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: user.totalVotes })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: t("common.views"), arrow: true, children: /* @__PURE__ */ jsxs("div", { className: classes.statItem, children: [
+        /* @__PURE__ */ jsx(Visibility, { fontSize: "small" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: user.totalViews })
+      ] }) })
+    ] }),
+    !loadingUser && !userError && currentUser?.userEntityRef !== user.userRef ? /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: classes.actions,
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        children: /* @__PURE__ */ jsx(UserFollowButton, { userRef: user.userRef })
+      }
+    ) : null
+  ] });
+};
+
+export { UserListItem };
+//# sourceMappingURL=UserListItem.esm.js.map

package/dist/components/UsersContainer/UserListItem.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserListItem.esm.js","sources":["../../../src/components/UsersContainer/UserListItem.tsx"],"sourcesContent":["import { UserResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { userRouteRef } from '../../routes';\nimport { useIdentityApi } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport {\n  Avatar,\n  Box,\n  makeStyles,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport { UserFollowButton } from '../Buttons/UserFollowButton';\nimport Visibility from '@material-ui/icons/Visibility';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport ThumbUpIcon from '@material-ui/icons/ThumbUp';\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport LinkIcon from '@material-ui/icons/Link';\nimport EmojiEvents from '@material-ui/icons/EmojiEvents';\nimport { qetaTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { Link } from 'react-router-dom';\n\nimport { useListItemStyles } from '../../hooks';\n\nconst useStyles = makeStyles(theme => ({\n  content: {\n    flex: 1,\n    minWidth: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    marginLeft: theme.spacing(2),\n  },\n  title: {\n    fontWeight: 600,\n  },\n  statsWrapper: {\n    display: 'flex',\n    gap: theme.spacing(3),\n    marginLeft: theme.spacing(2),\n    alignItems: 'center',\n    [theme.breakpoints.down('sm')]: {\n      display: 'none',\n    },\n  },\n  statItem: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    color: theme.palette.text.secondary,\n  },\n  actions: {\n    marginLeft: theme.spacing(2),\n  },\n}));\n\nexport const UserListItem = (props: { user: UserResponse }) => {\n  const { user } = props;\n  const classes = useStyles();\n  const listItemClasses = useListItemStyles();\n  const userRoute = useRouteRef(userRouteRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const {\n    name,\n    initials,\n    user: userEntity,\n    secondaryTitle,\n  } = useEntityAuthor(user);\n  const {\n    value: currentUser,\n    loading: loadingUser,\n    error: userError,\n  } = useIdentityApi(api => api.getBackstageIdentity(), []);\n\n  const href = `${userRoute()}/${user.userRef}`;\n\n  return (\n    <Link to={href} className={listItemClasses.root}>\n      <Avatar\n        src={userEntity?.spec?.profile?.picture}\n        alt={name}\n        variant=\"rounded\"\n      >\n        {initials}\n      </Avatar>\n      <Box className={classes.content}>\n        <Tooltip title={secondaryTitle ?? ''} arrow placement=\"top-start\">\n          <Typography className={classes.title} noWrap>\n            {name}\n          </Typography>\n        </Tooltip>\n      </Box>\n\n      <Box className={classes.statsWrapper}>\n        <Tooltip title={t('impactCard.reputation')} arrow>\n          <div className={classes.statItem}>\n            <EmojiEvents fontSize=\"small\" />\n            <Typography variant=\"body2\">{user.reputation}</Typography>\n          </div>\n        </Tooltip>\n        <Tooltip title={t('common.questions')} arrow>\n          <div className={classes.statItem}>\n            <QuestionAnswerIcon fontSize=\"small\" />\n            <Typography variant=\"body2\">{user.totalQuestions}</Typography>\n          </div>\n        </Tooltip>\n        <Tooltip title={t('common.answers')} arrow>\n          <div className={classes.statItem}>\n            <CheckCircleIcon fontSize=\"small\" />\n            <Typography variant=\"body2\">{user.totalAnswers}</Typography>\n          </div>\n        </Tooltip>\n        <Tooltip title={t('common.articles')} arrow>\n          <div className={classes.statItem}>\n            <DescriptionIcon fontSize=\"small\" />\n            <Typography variant=\"body2\">{user.totalArticles}</Typography>\n          </div>\n        </Tooltip>\n        <Tooltip title={t('common.links')} arrow>\n          <div className={classes.statItem}>\n            <LinkIcon fontSize=\"small\" />\n            <Typography variant=\"body2\">{user.totalLinks}</Typography>\n          </div>\n        </Tooltip>\n        <Tooltip title={t('common.votes')} arrow>\n          <div className={classes.statItem}>\n            <ThumbUpIcon fontSize=\"small\" />\n            <Typography variant=\"body2\">{user.totalVotes}</Typography>\n          </div>\n        </Tooltip>\n        <Tooltip title={t('common.views')} arrow>\n          <div className={classes.statItem}>\n            <Visibility fontSize=\"small\" />\n            <Typography variant=\"body2\">{user.totalViews}</Typography>\n          </div>\n        </Tooltip>\n      </Box>\n\n      {!loadingUser &&\n      !userError &&\n      currentUser?.userEntityRef !== user.userRef ? (\n        <Box\n          className={classes.actions}\n          onClick={e => {\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n        >\n          <UserFollowButton userRef={user.userRef} />\n        </Box>\n      ) : null}\n    </Link>\n  );\n};\n"],"names":["CheckCircleIcon","ThumbUpIcon"],"mappings":"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"}

package/dist/components/UsersContainer/UsersContainer.esm.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { QetaEntityContainer } from '../QetaEntityContainer/QetaEntityContainer.esm.js';
+import { UserListItem } from './UserListItem.esm.js';
+import { UsersGridItem } from './UsersGridItem.esm.js';
+import { qetaTranslationRef } from '../../translation.esm.js';
+
+const UsersContainer = (props) => {
+  const { filterPanelProps, defaultView } = props;
+  const { t } = useTranslationRef(qetaTranslationRef);
+  return /* @__PURE__ */ jsx(
+    QetaEntityContainer,
+    {
+      prefix: "users",
+      defaultPageSize: 24,
+      defaultView,
+      initialFilters: {
+        order: "desc",
+        orderBy: "totalPosts",
+        searchQuery: ""
+      },
+      fetch: (api, limit, offset, filters) => {
+        return api.getUsers({
+          limit,
+          offset,
+          searchQuery: filters.searchQuery
+        }).then((res) => ({ items: res.users, total: res.total }));
+      },
+      filterPanelProps: {
+        ...filterPanelProps,
+        mode: "users"
+      },
+      renderListItem: (user) => /* @__PURE__ */ jsx(UserListItem, { user }),
+      renderGridItem: (user) => /* @__PURE__ */ jsx(UsersGridItem, { user }),
+      title: (total) => t("usersPage.users", { count: total }),
+      searchPlaceholder: t("usersPage.search.label"),
+      emptyMessage: t("usersPage.users", { count: 0 }),
+      getKey: (user) => user.userRef
+    }
+  );
+};
+
+export { UsersContainer };
+//# sourceMappingURL=UsersContainer.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UsersContainer.esm.js","sources":["../../../src/components/UsersContainer/UsersContainer.tsx"],"sourcesContent":["import { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { QetaEntityContainer } from '../QetaEntityContainer/QetaEntityContainer';\nimport { UserListItem } from './UserListItem';\nimport { UsersGridItem } from './UsersGridItem';\nimport { UserResponse } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  CommonFilterPanelProps,\n  UserFilters,\n} from '../FilterPanel/FilterPanel';\nimport { qetaTranslationRef } from '../../translation';\nimport { ViewType } from '../ViewToggle/ViewToggle';\n\nexport const UsersContainer = (props: {\n  filterPanelProps?: CommonFilterPanelProps;\n  defaultView?: ViewType;\n}) => {\n  const { filterPanelProps, defaultView } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <QetaEntityContainer<UserResponse, UserFilters>\n      prefix=\"users\"\n      defaultPageSize={24}\n      defaultView={defaultView}\n      initialFilters={{\n        order: 'desc',\n        orderBy: 'totalPosts',\n        searchQuery: '',\n      }}\n      fetch={(api, limit, offset, filters) => {\n        return api\n          .getUsers({\n            limit,\n            offset,\n            searchQuery: filters.searchQuery,\n          })\n          .then(res => ({ items: res.users, total: res.total }));\n      }}\n      filterPanelProps={{\n        ...filterPanelProps,\n        mode: 'users',\n      }}\n      renderListItem={user => <UserListItem user={user} />}\n      renderGridItem={user => <UsersGridItem user={user} />}\n      title={total => t('usersPage.users', { count: total })}\n      searchPlaceholder={t('usersPage.search.label')}\n      emptyMessage={t('usersPage.users', { count: 0 })}\n      getKey={user => user.userRef}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAYa,MAAA,cAAA,GAAiB,CAAC,KAGzB,KAAA;AACJ,EAAM,MAAA,EAAE,gBAAkB,EAAA,WAAA,EAAgB,GAAA,KAAA;AAC1C,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EACE,uBAAA,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,OAAA;AAAA,MACP,eAAiB,EAAA,EAAA;AAAA,MACjB,WAAA;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,KAAO,EAAA,MAAA;AAAA,QACP,OAAS,EAAA,YAAA;AAAA,QACT,WAAa,EAAA;AAAA,OACf;AAAA,MACA,KAAO,EAAA,CAAC,GAAK,EAAA,KAAA,EAAO,QAAQ,OAAY,KAAA;AACtC,QAAA,OAAO,IACJ,QAAS,CAAA;AAAA,UACR,KAAA;AAAA,UACA,MAAA;AAAA,UACA,aAAa,OAAQ,CAAA;AAAA,SACtB,CACA,CAAA,IAAA,CAAK,CAAQ,GAAA,MAAA,EAAE,KAAO,EAAA,GAAA,CAAI,KAAO,EAAA,KAAA,EAAO,GAAI,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,OACzD;AAAA,MACA,gBAAkB,EAAA;AAAA,QAChB,GAAG,gBAAA;AAAA,QACH,IAAM,EAAA;AAAA,OACR;AAAA,MACA,cAAgB,EAAA,CAAA,IAAA,qBAAS,GAAA,CAAA,YAAA,EAAA,EAAa,IAAY,EAAA,CAAA;AAAA,MAClD,cAAgB,EAAA,CAAA,IAAA,qBAAS,GAAA,CAAA,aAAA,EAAA,EAAc,IAAY,EAAA,CAAA;AAAA,MACnD,OAAO,CAAS,KAAA,KAAA,CAAA,CAAE,mBAAmB,EAAE,KAAA,EAAO,OAAO,CAAA;AAAA,MACrD,iBAAA,EAAmB,EAAE,wBAAwB,CAAA;AAAA,MAC7C,cAAc,CAAE,CAAA,iBAAA,EAAmB,EAAE,KAAA,EAAO,GAAG,CAAA;AAAA,MAC/C,MAAA,EAAQ,UAAQ,IAAK,CAAA;AAAA;AAAA,GACvB;AAEJ;;;;"}

package/dist/components/{UsersGrid → UsersContainer}/UsersGridItem.esm.js

@@ -5,12 +5,19 @@ import { userRouteRef } from '../../routes.esm.js';
 import '../../api.esm.js';
 import 'react-use';
 import 'react';
+import '@backstage/plugin-signals-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import '../../hooks/useListItemStyles.esm.js';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
 import { useIdentityApi } from '../../hooks/useIdentityApi.esm.js';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { makeStyles, Grid, Card, Box, Avatar, Tooltip, Typography, CardContent } from '@material-ui/core';
+import { makeStyles, Card, Box, Avatar, Tooltip, Typography, CardContent, Grid } from '@material-ui/core';
+import 'react-router-dom';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
 import { UserFollowButton } from '../Buttons/UserFollowButton.esm.js';
 import Visibility from '@material-ui/icons/Visibility';
 import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
@@ -19,8 +26,6 @@ import CheckCircle from '@material-ui/icons/CheckCircle';
 import DescriptionIcon from '@material-ui/icons/Description';
 import LinkIcon from '@material-ui/icons/Link';
 import EmojiEvents from '@material-ui/icons/EmojiEvents';
-import { qetaTranslationRef } from '../../translation.esm.js';
-import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import useGridItemStyles from '../GridItemStyles/useGridItemStyles.esm.js';
 import { ClickableLink } from '../Utility/ClickableLink.esm.js';
 import { stringifyEntityRef, parseEntityRef } from '@backstage/catalog-model';
@@ -63,40 +68,32 @@ const UsersGridItem = (props) => {
     error: userError
   } = useIdentityApi((api) => api.getBackstageIdentity(), []);
   const href = `${userRoute()}/${user.userRef}`;
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, xl: 4, children: /* @__PURE__ */ jsx(Card, { className: classes.card, children: /* @__PURE__ */ jsxs(ClickableLink, { href, ariaLabel: primaryTitle, children: [
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        className: classes.cardHeader,
-        display: "flex",
-        alignItems: "center",
-        children: [
-          Icon && /* @__PURE__ */ jsx(
-            Avatar,
-            {
-              src: userEntity?.spec?.profile?.picture,
-              className: "avatar",
-              alt: name,
-              variant: "rounded",
-              style: { marginRight: 16 },
-              children: initials
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", noWrap: true, children: primaryTitle }) }) }),
-          !loadingUser && !userError && currentUser?.userEntityRef !== user.userRef ? /* @__PURE__ */ jsx(
-            Box,
-            {
-              flexShrink: 0,
-              onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              },
-              children: /* @__PURE__ */ jsx(UserFollowButton, { userRef: user.userRef })
-            }
-          ) : null
-        ]
-      }
-    ),
+  return /* @__PURE__ */ jsx(Card, { className: classes.card, children: /* @__PURE__ */ jsxs(ClickableLink, { href, ariaLabel: primaryTitle, children: [
+    /* @__PURE__ */ jsxs(Box, { className: classes.cardHeader, display: "flex", alignItems: "center", children: [
+      Icon && /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          src: userEntity?.spec?.profile?.picture,
+          className: "avatar",
+          alt: name,
+          variant: "rounded",
+          style: { marginRight: 16 },
+          children: initials
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", noWrap: true, children: primaryTitle }) }) }),
+      !loadingUser && !userError && currentUser?.userEntityRef !== user.userRef ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          flexShrink: 0,
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsx(UserFollowButton, { userRef: user.userRef })
+        }
+      ) : null
+    ] }),
     /* @__PURE__ */ jsx(
       CardContent,
       {
@@ -203,7 +200,7 @@ const UsersGridItem = (props) => {
         ] })
       }
     )
-  ] }) }) });
+  ] }) });
 };
 
 export { UsersGridItem };

package/dist/components/UsersContainer/UsersGridItem.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsersGridItem.esm.js","sources":["../../../src/components/UsersContainer/UsersGridItem.tsx"],"sourcesContent":["import { UserResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { userRouteRef } from '../../routes';\nimport { useIdentityApi } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport {\n  Avatar,\n  Box,\n  Card,\n  CardContent,\n  Grid,\n  makeStyles,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport { UserFollowButton } from '../Buttons/UserFollowButton';\nimport Visibility from '@material-ui/icons/Visibility';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport ThumbUpIcon from '@material-ui/icons/ThumbUp';\nimport CheckCircleIcon from '@material-ui/icons/CheckCircle';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport LinkIcon from '@material-ui/icons/Link';\nimport EmojiEvents from '@material-ui/icons/EmojiEvents';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\nimport { ClickableLink } from '../Utility/ClickableLink';\nimport { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';\n\nconst useStyles = makeStyles(theme => ({\n  statsGrid: {\n    marginTop: 'auto',\n  },\n  statItem: {\n    padding: theme.spacing(1),\n    borderRadius: theme.shape.borderRadius,\n    width: '100%',\n    height: '100%',\n    justifyContent: 'center',\n  },\n  flexColumn: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n}));\n\nexport const UsersGridItem = (props: { user: UserResponse }) => {\n  const { user } = props;\n  const classes = useGridItemStyles();\n  const localClasses = useStyles();\n  const userRoute = useRouteRef(userRouteRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const entityRef = stringifyEntityRef(\n    parseEntityRef(user.userRef, { defaultKind: 'user' }),\n  );\n  const { primaryTitle, Icon } = useEntityPresentation(entityRef);\n  const {\n    name,\n    initials,\n    user: userEntity,\n    secondaryTitle,\n  } = useEntityAuthor(user);\n  const {\n    value: currentUser,\n    loading: loadingUser,\n    error: userError,\n  } = useIdentityApi(api => api.getBackstageIdentity(), []);\n\n  const href = `${userRoute()}/${user.userRef}`;\n\n  return (\n    <Card className={classes.card}>\n      <ClickableLink href={href} ariaLabel={primaryTitle}>\n        <Box className={classes.cardHeader} display=\"flex\" alignItems=\"center\">\n          {Icon && (\n            <Avatar\n              src={userEntity?.spec?.profile?.picture}\n              className=\"avatar\"\n              alt={name}\n              variant=\"rounded\"\n              style={{ marginRight: 16 }}\n            >\n              {initials}\n            </Avatar>\n          )}\n          <Box flex={1} minWidth={0}>\n            <Tooltip title={secondaryTitle ?? ''} arrow>\n              <Typography variant=\"h6\" noWrap>\n                {primaryTitle}\n              </Typography>\n            </Tooltip>\n          </Box>\n          {!loadingUser &&\n          !userError &&\n          currentUser?.userEntityRef !== user.userRef ? (\n            <Box\n              flexShrink={0}\n              onClick={e => {\n                e.preventDefault();\n                e.stopPropagation();\n              }}\n            >\n              <UserFollowButton userRef={user.userRef} />\n            </Box>\n          ) : null}\n        </Box>\n        <CardContent\n          className={`${classes.cardContent} ${localClasses.flexColumn}`}\n        >\n          <Grid container spacing={1} className={localClasses.statsGrid}>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <EmojiEvents fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.reputation}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('impactCard.reputation')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <QuestionAnswerIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalQuestions}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.questions')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <DescriptionIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalArticles}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.articles')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={3}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <LinkIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalLinks}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.links')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <CheckCircleIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalAnswers}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.answers')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <ThumbUpIcon fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalVotes}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.votes')}\n                </Typography>\n              </Box>\n            </Grid>\n            <Grid item xs={4}>\n              <Box\n                display=\"flex\"\n                flexDirection=\"column\"\n                alignItems=\"center\"\n                className={localClasses.statItem}\n              >\n                <Visibility fontSize=\"small\" color=\"disabled\" />\n                <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n                  {user.totalViews}\n                </Typography>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  {t('common.views')}\n                </Typography>\n              </Box>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </ClickableLink>\n    </Card>\n  );\n};\n"],"names":["CheckCircleIcon","ThumbUpIcon"],"mappings":"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"}

package/dist/components/Utility/QetaGridHeader.esm.js

@@ -7,24 +7,28 @@ const QetaGridHeader = ({
   searchBarLabel,
   loading,
   onSearch,
-  buttons
+  buttons,
+  rightElement
 }) => {
   return /* @__PURE__ */ jsxs(Box, { mb: 3, children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, alignItems: "flex-end", justifyContent: "space-between", children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsx(
-      SearchBar,
-      {
-        onSearch,
-        label: searchBarLabel,
-        loading
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx(Box, { mt: 2, mb: 2, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(Box, { width: "100%", maxWidth: 400, children: /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          onSearch,
+          label: searchBarLabel,
+          loading
+        }
+      ) }),
+      rightElement && /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "flex-end", children: rightElement })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { mt: 3, mb: 2, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", justifyContent: "space-between", children: [
       /* @__PURE__ */ jsx(Grid, { item: true, children: !loading && /* @__PURE__ */ jsx(
         Typography,
         {
           variant: "h6",
           component: "h2",
-          style: { fontWeight: 500, paddingBottom: 2 },
+          style: { fontWeight: 500 },
           children: title
         }
       ) }),

package/dist/components/Utility/QetaGridHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"QetaGridHeader.esm.js","sources":["../../../src/components/Utility/QetaGridHeader.tsx"],"sourcesContent":["import { Box, Grid, Typography } from '@material-ui/core';\nimport { SearchBar } from '../SearchBar/SearchBar';\n\nexport type QetaGridHeaderProps = {\n  title: React.ReactNode;\n  searchBarLabel: string;\n  loading: boolean;\n  onSearch: (val: string) => void;\n  buttons?: React.ReactNode;\n};\n\nexport const QetaGridHeader = ({\n  title,\n  searchBarLabel,\n  loading,\n  onSearch,\n  buttons,\n}: QetaGridHeaderProps) => {\n  return (\n    <Box mb={3}>\n      <Grid container alignItems=\"flex-end\" justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <SearchBar\n            onSearch={onSearch}\n            label={searchBarLabel}\n            loading={loading}\n          />\n        </Grid>\n      </Grid>\n      <Box mt={2} mb={2}>\n        <Grid container alignItems=\"center\" justifyContent=\"space-between\">\n          <Grid item>\n            {!loading && (\n              <Typography\n                variant=\"h6\"\n                component=\"h2\"\n                style={{ fontWeight: 500, paddingBottom: 2 }}\n              >\n                {title}\n              </Typography>\n            )}\n          </Grid>\n          {buttons && <Grid item>{buttons}</Grid>}\n        </Grid>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;AAWO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EACE,uBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,UAAA,EAAW,YAAW,cAAe,EAAA,eAAA,EACnD,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAI,IAAI,CACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,KAAO,EAAA,cAAA;AAAA,QACP;AAAA;AAAA,OAEJ,CACF,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EACd,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,UAAW,EAAA,QAAA,EAAS,gBAAe,eACjD,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACP,EAAA,QAAA,EAAA,CAAC,OACA,oBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAU,EAAA,IAAA;AAAA,UACV,KAAO,EAAA,EAAE,UAAY,EAAA,GAAA,EAAK,eAAe,CAAE,EAAA;AAAA,UAE1C,QAAA,EAAA;AAAA;AAAA,OAGP,EAAA,CAAA;AAAA,MACC,OAAW,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAE,QAAQ,EAAA,OAAA,EAAA;AAAA,KAAA,EAClC,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"QetaGridHeader.esm.js","sources":["../../../src/components/Utility/QetaGridHeader.tsx"],"sourcesContent":["import { Box, Grid, Typography } from '@material-ui/core';\nimport { SearchBar } from '../SearchBar/SearchBar';\n\nexport type QetaGridHeaderProps = {\n  title: React.ReactNode;\n  searchBarLabel: string;\n  loading: boolean;\n  onSearch: (val: string) => void;\n  buttons?: React.ReactNode;\n  rightElement?: React.ReactNode;\n};\n\nexport const QetaGridHeader = ({\n  title,\n  searchBarLabel,\n  loading,\n  onSearch,\n  buttons,\n  rightElement,\n}: QetaGridHeaderProps) => {\n  return (\n    <Box mb={3}>\n      <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n        <Box width=\"100%\" maxWidth={400}>\n          <SearchBar\n            onSearch={onSearch}\n            label={searchBarLabel}\n            loading={loading}\n          />\n        </Box>\n        {rightElement && (\n          <Box display=\"flex\" justifyContent=\"flex-end\">\n            {rightElement}\n          </Box>\n        )}\n      </Box>\n      <Box mt={3} mb={2}>\n        <Grid container alignItems=\"center\" justifyContent=\"space-between\">\n          <Grid item>\n            {!loading && (\n              <Typography\n                variant=\"h6\"\n                component=\"h2\"\n                style={{ fontWeight: 500 }}\n              >\n                {title}\n              </Typography>\n            )}\n          </Grid>\n          {buttons && <Grid item>{buttons}</Grid>}\n        </Grid>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;AAYO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,KAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EACE,uBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAI,CACP,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OAAI,OAAQ,EAAA,MAAA,EAAO,UAAW,EAAA,QAAA,EAAS,gBAAe,eACrD,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,KAAA,EAAM,MAAO,EAAA,QAAA,EAAU,GAC1B,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,QAAA;AAAA,UACA,KAAO,EAAA,cAAA;AAAA,UACP;AAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,MACC,gCACE,GAAA,CAAA,GAAA,EAAA,EAAI,SAAQ,MAAO,EAAA,cAAA,EAAe,YAChC,QACH,EAAA,YAAA,EAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EACd,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,UAAW,EAAA,QAAA,EAAS,gBAAe,eACjD,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACP,EAAA,QAAA,EAAA,CAAC,OACA,oBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAU,EAAA,IAAA;AAAA,UACV,KAAA,EAAO,EAAE,UAAA,EAAY,GAAI,EAAA;AAAA,UAExB,QAAA,EAAA;AAAA;AAAA,OAGP,EAAA,CAAA;AAAA,MACC,OAAW,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAE,QAAQ,EAAA,OAAA,EAAA;AAAA,KAAA,EAClC,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Utility/QetaPagination.esm.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import { makeStyles, Grid, Tooltip, FormControl, Select, MenuItem } from '@material-ui/core';
+import { Pagination } from '@material-ui/lab';
+
+const useStyles = makeStyles(
+  () => ({
+    root: {
+      marginTop: "2em",
+      marginBottom: "2em"
+    },
+    pageSizeSelect: {
+      marginRight: "1em",
+      maxHeight: "42px"
+    },
+    pagination: {}
+  }),
+  { name: "QetaPagination" }
+);
+const QetaPagination = (props) => {
+  const { handlePageChange, handlePageSizeChange, page, pageCount, tooltip } = props;
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      container: true,
+      className: styles.root,
+      spacing: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, { title: tooltip ?? t("pagination.defaultTooltip", {}), arrow: true, children: /* @__PURE__ */ jsx(FormControl, { variant: "outlined", children: /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: props.pageSize,
+            onChange: handlePageSizeChange,
+            variant: "outlined",
+            className: styles.pageSizeSelect,
+            children: [
+              /* @__PURE__ */ jsx(MenuItem, { value: 5, children: "5" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 10, children: "10" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 25, children: "25" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 50, children: "50" }),
+              /* @__PURE__ */ jsx(MenuItem, { value: 100, children: "100" })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            page,
+            onChange: handlePageChange,
+            count: pageCount,
+            size: "large",
+            variant: "outlined",
+            className: styles.pagination,
+            showFirstButton: true,
+            showLastButton: true
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { QetaPagination };
+//# sourceMappingURL=QetaPagination.esm.js.map

package/dist/components/Utility/QetaPagination.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QetaPagination.esm.js","sources":["../../../src/components/Utility/QetaPagination.tsx"],"sourcesContent":["import { ChangeEvent } from 'react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n  FormControl,\n  Grid,\n  makeStyles,\n  MenuItem,\n  Select,\n  Tooltip,\n} from '@material-ui/core';\nimport { Pagination } from '@material-ui/lab';\n\nexport type QetaPaginationClassKeys = 'root' | 'pageSizeSelect' | 'pagination';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {\n      marginTop: '2em',\n      marginBottom: '2em',\n    },\n    pageSizeSelect: {\n      marginRight: '1em',\n      maxHeight: '42px',\n    },\n    pagination: {},\n  }),\n  { name: 'QetaPagination' },\n);\n\nexport const QetaPagination = (props: {\n  pageSize: number;\n  handlePageChange: (_event: ChangeEvent<unknown>, value: number) => void;\n  handlePageSizeChange: (event: ChangeEvent<{ value: unknown }>) => void;\n  page: number;\n  tooltip?: string;\n  pageCount: number;\n}) => {\n  const { handlePageChange, handlePageSizeChange, page, pageCount, tooltip } =\n    props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const styles = useStyles();\n  return (\n    <Grid\n      container\n      className={styles.root}\n      spacing={0}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n    >\n      <Tooltip title={tooltip ?? t('pagination.defaultTooltip', {})} arrow>\n        <FormControl variant=\"outlined\">\n          <Select\n            value={props.pageSize}\n            onChange={handlePageSizeChange}\n            variant=\"outlined\"\n            className={styles.pageSizeSelect}\n          >\n            <MenuItem value={5}>5</MenuItem>\n            <MenuItem value={10}>10</MenuItem>\n            <MenuItem value={25}>25</MenuItem>\n            <MenuItem value={50}>50</MenuItem>\n            <MenuItem value={100}>100</MenuItem>\n          </Select>\n        </FormControl>\n      </Tooltip>\n      <Pagination\n        page={page}\n        onChange={handlePageChange}\n        count={pageCount}\n        size=\"large\"\n        variant=\"outlined\"\n        className={styles.pagination}\n        showFirstButton\n        showLastButton\n      />\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,OAAO;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA,KAAA;AAAA,MACX,YAAc,EAAA;AAAA,KAChB;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,WAAa,EAAA,KAAA;AAAA,MACb,SAAW,EAAA;AAAA,KACb;AAAA,IACA,YAAY;AAAC,GACf,CAAA;AAAA,EACA,EAAE,MAAM,gBAAiB;AAC3B,CAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,KAOzB,KAAA;AACJ,EAAA,MAAM,EAAE,gBAAkB,EAAA,oBAAA,EAAsB,IAAM,EAAA,SAAA,EAAW,SAC/D,GAAA,KAAA;AACF,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,OAAS,EAAA,CAAA;AAAA,MACT,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,QAAA;AAAA,MAEf,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAO,OAAW,IAAA,CAAA,CAAE,2BAA6B,EAAA,EAAE,CAAA,EAAG,KAAK,EAAA,IAAA,EAClE,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAY,SAAQ,UACnB,EAAA,QAAA,kBAAA,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAO,KAAM,CAAA,QAAA;AAAA,YACb,QAAU,EAAA,oBAAA;AAAA,YACV,OAAQ,EAAA,UAAA;AAAA,YACR,WAAW,MAAO,CAAA,cAAA;AAAA,YAElB,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAG,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,8BACpB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,EAAA,EAAI,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,8BACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,GAAA,EAAK,QAAG,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,WAE7B,CACF,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,QAAU,EAAA,gBAAA;AAAA,YACV,KAAO,EAAA,SAAA;AAAA,YACP,IAAK,EAAA,OAAA;AAAA,YACL,OAAQ,EAAA,UAAA;AAAA,YACR,WAAW,MAAO,CAAA,UAAA;AAAA,YAClB,eAAe,EAAA,IAAA;AAAA,YACf,cAAc,EAAA;AAAA;AAAA;AAChB;AAAA;AAAA,GACF;AAEJ;;;;"}