@drodil/backstage-plugin-qeta 3.60.0 → 4.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"EntityPage.esm.js","sources":["../../../src/components/EntityPage/EntityPage.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { useApi } from '@backstage/core-plugin-api';\nimport {\n  AskQuestionButton,\n  CreateLinkButton,\n  EntitiesContainer,\n  EntityFollowButton,\n  PostsContainer,\n  qetaTranslationRef,\n  useQetaApi,\n  useQetaConfig,\n  WriteArticleButton,\n  ContentHeaderCard,\n  ContentHeader,\n} from '@drodil/backstage-plugin-qeta-react';\nimport {\n  EntityRefLink,\n  useEntityPresentation,\n  catalogApiRef,\n} from '@backstage/plugin-catalog-react';\nimport CategoryOutlined from '@material-ui/icons/CategoryOutlined';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport PeopleIcon from '@material-ui/icons/People';\nimport { Skeleton } from '@material-ui/lab';\nimport { WarningPanel } from '@backstage/core-components';\nimport { Entity } from '@backstage/catalog-model';\n\nconst SingleEntityPage = ({ entityRef }: { entityRef: string }) => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n  const [entity, setEntity] = useState<Entity | undefined>(undefined);\n  const { Icon } = useEntityPresentation(entityRef);\n  const catalogApi = useApi(catalogApiRef);\n\n  useEffect(() => {\n    catalogApi.getEntityByRef(entityRef).then(e => setEntity(e));\n  }, [catalogApi, entityRef]);\n\n  const {\n    value: resp,\n    loading,\n    error,\n  } = useQetaApi(api => api.getEntity(entityRef), [entityRef]);\n\n  if (disabled.entities) {\n    return null;\n  }\n\n  if (loading) {\n    return <Skeleton variant=\"rect\" height={200} />;\n  }\n\n  if (error || !resp) {\n    return (\n      <WarningPanel severity=\"error\" title={t('questionPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  const title = (\n    <div style={{ display: 'flex', alignItems: 'center' }}>\n      <EntityRefLink\n        entityRef={resp.entityRef}\n        defaultKind=\"Component\"\n        hideIcon\n      />\n    </div>\n  );\n\n  const description = `${entity?.kind} ${\n    entity?.spec?.type ? `(${entity?.spec?.type})` : ''\n  }`;\n\n  return (\n    <>\n      <ContentHeader\n        title={title}\n        titleIcon={<CategoryOutlined fontSize=\"large\" />}\n        description={description}\n      >\n        <EntityFollowButton entityRef={resp.entityRef} />\n        <AskQuestionButton entity={resp.entityRef} />\n        <WriteArticleButton entity={resp.entityRef} />\n        <CreateLinkButton entity={resp.entityRef} />\n      </ContentHeader>\n      {resp && (\n        <ContentHeaderCard\n          description={entity?.metadata?.description}\n          imageIcon={\n            Icon ? (\n              <div style={{ fontSize: '80px', display: 'flex' }}>\n                <Icon fontSize=\"inherit\" />\n              </div>\n            ) : (\n              <CategoryOutlined style={{ fontSize: 80 }} />\n            )\n          }\n          stats={[\n            {\n              label: t('common.postsLabel', {\n                count: resp.postsCount,\n                itemType: 'post',\n              }),\n              value: resp.postsCount,\n              icon: <QuestionAnswerIcon fontSize=\"small\" />,\n            },\n            {\n              label: t('common.followersLabel', { count: resp.followerCount }),\n              value: resp.followerCount,\n              icon: <PeopleIcon fontSize=\"small\" />,\n            },\n          ]}\n        />\n      )}\n      <PostsContainer\n        entity={entityRef}\n        filterPanelProps={{ showEntityFilter: false }}\n        defaultView=\"list\"\n        showTypeLabel\n      />\n    </>\n  );\n};\n\nexport const EntityPage = () => {\n  const { entityRef } = useParams();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  if (disabled.entities) {\n    return null;\n  }\n\n  if (entityRef) {\n    return <SingleEntityPage entityRef={entityRef} />;\n  }\n\n  return (\n    <>\n      <ContentHeader\n        title={t('entitiesPage.defaultTitle')}\n        titleIcon={<CategoryOutlined fontSize=\"large\" />}\n      >\n        <AskQuestionButton />\n        <WriteArticleButton />\n        <CreateLinkButton />\n      </ContentHeader>\n      <EntitiesContainer />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityPage.esm.js","sources":["../../../src/components/EntityPage/EntityPage.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { useApi } from '@backstage/core-plugin-api';\nimport {\n  AskQuestionButton,\n  CreateLinkButton,\n  EntitiesContainer,\n  EntityFollowButton,\n  PostsContainer,\n  qetaTranslationRef,\n  useQetaApi,\n  useQetaConfig,\n  WriteArticleButton,\n} from '@drodil/backstage-plugin-qeta-react';\nimport {\n  catalogApiRef,\n  EntityRefLink,\n  useEntityPresentation,\n} from '@backstage/plugin-catalog-react';\nimport { Alert, Header, Skeleton } from '@backstage/ui';\nimport { Entity } from '@backstage/catalog-model';\n\nconst SingleEntityPage = ({ entityRef }: { entityRef: string }) => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n  const [entity, setEntity] = useState<Entity | undefined>(undefined);\n  const { primaryTitle } = useEntityPresentation(entityRef);\n  const catalogApi = useApi(catalogApiRef);\n\n  useEffect(() => {\n    catalogApi.getEntityByRef(entityRef).then(e => setEntity(e));\n  }, [catalogApi, entityRef]);\n\n  const {\n    value: resp,\n    loading,\n    error,\n  } = useQetaApi(api => api.getEntity(entityRef), [entityRef]);\n\n  if (disabled.entities) {\n    return null;\n  }\n\n  if (loading) {\n    return <Skeleton width=\"100%\" height={200} />;\n  }\n\n  if (error || !resp) {\n    return (\n      <Alert\n        status=\"danger\"\n        title={t('questionPage.errorLoading')}\n        description={error?.message}\n      />\n    );\n  }\n\n  const description = [\n    `${entity?.kind} ${entity?.spec?.type ? `(${entity?.spec?.type})` : ''}`,\n    entity?.metadata?.description,\n  ]\n    .filter(Boolean)\n    .join(' · ');\n\n  return (\n    <>\n      <Header\n        title={primaryTitle}\n        description={description}\n        metadata={[\n          ...[\n            {\n              label: t('metadata.posts'),\n              value: resp.postsCount,\n            },\n            {\n              label: t('metadata.followers'),\n              value: resp.followerCount,\n            },\n          ],\n          ...(entity?.spec?.owner\n            ? [\n                {\n                  label: t('metadata.owner'),\n                  value: (\n                    <EntityRefLink entityRef={entity.spec.owner as string} />\n                  ),\n                },\n              ]\n            : []),\n        ]}\n        customActions={\n          <>\n            <EntityFollowButton entityRef={resp.entityRef} />\n            <AskQuestionButton entity={resp.entityRef} />\n            <WriteArticleButton entity={resp.entityRef} />\n            <CreateLinkButton entity={resp.entityRef} />\n          </>\n        }\n      />\n      <PostsContainer\n        entity={entityRef}\n        filterPanelProps={{ showEntityFilter: false }}\n        defaultView=\"list\"\n        showTypeLabel\n      />\n    </>\n  );\n};\n\nexport const EntityPage = () => {\n  const { entityRef } = useParams();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  if (disabled.entities) {\n    return null;\n  }\n\n  if (entityRef) {\n    return <SingleEntityPage entityRef={entityRef} />;\n  }\n\n  return (\n    <>\n      <Header title={t('entitiesPage.defaultTitle')} />\n      <EntitiesContainer />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/EntityPostsContent/EntityPostsContent.esm.js

@@ -4,9 +4,8 @@ import { QetaProvider, PostsContainer } from '@drodil/backstage-plugin-qeta-reac
 import { Content } from '@backstage/core-components';
 import { isUserEntity, stringifyEntityRef } from '@backstage/catalog-model';
 import { useEntity, catalogApiRef } from '@backstage/plugin-catalog-react';
-import { Container } from '@material-ui/core';
+import { Skeleton, Container } from '@backstage/ui';
 import { useApi } from '@backstage/core-plugin-api';
-import { Skeleton } from '@material-ui/lab';
 
 const EntityPostsContent = (props) => {
   const [view, setView] = useState(props.view ?? "list");
@@ -46,7 +45,7 @@ const EntityPostsContent = (props) => {
     });
   }, [catalog, entity, props.relations]);
   if (loading) {
-    return /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 200 });
+    return /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 200 });
   }
   return /* @__PURE__ */ jsx(
     QetaProvider,

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

@@ -1 +1 @@
-{"version":3,"file":"EntityPostsContent.esm.js","sources":["../../../src/components/EntityPostsContent/EntityPostsContent.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  PostsContainer,\n  PostsContainerProps,\n  QetaProvider,\n  ViewType,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Content } from '@backstage/core-components';\nimport { isUserEntity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { catalogApiRef, useEntity } from '@backstage/plugin-catalog-react';\nimport type { FilterPredicate } from '@backstage/filter-predicates';\nimport { Container } from '@material-ui/core';\nimport { PluggableList } from 'unified';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { Skeleton } from '@material-ui/lab';\n\nexport type EntityPostsContentProps = PostsContainerProps & {\n  remarkPlugins?: PluggableList;\n  rehypePlugins?: PluggableList;\n  /**\n   * Relation names of the current entity to show posts too.\n   * For example for a system, you can also show all posts from components\n   * related to the system by passing `partOf` relation.\n   */\n  relations?: string[];\n};\n\nexport const EntityPostsContent = (props: EntityPostsContentProps) => {\n  const [view, setView] = useState<ViewType>(props.view ?? 'list');\n  const { entity } = useEntity();\n  const catalog = useApi(catalogApiRef);\n  const [additionalProps, setAdditionalProps] = useState<PostsContainerProps>(\n    () => {\n      if (isUserEntity(entity)) {\n        return { author: stringifyEntityRef(entity) };\n      }\n      return { entity: props.entity ?? stringifyEntityRef(entity) };\n    },\n  );\n\n  const [loading, setLoading] = useState<boolean>(true);\n  useEffect(() => {\n    if (!props.relations?.length) {\n      setLoading(false);\n      return;\n    }\n    const filters: FilterPredicate[] = props.relations.map(\n      relation =>\n        ({\n          [`relations.${relation}`]: stringifyEntityRef(entity),\n        }) as FilterPredicate,\n    );\n    catalog\n      .queryEntities({\n        query: { $any: filters },\n        fields: ['kind', 'metadata.name', 'metadata.namespace'],\n      })\n      .then(entities => {\n        setAdditionalProps(prev => ({\n          ...prev,\n          entities: entities.items.map(stringifyEntityRef),\n          entitiesRelation: 'or',\n        }));\n        setLoading(false);\n      })\n      .catch(() => {\n        setLoading(false);\n      });\n  }, [catalog, entity, props.relations]);\n\n  if (loading) {\n    return <Skeleton variant=\"rect\" height={200} />;\n  }\n\n  return (\n    <QetaProvider\n      remarkPlugins={props.remarkPlugins}\n      rehypePlugins={props.rehypePlugins}\n    >\n      <Content>\n        <Container>\n          <PostsContainer\n            {...props}\n            {...additionalProps}\n            view={view}\n            onViewChange={setView}\n          />\n        </Container>\n      </Content>\n    </QetaProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA2BO,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAAmC;AACpE,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,IAAI,QAAA,CAAmB,KAAA,CAAM,QAAQ,MAAM,CAAA;AAC/D,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,OAAA,GAAU,OAAO,aAAa,CAAA;AACpC,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA;AAAA,IAC5C,MAAM;AACJ,MAAA,IAAI,YAAA,CAAa,MAAM,CAAA,EAAG;AACxB,QAAA,OAAO,EAAE,MAAA,EAAQ,kBAAA,CAAmB,MAAM,CAAA,EAAE;AAAA,MAC9C;AACA,MAAA,OAAO,EAAE,MAAA,EAAQ,KAAA,CAAM,MAAA,IAAU,kBAAA,CAAmB,MAAM,CAAA,EAAE;AAAA,IAC9D;AAAA,GACF;AAEA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,IAAI,CAAA;AACpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,KAAA,CAAM,SAAA,EAAW,MAAA,EAAQ;AAC5B,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA;AAAA,IACF;AACA,IAAA,MAAM,OAAA,GAA6B,MAAM,SAAA,CAAU,GAAA;AAAA,MACjD,CAAA,QAAA,MACG;AAAA,QACC,CAAC,CAAA,UAAA,EAAa,QAAQ,CAAA,CAAE,GAAG,mBAAmB,MAAM;AAAA,OACtD;AAAA,KACJ;AACA,IAAA,OAAA,CACG,aAAA,CAAc;AAAA,MACb,KAAA,EAAO,EAAE,IAAA,EAAM,OAAA,EAAQ;AAAA,MACvB,MAAA,EAAQ,CAAC,MAAA,EAAQ,eAAA,EAAiB,oBAAoB;AAAA,KACvD,CAAA,CACA,IAAA,CAAK,CAAA,QAAA,KAAY;AAChB,MAAA,kBAAA,CAAmB,CAAA,IAAA,MAAS;AAAA,QAC1B,GAAG,IAAA;AAAA,QACH,QAAA,EAAU,QAAA,CAAS,KAAA,CAAM,GAAA,CAAI,kBAAkB,CAAA;AAAA,QAC/C,gBAAA,EAAkB;AAAA,OACpB,CAAE,CAAA;AACF,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA,IAClB,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AACX,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA,IAClB,CAAC,CAAA;AAAA,EACL,GAAG,CAAC,OAAA,EAAS,MAAA,EAAQ,KAAA,CAAM,SAAS,CAAC,CAAA;AAErC,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAQ,MAAA,EAAO,QAAQ,GAAA,EAAK,CAAA;AAAA,EAC/C;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,eAAe,KAAA,CAAM,aAAA;AAAA,MACrB,eAAe,KAAA,CAAM,aAAA;AAAA,MAErB,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACH,GAAG,eAAA;AAAA,UACJ,IAAA;AAAA,UACA,YAAA,EAAc;AAAA;AAAA,SAElB,CAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"EntityPostsContent.esm.js","sources":["../../../src/components/EntityPostsContent/EntityPostsContent.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  PostsContainer,\n  PostsContainerProps,\n  QetaProvider,\n  ViewType,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Content } from '@backstage/core-components';\nimport { isUserEntity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { catalogApiRef, useEntity } from '@backstage/plugin-catalog-react';\nimport type { FilterPredicate } from '@backstage/filter-predicates';\nimport { Container, Skeleton } from '@backstage/ui';\nimport { PluggableList } from 'unified';\nimport { useApi } from '@backstage/core-plugin-api';\n\nexport type EntityPostsContentProps = PostsContainerProps & {\n  remarkPlugins?: PluggableList;\n  rehypePlugins?: PluggableList;\n  /**\n   * Relation names of the current entity to show posts too.\n   * For example for a system, you can also show all posts from components\n   * related to the system by passing `partOf` relation.\n   */\n  relations?: string[];\n};\n\nexport const EntityPostsContent = (props: EntityPostsContentProps) => {\n  const [view, setView] = useState<ViewType>(props.view ?? 'list');\n  const { entity } = useEntity();\n  const catalog = useApi(catalogApiRef);\n  const [additionalProps, setAdditionalProps] = useState<PostsContainerProps>(\n    () => {\n      if (isUserEntity(entity)) {\n        return { author: stringifyEntityRef(entity) };\n      }\n      return { entity: props.entity ?? stringifyEntityRef(entity) };\n    },\n  );\n\n  const [loading, setLoading] = useState<boolean>(true);\n  useEffect(() => {\n    if (!props.relations?.length) {\n      setLoading(false);\n      return;\n    }\n    const filters: FilterPredicate[] = props.relations.map(\n      relation =>\n        ({\n          [`relations.${relation}`]: stringifyEntityRef(entity),\n        }) as FilterPredicate,\n    );\n    catalog\n      .queryEntities({\n        query: { $any: filters },\n        fields: ['kind', 'metadata.name', 'metadata.namespace'],\n      })\n      .then(entities => {\n        setAdditionalProps(prev => ({\n          ...prev,\n          entities: entities.items.map(stringifyEntityRef),\n          entitiesRelation: 'or',\n        }));\n        setLoading(false);\n      })\n      .catch(() => {\n        setLoading(false);\n      });\n  }, [catalog, entity, props.relations]);\n\n  if (loading) {\n    return <Skeleton width=\"100%\" height={200} />;\n  }\n\n  return (\n    <QetaProvider\n      remarkPlugins={props.remarkPlugins}\n      rehypePlugins={props.rehypePlugins}\n    >\n      <Content>\n        <Container>\n          <PostsContainer\n            {...props}\n            {...additionalProps}\n            view={view}\n            onViewChange={setView}\n          />\n        </Container>\n      </Content>\n    </QetaProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA0BO,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAAmC;AACpE,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,IAAI,QAAA,CAAmB,KAAA,CAAM,QAAQ,MAAM,CAAA;AAC/D,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,OAAA,GAAU,OAAO,aAAa,CAAA;AACpC,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA;AAAA,IAC5C,MAAM;AACJ,MAAA,IAAI,YAAA,CAAa,MAAM,CAAA,EAAG;AACxB,QAAA,OAAO,EAAE,MAAA,EAAQ,kBAAA,CAAmB,MAAM,CAAA,EAAE;AAAA,MAC9C;AACA,MAAA,OAAO,EAAE,MAAA,EAAQ,KAAA,CAAM,MAAA,IAAU,kBAAA,CAAmB,MAAM,CAAA,EAAE;AAAA,IAC9D;AAAA,GACF;AAEA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,IAAI,CAAA;AACpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,KAAA,CAAM,SAAA,EAAW,MAAA,EAAQ;AAC5B,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA;AAAA,IACF;AACA,IAAA,MAAM,OAAA,GAA6B,MAAM,SAAA,CAAU,GAAA;AAAA,MACjD,CAAA,QAAA,MACG;AAAA,QACC,CAAC,CAAA,UAAA,EAAa,QAAQ,CAAA,CAAE,GAAG,mBAAmB,MAAM;AAAA,OACtD;AAAA,KACJ;AACA,IAAA,OAAA,CACG,aAAA,CAAc;AAAA,MACb,KAAA,EAAO,EAAE,IAAA,EAAM,OAAA,EAAQ;AAAA,MACvB,MAAA,EAAQ,CAAC,MAAA,EAAQ,eAAA,EAAiB,oBAAoB;AAAA,KACvD,CAAA,CACA,IAAA,CAAK,CAAA,QAAA,KAAY;AAChB,MAAA,kBAAA,CAAmB,CAAA,IAAA,MAAS;AAAA,QAC1B,GAAG,IAAA;AAAA,QACH,QAAA,EAAU,QAAA,CAAS,KAAA,CAAM,GAAA,CAAI,kBAAkB,CAAA;AAAA,QAC/C,gBAAA,EAAkB;AAAA,OACpB,CAAE,CAAA;AACF,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA,IAClB,CAAC,CAAA,CACA,KAAA,CAAM,MAAM;AACX,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA,IAClB,CAAC,CAAA;AAAA,EACL,GAAG,CAAC,OAAA,EAAS,MAAA,EAAQ,KAAA,CAAM,SAAS,CAAC,CAAA;AAErC,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,MAAA,EAAO,QAAQ,GAAA,EAAK,CAAA;AAAA,EAC7C;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,eAAe,KAAA,CAAM,aAAA;AAAA,MACrB,eAAe,KAAA,CAAM,aAAA;AAAA,MAErB,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACH,GAAG,eAAA;AAAA,UACJ,IAAA;AAAA,UACA,YAAA,EAAc;AAAA;AAAA,SAElB,CAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/FavoritePage/FavoritePage.esm.js

@@ -1,23 +1,12 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { qetaTranslationRef, ContentHeader, AskQuestionButton, WriteArticleButton, CreateLinkButton, PostsContainer } from '@drodil/backstage-plugin-qeta-react';
-import StarBorder from '@material-ui/icons/StarBorder';
+import { qetaTranslationRef, PostsContainer } from '@drodil/backstage-plugin-qeta-react';
+import { Header } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
 const FavoritePage = () => {
   const { t } = useTranslationRef(qetaTranslationRef);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      ContentHeader,
-      {
-        title: t("favoritePage.title"),
-        titleIcon: /* @__PURE__ */ jsx(StarBorder, { fontSize: "large" }),
-        children: [
-          /* @__PURE__ */ jsx(AskQuestionButton, {}),
-          /* @__PURE__ */ jsx(WriteArticleButton, {}),
-          /* @__PURE__ */ jsx(CreateLinkButton, {})
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsx(Header, { title: t("favoritePage.title") }),
     /* @__PURE__ */ jsx(
       PostsContainer,
       {

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

@@ -1 +1 @@
-{"version":3,"file":"FavoritePage.esm.js","sources":["../../../src/components/FavoritePage/FavoritePage.tsx"],"sourcesContent":["import {\n  AskQuestionButton,\n  ContentHeader,\n  CreateLinkButton,\n  PostsContainer,\n  qetaTranslationRef,\n  WriteArticleButton,\n} from '@drodil/backstage-plugin-qeta-react';\nimport StarBorder from '@material-ui/icons/StarBorder';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const FavoritePage = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <>\n      <ContentHeader\n        title={t('favoritePage.title')}\n        titleIcon={<StarBorder fontSize=\"large\" />}\n      >\n        <AskQuestionButton />\n        <WriteArticleButton />\n        <CreateLinkButton />\n      </ContentHeader>\n      <PostsContainer\n        favorite\n        showNoQuestionsBtn={false}\n        showTypeLabel\n        defaultView=\"list\"\n        prefix=\"favorites\"\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAWO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,oBAAoB,CAAA;AAAA,QAC7B,SAAA,kBAAW,GAAA,CAAC,UAAA,EAAA,EAAW,QAAA,EAAS,OAAA,EAAQ,CAAA;AAAA,QAExC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA;AAAA,8BAClB,kBAAA,EAAA,EAAmB,CAAA;AAAA,8BACnB,gBAAA,EAAA,EAAiB;AAAA;AAAA;AAAA,KACpB;AAAA,oBACA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAQ,IAAA;AAAA,QACR,kBAAA,EAAoB,KAAA;AAAA,QACpB,aAAA,EAAa,IAAA;AAAA,QACb,WAAA,EAAY,MAAA;AAAA,QACZ,MAAA,EAAO;AAAA;AAAA;AACT,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FavoritePage.esm.js","sources":["../../../src/components/FavoritePage/FavoritePage.tsx"],"sourcesContent":["import {\n  PostsContainer,\n  qetaTranslationRef,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Header } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const FavoritePage = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <>\n      <Header title={t('favoritePage.title')} />\n      <PostsContainer\n        favorite\n        showNoQuestionsBtn={false}\n        showTypeLabel\n        defaultView=\"list\"\n        prefix=\"favorites\"\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAOO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,KAAA,EAAO,CAAA,CAAE,oBAAoB,CAAA,EAAG,CAAA;AAAA,oBACxC,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAQ,IAAA;AAAA,QACR,kBAAA,EAAoB,KAAA;AAAA,QACpB,aAAA,EAAa,IAAA;AAAA,QACb,WAAA,EAAY,MAAA;AAAA,QACZ,MAAA,EAAO;AAAA;AAAA;AACT,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/HomePage/HomePage.esm.js

@@ -1,81 +1,35 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { qetaTranslationRef, useQetaConfig, ContentHeader, AskQuestionButton, WriteArticleButton, CreateLinkButton, SuggestionsCard, FollowedItemsCard, ImpactCard, CommunityActivityCard, Timeline } from '@drodil/backstage-plugin-qeta-react';
-import { Box, makeStyles } from '@material-ui/core';
+import { qetaTranslationRef, useQetaConfig, AskQuestionButton, WriteArticleButton, CreateLinkButton, SuggestionsCard, FollowedItemsCard, ImpactCard, CommunityActivityCard, Timeline } from '@drodil/backstage-plugin-qeta-react';
+import { Header, Box } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import HomeOutlined from '@material-ui/icons/HomeOutlined';
+import styles from './HomePage.module.css.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  flexRow: {
-    display: "flex",
-    flexWrap: "wrap",
-    gap: theme.spacing(2),
-    width: "100%",
-    marginBottom: theme.spacing(2),
-    alignItems: "stretch"
-  },
-  suggestionColumn: {
-    flex: "3 1 350px",
-    display: "flex",
-    minWidth: 0,
-    "& > *": {
-      flex: 1,
-      maxHeight: 460,
-      overflowY: "auto"
-    }
-  },
-  followedColumn: {
-    flex: "1 1 250px",
-    display: "flex",
-    minWidth: 0,
-    "& > *": {
-      flex: 1,
-      maxHeight: 460,
-      overflowY: "auto"
-    }
-  },
-  equalColumn: {
-    flex: "1 1 395px",
-    display: "flex",
-    minWidth: 0,
-    "& > *": {
-      flex: 1,
-      maxHeight: 460,
-      overflowY: "auto"
-    }
-  },
-  timelineWrapper: {
-    width: "100%",
-    marginTop: theme.spacing(2)
-  }
-}));
 const HomePage = () => {
-  const classes = useStyles();
   const { t } = useTranslationRef(qetaTranslationRef);
   const { disabled } = useQetaConfig();
   const showSuggestions = !disabled.questions || !disabled.articles || !disabled.links;
   const showFollowed = !disabled.tags || !disabled.entities || !disabled.collections;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      ContentHeader,
+    /* @__PURE__ */ jsx(
+      Header,
       {
         title: t("homePage.title"),
-        titleIcon: /* @__PURE__ */ jsx(HomeOutlined, { fontSize: "large" }),
-        children: [
+        customActions: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(AskQuestionButton, {}),
           /* @__PURE__ */ jsx(WriteArticleButton, {}),
           /* @__PURE__ */ jsx(CreateLinkButton, {})
-        ]
+        ] })
       }
     ),
-    (showSuggestions || showFollowed) && /* @__PURE__ */ jsxs(Box, { className: classes.flexRow, children: [
-      showSuggestions && /* @__PURE__ */ jsx(Box, { className: classes.suggestionColumn, children: /* @__PURE__ */ jsx(SuggestionsCard, {}) }),
-      showFollowed && /* @__PURE__ */ jsx(Box, { className: classes.followedColumn, children: /* @__PURE__ */ jsx(FollowedItemsCard, {}) })
+    (showSuggestions || showFollowed) && /* @__PURE__ */ jsxs(Box, { className: styles.flexRow, children: [
+      showSuggestions && /* @__PURE__ */ jsx(Box, { className: styles.suggestionColumn, children: /* @__PURE__ */ jsx(SuggestionsCard, {}) }),
+      showFollowed && /* @__PURE__ */ jsx(Box, { className: styles.followedColumn, children: /* @__PURE__ */ jsx(FollowedItemsCard, {}) })
     ] }),
-    /* @__PURE__ */ jsxs(Box, { className: classes.flexRow, children: [
-      /* @__PURE__ */ jsx(Box, { className: classes.equalColumn, children: /* @__PURE__ */ jsx(ImpactCard, {}) }),
-      /* @__PURE__ */ jsx(Box, { className: classes.equalColumn, children: /* @__PURE__ */ jsx(CommunityActivityCard, {}) })
+    /* @__PURE__ */ jsxs(Box, { className: styles.flexRow, children: [
+      /* @__PURE__ */ jsx(Box, { className: styles.equalColumn, children: /* @__PURE__ */ jsx(ImpactCard, {}) }),
+      /* @__PURE__ */ jsx(Box, { className: styles.equalColumn, children: /* @__PURE__ */ jsx(CommunityActivityCard, {}) })
     ] }),
-    /* @__PURE__ */ jsx(Box, { className: classes.timelineWrapper, children: /* @__PURE__ */ jsx(Timeline, {}) })
+    /* @__PURE__ */ jsx(Box, { className: styles.timelineWrapper, children: /* @__PURE__ */ jsx(Timeline, {}) })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"HomePage.esm.js","sources":["../../../src/components/HomePage/HomePage.tsx"],"sourcesContent":["import {\n  AskQuestionButton,\n  ContentHeader,\n  CreateLinkButton,\n  ImpactCard,\n  qetaTranslationRef,\n  SuggestionsCard,\n  WriteArticleButton,\n  Timeline,\n  CommunityActivityCard,\n  FollowedItemsCard,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Box, makeStyles } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport HomeOutlined from '@material-ui/icons/HomeOutlined';\n\nconst useStyles = makeStyles(theme => ({\n  flexRow: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: theme.spacing(2),\n    width: '100%',\n    marginBottom: theme.spacing(2),\n    alignItems: 'stretch',\n  },\n  suggestionColumn: {\n    flex: '3 1 350px',\n    display: 'flex',\n    minWidth: 0,\n    '& > *': {\n      flex: 1,\n      maxHeight: 460,\n      overflowY: 'auto',\n    },\n  },\n  followedColumn: {\n    flex: '1 1 250px',\n    display: 'flex',\n    minWidth: 0,\n    '& > *': {\n      flex: 1,\n      maxHeight: 460,\n      overflowY: 'auto',\n    },\n  },\n  equalColumn: {\n    flex: '1 1 395px',\n    display: 'flex',\n    minWidth: 0,\n    '& > *': {\n      flex: 1,\n      maxHeight: 460,\n      overflowY: 'auto',\n    },\n  },\n  timelineWrapper: {\n    width: '100%',\n    marginTop: theme.spacing(2),\n  },\n}));\n\nexport const HomePage = () => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  const showSuggestions =\n    !disabled.questions || !disabled.articles || !disabled.links;\n  const showFollowed =\n    !disabled.tags || !disabled.entities || !disabled.collections;\n\n  return (\n    <>\n      <ContentHeader\n        title={t('homePage.title')}\n        titleIcon={<HomeOutlined fontSize=\"large\" />}\n      >\n        <AskQuestionButton />\n        <WriteArticleButton />\n        <CreateLinkButton />\n      </ContentHeader>\n\n      {(showSuggestions || showFollowed) && (\n        <Box className={classes.flexRow}>\n          {showSuggestions && (\n            <Box className={classes.suggestionColumn}>\n              <SuggestionsCard />\n            </Box>\n          )}\n          {showFollowed && (\n            <Box className={classes.followedColumn}>\n              <FollowedItemsCard />\n            </Box>\n          )}\n        </Box>\n      )}\n\n      <Box className={classes.flexRow}>\n        <Box className={classes.equalColumn}>\n          <ImpactCard />\n        </Box>\n        <Box className={classes.equalColumn}>\n          <CommunityActivityCard />\n        </Box>\n      </Box>\n\n      <Box className={classes.timelineWrapper}>\n        <Timeline />\n      </Box>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAiBA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,OAAA,EAAS;AAAA,IACP,OAAA,EAAS,MAAA;AAAA,IACT,QAAA,EAAU,MAAA;AAAA,IACV,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,KAAA,EAAO,MAAA;AAAA,IACP,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,UAAA,EAAY;AAAA,GACd;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,IAAA,EAAM,WAAA;AAAA,IACN,OAAA,EAAS,MAAA;AAAA,IACT,QAAA,EAAU,CAAA;AAAA,IACV,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,CAAA;AAAA,MACN,SAAA,EAAW,GAAA;AAAA,MACX,SAAA,EAAW;AAAA;AACb,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,WAAA;AAAA,IACN,OAAA,EAAS,MAAA;AAAA,IACT,QAAA,EAAU,CAAA;AAAA,IACV,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,CAAA;AAAA,MACN,SAAA,EAAW,GAAA;AAAA,MACX,SAAA,EAAW;AAAA;AACb,GACF;AAAA,EACA,WAAA,EAAa;AAAA,IACX,IAAA,EAAM,WAAA;AAAA,IACN,OAAA,EAAS,MAAA;AAAA,IACT,QAAA,EAAU,CAAA;AAAA,IACV,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,CAAA;AAAA,MACN,SAAA,EAAW,GAAA;AAAA,MACX,SAAA,EAAW;AAAA;AACb,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,MAAA;AAAA,IACP,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAE9B,CAAA,CAAE,CAAA;AAEK,MAAM,WAAW,MAAM;AAC5B,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,MAAM,eAAA,GACJ,CAAC,QAAA,CAAS,SAAA,IAAa,CAAC,QAAA,CAAS,QAAA,IAAY,CAAC,QAAA,CAAS,KAAA;AACzD,EAAA,MAAM,YAAA,GACJ,CAAC,QAAA,CAAS,IAAA,IAAQ,CAAC,QAAA,CAAS,QAAA,IAAY,CAAC,QAAA,CAAS,WAAA;AAEpD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,gBAAgB,CAAA;AAAA,QACzB,SAAA,kBAAW,GAAA,CAAC,YAAA,EAAA,EAAa,QAAA,EAAS,OAAA,EAAQ,CAAA;AAAA,QAE1C,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA;AAAA,8BAClB,kBAAA,EAAA,EAAmB,CAAA;AAAA,8BACnB,gBAAA,EAAA,EAAiB;AAAA;AAAA;AAAA,KACpB;AAAA,IAAA,CAEE,mBAAmB,YAAA,qBACnB,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,OAAA,EACrB,QAAA,EAAA;AAAA,MAAA,eAAA,wBACE,GAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,gBAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,mBAAgB,CAAA,EACnB,CAAA;AAAA,MAED,YAAA,wBACE,GAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,cAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,qBAAkB,CAAA,EACrB;AAAA,KAAA,EAEJ,CAAA;AAAA,oBAGF,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,OAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAI,SAAA,EAAW,OAAA,CAAQ,WAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,cAAW,CAAA,EACd,CAAA;AAAA,0BACC,GAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,WAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,yBAAsB,CAAA,EACzB;AAAA,KAAA,EACF,CAAA;AAAA,wBAEC,GAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,eAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HomePage.esm.js","sources":["../../../src/components/HomePage/HomePage.tsx"],"sourcesContent":["import {\n  AskQuestionButton,\n  CreateLinkButton,\n  ImpactCard,\n  qetaTranslationRef,\n  SuggestionsCard,\n  WriteArticleButton,\n  Timeline,\n  CommunityActivityCard,\n  FollowedItemsCard,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Box, Header } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport styles from './HomePage.module.css';\n\nexport const HomePage = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  const showSuggestions =\n    !disabled.questions || !disabled.articles || !disabled.links;\n  const showFollowed =\n    !disabled.tags || !disabled.entities || !disabled.collections;\n\n  return (\n    <>\n      <Header\n        title={t('homePage.title')}\n        customActions={\n          <>\n            <AskQuestionButton />\n            <WriteArticleButton />\n            <CreateLinkButton />\n          </>\n        }\n      />\n\n      {(showSuggestions || showFollowed) && (\n        <Box className={styles.flexRow}>\n          {showSuggestions && (\n            <Box className={styles.suggestionColumn}>\n              <SuggestionsCard />\n            </Box>\n          )}\n          {showFollowed && (\n            <Box className={styles.followedColumn}>\n              <FollowedItemsCard />\n            </Box>\n          )}\n        </Box>\n      )}\n\n      <Box className={styles.flexRow}>\n        <Box className={styles.equalColumn}>\n          <ImpactCard />\n        </Box>\n        <Box className={styles.equalColumn}>\n          <CommunityActivityCard />\n        </Box>\n      </Box>\n\n      <Box className={styles.timelineWrapper}>\n        <Timeline />\n      </Box>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,WAAW,MAAM;AAC5B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,MAAM,eAAA,GACJ,CAAC,QAAA,CAAS,SAAA,IAAa,CAAC,QAAA,CAAS,QAAA,IAAY,CAAC,QAAA,CAAS,KAAA;AACzD,EAAA,MAAM,YAAA,GACJ,CAAC,QAAA,CAAS,IAAA,IAAQ,CAAC,QAAA,CAAS,QAAA,IAAY,CAAC,QAAA,CAAS,WAAA;AAEpD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,gBAAgB,CAAA;AAAA,QACzB,+BACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA;AAAA,8BAClB,kBAAA,EAAA,EAAmB,CAAA;AAAA,8BACnB,gBAAA,EAAA,EAAiB;AAAA,SAAA,EACpB;AAAA;AAAA,KAEJ;AAAA,IAAA,CAEE,mBAAmB,YAAA,qBACnB,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAO,OAAA,EACpB,QAAA,EAAA;AAAA,MAAA,eAAA,wBACE,GAAA,EAAA,EAAI,SAAA,EAAW,OAAO,gBAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,mBAAgB,CAAA,EACnB,CAAA;AAAA,MAED,YAAA,wBACE,GAAA,EAAA,EAAI,SAAA,EAAW,OAAO,cAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,qBAAkB,CAAA,EACrB;AAAA,KAAA,EAEJ,CAAA;AAAA,oBAGF,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAI,SAAA,EAAW,MAAA,CAAO,WAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,cAAW,CAAA,EACd,CAAA;AAAA,0BACC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAO,WAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,yBAAsB,CAAA,EACzB;AAAA,KAAA,EACF,CAAA;AAAA,wBAEC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAO,eAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/HomePage/HomePage.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "@layer components {\n  .HomePage_flexRow__9c80de9abf {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--bui-space-4);\n    width: 100%;\n    margin-bottom: var(--bui-space-4);\n    align-items: stretch;\n  }\n\n  .HomePage_suggestionColumn__9c80de9abf {\n    flex: 3 1 350px;\n    display: flex;\n    min-width: 0;\n  }\n\n  .HomePage_suggestionColumn__9c80de9abf > * {\n    flex: 1;\n    max-height: 460px;\n    overflow-y: auto;\n  }\n\n  .HomePage_followedColumn__9c80de9abf {\n    flex: 1 1 250px;\n    display: flex;\n    min-width: 0;\n  }\n\n  .HomePage_followedColumn__9c80de9abf > * {\n    flex: 1;\n    max-height: 460px;\n    overflow-y: auto;\n  }\n\n  .HomePage_equalColumn__9c80de9abf {\n    flex: 1 1 395px;\n    display: flex;\n    min-width: 0;\n  }\n\n  .HomePage_equalColumn__9c80de9abf > * {\n    flex: 1;\n    max-height: 460px;\n    overflow-y: auto;\n  }\n\n  .HomePage_timelineWrapper__9c80de9abf {\n    width: 100%;\n    margin-top: var(--bui-space-4);\n  }\n}\n";
+var styles = {"flexRow":"HomePage_flexRow__9c80de9abf","suggestionColumn":"HomePage_suggestionColumn__9c80de9abf","followedColumn":"HomePage_followedColumn__9c80de9abf","equalColumn":"HomePage_equalColumn__9c80de9abf","timelineWrapper":"HomePage_timelineWrapper__9c80de9abf"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=HomePage.module.css.esm.js.map

package/dist/components/HomePage/HomePage.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HomePage.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/LinkPage/LinkPage.esm.js

@@ -2,28 +2,14 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useParams } from 'react-router-dom';
 import { useState, useEffect } from 'react';
 import { useSignal } from '@backstage/plugin-signals-react';
-import { WarningPanel } from '@backstage/core-components';
-import { qetaApiRef, qetaTranslationRef, useQetaConfig, useQetaApi, ContentHeader, PostHistoryButton, FollowPostButton, CreateLinkButton, AddToCollectionButton, FaviconItem, DraftBanner, DeletedBanner, LinkCard, RelativeTimeWithTooltip, UpdatedByLink } from '@drodil/backstage-plugin-qeta-react';
-import { Skeleton } from '@material-ui/lab';
+import { qetaTranslationRef, useQetaConfig, useQetaApi, EditButton, DeleteButton, RestoreButton, PostHistoryButton, FollowPostButton, AddToCollectionButton, DraftBanner, DeletedBanner, LinkCard, RelativeTimeWithTooltip, AuthorHeaderItem } from '@drodil/backstage-plugin-qeta-react';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { makeStyles, Box } from '@material-ui/core';
-import { useApi } from '@backstage/core-plugin-api';
+import { Skeleton, Alert, Header } from '@backstage/ui';
 
-const useDescriptionStyles = makeStyles(
-  () => ({
-    root: {},
-    box: {
-      display: "inline"
-    }
-  }),
-  { name: "QetaDescription" }
-);
 const LinkPage = () => {
   const { id } = useParams();
-  const qetaApi = useApi(qetaApiRef);
   const { t } = useTranslationRef(qetaTranslationRef);
   const { disabled } = useQetaConfig();
-  const dStyles = useDescriptionStyles();
   const [score, setScore] = useState(0);
   const { lastSignal } = useSignal(`qeta:post_${id}`);
   const {
@@ -46,62 +32,71 @@ const LinkPage = () => {
     return null;
   }
   if (loading) {
-    return /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 200 });
+    return /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 200 });
   }
   if (error || post === void 0) {
-    return /* @__PURE__ */ jsx(WarningPanel, { severity: "error", title: t("linkPage.errorLoading"), children: error?.message });
+    return /* @__PURE__ */ jsx(
+      Alert,
+      {
+        status: "danger",
+        title: t("linkPage.errorLoading"),
+        description: error?.message
+      }
+    );
   }
   if (post.type !== "link") {
-    return /* @__PURE__ */ jsx(WarningPanel, { title: "Not found", message: t("linkPage.notFound") });
+    return /* @__PURE__ */ jsx(
+      Alert,
+      {
+        status: "warning",
+        title: "Not found",
+        description: t("linkPage.notFound")
+      }
+    );
   }
-  const getDescription = (q) => {
-    return /* @__PURE__ */ jsxs("span", { className: dStyles.root, children: [
-      /* @__PURE__ */ jsxs(Box, { fontWeight: "fontWeightMedium", className: dStyles.box, children: [
-        t("authorBox.postedAtTime"),
-        " ",
-        /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: q.created }),
-        " \xB7 "
-      ] }),
-      q.updated && /* @__PURE__ */ jsxs(Box, { fontWeight: "fontWeightMedium", className: dStyles.box, children: [
-        t("authorBox.updatedAtTime"),
-        " ",
-        /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: q.updated }),
-        " ",
-        t("authorBox.updatedBy"),
-        " ",
-        /* @__PURE__ */ jsx(UpdatedByLink, { entity: q }),
-        " \xB7 "
-      ] }),
-      /* @__PURE__ */ jsx(Box, { fontWeight: "fontWeightMedium", className: dStyles.box, children: t("common.clicksCount", { count: score }) })
-    ] });
+  const getMetadata = (q) => {
+    const metadata = [
+      {
+        label: t("postHeader.postedAtTime"),
+        value: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: q.created })
+      },
+      {
+        label: t("postHeader.author"),
+        value: /* @__PURE__ */ jsx(AuthorHeaderItem, { userEntityRef: q.author })
+      }
+    ];
+    if (q.updated) {
+      metadata.push({
+        label: t("postHeader.updatedAtTime"),
+        value: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: q.updated })
+      });
+    }
+    if (q.updatedBy) {
+      metadata.push({
+        label: t("postHeader.updatedBy"),
+        value: /* @__PURE__ */ jsx(AuthorHeaderItem, { userEntityRef: q.updatedBy })
+      });
+    }
+    metadata.push({
+      label: t("postHeader.clicks"),
+      value: score
+    });
+    return metadata;
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      ContentHeader,
+    /* @__PURE__ */ jsx(
+      Header,
       {
-        title: post.url ? /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: post.url,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            style: { color: "inherit", textDecoration: "none" },
-            "data-testid": "link-title",
-            onClick: (event) => {
-              event.stopPropagation();
-              qetaApi.clickLink(post.id);
-            },
-            children: post.title
-          }
-        ) : post.title,
-        titleIcon: post.url ? /* @__PURE__ */ jsx(FaviconItem, { entity: post }) : void 0,
-        description: getDescription(post),
-        children: [
+        title: post.title,
+        metadata: getMetadata(post),
+        customActions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(EditButton, { entity: post, compact: true }),
+          /* @__PURE__ */ jsx(DeleteButton, { entity: post, compact: true }),
+          /* @__PURE__ */ jsx(RestoreButton, { entity: post, compact: true }),
           /* @__PURE__ */ jsx(PostHistoryButton, { post, onRestore: retry }),
           /* @__PURE__ */ jsx(FollowPostButton, { post }),
-          /* @__PURE__ */ jsx(CreateLinkButton, {}),
           /* @__PURE__ */ jsx(AddToCollectionButton, { post })
-        ]
+        ] })
       }
     ),
     post.status === "draft" && /* @__PURE__ */ jsx(DraftBanner, {}),

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

@@ -1 +1 @@
-{"version":3,"file":"LinkPage.esm.js","sources":["../../../src/components/LinkPage/LinkPage.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\nimport { useEffect, useState } from 'react';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { WarningPanel } from '@backstage/core-components';\nimport { PostResponse, QetaSignal } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  AddToCollectionButton,\n  ContentHeader,\n  CreateLinkButton,\n  DeletedBanner,\n  DraftBanner,\n  LinkCard,\n  PostHistoryButton,\n  qetaTranslationRef,\n  RelativeTimeWithTooltip,\n  UpdatedByLink,\n  useQetaApi,\n  FaviconItem,\n  qetaApiRef,\n  FollowPostButton,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Skeleton } from '@material-ui/lab';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { Box, makeStyles } from '@material-ui/core';\nimport { useApi } from '@backstage/core-plugin-api';\n\nconst useDescriptionStyles = makeStyles(\n  () => ({\n    root: {},\n    box: {\n      display: 'inline',\n    },\n  }),\n  { name: 'QetaDescription' },\n);\n\nexport const LinkPage = () => {\n  const { id } = useParams();\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n  const dStyles = useDescriptionStyles();\n  const [score, setScore] = useState(0);\n  const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${id}`);\n\n  const {\n    value: post,\n    loading,\n    error,\n    retry,\n  } = useQetaApi(api => api.getPost(id), [id]);\n\n  useEffect(() => {\n    if (post) {\n      setScore(post.score);\n    }\n  }, [post]);\n\n  useEffect(() => {\n    if (lastSignal?.type === 'post_stats') {\n      setScore(lastSignal.score);\n    }\n  }, [lastSignal]);\n\n  if (disabled.links) {\n    return null;\n  }\n\n  if (loading) {\n    return <Skeleton variant=\"rect\" height={200} />;\n  }\n\n  if (error || post === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('linkPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (post.type !== 'link') {\n    return <WarningPanel title=\"Not found\" message={t('linkPage.notFound')} />;\n  }\n\n  const getDescription = (q: PostResponse) => {\n    return (\n      <span className={dStyles.root}>\n        <Box fontWeight=\"fontWeightMedium\" className={dStyles.box}>\n          {t('authorBox.postedAtTime')}{' '}\n          <RelativeTimeWithTooltip value={q.created} />\n          {' · '}\n        </Box>\n        {q.updated && (\n          <Box fontWeight=\"fontWeightMedium\" className={dStyles.box}>\n            {t('authorBox.updatedAtTime')}{' '}\n            <RelativeTimeWithTooltip value={q.updated} />{' '}\n            {t('authorBox.updatedBy')} <UpdatedByLink entity={q} />\n            {' · '}\n          </Box>\n        )}\n        <Box fontWeight=\"fontWeightMedium\" className={dStyles.box}>\n          {t('common.clicksCount', { count: score })}\n        </Box>\n      </span>\n    );\n  };\n\n  return (\n    <>\n      <ContentHeader\n        title={\n          post.url ? (\n            <a\n              href={post.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              style={{ color: 'inherit', textDecoration: 'none' }}\n              data-testid=\"link-title\"\n              onClick={event => {\n                event.stopPropagation();\n                qetaApi.clickLink(post.id);\n              }}\n            >\n              {post.title}\n            </a>\n          ) : (\n            post.title\n          )\n        }\n        titleIcon={post.url ? <FaviconItem entity={post} /> : undefined}\n        description={getDescription(post)}\n      >\n        <PostHistoryButton post={post} onRestore={retry} />\n        <FollowPostButton post={post} />\n        <CreateLinkButton />\n        <AddToCollectionButton post={post} />\n      </ContentHeader>\n      {post.status === 'draft' && <DraftBanner />}\n      {post.status === 'deleted' && <DeletedBanner />}\n      <LinkCard link={post} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"LinkPage.esm.js","sources":["../../../src/components/LinkPage/LinkPage.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\nimport { useEffect, useState } from 'react';\nimport { useSignal } from '@backstage/plugin-signals-react';\nimport { PostResponse, QetaSignal } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  AddToCollectionButton,\n  AuthorHeaderItem,\n  DeleteButton,\n  DeletedBanner,\n  DraftBanner,\n  EditButton,\n  FollowPostButton,\n  LinkCard,\n  PostHistoryButton,\n  qetaTranslationRef,\n  RelativeTimeWithTooltip,\n  RestoreButton,\n  useQetaApi,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { Alert, Header, HeaderMetadataItem, Skeleton } from '@backstage/ui';\n\nexport const LinkPage = () => {\n  const { id } = useParams();\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n  const [score, setScore] = useState(0);\n  const { lastSignal } = useSignal<QetaSignal>(`qeta:post_${id}`);\n\n  const {\n    value: post,\n    loading,\n    error,\n    retry,\n  } = useQetaApi(api => api.getPost(id), [id]);\n\n  useEffect(() => {\n    if (post) {\n      setScore(post.score);\n    }\n  }, [post]);\n\n  useEffect(() => {\n    if (lastSignal?.type === 'post_stats') {\n      setScore(lastSignal.score);\n    }\n  }, [lastSignal]);\n\n  if (disabled.links) {\n    return null;\n  }\n\n  if (loading) {\n    return <Skeleton width=\"100%\" height={200} />;\n  }\n\n  if (error || post === undefined) {\n    return (\n      <Alert\n        status=\"danger\"\n        title={t('linkPage.errorLoading')}\n        description={error?.message}\n      />\n    );\n  }\n\n  if (post.type !== 'link') {\n    return (\n      <Alert\n        status=\"warning\"\n        title=\"Not found\"\n        description={t('linkPage.notFound')}\n      />\n    );\n  }\n\n  const getMetadata = (q: PostResponse): HeaderMetadataItem[] => {\n    const metadata: HeaderMetadataItem[] = [\n      {\n        label: t('postHeader.postedAtTime'),\n        value: <RelativeTimeWithTooltip value={q.created} />,\n      },\n      {\n        label: t('postHeader.author'),\n        value: <AuthorHeaderItem userEntityRef={q.author} />,\n      },\n    ];\n\n    if (q.updated) {\n      metadata.push({\n        label: t('postHeader.updatedAtTime'),\n        value: <RelativeTimeWithTooltip value={q.updated} />,\n      });\n    }\n    if (q.updatedBy) {\n      metadata.push({\n        label: t('postHeader.updatedBy'),\n        value: <AuthorHeaderItem userEntityRef={q.updatedBy} />,\n      });\n    }\n    metadata.push({\n      label: t('postHeader.clicks'),\n      value: score,\n    });\n\n    return metadata;\n  };\n\n  return (\n    <>\n      <Header\n        title={post.title}\n        metadata={getMetadata(post)}\n        customActions={\n          <>\n            <EditButton entity={post} compact />\n            <DeleteButton entity={post} compact />\n            <RestoreButton entity={post} compact />\n            <PostHistoryButton post={post} onRestore={retry} />\n            <FollowPostButton post={post} />\n            <AddToCollectionButton post={post} />\n          </>\n        }\n      />\n      {post.status === 'draft' && <DraftBanner />}\n      {post.status === 'deleted' && <DeletedBanner />}\n      <LinkCard link={post} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/LinksPage/LinksPage.esm.js

@@ -1,10 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useSearchParams } from 'react-router-dom';
 import { useState, useEffect } from 'react';
-import { qetaTranslationRef, useQetaConfig, ContentHeader, CreateLinkButton, PostsContainer } from '@drodil/backstage-plugin-qeta-react';
+import { qetaTranslationRef, useQetaConfig, CreateLinkButton, PostsContainer } from '@drodil/backstage-plugin-qeta-react';
 import { filterTags } from '@drodil/backstage-plugin-qeta-common';
-import LinkIcon from '@material-ui/icons/Link';
-import { Typography } from '@material-ui/core';
+import { Header } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
 const LinksPage = () => {
@@ -22,20 +21,10 @@ const LinksPage = () => {
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      ContentHeader,
+      Header,
       {
-        titleComponent: /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            variant: "h4",
-            style: { display: "flex", alignItems: "center" },
-            children: [
-              /* @__PURE__ */ jsx(LinkIcon, { fontSize: "large", style: { marginRight: "8px" } }),
-              t("linksPage.title")
-            ]
-          }
-        ),
-        children: /* @__PURE__ */ jsx(CreateLinkButton, { entity: entityRef, tags })
+        title: t("linksPage.title"),
+        customActions: /* @__PURE__ */ jsx(CreateLinkButton, { entity: entityRef, tags })
       }
     ),
     /* @__PURE__ */ jsx(PostsContainer, { type: "link", defaultView: "list" })

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

@@ -1 +1 @@
-{"version":3,"file":"LinksPage.esm.js","sources":["../../../src/components/LinksPage/LinksPage.tsx"],"sourcesContent":["import { useSearchParams } from 'react-router-dom';\nimport { useEffect, useState } from 'react';\nimport {\n  ContentHeader,\n  CreateLinkButton,\n  PostsContainer,\n  qetaTranslationRef,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport LinkIcon from '@material-ui/icons/Link';\nimport { Typography } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const LinksPage = () => {\n  const [searchParams] = useSearchParams();\n\n  const [entityRef, setEntityRef] = useState<string | undefined>(undefined);\n  const [tags, setTags] = useState<string[] | undefined>(undefined);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  useEffect(() => {\n    setEntityRef(searchParams.get('entity') ?? undefined);\n    setTags(filterTags(searchParams.get('tags')));\n  }, [searchParams, setEntityRef]);\n\n  if (disabled.links) {\n    return null;\n  }\n\n  return (\n    <>\n      <ContentHeader\n        titleComponent={\n          <Typography\n            variant=\"h4\"\n            style={{ display: 'flex', alignItems: 'center' }}\n          >\n            <LinkIcon fontSize=\"large\" style={{ marginRight: '8px' }} />\n            {t('linksPage.title')}\n          </Typography>\n        }\n      >\n        <CreateLinkButton entity={entityRef} tags={tags} />\n      </ContentHeader>\n      <PostsContainer type=\"link\" defaultView=\"list\" />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAcO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,eAAA,EAAgB;AAEvC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA6B,MAAS,CAAA;AACxE,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA+B,MAAS,CAAA;AAChE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,YAAA,CAAa,GAAA,CAAI,QAAQ,CAAA,IAAK,MAAS,CAAA;AACpD,IAAA,OAAA,CAAQ,UAAA,CAAW,YAAA,CAAa,GAAA,CAAI,MAAM,CAAC,CAAC,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,YAAA,EAAc,YAAY,CAAC,CAAA;AAE/B,EAAA,IAAI,SAAS,KAAA,EAAO;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,cAAA,kBACE,IAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,IAAA;AAAA,YACR,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAQ,YAAY,QAAA,EAAS;AAAA,YAE/C,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,YAAS,QAAA,EAAS,OAAA,EAAQ,OAAO,EAAE,WAAA,EAAa,OAAM,EAAG,CAAA;AAAA,cACzD,EAAE,iBAAiB;AAAA;AAAA;AAAA,SACtB;AAAA,QAGF,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,MAAA,EAAQ,SAAA,EAAW,IAAA,EAAY;AAAA;AAAA,KACnD;AAAA,oBACA,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAK,MAAA,EAAO,aAAY,MAAA,EAAO;AAAA,GAAA,EACjD,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LinksPage.esm.js","sources":["../../../src/components/LinksPage/LinksPage.tsx"],"sourcesContent":["import { useSearchParams } from 'react-router-dom';\nimport { useEffect, useState } from 'react';\nimport {\n  CreateLinkButton,\n  PostsContainer,\n  qetaTranslationRef,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { Header } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const LinksPage = () => {\n  const [searchParams] = useSearchParams();\n\n  const [entityRef, setEntityRef] = useState<string | undefined>(undefined);\n  const [tags, setTags] = useState<string[] | undefined>(undefined);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  useEffect(() => {\n    setEntityRef(searchParams.get('entity') ?? undefined);\n    setTags(filterTags(searchParams.get('tags')));\n  }, [searchParams, setEntityRef]);\n\n  if (disabled.links) {\n    return null;\n  }\n\n  return (\n    <>\n      <Header\n        title={t('linksPage.title')}\n        customActions={<CreateLinkButton entity={entityRef} tags={tags} />}\n      />\n      <PostsContainer type=\"link\" defaultView=\"list\" />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAYO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,eAAA,EAAgB;AAEvC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA6B,MAAS,CAAA;AACxE,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA+B,MAAS,CAAA;AAChE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,YAAA,CAAa,GAAA,CAAI,QAAQ,CAAA,IAAK,MAAS,CAAA;AACpD,IAAA,OAAA,CAAQ,UAAA,CAAW,YAAA,CAAa,GAAA,CAAI,MAAM,CAAC,CAAC,CAAA;AAAA,EAC9C,CAAA,EAAG,CAAC,YAAA,EAAc,YAAY,CAAC,CAAA;AAE/B,EAAA,IAAI,SAAS,KAAA,EAAO;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,iBAAiB,CAAA;AAAA,QAC1B,aAAA,kBAAe,GAAA,CAAC,gBAAA,EAAA,EAAiB,MAAA,EAAQ,WAAW,IAAA,EAAY;AAAA;AAAA,KAClE;AAAA,oBACA,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAK,MAAA,EAAO,aAAY,MAAA,EAAO;AAAA,GAAA,EACjD,CAAA;AAEJ;;;;"}

package/dist/components/ModeratorPage/ModeratorPage.esm.js

@@ -1,10 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { useIsModerator, qetaTranslationRef, ContentHeader, TemplateList, PostsContainer } from '@drodil/backstage-plugin-qeta-react';
-import { Box, Tab } from '@material-ui/core';
-import { TabContext, TabList, TabPanel, Alert } from '@material-ui/lab';
+import { useIsModerator, qetaTranslationRef, TemplateList, PostsContainer } from '@drodil/backstage-plugin-qeta-react';
+import { Header, Tabs, TabList, Tab, TabPanel, Alert } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import SettingsOutlined from '@material-ui/icons/SettingsOutlined';
+import styles from './ModeratorPage.module.css.esm.js';
 
 const ModeratorPage = () => {
   const { isModerator } = useIsModerator();
@@ -13,34 +12,25 @@ const ModeratorPage = () => {
   if (!isModerator) {
     return null;
   }
-  const handleChange = (_event, newValue) => {
-    setTab(newValue);
-  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ContentHeader,
-      {
-        title: t("moderatorPage.title"),
-        titleIcon: /* @__PURE__ */ jsx(SettingsOutlined, { fontSize: "large" })
-      }
-    ),
-    /* @__PURE__ */ jsxs(TabContext, { value: tab, children: [
-      /* @__PURE__ */ jsx(Box, { sx: { borderBottom: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsxs(
-        TabList,
-        {
-          onChange: handleChange,
-          "aria-label": t("moderatorPage.tools"),
-          children: [
-            /* @__PURE__ */ jsx(Tab, { label: t("moderatorPage.templates"), value: "templates" }),
-            /* @__PURE__ */ jsx(Tab, { label: t("moderatorPage.deletedPosts"), value: "deletedPosts" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(TabPanel, { value: "templates", style: { padding: "24px 0" }, children: [
-        /* @__PURE__ */ jsx(Alert, { severity: "info", style: { marginBottom: "1em" }, children: t("moderatorPage.templatesInfo") }),
+    /* @__PURE__ */ jsx(Header, { title: t("moderatorPage.title") }),
+    /* @__PURE__ */ jsxs(Tabs, { selectedKey: tab, onSelectionChange: (key) => setTab(key), children: [
+      /* @__PURE__ */ jsxs(TabList, { "aria-label": t("moderatorPage.tools"), children: [
+        /* @__PURE__ */ jsx(Tab, { id: "templates", children: t("moderatorPage.templates") }),
+        /* @__PURE__ */ jsx(Tab, { id: "deletedPosts", children: t("moderatorPage.deletedPosts") })
+      ] }),
+      /* @__PURE__ */ jsxs(TabPanel, { id: "templates", className: styles.tabPanel, children: [
+        /* @__PURE__ */ jsx(
+          Alert,
+          {
+            status: "info",
+            description: t("moderatorPage.templatesInfo"),
+            className: styles.alert
+          }
+        ),
         /* @__PURE__ */ jsx(TemplateList, {})
       ] }),
-      /* @__PURE__ */ jsx(TabPanel, { value: "deletedPosts", style: { padding: "24px 0" }, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(TabPanel, { id: "deletedPosts", className: styles.tabPanel, children: /* @__PURE__ */ jsx(
         PostsContainer,
         {
           status: "deleted",