airship/airshipui
Code Issues Proposed changes

Refactor config component

Browse Source 
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
This commit is contained in:
Matthew Fuller 2020-10-30 18:46:32 +00:00
parent fab7bd9ef5
commit 5f26bb7c8e
17 changed files with 231 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/app/ctl/config/config-context/config-context.component.css
View File

@ -15,3 +15,15 @@
.grey-icon { .grey-icon {
color: grey; color: grey;
} }
.mat-action-row {
place-content: space-between;
}
.title {
color: #3f51b5;
}
mat-form-field {
width: 100%;
}

70
client/src/app/ctl/config/config-context/config-context.component.html
View File

@ -1,36 +1,36 @@
<mat-card class="context-card"> <mat-expansion-panel>
<mat-card-header> <mat-expansion-panel-header>
<mat-card-title> <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()"> <button mat-icon-button (click)="toggleLock()">
<mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon> <mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon> <ng-template #unlocked>
</button>{{context.name}} <mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon>
<button mat-raised-button (click)="useContext(context.name)">Use Context</button> </ng-template>
</mat-card-title> Edit</button>
</mat-card-header> </div>
<mat-card-content> <button mat-raised-button (click)="useContext(context.name)">Use Context</button>
<p>ContextKubeconf: <button mat-raised-button class="set-button" [disabled]="locked" (click)="setContext()" color="primary">Set</button>
<mat-form-field appearance="fill"> </mat-action-row>
<input [formControl]="contextKubeconf" matInput> </mat-expansion-panel>
</mat-form-field> <br />
</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>

6
client/src/app/ctl/config/config-context/config-context.component.spec.ts
View File

@ -15,8 +15,8 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@ -34,14 +34,14 @@ describe('ConfigContextComponent', () => {
declarations: [ ConfigContextComponent ], declarations: [ ConfigContextComponent ],
imports: [ imports: [
BrowserAnimationsModule, BrowserAnimationsModule,
MatCardModule,
FormsModule, FormsModule,
MatInputModule, MatInputModule,
MatIconModule, MatIconModule,
MatCheckboxModule, MatCheckboxModule,
MatButtonModule, MatButtonModule,
ReactiveFormsModule, ReactiveFormsModule,
ToastrModule.forRoot() ToastrModule.forRoot(),
MatExpansionModule,
] ]
}) })
.compileComponents(); .compileComponents();

14
client/src/app/ctl/config/config-encryption/config-encryption.component.css
View File

@ -14,4 +14,16 @@
.grey-icon { .grey-icon {
color: grey; color: grey;
} }
.mat-action-row {
place-content: space-between;
}
.title {
color: #3f51b5;
}
mat-form-field {
width: 100%;
}

46
client/src/app/ctl/config/config-encryption/config-encryption.component.html
View File

@ -1,39 +1,39 @@
<mat-card class="encryption-config-card"> <mat-expansion-panel>
<mat-card-header> <mat-expansion-panel-header>
<mat-card-title> <mat-panel-title class="title">
<button mat-icon-button (click)="toggleLock()"> <h4>{{config.name}}</h4>
<mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon> </mat-panel-title>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon> </mat-expansion-panel-header>
</button>{{config.name}}
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div *ngIf="config.hasOwnProperty('encryptionKeyPath')"> <div *ngIf="config.hasOwnProperty('encryptionKeyPath')">
<p>EncryptionKeyPath: EncryptionKeyPath:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="encryptionKeyPath"> <input matInput [formControl]="encryptionKeyPath">
</mat-form-field> </mat-form-field>
</p> DecryptionKeyPath:
<p>DecryptionKeyPath:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="decryptionKeyPath"> <input matInput [formControl]="decryptionKeyPath">
</mat-form-field> </mat-form-field>
</p>
</div> </div>
<div *ngIf="config.hasOwnProperty('keySecretName')"> <div *ngIf="config.hasOwnProperty('keySecretName')">
<p>KeySecretName: KeySecretName:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="keySecretName"> <input matInput [formControl]="keySecretName">
</mat-form-field> </mat-form-field>
</p> KeySecretNamespace:
<p>KeySecretNamespace:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="keySecretNamespace"> <input matInput [formControl]="keySecretNamespace">
</mat-form-field> </mat-form-field>
</p>
</div> </div>
</mat-card-content> <mat-action-row>
<mat-card-actions> <div class="edit-btn-container">
<button mat-raised-button [disabled]="locked" (click)="setEncryptionConfig()" color="primary">Set</button> <button mat-icon-button (click)="toggleLock()">
</mat-card-actions> <mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
</mat-card> <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 />

