feat(console): gitlab, gitlab self hosted - templates (#5422)

gitlab provider

console/angular.json

@@ -85,7 +85,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "6mb",
+                  "maximumWarning": "7mb",
                   "maximumError": "7mb"
                 },
                 {

console/src/app/modules/idp-table/idp-table.component.html

@@ -59,6 +59,14 @@
               <mat-icon class="idp-icon" svgIcon="mdi_jwt" alt="jwt" />
               Generic JWT
             </div>
+            <div class="idp-table-provider-type" *ngSwitchCase="ProviderType.PROVIDER_TYPE_GITLAB">
+              <img class="idp-logo" src="../../../assets/images/idp/gitlab.svg" alt="gitlab" />
+              Gitlab
+            </div>
+            <div class="idp-table-provider-type" *ngSwitchCase="ProviderType.PROVIDER_TYPE_GITLAB_SELF_HOSTED">
+              <img class="idp-logo" src="../../../assets/images/idp/gitlab.svg" alt="gitlab self hosted" />
+              Gitlab Self Hosted
+            </div>
             <div class="idp-table-provider-type" *ngSwitchCase="ProviderType.PROVIDER_TYPE_GITHUB_ES">
               <img class="idp-logo dark" src="../../../assets/images/idp/github-dark.svg" alt="github" />
               <img class="idp-logo light" src="../../../assets/images/idp/github.svg" alt="github" />

console/src/app/modules/idp-table/idp-table.component.ts

@@ -236,6 +236,15 @@ export class IdpTableComponent implements OnInit {
           return [row.owner === IDPOwnerType.IDP_OWNER_TYPE_SYSTEM ? '/instance' : '/org', 'provider', 'jwt', row.id];
         case ProviderType.PROVIDER_TYPE_GOOGLE:
           return [row.owner === IDPOwnerType.IDP_OWNER_TYPE_SYSTEM ? '/instance' : '/org', 'provider', 'google', row.id];
+        case ProviderType.PROVIDER_TYPE_GITLAB:
+          return [row.owner === IDPOwnerType.IDP_OWNER_TYPE_SYSTEM ? '/instance' : '/org', 'provider', 'gitlab', row.id];
+        case ProviderType.PROVIDER_TYPE_GITLAB_SELF_HOSTED:
+          return [
+            row.owner === IDPOwnerType.IDP_OWNER_TYPE_SYSTEM ? '/instance' : '/org',
+            'provider',
+            'gitlab-self-hosted',
+            row.id,
+          ];
         case ProviderType.PROVIDER_TYPE_GITHUB:
           return [row.owner === IDPOwnerType.IDP_OWNER_TYPE_SYSTEM ? '/instance' : '/org', 'provider', 'github', row.id];
       }

console/src/app/modules/policies/idp-settings/idp-settings.component.html

@@ -69,13 +69,38 @@
     </div>
   </a>
 
-  <div class="item card coming-soon" matRipple>
+  <a
+    class="item card coming-soon"
+    [routerLink]="
+      serviceType === PolicyComponentServiceType.ADMIN
+        ? ['/instance', 'provider', 'gitlab', 'create']
+        : serviceType === PolicyComponentServiceType.MGMT
+        ? ['/org', 'provider', 'gitlab', 'create']
+        : []
+    "
+  >
     <span class="state coming-soon-label">{{ 'ACTIONS.COMINGSOON' | translate }}</span>
     <img class="idp-logo" src="../../../assets/images/idp/gitlab.svg" alt="GitLab" />
     <div class="text-container">
       <span class="title">GitLab</span>
     </div>
+  </a>
+
+  <a
+    class="item card"
+    [routerLink]="
+      serviceType === PolicyComponentServiceType.ADMIN
+        ? ['/instance', 'provider', 'gitlab-self-hosted', 'create']
+        : serviceType === PolicyComponentServiceType.MGMT
+        ? ['/org', 'provider', 'gitlab-self-hosted', 'create']
+        : []
+    "
+  >
+    <img class="idp-logo" src="../../../assets/images/idp/gitlab.svg" alt="GitLab" />
+    <div class="text-container">
+      <span class="title">GitLab Self Hosted</span>
     </div>
+  </a>
 
   <a
     class="item card"

console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ProviderGitlabSelfHostedComponent } from './provider-gitlab-self-hosted.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProviderGitlabSelfHostedComponent,
+    data: { animation: 'DetailPage' },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ProviderGitlabSelfHostedRoutingModule {}

console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html

