From 5f26bb7c8e86cb6bf9938d7d9d4db3b4c80c2660 Mon Sep 17 00:00:00 2001
From: Matthew Fuller <mf4192@att.com>
Date: Fri, 30 Oct 2020 18:46:32 +0000
Subject: [PATCH] Refactor config component

These changes are cosmetic, and aim to make it easier for
users to navigate, read, and edit each config subsection.
No underlying functionality has been changed.

Change-Id: Iecb0efbda61c278126567c69916d790d2130a8aa
---
 .../config-context.component.css              | 12 ++++
 .../config-context.component.html             | 70 +++++++++----------
 .../config-context.component.spec.ts          |  6 +-
 .../config-encryption.component.css           | 14 +++-
 .../config-encryption.component.html          | 46 ++++++------
 .../config-encryption.component.spec.ts       |  6 +-
 .../config-encryption.module.ts               |  1 -
 .../config-management.component.css           | 12 ++++
 .../config-management.component.html          | 43 ++++++------
 .../config-management.component.spec.ts       |  4 +-
 .../config-manifest.component.css             | 12 ++++
 .../config-manifest.component.html            | 61 ++++++++--------
 .../config-manifest.component.spec.ts         |  6 +-
 .../src/app/ctl/config/config.component.css   | 14 +++-
 .../src/app/ctl/config/config.component.html  | 67 ++++++++++++------
 .../app/ctl/config/config.component.spec.ts   |  8 ++-
 client/src/app/ctl/config/config.module.ts    |  5 +-
 17 files changed, 231 insertions(+), 156 deletions(-)

diff --git a/client/src/app/ctl/config/config-context/config-context.component.css b/client/src/app/ctl/config/config-context/config-context.component.css
index 7318c2c..53367b1 100644
--- a/client/src/app/ctl/config/config-context/config-context.component.css
+++ b/client/src/app/ctl/config/config-context/config-context.component.css
@@ -15,3 +15,15 @@
 .grey-icon {
     color: grey;
 }
+
+.mat-action-row {
+    place-content: space-between;
+}
+
+.title {
+    color: #3f51b5;
+}
+
+mat-form-field {
+    width: 100%;
+}
diff --git a/client/src/app/ctl/config/config-context/config-context.component.html b/client/src/app/ctl/config/config-context/config-context.component.html
index 0fb1ec4..01012a7 100644
--- a/client/src/app/ctl/config/config-context/config-context.component.html
+++ b/client/src/app/ctl/config/config-context/config-context.component.html
@@ -1,36 +1,36 @@
-<mat-card class="context-card">
-    <mat-card-header>
-        <mat-card-title>
+<mat-expansion-panel>
+    <mat-expansion-panel-header>
+        <mat-panel-title class="title">
+            <h4>{{context.name}}</h4>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+        ContextKubeconf:
+        <mat-form-field appearance="fill">
+            <input [formControl]="contextKubeconf" matInput>
+        </mat-form-field>
+        Manifest:
+        <mat-form-field appearance="fill">
+            <input [formControl]="manifest" matInput>
+        </mat-form-field>
+        EncryptionConfig:
+        <mat-form-field appearance="fill">
+            <input [formControl]="encryptionConfig" matInput>
+        </mat-form-field>
+        ManagementConfiguration:
+        <mat-form-field appearance="fill">
+            <input [formControl]="managementConfiguration" matInput>
+        </mat-form-field>
+    <mat-action-row>
+        <div class="edit-btn-container">
             <button mat-icon-button (click)="toggleLock()">