6
client/src/app/ctl/config/config-encryption/config-encryption.component.spec.ts
View File

@ -15,8 +15,8 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@ -35,13 +35,13 @@ describe('ConfigEncryptionComponent', () => {
imports: [ imports: [
BrowserAnimationsModule, BrowserAnimationsModule,
FormsModule, FormsModule,
MatCardModule,
MatInputModule, MatInputModule,
MatIconModule, MatIconModule,
MatCheckboxModule, MatCheckboxModule,
MatButtonModule, MatButtonModule,
ReactiveFormsModule, ReactiveFormsModule,
ToastrModule.forRoot() ToastrModule.forRoot(),
MatExpansionModule,
] ]
}) })
.compileComponents(); .compileComponents();

1
client/src/app/ctl/config/config-encryption/config-encryption.module.ts
View File

@ -18,7 +18,6 @@ import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
@NgModule({ @NgModule({
imports: [ imports: [
FormsModule, FormsModule,

12
client/src/app/ctl/config/config-management/config-management.component.css
View File

@ -15,3 +15,15 @@
.grey-icon { .grey-icon {
color: grey; color: grey;
} }
.mat-action-row {
place-content: space-between;
}
.title {
color: #3f51b5;
}
mat-form-field {
width: 100%;
}

43
client/src/app/ctl/config/config-management/config-management.component.html
View File

@ -1,36 +1,37 @@
<mat-card class="management-config-card"> <mat-expansion-panel>
<mat-card-header> <mat-expansion-panel-header>
<mat-card-title> <mat-panel-title class="title">
<button mat-icon-button (click)="toggleLock()"> <h4>{{config.name}}</h4>
<mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon> </mat-panel-title>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon> </mat-expansion-panel-header>
</button>{{config.name}}
</mat-card-title>
</mat-card-header>
<mat-card-content>
<p> <p>
<mat-checkbox [formControl]="insecure" labelPosition="before">Insecure: </mat-checkbox> <mat-checkbox [formControl]="insecure" labelPosition="before">Insecure: </mat-checkbox>
</p> </p>
<p>SystemActionRetries: SystemActionRetries:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="systemActionRetries" pattern="[0-9]*"> <input matInput [formControl]="systemActionRetries" pattern="[0-9]*">
</mat-form-field> </mat-form-field>
</p> SystemRebootDelay:
<p>SystemRebootDelay:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="systemRebootDelay" pattern="[0-9]*"> <input matInput [formControl]="systemRebootDelay" pattern="[0-9]*">
</mat-form-field> </mat-form-field>
</p> Type:
<p>Type:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="type"> <input matInput [formControl]="type">
</mat-form-field> </mat-form-field>
</p>
<p> <p>
<mat-checkbox [formControl]="useproxy" labelPosition="before">UseProxy: </mat-checkbox> <mat-checkbox [formControl]="useproxy" labelPosition="before">UseProxy: </mat-checkbox>
</p> </p>
</mat-card-content> <mat-action-row>
<mat-card-actions> <div class="edit-btn-container">
<button mat-raised-button [disabled]="locked" (click)="setManagementConfig()" color="primary">Set</button> <button mat-icon-button (click)="toggleLock()">
</mat-card-actions> <mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
</mat-card> <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 />

4
client/src/app/ctl/config/config-management/config-management.component.spec.ts
View File

@ -15,8 +15,8 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@ -34,7 +34,6 @@ describe('ConfigManagementComponent', () => {
declarations: [ ConfigManagementComponent ], declarations: [ ConfigManagementComponent ],
imports: [ imports: [
BrowserAnimationsModule, BrowserAnimationsModule,
MatCardModule,
FormsModule, FormsModule,
MatInputModule, MatInputModule,
MatIconModule, MatIconModule,
@ -42,6 +41,7 @@ describe('ConfigManagementComponent', () => {
MatButtonModule, MatButtonModule,
ReactiveFormsModule, ReactiveFormsModule,
ToastrModule.forRoot(), ToastrModule.forRoot(),
MatExpansionModule
] ]
}) })
.compileComponents(); .compileComponents();

12
client/src/app/ctl/config/config-manifest/config-manifest.component.css
View File

@ -15,3 +15,15 @@
.grey-icon { .grey-icon {
color: grey; color: grey;
} }
.mat-action-row {
place-content: space-between;
}
.title {
color: #3f51b5;
}
mat-form-field {
width: 100%;
}

61
client/src/app/ctl/config/config-manifest/config-manifest.component.html
View File

@ -1,66 +1,61 @@
<mat-card class="manifest-config-card"> <mat-expansion-panel>
<mat-card-header> <mat-expansion-panel-header>
<mat-card-title> <mat-panel-title class="title">
<button mat-icon-button (click)="toggleLock()"> <h4>{{manifest.name}}</h4>
<mat-icon *ngIf="locked" class="grey-icon" svgIcon="lock"></mat-icon> </mat-panel-title>
<mat-icon *ngIf="!locked" class="grey-icon" svgIcon="lock_open"></mat-icon> </mat-expansion-panel-header>
</button>{{manifest.name}} RepoName:
</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>RepoName:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="RepoName"> <input matInput [formControl]="RepoName">
</mat-form-field> </mat-form-field>
</p> URL:
<p>URL:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="URL"> <input matInput [formControl]="URL">
</mat-form-field> </mat-form-field>
</p> Branch:
<p>Branch:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="Branch"> <input matInput [formControl]="Branch">
</mat-form-field> </mat-form-field>
</p> CommitHash:
<p>CommitHash:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="CommitHash"> <input matInput [formControl]="CommitHash">
</mat-form-field> </mat-form-field>
</p> Tag:
<p>Tag:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="Tag"> <input matInput [formControl]="Tag">
</mat-form-field> </mat-form-field>
</p> RemoteRef:
<p>RemoteRef:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="RemoteRef"> <input matInput [formControl]="RemoteRef">
</mat-form-field> </mat-form-field>
</p>
<p> <p>
<mat-checkbox [formControl]="Force" labelPosition="before">Force: </mat-checkbox> <mat-checkbox [formControl]="Force" labelPosition="before">Force: </mat-checkbox>
</p> </p>
<p> <p>
<mat-checkbox [formControl]="IsPhase" labelPosition="before">IsPhase: </mat-checkbox> <mat-checkbox [formControl]="IsPhase" labelPosition="before">IsPhase: </mat-checkbox>
</p> </p>
<p>SubPath: SubPath:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="SubPath"> <input matInput [formControl]="SubPath">
</mat-form-field> </mat-form-field>
</p> TargetPath:
<p>TargetPath:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="TargetPath"> <input matInput [formControl]="TargetPath">
</mat-form-field> </mat-form-field>
</p> MetadataPath:
<p>MetadataPath:
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<input matInput [formControl]="MetadataPath"> <input matInput [formControl]="MetadataPath">
</mat-form-field> </mat-form-field>
</p> <mat-action-row>
</mat-card-content> <div class="edit-btn-container">
<mat-card-actions> <button mat-icon-button (click)="toggleLock()">
<button mat-raised-button [disabled]="locked" (click)="setManifest()" color="primary">Set</button> <mat-icon *ngIf="locked else unlocked" class="grey-icon" svgIcon="lock"></mat-icon>
</mat-card-actions> <ng-template #unlocked>
</mat-card> <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 />

6
client/src/app/ctl/config/config-manifest/config-manifest.component.spec.ts
View File

@ -15,8 +15,8 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@ -34,14 +34,14 @@ describe('ConfigManifestComponent', () => {
declarations: [ ConfigManifestComponent ], declarations: [ ConfigManifestComponent ],
imports: [ imports: [
BrowserAnimationsModule, BrowserAnimationsModule,
MatCardModule,
FormsModule, FormsModule,
MatInputModule, MatInputModule,
MatIconModule, MatIconModule,
MatCheckboxModule, MatCheckboxModule,
MatButtonModule, MatButtonModule,
ReactiveFormsModule, ReactiveFormsModule,
ToastrModule.forRoot() ToastrModule.forRoot(),
MatExpansionModule
] ]
}) })
.compileComponents(); .compileComponents();

14
client/src/app/ctl/config/config.component.css
View File

@ -12,6 +12,14 @@
# limitations under the License. # limitations under the License.
*/ */
.grey-icon { .grey-icon {
color: grey; color: grey;
} }
.current-context {
color: #ff4081;
}
mat-expansion-panel {
padding-bottom: 15px;
}

67
client/src/app/ctl/config/config.component.html
View File

@ -1,26 +1,47 @@
<h1>Airship Configuration Operations</h1> <h1>Airship Configuration Options</h1>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div class="config-container"> <div class="config-container">
<h3>Contexts - Current Context: {{currentContext}}</h3> <mat-expansion-panel>
<div class="contexts" *ngFor="let context of contexts"> <mat-expansion-panel-header>
<app-config-context [context]="context"></app-config-context> <mat-panel-title class="title">
</div> <h3>Contexts</h3>
<mat-divider></mat-divider> </mat-panel-title>
<mat-panel-description>
<h3>Manifests</h3> <h5>Current Context: {{currentContext}}</h5>
<div class="manifests" *ngFor="let manifest of manifests"> </mat-panel-description>
<app-config-manifest [manifest]="manifest"></app-config-manifest> </mat-expansion-panel-header>
</div> <mat-accordion *ngFor="let context of contexts">
<mat-divider></mat-divider> <app-config-context [context]="context"></app-config-context>
</mat-accordion>
<h3>Encryption Configurations</h3> </mat-expansion-panel>
<div class="encryption-configs" *ngFor="let config of encryptionConfigs"> <mat-expansion-panel>
<app-config-encryption [config]="config"></app-config-encryption> <mat-expansion-panel-header>
</div> <mat-panel-title class="title">
<mat-divider></mat-divider> <h3>Manifests</h3>
</mat-panel-title>
<h3>Management Configurations</h3> </mat-expansion-panel-header>
<div class="management-configs" *ngFor="let config of managementConfigs"> <mat-accordion *ngFor="let manifest of manifests">
<app-config-management [config]="config"></app-config-management> <app-config-manifest [manifest]="manifest"></app-config-manifest>
</div> </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> </div>

8
client/src/app/ctl/config/config.component.spec.ts
View File

@ -19,7 +19,6 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { ConfigContextModule } from './config-context/config-context.module'; import { ConfigContextModule } from './config-context/config-context.module';
import { ConfigManagementModule } from './config-management/config-management.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 { ConfigManagementComponent } from './config-management/config-management.component';
import { ConfigEncryptionComponent } from './config-encryption/config-encryption.component'; import { ConfigEncryptionComponent } from './config-encryption/config-encryption.component';
import { ConfigContextComponent } from './config-context/config-context.component'; import { ConfigContextComponent } from './config-context/config-context.component';
import { MatExpansionModule } from '@angular/material/expansion';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
describe('ConfigComponent', () => { describe('ConfigComponent', () => {
let component: ConfigComponent; let component: ConfigComponent;
@ -41,13 +42,14 @@ describe('ConfigComponent', () => {
FormsModule, FormsModule,
MatButtonModule, MatButtonModule,
MatInputModule, MatInputModule,
MatCardModule,
MatCheckboxModule, MatCheckboxModule,
ConfigContextModule, ConfigContextModule,
ConfigManagementModule, ConfigManagementModule,
ConfigManifestModule, ConfigManifestModule,
ConfigEncryptionModule, ConfigEncryptionModule,
ReactiveFormsModule ReactiveFormsModule,
MatExpansionModule,
BrowserAnimationsModule
], ],
declarations: [ declarations: [
ConfigComponent, ConfigComponent,

5
client/src/app/ctl/config/config.module.ts
View File

@ -26,7 +26,7 @@ import { ConfigEncryptionComponent } from './config-encryption/config-encryption
import { ConfigManagementComponent } from './config-management/config-management.component'; import { ConfigManagementComponent } from './config-management/config-management.component';
import { ConfigManifestComponent } from './config-manifest/config-manifest.component'; import { ConfigManifestComponent } from './config-manifest/config-manifest.component';
import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatExpansionModule } from '@angular/material/expansion';
@NgModule({ @NgModule({
imports: [ imports: [
@ -38,7 +38,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
MatDividerModule, MatDividerModule,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
MatCheckboxModule MatCheckboxModule,
MatExpansionModule
], ],
declarations: [ declarations: [
ConfigComponent, ConfigComponent,