npm - @drodil/backstage-plugin-qeta-react - Versions diffs - 3.28.1 → 3.29.0 - Mend

@drodil/backstage-plugin-qeta-react 3.28.1 → 3.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { WarningPanel, CardTab, TabbedCard, Progress } from '@backstage/core-components';
-import { makeStyles, List, ListItem, ListItemAvatar, Avatar, ListItemText, Typography } from '@material-ui/core';
+import { makeStyles, Box, Paper, Typography, List, ListItem, ListItemAvatar, Avatar, ListItemText } from '@material-ui/core';
 import { TrophyIcon } from './TrophyIcon.esm.js';
 import { UserLink } from '../Links/Links.esm.js';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
@@ -19,19 +19,80 @@ import '@backstage/plugin-permission-common';
 const useStyles = makeStyles((theme) => {
   return {
+    root: {
+      "& .MuiTabbedCard-root": {
+        borderRadius: "12px",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)"
+      },
+      "& .MuiCardHeader-root": {
+        padding: theme.spacing(2, 3),
+        borderBottom: `1px solid ${theme.palette.divider}`
+      },
+      "& .MuiTabs-root": {
+        backgroundColor: theme.palette.background.paper,
+        borderBottom: `1px solid ${theme.palette.divider}`
+      }
+    },
     trophyIcon: {
-      backgroundColor: "initial",
+      backgroundColor: theme.palette.background.paper,
       color: theme.palette.text.primary,
       borderRadius: "50%",
       boxSizing: "border-box",
       padding: "0.5rem",
-      height: 50,
-      width: 50
+      height: 48,
+      width: 48,
+      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+      transition: "transform 0.2s ease-in-out",
+      "&:hover": {
+        transform: "scale(1.05)"
+      }
     },
     votesText: {
-      display: "grid",
-      placeItems: "center",
-      marginLeft: "16px"
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginLeft: "16px",
+      backgroundColor: theme.palette.background.paper,
+      padding: theme.spacing(0.5, 2),
+      borderRadius: "20px",
+      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)"
+    },
+    rankingCard: {
+      padding: theme.spacing(2)
+    },
+    rankingCardDescription: {
+      color: theme.palette.text.secondary,
+      marginBottom: theme.spacing(2),
+      fontSize: "0.9rem"
+    },
+    rankingCardList: {
+      "& .MuiListItem-root": {
+        marginBottom: theme.spacing(1),
+        borderRadius: "8px",
+        transition: "background-color 0.2s ease-in-out",
+        "&:hover": {
+          backgroundColor: theme.palette.action.hover
+        }
+      }
+    },
+    rankingRow: {
+      display: "flex",
+      alignItems: "center",
+      padding: theme.spacing(1, 2)
+    },
+    userInfo: {
+      display: "flex",
+      alignItems: "center",
+      flex: 1
+    },
+    position: {
+      fontWeight: 600,
+      marginRight: theme.spacing(1),
+      color: theme.palette.text.primary
+    },
+    divider: {
+      margin: theme.spacing(2, 0),
+      opacity: 0.5
     }
   };
 });
