@mattisvensson/strapi-plugin-webatlas 0.2.5 → 0.3.0

package/dist/_chunks/{index-CAjBRbaH.js → index-B85fJxGa.js}

@@ -5,6 +5,7 @@ const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
 const designSystem = require("@strapi/design-system");
 const ReactDOM = require("react-dom");
+const reactIntl = require("react-intl");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -40,7 +41,7 @@ const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
     );
   });
 };
-const version = "0.2.4";
+const version = "0.2.6";
 const keywords = [];
 const type = "commonjs";
 const exports$1 = {
@@ -164,6 +165,7 @@ const pluginPkg = {
   packageManager
 };
 const PLUGIN_ID = pluginPkg.strapi.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, "") || "webatlas";
+const PLUGIN_NAME = pluginPkg.strapi.displayName;
 const Initializer = ({ setPlugin }) => {
   const ref = React.useRef(setPlugin);
   React.useEffect(() => {
@@ -3659,6 +3661,7 @@ function Tooltip({ description: description2 }) {
         background: "neutral1000",
         hasRadius: true,
         shadow: "filterShadow",
+        maxWidth: "300px",
         children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral0", children: description2 })
       }
     ) }) })
@@ -3675,19 +3678,6 @@ function debounce(func, wait) {
     timeout = setTimeout(later, wait);
   };
 }
