npm - @contentstack/live-preview-utils - Versions diffs - 3.2.5 → 3.4.0 - Mend

@contentstack/live-preview-utils 3.2.5 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (214) hide show

package/dist/legacy/visualBuilder/components/fieldLabelWrapper.cjs CHANGED Viewed

@@ -48,25 +48,53 @@ var import_CslpError = require("./CslpError.cjs");
 var import_errorHandling = require("../utils/errorHandling.cjs");
 var import_postMessage = require("../utils/types/postMessage.types.cjs");
 var import_getEntryPermissionsCached = require("../utils/getEntryPermissionsCached.cjs");
+var import_icons2 = require("./icons/index.cjs");
+var import_Tooltip = require("./Tooltip.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 async function getFieldDisplayNames(fieldMetadata) {
   var _a;
   const result = await ((_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send(import_postMessage.VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata));
   return result;
 }
+async function getContentTypeName(contentTypeUid) {
+  var _a;
+  try {
+    const result = await ((_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send(import_postMessage.VisualBuilderPostMessageEvents.GET_CONTENT_TYPE_NAME, {
+      content_type_uid: contentTypeUid
+    }));
+    return result == null ? void 0 : result.contentTypeName;
+  } catch (e) {
+    console.warn("[getFieldLabelWrapper] Error getting content type name", e);
+    return "";
+  }
+}
+async function getReferenceParentMap() {
+  var _a;
+  try {
+    const result = await ((_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send(import_postMessage.VisualBuilderPostMessageEvents.REFERENCE_MAP, {})) ?? {};
+    return result;
+  } catch (e) {
+    console.warn("[getFieldLabelWrapper] Error getting reference parent map", e);
+    return {};
+  }
+}
 function FieldLabelWrapperComponent(props) {
   const { eventDetails } = props;
   const [currentField, setCurrentField] = (0, import_compat.useState)({
     text: "",
+    contentTypeName: "",
     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretIcon, {}),
     prefixIcon: null,
     disabled: false,
-    isVariant: false
+    isVariant: false,
+    isReference: false,
+    referenceFieldName: "",
+    parentContentTypeName: ""
   });
   const [displayNames, setDisplayNames] = (0, import_compat.useState)(
     {}
   );
-  const [displayNamesLoading, setDisplayNamesLoading] = (0, import_compat.useState)(true);
+  const [dataLoading, setDataLoading] = (0, import_compat.useState)(true);
   const [error, setError] = (0, import_compat.useState)(false);
   const [isDropdownOpen, setIsDropdownOpen] = (0, import_compat.useState)(false);
   function calculateTopOffset(index) {
@@ -77,7 +105,7 @@ function FieldLabelWrapperComponent(props) {
   (0, import_compat.useEffect)(() => {
     const fetchData = async () => {
       var _a, _b;
-      setDisplayNamesLoading(true);
+      setDataLoading(true);
       const allPaths = (0, import_lodash_es.uniqBy)(
         [
           props.fieldMetadata,
@@ -87,13 +115,37 @@ function FieldLabelWrapperComponent(props) {
         ],
         "cslpValue"
       );
-      const displayNames2 = await getFieldDisplayNames(allPaths);
-      const fieldSchema = await import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
-        props.fieldMetadata.content_type_uid,
-        props.fieldMetadata.fieldPath
-      );
+      const [displayNames2, fieldSchema, contentTypeName, referenceParentMap] = await Promise.all([
+        getFieldDisplayNames(allPaths),
+        import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
+          props.fieldMetadata.content_type_uid,
+          props.fieldMetadata.fieldPath
+        ),
+        getContentTypeName(
+          props.fieldMetadata.content_type_uid
+        ),
+        getReferenceParentMap()
+      ]);
+      const entryUid = props.fieldMetadata.entry_uid;
+      const referenceData = referenceParentMap[entryUid];
+      const isReference = !!referenceData;
+      let referenceFieldName = referenceData ? referenceData[0].referenceFieldName : "";
+      let parentContentTypeName = referenceData ? referenceData[0].contentTypeTitle : "";
+      if (isReference) {
+        const domAncestor = eventDetails.editableElement.closest(`[data-cslp]:not([data-cslp^="${props.fieldMetadata.content_type_uid}"])`);
+        if (domAncestor) {
+          const domAncestorCslp = domAncestor.getAttribute("data-cslp");
+          const domAncestorDetails = (0, import_cslp.extractDetailsFromCslp)(domAncestorCslp);
+          const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;
+          const domAncestorContentParent = referenceData == null ? void 0 : referenceData.find((data) => data.contentTypeUid === domAncestorContentTypeUid);
+          if (domAncestorContentParent) {
+            referenceFieldName = domAncestorContentParent.referenceFieldName;
+            parentContentTypeName = domAncestorContentParent.contentTypeTitle;
+          }
+        }
+      }
       if ((0, import_errorHandling.hasPostMessageError)(displayNames2) || !fieldSchema) {
-        setDisplayNamesLoading(false);
+        setDataLoading(false);
         setError(true);
         return;
       }
@@ -112,6 +164,7 @@ function FieldLabelWrapperComponent(props) {
       const isVariant = props.fieldMetadata.variant ? true : false;
       setCurrentField({
         text: currentFieldDisplayName,
+        contentTypeName: contentTypeName ?? "",
         icon: fieldDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
@@ -122,18 +175,25 @@ function FieldLabelWrapperComponent(props) {
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.InfoIcon, {})
           }
         ) : hasParentPaths ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}),
+        isReference,
         prefixIcon: (0, import_generateCustomCursor.getFieldIcon)(fieldSchema),
         disabled: fieldDisabled,
+        referenceFieldName,
+        parentContentTypeName,
         isVariant
       });
       if (displayNames2) {
         setDisplayNames(displayNames2);
       }
       if (((_b = Object.keys(displayNames2 || {})) == null ? void 0 : _b.length) === allPaths.length) {
-        setDisplayNamesLoading(false);
+        setDataLoading(false);
       }
     };
-    fetchData();
+    try {
+      fetchData();
+    } catch (e) {
+      console.warn("[getFieldLabelWrapper] Error fetching field label data", e);
+    }
   }, [props]);
   const onParentPathClick = (cslp) => {
     const parentElement = props.getParentEditableElement(cslp);
@@ -144,7 +204,7 @@ function FieldLabelWrapperComponent(props) {
   function getCurrentFieldIcon() {
     if (error) {
       return null;
-    } else if (displayNamesLoading) {
+    } else if (dataLoading) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.LoadingIcon, {});
     } else {
       return currentField.icon;
@@ -157,7 +217,7 @@ function FieldLabelWrapperComponent(props) {
         "visual-builder__focused-toolbar__field-label-container",
         (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__field-label-container"]
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.ToolbarTooltip, { data: { contentTypeName: currentField.parentContentTypeName, referenceFieldName: currentField.referenceFieldName }, disabled: !currentField.isReference || isDropdownOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
           className: (0, import_classnames.default)(
@@ -176,6 +236,7 @@ function FieldLabelWrapperComponent(props) {
           ),
           onClick: () => setIsDropdownOpen((prev) => !prev),
           "data-testid": "visual-builder__focused-toolbar__field-label-wrapper",
+          "data-hovered-cslp": props.fieldMetadata.cslpValue,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               "button",
@@ -188,8 +249,47 @@ function FieldLabelWrapperComponent(props) {
                   (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button-loader"],
                   error && (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button-error"]
                 ),
-                disabled: displayNamesLoading,
+                disabled: dataLoading,
                 children: [
+                  currentField.isReference && !dataLoading && !error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      className: (0, import_classnames.default)(
+                        "visual-builder__reference-icon-container",
+                        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__reference-icon-container"]
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "div",
+                          {
+                            className: (0, import_classnames.default)(
+                              "visual-builder__field-icon",
+                              (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__field-icon"]
+                            ),
+                            dangerouslySetInnerHTML: {
+                              __html: import_generateCustomCursor.FieldTypeIconsMap.reference
+                            },
+                            "data-testid": "visual-builder__field-icon-caret"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretRightIcon, {})
+                      ]
+                    }
+                  ) : null,
+                  currentField.contentTypeName && !dataLoading && !error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.ContentTypeIcon, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: (0, import_classnames.default)(
+                          "visual-builder__focused-toolbar__text",
+                          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__text"]
+                        ),
+                        "data-testid": "visual-builder__focused-toolbar__ct-name",
+                        children: currentField.contentTypeName + " : "
+                      }
+                    )
+                  ] }) : null,
                   currentField.prefixIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "div",
                     {
@@ -238,7 +338,7 @@ function FieldLabelWrapperComponent(props) {
             ))
           ]
         }
-      )
+      ) })
     }
   );
 }

