From 0d6f76b98e2ad4082a1e69cd8bd16b46ab2f26f1 Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
Date: Thu, 21 Sep 2023 11:35:48 -0500
Subject: [PATCH] UI: Show unsupported screen if replication unsupported
 (#23178) (#23213)

---
 ui/lib/replication/addon/templates/index.hbs  | 34 +++++++++----------
 ...enterprise-replication-unsupported-test.js | 33 ++++++++++++++++++
 2 files changed, 49 insertions(+), 18 deletions(-)
 create mode 100644 ui/tests/acceptance/enterprise-replication-unsupported-test.js

diff --git a/ui/lib/replication/addon/templates/index.hbs b/ui/lib/replication/addon/templates/index.hbs
index bae4ef0ef..3eb52b43c 100644
--- a/ui/lib/replication/addon/templates/index.hbs
+++ b/ui/lib/replication/addon/templates/index.hbs
@@ -1,25 +1,23 @@
 <section class="section">
   <div class="container is-widescreen">
-    {{#if this.model.replicationIsInitializing}}
+    {{#if (eq this.model.mode "unsupported")}}
+      <PageHeader as |p|>
+        <p.levelLeft>
+          <h1 class="title is-3 has-text-grey" data-test-replication-title>
+            Replication unsupported
+          </h1>
+        </p.levelLeft>
+      </PageHeader>
+      <EmptyState @title="The current cluster configuration does not support replication" />
+    {{else if this.model.replicationIsInitializing}}
       <LayoutLoading />
     {{else}}
-      {{#if (eq this.model.mode "unsupported")}}
-        <PageHeader as |p|>
-          <p.levelLeft>
-            <h1 class="title is-3 has-text-grey">
-              Replication unsupported
-            </h1>
-          </p.levelLeft>
-        </PageHeader>
-        <EmptyState @title="The current cluster configuration does not support replication" />
-      {{else}}
-        <ReplicationSummary
-          @cluster={{this.model}}
-          @showModeSummary={{true}}
-          @onEnable={{action "onEnable"}}
-          @onDisable={{action "onDisable"}}
-        />
-      {{/if}}
+      <ReplicationSummary
+        @cluster={{this.model}}
+        @showModeSummary={{true}}
+        @onEnable={{action "onEnable"}}
+        @onDisable={{action "onDisable"}}
+      />
     {{/if}}
   </div>
 </section>
\ No newline at end of file
diff --git a/ui/tests/acceptance/enterprise-replication-unsupported-test.js b/ui/tests/acceptance/enterprise-replication-unsupported-test.js
new file mode 100644
index 000000000..cfcb2a73c
--- /dev/null
+++ b/ui/tests/acceptance/enterprise-replication-unsupported-test.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import authPage from 'vault/tests/pages/auth';
+import { visit } from '@ember/test-helpers';
+
+module('Acceptance | Enterprise | replication unsupported', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  hooks.beforeEach(async function () {
+    this.server.get('/sys/replication/status', function () {
+      return {
+        data: {
+          mode: 'unsupported',
+        },
+      };
+    });
+    return authPage.login();
+  });
+
+  test('replication page when unsupported', async function (assert) {
+    await visit('/vault/replication');
+    assert
+      .dom('[data-test-replication-title]')
+      .hasText('Replication unsupported', 'it shows the unsupported view');
+  });
+});