-                <mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon>
-                <mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
-            </button>{{context.name}}
-            <button mat-raised-button (click)="useContext(context.name)">Use Context</button>
-        </mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-        <p>ContextKubeconf:
-            <mat-form-field appearance="fill">
-                <input [formControl]="contextKubeconf" matInput>
-            </mat-form-field>
-        </p>
-        <p>Manifest:
-            <mat-form-field appearance="fill">
-                <input [formControl]="manifest" matInput>
-            </mat-form-field>
-        </p>
-        <p>EncryptionConfig:
-            <mat-form-field appearance="fill">
-                <input [formControl]="encryptionConfig" matInput>
-            </mat-form-field>
-        </p>
-        <p>ManagementConfiguration:
-            <mat-form-field appearance="fill">
-                <input [formControl]="managementConfiguration" matInput>
-            </mat-form-field>
-        </p>
-    </mat-card-content>
-    <mat-card-actions>
-        <button mat-raised-button [disabled]="locked" (click)="setContext()" color="primary">Set</button>
-    </mat-card-actions>
-</mat-card>
+                <mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
+                <ng-template #unlocked>
+                    <mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
+                </ng-template>
+            Edit</button>
+        </div>
+        <button mat-raised-button (click)="useContext(context.name)">Use Context</button>
+        <button mat-raised-button class="set-button" [disabled]="locked" (click)="setContext()" color="primary">Set</button>
+      </mat-action-row>
+</mat-expansion-panel>
+<br />
diff --git a/client/src/app/ctl/config/config-context/config-context.component.spec.ts b/client/src/app/ctl/config/config-context/config-context.component.spec.ts
index aca76d7..324e011 100644
--- a/client/src/app/ctl/config/config-context/config-context.component.spec.ts
+++ b/client/src/app/ctl/config/config-context/config-context.component.spec.ts
@@ -15,8 +15,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -34,14 +34,14 @@ describe('ConfigContextComponent', () => {
       declarations: [ ConfigContextComponent ],
       imports: [
         BrowserAnimationsModule,
-        MatCardModule,
         FormsModule,
         MatInputModule,
         MatIconModule,
         MatCheckboxModule,
         MatButtonModule,
         ReactiveFormsModule,
-        ToastrModule.forRoot()
+        ToastrModule.forRoot(),
+        MatExpansionModule,
       ]
     })
     .compileComponents();
diff --git a/client/src/app/ctl/config/config-encryption/config-encryption.component.css b/client/src/app/ctl/config/config-encryption/config-encryption.component.css
index abc1f3f..53367b1 100644
--- a/client/src/app/ctl/config/config-encryption/config-encryption.component.css
+++ b/client/src/app/ctl/config/config-encryption/config-encryption.component.css
@@ -14,4 +14,16 @@
 
 .grey-icon {
     color: grey;
-}
\ No newline at end of file
+}
+
+.mat-action-row {
+    place-content: space-between;
+}
+
+.title {
+    color: #3f51b5;
+}
+
+mat-form-field {
+    width: 100%;
+}
diff --git a/client/src/app/ctl/config/config-encryption/config-encryption.component.html b/client/src/app/ctl/config/config-encryption/config-encryption.component.html
index 8a66b53..6a34250 100644
--- a/client/src/app/ctl/config/config-encryption/config-encryption.component.html
+++ b/client/src/app/ctl/config/config-encryption/config-encryption.component.html
@@ -1,39 +1,39 @@
-<mat-card class="encryption-config-card">
-    <mat-card-header>
-        <mat-card-title>
-            <button mat-icon-button (click)="toggleLock()">
-                <mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon>
-                <mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
-            </button>{{config.name}}
-        </mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
+<mat-expansion-panel>
+    <mat-expansion-panel-header>
+        <mat-panel-title class="title">
+            <h4>{{config.name}}</h4>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
         <div *ngIf="config.hasOwnProperty('encryptionKeyPath')">
-            <p>EncryptionKeyPath:
+            EncryptionKeyPath:
                 <mat-form-field appearance="fill">
                     <input matInput [formControl]="encryptionKeyPath">
                 </mat-form-field>
-            </p>
-            <p>DecryptionKeyPath:
+            DecryptionKeyPath:
                 <mat-form-field appearance="fill">
                     <input matInput [formControl]="decryptionKeyPath">
                 </mat-form-field>