@@ -77,31 +138,20 @@ const RankingRow = (props) => {
   const userIcon = props.rankingIcon?.userRankingIcon ? props.rankingIcon?.userRankingIcon : DefaultUserIcon;
   const topRankingIcon = props.rankingIcon ? props.rankingIcon.iconsByRanking.get(Number(props?.position)) : DefaultRankingIcons.get(Number(props?.position)) || DefaultUserIcon;
   const rankingIcon = props?.position > 3 ? userIcon : topRankingIcon;
-  return /* @__PURE__ */ jsxs(ListItem, { className: "qetaRankingCardRow", children: [
+  return /* @__PURE__ */ jsxs(ListItem, { className: classes.rankingRow, children: [
     /* @__PURE__ */ jsx(ListItemAvatar, { children: /* @__PURE__ */ jsx(Avatar, { className: classes.trophyIcon, children: rankingIcon }) }),
     /* @__PURE__ */ jsx(
       ListItemText,
       {
         disableTypography: true,
-        style: {
-          display: "flex",
-          justifyContent: "center"
-        },
-        primary: /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            style: { marginRight: "10px", fontWeight: 400 },
-            variant: "subtitle1",
-            children: [
-              `${ordinalPosition}`,
-              " ",
-              /* @__PURE__ */ jsx(UserLink, { entityRef: userRef ?? "" })
-            ]
-          }
-        ) })
+        className: classes.userInfo,
+        primary: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(Typography, { className: classes.position, variant: "subtitle1", children: ordinalPosition }),
+          /* @__PURE__ */ jsx(UserLink, { entityRef: userRef ?? "" })
+        ] })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: classes.votesText, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", children: [
+    /* @__PURE__ */ jsx("div", { className: classes.votesText, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", style: { fontWeight: 500 }, children: [
       props?.total,
       " ",
       props.unit
@@ -109,26 +159,25 @@ const RankingRow = (props) => {
   ] });
 };
 const RankingCard = (props) => {
+  const classes = useStyles();
   const rankingStats = props.limit ? props.statistic?.ranking.slice(0, props.limit) : props.statistic?.ranking;
-  return /* @__PURE__ */ jsxs("div", { style: { display: "block" }, className: "qetaRankingCard", children: [
-    /* @__PURE__ */ jsx("span", { className: "qetaRankingCardDescription", children: props.description }),
-    /* @__PURE__ */ jsxs(List, { className: "qetaRankingCardList", children: [
-      rankingStats?.map((authorStats) => {
-        return /* @__PURE__ */ jsx(
-          RankingRow,
-          {
-            total: authorStats.total || 0,
-            position: authorStats.position || 0,
-            userRef: authorStats.author,
-            unit: props.unit
-          },
-          authorStats.author
-        );
-      }),
+  return /* @__PURE__ */ jsxs(Paper, { elevation: 0, className: classes.rankingCard, children: [
+    /* @__PURE__ */ jsx(Typography, { className: classes.rankingCardDescription, children: props.description }),
+    /* @__PURE__ */ jsxs(List, { className: classes.rankingCardList, children: [
+      rankingStats?.map((authorStats) => /* @__PURE__ */ jsx(
+        RankingRow,
+        {
+          total: authorStats.total || 0,
+          position: authorStats.position || 0,
+          userRef: authorStats.author,
+          unit: props.unit
+        },
+        authorStats.author
+      )),
       !rankingStats?.some(
         (authorStats) => authorStats.author === props.statistic?.loggedUser?.author
       ) && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("hr", {}),
+        /* @__PURE__ */ jsx("hr", { className: classes.divider }),
         /* @__PURE__ */ jsx(
           RankingRow,
           {
@@ -143,6 +192,7 @@ const RankingCard = (props) => {
   ] });
 };
 const TopRankingUsers = (props) => {
+  const classes = useStyles();
   const { t } = useTranslationRef(qetaTranslationRef);
   const {
     value: topStatistics,
@@ -186,7 +236,7 @@ const TopRankingUsers = (props) => {
   let content;
   if (loading) {
     content = [
-      /* @__PURE__ */ jsx(CardTab, { children: /* @__PURE__ */ jsx(Progress, {}) })
+      /* @__PURE__ */ jsx(CardTab, { children: /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: 3, children: /* @__PURE__ */ jsx(Progress, {}) }) })
     ];
   } else if (topStatistics && topStatistics.length > 0) {
     content = topStatistics?.map((stats, index) => {
@@ -201,9 +251,11 @@ const TopRankingUsers = (props) => {
       ) }, tabData[index].title);
     });
   } else {
-    content = [/* @__PURE__ */ jsx(CardTab, { children: t("statistics.notAvailable") })];
+    content = [
+      /* @__PURE__ */ jsx(CardTab, { children: /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: 3, children: t("statistics.notAvailable") }) })
+    ];
   }
-  return /* @__PURE__ */ jsx(TabbedCard, { title: props.title || t("statistics.ranking"), children: content });
+  return /* @__PURE__ */ jsx("div", { className: classes.root, children: /* @__PURE__ */ jsx(TabbedCard, { title: props.title || t("statistics.ranking"), children: content }) });
 };
 export { RankingCard, RankingRow, TopRankingUsers };

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

	@@ -1 +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 List,\n ListItem,\n ListItemAvatar,\n ListItemText,\n makeStyles,\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 trophyIcon: {\n backgroundColor: 'initial',\n color: theme.palette.text.primary,\n borderRadius: '50%',\n boxSizing: 'border-box',\n padding: '0.5rem',\n height: 50,\n width: 50,\n },\n votesText: {\n display: 'grid',\n placeItems: 'center',\n marginLeft: '16px',\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=\"qetaRankingCardRow\">\n <ListItemAvatar>\n <Avatar className={classes.trophyIcon}>{rankingIcon}</Avatar>\n </ListItemAvatar>\n\n <ListItemText\n disableTypography\n style={{\n display: 'flex',\n justifyContent: 'center',\n }}\n primary={\n <div style={{ display: 'flex' }}>\n <Typography\n style={{ marginRight: '10px', fontWeight: 400 }}\n variant=\"subtitle1\"\n >\n {`${ordinalPosition}`} <UserLink entityRef={userRef ?? ''} />\n </Typography>\n </div>\n }\n />\n\n <div className={classes.votesText}>\n <Typography variant=\"subtitle1\">\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 rankingStats = props.limit\n ? props.statistic?.ranking.slice(0, props.limit)\n : props.statistic?.ranking;\n\n return (\n <div style={{ display: 'block' }} className=\"qetaRankingCard\">\n <span className=\"qetaRankingCardDescription\">{props.description}</span>\n <List className=\"qetaRankingCardList\">\n {rankingStats?.map(authorStats => {\n return (\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 })}\n {!rankingStats?.some(\n authorStats =>\n authorStats.author === props.statistic?.loggedUser?.author,\n ) && (\n <>\n <hr />\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 </div>\n );\n};\n\nexport const TopRankingUsers = (props: {\n title?: string;\n hideTitle?: boolean;\n limit?: number;\n}) => {\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 <Progress />\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 = [<CardTab>{t('statistics.notAvailable')}</CardTab>];\n }\n\n return (\n <TabbedCard title={props.title \|\| t('statistics.ranking')}>\n {content}\n </TabbedCard>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,MAAM,SAAA,GAAY,WAAW,CAAS,KAAA,KAAA;AACpC,EAAO,OAAA;AAAA,IACL,UAAY,EAAA;AAAA,MACV,eAAiB,EAAA,SAAA;AAAA,MACjB,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;AAAA,KACT;AAAA,IACA,SAAW,EAAA;AAAA,MACT,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,UAAY,EAAA;AAAA;AACd,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,EACE,uBAAA,IAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAU,oBAClB,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,KAAO,EAAA;AAAA,UACL,OAAS,EAAA,MAAA;AAAA,UACT,cAAgB,EAAA;AAAA,SAClB;AAAA,QACA,yBACG,GAAA,CAAA,KAAA,EAAA,EAAI,OAAO,EAAE,OAAA,EAAS,QACrB,EAAA,QAAA,kBAAA,IAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAO,EAAA,EAAE,WAAa,EAAA,MAAA,EAAQ,YAAY,GAAI,EAAA;AAAA,YAC9C,OAAQ,EAAA,WAAA;AAAA,YAEP,QAAA,EAAA;AAAA,cAAA,CAAA,EAAG,eAAe,CAAA,CAAA;AAAA,cAAG,GAAA;AAAA,8BAAE,GAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,OAAA,IAAW,EAAI,EAAA;AAAA;AAAA;AAAA,SAE/D,EAAA;AAAA;AAAA,KAEJ;AAAA,oBAEA,GAAA,CAAC,SAAI,SAAW,EAAA,OAAA,CAAQ,WACtB,QAAC,kBAAA,IAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,WACjB,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,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,EACE,uBAAA,IAAA,CAAC,SAAI,KAAO,EAAA,EAAE,SAAS,OAAQ,EAAA,EAAG,WAAU,iBAC1C,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,4BAA8B,EAAA,QAAA,EAAA,KAAA,CAAM,WAAY,EAAA,CAAA;AAAA,oBAChE,IAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAU,qBACb,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA,EAAc,IAAI,CAAe,WAAA,KAAA;AAChC,QACE,uBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,YAAY,KAAS,IAAA,CAAA;AAAA,YAC5B,QAAA,EAAU,YAAY,QAAY,IAAA,CAAA;AAAA,YAClC,SAAS,WAAY,CAAA,MAAA;AAAA,YACrB,MAAM,KAAM,CAAA;AAAA,WAAA;AAAA,UACP,WAAY,CAAA;AAAA,SACnB;AAAA,OAEH,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,wBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,CAAA;AAAA,wBACJ,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,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,QAAA,EAAA,EAAS,CACZ,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,IAAA,OAAA,GAAU,iBAAE,GAAA,CAAA,OAAA,EAAA,EAAS,QAAE,EAAA,CAAA,CAAA,yBAAyB,GAAE,CAAU,CAAA;AAAA;AAG9D,EACE,uBAAA,GAAA,CAAC,cAAW,KAAO,EAAA,KAAA,CAAM,SAAS,CAAE,CAAA,oBAAoB,GACrD,QACH,EAAA,OAAA,EAAA,CAAA;AAEJ;;;;"}
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 List,\n ListItem,\n ListItemAvatar,\n ListItemText,\n makeStyles,\n Typography,\n Paper,\n Box,\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 fontSize: '0.9rem',\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, 2),\n },\n userInfo: {\n display: 'flex',\n alignItems: 'center',\n flex: 1,\n },\n position: {\n fontWeight: 600,\n marginRight: theme.spacing(1),\n color: theme.palette.text.primary,\n },\n divider: {\n margin: theme.spacing(2, 0),\n opacity: 0.5,\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 className={classes.position} variant=\"subtitle1\">\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/UsersGrid/UsersGrid.esm.js CHANGED Viewed

@@ -15,8 +15,8 @@ import '@backstage/plugin-permission-common';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
 import { UsersGridContent } from './UsersGridContent.esm.js';
 import useDebounce from 'react-use/lib/useDebounce';
-import { SearchBar } from '../SearchBar/SearchBar.esm.js';
-import { Grid, Typography } from '@material-ui/core';
+import { QetaGridHeader } from '../Utility/QetaGridHeader.esm.js';
+import { Grid } from '@material-ui/core';
 const UsersGrid = () => {
   const [page, setPage] = useState(1);
@@ -55,16 +55,16 @@ const UsersGrid = () => {
     }
   }, [response, entitiesPerPage]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { container: true, className: "qetaUsersContainer", children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsx(
-      SearchBar,
+    /* @__PURE__ */ jsx(
+      QetaGridHeader,
       {
-        onSearch: setSearchQuery,
-        label: t("usersPage.search.label"),
-        loading
+        title: response ? t("usersPage.users", { count: response.total }) : "",
+        searchBarLabel: t("usersPage.search.label"),
+        loading,
+        onSearch: setSearchQuery
       }
-    ) }) }),
-    /* @__PURE__ */ jsxs(Grid, { container: true, children: [
-      response && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", className: "qetaUsersContainerTitle", children: t("usersPage.users", { count: response.total }) }) }),
+    ),
+    /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "center", children: [
       /* @__PURE__ */ jsx(UsersGridContent, { response, loading, error }),
       response && response?.total > 0 && /* @__PURE__ */ jsx(
         QetaPagination,

package/dist/components/UsersGrid/UsersGrid.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UsersGrid.esm.js","sources":["../../../src/components/UsersGrid/UsersGrid.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useQetaApi } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { UsersGridContent } from './UsersGridContent';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { ~~SearchBar~~ } from '~~../SearchBar~~/~~SearchBar~~';\nimport { ~~Grid,~~ ~~Typography~~ } from '~~@material-ui/core~~';\nimport { ~~useTranslationRef~~ } from '~~@backstage~~/~~core-plugin-api/alpha~~';\nimport { ~~qetaTranslationRef~~ } from '~~../../translation.ts~~';\n\ntype EntityFilters = {\n order: 'asc' \| 'desc';\n orderBy?: 'userRef';\n searchQuery: string;\n};\n\nexport const UsersGrid = () => {\n const [page, setPage] = useState(1);\n const [pageCount, setPageCount] = useState(1);\n const [entitiesPerPage, setEntitiesPerPage] = useState(25);\n const [searchQuery, setSearchQuery] = useState('');\n const [filters, setFilters] = useState<EntityFilters>({\n order: 'desc',\n searchQuery: '',\n });\n const { t } = useTranslationRef(qetaTranslationRef);\n\n const {\n value: response,\n loading,\n error,\n } = useQetaApi(\n api =>\n api.getUsers({\n limit: entitiesPerPage,\n offset: (page - 1) * entitiesPerPage,\n ...filters,\n }),\n [entitiesPerPage, page, filters],\n );\n\n useDebounce(\n () => {\n if (filters.searchQuery !== searchQuery) {\n setFilters({ ...filters, searchQuery: searchQuery });\n }\n },\n 400,\n [searchQuery],\n );\n\n useEffect(() => {\n if (response) {\n setPageCount(Math.ceil(response.total / entitiesPerPage));\n }\n }, [response, entitiesPerPage]);\n\n return (\n <>\n <~~Grid container className=\"qetaUsersContainer~~\~~">\~~n ~~<Grid~~ ~~item~~ ~~xs=~~{12} ~~md={4~~}~~>\n <SearchBar~~\n ~~onSearch~~={~~setSearchQuery}\n label={~~t('usersPage.search.label')}\n loading={loading}\n ~~/>\n~~ ~~</Grid>\~~n ~~</Grid>\~~n <Grid container~~>\n {response~~ ~~&& (\n <Grid item xs={12}>\n <Typography variant~~=\"h6\" ~~className=\"qetaUsersContainerTitle\"~~>\n ~~{t('usersPage.users', { count: response.total })}\n </Typography>\n </Grid>\n~~ ~~)}\n~~ <UsersGridContent response={response} loading={loading} error={error} />\n {response && response?.total > 0 && (\n <QetaPagination\n pageSize={entitiesPerPage}\n handlePageChange={(_e, p) => setPage(p)}\n handlePageSizeChange={e =>\n setEntitiesPerPage(Number(e.target.value))\n }\n page={page}\n pageCount={pageCount}\n />\n )}\n </Grid>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAClC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,CAAC,CAAA;AAC5C,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,EAAE,CAAA;AACzD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAwB,CAAA;AAAA,IACpD,KAAO,EAAA,MAAA;AAAA,IACP,WAAa,EAAA;AAAA,GACd,CAAA;AACD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACE,GAAA,UAAA;AAAA,IACF,CAAA,GAAA,KACE,IAAI,QAAS,CAAA;AAAA,MACX,KAAO,EAAA,eAAA;AAAA,MACP,MAAA,EAAA,CAAS,OAAO,CAAK,IAAA,eAAA;AAAA,MACrB,GAAG;AAAA,KACJ,CAAA;AAAA,IACH,CAAC,eAAiB,EAAA,IAAA,EAAM,OAAO;AAAA,GACjC;AAEA,EAAA,WAAA;AAAA,IACE,MAAM;AACJ,MAAI,IAAA,OAAA,CAAQ,gBAAgB,WAAa,EAAA;AACvC,QAAA,UAAA,CAAW,EAAE,GAAG,OAAS,EAAA,WAAA,EAA0B,CAAA;AAAA;AACrD,KACF;AAAA,IACA,GAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,YAAA,CAAa,IAAK,CAAA,IAAA,CAAK,QAAS,CAAA,KAAA,GAAQ,eAAe,CAAC,CAAA;AAAA;AAC1D,GACC,EAAA,CAAC,QAAU,EAAA,eAAe,CAAC,CAAA;AAE9B,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,~~CAAC~~,~~IAAK~~,~~EAAA~~,~~EAAA~~,~~SAAA~~,~~EAAS~~,~~IAAC~~,~~EAAA~~,~~SAAA~~,~~EAAU~~,~~oBACxB~~,~~EAAA~~,~~QAAA~~,~~kBAAA,GAAA,CAAC,IAAK,~~EAAA,~~EAAA~~,~~IAAA~~,~~EAAI~~,~~IAAC~~,~~EAAA~~,~~EAAA~~,~~EAAI,EAAI,~~EAAA,~~EAAA~~,~~EAAI~~,~~CACrB~~,~~EAAA~~,~~QAAA~~,~~kBAAA,GAAA~~;AAAA,~~MAAC~~,~~SAAA~~;AAAA,~~MAAA;AAAA~~,~~QACC,~~QAAU,EAAA~~,cAAA~~;AAAA~~,QACV,KAAA,EAAO,EAAE,wBAAwB,CAAA~~;AAAA,~~QACjC~~;AAAA~~;AAAA~~,~~OAEJ~~,~~CACF~~,~~EAAA,~~CAAA~~;AAAA~~,~~oBACA,~~IAAA,~~CAAC,IAAK,~~EAAA,~~EAAA~~,~~SAAA~~,~~EAAS,IACZ,~~EAAA,~~QAAA,EAAA;AAAA,MACC,QAAA,oBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,~~IAAA,EAAC,~~IAAI~~,~~EACb~~,EAAA,QAAA,~~kBAAA,GAAA,CAAC,cAAW,OAAQ,~~EAAA~~,IAAA,EAAK,WAAU,yBAChC,EAAA,QAAA,EAAA,CAAA,CAAE,mBAAmB,EAAE,KAAA,EAAO,SAAS,KAAM,EAAC,GACjD,CACF,EAAA,CAAA~~;AAAA,~~sBAED~~,GAAA,CAAA,gBAAA,EAAA,EAAiB,QAAoB,EAAA,OAAA,EAAkB,KAAc,EAAA,CAAA;AAAA,MACrE,QAAA,IAAY,QAAU,EAAA,KAAA,GAAQ,CAC7B,oBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,QAAU,EAAA,eAAA;AAAA,UACV,gBAAkB,EAAA,CAAC,EAAI,EAAA,CAAA,KAAM,QAAQ,CAAC,CAAA;AAAA,UACtC,sBAAsB,CACpB,CAAA,KAAA,kBAAA,CAAmB,OAAO,CAAE,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,UAE3C,IAAA;AAAA,UACA;AAAA;AAAA;AACF,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"UsersGrid.esm.js","sources":["../../../src/components/UsersGrid/UsersGrid.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useQetaApi } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { UsersGridContent } from './UsersGridContent';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaGridHeader } from '../Utility/QetaGridHeader';\nimport { Grid } from '@material-ui/core';\n\ntype EntityFilters = {\n order: 'asc' \| 'desc';\n orderBy?: 'userRef';\n searchQuery: string;\n};\n\nexport const UsersGrid = () => {\n const [page, setPage] = useState(1);\n const [pageCount, setPageCount] = useState(1);\n const [entitiesPerPage, setEntitiesPerPage] = useState(25);\n const [searchQuery, setSearchQuery] = useState('');\n const [filters, setFilters] = useState<EntityFilters>({\n order: 'desc',\n searchQuery: '',\n });\n const { t } = useTranslationRef(qetaTranslationRef);\n\n const {\n value: response,\n loading,\n error,\n } = useQetaApi(\n api =>\n api.getUsers({\n limit: entitiesPerPage,\n offset: (page - 1) * entitiesPerPage,\n ...filters,\n }),\n [entitiesPerPage, page, filters],\n );\n\n useDebounce(\n () => {\n if (filters.searchQuery !== searchQuery) {\n setFilters({ ...filters, searchQuery: searchQuery });\n }\n },\n 400,\n [searchQuery],\n );\n\n useEffect(() => {\n if (response) {\n setPageCount(Math.ceil(response.total / entitiesPerPage));\n }\n }, [response, entitiesPerPage]);\n\n return (\n <>\n <QetaGridHeader\n title={response ? t('usersPage.users', { count: response.total }) : ''}\n searchBarLabel={t('usersPage.search.label')}\n loading={loading}\n onSearch={setSearchQuery}\n />\n <Grid container justifyContent=\"center\">\n <UsersGridContent response={response} loading={loading} error={error} />\n {response && response?.total > 0 && (\n <QetaPagination\n pageSize={entitiesPerPage}\n handlePageChange={(_e, p) => setPage(p)}\n handlePageSizeChange={e =>\n setEntitiesPerPage(Number(e.target.value))\n }\n page={page}\n pageCount={pageCount}\n />\n )}\n </Grid>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAClC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,CAAC,CAAA;AAC5C,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,EAAE,CAAA;AACzD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAwB,CAAA;AAAA,IACpD,KAAO,EAAA,MAAA;AAAA,IACP,WAAa,EAAA;AAAA,GACd,CAAA;AACD,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACE,GAAA,UAAA;AAAA,IACF,CAAA,GAAA,KACE,IAAI,QAAS,CAAA;AAAA,MACX,KAAO,EAAA,eAAA;AAAA,MACP,MAAA,EAAA,CAAS,OAAO,CAAK,IAAA,eAAA;AAAA,MACrB,GAAG;AAAA,KACJ,CAAA;AAAA,IACH,CAAC,eAAiB,EAAA,IAAA,EAAM,OAAO;AAAA,GACjC;AAEA,EAAA,WAAA;AAAA,IACE,MAAM;AACJ,MAAI,IAAA,OAAA,CAAQ,gBAAgB,WAAa,EAAA;AACvC,QAAA,UAAA,CAAW,EAAE,GAAG,OAAS,EAAA,WAAA,EAA0B,CAAA;AAAA;AACrD,KACF;AAAA,IACA,GAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,YAAA,CAAa,IAAK,CAAA,IAAA,CAAK,QAAS,CAAA,KAAA,GAAQ,eAAe,CAAC,CAAA;AAAA;AAC1D,GACC,EAAA,CAAC,QAAU,EAAA,eAAe,CAAC,CAAA;AAE9B,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,WAAW,CAAE,CAAA,iBAAA,EAAmB,EAAE,KAAO,EAAA,QAAA,CAAS,KAAM,EAAC,CAAI,GAAA,EAAA;AAAA,QACpE,cAAA,EAAgB,EAAE,wBAAwB,CAAA;AAAA,QAC1C,OAAA;AAAA,QACA,QAAU,EAAA;AAAA;AAAA,KACZ;AAAA,oBACC,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,gBAAe,QAC7B,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,gBAAA,EAAA,EAAiB,QAAoB,EAAA,OAAA,EAAkB,KAAc,EAAA,CAAA;AAAA,MACrE,QAAA,IAAY,QAAU,EAAA,KAAA,GAAQ,CAC7B,oBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,QAAU,EAAA,eAAA;AAAA,UACV,gBAAkB,EAAA,CAAC,EAAI,EAAA,CAAA,KAAM,QAAQ,CAAC,CAAA;AAAA,UACtC,sBAAsB,CACpB,CAAA,KAAA,kBAAA,CAAmB,OAAO,CAAE,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,UAE3C,IAAA;AAAA,UACA;AAAA;AAAA;AACF,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/UsersGrid/UsersGridItem.esm.js CHANGED Viewed

@@ -13,104 +13,107 @@ 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, Card, CardActionArea, CardHeader, Avatar, CardContent, Typography, CardActions, Tooltip, Button } from '@material-ui/core';
+import { Grid, Card, CardActionArea, CardHeader, Tooltip, Avatar, CardContent, Typography, CardActions, Button } from '@material-ui/core';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import Visibility from '@material-ui/icons/Visibility';
 import { qetaTranslationRef } from '../../translation.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import useGridItemStyles from '../GridItemStyles/useGridItemStyles.esm.js';
 const UsersGridItem = (props) => {
   const { user } = props;
+  const classes = useGridItemStyles();
   const userRoute = useRouteRef(userRouteRef);
   const navigate = useNavigate();
   const { t } = useTranslationRef(qetaTranslationRef);
   const compound = parseEntityRef(user.userRef);
   const { primaryTitle, Icon } = useEntityPresentation(compound);
-  const { name, initials, user: userEntity } = useEntityAuthor(user);
+  const {
+    name,
+    initials,
+    user: userEntity,
+    secondaryTitle
+  } = useEntityAuthor(user);
   const users = useUserFollow();
   const {
     value: currentUser,
     loading: loadingUser,
     error: userError
   } = useIdentityApi((api) => api.getBackstageIdentity(), []);
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, children: /* @__PURE__ */ jsxs(
-    Card,
-    {
-      variant: "outlined",
-      style: { height: "100%", display: "flex", flexDirection: "column" },
-      children: [
-        /* @__PURE__ */ jsxs(
-          CardActionArea,
-          {
-            onClick: () => navigate(`${userRoute()}/${user.userRef}`),
-            children: [
-              /* @__PURE__ */ jsx(
-                CardHeader,
+  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, xl: 3, children: /* @__PURE__ */ jsxs(Card, { className: classes.card, variant: "outlined", children: [
+    /* @__PURE__ */ jsxs(
+      CardActionArea,
+      {
+        onClick: () => navigate(`${userRoute()}/${user.userRef}`),
+        children: [
+          /* @__PURE__ */ jsx(
+            CardHeader,
+            {
+              className: classes.cardHeader,
+              title: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, children: /* @__PURE__ */ jsx("span", { className: classes.ellipsis, children: primaryTitle }) }),
+              titleTypographyProps: { variant: "h6" },
+              avatar: Icon ? /* @__PURE__ */ jsx(
+                Avatar,
                 {
-                  title: primaryTitle,
-                  avatar: Icon ? /* @__PURE__ */ jsx(
-                    Avatar,
-                    {
-                      src: userEntity?.spec?.profile?.picture,
-                      className: "avatar",
-                      alt: name,
-                      variant: "rounded",
-                      children: initials
-                    }
-                  ) : null
+                  src: userEntity?.spec?.profile?.picture,
+                  className: "avatar",
+                  alt: name,
+                  variant: "rounded",
+                  children: initials
                 }
-              ),
-              /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
-                t("common.posts", {
-                  count: user.totalQuestions,
-                  itemType: "question"
-                }),
-                " \xB7 ",
-                t("common.answers", {
-                  count: user.totalAnswers
-                }),
-                " \xB7 ",
-                t("common.posts", {
-                  count: user.totalArticles,
-                  itemType: "article"
-                }),
-                " \xB7 ",
-                t("common.posts", {
-                  count: user.totalComments,
-                  itemType: "comment"
-                }),
-                " \xB7 ",
-                t("common.votes", {
-                  count: user.totalVotes
-                }),
-                " \xB7 ",
-                t("common.viewsShort", {
-                  count: user.totalViews
-                })
-              ] }) })
-            ]
-          }
-        ),
-        !loadingUser && !userError && currentUser?.userEntityRef !== user.userRef && /* @__PURE__ */ jsx(CardActions, { style: { marginTop: "auto" }, children: /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "center", children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Tooltip, { title: t("userButton.tooltip"), children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            variant: "outlined",
-            color: users.isFollowingUser(user.userRef) ? "secondary" : "primary",
-            onClick: () => {
-              if (users.isFollowingUser(user.userRef)) {
-                users.unfollowUser(user.userRef);
-              } else {
-                users.followUser(user.userRef);
-              }
-            },
-            startIcon: users.isFollowingUser(user.userRef) ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {}),
-            children: users.isFollowingUser(user.userRef) ? t("userButton.unfollow") : t("userButton.follow")
+              ) : null
+            }
+          ),
+          /* @__PURE__ */ jsx(CardContent, { className: classes.cardContent, children: /* @__PURE__ */ jsxs(Typography, { className: classes.stats, variant: "caption", children: [
+            t("common.posts", {
+              count: user.totalQuestions,
+              itemType: "question"
+            }),
+            " \xB7 ",
+            t("common.answersCount", {
+              count: user.totalAnswers
+            }),
+            " \xB7 ",
+            t("common.posts", {
+              count: user.totalArticles,
+              itemType: "article"
+            }),
+            " \xB7 ",
+            t("common.posts", {
+              count: user.totalComments,
+              itemType: "comment"
+            }),
+            " \xB7 ",
+            t("common.votesCount", {
+              count: user.totalVotes
+            }),
+            " \xB7 ",
+            t("common.viewsShort", {
+              count: user.totalViews
+            })
+          ] }) })
+        ]
+      }
+    ),
+    !loadingUser && !userError && currentUser?.userEntityRef !== user.userRef && /* @__PURE__ */ jsx(CardActions, { className: classes.cardActions, children: /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "center", children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Tooltip, { title: t("userButton.tooltip"), children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: classes.actionButton,
+        size: "small",
+        variant: "outlined",
+        color: users.isFollowingUser(user.userRef) ? "secondary" : "primary",
+        onClick: () => {
+          if (users.isFollowingUser(user.userRef)) {
+            users.unfollowUser(user.userRef);
+          } else {
+            users.followUser(user.userRef);
           }
-        ) }) }) }) })
-      ]
-    }
-  ) });
+        },
+        startIcon: users.isFollowingUser(user.userRef) ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {}),
+        children: users.isFollowingUser(user.userRef) ? t("userButton.unfollow") : t("userButton.follow")
+      }
+    ) }) }) }) })
+  ] }) });
 };
 export { UsersGridItem };

