Sidebranch: Setup Replication Page as component to be consumed in all pages for project

ui/app/components/replication-page.js

@@ -0,0 +1,4 @@
+import { inject as service } from '@ember/service';
+import Component from '@ember/component';
+
+export default Component.extend({});

ui/app/components/replication-page/replication-toggle.js

@@ -0,0 +1,12 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  // ARG TODO: if other components need access to this response, will need to move it higher up to replication parent.
+  checkedValue: false,
+  handleToggleOff: computed('checkedValue', function() {
+    console.log(this.checkedValue, 'setup to handle change later');
+    let status = this.checkedValue ? 'on' : 'off';
+    return status;
+  }),
+});

ui/app/routes/vault/cluster/replication-dr-promote/details.js

@@ -0,0 +1,10 @@
+import { inject as service } from '@ember/service';
+import Base from '../cluster-route-base';
+
+export default Base.extend({
+  replicationMode: service(),
+  beforeModel() {
+    this._super(...arguments);
+    this.get('replicationMode').setMode('dr');
+  },
+});

ui/app/templates/components/replication-page.hbs

@@ -0,0 +1,4 @@
+{{yield (hash 
+  header=(component 'replication-page/replication-header')
+  toggle=(component 'replication-page/replication-toggle')
+)}}

ui/app/templates/components/replication-page/replication-content.hbs

@@ -0,0 +1 @@
+{{yield}}

ui/app/templates/components/replication-page/replication-header.hbs

@@ -0,0 +1,66 @@
+{{!-- DR Secondary has a different Nav Header with access only to the Status menu --}}
+{{!-- ARG TODO all links are hard coded as well as titles right now, they will need to by dynamic --}}
+{{#if (and (eq model.rm.mode 'dr') (eq model.dr.mode 'secondary') )}}
+  <NavHeader as |Nav|>
+    <Nav.home>
+      <HomeLink @class="navbar-item splash-page-logo has-text-white">
+        <LogoEdition />
+      </HomeLink>
+    </Nav.home>
+    <Nav.items>
+      <div class="navbar-item status-indicator-button" data-status="{{if model.unsealed "good" "bad"}}">
+        <StatusMenu @label="Status" @onLinkClick={{action Nav.closeDrawer}} />
+      </div>
+    </Nav.items>
+  </NavHeader>
+{{/if}}
+
+<PageHeader as |p|>
+  <p.top>
+    {{#key-value-header
+      baseKey=baseKey
+      path="vault.cluster.replication-dr-promote"
+      root=backendCrumb
+    }}
+      <li>
+        <span class="sep">
+          /
+        </span>
+        {{#link-to "vault.cluster.replication-dr-promote"}}
+          Disaster Recovery
+        {{/link-to}}
+      </li>
+    {{/key-value-header}}
+  </p.top>
+  <p.levelLeft>
+    <h1 class="title is-3">
+      Details
+      <span class="tag">
+        {{model.dr.mode}}
+      </span>
+      <span class="tag">
+        {{model.dr.clusterIdDisplay}}
+      </span>
+    </h1>
+  </p.levelLeft>
+</PageHeader>
+
+{{#if showTabs}}
+  <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
+    <nav class="tabs">
+      <ul>
+        {{!-- TODO should map over array of options with link and title --}}
+        {{#link-to
+          "vault.cluster.replication-dr-promote"
+          tagName="li"
+          activeClass="is-active"
+          current-when=""
+        }}
+          {{#link-to "vault.cluster.replication-dr-promote"}}
+            Details
+          {{/link-to}}
+        {{/link-to}}
+      </ul>
+    </nav>
+  </div>
+{{/if}}

ui/app/templates/components/replication-page/replication-toggle.hbs

@@ -0,0 +1,5 @@
+<Toolbar>
+  <ToolbarActions>
+    <Toggle @tagName="name" @checked={{checkedValue}} @onChange={{action (mut checkedValue)}}> Auto-refresh {{handleToggleOff}}</Toggle>
+  </ToolbarActions>
+</Toolbar>

ui/app/templates/vault/cluster/replication-dr-promote/details.hbs

@@ -1,13 +1,13 @@
-<SplashPage as |Page|>
-  <Page.header>
-  <h1 class="title is-4">
-  Disaster Recovery
-  </h1>
-</Page.header>
-<Page.content>
-  <LinkTo
-    @params={{array "vault.cluster.replication-dr-promote"}}
-    class="is-block">MEEP
-  </LinkTo>
-</Page.content>
-</SplashPage>
+<section class="section">
+  <div class="container is-widescreen">
+    {{!-- ARG TODO setup error state and return --}}
+    <ReplicationPage as |Page|>
+      <Page.header 
+        @showTabs={{false}} 
+        @model={{model}}
+      />
+      <Page.toggle />
+      <Page.content />
+    </ReplicationPage>
+</div>
+</section>