-            </p>
         </div>
         <div *ngIf="config.hasOwnProperty('keySecretName')">
-            <p>KeySecretName:
+            KeySecretName:
                 <mat-form-field appearance="fill">
                     <input matInput [formControl]="keySecretName">
                 </mat-form-field>
-            </p>
-            <p>KeySecretNamespace:
+            KeySecretNamespace:
                 <mat-form-field appearance="fill">
                     <input matInput [formControl]="keySecretNamespace">
                 </mat-form-field>
-            </p>
         </div>
-    </mat-card-content>
-    <mat-card-actions>
-        <button mat-raised-button [disabled]="locked" (click)="setEncryptionConfig()" color="primary">Set</button>
-    </mat-card-actions>
-</mat-card>
+    <mat-action-row>
+        <div class="edit-btn-container">
+            <button mat-icon-button (click)="toggleLock()">
+                <mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
+                <ng-template #unlocked>
+                    <mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
+                </ng-template>
+            Edit</button>
+        </div>
+        <button mat-raised-button class="set-button" [disabled]="locked" (click)="setEncryptionConfig()" color="primary">Set</button>
+    </mat-action-row>
+</mat-expansion-panel>
+<br />
diff --git a/client/src/app/ctl/config/config-encryption/config-encryption.component.spec.ts b/client/src/app/ctl/config/config-encryption/config-encryption.component.spec.ts
index c9395d5..9b8e818 100644
--- a/client/src/app/ctl/config/config-encryption/config-encryption.component.spec.ts
+++ b/client/src/app/ctl/config/config-encryption/config-encryption.component.spec.ts
@@ -15,8 +15,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -35,13 +35,13 @@ describe('ConfigEncryptionComponent', () => {
       imports: [
         BrowserAnimationsModule,
         FormsModule,
-        MatCardModule,
         MatInputModule,
         MatIconModule,
         MatCheckboxModule,
         MatButtonModule,
         ReactiveFormsModule,
-        ToastrModule.forRoot()
+        ToastrModule.forRoot(),
+        MatExpansionModule,
       ]
     })
     .compileComponents();
diff --git a/client/src/app/ctl/config/config-encryption/config-encryption.module.ts b/client/src/app/ctl/config/config-encryption/config-encryption.module.ts
index 11f3f95..f9e3567 100644
--- a/client/src/app/ctl/config/config-encryption/config-encryption.module.ts
+++ b/client/src/app/ctl/config/config-encryption/config-encryption.module.ts
@@ -18,7 +18,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { MatCardModule } from '@angular/material/card';
 
