v6.2.0 release

src/app/adf-home/df-welcome-page/df-welcome-page.component.html

@@ -61,9 +61,15 @@ <h3>
 
 <section class="platforms-section">
   <h3>
-    {{ 'home.welcomePage.clientPlatformHeading' | transloco }}
+    {{ 'home.quickstartPage.quickstartSubHeading' | transloco }}
   </h3>
 
+  <ol aria-labelledby="quickstart-instructions-heading">
+    <li>{{ 'home.quickstartPage.quickstartSteps.stepOne' | transloco }}</li>
+    <li>{{ 'home.quickstartPage.quickstartSteps.stepTwo' | transloco }}</li>
+    <li>{{ 'home.quickstartPage.quickstartSteps.stepThree' | transloco }}</li>
+  </ol>
+
   <article>
     <h4 id="native-examples-heading">
       {{ 'home.welcomePage.nativeExamplesHeading' | transloco }}
@@ -94,3 +100,5 @@ <h4 id="javascript-examples-heading">
     </ul>
   </article>
 </section>
+<mat-divider></mat-divider>
+<df-download-page></df-download-page>

src/app/adf-home/df-welcome-page/df-welcome-page.component.ts

@@ -19,6 +19,9 @@ import {
   faHeart,
 } from '@fortawesome/free-solid-svg-icons';
 import { TranslocoPipe } from '@ngneat/transloco';
+import { DfQuickstartPageComponent } from '../df-quickstart-page/df-quickstart-page.component';
+import { DfResourcesPageComponent } from '../df-resources-page/df-resources-page.component';
+import { DfDownloadPageComponent } from '../df-download-page/df-download-page.component';
 
 @Component({
   selector: 'df-welcome-page',
@@ -34,6 +37,9 @@ import { TranslocoPipe } from '@ngneat/transloco';
     DfIconCardLinkComponent,
     AsyncPipe,
     TranslocoPipe,
+    DfQuickstartPageComponent,
+    DfResourcesPageComponent,
+    DfDownloadPageComponent,
   ],
 })
 export class DfWelcomePageComponent {

src/app/adf-home/routes.ts

@@ -2,33 +2,46 @@ import { Routes } from '@angular/router';
 import { ROUTES } from '../shared/types/routes';
 
 export const HomeRoutes: Routes = [
-  { path: '', redirectTo: ROUTES.WELCOME, pathMatch: 'full' },
   {
-    path: ROUTES.WELCOME,
+    path: '',
     loadComponent: () =>
       import('./df-welcome-page/df-welcome-page.component').then(
         m => m.DfWelcomePageComponent
       ),
   },
-  {
-    path: ROUTES.QUICKSTART,
-    loadComponent: () =>
-      import('./df-quickstart-page/df-quickstart-page.component').then(
-        m => m.DfQuickstartPageComponent
-      ),
-  },
-  {
-    path: ROUTES.RESOURCES,
-    loadComponent: () =>
-      import('./df-resources-page/df-resources-page.component').then(
-        m => m.DfResourcesPageComponent
-      ),
-  },
-  {
-    path: ROUTES.DOWNLOAD,
-    loadComponent: () =>
-      import('./df-download-page/df-download-page.component').then(
-        m => m.DfDownloadPageComponent
-      ),
-  },
+  // {
+  //   path: ROUTES.WELCOME,
+  //   loadComponent: () =>
+  //     import('./df-welcome-page/df-welcome-page.component').then(
+  //       m => m.DfWelcomePageComponent
+  //     ),
+  // },
+  // {
+  //   path: ROUTES.WELCOME,
+  //   loadComponent: () =>
+  //     import('./df-welcome-page/df-welcome-page.component').then(
+  //       m => m.DfWelcomePageComponent
+  //     ),
+  // },
+  // {
+  //   path: ROUTES.QUICKSTART,
+  //   loadComponent: () =>
+  //     import('./df-quickstart-page/df-quickstart-page.component').then(
+  //       m => m.DfQuickstartPageComponent
+  //     ),
+  // },
+  // {
+  //   path: ROUTES.RESOURCES,
+  //   loadComponent: () =>
+  //     import('./df-resources-page/df-resources-page.component').then(
+  //       m => m.DfResourcesPageComponent
+  //     ),
+  // },
+  // {
+  //   path: ROUTES.DOWNLOAD,
+  //   loadComponent: () =>
+  //     import('./df-download-page/df-download-page.component').then(
+  //       m => m.DfDownloadPageComponent
+  //     ),
+  // },
 ];

src/app/adf-roles/df-role-details/df-role-details.component.html

@@ -1,7 +1,12 @@
 <p>
   {{ 'roles.rolesOverview.description' | transloco }}
 </p>
-<!-- TODO add error banner -->
+<df-alert
+  [showAlert]="showAlert"
+  [alertType]="alertType"
+  (alertClosed)="showAlert = false">
+  {{ alertMsg }}
+</df-alert>
 <form [formGroup]="roleForm" (ngSubmit)="onSubmit()" class="details-section">
   <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
     <mat-label>{{ 'name' | transloco }}</mat-label>

src/app/adf-roles/df-role-details/df-role-details.component.ts

@@ -25,6 +25,11 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatButtonModule } from '@angular/material/button';
 import { DfRolesAccessComponent } from '../df-roles-access/df-roles-access.component';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import {
+  AlertType,
+  DfAlertComponent,
+} from 'src/app/shared/components/df-alert/df-alert.component';
+import { catchError, throwError } from 'rxjs';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-role-details',
@@ -42,11 +47,15 @@ import { UntilDestroy } from '@ngneat/until-destroy';
     MatButtonModule,
     DfRolesAccessComponent,
     NgIf,