-function URLInfo({ validationState, replacement }) {
-  if (validationState === "initial") return null;
-  let color = "neutral800";
-  let text = "Checking if URL is available...";
-  if (validationState === "checking") {
-    color = "neutral800";
-    text = "Checking if URL is available...";
-  } else if (validationState === "done") {
-    color = replacement ? "danger500" : "success500";
-    text = replacement ? `URL is not available. Replaced with "${replacement}".` : "URL is available";
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: color, children: text }) });
-}
 async function duplicateCheck(url, routeDocumentId) {
   if (!url) throw new Error("URL is required");
   try {
@@ -3699,6 +3689,33 @@ async function duplicateCheck(url, routeDocumentId) {
     throw new Error("Failed to check URL uniqueness");
   }
 }
+const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
+function URLInfo({ validationState, replacement, setUrlStatus }) {
+  const [color, setColor] = React.useState(null);
+  const [text, setText] = React.useState(null);
+  const { formatMessage } = reactIntl.useIntl();
+  React.useEffect(() => {
+    if (validationState === "initial") return;
+    if (validationState === "checking") {
+      setColor("neutral800");
+      setText(formatMessage({
+        id: getTranslation("components.URLInfo.checking"),
+        defaultMessage: "Checking if URL is available..."
+      }));
+    } else if (validationState === "done") {
+      setColor(replacement ? "danger500" : "success500");
+      setText(replacement ? `${formatMessage({
+        id: getTranslation("components.URLInfo.notAvailable"),
+        defaultMessage: "URL is not available. Replaced with"
+      })} "${replacement}".` : formatMessage({
+        id: getTranslation("components.URLInfo.available"),
+        defaultMessage: "URL is available."
+      }));
+      if (setUrlStatus) setUrlStatus(replacement ? "invalid" : "valid");
+    }
+  }, [validationState, replacement, formatMessage, setUrlStatus]);
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: color, children: text }) });
+}
 function reducer(state, action) {
   switch (action.type) {
     case "DEFAULT":
@@ -3733,14 +3750,16 @@ function reducer(state, action) {
   }
 }
 const Alias = ({ config }) => {
-  const { layout, form } = admin.unstable_useContentManagerContext();
+  const { form } = admin.unstable_useContentManagerContext();
   const { initialValues, values, onChange } = form;
   const { getRelatedRoute } = useApi();
+  const { formatMessage } = reactIntl.useIntl();
   const [routeId, setRouteId] = React.useState();
   const [isOverride, setIsOverride] = React.useState(false);
   const [validationState, setValidationState] = React.useState("initial");
   const [replacement, setReplacement] = React.useState("");
   const [initialLoadComplete, setInitialLoadComplete] = React.useState(false);
+  const [urlIsValid, setUrlIsValid] = React.useState(null);
   const [path, dispatchPath] = React.useReducer(reducer, {
     needsUrlCheck: false,
     value: "",
@@ -3750,39 +3769,39 @@ const Alias = ({ config }) => {
   const hasUserChangedField = React.useRef(false);
   const initialPath = React.useRef("");
   const prevValueRef = React.useRef(null);
-  if (!config) return null;
-  const debouncedCheckUrl = React.useCallback(debounce(checkUrl, 500), []);
+  const debouncedCheckUrl = React.useCallback(debounce(checkUrl, 250), []);
   React.useEffect(() => {
     onChange("webatlas_path", path.value);
     onChange("webatlas_override", isOverride);
-  }, [path.value, routeId, isOverride]);
-  const debouncedValueEffect = React.useMemo(
-    () => debounce((currentValues) => {
-      const key = config?.default;
-      if (!key) return;
-      const currentValue = currentValues[key];
-      if (!currentValue) {
-        dispatchPath({ type: "NO_URL_CHECK", payload: "" });
-        return;
-      }
-      if (initialLoadComplete && (hasUserChangedField.current || !routeId) && prevValueRef.current !== currentValue && !isOverride) {
-        const path2 = config.pattern ? `${config.pattern}/${currentValue}` : `${currentValue}`;
-        if (currentValue === initialValues[key]) {
-          dispatchPath({ type: "NO_URL_CHECK", payload: path2 });
-        } else {
-          dispatchPath({ type: "DEFAULT", payload: path2 });
-        }
-        prevValueRef.current = currentValue;
+  }, [path.value, isOverride]);
+  const debouncedValueEffect = React.useMemo(() => debounce((currentValues) => {
+    const key = config?.default;
+    if (!key) return;
+    const currentValue = currentValues[key];
+    if (!currentValue) {
+      dispatchPath({ type: "NO_URL_CHECK", payload: "" });
+      return;
+    }
+    if (initialLoadComplete && (hasUserChangedField.current || !routeId) && prevValueRef.current !== currentValue && !isOverride) {
+      const path2 = config.pattern ? `${config.pattern}/${currentValue}` : `${currentValue}`;
+      if (currentValue === initialValues[key]) {
+        dispatchPath({ type: "NO_URL_CHECK", payload: path2 });
+      } else {
+        dispatchPath({ type: "DEFAULT", payload: path2 });
       }
-    }, 500),
-    [config?.default, config?.pattern, initialValues, isOverride, initialLoadComplete, routeId]
-  );
+      prevValueRef.current = currentValue;
+    }
+  }, 500), [config?.default, config?.pattern, initialValues, isOverride, initialLoadComplete, routeId]);
   React.useEffect(() => {
-    if (!initialLoadComplete) return;
     const key = config?.default;
     if (!key) return;
     const currentValue = values[key];
     const initialValue = initialValues[key];
+    if (currentValue && !isOverride) {
+      const path2 = config.pattern ? `${config.pattern}/${currentValue}` : `${currentValue}`;
+      onChange("webatlas_path", path2);
+    }
+    if (!initialLoadComplete) return;
     if (currentValue !== initialValue) {
       hasUserChangedField.current = true;
     }
@@ -3838,9 +3857,14 @@ const Alias = ({ config }) => {
     } catch (err) {
       console.log(err);
     } finally {
+      setUrlIsValid(null);
       setValidationState("done");
     }
   }
+  if (!initialLoadComplete) return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage({
+    id: getTranslation("components.CMEditViewAside.loading"),
+    defaultMessage: "Loading..."
+  }) });
   return /* @__PURE__ */ jsxRuntime.jsx(
     designSystem.Box,
     {
@@ -3855,28 +3879,53 @@ const Alias = ({ config }) => {
           gap: 4,
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { hint: !initialValues.id && !config.default ? "[id] will be replaced with the entry ID" : "", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { children: [
-                  "URL",
-                  /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { description: "The following characters are valid: A-Z, a-z, 0-9, /, -, _, $, ., +, !, *, ', (, )" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Field.Input,
-                  {
-                    id: "url-input",
-                    value: path.value,
-                    placeholder: config.default ? `Edit the "${config.default}" field to generate a URL` : `${layout.list.settings.displayName?.toLowerCase()}/[id]`,
-                    onChange: (e) => dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: e.target.value }),
-                    disabled: !isOverride,
-                    onBlur: (e) => {
-                      if (e.target.value === path.prevValue) return;
-                      dispatchPath({ type: "DEFAULT", payload: e.target.value });
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+              !routeId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", marginBottom: 2, children: formatMessage({
+                  id: getTranslation("components.CMEditViewAside.alias.newRouteInfo"),
+                  defaultMessage: "A new URL route will be created upon saving this entry."
+                }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 2, paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(URLInfo, { validationState, replacement }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.Field.Root,
+                {
+                  hint: formatMessage({
+                    id: getTranslation("components.CMEditViewAside.alias.urlInput.start"),
+                    defaultMessage: "Edit the"
+                  }) + ' "' + config.default + '" ' + formatMessage({
+                    id: getTranslation("components.CMEditViewAside.alias.urlInput.end"),
+                    defaultMessage: "field to generate a URL"
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { children: [
+                      formatMessage({
+                        id: getTranslation("components.CMEditViewAside.alias.urlInput.label"),
+                        defaultMessage: "URL"
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { description: formatMessage({
+                        id: getTranslation("components.CMEditViewAside.alias.urlInput.tooltip"),
+                        defaultMessage: "The following characters are valid: A-Z, a-z, 0-9, /, -, _, $, ., +, !, *, ', (, )"
+                      }) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Field.Input,
+                      {
+                        id: "url-input",
+                        value: path.value,
+                        onChange: (e) => dispatchPath({ type: "NO_TRANSFORM_AND_CHECK", payload: e.target.value }),
+                        disabled: !isOverride,
+                        onBlur: (e) => {
+                          if (e.target.value === path.prevValue) return;
+                          dispatchPath({ type: "DEFAULT", payload: e.target.value });
+                        },
+                        style: { outline: urlIsValid !== null ? urlIsValid === "valid" ? "1px solid #5cb176" : "1px solid #ee5e52" : void 0 }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(URLInfo, { validationState, replacement, setUrlStatus: setUrlIsValid }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 designSystem.Flex,
                 {
@@ -3888,7 +3937,10 @@ const Alias = ({ config }) => {
                       id: "override-url",
                       checked: isOverride,
                       onCheckedChange: () => setIsOverride((prev) => !prev),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: "Override generated URL" })
+                      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage({
+                        id: getTranslation("components.CMEditViewAside.alias.overrideCheckbox"),
+                        defaultMessage: "Override automatic URL generation"
+                      }) })
                     }
                   )
                 }
@@ -3899,8 +3951,14 @@ const Alias = ({ config }) => {
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
                 designSystem.Field.Root,
                 {
-                  hint: "Permanent UID path, cannot be changed.",
-                  label: "UID path",
+                  hint: formatMessage({
+                    id: getTranslation("components.CMEditViewAside.alias.uidRoute.hint"),
+                    defaultMessage: "Permanent UID route, cannot be changed"
+                  }),
+                  label: formatMessage({
+                    id: getTranslation("components.CMEditViewAside.alias.uidRoute.label"),
+                    defaultMessage: "UID route"
+                  }),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, {}),
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3917,8 +3975,14 @@ const Alias = ({ config }) => {
               /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
                 designSystem.Field.Root,
                 {
-                  hint: "Permanent DocumentID path, cannot be changed.",
-                  label: "DocumentID path",
+                  hint: formatMessage({
+                    id: getTranslation("components.CMEditViewAside.alias.documentIdRoute.hint"),
+                    defaultMessage: "Permanent Document ID route, cannot be changed"
+                  }),
+                  label: formatMessage({
+                    id: getTranslation("components.CMEditViewAside.alias.documentIdRoute.label"),
+                    defaultMessage: "Document ID route"
+                  }),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, {}),
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3947,6 +4011,7 @@ const CMEditViewAside = () => {
   const [isAllowedContentType, setIsAllowedContentType] = React.useState(false);
   const [isActiveContentType, setIsActiveContentType] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(true);
+  const { formatMessage } = reactIntl.useIntl();
   React.useEffect(() => {
     if (!config) return;
     const contentType = contentTypes?.find((ct) => ct.uid === model);
@@ -3978,17 +4043,43 @@ const CMEditViewAside = () => {
       }
     });
   }, []);
-  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: "Loading..." });
+  if (isLoading || !config) return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage({
+    id: getTranslation("components.CMEditViewAside.loading"),
+    defaultMessage: "Loading..."
+  }) });
   if (!isAllowedContentType) return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { textColor: "neutral600", children: [
-    "This content type is not allowed for ",
-    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "WebAtlas" }),
-    ". If you wish to use it, please contact your administrator."
+    formatMessage({
+      id: getTranslation("components.CMEditViewAside.notAllowed.start"),
+      defaultMessage: "This content type is not allowed for"
+    }),
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: PLUGIN_NAME }),
+    ".",
+    " ",
+    formatMessage({
+      id: getTranslation("components.CMEditViewAside.notAllowed.end"),
+      defaultMessage: "If you wish to use it, please contact your administrator"
+    }),
+    "."
   ] });
   if (!isActiveContentType || !contentTypeConfig) return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { textColor: "neutral600", children: [
-    "This content type is not configured for ",
-    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "WebAtlas" }),
-    ". If you wish to use it, please configure it in the",
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { href: "/admin/settings/webatlas/configuration", marginLeft: 1, children: "settings" }),
+    formatMessage({
+      id: getTranslation("components.CMEditViewAside.notConfigured.start"),
+      defaultMessage: "This content type is not configured for"
+    }),
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: PLUGIN_NAME }),
+    ".",
+    " ",
+    formatMessage({
+      id: getTranslation("components.CMEditViewAside.notConfigured.middle"),
+      defaultMessage: "If you wish to use it, please configure it in the"
+    }),
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { href: "/admin/settings/webatlas/configuration", children: formatMessage({
+      id: getTranslation("components.CMEditViewAside.notConfigured.end"),
+      defaultMessage: "settings"
+    }) }),
     "."
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Alias, { config: contentTypeConfig }) });
@@ -4003,7 +4094,7 @@ const index = {
         defaultMessage: "Routes"
       },
       Component: async () => {
-        const component = await Promise.resolve().then(() => require("./index-kz3NL7uv.js"));
+        const component = await Promise.resolve().then(() => require("./index-DGb8ESH-.js"));
         return { default: component.default };
       },
       permissions: [
@@ -4022,7 +4113,7 @@ const index = {
         defaultMessage: "Navigation"
       },
       Component: async () => {
-        const component = await Promise.resolve().then(() => require("./index-B-ABW-o6.js"));
+        const component = await Promise.resolve().then(() => require("./index-B0XE_zRP.js"));
         return { default: component.default };
       },
       permissions: [
@@ -4051,7 +4142,7 @@ const index = {
         Component: async () => {
           return await Promise.resolve().then(() => require(
             /* webpackChunkName: "webatlas-settings-page" */
-            "./index-Cs_oxZfX.js"
+            "./index-BbM9Sn1t.js"
           ));
         },
         permissions: [
@@ -4080,7 +4171,7 @@ const index = {
     return Promise.all(
       locales.map(async (locale) => {
         try {
-          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("./en-B4KWt_jN.js")) }), `./translations/${locale}.json`, 3);
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/de.json": () => Promise.resolve().then(() => require("./de-4tL_cJTC.js")), "./translations/en.json": () => Promise.resolve().then(() => require("./en-Bg4z3fR7.js")) }), `./translations/${locale}.json`, 3);
           return { data, locale };
         } catch {
           return { data: {}, locale };
@@ -4089,11 +4180,13 @@ const index = {
     );
   }
 };
+exports.PLUGIN_NAME = PLUGIN_NAME;
 exports.Tooltip = Tooltip;
 exports.URLInfo = URLInfo;
 exports._extends = _extends;
 exports.debounce = debounce;
 exports.duplicateCheck = duplicateCheck;
+exports.getTranslation = getTranslation;
 exports.index = index;
 exports.transformToUrl = transformToUrl;
 exports.useAllContentTypes = useAllContentTypes;