feat(console): integrate app (#7417)

* docs, frameworks view

* project select, integrate app page

* fix search project autocomplete

* framework autocomplete

* framwork select component, integrate, mapping to oidc config

* param

* fix route handler

* setname projectid context

* app-create page without context

* show description of app type, info section

* redirects section

* updatevalue observable

* fix redirect uris section

* i18n

* setup config

* backbutton behavior, cleanup

* cleanup

* lint

* allow other framework jump off

* dev mode warning

* navigate to project

* rm import

* i18n, guide link

* edit name dialog

* show warning for duplicate name
This commit is contained in:
Max Peintner
2024-02-28 16:52:21 +00:00
committed by GitHub
parent f4c72cbe14
commit 0fcdfe460c
64 changed files with 2381 additions and 176 deletions
@@ -1,10 +1,17 @@
<div
class="info-section-row"
[ngClass]="{ info: type === 'INFO', warn: type === 'WARN', alert: type === 'ALERT', fit: fitWidth }"
[ngClass]="{
info: type === 'INFO',
warn: type === 'WARN',
alert: type === 'ALERT',
success: type === 'SUCCESS',
fit: fitWidth
}"
>
<i *ngIf="type === 'INFO'" class="icon las la-info"></i>
<i *ngIf="type === 'WARN'" class="icon las la-exclamation"></i>
<i *ngIf="type === 'ALERT'" class="icon las la-exclamation"></i>
<i *ngIf="type === 'SUCCESS'" class="icon las la-check-circle"></i>
<div class="info-section-content">
<ng-content></ng-content>
@@ -37,13 +37,19 @@ export class SearchProjectAutocompleteComponent implements OnInit, OnDestroy {
@Output() public selectionChanged: EventEmitter<{
project: Project.AsObject | GrantedProject.AsObject;
type: ProjectType;
name: string;
}> = new EventEmitter();
@Output() public valueChanged: EventEmitter<string> = new EventEmitter();
private unsubscribed$: Subject<void> = new Subject();
constructor(private mgmtService: ManagementService) {
this.myControl.valueChanges
.pipe(
takeUntil(this.unsubscribed$),
tap((value) => {
const name = typeof value === 'string' ? value : value.name ? value.name : '';
this.valueChanged.emit(name);
}),
debounceTime(200),
tap(() => (this.isLoading = true)),
switchMap((value) => {
@@ -124,44 +130,6 @@ export class SearchProjectAutocompleteComponent implements OnInit, OnDestroy {
return project && project.projectName ? `${project.projectName}` : project && project.name ? `${project.name}` : '';
}
public add(event: MatChipInputEvent): void {
if (!this.matAutocomplete.isOpen) {
const input = event.chipInput?.inputElement;
const value = event.value;
if ((value || '').trim()) {
const index = this.filteredProjects.findIndex((project) => {
if (project?.projectName) {
return project.projectName === value;
} else if (project?.name) {
return project.name === value;
} else {
return false;
}
});
if (index > -1) {
if (this.projects && this.projects.length > 0) {
this.projects.push(this.filteredProjects[index]);
} else {
this.projects = [this.filteredProjects[index]];
}
}
}
if (input) {
input.value = '';
}
}
}
public remove(project: GrantedProject.AsObject): void {
const index = this.projects.indexOf(project);
if (index >= 0) {
this.projects.splice(index, 1);
}
}
public selected(event: MatAutocompleteSelectedEvent): void {
const p: Project.AsObject | GrantedProject.AsObject = event.option.value;
const type = (p as Project.AsObject).id
@@ -170,8 +138,17 @@ export class SearchProjectAutocompleteComponent implements OnInit, OnDestroy {
? ProjectType.PROJECTTYPE_GRANTED
: ProjectType.PROJECTTYPE_OWNED;
const name = (p as Project.AsObject).name
? (p as Project.AsObject).name
: (p as GrantedProject.AsObject).projectName
? (p as GrantedProject.AsObject).projectName
: '';
console.log(name);
this.selectionChanged.emit({
project: p,
name,
type: type,
});
}