From 7f775af63a76d1163d82f309c93898d35401e20f Mon Sep 17 00:00:00 2001
From: Senem Dilli <senem.dilli@knime.com>
Date: Tue, 10 Feb 2026 12:59:20 +0100
Subject: [PATCH 1/3] KDS-648: KdsEmptyState Implementation

KDS-648 (Empty State)
---
 .../js-src/package-lock.json                  | 63 +++++++++++++--
 .../js-src/package.json                       |  2 +-
 .../src/components/PythonViewPreview.vue      | 57 ++++---------
 .../js-src/src/components/PythonWorkspace.vue | 29 ++++++-
 .../__tests__/PythonViewPreview.test.ts       | 81 ++++++-------------
 .../__tests__/PythonWorkspace.test.ts         | 15 ++--
 6 files changed, 129 insertions(+), 118 deletions(-)

diff --git a/org.knime.python3.scripting.nodes/js-src/package-lock.json b/org.knime.python3.scripting.nodes/js-src/package-lock.json
index 9e6edcd96..d9ac0db8f 100644
--- a/org.knime.python3.scripting.nodes/js-src/package-lock.json
+++ b/org.knime.python3.scripting.nodes/js-src/package-lock.json
@@ -10,7 +10,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@knime/components": "1.43.0",
-        "@knime/kds-components": "0.5.2",
+        "@knime/kds-components": "0.6.6",
         "@knime/scripting-editor": "0.0.121",
         "@knime/styles": "1.8.0",
         "@knime/ui-extension-service": "2.6.0",
@@ -2812,13 +2812,13 @@
       }
     },
     "node_modules/@knime/kds-components": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@knime/kds-components/-/kds-components-0.5.2.tgz",
-      "integrity": "sha512-rQ+hSmvhj9GiFBx0myILWGnFO0eLV+KdquGlp+nogobhZsgfi4HAf1gGKz9lFfA6El/ZJanKE7VHbmF3et6RHg==",
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/@knime/kds-components/-/kds-components-0.6.6.tgz",
+      "integrity": "sha512-s3w22hLEf+nhMGgCSJ8/Yr2/fPPR85cc0AGp6S0T4fR2TkCmGQmYFUxvnXnvHH5yi7fNlU4CUxShNMQGGb5g2g==",
       "license": "GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)",
       "dependencies": {
-        "@knime/kds-styles": "^0.5.2",
-        "@knime/utils": "^1.8.0",
+        "@knime/kds-styles": "^0.6.6",
+        "@knime/utils": "^1.9.2",
         "consola": "^3.4.2"
       },
       "engines": {
@@ -2830,6 +2830,57 @@
         "vue": "~3.5.0"
       }
     },
+    "node_modules/@knime/kds-components/node_modules/@fontsource/roboto": {
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.9.tgz",
+      "integrity": "sha512-ZTkyHiPk74B/aj8BZWbsxD5Yu+Lq+nR64eV4wirlrac2qXR7jYk2h6JlLYuOuoruTkGQWNw2fMuKNavw7/rg0w==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@knime/kds-components/node_modules/@fontsource/roboto-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto-mono/-/roboto-mono-5.2.8.tgz",
+      "integrity": "sha512-M0XPRcvkOKiTPooXwX7yJSNpuad3CPcQwsADBfnopz3apBs+VKI47pc42mlvAxJjNTRauu5rndSxHc8F52bR7Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@knime/kds-components/node_modules/@knime/kds-styles": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/@knime/kds-styles/-/kds-styles-0.6.6.tgz",
+      "integrity": "sha512-/e1grzr9tUm7ljgCCMGG2s1uqq2NmSzaye/I2jkdkzi7gOYp3zo+7OztBaQuQG42Pn64YVpMuFSc3kR+W+yVwQ==",
+      "license": "GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)",
+      "dependencies": {
+        "@fontsource/roboto": "5.2.9",
+        "@fontsource/roboto-condensed": "5.2.8",
+        "@fontsource/roboto-mono": "5.2.8",
+        "modern-normalize": "3.0.1"
+      },
+      "engines": {
+        "node": "24.10.0",
+        "npm": "please-use-pnpm"
+      }
+    },
+    "node_modules/@knime/kds-components/node_modules/@knime/utils": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@knime/utils/-/utils-1.9.2.tgz",
+      "integrity": "sha512-f5Q+xTdTH/ZcslqC7PhQ9ansUO2BxI+z3VPtdMGO8mmZoHYMNu4z8wGvGtJeL5cs1QED0FdPxVuRufuyWrjyIQ==",
+      "license": "GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)",
+      "dependencies": {
+        "date-fns": "2.30.0",
+        "date-fns-tz": "2.0.0",
+        "dompurify": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=22 <25"
+      },
+      "peerDependencies": {
+        "consola": "3.x"
+      }
+    },
     "node_modules/@knime/kds-styles": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/@knime/kds-styles/-/kds-styles-0.5.5.tgz",
