feature[TW18351]: Refine Interface Message UI with stakeholders - message/submessage

- Updates MIM UI with the following:
- Type Search for Elements
- Improves clearness of read/write toggle
- Dropdowns for certain fields
- Polishes up some unit tests

Change-Id: I4e0ce8889f561c7bde4c6d6283949323de773a42
Signed-off-by: Luciano T Vaglienti <luciano.t.vaglienti@boeing.com>
diff --git a/plugins/org.eclipse.osee.mim/META-INF/MANIFEST.MF b/plugins/org.eclipse.osee.mim/META-INF/MANIFEST.MF
index a67f6d1..3f17e99 100644
--- a/plugins/org.eclipse.osee.mim/META-INF/MANIFEST.MF
+++ b/plugins/org.eclipse.osee.mim/META-INF/MANIFEST.MF
@@ -16,6 +16,7 @@
  org.eclipse.osee.framework.core,
  org.eclipse.osee.framework.core.data,
  org.eclipse.osee.framework.core.enums,
+ org.eclipse.osee.framework.core.enums.token,
  org.eclipse.osee.framework.core.model,
  org.eclipse.osee.framework.core.util,
  org.eclipse.osee.framework.jdk.core.result,
diff --git a/plugins/org.eclipse.osee.mim/src/org/eclipse/osee/mim/EnumEndpoint.java b/plugins/org.eclipse.osee.mim/src/org/eclipse/osee/mim/EnumEndpoint.java
new file mode 100644
index 0000000..ed48de2
--- /dev/null
+++ b/plugins/org.eclipse.osee.mim/src/org/eclipse/osee/mim/EnumEndpoint.java
@@ -0,0 +1,46 @@
+/*********************************************************************
+ * Copyright (c) 2021 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+package org.eclipse.osee.mim;
+
+import java.util.Collection;
+import javax.ws.rs.GET;
+import javax.ws.rs.Path;
+import javax.ws.rs.Produces;
+import javax.ws.rs.core.MediaType;
+
+/**
+ * @author Luciano T. Vaglienti
+ */
+@Path("enums")
+public interface EnumEndpoint {
+
+   @GET()
+   @Path("MessagePeriodicities")
+   @Produces(MediaType.APPLICATION_JSON)
+   Collection<String> getPeriodicity();
+
+   @GET()
+   @Path("MessageRates")
+   @Produces(MediaType.APPLICATION_JSON)
+   Collection<String> getMessageRates();
+
+   @GET()
+   @Path("MessageTypes")
+   @Produces(MediaType.APPLICATION_JSON)
+   Collection<String> getMessageTypes();
+
+   @GET()
+   @Path("StructureCategories")
+   @Produces(MediaType.APPLICATION_JSON)
+   Collection<String> getStructureCategories();
+}
diff --git a/plugins/org.eclipse.osee.mim/src/org/eclipse/osee/mim/internal/EnumEndpointImpl.java b/plugins/org.eclipse.osee.mim/src/org/eclipse/osee/mim/internal/EnumEndpointImpl.java
new file mode 100644
index 0000000..08302d4
--- /dev/null
+++ b/plugins/org.eclipse.osee.mim/src/org/eclipse/osee/mim/internal/EnumEndpointImpl.java
@@ -0,0 +1,66 @@
+/*********************************************************************
+ * Copyright (c) 2021 Boeing
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Boeing - initial API and implementation
+ **********************************************************************/
+package org.eclipse.osee.mim.internal;
+
+import java.util.ArrayList;
+import java.util.Collection;
+import java.util.Comparator;
+import java.util.List;
+import org.eclipse.osee.framework.core.enums.CoreAttributeTypes;
+import org.eclipse.osee.mim.EnumEndpoint;
+
+public class EnumEndpointImpl implements EnumEndpoint {
+
+   public EnumEndpointImpl() {
+   }
+
+   @Override
+   public Collection<String> getPeriodicity() {
+      List<String> periodicities = new ArrayList<String>();
+      periodicities.addAll(CoreAttributeTypes.InterfaceMessagePeriodicity.getEnumStrValues());
+      periodicities.sort(Comparator.comparing(String::toString));
+      return periodicities;
+   }
+
+   @Override
+   public Collection<String> getMessageRates() {
+      List<String> rates = new ArrayList<String>();
+      rates.addAll(CoreAttributeTypes.InterfaceMessageRate.getEnumStrValues());
+      rates.sort(new Comparator<String>() {
+
+         @Override
+         public int compare(String o1, String o2) {
+            return Integer.valueOf(o1).compareTo(Integer.valueOf(o2));
+         }
+
+      });
+      return rates;
+   }
+
+   @Override
+   public Collection<String> getMessageTypes() {
+      List<String> types = new ArrayList<String>();
+      types.addAll(CoreAttributeTypes.InterfaceMessageType.getEnumStrValues());
+      types.sort(Comparator.comparing(String::toString));
+      return types;
+   }
+
+   @Override
+   public Collection<String> getStructureCategories() {
+      List<String> categories = new ArrayList<String>();
+      categories.addAll(CoreAttributeTypes.InterfaceStructureCategory.getEnumStrValues());
+      categories.sort(Comparator.comparing(String::toString));
+      return categories;
+   }
+
+}
diff --git a/plugins/org.eclipse.osee.mim/src/org/eclipse/osee/mim/internal/MimApplication.java b/plugins/org.eclipse.osee.mim/src/org/eclipse/osee/mim/internal/MimApplication.java
index 3aeaa5b..87fc260 100644
--- a/plugins/org.eclipse.osee.mim/src/org/eclipse/osee/mim/internal/MimApplication.java
+++ b/plugins/org.eclipse.osee.mim/src/org/eclipse/osee/mim/internal/MimApplication.java
@@ -36,6 +36,7 @@
       int i = 1;
       resources.add(new LogicalTypeEndpointImpl(mimApi));
       resources.add(new BranchAccessor(mimApi));
+      resources.add(new EnumEndpointImpl());
    }
 
    public void stop() {
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/add-structure-dialog/add-structure-dialog.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/add-structure-dialog/add-structure-dialog.component.html
index 76d66ff..cc690d9 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/add-structure-dialog/add-structure-dialog.component.html
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/add-structure-dialog/add-structure-dialog.component.html
@@ -27,11 +27,11 @@
             </mat-form-field>
             <mat-form-field>
                 <mat-label>Max Simultaneity</mat-label>
-                <input matInput [(ngModel)]="data.structure.interfaceMaxSimultaneity" required>
+                <input matInput type="number" [(ngModel)]="data.structure.interfaceMaxSimultaneity" required>
             </mat-form-field>
             <mat-form-field>
                 <mat-label>Min Simultaneity</mat-label>
-                <input matInput [(ngModel)]="data.structure.interfaceMinSimultaneity" required>
+                <input matInput type="number" [(ngModel)]="data.structure.interfaceMinSimultaneity" required>
             </mat-form-field>
             <mat-form-field>
                 <mat-label>Task File Type</mat-label>
@@ -39,11 +39,18 @@
             </mat-form-field>
             <mat-form-field>
                 <mat-label>Category</mat-label>
-                <input matInput [(ngModel)]="data.structure.interfaceStructureCategory" required>
+                <!-- <input matInput [(ngModel)]="data.structure.interfaceStructureCategory" required> -->
+                <mat-select [(ngModel)]="data.structure.interfaceStructureCategory" required>
+                    <mat-option *ngFor="let option of (categories|async)" [value]="option" >
+                        {{option}}
+                    </mat-option>
+                </mat-select>
             </mat-form-field>
         </div>
         <button mat-raised-button matStepperPrevious>Back</button>
-        <button mat-raised-button color="primary" *ngIf="data.structure.name.length>0 && data.structure.description.length>0 && data.structure.interfaceMaxSimultaneity.length >0 && data.structure.interfaceMinSimultaneity.length >0 && data.structure.interfaceTaskFileType!==undefined && data.structure.interfaceStructureCategory.length>0" matStepperNext>Next</button>
+        <ng-container *ngIf="data.structure.name!=='' && data.structure.description!=='' && data.structure.interfaceMaxSimultaneity !=='' && data.structure.interfaceMinSimultaneity !=='' && data.structure.interfaceTaskFileType!==undefined && data.structure.interfaceStructureCategory!==''">
+            <button mat-raised-button color="primary" matStepperNext>Next</button>
+        </ng-container>
     </mat-step>
     <mat-step label="Review" #step3>
         <div style="display:flex;flex-direction:column">
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/add-structure-dialog/add-structure-dialog.component.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/add-structure-dialog/add-structure-dialog.component.ts
index 430135a..86a93a0 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/add-structure-dialog/add-structure-dialog.component.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/add-structure-dialog/add-structure-dialog.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatStepper } from '@angular/material/stepper';
+import { EnumsService } from '../../../shared/services/http/enums.service';
 import { CurrentStateService } from '../../services/current-state.service';
 import { AddStructureDialog } from '../../types/AddStructureDialog';
 import { structure } from '../../types/structure';
@@ -13,8 +14,9 @@
 export class AddStructureDialogComponent implements OnInit {
 
   availableStructures = this.structures.availableStructures;
+  categories = this.enumService.categories;
   storedId:string='-1'
-  constructor(private structures:CurrentStateService,public dialogRef: MatDialogRef<AddStructureDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: AddStructureDialog) { }
+  constructor(private structures:CurrentStateService,public dialogRef: MatDialogRef<AddStructureDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: AddStructureDialog, private enumService: EnumsService) { }
 
   ngOnInit(): void {
   }
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.html
index 19125ae..587fa45 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.html
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.html
@@ -1,4 +1,12 @@
 <mat-form-field>
-    <mat-label>{{header|convertMessageInterfaceTitlesToString}}</mat-label>
-    <input matInput [(ngModel)]="value" (ngModelChange)="updateStructure(header,value)">
+    <ng-container *ngIf="header==='interfaceStructureCategory';else generalEdit">
+        <mat-select [(ngModel)]="value" (ngModelChange)="updateStructure(header,value)">
+            <mat-option *ngFor="let option of (categories|async)" [value]="option" >
+                {{option}}
+            </mat-option>
+        </mat-select>
+    </ng-container>
+    <ng-template #generalEdit>
+        <input matInput [(ngModel)]="value" (ngModelChange)="updateStructure(header,value)">
+    </ng-template>
 </mat-form-field>
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.spec.ts
index 1cd85b5..d0a30ce 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.spec.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.spec.ts
@@ -1,17 +1,21 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { apiURL } from 'src/environments/environment';
 import { SharedMessagingModule } from '../../../shared/shared-messaging.module';
+import { UiService } from '../../services/ui.service';
 
 import { EditStructureFieldComponent } from './edit-structure-field.component';
 
 describe('EditStructureFieldComponent', () => {
   let component: EditStructureFieldComponent;
   let fixture: ComponentFixture<EditStructureFieldComponent>;
+  let httpTestingController: HttpTestingController;
+  let uiService:UiService
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -22,12 +26,26 @@
   });
 
   beforeEach(() => {
+    httpTestingController = TestBed.inject(HttpTestingController);
+    uiService = TestBed.inject(UiService);
     fixture = TestBed.createComponent(EditStructureFieldComponent);
     component = fixture.componentInstance;
+    component.header='description'
+    component.value='v1'
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should update value', fakeAsync(() => {
+    uiService.BranchIdString = '8';
+    uiService.messageIdString = '10';
+    uiService.subMessageIdString = '20';
+    component.updateStructure('description', 'v2');
+    tick(500);
+    const req = httpTestingController.expectOne(apiURL + "/mim/branch/" + "8" + "/messages/" + '10' + "/submessages/"+ '20'+"/structures");
+    expect(req.request.method).toEqual('PATCH');
+  }));
 });
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.ts
index 4ac11bf..f7ff4d5 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/edit-structure-field/edit-structure-field.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
 import { share, debounceTime, distinctUntilChanged, map, tap, switchMap } from 'rxjs/operators';
