From 1444161c6177553dbd7beb4668dda20b341e92bd Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 27 Oct 2022 11:52:48 +0200
Subject: [PATCH] fix(frontend): Add summary to the script editor (#825)

---
 .../src/lib/components/ScriptBuilder.svelte   | 32 ++++++++++++++++---
 .../common/breadcrumb/Breadcrumb.svelte       |  1 -
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 4d6b5763b9..66788433e1 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -17,7 +17,7 @@
 	import { dirtyStore } from './common/confirmationModal/dirtyStore'
 	import { Button } from './common'
 	import { slide } from 'svelte/transition'
-	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+	import { faChevronDown, faChevronUp, faPen } from '@fortawesome/free-solid-svg-icons'
 	import Breadcrumb from './common/breadcrumb/Breadcrumb.svelte'
 
 	export let script: Script
@@ -83,8 +83,8 @@
 <div class="flex flex-col h-screen">
 	<!-- Nav between steps-->
 	<div class="flex flex-col w-full px-4 py-2 border-b shadow-sm">
-		<div class="justify-between flex flex-row w-full">
-			<div class="flex flex-row w-full">
+		<div class="justify-between flex flex-row w-full items-center">
+			<div class="flex flex-row">
 				<Breadcrumb
 					items={['Metadata', 'Code', 'UI Customisation']}
 					selectedIndex={step}
@@ -94,7 +94,31 @@
 					<svelte:fragment slot="separator">/</svelte:fragment>
 				</Breadcrumb>
 			</div>
-			<span>{script.path}</span>
+
+			<div class="flex gap-1 flex-row">
+				<Button
+					startIcon={{ icon: faPen }}
+					variant="contained"
+					color="light"
+					size="xs"
+					on:click={() => changeStep(1)}
+				>
+					{script.path}
+				</Button>
+
+				<Button
+					startIcon={{ icon: faPen }}
+					variant="contained"
+					color="light"
+					size="xs"
+					on:click={() => changeStep(1)}
+				>
+					<div class="max-w-[10em] !truncate">
+						{script.summary == '' || !script.summary ? 'No summary' : script.summary}
+					</div>
+				</Button>
+			</div>
+
 			<div class="flex flex-row-reverse ml-2">
 				{#if step != 3}
 					<Button
diff --git a/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte b/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
index d2b83a937d..3460e6d798 100644
--- a/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
+++ b/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { classNames } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import Button from '../button/Button.svelte'