add rename modal

packages/design-system/src/components/index.js

@@ -29,6 +29,7 @@ import Loading from 'element-ui/lib/loading';
 import MessageBox from 'element-ui/lib/message-box';
 import Message from 'element-ui/lib/message';
 import Notification from 'element-ui/lib/notification';
+import Popover from 'element-ui/lib/popover';
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 
 import N8nActionBox from './N8nActionBox';
@@ -128,6 +129,7 @@ export {
 	Message,
 	Notification,
 	CollapseTransition,
+	Popover,
 
 	locale,
 };

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

@@ -10,7 +10,6 @@
 					<n8n-button
 						:title="$locale.baseText('runData.executesThisNodeAfterExecuting', { interpolate: { nodeName: node.name } })"
 						:loading="workflowRunning"
-						icon="play-circle"
 						:label="$locale.baseText('runData.executeNode')"
 						@click.stop="runWorkflow(node.name, 'RunData.ExecuteNodeButton')"
 					/>
@@ -577,6 +576,7 @@ export default mixins(
 	> * {
 		padding: 0 var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
 		padding-bottom: var(--spacing-2xs);
+		font-size: var(--font-size-s);
 		cursor: pointer;
 		&:hover {
 			color: var(--color-primary);
@@ -623,7 +623,7 @@ export default mixins(
 	}
 
 	.header-side-menu {
-		padding: var(--spacing-s) var(--spacing-s) var(--spacing-l) var(--spacing-s);
+		padding: var(--spacing-s) var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
 		font-size: var(--font-size-l);
 		display: flex;
 

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

@@ -1,7 +1,22 @@
 <template>
-	<span :class="$style.container">
+	<span :class="$style.container" @click="onEdit">
 		<span :class="$style.iconWrapper"><NodeIcon :nodeType="nodeType" :size="18" /></span>
+		<el-popover
+			placement="right"
+			width="200"
+			:value="editName"
+			>
+			<p>Rename node</p>
+			<n8n-input size="small" v-model="newName" />
+			<div :class="$style.editButtons">
+				<n8n-button type="outline" size="small" @click="editName = false" label="Cancel" />
+				<n8n-button type="primary" size="small" @click="onRename" label="Rename" />
+			</div>
+			<span :class="$style.title" slot="reference">
 				{{name}}
+				<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" />
+			</span>
+		</el-popover>
 	</span>
 </template>
 
@@ -17,6 +32,22 @@ export default Vue.extend({
 		nodeType: {
 		},
 	},
+	data() {
+		return {
+			editName: false,
+			newName: '',
+		};
+	},
+	methods: {
+		onEdit() {
+			this.newName = this.name;
+			this.editName = true;
+		},
+		onRename() {
+			this.$emit('update', this.newName);
+			this.editName = false;
+		},
+	},
 });
 </script>
 
@@ -26,10 +57,37 @@ export default Vue.extend({
 	display: flex;
 	font-size: var(--font-size-m);
 	line-height: var(--font-line-height-compact);
+	overflow-wrap: anywhere;
+	height: 60px;
+  overflow: hidden;
+}
+
+.title {
+  text-overflow: ellipsis;
+
+	&:hover {
+		.editIcon {
+			display: inline-block;
+		}
+	}
 }
 
 .iconWrapper {
 	display: inline-flex;
 	margin-right: var(--spacing-2xs);
 }
+
+.editIcon {
+	display: none;
+	font-size: var(--font-size-2xs);
+}
+
+.editButtons {
+	text-align: right;
+	margin-top: var(--spacing-s);
+
+	> * {
+		margin-left: var(--spacing-4xs);
+	}
+}
 </style>

packages/editor-ui/src/plugins/components.ts

@@ -41,6 +41,7 @@ import {
 	Message,
 	Notification,
 	CollapseTransition,
+	Popover,
 
 	N8nActionBox,
 	N8nAvatar,
@@ -130,6 +131,8 @@ Vue.use(Badge);
 Vue.use(Card);
 Vue.use(ColorPicker);
 Vue.use(Container);
+Vue.use(Popover);
+
 Vue.use(VueAgile);
 
 Vue.component(CollapseTransition.name, CollapseTransition);

packages/editor-ui/src/plugins/icons.ts

@@ -61,6 +61,7 @@ import {
 	faPause,
 	faPauseCircle,
 	faPen,
+	faPencilAlt,
 	faPlay,
 	faPlayCircle,
 	faPlus,
@@ -158,6 +159,7 @@ addIcon(faNetworkWired);
 addIcon(faPause);
 addIcon(faPauseCircle);
 addIcon(faPen);
+addIcon(faPencilAlt);
 addIcon(faPlay);
 addIcon(faPlayCircle);
 addIcon(faPlus);