strapi-plugin-comments 2.3.2 → 3.0.0-beta.1

package/dist/_chunks/index-D3iNqWZT.mjs

@@ -0,0 +1,373 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { a0 as Alert, e as Button, f as ForwardRef$4p, B as Box, a1 as ForwardRef$1f, F as Flex, T as Typography, Y as Grid, m as Field, a2 as MultiSelect, a3 as MultiSelectOption, a4 as Accordion, a5 as SwitchImpl, a6 as Toggle, a7 as ForwardRef$51 } from "./index-BBcsmSTs.mjs";
+import { useTracking, useNotification, Page, Layouts, Form } from "@strapi/strapi/admin";
+import { useMutation, useQuery, useQueryClient, QueryClient } from "@tanstack/react-query";
+import { u as useAPI, f as CommonProviders, a as usePermissions, g as getMessage, l as lodashExports, e as ConfirmationDialog } from "./index-DJ32APz-.mjs";
+import { useMemo, useRef, useState, useCallback } from "react";
+import styled from "styled-components";
+const RenderIf = ({
+  children,
+  condition
+}) => {
+  return condition ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+};
+const useSettingsAPI = (callbacksMutation = {}) => {
+  const api = useAPI();
+  const updateSettingsMutation = useMutation({
+    mutationFn: api.settings.update,
+    onSuccess: callbacksMutation.updateSettingsMutationSuccess,
+    onError: callbacksMutation.updateSettingsMutationError
+  });
+  const restoreSettingsMutation = useMutation({
+    mutationFn: api.settings.restore,
+    onSuccess: callbacksMutation.restoreSettingsMutationSuccess,
+    onError: callbacksMutation.restoreSettingsMutationError
+  });
+  const restartStrapiMutation = useMutation({
+    mutationFn: api.settings.restart,
+    onSuccess: callbacksMutation.restartStrapiMutationSuccess,
+    onError: callbacksMutation.restartStrapiMutationError
+  });
+  const config = useQuery({
+    queryKey: api.config.getKey(),
+    queryFn: api.config.query
+  });
+  const collectionTypes = useQuery({
+    queryKey: api.contentTypeBuilder.all.getKey(),
+    queryFn: api.contentTypeBuilder.all.query
+  });
+  const roles = useQuery({
+    queryKey: api.roles.getKey(),
+    queryFn: api.roles.query
+  });
+  return useMemo(() => ({
+    config,
+    collectionTypes,
+    roles,
+    restoreSettingsMutation,
+    updateSettingsMutation,
+    restartStrapiMutation
+  }), [
+    config,
+    roles,
+    collectionTypes,
+    restoreSettingsMutation,
+    updateSettingsMutation,
+    restartStrapiMutation
+  ]);
+};
+const boxDefaultProps = {
+  background: "neutral0",
+  hasRadius: true,
+  shadow: "filterShadow",
+  padding: 6,
+  width: "100%"
+};
+const StyledAlert = styled(Alert)(() => ({
+  "[role]": {
+    flexDirection: "column"
+  }
+}));
+const Settings = () => {
+  useTracking();
+  const formRef = useRef(null);
+  const { toggleNotification } = useNotification();
+  const [isRestartRequired, setIsRestartRequired] = useState(false);
+  const { isLoadingForPermissions, canSettingsChange } = usePermissions();
+  const queryClient2 = useQueryClient();
+  const api = useAPI();
+  const {
+    config,
+    collectionTypes,
+    roles,
+    restoreSettingsMutation,
+    updateSettingsMutation,
+    restartStrapiMutation
+  } = useSettingsAPI({
+    restoreSettingsMutationSuccess: () => {
+      queryClient2.invalidateQueries({
+        queryKey: api.config.getKey(),
+        exact: false
+      });
+      setIsRestartRequired(true);
+      toggleNotification({
+        message: getMessage("page.settings.actions.restore.success"),
+        type: "success"
+      });
+    },
+    restartStrapiMutationSuccess: () => {
+      setIsRestartRequired(false);
+    },
+    updateSettingsMutationSuccess: () => {
+      queryClient2.invalidateQueries({
+        queryKey: api.config.getKey(),
+        exact: false
+      });
+      setIsRestartRequired(true);
+    }
+  });
+  const onTriggerSubmit = useCallback(() => {
+    formRef.current?.requestSubmit();
+  }, []);
+  const onSubmit = useCallback((values) => {
+    updateSettingsMutation.mutate({
+      ...values,
+      blockedAuthorProps: values.blockedAuthorProps.split(",").map((prop) => prop.trim())
+    });
+  }, [updateSettingsMutation]);
+  if (config.status !== "success" || collectionTypes.status !== "success" || roles.status !== "success" || isLoadingForPermissions) {
+    return getMessage("page.settings.loading");
+  }
+  const allCollections = collectionTypes.data.filter((ct) => ct.uid.includes("api::"));
+  const enabledCollections = config.data.enabledCollections.filter((uid) => allCollections.some((ct) => ct.uid === uid));
+  const badWords = lodashExports.isNil(config.data.badWords) ? true : config.data?.badWords;
+  const gqlAuthEnabled = Boolean(config.data.gql?.auth || null);
+  const moderatorRoles = config.data.moderatorRoles.filter((role) => roles.data.filter((r) => r.code === role));
+  const clientUrl = config.data.client?.url;
+  const clientEmail = config.data.client?.contactEmail;
+  const blockedAuthorProps = config.data.blockedAuthorProps ?? [];
+  const onDiscardRestart = () => setIsRestartRequired(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: "Comments - settings" }),
+    /* @__PURE__ */ jsxs(Page.Main, { children: [
+      /* @__PURE__ */ jsx(
+        Layouts.Header,
+        {
+          title: getMessage("page.settings.header.title"),
+          subtitle: getMessage("page.settings.header.description"),
+          as: "h2",
+          primaryAction: /* @__PURE__ */ jsx(RenderIf, { condition: canSettingsChange, children: /* @__PURE__ */ jsx(Button, { type: "submit", startIcon: /* @__PURE__ */ jsx(ForwardRef$4p, {}), onClick: onTriggerSubmit, children: getMessage("page.settings.actions.submit") }) })
+        }
+      ),
+      /* @__PURE__ */ jsxs(Layouts.Content, { children: [
+        isRestartRequired && /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsx(
+          StyledAlert,
+          {
+            closeLabel: getMessage("page.settings.actions.restart.alert.cancel"),
+            title: getMessage("page.settings.actions.restart.alert.title"),
+            onClose: onDiscardRestart,
+            action: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, { onClick: restartStrapiMutation.mutate, startIcon: /* @__PURE__ */ jsx(ForwardRef$1f, {}), children: getMessage("page.settings.actions.restart") }) }),
+            children: /* @__PURE__ */ jsx(Box, { marginTop: 4, children: getMessage("page.settings.actions.restart.alert.description") })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Form,
+          {
+            method: "POST",
+            ref: formRef,
+            onSubmit,
+            initialValues: {
+              enabledCollections,
+              moderatorRoles,
+              badWords,
+              clientEmail,
+              clientUrl,
+              gqlAuthEnabled,
+              approvalFlow: config.data.approvalFlow,
+              entryLabel: config.data.entryLabel,
+              blockedAuthorProps: blockedAuthorProps.join(", ")
+            },
+            children: ({ values, onChange }) => /* @__PURE__ */ jsxs(Flex, { gap: 4, direction: "column", children: [
+              /* @__PURE__ */ jsxs(Box, { ...boxDefaultProps, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "delta", as: "h2", children: getMessage("page.settings.section.general") }),
+                /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, marginTop: 4, width: "100%", children: [
+                  /* @__PURE__ */ jsx(Grid.Item, { xs: 12, children: /* @__PURE__ */ jsxs(Field.Root, { width: "100%", hint: getMessage("page.settings.form.enabledCollections.hint"), children: [
+                    /* @__PURE__ */ jsx(Field.Label, { htmlFor: "enabledCollections", children: getMessage("page.settings.form.enabledCollections.label") }),
+                    /* @__PURE__ */ jsx(
+                      MultiSelect,
+                      {
+                        withTags: true,
+                        name: "enabledCollections",
+                        value: values.enabledCollections,
+                        onChange: (value) => {
+                          onChange("enabledCollections", value);
+                        },
+                        children: allCollections.map((collection) => /* @__PURE__ */ jsx(MultiSelectOption, { value: collection.uid, children: collection.schema.displayName }, collection.uid))
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Field.Hint, {})
+                  ] }) }),
+                  values.enabledCollections.length > 0 && /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, width: "100%", children: [
+                    /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(Typography, { children: getMessage("page.settings.form.contentTypesSettings.label") }) }),
+                    /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(Accordion.Root, { style: { width: "100%" }, children: lodashExports.orderBy(values.enabledCollections).map((uid) => {
+                      const collection = allCollections.find((ct) => ct.uid === uid);
+                      if (collection) {
+                        const { schema: { displayName, attributes } } = collection;
+                        const stringAttributes = Object.keys(attributes).filter((key) => attributes[key].type === "string");
+                        return /* @__PURE__ */ jsxs(Accordion.Item, { value: uid, children: [
+                          /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(Accordion.Trigger, { children: /* @__PURE__ */ jsx(Typography, { variant: "epsilon", as: "h3", children: displayName }) }) }),
+                          /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsxs(Grid.Root, { padding: 6, gap: 4, children: [
+                            /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(
+                              Field.Root,
+                              {
+                                width: "100%",
+                                hint: getMessage({
+                                  id: "page.settings.form.approvalFlow.hint",
+                                  props: { name: displayName }
+                                }),
+                                children: [
+                                  /* @__PURE__ */ jsx(Field.Label, { children: getMessage("page.settings.form.approvalFlow.label") }),
+                                  /* @__PURE__ */ jsx(
+                                    SwitchImpl,
+                                    {
+                                      visibleLabels: true,
+                                      onLabel: getMessage("components.toogle.enabled"),
+                                      offLabel: getMessage("components.toogle.disabled"),
+                                      checked: values.approvalFlow.includes(uid),
+                                      onCheckedChange: (checked) => {
+                                        onChange("approvalFlow", checked ? [...values.approvalFlow, uid] : values.approvalFlow.filter((c) => c !== uid));
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(Field.Hint, {})
+                                ]
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(RenderIf, { condition: stringAttributes.length > 0, children: /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsxs(
+                              Field.Root,
+                              {
+                                width: "100%",
+                                hint: getMessage("page.settings.form.entryLabel.hint"),
+                                children: [
+                                  /* @__PURE__ */ jsx(Field.Label, { children: getMessage("page.settings.form.entryLabel.label") }),
+                                  /* @__PURE__ */ jsx(
+                                    MultiSelect,
+                                    {
+                                      withTags: true,
+                                      placeholder: getMessage("page.settings.form.entryLabel.placeholder"),
+                                      name: "enabledCollections",
+                                      value: values.entryLabel[uid] ?? [],
+                                      onChange: (value) => {
+                                        onChange("entryLabel", { ...values.entryLabel, [uid]: value });
+                                      },
+                                      children: stringAttributes.map((attr) => /* @__PURE__ */ jsx(MultiSelectOption, { value: attr, children: attr }, attr))
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(Field.Hint, {})
+                                ]
+                              }
+                            ) }) })
+                          ] }) })
+                        ] }, uid);
+                      }
+                      return null;
+                    }) }) })
+                  ] }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Box, { ...boxDefaultProps, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "delta", as: "h2", children: getMessage("page.settings.section.additional") }),
+                /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, marginTop: 4, width: "100%", children: [
+                  /* @__PURE__ */ jsx(Grid.Item, { xs: 4, children: /* @__PURE__ */ jsxs(Field.Root, { width: "100%", hint: getMessage("page.settings.form.enabledCollections.hint"), children: [
+                    /* @__PURE__ */ jsx(Field.Label, { htmlFor: "enabledCollections", children: getMessage("page.settings.form.enabledCollections.label") }),
+                    /* @__PURE__ */ jsx(
+                      Toggle,
+                      {
+                        name: "badWords",
+                        checked: values.badWords,
+                        onChange,
+                        onLabel: getMessage("components.toogle.enabled"),
+                        offLabel: getMessage("components.toogle.disabled"),
+                        width: "100%"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Field.Hint, {})
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Grid.Item, { xs: 4, children: /* @__PURE__ */ jsxs(Field.Root, { width: "100%", hint: getMessage("page.settings.form.author.blockedProps.hint"), children: [
+                    /* @__PURE__ */ jsx(Field.Label, { htmlFor: "enabledCollections", children: getMessage("page.settings.form.author.blockedProps.label") }),
+                    /* @__PURE__ */ jsx(Field.Input, { name: "blockedProps", onChange }),
+                    /* @__PURE__ */ jsx(Field.Hint, {})
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Grid.Item, { xs: 4, children: /* @__PURE__ */ jsxs(Field.Root, { width: "100%", hint: getMessage("page.settings.form.gqlAuth.hint"), children: [
+                    /* @__PURE__ */ jsx(Field.Label, { children: getMessage("page.settings.form.gqlAuth.label") }),
+                    /* @__PURE__ */ jsx(
+                      Toggle,
+                      {
+                        name: "gqlAuthEnabled",
+                        checked: values.gqlAuthEnabled,
+                        onChange,
+                        onLabel: getMessage("components.toogle.enabled"),
+                        offLabel: getMessage("components.toogle.disabled"),
+                        width: "100%"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Field.Hint, {})
+                  ] }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Box, { ...boxDefaultProps, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "delta", as: "h2", children: getMessage("page.settings.section.client") }),
+                /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, marginTop: 4, width: "100%", children: [
+                  /* @__PURE__ */ jsx(Grid.Item, { xs: 4, children: /* @__PURE__ */ jsxs(Field.Root, { width: "100%", hint: getMessage("page.settings.form.client.url.hint"), children: [
+                    /* @__PURE__ */ jsx(Field.Label, { children: getMessage("page.settings.form.client.url.label") }),
+                    /* @__PURE__ */ jsx(Field.Input, { name: "clientUrl", onChange }),
+                    /* @__PURE__ */ jsx(Field.Hint, {})
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Grid.Item, { xs: 4, children: /* @__PURE__ */ jsxs(Field.Root, { width: "100%", hint: getMessage("page.settings.form.client.email.hint"), children: [
+                    /* @__PURE__ */ jsx(Field.Label, { children: getMessage("page.settings.form.client.email.label") }),
+                    /* @__PURE__ */ jsx(Field.Input, { name: "clientEmail", onChange }),
+                    /* @__PURE__ */ jsx(Field.Hint, {})
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Grid.Item, { xs: 4, children: /* @__PURE__ */ jsxs(
+                    Field.Root,
+                    {
+                      width: "100%",
+                      hint: getMessage("page.settings.form.moderatorRoles.hint"),
+                      children: [
+                        /* @__PURE__ */ jsx(Field.Label, { children: getMessage("page.settings.form.moderatorRoles.label") }),
+                        /* @__PURE__ */ jsx(
+                          MultiSelect,
+                          {
+                            withTags: true,
+                            placeholder: getMessage("page.settings.form.moderatorRoles.placeholder"),
+                            name: "enabledCollections",
+                            value: values.moderatorRoles,
+                            onChange: (value) => {
+                              onChange("moderatorRoles", value);
+                            },
+                            children: roles.data.map((role) => /* @__PURE__ */ jsx(MultiSelectOption, { value: role.code, children: role.name }, role.code))
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Field.Hint, {})
+                      ]
+                    }
+                  ) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(RenderIf, { condition: canSettingsChange, children: /* @__PURE__ */ jsx(Box, { ...boxDefaultProps, children: /* @__PURE__ */ jsxs(Flex, { gap: 4, direction: "column", alignItems: "flex-start", children: [
+                /* @__PURE__ */ jsxs(Flex, { gap: 2, direction: "column", alignItems: "flex-start", children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "delta", as: "h2", children: getMessage("page.settings.section.restore") }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "pi", as: "h4", children: getMessage("page.settings.section.restore.subtitle") })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  ConfirmationDialog,
+                  {
+                    Trigger: ({ onClick }) => /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "danger-light",
+                        startIcon: /* @__PURE__ */ jsx(ForwardRef$51, {}),
+                        onClick,
+                        children: getMessage("page.settings.actions.restore")
+                      }
+                    ),
+                    onConfirm: restoreSettingsMutation.mutate,
+                    title: getMessage("page.settings.actions.restore.confirmation.header"),
+                    labelConfirm: getMessage("page.settings.actions.restore.confirmation.button.confirm"),
+                    iconConfirm: /* @__PURE__ */ jsx(ForwardRef$51, {}),
+                    children: getMessage("page.settings.actions.restore.confirmation.description")
+                  }
+                )
+              ] }) }) })
+            ] })
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+new QueryClient();
+const index = () => /* @__PURE__ */ jsx(CommonProviders, { children: /* @__PURE__ */ jsx(Settings, {}) });
+export {
+  index as default
+};