@drodil/backstage-plugin-qeta-react 3.24.3 → 3.25.0

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

@@ -1,4 +1,5 @@
-import React__default, { useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import { DateRangeFilter } from './DateRangeFilter.esm.js';
 import { useApi, identityApiRef } from '@backstage/core-plugin-api';
@@ -8,6 +9,9 @@ import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import 'dataloader';
 import { useStarredEntities, catalogApiRef } from '@backstage/plugin-catalog-react';
 import 'react-use/lib/useAsync';
+import '@backstage/plugin-permission-react';
+import '@drodil/backstage-plugin-qeta-common';
+import '@backstage/plugin-permission-common';
 import { EntitiesInput } from '../PostForm/EntitiesInput.esm.js';
 import { TagInput } from '../PostForm/TagInput.esm.js';
 import { makeStyles, Box, Grid, FormGroup, FormLabel, FormControlLabel, Checkbox, FormControl, RadioGroup, Divider, Tooltip, IconButton, Radio } from '@material-ui/core';
@@ -16,11 +20,11 @@ import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
 import { compact } from 'lodash';
 
 const radioSelect = (value, label) => {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     FormControlLabel,
     {
       value,
-      control: /* @__PURE__ */ React__default.createElement(Radio, { size: "small" }),
+      control: /* @__PURE__ */ jsx(Radio, { size: "small" }),
       label
     }
   );
@@ -66,15 +70,27 @@ const FilterPanel = (props) => {
     type
   } = props;
   const { t } = useTranslation();
-  const [entities, setEntities] = React__default.useState(
-    void 0
-  );
-  const [starredEntities, setStarredEntities] = React__default.useState(false);
-  const [ownedEntities, setOwnedEntities] = React__default.useState(false);
+  const [entities, setEntities] = useState(void 0);
+  const [starredEntities, setStarredEntities] = useState(false);
+  const [ownedEntities, setOwnedEntities] = useState(false);
+  const [ownedEntityRefs, setOwnedEntityRefs] = useState([]);
   const starredEntitiesApi = useStarredEntities();
   const catalogApi = useApi(catalogApiRef);
   const identityApi = useApi(identityApiRef);
   const styles = useStyles();
+  useEffect(() => {
+    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));
+        setOwnedEntityRefs(entityRefs);
+      });
+    });
+  }, [catalogApi, identityApi]);
   const handleChange = (event) => {
     let value = event.target.value;
     if (event.target.type === "checkbox") {
@@ -82,43 +98,39 @@ const FilterPanel = (props) => {
     }
     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: [] });
