Change the heading label in the main.component.

Add new label when user edit the configuration.
Show MC name only when the store.mcName isn't empty.

Issue-ID: SDC-2309
Signed-off-by: Krystian Kedron <k.kedron@partner.samsung.com>
Change-Id: I69a268e2d4fedcd05e725592bf1d46bfa1584f52

2 files changed, 15 insertions, 5 deletions

diff --git a/public/src/app/main/main.component.html b/public/src/app/main/main.component.html
index 10d86e2..e94fc6a 100644
--- a/public/src/app/main/main.component.html
+++ b/public/src/app/main/main.component.html
@@ -10,24 +10,29 @@
           Back to Monitoring
         </span>
       </a>
-      <div style="margin:10px 0; display:flex;" data-tests-id="new-monitorying-titie">
+      <div style="margin:10px 0; display:flex; flex-wrap: wrap;" data-tests-id="new-monitorying-titie">
         <span style="font-size: 22px;" *ngIf='store.generalflow === "new"'>
           New Monitoring Configuration
         </span>
         <span style="font-size: 22px;" *ngIf='store.generalflow === "import"'>
           Import Monitoring Configuration
         </span>
+        <span style="font-size: 22px; padding-right: 10px;" *ngIf='store.generalflow === "edit"'>
+            Edit Monitoring Configuration
+        </span>
         <span style="display: flex;">
-          <span style="font-size: 22px; padding-right: 10px;">
-            MC Name {{store.mcName}}
-          </span>
-          <span *ngIf="store.viewOnly" style="display: flex; background: #673AB7; border-radius: 5px; color: white; padding: 0px 10px; align-items: center;">
+          <span *ngIf="store.viewOnly" style="display: flex; background: #673AB7; border-radius: 5px; color: white;
+          padding: 0px 10px; align-items: center;">
             <span style="display: flex; align-items: center" [innerHTML]="'eye' | feather:16"></span>
             <span style="padding-left: 5px;" data-tests-id="viewOnlyLabel">
               view only
             </span>
           </span>
         </span>
+        <br class="newline">
+        <span style="display: block; font-size: 16px;" *ngIf='store.mcName'>
+              MC Name {{store.mcName}}
+        </span>
       </div>
     </div>
 
diff --git a/public/src/app/main/main.component.scss b/public/src/app/main/main.component.scss
index eba643c..9b37b26 100644
--- a/public/src/app/main/main.component.scss
+++ b/public/src/app/main/main.component.scss
@@ -42,3 +42,8 @@
   float: none;
   margin-right: -4px;
 }
+
+.newline {
+  width: 100%;
+  content: '';
+}