[SM-453] user onboarding component (#4707)

* wip onboarding component

* fix button type

* remove dismiss button

* add completion logic

* update styles; add download cli section; add click logic; add loading spinner

* update i18n

* update icons; rearrange items; fix import item logic

* add complete i18n

* fix reactivity

* move visibility logic into presentational component

* add button type

* apply code reviews

* add loading spinner to page

* onboarding dismissal should persist when switching orgs

* add workaround for inconsistent icon size

* fix full storybook

* apply code review; update stories

bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html

@@ -1,37 +1,68 @@
 <sm-header [title]="organizationName">
   <sm-new-menu></sm-new-menu>
 </sm-header>
-<div
-  *ngIf="view$ | async as view; else spinner"
-  class="tw-flex tw-flex-col tw-gap-6 [&_sm-header]:tw-hidden"
->
-  <sm-section>
-    <h2 slot="summary" class="tw-mb-0 tw-text-2xl tw-font-semibold">{{ "projects" | i18n }}</h2>
-    <sm-projects-list
-      (newProjectEvent)="openNewProjectDialog()"
-      (editProjectEvent)="openEditProject($event)"
-      (deleteProjectEvent)="openDeleteProjectDialog($event)"
-      [projects]="view.latestProjects"
-    ></sm-projects-list>
-    <div *ngIf="view.allProjects.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
-      {{ "showingPortionOfTotal" | i18n: view.latestProjects.length:view.allProjects.length }}
-      <a bitLink routerLink="projects" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
-    </div>
-  </sm-section>
-  <sm-section>
-    <h2 slot="summary" class="tw-mb-0 tw-text-2xl tw-font-semibold">{{ "secrets" | i18n }}</h2>
-    <sm-secrets-list
-      baseRoute="secrets"
-      (deleteSecretsEvent)="openDeleteSecret($event)"
-      (newSecretEvent)="openNewSecretDialog()"
-      (editSecretEvent)="openEditSecret($event)"
-      [secrets]="view.latestSecrets"
-    ></sm-secrets-list>
-    <div *ngIf="view.allSecrets.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
-      {{ "showingPortionOfTotal" | i18n: view.latestSecrets.length:view.allSecrets.length }}
-      <a bitLink routerLink="secrets" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
-    </div>
-  </sm-section>
+
+<div *ngIf="view$ | async as view; else spinner">
+  <sm-onboarding [title]="'getStarted' | i18n">
+    <sm-onboarding-task
+      [title]="'createServiceAccount' | i18n"
+      (click)="openServiceAccountDialog()"
+      icon="bwi-cli"
+      [completed]="view.tasks.createServiceAccount"
+    >
+      <span>
+        {{ "downloadThe" | i18n }} <a bitLink routerLink="">{{ "smCLI" | i18n }}</a>
+      </span>
+    </sm-onboarding-task>
+    <sm-onboarding-task
+      [title]="'importSecrets' | i18n"
+      [route]="['settings', 'import']"
+      icon="bwi-download"
+      [completed]="view.tasks.importSecrets"
+    ></sm-onboarding-task>
+    <sm-onboarding-task
+      [title]="'createSecret' | i18n"
+      (click)="openSecretDialog()"
+      icon="bwi-key"
+      [completed]="view.tasks.createSecret"
+    ></sm-onboarding-task>
+    <sm-onboarding-task
+      [title]="'createProject' | i18n"
+      (click)="openNewProjectDialog()"
+      icon="bwi-collection"
+      [completed]="view.tasks.createProject"
+    ></sm-onboarding-task>
+  </sm-onboarding>
+
+  <div class="tw-mt-6 tw-flex tw-flex-col tw-gap-6">
+    <sm-section>
+      <h2 slot="summary" class="tw-mb-0 tw-text-2xl tw-font-semibold">{{ "projects" | i18n }}</h2>
+      <sm-projects-list
+        (newProjectEvent)="openNewProjectDialog()"
+        (editProjectEvent)="openEditProject($event)"
+        (deleteProjectEvent)="openDeleteProjectDialog($event)"
+        [projects]="view.latestProjects"
+      ></sm-projects-list>
+      <div *ngIf="view.allProjects.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
+        {{ "showingPortionOfTotal" | i18n: view.latestProjects.length:view.allProjects.length }}
+        <a bitLink routerLink="projects" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
+      </div>
+    </sm-section>
+    <sm-section>
+      <h2 slot="summary" class="tw-mb-0 tw-text-2xl tw-font-semibold">{{ "secrets" | i18n }}</h2>
+      <sm-secrets-list
+        baseRoute="secrets"
+        (deleteSecretsEvent)="openDeleteSecret($event)"
+        (newSecretEvent)="openNewSecretDialog()"
+        (editSecretEvent)="openEditSecret($event)"
+        [secrets]="view.latestSecrets"
+      ></sm-secrets-list>
+      <div *ngIf="view.allSecrets.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
+        {{ "showingPortionOfTotal" | i18n: view.latestSecrets.length:view.allSecrets.length }}
+        <a bitLink routerLink="secrets" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
+      </div>
+    </sm-section>
+  </div>
 </div>
 
 <ng-template #spinner>