diff --git a/org.knime.python3.scripting.nodes/js-src/package.json b/org.knime.python3.scripting.nodes/js-src/package.json
index 1d2eeef9f..ba22421b3 100644
--- a/org.knime.python3.scripting.nodes/js-src/package.json
+++ b/org.knime.python3.scripting.nodes/js-src/package.json
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@knime/components": "1.43.0",
-    "@knime/kds-components": "0.5.2",
+    "@knime/kds-components": "0.6.6",
     "@knime/scripting-editor": "0.0.121",
     "@knime/styles": "1.8.0",
     "@knime/ui-extension-service": "2.6.0",
diff --git a/org.knime.python3.scripting.nodes/js-src/src/components/PythonViewPreview.vue b/org.knime.python3.scripting.nodes/js-src/src/components/PythonViewPreview.vue
index b6409b54d..7d14c1085 100644
--- a/org.knime.python3.scripting.nodes/js-src/src/components/PythonViewPreview.vue
+++ b/org.knime.python3.scripting.nodes/js-src/src/components/PythonViewPreview.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 
-import { Button } from "@knime/components";
+import { KdsEmptyState } from "@knime/kds-components";
 
-import { pythonScriptingService } from "@/python-scripting-service";
-import { usePythonPreviewStatusStore, useSessionStatusStore } from "@/store";
+import { usePythonPreviewStatusStore } from "@/store";
 
 const IFRAME_SOURCE = "./preview.html";
 
 const iframe = ref<HTMLIFrameElement | null>(null);
 const pythonPreviewStatus = usePythonPreviewStatusStore();
