feat(console): onboarding flow (#5225)

Implements an onboarding UI for users

console/src/app/pages/instance-settings/instance-settings.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { take } from 'rxjs';
+import { Subject, takeUntil } from 'rxjs';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
 import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
@@ -27,7 +27,7 @@ import {
   templateUrl: './instance-settings.component.html',
   styleUrls: ['./instance-settings.component.scss'],
 })
-export class InstanceSettingsComponent {
+export class InstanceSettingsComponent implements OnDestroy {
   public id: string = '';
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
   public settingsList: SidenavSetting[] = [
@@ -52,6 +52,8 @@ export class InstanceSettingsComponent {
     SECRETS,
     SECURITY,
   ];
+
+  private destroy$: Subject<void> = new Subject();
   constructor(breadcrumbService: BreadcrumbService, activatedRoute: ActivatedRoute) {
     const breadcrumbs = [
       new Breadcrumb({
@@ -62,11 +64,16 @@ export class InstanceSettingsComponent {
     ];
     breadcrumbService.setBreadcrumb(breadcrumbs);
 
-    activatedRoute.queryParams.pipe(take(1)).subscribe((params: Params) => {
+    activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params: Params) => {
       const { id } = params;
       if (id) {
         this.id = id;
       }
     });
   }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }