Keep 'is-selected' class on program flow header when the program flow…

… is edited via the sidebar

src/js/apps/programs/program/flow/flow_app.js

@@ -4,7 +4,7 @@ import SubRouterApp from 'js/base/subrouterapp';
 
 import ActionApp from 'js/apps/programs/program/action/action_app';
 
-import { LayoutView, ContextTrailView, HeaderView, ListView } from 'js/views/programs/program/flow/flow_views';
+import { LayoutView, ContextTrailView, HeaderView, AddActionView, ListView } from 'js/views/programs/program/flow/flow_views';
 import { SidebarView } from 'js/views/programs/program/sidebar/sidebar-views';
 
 export default SubRouterApp.extend({
@@ -43,6 +43,7 @@ export default SubRouterApp.extend({
     }));
 
     this.showHeader();
+    this.showAddAction();
     this.showActionList();
     this.showProgramSidebar();
   },
@@ -63,12 +64,21 @@ export default SubRouterApp.extend({
 
     this.listenTo(headerView, {
       'edit': this.onEditFlow,
+    });
+
+    this.showChildView('header', headerView);
+  },
+
+  showAddAction() {
+    const addActionView = new AddActionView();
+
+    this.listenTo(addActionView, {
       'click:addAction': () => {
         Radio.trigger('event-router', 'programFlow:action:new', this.flow.id);
       },
     });
 
-    this.showChildView('header', headerView);
+    this.showChildView('addAction', addActionView);
   },
 
   showActionList() {

src/js/i18n/en-US.yml

@@ -678,10 +678,9 @@ careOptsFrontend:
         actionItemTemplate:
           newProgramFlowAction: New Flow Action
         flowViews:
+          addActionBtn: Action
           contextBackBtn: Back to List
           emptyView: No Actions
-        headerTemplate:
-          action: Action
       programViews:
         contextBackBtn: Back to List
       sidebar:

src/js/views/programs/program/flow/flow_views.js

@@ -51,24 +51,21 @@ const ContextTrailView = View.extend({
 });
 
 const HeaderView = View.extend({
+  className: 'program-flow__header',
   modelEvents: {
     'editing': 'onEditing',
     'change': 'render',
   },
   onEditing(isEditing) {
-    this.ui.flow.toggleClass('is-selected', isEditing);
+    this.$el.toggleClass('is-selected', isEditing);
   },
   template: HeaderTemplate,
   regions: {
     behavior: '[data-behavior-region]',
     owner: '[data-owner-region]',
   },
   triggers: {
-    'click @ui.flow': 'edit',
-    'click .js-add-action': 'click:addAction',
-  },
-  ui: {
-    flow: '.js-flow',
+    'click': 'edit',
   },
   onRender() {
     this.showBehavior();
@@ -97,6 +94,17 @@ const HeaderView = View.extend({
   },
 });
 
+const AddActionView = View.extend({
+  template: hbs`
+    <div class="program-flow__actions">
+      <button class="button-primary js-add-action">{{far "circle-plus"}}<span>{{ @intl.programs.program.flow.flowViews.addActionBtn }}</span></button>
+    </div>
+  `,
+  triggers: {
+    'click .js-add-action': 'click:addAction',
+  },
+});
+
 const EmptyView = View.extend({
   tagName: 'tr',
   template: hbs`
@@ -223,6 +231,7 @@ const LayoutView = View.extend({
     <div class="program-flow__layout">
       <div data-context-trail-region></div>
       <div data-header-region></div>
+      <div data-add-action-region></div>
       <div data-action-list-region></div>
     </div>
     <div class="program-flow__sidebar" data-sidebar-region></div>
@@ -233,6 +242,7 @@ const LayoutView = View.extend({
       replaceElement: true,
     },
     header: '[data-header-region]',
+    addAction: '[data-add-action-region]',
     sidebar: '[data-sidebar-region]',
     actionList: {
       el: '[data-action-list-region]',
@@ -246,5 +256,6 @@ export {
   LayoutView,
   ContextTrailView,
   HeaderView,
+  AddActionView,
   ListView,
 };

src/js/views/programs/program/flow/header.hbs

@@ -1,17 +1,12 @@
-<div class="program-flow__header js-flow">
-  <h1 class="program-flow__name">{{fas "folder-open"}} {{ name }}</h1>
-  <div>
-    <p class="program-flow__details">
-    {{#if details}}
-      {{ details }}
-    {{ else }}
-      <button class="program-flow__meta button-secondary">{{far "pen-to-square"}} Add Details</button>
-    {{/if}}
-    </p>{{~ remove_whitespace ~}}
-    <span class="program-flow__meta" data-behavior-region></span>
-    <span class="program-flow__meta" data-owner-region></span>
-  </div>
-</div>
-<div class="program-flow__actions">
-  <button class="button-primary js-add-action">{{far "circle-plus"}}<span>{{ @intl.programs.program.flow.headerTemplate.action }}</span></button>
+<h1 class="program-flow__name">{{fas "folder-open"}} {{ name }}</h1>
+<div>
+  <p class="program-flow__details">
+  {{#if details}}
+    {{ details }}
+  {{ else }}
+    <button class="program-flow__meta button-secondary">{{far "pen-to-square"}} Add Details</button>
+  {{/if}}
+  </p>{{~ remove_whitespace ~}}
+  <span class="program-flow__meta" data-behavior-region></span>
+  <span class="program-flow__meta" data-owner-region></span>
 </div>

test/integration/programs/sidebar/flow-sidebar.js

@@ -205,7 +205,7 @@ context('flow sidebar', function() {
       .as('routePatchFlow');
 
     cy
-      .get('.js-flow')
+      .get('.program-flow__header')
       .as('flowHeader')
       .click('right')
       .should('have.class', 'is-selected');
@@ -222,6 +222,7 @@ context('flow sidebar', function() {
 
     cy
       .get('@flowHeader')
+      .should('not.have.class', 'is-selected')
       .click('right');
 
     cy
@@ -278,6 +279,7 @@ context('flow sidebar', function() {
 
     cy
       .get('@flowHeader')
+      .should('have.class', 'is-selected')
       .should('contain', 'Here are some details');
 
     cy
@@ -494,7 +496,7 @@ context('flow sidebar', function() {
       .wait('@routeProgramFlow');
 
     cy
-      .get('.js-flow')
+      .get('.program-flow__header')
       .as('flowHeader')
       .click('right');