diff --git a/common/changes/@itwin/appui-layout-react/fix-widget-send-back_2022-05-16-09-29.json b/common/changes/@itwin/appui-layout-react/fix-widget-send-back_2022-05-16-09-29.json new file mode 100644 index 000000000000..dd8662b2f865 --- /dev/null +++ b/common/changes/@itwin/appui-layout-react/fix-widget-send-back_2022-05-16-09-29.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@itwin/appui-layout-react", + "comment": "Fix an issue where a widget is not removed correctly in FLOATING_WIDGET_SEND_BACK action.", + "type": "none" + } + ], + "packageName": "@itwin/appui-layout-react" +} \ No newline at end of file diff --git a/ui/appui-layout-react/src/appui-layout-react/base/NineZoneState.ts b/ui/appui-layout-react/src/appui-layout-react/base/NineZoneState.ts index f0699d7d6c88..238c586facb6 100644 --- a/ui/appui-layout-react/src/appui-layout-react/base/NineZoneState.ts +++ b/ui/appui-layout-react/src/appui-layout-react/base/NineZoneState.ts @@ -582,29 +582,29 @@ export const NineZoneStateReducer: (state: NineZoneState, action: NineZoneAction } if (homeWidget) { + // Add tabs to an existing widget. homeWidget.tabs.push(...widget.tabs); removeWidget(state, widget.id); - } else { - const destinationWidgetContainerName = home.widgetId ?? getWidgetPanelSectionId(panel.side, home.widgetIndex); - // if widget container was remove because it was empty insert it - state.widgets[destinationWidgetContainerName] = { - activeTabId: widget.tabs[0], - id: destinationWidgetContainerName, - minimized: false, - tabs: [...widget.tabs], - }; - - let insertIndex = destinationWidgetContainerName.endsWith("End") ? 1 : 0; - // istanbul ignore next - if (0 === panel.widgets.length) - insertIndex = 0; - panel.widgets.splice(insertIndex, 0, destinationWidgetContainerName); - widget.minimized = false; - if (home.widgetId) - removeWidget(state, widget.id); - else - removeFloatingWidget(state, widget.id); + return; } + + const destinationWidgetContainerName = home.widgetId ?? getWidgetPanelSectionId(panel.side, home.widgetIndex); + // if widget container was removed because it was empty insert it + state.widgets[destinationWidgetContainerName] = { + activeTabId: widget.tabs[0], + id: destinationWidgetContainerName, + minimized: false, + tabs: [...widget.tabs], + }; + + let insertIndex = destinationWidgetContainerName.endsWith("End") ? 1 : 0; + // istanbul ignore next + if (0 === panel.widgets.length) + insertIndex = 0; + panel.widgets.splice(insertIndex, 0, destinationWidgetContainerName); + widget.minimized = false; + + removeWidget(state, widget.id); return; } case "POPOUT_WIDGET_SEND_BACK": { diff --git a/ui/appui-layout-react/src/test/base/NineZoneState.test.ts b/ui/appui-layout-react/src/test/base/NineZoneState.test.ts index 67978ece8cff..9fc3d17366ad 100644 --- a/ui/appui-layout-react/src/test/base/NineZoneState.test.ts +++ b/ui/appui-layout-react/src/test/base/NineZoneState.test.ts @@ -645,6 +645,7 @@ describe("NineZoneStateReducer", () => { newState.widgets.leftStart.tabs.should.eql(["t1"]); newState.widgets.leftEnd.tabs.should.eql(["t2", "t3"]); should().not.exist(newState.floatingWidgets.byId.fw1); + should().not.exist(newState.widgets.fw1); newState.floatingWidgets.allIds.indexOf("fw1").should.eq(-1); }); @@ -694,6 +695,7 @@ describe("NineZoneStateReducer", () => { newState.panels.left.widgets.should.eql(["w1", "w2"]); newState.widgets.w1.tabs.should.eql(["t1", "t2"]); should().not.exist(newState.floatingWidgets.byId.fw1); + should().not.exist(newState.widgets.fw1); newState.floatingWidgets.allIds.indexOf("fw1").should.eq(-1); });