DEVOPS-3809: Restore accidentally reverted changes

DEVOPS-3809 (Incremental version bumps for AP 5.12.0)

Author: LeoWoerteler

org.knime.ui.js/package.json

@@ -127,7 +127,9 @@
       "@knime/knime-ui-table@0.5.22>@knime/components": "1.33.0",
       "lodash-es@>=4.0.0 <=4.17.22": ">=4.17.23",
       "lodash@>=4.0.0 <=4.17.22": ">=4.17.23",
-      "markdown-it@>=13.0.0 <14.1.1": ">=14.1.1"
+      "markdown-it@>=13.0.0 <14.1.1": ">=14.1.1",
+      "minimatch@<3.1.3": ">=3.1.3",
+      "minimatch@<3.1.4": ">=3.1.4"
     },
     "onlyBuiltDependencies": [
       "esbuild",

org.knime.ui.js/pnpm-lock.yaml

@@ -48,6 +48,12 @@ const tabToggles = computed(() => {
   );
 });
 
+const isTabItemDisabled = (
+  item: ReturnType<typeof ports.toRenderablePortViewState>[number],
+) => {
+  return !item.detachable || item.disabled;
+};
+
 const setFirstTab = () => {
   activeView.value = tabToggles.value.at(0)
     ? Number(tabToggles.value.at(0)!.id)
@@ -80,8 +86,9 @@ const openInNewWindow = (item: { id: string } | null = null) => {
     >
       <template v-if="canOpenDetatchedWindow" #default="{ item }">
         <Button
+          data-test-id="toggle-with-detach"
           class="open-window"
-          :disabled="!item.canDetach || item.disabled"
+          :disabled="isTabItemDisabled(item)"
           :title="`Open ${item.text} view in new window`"
           @click="openInNewWindow(item)"
         >

org.knime.ui.js/src/components/uiExtensions/portViews/PortViewTabToggles.vue

@@ -0,0 +1,140 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+
+import { ValueSwitch } from "@knime/components";
+
+import { NodeState } from "@/api/gateway-api/generated-api";
+import {
+  PORT_TYPE_IDS,
+  createAvailablePortTypes,
+  createNativeNode,
+  createPort,
+} from "@/test/factories";
+import { mockStores } from "@/test/utils/mockStores";
+import PortViewTabToggles from "../PortViewTabToggles.vue";
+
+describe("PortViewTabToggles.vue", () => {
+  type ComponentProps = InstanceType<typeof PortViewTabToggles>["$props"];
+
+  type MountOpts = {
+    props?: Partial<ComponentProps>;
+  };
+
+  const doMount = ({ props }: MountOpts = {}) => {
+    const port = createPort({ typeId: PORT_TYPE_IDS.BufferedDataTable });
+    const node = createNativeNode({
+      state: {
+        executionState: NodeState.ExecutionStateEnum.EXECUTED,
+      },
+      outPorts: [port],
+    });
+    const availablePortTypes = createAvailablePortTypes();
+
+    const mockedStores = mockStores();
+    mockedStores.applicationStore.setAvailablePortTypes(availablePortTypes);
+
+    const wrapper = mount(PortViewTabToggles, {
+      props: {
+        uniquePortKey: "foo",
+        selectedNode: node,
+        selectedPort: port,
+        ...props,
+      },
+      global: {
+        plugins: [mockedStores.testingPinia],
+      },
+    });
+
+    return { wrapper, mockedStores };
+  };
+
+  it("renders correctly for CONFIGURED node", () => {
+    const port = createPort({ typeId: PORT_TYPE_IDS.BufferedDataTable });
+    const node = createNativeNode({
+      state: {
+        executionState: NodeState.ExecutionStateEnum.CONFIGURED,
+      },
+      outPorts: [port],
+    });
+
+    const { wrapper } = doMount({
+      props: { selectedNode: node, selectedPort: port },
+    });
+
+    expect(wrapper.findComponent(ValueSwitch).props("possibleValues")).toEqual([
+      {
+        detachable: false,
+        disabled: false,
+        id: "0",
+        text: "Table",
+      },
+      {
+        detachable: true,
+        disabled: true,
+        id: "2",
+        text: "Statistics",
+      },
+    ]);
+
+    expect(wrapper.findAll('[data-test-id="toggle-with-detach"]')).toHaveLength(
+      2,
+    );
+    expect(
+      wrapper
+        .findAll('[data-test-id="toggle-with-detach"]')
+        .at(0)
+        ?.attributes("disabled"),
+    ).toBeFalsy();
+    expect(
+      wrapper
+        .findAll('[data-test-id="toggle-with-detach"]')
+        .at(1)
+        ?.attributes("disabled"),
+    ).toBeDefined();
+  });
+
+  it("renders correctly for EXECUTED node", () => {
+    const port = createPort({ typeId: PORT_TYPE_IDS.BufferedDataTable });
+    const node = createNativeNode({
+      state: {
+        executionState: NodeState.ExecutionStateEnum.EXECUTED,
+      },
+      outPorts: [port],
+    });
+
+    const { wrapper } = doMount({
+      props: { selectedNode: node, selectedPort: port },
+    });
+
+    expect(wrapper.findComponent(ValueSwitch).props("possibleValues")).toEqual([
+      {
+        detachable: true,
+        disabled: false,
+        id: "1",
+        text: "Table",
+      },
+      {
+        detachable: true,
+        disabled: false,
+        id: "2",
+        text: "Statistics",
+      },
+    ]);
+
+    expect(wrapper.findAll('[data-test-id="toggle-with-detach"]')).toHaveLength(
+      2,
+    );
+    expect(
+      wrapper
+        .findAll('[data-test-id="toggle-with-detach"]')
+        .at(0)
+        ?.attributes("disabled"),
+    ).toBeFalsy();
+    expect(
+      wrapper
+        .findAll('[data-test-id="toggle-with-detach"]')
+        .at(1)
+        ?.attributes("disabled"),
+    ).toBeFalsy();
+  });
+});

org.knime.ui.js/src/components/uiExtensions/portViews/__tests__/PortViewTabToggles.test.ts

@@ -72,14 +72,13 @@ const determinePastePosition = (params: {
   visibleFrame: GeometryBounds;
   clipboardContent: { objectBounds: GeometryBounds };
   isWorkflowEmpty: boolean;
-}): { position: XY; fillScreenAfterPaste?: boolean } => {
+}): { position: XY } => {
   const { clipboardContent, isWorkflowEmpty, visibleFrame } = params;
 
   if (isWorkflowEmpty) {
     consola.info("workflow is empty: paste to center");
     return {
       position: centerStrategy({ visibleFrame, clipboardContent }),
-      fillScreenAfterPaste: true,
     };
   }
 

org.knime.ui.js/src/lib/workflow-canvas/clipboard/index.ts

@@ -291,8 +291,8 @@ export const useClipboardInteractionsStore = defineStore(
         consola.info("Pasted workflow parts");
 
         // 1. Decide where to paste
-        const { position, fillScreenAfterPaste } = customPosition
-          ? { position: customPosition, fillScreenAfterPaste: false }
+        const { position } = customPosition
+          ? { position: customPosition }
           : clipboard.determinePastePosition({
               visibleFrame: canvasStore.value.getVisibleFrame,
               clipboardContent,
@@ -318,11 +318,6 @@ export const useClipboardInteractionsStore = defineStore(
           position,
         });
 
-        // 4. Execute hook and select pasted content
-        if (fillScreenAfterPaste) {
-          canvasStore.value.fillScreen();
-        }
-
         selectionStore.deselectAllObjects(nodeIds);
         selectionStore.selectAnnotations(annotationIds!);
       },