UX: Simplify bootstrap mode visuals (#18626)

app/assets/javascripts/discourse/app/components/d-navigation.js

@@ -5,6 +5,7 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { NotificationLevels } from "discourse/lib/notification-levels";
 import { getOwner } from "discourse-common/lib/get-owner";
 import { inject as service } from "@ember/service";
+import showModal from "discourse/lib/show-modal";
 
 export default Component.extend(FilterModeMixin, {
   router: service(),
@@ -162,5 +163,9 @@ export default Component.extend(FilterModeMixin, {
         this.createTopic();
       }
     },
+
+    inviteUsers() {
+      showModal("create-invite");
+    },
   },
 });

app/assets/javascripts/discourse/app/templates/components/bootstrap-mode-notice.hbs

@@ -1,13 +1,5 @@
 <div class="row bootstrap-mode-notice">
   <div class="alert alert-info alert-bootstrap-mode">
-    <div class="col-text">
+    {{this.message}}
-      {{this.message}}
-    </div>
-    <div class="col-button">
-      <div class="alert--button"><DButton @icon="user-plus" @action={{this.inviteUsers}} @class="btn-primary bootstrap-invite-button" @label="bootstrap_invite_button_title" /></div>
-      {{#if this.site.wizard_required}}
-        <div class="alert--link"><a class="bootstrap-wizard-link" href="/wizard">{{i18n "bootstrap_wizard_link_title"}}</a></div>
-      {{/if}}
-    </div>
   </div>
 </div>

app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs

@@ -39,6 +39,19 @@
       category=this.category
       tag=this.tag}} />
 
+  {{#if (and (or this.site.siteSettings.invite_only this.site.siteSettings.bootstrap_mode_enabled) this.currentUser.admin)}}
+    <DButton @icon="user-plus" @action={{action "inviteUsers"}} @class="btn-primary" @title="bootstrap_invite_button_title" />
+  {{/if}}
+
+  {{#if (and this.site.siteSettings.wizard_required this.currentUser.admin)}}
+    {{#unless this.site.mobileView}}
+      <LinkTo @route="wizard.index" class="btn-primary bootstrap-wizard-link">
+        {{d-icon "pencil-alt"}}
+        {{i18n "bootstrap_wizard_link_title"}}
+      </LinkTo>
+    {{/unless}}
+  {{/if}}
+
   <CreateTopicButton @canCreateTopic={{this.canCreateTopic}} @action={{action "clickCreateTopicButton"}} @disabled={{this.createTopicButtonDisabled}} @label={{this.createTopicLabel}} @btnClass={{this.createTopicClass}} @canCreateTopicOnTag={{this.canCreateTopicOnTag}} />
 
   <PluginOutlet @name="after-create-topic-button" @connectorTagName="div" @tagName="" @args={{hash

app/assets/javascripts/discourse/tests/acceptance/bootstrap-mode-notice-test.js

@@ -1,6 +1,6 @@
 import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
 import { test } from "qunit";
-import { click, currentURL, settled, visit } from "@ember/test-helpers";
+import { settled, visit } from "@ember/test-helpers";
 import { set } from "@ember/object";
 
 acceptance("Bootstrap Mode Notice", function (needs) {
@@ -17,24 +17,6 @@ acceptance("Bootstrap Mode Notice", function (needs) {
       exists(".bootstrap-mode-notice"),
       "has the bootstrap mode notice"
     );
-    assert.ok(
-      exists(".bootstrap-invite-button"),
-      "bootstrap notice has invite button"
-    );
-    assert.ok(
-      exists(".bootstrap-wizard-link"),
-      "bootstrap notice has wizard link"
-    );
-
-    await click(".bootstrap-invite-button");
-    assert.ok(exists(".create-invite-modal"), "opens create invite modal");
-
-    await click(".bootstrap-wizard-link");
-    assert.strictEqual(
-      currentURL(),
-      "/wizard/steps/hello-world",
-      "it transitions to the wizard page"
-    );
 
     await visit("/");
     set(this.siteSettings, "bootstrap_mode_enabled", false);