diff --git a/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap b/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap index e7106d02eb..3a519d75db 100644 --- a/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap +++ b/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap @@ -13,6 +13,74 @@ exports[`DockHost, given rendered given implementations of dock tab types emerge `; +exports[`DockHost, given rendered given implementations of dock tab types emerge when dock tab of one of the types is created given another dock tab is created when dock tab being active is closed renders 1`] = ` + +
+
+
+
+
+ Some title 1 +
+
+ Close +
+
+
+
+
+ Some content 1 +
+
+
+
+ +`; + +exports[`DockHost, given rendered given implementations of dock tab types emerge when dock tab of one of the types is created given another dock tab is created when dock tab not being active is closed renders 1`] = ` + +
+
+
+
+
+ Some title 2 +
+
+ Close +
+
+
+
+
+ Some content 2 +
+
+
+
+ +`; + exports[`DockHost, given rendered given implementations of dock tab types emerge when dock tab of one of the types is created given another dock tab is created when the second dock tab is clicked renders 1`] = `
@@ -21,22 +89,32 @@ exports[`DockHost, given rendered given implementations of dock tab types emerge class="flex align-center" >
Some title 1
+
+ Close +
Some title 2
+
+ Close +
@@ -59,13 +137,18 @@ exports[`DockHost, given rendered given implementations of dock tab types emerge class="flex align-center" >
Some title 1
+
+ Close +
@@ -80,6 +163,19 @@ exports[`DockHost, given rendered given implementations of dock tab types emerge `; +exports[`DockHost, given rendered given implementations of dock tab types emerge when dock tab of one of the types is created when all dock tabs are closed renders 1`] = ` + +
+
+
+
+
+
+ +`; + exports[`DockHost, given rendered given no implementations of dock tab types, renders 1`] = `
diff --git a/packages/business-features/dock/src/dock.test.tsx b/packages/business-features/dock/src/dock.test.tsx index 296071d59f..636c3c7fe8 100644 --- a/packages/business-features/dock/src/dock.test.tsx +++ b/packages/business-features/dock/src/dock.test.tsx @@ -49,7 +49,7 @@ describe("DockHost, given rendered", () => { registerFeature(di, dockFeature); di.override(getRandomIdInjectionToken, () => { - let index = 0; + let index = 1; return () => `some-random-id-${index++}`; }); @@ -112,6 +112,33 @@ describe("DockHost, given rendered", () => { ]); }); + describe("when all dock tabs are closed WIP(PASSES BUT IS CLEARLY WRONG)", () => { + beforeEach(() => { + act(() => { + discover + .getSingleElement("dock-tab", "some-random-id-1") + .getSingleElement("close-tab") + .click(); + }); + }); + + fit("renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + + it("renders no tabs", () => { + const { discovered } = discover.querySingleElement("dock-tab"); + + expect(discovered).toBeNull(); + }); + + it("renders no content", () => { + const { discovered } = discover.querySingleElement("dock-tab-content"); + + expect(discovered).toBeNull(); + }); + }); + describe("given another dock tab is created", () => { beforeEach(() => { const dockTabType2 = di.inject(dockTabTypeInjectable2); @@ -134,10 +161,64 @@ describe("DockHost, given rendered", () => { ]); }); + describe("when dock tab being active is closed", () => { + beforeEach(() => { + act(() => { + discover + .getSingleElement("dock-tab", "some-random-id-2") + .getSingleElement("close-tab") + .click(); + }); + }); + + it("renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + + it("renders the title for the dock tab", () => { + expect(discover.queryAllElements("dock-tab-title").attributeValues).toEqual([ + "some-title-1", + ]); + }); + + it("renders the content of the previous dock tab", () => { + expect(discover.queryAllElements("dock-tab-content").attributeValues).toEqual([ + "some-content-1", + ]); + }); + }); + + describe("when dock tab not being active is closed", () => { + beforeEach(() => { + act(() => { + discover + .getSingleElement("dock-tab", "some-random-id-1") + .getSingleElement("close-tab") + .click(); + }); + }); + + it("renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + + it("renders the title for the dock tab", () => { + expect(discover.queryAllElements("dock-tab-title").attributeValues).toEqual([ + "some-title-2", + ]); + }); + + it("still renders the content of the active dock tab", () => { + expect(discover.queryAllElements("dock-tab-content").attributeValues).toEqual([ + "some-content-2", + ]); + }); + }); + describe("when the second dock tab is clicked", () => { beforeEach(() => { act(() => { - discover.getSingleElement("dock-tab", "some-random-id-1").click(); + discover.getSingleElement("dock-tab", "some-random-id-2").click(); }); }); diff --git a/packages/business-features/dock/src/dock/activate-dock-tab.injectable.ts b/packages/business-features/dock/src/dock/activate-dock-tab.injectable.ts index e9ff75bdd3..2827afadcc 100644 --- a/packages/business-features/dock/src/dock/activate-dock-tab.injectable.ts +++ b/packages/business-features/dock/src/dock/activate-dock-tab.injectable.ts @@ -8,7 +8,9 @@ const activateDockTabInjectable = getInjectable({ instantiate: (di) => { const activeDockTabId = di.inject(activeDockTabIdStateInjectable); - return action((tabId: string) => activeDockTabId.set(tabId)); + return action((tabId: string) => { + return activeDockTabId.set(tabId); + }); }, }); diff --git a/packages/business-features/dock/src/dock/active-dock-tab.injectable.ts b/packages/business-features/dock/src/dock/active-dock-tab.injectable.ts index d5308ca387..4172a6dbaa 100644 --- a/packages/business-features/dock/src/dock/active-dock-tab.injectable.ts +++ b/packages/business-features/dock/src/dock/active-dock-tab.injectable.ts @@ -2,7 +2,7 @@ import { getInjectable } from "@ogre-tools/injectable"; import { computed } from "mobx"; import activeDockTabIdStateInjectable from "./active-dock-tab-id-state.injectable"; import { pipeline } from "@ogre-tools/fp"; -import { defaults, find, first } from "lodash/fp"; +import { defaults, find } from "lodash/fp"; import dockTabsInjectable, { DockTabViewModel } from "./dock-tabs.injectable"; const nullTab: DockTabViewModel = { @@ -15,6 +15,7 @@ const nullTab: DockTabViewModel = { }, activate: () => {}, + close: () => {}, }; const activeDockTabInjectable = getInjectable({ @@ -30,7 +31,6 @@ const activeDockTabInjectable = getInjectable({ return pipeline( tabs, find((tab) => tab.id === activeDockTabId.get()), - defaults(first(tabs)), defaults(nullTab), ); }); diff --git a/packages/business-features/dock/src/dock/close-dock-tab.injectable.ts b/packages/business-features/dock/src/dock/close-dock-tab.injectable.ts new file mode 100644 index 0000000000..6380059b23 --- /dev/null +++ b/packages/business-features/dock/src/dock/close-dock-tab.injectable.ts @@ -0,0 +1,32 @@ +import { getInjectable } from "@ogre-tools/injectable"; +import { DockTabInState, dockTabStateInjectable } from "./dock-tab-state.injectable"; +import activateDockTabInjectable from "./activate-dock-tab.injectable"; +import { action } from "mobx"; + +const closeDockTabInjectable = getInjectable({ + id: "close-dock-tab", + + instantiate: (di) => { + const dockTabState = di.inject(dockTabStateInjectable); + const activateDockTab = di.inject(activateDockTabInjectable); + + return action((tabToBeClosed: DockTabInState) => { + const currentTabs = [...dockTabState.values()]; + const currentIndex = currentTabs.indexOf(tabToBeClosed); + + const previousIndex = currentIndex - 1; + + const tabToBeActivated = currentTabs.at(previousIndex); + + dockTabState.delete(tabToBeClosed); + + console.log(previousIndex, currentTabs); // TODO: Fix + + if (tabToBeActivated) { + activateDockTab(tabToBeActivated.id); + } + }); + }, +}); + +export default closeDockTabInjectable; diff --git a/packages/business-features/dock/src/dock/dock-host.tsx b/packages/business-features/dock/src/dock/dock-host.tsx index 783a716398..067ace96f6 100644 --- a/packages/business-features/dock/src/dock/dock-host.tsx +++ b/packages/business-features/dock/src/dock/dock-host.tsx @@ -16,9 +16,20 @@ const NonInjectedDockHost = observer(({ dockTabs, activeDockTab }: Dependencies)
- {({ id, type: { TitleComponent }, activate }) => ( + {({ id, type: { TitleComponent }, activate, close }) => ( + +
{ + e.stopPropagation(); + + close(); + }} + > + Close +
)} diff --git a/packages/business-features/dock/src/dock/dock-tabs.injectable.ts b/packages/business-features/dock/src/dock/dock-tabs.injectable.ts index 4e14e03212..82ea5ecbb5 100644 --- a/packages/business-features/dock/src/dock/dock-tabs.injectable.ts +++ b/packages/business-features/dock/src/dock/dock-tabs.injectable.ts @@ -6,11 +6,13 @@ import type { DockTabType } from "../dock-tab-type"; import { dockTabStateInjectable } from "./dock-tab-state.injectable"; import activateDockTabInjectable from "./activate-dock-tab.injectable"; import dockTabTypesInjectable from "./dock-tabs-types.injectable"; +import closeDockTabInjectable from "./close-dock-tab.injectable"; export interface DockTabViewModel { id: string; type: DockTabType; activate: () => void; + close: () => void; } const dockTabsInjectable = getInjectable({ @@ -20,6 +22,7 @@ const dockTabsInjectable = getInjectable({ const dockTabTypes = di.inject(dockTabTypesInjectable); const dockTabState = di.inject(dockTabStateInjectable); const activateDockTab = di.inject(activateDockTabInjectable); + const closeDockTab = di.inject(closeDockTabInjectable); return computed((): DockTabViewModel[] => { const dereferencedDockTabTypes = dockTabTypes.get(); @@ -38,6 +41,7 @@ const dockTabsInjectable = getInjectable({ id: tab.id, type: type as DockTabType, activate: () => activateDockTab(tab.id), + close: () => closeDockTab(tab), })), ); });