UI: Show unsupported screen if replication unsupported (#23178) (#23213)

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")}}
+      <ReplicationSummary
-        <PageHeader as |p|>
+        @cluster={{this.model}}
-          <p.levelLeft>
+        @showModeSummary={{true}}
-            <h1 class="title is-3 has-text-grey">
+        @onEnable={{action "onEnable"}}
-              Replication unsupported
+        @onDisable={{action "onDisable"}}
-            </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}}
     {{/if}}
   </div>
 </section>

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');
+  });
+});