-    }
-  };
-  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" }
-          ]);
+  const handleStarredEntities = useCallback(
+    (checked) => {
+      setStarredEntities(checked);
+      setEntities([]);
+      if (checked) {
+        onChange({
+          key: "entities",
+          value: [...starredEntitiesApi.starredEntities]
         });
-      });
-    } else {
-      onChange([
-        { key: "entities", value: [] },
-        { key: "entitiesRelation", value: "and" }
-      ]);
-    }
-  };
+      } else {
+        onChange({ key: "entities", value: [] });
+      }
+    },
+    [onChange, starredEntitiesApi.starredEntities]
+  );
+  const handleOwnedEntities = useCallback(
+    (checked) => {
+      setOwnedEntities(checked);
+      setEntities([]);
+      if (checked) {
+        onChange([
+          { key: "entities", value: ownedEntityRefs },
+          { key: "entitiesRelation", value: "or" }
+        ]);
+      } else {
+        onChange([
+          { key: "entities", value: [] },
+          { key: "entitiesRelation", value: "and" }
+        ]);
+      }
+    },
+    [onChange, ownedEntityRefs]
+  );
   useEffect(() => {
     if (filters.entities) {
       catalogApi.getEntitiesByRefs({
@@ -132,189 +144,222 @@ const FilterPanel = (props) => {
   const postFilters = isPostFilters(filters);
   const answerFilters = isAnswerFilters(filters);
   const collectionFilters = isCollectionFilters(filters);
-  return /* @__PURE__ */ React__default.createElement(Box, { className: styles.root }, /* @__PURE__ */ React__default.createElement(
-    Grid,
-    {
-      container: true,
-      spacing: 4,
-      alignItems: "stretch",
-      justifyContent: "space-evenly"
-    },
-    (postFilters || answerFilters) && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(FormGroup, null, /* @__PURE__ */ React__default.createElement(FormLabel, { id: "qeta-filter-quick" }, t("filterPanel.quickFilters.label")), postFilters && type !== "article" && /* @__PURE__ */ React__default.createElement(
-      FormControlLabel,
+  return /* @__PURE__ */ jsxs(Box, { className: styles.root, children: [
+    /* @__PURE__ */ jsxs(
+      Grid,
       {
-        control: /* @__PURE__ */ React__default.createElement(
-          Checkbox,
-          {
-            size: "small",
-            name: "noAnswers",
-            onChange: handleChange,
-            checked: filters.noAnswers === "true"
-          }
-        ),
-        label: t("filterPanel.noAnswers.label")
+        container: true,
+        spacing: 4,
+        alignItems: "stretch",
+        justifyContent: "space-evenly",
+        children: [
+          (postFilters || answerFilters) && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(FormGroup, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { id: "qeta-filter-quick", children: t("filterPanel.quickFilters.label") }),
+            postFilters && type !== "article" && /* @__PURE__ */ jsx(
+              FormControlLabel,
+              {
+                control: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    size: "small",
+                    name: "noAnswers",
+                    onChange: handleChange,
+                    checked: filters.noAnswers === "true"
+                  }
+                ),
+                label: t("filterPanel.noAnswers.label")
+              }
+            ),
+            (postFilters || answerFilters) && type !== "article" && /* @__PURE__ */ jsx(
+              FormControlLabel,
+              {
+                control: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    size: "small",
+                    name: "noCorrectAnswer",
+                    checked: filters.noCorrectAnswer === "true",
+                    onChange: handleChange
+                  }
+                ),
+                label: t("filterPanel.noCorrectAnswers.label")
+              }
+            ),
+            (postFilters || answerFilters) && /* @__PURE__ */ jsx(
+              FormControlLabel,
+              {
+                control: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    size: "small",
+                    name: "noVotes",
+                    checked: filters.noVotes === "true",
+                    onChange: handleChange
+                  }
+                ),
+                label: t("filterPanel.noVotes.label")
+              }
+            ),
+            starredEntitiesApi.starredEntities.size > 0 && /* @__PURE__ */ jsx(
+              FormControlLabel,
+              {
+                control: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    size: "small",
+                    name: "starredEntities",
+                    onChange: (e) => handleStarredEntities(e.target.checked),
+                    checked: starredEntities
+                  }
+                ),
+                label: t("filterPanel.starredEntities.label")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormControlLabel,
+              {
+                control: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    size: "small",
+                    name: "ownedEntities",
+                    onChange: (e) => handleOwnedEntities(e.target.checked),
+                    checked: ownedEntities
+                  }
+                ),
+                label: t("filterPanel.ownedEntities.label")
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(FormControl, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { id: "qeta-filter-order-by", children: t("filterPanel.orderBy.label") }),
+            /* @__PURE__ */ jsxs(
+              RadioGroup,
+              {
+                "aria-labelledby": "qeta-filter-order-by",
+                name: "orderBy",
+                value: filters.orderBy,
+                onChange: handleChange,
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "1fr 1fr",
+                  gap: "0 1em"
+                },
+                children: [
+                  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__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(FormControl, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { id: "qeta-filter-order", children: t("filterPanel.order.label") }),
+            /* @__PURE__ */ jsxs(
+              RadioGroup,
+              {
+                "aria-labelledby": "qeta-filter-order",
+                name: "order",
+                value: filters.order,
+                onChange: handleChange,
+                children: [
+                  radioSelect("desc", t("filterPanel.order.desc")),
+                  radioSelect("asc", t("filterPanel.order.asc"))
+                ]
+              }
+            )
+          ] }) })
+        ]
       }
-    ), (postFilters || answerFilters) && type !== "article" && /* @__PURE__ */ React__default.createElement(
-      FormControlLabel,
-      {
-        control: /* @__PURE__ */ React__default.createElement(
-          Checkbox,
+    ),
+    /* @__PURE__ */ jsx(Box, { marginY: "24px", children: /* @__PURE__ */ jsx(Divider, {}) }),
+    /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "stretch", justifyContent: "space-evenly", children: [
+      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+        DateRangeFilter,
+        {
+          value: filters.dateRange,
+          onChange: (val) => onChange({ key: "dateRange", value: val })
+        }
+      ) }),
+      showEntityFilter && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          EntitiesInput,
           {
-            size: "small",
-            name: "noCorrectAnswer",
-            checked: filters.noCorrectAnswer === "true",
-            onChange: handleChange
+            disabled: starredEntities || ownedEntities,
+            style: { width: "230px" },
+            onChange: (newEntities) => {
+              const entityRefs = (newEntities ?? []).map(
+                (e) => stringifyEntityRef(e)
+              );
+              handleChange({
+                target: { name: "entities", value: entityRefs }
+              });
+              setEntities(newEntities);
+            },
+            value: entities,
+            useOnlyUsedEntities: true,
+            hideHelpText: true
           }
-        ),
-        label: t("filterPanel.noCorrectAnswers.label")
-      }
-    ), (postFilters || answerFilters) && /* @__PURE__ */ React__default.createElement(
-      FormControlLabel,
-      {
-        control: /* @__PURE__ */ React__default.createElement(
-          Checkbox,
+        ) }),
+        filters.entities && filters.entities?.length > 1 && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          Tooltip,
           {
-            size: "small",
-            name: "noVotes",
-            checked: filters.noVotes === "true",
-            onChange: handleChange
+            title: filters.entitiesRelation === "or" ? t("filterPanel.toggleEntityRelation.and") : t("filterPanel.toggleEntityRelation.or"),
+            children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                disabled: starredEntities || ownedEntities,
+                onClick: () => {
+                  if (filters.entitiesRelation === "or") {
+                    onChange({ key: "entitiesRelation", value: "and" });
+                  } else {
+                    onChange({ key: "entitiesRelation", value: "or" });
+                  }
+                },
+                children: filters.entitiesRelation === "or" ? /* @__PURE__ */ jsx(AdjustIcon, {}) : /* @__PURE__ */ jsx(FiberManualRecordIcon, {})
+              }
+            )
           }
