merge: Merge branch 'origin/plugins-store' into plugins-store

backend/tests/data/mbse-works-plugin.yml

@@ -4,7 +4,7 @@
 metadata:
   id: t4c-to-git
   description: |
-    Synchronize the content of from a T4C repository project to a Git repository.
+    Synchronize the content from a T4C repository project to a Git repository.
 
 trigger:
   cron:

frontend/src/app/app.module.ts

@@ -131,6 +131,8 @@ import { T4CSettingsWrapperComponent } from './settings/modelsources/t4c-setting
 import { T4CSettingsComponent } from './settings/modelsources/t4c-settings/t4c-settings.component';
 import { SettingsComponent } from './settings/settings.component';
 import { CreatePipelineComponent } from './projects/models/backup-settings/create-pipeline/create-pipeline.component';
+import { PipelineGitInputComponent } from './projects/models/backup-settings/create-pipeline/pipeline-input/pipeline-git-input/pipeline-git-input.component';
+import { PipelineT4CInputComponent } from './projects/models/backup-settings/create-pipeline/pipeline-input/pipeline-t4c-input/pipeline-t4c-input.component';
 
 @NgModule({
   declarations: [
@@ -219,6 +221,8 @@ import { CreatePipelineComponent } from './projects/models/backup-settings/creat
     VersionComponent,
     ViewLogsDialogComponent,
     CreatePipelineComponent,
+    PipelineGitInputComponent,
+    PipelineT4CInputComponent,
   ],
   imports: [
     AppRoutingModule,

frontend/src/app/general/header/header.component.html

@@ -35,7 +35,7 @@
     </div>
   </div>
   <div>
-    <div class="hidden xl:flex xl:right-aligned gap-2">
+    <div class="hidden xl:flex xl:right-aligned gap-button">
       <div>
         <a
           mat-raised-button

frontend/src/app/plugins/store/create-plugin/create-plugin.component.ts

@@ -4,6 +4,7 @@
  */
 
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import {
   Plugin,
@@ -16,8 +17,10 @@ import {
   styleUrls: ['./create-plugin.component.css'],
 })
 export class CreatePluginComponent {
-  constructor(public pluginStoreService: PluginStoreService) {}
-
+  constructor(
+    public pluginStoreService: PluginStoreService,
+    private router: Router
+  ) {}
   createPluginForm = new FormGroup({
     remote: new FormControl('', Validators.required),
     username: new FormControl(''),
@@ -26,9 +29,12 @@ export class CreatePluginComponent {
 
   onSubmit() {
     if (this.createPluginForm.valid) {
-      this.pluginStoreService.registerPluginInStore(
-        this.createPluginForm.value as Plugin
-      );
+      this.pluginStoreService
+        .registerPluginInStore(this.createPluginForm.value as Plugin)
+        .subscribe(() => {
+          this.pluginStoreService.fetchPluginsFromStore();
+          this.router.navigate(['/plugins']);
+        });
     }
   }
 

frontend/src/app/plugins/store/plugin-store-overview/plugin-store-overview.component.html

@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="flexbox">
+<div class="flex flex-wrap">
   <a routerLink="/plugins/create">
     <mat-card matRipple class="mat-card-overview new">
       <div class="content">

frontend/src/app/plugins/store/service/plugin-store.service.ts

@@ -5,7 +5,7 @@
 
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable, tap } from 'rxjs';
 import { environment } from 'src/environments/environment';
 
 @Injectable({
@@ -29,17 +29,19 @@ export class PluginStoreService {
       .subscribe({ next: (plugins) => this._plugins.next(plugins) });
   }
 
-  registerPluginInStore(plugin: Plugin) {
+  registerPluginInStore(plugin: Plugin): Observable<Plugin> {
     this._plugin.next(undefined);
-    this.httpClient
+    return this.httpClient
       .post<Plugin>(`${environment.backend_url}/plugins`, plugin)
-      .subscribe({ next: (plugin) => this._plugin.next(plugin) });
+      .pipe(tap({ next: (plugin) => this._plugin.next(plugin) }));
   }
 }
 
 export type PluginMetadata = {
   id: string;
   description: string;
+  displayName: string;
+  documentationURL: string;
 };
 
 export type CreatePlugin = {
@@ -61,3 +63,19 @@ export type PluginTemplateContent = {
 export type PluginTemplateInput = {
   type: string;
 };
+
+export type PluginTemplateGitInput = PluginTemplateInput & {
+  mapping: string;
+};
+
+export type PluginTemplateEnvironmentMapping = {
+  type: 'environment';
+  key: string;
+};
+
+export type PluginTemplateGitMapping = {
+  url: PluginTemplateEnvironmentMapping;
+  username: PluginTemplateEnvironmentMapping;
+  password: PluginTemplateEnvironmentMapping;
+  revision: PluginTemplateEnvironmentMapping;
+};

frontend/src/app/projects/models/backup-settings/create-pipeline/create-pipeline.component.css

@@ -3,16 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-#get-started {
-  width: 46em;
-}
-
 .header {
   background-color: var(--primary-color);
   color: white;
   border-radius: 5px 5px 0 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 10px;
-}
+}

frontend/src/app/projects/models/backup-settings/create-pipeline/create-pipeline.component.html

@@ -3,6 +3,17 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
+<mat-card
+  class="w-full text-center bg-primary text-white"
+  *ngIf="selectedPlugin"
+  >Selected plugin: <br />
+  <b>
+    {{
+      selectedPlugin.content?.metadata?.displayName ||
+        selectedPlugin.content?.metadata?.id
+    }}
+  </b>
+</mat-card>
 <mat-horizontal-stepper [linear]="false" #stepper>
   <mat-step>
     <h2>Welcome to the pipeline setup agent!</h2>
@@ -27,52 +38,84 @@ <h2>Welcome to the pipeline setup agent!</h2>
           mat-raised-button
           color="primary"
           matStepperNext
-          id="get-started"
+          class="w-[46em]"
         >
-          Get started <mat-icon>arrow_right_alt</mat-icon>
+          <span> Get started </span>
+          <mat-icon>arrow_right_alt</mat-icon>
         </button>
       </div>
     </form>
   </mat-step>
   <mat-step>
-    <div class="flexbox">
+    <div class="flex flex-wrap">
       <app-mat-card-overview-skeleton-loader
         [loading]="(pluginStoreService.plugins | async) === undefined"
       ></app-mat-card-overview-skeleton-loader>
       <ng-container *ngIf="pluginStoreService.plugins | async">
         <mat-card
           *ngFor="let plugin of (pluginStoreService.plugins | async)!"
-          class="w-[400px] p-0"
+          class="w-[400px] !p-0"
         >
-          <div class="header">
+          <div class="header px-4 text-lg py-2.5">
             {{
-              plugin.content?.metadata?.id ||
-                "No identifier provided in template"
+              plugin.content?.metadata?.displayName ||
+                "No display name provided in template"
             }}
           </div>
-          <div class="flex justify-between gap-3 flex-col">
+          <div class="flex justify-between gap-3 flex-col p-4">
             <div>
               {{
                 plugin.content?.metadata?.description ||
                   "No description provided."
               }}
-              <hr />
-              <br />
+              <hr class="my-2" />
               <div>
-                <a [href]="plugin.remote" target="_blank"
-                  >Template source <mat-icon>open_in_new</mat-icon>
+                <a
+                  [href]="plugin.remote"
+                  target="_blank"
+                  class="flex items-center text-blue-800"
+                >
+                  <div>Template source</div>
+                  <mat-icon class="scale-75">open_in_new</mat-icon>
                 </a>
               </div>
-              <b>Input:</b> {{ getInputList(plugin) }} <br />
+              <b>Requires:</b>
+              <ul class="list-disc pl-10">
+                <li
+                  *ngFor="
+                    let inputType of cleanInputTypes(
+                      plugin.content?.input || []
+                    )
+                  "
+                >
+                  {{ mapInputToDisplayName(inputType) }}
+                </li>
+              </ul>
             </div>
 
             <div class="flex gap-2 justify-between">
-              <button mat-stroked-button>
-                Documentation<mat-icon class="ml-2">question_answer</mat-icon>
-              </button>
-              <a [routerLink]="['/plugin', plugin.id]" mat-stroked-button>
+              <div
+                matTooltip="No documentation available for this plugin."
+                [matTooltipDisabled]="
+                  plugin.content?.metadata?.documentationURL
+                "
+              >
+                <button
+                  mat-stroked-button
+                  [disabled]="!plugin.content?.metadata?.documentationURL"
+                  class="flex items-center"
+                >
+                  <span>Documentation</span
+                  ><mat-icon class="ml-2">help_outline</mat-icon>
+                </button>
+              </div>
+              <button
+                mat-stroked-button
+                (click)="selectPlugin(stepper, plugin)"
+                class="flex items-center"
+              >
                 Select <mat-icon>play_arrow</mat-icon>
-              </a>
+              </button>
             </div>
           </div>
         </mat-card>
@@ -82,21 +125,30 @@ <h2>Welcome to the pipeline setup agent!</h2>
       <ng-template matStepLabel>Plugin selection</ng-template>
     </form>
   </mat-step>
-
   <mat-step>
     <form>
       <ng-template matStepLabel>Configuration</ng-template>
-      <!-- Your Configuration Form Goes Here -->
-      <div>
-        <button mat-button matStepperPrevious>Back</button>
-        <button mat-button matStepperNext>Next</button>
-      </div>
+      <mat-horizontal-stepper [linear]="false" #configurationStepper>
+        <mat-step *ngFor="let input of selectedPlugin?.content?.input">
+          <form>
+            <ng-template matStepLabel>{{
+              mapInputToDisplayName(input.type)
+            }}</ng-template>
+            <app-pipeline-git-input
+              [input]="input"
+              *ngIf="input.type === 'git'"
+            ></app-pipeline-git-input>
+            <app-pipeline-t4c-input
+              *ngIf="input.type === 't4c'"
+            ></app-pipeline-t4c-input>
+          </form>
+        </mat-step>
+      </mat-horizontal-stepper>
     </form>
   </mat-step>
   <mat-step>
     <form>
       <ng-template matStepLabel>Trigger rules</ng-template>
-      <!-- Your Configuration Form Goes Here -->
       <div>
         <button mat-button matStepperPrevious>Back</button>
         <button mat-button matStepperNext>Next</button>

frontend/src/app/projects/models/backup-settings/create-pipeline/create-pipeline.component.ts

@@ -4,9 +4,11 @@
  */
 
 import { Component } from '@angular/core';
+import { MatStepper } from '@angular/material/stepper';
 import {
   PluginStoreService,
   Plugin,
+  PluginTemplateInput,
 } from 'src/app/plugins/store/service/plugin-store.service';
 
 @Component({
@@ -17,7 +19,23 @@ import {
 export class CreatePipelineComponent {
   constructor(public pluginStoreService: PluginStoreService) {}
 
-  getInputList(plugin: Plugin) {
-    return plugin.content?.input?.map((input) => input.type).join(', ');
+  selectedPlugin?: Plugin = undefined;
+
+  cleanInputTypes(inputs: PluginTemplateInput[]): string[] {
+    return [...new Set(inputs.map((input) => input.type))];
+  }
+
+  mapInputToDisplayName(input: string) {
+    return {
+      git: 'Git repository access',
+      t4c: 'TeamForCapella repository access',
+      yml: 'YAML configuration file',
+      environment: 'Individual configuration via environment variables',
+    }[input];
+  }
+
+  selectPlugin(stepper: MatStepper, plugin: Plugin) {
+    this.selectedPlugin = plugin;
+    stepper.next();
   }
 }

frontend/src/app/projects/models/backup-settings/create-pipeline/pipeline-input/pipeline-git-input/pipeline-git-input.component.css

@@ -0,0 +1,4 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */

frontend/src/app/projects/models/backup-settings/create-pipeline/pipeline-input/pipeline-git-input/pipeline-git-input.component.html

@@ -0,0 +1,39 @@
+<!--
+ ~ SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+ ~ SPDX-License-Identifier: Apache-2.0
+ -->
+
+Please select a Git model from the list:
+<mat-selection-list [multiple]="false">
+  <mat-list-option
+    [(ngModel)]="selectedGitModel"
+    *ngFor="let gitModel of gitModelService.gitModels$ | async"
+    [value]="gitModel.id"
+  >
+    <div mat-line>Git model {{ gitModel.id }}</div>
+    <div mat-line>
+      URL '{{ gitModel.path }}', revision '{{ gitModel.revision }}'
+    </div>
+  </mat-list-option>
+</mat-selection-list>
+
+<div class="mt-separator border p-2">
+  The pipeline will get access to the following information of the selected Git
+  model:
+  <ul class="list-disc pl-10">
+    <li *ngFor="let mapping of gitInput?.mapping | keyvalue">
+      {{ mapping.key }}
+    </li>
+  </ul>
+</div>
+
+<mat-checkbox class="mt-separator"
+  >I confirm that I trust the pipeline authors and confirm that the pipeline
+  should have access to the above values.
+</mat-checkbox>
+
+<div class="mt-separator">
+  <button [disabled]="selectedGitModel === undefined" mat-stroked-button>
+    Submit and continue
+  </button>
+</div>