@gooddata/sdk-ui-dashboard 11.58.0-alpha.0 → 11.58.0-alpha.2

package/esm/presentation/widget/insight/configuration/InsightDescriptionConfig/InsightDescription.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2022-2026 GoodData Corporation
 import { useCallback, useEffect, useState } from "react";
 import cx from "classnames";
@@ -7,6 +7,7 @@ import { RichTextWithTooltip } from "@gooddata/sdk-ui-kit";
 import { useDashboardSelector } from "../../../../../model/react/DashboardStoreProvider.js";
 import { useDashboardExecConfig } from "../../../../../model/react/useWidgetExecConfig.js";
 import { selectRestrictedRichTextReferences } from "../../../../../model/store/unavailableObjects/unavailableObjectsSelectors.js";
+import { RestrictedReferencesDialog, useHasRestrictedReferences, } from "../../../richText/RestrictedReferencesDialog.js";
 const richTextTooltipAlignPoints = [
     { align: "bl tl", offset: { x: 4, y: 5 } },
     { align: "tl bl", offset: { x: 4, y: -5 } },
@@ -16,7 +17,8 @@ export function InsightDescription({ description, setDescription, readOnly = fal
     const placeholder = intl.formatMessage({
         id: "configurationPanel.visualprops.descriptionPlaceholder",
     });
-    const [isRichTextEditing, setIsRichTextEditing] = useState(false);
+    // what the editor asked for; whether it is the question or the editor follows from the text
+    const [isEditingRequested, setIsEditingRequested] = useState(false);
     const [richTextValue, setRichTextValue] = useState(description);
     const execConfig = useDashboardExecConfig();
     const restrictedReferences = useDashboardSelector(selectRestrictedRichTextReferences);
@@ -26,17 +28,33 @@ export function InsightDescription({ description, setDescription, readOnly = fal
     const onChange = useCallback((value) => {
         setDescription(value.trim());
     }, [setDescription]);
-    const onDescriptionClick = useCallback(() => {
-        if (!isRichTextEditing && !readOnly) {
-            setIsRichTextEditing(true);
-        }
-    }, [isRichTextEditing, readOnly]);
-    const onDescriptionBlur = useCallback(() => {
-        setIsRichTextEditing(false);
-        onChange(richTextValue);
-    }, [onChange, richTextValue]);
+    const startEditing = useCallback(() => setIsEditingRequested(true), []);
     const onRichTextChange = useCallback((value) => {
         setRichTextValue(value);
     }, []);
-    return (_jsx("label", { className: "gd-input", children: _jsx("div", { className: cx("gd-input-field gd-rich-text-insight-description", { disabled: readOnly }), onClick: onDescriptionClick, onBlur: onDescriptionBlur, children: _jsx(RichTextWithTooltip, { value: richTextValue, renderMode: isRichTextEditing ? "edit" : "view", onChange: onRichTextChange, editRows: 4, editPlaceholder: placeholder, emptyElement: readOnly ? undefined : (_jsx("div", { className: "gd-editable-label-richtext-empty", children: placeholder })), showTooltip: isRichTextEditing, tooltipAlignPoints: richTextTooltipAlignPoints, referencesEnabled: true, LoadingComponent: LoadingComponent, filters: insightFilters, separators: separators, restrictedReferences: restrictedReferences, execConfig: execConfig }) }) }));
+    const hasRestrictedReferences = useHasRestrictedReferences(richTextValue);
+    const isRichTextEditing = isEditingRequested && !hasRestrictedReferences;
+    const isAskingToSanitize = isEditingRequested && hasRestrictedReferences;
+    // the rewrite is committed at once: it was confirmed, and it is not a keystroke. The editor was
+    // already asked for, so the description opens as soon as the text no longer holds a reference
+    const onSanitized = useCallback((sanitized) => {
+        setRichTextValue(sanitized);
+        onChange(sanitized);
+    }, [onChange]);
+    const stopEditing = useCallback(() => setIsEditingRequested(false), []);
+    const onDescriptionBlur = useCallback(() => {
+        // the confirmation takes the focus out of the description, and that is not the editor
+        // leaving it: nothing is decided yet
+        if (isAskingToSanitize) {
+            return;
+        }
+        setIsEditingRequested(false);
+        onChange(richTextValue);
+    }, [onChange, richTextValue, isAskingToSanitize]);
+    const onDescriptionClick = useCallback(() => {
+        if (!isEditingRequested && !readOnly) {
+            startEditing();
+        }
+    }, [isEditingRequested, readOnly, startEditing]);
+    return (_jsxs("label", { className: "gd-input", children: [_jsx("div", { className: cx("gd-input-field gd-rich-text-insight-description", { disabled: readOnly }), onClick: onDescriptionClick, onBlur: onDescriptionBlur, children: _jsx(RichTextWithTooltip, { value: richTextValue, renderMode: isRichTextEditing ? "edit" : "view", onChange: onRichTextChange, editRows: 4, editPlaceholder: placeholder, emptyElement: readOnly ? undefined : (_jsx("div", { className: "gd-editable-label-richtext-empty", children: placeholder })), showTooltip: isRichTextEditing, tooltipAlignPoints: richTextTooltipAlignPoints, referencesEnabled: true, LoadingComponent: LoadingComponent, filters: insightFilters, separators: separators, restrictedReferences: restrictedReferences, execConfig: execConfig }) }), isAskingToSanitize ? (_jsx(RestrictedReferencesDialog, { value: richTextValue, onSanitized: onSanitized, onCancel: stopEditing })) : null] }));
 }

package/esm/presentation/widget/richText/EditModeDashboardRichText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditModeDashboardRichText.d.ts","sourceRoot":"","sources":["../../../../src/presentation/widget/richText/EditModeDashboardRichText.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAK1D;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAgHvG"}
+{"version":3,"file":"EditModeDashboardRichText.d.ts","sourceRoot":"","sources":["../../../../src/presentation/widget/richText/EditModeDashboardRichText.tsx"],"names":[],"mappings":"AA+BA,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAK1D;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAqIvG"}

package/esm/presentation/widget/richText/EditModeDashboardRichText.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2020-2026 GoodData Corporation
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { widgetRef } from "@gooddata/sdk-model";
 import { usePrevious } from "@gooddata/sdk-ui";
@@ -13,9 +13,11 @@ import { useDashboardDispatch, useDashboardSelector } from "../../../model/react
 import { useDashboardExecConfig } from "../../../model/react/useWidgetExecConfig.js";
 import { useWidgetSelection } from "../../../model/react/useWidgetSelection.js";
 import { selectIsWhiteLabeled, selectSeparators } from "../../../model/store/config/configSelectors.js";
+import { uiActions } from "../../../model/store/ui/index.js";
 import { selectRestrictedRichTextReferences } from "../../../model/store/unavailableObjects/unavailableObjectsSelectors.js";
 import { DASHBOARD_OVERLAYS_FILTER_Z_INDEX } from "../../../presentation/constants/zIndex.js";
 import { useDashboardComponentsContext } from "../../dashboardContexts/DashboardComponentsContext.js";
+import { RestrictedReferencesDialog, useHasRestrictedReferences } from "./RestrictedReferencesDialog.js";
 import { useEditableRichTextMenu } from "./useEditableRichTextMenu.js";
 const overlayController = OverlayController.getInstance(DASHBOARD_OVERLAYS_FILTER_Z_INDEX);
 /**
@@ -32,8 +34,21 @@ export function EditModeDashboardRichText({ widget, clientWidth, clientHeight })
     const { filters } = useRichTextWidgetFilters(widget);
     const separators = useDashboardSelector(selectSeparators);
     const dispatch = useDashboardDispatch();
+    const releaseWidget = useCallback(() => dispatch(uiActions.clearWidgetSelection()), [dispatch]);
     const [richText, setRichText] = useState(widget?.content);
-    const [isRichTextEditing, setIsRichTextEditing] = useState(false);
+    // the rewrite is committed at once: it was confirmed, and it is not a keystroke
+    const onSanitized = useCallback((sanitized) => {
+        setRichText(sanitized);
+        dispatch(changeRichTextWidgetContent(widget.ref, sanitized));
+    }, [dispatch, widget.ref]);
+    // Selecting the widget is what opens its editor, and a text holding a reference the editor may
+    // not read is asked about first. Both states are that selection and that text, so neither is
+    // kept as a flag: confirming rewrites the text, which is what turns the question into the
+    // editor; cancelling lets the widget go - deliberately, rather than through deselectWidgets,
+    // which holds on to a widget whose text the pointer happens to have selected.
+    const hasRestrictedReferences = useHasRestrictedReferences(richText);
+    const isRichTextEditing = isSelected && !hasRestrictedReferences;
+    const isAskingToSanitize = isSelected && hasRestrictedReferences;
     const [isConfirmDeleteDialogVisible, setIsConfirmDeleteDialogVisible] = useState(false);
     const theme = useTheme();
     const emptyContentIconColor = theme?.palette?.complementary?.c7 ?? "#6D7680";
@@ -42,9 +57,6 @@ export function EditModeDashboardRichText({ widget, clientWidth, clientHeight })
     }, [emptyContentIconColor, intl]);
     const { RichTextMenuComponentProvider, LoadingComponent } = useDashboardComponentsContext();
     const RichTextMenuComponent = useMemo(() => RichTextMenuComponentProvider(widget), [RichTextMenuComponentProvider, widget]);
-    useEffect(() => {
-        setIsRichTextEditing(isSelected);
-    }, [isSelected]);
     useEffect(() => {
         // Deselect widget and commit updated markdown text "on blur"
         if (previousIsSelected && !isSelected && richText !== widget?.content) {
@@ -56,5 +68,5 @@ export function EditModeDashboardRichText({ widget, clientWidth, clientHeight })
         clientWidth > 250 &&
         typeof clientHeight !== "undefined" &&
         clientHeight > 150;
-    return (_jsxs(_Fragment, { children: [hasConfigPanelOpen ? (_jsx(RichTextMenuComponent, { widget: widget, isOpen: hasConfigPanelOpen, onClose: closeConfigPanel, items: menuItems })) : null, _jsx(RichText, { referencesEnabled: true, filters: filters, separators: separators, restrictedReferences: restrictedReferences, className: "gd-rich-text-widget", value: richText, onChange: setRichText, renderMode: isRichTextEditing ? "edit" : "view", emptyElement: EmptyElement, LoadingComponent: LoadingComponent, execConfig: execConfig }), isRichTextEditing && showLink ? (_jsx("div", { className: "gd-rich-text-widget-footer", children: _jsx("div", { className: "gd-rich-text-footer-options", children: showLink ? (_jsx("a", { className: "gd-button-link-dimmed gd-icon-circle-question", href: "https://www.gooddata.com/docs/cloud/create-dashboards/rich-text/", rel: "noopener noreferrer", target: "_blank", children: _jsx(FormattedMessage, { id: "richText.formattingOptions" }) })) : null }) })) : null, isConfirmDeleteDialogVisible ? (_jsx(OverlayControllerProvider, { overlayController: overlayController, children: _jsx(ConfirmDialog, { className: "s-rich-text-remove-confirm-dialog", onSubmit: () => dispatch(eagerRemoveSectionItemByWidgetRef(widget.ref)), onCancel: () => setIsConfirmDeleteDialogVisible(false), headline: intl.formatMessage({ id: "richText.deleteDialog.header" }), submitButtonText: intl.formatMessage({ id: "delete" }), cancelButtonText: intl.formatMessage({ id: "cancel" }), children: _jsx(FormattedMessage, { id: "richText.deleteDialog.message" }) }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [hasConfigPanelOpen ? (_jsx(RichTextMenuComponent, { widget: widget, isOpen: hasConfigPanelOpen, onClose: closeConfigPanel, items: menuItems })) : null, _jsx(RichText, { referencesEnabled: true, filters: filters, separators: separators, restrictedReferences: restrictedReferences, className: "gd-rich-text-widget", value: richText, onChange: setRichText, renderMode: isRichTextEditing ? "edit" : "view", emptyElement: EmptyElement, LoadingComponent: LoadingComponent, execConfig: execConfig }), isRichTextEditing && showLink ? (_jsx("div", { className: "gd-rich-text-widget-footer", children: _jsx("div", { className: "gd-rich-text-footer-options", children: showLink ? (_jsx("a", { className: "gd-button-link-dimmed gd-icon-circle-question", href: "https://www.gooddata.com/docs/cloud/create-dashboards/rich-text/", rel: "noopener noreferrer", target: "_blank", children: _jsx(FormattedMessage, { id: "richText.formattingOptions" }) })) : null }) })) : null, isAskingToSanitize ? (_jsx(RestrictedReferencesDialog, { value: richText, onSanitized: onSanitized, onCancel: releaseWidget })) : null, isConfirmDeleteDialogVisible ? (_jsx(OverlayControllerProvider, { overlayController: overlayController, children: _jsx(ConfirmDialog, { className: "s-rich-text-remove-confirm-dialog", onSubmit: () => dispatch(eagerRemoveSectionItemByWidgetRef(widget.ref)), onCancel: () => setIsConfirmDeleteDialogVisible(false), headline: intl.formatMessage({ id: "richText.deleteDialog.header" }), submitButtonText: intl.formatMessage({ id: "delete" }), cancelButtonText: intl.formatMessage({ id: "cancel" }), children: _jsx(FormattedMessage, { id: "richText.deleteDialog.message" }) }) })) : null] }));
 }

package/esm/presentation/widget/richText/RestrictedReferencesDialog.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Whether the text references an object the current user is not allowed to read. A surface that
+ * edits text asks this to know which of its two states it is in, rather than keeping a flag that
+ * says the same thing a moment later.
+ */
+export declare function useHasRestrictedReferences(value: string): boolean;
+interface IRestrictedReferencesDialogProps {
+    /** The text as it stands. */
+    value: string;
+    /** Stores the sanitized text. The caller edits it once it no longer holds such a reference. */
+    onSanitized: (sanitized: string) => void;
+    /** The editor kept the references, and is not editing after all. */
+    onCancel: () => void;
+}
+/**
+ * Asks before a text that references objects the user cannot read is edited: those references have
+ * to go first, and that is destructive. The caller mounts it while it is the answer it is waiting
+ * for - confirming rewrites the text, which is what ends the question.
+ */
+export declare function RestrictedReferencesDialog({ value, onSanitized, onCancel, }: IRestrictedReferencesDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RestrictedReferencesDialog.d.ts.map

package/esm/presentation/widget/richText/RestrictedReferencesDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RestrictedReferencesDialog.d.ts","sourceRoot":"","sources":["../../../../src/presentation/widget/richText/RestrictedReferencesDialog.tsx"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAWjE;AAED,UAAU,gCAAgC;IACtC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,oEAAoE;IACpE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,EACvC,KAAK,EACL,WAAW,EACX,QAAQ,GACX,EAAE,gCAAgC,2CAyBlC"}

package/esm/presentation/widget/richText/RestrictedReferencesDialog.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useCallback, useMemo } from "react";
+import { useIntl } from "react-intl";
+import { areObjRefsEqual } from "@gooddata/sdk-model";
+import { UiConfirmDialog, collectReferences, replaceReferences } from "@gooddata/sdk-ui-kit";
+import { useDashboardSelector } from "../../../model/react/DashboardStoreProvider.js";
+import { selectRestrictedRichTextReferences } from "../../../model/store/unavailableObjects/unavailableObjectsSelectors.js";
+/**
+ * Put in the text in place of a reference the editor may not read, as the design has it. It is
+ * stored as the text itself, and thus is the same for every reader and not localised.
+ */
+const RESTRICTED_REFERENCE_REPLACEMENT = "???";
+/** The wrapper is there to catch events, and must not take part in the layout it is dropped into. */
+const noBoxOfItsOwn = { display: "contents" };
+/**
+ * Whether the text references an object the current user is not allowed to read. A surface that
+ * edits text asks this to know which of its two states it is in, rather than keeping a flag that
+ * says the same thing a moment later.
+ */
+export function useHasRestrictedReferences(value) {
+    const restrictedReferences = useDashboardSelector(selectRestrictedRichTextReferences);
+    return useMemo(() => {
+        if (restrictedReferences.length === 0) {
+            return false;
+        }
+        return Object.values(collectReferences(value)).some((reference) => restrictedReferences.some((restricted) => areObjRefsEqual(restricted, reference.ref)));
+    }, [value, restrictedReferences]);
+}
+/**
+ * Asks before a text that references objects the user cannot read is edited: those references have
+ * to go first, and that is destructive. The caller mounts it while it is the answer it is waiting
+ * for - confirming rewrites the text, which is what ends the question.
+ */
+export function RestrictedReferencesDialog({ value, onSanitized, onCancel, }) {
+    const intl = useIntl();
+    const restrictedReferences = useDashboardSelector(selectRestrictedRichTextReferences);
+    const onConfirm = useCallback(() => {
+        onSanitized(replaceReferences(value, restrictedReferences, RESTRICTED_REFERENCE_REPLACEMENT));
+    }, [value, restrictedReferences, onSanitized]);
+    return (_jsx("span", { style: noBoxOfItsOwn, onClick: (event) => event.stopPropagation(), children: _jsx(UiConfirmDialog, { isOpen: true, dataTestId: "rich-text-sanitize-references-dialog", title: intl.formatMessage({ id: "richText.restrictedReferences.dialog.header" }), description: intl.formatMessage({ id: "richText.restrictedReferences.dialog.message" }), confirmLabel: intl.formatMessage({ id: "richText.restrictedReferences.dialog.submit" }), confirmVariant: "danger", onConfirm: onConfirm, onCancel: onCancel, onClose: onCancel }) }));
+}

package/esm/presentation/widget/richText/useEditableRichTextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEditableRichTextMenu.d.ts","sourceRoot":"","sources":["../../../../src/presentation/widget/richText/useEditableRichTextMenu.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAO3D,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,KAAK,6BAA6B,GAAG;IACjC,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,WACxB,6BAA6B,KACtC;IAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA;CA2BlC,CAAC"}
+{"version":3,"file":"useEditableRichTextMenu.d.ts","sourceRoot":"","sources":["../../../../src/presentation/widget/richText/useEditableRichTextMenu.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAQ3D,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,KAAK,6BAA6B,GAAG;IACjC,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,WACxB,6BAA6B,KACtC;IAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA;CA8BlC,CAAC"}

package/esm/presentation/widget/richText/useEditableRichTextMenu.js

@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { useIntl } from "react-intl";
 import { useDashboardDispatch, useDashboardSelector } from "../../../model/react/DashboardStoreProvider.js";
 import { useDashboardEventDispatch } from "../../../model/react/useDashboardEventDispatch.js";
+import { useIsWidgetRestricted } from "../../../model/react/useIsWidgetRestricted.js";
 import { selectEnableRichTextWidgetFilterConfiguration } from "../../../model/store/config/configSelectors.js";
 import { useDashboardCustomizationsContext } from "../../dashboardContexts/DashboardCustomizationsContext.js";
 import { getDefaultRichTextEditMode } from "../richTextMenu/DefaultDashboardRichTextMenu/getDefaultRichTextEditMenuItems.js";
@@ -12,15 +13,18 @@ export const useEditableRichTextMenu = (config) => {
     const dispatch = useDashboardDispatch();
     const eventDispatch = useDashboardEventDispatch();
     const enableRichTextWidgetFilterConfiguration = useDashboardSelector(selectEnableRichTextWidgetFilterConfiguration);
+    // there is nothing to configure about a reference the editor is not allowed to read, so the
+    // menu of such a widget holds removal alone
+    const isRestricted = useIsWidgetRestricted(widget);
     const { richTextMenuItemsProvider } = useDashboardCustomizationsContext();
     const defaultMenuItems = useMemo(() => {
         return getDefaultRichTextEditMode(widget, {
             intl,
             dispatch,
             eventDispatch,
-            enableRichTextWidgetFilterConfiguration,
+            enableRichTextWidgetFilterConfiguration: enableRichTextWidgetFilterConfiguration && !isRestricted,
         });
-    }, [dispatch, eventDispatch, intl, widget, enableRichTextWidgetFilterConfiguration]);
+    }, [dispatch, eventDispatch, intl, widget, enableRichTextWidgetFilterConfiguration, isRestricted]);
     const menuItems = useMemo(() => {
         return richTextMenuItemsProvider
             ? richTextMenuItemsProvider(widget, defaultMenuItems, closeMenu, "edit")