+import { EnumsService } from '../../../shared/services/http/enums.service';
 import { CurrentStateService } from '../../services/current-state.service';
 
 interface structure {
@@ -36,7 +37,8 @@
     }),
     switchMap(val=>this.structureService.partialUpdateStructure(this._structure))
   )
-  constructor (private structureService: CurrentStateService) {
+  categories= this.enumService.categories;
+  constructor (private structureService: CurrentStateService, private enumService: EnumsService) {
     this._sendValue.subscribe();
    }
 
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/edit-element-field/edit-element-field.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/edit-element-field/edit-element-field.component.html
index dd730db..04b2958 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/edit-element-field/edit-element-field.component.html
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/edit-element-field/edit-element-field.component.html
@@ -1,5 +1,4 @@
 <mat-form-field>
-    <mat-label>{{header|convertMessageInterfaceTitlesToString}}</mat-label>
     <input matInput [(ngModel)]="value" (ngModelChange)="updateElement(header,value)" *ngIf="header!=='platformTypeName2'">
     <ng-container *ngIf="header==='name'">
         <ng-container *ngIf="elementEnd-elementStart>0">
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/sub-element-table.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/sub-element-table.component.html
index 2f151d0..e262ce0 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/sub-element-table.component.html
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/sub-element-table.component.html
@@ -11,9 +11,9 @@
             </ng-container>
         </ng-container>
         <ng-template #no_edit>
-            <div *ngIf="subHeader==='description'||subHeader==='EnumLiteralsDesc'||subHeader==='Notes'" [matTooltip]="value[subHeader]" [matTooltipDisabled]="value[subHeader].length<15" appHighlightFilteredText [searchTerms]="filter" [text]="value[subHeader] | displayTruncatedStringWithFieldOverflow:15" classToApply="ple-message-element-interface-table-highlighted-text">
+            <div *ngIf="subHeader==='description'||subHeader==='EnumLiteralsDesc'||subHeader==='notes'" [matTooltip]="value[subHeader]" [matTooltipDisabled]="value[subHeader].length<15" appHighlightFilteredText [searchTerms]="filter" [text]="value[subHeader] | displayTruncatedStringWithFieldOverflow:15" classToApply="ple-message-element-interface-table-highlighted-text">
             </div>
-            <div *ngIf="subHeader!=='Notes' &&subHeader!=='platformTypeName2' && subHeader!=='name' && subHeader !=='description'" appHighlightFilteredText [searchTerms]="filter" [text]="value[subHeader]" classToApply="ple-message-element-interface-table-highlighted-text">
+            <div *ngIf="subHeader!=='notes' &&subHeader!=='platformTypeName2' && subHeader!=='name' && subHeader !=='description'" appHighlightFilteredText [searchTerms]="filter" [text]="value[subHeader]" classToApply="ple-message-element-interface-table-highlighted-text">
                 <!-- subHeader!=='description'&&subHeader!=='EnumLiteralsDesc'&& -->
                 {{value[subHeader]}}
             </div>
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/sub-element-table.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/sub-element-table.component.spec.ts
index ecf4997..8ab5226 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/sub-element-table.component.spec.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/components/sub-element-table/sub-element-table.component.spec.ts
@@ -4,6 +4,7 @@
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute, convertToParamMap, Router } from '@angular/router';
@@ -61,7 +62,7 @@
   beforeEach(async () => {
     router = jasmine.createSpyObj('Router', ['navigate', 'createUrlTree', 'serializeUrl'],['paramMap']);
     await TestBed.configureTestingModule({
-      imports:[MatTableModule,MatFormFieldModule,MatInputModule,FormsModule,NoopAnimationsModule, OseeStringUtilsDirectivesModule, OseeStringUtilsPipesModule, RouterTestingModule,SharedMessagingModule, HttpClientTestingModule],
+      imports:[MatTableModule,MatMenuModule,MatFormFieldModule,MatInputModule,FormsModule,NoopAnimationsModule, OseeStringUtilsDirectivesModule, OseeStringUtilsPipesModule, RouterTestingModule,SharedMessagingModule, HttpClientTestingModule],
       declarations: [SubElementTableComponent, ConvertMessageInterfaceTitlesToStringPipe, EditElementFieldComponent],
       providers: [{ provide: Router, useValue: router }, {
         provide: ActivatedRoute, useValue: {
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/message-element-interface.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/message-element-interface.component.spec.ts
index f5a4696..c21dbbc 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/message-element-interface.component.spec.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/message-element-interface.component.spec.ts
@@ -23,6 +23,7 @@
 import { SharedMessagingModule } from '../shared/shared-messaging.module';
 import { EditElementFieldComponent } from './components/sub-element-table/edit-element-field/edit-element-field.component';
 import { EditStructureFieldComponent } from './components/edit-structure-field/edit-structure-field.component';
+import { EditStructureFieldComponentMock } from './mocks/components/EditStructureField.mock';
 
 let loader: HarnessLoader;
 
@@ -50,7 +51,7 @@
         SubElementTableComponent,
         ConvertMessageInterfaceTitlesToStringPipe,
         EditElementFieldComponent,
-        EditStructureFieldComponent
+        EditStructureFieldComponentMock
       ],
       providers: [
         { provide: Router, useValue: { navigate: () => {} } },
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/mocks/components/EditStructureField.mock.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/mocks/components/EditStructureField.mock.ts
new file mode 100644
index 0000000..12bca98
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-element-interface/mocks/components/EditStructureField.mock.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: 'osee-messaging-edit-structure-field',
+    template:'<p>Dummy</p>'
+})
+export class EditStructureFieldComponentMock{
+    @Input() structureId!: string ;
+    @Input() header!: string;
+    @Input() value!: string;
+  }
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.html
index d1af6cf..6e5d653 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.html
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.html
@@ -12,26 +12,45 @@
     <br>
     <mat-form-field>
         <label>Rate</label>
-        <input matInput type="text" [(ngModel)]="data.interfaceMessageRate" #input required>
+        <!-- <input matInput type="text" [(ngModel)]="data.interfaceMessageRate" #input required> -->
+        <mat-select [(ngModel)]="data.interfaceMessageRate" required>
+            <mat-option *ngFor="let option of (rates|async)" [value]="option" >
+                {{option}} Hz
+            </mat-option>
+        </mat-select>
     </mat-form-field>
     <br>
     <mat-form-field>
         <label>Periodicity</label>
-        <input matInput type="text" [(ngModel)]="data.interfaceMessagePeriodicity" #input required>
+        <!-- <input matInput type="text" [(ngModel)]="data.interfaceMessagePeriodicity" #input required> -->
+        <mat-select [(ngModel)]="data.interfaceMessagePeriodicity" required>
+            <mat-option *ngFor="let option of (periodicities|async)" [value]="option" >
+                {{option}}
+            </mat-option>
+        </mat-select>
     </mat-form-field>
     <br>
     <!-- <mat-form-field>
         <label>Read/Write</label>
         <input matInput type="text" [(ngModel)]="data.interfaceMessageWriteAccess" #input required>
     </mat-form-field> -->
-    <mat-slide-toggle [(ngModel)]="data.interfaceMessageWriteAccess" labelPosition='before'>
-        Read
+    <mat-slide-toggle [(ngModel)]="data.interfaceMessageWriteAccess" [labelPosition]='data.interfaceMessageWriteAccess? "after":"before"'>
+        <ng-container *ngIf="data.interfaceMessageWriteAccess;else read">
+            Writable
+        </ng-container>
+        <ng-template #read>
+            Read Only
+        </ng-template>
     </mat-slide-toggle>
-    Write
     <br>
     <mat-form-field>
         <label>Type</label>
-        <input matInput type="text" [(ngModel)]="data.interfaceMessageType" #input required>
+        <!-- <input matInput type="text" [(ngModel)]="data.interfaceMessageType" #input required> -->
+        <mat-select [(ngModel)]="data.interfaceMessageType" required>
+            <mat-option *ngFor="let option of (types|async)" [value]="option" >
+                {{option}}
+            </mat-option>
+        </mat-select>
     </mat-form-field>
     <br>
     <mat-form-field>
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.spec.ts
index 1370ec0..880c016 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.spec.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.spec.ts
@@ -4,7 +4,11 @@
 import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
+import { EnumsService } from 'src/app/ple/messaging/shared/services/http/enums.service';
 import { AddMessageDialog } from '../../../types/AddMessageDialog';
 
 import { AddMessageDialogComponent } from './add-message-dialog.component';
@@ -23,14 +27,20 @@
     interfaceMessageType: '',
     interfaceMessageWriteAccess:''
   }
+  let enumServiceMock: Partial<EnumsService> = {
+    types: of(['type1', 'type2', 'type3']),
+    rates: of(['r1','r2','r3']),
+    periodicities:of(['p1','p2','p3'])
+  }
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports:[MatDialogModule,FormsModule,MatFormFieldModule,MatInputModule,MatButtonModule,NoopAnimationsModule],
+      imports:[MatDialogModule,FormsModule,MatFormFieldModule,MatInputModule,MatSelectModule,MatButtonModule,MatSlideToggleModule,NoopAnimationsModule],
       declarations: [AddMessageDialogComponent],
       providers: [{
         provide: MatDialogRef, useValue: dialogRef
-      },{provide:MAT_DIALOG_DATA,useValue:dialogData}]
+      }, { provide: MAT_DIALOG_DATA, useValue: dialogData },
+      {provide: EnumsService, useValue:enumServiceMock}]
     })
     .compileComponents();
   });
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.ts
index f4d1040..ec5f320 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/add-message-dialog/add-message-dialog.component.ts
@@ -1,5 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { EnumsService } from 'src/app/ple/messaging/shared/services/http/enums.service';
 import { AddMessageDialog } from '../../../types/AddMessageDialog';
 import { AddSubMessageDialogComponent } from '../../sub-message-table/add-sub-message-dialog/add-sub-message-dialog.component';
 
