feat(console): Google, Generic OIDC, Generic JWT - Identity provider templates (#5265)

implement Google, Generic OIDC, Generic JWT provider templates in console

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

@@ -3,3 +3,86 @@
 <div class="cnsl-idp-table-wrapper">
   <cnsl-idp-table [service]="service" [serviceType]="serviceType"></cnsl-idp-table>
 </div>
+
+<h2>{{ 'IDP.CREATE.TITLE' | translate }}</h2>
+<p class="cnsl-secondary-text">{{ 'IDP.CREATE.DESCRIPTION' | translate }}</p>
+
+<div class="new-idp-wrapper">
+  <a
+    class="item card"
+    [routerLink]="
+      serviceType === PolicyComponentServiceType.ADMIN
+        ? ['/instance', 'provider', 'google', 'create']
+        : serviceType === PolicyComponentServiceType.MGMT
+        ? ['/org', 'provider', 'google', 'create']
+        : []
+    "
+  >
+    <img class="idp-logo" src="../../../assets/images/idp/google.png" alt="google" />
+    <div class="text-container">
+      <span class="title">Google</span>
+    </div>
+  </a>
+
+  <div class="item card coming-soon" matRipple>
+    <span class="state coming-soon-label">{{ 'ACTIONS.COMINGSOON' | translate }}</span>
+    <img class="idp-logo" src="../../../assets/images/idp/ms.svg" alt="microsoft" />
+    <div class="text-container">
+      <span class="title">Microsoft</span>
+    </div>
+  </div>
+
+  <div class="item card coming-soon" matRipple>
+    <span class="state coming-soon-label">{{ 'ACTIONS.COMINGSOON' | translate }}</span>
+    <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" />
+
+    <div class="text-container">
+      <span class="title">GitHub</span>
+    </div>
+  </div>
+
+  <div class="item card coming-soon" matRipple>
+    <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>
+  </div>
+
+  <a
+    class="item card"
+    [routerLink]="
+      serviceType === PolicyComponentServiceType.ADMIN
+        ? ['/instance', 'provider', 'oidc', 'create']
+        : serviceType === PolicyComponentServiceType.MGMT
+        ? ['/org', 'provider', 'oidc', 'create']
+        : []
+    "
+  >
+    <div class="idp-icon">
+      <mat-icon class="icon" svgIcon="mdi_openid" alt="openid" />
+    </div>
+    <div class="text-container">
+      <span class="title">Generic OIDC</span>
+    </div>
+  </a>
+
+  <a
+    class="item card"
+    [routerLink]="
+      serviceType === PolicyComponentServiceType.ADMIN
+        ? ['/instance', 'provider', 'jwt', 'create']
+        : serviceType === PolicyComponentServiceType.MGMT
+        ? ['/org', 'provider', 'jwt', 'create']
+        : []
+    "
+  >
+    <div class="idp-icon">
+      <mat-icon class="icon" svgIcon="mdi_jwt" alt="jwt" />
+    </div>
+    <div class="text-container">
+      <span class="title">Generic JWT</span>
+    </div>
+  </a>
+</div>

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

@@ -1,3 +1,109 @@
-.cnsl-idp-table-wrapper {
-  display: block;
+@use '@angular/material' as mat;
+
+@mixin idp-settings-theme($theme) {
+  $primary: map-get($theme, primary);
+  $primary-color: mat.get-color-from-palette($primary, 500);
+  $is-dark-theme: map-get($theme, is-dark);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .cnsl-idp-table-wrapper {
+    display: block;
+  }
+
+  .new-idp-wrapper {
+    display: grid;
+    row-gap: 1.5rem;
+    column-gap: 1.5rem;
+    box-sizing: border-box;
+    width: 100%;
+    grid-template-columns: 1fr;
+
+    @media only screen and (min-width: 700px) {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    @media only screen and (min-width: 1000px) {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    @media only screen and (min-width: 1300px) {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    .item {
+      position: relative;
+      z-index: 100;
+      display: flex;
+      text-decoration: none;
+      cursor: pointer;
+      padding-top: 1rem;
+      padding-right: 1rem;
+      padding-bottom: 1rem;
+      padding-left: 1rem;
+      border-radius: 0.5rem;
+      box-sizing: border-box;
+      transition: box-shadow 0.1s ease-in;
+      align-items: center;
+      color: map-get($foreground, text);
+
+      .coming-soon-label {
+        position: absolute;
+        top: 0;
+        right: 1rem;
+        transform: translateY(-50%);
+        width: fit-content;
+      }
+
+      &:hover {
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
+      }
+
+      .idp-logo {
+        margin-right: 1rem;
+        height: 36px;
+        width: 36px;
+
+        &.dark {
+          display: if($is-dark-theme, block, none);
+        }
+
+        &.light {
+          display: if($is-dark-theme, none, block);
+        }
+      }
+
+      .idp-icon {
+        margin-right: 1rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 36px;
+        width: 36px;
+
+        .icon {
+          font-size: 2.25rem;
+          height: 2.25rem;
+          width: 2.25rem;
+        }
+      }
+
+      .text-container {
+        display: flex;
+        flex-direction: column;
+
+        .title {
+        }
+      }
+
+      &.coming-soon {
+        filter: grayscale(1);
+        cursor: not-allowed;
+
+        &:hover {
+          box-shadow: none;
+        }
+      }
+    }
+  }
 }

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

@@ -26,4 +26,6 @@ export class IdpSettingsComponent implements OnInit {
         break;
     }
   }
+
+  public createGoogle() {}
 }

console/src/app/modules/policies/idp-settings/idp-settings.module.ts

@@ -1,7 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatLegacyButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 
 import { CardModule } from '../../card/card.module';
 import { IdpTableModule } from '../../idp-table/idp-table.module';
@@ -9,7 +13,17 @@ import { IdpSettingsComponent } from './idp-settings.component';
 
 @NgModule({
   declarations: [IdpSettingsComponent],
-  imports: [CommonModule, CardModule, IdpTableModule, MatProgressSpinnerModule, TranslateModule],
+  imports: [
+    CommonModule,
+    MatLegacyButtonModule,
+    CardModule,
+    MatIconModule,
+    IdpTableModule,
+    RouterModule,
+    HasRolePipeModule,
+    MatProgressSpinnerModule,
+    TranslateModule,
+  ],
   exports: [IdpSettingsComponent],
 })
 export class IdpSettingsModule {}