npm - @drodil/backstage-plugin-qeta-react - Versions diffs - 3.7.2 → 3.9.0 - Mend

@drodil/backstage-plugin-qeta-react 3.7.2 → 3.9.0

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

Files changed (58) hide show

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

@@ -9,7 +9,6 @@ import 'react-use/lib/useAsync';
 import useDebounce from 'react-use/lib/useDebounce';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
 import { EntitiesGridContent } from './EntitiesGridContent.esm.js';
-import { NoEntitiesCard } from './NoEntitiesCard.esm.js';
 const EntitiesGrid = () => {
   const [page, setPage] = React.useState(1);
@@ -51,9 +50,6 @@ const EntitiesGrid = () => {
       setPageCount(Math.ceil(response.total / entitiesPerPage));
     }
   }, [response, entitiesPerPage]);
-  if (!response?.entities || response.entities.length === 0) {
-    return /* @__PURE__ */ React.createElement(NoEntitiesCard, null);
-  }
   return /* @__PURE__ */ React.createElement(Grid, { container: true, className: "qetaEntitiesContainer" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
     TextField,
     {
@@ -72,7 +68,7 @@ const EntitiesGrid = () => {
       loading,
       error
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), response && response?.total > 0 && /* @__PURE__ */ React.createElement(
     QetaPagination,
     {
       pageSize: entitiesPerPage,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EntitiesGrid.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGrid.tsx"],"sourcesContent":["import { Grid, IconButton, TextField } from '@material-ui/core';\nimport React, { useEffect } from 'react';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { EntitiesGridContent } from './EntitiesGridContent';\~~nimport { NoEntitiesCard } from './NoEntitiesCard';\~~n\ntype EntityFilters = {\n order: 'asc' \| 'desc';\n orderBy?: 'entityRef';\n searchQuery: string;\n};\n\nexport const EntitiesGrid = () => {\n const [page, setPage] = React.useState(1);\n const [pageCount, setPageCount] = React.useState(1);\n const [entitiesPerPage, setEntitiesPerPage] = React.useState(25);\n const [searchQuery, setSearchQuery] = React.useState('');\n const [filters, setFilters] = React.useState<EntityFilters>({\n order: 'desc',\n searchQuery: '',\n });\n const { t } = useTranslation();\n\n const {\n value: response,\n loading,\n error,\n } = useQetaApi(\n api =>\n api.getEntities({\n limit: entitiesPerPage,\n offset: (page - 1) * entitiesPerPage,\n ...filters,\n }),\n [entitiesPerPage, page, filters],\n );\n\n const onSearchQueryChange = (val: string) => {\n setPage(1);\n setSearchQuery(val);\n };\n\n useDebounce(\n () => {\n if (filters.searchQuery !== searchQuery) {\n setFilters({ ...filters, searchQuery: searchQuery });\n }\n },\n 400,\n [searchQuery],\n );\n\n useEffect(() => {\n if (response) {\n setPageCount(Math.ceil(response.total / entitiesPerPage));\n }\n }, [response, entitiesPerPage]);\n\n ~~if (!response?.entities \|\| response.entities.length === 0) {\n~~ return ~~<NoEntitiesCard />;\n }\n\n return~~ (\n <Grid container className=\"qetaEntitiesContainer\">\n <Grid item xs={12}>\n <TextField\n id=\"search-bar\"\n className=\"text qetaEntitiesContainerSearchInput\"\n onChange={(\n event: React.ChangeEvent<HTMLTextAreaElement \| HTMLInputElement>,\n ) => onSearchQueryChange(event.target.value)}\n label={t('entitiesPage.search.label')}\n variant=\"outlined\"\n placeholder={t('entitiesPage.search.placeholder')}\n size=\"small\"\n />\n <IconButton type=\"submit\" aria-label=\"search\" />\n </Grid>\n <EntitiesGridContent\n response={response}\n loading={loading}\n error={error}\n />\n <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 </Grid>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;AAcO~~,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AACxC,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AAClD,EAAA,MAAM,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,KAAA,CAAM,SAAS,EAAE,CAAA,CAAA;AAC/D,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,KAAA,CAAM,SAAS,EAAE,CAAA,CAAA;AACvD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,MAAM,QAAwB,CAAA;AAAA,IAC1D,KAAO,EAAA,MAAA;AAAA,IACP,WAAa,EAAA,EAAA;AAAA,GACd,CAAA,CAAA;AACD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAE7B,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA,KAAA;AAAA,GACE,GAAA,UAAA;AAAA,IACF,CAAA,GAAA,KACE,IAAI,WAAY,CAAA;AAAA,MACd,KAAO,EAAA,eAAA;AAAA,MACP,MAAA,EAAA,CAAS,OAAO,CAAK,IAAA,eAAA;AAAA,MACrB,GAAG,OAAA;AAAA,KACJ,CAAA;AAAA,IACH,CAAC,eAAiB,EAAA,IAAA,EAAM,OAAO,CAAA;AAAA,GACjC,CAAA;AAEA,EAAM,MAAA,mBAAA,GAAsB,CAAC,GAAgB,KAAA;AAC3C,IAAA,OAAA,CAAQ,CAAC,CAAA,CAAA;AACT,IAAA,cAAA,CAAe,GAAG,CAAA,CAAA;AAAA,GACpB,CAAA;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,CAAA;AAAA,OACrD;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;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,CAAA;AAAA,KAC1D;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,eAAe,CAAC,CAAA,CAAA;AAE9B,~~EAAA,IAAI,CAAC,QAAU,EAAA,QAAA,IAAY,QAAS,CAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzD,IAAA,2CAAQ,cAAe,EAAA,IAAA,CAAA,CAAA;AAAA,GACzB;AAEA,~~EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,SAAA,EAAU,uBACxB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,YAAA;AAAA,MACH,SAAU,EAAA,uCAAA;AAAA,MACV,UAAU,CACR,KAAA,KACG,mBAAoB,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,MAC3C,KAAA,EAAO,EAAE,2BAA2B,CAAA;AAAA,MACpC,OAAQ,EAAA,UAAA;AAAA,MACR,WAAA,EAAa,EAAE,iCAAiC,CAAA;AAAA,MAChD,IAAK,EAAA,OAAA;AAAA,KAAA;AAAA,GACP,sCACC,UAAW,EAAA,EAAA,IAAA,EAAK,UAAS,YAAW,EAAA,QAAA,EAAS,CAChD,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,KAAA;AAAA,~~GAEF~~,~~kBAAA~~,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,eAAA;AAAA,MACV,gBAAkB,EAAA,CAAC,EAAI,EAAA,CAAA,KAAM,QAAQ,CAAC,CAAA;AAAA,MACtC,sBAAsB,CAAK,CAAA,KAAA,kBAAA,CAAmB,OAAO,CAAE,CAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,MACpE,IAAA;AAAA,MACA,SAAA;AAAA,KAAA;AAAA,~~GAEJ~~,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"EntitiesGrid.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGrid.tsx"],"sourcesContent":["import { Grid, IconButton, TextField } from '@material-ui/core';\nimport React, { useEffect } from 'react';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { EntitiesGridContent } from './EntitiesGridContent';\n\ntype EntityFilters = {\n order: 'asc' \| 'desc';\n orderBy?: 'entityRef';\n searchQuery: string;\n};\n\nexport const EntitiesGrid = () => {\n const [page, setPage] = React.useState(1);\n const [pageCount, setPageCount] = React.useState(1);\n const [entitiesPerPage, setEntitiesPerPage] = React.useState(25);\n const [searchQuery, setSearchQuery] = React.useState('');\n const [filters, setFilters] = React.useState<EntityFilters>({\n order: 'desc',\n searchQuery: '',\n });\n const { t } = useTranslation();\n\n const {\n value: response,\n loading,\n error,\n } = useQetaApi(\n api =>\n api.getEntities({\n limit: entitiesPerPage,\n offset: (page - 1) * entitiesPerPage,\n ...filters,\n }),\n [entitiesPerPage, page, filters],\n );\n\n const onSearchQueryChange = (val: string) => {\n setPage(1);\n setSearchQuery(val);\n };\n\n useDebounce(\n () => {\n if (filters.searchQuery !== searchQuery) {\n setFilters({ ...filters, searchQuery: searchQuery });\n }\n },\n 400,\n [searchQuery],\n );\n\n useEffect(() => {\n if (response) {\n setPageCount(Math.ceil(response.total / entitiesPerPage));\n }\n }, [response, entitiesPerPage]);\n\n return (\n <Grid container className=\"qetaEntitiesContainer\">\n <Grid item xs={12}>\n <TextField\n id=\"search-bar\"\n className=\"text qetaEntitiesContainerSearchInput\"\n onChange={(\n event: React.ChangeEvent<HTMLTextAreaElement \| HTMLInputElement>,\n ) => onSearchQueryChange(event.target.value)}\n label={t('entitiesPage.search.label')}\n variant=\"outlined\"\n placeholder={t('entitiesPage.search.placeholder')}\n size=\"small\"\n />\n <IconButton type=\"submit\" aria-label=\"search\" />\n </Grid>\n <EntitiesGridContent\n response={response}\n loading={loading}\n error={error}\n />\n {response && response?.total > 0 && (\n <QetaPagination\n pageSize={entitiesPerPage}\n handlePageChange={(_e, p) => setPage(p)}\n handlePageSizeChange={e => setEntitiesPerPage(Number(e.target.value))}\n page={page}\n pageCount={pageCount}\n />\n )}\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { Grid, Typography } from '@material-ui/core';
 import React, { useState, useEffect } from 'react';
-import { Progress, WarningPanel } from '@backstage/core-components';
+import { WarningPanel } from '@backstage/core-components';
 import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
@@ -8,22 +8,30 @@ import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { EntitiesGridItem } from './EntitiesGridItem.esm.js';
+import { NoEntitiesCard } from './NoEntitiesCard.esm.js';
+import { LoadingGrid } from '../LoadingGrid/LoadingGrid.esm.js';
 const EntitiesGridContent = (props) => {
   const { response, loading, error } = props;
   const { t } = useTranslation();
   const [initialLoad, setInitialLoad] = useState(true);
   useEffect(() => {
-    if (!initialLoad) {
+    if (!loading) {
       setInitialLoad(false);
     }
   }, [initialLoad, loading]);
-  if (loading && initialLoad) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+  if (loading) {
+    if (initialLoad) {
+      return /* @__PURE__ */ React.createElement(LoadingGrid, null);
+    }
+    return null;
   }
   if (error || response === void 0) {
     return /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: t("entitiesPage.errorLoading") }, error?.message);
   }
+  if (!response?.entities || response.entities.length === 0) {
+    return /* @__PURE__ */ React.createElement(NoEntitiesCard, null);
+  }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: "qetaEntitiesContainerTitle" }, t("entitiesPage.entities", { count: response.total }))), /* @__PURE__ */ React.createElement(Grid, { container: true, item: true, xs: 12, alignItems: "stretch" }, response?.entities.map((entity) => /* @__PURE__ */ React.createElement(EntitiesGridItem, { entity, key: entity.entityRef }))));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EntitiesGridContent.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridContent.tsx"],"sourcesContent":["import { Grid, Typography } from '@material-ui/core';\nimport React, { useEffect, useState } from 'react';\nimport { EntitiesResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { ~~Progress,~~ WarningPanel } from '@backstage/core-components';\nimport { useTranslation } from '../../hooks';\nimport { EntitiesGridItem } from './EntitiesGridItem';\n\nexport const EntitiesGridContent = (props: {\n loading: boolean;\n error: any;\n response?: EntitiesResponse;\n}) => {\n const { response, loading, error } = props;\n const { t } = useTranslation();\n const [initialLoad, setInitialLoad] = useState(true);\n\n useEffect(() => {\n if (!~~initialLoad~~) {\n setInitialLoad(false);\n }\n }, [initialLoad, loading]);\n\n if (loading && initialLoad) {\n return <~~Progress~~ />;\n }\n\n if (error \|\| response === undefined) {\n return (\n <WarningPanel severity=\"error\" title={t('entitiesPage.errorLoading')}>\n {error?.message}\n </WarningPanel>\n );\n }\n\n return (\n <>\n <Grid item xs={12}>\n <Typography variant=\"h6\" className=\"qetaEntitiesContainerTitle\">\n {t('entitiesPage.entities', { count: response.total })}\n </Typography>\n </Grid>\n <Grid container item xs={12} alignItems=\"stretch\">\n {response?.entities.map(entity => (\n <EntitiesGridItem entity={entity} key={entity.entityRef} />\n ))}\n </Grid>\n </>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;AAOa~~,MAAA,mBAAA,GAAsB,CAAC,KAI9B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACrC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;~~AAEnD~~,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,~~WAAa~~,EAAA;~~AAChB~~,MAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,KACtB;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,OAAO,CAAC,CAAA,CAAA;AAEzB,EAAA,IAAI,~~WAAW~~,WAAa,EAAA;~~AAC1B~~,~~IAAA~~,2CAAQ,~~QAAS~~,EAAA,IAAA,CAAA,CAAA;AAAA,~~GACnB~~;AAEA,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,2BAA2B,CAChE,EAAA,EAAA,KAAA,EAAO,OACV,CAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAA,sCACZ,UAAW,EAAA,EAAA,OAAA,EAAQ,MAAK,SAAU,EAAA,4BAAA,EAAA,EAChC,EAAE,uBAAyB,EAAA,EAAE,OAAO,QAAS,CAAA,KAAA,EAAO,CACvD,CACF,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IAAC,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAI,YAAW,SACrC,EAAA,EAAA,QAAA,EAAU,SAAS,GAAI,CAAA,CAAA,MAAA,yCACrB,gBAAiB,EAAA,EAAA,MAAA,EAAgB,KAAK,MAAO,CAAA,SAAA,EAAW,CAC1D,CACH,CACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"EntitiesGridContent.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridContent.tsx"],"sourcesContent":["import { Grid, Typography } from '@material-ui/core';\nimport React, { useEffect, useState } from 'react';\nimport { EntitiesResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslation } from '../../hooks';\nimport { EntitiesGridItem } from './EntitiesGridItem';\nimport { NoEntitiesCard } from './NoEntitiesCard';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\n\nexport const EntitiesGridContent = (props: {\n loading: boolean;\n error: any;\n response?: EntitiesResponse;\n}) => {\n const { response, loading, error } = props;\n const { t } = useTranslation();\n const [initialLoad, setInitialLoad] = useState(true);\n useEffect(() => {\n if (!loading) {\n setInitialLoad(false);\n }\n }, [initialLoad, loading]);\n\n if (loading) {\n if (initialLoad) {\n return <LoadingGrid />;\n }\n return null;\n }\n\n if (error \|\| response === undefined) {\n return (\n <WarningPanel severity=\"error\" title={t('entitiesPage.errorLoading')}>\n {error?.message}\n </WarningPanel>\n );\n }\n\n if (!response?.entities \|\| response.entities.length === 0) {\n return <NoEntitiesCard />;\n }\n\n return (\n <>\n <Grid item xs={12}>\n <Typography variant=\"h6\" className=\"qetaEntitiesContainerTitle\">\n {t('entitiesPage.entities', { count: response.total })}\n </Typography>\n </Grid>\n <Grid container item xs={12} alignItems=\"stretch\">\n {response?.entities.map(entity => (\n <EntitiesGridItem entity={entity} key={entity.entityRef} />\n ))}\n </Grid>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AASa,MAAA,mBAAA,GAAsB,CAAC,KAI9B,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACrC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AACnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,KACtB;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,OAAO,CAAC,CAAA,CAAA;AAEzB,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,IAAI,WAAa,EAAA;AACf,MAAA,2CAAQ,WAAY,EAAA,IAAA,CAAA,CAAA;AAAA,KACtB;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,2BAA2B,CAChE,EAAA,EAAA,KAAA,EAAO,OACV,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,IAAI,CAAC,QAAU,EAAA,QAAA,IAAY,QAAS,CAAA,QAAA,CAAS,WAAW,CAAG,EAAA;AACzD,IAAA,2CAAQ,cAAe,EAAA,IAAA,CAAA,CAAA;AAAA,GACzB;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAA,sCACZ,UAAW,EAAA,EAAA,OAAA,EAAQ,MAAK,SAAU,EAAA,4BAAA,EAAA,EAChC,EAAE,uBAAyB,EAAA,EAAE,OAAO,QAAS,CAAA,KAAA,EAAO,CACvD,CACF,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IAAC,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAI,YAAW,SACrC,EAAA,EAAA,QAAA,EAAU,SAAS,GAAI,CAAA,CAAA,MAAA,yCACrB,gBAAiB,EAAA,EAAA,MAAA,EAAgB,KAAK,MAAO,CAAA,SAAA,EAAW,CAC1D,CACH,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,16 +1,18 @@
-import React, { useEffect } from 'react';
-import { Box, Grid, FormGroup, FormControlLabel, Checkbox, FormControl, FormLabel, RadioGroup, TextField, Divider, Radio } from '@material-ui/core';
-import { Autocomplete } from '@material-ui/lab';
+import React from 'react';
+import { Box, Grid, FormGroup, FormLabel, FormControlLabel, Checkbox, FormControl, RadioGroup, Divider, Tooltip, IconButton, Radio } from '@material-ui/core';
 import { stringifyEntityRef } from '@backstage/catalog-model';
-import { useApi } from '@backstage/core-plugin-api';
-import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import { getEntityTitle } from '../../utils/utils.esm.js';
 import { DateRangeFilter } from './DateRangeFilter.esm.js';
-import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
+import { useApi, identityApiRef } from '@backstage/core-plugin-api';
 import '../../api.esm.js';
+import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
+import { EntitiesInput } from '../PostForm/EntitiesInput.esm.js';
+import { TagInput } from '../PostForm/TagInput.esm.js';
+import { useStarredEntities, catalogApiRef } from '@backstage/plugin-catalog-react';
+import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+import AdjustIcon from '@material-ui/icons/Adjust';
 const radioSelect = (value, label) => {
   return /* @__PURE__ */ React.createElement(
@@ -28,214 +30,265 @@ const filterKeys = [
   "noAnswers",
   "noCorrectAnswer",
   "noVotes",
-  "entity",
   "tags",
   "dateRange"
 ];
+function isPostFilters(filters) {
+  return filters.noAnswers !== void 0;
+}
+function isAnswerFilters(filters) {
+  return filters.noVotes !== void 0 && filters.noAnswers === void 0;
+}
+function isCollectionFilters(filters) {
+  return filters.noAnswers === void 0;
+}
 const FilterPanel = (props) => {
   const {
     onChange,
     filters,
     showEntityFilter = true,
     showTagFilter = true,
-    answerFilters = false,
     type
   } = props;
   const styles = useStyles();
-  const { value: refs } = useQetaApi((api) => api.getEntities(), []);
-  const { value: tags } = useQetaApi((api) => api.getTags(), []);
-  const catalogApi = useApi(catalogApiRef);
   const { t } = useTranslation();
-  const [availableEntities, setAvailableEntities] = React.useState(null);
-  const [selectedEntity, setSelectedEntity] = React.useState(void 0);
-  const [availableTags, setAvailableTags] = React.useState(
-    null
+  const [entities, setEntities] = React.useState(
+    void 0
   );
-  useEffect(() => {
-    if (tags && tags.tags && tags.total > 0 || filters.tags) {
-      const ts = (tags?.tags ?? []).map((tag) => tag.tag);
-      if (filters.tags) {
-        ts.push(...filters.tags);
-      }
-      setAvailableTags([...new Set(ts)]);
-    }
-  }, [tags, filters.tags]);
-  useEffect(() => {
-    const entityRefs = [];
-    if (filters.entity && !Array.isArray(filters.entity)) {
-      entityRefs.push(filters.entity);
+  const [starredEntities, setStarredEntities] = React.useState(false);
+  const [ownedEntities, setOwnedEntities] = React.useState(false);
+  const starredEntitiesApi = useStarredEntities();
+  const catalogApi = useApi(catalogApiRef);
+  const identityApi = useApi(identityApiRef);
+  const handleChange = (event) => {
+    let value = event.target.value;
+    if (event.target.type === "checkbox") {
+      value = event.target.checked ? "true" : "false";
     }
-    if (refs && refs.entities && refs.total > 0) {
-      refs.entities.forEach((ref) => {
-        if (ref.entityRef !== filters.entity) {
-          entityRefs.push(ref.entityRef);
-        }
+    onChange({ key: event.target.name, value });
+  };
+  const handleStarredEntities = (checked) => {
+    setStarredEntities(checked);
+    setEntities([]);
+    if (checked) {
+      onChange({
+        key: "entities",
+        value: [...starredEntitiesApi.starredEntities]
       });
+    } else {
+      onChange({ key: "entities", value: [] });
     }
-    if (entityRefs.length > 0) {
-      catalogApi.getEntitiesByRefs({
-        entityRefs,
-        fields: [
-          "kind",
-          "metadata.name",
-          "metadata.namespace",
-          "metadata.title"
-        ]
-      }).then((resp) => {
-        const filtered = resp.items.filter((i) => i !== void 0);
-        setAvailableEntities(filtered);
+  };
+  const handleOwnedEntities = (checked) => {
+    setOwnedEntities(checked);
+    setEntities([]);
+    if (checked) {
+      identityApi.getBackstageIdentity().then((identity) => {
+        catalogApi.getEntities({
+          filter: {
+            "spec.owner": identity.ownershipEntityRefs
+          },
+          fields: ["kind", "metadata.name", "metadata.namespace"]
+        }).then((data) => {
+          const entityRefs = data.items.map((e) => stringifyEntityRef(e));
+          onChange([
+            { key: "entities", value: entityRefs },
+            { key: "entitiesRelation", value: "or" }
+          ]);
+        });
       });
-    }
-  }, [filters.entity, catalogApi, refs]);
-  useEffect(() => {
-    if (filters.entity && availableEntities) {
-      const value = availableEntities.find(
-        (e) => stringifyEntityRef(e) === filters.entity
-      );
-      setSelectedEntity(value);
-      if (!value) {
-        onChange("entity", "");
-      }
     } else {
-      setSelectedEntity(void 0);
+      onChange([
+        { key: "entities", value: [] },
+        { key: "entitiesRelation", value: "and" }
+      ]);
     }
-  }, [availableEntities, filters.entity, onChange]);
-  const handleChange = (event) => {
-    let value = event.target.value;
-    if (event.target.type === "checkbox") {
-      value = event.target.checked ? "true" : "false";
-    }
-    onChange(event.target.name, value);
   };
-  return /* @__PURE__ */ React.createElement(Box, { className: `qetaFilterPanel ${styles.filterPanel}` }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 4 }, /* @__PURE__ */ React.createElement(Grid, { item: true, md: 3, xs: 4 }, /* @__PURE__ */ React.createElement(FormGroup, null, !answerFilters && type !== "article" && /* @__PURE__ */ React.createElement(
-    FormControlLabel,
+  const postFilters = isPostFilters(filters);
+  const answerFilters = isAnswerFilters(filters);
+  const collectionFilters = isCollectionFilters(filters);
+  return /* @__PURE__ */ React.createElement(Box, { className: `qetaFilterPanel ${styles.filterPanel}` }, /* @__PURE__ */ React.createElement(
+    Grid,
     {
-      control: /* @__PURE__ */ React.createElement(
-        Checkbox,
-        {
-          size: "small",
-          name: "noAnswers",
-          onChange: handleChange,
-          checked: filters.noAnswers === "true"
+      container: true,
+      spacing: 4,
+      alignItems: "stretch",
+      justifyContent: "space-evenly"
+    },
+    (postFilters || answerFilters) && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(FormGroup, null, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-quick" }, t("filterPanel.quickFilters.label")), postFilters && type !== "article" && /* @__PURE__ */ React.createElement(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            size: "small",
+            name: "noAnswers",
+            onChange: handleChange,
+            checked: filters.noAnswers === "true"
+          }
+        ),
+        label: t("filterPanel.noAnswers.label")
+      }
+    ), (postFilters || answerFilters) && type !== "article" && /* @__PURE__ */ React.createElement(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            size: "small",
+            name: "noCorrectAnswer",
+            checked: filters.noCorrectAnswer === "true",
+            onChange: handleChange
+          }
+        ),
+        label: t("filterPanel.noCorrectAnswers.label")
+      }
+    ), (postFilters || answerFilters) && /* @__PURE__ */ React.createElement(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            size: "small",
+            name: "noVotes",
+            checked: filters.noVotes === "true",
+            onChange: handleChange
+          }
+        ),
+        label: t("filterPanel.noVotes.label")
+      }
+    ), starredEntitiesApi.starredEntities.size > 0 && /* @__PURE__ */ React.createElement(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            size: "small",
+            name: "starredEntities",
+            onChange: (e) => handleStarredEntities(e.target.checked),
+            checked: starredEntities
+          }
+        ),
+        label: t("filterPanel.starredEntities.label")
+      }
+    ), /* @__PURE__ */ React.createElement(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            size: "small",
+            name: "ownedEntities",
+            onChange: (e) => handleOwnedEntities(e.target.checked),
+            checked: ownedEntities
+          }
+        ),
+        label: t("filterPanel.ownedEntities.label")
+      }
+    ))),
+    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-order-by" }, t("filterPanel.orderBy.label")), /* @__PURE__ */ React.createElement(
+      RadioGroup,
+      {
+        "aria-labelledby": "qeta-filter-order-by",
+        name: "orderBy",
+        value: filters.orderBy,
+        onChange: handleChange,
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "0 1rem"
         }
-      ),
-      label: t("filterPanel.noAnswers.label")
-    }
-  ), type !== "article" && /* @__PURE__ */ React.createElement(
-    FormControlLabel,
+      },
+      postFilters && filters.collectionId !== void 0 && radioSelect("rank", t("filterPanel.orderBy.rank")),
+      radioSelect("created", t("filterPanel.orderBy.created")),
+      (postFilters || collectionFilters) && radioSelect("title", t("filterPanel.orderBy.title")),
+      postFilters && radioSelect("views", t("filterPanel.orderBy.views")),
+      (postFilters || answerFilters) && radioSelect("score", t("filterPanel.orderBy.score")),
+      postFilters && radioSelect("trend", t("filterPanel.orderBy.trend")),
+      postFilters && type !== "article" && radioSelect("answersCount", t("filterPanel.orderBy.answers")),
+      (postFilters || answerFilters) && radioSelect("updated", t("filterPanel.orderBy.updated"))
+    ))),
+    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-order" }, t("filterPanel.order.label")), /* @__PURE__ */ React.createElement(
+      RadioGroup,
+      {
+        "aria-labelledby": "qeta-filter-order",
+        name: "order",
+        value: filters.order,
+        onChange: handleChange
+      },
+      radioSelect("desc", t("filterPanel.order.desc")),
+      radioSelect("asc", t("filterPanel.order.asc"))
+    )))
+  ), /* @__PURE__ */ React.createElement(Box, { marginY: "24px" }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "stretch", justifyContent: "space-evenly" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    DateRangeFilter,
     {
-      control: /* @__PURE__ */ React.createElement(
-        Checkbox,
-        {
-          size: "small",
-          name: "noCorrectAnswer",
-          checked: filters.noCorrectAnswer === "true",
-          onChange: handleChange
-        }
-      ),
-      label: t("filterPanel.noCorrectAnswers.label")
+      value: filters.dateRange,
+      onChange: (e) => onChange({ key: "dateRange", value: e })
     }
-  ), /* @__PURE__ */ React.createElement(
-    FormControlLabel,
+  )), showEntityFilter && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    EntitiesInput,
     {
-      control: /* @__PURE__ */ React.createElement(
-        Checkbox,
-        {
-          size: "small",
-          name: "noVotes",
-          checked: filters.noVotes === "true",
-          onChange: handleChange
-        }
-      ),
-      label: t("filterPanel.noVotes.label")
+      disabled: starredEntities || ownedEntities,
+      style: { minWidth: "200px" },
+      onChange: (newEntities) => {
+        const entityRefs = (newEntities ?? []).map(
+          (e) => stringifyEntityRef(e)
+        );
+        handleChange({
+          target: { name: "entities", value: entityRefs }
+        });
+        setEntities(newEntities);
+      },
+      value: entities,
+      useOnlyUsedEntities: true,
+      hideHelpText: true
     }
-  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 2, xs: 4 }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-order-by" }, t("filterPanel.orderBy.label")), /* @__PURE__ */ React.createElement(
-    RadioGroup,
+  )), filters.entities && filters.entities?.length > 1 && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    Tooltip,
     {
-      "aria-labelledby": "qeta-filter-order-by",
-      name: "orderBy",
-      value: filters.orderBy,
-      onChange: handleChange
+      title: filters.entitiesRelation === "or" ? t("filterPanel.toggleEntityRelation.and") : t("filterPanel.toggleEntityRelation.or")
     },