package/dist/legacy/visualBuilder/components/fieldLabelWrapper.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/visualBuilder/components/fieldLabelWrapper.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { CaretIcon, InfoIcon } from \"./icons\";\nimport { LoadingIcon } from \"./icons/loading\";\nimport { getFieldIcon } from \"../generators/generateCustomCursor\";\nimport { uniqBy } from \"lodash-es\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { CslpError } from \"./CslpError\";\nimport { hasPostMessageError } from \"../utils/errorHandling\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { getEntryPermissionsCached } from \"../utils/getEntryPermissionsCached\";\n\nasync function getFieldDisplayNames(fieldMetadata: CslpData[]) {\n const result = await visualBuilderPostMessage?.send<{\n [k: string]: string;\n }>(VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);\n return result;\n}\n\ninterface FieldLabelWrapperProps {\n fieldMetadata: CslpData;\n eventDetails: VisualBuilderCslpEventDetails;\n parentPaths: string[];\n getParentEditableElement: (cslp: string) => HTMLElement \| null;\n}\n\ninterface ICurrentField {\n text: string;\n icon: JSX.Element;\n prefixIcon: any;\n disabled: boolean;\n isVariant: boolean;\n}\n\nfunction FieldLabelWrapperComponent(\n props: FieldLabelWrapperProps\n): JSX.Element {\n const { eventDetails } = props;\n const [currentField, setCurrentField] = useState<ICurrentField>({\n text: \"\",\n icon: <CaretIcon />,\n prefixIcon: null,\n disabled: false,\n isVariant: false,\n });\n const [displayNames, setDisplayNames] = useState<Record<string, string>>(\n {}\n );\n const [displayNamesLoading, setDisplayNamesLoading] = useState(true);\n const [error, setError] = useState(false);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n function calculateTopOffset(index: number) {\n const height = -30; // from bottom\n const offset = (index + 1) * height;\n return `${offset}px`;\n }\n\n useEffect(() => {\n const fetchData = async () => {\n setDisplayNamesLoading(true);\n const allPaths = uniqBy(\n [\n props.fieldMetadata,\n ...props.parentPaths.map((path) => {\n return extractDetailsFromCslp(path);\n }),\n ],\n \"cslpValue\"\n );\n const displayNames = await getFieldDisplayNames(allPaths);\n const fieldSchema = await FieldSchemaMap.getFieldSchema(\n props.fieldMetadata.content_type_uid,\n props.fieldMetadata.fieldPath\n );\n\n if (hasPostMessageError(displayNames) \|\| !fieldSchema) {\n setDisplayNamesLoading(false);\n setError(true);\n\n return;\n }\n\n const entryPermissions = await getEntryPermissionsCached({\n entryUid: props.fieldMetadata.entry_uid,\n contentTypeUid: props.fieldMetadata.content_type_uid,\n locale: props.fieldMetadata.locale,\n });\n const { isDisabled: fieldDisabled, reason } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n entryPermissions\n );\n\n const currentFieldDisplayName =\n displayNames?.[props.fieldMetadata.cslpValue] ??\n fieldSchema.display_name;\n\n const hasParentPaths = !!props?.parentPaths?.length;\n const isVariant = props.fieldMetadata.variant ? true : false;\n\n setCurrentField({\n text: currentFieldDisplayName,\n icon: fieldDisabled ? (\n <div\n className={classNames(\n visualBuilderStyles()[\n \"visual-builder__tooltip--persistent\"\n ]\n )}\n data-tooltip={reason}\n >\n <InfoIcon />\n </div>\n ) : hasParentPaths ? (\n <CaretIcon />\n ) : (\n <></>\n ),\n prefixIcon: getFieldIcon(fieldSchema),\n disabled: fieldDisabled,\n isVariant: isVariant,\n });\n\n if (displayNames) {\n setDisplayNames(displayNames);\n }\n if (Object.keys(displayNames \|\| {})?.length === allPaths.length) {\n setDisplayNamesLoading(false);\n }\n };\n\n fetchData();\n }, [props]);\n\n const onParentPathClick = (cslp: string) => {\n const parentElement = props.getParentEditableElement(cslp);\n if (parentElement) {\n // emulate clicking on the parent element\n parentElement.click();\n }\n };\n\n function getCurrentFieldIcon() {\n if (error) {\n return null;\n } else if (displayNamesLoading) {\n return <LoadingIcon />;\n } else {\n return currentField.icon;\n }\n }\n\n return (\n <div\n className={classNames(\n \"visual-builder__focused-toolbar__field-label-container\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__field-label-container\"\n ]\n )}\n >\n <div\n className={classNames(\n \"visual-builder__focused-toolbar__field-label-wrapper\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__field-label-wrapper\"\n ],\n {\n \"visual-builder__focused-toolbar--field-disabled\":\n currentField.disabled,\n },\n {\n [visualBuilderStyles()[\n \"visual-builder__focused-toolbar--field-disabled\"\n ]]: currentField.disabled,\n },\n {\n \"field-label-dropdown-open\": isDropdownOpen,\n [visualBuilderStyles()[\"field-label-dropdown-open\"]]:\n isDropdownOpen,\n }\n )}\n onClick={() => setIsDropdownOpen((prev) => !prev)}\n data-testid=\"visual-builder__focused-toolbar__field-label-wrapper\"\n >\n <button\n className={classNames(\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field visual-builder__button visual-builder__button--primary visual-builder__button-loader\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field\"\n ],\n visualBuilderStyles()[\"visual-builder__button\"],\n visualBuilderStyles()[\n \"visual-builder__button--primary\"\n ],\n visualBuilderStyles()[\"visual-builder__button-loader\"],\n error &&\n visualBuilderStyles()[\n \"visual-builder__button-error\"\n ]\n )}\n disabled={displayNamesLoading}\n >\n {currentField.prefixIcon ? (\n <div\n className={classNames(\n \"visual-builder__field-icon\",\n visualBuilderStyles()[\n \"visual-builder__field-icon\"\n ]\n )}\n dangerouslySetInnerHTML={{\n __html: currentField.prefixIcon,\n }}\n data-testid=\"visual-builder__field-icon\"\n />\n ) : null}\n {currentField.text ? (\n <div\n className={classNames(\n \"visual-builder__focused-toolbar__text\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__text\"\n ]\n )}\n data-testid=\"visual-builder__focused-toolbar__text\"\n >\n {currentField.text}\n </div>\n ) : null}\n {getCurrentFieldIcon()}\n {error ? <CslpError /> : null}\n </button>\n {props.parentPaths.map((path, index) => (\n <button\n key={path}\n className={classNames(\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field visual-builder__button visual-builder__button--secondary visual-builder__focused-toolbar__text\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\"\n ],\n visualBuilderStyles()[\"visual-builder__button\"],\n visualBuilderStyles()[\n \"visual-builder__button--secondary\"\n ],\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__text\"\n ]\n )}\n data-target-cslp={path}\n style={{ top: calculateTopOffset(index) }}\n onClick={() => onParentPathClick(path)}\n >\n {displayNames[path]}\n </button>\n ))}\n </div>\n </div>\n );\n}\n\nexport default FieldLabelWrapperComponent;\n"],"mappings":"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","names":["visualBuilderPostMessage","displayNames","classNames"]}
1	+ {"version":3,"sources":["../../../../src/visualBuilder/components/fieldLabelWrapper.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { useEffect, useState } from \"preact/compat\";\nimport { extractDetailsFromCslp } from \"../../cslp\";\nimport { CslpData } from \"../../cslp/types/cslp.types\";\nimport { VisualBuilderCslpEventDetails } from \"../types/visualBuilder.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { isFieldDisabled } from \"../utils/isFieldDisabled\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { CaretIcon, CaretRightIcon, InfoIcon } from \"./icons\";\nimport { LoadingIcon } from \"./icons/loading\";\nimport { FieldTypeIconsMap, getFieldIcon } from \"../generators/generateCustomCursor\";\nimport { uniqBy } from \"lodash-es\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { CslpError } from \"./CslpError\";\nimport { hasPostMessageError } from \"../utils/errorHandling\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { getEntryPermissionsCached } from \"../utils/getEntryPermissionsCached\";\nimport { ContentTypeIcon } from \"./icons\";\nimport { ToolbarTooltip } from \"./Tooltip\";\n\ninterface ReferenceParentMap {\n [entryUid: string]: {\n contentTypeUid: string;\n contentTypeTitle: string;\n referenceFieldName: string;\n }[]\n}\n\nasync function getFieldDisplayNames(fieldMetadata: CslpData[]) {\n const result = await visualBuilderPostMessage?.send<{\n [k: string]: string;\n }>(VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);\n return result;\n}\n\nasync function getContentTypeName(contentTypeUid: string) {\n try {\n const result = await visualBuilderPostMessage?.send<{\n contentTypeName: string;\n }>(VisualBuilderPostMessageEvents.GET_CONTENT_TYPE_NAME, {\n content_type_uid: contentTypeUid,\n });\n return result?.contentTypeName;\n } catch(e) {\n console.warn(\"[getFieldLabelWrapper] Error getting content type name\", e);\n return \"\";\n }\n}\n\nasync function getReferenceParentMap() {\n try {\n const result = await visualBuilderPostMessage?.send<ReferenceParentMap>(VisualBuilderPostMessageEvents.REFERENCE_MAP, {}) ?? {};\n return result;\n } catch(e) {\n console.warn(\"[getFieldLabelWrapper] Error getting reference parent map\", e);\n return {};\n }\n \n}\n\ninterface FieldLabelWrapperProps {\n fieldMetadata: CslpData;\n eventDetails: VisualBuilderCslpEventDetails;\n parentPaths: string[];\n getParentEditableElement: (cslp: string) => HTMLElement \| null;\n}\n\ninterface ICurrentField {\n text: string;\n contentTypeName: string;\n icon: JSX.Element;\n prefixIcon: any;\n disabled: boolean;\n isVariant: boolean;\n isReference: boolean;\n referenceFieldName: string;\n parentContentTypeName: string;\n}\n\nfunction FieldLabelWrapperComponent(\n props: FieldLabelWrapperProps\n): JSX.Element {\n const { eventDetails } = props;\n const [currentField, setCurrentField] = useState<ICurrentField>({\n text: \"\",\n contentTypeName: \"\",\n icon: <CaretIcon />,\n prefixIcon: null,\n disabled: false,\n isVariant: false,\n isReference: false,\n referenceFieldName: \"\",\n parentContentTypeName: \"\",\n });\n const [displayNames, setDisplayNames] = useState<Record<string, string>>(\n {}\n );\n const [dataLoading, setDataLoading] = useState(true);\n const [error, setError] = useState(false);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n function calculateTopOffset(index: number) {\n const height = -30; // from bottom\n const offset = (index + 1) * height;\n return `${offset}px`;\n }\n\n useEffect(() => {\n const fetchData = async () => {\n setDataLoading(true);\n const allPaths = uniqBy(\n [\n props.fieldMetadata,\n ...props.parentPaths.map((path) => {\n return extractDetailsFromCslp(path);\n }),\n ],\n \"cslpValue\"\n );\n const [displayNames, fieldSchema, contentTypeName, referenceParentMap] = await Promise.all([\n getFieldDisplayNames(allPaths),\n FieldSchemaMap.getFieldSchema(\n props.fieldMetadata.content_type_uid,\n props.fieldMetadata.fieldPath\n ),\n getContentTypeName(\n props.fieldMetadata.content_type_uid\n ),\n getReferenceParentMap()\n ]);\n const entryUid = props.fieldMetadata.entry_uid;\n \n const referenceData = referenceParentMap[entryUid];\n const isReference = !!referenceData;\n\n let referenceFieldName = referenceData ? referenceData[0].referenceFieldName : \"\";\n let parentContentTypeName = referenceData ? referenceData[0].contentTypeTitle : \"\";\n\n if(isReference) {\n const domAncestor = eventDetails.editableElement.closest(`[data-cslp]:not([data-cslp^=\"${props.fieldMetadata.content_type_uid}\"])`);\n if(domAncestor) {\n const domAncestorCslp = domAncestor.getAttribute(\"data-cslp\");\n const domAncestorDetails = extractDetailsFromCslp(domAncestorCslp!);\n const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;\n const domAncestorContentParent = referenceData?.find(data => data.contentTypeUid === domAncestorContentTypeUid);\n if(domAncestorContentParent) {\n referenceFieldName = domAncestorContentParent.referenceFieldName;\n parentContentTypeName = domAncestorContentParent.contentTypeTitle;\n }\n }\n }\n\n if (hasPostMessageError(displayNames) \|\| !fieldSchema) {\n setDataLoading(false);\n setError(true);\n\n return;\n }\n\n const entryPermissions = await getEntryPermissionsCached({\n entryUid: props.fieldMetadata.entry_uid,\n contentTypeUid: props.fieldMetadata.content_type_uid,\n locale: props.fieldMetadata.locale,\n });\n const { isDisabled: fieldDisabled, reason } = isFieldDisabled(\n fieldSchema,\n eventDetails,\n entryPermissions\n );\n\n const currentFieldDisplayName =\n displayNames?.[props.fieldMetadata.cslpValue] ??\n fieldSchema.display_name;\n\n const hasParentPaths = !!props?.parentPaths?.length;\n const isVariant = props.fieldMetadata.variant ? true : false;\n\n setCurrentField({\n text: currentFieldDisplayName,\n contentTypeName: contentTypeName ?? \"\",\n icon: fieldDisabled ? (\n <div\n className={classNames(\n visualBuilderStyles()[\n \"visual-builder__tooltip--persistent\"\n ]\n )}\n data-tooltip={reason}\n >\n <InfoIcon />\n </div>\n ) : hasParentPaths ? (\n <CaretIcon />\n ) : (\n <></>\n ),\n isReference,\n prefixIcon: getFieldIcon(fieldSchema),\n disabled: fieldDisabled,\n referenceFieldName,\n parentContentTypeName,\n isVariant: isVariant,\n });\n\n if (displayNames) {\n setDisplayNames(displayNames);\n }\n if (Object.keys(displayNames \|\| {})?.length === allPaths.length) {\n setDataLoading(false);\n }\n };\n\n try {\n fetchData();\n } catch(e) {\n console.warn(\"[getFieldLabelWrapper] Error fetching field label data\", e);\n }\n }, [props]);\n\n const onParentPathClick = (cslp: string) => {\n const parentElement = props.getParentEditableElement(cslp);\n if (parentElement) {\n // emulate clicking on the parent element\n parentElement.click();\n }\n };\n\n function getCurrentFieldIcon() {\n if (error) {\n return null;\n } else if (dataLoading) {\n return <LoadingIcon />;\n } else {\n return currentField.icon;\n }\n }\n\n return (\n <div\n className={classNames(\n \"visual-builder__focused-toolbar__field-label-container\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__field-label-container\"\n ]\n )}\n >\n <ToolbarTooltip data={{contentTypeName: currentField.parentContentTypeName, referenceFieldName: currentField.referenceFieldName}} disabled={!currentField.isReference \|\| isDropdownOpen}>\n <div\n className={classNames(\n \"visual-builder__focused-toolbar__field-label-wrapper\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__field-label-wrapper\"\n ],\n {\n \"visual-builder__focused-toolbar--field-disabled\":\n currentField.disabled,\n },\n {\n [visualBuilderStyles()[\n \"visual-builder__focused-toolbar--field-disabled\"\n ]]: currentField.disabled,\n },\n {\n \"field-label-dropdown-open\": isDropdownOpen,\n [visualBuilderStyles()[\"field-label-dropdown-open\"]]:\n isDropdownOpen,\n }\n )}\n onClick={() => setIsDropdownOpen((prev) => !prev)}\n data-testid=\"visual-builder__focused-toolbar__field-label-wrapper\"\n data-hovered-cslp={props.fieldMetadata.cslpValue}\n >\n <button\n className={classNames(\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field visual-builder__button visual-builder__button--primary visual-builder__button-loader\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__field-label-wrapper__current-field\"\n ],\n visualBuilderStyles()[\"visual-builder__button\"],\n visualBuilderStyles()[\n \"visual-builder__button--primary\"\n ],\n visualBuilderStyles()[\"visual-builder__button-loader\"],\n error &&\n visualBuilderStyles()[\n \"visual-builder__button-error\"\n ]\n )}\n disabled={dataLoading}\n >\n {\n currentField.isReference && !dataLoading && !error ? \n <div \n className={classNames(\n \"visual-builder__reference-icon-container\",\n visualBuilderStyles()[\"visual-builder__reference-icon-container\"]\n )}\n >\n <div\n className={classNames(\n \"visual-builder__field-icon\",\n visualBuilderStyles()[\n \"visual-builder__field-icon\"\n ]\n )}\n dangerouslySetInnerHTML={{\n __html: FieldTypeIconsMap.reference,\n }}\n data-testid=\"visual-builder__field-icon-caret\"\n />\n <CaretRightIcon />\n </div> : null\n }\n {\n currentField.contentTypeName && !dataLoading && !error ?\n <>\n <ContentTypeIcon />\n <div\n className={classNames(\n \"visual-builder__focused-toolbar__text\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__text\"\n ]\n )}\n data-testid=\"visual-builder__focused-toolbar__ct-name\"\n >\n {currentField.contentTypeName + \" : \"}\n </div>\n </> : null\n }\n {currentField.prefixIcon ? (\n <div\n className={classNames(\n \"visual-builder__field-icon\",\n visualBuilderStyles()[\n \"visual-builder__field-icon\"\n ]\n )}\n dangerouslySetInnerHTML={{\n __html: currentField.prefixIcon,\n }}\n data-testid=\"visual-builder__field-icon\"\n />\n ) : null}\n {currentField.text ? (\n <div\n className={classNames(\n \"visual-builder__focused-toolbar__text\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__text\"\n ]\n )}\n data-testid=\"visual-builder__focused-toolbar__text\"\n >\n {currentField.text}\n </div>\n ) : null}\n {getCurrentFieldIcon()}\n {error ? <CslpError /> : null}\n </button>\n {props.parentPaths.map((path, index) => (\n <button\n key={path}\n className={classNames(\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field visual-builder__button visual-builder__button--secondary visual-builder__focused-toolbar__text\",\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__field-label-wrapper__parent-field\"\n ],\n visualBuilderStyles()[\"visual-builder__button\"],\n visualBuilderStyles()[\n \"visual-builder__button--secondary\"\n ],\n visualBuilderStyles()[\n \"visual-builder__focused-toolbar__text\"\n ]\n )}\n data-target-cslp={path}\n style={{ top: calculateTopOffset(index) }}\n onClick={() => onParentPathClick(path)}\n >\n {displayNames[path]}\n </button>\n ))}\n </div>\n </ToolbarTooltip>\n </div>\n );\n}\n\nexport default FieldLabelWrapperComponent;\n"],"mappings":"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","names":["import_icons","visualBuilderPostMessage","displayNames","classNames"]}

