N8n 3195 input panel

packages/design-system/src/components/N8nButton/Button.stories.js

@@ -13,7 +13,7 @@ export default {
 		},
 		type: {
 			control: 'select',
-			options: ['primary', 'outline', 'light', 'text'],
+			options: ['primary', 'outline', 'light', 'text', 'tertiary'],
 		},
 		size: {
 			control: {
@@ -96,6 +96,12 @@ Outline.args = {
 	label: 'Button',
 };
 
+export const Tertiary = ManyTemplate.bind({});
+Tertiary.args = {
+	type: 'tertiary',
+	label: 'Button',
+};
+
 export const Light = ManyTemplate.bind({});
 Light.args = {
 	type: 'light',

packages/design-system/src/components/N8nButton/Button.vue

@@ -47,7 +47,7 @@ export default {
 			type: String,
 			default: 'primary',
 			validator: (value: string): boolean =>
-				['primary', 'outline', 'light', 'text'].includes(value),
+				['primary', 'outline', 'light', 'text', 'tertiary'].includes(value),
 		},
 		theme: {
 			type: String,
@@ -107,8 +107,8 @@ export default {
 		};
 	},
 	getClass(props: { type: string; theme?: string, transparentBackground: boolean }, $style: any): string {
-		const theme = props.type === 'text'
-			? 'text'
+		const theme = props.type === 'text' || props.type === 'tertiary'
+			? props.type
 			: `${props.type}-${props.theme || 'primary'}`;
 
 		if (props.transparentBackground) {
@@ -293,6 +293,20 @@ $color-danger-shade: lightness(
 	--button-active-border-color: transparent;
 }
 
+.tertiary {
+	composes: button;
+	font-weight: var(--font-weight-regular) !important;
+	--button-color: var(--color-text-dark);
+	--button-border-color: var(--color-foreground-base);
+	--button-background-color: var(--color-background-base);
+
+	--button-active-background-color: var(--color-primary-tint-2);
+	--button-active-color: var(--color-primary);
+	--button-active-border-color: var(--color-primary);
+
+	--button-disabled-border-color: var(--color-foreground-xdark);
+}
+
 .transparent {
 	--button-background-color: transparent;
 	--button-active-background-color: transparent;

packages/design-system/src/components/N8nInfoTip/InfoTip.vue

@@ -65,7 +65,7 @@ export default {
 
 .tooltip {
 	composes: base;
-	display: inline-block;
+	display: inline-flex;
 }
 
 .info-light {

packages/design-system/src/components/N8nRadioButtons/RadioButton.vue

@@ -47,7 +47,7 @@ export default {
 
 .button {
 	border-radius: 0;
-	padding: 0 var(--spacing-s);
+	padding: 0 var(--spacing-xs);
 	display: flex;
 	align-items: center;
 	height: 26px;

packages/design-system/src/components/N8nSelect/Select.vue

@@ -82,6 +82,9 @@ export default {
 		limitPopperWidth: {
 			type: Boolean,
 		},
+		noDataText: {
+			type: String,
+		},
 	},
 	methods: {
 		getSize(size: string): string | undefined {

packages/design-system/src/components/N8nSpinner/Spinner.stories.js

@@ -10,6 +10,12 @@ export default {
 				options: ['small', 'medium', 'large'],
 			},
 		},
+		type: {
+			control: {
+				type: 'select',
+				options: ['dots', 'ring'],
+			},
+		},
 	},
 };
 

packages/design-system/src/components/N8nSpinner/Spinner.vue

@@ -1,10 +1,14 @@
 <template functional>
-	<component
-		:is="$options.components.N8nIcon"
-		icon="spinner"
-		:size="props.size"
-		spin
-	/>
+	<span>
+		<div v-if="props.type === 'ring'" class="lds-ring"><div></div><div></div><div></div><div></div></div>
+		<component
+			v-else
+			:is="$options.components.N8nIcon"
+			icon="spinner"
+			:size="props.size"
+			spin
+		/>
+	</span>
 </template>
 
 <script lang="ts">
@@ -22,6 +26,51 @@ export default {
 				return ['small', 'medium', 'large'].includes(value);
 			},
 		},
+		type: {
+			type: String,
+			validator: function (value: string): boolean {
+				return ['dots', 'ring'].includes(value);
+			},
+			default: 'dots',
+		},
 	},
 };
 </script>
+
+<style lang="scss">
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  border: 4px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: var(--color-primary) transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+</style>

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -13,7 +13,7 @@
 					target="_blank"
 					:href="option.href"
 					:class="[$style.link, $style.tab]"
-					@click="handleTabClick"
+					@click="() => handleTabClick(option.value)"
 				>
 					<div>
 						{{ option.label }}
@@ -168,7 +168,7 @@ export default Vue.extend({
 
 .button {
 	position: absolute;
-	background-color: var(--color-background-light);
+	background-color: var(--color-background-base);
 	z-index: 1;
 	height: 24px;
 	width: 10px;

packages/design-system/theme/src/common/var.scss

@@ -691,7 +691,7 @@ $button-disabled-background-color: var(
 	var(--color-foreground-base)
 );
 /// color||Color|0
-$button-disabled-border-color: var(--border-color-base);
+$button-disabled-border-color: var(--button-disabled-border-color, var(--border-color-base));
 
 /// color||Color|0
 $button-primary-border-color: var(--color-primary);

packages/editor-ui/src/Interface.ts

@@ -340,6 +340,7 @@ export interface IExecutionResponse extends IExecutionBase {
 	id: string;
 	data: IRunExecutionData;
 	workflowData: IWorkflowDb;
+	executedNode?: string;
 }
 
 export interface IExecutionShortResponse {
@@ -840,6 +841,8 @@ export interface IModalState {
 	activeId?: string | null;
 }
 
+export type IRunDataDisplayMode = 'table' | 'json' | 'binary';
+
 export interface IUiState {
 	sidebarMenuCollapsed: boolean;
 	modalStack: string[];
@@ -848,6 +851,16 @@ export interface IUiState {
 	};
 	isPageLoading: boolean;
 	currentView: string;
+	ndv: {
+		sessionId: string;
+		input: {
+			displayMode: IRunDataDisplayMode;
+		};
+		output: {
+			displayMode: IRunDataDisplayMode;
+		};
+	};
+	mainPanelPosition: number;
 }
 
 export type ILogLevel = 'info' | 'debug' | 'warn' | 'error' | 'verbose';

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

@@ -101,7 +101,7 @@ export default mixins(
 	z-index: 10;
 	width: 100%;
 	height: calc(100% - 50px);
-	background-color: #f9f9f9;
+	background-color: var(--color-background-base);
 	overflow: hidden;
 	text-align: center;
 

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

@@ -10,6 +10,7 @@
 			<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
 				<n8n-button
 					v-if="parameter.options.length === 1"
+					type="tertiary"
 					fullWidth
 					@click="optionSelected(parameter.options[0].name)"
 					:label="getPlaceholderText"

packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue

@@ -7,6 +7,7 @@
 				:value="credentialData[parameter.name]"
 				:documentationUrl="documentationUrl"
 				:showValidationWarnings="showValidationWarnings"
+				eventSource="credentials"
 				@change="valueChanged"
 			/>
 		</form>