-        ),
-        label: t("filterPanel.noVotes.label")
-      }
-    ), starredEntitiesApi.starredEntities.size > 0 && /* @__PURE__ */ React__default.createElement(
-      FormControlLabel,
-      {
-        control: /* @__PURE__ */ React__default.createElement(
-          Checkbox,
+        ) })
+      ] }) }),
+      showTagFilter && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          TagInput,
           {
-            size: "small",
-            name: "starredEntities",
-            onChange: (e) => handleStarredEntities(e.target.checked),
-            checked: starredEntities
+            style: { width: "230px" },
+            onChange: (newTags) => onChange({ key: "tags", value: newTags }),
+            value: filters.tags,
+            hideHelpText: true,
+            allowCreate: false
           }
-        ),
-        label: t("filterPanel.starredEntities.label")
-      }
-    ), /* @__PURE__ */ React__default.createElement(
-      FormControlLabel,
-      {
-        control: /* @__PURE__ */ React__default.createElement(
-          Checkbox,
+        ) }),
+        filters.tags && filters.tags?.length > 1 && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          Tooltip,
           {
-            size: "small",
-            name: "ownedEntities",
-            onChange: (e) => handleOwnedEntities(e.target.checked),
-            checked: ownedEntities
+            title: filters.tagsRelation === "or" ? t("filterPanel.toggleTagRelation.and") : t("filterPanel.toggleTagRelation.or"),
+            children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: () => {
+                  if (filters.tagsRelation === "or") {
+                    onChange({ key: "tagsRelation", value: "and" });
+                  } else {
+                    onChange({ key: "tagsRelation", value: "or" });
+                  }
+                },
+                children: filters.tagsRelation === "or" ? /* @__PURE__ */ jsx(AdjustIcon, {}) : /* @__PURE__ */ jsx(FiberManualRecordIcon, {})
+              }
+            )
           }