package/dist/legacy/visualBuilder/components/fieldLabelWrapper.js CHANGED Viewed

@@ -7,34 +7,62 @@ import { extractDetailsFromCslp } from "../../cslp/index.js";
 import { FieldSchemaMap } from "../utils/fieldSchemaMap.js";
 import { isFieldDisabled } from "../utils/isFieldDisabled.js";
 import visualBuilderPostMessage from "../utils/visualBuilderPostMessage.js";
-import { CaretIcon, InfoIcon } from "./icons/index.js";
+import { CaretIcon, CaretRightIcon, InfoIcon } from "./icons/index.js";
 import { LoadingIcon } from "./icons/loading.js";
-import { getFieldIcon } from "../generators/generateCustomCursor.js";
+import { FieldTypeIconsMap, getFieldIcon } from "../generators/generateCustomCursor.js";
 import { uniqBy } from "lodash-es";
 import { visualBuilderStyles } from "../visualBuilder.style.js";
 import { CslpError } from "./CslpError.js";
 import { hasPostMessageError } from "../utils/errorHandling.js";
 import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types.js";
 import { getEntryPermissionsCached } from "../utils/getEntryPermissionsCached.js";
+import { ContentTypeIcon } from "./icons/index.js";
+import { ToolbarTooltip } from "./Tooltip.js";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 async function getFieldDisplayNames(fieldMetadata) {
   var _a;
   const result = await ((_a = visualBuilderPostMessage) == null ? void 0 : _a.send(VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata));
   return result;
 }