package/dist/components/UsersGrid/UsersGridItem.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UsersGridItem.esm.js","sources":["../../../src/components/UsersGrid/UsersGridItem.tsx"],"sourcesContent":["import { UserResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { userRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useIdentityApi, useUserFollow } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport {\n Avatar,\n Button,\n Card,\n CardActionArea,\n CardActions,\n CardContent,\n CardHeader,\n Grid,\n Tooltip,\n Typography,\n} from '@material-ui/core';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const UsersGridItem = (props: { user: UserResponse }) => {\n const { user } = props;\n const userRoute = useRouteRef(userRouteRef);\n const navigate = useNavigate();\n const { t } = useTranslationRef(qetaTranslationRef);\n const compound = parseEntityRef(user.userRef);\n const { primaryTitle, Icon } = useEntityPresentation(compound);\n const { name, initials, user: userEntity } = useEntityAuthor(user);\n const users = useUserFollow();\n const {\n value: currentUser,\n loading: loadingUser,\n error: userError,\n } = useIdentityApi(api => api.getBackstageIdentity(), []);\n\n return (\n <Grid item xs={4}>\n <Card\n variant=\"outlined\"~~\n style={{ height: '100%', display: 'flex', flexDirection: 'column' }}\n~~ >\n <CardActionArea\n onClick={() => navigate(`${userRoute()}/${user.userRef}`)}\n >\n <CardHeader\n title={primaryTitle}\n avatar={\n Icon ? (\n <Avatar\n src={userEntity?.spec?.profile?.picture}\n className=\"avatar\"\n alt={name}\n variant=\"rounded\"\n >\n {initials}\n </Avatar>\n ) : null\n }\n />\n <CardContent>\n <Typography variant=\"caption\">\n {t('common.posts', {\n count: user.totalQuestions,\n itemType: 'question',\n })}\n {' · '}\n {t('common.~~answers~~', {\n count: user.totalAnswers,\n })}\n {' · '}\n {t('common.posts', {\n count: user.totalArticles,\n itemType: 'article',\n })}\n {' · '}\n {t('common.posts', {\n count: user.totalComments,\n itemType: 'comment',\n })}\n {' · '}\n {t('common.~~votes~~', {\n count: user.totalVotes,\n })}\n {' · '}\n {t('common.viewsShort', {\n count: user.totalViews,\n })}\n </Typography>\n </CardContent>\n </CardActionArea>\n {!loadingUser &&\n !userError &&\n currentUser?.userEntityRef !== user.userRef && (\n <CardActions ~~style~~={~~{ marginTop: 'auto'~~ }}>\n <Grid container justifyContent=\"center\">\n <Grid item>\n <Tooltip title={t('userButton.tooltip')}>\n <Button\n size=\"small\"\n variant=\"outlined\"\n color={\n users.isFollowingUser(user.userRef)\n ? 'secondary'\n : 'primary'\n }\n onClick={() => {\n if (users.isFollowingUser(user.userRef)) {\n users.unfollowUser(user.userRef);\n } else {\n users.followUser(user.userRef);\n }\n }}\n startIcon={\n users.isFollowingUser(user.userRef) ? (\n <VisibilityOff />\n ) : (\n <Visibility />\n )\n }\n >\n {users.isFollowingUser(user.userRef)\n ? t('userButton.unfollow')\n : t('userButton.follow')}\n </Button>\n </Tooltip>\n </Grid>\n </Grid>\n </CardActions>\n )}\n </Card>\n </Grid>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;AAyBa~~,MAAA,aAAA,GAAgB,CAAC,KAAkC,KAAA;AAC9D,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA;AACjB,EAAM,MAAA,SAAA,GAAY,YAAY,YAAY,CAAA;AAC1C,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAM,MAAA,QAAA,GAAW,cAAe,CAAA,IAAA,CAAK,OAAO,CAAA;AAC5C,EAAA,MAAM,EAAE,YAAA,EAAc,IAAK,EAAA,GAAI,sBAAsB,QAAQ,CAAA;AAC7D,~~EAAA~~,~~MAAM~~,~~EAAE~~,~~IAAM~~,~~EAAA~~,QAAA,~~EAAU~~,~~MAAM~~,~~UAAW,~~EAAA,GAAI,gBAAgB,IAAI,CAAA;~~AACjE~~,EAAA,MAAM,QAAQ,aAAc,EAAA;AAC5B,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,WAAA;AAAA,IACP,OAAS,EAAA,WAAA;AAAA,IACT,KAAO,EAAA;AAAA,MACL,cAAe,CAAA,CAAA,GAAA,KAAO,IAAI,oBAAqB,EAAA,EAAG,EAAE,CAAA;AAExD,EAAA,~~uBACG~~,~~GAAA~~,~~CAAA~~,IAAA,~~EAAA~~,~~EAAK~~,~~IAAI~~,EAAA,~~IAAA~~,~~EAAC~~,IAAI,~~CACb~~,EAAA,~~QAAA~~,~~kBAAA~~,~~IAAA;AAAA~~,~~IAAC~~,~~IAAA;AAAA~~,~~IAAA;AAAA~~,~~MACC~~,~~OAAQ~~,~~EAAA~~,~~UAAA;AAAA~~,~~MACR~~,~~OAAO~~,~~EAAE~~,~~MAAA~~,~~EAAQ~~,~~QAAQ~~,~~OAAS~~,~~EAAA~~,~~MAAA~~,~~EAAQ~~,~~eAAe~~,~~QAAS,~~EAAA~~;AAAA~~,~~MAElE,~~QAAA,EAAA;AAAA,~~wBAAA~~,IAAA;AAAA,~~UAAC~~,cAAA;AAAA,~~UAAA~~;AAAA,~~YACC~~,OAAA,EAAS,MAAM,QAAS,CAAA,CAAA,EAAG,WAAW,CAAA,CAAA,EAAI,IAAK,CAAA,OAAO,CAAE,CAAA,CAAA;AAAA,~~YAExD~~,QAAA,EAAA;AAAA,~~8BAAA~~,GAAA;AAAA,~~gBAAC~~,UAAA;AAAA,~~gBAAA~~;AAAA,~~kBACC~~,~~KAAO~~,EAAA,~~YAAA~~;AAAA,~~kBACP~~,QACE,IACE,mBAAA,GAAA;AAAA,~~oBAAC~~,MAAA;AAAA,~~oBAAA~~;AAAA,~~sBACC~~,GAAA,EAAK,UAAY,EAAA,IAAA,EAAM,OAAS,EAAA,OAAA;AAAA,~~sBAChC~~,SAAU,EAAA,QAAA;AAAA,~~sBACV~~,GAAK,EAAA,IAAA;AAAA,~~sBACL~~,OAAQ,EAAA,SAAA;AAAA,~~sBAEP~~,QAAA,EAAA;AAAA;AAAA,~~mBAED~~,GAAA;AAAA;AAAA,~~eAER~~;AAAA,~~8BACC~~,GAAA,CAAA,WAAA,~~EAAA~~,~~EACC,~~QAAC,kBAAA,IAAA,CAAA,UAAA,EAAA,EAAW,~~SAAQ~~,~~SACjB~~,EAAA,QAAA,EAAA;AAAA,~~gBAAA~~,CAAA,CAAE,cAAgB,EAAA;AAAA,~~kBACjB~~,OAAO,IAAK,CAAA,cAAA;AAAA,~~kBACZ~~,QAAU,EAAA;AAAA,~~iBACX~~,CAAA;AAAA,~~gBACA~~,QAAA;AAAA,~~gBACA~~,EAAE,~~gBAAkB~~,EAAA;AAAA,~~kBACnB~~,OAAO,IAAK,CAAA;AAAA,~~iBACb~~,CAAA;AAAA,~~gBACA~~,QAAA;AAAA,~~gBACA~~,EAAE,cAAgB,EAAA;AAAA,~~kBACjB~~,OAAO,IAAK,CAAA,aAAA;AAAA,~~kBACZ~~,QAAU,EAAA;AAAA,~~iBACX~~,CAAA;AAAA,~~gBACA~~,QAAA;AAAA,~~gBACA~~,EAAE,cAAgB,EAAA;AAAA,~~kBACjB~~,OAAO,IAAK,CAAA,aAAA;AAAA,~~kBACZ~~,QAAU,EAAA;AAAA,~~iBACX~~,CAAA;AAAA,~~gBACA~~,QAAA;AAAA,~~gBACA~~,EAAE,~~cAAgB~~,EAAA;AAAA,~~kBACjB~~,OAAO,IAAK,CAAA;AAAA,~~iBACb~~,CAAA;AAAA,~~gBACA~~,QAAA;AAAA,~~gBACA~~,EAAE,mBAAqB,EAAA;AAAA,~~kBACtB~~,OAAO,IAAK,CAAA;AAAA,~~iBACb~~;AAAA,~~eAAA~~,EACH,CACF,EAAA;AAAA;AAAA;AAAA,~~SACF~~;AAAA,~~QACC~~,CAAC,WAAA,IACA,CAAC,SAAA,IACD,WAAa,EAAA,aAAA,KAAkB,IAAK,CAAA,OAAA,oBACjC,GAAA,CAAA,WAAA,EAAA,EAAY,~~KAAO~~,EAAA,~~EAAE~~,~~WAAW~~,~~MAAO~~,EAAA,~~EACtC~~,~~QAAC,~~kBAAA,GAAA,~~CAAA~~,~~IAAA~~,EAAA,~~EAAK~~,~~SAAS~~,EAAA,~~IAAA~~,~~EAAC~~,~~cAAe~~,EAAA,QAAA,~~EAC7B,QAAC,~~kBAAA,GAAA,~~CAAA~~,~~IAAA~~,EAAA,~~EAAK,IAAI,~~EAAA,IAAA,~~EACR~~,~~QAAC~~,kBAAA,GAAA,~~CAAA~~,~~OAAA~~,EAAA,~~EAAQ~~,~~KAAO~~,~~EAAA~~,CAAA,~~CAAE,~~oBAAoB,CACpC,EAAA,QAAA,kBAAA,GAAA;AAAA,~~UAAC~~,MAAA;AAAA,~~UAAA~~;AAAA,~~YACC~~,IAAK,EAAA,OAAA;AAAA,~~YACL~~,OAAQ,EAAA,UAAA;AAAA,~~YACR~~,OACE,KAAM,CAAA,eAAA,CAAgB,IAAK,CAAA,OAAO,IAC9B,WACA,GAAA,SAAA;AAAA,~~YAEN~~,SAAS,MAAM;AACb,~~cAAA~~,IAAI,KAAM,CAAA,eAAA,CAAgB,IAAK,CAAA,OAAO,CAAG,EAAA;AACvC,~~gBAAM~~,KAAA,CAAA,YAAA,CAAa,KAAK,OAAO,CAAA;AAAA,~~eAC1B~~,MAAA;AACL,~~gBAAM~~,KAAA,CAAA,UAAA,CAAW,KAAK,OAAO,CAAA;AAAA;AAC/B,~~aACF~~;AAAA,~~YACA~~,SAAA,EACE,KAAM,CAAA,eAAA,CAAgB,IAAK,CAAA,OAAO,oBAC/B,GAAA,CAAA,aAAA,EAAA,EAAc,CAEf,mBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,CAAA;AAAA,~~YAIf~~,QAAA,EAAA,KAAA,CAAM,gBAAgB,IAAK,CAAA,OAAO,IAC/B,CAAE,CAAA,qBAAqB,CACvB,GAAA,CAAA,CAAE,mBAAmB;AAAA;AAAA,~~SAC3B~~,EACF,CACF,EAAA,CAAA,EACF,CACF,EAAA;AAAA~~;AAAA;AAAA~~,~~GAGR~~,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"UsersGridItem.esm.js","sources":["../../../src/components/UsersGrid/UsersGridItem.tsx"],"sourcesContent":["import { UserResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { userRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useIdentityApi, useUserFollow } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport {\n Avatar,\n Button,\n Card,\n CardActionArea,\n CardActions,\n CardContent,\n CardHeader,\n Grid,\n Tooltip,\n Typography,\n} from '@material-ui/core';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\n\nexport const UsersGridItem = (props: { user: UserResponse }) => {\n const { user } = props;\n const classes = useGridItemStyles();\n const userRoute = useRouteRef(userRouteRef);\n const navigate = useNavigate();\n const { t } = useTranslationRef(qetaTranslationRef);\n const compound = parseEntityRef(user.userRef);\n const { primaryTitle, Icon } = useEntityPresentation(compound);\n const {\n name,\n initials,\n user: userEntity,\n secondaryTitle,\n } = useEntityAuthor(user);\n const users = useUserFollow();\n const {\n value: currentUser,\n loading: loadingUser,\n error: userError,\n } = useIdentityApi(api => api.getBackstageIdentity(), []);\n\n return (\n <Grid item xs={12} sm={6} md={4} xl={3}>\n <Card className={classes.card} variant=\"outlined\">\n <CardActionArea\n onClick={() => navigate(`${userRoute()}/${user.userRef}`)}\n >\n <CardHeader\n className={classes.cardHeader}\n title={\n <Tooltip title={secondaryTitle ?? ''} arrow>\n <span className={classes.ellipsis}>{primaryTitle}</span>\n </Tooltip>\n }\n titleTypographyProps={{ variant: 'h6' }}\n avatar={\n Icon ? (\n <Avatar\n src={userEntity?.spec?.profile?.picture}\n className=\"avatar\"\n alt={name}\n variant=\"rounded\"\n >\n {initials}\n </Avatar>\n ) : null\n }\n />\n <CardContent className={classes.cardContent}>\n <Typography className={classes.stats} variant=\"caption\">\n {t('common.posts', {\n count: user.totalQuestions,\n itemType: 'question',\n })}\n {' · '}\n {t('common.answersCount', {\n count: user.totalAnswers,\n })}\n {' · '}\n {t('common.posts', {\n count: user.totalArticles,\n itemType: 'article',\n })}\n {' · '}\n {t('common.posts', {\n count: user.totalComments,\n itemType: 'comment',\n })}\n {' · '}\n {t('common.votesCount', {\n count: user.totalVotes,\n })}\n {' · '}\n {t('common.viewsShort', {\n count: user.totalViews,\n })}\n </Typography>\n </CardContent>\n </CardActionArea>\n {!loadingUser &&\n !userError &&\n currentUser?.userEntityRef !== user.userRef && (\n <CardActions className={classes.cardActions}>\n <Grid container justifyContent=\"center\">\n <Grid item>\n <Tooltip title={t('userButton.tooltip')}>\n <Button\n className={classes.actionButton}\n size=\"small\"\n variant=\"outlined\"\n color={\n users.isFollowingUser(user.userRef)\n ? 'secondary'\n : 'primary'\n }\n onClick={() => {\n if (users.isFollowingUser(user.userRef)) {\n users.unfollowUser(user.userRef);\n } else {\n users.followUser(user.userRef);\n }\n }}\n startIcon={\n users.isFollowingUser(user.userRef) ? (\n <VisibilityOff />\n ) : (\n <Visibility />\n )\n }\n >\n {users.isFollowingUser(user.userRef)\n ? t('userButton.unfollow')\n : t('userButton.follow')}\n </Button>\n </Tooltip>\n </Grid>\n </Grid>\n </CardActions>\n )}\n </Card>\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Grid, Typography } from '@material-ui/core';
+import { SearchBar } from '../SearchBar/SearchBar.esm.js';
+const QetaGridHeader = ({
+  title,
+  searchBarLabel,
+  loading,
+  onSearch,
+  buttons
+}) => {
+  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__ */ jsx(Grid, { item: true, children: !loading && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "h6",
+          style: { fontWeight: 500, paddingBottom: 2 },
+          children: title
+        }
+      ) }),
+      buttons && /* @__PURE__ */ jsx(Grid, { item: true, children: buttons })
+    ] }) })
+  ] });
+};
+export { QetaGridHeader };
+//# sourceMappingURL=QetaGridHeader.esm.js.map