@drodil/backstage-plugin-qeta-react 3.48.1 → 3.49.0

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

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

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

@@ -19,7 +19,7 @@ const TagsGridContent = (props) => {
   if (!response?.tags || response.tags.length === 0) {
     return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(NoTagsCard, {}) });
   }
-  return /* @__PURE__ */ jsx(Grid, { container: true, item: true, xs: 12, alignItems: "stretch", children: response?.tags.map((tag) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, alignItems: "stretch", children: response?.tags.map((tag) => /* @__PURE__ */ jsx(
     TagGridItem,
     {
       tag,

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

@@ -1 +1 @@
-{"version":3,"file":"TagsGridContent.esm.js","sources":["../../../src/components/TagsGrid/TagsGridContent.tsx"],"sourcesContent":["import { TagGridItem } from './TagGridItem';\nimport { TagsResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { NoTagsCard } from './NoTagsCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\n\nexport const TagsGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: TagsResponse;\n  onTagEdit: () => void;\n  isModerator?: boolean;\n}) => {\n  const { response, onTagEdit, loading, error, isModerator } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (loading) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('tagPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.tags || response.tags.length === 0) {\n    return (\n      <Grid item xs={12}>\n        <NoTagsCard />\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container item xs={12} alignItems=\"stretch\">\n      {response?.tags.map(tag => (\n        <TagGridItem\n          tag={tag}\n          key={tag.tag}\n          onTagEdit={onTagEdit}\n          isModerator={isModerator}\n        />\n      ))}\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,eAAA,GAAkB,CAAC,KAM1B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,OAAS,EAAA,KAAA,EAAO,aAAgB,GAAA,KAAA;AAC7D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,sBAAsB,CAC3D,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,IAAA,IAAQ,QAAS,CAAA,IAAA,CAAK,WAAW,CAAG,EAAA;AACjD,IACE,uBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,GAAA,CAAC,cAAW,CACd,EAAA,CAAA;AAAA;AAIJ,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAI,UAAW,EAAA,SAAA,EACrC,QAAU,EAAA,QAAA,EAAA,IAAA,CAAK,IAAI,CAClB,GAAA,qBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MAEA,SAAA;AAAA,MACA;AAAA,KAAA;AAAA,IAFK,GAAI,CAAA;AAAA,GAIZ,CACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TagsGridContent.esm.js","sources":["../../../src/components/TagsGrid/TagsGridContent.tsx"],"sourcesContent":["import { TagGridItem } from './TagGridItem';\nimport { TagsResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { NoTagsCard } from './NoTagsCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\n\nexport const TagsGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: TagsResponse;\n  onTagEdit: () => void;\n  isModerator?: boolean;\n}) => {\n  const { response, onTagEdit, loading, error, isModerator } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (loading) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('tagPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.tags || response.tags.length === 0) {\n    return (\n      <Grid item xs={12}>\n        <NoTagsCard />\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container spacing={3} alignItems=\"stretch\">\n      {response?.tags.map(tag => (\n        <TagGridItem\n          tag={tag}\n          key={tag.tag}\n          onTagEdit={onTagEdit}\n          isModerator={isModerator}\n        />\n      ))}\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,eAAA,GAAkB,CAAC,KAM1B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,OAAS,EAAA,KAAA,EAAO,aAAgB,GAAA,KAAA;AAC7D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,sBAAsB,CAC3D,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,IAAA,IAAQ,QAAS,CAAA,IAAA,CAAK,WAAW,CAAG,EAAA;AACjD,IACE,uBAAA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,GAAA,CAAC,cAAW,CACd,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,OAAA,EAAS,CAAG,EAAA,UAAA,EAAW,SACpC,EAAA,QAAA,EAAA,QAAA,EAAU,IAAK,CAAA,GAAA,CAAI,CAClB,GAAA,qBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MAEA,SAAA;AAAA,MACA;AAAA,KAAA;AAAA,IAFK,GAAI,CAAA;AAAA,GAIZ,CACH,EAAA,CAAA;AAEJ;;;;"}

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

@@ -76,7 +76,7 @@ const TemplateList = () => {
         onClick: () => {
           navigate("#template:new");
         },
-        children: t("templateList.createButton")
+        children: "Create New Template"
       }
     ),
     /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateList.esm.js","sources":["../../../src/components/TemplateList/TemplateList.tsx"],"sourcesContent":["import { useIsModerator, useQetaApi } from '../../hooks';\nimport { Progress, WarningPanel } from '@backstage/core-components';\nimport { useEffect, useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport EditIcon from '@material-ui/icons/Edit';\nimport { qetaApiRef } from '../../api';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport { TemplateForm } from './TemplateForm';\nimport { useNavigate } from 'react-router-dom';\nimport { useLocation } from 'react-use';\nimport {\n  Box,\n  Button,\n  IconButton,\n  List,\n  ListItem,\n  ListItemSecondaryAction,\n  ListItemText,\n} from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport const TemplateList = () => {\n  const { isModerator } = useIsModerator();\n\n  const [mode, setMode] = useState<'list' | 'create' | 'edit'>('list');\n  const [id, setId] = useState<number | undefined>(undefined);\n  const qetaApi = useApi(qetaApiRef);\n  const navigate = useNavigate();\n  const { hash } = useLocation();\n  const { value, loading, error, retry } = useQetaApi(api =>\n    api.getTemplates(),\n  );\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  useEffect(() => {\n    const [, hashMode] = (hash ?? '').split(':');\n    if (hashMode === 'new') {\n      setMode('create');\n    } else {\n      const hashId = parseInt(hashMode, 10);\n      if (!isNaN(hashId)) {\n        setId(hashId);\n        setMode('edit');\n      } else {\n        setMode('list');\n      }\n    }\n  }, [hash]);\n\n  if (!isModerator) {\n    return null;\n  }\n\n  const onDelete = (templateId: number) => {\n    qetaApi.deleteTemplate(templateId).then(() => retry());\n  };\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (error || value === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('templateList.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (mode === 'create' || mode === 'edit') {\n    return (\n      <TemplateForm\n        onPost={() => {\n          retry();\n          navigate('#template:list');\n        }}\n        id={id}\n      />\n    );\n  }\n\n  return (\n    <>\n      <Button\n        variant=\"contained\"\n        color=\"primary\"\n        onClick={() => {\n          navigate('#template:new');\n        }}\n      >\n        {t('templateList.createButton')}\n      </Button>\n      <Box\n        sx={{ width: '100%', bgcolor: 'background.paper', marginTop: '1em' }}\n      >\n        <List style={{ width: '100%' }}>\n          {value.total === 0 && (\n            <ListItem>\n              <ListItemText\n                primary={t('templateList.noTemplates')}\n                secondary={t('templateList.noTemplatesDescription')}\n              />\n            </ListItem>\n          )}\n          {value.templates.map((template, index) => (\n            <ListItem key={index}>\n              <ListItemText\n                primary={template.title}\n                secondary={template.description}\n              />\n              <ListItemSecondaryAction>\n                <IconButton\n                  onClick={() => {\n                    navigate(`#template:${template.id}`);\n                  }}\n                >\n                  <EditIcon />\n                </IconButton>\n                <IconButton onClick={() => onDelete(template.id)}>\n                  <DeleteIcon />\n                </IconButton>\n              </ListItemSecondaryAction>\n            </ListItem>\n          ))}\n        </List>\n      </Box>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TemplateList.esm.js","sources":["../../../src/components/TemplateList/TemplateList.tsx"],"sourcesContent":["import { useIsModerator, useQetaApi } from '../../hooks';\nimport { Progress, WarningPanel } from '@backstage/core-components';\nimport { useEffect, useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport EditIcon from '@material-ui/icons/Edit';\nimport { qetaApiRef } from '../../api';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport { TemplateForm } from './TemplateForm';\nimport { useNavigate } from 'react-router-dom';\nimport { useLocation } from 'react-use';\nimport {\n  Box,\n  Button,\n  IconButton,\n  List,\n  ListItem,\n  ListItemSecondaryAction,\n  ListItemText,\n} from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport const TemplateList = () => {\n  const { isModerator } = useIsModerator();\n\n  const [mode, setMode] = useState<'list' | 'create' | 'edit'>('list');\n  const [id, setId] = useState<number | undefined>(undefined);\n  const qetaApi = useApi(qetaApiRef);\n  const navigate = useNavigate();\n  const { hash } = useLocation();\n  const { value, loading, error, retry } = useQetaApi(api =>\n    api.getTemplates(),\n  );\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  useEffect(() => {\n    const [, hashMode] = (hash ?? '').split(':');\n    if (hashMode === 'new') {\n      setMode('create');\n    } else {\n      const hashId = parseInt(hashMode, 10);\n      if (!isNaN(hashId)) {\n        setId(hashId);\n        setMode('edit');\n      } else {\n        setMode('list');\n      }\n    }\n  }, [hash]);\n\n  if (!isModerator) {\n    return null;\n  }\n\n  const onDelete = (templateId: number) => {\n    qetaApi.deleteTemplate(templateId).then(() => retry());\n  };\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (error || value === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('templateList.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (mode === 'create' || mode === 'edit') {\n    return (\n      <TemplateForm\n        onPost={() => {\n          retry();\n          navigate('#template:list');\n        }}\n        id={id}\n      />\n    );\n  }\n\n  return (\n    <>\n      <Button\n        variant=\"contained\"\n        color=\"primary\"\n        onClick={() => {\n          navigate('#template:new');\n        }}\n      >\n        Create New Template\n      </Button>\n      <Box\n        sx={{ width: '100%', bgcolor: 'background.paper', marginTop: '1em' }}\n      >\n        <List style={{ width: '100%' }}>\n          {value.total === 0 && (\n            <ListItem>\n              <ListItemText\n                primary={t('templateList.noTemplates')}\n                secondary={t('templateList.noTemplatesDescription')}\n              />\n            </ListItem>\n          )}\n          {value.templates.map((template, index) => (\n            <ListItem key={index}>\n              <ListItemText\n                primary={template.title}\n                secondary={template.description}\n              />\n              <ListItemSecondaryAction>\n                <IconButton\n                  onClick={() => {\n                    navigate(`#template:${template.id}`);\n                  }}\n                >\n                  <EditIcon />\n                </IconButton>\n                <IconButton onClick={() => onDelete(template.id)}>\n                  <DeleteIcon />\n                </IconButton>\n              </ListItemSecondaryAction>\n            </ListItem>\n          ))}\n        </List>\n      </Box>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -77,7 +77,7 @@ const useStyles = makeStyles((theme) => {
     rankingRow: {
       display: "flex",
       alignItems: "center",
-      padding: theme.spacing(1, 2)
+      padding: theme.spacing(1.5, 2)
     },
     userInfo: {
       display: "flex",
@@ -85,13 +85,21 @@ const useStyles = makeStyles((theme) => {
       flex: 1
     },
     position: {
-      fontWeight: 600,
-      marginRight: theme.spacing(1),
-      color: theme.palette.text.primary
+      fontWeight: 800,
+      marginRight: theme.spacing(2),
+      color: theme.palette.text.secondary,
+      minWidth: "30px",
+      textAlign: "right"
+    },
+    topPosition: {
+      color: theme.palette.primary.main,
+      fontSize: "1.1rem"
     },
     divider: {
       margin: theme.spacing(2, 0),
-      opacity: 0.5
+      opacity: 0.5,
+      border: 0,
+      borderBottom: `1px solid ${theme.palette.divider}`
     }
   };
 });
@@ -145,7 +153,14 @@ const RankingRow = (props) => {
         disableTypography: true,
         className: classes.userInfo,
         primary: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
-          /* @__PURE__ */ jsx(Typography, { className: classes.position, variant: "subtitle1", children: ordinalPosition }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              className: `${classes.position} ${props.position <= 3 ? classes.topPosition : ""}`,
+              variant: "subtitle1",
+              children: ordinalPosition
+            }
+          ),
           /* @__PURE__ */ jsx(UserLink, { entityRef: userRef ?? "" })
         ] })
       }

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

@@ -1 +1 @@
-{"version":3,"file":"TopRankingUsersCard.esm.js","sources":["../../../src/components/TopRankingUsersCard/TopRankingUsersCard.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport {\n  CardTab,\n  Progress,\n  TabbedCard,\n  WarningPanel,\n} from '@backstage/core-components';\nimport {\n  Avatar,\n  Box,\n  List,\n  ListItem,\n  ListItemAvatar,\n  ListItemText,\n  makeStyles,\n  Paper,\n  Typography,\n} from '@material-ui/core';\nimport { StatisticResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { TrophyIcon } from './TrophyIcon';\nimport { UserLink } from '../Links';\nimport { useQetaApi } from '../../hooks';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nconst useStyles = makeStyles(theme => {\n  return {\n    root: {\n      '& .MuiTabbedCard-root': {\n        borderRadius: '12px',\n        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',\n      },\n      '& .MuiCardHeader-root': {\n        padding: theme.spacing(2, 3),\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      },\n      '& .MuiTabs-root': {\n        backgroundColor: theme.palette.background.paper,\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      },\n    },\n    trophyIcon: {\n      backgroundColor: theme.palette.background.paper,\n      color: theme.palette.text.primary,\n      borderRadius: '50%',\n      boxSizing: 'border-box',\n      padding: '0.5rem',\n      height: 48,\n      width: 48,\n      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',\n      transition: 'transform 0.2s ease-in-out',\n      '&:hover': {\n        transform: 'scale(1.05)',\n      },\n    },\n    votesText: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      marginLeft: '16px',\n      backgroundColor: theme.palette.background.paper,\n      padding: theme.spacing(0.5, 2),\n      borderRadius: '20px',\n      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',\n    },\n    rankingCard: {\n      padding: theme.spacing(2),\n    },\n    rankingCardDescription: {\n      color: theme.palette.text.secondary,\n      marginBottom: theme.spacing(2),\n    },\n    rankingCardList: {\n      '& .MuiListItem-root': {\n        marginBottom: theme.spacing(1),\n        borderRadius: '8px',\n        transition: 'background-color 0.2s ease-in-out',\n        '&:hover': {\n          backgroundColor: theme.palette.action.hover,\n        },\n      },\n    },\n    rankingRow: {\n      display: 'flex',\n      alignItems: 'center',\n      padding: theme.spacing(1, 2),\n    },\n    userInfo: {\n      display: 'flex',\n      alignItems: 'center',\n      flex: 1,\n    },\n    position: {\n      fontWeight: 600,\n      marginRight: theme.spacing(1),\n      color: theme.palette.text.primary,\n    },\n    divider: {\n      margin: theme.spacing(2, 0),\n      opacity: 0.5,\n    },\n  };\n});\n\ntype RankingIcon = {\n  iconsByRanking: Map<number, ReactNode>;\n  userRankingIcon: ReactNode;\n};\n\nconst DefaultRankingIcons = new Map<number, ReactNode>([\n  [\n    1,\n    <TrophyIcon\n      style={{ color: '#DAA520', height: '2.2rem', width: '2.2rem' }}\n    />,\n  ],\n  [\n    2,\n    <TrophyIcon\n      style={{ color: '#C0C0C0', height: '2.1rem', width: '2.1rem' }}\n    />,\n  ],\n  [\n    3,\n    <TrophyIcon style={{ color: '#B87333', height: '2rem', width: '2rem' }} />,\n  ],\n]);\n\nconst DefaultUserIcon = (\n  <TrophyIcon style={{ height: '2rem', width: '2rem' }} />\n);\n\nconst getOrdinal = (n: number) => {\n  if (n % 10 === 1 && n % 100 !== 11) {\n    return `${n}st`;\n  } else if (n % 10 === 2 && n % 100 !== 12) {\n    return `${n}nd`;\n  } else if (n % 10 === 3 && n % 100 !== 13) {\n    return `${n}rd`;\n  }\n\n  return `${n}th`;\n};\n\nexport const RankingRow = (props: {\n  userRef?: string;\n  total: number;\n  position: number;\n  rankingIcon?: RankingIcon;\n  unit: string;\n}) => {\n  const classes = useStyles();\n  const userRef = props.userRef;\n\n  const ordinalPosition = props?.position ? getOrdinal(props?.position) : '';\n\n  const userIcon = props.rankingIcon?.userRankingIcon\n    ? props.rankingIcon?.userRankingIcon\n    : DefaultUserIcon;\n\n  const topRankingIcon = props.rankingIcon\n    ? props.rankingIcon.iconsByRanking.get(Number(props?.position))\n    : DefaultRankingIcons.get(Number(props?.position)) || DefaultUserIcon;\n\n  const rankingIcon = props?.position > 3 ? userIcon : topRankingIcon;\n\n  return (\n    <ListItem className={classes.rankingRow}>\n      <ListItemAvatar>\n        <Avatar className={classes.trophyIcon}>{rankingIcon}</Avatar>\n      </ListItemAvatar>\n\n      <ListItemText\n        disableTypography\n        className={classes.userInfo}\n        primary={\n          <Box display=\"flex\" alignItems=\"center\">\n            <Typography className={classes.position} variant=\"subtitle1\">\n              {ordinalPosition}\n            </Typography>\n            <UserLink entityRef={userRef ?? ''} />\n          </Box>\n        }\n      />\n\n      <div className={classes.votesText}>\n        <Typography variant=\"subtitle1\" style={{ fontWeight: 500 }}>\n          {props?.total} {props.unit}\n        </Typography>\n      </div>\n    </ListItem>\n  );\n};\n\nexport const RankingCard = (props: {\n  limit?: number;\n  description: string;\n  statistic?: StatisticResponse;\n  unit: string;\n}) => {\n  const classes = useStyles();\n  const rankingStats = props.limit\n    ? props.statistic?.ranking.slice(0, props.limit)\n    : props.statistic?.ranking;\n\n  return (\n    <Paper elevation={0} className={classes.rankingCard}>\n      <Typography className={classes.rankingCardDescription}>\n        {props.description}\n      </Typography>\n      <List className={classes.rankingCardList}>\n        {rankingStats?.map(authorStats => (\n          <RankingRow\n            total={authorStats.total || 0}\n            position={authorStats.position || 0}\n            userRef={authorStats.author}\n            unit={props.unit}\n            key={authorStats.author}\n          />\n        ))}\n        {!rankingStats?.some(\n          authorStats =>\n            authorStats.author === props.statistic?.loggedUser?.author,\n        ) && (\n          <>\n            <hr className={classes.divider} />\n            <RankingRow\n              total={props.statistic?.loggedUser?.total || 0}\n              position={props.statistic?.loggedUser?.position || 0}\n              userRef={props.statistic?.loggedUser?.author}\n              unit={props.unit}\n            />\n          </>\n        )}\n      </List>\n    </Paper>\n  );\n};\n\nexport const TopRankingUsers = (props: {\n  title?: string;\n  hideTitle?: boolean;\n  limit?: number;\n}) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const {\n    value: topStatistics,\n    loading,\n    error,\n  } = useQetaApi(api =>\n    api.getTopStatisticsHomepage({\n      options: { limit: 50 },\n    }),\n  );\n\n  const tabData = [\n    {\n      title: t('statistics.mostQuestions.title'),\n      description: t('statistics.mostQuestions.description'),\n      unit: 'questions',\n    },\n    {\n      title: t('statistics.mostAnswers.title'),\n      description: t('statistics.mostAnswers.description'),\n      unit: 'answers',\n    },\n    {\n      title: t('statistics.topVotedQuestions.title'),\n      description: t('statistics.topVotedQuestions.description'),\n      unit: 'votes',\n    },\n    {\n      title: t('statistics.topVotedAnswers.title'),\n      description: t('statistics.topVotedAnswers.description'),\n      unit: 'votes',\n    },\n    {\n      title: t('statistics.topVotedCorrectAnswers.title'),\n      description: t('statistics.topVotedCorrectAnswers.description'),\n      unit: 'votes',\n    },\n  ];\n\n  if ((error || topStatistics === undefined) && !loading) {\n    return (\n      <WarningPanel severity=\"error\" title={t('statistics.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  let content: ReactElement[];\n\n  if (loading) {\n    content = [\n      <CardTab>\n        <Box display=\"flex\" justifyContent=\"center\" p={3}>\n          <Progress />\n        </Box>\n      </CardTab>,\n    ];\n  } else if (topStatistics && topStatistics.length > 0) {\n    content = topStatistics?.map((stats, index) => {\n      return (\n        <CardTab label={tabData[index].title} key={tabData[index].title}>\n          <RankingCard\n            description={tabData[index].description}\n            limit={props.limit}\n            statistic={stats}\n            unit={tabData[index].unit}\n          />\n        </CardTab>\n      );\n    });\n  } else {\n    content = [\n      <CardTab>\n        <Box display=\"flex\" justifyContent=\"center\" p={3}>\n          {t('statistics.notAvailable')}\n        </Box>\n      </CardTab>,\n    ];\n  }\n\n  return (\n    <div className={classes.root}>\n      <TabbedCard title={props.title || t('statistics.ranking')}>\n        {content}\n      </TabbedCard>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TopRankingUsersCard.esm.js","sources":["../../../src/components/TopRankingUsersCard/TopRankingUsersCard.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport {\n  CardTab,\n  Progress,\n  TabbedCard,\n  WarningPanel,\n} from '@backstage/core-components';\nimport {\n  Avatar,\n  Box,\n  List,\n  ListItem,\n  ListItemAvatar,\n  ListItemText,\n  makeStyles,\n  Paper,\n  Typography,\n} from '@material-ui/core';\nimport { StatisticResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { TrophyIcon } from './TrophyIcon';\nimport { UserLink } from '../Links';\nimport { useQetaApi } from '../../hooks';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nconst useStyles = makeStyles(theme => {\n  return {\n    root: {\n      '& .MuiTabbedCard-root': {\n        borderRadius: '12px',\n        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',\n      },\n      '& .MuiCardHeader-root': {\n        padding: theme.spacing(2, 3),\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      },\n      '& .MuiTabs-root': {\n        backgroundColor: theme.palette.background.paper,\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      },\n    },\n    trophyIcon: {\n      backgroundColor: theme.palette.background.paper,\n      color: theme.palette.text.primary,\n      borderRadius: '50%',\n      boxSizing: 'border-box',\n      padding: '0.5rem',\n      height: 48,\n      width: 48,\n      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',\n      transition: 'transform 0.2s ease-in-out',\n      '&:hover': {\n        transform: 'scale(1.05)',\n      },\n    },\n    votesText: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      marginLeft: '16px',\n      backgroundColor: theme.palette.background.paper,\n      padding: theme.spacing(0.5, 2),\n      borderRadius: '20px',\n      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',\n    },\n    rankingCard: {\n      padding: theme.spacing(2),\n    },\n    rankingCardDescription: {\n      color: theme.palette.text.secondary,\n      marginBottom: theme.spacing(2),\n    },\n    rankingCardList: {\n      '& .MuiListItem-root': {\n        marginBottom: theme.spacing(1),\n        borderRadius: '8px',\n        transition: 'background-color 0.2s ease-in-out',\n        '&:hover': {\n          backgroundColor: theme.palette.action.hover,\n        },\n      },\n    },\n    rankingRow: {\n      display: 'flex',\n      alignItems: 'center',\n      padding: theme.spacing(1.5, 2),\n    },\n    userInfo: {\n      display: 'flex',\n      alignItems: 'center',\n      flex: 1,\n    },\n    position: {\n      fontWeight: 800,\n      marginRight: theme.spacing(2),\n      color: theme.palette.text.secondary,\n      minWidth: '30px',\n      textAlign: 'right',\n    },\n    topPosition: {\n      color: theme.palette.primary.main,\n      fontSize: '1.1rem',\n    },\n    divider: {\n      margin: theme.spacing(2, 0),\n      opacity: 0.5,\n      border: 0,\n      borderBottom: `1px solid ${theme.palette.divider}`,\n    },\n  };\n});\n\ntype RankingIcon = {\n  iconsByRanking: Map<number, ReactNode>;\n  userRankingIcon: ReactNode;\n};\n\nconst DefaultRankingIcons = new Map<number, ReactNode>([\n  [\n    1,\n    <TrophyIcon\n      style={{ color: '#DAA520', height: '2.2rem', width: '2.2rem' }}\n    />,\n  ],\n  [\n    2,\n    <TrophyIcon\n      style={{ color: '#C0C0C0', height: '2.1rem', width: '2.1rem' }}\n    />,\n  ],\n  [\n    3,\n    <TrophyIcon style={{ color: '#B87333', height: '2rem', width: '2rem' }} />,\n  ],\n]);\n\nconst DefaultUserIcon = (\n  <TrophyIcon style={{ height: '2rem', width: '2rem' }} />\n);\n\nconst getOrdinal = (n: number) => {\n  if (n % 10 === 1 && n % 100 !== 11) {\n    return `${n}st`;\n  } else if (n % 10 === 2 && n % 100 !== 12) {\n    return `${n}nd`;\n  } else if (n % 10 === 3 && n % 100 !== 13) {\n    return `${n}rd`;\n  }\n\n  return `${n}th`;\n};\n\nexport const RankingRow = (props: {\n  userRef?: string;\n  total: number;\n  position: number;\n  rankingIcon?: RankingIcon;\n  unit: string;\n}) => {\n  const classes = useStyles();\n  const userRef = props.userRef;\n\n  const ordinalPosition = props?.position ? getOrdinal(props?.position) : '';\n\n  const userIcon = props.rankingIcon?.userRankingIcon\n    ? props.rankingIcon?.userRankingIcon\n    : DefaultUserIcon;\n\n  const topRankingIcon = props.rankingIcon\n    ? props.rankingIcon.iconsByRanking.get(Number(props?.position))\n    : DefaultRankingIcons.get(Number(props?.position)) || DefaultUserIcon;\n\n  const rankingIcon = props?.position > 3 ? userIcon : topRankingIcon;\n\n  return (\n    <ListItem className={classes.rankingRow}>\n      <ListItemAvatar>\n        <Avatar className={classes.trophyIcon}>{rankingIcon}</Avatar>\n      </ListItemAvatar>\n\n      <ListItemText\n        disableTypography\n        className={classes.userInfo}\n        primary={\n          <Box display=\"flex\" alignItems=\"center\">\n            <Typography\n              className={`${classes.position} ${\n                props.position <= 3 ? classes.topPosition : ''\n              }`}\n              variant=\"subtitle1\"\n            >\n              {ordinalPosition}\n            </Typography>\n            <UserLink entityRef={userRef ?? ''} />\n          </Box>\n        }\n      />\n\n      <div className={classes.votesText}>\n        <Typography variant=\"subtitle1\" style={{ fontWeight: 500 }}>\n          {props?.total} {props.unit}\n        </Typography>\n      </div>\n    </ListItem>\n  );\n};\n\nexport const RankingCard = (props: {\n  limit?: number;\n  description: string;\n  statistic?: StatisticResponse;\n  unit: string;\n}) => {\n  const classes = useStyles();\n  const rankingStats = props.limit\n    ? props.statistic?.ranking.slice(0, props.limit)\n    : props.statistic?.ranking;\n\n  return (\n    <Paper elevation={0} className={classes.rankingCard}>\n      <Typography className={classes.rankingCardDescription}>\n        {props.description}\n      </Typography>\n      <List className={classes.rankingCardList}>\n        {rankingStats?.map(authorStats => (\n          <RankingRow\n            total={authorStats.total || 0}\n            position={authorStats.position || 0}\n            userRef={authorStats.author}\n            unit={props.unit}\n            key={authorStats.author}\n          />\n        ))}\n        {!rankingStats?.some(\n          authorStats =>\n            authorStats.author === props.statistic?.loggedUser?.author,\n        ) && (\n          <>\n            <hr className={classes.divider} />\n            <RankingRow\n              total={props.statistic?.loggedUser?.total || 0}\n              position={props.statistic?.loggedUser?.position || 0}\n              userRef={props.statistic?.loggedUser?.author}\n              unit={props.unit}\n            />\n          </>\n        )}\n      </List>\n    </Paper>\n  );\n};\n\nexport const TopRankingUsers = (props: {\n  title?: string;\n  hideTitle?: boolean;\n  limit?: number;\n}) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const {\n    value: topStatistics,\n    loading,\n    error,\n  } = useQetaApi(api =>\n    api.getTopStatisticsHomepage({\n      options: { limit: 50 },\n    }),\n  );\n\n  const tabData = [\n    {\n      title: t('statistics.mostQuestions.title'),\n      description: t('statistics.mostQuestions.description'),\n      unit: 'questions',\n    },\n    {\n      title: t('statistics.mostAnswers.title'),\n      description: t('statistics.mostAnswers.description'),\n      unit: 'answers',\n    },\n    {\n      title: t('statistics.topVotedQuestions.title'),\n      description: t('statistics.topVotedQuestions.description'),\n      unit: 'votes',\n    },\n    {\n      title: t('statistics.topVotedAnswers.title'),\n      description: t('statistics.topVotedAnswers.description'),\n      unit: 'votes',\n    },\n    {\n      title: t('statistics.topVotedCorrectAnswers.title'),\n      description: t('statistics.topVotedCorrectAnswers.description'),\n      unit: 'votes',\n    },\n  ];\n\n  if ((error || topStatistics === undefined) && !loading) {\n    return (\n      <WarningPanel severity=\"error\" title={t('statistics.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  let content: ReactElement[];\n\n  if (loading) {\n    content = [\n      <CardTab>\n        <Box display=\"flex\" justifyContent=\"center\" p={3}>\n          <Progress />\n        </Box>\n      </CardTab>,\n    ];\n  } else if (topStatistics && topStatistics.length > 0) {\n    content = topStatistics?.map((stats, index) => {\n      return (\n        <CardTab label={tabData[index].title} key={tabData[index].title}>\n          <RankingCard\n            description={tabData[index].description}\n            limit={props.limit}\n            statistic={stats}\n            unit={tabData[index].unit}\n          />\n        </CardTab>\n      );\n    });\n  } else {\n    content = [\n      <CardTab>\n        <Box display=\"flex\" justifyContent=\"center\" p={3}>\n          {t('statistics.notAvailable')}\n        </Box>\n      </CardTab>,\n    ];\n  }\n\n  return (\n    <div className={classes.root}>\n      <TabbedCard title={props.title || t('statistics.ranking')}>\n        {content}\n      </TabbedCard>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UsersGrid/UsersGrid.esm.js

@@ -16,17 +16,41 @@ import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
 import { UsersGridContent } from './UsersGridContent.esm.js';
 import useDebounce from 'react-use/lib/useDebounce';
 import { QetaGridHeader } from '../Utility/QetaGridHeader.esm.js';
-import { Grid } from '@material-ui/core';
+import { FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
+import { Button, Collapse } from '@material-ui/core';
+import FilterList from '@material-ui/icons/FilterList';
 
+const EXPANDED_LOCAL_STORAGE_KEY = "qeta-users-filters-expanded";
 const UsersGrid = () => {
   const [page, setPage] = useState(1);
   const [pageCount, setPageCount] = useState(1);
   const [entitiesPerPage, setEntitiesPerPage] = useState(25);
   const [searchQuery, setSearchQuery] = useState("");
+  const [showFilterPanel, setShowFilterPanel] = useState(
+    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === "true"
+  );
   const [filters, setFilters] = useState({
     order: "desc",
+    orderBy: "totalPosts",
     searchQuery: ""
   });
+  useEffect(() => {
+    localStorage.setItem(
+      EXPANDED_LOCAL_STORAGE_KEY,
+      showFilterPanel ? "true" : "false"
+    );
+  }, [showFilterPanel]);
+  const onFilterChange = (changes) => {
+    const changesArray = Array.isArray(changes) ? changes : [changes];
+    setPage(1);
+    setFilters((prev) => {
+      const newValue = { ...prev };
+      for (const { key, value } of changesArray) {
+        newValue[key] = value;
+      }
+      return newValue;
+    });
+  };
   const { t } = useTranslationRef(qetaTranslationRef);
   const {
     value: response,
@@ -61,22 +85,36 @@ const UsersGrid = () => {
         title: response ? t("usersPage.users", { count: response.total }) : "",
         searchBarLabel: t("usersPage.search.label"),
         loading,
-        onSearch: setSearchQuery
+        onSearch: setSearchQuery,
+        buttons: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => setShowFilterPanel(!showFilterPanel),
+            startIcon: /* @__PURE__ */ jsx(FilterList, {}),
+            children: t("filterPanel.filterButton")
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "center", children: [
-      /* @__PURE__ */ jsx(UsersGridContent, { response, 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
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx(Collapse, { in: showFilterPanel, children: /* @__PURE__ */ jsx(
+      FilterPanel,
+      {
+        onChange: onFilterChange,
+        filters,
+        mode: "users"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(UsersGridContent, { response, 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
+      }
+    )
   ] });
 };
 

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

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

package/dist/components/UsersGrid/UsersGridContent.esm.js

@@ -19,7 +19,7 @@ const UsersGridContent = (props) => {
   if (!response?.users || response.users.length === 0) {
     return /* @__PURE__ */ jsx(Grid, { xs: 12, children: /* @__PURE__ */ jsx(NoUsersCard, {}) });
   }
-  return /* @__PURE__ */ jsx(Grid, { container: true, item: true, xs: 12, alignItems: "stretch", children: response.users.map((entity) => /* @__PURE__ */ jsx(UsersGridItem, { user: entity }, entity.userRef)) });
+  return /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, alignItems: "stretch", children: response.users.map((entity) => /* @__PURE__ */ jsx(UsersGridItem, { user: entity }, entity.userRef)) });
 };
 
 export { UsersGridContent };

package/dist/components/UsersGrid/UsersGridContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UsersGridContent.esm.js","sources":["../../../src/components/UsersGrid/UsersGridContent.tsx"],"sourcesContent":["import { UsersResponse } 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 { UsersGridItem } from './UsersGridItem';\nimport { NoUsersCard } from './NoUsersCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\n\nexport const UsersGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: UsersResponse;\n}) => {\n  const { response, error, loading } = 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('usersPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.users || response.users.length === 0) {\n    return (\n      <Grid xs={12}>\n        <NoUsersCard />\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container item xs={12} alignItems=\"stretch\">\n      {response.users.map(entity => (\n        <UsersGridItem user={entity} key={entity.userRef} />\n      ))}\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,gBAAA,GAAmB,CAAC,KAI3B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,KAAO,EAAA,OAAA,EAAY,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,wBAAwB,CAC7D,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,KAAA,IAAS,QAAS,CAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACnD,IAAA,2BACG,IAAK,EAAA,EAAA,EAAA,EAAI,EACR,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAY,CACf,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,MAAI,IAAC,EAAA,EAAA,EAAI,IAAI,UAAW,EAAA,SAAA,EACrC,mBAAS,KAAM,CAAA,GAAA,CAAI,4BACjB,GAAA,CAAA,aAAA,EAAA,EAAc,MAAM,MAAa,EAAA,EAAA,MAAA,CAAO,OAAS,CACnD,CACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UsersGridContent.esm.js","sources":["../../../src/components/UsersGrid/UsersGridContent.tsx"],"sourcesContent":["import { UsersResponse } 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 { UsersGridItem } from './UsersGridItem';\nimport { NoUsersCard } from './NoUsersCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { Grid } from '@material-ui/core';\n\nexport const UsersGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: UsersResponse;\n}) => {\n  const { response, error, loading } = 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('usersPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response?.users || response.users.length === 0) {\n    return (\n      <Grid xs={12}>\n        <NoUsersCard />\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container spacing={3} alignItems=\"stretch\">\n      {response.users.map(entity => (\n        <UsersGridItem user={entity} key={entity.userRef} />\n      ))}\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,gBAAA,GAAmB,CAAC,KAI3B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,KAAO,EAAA,OAAA,EAAY,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,wBAAwB,CAC7D,EAAA,QAAA,EAAA,KAAA,EAAO,OACV,EAAA,CAAA;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAU,EAAA,KAAA,IAAS,QAAS,CAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACnD,IAAA,2BACG,IAAK,EAAA,EAAA,EAAA,EAAI,EACR,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAY,CACf,EAAA,CAAA;AAAA;AAIJ,EAAA,2BACG,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,OAAS,EAAA,CAAA,EAAG,YAAW,SACpC,EAAA,QAAA,EAAA,QAAA,CAAS,MAAM,GAAI,CAAA,CAAA,MAAA,yBACjB,aAAc,EAAA,EAAA,IAAA,EAAM,UAAa,MAAO,CAAA,OAAS,CACnD,CACH,EAAA,CAAA;AAEJ;;;;"}