diff --git a/src/components/feature-board-external-tool-element/ExternalToolElement.unit.ts b/src/components/feature-board-external-tool-element/ExternalToolElement.unit.ts index 994a80d0bc..3b2d062487 100644 --- a/src/components/feature-board-external-tool-element/ExternalToolElement.unit.ts +++ b/src/components/feature-board-external-tool-element/ExternalToolElement.unit.ts @@ -26,10 +26,12 @@ import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog"; import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils"; import Vue, { ref } from "vue"; import ExternalToolElement from "./ExternalToolElement.vue"; +import { useSharedLastCreatedElement } from "@util-board"; jest.mock("@data-board"); jest.mock("@data-external-tool"); jest.mock("@ui-confirmation-dialog"); +jest.mock("@util-board"); const EMPTY_TEST_ELEMENT: ExternalToolElementResponse = { id: "external-tool-element-id", @@ -53,6 +55,9 @@ describe("ExternalToolElement", () => { let useExternalToolLaunchStateMock: DeepMocked< ReturnType >; + let useSharedLastCreatedElementMock: DeepMocked< + ReturnType + >; beforeEach(() => { useContentElementStateMock = @@ -63,6 +68,8 @@ describe("ExternalToolElement", () => { createMock>(); useExternalToolLaunchStateMock = createMock>(); + useSharedLastCreatedElementMock = + createMock>(); jest .mocked(useContentElementState) @@ -74,6 +81,9 @@ describe("ExternalToolElement", () => { jest .mocked(useExternalToolLaunchState) .mockReturnValue(useExternalToolLaunchStateMock); + jest + .mocked(useSharedLastCreatedElement) + .mockReturnValue(useSharedLastCreatedElementMock); }); afterEach(() => { @@ -97,6 +107,7 @@ describe("ExternalToolElement", () => { useContentElementStateMock.modelValue = ref(props.element.content); useSharedExternalToolElementDisplayStateMock.displayData = ref(displayData); + useSharedLastCreatedElementMock.lastCreatedElementId = ref(undefined); const wrapper: Wrapper = shallowMount( ExternalToolElement as MountOptions, @@ -114,9 +125,6 @@ describe("ExternalToolElement", () => { provide: { [I18N_KEY.valueOf()]: i18nMock, }, - stubs: { - ExternalToolElementConfigurationDialog: true, - }, } ); @@ -199,6 +207,24 @@ describe("ExternalToolElement", () => { }); describe("when the element does not have a tool attached", () => { + it("should open the configuration dialog immediately", async () => { + const { wrapper } = getWrapper({ + element: EMPTY_TEST_ELEMENT, + isEditMode: true, + }); + + useSharedLastCreatedElementMock.lastCreatedElementId.value = + EMPTY_TEST_ELEMENT.id; + + await Vue.nextTick(); + + const dialog = wrapper.find( + '[data-testid="board-external-tool-element-configuration-dialog"]' + ); + + expect(dialog.props("isOpen")).toEqual(true); + }); + it("should not load the display data", async () => { getWrapper({ element: EMPTY_TEST_ELEMENT, diff --git a/src/components/feature-board-external-tool-element/ExternalToolElement.vue b/src/components/feature-board-external-tool-element/ExternalToolElement.vue index b1db816beb..163c7af49b 100644 --- a/src/components/feature-board-external-tool-element/ExternalToolElement.vue +++ b/src/components/feature-board-external-tool-element/ExternalToolElement.vue @@ -73,9 +73,11 @@ import { Ref, ref, toRef, + watch, } from "vue"; import ExternalToolElementConfigurationDialog from "./ExternalToolElementConfigurationDialog.vue"; import ExternalToolElementMenu from "./ExternalToolElementMenu.vue"; +import { useSharedLastCreatedElement } from "@util-board"; export default defineComponent({ components: { @@ -113,6 +115,16 @@ export default defineComponent({ autofocus.value = true; }); + const { lastCreatedElementId, resetLastCreatedElementId } = + useSharedLastCreatedElement(); + + watch(lastCreatedElementId, (newValue) => { + if (newValue !== undefined && newValue === props.element.id) { + isConfigurationDialogOpen.value = true; + resetLastCreatedElementId(); + } + }); + const hasLinkedTool: ComputedRef = computed( () => !!modelValue.value.contextExternalToolId ); diff --git a/src/components/feature-board/card/CardHost.vue b/src/components/feature-board/card/CardHost.vue index 2473df9048..0682fbaa79 100644 --- a/src/components/feature-board/card/CardHost.vue +++ b/src/components/feature-board/card/CardHost.vue @@ -96,12 +96,7 @@ import { BoardMenuActionDelete, BoardMenuActionEdit, } from "@ui-board"; -import { - useDebounceFn, - useElementHover, - useElementSize, - watchDebounced, -} from "@vueuse/core"; +import { useDebounceFn, useElementHover, useElementSize } from "@vueuse/core"; import { computed, defineComponent, ref, toRef } from "vue"; import { useAddElementDialog } from "../shared/AddElementDialog.composable"; import CardAddElementMenu from "./CardAddElementMenu.vue"; @@ -111,6 +106,7 @@ import CardTitle from "./CardTitle.vue"; import ContentElementList from "./ContentElementList.vue"; import CardHostDetailView from "./CardHostDetailView.vue"; import { mdiArrowExpand } from "@mdi/js"; +import { delay } from "@/utils/helpers"; export default defineComponent({ name: "CardHost", @@ -172,7 +168,11 @@ export default defineComponent({ const onStartEditMode = () => startEditMode(); - const onEndEditMode = () => stopEditMode(); + const onEndEditMode = async () => { + stopEditMode(); + await delay(300); + updateCardHeight(cardHostHeight.value); + }; const onOpenDetailView = () => (isDetailView.value = true); const onCloseDetailView = () => (isDetailView.value = false); @@ -204,15 +204,6 @@ export default defineComponent({ return "hidden"; }); - watchDebounced( - cardHostHeight, - (newHeight: number) => updateCardHeight(newHeight), - { - debounce: 500, - maxWait: 2000, - } - ); - return { boardMenuClasses, isLoading, diff --git a/src/components/rooms/RoomVideoConferenceCard.vue b/src/components/rooms/RoomVideoConferenceCard.vue index b5f2ecaee7..cfa674798d 100644 --- a/src/components/rooms/RoomVideoConferenceCard.vue +++ b/src/components/rooms/RoomVideoConferenceCard.vue @@ -41,7 +41,7 @@