feat(console): guide users when configuring IDPs (#7572)

* feat(console): show external idp remote config

* reuse copy-row

* finish google and saml sp

* finish apps

* add next steps modal

* rollout

* activate

* fix saml urls

* fix saml provider

* complete providers

* translate

* update google docs

* update entra id oidc docs

* update entra id saml docs

* update github docs

* update gitlab docs

* update apple docs

* update okta oidc docs

* update okta saml docs

* update keycloak docs

* update mocksaml

* cleanup

* lint

* lint

* fix overriden classes

* encapsulate styles

* fix icon classes

---------

Co-authored-by: peintnermax <[email protected]>

console/src/app/components/copy-row/copy-row.component.html

@@ -0,0 +1,16 @@
+<div class="cnsl-cr-row">
+  <div class="cnsl-cr-secondary-text" [ngStyle]="{ minWidth: labelMinWidth }">{{ label }}</div>
+  <button
+    class="cnsl-cr-copy"
+    [disabled]="copied === value"
+    [matTooltip]="(copied !== value ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
+    cnslCopyToClipboard
+    [valueToCopy]="value"
+    (copiedValue)="copied = $event"
+  >
+    {{ value }}
+  </button>
+  <div class="cnsl-cr-item">
+    <ng-content></ng-content>
+  </div>
+</div>

console/src/app/components/copy-row/copy-row.component.scss

@@ -0,0 +1,41 @@
+.cnsl-cr-row {
+  display: flex;
+  align-items: center;
+  .cnsl-cr-right {
+    flex-shrink: 0;
+  }
+}
+
+@mixin copy-row-theme($theme) {
+  $is-dark-theme: map-get($theme, is-dark);
+  $foreground: map-get($theme, foreground);
+  $button-text-color: map-get($foreground, text);
+  $button-disabled-text-color: map-get($foreground, disabled-button);
+
+  .cnsl-cr-copy {
+    flex-grow: 1;
+    text-align: left;
+    transition: opacity 0.15s ease-in-out;
+    background-color: #8795a110;
+    border: 1px solid #8795a160;
+    border-radius: 4px;
+    padding: 0.25rem 1rem;
+    margin: 0.25rem 0rem;
+    color: $button-text-color;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: copy;
+
+    &[disabled] {
+      color: $button-disabled-text-color;
+    }
+  }
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  .right {
+    flex-shrink: 0;
+  }
+}

console/src/app/components/copy-row/copy-row.component.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { CopyToClipboardModule } from '../../directives/copy-to-clipboard/copy-to-clipboard.module';
+
+@Component({
+  standalone: true,
+  selector: 'cnsl-copy-row',
+  templateUrl: './copy-row.component.html',
+  styleUrls: ['./copy-row.component.scss'],
+  imports: [CommonModule, TranslateModule, MatButtonModule, MatTooltipModule, CopyToClipboardModule],
+})
+export class CopyRowComponent {
+  @Input({ required: true }) public label = '';
+  @Input({ required: true }) public value = '';
+  @Input() public labelMinWidth = '';
+
+  public copied = '';
+}