-    radioSelect("created", t("filterPanel.orderBy.created")),
-    !answerFilters && radioSelect("views", t("filterPanel.orderBy.views")),
-    radioSelect("score", t("filterPanel.orderBy.score")),
-    !answerFilters && radioSelect("answersCount", t("filterPanel.orderBy.answers")),
-    radioSelect("updated", t("filterPanel.orderBy.updated"))
-  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, md: 2, xs: 4 }, /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-order" }, t("filterPanel.order.label")), /* @__PURE__ */ React.createElement(
-    RadioGroup,
-    {
-      "aria-labelledby": "qeta-filter-order",
-      name: "order",
-      value: filters.order,
-      onChange: handleChange
-    },
-    radioSelect("desc", t("filterPanel.order.desc")),
-    radioSelect("asc", t("filterPanel.order.asc"))
-  ))), (availableEntities && availableEntities.length > 0 || availableTags && availableTags.length > 0) && (showEntityFilter || showTagFilter) && /* @__PURE__ */ React.createElement(Grid, { item: true, md: 4, xs: 8 }, /* @__PURE__ */ React.createElement(FormLabel, { id: "qeta-filter-entity" }, t("filterPanel.filters.label")), showEntityFilter && availableEntities && availableEntities.length > 0 && /* @__PURE__ */ React.createElement(
-    Autocomplete,
-    {
-      multiple: false,
-      className: "qetaEntityFilter",
-      value: selectedEntity ?? null,
-      id: "entities-select",
-      options: availableEntities,
-      getOptionLabel: getEntityTitle,
-      getOptionSelected: (o, v) => {
-        if (!o || !v) {
-          return false;
-        }
-        return stringifyEntityRef(o) === stringifyEntityRef(v);
-      },
-      onChange: (_e, newValue) => {
-        handleChange({
-          target: {
-            name: "entity",
-            value: newValue ? stringifyEntityRef(newValue) : ""
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        onClick: () => {
+          if (filters.entitiesRelation === "or") {
+            onChange({ key: "entitiesRelation", value: "and" });
+          } else {
+            onChange({ key: "entitiesRelation", value: "or" });
           }
-        });
-      },
-      renderInput: (params) => /* @__PURE__ */ React.createElement(
-        TextField,
-        {
-          ...params,
-          variant: "outlined",
-          margin: "normal",
-          label: t("filterPanel.filters.entity.label"),
-          placeholder: t(
-            "filterPanel.filters.entity.placeholder"
-          )
         }
-      )
-    }
-  ), showTagFilter && availableTags && availableTags.length > 0 && /* @__PURE__ */ React.createElement(
-    Autocomplete,
+      },
+      filters.entitiesRelation === "or" ? /* @__PURE__ */ React.createElement(AdjustIcon, null) : /* @__PURE__ */ React.createElement(FiberManualRecordIcon, null)
+    )
+  )))), showTagFilter && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    TagInput,
     {
-      multiple: true,
-      className: "qetaTagFilter",
+      style: { minWidth: "200px" },
+      onChange: (newTags) => onChange({ key: "tags", value: newTags }),
       value: filters.tags,
-      id: "tags-select",
-      options: availableTags,
-      onChange: (_e, newValue) => {
-        handleChange({
-          target: {
-            name: "tags",
-            value: newValue
+      hideHelpText: true,
+      allowCreate: false
+    }
+  )), filters.tags && filters.tags?.length > 1 && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: filters.tagsRelation === "or" ? t("filterPanel.toggleTagRelation.and") : t("filterPanel.toggleTagRelation.or")
+    },
+    /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        onClick: () => {
+          if (filters.tagsRelation === "or") {
+            onChange({ key: "tagsRelation", value: "and" });
+          } else {
+            onChange({ key: "tagsRelation", value: "or" });
           }
-        });
-      },
-      renderInput: (params) => /* @__PURE__ */ React.createElement(
-        TextField,
-        {
-          ...params,
-          variant: "outlined",
-          margin: "normal",
-          label: t("filterPanel.filters.tag.label"),
-          placeholder: t("filterPanel.filters.tag.placeholder")
         }
-      )
-    }
-  ))), /* @__PURE__ */ React.createElement(Box, { marginY: "24px" }, /* @__PURE__ */ React.createElement(Divider, null)), /* @__PURE__ */ React.createElement(DateRangeFilter, { value: filters.dateRange, onChange }));
+      },
+      filters.tagsRelation === "or" ? /* @__PURE__ */ React.createElement(AdjustIcon, null) : /* @__PURE__ */ React.createElement(FiberManualRecordIcon, null)
+    )
+  ))))));
 };
 export { FilterPanel, filterKeys };