-
 @NgModule({
     imports: [
       FormsModule,
diff --git a/client/src/app/ctl/config/config-management/config-management.component.css b/client/src/app/ctl/config/config-management/config-management.component.css
index 7318c2c..53367b1 100644
--- a/client/src/app/ctl/config/config-management/config-management.component.css
+++ b/client/src/app/ctl/config/config-management/config-management.component.css
@@ -15,3 +15,15 @@
 .grey-icon {
     color: grey;
 }
+
+.mat-action-row {
+    place-content: space-between;
+}
+
+.title {
+    color: #3f51b5;
+}
+
+mat-form-field {
+    width: 100%;
+}
diff --git a/client/src/app/ctl/config/config-management/config-management.component.html b/client/src/app/ctl/config/config-management/config-management.component.html
index ea47225..c1b0b9c 100644
--- a/client/src/app/ctl/config/config-management/config-management.component.html
+++ b/client/src/app/ctl/config/config-management/config-management.component.html
@@ -1,36 +1,37 @@
-<mat-card class="management-config-card">
-    <mat-card-header>
-        <mat-card-title>
-            <button mat-icon-button (click)="toggleLock()">
-                <mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon>
-                <mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
-            </button>{{config.name}}
-        </mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
+<mat-expansion-panel>
+    <mat-expansion-panel-header>
+        <mat-panel-title class="title">
+            <h4>{{config.name}}</h4>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
         <p>
             <mat-checkbox [formControl]="insecure" labelPosition="before">Insecure: </mat-checkbox>
         </p>
-        <p>SystemActionRetries:
+        SystemActionRetries:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="systemActionRetries" pattern="[0-9]*">
             </mat-form-field>
-        </p>
-        <p>SystemRebootDelay:
+        SystemRebootDelay:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="systemRebootDelay" pattern="[0-9]*">
             </mat-form-field>
-        </p>
-        <p>Type:
+        Type:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="type">
             </mat-form-field>
-        </p>
         <p>
             <mat-checkbox [formControl]="useproxy" labelPosition="before">UseProxy: </mat-checkbox>
         </p>
-    </mat-card-content>
-    <mat-card-actions>
-        <button mat-raised-button [disabled]="locked" (click)="setManagementConfig()" color="primary">Set</button>
-    </mat-card-actions>
-</mat-card>
+    <mat-action-row>
+        <div class="edit-btn-container">
+            <button mat-icon-button (click)="toggleLock()">
+                <mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
+                <ng-template #unlocked>
+                    <mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
+                </ng-template>
+            Edit</button>
+        </div>
+        <button mat-raised-button class="set-button" [disabled]="locked" (click)="setManagementConfig()" color="primary">Set</button>
+    </mat-action-row>
+</mat-expansion-panel>
+<br />
diff --git a/client/src/app/ctl/config/config-management/config-management.component.spec.ts b/client/src/app/ctl/config/config-management/config-management.component.spec.ts
index 6fba7d5..5a42ab0 100644
--- a/client/src/app/ctl/config/config-management/config-management.component.spec.ts
+++ b/client/src/app/ctl/config/config-management/config-management.component.spec.ts
@@ -15,8 +15,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -34,7 +34,6 @@ describe('ConfigManagementComponent', () => {
       declarations: [ ConfigManagementComponent ],
       imports: [
         BrowserAnimationsModule,
-        MatCardModule,
         FormsModule,
         MatInputModule,
         MatIconModule,
@@ -42,6 +41,7 @@ describe('ConfigManagementComponent', () => {
         MatButtonModule,
         ReactiveFormsModule,
         ToastrModule.forRoot(),
+        MatExpansionModule
       ]
     })
     .compileComponents();
diff --git a/client/src/app/ctl/config/config-manifest/config-manifest.component.css b/client/src/app/ctl/config/config-manifest/config-manifest.component.css
index 7318c2c..53367b1 100644
--- a/client/src/app/ctl/config/config-manifest/config-manifest.component.css
+++ b/client/src/app/ctl/config/config-manifest/config-manifest.component.css
@@ -15,3 +15,15 @@
 .grey-icon {
     color: grey;
 }
+
+.mat-action-row {
+    place-content: space-between;
+}
+
+.title {
+    color: #3f51b5;
+}
+
+mat-form-field {
+    width: 100%;
+}
diff --git a/client/src/app/ctl/config/config-manifest/config-manifest.component.html b/client/src/app/ctl/config/config-manifest/config-manifest.component.html
index 5868f7b..0310a13 100644
--- a/client/src/app/ctl/config/config-manifest/config-manifest.component.html
+++ b/client/src/app/ctl/config/config-manifest/config-manifest.component.html
@@ -1,66 +1,61 @@
-<mat-card class="manifest-config-card">
-    <mat-card-header>
-        <mat-card-title>
-            <button mat-icon-button (click)="toggleLock()">
-                <mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon>
-                <mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
-            </button>{{manifest.name}}
-        </mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-        <p>RepoName:
+<mat-expansion-panel>
+    <mat-expansion-panel-header>
+        <mat-panel-title class="title">
+            <h4>{{manifest.name}}</h4>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+        RepoName:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="RepoName">
             </mat-form-field>
-        </p>
-        <p>URL:
+        URL:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="URL">
             </mat-form-field>
-        </p>
-        <p>Branch:
+        Branch:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="Branch">
             </mat-form-field>
-        </p>
-        <p>CommitHash:
+        CommitHash:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="CommitHash">
             </mat-form-field>
-        </p>
-        <p>Tag:
+        Tag:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="Tag">
             </mat-form-field>
-        </p>
-        <p>RemoteRef:
+        RemoteRef:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="RemoteRef">
             </mat-form-field>
-        </p>
         <p>
             <mat-checkbox [formControl]="Force" labelPosition="before">Force: </mat-checkbox>
         </p>
         <p>
             <mat-checkbox [formControl]="IsPhase" labelPosition="before">IsPhase: </mat-checkbox>
         </p>
-        <p>SubPath:
+        SubPath:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="SubPath">
             </mat-form-field>
-        </p>
-        <p>TargetPath:
+        TargetPath:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="TargetPath">
             </mat-form-field>
-        </p>
-        <p>MetadataPath:
+        MetadataPath:
             <mat-form-field appearance="fill">
                 <input matInput [formControl]="MetadataPath">
             </mat-form-field>
-        </p>
-    </mat-card-content>
-    <mat-card-actions>
-        <button mat-raised-button [disabled]="locked" (click)="setManifest()" color="primary">Set</button>
-    </mat-card-actions>
-</mat-card>
+    <mat-action-row>
+        <div class="edit-btn-container">
+            <button mat-icon-button (click)="toggleLock()">
+                <mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
+                <ng-template #unlocked>
+                    <mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
+                </ng-template>
+            Edit</button>
+        </div>
+        <button mat-raised-button class="set-button" [disabled]="locked" (click)="setManifest()" color="primary">Set</button>
+    </mat-action-row>
+</mat-expansion-panel>
+<br />
diff --git a/client/src/app/ctl/config/config-manifest/config-manifest.component.spec.ts b/client/src/app/ctl/config/config-manifest/config-manifest.component.spec.ts
index d3b4d3c..a3360b1 100644
--- a/client/src/app/ctl/config/config-manifest/config-manifest.component.spec.ts
+++ b/client/src/app/ctl/config/config-manifest/config-manifest.component.spec.ts
@@ -15,8 +15,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -34,14 +34,14 @@ describe('ConfigManifestComponent', () => {
       declarations: [ ConfigManifestComponent ],
       imports: [
         BrowserAnimationsModule,
-        MatCardModule,
         FormsModule,
         MatInputModule,
         MatIconModule,
         MatCheckboxModule,
         MatButtonModule,
         ReactiveFormsModule,
-        ToastrModule.forRoot()
+        ToastrModule.forRoot(),
+        MatExpansionModule
       ]
     })
     .compileComponents();
diff --git a/client/src/app/ctl/config/config.component.css b/client/src/app/ctl/config/config.component.css
index 396bd76..75568ed 100644
--- a/client/src/app/ctl/config/config.component.css
+++ b/client/src/app/ctl/config/config.component.css
@@ -12,6 +12,14 @@
 # limitations under the License.
 */
 
-.grey-icon {
-    color: grey;
-}
+.grey-icon {
+    color: grey;
+}
+
+.current-context {
+    color: #ff4081;
+}
+
+mat-expansion-panel {
+    padding-bottom: 15px;
+}
\ No newline at end of file
diff --git a/client/src/app/ctl/config/config.component.html b/client/src/app/ctl/config/config.component.html
index 18d7f13..8e56cbc 100755
--- a/client/src/app/ctl/config/config.component.html
+++ b/client/src/app/ctl/config/config.component.html
@@ -1,26 +1,47 @@
-<h1>Airship Configuration Operations</h1>
+<h1>Airship Configuration Options</h1>
 <mat-divider></mat-divider>
 <div class="config-container">
-    <h3>Contexts - Current Context: {{currentContext}}</h3>
-    <div class="contexts" *ngFor="let context of contexts">
-        <app-config-context [context]="context"></app-config-context>
-    </div>
-    <mat-divider></mat-divider>
-
-    <h3>Manifests</h3>
-    <div class="manifests" *ngFor="let manifest of manifests">
-        <app-config-manifest [manifest]="manifest"></app-config-manifest>
-    </div>
-    <mat-divider></mat-divider>
-
-    <h3>Encryption Configurations</h3>
-    <div class="encryption-configs" *ngFor="let config of encryptionConfigs">
-        <app-config-encryption [config]="config"></app-config-encryption>
-    </div>
-    <mat-divider></mat-divider>
-
-    <h3>Management Configurations</h3>
-    <div class="management-configs" *ngFor="let config of managementConfigs">
-        <app-config-management [config]="config"></app-config-management>
-    </div>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title class="title">
+                <h3>Contexts</h3>
+            </mat-panel-title>
+            <mat-panel-description>
+                <h5>Current Context: {{currentContext}}</h5>
+            </mat-panel-description>
+        </mat-expansion-panel-header>
+        <mat-accordion *ngFor="let context of contexts">
+            <app-config-context [context]="context"></app-config-context>
+        </mat-accordion>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title class="title">
+                <h3>Manifests</h3>
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-accordion *ngFor="let manifest of manifests">
+            <app-config-manifest [manifest]="manifest"></app-config-manifest>
+        </mat-accordion>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title class="title">
+                <h3>Encryption Configurations</h3>
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-accordion *ngFor="let config of encryptionConfigs">
+            <app-config-encryption [config]="config"></app-config-encryption>
+        </mat-accordion>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title class="title">
+                <h3>Management Configurations</h3>
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <mat-accordion *ngFor="let config of managementConfigs">
+            <app-config-management [config]="config"></app-config-management>
+        </mat-accordion>
+    </mat-expansion-panel>
 </div>
diff --git a/client/src/app/ctl/config/config.component.spec.ts b/client/src/app/ctl/config/config.component.spec.ts
index 6119e93..7c75034 100755
--- a/client/src/app/ctl/config/config.component.spec.ts
+++ b/client/src/app/ctl/config/config.component.spec.ts
@@ -19,7 +19,6 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { ConfigContextModule } from './config-context/config-context.module';
 import { ConfigManagementModule } from './config-management/config-management.module';
@@ -29,6 +28,8 @@ import { ConfigManifestComponent } from './config-manifest/config-manifest.compo
 import { ConfigManagementComponent } from './config-management/config-management.component';
 import { ConfigEncryptionComponent } from './config-encryption/config-encryption.component';
 import { ConfigContextComponent } from './config-context/config-context.component';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('ConfigComponent', () => {
   let component: ConfigComponent;
@@ -41,13 +42,14 @@ describe('ConfigComponent', () => {
         FormsModule,
         MatButtonModule,
         MatInputModule,
-        MatCardModule,
         MatCheckboxModule,
         ConfigContextModule,
         ConfigManagementModule,
         ConfigManifestModule,
         ConfigEncryptionModule,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        MatExpansionModule,
+        BrowserAnimationsModule
       ],
       declarations: [
         ConfigComponent,
diff --git a/client/src/app/ctl/config/config.module.ts b/client/src/app/ctl/config/config.module.ts
index 94cf58c..03b0d4e 100755
--- a/client/src/app/ctl/config/config.module.ts
+++ b/client/src/app/ctl/config/config.module.ts
@@ -26,7 +26,7 @@ import { ConfigEncryptionComponent } from './config-encryption/config-encryption
 import { ConfigManagementComponent } from './config-management/config-management.component';
 import { ConfigManifestComponent } from './config-manifest/config-manifest.component';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-
+import { MatExpansionModule } from '@angular/material/expansion';
 
 @NgModule({
   imports: [
@@ -38,7 +38,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
     MatDividerModule,
     MatButtonModule,
     MatIconModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    MatExpansionModule
   ],
   declarations: [
     ConfigComponent,