@drodil/backstage-plugin-qeta-react 3.15.1 → 3.15.3

package/dist/components/AnswersContainer/AnswerListItem.esm.js

@@ -92,7 +92,13 @@ const AnswerListItem = (props) => {
           },
           initials
         ),
-        /* @__PURE__ */ React__default.createElement(UserLink, { entityRef: answer.author }),
+        /* @__PURE__ */ React__default.createElement(
+          UserLink,
+          {
+            entityRef: answer.author,
+            anonymous: answer.anonymous
+          }
+        ),
         " ",
         /* @__PURE__ */ React__default.createElement(Link, { to: getAnswerLink(), className: styles.timestamp }, `${t("answer.answeredTime")} `, /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: answer.created }))
       ))))

package/dist/components/AnswersContainer/AnswerListItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnswerListItem.esm.js","sources":["../../../src/components/AnswersContainer/AnswerListItem.tsx"],"sourcesContent":["import { Link } from '@backstage/core-components';\nimport React from 'react';\nimport DOMPurify from 'dompurify';\nimport {\n  AnswerResponse,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { questionRouteRef } from '../../routes';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { VoteButtonContainer } from '../Utility/VoteButtonContainer';\nimport { Grid, makeStyles, Typography } from '@material-ui/core';\nimport { SmallAvatar } from '../Utility/SmallAvatar';\nimport { UserLink } from '../Links';\n\nconst useStyles = makeStyles(() => ({\n  author: {\n    float: 'right',\n    alignItems: 'center',\n    display: 'flex',\n  },\n  timestamp: {\n    marginLeft: '0.3em',\n  },\n}));\n\nexport interface AnswerListItemProps {\n  answer: AnswerResponse;\n  entity?: string;\n}\n\nexport const AnswerListItem = (props: AnswerListItemProps) => {\n  const { answer, entity } = props;\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const { name, initials, user } = useEntityAuthor(answer);\n  const { t } = useTranslation();\n  const styles = useStyles();\n\n  const getAnswerLink = () => {\n    return entity\n      ? `${questionRoute({\n          id: answer.postId.toString(10),\n        })}?entity=${entity}#answer_${answer.id}`\n      : `${questionRoute({\n          id: answer.postId.toString(10),\n        })}/#answer_${answer.id}`;\n  };\n\n  return (\n    <Grid\n      container\n      spacing={2}\n      justifyContent=\"flex-start\"\n      style={{ padding: '0.7em', paddingBottom: '1.0em' }}\n    >\n      <Grid item style={{ paddingTop: '0px' }}>\n        <VoteButtonContainer>\n          <VoteButtons entity={answer} />\n        </VoteButtonContainer>\n      </Grid>\n      <Grid\n        item\n        style={{ display: 'inline-block', width: 'calc(100% - 80px)' }}\n      >\n        <Grid container>\n          <Grid item xs={12} style={{ paddingTop: '0px' }}>\n            <Typography variant=\"h5\" component=\"div\">\n              <Link\n                to={getAnswerLink()}\n                className=\"qetaAnswerListItemQuestionBtn\"\n              >\n                {t('answer.questionTitle', {\n                  question: answer.post?.title ?? '',\n                })}\n              </Link>\n            </Typography>\n            <Typography\n              variant=\"caption\"\n              noWrap\n              component=\"div\"\n              className=\"qetaAnswerListItemContent\"\n              style={{ marginBottom: '5px' }}\n            >\n              {DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(answer.content), 150),\n              )}\n            </Typography>\n            <Grid item xs={12} style={{ marginTop: '1em' }}>\n              {answer.post && <TagsAndEntities entity={answer.post} />}\n              <Typography\n                variant=\"caption\"\n                display=\"inline\"\n                className={styles.author}\n              >\n                <SmallAvatar\n                  src={user?.spec?.profile?.picture}\n                  alt={name}\n                  variant=\"rounded\"\n                >\n                  {initials}\n                </SmallAvatar>\n                <UserLink entityRef={answer.author} />{' '}\n                <Link to={getAnswerLink()} className={styles.timestamp}>\n                  {`${t('answer.answeredTime')} `}\n                  <RelativeTimeWithTooltip value={answer.created} />\n                </Link>\n              </Typography>\n            </Grid>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"AnswerListItem.esm.js","sources":["../../../src/components/AnswersContainer/AnswerListItem.tsx"],"sourcesContent":["import { Link } from '@backstage/core-components';\nimport React from 'react';\nimport DOMPurify from 'dompurify';\nimport {\n  AnswerResponse,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { questionRouteRef } from '../../routes';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { VoteButtonContainer } from '../Utility/VoteButtonContainer';\nimport { Grid, makeStyles, Typography } from '@material-ui/core';\nimport { SmallAvatar } from '../Utility/SmallAvatar';\nimport { UserLink } from '../Links';\n\nconst useStyles = makeStyles(() => ({\n  author: {\n    float: 'right',\n    alignItems: 'center',\n    display: 'flex',\n  },\n  timestamp: {\n    marginLeft: '0.3em',\n  },\n}));\n\nexport interface AnswerListItemProps {\n  answer: AnswerResponse;\n  entity?: string;\n}\n\nexport const AnswerListItem = (props: AnswerListItemProps) => {\n  const { answer, entity } = props;\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const { name, initials, user } = useEntityAuthor(answer);\n  const { t } = useTranslation();\n  const styles = useStyles();\n\n  const getAnswerLink = () => {\n    return entity\n      ? `${questionRoute({\n          id: answer.postId.toString(10),\n        })}?entity=${entity}#answer_${answer.id}`\n      : `${questionRoute({\n          id: answer.postId.toString(10),\n        })}/#answer_${answer.id}`;\n  };\n\n  return (\n    <Grid\n      container\n      spacing={2}\n      justifyContent=\"flex-start\"\n      style={{ padding: '0.7em', paddingBottom: '1.0em' }}\n    >\n      <Grid item style={{ paddingTop: '0px' }}>\n        <VoteButtonContainer>\n          <VoteButtons entity={answer} />\n        </VoteButtonContainer>\n      </Grid>\n      <Grid\n        item\n        style={{ display: 'inline-block', width: 'calc(100% - 80px)' }}\n      >\n        <Grid container>\n          <Grid item xs={12} style={{ paddingTop: '0px' }}>\n            <Typography variant=\"h5\" component=\"div\">\n              <Link\n                to={getAnswerLink()}\n                className=\"qetaAnswerListItemQuestionBtn\"\n              >\n                {t('answer.questionTitle', {\n                  question: answer.post?.title ?? '',\n                })}\n              </Link>\n            </Typography>\n            <Typography\n              variant=\"caption\"\n              noWrap\n              component=\"div\"\n              className=\"qetaAnswerListItemContent\"\n              style={{ marginBottom: '5px' }}\n            >\n              {DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(answer.content), 150),\n              )}\n            </Typography>\n            <Grid item xs={12} style={{ marginTop: '1em' }}>\n              {answer.post && <TagsAndEntities entity={answer.post} />}\n              <Typography\n                variant=\"caption\"\n                display=\"inline\"\n                className={styles.author}\n              >\n                <SmallAvatar\n                  src={user?.spec?.profile?.picture}\n                  alt={name}\n                  variant=\"rounded\"\n                >\n                  {initials}\n                </SmallAvatar>\n                <UserLink\n                  entityRef={answer.author}\n                  anonymous={answer.anonymous}\n                />{' '}\n                <Link to={getAnswerLink()} className={styles.timestamp}>\n                  {`${t('answer.answeredTime')} `}\n                  <RelativeTimeWithTooltip value={answer.created} />\n                </Link>\n              </Typography>\n            </Grid>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/CollectionsGrid/CollectionsGrid.esm.js

@@ -1,5 +1,5 @@
 import React__default, { useEffect } from 'react';
-import { Box, Grid, TextField, IconButton, Typography, Button, Collapse } from '@material-ui/core';
+import { Box, Grid, Typography, Button, Collapse } from '@material-ui/core';
 import { CollectionsGridContent } from './CollectionsGridContent.esm.js';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import '@backstage/core-plugin-api';
@@ -14,6 +14,7 @@ import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
 import { FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
 import FilterList from '@material-ui/icons/FilterList';
 import { getFiltersWithDateRange } from '../../utils/utils.esm.js';
+import { SearchBar } from '../SearchBar/SearchBar.esm.js';
 
 const EXPANDED_LOCAL_STORAGE_KEY = "qeta-collection-filters-expanded";
 const CollectionsGrid = (props) => {
@@ -78,17 +79,12 @@ const CollectionsGrid = (props) => {
     });
   };
   return /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Grid, { container: true, justifyContent: "space-between" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12, md: 4 }, /* @__PURE__ */ React__default.createElement(
-    TextField,
+    SearchBar,
     {
-      id: "search-bar",
-      className: "text qetaUsersContainerSearchInput",
-      onChange: (event) => setSearchQuery(event.target.value),
-      label: t("collectionsPage.search.label"),
-      variant: "outlined",
-      placeholder: t("collectionsPage.search.placeholder"),
-      size: "small"
+      onSearch: setSearchQuery,
+      label: t("collectionsPage.search.label")
     }
-  ), /* @__PURE__ */ React__default.createElement(IconButton, { type: "submit", "aria-label": "search" }))), /* @__PURE__ */ React__default.createElement(Grid, { container: true, justifyContent: "space-between" }, response && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h6", className: "qetaCollectionsContainerdCount" }, t("common.collections", { count: response?.total ?? 0 }))), response && (showFilters ?? true) && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
+  ))), /* @__PURE__ */ React__default.createElement(Grid, { container: true, justifyContent: "space-between" }, response && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h6", className: "qetaCollectionsContainerdCount" }, t("common.collections", { count: response?.total ?? 0 }))), response && (showFilters ?? true) && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
     Button,
     {
       onClick: () => {

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionsGrid.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGrid.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport {\n  Box,\n  Button,\n  Collapse,\n  Grid,\n  IconButton,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport { CollectionsGridContent } from './CollectionsGridContent';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport {\n  CollectionFilters,\n  CommonFilterPanelProps,\n  FilterPanel,\n} from '../FilterPanel/FilterPanel';\nimport FilterList from '@material-ui/icons/FilterList';\nimport { getFiltersWithDateRange } from '../../utils';\n\nexport type CollectionsGridProps = {\n  owner?: string;\n  showFilters?: boolean;\n  filterPanelProps?: CommonFilterPanelProps;\n};\n\nexport type CollectionFilterChange = {\n  key: keyof CollectionFilters;\n  value?: CollectionFilters[keyof CollectionFilters];\n};\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-collection-filters-expanded';\n\nexport const CollectionsGrid = (props: CollectionsGridProps) => {\n  const { showFilters, owner } = props;\n  const { t } = useTranslation();\n  const [page, setPage] = React.useState(1);\n  const [pageCount, setPageCount] = React.useState(1);\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const [collectionsPerPage, setCollectionsPerPage] = React.useState(25);\n  const [showFilterPanel, setShowFilterPanel] = React.useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [filters, setFilters] = React.useState<CollectionFilters>({\n    order: 'desc',\n    searchQuery: '',\n    orderBy: 'created',\n  });\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api => {\n      return api.getCollections({\n        limit: collectionsPerPage,\n        offset: (page - 1) * collectionsPerPage,\n        owner,\n        ...(getFiltersWithDateRange(filters) as any),\n      });\n    },\n    [collectionsPerPage, 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 / collectionsPerPage));\n    }\n  }, [response, collectionsPerPage]);\n\n  const onFilterChange = (\n    changes: CollectionFilterChange | CollectionFilterChange[],\n  ) => {\n    const changesArray = Array.isArray(changes) ? changes : [changes];\n    setPage(1);\n    setFilters(prev => {\n      const newValue = { ...prev };\n      for (const { key, value } of changesArray) {\n        (newValue as any)[key] = value;\n      }\n      return newValue;\n    });\n  };\n\n  return (\n    <Box>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <TextField\n            id=\"search-bar\"\n            className=\"text qetaUsersContainerSearchInput\"\n            onChange={(\n              event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n            ) => setSearchQuery(event.target.value)}\n            label={t('collectionsPage.search.label')}\n            variant=\"outlined\"\n            placeholder={t('collectionsPage.search.placeholder')}\n            size=\"small\"\n          />\n          <IconButton type=\"submit\" aria-label=\"search\" />\n        </Grid>\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        {response && (\n          <Grid item>\n            <Typography variant=\"h6\" className=\"qetaCollectionsContainerdCount\">\n              {t('common.collections', { count: response?.total ?? 0 })}\n            </Typography>\n          </Grid>\n        )}\n        {response && (showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => {\n                setShowFilterPanel(!showFilterPanel);\n              }}\n              className=\"qetaCollectionsContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel<CollectionFilters>\n            onChange={onFilterChange}\n            filters={filters}\n            {...props.filterPanelProps}\n          />\n        </Collapse>\n      )}\n      <CollectionsGridContent\n        loading={loading}\n        error={error}\n        response={response}\n      />\n      {response && response?.total > 0 && (\n        <QetaPagination\n          pageSize={collectionsPerPage}\n          handlePageChange={(_e, p) => setPage(p)}\n          handlePageSizeChange={e =>\n            setCollectionsPerPage(Number(e.target.value))\n          }\n          page={page}\n          pageCount={pageCount}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;AAiCA,MAAM,0BAA6B,GAAA,kCAAA;AAEtB,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,WAAa,EAAA,KAAA,EAAU,GAAA,KAAA;AAC/B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAAA,cAAA,CAAM,SAAS,CAAC,CAAA;AACxC,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAAA,cAAA,CAAM,SAAS,CAAC,CAAA;AAClD,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAAM,SAAS,EAAE,CAAA;AACvD,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,CAAI,GAAAA,cAAA,CAAM,SAAS,EAAE,CAAA;AACrE,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,cAAM,CAAA,QAAA;AAAA,IAClD,YAAA,CAAa,OAAQ,CAAA,0BAA0B,CAAM,KAAA;AAAA,GACvD;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAM,QAA4B,CAAA;AAAA,IAC9D,KAAO,EAAA,MAAA;AAAA,IACP,WAAa,EAAA,EAAA;AAAA,IACb,OAAS,EAAA;AAAA,GACV,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAa,YAAA,CAAA,OAAA;AAAA,MACX,0BAAA;AAAA,MACA,kBAAkB,MAAS,GAAA;AAAA,KAC7B;AAAA,GACF,EAAG,CAAC,eAAe,CAAC,CAAA;AAEpB,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACE,GAAA,UAAA;AAAA,IACF,CAAO,GAAA,KAAA;AACL,MAAA,OAAO,IAAI,cAAe,CAAA;AAAA,QACxB,KAAO,EAAA,kBAAA;AAAA,QACP,MAAA,EAAA,CAAS,OAAO,CAAK,IAAA,kBAAA;AAAA,QACrB,KAAA;AAAA,QACA,GAAI,wBAAwB,OAAO;AAAA,OACpC,CAAA;AAAA,KACH;AAAA,IACA,CAAC,kBAAoB,EAAA,IAAA,EAAM,OAAO;AAAA,GACpC;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,kBAAkB,CAAC,CAAA;AAAA;AAC7D,GACC,EAAA,CAAC,QAAU,EAAA,kBAAkB,CAAC,CAAA;AAEjC,EAAM,MAAA,cAAA,GAAiB,CACrB,OACG,KAAA;AACH,IAAA,MAAM,eAAe,KAAM,CAAA,OAAA,CAAQ,OAAO,CAAI,GAAA,OAAA,GAAU,CAAC,OAAO,CAAA;AAChE,IAAA,OAAA,CAAQ,CAAC,CAAA;AACT,IAAA,UAAA,CAAW,CAAQ,IAAA,KAAA;AACjB,MAAM,MAAA,QAAA,GAAW,EAAE,GAAG,IAAK,EAAA;AAC3B,MAAA,KAAA,MAAW,EAAE,GAAA,EAAK,KAAM,EAAA,IAAK,YAAc,EAAA;AACzC,QAAC,QAAA,CAAiB,GAAG,CAAI,GAAA,KAAA;AAAA;AAE3B,MAAO,OAAA,QAAA;AAAA,KACR,CAAA;AAAA,GACH;AAEA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IAAC,EAAA,cAAA,EAAe,eAC7B,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAI,IAAI,CACrB,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,YAAA;AAAA,MACH,SAAU,EAAA,oCAAA;AAAA,MACV,UAAU,CACR,KAAA,KACG,cAAe,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,MACtC,KAAA,EAAO,EAAE,8BAA8B,CAAA;AAAA,MACvC,OAAQ,EAAA,UAAA;AAAA,MACR,WAAA,EAAa,EAAE,oCAAoC,CAAA;AAAA,MACnD,IAAK,EAAA;AAAA;AAAA,GACP,+CACC,UAAW,EAAA,EAAA,IAAA,EAAK,UAAS,YAAW,EAAA,QAAA,EAAS,CAChD,CACF,CAAA,+CACC,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,cAAe,EAAA,eAAA,EAAA,EAC5B,4BACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,IAAA,EAAK,WAAU,gCAChC,EAAA,EAAA,CAAA,CAAE,sBAAsB,EAAE,KAAA,EAAO,UAAU,KAAS,IAAA,CAAA,EAAG,CAC1D,CACF,GAED,QAAa,KAAA,WAAA,IAAe,yBAC1BA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAS,MAAM;AACb,QAAA,kBAAA,CAAmB,CAAC,eAAe,CAAA;AAAA,OACrC;AAAA,MACA,SAAU,EAAA,wCAAA;AAAA,MACV,SAAA,+CAAY,UAAW,EAAA,IAAA;AAAA,KAAA;AAAA,IAEtB,EAAE,0BAA0B;AAAA,GAEjC,CAEJ,CACE,EAAA,CAAA,WAAA,IAAe,yBACdA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,IAAI,eACZ,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,cAAA;AAAA,MACV,OAAA;AAAA,MACC,GAAG,KAAM,CAAA;AAAA;AAAA,GAEd,CAEF,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA;AAAA,GAED,EAAA,QAAA,IAAY,QAAU,EAAA,KAAA,GAAQ,CAC7B,oBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,kBAAA;AAAA,MACV,gBAAkB,EAAA,CAAC,EAAI,EAAA,CAAA,KAAM,QAAQ,CAAC,CAAA;AAAA,MACtC,sBAAsB,CACpB,CAAA,KAAA,qBAAA,CAAsB,OAAO,CAAE,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,MAE9C,IAAA;AAAA,MACA;AAAA;AAAA,GAGN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CollectionsGrid.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGrid.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';\nimport { CollectionsGridContent } from './CollectionsGridContent';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport {\n  CollectionFilters,\n  CommonFilterPanelProps,\n  FilterPanel,\n} from '../FilterPanel/FilterPanel';\nimport FilterList from '@material-ui/icons/FilterList';\nimport { getFiltersWithDateRange } from '../../utils';\nimport { SearchBar } from '../SearchBar/SearchBar';\n\nexport type CollectionsGridProps = {\n  owner?: string;\n  showFilters?: boolean;\n  filterPanelProps?: CommonFilterPanelProps;\n};\n\nexport type CollectionFilterChange = {\n  key: keyof CollectionFilters;\n  value?: CollectionFilters[keyof CollectionFilters];\n};\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-collection-filters-expanded';\n\nexport const CollectionsGrid = (props: CollectionsGridProps) => {\n  const { showFilters, owner } = props;\n  const { t } = useTranslation();\n  const [page, setPage] = React.useState(1);\n  const [pageCount, setPageCount] = React.useState(1);\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const [collectionsPerPage, setCollectionsPerPage] = React.useState(25);\n  const [showFilterPanel, setShowFilterPanel] = React.useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [filters, setFilters] = React.useState<CollectionFilters>({\n    order: 'desc',\n    searchQuery: '',\n    orderBy: 'created',\n  });\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api => {\n      return api.getCollections({\n        limit: collectionsPerPage,\n        offset: (page - 1) * collectionsPerPage,\n        owner,\n        ...(getFiltersWithDateRange(filters) as any),\n      });\n    },\n    [collectionsPerPage, 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 / collectionsPerPage));\n    }\n  }, [response, collectionsPerPage]);\n\n  const onFilterChange = (\n    changes: CollectionFilterChange | CollectionFilterChange[],\n  ) => {\n    const changesArray = Array.isArray(changes) ? changes : [changes];\n    setPage(1);\n    setFilters(prev => {\n      const newValue = { ...prev };\n      for (const { key, value } of changesArray) {\n        (newValue as any)[key] = value;\n      }\n      return newValue;\n    });\n  };\n\n  return (\n    <Box>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <SearchBar\n            onSearch={setSearchQuery}\n            label={t('collectionsPage.search.label')}\n          />\n        </Grid>\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        {response && (\n          <Grid item>\n            <Typography variant=\"h6\" className=\"qetaCollectionsContainerdCount\">\n              {t('common.collections', { count: response?.total ?? 0 })}\n            </Typography>\n          </Grid>\n        )}\n        {response && (showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => {\n                setShowFilterPanel(!showFilterPanel);\n              }}\n              className=\"qetaCollectionsContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel<CollectionFilters>\n            onChange={onFilterChange}\n            filters={filters}\n            {...props.filterPanelProps}\n          />\n        </Collapse>\n      )}\n      <CollectionsGridContent\n        loading={loading}\n        error={error}\n        response={response}\n      />\n      {response && response?.total > 0 && (\n        <QetaPagination\n          pageSize={collectionsPerPage}\n          handlePageChange={(_e, p) => setPage(p)}\n          handlePageSizeChange={e =>\n            setCollectionsPerPage(Number(e.target.value))\n          }\n          page={page}\n          pageCount={pageCount}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { Grid, TextField, IconButton } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import React__default, { useEffect } from 'react';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import '@backstage/core-plugin-api';
@@ -11,6 +11,7 @@ import 'react-use/lib/useAsync';
 import useDebounce from 'react-use/lib/useDebounce';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
 import { EntitiesGridContent } from './EntitiesGridContent.esm.js';
+import { SearchBar } from '../SearchBar/SearchBar.esm.js';
 
 const EntitiesGrid = () => {
   const [page, setPage] = React__default.useState(1);
@@ -52,18 +53,13 @@ const EntitiesGrid = () => {
       setPageCount(Math.ceil(response.total / entitiesPerPage));
     }
   }, [response, entitiesPerPage]);
-  return /* @__PURE__ */ React__default.createElement(Grid, { container: true, className: "qetaEntitiesContainer" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(
-    TextField,
+  return /* @__PURE__ */ React__default.createElement(Grid, { container: true, className: "qetaEntitiesContainer" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12, md: 4 }, /* @__PURE__ */ React__default.createElement(
+    SearchBar,
     {
-      id: "search-bar",
-      className: "text qetaEntitiesContainerSearchInput",
-      onChange: (event) => onSearchQueryChange(event.target.value),
-      label: t("entitiesPage.search.label"),
-      variant: "outlined",
-      placeholder: t("entitiesPage.search.placeholder"),
-      size: "small"
+      onSearch: onSearchQueryChange,
+      label: t("entitiesPage.search.label")
     }
-  ), /* @__PURE__ */ React__default.createElement(IconButton, { type: "submit", "aria-label": "search" })), /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React__default.createElement(
     EntitiesGridContent,
     {
       response,

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

@@ -1 +1 @@
-{"version":3,"file":"EntitiesGrid.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGrid.tsx"],"sourcesContent":["import { Grid, IconButton, TextField } from '@material-ui/core';\nimport React, { useEffect } from 'react';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { EntitiesGridContent } from './EntitiesGridContent';\n\ntype EntityFilters = {\n  order: 'asc' | 'desc';\n  orderBy?: 'entityRef';\n  searchQuery: string;\n};\n\nexport const EntitiesGrid = () => {\n  const [page, setPage] = React.useState(1);\n  const [pageCount, setPageCount] = React.useState(1);\n  const [entitiesPerPage, setEntitiesPerPage] = React.useState(25);\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const [filters, setFilters] = React.useState<EntityFilters>({\n    order: 'desc',\n    searchQuery: '',\n  });\n  const { t } = useTranslation();\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api =>\n      api.getEntities({\n        limit: entitiesPerPage,\n        offset: (page - 1) * entitiesPerPage,\n        ...filters,\n      }),\n    [entitiesPerPage, page, filters],\n  );\n\n  const onSearchQueryChange = (val: string) => {\n    setPage(1);\n    setSearchQuery(val);\n  };\n\n  useDebounce(\n    () => {\n      if (filters.searchQuery !== searchQuery) {\n        setFilters({ ...filters, searchQuery: searchQuery });\n      }\n    },\n    400,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    if (response) {\n      setPageCount(Math.ceil(response.total / entitiesPerPage));\n    }\n  }, [response, entitiesPerPage]);\n\n  return (\n    <Grid container className=\"qetaEntitiesContainer\">\n      <Grid item xs={12}>\n        <TextField\n          id=\"search-bar\"\n          className=\"text qetaEntitiesContainerSearchInput\"\n          onChange={(\n            event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n          ) => onSearchQueryChange(event.target.value)}\n          label={t('entitiesPage.search.label')}\n          variant=\"outlined\"\n          placeholder={t('entitiesPage.search.placeholder')}\n          size=\"small\"\n        />\n        <IconButton type=\"submit\" aria-label=\"search\" />\n      </Grid>\n      <EntitiesGridContent\n        response={response}\n        loading={loading}\n        error={error}\n      />\n      {response && response?.total > 0 && (\n        <QetaPagination\n          pageSize={entitiesPerPage}\n          handlePageChange={(_e, p) => setPage(p)}\n          handlePageSizeChange={e => setEntitiesPerPage(Number(e.target.value))}\n          page={page}\n          pageCount={pageCount}\n        />\n      )}\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"EntitiesGrid.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGrid.tsx"],"sourcesContent":["import { Grid } from '@material-ui/core';\nimport React, { useEffect } from 'react';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { EntitiesGridContent } from './EntitiesGridContent';\nimport { SearchBar } from '../SearchBar/SearchBar';\n\ntype EntityFilters = {\n  order: 'asc' | 'desc';\n  orderBy?: 'entityRef';\n  searchQuery: string;\n};\n\nexport const EntitiesGrid = () => {\n  const [page, setPage] = React.useState(1);\n  const [pageCount, setPageCount] = React.useState(1);\n  const [entitiesPerPage, setEntitiesPerPage] = React.useState(25);\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const [filters, setFilters] = React.useState<EntityFilters>({\n    order: 'desc',\n    searchQuery: '',\n  });\n  const { t } = useTranslation();\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api =>\n      api.getEntities({\n        limit: entitiesPerPage,\n        offset: (page - 1) * entitiesPerPage,\n        ...filters,\n      }),\n    [entitiesPerPage, page, filters],\n  );\n\n  const onSearchQueryChange = (val: string) => {\n    setPage(1);\n    setSearchQuery(val);\n  };\n\n  useDebounce(\n    () => {\n      if (filters.searchQuery !== searchQuery) {\n        setFilters({ ...filters, searchQuery: searchQuery });\n      }\n    },\n    400,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    if (response) {\n      setPageCount(Math.ceil(response.total / entitiesPerPage));\n    }\n  }, [response, entitiesPerPage]);\n\n  return (\n    <Grid container className=\"qetaEntitiesContainer\">\n      <Grid item xs={12} md={4}>\n        <SearchBar\n          onSearch={onSearchQueryChange}\n          label={t('entitiesPage.search.label')}\n        />\n      </Grid>\n      <EntitiesGridContent\n        response={response}\n        loading={loading}\n        error={error}\n      />\n      {response && response?.total > 0 && (\n        <QetaPagination\n          pageSize={entitiesPerPage}\n          handlePageChange={(_e, p) => setPage(p)}\n          handlePageSizeChange={e => setEntitiesPerPage(Number(e.target.value))}\n          page={page}\n          pageCount={pageCount}\n        />\n      )}\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;AAcO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAAA,cAAA,CAAM,SAAS,CAAC,CAAA;AACxC,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAAA,cAAA,CAAM,SAAS,CAAC,CAAA;AAClD,EAAA,MAAM,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAAA,cAAA,CAAM,SAAS,EAAE,CAAA;AAC/D,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAAM,SAAS,EAAE,CAAA;AACvD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAM,QAAwB,CAAA;AAAA,IAC1D,KAAO,EAAA,MAAA;AAAA,IACP,WAAa,EAAA;AAAA,GACd,CAAA;AACD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACE,GAAA,UAAA;AAAA,IACF,CAAA,GAAA,KACE,IAAI,WAAY,CAAA;AAAA,MACd,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,EAAM,MAAA,mBAAA,GAAsB,CAAC,GAAgB,KAAA;AAC3C,IAAA,OAAA,CAAQ,CAAC,CAAA;AACT,IAAA,cAAA,CAAe,GAAG,CAAA;AAAA,GACpB;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,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,SAAU,EAAA,uBAAA,EAAA,kBACvBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAI,IAAI,CACrB,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,mBAAA;AAAA,MACV,KAAA,EAAO,EAAE,2BAA2B;AAAA;AAAA,GAExC,CACA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA;AAAA,GAED,EAAA,QAAA,IAAY,QAAU,EAAA,KAAA,GAAQ,CAC7B,oBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,eAAA;AAAA,MACV,gBAAkB,EAAA,CAAC,EAAI,EAAA,CAAA,KAAM,QAAQ,CAAC,CAAA;AAAA,MACtC,sBAAsB,CAAK,CAAA,KAAA,kBAAA,CAAmB,OAAO,CAAE,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,MACpE,IAAA;AAAA,MACA;AAAA;AAAA,GAGN,CAAA;AAEJ;;;;"}

package/dist/components/HomePageCards/ImpactCard.esm.js

@@ -20,7 +20,7 @@ const ImpactCard = () => {
   if (loading || error || !response) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement(Box, { display: { md: "none", lg: "block" } }, /* @__PURE__ */ React__default.createElement(Card, null, /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, t("impactCard.title")), /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, response.impact >= 1e3 ? numeral(response.impact).format("0.0 a") : response.impact, /* @__PURE__ */ React__default.createElement(Typography, { variant: "caption", style: { marginLeft: "1em" } }, t("impactCard.views"))), /* @__PURE__ */ React__default.createElement(Typography, { variant: "body2" }, t("impactCard.contributions", {
+  return /* @__PURE__ */ React__default.createElement(Box, { display: { md: "none", lg: "block" }, style: { marginBottom: "1em" } }, /* @__PURE__ */ React__default.createElement(Card, null, /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, t("impactCard.title")), /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, response.impact >= 1e3 ? numeral(response.impact).format("0.0 a") : response.impact, /* @__PURE__ */ React__default.createElement(Typography, { variant: "caption", style: { marginLeft: "1em" } }, t("impactCard.views"))), /* @__PURE__ */ React__default.createElement(Typography, { variant: "body2" }, t("impactCard.contributions", {
     lastWeek: response.lastWeekImpact.toString(10)
   })))));
 };

package/dist/components/HomePageCards/ImpactCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImpactCard.esm.js","sources":["../../../src/components/HomePageCards/ImpactCard.tsx"],"sourcesContent":["import React from 'react';\nimport numeral from 'numeral';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport { Box, Card, CardContent, Typography } from '@material-ui/core';\n\nexport const ImpactCard = () => {\n  const { t } = useTranslation();\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(api => api.getUserImpact(), []);\n\n  if (loading || error || !response) {\n    return null;\n  }\n\n  return (\n    <Box display={{ md: 'none', lg: 'block' }}>\n      <Card>\n        <CardContent>\n          <Typography variant=\"h5\">{t('impactCard.title')}</Typography>\n          <Typography variant=\"h5\">\n            {response.impact >= 1000\n              ? numeral(response.impact).format('0.0 a')\n              : response.impact}\n            <Typography variant=\"caption\" style={{ marginLeft: '1em' }}>\n              {t('impactCard.views')}\n            </Typography>\n          </Typography>\n          <Typography variant=\"body2\">\n            {t('impactCard.contributions', {\n              lastWeek: response.lastWeekImpact.toString(10),\n            })}\n          </Typography>\n        </CardContent>\n      </Card>\n    </Box>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAKO,MAAM,aAAa,MAAM;AAC9B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,MACE,UAAW,CAAA,CAAA,GAAA,KAAO,IAAI,aAAc,EAAA,EAAG,EAAE,CAAA;AAE7C,EAAI,IAAA,OAAA,IAAW,KAAS,IAAA,CAAC,QAAU,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAS,EAAE,EAAA,EAAI,MAAQ,EAAA,EAAA,EAAI,OAAQ,EAAA,EAAA,kBACrCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,+CACE,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAM,EAAA,EAAA,CAAA,CAAE,kBAAkB,CAAE,CAChD,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IACjB,EAAA,EAAA,QAAA,CAAS,MAAU,IAAA,GAAA,GAChB,QAAQ,QAAS,CAAA,MAAM,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA,GACvC,QAAS,CAAA,MAAA,kBACZA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,SAAA,EAAU,KAAO,EAAA,EAAE,YAAY,KAAM,EAAA,EAAA,EACtD,CAAE,CAAA,kBAAkB,CACvB,CACF,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OACjB,EAAA,EAAA,CAAA,CAAE,0BAA4B,EAAA;AAAA,IAC7B,QAAU,EAAA,QAAA,CAAS,cAAe,CAAA,QAAA,CAAS,EAAE;AAAA,GAC9C,CACH,CACF,CACF,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ImpactCard.esm.js","sources":["../../../src/components/HomePageCards/ImpactCard.tsx"],"sourcesContent":["import React from 'react';\nimport numeral from 'numeral';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport { Box, Card, CardContent, Typography } from '@material-ui/core';\n\nexport const ImpactCard = () => {\n  const { t } = useTranslation();\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(api => api.getUserImpact(), []);\n\n  if (loading || error || !response) {\n    return null;\n  }\n\n  return (\n    <Box display={{ md: 'none', lg: 'block' }} style={{ marginBottom: '1em' }}>\n      <Card>\n        <CardContent>\n          <Typography variant=\"h5\">{t('impactCard.title')}</Typography>\n          <Typography variant=\"h5\">\n            {response.impact >= 1000\n              ? numeral(response.impact).format('0.0 a')\n              : response.impact}\n            <Typography variant=\"caption\" style={{ marginLeft: '1em' }}>\n              {t('impactCard.views')}\n            </Typography>\n          </Typography>\n          <Typography variant=\"body2\">\n            {t('impactCard.contributions', {\n              lastWeek: response.lastWeekImpact.toString(10),\n            })}\n          </Typography>\n        </CardContent>\n      </Card>\n    </Box>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAKO,MAAM,aAAa,MAAM;AAC9B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,MACE,UAAW,CAAA,CAAA,GAAA,KAAO,IAAI,aAAc,EAAA,EAAG,EAAE,CAAA;AAE7C,EAAI,IAAA,OAAA,IAAW,KAAS,IAAA,CAAC,QAAU,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,OAAS,EAAA,EAAE,EAAI,EAAA,MAAA,EAAQ,EAAI,EAAA,OAAA,EAAW,EAAA,KAAA,EAAO,EAAE,YAAA,EAAc,KAAM,EAAA,EAAA,kBACrEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,kBACEA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAA,EAAM,CAAE,CAAA,kBAAkB,CAAE,CAAA,kBAC/CA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAA,EACjB,QAAS,CAAA,MAAA,IAAU,GAChB,GAAA,OAAA,CAAQ,QAAS,CAAA,MAAM,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA,GACvC,QAAS,CAAA,MAAA,kBACZA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,SAAA,EAAU,KAAO,EAAA,EAAE,UAAY,EAAA,KAAA,EAChD,EAAA,EAAA,CAAA,CAAE,kBAAkB,CACvB,CACF,CAAA,kBACCA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAA,EACjB,EAAE,0BAA4B,EAAA;AAAA,IAC7B,QAAU,EAAA,QAAA,CAAS,cAAe,CAAA,QAAA,CAAS,EAAE;AAAA,GAC9C,CACH,CACF,CACF,CACF,CAAA;AAEJ;;;;"}

package/dist/components/Links/Links.esm.js

@@ -1,48 +1,58 @@
 import React__default from 'react';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import { useEntityPresentation } from '@backstage/plugin-catalog-react';
 import { Link } from '@backstage/core-components';
 import { userRouteRef } from '../../routes.esm.js';
 import '../../api.esm.js';
 import 'react-use';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
+import '@backstage/core-plugin-api/alpha';
+import '../../translation.esm.js';
+import { useUserInfo } from '../../hooks/useEntityAuthor.esm.js';
 import 'react-use/lib/useAsync';
 import { UserTooltip } from '../TagsAndEntities/UserChip.esm.js';
 import { Tooltip } from '@material-ui/core';
 
 const UserLink = (props) => {
-  const { entityRef, linkProps } = props;
+  const { entityRef, linkProps, anonymous } = props;
   const userRoute = useRouteRef(userRouteRef);
-  const { t } = useTranslation();
-  const { primaryTitle: userName } = useEntityPresentation(
-    entityRef.startsWith("user:") ? entityRef : `user:${entityRef}`
+  const { name } = useUserInfo(
+    entityRef,
+    anonymous ?? entityRef === "anonymous"
   );
-  if (entityRef === "anonymous") {
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, t("userLink.anonymous"));
-  }
   return /* @__PURE__ */ React__default.createElement(
     Tooltip,
     {
       arrow: true,
-      title: /* @__PURE__ */ React__default.createElement(UserTooltip, { entityRef }),
+      title: /* @__PURE__ */ React__default.createElement(UserTooltip, { entityRef, anonymous }),
       enterDelay: 400,
       interactive: true
     },
-    /* @__PURE__ */ React__default.createElement(Link, { to: `${userRoute()}/${entityRef}`, ...linkProps }, userName)
+    /* @__PURE__ */ React__default.createElement(Link, { to: `${userRoute()}/${entityRef}`, ...linkProps }, name)
   );
 };
 const AuthorLink = (props) => {
   const { entity, linkProps } = props;
-  return /* @__PURE__ */ React__default.createElement(UserLink, { entityRef: entity.author, linkProps });
+  return /* @__PURE__ */ React__default.createElement(
+    UserLink,
+    {
+      entityRef: entity.author,
+      linkProps,
+      anonymous: "anonymous" in entity ? entity.anonymous : void 0
+    }
+  );
 };
 const UpdatedByLink = (props) => {
   const { entity, linkProps } = props;
   if (!entity.updatedBy) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement(UserLink, { entityRef: entity.updatedBy, linkProps });
+  return /* @__PURE__ */ React__default.createElement(
+    UserLink,
+    {
+      entityRef: entity.updatedBy,
+      linkProps,
+      anonymous: "anonymous" in entity ? entity.anonymous : void 0
+    }
+  );
 };
 
 export { AuthorLink, UpdatedByLink, UserLink };

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

@@ -1 +1 @@
-{"version":3,"file":"Links.esm.js","sources":["../../../src/components/Links/Links.tsx"],"sourcesContent":["import React from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { Link, LinkProps } from '@backstage/core-components';\nimport { userRouteRef } from '../../routes';\nimport { Answer, Comment, Post } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation } from '../../hooks';\nimport { UserTooltip } from '../TagsAndEntities/UserChip';\nimport { Tooltip } from '@material-ui/core';\n\nexport const UserLink = (props: {\n  entityRef: string;\n  linkProps?: LinkProps;\n}) => {\n  const { entityRef, linkProps } = props;\n  const userRoute = useRouteRef(userRouteRef);\n  const { t } = useTranslation();\n  const { primaryTitle: userName } = useEntityPresentation(\n    entityRef.startsWith('user:') ? entityRef : `user:${entityRef}`,\n  );\n  if (entityRef === 'anonymous') {\n    return <>{t('userLink.anonymous')}</>;\n  }\n  return (\n    <Tooltip\n      arrow\n      title={<UserTooltip entityRef={entityRef} />}\n      enterDelay={400}\n      interactive\n    >\n      <Link to={`${userRoute()}/${entityRef}`} {...linkProps}>\n        {userName}\n      </Link>\n    </Tooltip>\n  );\n};\n\nexport const AuthorLink = (props: {\n  entity: Post | Answer | Comment;\n  linkProps?: LinkProps;\n}) => {\n  const { entity, linkProps } = props;\n  return <UserLink entityRef={entity.author} linkProps={linkProps} />;\n};\n\nexport const UpdatedByLink = (props: {\n  entity: Post | Answer | Comment;\n  linkProps?: LinkProps;\n}) => {\n  const { entity, linkProps } = props;\n  if (!entity.updatedBy) {\n    return null;\n  }\n  return <UserLink entityRef={entity.updatedBy} linkProps={linkProps} />;\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAUa,MAAA,QAAA,GAAW,CAAC,KAGnB,KAAA;AACJ,EAAM,MAAA,EAAE,SAAW,EAAA,SAAA,EAAc,GAAA,KAAA;AACjC,EAAM,MAAA,SAAA,GAAY,YAAY,YAAY,CAAA;AAC1C,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAM,MAAA,EAAE,YAAc,EAAA,QAAA,EAAa,GAAA,qBAAA;AAAA,IACjC,UAAU,UAAW,CAAA,OAAO,CAAI,GAAA,SAAA,GAAY,QAAQ,SAAS,CAAA;AAAA,GAC/D;AACA,EAAA,IAAI,cAAc,WAAa,EAAA;AAC7B,IAAO,uBAAAA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EAAG,CAAE,CAAA,oBAAoB,CAAE,CAAA;AAAA;AAEpC,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAK,EAAA,IAAA;AAAA,MACL,KAAA,kBAAQA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,SAAsB,EAAA,CAAA;AAAA,MAC1C,UAAY,EAAA,GAAA;AAAA,MACZ,WAAW,EAAA;AAAA,KAAA;AAAA,oBAEXA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAI,CAAG,EAAA,SAAA,EAAW,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAK,GAAG,SAAA,EAAA,EAC1C,QACH;AAAA,GACF;AAEJ;AAEa,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA;AAC9B,EAAA,uBAAQA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,MAAA,CAAO,QAAQ,SAAsB,EAAA,CAAA;AACnE;AAEa,MAAA,aAAA,GAAgB,CAAC,KAGxB,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA;AAC9B,EAAI,IAAA,CAAC,OAAO,SAAW,EAAA;AACrB,IAAO,OAAA,IAAA;AAAA;AAET,EAAA,uBAAQA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,SAAW,EAAA,MAAA,CAAO,WAAW,SAAsB,EAAA,CAAA;AACtE;;;;"}
+{"version":3,"file":"Links.esm.js","sources":["../../../src/components/Links/Links.tsx"],"sourcesContent":["import React from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { Link, LinkProps } from '@backstage/core-components';\nimport { userRouteRef } from '../../routes';\nimport { Answer, Comment, Post } from '@drodil/backstage-plugin-qeta-common';\nimport { useUserInfo } from '../../hooks';\nimport { UserTooltip } from '../TagsAndEntities/UserChip';\nimport { Tooltip } from '@material-ui/core';\n\nexport const UserLink = (props: {\n  entityRef: string;\n  anonymous?: boolean;\n  linkProps?: LinkProps;\n}) => {\n  const { entityRef, linkProps, anonymous } = props;\n  const userRoute = useRouteRef(userRouteRef);\n  const { name } = useUserInfo(\n    entityRef,\n    anonymous ?? entityRef === 'anonymous',\n  );\n  return (\n    <Tooltip\n      arrow\n      title={<UserTooltip entityRef={entityRef} anonymous={anonymous} />}\n      enterDelay={400}\n      interactive\n    >\n      <Link to={`${userRoute()}/${entityRef}`} {...linkProps}>\n        {name}\n      </Link>\n    </Tooltip>\n  );\n};\n\nexport const AuthorLink = (props: {\n  entity: Post | Answer | Comment;\n  linkProps?: LinkProps;\n}) => {\n  const { entity, linkProps } = props;\n  return (\n    <UserLink\n      entityRef={entity.author}\n      linkProps={linkProps}\n      anonymous={'anonymous' in entity ? entity.anonymous : undefined}\n    />\n  );\n};\n\nexport const UpdatedByLink = (props: {\n  entity: Post | Answer | Comment;\n  linkProps?: LinkProps;\n}) => {\n  const { entity, linkProps } = props;\n  if (!entity.updatedBy) {\n    return null;\n  }\n  return (\n    <UserLink\n      entityRef={entity.updatedBy}\n      linkProps={linkProps}\n      anonymous={'anonymous' in entity ? entity.anonymous : undefined}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AASa,MAAA,QAAA,GAAW,CAAC,KAInB,KAAA;AACJ,EAAA,MAAM,EAAE,SAAA,EAAW,SAAW,EAAA,SAAA,EAAc,GAAA,KAAA;AAC5C,EAAM,MAAA,SAAA,GAAY,YAAY,YAAY,CAAA;AAC1C,EAAM,MAAA,EAAE,MAAS,GAAA,WAAA;AAAA,IACf,SAAA;AAAA,IACA,aAAa,SAAc,KAAA;AAAA,GAC7B;AACA,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAK,EAAA,IAAA;AAAA,MACL,KAAO,kBAAAA,cAAA,CAAA,aAAA,CAAC,WAAY,EAAA,EAAA,SAAA,EAAsB,SAAsB,EAAA,CAAA;AAAA,MAChE,UAAY,EAAA,GAAA;AAAA,MACZ,WAAW,EAAA;AAAA,KAAA;AAAA,oBAEXA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAI,CAAG,EAAA,SAAA,EAAW,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAK,GAAG,SAAA,EAAA,EAC1C,IACH;AAAA,GACF;AAEJ;AAEa,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA;AAC9B,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,MAAA;AAAA,MAClB,SAAA;AAAA,MACA,SAAW,EAAA,WAAA,IAAe,MAAS,GAAA,MAAA,CAAO,SAAY,GAAA,KAAA;AAAA;AAAA,GACxD;AAEJ;AAEa,MAAA,aAAA,GAAgB,CAAC,KAGxB,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,SAAA,EAAc,GAAA,KAAA;AAC9B,EAAI,IAAA,CAAC,OAAO,SAAW,EAAA;AACrB,IAAO,OAAA,IAAA;AAAA;AAET,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,SAAA;AAAA,MAClB,SAAA;AAAA,MACA,SAAW,EAAA,WAAA,IAAe,MAAS,GAAA,MAAA,CAAO,SAAY,GAAA,KAAA;AAAA;AAAA,GACxD;AAEJ;;;;"}

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

@@ -0,0 +1,73 @@
+import { VariableSizeList } from 'react-window';
+import React__default from 'react';
+import { useTheme, useMediaQuery, ListSubheader } from '@material-ui/core';
+
+const LISTBOX_PADDING = 8;
+function renderRow(props) {
+  const { data, index, style } = props;
+  return React__default.cloneElement(data[index], {
+    style: {
+      ...style,
+      top: style.top + LISTBOX_PADDING
+    }
+  });
+}
+const OuterElementContext = React__default.createContext({});
+const OuterElementType = React__default.forwardRef((props, ref) => {
+  const outerProps = React__default.useContext(OuterElementContext);
+  return /* @__PURE__ */ React__default.createElement("div", { ref, ...props, ...outerProps });
+});
+function useResetCache(data) {
+  const ref = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (ref.current !== null) {
+      ref.current.resetAfterIndex(0, true);
+    }
+  }, [data]);
+  return ref;
+}
+const renderGroup = (params) => [
+  /* @__PURE__ */ React__default.createElement(ListSubheader, { key: params.key, component: "div" }, params.group),
+  params.children
+];
+const AutocompleteListboxComponent = React__default.forwardRef(
+  function ListboxComponent(props, ref) {
+    const { children, ...other } = props;
+    const itemData = React__default.Children.toArray(children);
+    const theme = useTheme();
+    const smUp = useMediaQuery(theme.breakpoints.up("sm"), { noSsr: true });
+    const itemCount = itemData.length;
+    const itemSize = smUp ? 36 : 48;
+    const getChildSize = (child) => {
+      if (React__default.isValidElement(child) && child.type === ListSubheader) {
+        return 48;
+      }
+      return itemSize;
+    };
+    const getHeight = () => {
+      if (itemCount > 8) {
+        return 8 * itemSize;
+      }
+      return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
+    };
+    const gridRef = useResetCache(itemCount);
+    return /* @__PURE__ */ React__default.createElement("div", { ref }, /* @__PURE__ */ React__default.createElement(OuterElementContext.Provider, { value: other }, /* @__PURE__ */ React__default.createElement(
+      VariableSizeList,
+      {
+        itemData,
+        height: getHeight() + 2 * LISTBOX_PADDING,
+        width: "100%",
+        ref: gridRef,
+        outerElementType: OuterElementType,
+        innerElementType: "ul",
+        itemSize: (index) => getChildSize(itemData[index]),
+        overscanCount: 5,
+        itemCount
+      },
+      renderRow
+    )));
+  }
+);
+
+export { AutocompleteListboxComponent, renderGroup };
+//# sourceMappingURL=AutocompleteListComponent.esm.js.map

package/dist/components/PostForm/AutocompleteListComponent.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteListComponent.esm.js","sources":["../../../src/components/PostForm/AutocompleteListComponent.tsx"],"sourcesContent":["import { ListChildComponentProps, VariableSizeList } from 'react-window';\nimport React from 'react';\nimport { ListSubheader, useMediaQuery, useTheme } from '@material-ui/core';\nimport { AutocompleteRenderGroupParams } from '@material-ui/lab';\n\nconst LISTBOX_PADDING = 8; // px\n\nfunction renderRow(props: ListChildComponentProps) {\n  const { data, index, style } = props;\n  return React.cloneElement(data[index], {\n    style: {\n      ...style,\n      top: (style.top as number) + LISTBOX_PADDING,\n    },\n  });\n}\n\nconst OuterElementContext = React.createContext({});\n\nconst OuterElementType = React.forwardRef<HTMLDivElement>((props, ref) => {\n  const outerProps = React.useContext(OuterElementContext);\n  return <div ref={ref} {...props} {...outerProps} />;\n});\n\nfunction useResetCache(data: any) {\n  const ref = React.useRef<VariableSizeList>(null);\n  React.useEffect(() => {\n    if (ref.current !== null) {\n      ref.current.resetAfterIndex(0, true);\n    }\n  }, [data]);\n  return ref;\n}\n\nexport const renderGroup = (params: AutocompleteRenderGroupParams) => [\n  <ListSubheader key={params.key} component=\"div\">\n    {params.group}\n  </ListSubheader>,\n  params.children,\n];\n\nexport const AutocompleteListboxComponent = React.forwardRef<HTMLDivElement>(\n  function ListboxComponent(props: React.HTMLAttributes<HTMLDivElement>, ref) {\n    const { children, ...other } = props;\n    const itemData = React.Children.toArray(children);\n    const theme = useTheme();\n    const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });\n    const itemCount = itemData.length;\n    const itemSize = smUp ? 36 : 48;\n\n    const getChildSize = (child: React.ReactNode) => {\n      if (React.isValidElement(child) && child.type === ListSubheader) {\n        return 48;\n      }\n\n      return itemSize;\n    };\n\n    const getHeight = () => {\n      if (itemCount > 8) {\n        return 8 * itemSize;\n      }\n      return itemData.map(getChildSize).reduce((a, b) => a + b, 0);\n    };\n\n    const gridRef = useResetCache(itemCount);\n\n    return (\n      <div ref={ref}>\n        <OuterElementContext.Provider value={other}>\n          <VariableSizeList\n            itemData={itemData}\n            height={getHeight() + 2 * LISTBOX_PADDING}\n            width=\"100%\"\n            ref={gridRef}\n            outerElementType={OuterElementType}\n            innerElementType=\"ul\"\n            itemSize={index => getChildSize(itemData[index])}\n            overscanCount={5}\n            itemCount={itemCount}\n          >\n            {renderRow}\n          </VariableSizeList>\n        </OuterElementContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { Autocomplete } from '@material-ui/lab';
 import { getEntityTitle } from '../../utils/utils.esm.js';
 import { stringifyEntityRef } from '@backstage/catalog-model';
-import { Tooltip, TextField } from '@material-ui/core';
+import { Tooltip, Typography, TextField } from '@material-ui/core';
 import React__default, { useMemo, useEffect } from 'react';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
@@ -11,6 +11,7 @@ import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import 'dataloader';
 import 'react-use/lib/useAsync';
 import { compact } from 'lodash';
+import { renderGroup, AutocompleteListboxComponent } from './AutocompleteListComponent.esm.js';
 
 const EntitiesInput = (props) => {
   const {
@@ -68,7 +69,8 @@ const EntitiesInput = (props) => {
           "kind",
           "metadata.name",
           "metadata.namespace",
-          "metadata.title"
+          "metadata.title",
+          "metadata.description"
         ]
       }).catch((_) => setAvailableEntities(null)).then(
         (data) => data ? setAvailableEntities(data.items) : setAvailableEntities(null)
@@ -93,9 +95,12 @@ const EntitiesInput = (props) => {
       value,
       disabled,
       groupBy: entityKinds.length > 1 ? (option) => option.kind : void 0,
+      renderGroup,
       id: "entities-select",
       options: availableEntities,
       getOptionLabel: getEntityTitle,
+      ListboxComponent: AutocompleteListboxComponent,
+      disableListWrap: true,
       style,
       getOptionSelected: (o, v) => stringifyEntityRef(o) === stringifyEntityRef(v),
       onChange: (_e, newValue) => {
@@ -104,7 +109,15 @@ const EntitiesInput = (props) => {
         }
       },
       renderOption: (option) => {
-        return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Tooltip, { title: stringifyEntityRef(option) }, /* @__PURE__ */ React__default.createElement("span", null, getEntityTitle(option))));
+        return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+          Tooltip,
+          {
+            arrow: true,
+            placement: "right",
+            title: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Typography, null, stringifyEntityRef(option)), /* @__PURE__ */ React__default.createElement(Typography, { variant: "caption" }, option.metadata.description))
+          },
+          /* @__PURE__ */ React__default.createElement("span", null, getEntityTitle(option))
+        ));
       },
       renderInput: (params) => /* @__PURE__ */ React__default.createElement(
         TextField,

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

@@ -1 +1 @@
-{"version":3,"file":"EntitiesInput.esm.js","sources":["../../../src/components/PostForm/EntitiesInput.tsx"],"sourcesContent":["import { Autocomplete } from '@material-ui/lab';\nimport { getEntityTitle } from '../../utils/utils';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { TextField, Tooltip } from '@material-ui/core';\nimport React, { useEffect, useMemo } from 'react';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { useTranslation } from '../../hooks';\nimport { qetaApiRef } from '../../api';\nimport { compact } from 'lodash';\n\nexport const EntitiesInput = (props: {\n  value?: Entity[];\n  singleValue?: string;\n  onChange: (value: Entity[]) => void;\n  useOnlyUsedEntities?: boolean;\n  hideHelpText?: boolean;\n  style?: React.CSSProperties;\n  disabled?: boolean;\n}) => {\n  const {\n    value,\n    singleValue,\n    onChange,\n    useOnlyUsedEntities = false,\n    hideHelpText = false,\n    style,\n    disabled,\n  } = props;\n  const configApi = useApi(configApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const qetaApi = useApi(qetaApiRef);\n  const [availableEntities, setAvailableEntities] = React.useState<\n    Entity[] | null\n  >([]);\n  const { t } = useTranslation();\n\n  const entityKinds: string[] = useMemo(() => {\n    let kinds = configApi.getOptionalStringArray('qeta.entityKinds');\n    if (!kinds) {\n      kinds = configApi.getOptionalStringArray('qeta.entities.kinds');\n    }\n    return kinds || ['Component', 'System'];\n  }, [configApi]);\n  const max = useMemo(\n    () => configApi.getOptionalNumber('qeta.entities.max') ?? 3,\n    [configApi],\n  );\n\n  useEffect(() => {\n    if (singleValue) {\n      catalogApi.getEntityByRef(singleValue).then(data => {\n        if (data) {\n          setAvailableEntities([data]);\n        }\n      });\n    }\n  }, [catalogApi, singleValue]);\n\n  useEffect(() => {\n    if (singleValue) {\n      return;\n    }\n\n    if (useOnlyUsedEntities) {\n      qetaApi.getEntities().then(data => {\n        const refs = data.entities.map(r => r.entityRef);\n        catalogApi.getEntitiesByRefs({ entityRefs: refs }).then(catalogData => {\n          setAvailableEntities(compact(catalogData.items));\n        });\n      });\n      return;\n    }\n\n    if (entityKinds && entityKinds.length > 0) {\n      catalogApi\n        .getEntities({\n          order: { field: 'kind', order: 'asc' },\n          filter: { kind: entityKinds },\n          fields: [\n            'kind',\n            'metadata.name',\n            'metadata.namespace',\n            'metadata.title',\n          ],\n        })\n        .catch(_ => setAvailableEntities(null))\n        .then(data =>\n          data ? setAvailableEntities(data.items) : setAvailableEntities(null),\n        );\n    }\n  }, [\n    catalogApi,\n    singleValue,\n    configApi,\n    entityKinds,\n    useOnlyUsedEntities,\n    qetaApi,\n  ]);\n\n  if (!availableEntities || availableEntities.length === 0) {\n    return null;\n  }\n\n  return (\n    <Autocomplete\n      multiple\n      className=\"qetaEntitiesInput\"\n      value={value}\n      disabled={disabled}\n      groupBy={entityKinds.length > 1 ? option => option.kind : undefined}\n      id=\"entities-select\"\n      options={availableEntities}\n      getOptionLabel={getEntityTitle}\n      style={style}\n      getOptionSelected={(o, v) =>\n        stringifyEntityRef(o) === stringifyEntityRef(v)\n      }\n      onChange={(_e, newValue) => {\n        if (!newValue || newValue.length <= max) {\n          onChange(newValue);\n        }\n      }}\n      renderOption={option => {\n        return (\n          <>\n            <Tooltip title={stringifyEntityRef(option)}>\n              <span>{getEntityTitle(option)}</span>\n            </Tooltip>\n          </>\n        );\n      }}\n      renderInput={params => (\n        <TextField\n          {...params}\n          variant=\"outlined\"\n          margin=\"normal\"\n          label={t('entitiesInput.label')}\n          placeholder={t('entitiesInput.placeholder')}\n          helperText={\n            hideHelpText\n              ? ''\n              : t('entitiesInput.helperText', {\n                  max: max.toString(10),\n                })\n          }\n        />\n      )}\n    />\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"EntitiesInput.esm.js","sources":["../../../src/components/PostForm/EntitiesInput.tsx"],"sourcesContent":["import { Autocomplete } from '@material-ui/lab';\nimport { getEntityTitle } from '../../utils/utils';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { TextField, Tooltip, Typography } from '@material-ui/core';\nimport React, { useEffect, useMemo } from 'react';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { useTranslation } from '../../hooks';\nimport { qetaApiRef } from '../../api';\nimport { compact } from 'lodash';\nimport {\n  AutocompleteListboxComponent,\n  renderGroup,\n} from './AutocompleteListComponent';\n\nexport const EntitiesInput = (props: {\n  value?: Entity[];\n  singleValue?: string;\n  onChange: (value: Entity[]) => void;\n  useOnlyUsedEntities?: boolean;\n  hideHelpText?: boolean;\n  style?: React.CSSProperties;\n  disabled?: boolean;\n}) => {\n  const {\n    value,\n    singleValue,\n    onChange,\n    useOnlyUsedEntities = false,\n    hideHelpText = false,\n    style,\n    disabled,\n  } = props;\n  const configApi = useApi(configApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const qetaApi = useApi(qetaApiRef);\n  const [availableEntities, setAvailableEntities] = React.useState<\n    Entity[] | null\n  >([]);\n  const { t } = useTranslation();\n\n  const entityKinds: string[] = useMemo(() => {\n    let kinds = configApi.getOptionalStringArray('qeta.entityKinds');\n    if (!kinds) {\n      kinds = configApi.getOptionalStringArray('qeta.entities.kinds');\n    }\n    return kinds || ['Component', 'System'];\n  }, [configApi]);\n  const max = useMemo(\n    () => configApi.getOptionalNumber('qeta.entities.max') ?? 3,\n    [configApi],\n  );\n\n  useEffect(() => {\n    if (singleValue) {\n      catalogApi.getEntityByRef(singleValue).then(data => {\n        if (data) {\n          setAvailableEntities([data]);\n        }\n      });\n    }\n  }, [catalogApi, singleValue]);\n\n  useEffect(() => {\n    if (singleValue) {\n      return;\n    }\n\n    if (useOnlyUsedEntities) {\n      qetaApi.getEntities().then(data => {\n        const refs = data.entities.map(r => r.entityRef);\n        catalogApi.getEntitiesByRefs({ entityRefs: refs }).then(catalogData => {\n          setAvailableEntities(compact(catalogData.items));\n        });\n      });\n      return;\n    }\n\n    if (entityKinds && entityKinds.length > 0) {\n      catalogApi\n        .getEntities({\n          order: { field: 'kind', order: 'asc' },\n          filter: { kind: entityKinds },\n          fields: [\n            'kind',\n            'metadata.name',\n            'metadata.namespace',\n            'metadata.title',\n            'metadata.description',\n          ],\n        })\n        .catch(_ => setAvailableEntities(null))\n        .then(data =>\n          data ? setAvailableEntities(data.items) : setAvailableEntities(null),\n        );\n    }\n  }, [\n    catalogApi,\n    singleValue,\n    configApi,\n    entityKinds,\n    useOnlyUsedEntities,\n    qetaApi,\n  ]);\n\n  if (!availableEntities || availableEntities.length === 0) {\n    return null;\n  }\n\n  return (\n    <Autocomplete\n      multiple\n      className=\"qetaEntitiesInput\"\n      value={value}\n      disabled={disabled}\n      groupBy={entityKinds.length > 1 ? option => option.kind : undefined}\n      renderGroup={renderGroup}\n      id=\"entities-select\"\n      options={availableEntities}\n      getOptionLabel={getEntityTitle}\n      ListboxComponent={\n        AutocompleteListboxComponent as React.ComponentType<\n          React.HTMLAttributes<HTMLElement>\n        >\n      }\n      disableListWrap\n      style={style}\n      getOptionSelected={(o, v) =>\n        stringifyEntityRef(o) === stringifyEntityRef(v)\n      }\n      onChange={(_e, newValue) => {\n        if (!newValue || newValue.length <= max) {\n          onChange(newValue);\n        }\n      }}\n      renderOption={option => {\n        return (\n          <>\n            <Tooltip\n              arrow\n              placement=\"right\"\n              title={\n                <>\n                  <Typography>{stringifyEntityRef(option)}</Typography>\n                  <Typography variant=\"caption\">\n                    {option.metadata.description}\n                  </Typography>\n                </>\n              }\n            >\n              <span>{getEntityTitle(option)}</span>\n            </Tooltip>\n          </>\n        );\n      }}\n      renderInput={params => (\n        <TextField\n          {...params}\n          variant=\"outlined\"\n          margin=\"normal\"\n          label={t('entitiesInput.label')}\n          placeholder={t('entitiesInput.placeholder')}\n          helperText={\n            hideHelpText\n              ? ''\n              : t('entitiesInput.helperText', {\n                  max: max.toString(10),\n                })\n          }\n        />\n      )}\n    />\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { Autocomplete } from '@material-ui/lab';
-import { Tooltip, TextField } from '@material-ui/core';
+import { Tooltip, Typography, TextField } from '@material-ui/core';
 import React__default, { useMemo, useEffect } from 'react';
 import { qetaApiRef } from '../../api.esm.js';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
@@ -10,6 +10,7 @@ import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
 import 'react-use/lib/useAsync';
+import { AutocompleteListboxComponent } from './AutocompleteListComponent.esm.js';
 
 const TagInput = (props) => {
   const {
@@ -69,10 +70,20 @@ const TagInput = (props) => {
       value,
       options: availableTags ?? [],
       freeSolo: allowCreation,
+      ListboxComponent: AutocompleteListboxComponent,
+      disableListWrap: true,
       style,
       renderOption: (option) => {
         if (tagDescriptions[option]) {
-          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Tooltip, { title: tagDescriptions[option] }, /* @__PURE__ */ React__default.createElement("span", null, option)));
+          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+            Tooltip,
+            {
+              arrow: true,
+              placement: "right",
+              title: /* @__PURE__ */ React__default.createElement(Typography, null, tagDescriptions[option])
+            },
+            /* @__PURE__ */ React__default.createElement("span", null, option)
+          ));
         }
         return option;
       },

package/dist/components/PostForm/TagInput.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.esm.js","sources":["../../../src/components/PostForm/TagInput.tsx"],"sourcesContent":["import { Autocomplete } from '@material-ui/lab';\nimport { TextField, Tooltip } from '@material-ui/core';\nimport React, { useEffect, useMemo } from 'react';\nimport { qetaApiRef } from '../../api';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation } from '../../hooks';\nimport { FieldError } from 'react-hook-form';\n\nexport const TagInput = (props: {\n  value?: string[];\n  onChange: (value: string[]) => void;\n  error?: FieldError;\n  allowCreate?: boolean;\n  hideHelpText?: boolean;\n  style?: React.CSSProperties;\n}) => {\n  const {\n    value,\n    onChange,\n    error,\n    allowCreate,\n    hideHelpText = false,\n    style,\n  } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const config = useApi(configApiRef);\n  const { t } = useTranslation();\n  const allowCreation = useMemo(\n    () =>\n      allowCreate ??\n      config.getOptionalBoolean('qeta.tags.allowCreation') ??\n      true,\n    [config, allowCreate],\n  );\n  const allowedTags = useMemo(\n    () => config.getOptionalStringArray('qeta.tags.allowedTags') ?? [],\n    [config],\n  );\n  const maximumTags = useMemo(\n    () => config.getOptionalNumber('qeta.tags.max') ?? 5,\n    [config],\n  );\n  const [availableTags, setAvailableTags] = React.useState<string[]>([]);\n  const [tagDescriptions, setTagDescriptions] = React.useState<\n    Record<string, string>\n  >({});\n  useEffect(() => {\n    qetaApi\n      .getTags()\n      .catch(_ => setAvailableTags([]))\n      .then(data => {\n        if (!data) {\n          return;\n        }\n\n        const uniqueTags = [\n          ...new Set([...allowedTags, ...data.tags.map(tag => tag.tag)]),\n        ];\n        setAvailableTags(uniqueTags);\n        setTagDescriptions(\n          data.tags.reduce((acc, tag) => {\n            if (!tag.description) {\n              return acc;\n            }\n            acc[tag.tag] = tag.description;\n            return acc;\n          }, {} as Record<string, string>),\n        );\n      });\n  }, [qetaApi, allowCreation, allowedTags]);\n\n  if (!allowCreation && availableTags.length === 0) {\n    return null;\n  }\n\n  return (\n    <Autocomplete\n      multiple\n      id=\"tags-select\"\n      className=\"qetaTagInput\"\n      value={value}\n      options={availableTags ?? []}\n      freeSolo={allowCreation}\n      style={style}\n      renderOption={option => {\n        if (tagDescriptions[option]) {\n          return (\n            <>\n              <Tooltip title={tagDescriptions[option]}>\n                <span>{option}</span>\n              </Tooltip>\n            </>\n          );\n        }\n        return option;\n      }}\n      onChange={(_e, newValue) => {\n        const tags = filterTags(newValue);\n        if (\n          tags &&\n          tags.length <= maximumTags &&\n          tags.length === newValue.length\n        ) {\n          onChange(newValue);\n        }\n      }}\n      renderInput={params => (\n        <TextField\n          {...params}\n          variant=\"outlined\"\n          margin=\"normal\"\n          label={t('tagsInput.label')}\n          placeholder={t('tagsInput.placeholder')}\n          helperText={\n            hideHelpText\n              ? ''\n              : t('tagsInput.helperText', {\n                  max: maximumTags.toString(10),\n                })\n          }\n          error={error !== undefined}\n        />\n      )}\n    />\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"TagInput.esm.js","sources":["../../../src/components/PostForm/TagInput.tsx"],"sourcesContent":["import { Autocomplete } from '@material-ui/lab';\nimport { TextField, Tooltip, Typography } from '@material-ui/core';\nimport React, { useEffect, useMemo } from 'react';\nimport { qetaApiRef } from '../../api';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation } from '../../hooks';\nimport { FieldError } from 'react-hook-form';\nimport { AutocompleteListboxComponent } from './AutocompleteListComponent';\n\nexport const TagInput = (props: {\n  value?: string[];\n  onChange: (value: string[]) => void;\n  error?: FieldError;\n  allowCreate?: boolean;\n  hideHelpText?: boolean;\n  style?: React.CSSProperties;\n}) => {\n  const {\n    value,\n    onChange,\n    error,\n    allowCreate,\n    hideHelpText = false,\n    style,\n  } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const config = useApi(configApiRef);\n  const { t } = useTranslation();\n  const allowCreation = useMemo(\n    () =>\n      allowCreate ??\n      config.getOptionalBoolean('qeta.tags.allowCreation') ??\n      true,\n    [config, allowCreate],\n  );\n  const allowedTags = useMemo(\n    () => config.getOptionalStringArray('qeta.tags.allowedTags') ?? [],\n    [config],\n  );\n  const maximumTags = useMemo(\n    () => config.getOptionalNumber('qeta.tags.max') ?? 5,\n    [config],\n  );\n  const [availableTags, setAvailableTags] = React.useState<string[]>([]);\n  const [tagDescriptions, setTagDescriptions] = React.useState<\n    Record<string, string>\n  >({});\n  useEffect(() => {\n    qetaApi\n      .getTags()\n      .catch(_ => setAvailableTags([]))\n      .then(data => {\n        if (!data) {\n          return;\n        }\n\n        const uniqueTags = [\n          ...new Set([...allowedTags, ...data.tags.map(tag => tag.tag)]),\n        ];\n        setAvailableTags(uniqueTags);\n        setTagDescriptions(\n          data.tags.reduce((acc, tag) => {\n            if (!tag.description) {\n              return acc;\n            }\n            acc[tag.tag] = tag.description;\n            return acc;\n          }, {} as Record<string, string>),\n        );\n      });\n  }, [qetaApi, allowCreation, allowedTags]);\n\n  if (!allowCreation && availableTags.length === 0) {\n    return null;\n  }\n\n  return (\n    <Autocomplete\n      multiple\n      id=\"tags-select\"\n      className=\"qetaTagInput\"\n      value={value}\n      options={availableTags ?? []}\n      freeSolo={allowCreation}\n      ListboxComponent={\n        AutocompleteListboxComponent as React.ComponentType<\n          React.HTMLAttributes<HTMLElement>\n        >\n      }\n      disableListWrap\n      style={style}\n      renderOption={option => {\n        if (tagDescriptions[option]) {\n          return (\n            <>\n              <Tooltip\n                arrow\n                placement=\"right\"\n                title={<Typography>{tagDescriptions[option]}</Typography>}\n              >\n                <span>{option}</span>\n              </Tooltip>\n            </>\n          );\n        }\n        return option;\n      }}\n      onChange={(_e, newValue) => {\n        const tags = filterTags(newValue);\n        if (\n          tags &&\n          tags.length <= maximumTags &&\n          tags.length === newValue.length\n        ) {\n          onChange(newValue);\n        }\n      }}\n      renderInput={params => (\n        <TextField\n          {...params}\n          variant=\"outlined\"\n          margin=\"normal\"\n          label={t('tagsInput.label')}\n          placeholder={t('tagsInput.placeholder')}\n          helperText={\n            hideHelpText\n              ? ''\n              : t('tagsInput.helperText', {\n                  max: maximumTags.toString(10),\n                })\n          }\n          error={error !== undefined}\n        />\n      )}\n    />\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/PostsContainer/PostListItem.esm.js

@@ -143,7 +143,7 @@ const PostListItem = (props) => {
           },
           initials
         ),
-        /* @__PURE__ */ React__default.createElement(UserLink, { entityRef: post.author }),
+        /* @__PURE__ */ React__default.createElement(UserLink, { entityRef: post.author, anonymous: post.anonymous }),
         " ",
         /* @__PURE__ */ React__default.createElement(Link, { to: href, className: styles.timestamp }, /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: post.created }))
       )))

package/dist/components/PostsContainer/PostListItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostListItem.esm.js","sources":["../../../src/components/PostsContainer/PostListItem.tsx"],"sourcesContent":["import { Link } from '@backstage/core-components';\nimport React, { useEffect, useState } from 'react';\nimport DOMPurify from 'dompurify';\nimport {\n  PostResponse,\n  PostType,\n  QetaSignal,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { FavoriteButton } from '../Buttons/FavoriteButton';\nimport { capitalize } from 'lodash';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\nimport HelpOutlined from '@material-ui/icons/HelpOutlined';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { VoteButtonContainer } from '../Utility/VoteButtonContainer';\nimport { UserLink } from '../Links';\nimport {\n  Chip,\n  Grid,\n  makeStyles,\n  Typography,\n  useTheme,\n} from '@material-ui/core';\nimport { SmallAvatar } from '../Utility/SmallAvatar';\n\nexport interface PostListItemProps {\n  post: PostResponse;\n  entity?: string;\n  type?: PostType;\n}\n\nconst useStyles = makeStyles(() => ({\n  author: {\n    float: 'right',\n    alignItems: 'center',\n    display: 'flex',\n  },\n  timestamp: {\n    marginLeft: '0.3em',\n  },\n}));\n\nexport const PostListItem = (props: PostListItemProps) => {\n  const { post, entity, type } = props;\n\n  const [correctAnswer, setCorrectAnswer] = useState(post.correctAnswer);\n  const [answersCount, setAnswersCount] = useState(post.answersCount);\n  const [views, setViews] = useState(post.views);\n  const { t } = useTranslation();\n  const styles = useStyles();\n\n  const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${post.id}`);\n\n  useEffect(() => {\n    if (lastSignal?.type === 'post_stats') {\n      setCorrectAnswer(lastSignal.correctAnswer);\n      setAnswersCount(lastSignal.answersCount);\n      setViews(lastSignal.views);\n    }\n  }, [lastSignal]);\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const { name, initials, user } = useEntityAuthor(post);\n  const theme = useTheme();\n\n  const route = post.type === 'question' ? questionRoute : articleRoute;\n  const href = entity\n    ? `${route({\n        id: post.id.toString(10),\n      })}?entity=${entity}`\n    : route({ id: post.id.toString(10) });\n\n  return (\n    <Grid\n      container\n      spacing={2}\n      justifyContent=\"flex-start\"\n      style={{ padding: '0.7em', paddingBottom: '1.0em' }}\n    >\n      <Grid item style={{ paddingTop: '0px' }}>\n        <VoteButtonContainer>\n          <VoteButtons entity={post} />\n          <FavoriteButton entity={post} />\n        </VoteButtonContainer>\n      </Grid>\n      <Grid\n        item\n        style={{ display: 'inline-block', width: 'calc(100% - 80px)' }}\n      >\n        <Grid container>\n          <Grid\n            item\n            xs={12}\n            style={{\n              paddingTop: '0.3em',\n              paddingBottom: '0.4em',\n              marginLeft: '-0.2em',\n            }}\n          >\n            {type === undefined && (\n              <Chip\n                color=\"secondary\"\n                size=\"small\"\n                label={`${capitalize(post.type)}`}\n                icon={\n                  post.type === 'question' ? (\n                    <HelpOutlined />\n                  ) : (\n                    <CollectionsBookmarkIcon />\n                  )\n                }\n              />\n            )}\n            {post.type === 'question' && (\n              <Chip\n                variant=\"outlined\"\n                size=\"small\"\n                style={{\n                  userSelect: 'none',\n                  // eslint-disable-next-line no-nested-ternary\n                  borderColor: correctAnswer\n                    ? theme.palette.success.main\n                    : answersCount === 0\n                    ? theme.palette.warning.main\n                    : undefined,\n                }}\n                label={t('common.answers', {\n                  count: answersCount,\n                })}\n              />\n            )}\n            <Chip\n              variant=\"outlined\"\n              size=\"small\"\n              label={t('common.viewsShort', {\n                count: views,\n              })}\n            />\n          </Grid>\n          <Grid item xs={12} style={{ paddingTop: '0px' }}>\n            <Typography variant=\"h5\" component=\"div\">\n              <Link to={href} className=\"qetaPostListItemQuestionBtn\">\n                {post.title}\n              </Link>\n            </Typography>\n            <Typography\n              variant=\"caption\"\n              noWrap\n              component=\"div\"\n              className=\"qetaPostListItemContent\"\n              style={{ marginBottom: '5px' }}\n            >\n              {DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(post.content), 150),\n              )}\n            </Typography>\n          </Grid>\n          <Grid item xs={12}>\n            <TagsAndEntities entity={post} />\n            <Typography\n              variant=\"caption\"\n              display=\"inline\"\n              className={styles.author}\n            >\n              <SmallAvatar\n                src={user?.spec?.profile?.picture}\n                alt={name}\n                variant=\"rounded\"\n              >\n                {initials}\n              </SmallAvatar>\n              <UserLink entityRef={post.author} />{' '}\n              <Link to={href} className={styles.timestamp}>\n                <RelativeTimeWithTooltip value={post.created} />\n              </Link>\n            </Typography>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"PostListItem.esm.js","sources":["../../../src/components/PostsContainer/PostListItem.tsx"],"sourcesContent":["import { Link } from '@backstage/core-components';\nimport React, { useEffect, useState } from 'react';\nimport DOMPurify from 'dompurify';\nimport {\n  PostResponse,\n  PostType,\n  QetaSignal,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { FavoriteButton } from '../Buttons/FavoriteButton';\nimport { capitalize } from 'lodash';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\nimport HelpOutlined from '@material-ui/icons/HelpOutlined';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { VoteButtonContainer } from '../Utility/VoteButtonContainer';\nimport { UserLink } from '../Links';\nimport {\n  Chip,\n  Grid,\n  makeStyles,\n  Typography,\n  useTheme,\n} from '@material-ui/core';\nimport { SmallAvatar } from '../Utility/SmallAvatar';\n\nexport interface PostListItemProps {\n  post: PostResponse;\n  entity?: string;\n  type?: PostType;\n}\n\nconst useStyles = makeStyles(() => ({\n  author: {\n    float: 'right',\n    alignItems: 'center',\n    display: 'flex',\n  },\n  timestamp: {\n    marginLeft: '0.3em',\n  },\n}));\n\nexport const PostListItem = (props: PostListItemProps) => {\n  const { post, entity, type } = props;\n\n  const [correctAnswer, setCorrectAnswer] = useState(post.correctAnswer);\n  const [answersCount, setAnswersCount] = useState(post.answersCount);\n  const [views, setViews] = useState(post.views);\n  const { t } = useTranslation();\n  const styles = useStyles();\n\n  const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${post.id}`);\n\n  useEffect(() => {\n    if (lastSignal?.type === 'post_stats') {\n      setCorrectAnswer(lastSignal.correctAnswer);\n      setAnswersCount(lastSignal.answersCount);\n      setViews(lastSignal.views);\n    }\n  }, [lastSignal]);\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const { name, initials, user } = useEntityAuthor(post);\n  const theme = useTheme();\n\n  const route = post.type === 'question' ? questionRoute : articleRoute;\n  const href = entity\n    ? `${route({\n        id: post.id.toString(10),\n      })}?entity=${entity}`\n    : route({ id: post.id.toString(10) });\n\n  return (\n    <Grid\n      container\n      spacing={2}\n      justifyContent=\"flex-start\"\n      style={{ padding: '0.7em', paddingBottom: '1.0em' }}\n    >\n      <Grid item style={{ paddingTop: '0px' }}>\n        <VoteButtonContainer>\n          <VoteButtons entity={post} />\n          <FavoriteButton entity={post} />\n        </VoteButtonContainer>\n      </Grid>\n      <Grid\n        item\n        style={{ display: 'inline-block', width: 'calc(100% - 80px)' }}\n      >\n        <Grid container>\n          <Grid\n            item\n            xs={12}\n            style={{\n              paddingTop: '0.3em',\n              paddingBottom: '0.4em',\n              marginLeft: '-0.2em',\n            }}\n          >\n            {type === undefined && (\n              <Chip\n                color=\"secondary\"\n                size=\"small\"\n                label={`${capitalize(post.type)}`}\n                icon={\n                  post.type === 'question' ? (\n                    <HelpOutlined />\n                  ) : (\n                    <CollectionsBookmarkIcon />\n                  )\n                }\n              />\n            )}\n            {post.type === 'question' && (\n              <Chip\n                variant=\"outlined\"\n                size=\"small\"\n                style={{\n                  userSelect: 'none',\n                  // eslint-disable-next-line no-nested-ternary\n                  borderColor: correctAnswer\n                    ? theme.palette.success.main\n                    : answersCount === 0\n                    ? theme.palette.warning.main\n                    : undefined,\n                }}\n                label={t('common.answers', {\n                  count: answersCount,\n                })}\n              />\n            )}\n            <Chip\n              variant=\"outlined\"\n              size=\"small\"\n              label={t('common.viewsShort', {\n                count: views,\n              })}\n            />\n          </Grid>\n          <Grid item xs={12} style={{ paddingTop: '0px' }}>\n            <Typography variant=\"h5\" component=\"div\">\n              <Link to={href} className=\"qetaPostListItemQuestionBtn\">\n                {post.title}\n              </Link>\n            </Typography>\n            <Typography\n              variant=\"caption\"\n              noWrap\n              component=\"div\"\n              className=\"qetaPostListItemContent\"\n              style={{ marginBottom: '5px' }}\n            >\n              {DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(post.content), 150),\n              )}\n            </Typography>\n          </Grid>\n          <Grid item xs={12}>\n            <TagsAndEntities entity={post} />\n            <Typography\n              variant=\"caption\"\n              display=\"inline\"\n              className={styles.author}\n            >\n              <SmallAvatar\n                src={user?.spec?.profile?.picture}\n                alt={name}\n                variant=\"rounded\"\n              >\n                {initials}\n              </SmallAvatar>\n              <UserLink entityRef={post.author} anonymous={post.anonymous} />{' '}\n              <Link to={href} className={styles.timestamp}>\n                <RelativeTimeWithTooltip value={post.created} />\n              </Link>\n            </Typography>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/PostsGrid/PostsGridItem.esm.js

@@ -68,7 +68,7 @@ const PostsGridItem = (props) => {
       variant: "rounded"
     },
     initials
-  ), /* @__PURE__ */ React__default.createElement(UserLink, { entityRef: post.author }), " ", /* @__PURE__ */ React__default.createElement(Link, { to: href, className: "qetaPostListItemQuestionBtn" }, /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: post.created })), " \xB7 ", t("common.views", { count: views }))), allowRanking && /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React__default.createElement(UserLink, { entityRef: post.author, anonymous: post.anonymous }), " ", /* @__PURE__ */ React__default.createElement(Link, { to: href, className: "qetaPostListItemQuestionBtn" }, /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: post.created })), " \xB7 ", t("common.views", { count: views }))), allowRanking && /* @__PURE__ */ React__default.createElement(
     Box,
     {
       style: {

package/dist/components/PostsGrid/PostsGridItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostsGridItem.esm.js","sources":["../../../src/components/PostsGrid/PostsGridItem.tsx"],"sourcesContent":["import {\n  PostResponse,\n  PostType,\n  QetaSignal,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport React, { useEffect, useState } from 'react';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport {\n  Box,\n  Card,\n  CardActionArea,\n  CardContent,\n  CardMedia,\n  IconButton,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useNavigate } from 'react-router-dom';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { Link } from '@backstage/core-components';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { qetaApiRef } from '../../api';\nimport VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop';\nimport VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom';\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport { UserLink } from '../Links';\nimport { SmallAvatar } from '../Utility/SmallAvatar';\n\nexport interface PostsGridItemProps {\n  post: PostResponse;\n  entity?: string;\n  type?: PostType;\n  allowRanking?: boolean;\n  onRankUpdate?: () => void;\n  collectionId?: number;\n}\n\nexport const PostsGridItem = (props: PostsGridItemProps) => {\n  const { post, entity, allowRanking, onRankUpdate, collectionId } = props;\n  const [views, setViews] = useState(post.views);\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslation();\n\n  const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${post.id}`);\n\n  useEffect(() => {\n    if (lastSignal?.type === 'post_stats') {\n      setViews(lastSignal.views);\n    }\n  }, [lastSignal]);\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const { name, initials, user } = useEntityAuthor(post);\n  const navigate = useNavigate();\n\n  const route = post.type === 'question' ? questionRoute : articleRoute;\n  const href = entity\n    ? `${route({\n        id: post.id.toString(10),\n      })}?entity=${entity}`\n    : route({ id: post.id.toString(10) });\n\n  const rank = (direction: 'top' | 'bottom' | 'up' | 'down') => {\n    if (!collectionId) {\n      return;\n    }\n    qetaApi.rankPostInCollection(collectionId, post.id, direction).then(res => {\n      if (res) {\n        onRankUpdate?.();\n      }\n    });\n  };\n\n  return (\n    <Card style={{ height: '100%' }}>\n      <CardActionArea onClick={() => navigate(href)}>\n        {post.headerImage && (\n          <CardMedia\n            component=\"img\"\n            height=\"140\"\n            image={post.headerImage}\n            alt={post.title}\n          />\n        )}\n        <CardContent style={{ paddingBottom: '0.5rem' }}>\n          <Typography gutterBottom variant=\"h6\" component=\"div\">\n            {post.title}\n          </Typography>\n          <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n            {DOMPurify.sanitize(\n              truncate(removeMarkdownFormatting(post.content), 400),\n            )}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      <CardContent style={{ paddingTop: '0.5rem' }}>\n        <TagsAndEntities entity={post} />\n        <Box style={{ paddingLeft: '0.2rem', paddingTop: '0.5rem' }}>\n          <Typography variant=\"caption\">\n            <SmallAvatar\n              src={user?.spec?.profile?.picture}\n              alt={name}\n              variant=\"rounded\"\n            >\n              {initials}\n            </SmallAvatar>\n            <UserLink entityRef={post.author} />{' '}\n            <Link to={href} className=\"qetaPostListItemQuestionBtn\">\n              <RelativeTimeWithTooltip value={post.created} />\n            </Link>\n            {' · '}\n            {t('common.views', { count: views })}\n          </Typography>\n        </Box>\n        {allowRanking && (\n          <Box\n            style={{\n              paddingRight: '0.2em',\n              paddingTop: '0.5em',\n              paddingBottom: '0.5em',\n              float: 'right',\n            }}\n          >\n            <Tooltip title={t('ranking.top')}>\n              <IconButton size=\"small\" onClick={() => rank('top')}>\n                <VerticalAlignTopIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.up')}>\n              <IconButton size=\"small\" onClick={() => rank('up')}>\n                <KeyboardArrowUpIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.down')}>\n              <IconButton size=\"small\" onClick={() => rank('down')}>\n                <KeyboardArrowDownIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.bottom')}>\n              <IconButton size=\"small\" onClick={() => rank('bottom')}>\n                <VerticalAlignBottomIcon />\n              </IconButton>\n            </Tooltip>\n          </Box>\n        )}\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"PostsGridItem.esm.js","sources":["../../../src/components/PostsGrid/PostsGridItem.tsx"],"sourcesContent":["import {\n  PostResponse,\n  PostType,\n  QetaSignal,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport React, { useEffect, useState } from 'react';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport {\n  Box,\n  Card,\n  CardActionArea,\n  CardContent,\n  CardMedia,\n  IconButton,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useNavigate } from 'react-router-dom';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { Link } from '@backstage/core-components';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { qetaApiRef } from '../../api';\nimport VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop';\nimport VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom';\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport { UserLink } from '../Links';\nimport { SmallAvatar } from '../Utility/SmallAvatar';\n\nexport interface PostsGridItemProps {\n  post: PostResponse;\n  entity?: string;\n  type?: PostType;\n  allowRanking?: boolean;\n  onRankUpdate?: () => void;\n  collectionId?: number;\n}\n\nexport const PostsGridItem = (props: PostsGridItemProps) => {\n  const { post, entity, allowRanking, onRankUpdate, collectionId } = props;\n  const [views, setViews] = useState(post.views);\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslation();\n\n  const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${post.id}`);\n\n  useEffect(() => {\n    if (lastSignal?.type === 'post_stats') {\n      setViews(lastSignal.views);\n    }\n  }, [lastSignal]);\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const { name, initials, user } = useEntityAuthor(post);\n  const navigate = useNavigate();\n\n  const route = post.type === 'question' ? questionRoute : articleRoute;\n  const href = entity\n    ? `${route({\n        id: post.id.toString(10),\n      })}?entity=${entity}`\n    : route({ id: post.id.toString(10) });\n\n  const rank = (direction: 'top' | 'bottom' | 'up' | 'down') => {\n    if (!collectionId) {\n      return;\n    }\n    qetaApi.rankPostInCollection(collectionId, post.id, direction).then(res => {\n      if (res) {\n        onRankUpdate?.();\n      }\n    });\n  };\n\n  return (\n    <Card style={{ height: '100%' }}>\n      <CardActionArea onClick={() => navigate(href)}>\n        {post.headerImage && (\n          <CardMedia\n            component=\"img\"\n            height=\"140\"\n            image={post.headerImage}\n            alt={post.title}\n          />\n        )}\n        <CardContent style={{ paddingBottom: '0.5rem' }}>\n          <Typography gutterBottom variant=\"h6\" component=\"div\">\n            {post.title}\n          </Typography>\n          <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n            {DOMPurify.sanitize(\n              truncate(removeMarkdownFormatting(post.content), 400),\n            )}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n      <CardContent style={{ paddingTop: '0.5rem' }}>\n        <TagsAndEntities entity={post} />\n        <Box style={{ paddingLeft: '0.2rem', paddingTop: '0.5rem' }}>\n          <Typography variant=\"caption\">\n            <SmallAvatar\n              src={user?.spec?.profile?.picture}\n              alt={name}\n              variant=\"rounded\"\n            >\n              {initials}\n            </SmallAvatar>\n            <UserLink entityRef={post.author} anonymous={post.anonymous} />{' '}\n            <Link to={href} className=\"qetaPostListItemQuestionBtn\">\n              <RelativeTimeWithTooltip value={post.created} />\n            </Link>\n            {' · '}\n            {t('common.views', { count: views })}\n          </Typography>\n        </Box>\n        {allowRanking && (\n          <Box\n            style={{\n              paddingRight: '0.2em',\n              paddingTop: '0.5em',\n              paddingBottom: '0.5em',\n              float: 'right',\n            }}\n          >\n            <Tooltip title={t('ranking.top')}>\n              <IconButton size=\"small\" onClick={() => rank('top')}>\n                <VerticalAlignTopIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.up')}>\n              <IconButton size=\"small\" onClick={() => rank('up')}>\n                <KeyboardArrowUpIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.down')}>\n              <IconButton size=\"small\" onClick={() => rank('down')}>\n                <KeyboardArrowDownIcon />\n              </IconButton>\n            </Tooltip>\n            <Tooltip title={t('ranking.bottom')}>\n              <IconButton size=\"small\" onClick={() => rank('bottom')}>\n                <VerticalAlignBottomIcon />\n              </IconButton>\n            </Tooltip>\n          </Box>\n        )}\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6Ca,MAAA,aAAA,GAAgB,CAAC,KAA8B,KAAA;AAC1D,EAAA,MAAM,EAAE,IAAM,EAAA,MAAA,EAAQ,YAAc,EAAA,YAAA,EAAc,cAAiB,GAAA,KAAA;AACnE,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,KAAK,KAAK,CAAA;AAC7C,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,MAAM,EAAE,UAAW,EAAA,GAAI,UAAsB,CAAa,UAAA,EAAA,IAAA,CAAK,EAAE,CAAE,CAAA,CAAA;AAEnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,UAAA,EAAY,SAAS,YAAc,EAAA;AACrC,MAAA,QAAA,CAAS,WAAW,KAAK,CAAA;AAAA;AAC3B,GACF,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,aAAA,GAAgB,YAAY,gBAAgB,CAAA;AAClD,EAAM,MAAA,YAAA,GAAe,YAAY,eAAe,CAAA;AAChD,EAAA,MAAM,EAAE,IAAM,EAAA,QAAA,EAAU,IAAK,EAAA,GAAI,gBAAgB,IAAI,CAAA;AACrD,EAAA,MAAM,WAAW,WAAY,EAAA;AAE7B,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,IAAS,KAAA,UAAA,GAAa,aAAgB,GAAA,YAAA;AACzD,EAAM,MAAA,IAAA,GAAO,MACT,GAAA,CAAA,EAAG,KAAM,CAAA;AAAA,IACP,EAAI,EAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,EAAE;AAAA,GACxB,CAAC,CAAW,QAAA,EAAA,MAAM,CACnB,CAAA,GAAA,KAAA,CAAM,EAAE,EAAA,EAAI,IAAK,CAAA,EAAA,CAAG,QAAS,CAAA,EAAE,GAAG,CAAA;AAEtC,EAAM,MAAA,IAAA,GAAO,CAAC,SAAgD,KAAA;AAC5D,IAAA,IAAI,CAAC,YAAc,EAAA;AACjB,MAAA;AAAA;AAEF,IAAA,OAAA,CAAQ,qBAAqB,YAAc,EAAA,IAAA,CAAK,IAAI,SAAS,CAAA,CAAE,KAAK,CAAO,GAAA,KAAA;AACzE,MAAA,IAAI,GAAK,EAAA;AACP,QAAe,YAAA,IAAA;AAAA;AACjB,KACD,CAAA;AAAA,GACH;AAEA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,KAAO,EAAA,EAAE,QAAQ,MAAO,EAAA,EAAA,kBAC3BA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,SAAS,MAAM,QAAA,CAAS,IAAI,CAAA,EAAA,EACzC,KAAK,WACJ,oBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,MAAO,EAAA,KAAA;AAAA,MACP,OAAO,IAAK,CAAA,WAAA;AAAA,MACZ,KAAK,IAAK,CAAA;AAAA;AAAA,GACZ,kBAEDA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAO,EAAA,EAAE,aAAe,EAAA,QAAA,EACnC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,YAAA,EAAY,IAAC,EAAA,OAAA,EAAQ,IAAK,EAAA,SAAA,EAAU,KAC7C,EAAA,EAAA,IAAA,CAAK,KACR,CAAA,kBACCA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAQ,KAAM,EAAA,eAAA,EAAgB,YAAY,EAAA,IAAA,EAAA,EAC3D,SAAU,CAAA,QAAA;AAAA,IACT,QAAS,CAAA,wBAAA,CAAyB,IAAK,CAAA,OAAO,GAAG,GAAG;AAAA,GAExD,CACF,CACF,CAAA,kBACCA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,KAAO,EAAA,EAAE,UAAY,EAAA,QAAA,EAChC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,eAAgB,EAAA,EAAA,MAAA,EAAQ,IAAM,EAAA,CAAA,kBAC9BA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,KAAO,EAAA,EAAE,WAAa,EAAA,QAAA,EAAU,UAAY,EAAA,QAAA,EAC/C,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAClB,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,IAAM,EAAA,IAAA,EAAM,OAAS,EAAA,OAAA;AAAA,MAC1B,GAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA;AAAA,KAAA;AAAA,IAEP;AAAA,GAEH,kBAAAA,cAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAW,KAAK,MAAQ,EAAA,SAAA,EAAW,IAAK,CAAA,SAAA,EAAW,GAAG,GAChE,kBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAI,MAAM,SAAU,EAAA,6BAAA,EAAA,kBACvBA,cAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,EAAwB,KAAO,EAAA,IAAA,CAAK,OAAS,EAAA,CAChD,GACC,QACA,EAAA,CAAA,CAAE,cAAgB,EAAA,EAAE,OAAO,KAAM,EAAC,CACrC,CACF,GACC,YACC,oBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,YAAc,EAAA,OAAA;AAAA,QACd,UAAY,EAAA,OAAA;AAAA,QACZ,aAAe,EAAA,OAAA;AAAA,QACf,KAAO,EAAA;AAAA;AACT,KAAA;AAAA,iDAEC,OAAQ,EAAA,EAAA,KAAA,EAAO,EAAE,aAAa,CAAA,EAAA,+CAC5B,UAAW,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,OAAA,EAAS,MAAM,IAAK,CAAA,KAAK,qBAC/CA,cAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAqB,CACxB,CACF,CAAA;AAAA,iDACC,OAAQ,EAAA,EAAA,KAAA,EAAO,EAAE,YAAY,CAAA,EAAA,+CAC3B,UAAW,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,OAAA,EAAS,MAAM,IAAK,CAAA,IAAI,qBAC9CA,cAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAoB,CACvB,CACF,CAAA;AAAA,iDACC,OAAQ,EAAA,EAAA,KAAA,EAAO,EAAE,cAAc,CAAA,EAAA,+CAC7B,UAAW,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,OAAA,EAAS,MAAM,IAAK,CAAA,MAAM,qBAChDA,cAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAsB,CACzB,CACF,CAAA;AAAA,iDACC,OAAQ,EAAA,EAAA,KAAA,EAAO,EAAE,gBAAgB,CAAA,EAAA,+CAC/B,UAAW,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,OAAA,EAAS,MAAM,IAAK,CAAA,QAAQ,qBAClDA,cAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,IAAwB,CAC3B,CACF;AAAA,GAGN,CACF,CAAA;AAEJ;;;;"}

package/dist/components/SearchBar/SearchBar.esm.js

@@ -9,7 +9,8 @@ const useStyles = makeStyles(
       padding: "2px 4px",
       display: "flex",
       alignItems: "center",
-      minWidth: 300
+      minWidth: 300,
+      boxShadow: "none"
     },
     input: {
       marginLeft: theme.spacing(1),

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  IconButton,\n  InputBase,\n  makeStyles,\n  Paper,\n  Theme,\n} from '@material-ui/core';\nimport SearchIcon from '@material-ui/icons/Search';\nimport CloseIcon from '@material-ui/icons/Close';\n\nexport type QetaSearchBarClassKeys =\n  | 'root'\n  | 'input'\n  | 'iconButton'\n  | 'divider';\n\nconst useStyles = makeStyles(\n  (theme: Theme) => ({\n    root: {\n      padding: '2px 4px',\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 300,\n    },\n    input: {\n      marginLeft: theme.spacing(1),\n      flex: 1,\n    },\n    iconButton: {\n      padding: 5,\n    },\n    divider: {\n      height: 28,\n      margin: 4,\n    },\n  }),\n  { name: 'QetaSearchBar' },\n);\n\nexport const SearchBar = (props: {\n  label: string;\n  onSearch: (query: string) => void;\n}) => {\n  const { label, onSearch } = props;\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const classes = useStyles();\n\n  return (\n    <Paper component=\"form\" className={classes.root}>\n      <IconButton\n        type=\"button\"\n        aria-label=\"search\"\n        className={classes.iconButton}\n      >\n        <SearchIcon color=\"disabled\" />\n      </IconButton>\n      <InputBase\n        className={classes.input}\n        placeholder={label}\n        value={searchQuery}\n        inputProps={{\n          'aria-label': label,\n          onChange: (\n            event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n          ) => {\n            onSearch(event.target.value);\n            setSearchQuery(event.target.value);\n          },\n        }}\n      />\n      {searchQuery && (\n        <IconButton\n          type=\"button\"\n          aria-label=\"clear\"\n          className={classes.iconButton}\n          onClick={() => {\n            onSearch('');\n            setSearchQuery('');\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </Paper>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAC,KAAkB,MAAA;AAAA,IACjB,IAAM,EAAA;AAAA,MACJ,OAAS,EAAA,SAAA;AAAA,MACT,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,KAAO,EAAA;AAAA,MACL,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,IAAM,EAAA;AAAA,KACR;AAAA,IACA,UAAY,EAAA;AAAA,MACV,OAAS,EAAA;AAAA,KACX;AAAA,IACA,OAAS,EAAA;AAAA,MACP,MAAQ,EAAA,EAAA;AAAA,MACR,MAAQ,EAAA;AAAA;AACV,GACF,CAAA;AAAA,EACA,EAAE,MAAM,eAAgB;AAC1B,CAAA;AAEa,MAAA,SAAA,GAAY,CAAC,KAGpB,KAAA;AACJ,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AAC5B,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,KAAA,CAAM,SAAS,EAAE,CAAA;AACvD,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,2CACG,KAAM,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,SAAA,EAAW,QAAQ,IACzC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,QAAA;AAAA,MACL,YAAW,EAAA,QAAA;AAAA,MACX,WAAW,OAAQ,CAAA;AAAA,KAAA;AAAA,oBAEnB,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAM,UAAW,EAAA;AAAA,GAE/B,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,KAAA;AAAA,MACnB,WAAa,EAAA,KAAA;AAAA,MACb,KAAO,EAAA,WAAA;AAAA,MACP,UAAY,EAAA;AAAA,QACV,YAAc,EAAA,KAAA;AAAA,QACd,QAAA,EAAU,CACR,KACG,KAAA;AACH,UAAS,QAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAC3B,UAAe,cAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA;AACnC;AACF;AAAA,KAED,WACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,QAAA;AAAA,MACL,YAAW,EAAA,OAAA;AAAA,MACX,WAAW,OAAQ,CAAA,UAAA;AAAA,MACnB,SAAS,MAAM;AACb,QAAA,QAAA,CAAS,EAAE,CAAA;AACX,QAAA,cAAA,CAAe,EAAE,CAAA;AAAA;AACnB,KAAA;AAAA,wCAEC,SAAU,EAAA,IAAA;AAAA,GAGjB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  IconButton,\n  InputBase,\n  makeStyles,\n  Paper,\n  Theme,\n} from '@material-ui/core';\nimport SearchIcon from '@material-ui/icons/Search';\nimport CloseIcon from '@material-ui/icons/Close';\n\nexport type QetaSearchBarClassKeys =\n  | 'root'\n  | 'input'\n  | 'iconButton'\n  | 'divider';\n\nconst useStyles = makeStyles(\n  (theme: Theme) => ({\n    root: {\n      padding: '2px 4px',\n      display: 'flex',\n      alignItems: 'center',\n      minWidth: 300,\n      boxShadow: 'none',\n    },\n    input: {\n      marginLeft: theme.spacing(1),\n      flex: 1,\n    },\n    iconButton: {\n      padding: 5,\n    },\n    divider: {\n      height: 28,\n      margin: 4,\n    },\n  }),\n  { name: 'QetaSearchBar' },\n);\n\nexport const SearchBar = (props: {\n  label: string;\n  onSearch: (query: string) => void;\n}) => {\n  const { label, onSearch } = props;\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const classes = useStyles();\n\n  return (\n    <Paper component=\"form\" className={classes.root}>\n      <IconButton\n        type=\"button\"\n        aria-label=\"search\"\n        className={classes.iconButton}\n      >\n        <SearchIcon color=\"disabled\" />\n      </IconButton>\n      <InputBase\n        className={classes.input}\n        placeholder={label}\n        value={searchQuery}\n        inputProps={{\n          'aria-label': label,\n          onChange: (\n            event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n          ) => {\n            onSearch(event.target.value);\n            setSearchQuery(event.target.value);\n          },\n        }}\n      />\n      {searchQuery && (\n        <IconButton\n          type=\"button\"\n          aria-label=\"clear\"\n          className={classes.iconButton}\n          onClick={() => {\n            onSearch('');\n            setSearchQuery('');\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </Paper>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAC,KAAkB,MAAA;AAAA,IACjB,IAAM,EAAA;AAAA,MACJ,OAAS,EAAA,SAAA;AAAA,MACT,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,QAAU,EAAA,GAAA;AAAA,MACV,SAAW,EAAA;AAAA,KACb;AAAA,IACA,KAAO,EAAA;AAAA,MACL,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC3B,IAAM,EAAA;AAAA,KACR;AAAA,IACA,UAAY,EAAA;AAAA,MACV,OAAS,EAAA;AAAA,KACX;AAAA,IACA,OAAS,EAAA;AAAA,MACP,MAAQ,EAAA,EAAA;AAAA,MACR,MAAQ,EAAA;AAAA;AACV,GACF,CAAA;AAAA,EACA,EAAE,MAAM,eAAgB;AAC1B,CAAA;AAEa,MAAA,SAAA,GAAY,CAAC,KAGpB,KAAA;AACJ,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AAC5B,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,KAAA,CAAM,SAAS,EAAE,CAAA;AACvD,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,2CACG,KAAM,EAAA,EAAA,SAAA,EAAU,MAAO,EAAA,SAAA,EAAW,QAAQ,IACzC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,QAAA;AAAA,MACL,YAAW,EAAA,QAAA;AAAA,MACX,WAAW,OAAQ,CAAA;AAAA,KAAA;AAAA,oBAEnB,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAM,UAAW,EAAA;AAAA,GAE/B,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,KAAA;AAAA,MACnB,WAAa,EAAA,KAAA;AAAA,MACb,KAAO,EAAA,WAAA;AAAA,MACP,UAAY,EAAA;AAAA,QACV,YAAc,EAAA,KAAA;AAAA,QACd,QAAA,EAAU,CACR,KACG,KAAA;AACH,UAAS,QAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAC3B,UAAe,cAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA;AACnC;AACF;AAAA,KAED,WACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,QAAA;AAAA,MACL,YAAW,EAAA,OAAA;AAAA,MACX,WAAW,OAAQ,CAAA,UAAA;AAAA,MACnB,SAAS,MAAM;AACb,QAAA,QAAA,CAAS,EAAE,CAAA;AACX,QAAA,cAAA,CAAe,EAAE,CAAA;AAAA;AACnB,KAAA;AAAA,wCAEC,SAAU,EAAA,IAAA;AAAA,GAGjB,CAAA;AAEJ;;;;"}

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

@@ -14,11 +14,11 @@ import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import Visibility from '@material-ui/icons/Visibility';
 
 const UserTooltip = (props) => {
-  const { entityRef } = props;
+  const { entityRef, anonymous } = props;
   const { t } = useTranslation();
   const { name, initials, user, secondaryTitle } = useUserInfo(
     entityRef,
-    entityRef === "anonymous"
+    anonymous ?? entityRef === "anonymous"
   );
   const { value: currentUser } = useIdentityApi(
     (api) => api.getBackstageIdentity(),

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

@@ -1 +1 @@
-{"version":3,"file":"UserChip.esm.js","sources":["../../../src/components/TagsAndEntities/UserChip.tsx"],"sourcesContent":["import { useRouteRef } from '@backstage/core-plugin-api';\nimport { userRouteRef } from '../../routes';\nimport {\n  useIdentityApi,\n  useTranslation,\n  useUserFollow,\n  useUserInfo,\n} from '../../hooks';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport React from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  Avatar,\n  Box,\n  Button,\n  Chip,\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';\n\nexport const UserTooltip = (props: { entityRef: string }) => {\n  const { entityRef } = props;\n  const { t } = useTranslation();\n  const { name, initials, user, secondaryTitle } = useUserInfo(\n    entityRef,\n    entityRef === 'anonymous',\n  );\n\n  const { value: currentUser } = useIdentityApi(\n    api => api.getBackstageIdentity(),\n    [],\n  );\n  const users = useUserFollow();\n\n  return (\n    <Grid container style={{ padding: '0.5em' }} spacing={1}>\n      <Grid item xs={12}>\n        <Box style={{ display: 'flex', alignItems: 'center' }}>\n          <Box style={{ display: 'inline-block', marginRight: '1em' }}>\n            <Avatar\n              src={user?.spec?.profile?.picture}\n              alt={name}\n              variant=\"rounded\"\n              style={{ width: '1em', height: '1em' }}\n            >\n              {initials}\n            </Avatar>\n          </Box>\n          <Typography variant=\"h6\" style={{ display: 'inline' }}>\n            {name}\n          </Typography>\n        </Box>\n      </Grid>\n      <Grid item xs={12}>\n        <Typography variant=\"subtitle2\">{secondaryTitle}</Typography>\n      </Grid>\n      {!users.loading && currentUser?.userEntityRef !== entityRef && (\n        <Grid item xs={12}>\n          <Button\n            size=\"small\"\n            variant=\"outlined\"\n            color={users.isFollowingUser(entityRef) ? 'secondary' : 'primary'}\n            onClick={() => {\n              if (users.isFollowingUser(entityRef)) {\n                users.unfollowUser(entityRef);\n              } else {\n                users.followUser(entityRef);\n              }\n            }}\n            startIcon={\n              users.isFollowingUser(entityRef) ? (\n                <VisibilityOff />\n              ) : (\n                <Visibility />\n              )\n            }\n          >\n            {users.isFollowingUser(entityRef)\n              ? t('userButton.unfollow')\n              : t('userButton.follow')}\n          </Button>\n        </Grid>\n      )}\n    </Grid>\n  );\n};\n\nexport const UserChip = (props: { entityRef: string }) => {\n  const navigate = useNavigate();\n  const { entityRef } = props;\n  const userRoute = useRouteRef(userRouteRef);\n  const { t } = useTranslation();\n  const { primaryTitle: userName } = useEntityPresentation(\n    entityRef.startsWith('user:') ? entityRef : `user:${entityRef}`,\n  );\n  if (entityRef === 'anonymous') {\n    return <>{t('userLink.anonymous')}</>;\n  }\n  return (\n    <Tooltip\n      arrow\n      title={<UserTooltip entityRef={entityRef} />}\n      enterDelay={400}\n      interactive\n    >\n      <Chip\n        label={userName}\n        size=\"small\"\n        className=\"qetaTagChip\"\n        component=\"a\"\n        onClick={() => {\n          navigate(`${userRoute()}/${entityRef}`);\n        }}\n        clickable\n      />\n    </Tooltip>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"UserChip.esm.js","sources":["../../../src/components/TagsAndEntities/UserChip.tsx"],"sourcesContent":["import { useRouteRef } from '@backstage/core-plugin-api';\nimport { userRouteRef } from '../../routes';\nimport {\n  useIdentityApi,\n  useTranslation,\n  useUserFollow,\n  useUserInfo,\n} from '../../hooks';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport React from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  Avatar,\n  Box,\n  Button,\n  Chip,\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';\n\nexport const UserTooltip = (props: {\n  entityRef: string;\n  anonymous?: boolean;\n}) => {\n  const { entityRef, anonymous } = props;\n  const { t } = useTranslation();\n  const { name, initials, user, secondaryTitle } = useUserInfo(\n    entityRef,\n    anonymous ?? entityRef === 'anonymous',\n  );\n\n  const { value: currentUser } = useIdentityApi(\n    api => api.getBackstageIdentity(),\n    [],\n  );\n  const users = useUserFollow();\n\n  return (\n    <Grid container style={{ padding: '0.5em' }} spacing={1}>\n      <Grid item xs={12}>\n        <Box style={{ display: 'flex', alignItems: 'center' }}>\n          <Box style={{ display: 'inline-block', marginRight: '1em' }}>\n            <Avatar\n              src={user?.spec?.profile?.picture}\n              alt={name}\n              variant=\"rounded\"\n              style={{ width: '1em', height: '1em' }}\n            >\n              {initials}\n            </Avatar>\n          </Box>\n          <Typography variant=\"h6\" style={{ display: 'inline' }}>\n            {name}\n          </Typography>\n        </Box>\n      </Grid>\n      <Grid item xs={12}>\n        <Typography variant=\"subtitle2\">{secondaryTitle}</Typography>\n      </Grid>\n      {!users.loading && currentUser?.userEntityRef !== entityRef && (\n        <Grid item xs={12}>\n          <Button\n            size=\"small\"\n            variant=\"outlined\"\n            color={users.isFollowingUser(entityRef) ? 'secondary' : 'primary'}\n            onClick={() => {\n              if (users.isFollowingUser(entityRef)) {\n                users.unfollowUser(entityRef);\n              } else {\n                users.followUser(entityRef);\n              }\n            }}\n            startIcon={\n              users.isFollowingUser(entityRef) ? (\n                <VisibilityOff />\n              ) : (\n                <Visibility />\n              )\n            }\n          >\n            {users.isFollowingUser(entityRef)\n              ? t('userButton.unfollow')\n              : t('userButton.follow')}\n          </Button>\n        </Grid>\n      )}\n    </Grid>\n  );\n};\n\nexport const UserChip = (props: { entityRef: string }) => {\n  const navigate = useNavigate();\n  const { entityRef } = props;\n  const userRoute = useRouteRef(userRouteRef);\n  const { t } = useTranslation();\n  const { primaryTitle: userName } = useEntityPresentation(\n    entityRef.startsWith('user:') ? entityRef : `user:${entityRef}`,\n  );\n  if (entityRef === 'anonymous') {\n    return <>{t('userLink.anonymous')}</>;\n  }\n  return (\n    <Tooltip\n      arrow\n      title={<UserTooltip entityRef={entityRef} />}\n      enterDelay={400}\n      interactive\n    >\n      <Chip\n        label={userName}\n        size=\"small\"\n        className=\"qetaTagChip\"\n        component=\"a\"\n        onClick={() => {\n          navigate(`${userRoute()}/${entityRef}`);\n        }}\n        clickable\n      />\n    </Tooltip>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ const useStyles = makeStyles((theme) => ({
   container: {
     width: "100%",
     backgroundColor: theme.palette.background.paper,
-    marginTop: "1em"
+    marginBottom: "1em"
   }
 }));
 const RightListContainer = (props) => {

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

@@ -1 +1 @@
-{"version":3,"file":"RightList.esm.js","sources":["../../../src/components/Utility/RightList.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, List, ListSubheader, makeStyles, Paper } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    width: '100%',\n    backgroundColor: theme.palette.background.paper,\n    marginTop: '1em',\n  },\n}));\n\nexport const RightListContainer = (props: { children: React.ReactNode }) => {\n  const styles = useStyles();\n  return (\n    <Box display={{ md: 'none', lg: 'block' }}>\n      <Paper className={styles.container}>{props.children}</Paper>\n    </Box>\n  );\n};\n\nexport const RightList = (props: {\n  children: React.ReactNode;\n  title: string;\n  icon?: React.ReactNode;\n}) => {\n  return (\n    <List\n      component=\"nav\"\n      aria-labelledby=\"nested-list-subheader\"\n      subheader={\n        <ListSubheader\n          disableSticky\n          component=\"div\"\n          id=\"nested-list-subheader\"\n          color=\"primary\"\n          style={{\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {props.title}\n          {props.icon}\n        </ListSubheader>\n      }\n    >\n      {props.children}\n    </List>\n  );\n};\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,SAAW,EAAA;AAAA,IACT,KAAO,EAAA,MAAA;AAAA,IACP,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,KAAA;AAAA,IAC1C,SAAW,EAAA;AAAA;AAEf,CAAE,CAAA,CAAA;AAEW,MAAA,kBAAA,GAAqB,CAAC,KAAyC,KAAA;AAC1E,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,oDACG,GAAI,EAAA,EAAA,OAAA,EAAS,EAAE,EAAA,EAAI,QAAQ,EAAI,EAAA,OAAA,EAC9B,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,SAAM,SAAW,EAAA,MAAA,CAAO,SAAY,EAAA,EAAA,KAAA,CAAM,QAAS,CACtD,CAAA;AAEJ;AAEa,MAAA,SAAA,GAAY,CAAC,KAIpB,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,iBAAgB,EAAA,uBAAA;AAAA,MAChB,SACE,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,aAAa,EAAA,IAAA;AAAA,UACb,SAAU,EAAA,KAAA;AAAA,UACV,EAAG,EAAA,uBAAA;AAAA,UACH,KAAM,EAAA,SAAA;AAAA,UACN,KAAO,EAAA;AAAA,YACL,UAAY,EAAA,QAAA;AAAA,YACZ,QAAU,EAAA,QAAA;AAAA,YACV,YAAc,EAAA;AAAA;AAChB,SAAA;AAAA,QAEC,KAAM,CAAA,KAAA;AAAA,QACN,KAAM,CAAA;AAAA;AACT,KAAA;AAAA,IAGD,KAAM,CAAA;AAAA,GACT;AAEJ;;;;"}
+{"version":3,"file":"RightList.esm.js","sources":["../../../src/components/Utility/RightList.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, List, ListSubheader, makeStyles, Paper } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    width: '100%',\n    backgroundColor: theme.palette.background.paper,\n    marginBottom: '1em',\n  },\n}));\n\nexport const RightListContainer = (props: { children: React.ReactNode }) => {\n  const styles = useStyles();\n  return (\n    <Box display={{ md: 'none', lg: 'block' }}>\n      <Paper className={styles.container}>{props.children}</Paper>\n    </Box>\n  );\n};\n\nexport const RightList = (props: {\n  children: React.ReactNode;\n  title: string;\n  icon?: React.ReactNode;\n}) => {\n  return (\n    <List\n      component=\"nav\"\n      aria-labelledby=\"nested-list-subheader\"\n      subheader={\n        <ListSubheader\n          disableSticky\n          component=\"div\"\n          id=\"nested-list-subheader\"\n          color=\"primary\"\n          style={{\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {props.title}\n          {props.icon}\n        </ListSubheader>\n      }\n    >\n      {props.children}\n    </List>\n  );\n};\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,SAAW,EAAA;AAAA,IACT,KAAO,EAAA,MAAA;AAAA,IACP,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,UAAW,CAAA,KAAA;AAAA,IAC1C,YAAc,EAAA;AAAA;AAElB,CAAE,CAAA,CAAA;AAEW,MAAA,kBAAA,GAAqB,CAAC,KAAyC,KAAA;AAC1E,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAA,oDACG,GAAI,EAAA,EAAA,OAAA,EAAS,EAAE,EAAA,EAAI,QAAQ,EAAI,EAAA,OAAA,EAC9B,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,SAAM,SAAW,EAAA,MAAA,CAAO,SAAY,EAAA,EAAA,KAAA,CAAM,QAAS,CACtD,CAAA;AAEJ;AAEa,MAAA,SAAA,GAAY,CAAC,KAIpB,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,iBAAgB,EAAA,uBAAA;AAAA,MAChB,SACE,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,aAAa,EAAA,IAAA;AAAA,UACb,SAAU,EAAA,KAAA;AAAA,UACV,EAAG,EAAA,uBAAA;AAAA,UACH,KAAM,EAAA,SAAA;AAAA,UACN,KAAO,EAAA;AAAA,YACL,UAAY,EAAA,QAAA;AAAA,YACZ,QAAU,EAAA,QAAA;AAAA,YACV,YAAc,EAAA;AAAA;AAChB,SAAA;AAAA,QAEC,KAAM,CAAA,KAAA;AAAA,QACN,KAAM,CAAA;AAAA;AACT,KAAA;AAAA,IAGD,KAAM,CAAA;AAAA,GACT;AAEJ;;;;"}

package/dist/hooks/useEntityAuthor.esm.js

@@ -71,19 +71,21 @@ const useUserInfo = (entityRef, anonymous) => {
   }, [identityApi]);
   useEffect(() => {
     let displayName = userName;
-    if (anonymous) {
-      displayName = t("userLink.anonymous");
-    } else if (currentUser) {
+    if (currentUser) {
       const currentUserRef = parseEntityRef(currentUser);
       const userRef = parseEntityRef(ref);
       if (currentUserRef.name === userRef.name && currentUserRef.namespace === userRef.namespace) {
-        displayName = t("userLink.you");
+        displayName = `${t("userLink.you")}${anonymous ? ` (${t("userLink.anonymous").toLocaleLowerCase("en-US")})` : ""}`;
+      } else if (anonymous) {
+        displayName = t("userLink.anonymous");
       }
+    } else if (anonymous) {
+      displayName = t("userLink.anonymous");
     }
     setName(displayName);
   }, [ref, anonymous, currentUser, userName, t]);
   useEffect(() => {
-    const init = (name ?? "").split(" ").map((p) => p[0]).join("").substring(0, 2).toUpperCase();
+    const init = (name ?? "").replace(/[^a-zA-Z]/g, "").split(" ").map((p) => p[0]).join("").substring(0, 2).toUpperCase();
     setInitials(init);
   }, [name]);
   return { name, initials, user, secondaryTitle, Icon };

package/dist/hooks/useEntityAuthor.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEntityAuthor.esm.js","sources":["../../src/hooks/useEntityAuthor.ts"],"sourcesContent":["import { parseEntityRef, UserEntity } from '@backstage/catalog-model';\nimport { CatalogApi } from '@backstage/catalog-client';\nimport DataLoader from 'dataloader';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  useEntityPresentation,\n} from '@backstage/plugin-catalog-react';\nimport React, { useEffect } from 'react';\nimport {\n  AnswerResponse,\n  CollectionResponse,\n  PostResponse,\n  UserResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation } from './useTranslation';\n\nconst userCache: Map<string, UserEntity> = new Map();\nconst dataLoaderFactory = (catalogApi: CatalogApi) =>\n  new DataLoader(\n    async (entityRefs: readonly string[]) => {\n      const { items } = await catalogApi.getEntitiesByRefs({\n        fields: [\n          'kind',\n          'metadata.name',\n          'metadata.namespace',\n          'spec.profile.displayName',\n          'spec.profile.picture',\n        ],\n        entityRefs: entityRefs as string[],\n      });\n\n      entityRefs.forEach((entityRef, index) => {\n        userCache.set(entityRef, items[index] as UserEntity);\n      });\n      return items;\n    },\n    {\n      name: 'EntityAuthorLoader',\n      cacheMap: new Map(),\n      maxBatchSize: 100,\n      batchScheduleFn: callback => {\n        setTimeout(callback, 50);\n      },\n    },\n  );\n\nexport const useUserInfo = (entityRef: string, anonymous?: boolean) => {\n  const catalogApi = useApi(catalogApiRef);\n  const identityApi = useApi(identityApiRef);\n  const { t } = useTranslation();\n  const [name, setName] = React.useState<string | undefined>(undefined);\n  const [user, setUser] = React.useState<UserEntity | null>(null);\n  const [initials, setInitials] = React.useState<string | null>(null);\n  const [currentUser, setCurrentUser] = React.useState<string | null>(null);\n  const ref = entityRef.startsWith('user:') ? entityRef : `user:${entityRef}`;\n\n  const {\n    primaryTitle: userName,\n    secondaryTitle,\n    Icon,\n  } = useEntityPresentation(ref);\n\n  useEffect(() => {\n    if (anonymous) {\n      return;\n    }\n\n    if (userCache.get(ref)) {\n      setUser(userCache.get(ref) as UserEntity);\n      return;\n    }\n\n    dataLoaderFactory(catalogApi)\n      .load(ref)\n      .then(data => {\n        if (data) {\n          setUser(data as UserEntity);\n        } else {\n          setUser(null);\n        }\n      })\n      .catch(() => {\n        setUser(null);\n      });\n  }, [catalogApi, ref, anonymous]);\n\n  useEffect(() => {\n    identityApi.getBackstageIdentity().then(res => {\n      setCurrentUser(res.userEntityRef ?? 'user:default/guest');\n    });\n  }, [identityApi]);\n\n  useEffect(() => {\n    let displayName = userName;\n    if (anonymous) {\n      displayName = t('userLink.anonymous');\n    } else if (currentUser) {\n      const currentUserRef = parseEntityRef(currentUser);\n      const userRef = parseEntityRef(ref);\n      if (\n        currentUserRef.name === userRef.name &&\n        currentUserRef.namespace === userRef.namespace\n      ) {\n        displayName = t('userLink.you');\n      }\n    }\n    setName(displayName);\n  }, [ref, anonymous, currentUser, userName, t]);\n\n  useEffect(() => {\n    const init = (name ?? '')\n      .split(' ')\n      .map(p => p[0])\n      .join('')\n      .substring(0, 2)\n      .toUpperCase();\n    setInitials(init);\n  }, [name]);\n\n  return { name, initials, user, secondaryTitle, Icon };\n};\n\nexport const useEntityAuthor = (\n  entity: PostResponse | AnswerResponse | CollectionResponse | UserResponse,\n) => {\n  const anonymous = 'anonymous' in entity ? entity.anonymous ?? false : false;\n  const author =\n    // eslint-disable-next-line no-nested-ternary\n    'author' in entity\n      ? entity.author\n      : 'userRef' in entity\n      ? entity.userRef\n      : entity.owner;\n  return useUserInfo(author, anonymous);\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"useEntityAuthor.esm.js","sources":["../../src/hooks/useEntityAuthor.ts"],"sourcesContent":["import { parseEntityRef, UserEntity } from '@backstage/catalog-model';\nimport { CatalogApi } from '@backstage/catalog-client';\nimport DataLoader from 'dataloader';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\nimport {\n  catalogApiRef,\n  useEntityPresentation,\n} from '@backstage/plugin-catalog-react';\nimport React, { useEffect } from 'react';\nimport {\n  AnswerResponse,\n  CollectionResponse,\n  PostResponse,\n  UserResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation } from './useTranslation';\n\nconst userCache: Map<string, UserEntity> = new Map();\nconst dataLoaderFactory = (catalogApi: CatalogApi) =>\n  new DataLoader(\n    async (entityRefs: readonly string[]) => {\n      const { items } = await catalogApi.getEntitiesByRefs({\n        fields: [\n          'kind',\n          'metadata.name',\n          'metadata.namespace',\n          'spec.profile.displayName',\n          'spec.profile.picture',\n        ],\n        entityRefs: entityRefs as string[],\n      });\n\n      entityRefs.forEach((entityRef, index) => {\n        userCache.set(entityRef, items[index] as UserEntity);\n      });\n      return items;\n    },\n    {\n      name: 'EntityAuthorLoader',\n      cacheMap: new Map(),\n      maxBatchSize: 100,\n      batchScheduleFn: callback => {\n        setTimeout(callback, 50);\n      },\n    },\n  );\n\nexport const useUserInfo = (entityRef: string, anonymous?: boolean) => {\n  const catalogApi = useApi(catalogApiRef);\n  const identityApi = useApi(identityApiRef);\n  const { t } = useTranslation();\n  const [name, setName] = React.useState<string | undefined>(undefined);\n  const [user, setUser] = React.useState<UserEntity | null>(null);\n  const [initials, setInitials] = React.useState<string | null>(null);\n  const [currentUser, setCurrentUser] = React.useState<string | null>(null);\n  const ref = entityRef.startsWith('user:') ? entityRef : `user:${entityRef}`;\n\n  const {\n    primaryTitle: userName,\n    secondaryTitle,\n    Icon,\n  } = useEntityPresentation(ref);\n\n  useEffect(() => {\n    if (anonymous) {\n      return;\n    }\n\n    if (userCache.get(ref)) {\n      setUser(userCache.get(ref) as UserEntity);\n      return;\n    }\n\n    dataLoaderFactory(catalogApi)\n      .load(ref)\n      .then(data => {\n        if (data) {\n          setUser(data as UserEntity);\n        } else {\n          setUser(null);\n        }\n      })\n      .catch(() => {\n        setUser(null);\n      });\n  }, [catalogApi, ref, anonymous]);\n\n  useEffect(() => {\n    identityApi.getBackstageIdentity().then(res => {\n      setCurrentUser(res.userEntityRef ?? 'user:default/guest');\n    });\n  }, [identityApi]);\n\n  useEffect(() => {\n    let displayName = userName;\n    if (currentUser) {\n      const currentUserRef = parseEntityRef(currentUser);\n      const userRef = parseEntityRef(ref);\n      if (\n        currentUserRef.name === userRef.name &&\n        currentUserRef.namespace === userRef.namespace\n      ) {\n        displayName = `${t('userLink.you')}${\n          anonymous\n            ? ` (${t('userLink.anonymous').toLocaleLowerCase('en-US')})`\n            : ''\n        }`;\n      } else if (anonymous) {\n        displayName = t('userLink.anonymous');\n      }\n    } else if (anonymous) {\n      displayName = t('userLink.anonymous');\n    }\n    setName(displayName);\n  }, [ref, anonymous, currentUser, userName, t]);\n\n  useEffect(() => {\n    const init = (name ?? '')\n      .replace(/[^a-zA-Z]/g, '')\n      .split(' ')\n      .map(p => p[0])\n      .join('')\n      .substring(0, 2)\n      .toUpperCase();\n    setInitials(init);\n  }, [name]);\n\n  return { name, initials, user, secondaryTitle, Icon };\n};\n\nexport const useEntityAuthor = (\n  entity: PostResponse | AnswerResponse | CollectionResponse | UserResponse,\n) => {\n  const anonymous = 'anonymous' in entity ? entity.anonymous ?? false : false;\n  const author =\n    // eslint-disable-next-line no-nested-ternary\n    'author' in entity\n      ? entity.author\n      : 'userRef' in entity\n      ? entity.userRef\n      : entity.owner;\n  return useUserInfo(author, anonymous);\n};\n"],"names":["React"],"mappings":"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"}

package/dist/index.d.ts

@@ -269,6 +269,7 @@ declare const RelativeTimeWithTooltip: (props: {
 
 declare const UserLink: (props: {
     entityRef: string;
+    anonymous?: boolean;
     linkProps?: LinkProps;
 }) => React.JSX.Element;
 declare const AuthorLink: (props: {

package/package.json

@@ -7,7 +7,7 @@
     "frontend",
     "backstage.io"
   ],
-  "version": "3.15.1",
+  "version": "3.15.3",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "prepublishOnly": "yarn tsc && yarn build",
@@ -56,7 +56,7 @@
     "@backstage/plugin-catalog-react": "^1.14.2",
     "@backstage/plugin-permission-react": "^0.4.28",
     "@backstage/plugin-signals-react": "^0.0.7",
-    "@drodil/backstage-plugin-qeta-common": "^3.15.1",
+    "@drodil/backstage-plugin-qeta-common": "^3.15.3",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
@@ -72,6 +72,7 @@
     "react-relative-time": "^0.0.9",
     "react-syntax-highlighter": "^15.6.1",
     "react-use": "^17.4.0",
+    "react-window": "^1.8.10",
     "recharts": "^2.13.0",
     "remark-gfm": "^4.0.0"
   },
@@ -88,7 +89,8 @@
     "@types/dompurify": "^3.0.0",
     "@types/lodash": "^4.14.199",
     "@types/numeral": "^2",
-    "@types/react-syntax-highlighter": "^15"
+    "@types/react-syntax-highlighter": "^15",
+    "@types/react-window": "^1"
   },
   "files": [
     "dist"