fix(ui): load project deps+ fix loading application and pipeline after creation

sdk/project.go

@@ -43,7 +43,7 @@ type Project struct {
 	Labels           []Label                `json:"labels,omitempty" yaml:"labels,omitempty" db:"-"  cli:"-"`
 	Permissions      Permissions            `json:"permissions" yaml:"-" db:"-"  cli:"-"`
 	Metadata         Metadata               `json:"metadata" yaml:"metadata" db:"metadata" cli:"-"`
-	Keys             []ProjectKey           `json:"keys" yaml:"keys" db:"-" cli:"-"`
+	Keys             []ProjectKey           `json:"keys,omitempty" yaml:"keys" db:"-" cli:"-"`
 	VCSServers       []ProjectVCSServerLink `json:"vcs_servers" yaml:"vcs_servers" db:"-" cli:"-"`
 	Integrations     []ProjectIntegration   `json:"integrations" yaml:"integrations" db:"-" cli:"-"`
 	Features         map[string]bool        `json:"features" yaml:"features" db:"-" cli:"-"`

ui/src/app/store/applications.state.ts

@@ -65,6 +65,8 @@ export class ApplicationsState {
             ctx.setState({
                 ...state,
                 currentProjectKey: action.payload.projectKey,
+                editMode: false,
+                editApplication: null,
                 application: app,
                 loading: false
             });

ui/src/app/store/pipelines.state.ts

@@ -56,6 +56,8 @@ export class PipelinesState {
             ctx.setState({
                 ...state,
                 currentProjectKey: action.payload.projectKey,
+                editPipeline: null,
+                editMode: false,
                 pipeline: pip,
                 loading: false,
             });

ui/src/app/store/project.action.ts

@@ -215,10 +215,6 @@ export class ResyncEnvironmentsInProject {
     static readonly type = '[Project] Resync Environments in Project';
     constructor(public payload: { projectKey: string }) { }
 }
-export class FetchEnvironmentsInProject {
-    static readonly type = '[Project] Fetch Environments in Project';
-    constructor(public payload: { projectKey: string }) { }
-}
 export class AddEnvironmentKey {
     static readonly type = '[Project] Add Environment Key in Project';
     constructor(public payload: { projectKey: string, envName: string, key: Key }) { }

ui/src/app/store/project.state.ts

@@ -92,14 +92,7 @@ export class ProjectState {
             });
         }
 
-        return ctx.dispatch(new ProjectAction.ResyncProject(action.payload));
-    }
-
-    @Action(ProjectAction.ResyncProject)
-    resync(ctx: StateContext<ProjectStateModel>, action: ProjectAction.ResyncProject) {
-        let params = new HttpParams();
         let opts = action.payload.opts;
-
         if (Array.isArray(opts) && opts.length) {
             opts = opts.concat([
                 new LoadOpts('withGroups', 'groups'),
@@ -111,11 +104,18 @@ export class ProjectState {
                 new LoadOpts('withPermission', 'permission')
             ];
         }
+        opts.push(new LoadOpts('withIntegrations', 'integrations'));
         opts.push(new LoadOpts('withLabels', 'labels'));
+
+        return ctx.dispatch(new ProjectAction.ResyncProject({projectKey: action.payload.projectKey, opts: opts}));
+    }
+
+    @Action(ProjectAction.ResyncProject)
+    resync(ctx: StateContext<ProjectStateModel>, action: ProjectAction.ResyncProject) {
+        let params = new HttpParams();
+        let opts = action.payload.opts;
         opts.push(new LoadOpts('withFeatures', 'features'));
-        opts.push(new LoadOpts('withIntegrations', 'integrations'));
         opts.forEach((opt) => params = params.append(opt.queryParam, 'true'));
-
         const state = ctx.getState();
         ctx.setState({
             ...state,
@@ -856,9 +856,6 @@ export class ProjectState {
     fetchEnvironment(ctx: StateContext<ProjectStateModel>, action: ProjectAction.FetchEnvironmentInProject) {
         const state = ctx.getState();
 
-        if (state.currentProjectKey && state.currentProjectKey !== action.payload.projectKey) {
-            ctx.dispatch(new ProjectAction.FetchProject({ projectKey: action.payload.projectKey, opts: [] }));
-        }
         return this._envService.getEnvironment(action.payload.projectKey, action.payload.envName)
             .pipe(tap((environment: Environment) => {
                 let envs = state.project.environments;
@@ -931,21 +928,6 @@ export class ProjectState {
             }));
     }
 
-    @Action(ProjectAction.FetchEnvironmentsInProject)
-    fetchEnvironments(ctx: StateContext<ProjectStateModel>, action: ProjectAction.FetchEnvironmentsInProject) {
-        const state = ctx.getState();
-
-        if (state.currentProjectKey && state.currentProjectKey === action.payload.projectKey &&
-            state.project && state.project.key && state.project.environments) {
-            return ctx.dispatch(new ProjectAction.LoadProject(state.project));
-        }
-        if (state.currentProjectKey && state.currentProjectKey !== action.payload.projectKey) {
-            ctx.dispatch(new ProjectAction.FetchProject({ projectKey: action.payload.projectKey, opts: [] }));
-        }
-
-        return ctx.dispatch(new ProjectAction.ResyncEnvironmentsInProject(action.payload));
-    }
-
     @Action(ProjectAction.LoadEnvironmentsInProject)
     loadEnvironments(ctx: StateContext<ProjectStateModel>, action: ProjectAction.LoadEnvironmentsInProject) {
         const state = ctx.getState();

ui/src/app/views/home/filter/home.filter.component.ts

@@ -7,7 +7,7 @@ import { ProjectStore } from 'app/service/project/project.store';
 import { TimelineStore } from 'app/service/timeline/timeline.store';
 import { AutoUnsubscribe } from 'app/shared/decorator/autoUnsubscribe';
 import { ToastService } from 'app/shared/toast/ToastService';
-import { ResyncProject } from 'app/store/project.action';
+import { FetchProject } from 'app/store/project.action';
 import { ProjectState, ProjectStateModel } from 'app/store/project.state';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { finalize, flatMap } from 'rxjs/operators';
@@ -93,7 +93,7 @@ export class HomeFilterComponent {
         let opts = new Array<LoadOpts>();
         opts.push(new LoadOpts('withWorkflowNames', 'workflow_names'));
 
-        this.store.dispatch(new ResyncProject({
+        this.store.dispatch(new FetchProject({
             projectKey: projFilter.key,
             opts
         })).pipe(

ui/src/app/views/project/show/application/application.list.component.ts

@@ -1,13 +1,16 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { IdName, Project } from 'app/model/project.model';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { IdName, LoadOpts, Project } from 'app/model/project.model';
+import { ResyncProject } from 'app/store/project.action';
+import { finalize } from 'rxjs/operators';
 
 @Component({
     selector: 'app-project-applications',
     templateUrl: './application.list.html',
     styleUrls: ['./application.list.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ProjectApplicationListComponent {
+export class ProjectApplicationListComponent implements OnInit {
 
     @Input()
     set project(project: Project) {
@@ -34,8 +37,19 @@ export class ProjectApplicationListComponent {
 
     _project: Project;
     _filter = '';
+    loading = true;
 
     filteredApplications: Array<IdName> = [];
 
-    constructor() { }
+    constructor(private store: Store, private _cd: ChangeDetectorRef) {}
+
+    ngOnInit(): void {
+        let opts: Array<LoadOpts> = [new LoadOpts('withApplicationNames', 'application_names')];
+        this.store.dispatch(new ResyncProject({ projectKey: this.project.key, opts: opts }))
+            .pipe(finalize(() => {
+                this.loading = false;
+                this._cd.markForCheck();
+            }))
+            .subscribe();
+    }
 }

ui/src/app/views/project/show/application/application.list.html

@@ -1,4 +1,4 @@
-<div class="ui grid">
+<div class="ui grid" *ngIf="!loading">
     <div class="ui row">
       <div class="six wide column">
           <h3>{{ 'project_applications_list' | translate }}</h3>
@@ -38,3 +38,4 @@ <h3>{{ 'project_applications_list' | translate }}</h3>
       </div>
     </div>
 </div>
+<div class="ui text active loader" *ngIf="loading">{{'common_loading' | translate}}</div>

ui/src/app/views/project/show/environment/environment.list.component.ts

@@ -1,13 +1,16 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { IdName, Project } from 'app/model/project.model';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { IdName, LoadOpts, Project } from 'app/model/project.model';
+import { ResyncProject } from 'app/store/project.action';
+import { finalize } from 'rxjs/operators';
 
 @Component({
     selector: 'app-project-environments',
     templateUrl: './environment.list.html',
     styleUrls: ['./environment.list.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ProjectEnvironmentListComponent {
+export class ProjectEnvironmentListComponent implements OnInit {
 
     @Input()
     set project(project: Project) {
@@ -36,8 +39,17 @@ export class ProjectEnvironmentListComponent {
     _filter = '';
 
     filteredEnvironments: Array<IdName> = [];
+    loading = true;
 
-    constructor() {
+    constructor(private store: Store, private _cd: ChangeDetectorRef) {}
 
+    ngOnInit(): void {
+        let opts: Array<LoadOpts> = [new LoadOpts('withEnvironmentNames', 'environment_names')];
+        this.store.dispatch(new ResyncProject({ projectKey: this.project.key, opts: opts }))
+            .pipe(finalize(() => {
+                this.loading = false;
+                this._cd.markForCheck();
+            }))
+            .subscribe();
     }
 }

ui/src/app/views/project/show/environment/environment.list.html

@@ -1,4 +1,4 @@
-<div class="ui grid">
+<div class="ui grid" *ngIf="!loading">
     <div class="ui row">
         <div class="six wide column">
             <h3>{{ 'project_env_list_title' | translate }}</h3>
@@ -38,3 +38,5 @@ <h3>{{ 'project_env_list_title' | translate }}</h3>
         </div>
     </div>
 </div>
+<div class="ui text active loader" *ngIf="loading">{{'common_loading' | translate}}</div>
+

ui/src/app/views/project/show/pipeline/pipeline.list.component.ts

@@ -1,43 +1,58 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { IdName, Project } from 'app/model/project.model';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { IdName, LoadOpts, Project } from 'app/model/project.model';
+import { ResyncProject } from 'app/store/project.action';
+import { finalize } from 'rxjs/operators';
 
 @Component({
     selector: 'app-project-pipelines',
     templateUrl: './pipeline.list.html',
     styleUrls: ['./pipeline.list.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ProjectPipelinesComponent {
-
-  @Input()
-  set project(project: Project) {
-    this._project = project;
-    if (project.pipeline_names) {
-      let filter = this.filter.toLowerCase();
-      this.filteredPipelines = project.pipeline_names.filter((pip) => pip.name.toLowerCase().indexOf(filter) !== -1);
+export class ProjectPipelinesComponent implements OnInit {
+
+    @Input()
+    set project(project: Project) {
+        this._project = project;
+        if (project.pipeline_names) {
+            let filter = this.filter.toLowerCase();
+            this.filteredPipelines = project.pipeline_names.filter((pip) => pip.name.toLowerCase().indexOf(filter) !== -1);
+        }
     }
-  }
-  get project(): Project {
-    return this._project;
-  }
-
-  set filter(filter: string) {
-    this._filter = filter;
-    if (this.project.pipeline_names) {
-      let filterLower = filter.toLowerCase();
-      this.filteredPipelines = this.project.pipeline_names.filter((pip) => pip.name.toLowerCase().indexOf(filterLower) !== -1);
+
+    get project(): Project {
+        return this._project;
     }
-  }
-  get filter(): string {
-    return this._filter;
-  }
 
-  _project: Project;
-  _filter = '';
+    set filter(filter: string) {
+        this._filter = filter;
+        if (this.project.pipeline_names) {
+            let filterLower = filter.toLowerCase();
+            this.filteredPipelines = this.project.pipeline_names.filter((pip) => pip.name.toLowerCase().indexOf(filterLower) !== -1);
+        }
+    }
 
-  filteredPipelines: Array<IdName> = [];
+    get filter(): string {
+        return this._filter;
+    }
 
-    constructor() {
+    _project: Project;
+    _filter = '';
+
+    filteredPipelines: Array<IdName> = [];
+    loading = true;
+
+    constructor(private store: Store, private _cd: ChangeDetectorRef) {
+    }
 
+    ngOnInit(): void {
+        let opts: Array<LoadOpts> = [new LoadOpts('withPipelineNames', 'pipeline_names')];
+        this.store.dispatch(new ResyncProject({projectKey: this.project.key, opts: opts}))
+            .pipe(finalize(() => {
+                this.loading = false;
+                this._cd.markForCheck();
+            }))
+            .subscribe();
     }
 }

ui/src/app/views/project/show/pipeline/pipeline.list.html

@@ -1,4 +1,4 @@
-<div class="ui grid">
+<div class="ui grid" *ngIf="!loading">
     <div class="ui row">
       <div class="six wide column">
           <h3>{{ 'project_pipelines_list' | translate }}</h3>
@@ -37,3 +37,4 @@ <h3>{{ 'project_pipelines_list' | translate }}</h3>
         </div>
       </div>
 </div>
+<div class="ui text active loader" *ngIf="loading">{{'common_loading' | translate}}</div>

ui/src/app/views/project/show/project.component.ts

@@ -149,28 +149,9 @@ export class ProjectShowComponent implements OnInit {
     }
 
     refreshDatas(key: string): void {
-        let opts = [
-            new LoadOpts('withApplicationNames', 'application_names'),
-            new LoadOpts('withPipelineNames', 'pipeline_names'),
-            new LoadOpts('withWorkflowNames', 'workflow_names'),
-            new LoadOpts('withEnvironmentNames', 'environment_names'),
-            new LoadOpts('withLabels', 'labels'),
-        ];
-
-        if (this.selectedTab) {
-            switch (this.selectedTab.key) {
-                case 'variables':
-                    opts.push(new LoadOpts('withVariables', 'variables'));
-                    break;
-                case 'permissions':
-                    opts.push(new LoadOpts('withEnvironments', 'environments'));
-                    break;
-            }
-        }
-
+        let opts = [new LoadOpts('withLabels', 'labels')];
         this._store.dispatch(new FetchProject({ projectKey: key, opts }))
             .subscribe(null, () => this._router.navigate(['/home']));
-
     }
 
     updateFav() {