@drodil/backstage-plugin-qeta-react 3.52.6 → 3.53.0

package/dist/components/PostForm/EntitiesInput.esm.js

@@ -3,7 +3,7 @@ import { Autocomplete } from '@material-ui/lab';
 import { getEntityTitle, getEntityDescription } from '../../utils/utils.esm.js';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import { Box, Tooltip, Typography, TextField, CircularProgress, Chip } from '@material-ui/core';
-import { useState, useMemo, useCallback } from 'react';
+import { forwardRef, useState, useMemo, useCallback } from 'react';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
@@ -24,240 +24,243 @@ const CATALOG_FIELDS = [
   "spec.profile.displayName",
   "spec.profile.email"
 ];
-const EntitiesInput = (props) => {
-  const {
-    value,
-    singleValue,
-    onChange,
-    multiple = true,
-    required = false,
-    useOnlyUsedEntities = false,
-    hideHelpText = false,
-    style,
-    disabled,
-    kind,
-    error,
-    maximum,
-    label,
-    name = "entities",
-    placeholder,
-    autocompleteProps,
-    title,
-    content,
-    tags
-  } = props;
-  const configApi = useApi(configApiRef);
-  const catalogApi = useApi(catalogApiRef);
-  const qetaApi = useApi(qetaApiRef);
-  const [availableEntities, setAvailableEntities] = useState(
-    []
-  );
-  const [loading, setLoading] = useState(false);
-  const [open, setOpen] = useState(false);
-  const { t } = useTranslationRef(qetaTranslationRef);
-  const [suggestedEntities, setSuggestedEntities] = useState([]);
-  const [, setLoadingSuggestions] = useState(false);
-  const entityKinds = useMemo(() => {
-    if (kind) {
-      return kind;
-    }
-    return getSupportedEntityKinds(configApi);
-  }, [configApi, kind]);
-  const max = useMemo(() => {
-    if (maximum) {
-      return maximum;
-    }
-    return configApi.getOptionalNumber("qeta.entities.max") ?? 3;
-  }, [configApi, maximum]);
-  const handleOpen = useCallback(() => {
-    setOpen(true);
-    (async () => {
-      setLoading(true);
-      if (singleValue) {
-        const entity = await catalogApi.getEntityByRef(singleValue);
-        setLoading(false);
-        setAvailableEntities(entity ? [entity] : null);
-        return;
+const EntitiesInput = forwardRef(
+  (props, _ref) => {
+    const {
+      value,
+      singleValue,
+      onChange,
+      multiple = true,
+      required = false,
+      useOnlyUsedEntities = false,
+      hideHelpText = false,
+      style,
+      disabled,
+      kind,
+      error,
+      maximum,
+      label,
+      name = "entities",
+      placeholder,
+      autocompleteProps,
+      title,
+      content,
+      tags
+    } = props;
+    const configApi = useApi(configApiRef);
+    const catalogApi = useApi(catalogApiRef);
+    const qetaApi = useApi(qetaApiRef);
+    const [availableEntities, setAvailableEntities] = useState(
+      []
+    );
+    const [loading, setLoading] = useState(false);
+    const [open, setOpen] = useState(false);
+    const { t } = useTranslationRef(qetaTranslationRef);
+    const [suggestedEntities, setSuggestedEntities] = useState([]);
+    const [, setLoadingSuggestions] = useState(false);
+    const entityKinds = useMemo(() => {
+      if (kind) {
+        return kind;
       }
-      if (useOnlyUsedEntities) {
-        const qetaEntities = await qetaApi.getEntities();
-        const refs = qetaEntities.entities.map((r) => r.entityRef);
-        const catalogData = await catalogApi.getEntitiesByRefs({
-          entityRefs: refs,
-          fields: CATALOG_FIELDS
-        });
-        setLoading(false);
-        setAvailableEntities(
-          catalogData ? compact(catalogData.items).sort(
-            (a, b) => getEntityTitle(a).localeCompare(getEntityTitle(b))
-          ) : null
-        );
-        return;
+      return getSupportedEntityKinds(configApi);
+    }, [configApi, kind]);
+    const max = useMemo(() => {
+      if (maximum) {
+        return maximum;
       }
-      if (entityKinds && entityKinds.length > 0) {
-        const entities = await catalogApi.getEntities({
-          filter: { kind: entityKinds },
-          fields: CATALOG_FIELDS,
-          order: [
-            { field: "kind", order: "asc" },
-            { field: "metadata.title", order: "asc" }
-          ]
-        });
+      return configApi.getOptionalNumber("qeta.entities.max") ?? 3;
+    }, [configApi, maximum]);
+    const handleOpen = useCallback(() => {
+      setOpen(true);
+      (async () => {
+        setLoading(true);
+        if (singleValue) {
+          const entity = await catalogApi.getEntityByRef(singleValue);
+          setLoading(false);
+          setAvailableEntities(entity ? [entity] : null);
+          return;
+        }
+        if (useOnlyUsedEntities) {
+          const qetaEntities = await qetaApi.getEntities();
+          const refs = qetaEntities.entities.map((r) => r.entityRef);
+          const catalogData = await catalogApi.getEntitiesByRefs({
+            entityRefs: refs,
+            fields: CATALOG_FIELDS
+          });
+          setLoading(false);
+          setAvailableEntities(
+            catalogData ? compact(catalogData.items).sort(
+              (a, b) => getEntityTitle(a).localeCompare(getEntityTitle(b))
+            ) : null
+          );
+          return;
+        }
+        if (entityKinds && entityKinds.length > 0) {
+          const entities = await catalogApi.getEntities({
+            filter: { kind: entityKinds },
+            fields: CATALOG_FIELDS,
+            order: [
+              { field: "kind", order: "asc" },
+              { field: "metadata.title", order: "asc" }
+            ]
+          });
+          setLoading(false);
+          setAvailableEntities(entities ? entities.items : null);
+          return;
+        }
         setLoading(false);
-        setAvailableEntities(entities ? entities.items : null);
-        return;
+        setAvailableEntities(null);
+      })();
+    }, [singleValue, useOnlyUsedEntities, entityKinds, catalogApi, qetaApi]);
+    const usedValue = useMemo(() => {
+      if (!value) {
+        return multiple ? [] : null;
       }
-      setLoading(false);
-      setAvailableEntities(null);
-    })();
-  }, [singleValue, useOnlyUsedEntities, entityKinds, catalogApi, qetaApi]);
-  const usedValue = useMemo(() => {
-    if (!value) {
-      return multiple ? [] : null;
-    }
-    return value;
-  }, [value, multiple]);
-  useDebounce(
-    () => {
-      if (title && content) {
-        setLoadingSuggestions(true);
-        qetaApi.getEntitySuggestions({
-          title,
-          content,
-          tags,
-          entities: [value ?? []].flat().map(stringifyEntityRef)
-        }).then((response) => {
-          setSuggestedEntities(response.entities);
-        }).catch(() => {
-        }).finally(() => {
-          setLoadingSuggestions(false);
-        });
+      return value;
+    }, [value, multiple]);
+    useDebounce(
+      () => {
+        if (title && content) {
+          setLoadingSuggestions(true);
+          qetaApi.getEntitySuggestions({
+            title,
+            content,
+            tags,
+            entities: [value ?? []].flat().map(stringifyEntityRef)
+          }).then((response) => {
+            setSuggestedEntities(response.entities);
+          }).catch(() => {
+          }).finally(() => {
+            setLoadingSuggestions(false);
+          });
+        }
+      },
+      2e3,
+      [title, content, qetaApi]
+    );
+    const handleSuggestedEntityClick = (entity) => {
+      const values = [value ?? []].flat();
+      if (values && values.length < max && !values.includes(entity)) {
+        onChange([...values, entity]);
       }
-    },
-    2e3,
-    [title, content, qetaApi]
-  );
-  const handleSuggestedEntityClick = (entity) => {
-    const values = [value ?? []].flat();
-    if (values && values.length < max && !values.includes(entity)) {
-      onChange([...values, entity]);
+    };
+    if (!availableEntities) {
+      return null;
     }
-  };
-  if (!availableEntities) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(
-      Autocomplete,
-      {
-        multiple,
-        autoHighlight: true,
-        autoComplete: true,
-        className: "qetaEntitiesInput",
-        value: usedValue,
-        disabled,
-        loading,
-        loadingText: t("common.loading"),
-        groupBy: entityKinds.length > 1 ? (option) => option.kind : void 0,
-        renderGroup,
-        handleHomeEndKeys: true,
-        open,
-        onOpen: handleOpen,
-        onClose: () => setOpen(false),
-        options: availableEntities,
-        getOptionLabel: getEntityTitle,
-        ListboxComponent: AutocompleteListboxComponent,
-        disableListWrap: true,
-        style,
-        getOptionSelected: (o, v) => stringifyEntityRef(o) === stringifyEntityRef(v),
-        onChange: (_e, newValue) => {
-          if (multiple) {
-            if (!newValue) {
-              onChange([]);
-              return;
-            }
-            const val = Array.isArray(newValue) ? newValue : [newValue];
-            if (max === null || val.length <= max) {
-              onChange(val.filter((v) => typeof v !== "string"));
-            }
-          } else {
-            if (!newValue) {
-              return;
-            }
-            onChange(newValue);
-          }
-        },
-        renderOption: (option) => {
-          const stringified = stringifyEntityRef(option);
-          return /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              arrow: true,
-              placement: "right",
-              title: /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(Typography, { children: getEntityTitle(option) }),
-                /* @__PURE__ */ jsx(Typography, { variant: "caption", children: getEntityDescription(option) })
-              ] }),
-              children: /* @__PURE__ */ jsx("span", { children: getEntityTitle(option, { withType: false }) })
-            }
-          ) }, stringified);
-        },
-        renderInput: (params) => {
-          let helperText = "";
-          if (!hideHelpText) {
-            if (error && error.message) {
-              helperText = error.message;
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          multiple,
+          autoHighlight: true,
+          autoComplete: true,
+          className: "qetaEntitiesInput",
+          value: usedValue,
+          disabled,
+          loading,
+          loadingText: t("common.loading"),
+          groupBy: entityKinds.length > 1 ? (option) => option.kind : void 0,
+          renderGroup,
+          handleHomeEndKeys: true,
+          open,
+          onOpen: handleOpen,
+          onClose: () => setOpen(false),
+          options: availableEntities,
+          getOptionLabel: getEntityTitle,
+          ListboxComponent: AutocompleteListboxComponent,
+          disableListWrap: true,
+          style,
+          getOptionSelected: (o, v) => stringifyEntityRef(o) === stringifyEntityRef(v),
+          onChange: (_e, newValue) => {
+            if (multiple) {
+              if (!newValue) {
+                onChange([]);
+                return;
+              }
+              const val = Array.isArray(newValue) ? newValue : [newValue];
+              if (max === null || val.length <= max) {
+                onChange(val.filter((v) => typeof v !== "string"));
+              }
             } else {
-              helperText = t("entitiesInput.helperText", {
-                max: max.toString()
-              });
+              if (!newValue) {
+                return;
+              }
+              onChange(newValue);
             }
-          }
-          return /* @__PURE__ */ jsx(
-            TextField,
-            {
-              ...params,
-              variant: "outlined",
-              margin: "normal",
-              required,
-              label: label || t("entitiesInput.label"),
-              placeholder: placeholder || t("entitiesInput.placeholder"),
-              helperText,
-              name,
-              FormHelperTextProps: {
-                style: { marginLeft: "0.2em" }
-              },
-              InputProps: {
-                ...params.InputProps,
-                endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-                  loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 20 }) : null,
-                  params.InputProps.endAdornment
-                ] })
-              },
-              error: error !== void 0
+          },
+          renderOption: (option) => {
+            const stringified = stringifyEntityRef(option);
+            return /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                arrow: true,
+                placement: "right",
+                title: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Typography, { children: getEntityTitle(option) }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", children: getEntityDescription(option) })
+                ] }),
+                children: /* @__PURE__ */ jsx("span", { children: getEntityTitle(option, { withType: false }) })
+              }
+            ) }, stringified);
+          },
+          renderInput: (params) => {
+            let helperText = "";
+            if (!hideHelpText) {
+              if (error && error.message) {
+                helperText = error.message;
+              } else {
+                helperText = t("entitiesInput.helperText", {
+                  max: max.toString()
+                });
+              }
             }
-          );
-        },
-        ...autocompleteProps
-      }
-    ),
-    suggestedEntities?.length > 0 && /* @__PURE__ */ jsxs(Box, { style: { marginLeft: "4px" }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("entitiesInput.suggestedEntities") }),
-      /* @__PURE__ */ jsx(Box, { mt: 0.5, children: suggestedEntities.map((entity) => /* @__PURE__ */ jsx(
-        Chip,
-        {
-          label: getEntityTitle(entity),
-          size: "small",
-          onClick: () => handleSuggestedEntityClick(entity),
-          style: { margin: "0 4px 4px 0" },
-          disabled: [value ?? []].flat().map(stringifyEntityRef).includes(stringifyEntityRef(entity)) || [value ?? []].flat().length >= max
-        },
-        stringifyEntityRef(entity)
-      )) })
-    ] }),
-    " "
-  ] });
-};
+            return /* @__PURE__ */ jsx(
+              TextField,
+              {
+                ...params,
+                variant: "outlined",
+                margin: "normal",
+                required,
+                label: label || t("entitiesInput.label"),
+                placeholder: placeholder || t("entitiesInput.placeholder"),
+                helperText,
+                name,
+                FormHelperTextProps: {
+                  style: { marginLeft: "0.2em" }
+                },
+                InputProps: {
+                  ...params.InputProps,
+                  endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+                    loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 20 }) : null,
+                    params.InputProps.endAdornment
+                  ] })
+                },
+                error: error !== void 0
+              }
+            );
+          },
+          ...autocompleteProps
+        }
+      ),
+      suggestedEntities?.length > 0 && /* @__PURE__ */ jsxs(Box, { style: { marginLeft: "4px" }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("entitiesInput.suggestedEntities") }),
+        /* @__PURE__ */ jsx(Box, { mt: 0.5, children: suggestedEntities.map((entity) => /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: getEntityTitle(entity),
+            size: "small",
+            onClick: () => handleSuggestedEntityClick(entity),
+            style: { margin: "0 4px 4px 0" },
+            disabled: [value ?? []].flat().map(stringifyEntityRef).includes(stringifyEntityRef(entity)) || [value ?? []].flat().length >= max
+          },
+          stringifyEntityRef(entity)
+        )) })
+      ] }),
+      " "
+    ] });
+  }
+);
+EntitiesInput.displayName = "EntitiesInput";
 
 export { EntitiesInput };
 //# sourceMappingURL=EntitiesInput.esm.js.map

