Resource Dictionary Creation

Adding Resource Dictionary Creation

Change-Id: Ic53018f406ba2cc1f8c878017c816bfce316a362
Issue-ID: CCSDK-1280
Signed-off-by: swapnalipode <sp00501638@techmahindra.com>

28 files changed, 1354 insertions, 8 deletions

diff --git a/cds-ui/designer-client/src/app/common/core/pipes/search.pipe.ts b/cds-ui/designer-client/src/app/common/core/pipes/search.pipe.ts
new file mode 100644
index 000000000..104fe0090
--- /dev/null
+++ b/cds-ui/designer-client/src/app/common/core/pipes/search.pipe.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'search'
+})
+
+export class SearchPipe implements PipeTransform {
+   transform(items: any[], searchText: string): any[] {
+        if (!items) {
+            return [];
+        }
+        if (!searchText) {
+            return items;
+        }
+        searchText = searchText.toLowerCase();
+        return items.filter( it => {
+            if (it.name) {
+             return it.name.toLowerCase().includes(searchText);
+            } else {
+                return items;
+            }
+        });
+    }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts
index 96d188a54..7911c028c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/definition.model.ts
@@ -21,10 +21,6 @@
 import { Sources } from './sources.model';
 
 export class Definition {
-    tag: string;
-    name: string;
-    property: string;
-    updatedBy: string;
     sources: Sources[];
 
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
index e4b9be75f..609b066e2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
@@ -26,4 +26,7 @@ export class MetaData {
     public entrySchema: string;
     public updatedBy: string;
     public createdDate: string;
+    public libraryInstance: string;
+    public required: string;
+    public derivedFrom: string;
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/resource-dictionary.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/resource-dictionary.model.ts
new file mode 100644
index 000000000..85686551e
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/resource-dictionary.model.ts
@@ -0,0 +1,26 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { MetaData } from './metaData.model';
+import { Definition } from './definition.model';
+
+export class ResourceDictionary {
+   public metaData: MetaData;
+   public definition: Definition;
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts
index 4074e5138..35d3f77c3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/sources.model.ts
@@ -17,8 +17,6 @@
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */
-
 export class Sources {
     sources: [];
-
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.spec.ts
new file mode 100644
index 000000000..896c7caf0
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.spec.ts
@@ -0,0 +1,31 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { TestBed } from '@angular/core/testing';
+
+import { DictionaryCreationService } from './dictionary-creation.service';
+
+describe('DictionaryCreationService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DictionaryCreationService = TestBed.get(DictionaryCreationService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts
new file mode 100644
index 000000000..df90e6cd1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.service.ts
@@ -0,0 +1,37 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { Injectable } from '@angular/core';
+import { ResourceDictionaryURLs } from 'src/app/common/constants/app-constants';
+import { Observable } from 'rxjs';
+import { Sources } from '../model/sources.model';
+import { ApiService } from 'src/app/common/core/services/api.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DictionaryCreationService {
+
+  constructor(private api: ApiService) { }
+
+  getSources() {
+    return this.api.get(ResourceDictionaryURLs.getSources);
+}
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts
new file mode 100644
index 000000000..20cec7448
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-creation.store.ts
@@ -0,0 +1,53 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { Injectable } from '@angular/core';
+import { Store } from 'src/app/common/core/stores/Store';
+import { ResourceDictionary } from '../model/resource-dictionary.model';
+import { DictionaryCreationService } from './dictionary-creation.service';
+import { MetaData } from '../model/metaData.model';
+import { Sources } from '../model/sources.model';
+import { SourcesStore } from './sources-template/sources.store';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class DictionaryCreationStore extends Store<ResourceDictionary> {
+    constructor(private dictionaryCreationService: DictionaryCreationService, private sourcesStore: SourcesStore) {
+        super(new ResourceDictionary());
+    }
+
+    changeMetaData(metaDataObject: MetaData) {
+        console.log(metaDataObject);
+        this.setState({
+            ...this.state,
+            metaData: metaDataObject
+        });
+    }
+
+    getSources() {
+        this.sourcesStore.state$.subscribe(data => {
+        console.log(data);
+        });
+    }
+
+    SaveResourceDictionary(resourceDictionary: ResourceDictionary) {
+        console.log(this.setState);
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html
new file mode 100644
index 000000000..93d7df7d1
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.html
@@ -0,0 +1,22 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/-->
+<ace-editor [(text)]="text" [mode]="'javascript'" [autoUpdateContent]="true"
+[durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'tomorrow_night_bright'" #editor style="height:500px;">
+</ace-editor>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.spec.ts
new file mode 100644
index 000000000..09dcdbd37
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DictionaryEditorComponent } from './dictionary-editor.component';
+
+describe('DictionaryEditorComponent', () => {
+  let component: DictionaryEditorComponent;
+  let fixture: ComponentFixture<DictionaryEditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DictionaryEditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DictionaryEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts
new file mode 100644
index 000000000..92b27c24c
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts
@@ -0,0 +1,38 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dictionary-editor',
+  templateUrl: './dictionary-editor.component.html',
+  styleUrls: ['./dictionary-editor.component.css']
+})
+export class DictionaryEditorComponent implements OnInit {
+  constructor() {
+   }
+
+  ngOnInit() {
+  }
+
+  textChanged(event) {
+    console.log(event);
+  }
+}
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.css
new file mode 100644
index 000000000..f263c0086
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html
new file mode 100644
index 000000000..bea6081c0
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html
@@ -0,0 +1,91 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/-->
+<div class="card creat-card col-11">
+    <div class="single-line-model">
+        <label class="label-name">Name</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.name"
+                placeholder="Topology name.vLB.CDS">
+        </div>
+         <!-- <div class="model-note-container error-message">
+            Package name already exists with this version. Please enter a different name or enter different version
+            number.
+        </div>  -->
+    </div>
+
+    <!-- <div class="single-line-model">
+        <label class="label-name">Version <span>*</span></label>
+        <div class="label-input">
+            <input type="input" [readOnly]="!packageNameAndVersionEnables" [(ngModel)]="metaDataTab.version"
+                (input)="validatePackageNameAndVersion()" placeholder="Example: 1.0.0"> 
+        </div>
+        <div class="model-note-container error-message">{{errorMessage}}</div>
+    </div>  -->
+    <div class="single-line-model">
+        <label class="label-name">Entry Schema</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.entrySchema" placeholder="Entry Schema">
+        </div>
+    </div>
+    <div class="single-line-model">
+        <label class="label-name">Data Type</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.dataType" placeholder="Data Type">
+        </div>
+    </div>
+    <div class="single-line-model">
+        <label class="label-name">Description</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.description" placeholder="Descripe the package">
+        </div>
+    </div>
+    <div class="single-line-model">
+        <label class="label-name">Required</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.updatedBy" placeholder="required">
+        </div>
+    </div>
+    <div class="single-line-model">
+        <label class="label-name">Library Instance</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.libraryInstance" placeholder="Library Instance">
+        </div>
+    </div>
+    <div class="single-line-model">
+        <label class="label-name">Derived From</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.derivedFrom" placeholder="Derived From">
+        </div>
+    </div>
+
+    <div class="single-line-model">
+        <label class="label-name">Tags</label>
+        <div class="label-input">
+            <input type="input" (keyup.enter)="addTag($event)" [(ngModel)]="metaDataTab.tags"
+                placeholder="Ex., vDNS-CDS">
+
+        </div>
+        <div class="model-note-container tag-notes">Seprate tags with comma or space</div>
+        <div class="model-note-container tages-container">
+            <span *ngFor="let tag of tags" class="single-tage">{{tag}} <i (click)="removeTag(tag)"
+                    class="fa fa-times-circle"></i></span>
+        </div>
+    </div>
+</div> 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.spec.ts
new file mode 100644
index 000000000..ce9335ff9
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DictionaryMetadataComponent } from './dictionary-metadata.component';
+
+describe('DictionaryMetadataComponent', () => {
+  let component: DictionaryMetadataComponent;
+  let fixture: ComponentFixture<DictionaryMetadataComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DictionaryMetadataComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DictionaryMetadataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts
new file mode 100644
index 000000000..d5c4a109b
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts
@@ -0,0 +1,78 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DictionaryModel } from '../../model/dictionary.model';
+import { DictionaryCreationService } from '../dictionary-creation.service';
+import { DictionaryCreationStore } from '../dictionary-creation.store';
+import { MetaData } from '../../model/metaData.model';
+
+@Component({
+  selector: 'app-dictionary-metadata',
+  templateUrl: './dictionary-metadata.component.html',
+  styleUrls: ['./dictionary-metadata.component.css']
+})
+export class DictionaryMetadataComponent implements OnInit {
+  packageNameAndVersionEnables = true;
+    counter = 0;
+    tags = new Set<string>();
+    private metaDataTab: MetaData = new MetaData();
+    private errorMessage: string;
+
+    constructor(
+        private route: ActivatedRoute,
+        private dictionaryCreationService: DictionaryCreationService,
+        private dictionaryCreationStore: DictionaryCreationStore
+    ) {}
+
+    ngOnInit() {
+        this.dictionaryCreationStore.state$.subscribe(element => {
+            if (element && element.metaData) {
+                this.metaDataTab.name = element.metaData.name;
+                this.metaDataTab.description = element.metaData.description;
+                this.metaDataTab.dataType = element.metaData.dataType;
+                this.metaDataTab.tags = element.metaData.tags;
+                this.metaDataTab.entrySchema = element.metaData.entrySchema;
+                this.metaDataTab.required = element.metaData.required;
+                this.metaDataTab.libraryInstance = element.metaData.libraryInstance;
+                this.metaDataTab.derivedFrom = element.metaData.derivedFrom;
+                console.log(element);
+            }
+        });
+        console.log(this.metaDataTab.name);
+    }
+
+    removeTag(value) {
+        this.tags.delete(value);
+    }
+
+    addTag(event) {
+        const value = event.target.value;
+        console.log(value);
+        if (value && value.trim().length > 0) {
+            event.target.value = '';
+            this.tags.add(value);
+        }
+    }
+
+    saveMetaDataToStore() {
+        this.dictionaryCreationStore.changeMetaData(this.metaDataTab);
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css
new file mode 100644
index 000000000..f02bd233d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.css
@@ -0,0 +1,37 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+.edit-button{
+    color:white;
+    background:#1B3E6F;
+    margin-right: 60px;
+    border: none;
+    width: 80px;
+    height: 20px;
+    margin-top: 25px;
+    font-size: 10px;
+    padding-left:5px;
+    padding-top: 3px;
+  }
+  .ed{
+    justify-content: space-between;
+  }
+  .single-line-model{
+    margin:20px;
+  }
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
new file mode 100644
index 000000000..bf183216d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
@@ -0,0 +1,122 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/-->
+<app-header></app-header>
+
+<div class="new-wrapper">
+    <div class="container-fluid main-container">
+        <header class="page-title">
+            <div class="row">
+                <h2 class="col m-0 pb-0">
+                    <ul class="breadcrumb-header">
+                        <li><a routerLink="/resource-dictionary">Resource Dictionary</a></li>
+                        <i class="fa fa-angle-right ml-2 mr-2"></i>
+                        <li>Dictionary Name</li>
+                    </ul>
+                </h2>
+            </div>
+        </header>
+        <div class="container-fluid body-container">
+                <div class="container card creat-card col-11">
+                    <div class="single-line-model customKeyTitle">
+                        <h5 class="label-name w-100 ">
+                            Dictionary Name
+                        </h5>
+                        <!-- <label class="label-name"></label> -->
+                    <span>Last modified {{createDate}} by me</span>
+                </div>
+            </div>
+        </div>
+        <div class="container-fluid body-container">
+            <div class="container">
+                <div class="creat-action-container">
+                    <a class="action-button" (click)="saveDictionaryToStore()">
+                        <i class="icon-save-sm" aria-hidden="true"></i>
+                        <span>Save</span>
+                    </a>
+                    <a href="#" class="action-button" (click)="goBackToDashBorad()">
+                        <i class="icon-discard-sm" aria-hidden="true"></i>
+                        <span>Discard Changes</span>
+                    </a>
+                    <a href="#" class="action-button">
+                        <i class="icon-clone-sm" aria-hidden="true"></i>
+                        <span>Clone</span>
+                    </a>
+                    <a href="#" class="action-button delete">
+                        <i class="icon-delete-sm" aria-hidden="true"></i>
+                        <span>Delete</span>
+                    </a>
+                </div>
+                <nav class="row">
+                    <!--Nav Tabs-->
+                    <div class="col">
+                        <div class="nav nav-tabs ed" id="nav-tab" role="tablist">
+                            <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
+                                href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false"
+                                autofocus #nameit (focusout)="test()">METADATA</a>
+                            <a class="edit-button" id="nav-editor-tab" data-toggle="tab" href="#nav-editor"
+                            role="tab" aria-controls="nav-editor" aria-selected="false">EDITOR MODE</a>
+
+                           </div>
+                    </div> 
+                </nav>
+               <div>
+                <div class="row mt-4">
+                    <div class="col">
+                        <div class="tab-content" id="nav-tabContent">
+                            <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
+                                aria-labelledby="nav-metadata-tab">
+                                <app-dictionary-metadata></app-dictionary-metadata>
+                                <nav class="row">
+                                    <!--Nav Tabs-->
+                                    <div class="col">
+                                        <div class="nav nav-tabs " id="nav-tab" role="tablist">
+                                            <a class="nav-item nav-link active" id="nav-source-tab" data-toggle="tab"
+                                                href="#nav-source" role="tab" aria-controls="nav-source" aria-selected="false"
+                                                >SOURCES</a>
+                                        </div>
+                                    </div>
+                                </nav>
+                                <div class="row mt-4">
+                                    <div class="col">
+                                        <div class="tab-content" id="nav-tabContent">
+                                            <div class="tab-pane fade show active" id="nav-source" role="tabpanel"
+                                                aria-labelledby="nav-source-tab">
+                                                <app-sources-template></app-sources-template>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="tab-pane fade col-11" id="nav-editor" role="tabpanel"
+                                aria-labelledby="nav-editor-tab">
+                                <div class="card creat-card">
+                                    <div class="editor-container">
+                                <app-dictionary-editor></app-dictionary-editor>
+                                </div></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.spec.ts
new file mode 100644
index 000000000..b1e6b6d24
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResourceDictionaryCreationComponent } from './resource-dictionary-creation.component';
+
+describe('ResourceDictionaryCreationComponent', () => {
+  let component: ResourceDictionaryCreationComponent;
+  let fixture: ComponentFixture<ResourceDictionaryCreationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResourceDictionaryCreationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResourceDictionaryCreationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts
new file mode 100644
index 000000000..1a3484bae
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts
@@ -0,0 +1,76 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Router } from '@angular/router';
+import { DictionaryCreationStore } from './dictionary-creation.store';
+import { DictionaryModel } from '../model/dictionary.model';
+import { Definition } from '../model/definition.model';
+import { DictionaryMetadataComponent } from './dictionary-metadata/dictionary-metadata.component';
+import { SourcesTemplateComponent } from './sources-template/sources-template.component';
+
+@Component({
+  selector: 'app-resource-dictionary-creation',
+  templateUrl: './resource-dictionary-creation.component.html',
+  styleUrls: ['./resource-dictionary-creation.component.css']
+})
+export class ResourceDictionaryCreationComponent implements OnInit {
+
+  constructor(private router: Router, private dictionaryCreationStore: DictionaryCreationStore) {
+  }
+
+  modes: object[] = [
+    {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
+    {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}
+  ];
+
+  private metaDataTab: DictionaryModel = new DictionaryModel();
+  private definition: Definition = new Definition();
+
+  @ViewChild(DictionaryMetadataComponent, {static: false})
+  private metadataTabComponent: DictionaryMetadataComponent;
+
+  @ViewChild(SourcesTemplateComponent, {static: false})
+  private sourcesTemplateComponent: SourcesTemplateComponent;
+
+  @ViewChild('nameit', {static: true})
+  private elementRef: ElementRef;
+
+  ngOnInit() {
+    this.elementRef.nativeElement.focus();
+    // this.elementRef2.nativeElement.focus();
+  }
+
+  saveDictionaryToStore() {
+    this.dictionaryCreationStore.getSources();
+    this.dictionaryCreationStore.state$.subscribe(dd => {
+      console.log(dd);
+    });
+  }
+
+  test() {
+    this.metadataTabComponent.saveMetaDataToStore();
+    this.sourcesTemplateComponent.saveSorcesDataToStore();
+  }
+
+  goBackToDashBorad() {
+    this.router.navigate(['/resource-dictionary']);
+  }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css
new file mode 100644
index 000000000..7799d915f
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css
@@ -0,0 +1,208 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+.source{
+    left: 20px;  
+    width: 72%;  
+}
+.source1{
+    width: 25%;
+    background-color:#F4F9FE;
+}
+h5{
+    padding-top: 10px;
+    padding-left: 10px;
+    background-color:white;
+    height: 40px;
+    width: 100%;
+}
+.mat-form-field + .mat-form-field {
+  margin-left: 8px;
+}
+mat-expansion-panel-header{
+  background-color:#E0E8F2;
+}
+mat-panel-title{
+  color:#1B3E6F;
+}
+mat-expansion-panel{
+  border-radius: 0px;
+  border-left: none;
+}
+.example-list .card{
+  margin-bottom: 10px !important;
+}
+.expansion-panel{
+  border: none;
+  background: white;
+  border-radius: 0px;
+  overflow: hidden;
+  display: block;
+  width: 100%;
+  color:#1B3E6F;
+ }
+.example-container {
+    width: 230px;
+    max-width: 100%;
+    margin: 10px 10px 15px 0;
+    display: inline-block;
+    vertical-align: top;
+    border-radius: 2px;
+    height: 260px;
+    background-color:#F4F9FE;
+  }
+  .example-container2 {
+    width: 630px;
+    max-width: 100%;
+    margin: 10px 10px 5px 0;
+    display: inline-block;
+    vertical-align: top; 
+    border-radius: 2px;
+    height: 300px;
+    background-color:#F4F9FE;  
+  }
+  
+  .example-list {
+    min-height: 12px;
+    border-radius: 0px;
+    overflow: hidden;
+    display: block;
+    margin: 5px;
+    overflow-y:scroll;
+    overflow-x:hidden;
+    margin-left: 15px; 
+    width: 195px;
+    margin-top: 15px;
+  }
+  
+  .example-list1 {
+    min-height: 12px;
+    border-radius: 0px;
+    overflow: hidden;
+    display: block;
+    margin: 5px;
+    overflow-y:hidden;
+    overflow-x:hidden;
+  }
+  
+  .checkbox{
+   margin-left: 11%; 
+  }
+  .example-box {
+    padding: 2px 1px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    box-sizing: border-box;
+    cursor: move;
+    font-size: 14px;
+    
+  }
+  .example-box1 {
+    padding: 1px 1px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    box-sizing: border-box;
+    cursor: move;
+    font-size: 14px;
+    border-radius: 0px !important;
+  }
+  
+  .cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+                0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+  
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
+  
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+  
+  .example-box:last-child {
+    border: none;
+  }
+  
+  .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+  
+.searchText{
+  width: 180px;
+  /* border-top: solid 2px #F4F9FE; */
+  border: 0px;
+  color: #1B3E6F;
+  font-size: 13px;
+  margin-top: 2px;
+}
+.searchBox{
+    position: relative;
+    top: 0%;
+    right: 0%;
+    height: 35px;
+    border-top: solid 2px #F4F9FE;
+    width: 100%;
+    margin-left:0px;
+    background-color:white;
+}
+ 
+.searchButton1{
+  float: left;
+  padding-left: 0 !important;
+  height: 30px;
+  width:30px;
+  background: url(src/assets/img/icon-search.svg) center center no-repeat;
+  border: 0 !important;
+  margin-right:0px;
+}
+.action-button1{
+  margin-left:50px;
+  padding: 1px 6px;
+  box-shadow: none;
+  color:white;
+  font-size: 14px;
+  height: 25px;
+  background-color:#007bff;
+  border-radius:16px;
+  border:solid 0.5px #ededed;
+}
+.footer{
+  margin: 1px 0px;
+}
+.delete{
+  color: red;
+  font-size: 14px;
+  margin: 2px;
+}
+.footer input{
+  margin: 6px 0px 1px 5px;
+}
+.select-button{
+  color: #007bff;
+  font-size: 14px;
+  margin: 2px; 
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html
new file mode 100644
index 000000000..b274ce95d
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html
@@ -0,0 +1,85 @@
+<!--/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/-->
+<div class="col-11">
+   <div class= "row ">
+       <div class="card creat-card source1">
+           <h5 class="label-name"> Sources Options</h5>
+           <div class="searchBox row"><i class="searchButton1 col-1" aria-hidden="true"></i>
+            <input class="searchText col-8" [(ngModel)]="searchText" type="input" placeholder="filter sources">
+          </div>
+           
+       <div class="example-container">
+        <div
+          cdkDropList
+          #todoList="cdkDropList"
+          [cdkDropListData]="option"
+          [cdkDropListConnectedTo]="[doneList]"
+          class="example-list"
+          (cdkDropListDropped)="drop($event)">
+          <div class="example-box card creat-card" *ngFor="let item of option| search :searchText" cdkDrag>
+            <input type="checkbox" class="checkbox" [(ngModel)]="checked" (change)="onChange(item, $event.target.checked)">
+            {{item.name}}
+          </div>
+          
+        </div>
+       
+      </div>
+      <div class="footer row">
+        <a class="select-button col-sm-05">Select all</a>
+        <button  class="action-button1 col-sm-04" >Add to list</button>
+      </div>
+   </div>
+    
+      <div class="card creat-card source">
+        <h5 class="label-name">Sources List</h5>
+        <div class="example-container2 card creat-card"> 
+            <div
+              cdkDropList
+              #doneList="cdkDropList"
+              [cdkDropListData]="sourcesOptions"
+              [cdkDropListConnectedTo]="[todoList]"
+              class="example-list1"
+              (cdkDropListDropped)="drop($event)">
+              
+              <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag>
+                <input type="checkbox" value="item.name">
+                <mat-expansion-panel class="expansion-panel">
+                    <mat-expansion-panel-header [collapsedHeight]="'23px'" [expandedHeight]="'23px'">
+                      <mat-panel-title>  
+                    {{item.name}}
+                      </mat-panel-title>
+                    </mat-expansion-panel-header>
+                    <br>
+                      <ace-editor [(text)]=item.value [mode]="'javascript'" [autoUpdateContent]="true"
+                        [durationBeforeCallback]="1000" (textChanged)="textChanged($event,item)" [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
+                      </ace-editor>
+                  </mat-expansion-panel> 
+              </div>
+              
+            </div>
+            
+          </div>
+          <div>
+            <a type="submit" class="delete">Delete</a>
+          </div>
+      </div>     
+</div>
+</div>
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts
new file mode 100644
index 000000000..e9bd4ff43
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SourcesTemplateComponent } from './sources-template.component';
+
+describe('SourcesTemplateComponent', () => {
+  let component: SourcesTemplateComponent;
+  let fixture: ComponentFixture<SourcesTemplateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SourcesTemplateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SourcesTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts
new file mode 100644
index 000000000..4a4f215cd
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts
@@ -0,0 +1,109 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { Component, OnInit} from '@angular/core';
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { SourcesStore } from './sources.store';
+
+@Component({
+  selector: 'app-sources-template',
+  templateUrl: './sources-template.component.html',
+  styleUrls: ['./sources-template.component.css']
+})
+export class SourcesTemplateComponent implements OnInit {
+  private searchQuery = '';
+  lang = 'json';
+  sources = [];
+  option = [];
+  sourcesOptions = [];
+  textValue: any;
+  selectItem: boolean;
+  ddSource = [];
+  checked: boolean;
+  selectedArray = [];
+  constructor(private sourcesStore: SourcesStore) {
+    this.sourcesStore.state$.subscribe(sources => {
+      this.sources = sources.sources;
+      for (const key in this.sources) {
+        if (key) {
+          const sourceObj = { name: key, value: JSON.stringify(this.sources[key] )};
+          this.option.push(sourceObj);
+        }
+      }
+    });
+  }
+
+  ngOnInit() {
+    this.sourcesStore.getAllSources();
+  }
+
+  saveSorcesDataToStore() {
+    this.sourcesStore.saveSources(this.ddSource);
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+      this.ddSource = [];
+      if (event.previousContainer === event.container) {
+         moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+      } else {
+         transferArrayItem(event.previousContainer.data,
+            event.container.data,
+            event.previousIndex,
+            event.currentIndex);
+      }
+
+      for (const key2 in this.sources) {
+        if (key2) {
+          const originalSources = this.sourcesOptions;
+          for (const key of originalSources) {
+            if (key.name === key2) {
+              const obj = `{${key.name}: ${key.value}}`;
+              this.ddSource.push(obj);
+            }
+          }
+        }
+      }
+  }
+
+  searchDictionary(event: any) {
+    this.searchQuery = event.target.value;
+    this.searchQuery = this.searchQuery.trim();
+    console.log(this.searchQuery);
+    // this.dictionaryStore.search(this.searchQuery);
+  }
+
+  onChange(item: string, isChecked: boolean) {
+    if (isChecked) {
+      this.selectedArray.push(item);
+    }
+  }
+
+  textChanged(event, item) {
+    const editedData = JSON.parse(event);
+    const originalSources = this.sources;
+    for (const key in originalSources) {
+        if (key === item.name) {
+          this.sources[key] = editedData;
+        }
+    }
+    this.option = [];
+    this.sourcesStore.changeSources(this.sources);
+  }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts
new file mode 100644
index 000000000..7da8f03d3
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources.store.ts
@@ -0,0 +1,60 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright (C) 2020 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+import { Sources } from '../../model/sources.model';
+import { Store } from 'src/app/common/core/stores/Store';
+import { Injectable } from '@angular/core';
+import { DictionaryCreationService } from '../dictionary-creation.service';
+import { Definition } from '../../model/definition.model';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class SourcesStore extends Store<Sources> {
+    constructor(private dictionaryCreationService: DictionaryCreationService) {
+        super(new Sources());
+    }
+
+    public getAllSources() {
+        console.log('getting all sources...');
+        this.getSources();
+    }
+
+    protected getSources() {
+        this.dictionaryCreationService.getSources()
+            .subscribe((sou) => {
+                console.log(sou);
+                this.setState({
+                    ...this.state,
+                    sources: sou
+                });
+        });
+    }
+
+    public changeSources(sou) {
+        this.setState({
+            ...this.state,
+            sources: sou
+        });
+    }
+
+    public saveSources(sources) {
+        console.log(sources);
+    }
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
index 1cedeeb09..b6fbf5939 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
@@ -28,7 +28,7 @@
             <div class="card-footer row">
                 <div class="col text-center">
                     <a routerLink="/resource-dictionary/createDictionary" role="button" aria-pressed="true"
-                        class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Package
+                        class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Dictionary
                     </a>
                     <br/>
                     <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i class="icon-import-blue" aria-hidden="true"></i>Import Package
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts
index eb29c4c87..04b66c7bd 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-routing.module.ts
@@ -17,15 +17,19 @@
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */
-
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { ResourceDictionaryDashboardComponent } from './resource-dictionary-dashboard/resource-dictionary-dashboard.component';
+import { ResourceDictionaryCreationComponent } from './resource-dictionary-creation/resource-dictionary-creation.component';
 
 const routes: Routes = [
   {
     path: '',
     component: ResourceDictionaryDashboardComponent
+  },
+  {
+    path: 'createDictionary',
+    component: ResourceDictionaryCreationComponent
   }
 ];
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts
index 5bd6710f8..3f0f89b0d 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary.module.ts
@@ -36,6 +36,13 @@ import { SortDictionaryComponent } from './resource-dictionary-dashboard/sort-di
 import { DictionaryPaginationComponent } from './resource-dictionary-dashboard/dictionary-pagination/dictionary-pagination.component';
 import { SharedModulesModule } from '../../shared-modules/shared-modules.module';
 import { DictionaryListComponent } from './resource-dictionary-dashboard/dictionary-list/dictionary-list.component';
+import { SearchPipe } from 'src/app/common/core/pipes/search.pipe';
+import { ResourceDictionaryCreationComponent } from './resource-dictionary-creation/resource-dictionary-creation.component';
+import { DictionaryMetadataComponent } from './resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component';
+import { SourcesTemplateComponent } from './resource-dictionary-creation/sources-template/sources-template.component';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MatExpansionModule } from '@angular/material';
+import { DictionaryEditorComponent } from './resource-dictionary-creation/dictionary-editor/dictionary-editor.component';
 
 @NgModule({
   declarations: [
@@ -46,6 +53,11 @@ import { DictionaryListComponent } from './resource-dictionary-dashboard/diction
     SortDictionaryComponent,
     DictionaryPaginationComponent,
     DictionaryListComponent,
+    ResourceDictionaryCreationComponent,
+    DictionaryMetadataComponent,
+    SourcesTemplateComponent,
+    SearchPipe,
+    DictionaryEditorComponent,
   ],
   imports: [
     CommonModule,
@@ -57,6 +69,8 @@ import { DictionaryListComponent } from './resource-dictionary-dashboard/diction
     NgxFileDropModule,
     AceEditorModule,
     DataTablesModule,
+    DragDropModule,
+    MatExpansionModule,
   ]
 })
 export class ResourceDictionaryModule { }