+async function getContentTypeName(contentTypeUid) {
+  var _a;
+  try {
+    const result = await ((_a = visualBuilderPostMessage) == null ? void 0 : _a.send(VisualBuilderPostMessageEvents.GET_CONTENT_TYPE_NAME, {
+      content_type_uid: contentTypeUid
+    }));
+    return result == null ? void 0 : result.contentTypeName;
+  } catch (e) {
+    console.warn("[getFieldLabelWrapper] Error getting content type name", e);
+    return "";
+  }
+}
+async function getReferenceParentMap() {
+  var _a;
+  try {
+    const result = await ((_a = visualBuilderPostMessage) == null ? void 0 : _a.send(VisualBuilderPostMessageEvents.REFERENCE_MAP, {})) ?? {};
+    return result;
+  } catch (e) {
+    console.warn("[getFieldLabelWrapper] Error getting reference parent map", e);
+    return {};
+  }
+}
 function FieldLabelWrapperComponent(props) {
   const { eventDetails } = props;
   const [currentField, setCurrentField] = useState({
     text: "",
+    contentTypeName: "",
     icon: /* @__PURE__ */ jsx(CaretIcon, {}),
     prefixIcon: null,
     disabled: false,
-    isVariant: false
+    isVariant: false,
+    isReference: false,
+    referenceFieldName: "",
+    parentContentTypeName: ""
   });
   const [displayNames, setDisplayNames] = useState(
     {}
   );
-  const [displayNamesLoading, setDisplayNamesLoading] = useState(true);
+  const [dataLoading, setDataLoading] = useState(true);
   const [error, setError] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   function calculateTopOffset(index) {
@@ -45,7 +73,7 @@ function FieldLabelWrapperComponent(props) {
   useEffect(() => {
     const fetchData = async () => {
       var _a, _b;
-      setDisplayNamesLoading(true);
+      setDataLoading(true);
       const allPaths = uniqBy(
         [
           props.fieldMetadata,
@@ -55,13 +83,37 @@ function FieldLabelWrapperComponent(props) {
         ],
         "cslpValue"
       );
-      const displayNames2 = await getFieldDisplayNames(allPaths);
-      const fieldSchema = await FieldSchemaMap.getFieldSchema(
-        props.fieldMetadata.content_type_uid,
-        props.fieldMetadata.fieldPath
-      );
+      const [displayNames2, fieldSchema, contentTypeName, referenceParentMap] = await Promise.all([
+        getFieldDisplayNames(allPaths),
+        FieldSchemaMap.getFieldSchema(
+          props.fieldMetadata.content_type_uid,
+          props.fieldMetadata.fieldPath
+        ),
+        getContentTypeName(
+          props.fieldMetadata.content_type_uid
+        ),
+        getReferenceParentMap()
+      ]);
+      const entryUid = props.fieldMetadata.entry_uid;
+      const referenceData = referenceParentMap[entryUid];
+      const isReference = !!referenceData;
+      let referenceFieldName = referenceData ? referenceData[0].referenceFieldName : "";
+      let parentContentTypeName = referenceData ? referenceData[0].contentTypeTitle : "";
+      if (isReference) {
+        const domAncestor = eventDetails.editableElement.closest(`[data-cslp]:not([data-cslp^="${props.fieldMetadata.content_type_uid}"])`);
+        if (domAncestor) {
+          const domAncestorCslp = domAncestor.getAttribute("data-cslp");
+          const domAncestorDetails = extractDetailsFromCslp(domAncestorCslp);
+          const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;
+          const domAncestorContentParent = referenceData == null ? void 0 : referenceData.find((data) => data.contentTypeUid === domAncestorContentTypeUid);
+          if (domAncestorContentParent) {
+            referenceFieldName = domAncestorContentParent.referenceFieldName;
+            parentContentTypeName = domAncestorContentParent.contentTypeTitle;
+          }
+        }
+      }
       if (hasPostMessageError(displayNames2) || !fieldSchema) {
-        setDisplayNamesLoading(false);
+        setDataLoading(false);
         setError(true);
         return;
       }
@@ -80,6 +132,7 @@ function FieldLabelWrapperComponent(props) {
       const isVariant = props.fieldMetadata.variant ? true : false;
       setCurrentField({
         text: currentFieldDisplayName,
+        contentTypeName: contentTypeName ?? "",
         icon: fieldDisabled ? /* @__PURE__ */ jsx(
           "div",
           {
@@ -90,18 +143,25 @@ function FieldLabelWrapperComponent(props) {
             children: /* @__PURE__ */ jsx(InfoIcon, {})
           }
         ) : hasParentPaths ? /* @__PURE__ */ jsx(CaretIcon, {}) : /* @__PURE__ */ jsx(Fragment, {}),
+        isReference,
         prefixIcon: getFieldIcon(fieldSchema),
         disabled: fieldDisabled,
+        referenceFieldName,
+        parentContentTypeName,
         isVariant
       });
       if (displayNames2) {
         setDisplayNames(displayNames2);
       }
       if (((_b = Object.keys(displayNames2 || {})) == null ? void 0 : _b.length) === allPaths.length) {
-        setDisplayNamesLoading(false);
+        setDataLoading(false);
       }
     };
-    fetchData();
+    try {
+      fetchData();
+    } catch (e) {
+      console.warn("[getFieldLabelWrapper] Error fetching field label data", e);
+    }
   }, [props]);
   const onParentPathClick = (cslp) => {
     const parentElement = props.getParentEditableElement(cslp);
@@ -112,7 +172,7 @@ function FieldLabelWrapperComponent(props) {
   function getCurrentFieldIcon() {
     if (error) {
       return null;
-    } else if (displayNamesLoading) {
+    } else if (dataLoading) {
       return /* @__PURE__ */ jsx(LoadingIcon, {});
     } else {
       return currentField.icon;
@@ -125,7 +185,7 @@ function FieldLabelWrapperComponent(props) {
         "visual-builder__focused-toolbar__field-label-container",
         visualBuilderStyles()["visual-builder__focused-toolbar__field-label-container"]
       ),
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(ToolbarTooltip, { data: { contentTypeName: currentField.parentContentTypeName, referenceFieldName: currentField.referenceFieldName }, disabled: !currentField.isReference || isDropdownOpen, children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: classNames(
@@ -144,6 +204,7 @@ function FieldLabelWrapperComponent(props) {
           ),
           onClick: () => setIsDropdownOpen((prev) => !prev),
           "data-testid": "visual-builder__focused-toolbar__field-label-wrapper",
+          "data-hovered-cslp": props.fieldMetadata.cslpValue,
           children: [
             /* @__PURE__ */ jsxs(
               "button",
@@ -156,8 +217,47 @@ function FieldLabelWrapperComponent(props) {
                   visualBuilderStyles()["visual-builder__button-loader"],
                   error && visualBuilderStyles()["visual-builder__button-error"]
                 ),
-                disabled: displayNamesLoading,
+                disabled: dataLoading,
                 children: [
+                  currentField.isReference && !dataLoading && !error ? /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: classNames(
+                        "visual-builder__reference-icon-container",
+                        visualBuilderStyles()["visual-builder__reference-icon-container"]
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: classNames(
+                              "visual-builder__field-icon",
+                              visualBuilderStyles()["visual-builder__field-icon"]
+                            ),
+                            dangerouslySetInnerHTML: {
+                              __html: FieldTypeIconsMap.reference
+                            },
+                            "data-testid": "visual-builder__field-icon-caret"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(CaretRightIcon, {})
+                      ]
+                    }
+                  ) : null,
+                  currentField.contentTypeName && !dataLoading && !error ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(ContentTypeIcon, {}),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: classNames(
+                          "visual-builder__focused-toolbar__text",
+                          visualBuilderStyles()["visual-builder__focused-toolbar__text"]
+                        ),
+                        "data-testid": "visual-builder__focused-toolbar__ct-name",
+                        children: currentField.contentTypeName + " : "
+                      }
+                    )
+                  ] }) : null,
                   currentField.prefixIcon ? /* @__PURE__ */ jsx(
                     "div",
                     {
@@ -206,7 +306,7 @@ function FieldLabelWrapperComponent(props) {
             ))
           ]
         }
-      )
+      ) })
     }
   );
 }