chore: Added isRenameDisabled and filtered UI modules from widgets section (#40553)
## Description Adds support for disabling widget renaming in the property pane through a `isRenameDisabled` property. When enabled, it displays a tooltip explaining this limitation when hovering over the widget name. Additionally, this PR hides module widgets from the widget card selection by filtering out widgets whose type starts with "MODULE_WIDGET_". Fixes https://github.com/appsmithorg/appsmith/issues/40495 ## Automation /ok-to-test tags="@tag.Widget" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/14794711021> > Commit: 3f94eafdef52b4d0543de99f9472fb3970ee415e > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14794711021&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Widget` > Spec: > <hr>Fri, 02 May 2025 13:12:08 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added the ability to disable renaming for certain widget titles, displaying a tooltip when renaming is not allowed. - **Improvements** - Widgets identified as module widgets are now excluded from the widget cards list in the UI. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
3212d738ca
commit
b310d751e4
|
|
@ -1627,6 +1627,8 @@ export const PROPERTY_PANE_EMPTY_SEARCH_RESULT_MESSAGE =
|
||||||
"No properties found based on your search";
|
"No properties found based on your search";
|
||||||
export const PROPERTY_SEARCH_INPUT_PLACEHOLDER =
|
export const PROPERTY_SEARCH_INPUT_PLACEHOLDER =
|
||||||
"Search for controls, labels etc";
|
"Search for controls, labels etc";
|
||||||
|
export const PROPERTY_PANE_TITLE_RENAME_DISABLED = () =>
|
||||||
|
"This widget cannot be renamed";
|
||||||
export const EXPLORER_BETA_ENTITY = () => "BETA";
|
export const EXPLORER_BETA_ENTITY = () => "BETA";
|
||||||
export const BINDING_WIDGET_WALKTHROUGH_TITLE = () => "Widget properties";
|
export const BINDING_WIDGET_WALKTHROUGH_TITLE = () => "Widget properties";
|
||||||
export const BINDING_WIDGET_WALKTHROUGH_DESC = () =>
|
export const BINDING_WIDGET_WALKTHROUGH_DESC = () =>
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,10 @@ import {
|
||||||
getIsCurrentWidgetRecentlyAdded,
|
getIsCurrentWidgetRecentlyAdded,
|
||||||
getPropertyPaneWidth,
|
getPropertyPaneWidth,
|
||||||
} from "selectors/propertyPaneSelectors";
|
} from "selectors/propertyPaneSelectors";
|
||||||
|
import {
|
||||||
|
createMessage,
|
||||||
|
PROPERTY_PANE_TITLE_RENAME_DISABLED,
|
||||||
|
} from "ee/constants/messages";
|
||||||
|
|
||||||
interface PropertyPaneTitleProps {
|
interface PropertyPaneTitleProps {
|
||||||
title: string;
|
title: string;
|
||||||
|
|
@ -31,6 +35,7 @@ interface PropertyPaneTitleProps {
|
||||||
updatePropertyTitle?: (title: string) => void;
|
updatePropertyTitle?: (title: string) => void;
|
||||||
onBackClick?: () => void;
|
onBackClick?: () => void;
|
||||||
isPanelTitle?: boolean;
|
isPanelTitle?: boolean;
|
||||||
|
isRenameDisabled?: boolean;
|
||||||
actions: Array<{
|
actions: Array<{
|
||||||
tooltipContent: string;
|
tooltipContent: string;
|
||||||
icon: ReactElement;
|
icon: ReactElement;
|
||||||
|
|
@ -186,22 +191,36 @@ const PropertyPaneTitle = memo(function PropertyPaneTitle(
|
||||||
className="flex-grow"
|
className="flex-grow"
|
||||||
onKeyDown={handleTabKeyDown}
|
onKeyDown={handleTabKeyDown}
|
||||||
>
|
>
|
||||||
<EditableText
|
{props.isRenameDisabled ? (
|
||||||
className="flex-grow text-lg font-semibold t--property-pane-title"
|
<div className="flex-grow text-lg font-semibold t--property-pane-title">
|
||||||
defaultValue={name}
|
<Tooltip
|
||||||
editInteractionKind={EditInteractionKind.SINGLE}
|
content={createMessage(PROPERTY_PANE_TITLE_RENAME_DISABLED)}
|
||||||
fill
|
>
|
||||||
hideEditIcon
|
<div>{name}</div>
|
||||||
isEditingDefault={isEditingDefault}
|
</Tooltip>
|
||||||
onBlur={!props.isPanelTitle ? updateTitle : undefined}
|
</div>
|
||||||
onBlurEverytime={handleOnBlurEverytime}
|
) : (
|
||||||
onTextChanged={!props.isPanelTitle ? undefined : updateNewTitle}
|
<EditableText
|
||||||
placeholder={props.title}
|
className="flex-grow text-lg font-semibold t--property-pane-title"
|
||||||
savingState={updating ? SavingState.STARTED : SavingState.NOT_STARTED}
|
defaultValue={name}
|
||||||
underline
|
editInteractionKind={EditInteractionKind.SINGLE}
|
||||||
valueTransform={!props.isPanelTitle ? removeSpecialChars : undefined}
|
fill
|
||||||
wrapperRef={containerRef}
|
hideEditIcon
|
||||||
/>
|
isEditingDefault={isEditingDefault}
|
||||||
|
onBlur={!props.isPanelTitle ? updateTitle : undefined}
|
||||||
|
onBlurEverytime={handleOnBlurEverytime}
|
||||||
|
onTextChanged={!props.isPanelTitle ? undefined : updateNewTitle}
|
||||||
|
placeholder={props.title}
|
||||||
|
savingState={
|
||||||
|
updating ? SavingState.STARTED : SavingState.NOT_STARTED
|
||||||
|
}
|
||||||
|
underline
|
||||||
|
valueTransform={
|
||||||
|
!props.isPanelTitle ? removeSpecialChars : undefined
|
||||||
|
}
|
||||||
|
wrapperRef={containerRef}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</StyledEditableContainer>
|
</StyledEditableContainer>
|
||||||
|
|
||||||
{/* ACTIONS */}
|
{/* ACTIONS */}
|
||||||
|
|
|
||||||
|
|
@ -287,6 +287,7 @@ function PropertyPaneView(
|
||||||
>
|
>
|
||||||
<PropertyPaneTitle
|
<PropertyPaneTitle
|
||||||
actions={actions}
|
actions={actions}
|
||||||
|
isRenameDisabled={widgetProperties?.isRenameDisabled}
|
||||||
key={widgetProperties.widgetId}
|
key={widgetProperties.widgetId}
|
||||||
title={widgetProperties.widgetName}
|
title={widgetProperties.widgetName}
|
||||||
widgetId={widgetProperties.widgetId}
|
widgetId={widgetProperties.widgetId}
|
||||||
|
|
|
||||||
|
|
@ -335,6 +335,10 @@ export const getCurrentPageName = createSelector(
|
||||||
?.pageName,
|
?.pageName,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const isModuleWidget = (
|
||||||
|
config: ReturnType<typeof WidgetFactory.getConfigs>[string],
|
||||||
|
) => config.type.startsWith("MODULE_WIDGET_");
|
||||||
|
|
||||||
export const getWidgetCards = createSelector(
|
export const getWidgetCards = createSelector(
|
||||||
getIsAutoLayout,
|
getIsAutoLayout,
|
||||||
getIsAnvilLayout,
|
getIsAnvilLayout,
|
||||||
|
|
@ -357,7 +361,7 @@ export const getWidgetCards = createSelector(
|
||||||
return config.widgetName !== "Map" && !config.hideCard;
|
return config.widgetName !== "Map" && !config.hideCard;
|
||||||
}
|
}
|
||||||
|
|
||||||
return !config.hideCard;
|
return !config.hideCard && !isModuleWidget(config);
|
||||||
});
|
});
|
||||||
|
|
||||||
const _cards: WidgetCardProps[] = cards.map((config) => {
|
const _cards: WidgetCardProps[] = cards.map((config) => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user