strapi-plugin-comments 2.0.8 → 2.0.11

package/build/admin/src/pages/Settings/index.js

@@ -0,0 +1,712 @@
+"use strict";
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (
+          !desc ||
+          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o["default"] = v;
+      });
+var __importStar =
+  (this && this.__importStar) ||
+  function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null)
+      for (var k in mod)
+        if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+          __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_query_1 = require("react-query");
+const formik_1 = require("formik");
+const lodash_1 = require("lodash");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const Accordion_1 = require("@strapi/design-system/Accordion");
+const Main_1 = require("@strapi/design-system/Main");
+const Layout_1 = require("@strapi/design-system/Layout");
+const Button_1 = require("@strapi/design-system/Button");
+const Box_1 = require("@strapi/design-system/Box");
+const Stack_1 = require("@strapi/design-system/Stack");
+const Typography_1 = require("@strapi/design-system/Typography");
+const Grid_1 = require("@strapi/design-system/Grid");
+const ToggleInput_1 = require("@strapi/design-system/ToggleInput");
+const Select_1 = require("@strapi/design-system/Select");
+const LiveRegions_1 = require("@strapi/design-system/LiveRegions");
+const Tooltip_1 = require("@strapi/design-system/Tooltip");
+const icons_1 = require("@strapi/icons");
+const permissions_1 = __importDefault(require("../../permissions"));
+const useConfig_1 = __importDefault(require("../../hooks/useConfig"));
+const api_1 = require("./utils/api");
+const utils_1 = require("../../utils");
+const ConfirmationDialog_1 = __importDefault(
+  require("../../components/ConfirmationDialog")
+);
+const styles_1 = require("./components/RestartAlert/styles");
+const FormSwitch_1 = __importDefault(require("../../components/FormSwitch"));
+const Settings = () => {
+  (0, helper_plugin_1.useFocusWhenNavigate)();
+  const { notifyStatus } = (0, LiveRegions_1.useNotifyAT)();
+  const { trackUsage } = (0, helper_plugin_1.useTracking)();
+  const trackUsageRef = (0, react_1.useRef)(trackUsage);
+  const toggleNotification = (0, helper_plugin_1.useNotification)();
+  const { lockApp, unlockApp } = (0, helper_plugin_1.useOverlayBlocker)();
+  const viewPermissions = (0, react_1.useMemo)(
+    () => ({
+      access: permissions_1.default.settings.read,
+      change: permissions_1.default.settings.change,
+    }),
+    []
+  );
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canAccess, canChange },
+  } = (0, helper_plugin_1.useRBAC)(viewPermissions);
+  const [restoreConfigmationVisible, setRestoreConfigmationVisible] = (0,
+  react_1.useState)(false);
+  const [restartRequired, setRestartRequired] = (0, react_1.useState)(false);
+  const [contentTypeExpanded, setContentTypeExpanded] = (0, react_1.useState)(
+    undefined
+  );
+  const { fetch, restartMutation, submitMutation, restoreMutation } = (0,
+  useConfig_1.default)(toggleNotification);
+  const {
+    data: configData,
+    isLoading: isConfigLoading,
+    err: configErr,
+  } = fetch;
+  const {
+    data: allCollectionsData,
+    isLoading: areCollectionsLoading,
+    err: collectionsErr,
+  } = (0, react_query_1.useQuery)(["get-all-content-types", canAccess], () =>
+    (0, api_1.fetchAllContentTypes)(toggleNotification)
+  );
+  const {
+    data: allRolesData,
+    isLoading: areRolesLoading,
+    err: rolesErr,
+  } = (0, react_query_1.useQuery)(["get-all-roles", canAccess], () =>
+    (0, api_1.fetchRoles)(toggleNotification)
+  );
+  const isLoading =
+    isLoadingForPermissions ||
+    isConfigLoading ||
+    areCollectionsLoading ||
+    areRolesLoading;
+  const isError = configErr || collectionsErr || rolesErr;
+  const preparePayload = ({
+    enabledCollections,
+    gqlAuthEnabled,
+    approvalFlow,
+    entryLabel,
+    ...rest
+  }) => ({
+    ...rest,
+    enabledCollections,
+    approvalFlow: approvalFlow.filter((_) => enabledCollections.includes(_)),
+    entryLabel: {
+      ...Object.keys(entryLabel).reduce(
+        (prev, curr) => ({
+          ...prev,
+          [curr]: enabledCollections.includes(curr)
+            ? entryLabel[curr]
+            : undefined,
+        }),
+        {}
+      ),
+      "*": entryLabel["*"],
+    },
+    reportReasons: configData?.reportReasons,
+    gql: gqlAuthEnabled ? { auth: true } : undefined,
+  });
+  if (isLoading || isError) {
+    return react_1.default.createElement(
+      helper_plugin_1.LoadingIndicatorPage,
+      null,
+      (0, utils_1.getMessage)("page.settings.loading")
+    );
+  }
+  const regexUID = !isLoading
+    ? new RegExp(
+        (0, utils_1.parseRegExp)(fetch.data.regex?.uid).value,
+        (0, utils_1.parseRegExp)(fetch.data.regex?.uid).flags
+      )
+    : null;
+  const allRoles = allRolesData?.data || [];
+  const allCollections =
+    !isLoading &&
+    allCollectionsData.filter(
+      ({ uid }) =>
+        (0, lodash_1.first)(
+          uid.split(regexUID).filter((s) => s && s.length > 0)
+        ) === "api"
+    );
+  const enabledCollections =
+    configData?.enabledCollections
+      ?.map((uid) =>
+        allCollections.find((_) => _.uid === uid) ? uid : undefined
+      )
+      .filter((_) => _) || [];
+  const entryLabel = configData?.entryLabel || {};
+  const approvalFlow = configData?.approvalFlow || [];
+  const badWords = (0, lodash_1.isNil)(configData?.badWords)
+    ? true
+    : configData?.badWords;
+  const isGQLPluginEnabled = configData?.isGQLPluginEnabled;
+  const gqlAuthEnabled = configData?.gql?.auth || undefined;
+  const moderatorRoles =
+    configData?.moderatorRoles?.filter((code) =>
+      allRoles.find((_) => _.code === code)
+    ) || [];
+  const changeApprovalFlowFor = (uid, current, value) => {
+    const currentSet = new Set(current);
+    if (value) {
+      currentSet.add(uid);
+    } else {
+      currentSet.delete(uid);
+    }
+    return Array.from(currentSet);
+  };
+  const changeEntryLabelFor = (uid, current, value) => ({
+    ...current,
+    [uid]: value && !(0, lodash_1.isEmpty)(value) ? [...value] : undefined,
+  });
+  const handleUpdateConfiguration = async (form) => {
+    if (canChange) {
+      lockApp();
+      const payload = preparePayload(form);
+      await submitMutation.mutateAsync(payload);
+      const enabledCollectionsChanged = !(0, lodash_1.isEqual)(
+        payload.enabledCollections,
+        configData?.enabledCollections
+      );
+      const gqlAuthChanged = !(0, lodash_1.isEqual)(
+        payload.gql?.auth,
+        configData?.gql?.auth
+      );
+      if (enabledCollectionsChanged || gqlAuthChanged) {
+        setRestartRequired(true);
+      }
+      unlockApp();
+    }
+  };
+  const handleRestoreConfirmation = () => setRestoreConfigmationVisible(true);
+  const handleRestoreConfiguration = async () => {
+    if (canChange) {
+      lockApp();
+      await restoreMutation.mutateAsync();
+      unlockApp();
+      setRestartRequired(true);
+      setRestoreConfigmationVisible(false);
+    }
+  };
+  const handleRestoreCancel = () => setRestoreConfigmationVisible(false);
+  const handleRestart = async () => {
+    if (canChange) {
+      lockApp();
+      await restartMutation.mutateAsync();
+      setRestartRequired(false);
+      unlockApp();
+    }
+  };
+  const handleRestartDiscard = () => setRestartRequired(false);
+  const handleSetContentTypeExpanded = (key) =>
+    setContentTypeExpanded(key === contentTypeExpanded ? undefined : key);
+  const boxDefaultProps = {
+    background: "neutral0",
+    hasRadius: true,
+    shadow: "filterShadow",
+    padding: 6,
+  };
+  return react_1.default.createElement(
+    Main_1.Main,
+    null,
+    react_1.default.createElement(
+      formik_1.Formik,
+      {
+        initialValues: {
+          enabledCollections,
+          moderatorRoles,
+          badWords,
+          approvalFlow,
+          entryLabel,
+          gqlAuthEnabled,
+        },
+        enableReinitialize: true,
+        onSubmit: handleUpdateConfiguration,
+      },
+      ({ handleSubmit, setFieldValue, values }) =>
+        react_1.default.createElement(
+          helper_plugin_1.Form,
+          { noValidate: true, onSubmit: handleSubmit },
+          react_1.default.createElement(Layout_1.HeaderLayout, {
+            title: (0, utils_1.getMessage)("page.settings.header.title"),
+            subtitle: (0, utils_1.getMessage)(
+              "page.settings.header.description"
+            ),
+            primaryAction: react_1.default.createElement(
+              helper_plugin_1.CheckPermissions,
+              { permissions: permissions_1.default.settingsChange },
+              react_1.default.createElement(
+                Button_1.Button,
+                {
+                  type: "submit",
+                  startIcon: react_1.default.createElement(icons_1.Check, null),
+                  disabled: restartRequired,
+                },
+                (0, utils_1.getMessage)("page.settings.actions.submit")
+              )
+            ),
+          }),
+          react_1.default.createElement(
+            Layout_1.ContentLayout,
+            null,
+            react_1.default.createElement(
+              Stack_1.Stack,
+              { size: 4 },
+              restartRequired &&
+                react_1.default.createElement(
+                  styles_1.RestartAlert,
+                  {
+                    closeLabel: (0, utils_1.getMessage)(
+                      "page.settings.actions.restart.alert.cancel"
+                    ),
+                    title: (0, utils_1.getMessage)(
+                      "page.settings.actions.restart.alert.title"
+                    ),
+                    action: react_1.default.createElement(
+                      Box_1.Box,
+                      null,
+                      react_1.default.createElement(
+                        Button_1.Button,
+                        {
+                          onClick: handleRestart,
+                          startIcon: react_1.default.createElement(
+                            icons_1.Play,
+                            null
+                          ),
+                        },
+                        (0, utils_1.getMessage)("page.settings.actions.restart")
+                      )
+                    ),
+                    onClose: handleRestartDiscard,
+                  },
+                  (0, utils_1.getMessage)(
+                    "page.settings.actions.restart.alert.description"
+                  )
+                ),
+              react_1.default.createElement(
+                Box_1.Box,
+                { ...boxDefaultProps },
+                react_1.default.createElement(
+                  Stack_1.Stack,
+                  { size: 4 },
+                  react_1.default.createElement(
+                    Typography_1.Typography,
+                    { variant: "delta", as: "h2" },
+                    (0, utils_1.getMessage)("page.settings.section.general")
+                  ),
+                  react_1.default.createElement(
+                    Grid_1.Grid,
+                    { gap: 4 },
+                    react_1.default.createElement(
+                      Grid_1.GridItem,
+                      { col: 12 },
+                      react_1.default.createElement(
+                        Select_1.Select,
+                        {
+                          name: "enabledCollections",
+                          label: (0, utils_1.getMessage)(
+                            "page.settings.form.enabledCollections.label"
+                          ),
+                          placeholder: (0, utils_1.getMessage)(
+                            "page.settings.form.enabledCollections.placeholder"
+                          ),
+                          hint: (0, utils_1.getMessage)(
+                            "page.settings.form.enabledCollections.hint"
+                          ),
+                          onClear: () =>
+                            setFieldValue("enabledCollections", [], false),
+                          value: values.enabledCollections,
+                          onChange: (value) =>
+                            setFieldValue("enabledCollections", value, false),
+                          disabled: restartRequired,
+                          multi: true,
+                          withTags: true,
+                        },
+                        allCollections.map(({ uid, schema: { displayName } }) =>
+                          react_1.default.createElement(
+                            Select_1.Option,
+                            { key: uid, value: uid },
+                            displayName
+                          )
+                        )
+                      )
+                    ),
+                    !(0, lodash_1.isEmpty)(values.enabledCollections) &&
+                      react_1.default.createElement(
+                        Grid_1.GridItem,
+                        { col: 12 },
+                        react_1.default.createElement(
+                          Accordion_1.AccordionGroup,
+                          {
+                            label: (0, utils_1.getMessage)(
+                              "page.settings.form.contentTypesSettings.label"
+                            ),
+                            labelAction: react_1.default.createElement(
+                              Tooltip_1.Tooltip,
+                              {
+                                description: (0, utils_1.getMessage)(
+                                  "page.settings.form.contentTypesSettings.tooltip"
+                                ),
+                              },
+                              react_1.default.createElement(
+                                icons_1.Information,
+                                { "aria-hidden": true }
+                              )
+                            ),
+                          },
+                          (0, lodash_1.orderBy)(values.enabledCollections).map(
+                            (uid) => {
+                              const {
+                                schema: { displayName, attributes = {} },
+                              } = allCollections.find((_) => _.uid === uid);
+                              const stringAttributes = Object.keys(
+                                attributes
+                              ).filter((_) => attributes[_].type === "string");
+                              const key = `collectionSettings-${uid}`;
+                              return react_1.default.createElement(
+                                Accordion_1.Accordion,
+                                {
+                                  expanded: contentTypeExpanded === key,
+                                  toggle: () =>
+                                    handleSetContentTypeExpanded(key),
+                                  key: key,
+                                  id: key,
+                                  size: "S",
+                                },
+                                react_1.default.createElement(
+                                  Accordion_1.AccordionToggle,
+                                  { title: displayName, togglePosition: "left" }
+                                ),
+                                react_1.default.createElement(
+                                  Accordion_1.AccordionContent,
+                                  null,
+                                  react_1.default.createElement(
+                                    Box_1.Box,
+                                    { padding: 6 },
+                                    react_1.default.createElement(
+                                      Stack_1.Stack,
+                                      { size: 4 },
+                                      react_1.default.createElement(
+                                        FormSwitch_1.default,
+                                        {
+                                          name: `collectionSettings-${uid}-approvalFlow`,
+                                          label: (0, utils_1.getMessage)(
+                                            "page.settings.form.approvalFlow.label"
+                                          ),
+                                          hint: (0, utils_1.getMessage)({
+                                            id: "page.settings.form.approvalFlow.hint",
+                                            props: { name: displayName },
+                                          }),
+                                          selected:
+                                            values.approvalFlow.includes(uid),
+                                          onChange: () =>
+                                            setFieldValue(
+                                              "approvalFlow",
+                                              changeApprovalFlowFor(
+                                                uid,
+                                                values.approvalFlow,
+                                                !values.approvalFlow.includes(
+                                                  uid
+                                                )
+                                              ),
+                                              []
+                                            ),
+                                          onLabel: (0, utils_1.getMessage)(
+                                            "compontents.toogle.enabled"
+                                          ),
+                                          offLabel: (0, utils_1.getMessage)(
+                                            "compontents.toogle.disabled"
+                                          ),
+                                          disabled: restartRequired,
+                                          visibleLabels: true,
+                                        }
+                                      ),
+                                      !(0, lodash_1.isEmpty)(
+                                        stringAttributes
+                                      ) &&
+                                        react_1.default.createElement(
+                                          Select_1.Select,
+                                          {
+                                            name: `collectionSettings-${uid}-entryLabel`,
+                                            label: (0, utils_1.getMessage)(
+                                              "page.settings.form.entryLabel.label"
+                                            ),
+                                            placeholder: (0,
+                                            utils_1.getMessage)(
+                                              "page.settings.form.entryLabel.placeholder"
+                                            ),
+                                            hint: (0, utils_1.getMessage)(
+                                              "page.settings.form.entryLabel.hint"
+                                            ),
+                                            onClear: () =>
+                                              setFieldValue(
+                                                "entryLabel",
+                                                changeEntryLabelFor(
+                                                  uid,
+                                                  values.entryLabel
+                                                )
+                                              ),
+                                            value: values.entryLabel[uid] || [],
+                                            onChange: (value) =>
+                                              setFieldValue(
+                                                "entryLabel",
+                                                changeEntryLabelFor(
+                                                  uid,
+                                                  values.entryLabel,
+                                                  value
+                                                )
+                                              ),
+                                            multi: true,
+                                            withTags: true,
+                                            disabled: restartRequired,
+                                          },
+                                          stringAttributes.map((key) =>
+                                            react_1.default.createElement(
+                                              Select_1.Option,
+                                              {
+                                                key: `collectionSettings-${uid}-entryLabel-${key}`,
+                                                value: key,
+                                              },
+                                              (0, lodash_1.capitalize)(
+                                                key.split("_").join(" ")
+                                              )
+                                            )
+                                          )
+                                        )
+                                    )
+                                  )
+                                )
+                              );
+                            }
+                          )
+                        )
+                      )
+                  )
+                )
+              ),
+              react_1.default.createElement(
+                Box_1.Box,
+                { ...boxDefaultProps },
+                react_1.default.createElement(
+                  Stack_1.Stack,
+                  { size: 4 },
+                  react_1.default.createElement(
+                    Typography_1.Typography,
+                    { variant: "delta", as: "h2" },
+                    (0, utils_1.getMessage)("page.settings.section.additional")
+                  ),
+                  react_1.default.createElement(
+                    Grid_1.Grid,
+                    { gap: 4 },
+                    react_1.default.createElement(
+                      Grid_1.GridItem,
+                      { col: 6, xs: 12 },
+                      react_1.default.createElement(
+                        Select_1.Select,
+                        {
+                          name: "moderatorRoles",
+                          label: (0, utils_1.getMessage)(
+                            "page.settings.form.moderatorRoles.label"
+                          ),
+                          placeholder: (0, utils_1.getMessage)(
+                            "page.settings.form.moderatorRoles.placeholder"
+                          ),
+                          hint: (0, utils_1.getMessage)(
+                            "page.settings.form.moderatorRoles.hint"
+                          ),
+                          onClear: () =>
+                            setFieldValue("moderatorRoles", [], false),
+                          value: values.moderatorRoles,
+                          onChange: (value) =>
+                            setFieldValue("moderatorRoles", value, false),
+                          disabled: restartRequired,
+                          multi: true,
+                          withTags: true,
+                        },
+                        allRoles.map(({ code, name }) =>
+                          react_1.default.createElement(
+                            Select_1.Option,
+                            { key: code, value: code },
+                            name
+                          )
+                        )
+                      )
+                    ),
+                    react_1.default.createElement(
+                      Grid_1.GridItem,
+                      { col: 6, xs: 12 },
+                      react_1.default.createElement(ToggleInput_1.ToggleInput, {
+                        name: "badWords",
+                        label: (0, utils_1.getMessage)(
+                          "page.settings.form.badWords.label"
+                        ),
+                        hint: (0, utils_1.getMessage)(
+                          "page.settings.form.badWords.hint"
+                        ),
+                        checked: values.badWords,
+                        onChange: ({ target: { checked } }) =>
+                          setFieldValue("badWords", checked, false),
+                        onLabel: (0, utils_1.getMessage)(
+                          "compontents.toogle.enabled"
+                        ),
+                        offLabel: (0, utils_1.getMessage)(
+                          "compontents.toogle.disabled"
+                        ),
+                        disabled: restartRequired,
+                      })
+                    ),
+                    isGQLPluginEnabled &&
+                      react_1.default.createElement(
+                        Grid_1.GridItem,
+                        { col: 6, xs: 12 },
+                        react_1.default.createElement(
+                          ToggleInput_1.ToggleInput,
+                          {
+                            name: "badWords",
+                            label: (0, utils_1.getMessage)(
+                              "page.settings.form.gqlAuth.label"
+                            ),
+                            hint: (0, utils_1.getMessage)(
+                              "page.settings.form.gqlAuth.hint"
+                            ),
+                            checked: values.gqlAuthEnabled,
+                            onChange: ({ target: { checked } }) =>
+                              setFieldValue("gqlAuthEnabled", checked, false),
+                            onLabel: (0, utils_1.getMessage)(
+                              "compontents.toogle.enabled"
+                            ),
+                            offLabel: (0, utils_1.getMessage)(
+                              "compontents.toogle.disabled"
+                            ),
+                            disabled: restartRequired,
+                          }
+                        )
+                      )
+                  )
+                )
+              ),
+              react_1.default.createElement(
+                helper_plugin_1.CheckPermissions,
+                { permissions: permissions_1.default.settingsChange },
+                react_1.default.createElement(
+                  Box_1.Box,
+                  { ...boxDefaultProps },
+                  react_1.default.createElement(
+                    Stack_1.Stack,
+                    { size: 4 },
+                    react_1.default.createElement(
+                      Stack_1.Stack,
+                      { size: 2 },
+                      react_1.default.createElement(
+                        Typography_1.Typography,
+                        { variant: "delta", as: "h2" },
+                        (0, utils_1.getMessage)("page.settings.section.restore")
+                      ),
+                      react_1.default.createElement(
+                        Typography_1.Typography,
+                        { variant: "pi", as: "h4" },
+                        (0, utils_1.getMessage)(
+                          "page.settings.section.restore.subtitle"
+                        )
+                      )
+                    ),
+                    react_1.default.createElement(
+                      Grid_1.Grid,
+                      { gap: 4 },
+                      react_1.default.createElement(
+                        Grid_1.GridItem,
+                        { col: 6 },
+                        react_1.default.createElement(
+                          Button_1.Button,
+                          {
+                            variant: "danger-light",
+                            startIcon: react_1.default.createElement(
+                              icons_1.Refresh,
+                              null
+                            ),
+                            onClick: handleRestoreConfirmation,
+                          },
+                          (0, utils_1.getMessage)(
+                            "page.settings.actions.restore"
+                          )
+                        ),
+                        react_1.default.createElement(
+                          ConfirmationDialog_1.default,
+                          {
+                            isVisible: restoreConfigmationVisible,
+                            isActionAsync: restoreMutation.isLoading,
+                            header: (0, utils_1.getMessage)(
+                              "page.settings.actions.restore.confirmation.header"
+                            ),
+                            labelConfirm: (0, utils_1.getMessage)(
+                              "page.settings.actions.restore.confirmation.button.confirm"
+                            ),
+                            iconConfirm: react_1.default.createElement(
+                              icons_1.Refresh,
+                              null
+                            ),
+                            onConfirm: handleRestoreConfiguration,
+                            onCancel: handleRestoreCancel,
+                          },
+                          (0, utils_1.getMessage)(
+                            "page.settings.actions.restore.confirmation.description"
+                          )
+                        )
+                      )
+                    )
+                  )
+                )
+              )
+            )
+          )
+        )
+    )
+  );
+};
+exports.default = Settings;
+//# sourceMappingURL=index.js.map