[SM-613] Misc Onboarding UX fixes (#4953)

* make dismiss always visible

* reorder tasks; hide create secret task if no projects

* update stories

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

@@ -18,13 +18,7 @@
     <ng-content></ng-content>
   </ul>
   <div class="tw-p-4 tw-pt-0">
-    <button
+    <button bitLink type="button" class="tw-ml-auto tw-block" (click)="dismiss.emit()">
-      bitLink
-      type="button"
-      class="tw-ml-auto tw-block"
-      [ngClass]="{ 'tw-invisible': !isComplete }"
-      (click)="dismiss.emit()"
-    >
       {{ "dismiss" | i18n }}
     </button>
   </div>

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

@@ -23,10 +23,6 @@ export class OnboardingComponent {
     return this.tasks.length === 0 ? 0 : (this.amountCompleted / this.tasks.length) * 100;
   }
 
-  protected get isComplete(): boolean {
-    return this.tasks.length > 0 && this.tasks.length === this.amountCompleted;
-  }
-
   protected toggle() {
     this.open = !this.open;
   }

bitwarden_license/bit-web/src/app/secrets-manager/overview/onboarding.stories.ts

@@ -54,6 +54,11 @@ const Template: Story = (args) => ({
           {{ "downloadThe" | i18n }} <a bitLink routerLink="">{{ "smCLI" | i18n }}</a>
         </span>
       </sm-onboarding-task>
+      <sm-onboarding-task
+        [title]="'createProject' | i18n"
+        icon="bwi-collection"
+        [completed]="createProject"
+      ></sm-onboarding-task>
       <sm-onboarding-task
         [title]="'importSecrets' | i18n"
         icon="bwi-download"
@@ -64,11 +69,6 @@ const Template: Story = (args) => ({
         icon="bwi-key"
         [completed]="createSecret"
       ></sm-onboarding-task>
-      <sm-onboarding-task
-        [title]="'createProject' | i18n"
-        icon="bwi-collection"
-        [completed]="createProject"
-      ></sm-onboarding-task>
     </sm-onboarding>
   `,
 });

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

@@ -14,6 +14,13 @@
         {{ "downloadThe" | i18n }} <a bitLink routerLink="">{{ "smCLI" | i18n }}</a>
       </span>
     </sm-onboarding-task>
+    <sm-onboarding-task
+      *ngIf="userIsAdmin"
+      [title]="'createProject' | i18n"
+      (click)="openNewProjectDialog()"
+      icon="bwi-collection"
+      [completed]="view.tasks.createProject"
+    ></sm-onboarding-task>
     <sm-onboarding-task
       *ngIf="userIsAdmin"
       [title]="'importSecrets' | i18n"
@@ -22,18 +29,12 @@
       [completed]="view.tasks.importSecrets"
     ></sm-onboarding-task>
     <sm-onboarding-task
+      *ngIf="view.tasks.createProject"
       [title]="'createSecret' | i18n"
       (click)="openSecretDialog()"
       icon="bwi-key"
       [completed]="view.tasks.createSecret"
     ></sm-onboarding-task>
-    <sm-onboarding-task
-      *ngIf="userIsAdmin"
-      [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">

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

@@ -91,6 +91,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
+    this.stateService.setSMOnboardingTasks(null);
     const orgId$ = this.route.params.pipe(
       map((p) => p.organizationId),
       distinctUntilChanged()
@@ -297,5 +298,11 @@ export class OverviewComponent implements OnInit, OnDestroy {
 
   protected hideOnboarding() {
     this.showOnboarding = false;
+    this.saveCompletedTasks(this.organizationId, {
+      importSecrets: true,
+      createSecret: true,
+      createProject: true,
+      createServiceAccount: true,
+    });
   }
 }