diff --git a/app/client/src/ce/reducers/index.tsx b/app/client/src/ce/reducers/index.tsx index 63c376c2bf..f736df31f0 100644 --- a/app/client/src/ce/reducers/index.tsx +++ b/app/client/src/ce/reducers/index.tsx @@ -81,7 +81,6 @@ import type { ActiveField } from "reducers/uiReducers/activeFieldEditorReducer"; import type { SelectedWorkspaceReduxState } from "@appsmith/reducers/uiReducers/selectedWorkspaceReducer"; import type { ConsolidatedPageLoadState } from "reducers/uiReducers/consolidatedPageLoadReducer"; import type { BuildingBlocksReduxState } from "reducers/uiReducers/buildingBlockReducer"; -import type { AnvilDetachedWidgetsReduxState } from "layoutSystems/anvil/integrations/reducers/anvilDetachedWidgetsReducer"; export const reducerObject = { entities: entityReducer, @@ -147,7 +146,6 @@ export interface AppState { oneClickBinding: OneClickBindingState; activeField: ActiveField; ide: IDEState; - anvilDetachedWidgets: AnvilDetachedWidgetsReduxState; }; entities: { canvasWidgetsStructure: CanvasWidgetStructure; diff --git a/app/client/src/ce/reducers/uiReducers/index.tsx b/app/client/src/ce/reducers/uiReducers/index.tsx index 79dcf5de0a..5d5312798d 100644 --- a/app/client/src/ce/reducers/uiReducers/index.tsx +++ b/app/client/src/ce/reducers/uiReducers/index.tsx @@ -50,7 +50,6 @@ import activeFieldReducer from "reducers/uiReducers/activeFieldEditorReducer"; import selectedWorkspaceReducer from "@appsmith/reducers/uiReducers/selectedWorkspaceReducer"; import ideReducer from "../../../reducers/uiReducers/ideReducer"; import consolidatedPageLoadReducer from "reducers/uiReducers/consolidatedPageLoadReducer"; -import anvilDetachedWidgetsReducer from "layoutSystems/anvil/integrations/reducers/anvilDetachedWidgetsReducer"; export const uiReducerObject = { analytics: analyticsReducer, @@ -105,5 +104,4 @@ export const uiReducerObject = { activeField: activeFieldReducer, ide: ideReducer, consolidatedPageLoad: consolidatedPageLoadReducer, - anvilDetachedWidgets: anvilDetachedWidgetsReducer, }; diff --git a/app/client/src/layoutSystems/anvil/editor/canvasArenas/styles.module.css b/app/client/src/layoutSystems/anvil/editor/canvasArenas/styles.module.css index 99cd00ad2c..d0187fd563 100644 --- a/app/client/src/layoutSystems/anvil/editor/canvasArenas/styles.module.css +++ b/app/client/src/layoutSystems/anvil/editor/canvasArenas/styles.module.css @@ -1,4 +1,5 @@ .detachedWidgetsDropOverlay { + z-index: var(--z-index-99); background-color: var(--modal-overlay-color); position: fixed; padding: 40px; diff --git a/app/client/src/layoutSystems/anvil/integrations/actions/actionTypes.ts b/app/client/src/layoutSystems/anvil/integrations/actions/actionTypes.ts index 62d8f1fcd4..724d13a8fe 100644 --- a/app/client/src/layoutSystems/anvil/integrations/actions/actionTypes.ts +++ b/app/client/src/layoutSystems/anvil/integrations/actions/actionTypes.ts @@ -40,7 +40,4 @@ export enum AnvilReduxActionTypes { ANVIL_SPACE_DISTRIBUTION_STOP = "ANVIL_SPACE_DISTRIBUTION_STOP", ANVIL_SET_HIGHLIGHT_SHOWN = "ANVIL_SET_HIGHLIGHT_SHOWN", ANVIL_WIDGET_SELECTION_CLICK = "ANVIL_WIDGET_SELECTION_CLICK", - SHOW_DETACHED_WIDGET = "SHOW_DETACHED_WIDGET", - HIDE_DETACHED_WIDGET = "HIDE_DETACHED_WIDGET", - RESET_DETACHED_WIDGETS = "RESET_DETACHED_WIDGETS", } diff --git a/app/client/src/layoutSystems/anvil/integrations/actions/detachedWidgetActions.ts b/app/client/src/layoutSystems/anvil/integrations/actions/detachedWidgetActions.ts deleted file mode 100644 index 197bf72d4e..0000000000 --- a/app/client/src/layoutSystems/anvil/integrations/actions/detachedWidgetActions.ts +++ /dev/null @@ -1,21 +0,0 @@ -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, - }; -}; diff --git a/app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts b/app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts index 9f5c6a7e5c..9c18113ede 100644 --- a/app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts +++ b/app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts @@ -1,5 +1,15 @@ import type { AppState } from "@appsmith/reducers"; +import { getAllDetachedWidgetIds, getWidgetsMeta } from "sagas/selectors"; export const getCurrentlyOpenAnvilDetachedWidgets = (state: AppState) => { - return state.ui.anvilDetachedWidgets.currentlyOpenDetachedWidgets; + const allExistingDetachedWidgets = getAllDetachedWidgetIds(state); + if (allExistingDetachedWidgets.length === 0) { + return []; + } + const metaWidgets = getWidgetsMeta(state); + const currentlyOpenWidgets = allExistingDetachedWidgets.filter((modalId) => { + const modal = metaWidgets[modalId]; + return modal && modal.isVisible; + }); + return currentlyOpenWidgets; }; diff --git a/app/client/src/layoutSystems/anvil/integrations/reducers/anvilDetachedWidgetsReducer.ts b/app/client/src/layoutSystems/anvil/integrations/reducers/anvilDetachedWidgetsReducer.ts deleted file mode 100644 index b0aa0dcbd7..0000000000 --- a/app/client/src/layoutSystems/anvil/integrations/reducers/anvilDetachedWidgetsReducer.ts +++ /dev/null @@ -1,36 +0,0 @@ -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, - ) => { - state.currentlyOpenDetachedWidgets.push(action.payload); - }, - [AnvilReduxActionTypes.HIDE_DETACHED_WIDGET]: ( - state: AnvilDetachedWidgetsReduxState, - action: AnvilReduxAction, - ) => { - state.currentlyOpenDetachedWidgets = - state.currentlyOpenDetachedWidgets.filter( - (widgetId) => widgetId !== action.payload, - ); - }, - [AnvilReduxActionTypes.RESET_DETACHED_WIDGETS]: ( - state: AnvilDetachedWidgetsReduxState, - ) => { - state.currentlyOpenDetachedWidgets = []; - }, -}); - -export default anvilDetachedWidgetsReducer; diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDetachedWidgetSagas.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDetachedWidgetSagas.ts deleted file mode 100644 index 58dec56597..0000000000 --- a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilDetachedWidgetSagas.ts +++ /dev/null @@ -1,46 +0,0 @@ -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, - ), - ]); -} diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/index.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/index.ts index 0ef168cf26..69337fd560 100644 --- a/app/client/src/layoutSystems/anvil/integrations/sagas/index.ts +++ b/app/client/src/layoutSystems/anvil/integrations/sagas/index.ts @@ -5,7 +5,6 @@ import anvilSectionSagas from "./sectionSagas"; import anvilSpaceDistributionSagas from "./anvilSpaceDistributionSagas"; import anvilWidgetSelectionSaga from "./anvilWidgetSelectionSaga"; import pasteSagas from "./pasteSagas"; -import anvilDetachedWidgetSagas from "./anvilDetachedWidgetSagas"; export default function* anvilSagas() { yield fork(LayoutElementPositionsSaga); @@ -14,5 +13,4 @@ export default function* anvilSagas() { yield fork(anvilSpaceDistributionSagas); yield fork(anvilWidgetSelectionSaga); yield fork(pasteSagas); - yield fork(anvilDetachedWidgetSagas); } diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/pasteSagas.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/pasteSagas.ts index 65ffff384a..2f8d264bca 100644 --- a/app/client/src/layoutSystems/anvil/integrations/sagas/pasteSagas.ts +++ b/app/client/src/layoutSystems/anvil/integrations/sagas/pasteSagas.ts @@ -7,6 +7,7 @@ import { updateAndSaveAnvilLayout } from "../../utils/anvilChecksUtils"; import { builderURL } from "@appsmith/RouteBuilder"; import { getCurrentPageId } from "selectors/editorSelectors"; import { + type ReduxAction, ReduxActionErrorTypes, ReduxActionTypes, } from "@appsmith/constants/ReduxActionConstants"; @@ -23,7 +24,7 @@ import { getDestinedParent } from "layoutSystems/anvil/utils/paste/destinationUt import { pasteWidgetsIntoMainCanvas } from "layoutSystems/anvil/utils/paste/mainCanvasPasteUtils"; import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants"; import WidgetFactory from "WidgetProvider/factory"; -import { callSagaOnlyForAnvil } from "./utils"; +import { getIsAnvilLayout } from "../selectors"; function* pasteWidgetSagas() { try { @@ -121,11 +122,18 @@ function* pasteWidgetSagas() { } } +function* shouldCallSaga(saga: any, action: ReduxAction) { + const isAnvilLayout: boolean = yield select(getIsAnvilLayout); + if (isAnvilLayout) { + yield call(saga, action); + } +} + export default function* pasteSagas() { yield all([ takeLeading( ReduxActionTypes.PASTE_COPIED_WIDGET_INIT, - callSagaOnlyForAnvil, + shouldCallSaga, pasteWidgetSagas, ), ]); diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/utils.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/utils.ts deleted file mode 100644 index 1c5f37cab0..0000000000 --- a/app/client/src/layoutSystems/anvil/integrations/sagas/utils.ts +++ /dev/null @@ -1,10 +0,0 @@ -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) { - const isAnvilLayout: boolean = yield select(getIsAnvilLayout); - if (isAnvilLayout) { - yield call(saga, action); - } -} diff --git a/app/client/src/sagas/selectors.tsx b/app/client/src/sagas/selectors.tsx index 38caf303e2..f3344b68d7 100644 --- a/app/client/src/sagas/selectors.tsx +++ b/app/client/src/sagas/selectors.tsx @@ -77,6 +77,12 @@ export const getWidgetIdsByType = (state: AppState, type: WidgetType) => { .map((widget: FlattenedWidgetProps) => widget.widgetId); }; +export const getAllDetachedWidgetIds = (state: AppState) => { + return Object.values(state.entities.canvasWidgets) + .filter((widget: FlattenedWidgetProps) => !!widget.detachFromLayout) + .map((widget: FlattenedWidgetProps) => widget.widgetId); +}; + export const getWidgetOptionsTree = memoize((state: AppState) => Object.values(state.entities.canvasWidgets) .filter((w) => w.type !== "CANVAS_WIDGET" && w.type !== "BUTTON_WIDGET")