@@ -0,0 +1,98 @@
+<cnsl-create-layout
+  title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
+  (closed)="close()"
+>
+  <div class="gitlab-create-content">
+    <div class="title-row">
+      <img class="idp-logo" src="../../../assets/images/idp/gitlab.svg" alt="gitlab" />
+      <h1>{{ 'IDP.CREATE.GITLABSELFHOSTED.TITLE' | translate }}</h1>
+      <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
+    </div>
+
+    <p class="desc cnsl-secondary-text">
+      {{ !provider ? ('IDP.CREATE.GITLABSELFHOSTED.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
+    </p>
+
+    <form [formGroup]="form" (ngSubmit)="submitForm()">
+      <div class="gitlab-content">
+        <cnsl-form-field class="formfield">
+          <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
+          <input cnslInput formControlName="issuer" />
+        </cnsl-form-field>
+
+        <cnsl-form-field class="formfield">
+          <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
+          <input cnslInput formControlName="clientId" />
+        </cnsl-form-field>
+
+        <mat-checkbox *ngIf="provider" [(ngModel)]="updateClientSecret" [ngModelOptions]="{ standalone: true }">{{
+          'IDP.UPDATECLIENTSECRET' | translate
+        }}</mat-checkbox>
+        <cnsl-form-field *ngIf="!provider || (provider && updateClientSecret)" class="formfield">
+          <cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
+          <input cnslInput formControlName="clientSecret" />
+        </cnsl-form-field>
+
+        <div class="optional-h-wrapper">
+          <h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
+          <button (click)="showOptional = !showOptional" type="button" mat-icon-button>
+            <mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
+            ><mat-icon *ngIf="!showOptional">keyboard_arrow_down</mat-icon>
+          </button>
+        </div>
+        <div *ngIf="showOptional">
+          <div class="idp-scopes">
+            <div class="flex-line">
+              <cnsl-form-field class="formfield">
+                <cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
+
+                <input
+                  cnslInput
+                  [matChipInputFor]="chipScopesList"
+                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                  [matChipInputAddOnBlur]="true"
+                  (matChipInputTokenEnd)="addScope($event)"
+                />
+              </cnsl-form-field>
+              <button class="scope-add-button" (click)="addScope($any($event))" mat-icon-button>
+                <mat-icon>add</mat-icon>
+              </button>
+            </div>
+
+            <cnsl-form-field class="formfield">
+              <mat-chip-list #chipScopesList aria-label="scope selection">
+                <mat-chip
+                  class="chip"
+                  *ngFor="let scope of scopesList?.value"
+                  selectable="false"
+                  removable
+                  (removed)="removeScope(scope)"
+                >
+                  {{ scope }} <mat-icon matChipRemove>cancel</mat-icon>
+                </mat-chip>
+              </mat-chip-list>
+            </cnsl-form-field>
+          </div>
+
+          <cnsl-form-field class="formfield">
+            <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
+            <input cnslInput formControlName="name" />
+            <span class="name-hint cnsl-secondary-text" cnslHint>{{ 'IDP.NAMEHINT' | translate }}</span>
+          </cnsl-form-field>
+
+          <cnsl-provider-options
+            [initialOptions]="provider?.config?.options"
+            (optionsChanged)="options = $event"
+          ></cnsl-provider-options>
+        </div>
+      </div>
+
+      <div class="gitlab-create-actions">
+        <button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" type="submit">
+          <span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
+          <span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>
+        </button>
+      </div>
+    </form>
+  </div>
+</cnsl-create-layout>

console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.scss

@@ -0,0 +1,87 @@
+.desc {
+  font-size: 14px;
+}
+
+.gitlab-create-content {
+  .title-row {
+    display: flex;
+    align-items: center;
+
+    .idp-logo {
+      height: 36px;
+      width: 36px;
+      margin-right: 1rem;
+      flex-shrink: 0;
+    }
+
+    h1 {
+      margin: 0 1rem 0 0;
+    }
+  }
+
+  .formfield {
+    display: block;
+    max-width: 400px;
+
+    .name-hint {
+      font-size: 12px;
+    }
+
+    .mat-chip-input {
+      width: 100%;
+      margin: 0;
+    }
+
+    .chip {
+      border-radius: 0.5rem;
+      height: 40px;
+    }
+
+    @media only screen and (max-width: 450px) {
+      max-width: none;
+    }
+  }
+
+  .gitlab-content {
+    .desc {
+      margin-bottom: 1rem;
+    }
+
+    .idp-scopes {
+      padding-bottom: 0.5rem;
+
+      .flex-line {
+        display: flex;
+        align-items: flex-start;
+        max-width: 400px;
+
+        .formfield {
+          flex: 1;
+        }
+
+        .scope-add-button {
+          margin-top: 1.75rem;
+        }
+      }
+    }
+  }
+}
+
+.gitlab-create-actions {
+  display: flex;
+  margin-top: 1rem;
+
+  button[mat-raised-button] {
+    border-radius: 0.5rem;
+    padding: 0.5rem 4rem;
+  }
+}
+
+.optional-h-wrapper {
+  display: flex;
+  align-items: center;
+
+  h2 {
+    margin-right: 0.25rem;
+  }
+}

console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ProviderGoogleComponent } from './provider-google.component';
+
+describe('ProviderGoogleComponent', () => {
+  let component: ProviderGoogleComponent;
+  let fixture: ComponentFixture<ProviderGoogleComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProviderGoogleComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProviderGoogleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.ts

@@ -0,0 +1,277 @@
+import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
+import { Location } from '@angular/common';
+import { Component, Injector, Type } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
+import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
+import { ActivatedRoute } from '@angular/router';
+import { take } from 'rxjs';
+import {
+  AddGitLabSelfHostedProviderRequest as AdminAddGitLabSelfHostedProviderRequest,
+  GetProviderByIDRequest as AdminGetProviderByIDRequest,
+  UpdateGitLabSelfHostedProviderRequest as AdminUpdateGitLabSelfHostedProviderRequest,
+} from 'src/app/proto/generated/zitadel/admin_pb';
+import { Options, Provider } from 'src/app/proto/generated/zitadel/idp_pb';
+import {
+  AddGitLabSelfHostedProviderRequest as MgmtAddGitLabSelfHostedProviderRequest,
+  GetProviderByIDRequest as MgmtGetProviderByIDRequest,
+  UpdateGitLabSelfHostedProviderRequest as MgmtUpdateGitLabSelfHostedProviderRequest,
+} from 'src/app/proto/generated/zitadel/management_pb';
+import { AdminService } from 'src/app/services/admin.service';
+import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+import { requiredValidator } from '../../form-field/validators/validators';
+
+import { PolicyComponentServiceType } from '../../policies/policy-component-types.enum';
+
+@Component({
+  selector: 'cnsl-provider-gitlab-self-hosted',
+  templateUrl: './provider-gitlab-self-hosted.component.html',
+  styleUrls: ['./provider-gitlab-self-hosted.component.scss'],
+})
+export class ProviderGitlabSelfHostedComponent {
+  public showOptional: boolean = false;
+  public options: Options = new Options();
+  public id: string | null = '';
+  public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
+  private service!: ManagementService | AdminService;
+
+  public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
+
+  public form!: FormGroup;
+
+  public loading: boolean = false;
+
+  public provider?: Provider.AsObject;
+  public updateClientSecret: boolean = false;
+
+  constructor(
+    private route: ActivatedRoute,
+    private toast: ToastService,
+    private injector: Injector,
+    private _location: Location,
+    private breadcrumbService: BreadcrumbService,
+  ) {
+    this.form = new FormGroup({
+      name: new FormControl('', []),
+      issuer: new FormControl('', [requiredValidator]),
+      clientId: new FormControl('', [requiredValidator]),
+      clientSecret: new FormControl('', [requiredValidator]),
+      scopesList: new FormControl(['openid', 'profile', 'email'], []),
+    });
+
+    this.route.data.pipe(take(1)).subscribe((data) => {
+      this.serviceType = data.serviceType;
+
+      switch (this.serviceType) {
+        case PolicyComponentServiceType.MGMT:
+          this.service = this.injector.get(ManagementService as Type<ManagementService>);
+
+          const bread: Breadcrumb = {
+            type: BreadcrumbType.ORG,
+            routerLink: ['/org'],
+          };
+
+          this.breadcrumbService.setBreadcrumb([bread]);
+          break;
+        case PolicyComponentServiceType.ADMIN:
+          this.service = this.injector.get(AdminService as Type<AdminService>);
+
+          const iamBread = new Breadcrumb({
+            type: BreadcrumbType.ORG,
+            name: 'Instance',
+            routerLink: ['/instance'],
+          });
+          this.breadcrumbService.setBreadcrumb([iamBread]);
+          break;
+      }
+
+      this.id = this.route.snapshot.paramMap.get('id');
+      if (this.id) {
+        this.clientSecret?.setValidators([]);
+        this.getData(this.id);
+      }
+    });
+  }
+
+  private getData(id: string): void {
+    const req =
+      this.serviceType === PolicyComponentServiceType.ADMIN
+        ? new AdminGetProviderByIDRequest()
+        : new MgmtGetProviderByIDRequest();
+    req.setId(id);
+    this.service
+      .getProviderByID(req)
+      .then((resp) => {
+        this.provider = resp.idp;
+        this.loading = false;
+        if (this.provider?.config?.gitlabSelfHosted) {
+          this.form.patchValue(this.provider.config.gitlabSelfHosted);
+          this.name?.setValue(this.provider.name);
+        }
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+        this.loading = false;
+      });
+  }
+
+  public submitForm(): void {
+    this.provider ? this.updateGitlabSelfHostedProvider() : this.addGitlabSelfHostedProvider();
+  }
+
+  public addGitlabSelfHostedProvider(): void {
+    if (this.serviceType === PolicyComponentServiceType.MGMT) {
+      const req = new MgmtAddGitLabSelfHostedProviderRequest();
+
+      req.setName(this.name?.value);
+      req.setIssuer(this.issuer?.value);
+      req.setClientId(this.clientId?.value);
+      req.setClientSecret(this.clientSecret?.value);
+      req.setScopesList(this.scopesList?.value);
+      req.setProviderOptions(this.options);
+
+      this.loading = true;
+      (this.service as ManagementService)
+        .addGitLabSelfHostedProvider(req)
+        .then((idp) => {
+          setTimeout(() => {
+            this.loading = false;
+            this.close();
+          }, 2000);
+        })
+        .catch((error) => {
+          this.toast.showError(error);
+          this.loading = false;
+        });
+    } else if (PolicyComponentServiceType.ADMIN) {
+      const req = new AdminAddGitLabSelfHostedProviderRequest();
+      req.setName(this.name?.value);
+      req.setIssuer(this.issuer?.value);
+      req.setClientId(this.clientId?.value);
+      req.setClientSecret(this.clientSecret?.value);
+      req.setScopesList(this.scopesList?.value);
+      req.setProviderOptions(this.options);
+
+      this.loading = true;
+      (this.service as AdminService)
+        .addGitLabSelfHostedProvider(req)
+        .then((idp) => {
+          setTimeout(() => {
+            this.loading = false;
+            this.close();
+          }, 2000);
+        })
+        .catch((error) => {
+          this.loading = false;
+          this.toast.showError(error);
+        });
+    }
+  }
+
+  public updateGitlabSelfHostedProvider(): void {
+    if (this.provider) {
+      if (this.serviceType === PolicyComponentServiceType.MGMT) {
+        const req = new MgmtUpdateGitLabSelfHostedProviderRequest();
+        req.setId(this.provider.id);
+        req.setName(this.name?.value);
+        req.setIssuer(this.issuer?.value);
+        req.setClientId(this.clientId?.value);
+        req.setScopesList(this.scopesList?.value);
+        req.setProviderOptions(this.options);
+
+        if (this.updateClientSecret) {
+          req.setClientSecret(this.clientSecret?.value);
+        }
+
+        this.loading = true;
+        (this.service as ManagementService)
+          .updateGitLabSelfHostedProvider(req)
+          .then((idp) => {
+            setTimeout(() => {
+              this.loading = false;
+              this.close();
+            }, 2000);
+          })
+          .catch((error) => {
+            this.toast.showError(error);
+            this.loading = false;
+          });
+      } else if (PolicyComponentServiceType.ADMIN) {
+        const req = new AdminUpdateGitLabSelfHostedProviderRequest();
+        req.setId(this.provider.id);
+        req.setName(this.name?.value);
+        req.setIssuer(this.issuer?.value);
+        req.setClientId(this.clientId?.value);
+        req.setScopesList(this.scopesList?.value);
+        req.setProviderOptions(this.options);
+
+        if (this.updateClientSecret) {
+          req.setClientSecret(this.clientSecret?.value);
+        }
+
+        this.loading = true;
+        (this.service as AdminService)
+          .updateGitLabSelfHostedProvider(req)
+          .then((idp) => {
+            setTimeout(() => {
+              this.loading = false;
+              this.close();
+            }, 2000);
+          })
+          .catch((error) => {
+            this.loading = false;
+            this.toast.showError(error);
+          });
+      }
+    }
+  }
+
+  public close(): void {
+    this._location.back();
+  }
+
+  public addScope(event: MatChipInputEvent): void {
+    const input = event.chipInput?.inputElement;
+    const value = event.value.trim();
+
+    if (value !== '') {
+      if (this.scopesList?.value) {
+        this.scopesList.value.push(value);
+        if (input) {
+          input.value = '';
+        }
+      }
+    }
+  }
+
+  public removeScope(uri: string): void {
+    if (this.scopesList?.value) {
+      const index = this.scopesList.value.indexOf(uri);
+
+      if (index !== undefined && index >= 0) {
+        this.scopesList.value.splice(index, 1);
+      }
+    }
+  }
+
+  public get name(): AbstractControl | null {
+    return this.form.get('name');
+  }
+
+  public get clientId(): AbstractControl | null {
+    return this.form.get('clientId');
+  }
+
+  public get clientSecret(): AbstractControl | null {
+    return this.form.get('clientSecret');
+  }
+
+  public get issuer(): AbstractControl | null {
+    return this.form.get('issuer');
+  }
+
+  public get scopesList(): AbstractControl | null {
+    return this.form.get('scopesList');
+  }
+}

console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.module.ts

@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
+import { MatLegacyProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { InputModule } from 'src/app/modules/input/input.module';
+
+import { CardModule } from '../../card/card.module';
+import { CreateLayoutModule } from '../../create-layout/create-layout.module';
+import { InfoSectionModule } from '../../info-section/info-section.module';
+import { ProviderOptionsModule } from '../../provider-options/provider-options.module';
+import { ProviderGitlabSelfHostedRoutingModule } from './provider-gitlab-self-hosted-routing.module';
+import { ProviderGitlabSelfHostedComponent } from './provider-gitlab-self-hosted.component';
+
+@NgModule({
+  declarations: [ProviderGitlabSelfHostedComponent],
+  imports: [
+    ProviderGitlabSelfHostedRoutingModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    CreateLayoutModule,
+    InfoSectionModule,
+    InputModule,
+    MatButtonModule,
+    MatSelectModule,
+    MatIconModule,
+    MatChipsModule,
+    CardModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+    TranslateModule,
+    ProviderOptionsModule,
+    MatLegacyProgressSpinnerModule,
+  ],
+})
+export default class ProviderGitlabSelfHostedModule {}

console/src/app/modules/providers/provider-gitlab/provider-gitlab-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ProviderGitlabComponent } from './provider-gitlab.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProviderGitlabComponent,
+    data: { animation: 'DetailPage' },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ProviderGitlabRoutingModule {}

console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html

@@ -0,0 +1,93 @@
+<cnsl-create-layout
+  title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
+  (closed)="close()"
+>
+  <div class="gitlab-create-content">
+    <div class="title-row">
+      <img class="idp-logo" src="../../../assets/images/idp/gitlab.svg" alt="gitlab" />
+      <h1>{{ 'IDP.CREATE.GITLAB.TITLE' | translate }}</h1>
+      <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
+    </div>
+
+    <p class="desc cnsl-secondary-text">
+      {{ !provider ? ('IDP.CREATE.GITLAB.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
+    </p>
+
+    <form [formGroup]="form" (ngSubmit)="submitForm()">
+      <div class="gitlab-content">
+        <cnsl-form-field class="formfield">
+          <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
+          <input cnslInput formControlName="clientId" />
+        </cnsl-form-field>
+
+        <mat-checkbox *ngIf="provider" [(ngModel)]="updateClientSecret" [ngModelOptions]="{ standalone: true }">{{
+          'IDP.UPDATECLIENTSECRET' | translate
+        }}</mat-checkbox>
+        <cnsl-form-field *ngIf="!provider || (provider && updateClientSecret)" class="formfield">
+          <cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
+          <input cnslInput formControlName="clientSecret" />
+        </cnsl-form-field>
+
+        <div class="optional-h-wrapper">
+          <h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
+          <button (click)="showOptional = !showOptional" type="button" mat-icon-button>
+            <mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
+            ><mat-icon *ngIf="!showOptional">keyboard_arrow_down</mat-icon>
+          </button>
+        </div>
+        <div *ngIf="showOptional">
+          <div class="idp-scopes">
+            <div class="flex-line">
+              <cnsl-form-field class="formfield">
+                <cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
+
+                <input
+                  cnslInput
+                  [matChipInputFor]="chipScopesList"
+                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                  [matChipInputAddOnBlur]="true"
+                  (matChipInputTokenEnd)="addScope($event)"
+                />
+              </cnsl-form-field>
+              <button class="scope-add-button" (click)="addScope($any($event))" mat-icon-button>
+                <mat-icon>add</mat-icon>
+              </button>
+            </div>
+
+            <cnsl-form-field class="formfield">
+              <mat-chip-list #chipScopesList aria-label="scope selection">
+                <mat-chip
+                  class="chip"
+                  *ngFor="let scope of scopesList?.value"
+                  selectable="false"
+                  removable
+                  (removed)="removeScope(scope)"
+                >
+                  {{ scope }} <mat-icon matChipRemove>cancel</mat-icon>
+                </mat-chip>
+              </mat-chip-list>
+            </cnsl-form-field>
+          </div>
+
+          <cnsl-form-field class="formfield">
+            <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
+            <input cnslInput formControlName="name" />
+            <span class="name-hint cnsl-secondary-text" cnslHint>{{ 'IDP.NAMEHINT' | translate }}</span>
+          </cnsl-form-field>
+
+          <cnsl-provider-options
+            [initialOptions]="provider?.config?.options"
+            (optionsChanged)="options = $event"
+          ></cnsl-provider-options>
+        </div>
+      </div>
+
+      <div class="gitlab-create-actions">
+        <button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" type="submit">
+          <span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
+          <span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>
+        </button>
+      </div>
+    </form>
+  </div>
+</cnsl-create-layout>

console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.scss

@@ -0,0 +1,87 @@
+.desc {
+  font-size: 14px;
+}
+
+.gitlab-create-content {
+  .title-row {
+    display: flex;
+    align-items: center;
+
+    .idp-logo {
+      height: 36px;
+      width: 36px;
+      margin-right: 1rem;
+      flex-shrink: 0;
+    }
+
+    h1 {
+      margin: 0 1rem 0 0;
+    }
+  }
+
+  .formfield {
+    display: block;
+    max-width: 400px;
+
+    .name-hint {
+      font-size: 12px;
+    }
+
+    .mat-chip-input {
+      width: 100%;
+      margin: 0;
+    }
+
+    .chip {
+      border-radius: 0.5rem;
+      height: 40px;
+    }
+
+    @media only screen and (max-width: 450px) {
+      max-width: none;
+    }
+  }
+
+  .gitlab-content {
+    .desc {
+      margin-bottom: 1rem;
+    }
+
+    .idp-scopes {
+      padding-bottom: 0.5rem;
+
+      .flex-line {
+        display: flex;
+        align-items: flex-start;
+        max-width: 400px;
+
+        .formfield {
+          flex: 1;
+        }
+
+        .scope-add-button {
+          margin-top: 1.75rem;
+        }
+      }
+    }
+  }
+}
+
+.gitlab-create-actions {
+  display: flex;
+  margin-top: 1rem;
+
+  button[mat-raised-button] {
+    border-radius: 0.5rem;
+    padding: 0.5rem 4rem;
+  }
+}
+
+.optional-h-wrapper {
+  display: flex;
+  align-items: center;
+
+  h2 {
+    margin-right: 0.25rem;
+  }
+}

console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ProviderGoogleComponent } from './provider-google.component';
+
+describe('ProviderGoogleComponent', () => {
+  let component: ProviderGoogleComponent;
+  let fixture: ComponentFixture<ProviderGoogleComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProviderGoogleComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProviderGoogleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.ts

@@ -0,0 +1,268 @@
+import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
+import { Location } from '@angular/common';
+import { Component, Injector, Type } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
+import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
+import { ActivatedRoute } from '@angular/router';
+import { take } from 'rxjs';
+import {
+  AddGitLabProviderRequest as AdminAddGitLabProviderRequest,
+  GetProviderByIDRequest as AdminGetProviderByIDRequest,
+  UpdateGitLabProviderRequest as AdminUpdateGitLabProviderRequest,
+} from 'src/app/proto/generated/zitadel/admin_pb';
+import { Options, Provider } from 'src/app/proto/generated/zitadel/idp_pb';
+import {
+  AddGitLabProviderRequest as MgmtAddGitLabProviderRequest,
+  GetProviderByIDRequest as MgmtGetProviderByIDRequest,
+  UpdateGitLabProviderRequest as MgmtUpdateGitLabProviderRequest,
+} from 'src/app/proto/generated/zitadel/management_pb';
+import { AdminService } from 'src/app/services/admin.service';
+import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+import { requiredValidator } from '../../form-field/validators/validators';
+
+import { PolicyComponentServiceType } from '../../policies/policy-component-types.enum';
+
+@Component({
+  selector: 'cnsl-provider-gitlab',
+  templateUrl: './provider-gitlab.component.html',
+  styleUrls: ['./provider-gitlab.component.scss'],
+})
+export class ProviderGitlabComponent {
+  public showOptional: boolean = false;
+  public options: Options = new Options();
+  public id: string | null = '';
+  public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
+  private service!: ManagementService | AdminService;
+
+  public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
+
+  public form!: FormGroup;
+
+  public loading: boolean = false;
+
+  public provider?: Provider.AsObject;
+  public updateClientSecret: boolean = false;
+
+  constructor(
+    private route: ActivatedRoute,
+    private toast: ToastService,
+    private injector: Injector,
+    private _location: Location,
+    private breadcrumbService: BreadcrumbService,
+  ) {
+    this.form = new FormGroup({
+      name: new FormControl('', []),
+      clientId: new FormControl('', [requiredValidator]),
+      clientSecret: new FormControl('', [requiredValidator]),
+      scopesList: new FormControl(['openid', 'profile', 'email'], []),
+    });
+
+    this.route.data.pipe(take(1)).subscribe((data) => {
+      this.serviceType = data.serviceType;
+
+      switch (this.serviceType) {
+        case PolicyComponentServiceType.MGMT:
+          this.service = this.injector.get(ManagementService as Type<ManagementService>);
+
+          const bread: Breadcrumb = {
+            type: BreadcrumbType.ORG,
+            routerLink: ['/org'],
+          };
+
+          this.breadcrumbService.setBreadcrumb([bread]);
+          break;
+        case PolicyComponentServiceType.ADMIN:
+          this.service = this.injector.get(AdminService as Type<AdminService>);
+
+          const iamBread = new Breadcrumb({
+            type: BreadcrumbType.ORG,
+            name: 'Instance',
+            routerLink: ['/instance'],
+          });
+          this.breadcrumbService.setBreadcrumb([iamBread]);
+          break;
+      }
+
+      this.id = this.route.snapshot.paramMap.get('id');
+      if (this.id) {
+        this.clientSecret?.setValidators([]);
+        this.getData(this.id);
+      }
+    });
+  }
+
+  private getData(id: string): void {
+    const req =
+      this.serviceType === PolicyComponentServiceType.ADMIN
+        ? new AdminGetProviderByIDRequest()
+        : new MgmtGetProviderByIDRequest();
+    req.setId(id);
+    this.service
+      .getProviderByID(req)
+      .then((resp) => {
+        this.provider = resp.idp;
+        this.loading = false;
+        if (this.provider?.config?.gitlab) {
+          this.form.patchValue(this.provider.config.gitlab);
+          this.name?.setValue(this.provider.name);
+        }
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+        this.loading = false;
+      });
+  }
+
+  public submitForm(): void {
+    this.provider ? this.updateGitlabProvider() : this.addGitlabProvider();
+  }
+
+  public addGitlabProvider(): void {
+    if (this.serviceType === PolicyComponentServiceType.MGMT) {
+      const req = new MgmtAddGitLabProviderRequest();
+
+      req.setName(this.name?.value);
+      req.setClientId(this.clientId?.value);
+      req.setClientSecret(this.clientSecret?.value);
+      req.setScopesList(this.scopesList?.value);
+      req.setProviderOptions(this.options);
+
+      this.loading = true;
+      (this.service as ManagementService)
+        .addGitLabProvider(req)
+        .then((idp) => {
+          setTimeout(() => {
+            this.loading = false;
+            this.close();
+          }, 2000);
+        })
+        .catch((error) => {
+          this.toast.showError(error);
+          this.loading = false;
+        });
+    } else if (PolicyComponentServiceType.ADMIN) {
+      const req = new AdminAddGitLabProviderRequest();
+      req.setName(this.name?.value);
+      req.setClientId(this.clientId?.value);
+      req.setClientSecret(this.clientSecret?.value);
+      req.setScopesList(this.scopesList?.value);
+      req.setProviderOptions(this.options);
+
+      this.loading = true;
+      (this.service as AdminService)
+        .addGitLabProvider(req)
+        .then((idp) => {
+          setTimeout(() => {
+            this.loading = false;
+            this.close();
+          }, 2000);
+        })
+        .catch((error) => {
+          this.loading = false;
+          this.toast.showError(error);
+        });
+    }
+  }
+
+  public updateGitlabProvider(): void {
+    if (this.provider) {
+      if (this.serviceType === PolicyComponentServiceType.MGMT) {
+        const req = new MgmtUpdateGitLabProviderRequest();
+        req.setId(this.provider.id);
+        req.setName(this.name?.value);
+        req.setClientId(this.clientId?.value);
+        req.setScopesList(this.scopesList?.value);
+        req.setProviderOptions(this.options);
+
+        if (this.updateClientSecret) {
+          req.setClientSecret(this.clientSecret?.value);
+        }
+
+        this.loading = true;
+        (this.service as ManagementService)
+          .updateGitLabProvider(req)
+          .then((idp) => {
+            setTimeout(() => {
+              this.loading = false;
+              this.close();
+            }, 2000);
+          })
+          .catch((error) => {
+            this.toast.showError(error);
+            this.loading = false;
+          });
+      } else if (PolicyComponentServiceType.ADMIN) {
+        const req = new AdminUpdateGitLabProviderRequest();
+        req.setId(this.provider.id);
+        req.setName(this.name?.value);
+        req.setClientId(this.clientId?.value);
+        req.setScopesList(this.scopesList?.value);
+        req.setProviderOptions(this.options);
+
+        if (this.updateClientSecret) {
+          req.setClientSecret(this.clientSecret?.value);
+        }
+
+        this.loading = true;
+        (this.service as AdminService)
+          .updateGoogleProvider(req)
+          .then((idp) => {
+            setTimeout(() => {
+              this.loading = false;
+              this.close();
+            }, 2000);
+          })
+          .catch((error) => {
+            this.loading = false;
+            this.toast.showError(error);
+          });
+      }
+    }
+  }
+
+  public close(): void {
+    this._location.back();
+  }
+
+  public addScope(event: MatChipInputEvent): void {
+    const input = event.chipInput?.inputElement;
+    const value = event.value.trim();
+
+    if (value !== '') {
+      if (this.scopesList?.value) {
+        this.scopesList.value.push(value);
+        if (input) {
+          input.value = '';
+        }
+      }
+    }
+  }
+
+  public removeScope(uri: string): void {
+    if (this.scopesList?.value) {
+      const index = this.scopesList.value.indexOf(uri);
+
+      if (index !== undefined && index >= 0) {
+        this.scopesList.value.splice(index, 1);
+      }
+    }
+  }
+
+  public get name(): AbstractControl | null {
+    return this.form.get('name');
+  }
+
+  public get clientId(): AbstractControl | null {
+    return this.form.get('clientId');
+  }
+
+  public get clientSecret(): AbstractControl | null {
+    return this.form.get('clientSecret');
+  }
+
+  public get scopesList(): AbstractControl | null {
+    return this.form.get('scopesList');
+  }
+}

console/src/app/modules/providers/provider-gitlab/provider-gitlab.module.ts

@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
+import { MatLegacyProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { InputModule } from 'src/app/modules/input/input.module';
+
+import { CardModule } from '../../card/card.module';
+import { CreateLayoutModule } from '../../create-layout/create-layout.module';
+import { InfoSectionModule } from '../../info-section/info-section.module';
+import { ProviderOptionsModule } from '../../provider-options/provider-options.module';
+import { ProviderGitlabRoutingModule } from './provider-gitlab-routing.module';
+import { ProviderGitlabComponent } from './provider-gitlab.component';
+
+@NgModule({
+  declarations: [ProviderGitlabComponent],
+  imports: [
+    ProviderGitlabRoutingModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    CreateLayoutModule,
+    InfoSectionModule,
+    InputModule,
+    MatButtonModule,
+    MatSelectModule,
+    MatIconModule,
+    MatChipsModule,
+    CardModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+    TranslateModule,
+    ProviderOptionsModule,
+    MatLegacyProgressSpinnerModule,
+  ],
+})
+export default class ProviderGitlabModule {}

console/src/app/pages/instance/instance-routing.module.ts

@@ -96,6 +96,34 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: 'gitlab',
+        children: [
+          {
+            path: 'create',
+            loadChildren: () => import('src/app/modules/providers/provider-gitlab/provider-gitlab.module'),
+          },
+          {
+            path: ':id',
+            loadChildren: () => import('src/app/modules/providers/provider-gitlab/provider-gitlab.module'),
+          },
+        ],
+      },
+      {
+        path: 'gitlab-self-hosted',
+        children: [
+          {
+            path: 'create',
+            loadChildren: () =>
+              import('src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.module'),
+          },
+          {
+            path: ':id',
+            loadChildren: () =>
+              import('src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.module'),
+          },
+        ],
+      },
       {
         path: 'github',
         children: [

console/src/app/pages/orgs/org-routing.module.ts

@@ -84,6 +84,34 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: 'gitlab',
+        children: [
+          {
+            path: 'create',
+            loadChildren: () => import('src/app/modules/providers/provider-gitlab/provider-gitlab.module'),
+          },
+          {
+            path: ':id',
+            loadChildren: () => import('src/app/modules/providers/provider-gitlab/provider-gitlab.module'),
+          },
+        ],
+      },
+      {
+        path: 'gitlab-self-hosted',
+        children: [
+          {
+            path: 'create',
+            loadChildren: () =>
+              import('src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.module'),
+          },
+          {
+            path: ':id',
+            loadChildren: () =>
+              import('src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.module'),
+          },
+        ],
+      },
       {
         path: 'github',
         children: [

console/src/app/services/admin.service.ts

@@ -16,6 +16,10 @@ import {
   AddGitHubEnterpriseServerProviderResponse,
   AddGitHubProviderRequest,
   AddGitHubProviderResponse,
+  AddGitLabProviderRequest,
+  AddGitLabProviderResponse,
+  AddGitLabSelfHostedProviderRequest,
+  AddGitLabSelfHostedProviderResponse,
   AddGoogleProviderRequest,
   AddGoogleProviderResponse,
   AddIAMMemberRequest,
@@ -208,6 +212,10 @@ import {
   UpdateGitHubEnterpriseServerProviderResponse,
   UpdateGitHubProviderRequest,
   UpdateGitHubProviderResponse,
+  UpdateGitLabProviderRequest,
+  UpdateGitLabProviderResponse,
+  UpdateGitLabSelfHostedProviderRequest,
+  UpdateGitLabSelfHostedProviderResponse,
   UpdateGoogleProviderRequest,
   UpdateGoogleProviderResponse,
   UpdateIAMMemberRequest,
@@ -914,6 +922,26 @@ export class AdminService {
     return this.grpcService.admin.updateGoogleProvider(req, null).then((resp) => resp.toObject());
   }
 
+  public addGitLabProvider(req: AddGitLabProviderRequest): Promise<AddGitLabProviderResponse.AsObject> {
+    return this.grpcService.admin.addGitLabProvider(req, null).then((resp) => resp.toObject());
+  }
+
+  public updateGitLabProvider(req: UpdateGitLabProviderRequest): Promise<UpdateGitLabProviderResponse.AsObject> {
+    return this.grpcService.admin.updateGitLabProvider(req, null).then((resp) => resp.toObject());
+  }
+
+  public addGitLabSelfHostedProvider(
+    req: AddGitLabSelfHostedProviderRequest,
+  ): Promise<AddGitLabSelfHostedProviderResponse.AsObject> {
+    return this.grpcService.admin.addGitLabSelfHostedProvider(req, null).then((resp) => resp.toObject());
+  }
+
+  public updateGitLabSelfHostedProvider(
+    req: UpdateGitLabSelfHostedProviderRequest,
+  ): Promise<UpdateGitLabSelfHostedProviderResponse.AsObject> {
+    return this.grpcService.admin.updateGitLabSelfHostedProvider(req, null).then((resp) => resp.toObject());
+  }
+
   public addGitHubProvider(req: AddGitHubProviderRequest): Promise<AddGitHubProviderResponse.AsObject> {
     return this.grpcService.admin.addGitHubProvider(req, null).then((resp) => resp.toObject());
   }

console/src/app/services/mgmt.service.ts

@@ -37,6 +37,10 @@ import {
   AddGitHubEnterpriseServerProviderResponse,
   AddGitHubProviderRequest,
   AddGitHubProviderResponse,
+  AddGitLabProviderRequest,
+  AddGitLabProviderResponse,
+  AddGitLabSelfHostedProviderRequest,
+  AddGitLabSelfHostedProviderResponse,
   AddGoogleProviderRequest,
   AddGoogleProviderResponse,
   AddHumanUserRequest,
@@ -441,6 +445,10 @@ import {
   UpdateGitHubEnterpriseServerProviderResponse,
   UpdateGitHubProviderRequest,
   UpdateGitHubProviderResponse,
+  UpdateGitLabProviderRequest,
+  UpdateGitLabProviderResponse,
+  UpdateGitLabSelfHostedProviderRequest,
+  UpdateGitLabSelfHostedProviderResponse,
   UpdateGoogleProviderRequest,
   UpdateGoogleProviderResponse,
   UpdateHumanEmailRequest,
@@ -873,6 +881,26 @@ export class ManagementService {
     return this.grpcService.mgmt.updateGoogleProvider(req, null).then((resp) => resp.toObject());
   }
 
+  public addGitLabProvider(req: AddGitLabProviderRequest): Promise<AddGitLabProviderResponse.AsObject> {
+    return this.grpcService.mgmt.addGitLabProvider(req, null).then((resp) => resp.toObject());
+  }
+
+  public updateGitLabProvider(req: UpdateGitLabProviderRequest): Promise<UpdateGitLabProviderResponse.AsObject> {
+    return this.grpcService.mgmt.updateGitLabProvider(req, null).then((resp) => resp.toObject());
+  }
+
+  public addGitLabSelfHostedProvider(
+    req: AddGitLabSelfHostedProviderRequest,
+  ): Promise<AddGitLabSelfHostedProviderResponse.AsObject> {
+    return this.grpcService.mgmt.addGitLabSelfHostedProvider(req, null).then((resp) => resp.toObject());
+  }
+
+  public updateGitLabSelfHostedProvider(
+    req: UpdateGitLabSelfHostedProviderRequest,
+  ): Promise<UpdateGitLabSelfHostedProviderResponse.AsObject> {
+    return this.grpcService.mgmt.updateGitLabSelfHostedProvider(req, null).then((resp) => resp.toObject());
+  }
+
   public addGitHubProvider(req: AddGitHubProviderRequest): Promise<AddGitHubProviderResponse.AsObject> {
     return this.grpcService.mgmt.addGitHubProvider(req, null).then((resp) => resp.toObject());
   }

console/src/assets/i18n/de.json

@@ -1627,6 +1627,14 @@
         "TITLE": "Google Provider",
         "DESCRIPTION": "Geben Sie die erforderlichen Daten für Ihren Google-Identitätsprovider ein."
       },
+      "GITLAB": {
+        "TITLE": "Gitlab Provider",
+        "DESCRIPTION": "Geben Sie die erforderlichen Daten für Ihren Gitlab Self Hosted Identitätsprovider ein."
+      },
+      "GITLABSELFHOSTED": {
+        "TITLE": "Gitlab Self hosted Provider",
+        "DESCRIPTION": "Geben Sie die erforderlichen Daten für Ihren Gitlab Self Hosted Identitätsprovider ein."
+      },
       "GITHUBES": {
         "TITLE": "GitHub Enterprise Server Provider",
         "DESCRIPTION": "Geben Sie die erforderlichen Daten für Ihren GitHub Enterprise Server ein."

console/src/assets/i18n/en.json

@@ -1632,6 +1632,14 @@
         "TITLE": "Google Provider",
         "DESCRIPTION": "Enter the credentials for your Google Identity Provider"
       },
+      "GITLAB": {
+        "TITLE": "Gitlab Provider",
+        "DESCRIPTION": "Enter the credentials for your Gitlab Identity Provider"
+      },
+      "GITLABSELFHOSTED": {
+        "TITLE": "Gitlab Self Hosted Provider",
+        "DESCRIPTION": "Enter the credentials for your Gitlab Self Hosted Identity Provider"
+      },
       "GITHUBES": {
         "TITLE": "GitHub Enterprise Server Provider",
         "DESCRIPTION": "Enter the credentials for your GitHub Enterprise Server Identity Provider"

console/src/assets/i18n/fr.json

@@ -1631,6 +1631,14 @@
         "TITLE": "Fournisseur Google",
         "DESCRIPTION": "Saisissez les informations d'identification de votre fournisseur d'identité Google"
       },
+      "GITLAB": {
+        "TITLE": "Fournisseur Gitlab",
+        "DESCRIPTION": "Saisissez les informations d'identification de votre fournisseur d'identité Gitlab"
+      },
+      "GITLABSELFHOSTED": {
+        "TITLE": "Fournisseur Gitlab Self Hosted",
+        "DESCRIPTION": "Saisissez les informations d'identification de votre fournisseur d'identité Gitlab Self Hosted"
+      },
       "GITHUBES": {
         "TITLE": "Fournisseur GitHub Enterprise Server",
         "DESCRIPTION": "Saisissez les informations d'identification de votre fournisseur d'identité GitHub Enterprise Server"

console/src/assets/i18n/it.json

@@ -1632,6 +1632,14 @@
         "TITLE": "Google Provider",
         "DESCRIPTION": "Inserisci i dati necessari per il tuo Google provider."
       },
+      "GITLAB": {
+        "TITLE": "Gitlab Provider",
+        "DESCRIPTION": "Inserisci i dati necessari per il tuo Gitlab provider."
+      },
+      "GITLABSELFHOSTED": {
+        "TITLE": "Gitlab Self Hosted Provider",
+        "DESCRIPTION": "Inserisci i dati necessari per il tuo Gitlab Self Hosted provider."
+      },
       "GITHUBES": {
         "TITLE": "GitHub Enterprise Server Provider",
         "DESCRIPTION": "Inserisci i dati necessari per il tuo GitHub Enterprise Server provider."

console/src/assets/i18n/pl.json

@@ -1631,6 +1631,14 @@
         "TITLE": "Google Provider",
         "DESCRIPTION": "Wprowadź dane dla swojego dostawcy tożsamości Google"
       },
+      "GITLAB": {
+        "TITLE": "Gitlab Provider",
+        "DESCRIPTION": "Wprowadź dane dla swojego dostawcy tożsamości Gitlab"
+      },
+      "GITLABSELFHOSTED": {
+        "TITLE": "Gitlab Self Hosted Provider",
+        "DESCRIPTION": "Wprowadź dane dla swojego dostawcy tożsamości Gitlab Self Hosted"
+      },
       "GITHUBES": {
         "TITLE": "GitHub Enterprise Server Provider",
         "DESCRIPTION": "Wprowadź dane dla swojego dostawcy tożsamości GitHub Enterprise Server"

console/src/assets/i18n/zh.json

@@ -1630,6 +1630,14 @@
         "TITLE": "Google 身份提供者",
         "DESCRIPTION": "输入您的 Google 身份提供商的凭据"
       },
+      "GITLAB": {
+        "TITLE": "Gitlab身份提供商",
+        "DESCRIPTION": "输入您的Gitlab身份提供者的凭据"
+      },
+      "GITLABSELFHOSTED": {
+        "TITLE": "Gitlab自我托管供应商",
+        "DESCRIPTION": "输入您的Gitlab自我托管身份提供商的凭据"
+      },
       "GITHUBES": {
         "TITLE": "Github Enterprise Server 身份提供者",
         "DESCRIPTION": "输入您的GitHubEnterpriseServer身份提供者的凭据"