Removed inline css styles

Moved the inline styles to .css file

Issue-ID: CCSDK-1069
Change-Id: Id4a6fd43290666b992d6884dccda0896062a00b2
Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>

3 files changed, 26 insertions, 105 deletions

diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html
index b16a06494..da3580cd5 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html
@@ -18,47 +18,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 -->
-<div style="display: flex;flex-direction: row">
+<div class="testTemplateContainer">
 
-    <!-- <div style="width: 12%; height: 553px;">
-
-      <mat-accordion>
-          <mat-expansion-panel>
-            <mat-expansion-panel-header style="background-color: #f1f1f1">
-              <mat-panel-title>
-                Workflows
-              </mat-panel-title>
-            </mat-expansion-panel-header>
-            <div class="flex-container">
-              <div style="cursor: pointer; padding: 2px" (click)="createRequest(workflow)" class="item-box" *ngFor="let workflow of workflows">{{workflow.name}}</div>
-            </div>
-          </mat-expansion-panel>
-        </mat-accordion>
-  </div> -->
-
-    <div style="width: 100%;display: flex;flex-direction: row; margin-left: 1em">
-        <div style="width: 50%; margin: 2px; ">
+    <div class="editorContainer">
+        <div class="editorDiv">
             <p>Request</p>
-            <!-- <textarea style=" width: 99%;
-  min-height: 27rem;
-  font-family: Lucida Console, Monaco, monospace;
-  font-size: 0.8rem;
-  line-height: 1.2;" cols="30" rows="10">{{request }}</textarea> -->
             <ace-editor [(text)]="text" mode="json" [theme]="eclipse" [options]="options" #editor class="aceEditor"></ace-editor>
-            <div style="height: 10%">
+            <div class="btnContainer">
                 <button class="button">Submit</button>
                 <button class="button">Clear</button>
             </div>
         </div>
 
-        <div style="width: 50%; margin: 2px;">
+        <div class="editorDiv">
             <p>Response</p>
             <ace-editor [(text)]="text" mode="json" [theme]="eclipse" [options]="options" #editor class="aceEditor"></ace-editor>
-            <!-- <textarea style=" width: 99%;
-  min-height: 27rem;
-  font-family: Lucida Console, Monaco, monospace;
-  font-size: 0.8rem;
-  line-height: 1.2;" cols="30" rows="10"></textarea> -->
         </div>
     </div>
 
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss
index 33a7e2d60..49d559933 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss
@@ -37,4 +37,24 @@ limitations under the License.
     border-radius: 2em;
     padding: 0.5em;
     min-width: 6em;
+}
+
+.testTemplateContainer {
+    display: flex;
+    flex-direction: row
+}
+.editorContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin-left: 1em
+}
+
+.editorDiv {
+    width: 50%; 
+    margin: 2px;
+}
+
+.btnContainer {
+    height: 10%
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts
index 2a2455c61..9a7a570ad 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts
@@ -36,61 +36,6 @@ import 'brace';
 import 'brace/ext/language_tools';
 import 'ace-builds/src-min-noconflict/snippets/html';
 
-interface FoodNode {
-  name: string;
-  children?: FoodNode[];
-}
-
-const TREE_DATA: FoodNode[] = [
-  {
-    name: 'Definitions',
-    children: [
-      { name: 'activation-blueprint.json' },
-      { name: 'artifacts_types.json' },
-      { name: 'data_types.json' },
-    ]
-  },
-  {
-    name: 'Scripts',
-    children: [
-      {
-        name: 'kotlin',
-        children: [
-          { name: 'ScriptComponent.cba.kts' },
-          { name: 'ResourceAssignmentProcessor.cba.kts' },
-        ]
-      }
-    ]
-  },
-  {
-    name: 'Templates',
-    children: [
-      {
-        name: 'baseconfig-template'
-      }
-    ]
-  },
-  {
-    name: 'TOSCA-Metada',
-    children: [
-      {
-        name: 'TOSCA.meta'
-      }
-    ]
-  },
-];
-
-/** Flat node with expandable and level information */
-interface ExampleFlatNode {
-  expandable: boolean;
-  name: string;
-  level: number;
-}
-
-
-
-
-
 @Component({
   selector: 'app-test-template',
   templateUrl: './test-template.component.html',
@@ -102,37 +47,19 @@ export class TestTemplateComponent implements OnInit {
   private workflows = [];
   @ViewChild('editor') editor;
   options: any = { fontSize: "100%", printMargin: false, tabSize: 2 };
-  private transformer = (node: FoodNode, level: number) => {
-    return {
-      expandable: !!node.children && node.children.length > 0,
-      name: node.name,
-      level: level,
-    };
-  }
-
-  treeControl = new FlatTreeControl<ExampleFlatNode>(
-    node => node.level, node => node.expandable);
-
-  treeFlattener = new MatTreeFlattener(
-    this.transformer, node => node.level, node => node.expandable, node => node.children);
-
-  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
   constructor(private store: Store<IAppState>) {
     this.blueprintpState = this.store.select('blueprint')
       .subscribe((data: any) => {
         console.log(data);
-        if (data.blueprint.topology_template && data.blueprint.topology_template.workflows) {
+        if (data && data.blueprint && data.blueprint.topology_template && data.blueprint.topology_template.workflows) {
           this.buildWorkflowData(data.blueprint.topology_template.workflows);
           // this.request = JSON.stringify(data.blueprint.topology_template.workflows[0], undefined, 4);
         }
       });
-    this.dataSource.data = TREE_DATA;
 
   }
 
-  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
-
   ngOnInit() {
   }