-        ),
-        label: t("filterPanel.ownedEntities.label")
-      }
-    ))),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(FormControl, null, /* @__PURE__ */ React__default.createElement(FormLabel, { id: "qeta-filter-order-by" }, t("filterPanel.orderBy.label")), /* @__PURE__ */ React__default.createElement(
-      RadioGroup,
-      {
-        "aria-labelledby": "qeta-filter-order-by",
-        name: "orderBy",
-        value: filters.orderBy,
-        onChange: handleChange,
-        style: {
-          display: "grid",
-          gridTemplateColumns: "1fr 1fr",
-          gap: "0 1em"
-        }
-      },
-      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__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(FormControl, null, /* @__PURE__ */ React__default.createElement(FormLabel, { id: "qeta-filter-order" }, t("filterPanel.order.label")), /* @__PURE__ */ React__default.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__default.createElement(Box, { marginY: "24px" }, /* @__PURE__ */ React__default.createElement(Divider, null)), /* @__PURE__ */ React__default.createElement(Grid, { container: true, alignItems: "stretch", justifyContent: "space-evenly" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
-    DateRangeFilter,
-    {
-      value: filters.dateRange,
-      onChange: (val) => onChange({ key: "dateRange", value: val })
-    }
-  )), showEntityFilter && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
-    EntitiesInput,
-    {
-      disabled: starredEntities || ownedEntities,
-      style: { width: "230px" },
-      onChange: (newEntities) => {
-        const entityRefs = (newEntities ?? []).map(
-          (e) => stringifyEntityRef(e)
-        );
-        handleChange({
-          target: { name: "entities", value: entityRefs }
-        });
-        setEntities(newEntities);
-      },
-      value: entities,
-      useOnlyUsedEntities: true,
-      hideHelpText: true
-    }
-  )), filters.entities && filters.entities?.length > 1 && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
-    Tooltip,
-    {
-      title: filters.entitiesRelation === "or" ? t("filterPanel.toggleEntityRelation.and") : t("filterPanel.toggleEntityRelation.or")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      IconButton,
-      {
-        disabled: starredEntities || ownedEntities,
-        onClick: () => {
-          if (filters.entitiesRelation === "or") {
-            onChange({ key: "entitiesRelation", value: "and" });
-          } else {
-            onChange({ key: "entitiesRelation", value: "or" });
-          }
-        }
-      },
-      filters.entitiesRelation === "or" ? /* @__PURE__ */ React__default.createElement(AdjustIcon, null) : /* @__PURE__ */ React__default.createElement(FiberManualRecordIcon, null)
-    )
-  )))), showTagFilter && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
-    TagInput,
-    {
-      style: { width: "230px" },
-      onChange: (newTags) => onChange({ key: "tags", value: newTags }),
-      value: filters.tags,
-      hideHelpText: true,
-      allowCreate: false
-    }
-  )), filters.tags && filters.tags?.length > 1 && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(
-    Tooltip,
-    {
-      title: filters.tagsRelation === "or" ? t("filterPanel.toggleTagRelation.and") : t("filterPanel.toggleTagRelation.or")
-    },
-    /* @__PURE__ */ React__default.createElement(
-      IconButton,
-      {
-        onClick: () => {
-          if (filters.tagsRelation === "or") {
-            onChange({ key: "tagsRelation", value: "and" });
-          } else {
-            onChange({ key: "tagsRelation", value: "or" });
-          }
-        }
-      },
-      filters.tagsRelation === "or" ? /* @__PURE__ */ React__default.createElement(AdjustIcon, null) : /* @__PURE__ */ React__default.createElement(FiberManualRecordIcon, null)
-    )
-  ))))));
+        ) })
+      ] }) })
+    ] })
+  ] });
 };
 
 export { FilterPanel, filterKeys };