fix(editor): Never show Pinned Data Callout for Input Panel (#12446)

packages/editor-ui/src/components/RunData.test.ts

@@ -187,6 +187,28 @@ describe('RunData', () => {
 		expect(pinDataButton).toBeDisabled();
 	});
 
+	it('should render callout when data is pinned in output panel', async () => {
+		const { getByTestId } = render({
+			defaultRunItems: [],
+			displayMode: 'table',
+			pinnedData: [{ json: { name: 'Test' } }],
+			paneType: 'output',
+		});
+		const pinnedDataCallout = getByTestId('ndv-pinned-data-callout');
+		expect(pinnedDataCallout).toBeInTheDocument();
+	});
+
+	it('should not render callout when data is pinned in input panel', async () => {
+		const { queryByTestId } = render({
+			defaultRunItems: [],
+			displayMode: 'table',
+			pinnedData: [{ json: { name: 'Test' } }],
+			paneType: 'input',
+		});
+		const pinnedDataCallout = queryByTestId('ndv-pinned-data-callout');
+		expect(pinnedDataCallout).not.toBeInTheDocument();
+	});
+
 	it('should enable pin data button when data is not pinned', async () => {
 		const { getByTestId } = render({
 			defaultRunItems: [{ json: { name: 'Test' } }],

packages/editor-ui/src/components/RunData.vue

@@ -1277,10 +1277,16 @@ defineExpose({ enterEditMode });
 <template>
 	<div :class="['run-data', $style.container]" @mouseover="activatePane">
 		<N8nCallout
-			v-if="pinnedData.hasData.value && !editMode.enabled && !isProductionExecutionPreview"
+			v-if="
+				!isPaneTypeInput &&
+				pinnedData.hasData.value &&
+				!editMode.enabled &&
+				!isProductionExecutionPreview
+			"
 			theme="secondary"
 			icon="thumbtack"
 			:class="$style.pinnedDataCallout"
+			data-test-id="ndv-pinned-data-callout"
 		>
 			{{ i18n.baseText('runData.pindata.thisDataIsPinned') }}
 			<span v-if="!isReadOnlyRoute && !readOnlyEnv" class="ml-4xs">

packages/editor-ui/src/components/__snapshots__/InputPanel.test.ts.snap

@@ -7,105 +7,7 @@ exports[`InputPanel > should render 1`] = `
     data-test-id="ndv-input-panel"
     data-v-2e5cd75c=""
   >
-    <div
+    <!--v-if-->
-      class="n8n-callout callout secondary round pinnedDataCallout"
-      data-v-2e5cd75c=""
-      role="alert"
-    >
-      <div
-        class="messageSection"
-      >
-        <div
-          class="icon"
-        >
-          <span
-            class="n8n-text compact size-medium regular n8n-icon n8n-icon"
-          >
-            
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-thumbtack fa-w-12 medium"
-              data-icon="thumbtack"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              viewBox="0 0 384 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                class=""
-                d="M298.028 214.267L285.793 96H328c13.255 0 24-10.745 24-24V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v48c0 13.255 10.745 24 24 24h42.207L85.972 214.267C37.465 236.82 0 277.261 0 328c0 13.255 10.745 24 24 24h136v104.007c0 1.242.289 2.467.845 3.578l24 48c2.941 5.882 11.364 5.893 14.311 0l24-48a8.008 8.008 0 0 0 .845-3.578V352h136c13.255 0 24-10.745 24-24-.001-51.183-37.983-91.42-85.973-113.733z"
-                fill="currentColor"
-              />
-            </svg>
-            
-          </span>
-        </div>
-        <span
-          class="n8n-text size-small regular"
-        >
-          
-          
-          This data is pinned. 
-          <span
-            class="ml-4xs"
-            data-v-2e5cd75c=""
-          >
-            <a
-              class="n8n-link"
-              data-test-id="ndv-unpin-data"
-              data-v-2e5cd75c=""
-              target="_blank"
-            >
-              
-              <span
-                class="secondary-underline"
-              >
-                <span
-                  class="n8n-text size-small bold"
-                >
-                  
-                  
-                  Unpin
-                  
-                  
-                </span>
-              </span>
-              
-            </a>
-          </span>
-          
-          
-        </span>
-           
-        
-        
-      </div>
-      
-      <a
-        class="n8n-link"
-        data-v-2e5cd75c=""
-        href="https://docs.n8n.io/data/data-pinning/"
-        target="_blank"
-      >
-        
-        <span
-          class="secondary-underline"
-        >
-          <span
-            class="n8n-text size-small bold"
-          >
-            
-            
-            Learn more
-            
-            
-          </span>
-        </span>
-        
-      </a>
-      
-    </div>
     <!--v-if-->
     <div
       class="header"