From 98f2cd31c4a81dab41b8a9fd0e527a2a184e90df Mon Sep 17 00:00:00 2001
From: Sarah Abouzainah <sabouzainah.ext@orange.com>
Date: Wed, 16 Dec 2020 02:45:47 +0200
Subject: Add Deploy status icon and fix Script form design

Issue-ID: CCSDK-2320


Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I485436bf9c98ed24cfa23a808620d12ff571e456
---
 .../scripts-tab/scripts-tab.component.html         | 164 ++++++++++-----------
 .../topology-template.component.html               |  11 +-
 2 files changed, 85 insertions(+), 90 deletions(-)

(limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation')

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
index a272b62b0..3a614c95c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
@@ -5,65 +5,67 @@
             <a class="enter-link" href="#"><i class="icon-enter-link"></i></a>
         </div>
         <span tourAnchor="st-scriptsImport" class="import-container-span">Or you can also <a data-target="#scriptsModal"
-                                                                                             data-toggle="modal"
-                                                                                             (click)="resetTheUploadedFiles()"
-                                                                                             href="#"><b>Import File</b></a></span>
-        <span>
-   <div class="card creat-card"></div>
-   <div class="single-line-model">
-      <label class="label-name">File Name
-      <span _ngcontent-uew-c3="">*</span>
-      </label>
-      <div class="label-input">
-         <input type="input" [(ngModel)]="currentFileName"
-                placeholder="script name" name="scriptName" autofocus [autofocus]="true">
-      </div>
-      <div class="single-line">
-         <label class="label-name">Script Type</label>
-         <div class="label-input" (change)="changeExtension()">
-            <label name="trst" id="kt">
-            <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
-                   name="exampleRadios1" id="kt" value=kotlin>
-            <span>
-            Kotlin
-            </span>
-            </label>
-            <label name="trst" id="py">
-            <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
-                   name="exampleRadios2" id="py" value=python>
-            <span>
-            Jython
-            </span>
-            </label>
-            <label id="ansible">
-            <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
-                   name="exampleRadios3" id="ansible" value=ansible>
-            <span>
-            Ansible
-            </span>
-            </label>
-         </div>
-      </div>
-   </div>
-   <div id="id-script" class="collapse show">
-      <div class="card-body">
-         <ace-editor [(text)]="currentFileContent"
-                     [mode]="currentExtension"
-                     [autoUpdateContent]="true" [durationBeforeCallback]="3000" [theme]="'eclipse'"
-                     #editor
-                     style="height:300px;">
-         </ace-editor>
-      </div>
-   </div>
-</span>
-        <button tourAnchor="tm-templateFinish" (click)="textCurrentChanges()" [disabled]="currentFileName?.length == 0 ||
-this.currentFileContent?.length == 0
-"
-                title="Submit template and close" class="btn btn-primary">Save
-        </button>
-    </div>
-
+                data-toggle="modal" (click)="resetTheUploadedFiles()" href="#"><b>Import File</b></a></span>
 
+    </div>
+    <!--Create Script File-->
+    <div class="card">
+        <div class="card-body">
+            <div class="row">
+                <div class="col">
+                    <h6 class="create-title mb-3">Create Script File</h6>
+                </div>
+            </div>
+            <div class="single-line-model">
+                <label class="label-name">File Name
+                    <span _ngcontent-uew-c3="">*</span>
+                </label>
+                <div class="label-input">
+                    <input type="input" [(ngModel)]="currentFileName" placeholder="script name" name="scriptName"
+                        autofocus [autofocus]="true">
+                </div>
+                <div class="single-line-model">
+                    <label class="label-name">Script Type</label>
+                    <div class="label-input" (change)="changeExtension()">
+                        <label name="trst" id="kt" class="pl-0">
+                            <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
+                                name="exampleRadios1" id="kt" value=kotlin>
+                            <span>
+                                Kotlin
+                            </span>
+                        </label>
+                        <label name="trst" id="py">
+                            <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
+                                name="exampleRadios2" id="py" value=python>
+                            <span>
+                                Jython
+                            </span>
+                        </label>
+                        <label id="ansible">
+                            <input class="form-check-input" [(ngModel)]="scriptExtension" type="radio"
+                                name="exampleRadios3" id="ansible" value=ansible>
+                            <span>
+                                Ansible
+                            </span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div id="id-script">
+                <ace-editor [(text)]="currentFileContent" [mode]="currentExtension" [autoUpdateContent]="true"
+                    [durationBeforeCallback]="3000" [theme]="'eclipse'" #editor style="height:300px;">
+                </ace-editor>
+            </div>
+            <div class="row template-mapping-action mb-0">
+                <div class="col text-right">
+                    <button tourAnchor="tm-templateFinish" (click)="textCurrentChanges()" [disabled]="currentFileName?.length == 0 ||
+                    this.currentFileContent?.length == 0" title="Save script file" class="btn btn-primary mt-4">Save
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!---->
     <div class="accordion">
         <!-- <div class="card creat-card">
             <div class="single-line">
@@ -76,22 +78,22 @@ this.currentFileContent?.length == 0
                 <div [id]="'head-script-'+mapIndex" class="card-header">
                     <h5 class="mb-0 d-flex justify-content-between">
                         <button (click)="changeDivShow(mapIndex)" aria-expanded="false" class="btn btn-link collapsed"
-                                data-toggle="collapse">
+                            data-toggle="collapse">
                             <i class="icon-file-code"></i> {{file.key}}
                         </button>
                         <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal"
-                           class="accordion-delete"><i class="icon-delete-sm"></i></a>
+                            class="accordion-delete"><i class="icon-delete-sm"></i></a>
                         <!-- <a (click)="removeFile(file.key,mapIndex)" data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
                                     class="icon-delete-sm"></i></a> -->
                         <!-- Delete Modal -->
                         <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
-                             aria-labelledby="exampleModalLabel" aria-hidden="true">
+                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                             <div class="modal-dialog" role="document">
                                 <div class="modal-content">
                                     <div class="modal-header">
                                         <h5 class="modal-title" id="exampleModalLabel">Delete Script</h5>
                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                            <img src="assets/img/icon-close.svg"/>
+                                            <img src="assets/img/icon-close.svg" />
                                         </button>
                                     </div>
                                     <div class="modal-body">
@@ -99,11 +101,10 @@ this.currentFileContent?.length == 0
                                             <span>{{fileToDelete?.key?.split('/')[2]}}</span>?</p>
                                     </div>
                                     <div class="modal-footer">
-                                        <button type="button" class="btn btn-secondary"
-                                                data-dismiss="modal">Cancel
+                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel
                                         </button>
                                         <button type="button" (click)="removeFile(fileToDelete?.key,0)"
-                                                data-dismiss="modal" class="btn btn-danger">Delete
+                                            data-dismiss="modal" class="btn btn-danger">Delete
                                         </button>
                                     </div>
                                 </div>
@@ -114,12 +115,11 @@ this.currentFileContent?.length == 0
                     </h5>
                 </div>
                 <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
-                     data-parent="#accordion-script">
+                    data-parent="#accordion-script">
                     <div class="card-body">
                         <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'"
-                                    [autoUpdateContent]="true" [durationBeforeCallback]="5000" [theme]="'eclipse'"
-                                    #editor
-                                    style="height:300px;">
+                            [autoUpdateContent]="true" [durationBeforeCallback]="5000" [theme]="'eclipse'" #editor
+                            style="height:300px;">
                         </ace-editor>
                     </div>
                 </div>
@@ -131,21 +131,21 @@ this.currentFileContent?.length == 0
 </div>
 
 <div aria-hidden="true" aria-labelledby="scriptsModalLabel" class="modal fade" id="scriptsModal" role="dialog"
-     tabindex="-1">
+    tabindex="-1">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="scriptsModalLabel">Import File</h5>
                 <button aria-label="Close" class="close" data-dismiss="modal" type="button">
-                    <img src="assets/img/icon-close.svg"/>
+                    <img src="assets/img/icon-close.svg" />
                 </button>
             </div>
             <div class="modal-body">
                 <ngx-file-drop accept=".kt,.py" (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
-                               (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
+                    (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
                     <ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp>
                         <div class="folder-upload">
-                            <img src="assets/img/folder-upload.svg"/>
+                            <img src="assets/img/folder-upload.svg" />
                         </div>
                         <div class="folder-upload-text">
                             Drag & Drop file
@@ -161,25 +161,25 @@ this.currentFileContent?.length == 0
                 <div class="upload-table">
                     <table class="table">
                         <thead>
-                        <tr *ngFor="let item of uploadedFiles; let i=index">
-                            <th width="40"><img src="assets/img/icon-file-code.svg"/></th>
-                            <th>{{ item.name }}</th>
-                            <th (click)="removeInitFile(i)" width="40" class="text-right"><img
-                                    src="assets/img/icon-remove-file.svg"/></th>
-                        </tr>
+                            <tr *ngFor="let item of uploadedFiles; let i=index">
+                                <th width="40"><img src="assets/img/icon-file-code.svg" /></th>
+                                <th>{{ item.name }}</th>
+                                <th (click)="removeInitFile(i)" width="40" class="text-right"><img
+                                        src="assets/img/icon-remove-file.svg" /></th>
+                            </tr>
                         </thead>
                     </table>
                 </div>
             </div>
             <div class="modal-footer">
                 <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
-                        type="button">Cancel
+                    type="button">Cancel
                 </button>
                 <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0"
-                        data-dismiss="modal" type="button">
+                    data-dismiss="modal" type="button">
                     Import
                 </button>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html
index c7094f8e2..3831ca6d9 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html
@@ -1,13 +1,8 @@
-
 <ul class="defintionsNote">
     <li><b>To add workflows and node templates </b></li>
     <li>1. Use Copy and paste option or</li>
     <li>2. Write them manually</li>
 </ul>
-<ace-editor [(text)]="content" [mode]="'json'"
-            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
-            (textChanged)="textChanged($event)"
-            #editor style="height:300px;"
-            (autocomplete)="content"
->
-</ace-editor>
+<ace-editor [(text)]="content" [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
+    [theme]="'eclipse'" (textChanged)="textChanged($event)" #editor style="height:330px;" (autocomplete)="content">
+</ace-editor>
\ No newline at end of file
-- 
cgit 1.2.3-korg