-
Notifications
You must be signed in to change notification settings - Fork 3.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: render only the currently open detached widgets. (#33040)
[![workerB](https://img.shields.io/endpoint?url=https%3A%2F%2Fworkerb.linearb.io%2Fv2%2Fbadge%2Fprivate%2FU2FsdGVkX10brntLuWYYLQvefXZQ5n0RiHTmmIq6M%2Fcollaboration.svg%3FcacheSeconds%3D60)](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=M62wKah) ## Description Currently we render all the detached widgets(Modal) via a hook and the widget shows up when the metaValue for visibility is toggled for a modal. Problems with this: - we render all modal widgets even before they are needed. - everytime something on the canvas changes the widgets are rendered. To solve this we are going to rely on a state that captures the currently open detached widgets in anvil `anvilDetachedWidgets.currentlyOpenDetachedWidgets` This is captured and reset currently based on show and close operations of a modal. we now have the modals that are currently open, we simply use this state to render detached widgets by extracting the widget from the `canvasWidgetsStructure` in the `useDetachedChildren` hook. PS: we are taking advantage of the fact that modal widgets can only be a child of main canvas in anvil. extracting modal states/props from `canvasWidgetsStructure` becomes more performant coz its a targetted search now. Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Anvil" ### 🔍 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/8890517497> > Commit: b68ad19 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8890517497&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new component for rendering detached child widgets within the Anvil layout system. - **Refactor** - Updated the handling and rendering process of detached widgets across various components in the Anvil system. - **Bug Fixes** - Adjusted selector logic to correctly retrieve and manage detached widget states. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Loading branch information
Showing
13 changed files
with
178 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
app/client/src/layoutSystems/anvil/integrations/actions/detachedWidgetActions.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { AnvilReduxActionTypes } from "./actionTypes"; | ||
|
||
export const showDetachedWidgetAction = (widgetId: string) => { | ||
return { | ||
type: AnvilReduxActionTypes.SHOW_DETACHED_WIDGET, | ||
payload: widgetId, | ||
}; | ||
}; | ||
|
||
export const hideDetachedWidgetAction = (widgetId: string) => { | ||
return { | ||
type: AnvilReduxActionTypes.HIDE_DETACHED_WIDGET, | ||
payload: widgetId, | ||
}; | ||
}; | ||
|
||
export const resetDetachedWidgetsAction = () => { | ||
return { | ||
type: AnvilReduxActionTypes.RESET_DETACHED_WIDGETS, | ||
}; | ||
}; |
15 changes: 2 additions & 13 deletions
15
app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,5 @@ | ||
import type { AppState } from "@appsmith/reducers"; | ||
import { getWidgetIdsByType, getWidgetsMeta } from "sagas/selectors"; | ||
import { WDSModalWidget } from "widgets/wds/WDSModalWidget"; | ||
|
||
export const getCurrentlyOpenAnvilModal = (state: AppState) => { | ||
const allExistingModals = getWidgetIdsByType(state, WDSModalWidget.type); | ||
if (allExistingModals.length === 0) { | ||
return; | ||
} | ||
const metaWidgets = getWidgetsMeta(state); | ||
const currentlyOpenModal = allExistingModals.find((modalId) => { | ||
const modal = metaWidgets[modalId]; | ||
return modal && modal.isVisible; | ||
}); | ||
return currentlyOpenModal; | ||
export const getCurrentlyOpenAnvilDetachedWidgets = (state: AppState) => { | ||
return state.ui.anvilDetachedWidgets.currentlyOpenDetachedWidgets; | ||
}; |
36 changes: 36 additions & 0 deletions
36
app/client/src/layoutSystems/anvil/integrations/reducers/anvilDetachedWidgetsReducer.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import { createImmerReducer } from "utils/ReducerUtils"; | ||
import { | ||
AnvilReduxActionTypes, | ||
type AnvilReduxAction, | ||
} from "../actions/actionTypes"; | ||
|
||
export interface AnvilDetachedWidgetsReduxState { | ||
currentlyOpenDetachedWidgets: string[]; | ||
} | ||
const initialState: AnvilDetachedWidgetsReduxState = { | ||
currentlyOpenDetachedWidgets: [], | ||
}; | ||
const anvilDetachedWidgetsReducer = createImmerReducer(initialState, { | ||
[AnvilReduxActionTypes.SHOW_DETACHED_WIDGET]: ( | ||
state: AnvilDetachedWidgetsReduxState, | ||
action: AnvilReduxAction<string>, | ||
) => { | ||
state.currentlyOpenDetachedWidgets.push(action.payload); | ||
}, | ||
[AnvilReduxActionTypes.HIDE_DETACHED_WIDGET]: ( | ||
state: AnvilDetachedWidgetsReduxState, | ||
action: AnvilReduxAction<string>, | ||
) => { | ||
state.currentlyOpenDetachedWidgets = | ||
state.currentlyOpenDetachedWidgets.filter( | ||
(widgetId) => widgetId !== action.payload, | ||
); | ||
}, | ||
[AnvilReduxActionTypes.RESET_DETACHED_WIDGETS]: ( | ||
state: AnvilDetachedWidgetsReduxState, | ||
) => { | ||
state.currentlyOpenDetachedWidgets = []; | ||
}, | ||
}); | ||
|
||
export default anvilDetachedWidgetsReducer; |
46 changes: 46 additions & 0 deletions
46
app/client/src/layoutSystems/anvil/integrations/sagas/anvilDetachedWidgetSagas.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import type { ReduxAction } from "@appsmith/constants/ReduxActionConstants"; | ||
import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; | ||
import { all, put, select, takeEvery, takeLatest } from "redux-saga/effects"; | ||
import { callSagaOnlyForAnvil } from "./utils"; | ||
import { | ||
hideDetachedWidgetAction, | ||
resetDetachedWidgetsAction, | ||
showDetachedWidgetAction, | ||
} from "../actions/detachedWidgetActions"; | ||
import { getWidgetByName } from "sagas/selectors"; | ||
import type { FlattenedWidgetProps } from "WidgetProvider/constants"; | ||
|
||
function* closeAnvilModalSaga(action: ReduxAction<{ modalName?: string }>) { | ||
const { modalName } = action.payload; | ||
|
||
if (modalName) { | ||
const widget: FlattenedWidgetProps | undefined = yield select( | ||
getWidgetByName, | ||
modalName, | ||
); | ||
if (widget) { | ||
hideDetachedWidgetAction(widget.widgetId); | ||
} | ||
} else { | ||
yield put(resetDetachedWidgetsAction()); | ||
} | ||
} | ||
|
||
function* showAnvilModalSaga(action: ReduxAction<{ modalId: string }>) { | ||
yield put(showDetachedWidgetAction(action.payload.modalId)); | ||
} | ||
|
||
export default function* anvilDetachedWidgetSagas() { | ||
yield all([ | ||
takeEvery( | ||
ReduxActionTypes.CLOSE_MODAL, | ||
callSagaOnlyForAnvil, | ||
closeAnvilModalSaga, | ||
), | ||
takeLatest( | ||
ReduxActionTypes.SHOW_MODAL, | ||
callSagaOnlyForAnvil, | ||
showAnvilModalSaga, | ||
), | ||
]); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
app/client/src/layoutSystems/anvil/integrations/sagas/utils.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import type { ReduxAction } from "@appsmith/constants/ReduxActionConstants"; | ||
import { call, select } from "redux-saga/effects"; | ||
import { getIsAnvilLayout } from "../selectors"; | ||
|
||
export function* callSagaOnlyForAnvil(saga: any, action: ReduxAction<unknown>) { | ||
const isAnvilLayout: boolean = yield select(getIsAnvilLayout); | ||
if (isAnvilLayout) { | ||
yield call(saga, action); | ||
} | ||
} |
34 changes: 34 additions & 0 deletions
34
app/client/src/layoutSystems/anvil/viewer/canvas/AnvilDetachedWidgets.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants"; | ||
import { useDetachedChildren } from "layoutSystems/anvil/common/hooks/detachedWidgetHooks"; | ||
import { getAnvilWidgetDOMId } from "layoutSystems/common/utils/LayoutElementPositionsObserver/utils"; | ||
import { renderChildWidget } from "layoutSystems/common/utils/canvasUtils"; | ||
import React from "react"; | ||
import { useSelector } from "react-redux"; | ||
import { getRenderMode } from "selectors/editorSelectors"; | ||
import type { WidgetProps } from "widgets/BaseWidget"; | ||
|
||
export const AnvilDetachedWidgets = () => { | ||
const detachedChildren = useDetachedChildren(); | ||
const renderMode = useSelector(getRenderMode); | ||
return ( | ||
<> | ||
{detachedChildren.map((child) => | ||
renderChildWidget({ | ||
childWidgetData: child as WidgetProps, | ||
defaultWidgetProps: { | ||
className: `${getAnvilWidgetDOMId(child.widgetId)}`, | ||
}, | ||
noPad: false, | ||
// Adding these properties as the type insists on providing this | ||
// while it is not required for detached children | ||
layoutSystemProps: { | ||
layoutId: "", | ||
rowIndex: 0, | ||
}, | ||
renderMode, | ||
widgetId: MAIN_CONTAINER_WIDGET_ID, | ||
}), | ||
)} | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters