From 5b1f5b5bde0078ff091a77a137df08d7a93ff37b Mon Sep 17 00:00:00 2001
From: Nick Major <nick.major@roundingwell.com>
Date: Fri, 22 Nov 2024 16:31:06 -0600
Subject: [PATCH 1/5] Update name in flow sidebar on ws notification model
 change

---
 src/js/views/patients/sidebar/flow/flow-sidebar.hbs  |  2 +-
 .../patients/sidebar/flow/flow-sidebar_views.js      | 12 ++++++++++++
 test/integration/patients/patient/patient-flow.js    |  6 ++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/js/views/patients/sidebar/flow/flow-sidebar.hbs b/src/js/views/patients/sidebar/flow/flow-sidebar.hbs
index 3e8effb23..b2346595c 100644
--- a/src/js/views/patients/sidebar/flow/flow-sidebar.hbs
+++ b/src/js/views/patients/sidebar/flow/flow-sidebar.hbs
@@ -1,5 +1,5 @@
 <div>
-  <div class="patient-flow-sidebar__name">{{ name }}</div>
+  <div data-name-region></div>
   <div class="sidebar__details">{{ details }}{{#unless details}}<span class="sidebar--no-results">{{ @intl.patients.sidebar.flow.flowSidebarTemplate.noDetails }}</span>{{/unless}}</div>
   <div class="flex u-margin--t-16"><h4 class="sidebar__label u-margin--t-8">{{ @intl.patients.sidebar.flow.flowSidebarTemplate.stateLabel }}</h4><div class="flex-grow" data-state-region></div></div>
   <div class="flex u-margin--t-8"><h4 class="sidebar__label u-margin--t-8">{{ @intl.patients.sidebar.flow.flowSidebarTemplate.ownerLabel }}</h4><div class="flex-grow" data-owner-region></div></div>
diff --git a/src/js/views/patients/sidebar/flow/flow-sidebar_views.js b/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
index 26354b69c..d7ff0e3d9 100644
--- a/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
+++ b/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
@@ -60,6 +60,11 @@ const MenuView = View.extend({
   },
 });
 
+const NameView = View.extend({
+  className: 'patient-flow-sidebar__name',
+  template: hbs`{{ name }}`,
+});
+
 const PermissionView = View.extend({
   className: 'flex u-margin--t-8',
   template: hbs`
@@ -73,6 +78,7 @@ const PermissionView = View.extend({
 const SidebarView = View.extend({
   template: FlowSidebarTemplate,
   regions: {
+    name: '[data-name-region]',
     state: '[data-state-region]',
     owner: '[data-owner-region]',
     permission: '[data-permission-region]',
@@ -88,6 +94,7 @@ const SidebarView = View.extend({
     };
   },
   modelEvents: {
+    'change:name': 'showName',
     'change:_state': 'showOwner',
     'change:_owner': 'showFlow',
   },
@@ -98,6 +105,7 @@ const SidebarView = View.extend({
   showFlow() {
     this.canEdit = this.model.canEdit();
 
+    this.showName();
     this.showActions();
   },
   showActions() {
@@ -105,6 +113,10 @@ const SidebarView = View.extend({
     this.showOwner();
     this.showPermission();
   },
+  showName() {
+    const nameView = new NameView({ model: this.model });
+    this.showChildView('name', nameView);
+  },
   showState() {
     if (!this.canEdit) {
       const readOnlyStateView = new ReadOnlyStateView({ model: this.model });
diff --git a/test/integration/patients/patient/patient-flow.js b/test/integration/patients/patient/patient-flow.js
index 45f2dcdee..548319af9 100644
--- a/test/integration/patients/patient/patient-flow.js
+++ b/test/integration/patients/patient/patient-flow.js
@@ -2421,6 +2421,12 @@ context('patient flow page', function() {
       .find('.patient-flow__name')
       .contains('New Flow Name');
 
+    cy
+      .get('.app-frame__sidebar')
+      .as('flowSidebar')
+      .find('[data-name-region]')
+      .should('contain', 'New Flow Name');
+
     cy
       .get('.app-frame__sidebar')
       .find('.sidebar__footer')

From b66de1ca2b2de7c718dfa28260098a0ad33ea051 Mon Sep 17 00:00:00 2001
From: Nick Major <nick.major@roundingwell.com>
Date: Fri, 22 Nov 2024 16:40:13 -0600
Subject: [PATCH 2/5] Update details in flow sidebar on ws notification model
 change

---
 .../patients/sidebar/flow/flow-sidebar.hbs      |  2 +-
 .../patients/sidebar/flow/flow-sidebar_views.js | 17 +++++++++++++++++
 .../patients/patient/patient-flow.js            | 15 ++++++++++-----
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/js/views/patients/sidebar/flow/flow-sidebar.hbs b/src/js/views/patients/sidebar/flow/flow-sidebar.hbs
index b2346595c..9f9443cf2 100644
--- a/src/js/views/patients/sidebar/flow/flow-sidebar.hbs
+++ b/src/js/views/patients/sidebar/flow/flow-sidebar.hbs
@@ -1,6 +1,6 @@
 <div>
   <div data-name-region></div>
-  <div class="sidebar__details">{{ details }}{{#unless details}}<span class="sidebar--no-results">{{ @intl.patients.sidebar.flow.flowSidebarTemplate.noDetails }}</span>{{/unless}}</div>
+  <div data-details-region></div>
   <div class="flex u-margin--t-16"><h4 class="sidebar__label u-margin--t-8">{{ @intl.patients.sidebar.flow.flowSidebarTemplate.stateLabel }}</h4><div class="flex-grow" data-state-region></div></div>
   <div class="flex u-margin--t-8"><h4 class="sidebar__label u-margin--t-8">{{ @intl.patients.sidebar.flow.flowSidebarTemplate.ownerLabel }}</h4><div class="flex-grow" data-owner-region></div></div>
   <div data-permission-region></div>
diff --git a/src/js/views/patients/sidebar/flow/flow-sidebar_views.js b/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
index d7ff0e3d9..930334cc6 100644
--- a/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
+++ b/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
@@ -65,6 +65,16 @@ const NameView = View.extend({
   template: hbs`{{ name }}`,
 });
 
+const DetailsView = View.extend({
+  className: 'sidebar__details',
+  template: hbs`
+    {{ details }}
+    {{#unless details}}
+      <span class="sidebar--no-results">{{ @intl.patients.sidebar.flow.flowSidebarTemplate.noDetails }}</span>
+    {{/unless}}
+  `,
+});
+
 const PermissionView = View.extend({
   className: 'flex u-margin--t-8',
   template: hbs`
@@ -79,6 +89,7 @@ const SidebarView = View.extend({
   template: FlowSidebarTemplate,
   regions: {
     name: '[data-name-region]',
+    details: '[data-details-region]',
     state: '[data-state-region]',
     owner: '[data-owner-region]',
     permission: '[data-permission-region]',
@@ -95,6 +106,7 @@ const SidebarView = View.extend({
   },
   modelEvents: {
     'change:name': 'showName',
+    'change:details': 'showDetails',
     'change:_state': 'showOwner',
     'change:_owner': 'showFlow',
   },
@@ -106,6 +118,7 @@ const SidebarView = View.extend({
     this.canEdit = this.model.canEdit();
 
     this.showName();
+    this.showDetails();
     this.showActions();
   },
   showActions() {
@@ -117,6 +130,10 @@ const SidebarView = View.extend({
     const nameView = new NameView({ model: this.model });
     this.showChildView('name', nameView);
   },
+  showDetails() {
+    const detailsView = new DetailsView({ model: this.model });
+    this.showChildView('details', detailsView);
+  },
   showState() {
     if (!this.canEdit) {
       const readOnlyStateView = new ReadOnlyStateView({ model: this.model });
diff --git a/test/integration/patients/patient/patient-flow.js b/test/integration/patients/patient/patient-flow.js
index 548319af9..dbeed3c6f 100644
--- a/test/integration/patients/patient/patient-flow.js
+++ b/test/integration/patients/patient/patient-flow.js
@@ -2434,11 +2434,6 @@ context('patient flow page', function() {
       .next()
       .should('contain', formatDate(testTs(), 'AT_TIME'));
 
-    cy
-      .get('.app-frame__sidebar')
-      .find('.js-close')
-      .click();
-
     cy.sendWs({
       category: 'DetailsChanged',
       resource: {
@@ -2457,6 +2452,16 @@ context('patient flow page', function() {
       .find('.patient-flow__details')
       .contains('New flow details');
 
+    cy
+      .get('@flowSidebar')
+      .find('[data-details-region]')
+      .should('contain', 'New flow details');
+
+    cy
+      .get('.app-frame__sidebar')
+      .find('.js-close')
+      .click();
+
     cy.sendWs({
       category: 'NameChanged',
       resource: {

From b5dc0451d902192eb6718f34e2e240aaa7c87f39 Mon Sep 17 00:00:00 2001
From: Nick Major <nick.major@roundingwell.com>
Date: Fri, 22 Nov 2024 16:55:06 -0600
Subject: [PATCH 3/5] Update state in flow sidebar on ws notification model
 change

---
 .../views/patients/sidebar/flow/flow-sidebar_views.js  |  2 +-
 test/integration/patients/patient/patient-flow.js      | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/js/views/patients/sidebar/flow/flow-sidebar_views.js b/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
index 930334cc6..0ca681352 100644
--- a/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
+++ b/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
@@ -107,7 +107,7 @@ const SidebarView = View.extend({
   modelEvents: {
     'change:name': 'showName',
     'change:details': 'showDetails',
-    'change:_state': 'showOwner',
+    'change:_state': 'showFlow',
     'change:_owner': 'showFlow',
   },
   onRender() {
diff --git a/test/integration/patients/patient/patient-flow.js b/test/integration/patients/patient/patient-flow.js
index dbeed3c6f..f3e500357 100644
--- a/test/integration/patients/patient/patient-flow.js
+++ b/test/integration/patients/patient/patient-flow.js
@@ -2457,11 +2457,6 @@ context('patient flow page', function() {
       .find('[data-details-region]')
       .should('contain', 'New flow details');
 
-    cy
-      .get('.app-frame__sidebar')
-      .find('.js-close')
-      .click();
-
     cy.sendWs({
       category: 'NameChanged',
       resource: {
@@ -2615,5 +2610,10 @@ context('patient flow page', function() {
     cy
       .get('[data-header-region]')
       .find('[data-state-region] .fa-circle-check');
+
+    cy
+      .get('@flowSidebar')
+      .find('[data-state-region]')
+      .should('contain', 'Done');
   });
 });

From af91a016debbde02c8eba068bddebd2f72f8da11 Mon Sep 17 00:00:00 2001
From: Nick Major <nick.major@roundingwell.com>
Date: Fri, 22 Nov 2024 16:57:09 -0600
Subject: [PATCH 4/5] Test that owner is updated in flow sidebar on ws
 notification model change

---
 test/integration/patients/patient/patient-flow.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/test/integration/patients/patient/patient-flow.js b/test/integration/patients/patient/patient-flow.js
index f3e500357..6db70cac9 100644
--- a/test/integration/patients/patient/patient-flow.js
+++ b/test/integration/patients/patient/patient-flow.js
@@ -2558,6 +2558,16 @@ context('patient flow page', function() {
       },
     });
 
+    cy
+      .get('[data-header-region]')
+      .find('[data-owner-region]')
+      .should('contain', 'CO');
+
+    cy
+      .get('@flowSidebar')
+      .find('[data-owner-region]')
+      .should('contain', 'Coordinator');
+
     cy
       .get('.patient-flow__progress')
       .should('have.value', 0);
@@ -2602,11 +2612,6 @@ context('patient flow page', function() {
         expect($action.find('[data-owner-region]')).to.contain('CO');
       });
 
-    cy
-      .get('[data-header-region]')
-      .find('[data-owner-region]')
-      .contains('CO');
-
     cy
       .get('[data-header-region]')
       .find('[data-state-region] .fa-circle-check');

From 8df0bf6f266018d4669635223608abb3cf5ced05 Mon Sep 17 00:00:00 2001
From: Nick Major <nick.major@roundingwell.com>
Date: Mon, 25 Nov 2024 17:25:06 -0600
Subject: [PATCH 5/5] Refactor flow sidebar views

---
 .../patients/sidebar/flow/flow-sidebar_views.js     | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/js/views/patients/sidebar/flow/flow-sidebar_views.js b/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
index 0ca681352..a22038bfe 100644
--- a/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
+++ b/src/js/views/patients/sidebar/flow/flow-sidebar_views.js
@@ -107,21 +107,18 @@ const SidebarView = View.extend({
   modelEvents: {
     'change:name': 'showName',
     'change:details': 'showDetails',
-    'change:_state': 'showFlow',
-    'change:_owner': 'showFlow',
+    'change:_state': 'showActions',
+    'change:_owner': 'showActions',
   },
   onRender() {
-    this.showFlow();
-    this.getRegion('activity').startPreloader();
-  },
-  showFlow() {
-    this.canEdit = this.model.canEdit();
-
     this.showName();
     this.showDetails();
     this.showActions();
+    this.getRegion('activity').startPreloader();
   },
   showActions() {
+    this.canEdit = this.model.canEdit();
+
     this.showState();
     this.showOwner();
     this.showPermission();