-const sessionStatus = useSessionStatusStore();
 
 onMounted(() => {
   pythonPreviewStatus.updateViewCallback = () => {
@@ -32,29 +30,17 @@ onMounted(() => {
         :src="IFRAME_SOURCE"
       />
     </div>
-    <div
-      v-show="!pythonPreviewStatus.hasValidView"
-      class="placeholder-container"
-    >
-      <img id="preview-img" src="/assets/plot-placeholder.svg" />
-      <div v-if="!pythonPreviewStatus.isExecutedOnce" class="placeholder-text">
-        Run the code to see the preview.
-      </div>
-      <div v-else class="placeholder-text">
-        The view cannot be displayed.<br />
-        Check the error message and re-execute the script.
-      </div>
-      <Button
-        :with-border="true"
-        compact
-        :disabled="
-          !sessionStatus.isRunningSupported ||
-          sessionStatus.status === 'RUNNING_ALL' ||
-          sessionStatus.status === 'RUNNING_SELECTED'
-        "
-        @click="pythonScriptingService.runScript()"
-        >Run code</Button
-      >
+    <div v-if="!pythonPreviewStatus.hasValidView" class="empty-state-container">
+      <KdsEmptyState
+        v-if="!pythonPreviewStatus.isExecutedOnce"
+        headline="Run the code to see the preview"
+        description="Views generated by the Python script will be displayed here."
+      />
+      <KdsEmptyState
+        v-else
+        headline="The view cannot be displayed"
+        description="Check the error message and re-execute the script."
+      />
     </div>
   </div>
 </template>
@@ -69,26 +55,11 @@ iframe,
   border: none;
 }
 
-.placeholder-container {
+.empty-state-container {
   display: flex;
-  flex-direction: column;
-  gap: 20px;
   align-items: center;
   justify-content: center;
   width: 100%;
-  min-width: 15vw;
   height: 100%;
 }
-
-#preview-img {
-  max-width: 80px;
-  height: auto;
-  opacity: 0.3;
-}
-
-.placeholder-text {
-  margin-right: 20px;
-  margin-left: 20px;
-  text-align: center;
-}
 </style>
diff --git a/org.knime.python3.scripting.nodes/js-src/src/components/PythonWorkspace.vue b/org.knime.python3.scripting.nodes/js-src/src/components/PythonWorkspace.vue
index fd24de55c..48f9c92d0 100644
--- a/org.knime.python3.scripting.nodes/js-src/src/components/PythonWorkspace.vue
+++ b/org.knime.python3.scripting.nodes/js-src/src/components/PythonWorkspace.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { type Ref, onMounted, onUnmounted, ref } from "vue";
+import { type Ref, computed, onMounted, onUnmounted, ref } from "vue";
 import { useDebounceFn, useResizeObserver } from "@vueuse/core";
 
-import { KdsButton } from "@knime/kds-components";
+import { KdsButton, KdsEmptyState } from "@knime/kds-components";
 
 import {
   getPythonInitialData,
   pythonScriptingService,
 } from "@/python-scripting-service";
-import { usePythonPreviewStatusStore, useSessionStatusStore } from "@/store";
+import {
+  usePythonPreviewStatusStore,
+  useSessionStatusStore,
+  useWorkspaceStore,
+} from "@/store";
 
 import PythonWorkspaceBody from "./PythonWorkspaceBody.vue";
 import PythonWorkspaceHeader, {
@@ -35,6 +39,10 @@ const useTotalWidth = () => {
   return { totalWidth, headerWidths };
 };
 
+// check workspace store for emptiness to decide whether to show the workspace or the empty state
+const workspaceStore = useWorkspaceStore();
+const isEmpty = computed(() => (workspaceStore?.workspace?.length ?? 0) === 0);
+
 const resetButtonEnabled: Ref<boolean> = ref(false);
 const pythonPreviewStatus = usePythonPreviewStatusStore();
 const resetWorkspace = async () => {
@@ -62,7 +70,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="resizeContainer" class="container">
+  <div v-if="!isEmpty" ref="resizeContainer" class="container">
     <div ref="workspaceRef" class="workspace">
       <table>
         <PythonWorkspaceHeader
@@ -87,6 +95,12 @@ onMounted(() => {
       />
     </div>
   </div>
+  <div v-else class="container-empty-state">
+    <KdsEmptyState
+      headline="No temporary values yet"
+      description="Run the Python script to display temporary values generated during execution."
+    />
+  </div>
 </template>
 
 <style scoped lang="postcss">
@@ -97,6 +111,13 @@ onMounted(() => {
   height: 100%;
 }
 
+.container-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
 .workspace {
   --controls-height: 40px;
 
diff --git a/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonViewPreview.test.ts b/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonViewPreview.test.ts
index b6234b447..d6896cc01 100644
--- a/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonViewPreview.test.ts
+++ b/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonViewPreview.test.ts
@@ -1,11 +1,10 @@
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
-import { ref } from "vue";
 import { mount } from "@vue/test-utils";
 
-import { Button } from "@knime/components";
-import { editor, getScriptingService } from "@knime/scripting-editor";
+import { KdsEmptyState } from "@knime/kds-components";
+import { getScriptingService } from "@knime/scripting-editor";
 
-import { usePythonPreviewStatusStore, useSessionStatusStore } from "@/store";
+import { usePythonPreviewStatusStore } from "@/store";
 import PythonViewPreview from "../PythonViewPreview.vue";
 
 describe("PythonViewPreview", () => {
@@ -23,6 +22,7 @@ describe("PythonViewPreview", () => {
   });
 
   it("renders iframe", () => {
+    previewStatusStore.hasValidView = true;
     const wrapper = mount(PythonViewPreview);
     const iframe = wrapper.find("iframe");
     expect(iframe.exists()).toBeTruthy();
@@ -36,6 +36,7 @@ describe("PythonViewPreview", () => {
   });
 
   it("replaces iframe when update view callback is called", () => {
+    previewStatusStore.hasValidView = true;
     // Mock the iframe's contentWindow
     const mockIframeContentWindow = {
       location: {
@@ -64,76 +65,40 @@ describe("PythonViewPreview", () => {
     previewStatusStore.hasValidView = true;
     const wrapper = mount(PythonViewPreview);
     expect(wrapper.find(".iframe-container").isVisible()).toBeTruthy();
-    expect(wrapper.find(".placeholder-container").isVisible()).toBeFalsy();
+    expect(wrapper.find(".empty-state-container").exists()).toBeFalsy();
   });
 
-  describe("placeholder", () => {
-    it("shows placeholder if valid view does not exist", () => {
+  describe("empty-state", () => {
+    it("shows empty state component if valid view does not exist", () => {
       const wrapper = mount(PythonViewPreview);
       expect(wrapper.find(".iframe-container").isVisible()).toBeFalsy();
-      expect(wrapper.find(".placeholder-container").isVisible()).toBeTruthy();
-      expect(wrapper.find("#preview-img").isVisible()).toBeTruthy();
+      expect(wrapper.find(".empty-state-container").isVisible()).toBeTruthy();
+      expect(wrapper.findComponent(KdsEmptyState).exists()).toBeTruthy();
     });
 
-    it("shows placeholder text before first execution", () => {
+    it("shows empty state component before first execution", () => {
       const wrapper = mount(PythonViewPreview);
+      const emptyState = wrapper.findComponent(KdsEmptyState);
       expect(wrapper.find(".iframe-container").isVisible()).toBeFalsy();
-      expect(wrapper.find(".placeholder-container").isVisible()).toBeTruthy();
-      expect(wrapper.find(".placeholder-text").text()).toContain(
-        "Run the code to see the preview.",
+      expect(wrapper.find(".empty-state-container").isVisible()).toBeTruthy();
+      expect(emptyState.props().headline).toBe(
+        "Run the code to see the preview",
+      );
+      expect(emptyState.props().description).toBe(
+        "Views generated by the Python script will be displayed here.",
       );
     });
 
     it("shows error text after first execution", () => {
       previewStatusStore.isExecutedOnce = true;
       const wrapper = mount(PythonViewPreview);
+      const emptyState = wrapper.findComponent(KdsEmptyState);
       expect(wrapper.find(".iframe-container").isVisible()).toBeFalsy();
-      expect(wrapper.find(".placeholder-container").isVisible()).toBeTruthy();
-      expect(wrapper.find(".placeholder-text").text()).toContain(
-        "The view cannot be displayed.",
+      expect(wrapper.find(".empty-state-container").isVisible()).toBeTruthy();
+      expect(emptyState.props().headline).toBe("The view cannot be displayed");
+      expect(emptyState.props().description).toBe(
+        "Check the error message and re-execute the script.",
       );
     });
-
-    it("placholder button executes script", () => {
-      useSessionStatusStore().isRunningSupported = true;
-      editor.useMainCodeEditorStore().value = { text: ref("myScript") } as any;
-      previewStatusStore.hasValidView = false;
-      const wrapper = mount(PythonViewPreview);
-      wrapper.find("button").trigger("click");
-      expect(sendToServiceMock).toHaveBeenCalledWith("runScript", ["myScript"]);
-    });
-
-    it("shows placeholder button", () => {
-      useSessionStatusStore().status = "IDLE";
-      useSessionStatusStore().isRunningSupported = true;
-      const wrapper = mount(PythonViewPreview);
-      const button = wrapper.findComponent(Button);
-      expect(button.exists()).toBeTruthy();
-      expect(button.props().disabled).toBeFalsy();
-    });
-
-    it("disables placeholder button if no inputs available", () => {
-      useSessionStatusStore().status = "IDLE";
-      useSessionStatusStore().isRunningSupported = false;
-      const wrapper = mount(PythonViewPreview);
-      const button = wrapper.findComponent(Button);
-      expect(button.props().disabled).toBeTruthy();
-    });
-
-    it("disables placeholder button if running all", () => {
-      useSessionStatusStore().status = "RUNNING_ALL";
-      useSessionStatusStore().isRunningSupported = true;
-      const wrapper = mount(PythonViewPreview);
-      const button = wrapper.findComponent(Button);
-      expect(button.props().disabled).toBeTruthy();
-    });
-
-    it("disables placeholder button if running selected lines", () => {
-      useSessionStatusStore().status = "RUNNING_SELECTED";
-      useSessionStatusStore().isRunningSupported = true;
-      const wrapper = mount(PythonViewPreview);
-      const button = wrapper.findComponent(Button);
-      expect(button.props().disabled).toBeTruthy();
-    });
   });
 });
diff --git a/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonWorkspace.test.ts b/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonWorkspace.test.ts
index c33e27566..be679c9f1 100644
--- a/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonWorkspace.test.ts
+++ b/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonWorkspace.test.ts
@@ -10,6 +10,8 @@ import { useSessionStatusStore, useWorkspaceStore } from "@/store";
 import PythonWorkspace from "../PythonWorkspace.vue";
 import { type ColumnSizes } from "../PythonWorkspaceHeader.vue";
 
+vi.mock("@/mock-data");
+
 type WorkspaceState = {
   headerWidths?: ColumnSizes;
   totalWidth?: number;
@@ -17,13 +19,18 @@ type WorkspaceState = {
 };
 
 describe("PythonWorkspace", () => {
-  const doMount = async ({ props } = { props: {} }) => {
+  const defaultWorkspace = [{ name: "test", value: "test", type: "test" }];
+
+  const doMount = async (
+    { props, workspace } = { props: {}, workspace: defaultWorkspace },
+  ) => {
     vi.mocked(getScriptingService().sendToService).mockImplementation(() => {
       return Promise.resolve({
         status: "SUCCESS",
         description: "mocked execution info",
       });
     });
+    useWorkspaceStore().workspace = workspace;
     const wrapper = mount(PythonWorkspace, { props });
     await flushPromises();
     const sessionStatus = useSessionStatusStore();
@@ -102,13 +109,9 @@ describe("PythonWorkspace", () => {
 
   it("button click should reset store", async () => {
     const { resetButton } = await doMount();
-    const store = useWorkspaceStore();
-    expect(store.workspace).toBeUndefined();
-    store.workspace = [{ name: "test", value: "test", type: "test" }];
-    expect(store.workspace).toBeDefined();
     resetButton.trigger("click");
     await flushPromises();
-    expect(store.workspace).toStrictEqual([]);
+    expect(useWorkspaceStore().workspace).toStrictEqual([]);
   });
 
   it("reset button enabled if inputs are available", async () => {

From d19f3f41f5f411fcdfbbceb50be05e6c1fde4d49 Mon Sep 17 00:00:00 2001
From: Benjamin Wilhelm <benjamin.wilhelm@knime.com>
Date: Tue, 10 Feb 2026 15:01:08 +0100
Subject: [PATCH 2/3] KDS-648: Ignore test files from sonar coverage report

KDS-648 (Empty State)
---
 org.knime.python3.scripting.nodes/js-src/pom.xml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/org.knime.python3.scripting.nodes/js-src/pom.xml b/org.knime.python3.scripting.nodes/js-src/pom.xml
index 36e482d19..fbfcb4237 100644
--- a/org.knime.python3.scripting.nodes/js-src/pom.xml
+++ b/org.knime.python3.scripting.nodes/js-src/pom.xml
@@ -22,6 +22,7 @@
 		<sonar.nodejs.executable>${project.build.directory}/node/node</sonar.nodejs.executable>
 		<sonar.javascript.lcov.reportPaths>coverage/lcov.info</sonar.javascript.lcov.reportPaths>
 		<sonar.exclusions>node_modules/**/*,dist/**/*,src/dev/**/*,.nyc_output/**/*,coverage/**/*,*.log,config/**/*,**/config.js,**/*.config.js,buildtools/**</sonar.exclusions>
+		<sonar.coverage.exclusions>**/__tests__/**,**/__mocks__/**,test-setup/**</sonar.coverage.exclusions>
 		<sonar.css.stylelint.reportPaths>target/stylelint.json</sonar.css.stylelint.reportPaths>
 		<sonar.eslint.reportPaths>target/eslint.json</sonar.eslint.reportPaths>
 		<node.version>v22.11.0</node.version>

From f79f83711a485c7e16c0e44048c2ea663c8ec747 Mon Sep 17 00:00:00 2001
From: Senem Dilli <senem.dilli@knime.com>
Date: Tue, 10 Feb 2026 17:06:38 +0100
Subject: [PATCH 3/3] KDS-648: Remove vi.mock

KDS-648 (Empty State)
---
 .../js-src/src/components/__tests__/PythonWorkspace.test.ts     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonWorkspace.test.ts b/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonWorkspace.test.ts
index be679c9f1..03b95149c 100644
--- a/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonWorkspace.test.ts
+++ b/org.knime.python3.scripting.nodes/js-src/src/components/__tests__/PythonWorkspace.test.ts
@@ -10,8 +10,6 @@ import { useSessionStatusStore, useWorkspaceStore } from "@/store";
 import PythonWorkspace from "../PythonWorkspace.vue";
 import { type ColumnSizes } from "../PythonWorkspaceHeader.vue";
 
-vi.mock("@/mock-data");
-
 type WorkspaceState = {
   headerWidths?: ColumnSizes;
   totalWidth?: number;