@@ -10,7 +11,10 @@
 })
 export class AddMessageDialogComponent implements OnInit {
 
-  constructor(public dialogRef: MatDialogRef<AddSubMessageDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: AddMessageDialog,) { }
+  rates = this.enumService.rates;
+  types = this.enumService.types;
+  periodicities = this.enumService.periodicities;
+  constructor(public dialogRef: MatDialogRef<AddSubMessageDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: AddMessageDialog,private enumService: EnumsService) { }
 
   ngOnInit(): void {
   }
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.html
index c5359a6..8419a12 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.html
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.html
@@ -1,4 +1,43 @@
-<mat-form-field>
-    <mat-label>{{header|convertMessageTableTitlesToString}}</mat-label>
-    <input matInput [(ngModel)]="value" (ngModelChange)="updateMessage(header,value)">
+<mat-form-field *ngIf="header !== 'interfaceMessageWriteAccess';else writeAccess">
+    <ng-container *ngIf="header === 'interfaceMessageRate' || header === 'interfaceMessagePeriodicity' || header === 'interfaceMessageType';else generalEdit">
+        <ng-container *ngIf="header ==='interfaceMessageRate'">
+            <mat-select [(ngModel)]="value" (ngModelChange)="updateMessage(header,value)" required>
+                <mat-option *ngFor="let option of (rates|async)" [value]="option" >
+                    {{option}}
+                </mat-option>
+            </mat-select>
+        </ng-container>
+        <ng-container *ngIf="header ==='interfaceMessageType'">
+            <mat-select [(ngModel)]="value" (ngModelChange)="updateMessage(header,value)" required>
+                <mat-option *ngFor="let option of (types|async)" [value]="option" >
+                    {{option}}
+                </mat-option>
+            </mat-select>
+        </ng-container>
+        <ng-container *ngIf="header ==='interfaceMessagePeriodicity'">
+            <mat-select [(ngModel)]="value" (ngModelChange)="updateMessage(header,value)" required>
+                <mat-option *ngFor="let option of (periodicities|async)" [value]="option" >
+                    {{option}}
+                </mat-option>
+            </mat-select>
+        </ng-container>
+    </ng-container>
+    <ng-template #generalEdit>
+        <ng-container *ngIf="header==='interfaceMessageNumber'; else stringEdit">
+            <input matInput type="number" [(ngModel)]="value" (ngModelChange)="updateMessage(header,value)">
+        </ng-container>
+        <ng-template #stringEdit>
+            <input matInput [(ngModel)]="value" (ngModelChange)="updateMessage(header,value)">
+        </ng-template>
+    </ng-template>
 </mat-form-field>
+<ng-template #writeAccess>
+    <mat-slide-toggle [(ngModel)]="value" [labelPosition]='value? "after":"before"' (ngModelChange)="updateMessage(header,value)">
+        <ng-container *ngIf="value;else read">
+            Writable
+        </ng-container>
+        <ng-template #read>
+            Read Only
+        </ng-template>
+    </mat-slide-toggle>
+</ng-template>
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.spec.ts
index 692fed2..7d35744 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.spec.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.spec.ts
@@ -1,16 +1,20 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { apiURL } from 'src/environments/environment';
 import { ConvertMessageTableTitlesToStringPipe } from '../../../pipes/convert-message-table-titles-to-string.pipe';
+import { UiService } from '../../../services/ui.service';
 
 import { EditMessageFieldComponent } from './edit-message-field.component';
 
 describe('EditMessageFieldComponent', () => {
   let component: EditMessageFieldComponent;
   let fixture: ComponentFixture<EditMessageFieldComponent>;
+  let httpTestingController: HttpTestingController;
+  let uiService: UiService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -21,12 +25,24 @@
   });
 
   beforeEach(() => {
+    httpTestingController = TestBed.inject(HttpTestingController);
+    uiService = TestBed.inject(UiService);
     fixture = TestBed.createComponent(EditMessageFieldComponent);
     component = fixture.componentInstance;
+    component.header='description'
+    component.value='v1'
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should update value', fakeAsync(() => {
+    uiService.BranchIdString='8'
+    component.updateMessage('description', 'v2');
+    tick(500);
+    const req = httpTestingController.expectOne(apiURL + "/mim/branch/" + '8' + "/messages");
+    expect(req.request.method).toEqual('PATCH');
+  }));
 });
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.ts
index b85ad80..8265810 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/edit-message-field/edit-message-field.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
 import { share, debounceTime, distinctUntilChanged, map, tap, switchMap } from 'rxjs/operators';
+import { EnumsService } from 'src/app/ple/messaging/shared/services/http/enums.service';
 import { CurrentMessagesService } from '../../../services/current-messages.service';
 
 interface message {
@@ -37,7 +38,11 @@
     }),
     switchMap(val=>this.messageService.partialUpdateMessage(this._message))
   )
-  constructor (private messageService: CurrentMessagesService) {
+
+  rates = this.enumService.rates;
+  types = this.enumService.types;
+  periodicities = this.enumService.periodicities;
+  constructor (private messageService: CurrentMessagesService, private enumService: EnumsService) {
     this._sendValue.subscribe();
    }
 
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/message-table.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/message-table.component.spec.ts
index f1422f7..bf38a6d 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/message-table.component.spec.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/message-table.component.spec.ts
@@ -24,7 +24,8 @@
 import { ConvertSubMessageTitlesToStringPipe } from '../../pipes/convert-sub-message-titles-to-string.pipe';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatDialogModule } from '@angular/material/dialog';
-import { EditMessageFieldComponent } from './edit-message-field/edit-message-field.component';
+import { EditMessageFieldComponentMock } from '../../mocks/components/EditMessageField.mock';
+import { SubMessageTableComponentMock } from '../../mocks/components/SubMessageTable.mock';
 
 let loader: HarnessLoader;
 
@@ -38,7 +39,7 @@
     interfaceMessageRate: '50Hz',
     interfaceMessageNumber: '0',
     interfaceMessagePeriodicity: '1Hz',
