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

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

@@ -13,8 +13,8 @@ import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
+import { useGridPageSize } from '../../hooks/useGridPageSize.esm.js';
 import useDebounce from 'react-use/lib/useDebounce';
-import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
 import { EntitiesGridContent } from './EntitiesGridContent.esm.js';
 import { QetaGridHeader } from '../Utility/QetaGridHeader.esm.js';
 import { FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
@@ -23,8 +23,7 @@ import FilterList from '@material-ui/icons/FilterList';
 const EXPANDED_LOCAL_STORAGE_KEY = "qeta-entities-filters-expanded";
 const EntitiesGrid = () => {
   const [page, setPage] = useState(1);
-  const [pageCount, setPageCount] = useState(1);
-  const [entitiesPerPage, setEntitiesPerPage] = useState(25);
+  const entitiesPerPage = useGridPageSize("entities", 24);
   const [searchQuery, setSearchQuery] = useState("");
   const [showFilterPanel, setShowFilterPanel] = useState(
     localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === "true"
@@ -34,6 +33,9 @@ const EntitiesGrid = () => {
     orderBy: "postsCount",
     searchQuery: ""
   });
+  const [entities, setEntities] = useState([]);
+  const [hasMore, setHasMore] = useState(true);
+  const [total, setTotal] = useState(0);
   useEffect(() => {
     localStorage.setItem(
       EXPANDED_LOCAL_STORAGE_KEY,
@@ -43,6 +45,7 @@ const EntitiesGrid = () => {
   const onFilterChange = (changes) => {
     const changesArray = Array.isArray(changes) ? changes : [changes];
     setPage(1);
+    setEntities([]);
     setFilters((prev) => {
       const newValue = { ...prev };
       for (const { key, value } of changesArray) {
@@ -66,6 +69,7 @@ const EntitiesGrid = () => {
   );
   const onSearchQueryChange = (val) => {
     setPage(1);
+    setEntities([]);
     setSearchQuery(val);
   };
   useDebounce(
@@ -79,9 +83,16 @@ const EntitiesGrid = () => {
   );
   useEffect(() => {
     if (response) {
-      setPageCount(Math.ceil(response.total / entitiesPerPage));
+      if (page === 1) {
+        setEntities(response.entities);
+      } else {
+        setEntities((prev) => [...prev, ...response.entities]);
+      }
+      setHasMore(response.entities.length >= entitiesPerPage);
+      setTotal(response.total);
     }
-  }, [response, entitiesPerPage]);
+  }, [response, entitiesPerPage, page]);
+  const combinedResponse = response ? { ...response, entities, total } : void 0;
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(
       QetaGridHeader,
@@ -111,19 +122,11 @@ const EntitiesGrid = () => {
     /* @__PURE__ */ jsx(
       EntitiesGridContent,
       {
-        response,
+        response: combinedResponse,
         loading,
-        error
-      }
-    ),
-    response && response?.total > 0 && /* @__PURE__ */ jsx(
-      QetaPagination,
-      {
-        pageSize: entitiesPerPage,
-        handlePageChange: (_e, p) => setPage(p),
-        handlePageSizeChange: (e) => setEntitiesPerPage(Number(e.target.value)),
-        page,
-        pageCount
+        error,
+        hasMore,
+        loadNextPage: () => setPage((prev) => prev + 1)
       }
     )
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"EntitiesGrid.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGrid.tsx"],"sourcesContent":["import { Box } from '@material-ui/core';\nimport { useEffect, useState } from 'react';\nimport { useQetaApi } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { EntitiesGridContent } from './EntitiesGridContent';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaGridHeader } from '../Utility/QetaGridHeader';\n\nimport { Change, EntityFilters, FilterPanel } from '../FilterPanel/FilterPanel';\nimport { Collapse, Button } from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-entities-filters-expanded';\n\nexport const EntitiesGrid = () => {\n  const [page, setPage] = useState(1);\n  const [pageCount, setPageCount] = useState(1);\n  const [entitiesPerPage, setEntitiesPerPage] = useState(25);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [showFilterPanel, setShowFilterPanel] = useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [filters, setFilters] = useState<EntityFilters>({\n    order: 'desc',\n    orderBy: 'postsCount',\n    searchQuery: '',\n  });\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const onFilterChange = (\n    changes: Change<EntityFilters> | Change<EntityFilters>[],\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  const { t } = useTranslationRef(qetaTranslationRef);\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    300,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    if (response) {\n      setPageCount(Math.ceil(response.total / entitiesPerPage));\n    }\n  }, [response, entitiesPerPage]);\n\n  return (\n    <Box>\n      <QetaGridHeader\n        title={\n          response ? t('common.entities', { count: response?.total ?? 0 }) : ''\n        }\n        searchBarLabel={t('entitiesPage.search.label')}\n        loading={loading}\n        onSearch={onSearchQueryChange}\n        buttons={\n          <Button\n            onClick={() => setShowFilterPanel(!showFilterPanel)}\n            startIcon={<FilterList />}\n          >\n            {t('filterPanel.filterButton')}\n          </Button>\n        }\n      />\n      <Collapse in={showFilterPanel}>\n        <FilterPanel<EntityFilters>\n          onChange={onFilterChange}\n          filters={filters}\n          mode=\"entities\"\n        />\n      </Collapse>\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    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntitiesGrid.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGrid.tsx"],"sourcesContent":["import { Box } from '@material-ui/core';\nimport { useEffect, useState } from 'react';\nimport { useGridPageSize, useQetaApi } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\n\nimport { EntitiesGridContent } from './EntitiesGridContent';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { QetaGridHeader } from '../Utility/QetaGridHeader';\n\nimport { Change, EntityFilters, FilterPanel } from '../FilterPanel/FilterPanel';\nimport { Collapse, Button } from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-entities-filters-expanded';\n\nexport const EntitiesGrid = () => {\n  const [page, setPage] = useState(1);\n  const entitiesPerPage = useGridPageSize('entities', 24);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [showFilterPanel, setShowFilterPanel] = useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [filters, setFilters] = useState<EntityFilters>({\n    order: 'desc',\n    orderBy: 'postsCount',\n    searchQuery: '',\n  });\n  const [entities, setEntities] = useState<any[]>([]);\n  const [hasMore, setHasMore] = useState(true);\n  const [total, setTotal] = useState(0);\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const onFilterChange = (\n    changes: Change<EntityFilters> | Change<EntityFilters>[],\n  ) => {\n    const changesArray = Array.isArray(changes) ? changes : [changes];\n    setPage(1);\n    setEntities([]);\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  const { t } = useTranslationRef(qetaTranslationRef);\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    setEntities([]);\n    setSearchQuery(val);\n  };\n\n  useDebounce(\n    () => {\n      if (filters.searchQuery !== searchQuery) {\n        setFilters({ ...filters, searchQuery: searchQuery });\n      }\n    },\n    300,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    if (response) {\n      if (page === 1) {\n        setEntities(response.entities);\n      } else {\n        setEntities(prev => [...prev, ...response.entities]);\n      }\n      setHasMore(response.entities.length >= entitiesPerPage);\n      setTotal(response.total);\n    }\n  }, [response, entitiesPerPage, page]);\n\n  const combinedResponse = response\n    ? { ...response, entities, total }\n    : undefined;\n\n  return (\n    <Box>\n      <QetaGridHeader\n        title={\n          response ? t('common.entities', { count: response?.total ?? 0 }) : ''\n        }\n        searchBarLabel={t('entitiesPage.search.label')}\n        loading={loading}\n        onSearch={onSearchQueryChange}\n        buttons={\n          <Button\n            onClick={() => setShowFilterPanel(!showFilterPanel)}\n            startIcon={<FilterList />}\n          >\n            {t('filterPanel.filterButton')}\n          </Button>\n        }\n      />\n      <Collapse in={showFilterPanel}>\n        <FilterPanel<EntityFilters>\n          onChange={onFilterChange}\n          filters={filters}\n          mode=\"entities\"\n        />\n      </Collapse>\n      <EntitiesGridContent\n        response={combinedResponse}\n        loading={loading}\n        error={error}\n        hasMore={hasMore}\n        loadNextPage={() => setPage(prev => prev + 1)}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,0BAA6B,GAAA,gCAAA;AAE5B,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAClC,EAAM,MAAA,eAAA,GAAkB,eAAgB,CAAA,UAAA,EAAY,EAAE,CAAA;AACtD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAM,MAAA,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,QAAA;AAAA,IAC5C,YAAA,CAAa,OAAQ,CAAA,0BAA0B,CAAM,KAAA;AAAA,GACvD;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAwB,CAAA;AAAA,IACpD,KAAO,EAAA,MAAA;AAAA,IACP,OAAS,EAAA,YAAA;AAAA,IACT,WAAa,EAAA;AAAA,GACd,CAAA;AACD,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAAgB,EAAE,CAAA;AAClD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,CAAC,CAAA;AAEpC,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,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,WAAA,CAAY,EAAE,CAAA;AACd,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;AACA,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACE,GAAA,UAAA;AAAA,IACF,CAAA,GAAA,KACE,IAAI,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,WAAA,CAAY,EAAE,CAAA;AACd,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,IAAI,SAAS,CAAG,EAAA;AACd,QAAA,WAAA,CAAY,SAAS,QAAQ,CAAA;AAAA,OACxB,MAAA;AACL,QAAA,WAAA,CAAY,UAAQ,CAAC,GAAG,MAAM,GAAG,QAAA,CAAS,QAAQ,CAAC,CAAA;AAAA;AAErD,MAAW,UAAA,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,IAAU,eAAe,CAAA;AACtD,MAAA,QAAA,CAAS,SAAS,KAAK,CAAA;AAAA;AACzB,GACC,EAAA,CAAC,QAAU,EAAA,eAAA,EAAiB,IAAI,CAAC,CAAA;AAEpC,EAAA,MAAM,mBAAmB,QACrB,GAAA,EAAE,GAAG,QAAU,EAAA,QAAA,EAAU,OACzB,GAAA,KAAA,CAAA;AAEJ,EAAA,4BACG,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,KAAA,EACE,QAAW,GAAA,CAAA,CAAE,iBAAmB,EAAA,EAAE,OAAO,QAAU,EAAA,KAAA,IAAS,CAAE,EAAC,CAAI,GAAA,EAAA;AAAA,QAErE,cAAA,EAAgB,EAAE,2BAA2B,CAAA;AAAA,QAC7C,OAAA;AAAA,QACA,QAAU,EAAA,mBAAA;AAAA,QACV,OACE,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAS,EAAA,MAAM,kBAAmB,CAAA,CAAC,eAAe,CAAA;AAAA,YAClD,SAAA,sBAAY,UAAW,EAAA,EAAA,CAAA;AAAA,YAEtB,YAAE,0BAA0B;AAAA;AAAA;AAC/B;AAAA,KAEJ;AAAA,oBACA,GAAA,CAAC,QAAS,EAAA,EAAA,EAAA,EAAI,eACZ,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,cAAA;AAAA,QACV,OAAA;AAAA,QACA,IAAK,EAAA;AAAA;AAAA,KAET,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,gBAAA;AAAA,QACV,OAAA;AAAA,QACA,KAAA;AAAA,QACA,OAAA;AAAA,QACA,YAAc,EAAA,MAAM,OAAQ,CAAA,CAAA,IAAA,KAAQ,OAAO,CAAC;AAAA;AAAA;AAC9C,GACF,EAAA,CAAA;AAEJ;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"EntitiesGridContent.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridContent.tsx"],"sourcesContent":["import { EntitiesResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { EntitiesGridItem } from './EntitiesGridItem';\nimport { NoEntitiesCard } from './NoEntitiesCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\n\nexport const EntitiesGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: EntitiesResponse;\n}) => {\n  const { response, loading, error } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (loading) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('entitiesPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.entities || response.entities.length === 0) {\n    return (\n      <Grid item xs={12}>\n        <NoEntitiesCard />\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container spacing={3} alignItems=\"stretch\">\n      {response?.entities.map(entity => (\n        <EntitiesGridItem entity={entity} key={entity.entityRef} />\n      ))}\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,mBAAA,GAAsB,CAAC,KAI9B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA;AACrC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,2BAA2B,CAChE,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,QAAA,IAAY,QAAS,CAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzD,IACE,uBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAClB,EAAA,CAAA;AAAA;AAIJ,EAAA,2BACG,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,OAAS,EAAA,CAAA,EAAG,YAAW,SACpC,EAAA,QAAA,EAAA,QAAA,EAAU,QAAS,CAAA,GAAA,CAAI,4BACrB,GAAA,CAAA,gBAAA,EAAA,EAAiB,UAAqB,MAAO,CAAA,SAAW,CAC1D,CACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EntitiesGridContent.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridContent.tsx"],"sourcesContent":["import { EntitiesResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { EntitiesGridItem } from './EntitiesGridItem';\nimport { NoEntitiesCard } from './NoEntitiesCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\nimport { useInfiniteScroll } from 'infinite-scroll-hook';\n\nexport const EntitiesGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: EntitiesResponse;\n  hasMore?: boolean;\n  loadNextPage?: () => void;\n}) => {\n  const { response, loading, error, hasMore, loadNextPage } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const { containerRef: sentryRef } = useInfiniteScroll({\n    shouldStop: !hasMore || !!error || loading,\n    onLoadMore: async () => {\n      if (loadNextPage) {\n        await loadNextPage();\n      }\n    },\n    offset: '800px',\n  }) as any;\n\n  if (loading && (!response || response.entities.length === 0)) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('entitiesPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.entities || response.entities.length === 0) {\n    return (\n      <Grid item xs={12}>\n        <NoEntitiesCard />\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container spacing={3} alignItems=\"stretch\">\n      {response?.entities.map(entity => (\n        <EntitiesGridItem entity={entity} key={entity.entityRef} />\n      ))}\n      <div\n        ref={sentryRef}\n        style={{ width: '100%', marginTop: '10px', textAlign: 'center' }}\n      >\n        {loading && <LoadingGrid />}\n      </div>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAUa,MAAA,mBAAA,GAAsB,CAAC,KAM9B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,KAAO,EAAA,OAAA,EAAS,cAAiB,GAAA,KAAA;AAC5D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAI,iBAAkB,CAAA;AAAA,IACpD,UAAY,EAAA,CAAC,OAAW,IAAA,CAAC,CAAC,KAAS,IAAA,OAAA;AAAA,IACnC,YAAY,YAAY;AACtB,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,MAAM,YAAa,EAAA;AAAA;AACrB,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,IAAI,YAAY,CAAC,QAAA,IAAY,QAAS,CAAA,QAAA,CAAS,WAAW,CAAI,CAAA,EAAA;AAC5D,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,2BAA2B,CAChE,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,QAAA,IAAY,QAAS,CAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzD,IACE,uBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,GAAA,CAAC,kBAAe,CAClB,EAAA,CAAA;AAAA;AAIJ,EAAA,4BACG,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,OAAS,EAAA,CAAA,EAAG,YAAW,SACpC,EAAA,QAAA,EAAA;AAAA,IAAU,QAAA,EAAA,QAAA,CAAS,IAAI,CACtB,MAAA,qBAAA,GAAA,CAAC,oBAAiB,MAAqB,EAAA,EAAA,MAAA,CAAO,SAAW,CAC1D,CAAA;AAAA,oBACD,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,SAAA;AAAA,QACL,OAAO,EAAE,KAAA,EAAO,QAAQ,SAAW,EAAA,MAAA,EAAQ,WAAW,QAAS,EAAA;AAAA,QAE9D,QAAA,EAAA,OAAA,wBAAY,WAAY,EAAA,EAAA;AAAA;AAAA;AAC3B,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/FollowedLists/FollowedEntitiesList.esm.js

@@ -13,8 +13,8 @@ import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { RightListContainer, RightList } from '../Utility/RightList.esm.js';
 import { makeStyles, ListItem, Box, Tooltip, ListItemText } from '@material-ui/core';
+import { RightListContainer, RightList } from '../Utility/RightList.esm.js';
 import { Link } from 'react-router-dom';
 import { entityRouteRef } from '../../routes.esm.js';
 

package/dist/components/FollowedLists/FollowedTagsList.esm.js

@@ -13,8 +13,8 @@ import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { RightListContainer, RightList } from '../Utility/RightList.esm.js';
 import { makeStyles, ListItem, Box, Tooltip, ListItemText } from '@material-ui/core';
+import { RightListContainer, RightList } from '../Utility/RightList.esm.js';
 import LocalOfferOutlined from '@material-ui/icons/LocalOfferOutlined';
 import { Link } from 'react-router-dom';
 import { tagRouteRef } from '../../routes.esm.js';

package/dist/components/FollowedLists/FollowedUsersList.esm.js

@@ -9,8 +9,8 @@ import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
-import { RightListContainer, RightList } from '../Utility/RightList.esm.js';
 import { makeStyles, ListItem, Avatar, Tooltip, ListItemText } from '@material-ui/core';
+import { RightListContainer, RightList } from '../Utility/RightList.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
 import { Link } from 'react-router-dom';

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

@@ -20,6 +20,11 @@ import HelpOutline from '@material-ui/icons/HelpOutline';
 import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
 import PeopleIcon from '@material-ui/icons/People';
 import EmojiEvents from '@material-ui/icons/EmojiEvents';
+import DescriptionIcon from '@material-ui/icons/Description';
+import LinkIcon from '@material-ui/icons/Link';
+import StarIcon from '@material-ui/icons/Star';
+import CheckCircle from '@material-ui/icons/CheckCircle';
+import TrendingUp from '@material-ui/icons/TrendingUp';
 
 const ImpactCard = () => {
   const { t } = useTranslationRef(qetaTranslationRef);
@@ -69,11 +74,12 @@ const ImpactCard = () => {
       return num >= 1e3 ? numeral(num).format("0.0 a") : num;
     };
     const formattedImpact = formatNumber(impact.impact);
+    const totalContributions = stats.summary.totalQuestions + stats.summary.totalAnswers + stats.summary.totalArticles + stats.summary.totalLinks;
     const statItems = [
       {
-        icon: /* @__PURE__ */ jsx(ThumbUp, { fontSize: "small" }),
-        value: formatNumber(stats.summary.totalVotes),
-        label: t("impactCard.votes")
+        icon: /* @__PURE__ */ jsx(TrendingUp, { fontSize: "small" }),
+        value: formatNumber(totalContributions),
+        label: t("impactCard.totalContributions")
       },
       {
         icon: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small" }),
@@ -85,10 +91,40 @@ const ImpactCard = () => {
         value: formatNumber(stats.summary.totalAnswers),
         label: t("impactCard.answers")
       },
+      {
+        icon: /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small" }),
+        value: formatNumber(stats.summary.totalArticles),
+        label: t("impactCard.articles")
+      },
+      {
+        icon: /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small" }),
+        value: formatNumber(stats.summary.totalLinks),
+        label: t("impactCard.links")
+      },
+      {
+        icon: /* @__PURE__ */ jsx(ThumbUp, { fontSize: "small" }),
+        value: formatNumber(stats.summary.totalVotes),
+        label: t("impactCard.votes")
+      },
       {
         icon: /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small" }),
         value: formatNumber(stats.summary.totalFollowers),
         label: t("impactCard.followers")
+      },
+      {
+        icon: /* @__PURE__ */ jsx(StarIcon, { fontSize: "small" }),
+        value: formatNumber(stats.summary.answerScore),
+        label: t("impactCard.answerScore")
+      },
+      {
+        icon: /* @__PURE__ */ jsx(StarIcon, { fontSize: "small" }),
+        value: formatNumber(stats.summary.postScore),
+        label: t("impactCard.postScore")
+      },
+      {
+        icon: /* @__PURE__ */ jsx(CheckCircle, { fontSize: "small" }),
+        value: formatNumber(stats.summary.correctAnswers),
+        label: t("impactCard.correctAnswers")
       }
     ];
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -140,7 +176,7 @@ const ImpactCard = () => {
         )
       ] }),
       /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, children: statItems.map((item, index) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", color: "textSecondary", children: [
+      /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, children: statItems.map((item, index) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", color: "textSecondary", children: [
         /* @__PURE__ */ jsx(Tooltip, { title: item.label, children: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", children: item.icon }) }),
         /* @__PURE__ */ jsx(Box, { ml: 1, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", component: "span", children: [
           item.value,

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

@@ -1 +1 @@
-{"version":3,"file":"ImpactCard.esm.js","sources":["../../../src/components/HomePageCards/ImpactCard.tsx"],"sourcesContent":["import numeral from 'numeral';\nimport { useIdentityApi, useQetaApi } from '../../hooks';\nimport {\n  Box,\n  Card,\n  CardContent,\n  Divider,\n  Grid,\n  Tooltip,\n  Typography,\n  useTheme,\n} from '@material-ui/core';\nimport { Alert, Skeleton } from '@material-ui/lab';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n  ImpactResponse,\n  StatisticsResponse,\n  UserStat,\n} from '@drodil/backstage-plugin-qeta-common';\nimport ThumbUp from '@material-ui/icons/ThumbUp';\nimport HelpOutline from '@material-ui/icons/HelpOutline';\nimport QuestionAnswer from '@material-ui/icons/QuestionAnswer';\nimport People from '@material-ui/icons/People';\nimport EmojiEvents from '@material-ui/icons/EmojiEvents';\n\nexport const ImpactCard = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const theme = useTheme();\n  const { value: user, loading: userLoading } = useIdentityApi(\n    api => api.getBackstageIdentity(),\n    [],\n  );\n\n  const {\n    value: response,\n    loading: statsLoading,\n    error,\n  } = useQetaApi<{\n    impact: ImpactResponse;\n    stats: StatisticsResponse<UserStat>;\n  } | null>(\n    async api => {\n      if (!user) {\n        return null;\n      }\n      const [impact, stats] = await Promise.all([\n        api.getUserImpact(),\n        api.getUserStats(user.userEntityRef),\n      ]);\n      return { impact, stats };\n    },\n    [user],\n  );\n\n  const loading = userLoading || statsLoading;\n\n  const renderContent = () => {\n    if (loading) {\n      return (\n        <Box p={2}>\n          <Skeleton variant=\"text\" width=\"60%\" height={32} />\n          <Skeleton variant=\"text\" width=\"40%\" height={48} />\n          <Box mt={2}>\n            <Divider />\n          </Box>\n          <Box mt={2}>\n            <Grid container spacing={2}>\n              {Array.from(new Array(4)).map((_, i) => (\n                <Grid item xs={6} key={i}>\n                  <Skeleton variant=\"circle\" width={24} height={24} />\n                  <Skeleton variant=\"text\" width=\"80%\" />\n                </Grid>\n              ))}\n            </Grid>\n          </Box>\n        </Box>\n      );\n    }\n\n    if (error) {\n      return <Alert severity=\"error\">{t('impactCard.error')}</Alert>;\n    }\n\n    if (!response) {\n      return null;\n    }\n\n    const { impact, stats } = response;\n\n    const formatNumber = (num: number) => {\n      return num >= 1000 ? numeral(num).format('0.0 a') : num;\n    };\n\n    const formattedImpact = formatNumber(impact.impact);\n\n    const statItems = [\n      {\n        icon: <ThumbUp fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalVotes),\n        label: t('impactCard.votes'),\n      },\n      {\n        icon: <HelpOutline fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalQuestions),\n        label: t('impactCard.questions'),\n      },\n      {\n        icon: <QuestionAnswer fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalAnswers),\n        label: t('impactCard.answers'),\n      },\n      {\n        icon: <People fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalFollowers),\n        label: t('impactCard.followers'),\n      },\n    ];\n\n    return (\n      <>\n        <Typography variant=\"h5\" component=\"h2\" gutterBottom>\n          {t('impactCard.title')}\n        </Typography>\n        <Box display=\"flex\" alignItems=\"center\" mb={1}>\n          <Typography\n            variant=\"body1\"\n            aria-label={`${formattedImpact} views`}\n            style={{ fontWeight: 'bold', marginBottom: 0, fontSize: '32px' }}\n          >\n            {formattedImpact}\n          </Typography>\n          <Typography\n            variant=\"body2\"\n            component=\"span\"\n            style={{ marginLeft: '0.5em', verticalAlign: 'middle' }}\n            color=\"textSecondary\"\n          >\n            {t('impactCard.views')}\n          </Typography>\n        </Box>\n        <Typography variant=\"body2\" color=\"textSecondary\" paragraph>\n          {t('impactCard.contributions', {\n            lastWeek: impact.lastWeekImpact.toString(10),\n          })}\n        </Typography>\n\n        <Box display=\"flex\" alignItems=\"center\" mt={2} mb={2}>\n          <EmojiEvents\n            style={{ color: theme.palette.secondary.main, marginRight: '8px' }}\n          />\n          <Typography\n            variant=\"subtitle1\"\n            component=\"span\"\n            style={{ fontWeight: 'bold' }}\n          >\n            {t('impactCard.reputation')}:{' '}\n            <Box component=\"span\" style={{ fontSize: '1.1em' }}>\n              {stats.summary.reputation || 0}\n            </Box>\n          </Typography>\n        </Box>\n\n        <Divider />\n\n        <Box mt={2}>\n          <Grid container spacing={1}>\n            {statItems.map((item, index) => (\n              <Grid item xs={6} key={index}>\n                <Box display=\"flex\" alignItems=\"center\" color=\"textSecondary\">\n                  <Tooltip title={item.label}>\n                    <Box display=\"flex\" alignItems=\"center\">\n                      {item.icon}\n                    </Box>\n                  </Tooltip>\n                  <Box ml={1}>\n                    <Typography variant=\"subtitle2\" component=\"span\">\n                      {item.value} {item.label.toLowerCase()}\n                    </Typography>\n                  </Box>\n                </Box>\n              </Grid>\n            ))}\n          </Grid>\n        </Box>\n      </>\n    );\n  };\n\n  return (\n    <Box\n      display={{ md: 'none', lg: 'block' }}\n      style={{ marginBottom: '1em' }}\n      role=\"region\"\n      aria-label={t('impactCard.title')}\n    >\n      <Card elevation={2}>\n        <CardContent>{renderContent()}</CardContent>\n      </Card>\n    </Box>\n  );\n};\n"],"names":["QuestionAnswer","People"],"mappings":"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"}
+{"version":3,"file":"ImpactCard.esm.js","sources":["../../../src/components/HomePageCards/ImpactCard.tsx"],"sourcesContent":["import numeral from 'numeral';\nimport { useIdentityApi, useQetaApi } from '../../hooks';\nimport {\n  Box,\n  Card,\n  CardContent,\n  Divider,\n  Grid,\n  Tooltip,\n  Typography,\n  useTheme,\n} from '@material-ui/core';\nimport { Alert, Skeleton } from '@material-ui/lab';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n  ImpactResponse,\n  StatisticsResponse,\n  UserStat,\n} from '@drodil/backstage-plugin-qeta-common';\nimport ThumbUp from '@material-ui/icons/ThumbUp';\nimport HelpOutline from '@material-ui/icons/HelpOutline';\nimport QuestionAnswer from '@material-ui/icons/QuestionAnswer';\nimport People from '@material-ui/icons/People';\nimport EmojiEvents from '@material-ui/icons/EmojiEvents';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport LinkIcon from '@material-ui/icons/Link';\nimport Star from '@material-ui/icons/Star';\nimport CheckCircle from '@material-ui/icons/CheckCircle';\nimport TrendingUp from '@material-ui/icons/TrendingUp';\n\nexport const ImpactCard = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const theme = useTheme();\n  const { value: user, loading: userLoading } = useIdentityApi(\n    api => api.getBackstageIdentity(),\n    [],\n  );\n\n  const {\n    value: response,\n    loading: statsLoading,\n    error,\n  } = useQetaApi<{\n    impact: ImpactResponse;\n    stats: StatisticsResponse<UserStat>;\n  } | null>(\n    async api => {\n      if (!user) {\n        return null;\n      }\n      const [impact, stats] = await Promise.all([\n        api.getUserImpact(),\n        api.getUserStats(user.userEntityRef),\n      ]);\n      return { impact, stats };\n    },\n    [user],\n  );\n\n  const loading = userLoading || statsLoading;\n\n  const renderContent = () => {\n    if (loading) {\n      return (\n        <Box p={2}>\n          <Skeleton variant=\"text\" width=\"60%\" height={32} />\n          <Skeleton variant=\"text\" width=\"40%\" height={48} />\n          <Box mt={2}>\n            <Divider />\n          </Box>\n          <Box mt={2}>\n            <Grid container spacing={2}>\n              {Array.from(new Array(4)).map((_, i) => (\n                <Grid item xs={6} key={i}>\n                  <Skeleton variant=\"circle\" width={24} height={24} />\n                  <Skeleton variant=\"text\" width=\"80%\" />\n                </Grid>\n              ))}\n            </Grid>\n          </Box>\n        </Box>\n      );\n    }\n\n    if (error) {\n      return <Alert severity=\"error\">{t('impactCard.error')}</Alert>;\n    }\n\n    if (!response) {\n      return null;\n    }\n\n    const { impact, stats } = response;\n\n    const formatNumber = (num: number) => {\n      return num >= 1000 ? numeral(num).format('0.0 a') : num;\n    };\n\n    const formattedImpact = formatNumber(impact.impact);\n\n    const totalContributions =\n      stats.summary.totalQuestions +\n      stats.summary.totalAnswers +\n      stats.summary.totalArticles +\n      stats.summary.totalLinks;\n\n    const statItems = [\n      {\n        icon: <TrendingUp fontSize=\"small\" />,\n        value: formatNumber(totalContributions),\n        label: t('impactCard.totalContributions'),\n      },\n      {\n        icon: <HelpOutline fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalQuestions),\n        label: t('impactCard.questions'),\n      },\n      {\n        icon: <QuestionAnswer fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalAnswers),\n        label: t('impactCard.answers'),\n      },\n      {\n        icon: <DescriptionIcon fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalArticles),\n        label: t('impactCard.articles'),\n      },\n      {\n        icon: <LinkIcon fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalLinks),\n        label: t('impactCard.links'),\n      },\n      {\n        icon: <ThumbUp fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalVotes),\n        label: t('impactCard.votes'),\n      },\n      {\n        icon: <People fontSize=\"small\" />,\n        value: formatNumber(stats.summary.totalFollowers),\n        label: t('impactCard.followers'),\n      },\n      {\n        icon: <Star fontSize=\"small\" />,\n        value: formatNumber(stats.summary.answerScore),\n        label: t('impactCard.answerScore'),\n      },\n      {\n        icon: <Star fontSize=\"small\" />,\n        value: formatNumber(stats.summary.postScore),\n        label: t('impactCard.postScore'),\n      },\n      {\n        icon: <CheckCircle fontSize=\"small\" />,\n        value: formatNumber(stats.summary.correctAnswers),\n        label: t('impactCard.correctAnswers'),\n      },\n    ];\n\n    return (\n      <>\n        <Typography variant=\"h5\" component=\"h2\" gutterBottom>\n          {t('impactCard.title')}\n        </Typography>\n        <Box display=\"flex\" alignItems=\"center\" mb={1}>\n          <Typography\n            variant=\"body1\"\n            aria-label={`${formattedImpact} views`}\n            style={{ fontWeight: 'bold', marginBottom: 0, fontSize: '32px' }}\n          >\n            {formattedImpact}\n          </Typography>\n          <Typography\n            variant=\"body2\"\n            component=\"span\"\n            style={{ marginLeft: '0.5em', verticalAlign: 'middle' }}\n            color=\"textSecondary\"\n          >\n            {t('impactCard.views')}\n          </Typography>\n        </Box>\n        <Typography variant=\"body2\" color=\"textSecondary\" paragraph>\n          {t('impactCard.contributions', {\n            lastWeek: impact.lastWeekImpact.toString(10),\n          })}\n        </Typography>\n\n        <Box display=\"flex\" alignItems=\"center\" mt={2} mb={2}>\n          <EmojiEvents\n            style={{ color: theme.palette.secondary.main, marginRight: '8px' }}\n          />\n          <Typography\n            variant=\"subtitle1\"\n            component=\"span\"\n            style={{ fontWeight: 'bold' }}\n          >\n            {t('impactCard.reputation')}:{' '}\n            <Box component=\"span\" style={{ fontSize: '1.1em' }}>\n              {stats.summary.reputation || 0}\n            </Box>\n          </Typography>\n        </Box>\n\n        <Divider />\n\n        <Box mt={2}>\n          <Grid container spacing={1}>\n            {statItems.map((item, index) => (\n              <Grid item xs={12} key={index}>\n                <Box display=\"flex\" alignItems=\"center\" color=\"textSecondary\">\n                  <Tooltip title={item.label}>\n                    <Box display=\"flex\" alignItems=\"center\">\n                      {item.icon}\n                    </Box>\n                  </Tooltip>\n                  <Box ml={1}>\n                    <Typography variant=\"subtitle2\" component=\"span\">\n                      {item.value} {item.label.toLowerCase()}\n                    </Typography>\n                  </Box>\n                </Box>\n              </Grid>\n            ))}\n          </Grid>\n        </Box>\n      </>\n    );\n  };\n\n  return (\n    <Box\n      display={{ md: 'none', lg: 'block' }}\n      style={{ marginBottom: '1em' }}\n      role=\"region\"\n      aria-label={t('impactCard.title')}\n    >\n      <Card elevation={2}>\n        <CardContent>{renderContent()}</CardContent>\n      </Card>\n    </Box>\n  );\n};\n"],"names":["QuestionAnswer","People","Star"],"mappings":"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"}

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

@@ -13,7 +13,7 @@ import '../../translation.esm.js';
 import 'react-router-dom';
 import { Card, CardHeader, Grid, Divider } from '@material-ui/core';
 import '@material-ui/icons/Link';
-import '../QetaPagination/QetaPagination.esm.js';
+import 'infinite-scroll-hook';
 import '@backstage/plugin-permission-react';
 import '@backstage/plugin-permission-common';
 import '@backstage/plugin-catalog-react';

package/dist/components/LeftMenu/LeftMenu.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { makeStyles, List, Box, Tooltip, IconButton, ListItemIcon, Typography, Divider, MenuItem } from '@material-ui/core';
+import { makeStyles, List, ListItemIcon, Typography, Box, Tooltip, IconButton, MenuItem } from '@material-ui/core';
 import { useRouteRef, useApp } from '@backstage/core-plugin-api';
 import { useNavigate } from 'react-router-dom';
 import { useLocation } from 'react-use';
@@ -45,13 +45,10 @@ const useStyles = makeStyles(
         height: "100%"
       },
       leftMenuCompact: {
-        width: "72px",
+        width: "70px",
         overflowX: "hidden",
         "& $sectionHeader": {
           display: "none"
-        },
-        "& $divider": {
-          display: "none"
         }
       },
       inPopup: {
@@ -60,22 +57,19 @@ const useStyles = makeStyles(
         width: "auto"
       },
       outsidePopup: {
-        position: "sticky",
-        top: theme.spacing(2),
-        float: "right",
-        maxHeight: "calc(100vh - 100px)",
-        overflowY: "auto"
+        paddingRight: theme.spacing(2)
       },
       menuItem: {
-        margin: (props) => props.compact ? 0 : theme.spacing(0, 2),
+        margin: (props) => props.compact ? 0 : theme.spacing(0, 1.5),
         justifyContent: (props) => props.compact ? "center" : "flex-start",
-        padding: (props) => props.compact ? theme.spacing(1, 0) : theme.spacing(1, 1),
+        padding: (props) => props.compact ? theme.spacing(1, 0) : theme.spacing(1, 0.5),
         borderRadius: (props) => props.compact ? 0 : theme.shape.borderRadius,
         transition: "all 0.2s ease-in-out",
         color: theme.palette.text.primary,
         display: "flex",
         alignItems: "center",
         minHeight: 48,
+        maxWidth: "80%",
         "&:hover": {
           backgroundColor: theme.palette.action.hover
         }
@@ -110,7 +104,7 @@ const useStyles = makeStyles(
         justifyContent: "center"
       },
       sectionHeader: {
-        padding: theme.spacing(0.5, 3, 0.5, 3),
+        padding: theme.spacing(0.5, 2, 0.5, 2),
         marginTop: theme.spacing(2),
         color: theme.palette.text.secondary,
         fontWeight: 600,
@@ -119,17 +113,13 @@ const useStyles = makeStyles(
         letterSpacing: "0.5px",
         whiteSpace: "nowrap"
       },
-      divider: {
-        margin: theme.spacing(1, 2.5),
-        backgroundColor: theme.palette.divider
-      },
       toggleButton: {
         marginLeft: "auto",
-        marginRight: theme.spacing(1),
+        marginRight: theme.spacing(0),
         marginBottom: theme.spacing(1)
       },
       label: {
-        marginLeft: theme.spacing(1.5),
+        marginLeft: theme.spacing(1),
         whiteSpace: "nowrap",
         opacity: 1,
         transition: "opacity 0.2s"
@@ -220,26 +210,8 @@ const LeftMenu = (props) => {
       "aria-labelledby": "nested-list-subheader",
       disablePadding: true,
       children: [
-        !isPopup && /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: isCompact ? "center" : "flex-end", children: /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            title: isCompact ? t("leftMenu.expand") : t("leftMenu.collapse"),
-            placement: "right",
-            children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                onClick: onToggle,
-                size: "small",
-                className: isCompact ? "" : styles.toggleButton,
-                style: { marginBottom: 0 },
-                children: isCompact ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(MenuOpenIcon, {})
-              }
-            )
-          }
-        ) }),
         /* @__PURE__ */ jsx(CustomMenuItem, { route: rootRoute(), label: t("leftMenu.home"), children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(HomeOutlined, { fontSize: "small" }) }) }),
         /* @__PURE__ */ jsx("li", { style: { listStyle: "none" }, children: /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.content") }) }),
-        /* @__PURE__ */ jsx(Divider, { className: styles.divider, component: "li" }),
         /* @__PURE__ */ jsx(
           CustomMenuItem,
           {
@@ -294,7 +266,6 @@ const LeftMenu = (props) => {
           }
         ),
         /* @__PURE__ */ jsx("li", { style: { listStyle: "none" }, children: /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.community") }) }),
-        /* @__PURE__ */ jsx(Divider, { className: styles.divider, component: "li" }),
         /* @__PURE__ */ jsx(
           CustomMenuItem,
           {
@@ -323,7 +294,6 @@ const LeftMenu = (props) => {
         ),
         (isModerator || canReview) && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("li", { style: { listStyle: "none" }, children: /* @__PURE__ */ jsx(Typography, { className: styles.sectionHeader, children: t("leftMenu.manage") }) }),
-          /* @__PURE__ */ jsx(Divider, { className: styles.divider, component: "li" }),
           canReview && /* @__PURE__ */ jsx(CustomMenuItem, { route: reviewRoute(), label: t("leftMenu.review"), children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(RateReviewOutlined, { fontSize: "small" }) }) }),
           isModerator && /* @__PURE__ */ jsx(
             CustomMenuItem,
@@ -333,7 +303,32 @@ const LeftMenu = (props) => {
               children: /* @__PURE__ */ jsx(ListItemIcon, { className: styles.menuIcon, children: /* @__PURE__ */ jsx(SettingsOutlined, { fontSize: "small" }) })
             }
           )
-        ] })
+        ] }),
+        !isPopup && /* @__PURE__ */ jsx(
+          Box,
+          {
+            display: "flex",
+            justifyContent: isCompact ? "center" : "flex-start",
+            style: { marginTop: "auto" },
+            children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: isCompact ? t("leftMenu.expand") : t("leftMenu.collapse"),
+                placement: "right",
+                children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    onClick: onToggle,
+                    size: "small",
+                    className: isCompact ? "" : styles.toggleButton,
+                    style: { marginTop: 8, marginLeft: isCompact ? 0 : 18 },
+                    children: isCompact ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(MenuOpenIcon, {})
+                  }
+                )
+              }
+            )
+          }
+        )
       ]
     }
   );