+    DfAlertComponent,
   ],
 })
 export class DfRoleDetailsComponent implements OnInit {
   roleForm: FormGroup;
   type = '';
+  alertMsg = '';
+  showAlert = false;
+  alertType: AlertType = 'error';
 
   constructor(
     @Inject(ROLE_SERVICE_TOKEN)
@@ -137,6 +146,12 @@ export class DfRoleDetailsComponent implements OnInit {
     return result;
   }
 
+  triggerAlert(type: AlertType, msg: string) {
+    this.alertType = type;
+    this.alertMsg = msg;
+    this.showAlert = true;
+  }
+
   onSubmit() {
     if (this.roleForm.invalid) return;
 
@@ -168,7 +183,12 @@ export class DfRoleDetailsComponent implements OnInit {
     if (this.type === 'edit' && payload.id) {
       this.roleService
         .update(payload.id, payload)
-
+        .pipe(
+          catchError(err => {
+            this.triggerAlert('error', err.error.error.message);
+            return throwError(() => new Error(err));
+          })
+        )
         .subscribe(() => {
           this.goBack();
         });
@@ -178,7 +198,15 @@ export class DfRoleDetailsComponent implements OnInit {
           fields: '*',
           related: 'role_service_access_by_role_id,lookup_by_role_id',
         })
-
+        .pipe(
+          catchError(err => {
+            this.triggerAlert(
+              'error',
+              err.error.error.context.resource[0].message
+            );
+            return throwError(() => new Error(err));
+          })
+        )
         .subscribe(() => {
           this.goBack();
         });

src/app/adf-schema/df-table-details/df-table-details.types.ts

@@ -1,4 +1,3 @@
-// TODO fix all any types
 export interface TableDetailsType {
   alias?: string;
   name: string;

src/app/adf-services/df-service-details/df-service-details.component.html

@@ -1,5 +1,5 @@
 <form [formGroup]="serviceForm" class="details-section" (ngSubmit)="save()">
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+  <mat-form-field subscriptSizing="dynamic" class="fourth-width">
     <mat-label>{{
       'services.controls.serviceType.label' | transloco
     }}</mat-label>
@@ -16,7 +16,7 @@
   </mat-form-field>
   <mat-form-field
     subscriptSizing="dynamic"
-    class="dynamic-width"
+    class="fourth-width"
     *ngIf="!subscriptionRequired">
     <mat-label>{{ 'services.controls.namespace.label' | transloco }}</mat-label>
     <input matInput formControlName="name" />
@@ -58,10 +58,15 @@
   <ng-container *ngIf="viewSchema && !subscriptionRequired">
     <ng-container formGroupName="config">
       <mat-accordion class="full-width">
-        <mat-expansion-panel [expanded]="serviceForm.getRawValue().type">
-          <mat-expansion-panel-header>{{
-            'services.config' | transloco
-          }}</mat-expansion-panel-header>
+        <mat-expansion-panel
+          [expanded]="
+            !serviceForm.getRawValue().type ||
+            serviceForm.getRawValue().type === 'soap' ||
+            serviceForm.getRawValue().type === 'rws'
+          ">
+          <mat-expansion-panel-header
+            >{{ 'services.options' | transloco }}
+          </mat-expansion-panel-header>
           <div class="details-section">
             <ng-container *ngFor="let item of viewSchema">
               <ng-container

src/app/adf-services/df-service-details/df-service-details.component.ts

@@ -226,7 +226,7 @@ export class DfServiceDetailsComponent implements OnInit {
           }
         )
         .subscribe(() => {
-          this.router.navigate(['../'], { relativeTo: this.activatedRoute });
+          this.router.navigate([`/api-connections/api-docs/${data.name}`]);
         });
     }
   }

src/app/adf-user-management/df-login/df-login.component.html

@@ -22,7 +22,7 @@
       <mat-divider></mat-divider>
       <mat-card-content>
         <form name="login-form" [formGroup]="loginForm" (ngSubmit)="login()">
-          <mat-form-field appearance="fill" *ngIf="ldapServices.length">
+          <mat-form-field appearance="outline" *ngIf="ldapServices.length">
             <mat-label>
               {{
                 'userManagement.controls.services.label' | transloco
@@ -37,7 +37,9 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field appearance="fill" *ngIf="loginAttribute === 'email'">
+          <mat-form-field
+            appearance="outline"
+            *ngIf="loginAttribute === 'email'">
             <mat-label>
               {{ 'userManagement.controls.email.label' | transloco }}</mat-label
             >
@@ -59,7 +61,7 @@
           </mat-form-field>
 
           <mat-form-field
-            appearance="fill"
+            appearance="outline"
             *ngIf="loginAttribute === 'username'">
             <mat-label>{{
               'userManagement.controls.username.altLabel' | transloco
@@ -72,7 +74,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field appearance="fill">
+          <mat-form-field appearance="outline">
             <mat-label>{{
               'userManagement.controls.password.label' | transloco
             }}</mat-label>

src/app/shared/components/df-field-array/df-array-field.component.ts

@@ -133,15 +133,22 @@ export class DfArrayFieldComponent implements OnInit, ControlValueAccessor {
     this.fieldArray = this.fb.array([]);
   }
 
-  writeValue(value?: Array<any>): void {
-    if (value && this.schema.type === 'array') {
+  writeValue(value?: Array<any> | { [key: string]: any }): void {
+    if (value && Array.isArray(value) && this.schema.type === 'array') {
       if (this.schema.items === 'string') {
         this.fieldArray = this.fb.array(value.map(v => new FormControl(v)));
       } else {
         this.fieldArray = this.fb.array(value.map(v => this.createGroup(v)));
       }
     } else if (value && this.schema.type === 'object') {
-      // TODO do something
+      this.fieldArray = this.fb.array(
+        Object.keys(value).map(key =>
+          this.createGroup({
+            key,
+            value: (value as { [key: string]: any })[key],
+          })
+        )
+      );
     }
     this.fieldArray.valueChanges
       .pipe(

src/app/shared/components/df-manage-table/df-manage-table.component.ts

@@ -211,7 +211,7 @@ export abstract class DfManageTableComponent<T>
   }
 
   viewRow(row: T): void {
-    this.router.navigate([(row as any).id], {
+    this.router.navigate([`${(row as any).id}-${(row as any).name}`], {
       relativeTo: this._activatedRoute,
     });
   }

src/app/shared/components/df-side-nav/df-side-nav.component.html

@@ -12,12 +12,6 @@
       </button>
       <img class="logo" src="assets/img/logo.png" alt="Logo" routerLink="/" />
       <span class="spacer"></span>
-      <button
-        mat-icon-button
-        (click)="handleSearchClick()"
-        [attr.aria-label]="'search' | transloco">
-        <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
-      </button>
       <ng-container *ngIf="availableLanguages.length > 1">
         <button
           mat-icon-button
@@ -34,8 +28,8 @@
           </button>
         </mat-menu>
       </ng-container>
-      <button mat-button [matMenuTriggerFor]="profileMenu">
-        {{ (userData$ | async)?.name }}
+      <button mat-button [matMenuTriggerFor]="profileMenu" class="profile-icon">
+        <fa-icon [icon]="faUser"></fa-icon> {{ (userData$ | async)?.name }}
       </button>
       <mat-menu #profileMenu="matMenu">
         <button mat-menu-item routerLink="profile">
@@ -65,7 +59,36 @@
       [opened]="(isSmallScreen | async) === false"
       class="sidenav"
       [mode]="(isSmallScreen | async) ? 'over' : 'side'">
+      <ng-container *ngIf="(isLoggedIn$ | async) === false">
+        <div class="login-side-container">
+          <div class="image-wrapper">
+            <img src="assets/img/Server-Stack.gif" alt="Self Hosted" />
+            <h3>Self Hosted</h3>
+          </div>
+          <div class="image-wrapper">
+            <img src="assets/img/API.gif" alt="API Generation" />
+            <h3>
+              Database & Network<br />
+              API Generation
+            </h3>
+          </div>
+          <div class="image-wrapper">
+            <img src="assets/img/Browser.gif" alt="Api Security" />
+            <h3>API Security</h3>
+          </div>
+          <div class="image-wrapper">
+            <img src="assets/img/Tools.gif" alt="API Scripting" />
+            <h3>API Scripting</h3>
+          </div>
+        </div>
+      </ng-container>
       <mat-nav-list *ngIf="isLoggedIn$ | async">
+        <button class="search-btn" mat-button (click)="handleSearchClick()">
+          {{ 'Search Features' | transloco }}
+          <span>
+            <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
+          </span>
+        </button>
         <ng-container
           *ngTemplateOutlet="
             navList;