From 0cd6efd67f11dfd9f831dee4799553a1bee9fc5c Mon Sep 17 00:00:00 2001
From: Matt Gibson <mgibson@bitwarden.com>
Date: Thu, 17 Dec 2020 11:06:31 -0600
Subject: [PATCH] Move share from edit to view. Fix animations (#1497)

* Move share from edit to view. Fix animations

Editing and Sharing a cipher simultaneously results in lost edits. Move
share button to the view page to resolve this confusion.

Previous routing caused the share form to be animated again on
submition, resulting in a stuttering page load. This method correctly
animates all transitions with the concession that the share page
always takes you back to the view page. This is not necessarily the current
behavior, but it is the most likely behavior in the current scheme

* Update jslib reference
---
 jslib                                            | 2 +-
 src/popup/app-routing.animations.ts              | 6 +++---
 src/popup/components/action-buttons.component.ts | 2 +-
 src/popup/vault/add-edit.component.html          | 9 ---------
 src/popup/vault/add-edit.component.ts            | 6 ------
 src/popup/vault/share.component.ts               | 6 ++----
 src/popup/vault/view.component.html              | 8 ++++++++
 src/popup/vault/view.component.ts                | 7 +++++++
 8 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/jslib b/jslib
index ceb78d054cc..f9042408f44 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit ceb78d054ccbd362459bca60bb4b05c16f164ffa
+Subproject commit f9042408f44b299a7cdd1286490b70f5fd2db999
diff --git a/src/popup/app-routing.animations.ts b/src/popup/app-routing.animations.ts
index a852922b0c1..b75b15e2a7c 100644
--- a/src/popup/app-routing.animations.ts
+++ b/src/popup/app-routing.animations.ts
@@ -150,6 +150,9 @@ export const routerTransition = trigger('routerTransition', [
     transition('view-cipher => clone-cipher', inSlideUp),
     transition('clone-cipher => view-cipher, clone-cipher => tabs', outSlideDown),
 
+    transition('view-cipher => share-cipher', inSlideUp),
+    transition('share-cipher => view-cipher', outSlideDown),
+
     transition('tabs => add-cipher', inSlideUp),
     transition('add-cipher => tabs', outSlideDown),
 
@@ -159,9 +162,6 @@ export const routerTransition = trigger('routerTransition', [
     transition('add-cipher => generator, edit-cipher => generator, clone-cipher => generator', inSlideUp),
     transition('generator => add-cipher, generator => edit-cipher, generator => clone-cipher', outSlideDown),
 
-    transition('edit-cipher => share-cipher', inSlideUp),
-    transition('share-cipher => edit-cipher, share-cipher => view-cipher', outSlideDown),
-
     transition('edit-cipher => attachments, edit-cipher => collections', inSlideLeft),
     transition('attachments => edit-cipher, collections => edit-cipher', outSlideRight),
 
diff --git a/src/popup/components/action-buttons.component.ts b/src/popup/components/action-buttons.component.ts
index 4c7a82173d3..ab22d38678a 100644
--- a/src/popup/components/action-buttons.component.ts
+++ b/src/popup/components/action-buttons.component.ts
@@ -43,7 +43,7 @@ export class ActionButtonsComponent {
     async ngOnInit() {
         this.userHasPremiumAccess = await this.userService.canAccessPremium();
     }
-    
+
     launch() {
         if (this.cipher.type !== CipherType.Login || !this.cipher.login.canLaunch) {
             return;
diff --git a/src/popup/vault/add-edit.component.html b/src/popup/vault/add-edit.component.html
index 65f344e29b2..c2961321b20 100644
--- a/src/popup/vault/add-edit.component.html
+++ b/src/popup/vault/add-edit.component.html
@@ -374,15 +374,6 @@
         </div>
         <div class="box list" *ngIf="editMode && !cloneMode">
             <div class="box-content single-line">
-                <a class="box-content-row" href="#" appStopClick appBlurClick (click)="share()"
-                    *ngIf="!cipher.organizationId">
-                    <div class="row-main text-primary">
-                        <div class="icon text-primary" aria-hidden="true">
-                            <i class="fa fa-share-alt fa-lg fa-fw"></i>
-                        </div>
-                        <span>{{'shareItem' | i18n}}</span>
-                    </div>
-                </a>
                 <a class="box-content-row" href="#" appStopClick appBlurClick (click)="delete()"
                     [appApiAction]="deletePromise" #deleteBtn>
                     <div class="row-main text-danger">
diff --git a/src/popup/vault/add-edit.component.ts b/src/popup/vault/add-edit.component.ts
index fdecd141d8b..0a32bdf89a1 100644
--- a/src/popup/vault/add-edit.component.ts
+++ b/src/popup/vault/add-edit.component.ts
@@ -118,12 +118,6 @@ export class AddEditComponent extends BaseAddEditComponent {
         this.router.navigate(['/attachments'], { queryParams: { cipherId: this.cipher.id } });
     }
 
-    share() {
-        super.share();
-        if (this.cipher.organizationId == null) {
-            this.router.navigate(['/share-cipher'], { queryParams: { cipherId: this.cipher.id } });
-        }
-    }
 
     editCollections() {
         super.editCollections();
diff --git a/src/popup/vault/share.component.ts b/src/popup/vault/share.component.ts
index 4fb14ea6c1a..230e27ac86c 100644
--- a/src/popup/vault/share.component.ts
+++ b/src/popup/vault/share.component.ts
@@ -41,14 +41,12 @@ export class ShareComponent extends BaseShareComponent {
     async submit(): Promise<boolean> {
         const success = await super.submit();
         if (success) {
-            window.setTimeout(() => {
-                this.location.back();
-            }, 200);
+            this.cancel();
         }
         return success;
     }
 
     cancel() {
-        this.location.back();
+        this.router.navigate(['/view-cipher'], { replaceUrl: true, queryParams: { cipherId: this.cipher.id } });
     }
 }
diff --git a/src/popup/vault/view.component.html b/src/popup/vault/view.component.html
index 439b3f2bfac..524fc735e9d 100644
--- a/src/popup/vault/view.component.html
+++ b/src/popup/vault/view.component.html
@@ -295,6 +295,14 @@
                     <span>{{'cloneItem' | i18n}}</span>
                 </div>
             </a>
+            <a class="box-content-row" href="#" appStopClick appBlurClick (click)="share()" *ngIf="!cipher.organizationId">
+                <div class="row-main text-primary">
+                    <div class="icon text-primary" aria-hidden="true">
+                        <i class="fa fa-share-alt fa-lg fa-fw"></i>
+                    </div>
+                    <span>{{'shareItem' | i18n}}</span>
+                </div>
+            </a>
             <a class="box-content-row" href="#" appStopClick appBlurClick (click)="restore()" *ngIf="cipher.isDeleted">
                 <div class="row-main text-primary">
                     <div class="icon text-primary" aria-hidden="true">
diff --git a/src/popup/vault/view.component.ts b/src/popup/vault/view.component.ts
index 23f4c1c5e13..4622e200d52 100644
--- a/src/popup/vault/view.component.ts
+++ b/src/popup/vault/view.component.ts
@@ -129,6 +129,13 @@ export class ViewComponent extends BaseViewComponent {
         });
     }
 
+    share() {
+        super.share();
+        if (this.cipher.organizationId == null) {
+            this.router.navigate(['/share-cipher'], { replaceUrl: true, queryParams: { cipherId: this.cipher.id } });
+        }
+    }
+
     async fillCipher() {
         const didAutofill = await this.doAutofill();
         if (didAutofill) {