package/dist/components/PostForm/EntitiesInput.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntitiesInput.esm.js","sources":["../../../src/components/PostForm/EntitiesInput.tsx"],"sourcesContent":["import { Autocomplete } from '@material-ui/lab';\nimport { getEntityDescription, getEntityTitle } from '../../utils/utils';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport {\n  Box,\n  Chip,\n  CircularProgress,\n  TextField,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport {\n  ComponentType,\n  CSSProperties,\n  HTMLAttributes,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { qetaApiRef } from '../../api';\nimport { compact } from 'lodash';\nimport {\n  AutocompleteListboxComponent,\n  renderGroup,\n} from './AutocompleteListComponent';\nimport { AutocompleteProps } from '@material-ui/lab/Autocomplete/Autocomplete';\nimport { FieldError } from 'react-hook-form';\nimport { getSupportedEntityKinds } from '@drodil/backstage-plugin-qeta-common';\nimport { useDebounce } from 'react-use';\n\ntype CommonEntitiesInputProps = {\n  singleValue?: string;\n  required?: boolean;\n  useOnlyUsedEntities?: boolean;\n  hideHelpText?: boolean;\n  style?: CSSProperties;\n  disabled?: boolean;\n  kind?: string[];\n  maximum?: number | null;\n  error?: FieldError;\n  label?: string;\n  name?: string;\n  placeholder?: string;\n  autocompleteProps?: AutocompleteProps<any, any, any, any>;\n  onChange: (value: any) => void;\n  title?: string;\n  content?: string;\n  tags?: string[];\n};\ntype SingleEntitiesInputValue = CommonEntitiesInputProps & {\n  multiple: false;\n  value?: Entity | null;\n  onChange: (value: Entity) => void;\n};\n\ntype MultipleEntitiesInputValue = CommonEntitiesInputProps & {\n  multiple?: true;\n  value?: Entity[];\n  onChange: (value: Entity[]) => void;\n};\n\nexport type EntitiesInputProps =\n  | SingleEntitiesInputValue\n  | MultipleEntitiesInputValue;\n\nconst CATALOG_FIELDS = [\n  'kind',\n  'metadata.name',\n  'metadata.namespace',\n  'metadata.title',\n  'metadata.description',\n  'spec.type',\n  'spec.profile.displayName',\n  'spec.profile.email',\n];\n\nexport const EntitiesInput = (props: EntitiesInputProps) => {\n  const {\n    value,\n    singleValue,\n    onChange,\n    multiple = true,\n    required = false,\n    useOnlyUsedEntities = false,\n    hideHelpText = false,\n    style,\n    disabled,\n    kind,\n    error,\n    maximum,\n    label,\n    name = 'entities',\n    placeholder,\n    autocompleteProps,\n    title,\n    content,\n    tags,\n  } = props;\n\n  const configApi = useApi(configApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const qetaApi = useApi(qetaApiRef);\n  const [availableEntities, setAvailableEntities] = useState<Entity[] | null>(\n    [],\n  );\n  const [loading, setLoading] = useState(false);\n  const [open, setOpen] = useState(false);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const [suggestedEntities, setSuggestedEntities] = useState<Entity[]>([]);\n  const [, setLoadingSuggestions] = useState(false);\n\n  const entityKinds: string[] = useMemo(() => {\n    if (kind) {\n      return kind;\n    }\n    return getSupportedEntityKinds(configApi);\n  }, [configApi, kind]);\n  const max = useMemo(() => {\n    if (maximum) {\n      return maximum;\n    }\n    return configApi.getOptionalNumber('qeta.entities.max') ?? 3;\n  }, [configApi, maximum]);\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n    (async () => {\n      setLoading(true);\n      if (singleValue) {\n        const entity = await catalogApi.getEntityByRef(singleValue);\n        setLoading(false);\n        setAvailableEntities(entity ? [entity] : null);\n        return;\n      }\n\n      if (useOnlyUsedEntities) {\n        const qetaEntities = await qetaApi.getEntities();\n        const refs = qetaEntities.entities.map(r => r.entityRef);\n        const catalogData = await catalogApi.getEntitiesByRefs({\n          entityRefs: refs,\n          fields: CATALOG_FIELDS,\n        });\n        setLoading(false);\n        setAvailableEntities(\n          catalogData\n            ? compact(catalogData.items).sort((a, b) =>\n                getEntityTitle(a).localeCompare(getEntityTitle(b)),\n              )\n            : null,\n        );\n        return;\n      }\n\n      if (entityKinds && entityKinds.length > 0) {\n        const entities = await catalogApi.getEntities({\n          filter: { kind: entityKinds },\n          fields: CATALOG_FIELDS,\n          order: [\n            { field: 'kind', order: 'asc' },\n            { field: 'metadata.title', order: 'asc' },\n          ],\n        });\n        setLoading(false);\n        setAvailableEntities(entities ? entities.items : null);\n        return;\n      }\n      setLoading(false);\n      setAvailableEntities(null);\n    })();\n  }, [singleValue, useOnlyUsedEntities, entityKinds, catalogApi, qetaApi]);\n\n  const usedValue = useMemo(() => {\n    if (!value) {\n      return multiple ? [] : null;\n    }\n    return value;\n  }, [value, multiple]);\n\n  useDebounce(\n    () => {\n      if (title && content) {\n        setLoadingSuggestions(true);\n        qetaApi\n          .getEntitySuggestions({\n            title,\n            content,\n            tags,\n            entities: [value ?? []].flat().map(stringifyEntityRef),\n          })\n          .then(response => {\n            setSuggestedEntities(response.entities);\n          })\n          .catch(() => {\n            // Ignore errors\n          })\n          .finally(() => {\n            setLoadingSuggestions(false);\n          });\n      }\n    },\n    2000,\n    [title, content, qetaApi],\n  );\n\n  const handleSuggestedEntityClick = (entity: Entity) => {\n    const values = [value ?? []].flat();\n    if (values && values.length < max && !values.includes(entity)) {\n      onChange([...values, entity]);\n    }\n  };\n\n  if (!availableEntities) {\n    return null;\n  }\n\n  return (\n    <Box>\n      <Autocomplete\n        multiple={multiple}\n        autoHighlight\n        autoComplete\n        className=\"qetaEntitiesInput\"\n        value={usedValue}\n        disabled={disabled}\n        loading={loading}\n        loadingText={t('common.loading')}\n        groupBy={entityKinds.length > 1 ? option => option.kind : undefined}\n        renderGroup={renderGroup}\n        handleHomeEndKeys\n        open={open}\n        onOpen={handleOpen}\n        onClose={() => setOpen(false)}\n        options={availableEntities}\n        getOptionLabel={getEntityTitle}\n        ListboxComponent={\n          AutocompleteListboxComponent as ComponentType<\n            HTMLAttributes<HTMLElement>\n          >\n        }\n        disableListWrap\n        style={style}\n        getOptionSelected={(o, v) =>\n          stringifyEntityRef(o) === stringifyEntityRef(v)\n        }\n        onChange={(_e, newValue) => {\n          if (multiple) {\n            if (!newValue) {\n              onChange([]);\n              return;\n            }\n            const val = Array.isArray(newValue) ? newValue : [newValue];\n            if (max === null || val.length <= max) {\n              onChange(val.filter(v => typeof v !== 'string'));\n            }\n          } else {\n            if (!newValue) {\n              return;\n            }\n            onChange(newValue as Entity);\n          }\n        }}\n        renderOption={(option: Entity) => {\n          const stringified = stringifyEntityRef(option);\n          return (\n            <span key={stringified}>\n              <Tooltip\n                arrow\n                placement=\"right\"\n                title={\n                  <>\n                    <Typography>{getEntityTitle(option)}</Typography>\n                    <Typography variant=\"caption\">\n                      {getEntityDescription(option)}\n                    </Typography>\n                  </>\n                }\n              >\n                <span>{getEntityTitle(option, { withType: false })}</span>\n              </Tooltip>\n            </span>\n          );\n        }}\n        renderInput={params => {\n          let helperText = '';\n          if (!hideHelpText) {\n            if (error && error.message) {\n              helperText = error.message;\n            } else {\n              helperText = t('entitiesInput.helperText', {\n                max: max.toString(),\n              });\n            }\n          }\n\n          return (\n            <TextField\n              {...params}\n              variant=\"outlined\"\n              margin=\"normal\"\n              required={required}\n              label={label || t('entitiesInput.label')}\n              placeholder={placeholder || t('entitiesInput.placeholder')}\n              helperText={helperText}\n              name={name}\n              FormHelperTextProps={{\n                style: { marginLeft: '0.2em' },\n              }}\n              InputProps={{\n                ...params.InputProps,\n                endAdornment: (\n                  <>\n                    {loading ? (\n                      <CircularProgress color=\"inherit\" size={20} />\n                    ) : null}\n                    {params.InputProps.endAdornment}\n                  </>\n                ),\n              }}\n              error={error !== undefined}\n            />\n          );\n        }}\n        {...autocompleteProps}\n      />\n      {suggestedEntities?.length > 0 && (\n        <Box style={{ marginLeft: '4px' }}>\n          <Typography variant=\"caption\" color=\"textSecondary\">\n            {t('entitiesInput.suggestedEntities')}\n          </Typography>\n          <Box mt={0.5}>\n            {suggestedEntities.map(entity => (\n              <Chip\n                key={stringifyEntityRef(entity)}\n                label={getEntityTitle(entity)}\n                size=\"small\"\n                onClick={() => handleSuggestedEntityClick(entity)}\n                style={{ margin: '0 4px 4px 0' }}\n                disabled={\n                  [value ?? []]\n                    .flat()\n                    .map(stringifyEntityRef)\n                    .includes(stringifyEntityRef(entity)) ||\n                  [value ?? []].flat().length >= max\n                }\n              />\n            ))}\n          </Box>\n        </Box>\n      )}{' '}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntitiesInput.esm.js","sources":["../../../src/components/PostForm/EntitiesInput.tsx"],"sourcesContent":["import { Autocomplete } from '@material-ui/lab';\nimport { getEntityDescription, getEntityTitle } from '../../utils/utils';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport {\n  Box,\n  Chip,\n  CircularProgress,\n  TextField,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport {\n  ComponentType,\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { qetaApiRef } from '../../api';\nimport { compact } from 'lodash';\nimport {\n  AutocompleteListboxComponent,\n  renderGroup,\n} from './AutocompleteListComponent';\nimport { AutocompleteProps } from '@material-ui/lab/Autocomplete/Autocomplete';\nimport { FieldError } from 'react-hook-form';\nimport { getSupportedEntityKinds } from '@drodil/backstage-plugin-qeta-common';\nimport { useDebounce } from 'react-use';\n\ntype CommonEntitiesInputProps = {\n  singleValue?: string;\n  required?: boolean;\n  useOnlyUsedEntities?: boolean;\n  hideHelpText?: boolean;\n  style?: CSSProperties;\n  disabled?: boolean;\n  kind?: string[];\n  maximum?: number | null;\n  error?: FieldError;\n  label?: string;\n  name?: string;\n  placeholder?: string;\n  autocompleteProps?: AutocompleteProps<any, any, any, any>;\n  onChange: (value: any) => void;\n  title?: string;\n  content?: string;\n  tags?: string[];\n};\ntype SingleEntitiesInputValue = CommonEntitiesInputProps & {\n  multiple: false;\n  value?: Entity | null;\n  onChange: (value: Entity) => void;\n};\n\ntype MultipleEntitiesInputValue = CommonEntitiesInputProps & {\n  multiple?: true;\n  value?: Entity[];\n  onChange: (value: Entity[]) => void;\n};\n\nexport type EntitiesInputProps =\n  | SingleEntitiesInputValue\n  | MultipleEntitiesInputValue;\n\nconst CATALOG_FIELDS = [\n  'kind',\n  'metadata.name',\n  'metadata.namespace',\n  'metadata.title',\n  'metadata.description',\n  'spec.type',\n  'spec.profile.displayName',\n  'spec.profile.email',\n];\n\nexport const EntitiesInput = forwardRef<any, EntitiesInputProps>(\n  (props, _ref) => {\n    const {\n      value,\n      singleValue,\n      onChange,\n      multiple = true,\n      required = false,\n      useOnlyUsedEntities = false,\n      hideHelpText = false,\n      style,\n      disabled,\n      kind,\n      error,\n      maximum,\n      label,\n      name = 'entities',\n      placeholder,\n      autocompleteProps,\n      title,\n      content,\n      tags,\n    } = props;\n\n    const configApi = useApi(configApiRef);\n    const catalogApi = useApi(catalogApiRef);\n    const qetaApi = useApi(qetaApiRef);\n    const [availableEntities, setAvailableEntities] = useState<Entity[] | null>(\n      [],\n    );\n    const [loading, setLoading] = useState(false);\n    const [open, setOpen] = useState(false);\n    const { t } = useTranslationRef(qetaTranslationRef);\n    const [suggestedEntities, setSuggestedEntities] = useState<Entity[]>([]);\n    const [, setLoadingSuggestions] = useState(false);\n\n    const entityKinds: string[] = useMemo(() => {\n      if (kind) {\n        return kind;\n      }\n      return getSupportedEntityKinds(configApi);\n    }, [configApi, kind]);\n    const max = useMemo(() => {\n      if (maximum) {\n        return maximum;\n      }\n      return configApi.getOptionalNumber('qeta.entities.max') ?? 3;\n    }, [configApi, maximum]);\n\n    const handleOpen = useCallback(() => {\n      setOpen(true);\n      (async () => {\n        setLoading(true);\n        if (singleValue) {\n          const entity = await catalogApi.getEntityByRef(singleValue);\n          setLoading(false);\n          setAvailableEntities(entity ? [entity] : null);\n          return;\n        }\n\n        if (useOnlyUsedEntities) {\n          const qetaEntities = await qetaApi.getEntities();\n          const refs = qetaEntities.entities.map(r => r.entityRef);\n          const catalogData = await catalogApi.getEntitiesByRefs({\n            entityRefs: refs,\n            fields: CATALOG_FIELDS,\n          });\n          setLoading(false);\n          setAvailableEntities(\n            catalogData\n              ? compact(catalogData.items).sort((a, b) =>\n                  getEntityTitle(a).localeCompare(getEntityTitle(b)),\n                )\n              : null,\n          );\n          return;\n        }\n\n        if (entityKinds && entityKinds.length > 0) {\n          const entities = await catalogApi.getEntities({\n            filter: { kind: entityKinds },\n            fields: CATALOG_FIELDS,\n            order: [\n              { field: 'kind', order: 'asc' },\n              { field: 'metadata.title', order: 'asc' },\n            ],\n          });\n          setLoading(false);\n          setAvailableEntities(entities ? entities.items : null);\n          return;\n        }\n        setLoading(false);\n        setAvailableEntities(null);\n      })();\n    }, [singleValue, useOnlyUsedEntities, entityKinds, catalogApi, qetaApi]);\n\n    const usedValue = useMemo(() => {\n      if (!value) {\n        return multiple ? [] : null;\n      }\n      return value;\n    }, [value, multiple]);\n\n    useDebounce(\n      () => {\n        if (title && content) {\n          setLoadingSuggestions(true);\n          qetaApi\n            .getEntitySuggestions({\n              title,\n              content,\n              tags,\n              entities: [value ?? []].flat().map(stringifyEntityRef),\n            })\n            .then(response => {\n              setSuggestedEntities(response.entities);\n            })\n            .catch(() => {\n              // Ignore errors\n            })\n            .finally(() => {\n              setLoadingSuggestions(false);\n            });\n        }\n      },\n      2000,\n      [title, content, qetaApi],\n    );\n\n    const handleSuggestedEntityClick = (entity: Entity) => {\n      const values = [value ?? []].flat();\n      if (values && values.length < max && !values.includes(entity)) {\n        onChange([...values, entity]);\n      }\n    };\n\n    if (!availableEntities) {\n      return null;\n    }\n\n    return (\n      <Box>\n        <Autocomplete\n          multiple={multiple}\n          autoHighlight\n          autoComplete\n          className=\"qetaEntitiesInput\"\n          value={usedValue}\n          disabled={disabled}\n          loading={loading}\n          loadingText={t('common.loading')}\n          groupBy={entityKinds.length > 1 ? option => option.kind : undefined}\n          renderGroup={renderGroup}\n          handleHomeEndKeys\n          open={open}\n          onOpen={handleOpen}\n          onClose={() => setOpen(false)}\n          options={availableEntities}\n          getOptionLabel={getEntityTitle}\n          ListboxComponent={\n            AutocompleteListboxComponent as ComponentType<\n              HTMLAttributes<HTMLElement>\n            >\n          }\n          disableListWrap\n          style={style}\n          getOptionSelected={(o, v) =>\n            stringifyEntityRef(o) === stringifyEntityRef(v)\n          }\n          onChange={(_e, newValue) => {\n            if (multiple) {\n              if (!newValue) {\n                onChange([]);\n                return;\n              }\n              const val = Array.isArray(newValue) ? newValue : [newValue];\n              if (max === null || val.length <= max) {\n                onChange(val.filter(v => typeof v !== 'string'));\n              }\n            } else {\n              if (!newValue) {\n                return;\n              }\n              onChange(newValue as Entity);\n            }\n          }}\n          renderOption={(option: Entity) => {\n            const stringified = stringifyEntityRef(option);\n            return (\n              <span key={stringified}>\n                <Tooltip\n                  arrow\n                  placement=\"right\"\n                  title={\n                    <>\n                      <Typography>{getEntityTitle(option)}</Typography>\n                      <Typography variant=\"caption\">\n                        {getEntityDescription(option)}\n                      </Typography>\n                    </>\n                  }\n                >\n                  <span>{getEntityTitle(option, { withType: false })}</span>\n                </Tooltip>\n              </span>\n            );\n          }}\n          renderInput={params => {\n            let helperText = '';\n            if (!hideHelpText) {\n              if (error && error.message) {\n                helperText = error.message;\n              } else {\n                helperText = t('entitiesInput.helperText', {\n                  max: max.toString(),\n                });\n              }\n            }\n\n            return (\n              <TextField\n                {...params}\n                variant=\"outlined\"\n                margin=\"normal\"\n                required={required}\n                label={label || t('entitiesInput.label')}\n                placeholder={placeholder || t('entitiesInput.placeholder')}\n                helperText={helperText}\n                name={name}\n                FormHelperTextProps={{\n                  style: { marginLeft: '0.2em' },\n                }}\n                InputProps={{\n                  ...params.InputProps,\n                  endAdornment: (\n                    <>\n                      {loading ? (\n                        <CircularProgress color=\"inherit\" size={20} />\n                      ) : null}\n                      {params.InputProps.endAdornment}\n                    </>\n                  ),\n                }}\n                error={error !== undefined}\n              />\n            );\n          }}\n          {...autocompleteProps}\n        />\n        {suggestedEntities?.length > 0 && (\n          <Box style={{ marginLeft: '4px' }}>\n            <Typography variant=\"caption\" color=\"textSecondary\">\n              {t('entitiesInput.suggestedEntities')}\n            </Typography>\n            <Box mt={0.5}>\n              {suggestedEntities.map(entity => (\n                <Chip\n                  key={stringifyEntityRef(entity)}\n                  label={getEntityTitle(entity)}\n                  size=\"small\"\n                  onClick={() => handleSuggestedEntityClick(entity)}\n                  style={{ margin: '0 4px 4px 0' }}\n                  disabled={\n                    [value ?? []]\n                      .flat()\n                      .map(stringifyEntityRef)\n                      .includes(stringifyEntityRef(entity)) ||\n                    [value ?? []].flat().length >= max\n                  }\n                />\n              ))}\n            </Box>\n          </Box>\n        )}{' '}\n      </Box>\n    );\n  },\n);\n\nEntitiesInput.displayName = 'EntitiesInput';\n"],"names":[],"mappings":"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"}

package/dist/components/PostForm/PostForm.esm.js

@@ -24,11 +24,16 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import HelpIcon from '@material-ui/icons/Help';
 import { useDebounce } from 'react-use';
+import '@backstage/plugin-signals-react';
+import '../../hooks/useListItemStyles.esm.js';
 import 'dataloader';
 import { useIdentityApi } from '../../hooks/useIdentityApi.esm.js';
 import { useIsModerator } from '../../hooks/useIsModerator.esm.js';
 import '@backstage/plugin-permission-react';
 import '@backstage/plugin-permission-common';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
+import { useUserSettings } from '../../hooks/useUserSettings.esm.js';
 
 const formToRequest = (form, images) => {
   return {
@@ -109,15 +114,10 @@ const PostForm = (props) => {
   const [loadError, setLoadError] = useState(false);
   const [edited, setEdited] = useState(false);
   const [draftId, setDraftId] = useState(id);
-  const [autoSaveEnabled, setAutoSaveEnabled] = useState(() => {
-    const saved = localStorage.getItem("qeta-auto-save-enabled");
-    try {
-      return saved ? JSON.parse(saved) : false;
-    } catch (_) {
-      localStorage.removeItem("qeta-auto-save-enabled");
-      return false;
-    }
-  });
+  const { settings, setSetting } = useUserSettings();
+  const [autoSaveEnabled, setAutoSaveEnabled] = useState(
+    settings.autoSaveEnabled
+  );
   const [images, setImages] = useState([]);
   const [status, setStatus] = useState("draft");
   const [searchParams, _setSearchParams] = useSearchParams();
@@ -439,8 +439,11 @@ const PostForm = (props) => {
   const handleAutoSaveChange = (e) => {
     const newValue = e.target.checked;
     setAutoSaveEnabled(newValue);
-    localStorage.setItem("qeta-auto-save-enabled", JSON.stringify(newValue));
+    setSetting("autoSaveEnabled", newValue);
   };
+  useEffect(() => {
+    setAutoSaveEnabled(settings.autoSaveEnabled);
+  }, [settings.autoSaveEnabled]);
   useEffect(() => {
     const subscription = watch((value, { type: eventType }) => {
       if (eventType === "change") {