-    interfaceMessageWriteAccess: 'true',
+    interfaceMessageWriteAccess: true,
     interfaceMessageType: 'Connection',
     subMessages: [{
       id: '0',
@@ -64,7 +65,7 @@
         MatDialogModule,
         RouterTestingModule
       ],
-      declarations: [MessageTableComponent, ConvertMessageTableTitlesToStringPipe, SubMessageTableComponent, ConvertSubMessageTitlesToStringPipe, EditMessageFieldComponent],
+      declarations: [MessageTableComponent, ConvertMessageTableTitlesToStringPipe, SubMessageTableComponentMock, EditMessageFieldComponentMock],
       providers: [{
         provide: CurrentMessagesService, useValue: {
           messages: of(expectedData),
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/sub-message-table/edit-sub-message-field/edit-sub-message-field.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/sub-message-table/edit-sub-message-field/edit-sub-message-field.component.html
index 6b75e82..1514725 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/sub-message-table/edit-sub-message-field/edit-sub-message-field.component.html
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/sub-message-table/edit-sub-message-field/edit-sub-message-field.component.html
@@ -1,4 +1,3 @@
 <mat-form-field>
-    <mat-label>{{header|convertSubMessageTitlesToString}}</mat-label>
     <input matInput [(ngModel)]="value" (ngModelChange)="updateSubMessage(header,value)">
 </mat-form-field>
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/message-interface.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/message-interface.component.spec.ts
index a8f3cec..5c2f6b9 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/message-interface.component.spec.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/message-interface.component.spec.ts
@@ -4,6 +4,7 @@
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -19,6 +20,7 @@
 import { SubMessageTableComponent } from './components/sub-message-table/sub-message-table.component';
 
 import { MessageInterfaceComponent } from './message-interface.component';
+import { MessageTableComponentMock } from './mocks/components/MessageTableComponent.mock';
 import { ConvertMessageTableTitlesToStringPipe } from './pipes/convert-message-table-titles-to-string.pipe';
 import { ConvertSubMessageTitlesToStringPipe } from './pipes/convert-sub-message-titles-to-string.pipe';
 import { CurrentMessagesService } from './services/current-messages.service';
@@ -34,7 +36,7 @@
     interfaceMessageRate: '50Hz',
     interfaceMessageNumber: '0',
     interfaceMessagePeriodicity: '1Hz',
-    interfaceMessageWriteAccess: 'true',
+    interfaceMessageWriteAccess: true,
     interfaceMessageType: 'Connection',
     subMessages: [{
       id: '0',
@@ -58,8 +60,9 @@
         MatTooltipModule,
         OseeStringUtilsDirectivesModule,
         OseeStringUtilsPipesModule,
-        MatDialogModule],
-      declarations: [MessageInterfaceComponent, MessageTableComponent, SubMessageTableComponent, ConvertMessageTableTitlesToStringPipe, ConvertSubMessageTitlesToStringPipe, EditSubMessageFieldComponent, AddSubMessageDialogComponent, EditMessageFieldComponent, AddMessageDialogComponent],
+        MatDialogModule,
+        MatProgressBarModule],
+      declarations: [MessageInterfaceComponent, MessageTableComponentMock],
       providers: [{
         provide: CurrentMessagesService, useValue: {
           filter: '',
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/mocks/components/EditMessageField.mock.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/mocks/components/EditMessageField.mock.ts
new file mode 100644
index 0000000..9a67387
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/mocks/components/EditMessageField.mock.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: 'osee-messaging-edit-message-field',
+    template:'<p>Dummy</p>'
+})
+export class EditMessageFieldComponentMock{
+    @Input() messageId!: string;
+    @Input() header!: string;
+    @Input() value!: string;
+}
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/mocks/components/MessageTableComponent.mock.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/mocks/components/MessageTableComponent.mock.ts
new file mode 100644
index 0000000..b2e0b93
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/mocks/components/MessageTableComponent.mock.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: 'ple-messaging-message-table',
+    template:'<p>Dummy</p>'
+})
+export class MessageTableComponentMock{
+    
+}
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/mocks/components/SubMessageTable.mock.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/mocks/components/SubMessageTable.mock.ts
new file mode 100644
index 0000000..bfae6f7
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/mocks/components/SubMessageTable.mock.ts
@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+
+import { message } from "../../types/messages";
+import { subMessage } from "../../types/sub-messages";
+
+@Component({
+    selector: 'ple-messaging-sub-message-table',
+    template:'<p>Dummy</p>'
+})
+export class SubMessageTableComponentMock{
+    @Input() data!: subMessage[];
+    @Input() dataSource!: MatTableDataSource<subMessage>;
+    @Input() filter!: string;
+  
+  @Input() element!: message;
+    @Input() editMode!: boolean;
+    @Output() expandRow: EventEmitter<boolean> = new EventEmitter();
+}
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/messaging-routing.module.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/messaging-routing.module.ts
index f5695c8..7044e17 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/messaging/messaging-routing.module.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/messaging-routing.module.ts
@@ -8,6 +8,9 @@
   { path: ':branchType/:branchId/messages', loadChildren: () => import('./message-interface/message-interface.module').then(m => m.MessageInterfaceModule) },
   { path: ':branchType/:branchId/types', loadChildren: () => import('./types-interface/types-interface.module').then(m => m.TypesInterfaceModule) },
   { path: ':branchType/:branchId/types/:type', loadChildren: () => import('./types-interface/types-interface.module').then(m => m.TypesInterfaceModule) },
+  { path: 'typeSearch', loadChildren: () => import('./type-element-search/type-element-search.module').then(m => m.TypeElementSearchModule) },
+  { path: ':branchType/typeSearch', loadChildren: () => import('./type-element-search/type-element-search.module').then(m => m.TypeElementSearchModule) },
+  { path: ':branchType/:branchId/typeSearch', loadChildren: () => import('./type-element-search/type-element-search.module').then(m => m.TypeElementSearchModule) },
 ];
 
 @NgModule({
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/shared/services/http/enums.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/shared/services/http/enums.service.spec.ts
new file mode 100644
index 0000000..f2c2aa6
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/shared/services/http/enums.service.spec.ts
@@ -0,0 +1,58 @@
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+import { apiURL } from 'src/environments/environment';
+
+import { EnumsService } from './enums.service';
+
+describe('EnumsService', () => {
+  let service: EnumsService;
+  let httpTestingController: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports:[HttpClientTestingModule]
+    });
+    service = TestBed.inject(EnumsService);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should fetch message rates', () => {
+    let testData = ['r1', 'r2', 'r3'];
+    service.rates.subscribe();
+    const req = httpTestingController.expectOne(apiURL + "/mim/enums/" + 'MessageRates');
+    expect(req.request.method).toEqual('GET');
+    req.flush(testData);
+    httpTestingController.verify();
+  })
+
+  it('should fetch message types', () => {
+    let testData = ['t1', 't2', 't3'];
+    service.types.subscribe();
+    const req = httpTestingController.expectOne(apiURL + "/mim/enums/" + 'MessageTypes');
+    expect(req.request.method).toEqual('GET');
+    req.flush(testData);
+    httpTestingController.verify();
+  })
+
+  it('should fetch message periodicities', () => {
+    let testData = ['p1', 'p2', 'p3'];
+    service.periodicities.subscribe();
+    const req = httpTestingController.expectOne(apiURL + "/mim/enums/" + 'MessagePeriodicities');
+    expect(req.request.method).toEqual('GET');
+    req.flush(testData);
+    httpTestingController.verify();
+  })
+
+  it('should fetch structure categories', () => {
+    let testData = ['s1', 's2', 's3'];
+    service.categories.subscribe();
+    const req = httpTestingController.expectOne(apiURL + "/mim/enums/" + 'StructureCategories');
+    expect(req.request.method).toEqual('GET');
+    req.flush(testData);
+    httpTestingController.verify();
+  })
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/shared/services/http/enums.service.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/shared/services/http/enums.service.ts
new file mode 100644
index 0000000..c6f39ce
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/shared/services/http/enums.service.ts
@@ -0,0 +1,38 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { share } from 'rxjs/operators';
+import { apiURL } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EnumsService {
+
+  constructor (private http: HttpClient) { }
+
+  private _baseURL = apiURL + '/mim/enums/'
+  private _periodicities = this.http.get<string[]>(this.baseURL + 'MessagePeriodicities').pipe(share());
+  private _rates = this.http.get<string[]>(this.baseURL + 'MessageRates').pipe(share());
+  private _types = this.http.get<string[]>(this.baseURL + 'MessageTypes').pipe(share());
+  private _categories = this.http.get<string[]>(this.baseURL + 'StructureCategories').pipe(share());
+  
+  get baseURL() {
+    return this._baseURL;
+  }
+  
+  get periodicities() {
+    return this._periodicities;
+  }
+
+  get rates() {
+    return this._rates;
+  }
+
+  get types() {
+    return this._types;
+  }
+
+  get categories() {
+    return this._categories;
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.html
new file mode 100644
index 0000000..a574536
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.html
@@ -0,0 +1,8 @@
+<mat-form-field appearance="fill">
+    <mat-label>Select a Branch</mat-label>
+    <mat-select (selectionChange)="selectBranch($event)" [disabled]="(selectedBranchType |async)?.length ==0" [(value)]="selectedBranchId" required>
+        <mat-option *ngFor="let option of (options |async)" [value]="option.id" [id]="option.id" >
+            {{option.name}}
+        </mat-option>
+    </mat-select>
+</mat-form-field>
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.sass b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.sass
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.sass
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.spec.ts
new file mode 100644
index 0000000..fd6c751
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.spec.ts
@@ -0,0 +1,95 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatFormFieldHarness } from '@angular/material/form-field/testing';
+import { MatSelectHarness } from '@angular/material/select/testing';
+import { BranchSelectorComponent } from './branch-selector.component';
+import { CurrentBranchTypeService } from '../../services/current-branch-type.service';
+import { of } from 'rxjs';
+import { BranchListing } from '../../types/BranchListing';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { BranchTypeService } from '../../services/router/branch-type.service';
+import { RoutingService } from '../../services/router/routing.service';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('BranchSelectorComponent', () => {
+  let component: BranchSelectorComponent;
+  let fixture: ComponentFixture<BranchSelectorComponent>;
+  let loader: HarnessLoader;
+  let testData: BranchListing[] = [{
+    id: '8',
+    viewId:'8',
+    idIntValue: 8,
+    name: 'SAW PL',
+    associatedArtifact: '8',
+    baselineTx: '',
+    parentTx: '',
+    parentBranch: {
+      id: '0',
+      viewId:'0'
+    },
+    branchState: '0',
+    branchType: '0',
+    inheritAccessControl: false,
+    archived: false,
+    shortName:''
+  }]
+  let currentBranchSpy: jasmine.SpyObj<CurrentBranchTypeService> = jasmine.createSpyObj('CurrentBranchTypeService', {}, { branches: of(testData) });
+  let routingSpy: jasmine.SpyObj<RoutingService> = jasmine.createSpyObj('RoutingService', [], {branchId:of('8')})
+  let typeService: BranchTypeService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatFormFieldModule, FormsModule, MatSelectModule, NoopAnimationsModule, RouterTestingModule.withRoutes(
+        [
+          { path: ':branchType/:branchId/typeSearch', component: BranchSelectorComponent },
+          { path: ':branchType/typeSearch', component: BranchSelectorComponent },
+          { path: 'typeSearch', component: BranchSelectorComponent },
+        ]
+      )],
+      providers:[{provide: CurrentBranchTypeService, useValue:currentBranchSpy}],
+      declarations: [ BranchSelectorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BranchSelectorComponent);
+    component = fixture.componentInstance;
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    typeService=TestBed.inject(BranchTypeService)
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('Core Functionality', () => {
+    describe('Selection', () => {
+      describe('Valid States', () => {
+        it('should select SAW PL branch', async () => {
+          typeService.type = 'product line';
+          (await (await loader.getHarness(MatFormFieldHarness)).getControl(MatSelectHarness))?.open();
+          (await (await (await loader.getHarness(MatFormFieldHarness)).getControl(MatSelectHarness))?.clickOptions({ text: 'SAW PL' }));
+          expect(component.selectedBranchId).toEqual('8');
+        });
+      })
+      describe('Non-interactive States', () => {
+        it('should be disabled without a branch type', async () => {
+          expect(await(await(await loader.getHarness(MatFormFieldHarness)).getControl(MatSelectHarness))?.isDisabled()).toEqual(true)
+        });
+      })
+    })
+    describe('Page Load', () => {
+      it('should have a pre-selected type', async () => {
+        typeService.type = 'product line';
+        component.selectedBranchId = "8";
+        expect(await(await(await loader.getHarness(MatFormFieldHarness)).getControl(MatSelectHarness))?.getValueText()).toEqual('SAW PL')
+      });  
+    })
+  })
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.ts
new file mode 100644
index 0000000..cabc3ec
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-selector/branch-selector.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { MatSelectChange } from '@angular/material/select';
+import { CurrentBranchTypeService } from '../../services/current-branch-type.service';
+import { BranchIdService } from '../../services/router/branch-id.service';
+import { BranchTypeService } from '../../services/router/branch-type.service';
+import { RoutingService } from '../../services/router/routing.service';
+
+@Component({
+  selector: 'osee-typesearch-branch-selector',
+  templateUrl: './branch-selector.component.html',
+  styleUrls: ['./branch-selector.component.sass']
+})
+export class BranchSelectorComponent implements OnInit {
+  selectedBranchType = this.branchTypeService.BranchType;
+  selectedBranchId = "";
+  options = this.branchesService.branches;
+  constructor (private branchesService: CurrentBranchTypeService, private branchTypeService: BranchTypeService, private branchIdService: RoutingService) {
+    this.branchIdService.BranchId.subscribe((val) => {
+      this.selectedBranchId = val;
+    })
+  }
+
+  ngOnInit(): void {
+  }
+
+  selectBranch(event:MatSelectChange) {
+    this.branchIdService.id = event.value;
+  }
+
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.html
new file mode 100644
index 0000000..d83ead6
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.html
@@ -0,0 +1,6 @@
+<mat-radio-group
+(change)="selectType($event.value)" [(ngModel)]="branchType">
+    <mat-radio-button *ngFor="let type of branchTypes" [value]="type.toLowerCase()" [id]="type.toLowerCase()" [name]="type.toLowerCase()" [ngClass]="branchType === type.toLowerCase() ? 'messaging-typeSearch-radio-option-selected' : 'messaging-typeSearch-radio-option'" color="primary">
+        {{type}}
+    </mat-radio-button>
+</mat-radio-group>
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.sass b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.sass
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.sass
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.spec.ts
new file mode 100644
index 0000000..24b7ee9
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.spec.ts
@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatRadioGroupHarness } from '@angular/material/radio/testing';
+import { MatRadioButtonHarness } from '@angular/material/radio/testing';
+import { BranchTypeSelectorComponent } from './branch-type-selector.component';
+import { MatRadioModule } from '@angular/material/radio';
+import { RouterTestingModule } from '@angular/router/testing';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule } from '@angular/forms';
+
+describe('BranchTypeSelectorComponent', () => {
+  let component: BranchTypeSelectorComponent;
+  let fixture: ComponentFixture<BranchTypeSelectorComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports:[MatRadioModule,FormsModule,MatFormFieldModule,RouterTestingModule.withRoutes(
+        [
+          { path: ':branchType/:branchId/typeSearch', component: BranchTypeSelectorComponent },
+          { path: ':branchType/typeSearch', component: BranchTypeSelectorComponent },
+          { path: 'typeSearch', component: BranchTypeSelectorComponent },
+        ]
+      )],
+      declarations: [ BranchTypeSelectorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BranchTypeSelectorComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('Core Functionality', () => {
+    it('should set the type to product line',async () => {
+      await (await loader.getHarness(MatRadioButtonHarness.with({ label: 'Product Line' }))).check();
+      expect(component.branchType).toEqual('product line')
+    });
+  
+    it('should set the type to working',async () => {
+      await (await loader.getHarness(MatRadioButtonHarness.with({ label: 'Working' }))).check();
+      expect(component.branchType).toEqual('working')
+    });
+  })
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.ts
new file mode 100644
index 0000000..1681e62
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/branch-type-selector/branch-type-selector.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { MatRadioChange } from '@angular/material/radio';
+import { iif, of } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { BranchTypeService } from '../../services/router/branch-type.service';
+import { RoutingService } from '../../services/router/routing.service';
+
+@Component({
+  selector: 'osee-typesearch-branch-type-selector',
+  templateUrl: './branch-type-selector.component.html',
+  styleUrls: ['./branch-type-selector.component.sass']
+})
+export class BranchTypeSelectorComponent implements OnInit {
+  branchTypes: string[] = ['Product Line', 'Working'];
+  branchType = ""
+  constructor (private typeService: RoutingService) {
+   }
+
+  ngOnInit(): void {
+    this.typeService.BranchType.pipe(
+      switchMap((branchType) => iif(() => branchType === 'baseline', of('product line'), of(branchType)).pipe())).subscribe((value) => {
+      this.branchType = value;
+    })
+  }
+  changeBranchType(value: string) {
+    this.typeService.type = value;
+  }
+
+  selectType(event: string) {
+    this.changeBranchType(event as string)
+  }
+
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.html
new file mode 100644
index 0000000..d9e0e2c
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.html
@@ -0,0 +1,6 @@
+<mat-form-field class="ple-messaging-element-search-filter">
+    <mat-label>Filter Types</mat-label>
+    <input matInput type="text" (keyup)="applyFilter($event)" #input [value]="searchTerm">
+    <mat-hint>Enter text to filter Types.
+    </mat-hint>
+</mat-form-field>
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.sass b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.sass
new file mode 100644
index 0000000..3d1f523
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.sass
@@ -0,0 +1,5 @@
+.ple-messaging-element-search-filter
+    width: 100%
+    padding:
+        left: 1%
+        bottom: 1%
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.spec.ts
new file mode 100644
index 0000000..8a8512c
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.spec.ts
@@ -0,0 +1,53 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatFormFieldHarness } from '@angular/material/form-field/testing';
+import { MatInputModule } from '@angular/material/input';
+import { MatInputHarness } from '@angular/material/input/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TestScheduler } from 'rxjs/testing';
+import { SearchService } from '../../services/router/search.service';
+
+import { ElementTableSearchComponent } from './element-table-search.component';
+
+describe('ElementTableSearchComponent', () => {
+  let component: ElementTableSearchComponent;
+  let fixture: ComponentFixture<ElementTableSearchComponent>;
+  let loader: HarnessLoader;
+  let service: SearchService;
+  let scheduler: TestScheduler;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports:[MatInputModule,MatFormFieldModule,FormsModule,NoopAnimationsModule],
+      declarations: [ ElementTableSearchComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ElementTableSearchComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    service = TestBed.inject(SearchService);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  beforeEach(() => scheduler = new TestScheduler((actual, expected) => {
+    expect(actual).toEqual(expected);
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should update search terms to Hello World', () => {
+    scheduler.run(async () => {
+      (await (await loader.getHarness(MatFormFieldHarness)).getControl(MatInputHarness))?.setValue('Hello World')
+      let values={a:'hello world'}
+      let marble = 'a';
+      scheduler.expectObservable(service.searchTerm).toBe(marble, values);
+    });
+  });
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.ts
new file mode 100644
index 0000000..9c7c8b7
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table-search/element-table-search.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { SearchService } from '../../services/router/search.service';
+
+@Component({
+  selector: 'osee-typesearch-element-table-search',
+  templateUrl: './element-table-search.component.html',
+  styleUrls: ['./element-table-search.component.sass']
+})
+export class ElementTableSearchComponent implements OnInit {
+  searchTerm: string = "";
+  constructor (private searchService: SearchService) {
+    this.searchService.searchTerm.subscribe((val) => {
+      this.searchTerm = val;
+    })
+   }
+
+  ngOnInit(): void {
+  }
+
+  applyFilter(event: Event) {
+    this.searchService.search=(event.target as HTMLInputElement).value.trim().toLowerCase();
+  }
+
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.html
new file mode 100644
index 0000000..4f5e049
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.html
@@ -0,0 +1,20 @@
+<div class='mat-elevation-z8'>
+    <osee-typesearch-element-table-search></osee-typesearch-element-table-search>
+    <table mat-table multiTemplateDataRows [dataSource]="dataSource" class="table-full-width">
+        <ng-container [matColumnDef]="header" *ngFor="let header of headers; let i = index; trackBy:valueTracker;">
+            <th mat-header-cell *matHeaderCellDef [attr.colspan]="headers[i]" class="message-interface-table-view-message-header">
+                <ng-container>
+                    {{header}}
+                </ng-container>
+            </th>
+            <td mat-cell *matCellDef="let element; let i = dataIndex" [ngClass]="i%2===0? 'message-table-row-even':'message-table-row-odd'">
+                {{element[header]}}
+            </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="headers; sticky:true">
+        </tr>    
+        <tr mat-row *matRowDef= "let row; columns: headers;"    
+        class="message-detail-row">
+        </tr>
+    </table>
+</div>
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.sass b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.sass
new file mode 100644
index 0000000..e9ae7d5
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.sass
@@ -0,0 +1,2 @@
+.table-full-width
+    width: 100%
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.spec.ts
new file mode 100644
index 0000000..5d344ef
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.spec.ts
@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatTableModule } from '@angular/material/table';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
+import { CurrentElementSearchService } from '../../services/current-element-search.service';
+import { ElementTableSearchDummy } from '../../testing/MockComponents/ElementTableSearch';
+import { elementSearch3 } from '../../testing/MockResponses/ElementSearch';
+
+import { ElementTableComponent } from './element-table.component';
+
+describe('ElementTableComponent', () => {
+  let component: ElementTableComponent;
+  let fixture: ComponentFixture<ElementTableComponent>;
+  let serviceSpy: jasmine.SpyObj<CurrentElementSearchService>;
+
+  beforeEach(async () => {
+    serviceSpy = jasmine.createSpyObj('CurrentElementSearchService', {}, {elements:of(elementSearch3)})
+    await TestBed.configureTestingModule({
+      imports: [MatTableModule, NoopAnimationsModule],
+      providers:[{provide:CurrentElementSearchService,useValue:serviceSpy}],
+      declarations: [ ElementTableComponent, ElementTableSearchDummy ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ElementTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.ts
new file mode 100644
index 0000000..6d5cdfa
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/components/element-table/element-table.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { CurrentElementSearchService } from '../../services/current-element-search.service';
+import { element } from '../../types/element';
+
+@Component({
+  selector: 'osee-typesearch-element-table',
+  templateUrl: './element-table.component.html',
+  styleUrls: ['./element-table.component.sass']
+})
+export class ElementTableComponent implements OnInit {
+  dataSource = new MatTableDataSource<element>();
+  headers = [
+    'name',
+    'platformTypeName2',
+    'interfaceElementAlterable',
+    'description',
+    'notes'];
+  constructor (private elementService: CurrentElementSearchService) {
+    this.elementService.elements.subscribe((val) => {
+      this.dataSource.data = val;
+    })
+  }
+
+  ngOnInit(): void {
+  }
+
+  valueTracker(index: any, item: any) {
+    return index;
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-branch-type.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-branch-type.service.spec.ts
new file mode 100644
index 0000000..1c6b66c
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-branch-type.service.spec.ts
@@ -0,0 +1,44 @@
+import { TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { BranchListing } from '../types/BranchListing';
+
+import { CurrentBranchTypeService } from './current-branch-type.service';
+import { BranchService } from './http/branch.service';
+import { BranchTypeService } from './router/branch-type.service';
+
+describe('CurrentBranchTypeService', () => {
+  let service: CurrentBranchTypeService;
+  let typeService: BranchTypeService;
+  let branchSpy: jasmine.SpyObj<BranchService> = jasmine.createSpyObj('BranchService', ['getBranches']);
+  
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers:[{provide:BranchService, useValue:branchSpy}]
+    });
+    service = TestBed.inject(CurrentBranchTypeService);
+    typeService = TestBed.inject(BranchTypeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should call get branches with type working', () => {
+    service.branches.subscribe();
+    typeService.type = 'working';
+    expect(branchSpy.getBranches).toHaveBeenCalledWith('working');
+  });
+
+  it('should call get branches with type baseline', () => {
+    service.branches.subscribe();
+    typeService.type = 'product line';
+    expect(branchSpy.getBranches).toHaveBeenCalledWith('baseline');
+  });
+
+  // it('should not call get branches', () => {
+  //   service.branches.subscribe();
+  //   expect(() => { typeService.type = 'asdf' }).toThrow(new Error('Type is not a valid value. Invalid Value:' + 'asdf' + ' Valid values: product line,working'));
+  //   console.log(typeService.type);
+  //   expect(branchSpy.getBranches).not.toHaveBeenCalled()
+  // });
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-branch-type.service.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-branch-type.service.ts
new file mode 100644
index 0000000..939da96
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-branch-type.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { iif, of } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { BranchListing } from '../types/BranchListing';
+import { BranchService } from './http/branch.service';
+import { BranchTypeService } from './router/branch-type.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CurrentBranchTypeService {
+  private _branches = this.typeService.BranchType.pipe(
+    switchMap((val)=>iif(()=>val!==''&& (val === 'baseline' || val === 'working'),this.branchService.getBranches(val),of<BranchListing[]>([])))
+  )
+  constructor (private branchService: BranchService, private typeService: BranchTypeService) { }
+  
+  get branches() {
+    return this._branches;
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-element-search.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-element-search.service.spec.ts
new file mode 100644
index 0000000..71c2d21
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-element-search.service.spec.ts
@@ -0,0 +1,216 @@
+import { TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { elementSearch1, elementSearch2 } from '../testing/MockResponses/ElementSearch';
+import { platformTypes1, platformTypes2 } from '../testing/MockResponses/PlatformType';
+import { PlatformType } from '../types/PlatformType';
+import {TestScheduler} from 'rxjs/testing'
+
+import { CurrentElementSearchService } from './current-element-search.service';
+import { ElementSearchService } from './http/element-search.service';
+import { PlatformTypesService } from './http/platform-types.service';
+import { BranchIdService } from './router/branch-id.service';
+import { SearchService } from './router/search.service';
+
+describe('CurrentElementSearchService', () => {
+  let service: CurrentElementSearchService;
+  let searchService: SearchService;
+  let branchIdService:BranchIdService
+  let idServiceSpy: jasmine.SpyObj<BranchIdService>;
+  let searchServiceSpy: jasmine.SpyObj<SearchService>;
+  let platformTypeSpy: jasmine.SpyObj<PlatformTypesService>;
+  let elementSearchSpy: jasmine.SpyObj<ElementSearchService>;
+  let scheduler: TestScheduler;
+
+  beforeEach(() => {
+    jasmine.setDefaultSpyStrategy(and => and.returnValues([of('hello'), of('world')]));
+    searchServiceSpy = jasmine.createSpyObj('SearchService', {}, ['searchTerm']);
+    jasmine.setDefaultSpyStrategy(and => and.returnValues(of<PlatformType[]>(platformTypes1), of<PlatformType[]>(platformTypes2)));
+    platformTypeSpy = jasmine.createSpyObj('PlatformTypesService', ['getFilteredTypes']);
+    jasmine.setDefaultSpyStrategy(and => and.returnValues(of(elementSearch1), of(elementSearch2),of([]),of([]),of([]),of([]),of([]),of([])))
+    elementSearchSpy = jasmine.createSpyObj('ElementSearchService', ['getFilteredElements']);
+    jasmine.setDefaultSpyStrategy();
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: PlatformTypesService, useValue: platformTypeSpy },
+        { provide: ElementSearchService, useValue: elementSearchSpy }
+      ]
+    });
+    service = TestBed.inject(CurrentElementSearchService);
+    searchService = TestBed.inject(SearchService);
+    branchIdService=TestBed.inject(BranchIdService)
+  });
+
+  beforeEach(() => scheduler = new TestScheduler((actual, expected) => {
+    expect(actual).toEqual(expected);
+  }));
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should create list of elements', () => {
+    expect(platformTypeSpy.getFilteredTypes).toBeDefined();
+    expect(elementSearchSpy.getFilteredElements).toBeDefined();
+    scheduler.run(() => {
+      branchIdService.id = '8';
+      searchService.search = 'hello';
+      const values = {
+        a:
+          [
+            {
+              id: '0',
+              name: 'name',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+              }
+          ],
+        b:
+          [
+            {
+            id: '0',
+            name: 'name',
+            description: '',
+            notes: '',
+            interfaceElementAlterable: true,
+            interfaceElementIndexEnd: 1,
+            interfaceElementIndexStart: 0
+            }, 
+            {
+              id: '1',
+              name: 'name1',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+            }
+          ],
+        c: 
+          [
+            {
+              id: '0',
+              name: 'name',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+              
+            }, 
+            {
+              id: '1',
+              name: 'name1',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+            },
+            {
+              id: '2',
+              name: 'name2',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+            }
+          ],
+        d:
+          [
+            {
+              id: '0',
+              name: 'name',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+              
+            }, 
+            {
+              id: '1',
+              name: 'name1',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+            },
+            {
+              id: '2',
+              name: 'name2',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+            },
+            {
+              id: '3',
+              name: 'Title0',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+            }
+          ],
+        e:
+          [
+            {
+              id: '0',
+              name: 'name',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+              
+            }, 
+            {
+              id: '1',
+              name: 'name1',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+            },
+            {
+              id: '2',
+              name: 'name2',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+            },
+            {
+              id: '3',
+              name: 'Title0',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+            },
+            {
+              id: '5',
+              name: 'Title2',
+              description: '',
+              notes: '',
+              interfaceElementAlterable: true,
+              interfaceElementIndexEnd: 1,
+              interfaceElementIndexStart: 0
+            }
+          ],
+      }
+      const marble ='(e)'
+      scheduler.expectObservable(service.elements).toBe(marble,values)
+    })
+  });
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-element-search.service.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-element-search.service.ts
new file mode 100644
index 0000000..fa9c34a
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/current-element-search.service.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { combineLatest, from } from 'rxjs';
+import { concatMap, distinct, filter, map, mergeMap, scan, switchMap, toArray } from 'rxjs/operators';
+import { element } from '../types/element';
+import { ElementSearchService } from './http/element-search.service';
+import { PlatformTypesService } from './http/platform-types.service';
+import { BranchIdService } from './router/branch-id.service';
+import { SearchService } from './router/search.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CurrentElementSearchService {
+
+  private _elements = combineLatest([this.idService.BranchId,this.searchService.searchTerm]).pipe(
+    filter(latest => latest[0] !== '' && !isNaN(Number(latest[0])) && Number(latest[0]) > 0),
+    switchMap((searchAndId) => this.platformTypesService.getFilteredTypes(searchAndId[1], searchAndId[0]).pipe(
+      concatMap((platformTypes) => from(platformTypes).pipe(
+        distinct((platformType) => { return platformType.id }),
+        concatMap((value) => this.elementSearch.getFilteredElements(searchAndId[0], value.id??'').pipe(
+          concatMap((elements) => from(elements).pipe(
+            distinct((element) => { return element.id })
+          ))
+        )),
+        distinct((val) => { return val.id }),
+        toArray()))
+    )),
+  )
+  constructor (private idService: BranchIdService, private platformTypesService: PlatformTypesService, private elementSearch: ElementSearchService, private searchService: SearchService) { }
+  
+  get elements() {
+    return this._elements;
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/branch.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/branch.service.spec.ts
new file mode 100644
index 0000000..0e54b213
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/branch.service.spec.ts
@@ -0,0 +1,35 @@
+import { HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+import { apiURL } from 'src/environments/environment';
+import { BranchListing } from '../../types/BranchListing';
+
+import { BranchService } from './branch.service';
+
+describe('BranchService', () => {
+  let service: BranchService;
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports:[HttpClientTestingModule]
+    });
+    service = TestBed.inject(BranchService);
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should query for working branches', () => {
+    let testData: BranchListing[] = [];
+    service.getBranches('working').subscribe();
+    const req = httpTestingController.expectOne(apiURL+'/ats/ple/branches/'+'working');
+    expect(req.request.method).toEqual('GET');
+    req.flush(testData);
+    httpTestingController.verify();
+  });
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/branch.service.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/branch.service.ts
new file mode 100644
index 0000000..35b249a
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/branch.service.ts
@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { apiURL } from 'src/environments/environment';
+import { BranchListing } from '../../types/BranchListing';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BranchService {
+
+  constructor (private http: HttpClient) { }
+  
+  getBranches(type:string) {
+    return this.http.get<BranchListing[]>(apiURL+'/ats/ple/branches/'+type);
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/element-search.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/element-search.service.spec.ts
new file mode 100644
index 0000000..f6a6e0d
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/element-search.service.spec.ts
@@ -0,0 +1,35 @@
+import { HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+import { apiURL } from 'src/environments/environment';
+import { element } from '../../types/element';
+
+import { ElementSearchService } from './element-search.service';
+
+describe('ElementSearchService', () => {
+  let service: ElementSearchService;
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports:[HttpClientTestingModule]
+    });
+    service = TestBed.inject(ElementSearchService);
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should query for elements relating to an id', () => {
+    let testData: element[] = [];
+    service.getFilteredElements('8', '10').subscribe();
+    const req = httpTestingController.expectOne(apiURL+'/mim/branch/'+'8/'+'elements/getType/'+'10');
+    expect(req.request.method).toEqual('GET');
+    req.flush(testData);
+    httpTestingController.verify();
+  });
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/element-search.service.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/element-search.service.ts
new file mode 100644
index 0000000..6c3cf8a
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/element-search.service.ts
@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { apiURL } from 'src/environments/environment';
+import { element } from '../../types/element';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElementSearchService {
+
+  constructor (private http: HttpClient) { }
+  
+  getFilteredElements(branchId:string, typeId:string ) {
+    return this.http.get<element[]>(apiURL + '/mim/branch/' + branchId + '/elements/getType/' + typeId);
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/platform-types.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/platform-types.service.spec.ts
new file mode 100644
index 0000000..49477a7
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/platform-types.service.spec.ts
@@ -0,0 +1,35 @@
+import { HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+import { apiURL } from 'src/environments/environment';
+import { PlatformType } from '../../types/PlatformType';
+
+import { PlatformTypesService } from './platform-types.service';
+
+describe('PlatformTypesService', () => {
+  let service: PlatformTypesService;
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports:[HttpClientTestingModule]
+    });
+    service = TestBed.inject(PlatformTypesService);
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should query for platform types', () => {
+    let testData: PlatformType[] = [];
+    service.getFilteredTypes('filter', '8').subscribe();
+    const req = httpTestingController.expectOne(apiURL + "/mim/branch/" + '8' + "/types/filter/" + 'filter');
+    expect(req.request.method).toEqual('GET');
+    req.flush(testData);
+    httpTestingController.verify();
+  });
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/platform-types.service.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/platform-types.service.ts
new file mode 100644
index 0000000..80cb860
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/http/platform-types.service.ts
@@ -0,0 +1,17 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { apiURL } from 'src/environments/environment';
+import { PlatformType } from '../../types/PlatformType';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlatformTypesService {
+
+  constructor (private http: HttpClient) { }
+  
+  getFilteredTypes(filter: string, branchId: string): Observable<PlatformType[]> {
+    return this.http.get<PlatformType[]>(apiURL + "/mim/branch/" + branchId + "/types/filter/" + filter);
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-id.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-id.service.spec.ts
new file mode 100644
index 0000000..9fc56df
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-id.service.spec.ts
@@ -0,0 +1,41 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BranchIdService } from './branch-id.service';
+
+describe('BranchIdService', () => {
+  let service: BranchIdService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BranchIdService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('Core Functionality',()=> {
+    describe('Branch Id', () => {
+      describe('Valid States', () => {
+        it('should set id to 8', () => {
+          service.id='8'
+          expect(service.id).toEqual('8')
+        });    
+      })
+      describe('Invalid States', () => {
+        it('should throw an error when NaN is passed', () => {
+          expect(() => { service.id = 'asdf' }).toThrow(new Error('Id is not a valid value. Invalid Value:'+'asdf'+' Valid values: ID>0'));
+        });
+        it('should throw an error when an 0 is passed', () => {
+          expect(() => { service.id = '0' }).toThrow(new Error('Id is not a valid value. Invalid Value:'+'0'+' Valid values: ID>0'));
+        });
+        it('should throw an error when an -1 is passed', () => {
+          expect(() => { service.id = '-1' }).toThrow(new Error('Id is not a valid value. Invalid Value:'+'-1'+' Valid values: ID>0'));
+        });
+        it('should throw an error when an -123456 is passed', () => {
+          expect(() => { service.id = '-123456' }).toThrow(new Error('Id is not a valid value. Invalid Value:'+'-123456'+' Valid values: ID>0'));
+        });
+      })
+    })
+  })
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-id.service.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-id.service.ts
new file mode 100644
index 0000000..ffd344b
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-id.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BranchIdService {
+  private _branchId: BehaviorSubject<string> = new BehaviorSubject<string>("");
+  constructor () { }
+  
+  get BranchId() {
+    return this._branchId;
+  }
+
+  set id(value: string) {
+    if (value != '0'&& value !='-1'&& Number(value)>0 && !isNaN(Number(value))) {
+      this._branchId.next(value); 
+    } else {
+      throw new Error('Id is not a valid value. Invalid Value:'+value+' Valid values: ID>0');
+    }
+  }
+
+  get id() {
+    return this._branchId.getValue();
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-type.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-type.service.spec.ts
new file mode 100644
index 0000000..d9dfe1a
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-type.service.spec.ts
@@ -0,0 +1,38 @@
+import { TestBed } from '@angular/core/testing';
+import { branchType } from '../../types/BranchTypes';
+
+import { BranchTypeService } from './branch-type.service';
+
+describe('BranchTypeService', () => {
+  let service: BranchTypeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BranchTypeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('Core Functionality',()=> {
+    describe('Branch Type', () => {
+      describe('Valid States', () => {
+        it('should set type to baseline', () => {
+          service.type='product line'
+          expect(service.type).toEqual('baseline')
+        });
+      
+        it('should set type to working', () => {
+          service.type='working'
+          expect(service.type).toEqual('working')
+        });    
+      })
+      describe('Invalid States', () => {
+        it('should throw an error when an invalid value is passed', () => {
+          expect(() => { service.type = 'asdf' as branchType }).toThrow(new Error('Type is not a valid value. Invalid Value:' + 'asdf' + ' Valid values: product line,working'));
+        });  
+      })
+    })
+  })
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-type.service.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-type.service.ts
new file mode 100644
index 0000000..8c34dfa
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/branch-type.service.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import {branchType} from '../../types/BranchTypes'
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BranchTypeService {
+  private _branchType: BehaviorSubject<string> = new BehaviorSubject<string>("");
+  constructor () { }
+  
+  get BranchType() {
+    return this._branchType
+  }
+
+  set type(value: branchType) {
+    if (value === 'working') {
+      this._branchType.next(value); 
+    } else if (value === 'product line') {
+      this._branchType.next('baseline')
+    }
+    else {
+      throw new Error('Type is not a valid value. Invalid Value:'+value+' Valid values: product line,working');
+    }
+  }
+
+  get type() {
+    return this._branchType.getValue() as branchType;
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/router-state.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/router-state.service.spec.ts
new file mode 100644
index 0000000..41cd454
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/router-state.service.spec.ts
@@ -0,0 +1,58 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RouterStateService } from './router-state.service';
+
+describe('RouterStateService', () => {
+  let service: RouterStateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(RouterStateService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+  describe('Core Functionality',()=> {
+    describe('Branch Type', () => {
+      describe('Valid States', () => {
+        it('should set type to baseline', () => {
+          service.type='product line'
+          expect(service.type).toEqual('baseline')
+        });
+      
+        it('should set type to working', () => {
+          service.type='working'
+          expect(service.type).toEqual('working')
+        });    
+      })
+      describe('Invalid States', () => {
+        it('should throw an error when an invalid value is passed', () => {
+          expect(() => { service.type = 'asdf' }).toThrow(new Error('Type is not a valid value. Invalid Value:' + 'asdf' + ' Valid values: product line,working'));
+        });  
+      })
+    })
+    describe('Branch Id', () => {
+      describe('Valid States', () => {
+        it('should set id to 8', () => {
+          service.id='8'
+          expect(service.id).toEqual('8')
+        });
+      })
+      describe('Invalid States', () => {
+        it('should throw an error when a random string is passed', () => {
+          expect(() => { service.id = 'asdf' }).toThrow(new Error('Id is not a valid value. Invalid Value:'+'asdf'+' Valid values: ID>0'));
+        });
+        it('should throw an error when an 0 is passed', () => {
+          expect(() => { service.id = '0' }).toThrow(new Error('Id is not a valid value. Invalid Value:'+'0'+' Valid values: ID>0'));
+        });
+        it('should throw an error when an -1 is passed', () => {
+          expect(() => { service.id = '-1' }).toThrow(new Error('Id is not a valid value. Invalid Value:'+'-1'+' Valid values: ID>0'));
+        });
+        it('should throw an error when an -123456 is passed', () => {
+          expect(() => { service.id = '-123456' }).toThrow(new Error('Id is not a valid value. Invalid Value:'+'-123456'+' Valid values: ID>0'));
+        });
+      })
+    })
+  })
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/router-state.service.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/router-state.service.ts
new file mode 100644
index 0000000..21dd713
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/router-state.service.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { branchType } from '../../types/BranchTypes';
+import { BranchIdService } from './branch-id.service';
+import { BranchTypeService } from './branch-type.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RouterStateService {
+
+  constructor (private idService: BranchIdService, private typeService: BranchTypeService) { }
+  
+  get BranchId() {
+    return this.idService.BranchId;
+  }
+  get id() {
+    return this.idService.id;
+  }
+  set id(value: string) {
+    this.idService.id = value;
+  }
+
+  get BranchType() {
+    return this.typeService.BranchType;
+  }
+
+  get type() {
+    return this.typeService.type;
+  }
+
+  set type(value: string) {
+    this.typeService.type = value as branchType;
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/routing.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/routing.service.spec.ts
new file mode 100644
index 0000000..830f0e0
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/routing.service.spec.ts
@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { RoutingService } from './routing.service';
+
+@Component({
+  selector: 'dummy-comp',
+  template:'<p>Dummy</p>'
+})
+export class DummyComponent { }
+
+describe('RoutingService', () => {
+  let service: RoutingService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports:[RouterTestingModule.withRoutes(
+        [
+          { path: ':branchType/:branchId/typeSearch',component:DummyComponent },
+          { path: ':branchType/typeSearch',component:DummyComponent },
+          { path: 'typeSearch',component:DummyComponent },
+        ]
+      )]
+    });
+    service = TestBed.inject(RoutingService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should set base url to "working/product line" when type = "working/product line"', () => {
+    expect(service.type).toEqual("");
+    service.type = 'product line';
+    service.type = 'working';
+    expect(service.type).toEqual("working");
+  });
+
+  it('should set base url to "working/product line /id" when type = "working/product line /id"', () => {
+    expect(service.type).toEqual("");
+    expect(service.id).toEqual("");
+    service.id = '8';
+    expect(service.id).toEqual("8");
+    service.type = 'product line';
+    service.type = 'working';
+    expect(service.type).toEqual("working");
+  });
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/routing.service.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/routing.service.ts
new file mode 100644
index 0000000..15750cc
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/routing.service.ts
@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStateService } from './router-state.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RoutingService {
+
+  constructor (private state: RouterStateService, private router: Router) { }
+  
+  get id() {
+    return this.state.id
+  }
+
+  set id(value: string) {
+    let baseUrl;
+    if (this.state.type != '') {
+      baseUrl = this.router.url.split(this.state.type.replace('baseline', 'product%20line').replace(/ /g, "%20"))[0];
+    } else {
+      baseUrl = this.router.url;
+    }
+    this.router.navigate([baseUrl,this.state.type.replace('baseline', 'product line'),value,'typeSearch'])
+    this.state.id = value;
+  }
+
+  get type() {
+    return this.state.type;
+  }
+
+  set type(value: string) {
+    let baseUrl;
+    if (this.state.type != '') {
+      baseUrl = this.router.url.split(this.state.type.replace('baseline','product%20line').replace(/ /g, "%20"))[0];
+    } else {
+      baseUrl = this.router.url.split('typeSearch')[0];
+    }
+    this.state.type = value;
+    this.router.navigate([baseUrl,value,'typeSearch'])
+  }
+
+  get BranchId() {
+    return this.state.BranchId;
+  }
+
+  get BranchType() {
+    return this.state.BranchType;
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/search.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/search.service.spec.ts
new file mode 100644
index 0000000..6bf8658
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/search.service.spec.ts
@@ -0,0 +1,21 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SearchService } from './search.service';
+
+describe('SearchService', () => {
+  let service: SearchService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SearchService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should set search terms', () => {
+    service.search='terms'
+    expect(service.search).toEqual('terms')
+  });
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/search.service.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/search.service.ts
new file mode 100644
index 0000000..620d532
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/services/router/search.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SearchService {
+
+  private _searchTerm: BehaviorSubject<string> = new BehaviorSubject<string>("");
+  constructor () { }
+  
+  get searchTerm() {
+    return this._searchTerm;
+  }
+
+  set search(value: string) {
+    this._searchTerm.next(value)
+  }
+
+  get search() {
+    return this._searchTerm.getValue();
+  }
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/BranchSelector.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/BranchSelector.ts
new file mode 100644
index 0000000..de53917
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/BranchSelector.ts
@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: 'osee-typesearch-branch-selector',
+    template:'<p>Dummy Component</p>'
+})
+export class BranchSelectorDummy{ }
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/BranchTypeSelectorMock.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/BranchTypeSelectorMock.ts
new file mode 100644
index 0000000..6fbfdfe
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/BranchTypeSelectorMock.ts
@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: 'osee-typesearch-branch-type-selector',
+    template:'<p>Dummy Component</p>'
+})
+export class BranchTypeSelectorDummy{ }
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/ElementTable.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/ElementTable.ts
new file mode 100644
index 0000000..66a13b4
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/ElementTable.ts
@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: 'osee-typesearch-element-table',
+    template:'<p>Dummy Component</p>'
+})
+export class ElementTableDummy{ }
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/ElementTableSearch.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/ElementTableSearch.ts
new file mode 100644
index 0000000..861345a
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockComponents/ElementTableSearch.ts
@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: 'osee-typesearch-element-table-search',
+    template:'<p>Dummy Component</p>'
+})
+export class ElementTableSearchDummy{ }
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockResponses/ElementSearch.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockResponses/ElementSearch.ts
new file mode 100644
index 0000000..57ef0e5
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockResponses/ElementSearch.ts
@@ -0,0 +1,118 @@
+import { element } from "../../types/element";
+
+export const elementSearch1: element[] = [
+    {
+        id: '0',
+        name: 'name',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    },
+    {
+        id: '1',
+        name: 'name1',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    },
+    {
+        id: '2',
+        name: 'name2',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    },
+    {
+        id: '0',
+        name: 'name2',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    }
+]
+
+export const elementSearch2: element[] = [
+    {
+        id: '3',
+        name: 'Title0',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    },
+    {
+        id: '1',
+        name: 'Title1',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    },
+    {
+        id: '5',
+        name: 'Title2',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    },
+    {
+        id: '0',
+        name: 'Title3',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    }
+]
+
+export const elementSearch3: element[] = [
+    {
+        id: '0',
+        name: 'Title0',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    },
+    {
+        id: '1',
+        name: 'Title1',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    },
+    {
+        id: '2',
+        name: 'Title2',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    },
+    {
+        id: '3',
+        name: 'Title3',
+        description: '',
+        notes: '',
+        interfaceElementAlterable: true,
+        interfaceElementIndexEnd: 1,
+        interfaceElementIndexStart:0
+    }
+]
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockResponses/PlatformType.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockResponses/PlatformType.ts
new file mode 100644
index 0000000..6a70796
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/testing/MockResponses/PlatformType.ts
@@ -0,0 +1,109 @@
+import { PlatformType } from "../../types/PlatformType";
+
+export const platformTypes1: PlatformType[] = [
+    {
+        interfaceLogicalType: '',
+        interfacePlatform2sComplement: false,
+        interfacePlatformTypeAnalogAccuracy: '',
+        interfacePlatformTypeBitSize: '8',
+        interfacePlatformTypeBitsResolution: '8',
+        interfacePlatformTypeCompRate: '',
+        interfacePlatformTypeDefaultValue: '',
+        interfacePlatformTypeEnumLiteral: '',
+        interfacePlatformTypeMaxval: '1',
+        interfacePlatformTypeMinval: '0',
+        interfacePlatformTypeMsbValue: '0',
+        interfacePlatformTypeUnits: '',
+        interfacePlatformTypeValidRangeDescription: '',
+        id: '0',
+        name:'Name'
+    },
+    {
+        interfaceLogicalType: '',
+        interfacePlatform2sComplement: false,
+        interfacePlatformTypeAnalogAccuracy: '',
+        interfacePlatformTypeBitSize: '8',
+        interfacePlatformTypeBitsResolution: '8',
+        interfacePlatformTypeCompRate: '',
+        interfacePlatformTypeDefaultValue: '',
+        interfacePlatformTypeEnumLiteral: '',
+        interfacePlatformTypeMaxval: '1',
+        interfacePlatformTypeMinval: '0',
+        interfacePlatformTypeMsbValue: '0',
+        interfacePlatformTypeUnits: '',
+        interfacePlatformTypeValidRangeDescription: '',
+        id: '1',
+        name:'Name2'
+    },
+    {
+        interfaceLogicalType: '',
+        interfacePlatform2sComplement: false,
+        interfacePlatformTypeAnalogAccuracy: '',
+        interfacePlatformTypeBitSize: '8',
+        interfacePlatformTypeBitsResolution: '8',
+        interfacePlatformTypeCompRate: '',
+        interfacePlatformTypeDefaultValue: '',
+        interfacePlatformTypeEnumLiteral: '',
+        interfacePlatformTypeMaxval: '1',
+        interfacePlatformTypeMinval: '0',
+        interfacePlatformTypeMsbValue: '0',
+        interfacePlatformTypeUnits: '',
+        interfacePlatformTypeValidRangeDescription: '',
+        id: '2',
+        name:'Name3'
+    },
+]
+
+export const platformTypes2: PlatformType[] = [
+    {
+        interfaceLogicalType: '',
+        interfacePlatform2sComplement: false,
+        interfacePlatformTypeAnalogAccuracy: '',
+        interfacePlatformTypeBitSize: '8',
+        interfacePlatformTypeBitsResolution: '8',
+        interfacePlatformTypeCompRate: '',
+        interfacePlatformTypeDefaultValue: '',
+        interfacePlatformTypeEnumLiteral: '',
+        interfacePlatformTypeMaxval: '1',
+        interfacePlatformTypeMinval: '0',
+        interfacePlatformTypeMsbValue: '0',
+        interfacePlatformTypeUnits: '',
+        interfacePlatformTypeValidRangeDescription: '',
+        id: '3',
+        name:'Title'
+    },
+    {
+        interfaceLogicalType: '',
+        interfacePlatform2sComplement: false,
+        interfacePlatformTypeAnalogAccuracy: '',
+        interfacePlatformTypeBitSize: '8',
+        interfacePlatformTypeBitsResolution: '8',
+        interfacePlatformTypeCompRate: '',
+        interfacePlatformTypeDefaultValue: '',
+        interfacePlatformTypeEnumLiteral: '',
+        interfacePlatformTypeMaxval: '1',
+        interfacePlatformTypeMinval: '0',
+        interfacePlatformTypeMsbValue: '0',
+        interfacePlatformTypeUnits: '',
+        interfacePlatformTypeValidRangeDescription: '',
+        id: '4',
+        name:'Title2'
+    },
+    {
+        interfaceLogicalType: '',
+        interfacePlatform2sComplement: false,
+        interfacePlatformTypeAnalogAccuracy: '',
+        interfacePlatformTypeBitSize: '8',
+        interfacePlatformTypeBitsResolution: '8',
+        interfacePlatformTypeCompRate: '',
+        interfacePlatformTypeDefaultValue: '',
+        interfacePlatformTypeEnumLiteral: '',
+        interfacePlatformTypeMaxval: '1',
+        interfacePlatformTypeMinval: '0',
+        interfacePlatformTypeMsbValue: '0',
+        interfacePlatformTypeUnits: '',
+        interfacePlatformTypeValidRangeDescription: '',
+        id: '2',
+        name:'Title3'
+    },
+]
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search-routing.module.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search-routing.module.ts
new file mode 100644
index 0000000..4feda56
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search-routing.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TypeElementSearchComponent } from './type-element-search.component';
+
+const routes: Routes = [
+  { path: '', component: TypeElementSearchComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TypeElementSearchRoutingModule { }
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.html b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.html
new file mode 100644
index 0000000..750a824
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.html
@@ -0,0 +1,5 @@
+<div style="display:flex; flex-direction:column;">
+    <osee-typesearch-branch-type-selector></osee-typesearch-branch-type-selector>
+    <osee-typesearch-branch-selector></osee-typesearch-branch-selector>
+    <osee-typesearch-element-table></osee-typesearch-element-table>
+</div>
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.sass b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.sass
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.sass
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.spec.ts
new file mode 100644
index 0000000..c34e9ea
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.spec.ts
@@ -0,0 +1,75 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of, Subject } from 'rxjs';
+import { BranchIdService } from './services/router/branch-id.service';
+import { BranchTypeService } from './services/router/branch-type.service';
+import { BranchSelectorDummy } from './testing/MockComponents/BranchSelector';
+import { BranchTypeSelectorDummy } from './testing/MockComponents/BranchTypeSelectorMock';
+import { ElementTableDummy } from './testing/MockComponents/ElementTable';
+import { ElementTableSearchDummy } from './testing/MockComponents/ElementTableSearch';
+
+import { TypeElementSearchComponent } from './type-element-search.component';
+
+describe('TypeElementSearchComponent', () => {
+  let component: TypeElementSearchComponent;
+  let fixture: ComponentFixture<TypeElementSearchComponent>;
+  let params: Subject<Params>;
+  let idService: BranchIdService;
+  let typeService: BranchTypeService;
+
+  beforeEach(async () => {
+    params = new Subject<Params>();
+    await TestBed.configureTestingModule({
+      providers:[{provide:ActivatedRoute,useValue:{params:params}}],
+      declarations: [ TypeElementSearchComponent,ElementTableDummy,ElementTableSearchDummy,BranchSelectorDummy,BranchTypeSelectorDummy]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    idService = TestBed.inject(BranchIdService);
+    typeService = TestBed.inject(BranchTypeService);
+    fixture = TestBed.createComponent(TypeElementSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should create with branchId 8 and type product line', () => {
+    params.next({ 'branchId': '8', 'branchType': 'product line' });
+    expect(component).toBeTruthy();
+    expect(idService.id).toEqual('8');
+    expect(typeService.type).toEqual('baseline')
+  });
+
+  it('should create with branchId 8 and type working', () => {
+    params.next({ 'branchId': '8', 'branchType': 'working' });
+    expect(component).toBeTruthy();
+    expect(idService.id).toEqual('8');
+    expect(typeService.type).toEqual('working')
+  });
+
+  it('should create with branchId(when set to -1) "" and type working', () => {
+    params.next({ 'branchId': '-1', 'branchType': 'working' });
+    expect(component).toBeTruthy();
+    expect(idService.id).toEqual('');
+    expect(typeService.type).toEqual('working')
+  });
+
+  it('should create with branchId(when set to asdf) "" and type working', () => {
+    params.next({ 'branchId': 'asdf', 'branchType': 'working' });
+    expect(component).toBeTruthy();
+    expect(idService.id).toEqual('');
+    expect(typeService.type).toEqual('working')
+  });
+
+  it('should create with branchId 8 and type "" (when set to asdf)', () => {
+    params.next({ 'branchId': '8', 'branchType': 'asdf' });
+    expect(component).toBeTruthy();
+    expect(idService.id).toEqual('8');
+    expect(typeService.type).toEqual('')
+  });
+});
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.ts
new file mode 100644
index 0000000..4cbbc81
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { map } from 'rxjs/operators';
+import { RouterStateService } from './services/router/router-state.service';
+
+@Component({
+  selector: 'osee-typesearch-type-element-search',
+  templateUrl: './type-element-search.component.html',
+  styleUrls: ['./type-element-search.component.sass']
+})
+export class TypeElementSearchComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, private routerState: RouterStateService) { }
+
+  ngOnInit(): void {
+    this.route.params.pipe(
+      map((params: Params) => { if (Number(params['branchId']) > 0) { this.routerState.id = params['branchId'] }; if (params['branchType'] === 'product line' || params['branchType'] === 'working') { this.routerState.type = params['branchType'] }})
+    ).subscribe();
+  }
+
+}
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.module.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.module.ts
new file mode 100644
index 0000000..710b0c8
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/type-element-search.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TypeElementSearchRoutingModule } from './type-element-search-routing.module';
+import { TypeElementSearchComponent } from './type-element-search.component';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { BranchTypeSelectorComponent } from './components/branch-type-selector/branch-type-selector.component';
+import { BranchSelectorComponent } from './components/branch-selector/branch-selector.component';
+import { ElementTableComponent } from './components/element-table/element-table.component';
+import { ElementTableSearchComponent } from './components/element-table-search/element-table-search.component';
+import { MatInputModule } from '@angular/material/input';
+import { MatTableModule } from '@angular/material/table';
+
+
+@NgModule({
+  declarations: [TypeElementSearchComponent, BranchTypeSelectorComponent, BranchSelectorComponent, ElementTableComponent, ElementTableSearchComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    MatInputModule,
+    MatSelectModule,
+    MatTableModule,
+    TypeElementSearchRoutingModule
+  ]
+})
+export class TypeElementSearchModule { }
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/BranchListing.d.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/BranchListing.d.ts
new file mode 100644
index 0000000..36bd4c7
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/BranchListing.d.ts
@@ -0,0 +1,18 @@
+export interface BranchListing {
+    id: string,
+    viewId: string,
+    idIntValue: number,
+    name: string,
+    associatedArtifact: string,
+    baselineTx: string,
+    parentTx: string,
+    parentBranch: {
+        id: string,
+        viewId: string,
+    }
+    branchState: string,
+    branchType: string,
+    inheritAccessControl: boolean,
+    archived: boolean,
+    shortName: string
+}
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/BranchTypes.d.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/BranchTypes.d.ts
new file mode 100644
index 0000000..e973cfc
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/BranchTypes.d.ts
@@ -0,0 +1 @@
+export type branchType='product line'|'working'
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/PlatformType.d.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/PlatformType.d.ts
new file mode 100644
index 0000000..455d1fd
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/PlatformType.d.ts
@@ -0,0 +1,21 @@
+/**
+ * Platform Type as defined by the API, ids are required when fetching or updating a platform type
+ */
+ export interface PlatformType {
+    id?: string,
+    interfaceLogicalType: string,
+    interfacePlatform2sComplement: boolean,
+    interfacePlatformTypeAnalogAccuracy: string | null,
+    interfacePlatformTypeBitsResolution: string | null,
+    interfacePlatformTypeBitSize: string | null,
+    interfacePlatformTypeCompRate: string | null,
+    interfacePlatformTypeDefaultValue: string | null,
+    interfacePlatformTypeEnumLiteral: string | null,
+    interfacePlatformTypeMaxval: string | null,
+    interfacePlatformTypeMinval: string | null,
+    interfacePlatformTypeMsbValue: string | null,
+    interfacePlatformTypeUnits: string | null,
+    interfacePlatformTypeValidRangeDescription: string | null,
+    name: string
+    
+}
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/element.d.ts b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/element.d.ts
new file mode 100644
index 0000000..d2d6af7
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/app/ple/messaging/type-element-search/types/element.d.ts
@@ -0,0 +1,11 @@
+export interface element {
+    id: string,
+    name: string,
+    description: string,
+    notes: string,
+    interfaceElementIndexEnd: number,
+    interfaceElementIndexStart: number,
+    interfaceElementAlterable: boolean,
+    platformTypeName2?: string,
+    platformTypeId?:number
+}
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/app/ple/plconfig/services/pl-config-user.service.spec.ts b/plugins/org.eclipse.osee.web/src/app/ple/plconfig/services/pl-config-user.service.spec.ts
index 1057cc0..6a02880 100644
--- a/plugins/org.eclipse.osee.web/src/app/ple/plconfig/services/pl-config-user.service.spec.ts
+++ b/plugins/org.eclipse.osee.web/src/app/ple/plconfig/services/pl-config-user.service.spec.ts
@@ -1,4 +1,5 @@
 import { HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 
 import { PlConfigUserService } from './pl-config-user.service';
@@ -7,11 +8,9 @@
   let service: PlConfigUserService;
 
   beforeEach(() => {
-    const httpClientSpy = jasmine.createSpyObj('HttpClient', ['get', 'put', 'post']);
     TestBed.configureTestingModule({
-      providers: [
-      {provide: HttpClient, useValue:httpClientSpy}
-    ]});
+      imports:[HttpClientTestingModule],
+      });
     service = TestBed.inject(PlConfigUserService);
   });
 
diff --git a/plugins/org.eclipse.osee.web/src/custom-theme.scss b/plugins/org.eclipse.osee.web/src/custom-theme.scss
index a88b394..ee57a07 100644
--- a/plugins/org.eclipse.osee.web/src/custom-theme.scss
+++ b/plugins/org.eclipse.osee.web/src/custom-theme.scss
@@ -28,6 +28,7 @@
     @include ple.messages-messaging-message-interface-elements-theme($modern-ple-light-theme,$modern-ple-typography);
     @include ple.messages-messaging-message-interface-interface-theme($modern-ple-light-theme,$modern-ple-typography);
     @include ple.messages-messaging-message-interface-types-theme($modern-ple-light-theme,$modern-ple-typography);
+    @include ple.messages-messaging-message-typeSearch-theme($modern-ple-light-theme);
 
 .dark-theme{
     @include angular-material-color($modern-ple-dark-theme);
@@ -37,6 +38,7 @@
     @include ple.plconfig-dropdown-feature-color($modern-ple-dark-theme);
     @include ple.plconfig-dropdown-configuration-group-color($modern-ple-dark-theme);
     @include ple.plconfig-branch-selector-radio-color($modern-ple-dark-theme);
+    @include ple.messages-messaging-message-typeSearch-theme($modern-ple-dark-theme);
 }
 
 
diff --git a/plugins/org.eclipse.osee.web/src/themes/ple/messages/messaging/_lib.scss b/plugins/org.eclipse.osee.web/src/themes/ple/messages/messaging/_lib.scss
index b1467fc..e29b556 100644
--- a/plugins/org.eclipse.osee.web/src/themes/ple/messages/messaging/_lib.scss
+++ b/plugins/org.eclipse.osee.web/src/themes/ple/messages/messaging/_lib.scss
@@ -1 +1,2 @@
-@forward 'message-interface/lib' as message-interface-*;
\ No newline at end of file
+@forward 'message-interface/lib' as message-interface-*;
+@forward 'typeSearch/lib' as message-typeSearch-*;
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/themes/ple/messages/messaging/typeSearch/_branch-type-selector.theme.scss b/plugins/org.eclipse.osee.web/src/themes/ple/messages/messaging/typeSearch/_branch-type-selector.theme.scss
new file mode 100644
index 0000000..64a16b4
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/themes/ple/messages/messaging/typeSearch/_branch-type-selector.theme.scss
@@ -0,0 +1,42 @@
+@import '~@angular/material/theming';
+
+@mixin color($config-or-theme) {
+  // Extract the color configuration in case a theme has been passed.
+  // This allows consumers to either pass a theme object or a color configuration.
+  $config: mat-get-color-config($config-or-theme);
+  // Extract the palettes you need from the theme definition.
+  $primary: map-get($config, primary);
+  $accent: map-get($config, accent);
+  $warn: map-get($config, warn);
+  $background: map-get($config, background);
+  $foreground: map-get($config, foreground);
+  
+  // Define any styles affected by the theme.
+  .messaging-typeSearch-radio-option{
+    color:mat-color($foreground,base);
+  }
+  .messaging-typeSearch-radio-option-selected{
+    @extend .messaging-typeSearch-radio-option;
+    text-shadow:mat-color($foreground,base);
+  }
+}
+@mixin typography($config-or-theme){
+
+}
+@mixin typography-themed($config-or-theme){
+  $config: mat-get-typography-config($config-or-theme);
+
+}
+
+@mixin theme($theme){
+    $color: mat-get-color-config($theme);
+    $typography: mat-get-typography-config($theme);
+    @include typography($theme);
+    
+    @if $color != null {  
+      @include color($color);   
+    }  
+    @if $typography != null {
+      @include typography-themed($typography);  
+    }
+}
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web/src/themes/ple/messages/messaging/typeSearch/_lib.scss b/plugins/org.eclipse.osee.web/src/themes/ple/messages/messaging/typeSearch/_lib.scss
new file mode 100644
index 0000000..29ee0ac
--- /dev/null
+++ b/plugins/org.eclipse.osee.web/src/themes/ple/messages/messaging/typeSearch/_lib.scss
@@ -0,0 +1 @@
+@forward 'branch-type-selector.theme'
\ No newline at end of file