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

ui/lib/replication/addon/templates/index.hbs

@@ -1,17 +1,16 @@
 <section class="section">
   <div class="container is-widescreen">
-    {{#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">
+          <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}}
       <ReplicationSummary
         @cluster={{this.model}}
@@ -20,6 +19,5 @@
         @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');
+  });
+});