From 10a1b6b0a9e07b1652e23c02f55a32b1b607e722 Mon Sep 17 00:00:00 2001 From: Arpit Jalan Date: Wed, 10 Aug 2022 00:13:42 +0530 Subject: [PATCH] FEATURE: update bootstrap mode notice to add invite and wizard links (#17822) * FEATURE: update bootstrap mode notice to add invite and wizard links * Updates per feedback on PR * Fix the wizard link not showing * Remove unneeded function * Remove router service injection --- .../app/components/bootstrap_mode_notice.js | 22 ++++++++++ .../discourse/app/components/global-notice.js | 36 ---------------- .../discourse/app/controllers/application.js | 9 ++++ .../discourse/app/templates/application.hbs | 3 ++ .../components/bootstrap-mode-notice.hbs | 13 ++++++ .../acceptance/bootstrap-mode-notice-test.js | 43 +++++++++++++++++++ app/assets/stylesheets/desktop/_index.scss | 1 + app/assets/stylesheets/desktop/alert.scss | 23 ++++++++++ app/assets/stylesheets/mobile/alert.scss | 21 +++++++++ config/locales/client.en.yml | 3 +- spec/models/translation_override_spec.rb | 8 ++-- 11 files changed, 141 insertions(+), 41 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/bootstrap_mode_notice.js create mode 100644 app/assets/javascripts/discourse/app/templates/components/bootstrap-mode-notice.hbs create mode 100644 app/assets/javascripts/discourse/tests/acceptance/bootstrap-mode-notice-test.js create mode 100644 app/assets/stylesheets/desktop/alert.scss diff --git a/app/assets/javascripts/discourse/app/components/bootstrap_mode_notice.js b/app/assets/javascripts/discourse/app/components/bootstrap_mode_notice.js new file mode 100644 index 00000000000..f1328b9eb6a --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/bootstrap_mode_notice.js @@ -0,0 +1,22 @@ +import GlimmerComponent from "@glimmer/component"; +import { htmlSafe } from "@ember/template"; +import I18n from "I18n"; +import { inject as service } from "@ember/service"; + +export default class BootstrapModeNotice extends GlimmerComponent { + @service siteSettings; + @service site; + + get message() { + let msg = null; + const bootstrapModeMinUsers = this.siteSettings.bootstrap_mode_min_users; + + if (bootstrapModeMinUsers > 0) { + msg = "bootstrap_mode_enabled"; + } else { + msg = "bootstrap_mode_disabled"; + } + + return htmlSafe(I18n.t(msg, { count: bootstrapModeMinUsers })); + } +} diff --git a/app/assets/javascripts/discourse/app/components/global-notice.js b/app/assets/javascripts/discourse/app/components/global-notice.js index b2097becb6a..170421cb134 100644 --- a/app/assets/javascripts/discourse/app/components/global-notice.js +++ b/app/assets/javascripts/discourse/app/components/global-notice.js @@ -3,7 +3,6 @@ import cookie, { removeCookie } from "discourse/lib/cookie"; import Component from "@ember/component"; import I18n from "I18n"; import discourseComputed, { bind } from "discourse-common/utils/decorators"; -import getURL from "discourse-common/lib/get-url"; import { htmlSafe } from "@ember/template"; import { inject as service } from "@ember/service"; @@ -78,23 +77,17 @@ export default Component.extend({ @discourseComputed( "site.isReadOnly", - "site.wizard_required", "siteSettings.login_required", "siteSettings.disable_emails", "siteSettings.global_notice", - "siteSettings.bootstrap_mode_enabled", - "siteSettings.bootstrap_mode_min_users", "session.safe_mode", "logNotice.{id,text,hidden}" ) notices( isReadOnly, - wizardRequired, loginRequired, disableEmails, globalNotice, - bootstrapModeEnabled, - bootstrapModeMinUsers, safeMode, logNotice ) { @@ -143,35 +136,6 @@ export default Component.extend({ ); } - if (wizardRequired) { - const requiredText = I18n.t("wizard_required", { - url: getURL("/wizard"), - }); - notices.push( - Notice.create({ text: htmlSafe(requiredText), id: "alert-wizard" }) - ); - } - - if (this.currentUser?.staff && bootstrapModeEnabled) { - if (bootstrapModeMinUsers > 0) { - notices.push( - Notice.create({ - text: I18n.t("bootstrap_mode_enabled", { - count: bootstrapModeMinUsers, - }), - id: "alert-bootstrap-mode", - }) - ); - } else { - notices.push( - Notice.create({ - text: I18n.t("bootstrap_mode_disabled"), - id: "alert-bootstrap-mode", - }) - ); - } - } - if (globalNotice?.length > 0) { notices.push( Notice.create({ diff --git a/app/assets/javascripts/discourse/app/controllers/application.js b/app/assets/javascripts/discourse/app/controllers/application.js index bbe475a63f9..f04fb086f02 100644 --- a/app/assets/javascripts/discourse/app/controllers/application.js +++ b/app/assets/javascripts/discourse/app/controllers/application.js @@ -36,6 +36,15 @@ export default Controller.extend({ return this.siteSettings.login_required && !this.currentUser; }, + @discourseComputed + showBootstrapModeNotice() { + return ( + this.currentUser?.get("staff") && + this.siteSettings.bootstrap_mode_enabled && + !this.router.currentRouteName.startsWith("wizard") + ); + }, + @discourseComputed showFooterNav() { return this.capabilities.isAppWebview || this.capabilities.isiOSPWA; diff --git a/app/assets/javascripts/discourse/app/templates/application.hbs b/app/assets/javascripts/discourse/app/templates/application.hbs index 252314366b5..431ea4d302f 100644 --- a/app/assets/javascripts/discourse/app/templates/application.hbs +++ b/app/assets/javascripts/discourse/app/templates/application.hbs @@ -35,6 +35,9 @@ {{/if}} + {{#if this.showBootstrapModeNotice}} + + {{/if}} diff --git a/app/assets/javascripts/discourse/app/templates/components/bootstrap-mode-notice.hbs b/app/assets/javascripts/discourse/app/templates/components/bootstrap-mode-notice.hbs new file mode 100644 index 00000000000..cf23159b968 --- /dev/null +++ b/app/assets/javascripts/discourse/app/templates/components/bootstrap-mode-notice.hbs @@ -0,0 +1,13 @@ +
+
+
+ {{this.message}} +
+
+
+ {{#if this.site.wizard_required}} +
{{i18n "bootstrap_wizard_link_title"}}
+ {{/if}} +
+
+
diff --git a/app/assets/javascripts/discourse/tests/acceptance/bootstrap-mode-notice-test.js b/app/assets/javascripts/discourse/tests/acceptance/bootstrap-mode-notice-test.js new file mode 100644 index 00000000000..5f11ac4d47c --- /dev/null +++ b/app/assets/javascripts/discourse/tests/acceptance/bootstrap-mode-notice-test.js @@ -0,0 +1,43 @@ +import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers"; +import { test } from "qunit"; +import { click, currentURL, visit } from "@ember/test-helpers"; + +acceptance("Bootstrap Mode Notice", function (needs) { + needs.user(); + needs.site({ wizard_required: true }); + needs.settings({ + bootstrap_mode_enabled: true, + bootstrap_mode_min_users: 50, + }); + + test("Navigation", async function (assert) { + await visit("/"); + assert.ok( + 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.strictEqual( + currentURL(), + "/u/eviltrout/invited/pending", + "it transitions to the invite page" + ); + + await visit("/"); + await click(".bootstrap-wizard-link"); + assert.strictEqual( + currentURL(), + "/wizard/steps/hello-world", + "it transitions to the wizard page" + ); + }); +}); diff --git a/app/assets/stylesheets/desktop/_index.scss b/app/assets/stylesheets/desktop/_index.scss index 26a5c6a3eb1..3b415092a5e 100644 --- a/app/assets/stylesheets/desktop/_index.scss +++ b/app/assets/stylesheets/desktop/_index.scss @@ -1,4 +1,5 @@ @import "admin_customize"; +@import "alert"; @import "category-list"; @import "compose"; @import "discourse"; diff --git a/app/assets/stylesheets/desktop/alert.scss b/app/assets/stylesheets/desktop/alert.scss new file mode 100644 index 00000000000..20ddbdef797 --- /dev/null +++ b/app/assets/stylesheets/desktop/alert.scss @@ -0,0 +1,23 @@ +.alert-bootstrap-mode { + display: flex; + flex-direction: row; + padding: 10px; + + .col-text { + width: 85%; + } + .col-button { + width: 15%; + display: flex; + flex-direction: column; + .alert--button, + .alert--link { + align-self: center; + justify-content: flex-end; + } + .alert--link { + font-weight: bold; + padding-top: 5px; + } + } +} diff --git a/app/assets/stylesheets/mobile/alert.scss b/app/assets/stylesheets/mobile/alert.scss index 90d48b7deb7..6e9c4347358 100644 --- a/app/assets/stylesheets/mobile/alert.scss +++ b/app/assets/stylesheets/mobile/alert.scss @@ -5,3 +5,24 @@ padding: 1em; } } + +.alert-bootstrap-mode { + display: flex; + flex-direction: column; + padding: 10px; + + .col-button { + display: flex; + flex-direction: row; + padding-top: 10px; + justify-content: center; + .alert--button, + .alert--link { + align-self: center; + } + .alert--link { + font-weight: bold; + padding-left: 10px; + } + } +} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 2ad39b15d43..cfccf9f90ff 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -198,7 +198,6 @@ en: topic_admin_menu: "topic actions" skip_to_main_content: "Skip to main content" - wizard_required: "Welcome to your new Discourse! Let’s get started with the setup wizard ✨" emails_are_disabled: "All outgoing email has been globally disabled by an administrator. No email notifications of any kind will be sent." emails_are_disabled_non_staff: "Outgoing email has been disabled for non-staff users." @@ -210,6 +209,8 @@ en: one: "To make launching your new site easier, you are in bootstrap mode. All new users will be granted trust level 1 and have daily email summary emails enabled. This will be automatically turned off when %{count} user has joined." other: "To make launching your new site easier, you are in bootstrap mode. All new users will be granted trust level 1 and have daily email summary emails enabled. This will be automatically turned off when %{count} users have joined." bootstrap_mode_disabled: "Bootstrap mode will be disabled within 24 hours." + bootstrap_invite_button_title: "Send Invites" + bootstrap_wizard_link_title: "Finish setup wizard" themes: default_description: "Default" diff --git a/spec/models/translation_override_spec.rb b/spec/models/translation_override_spec.rb index a715fe9aa64..30b89e4b895 100644 --- a/spec/models/translation_override_spec.rb +++ b/spec/models/translation_override_spec.rb @@ -114,13 +114,13 @@ RSpec.describe TranslationOverride do end it 'sanitizes values before upsert' do - xss = "setup wizard ✨" + xss = "Click here " - TranslationOverride.upsert!('en', 'js.wizard_required', xss) + TranslationOverride.upsert!('en', 'js.themes.error_caused_by', xss) - ovr = TranslationOverride.where(locale: 'en', translation_key: 'js.wizard_required').first + ovr = TranslationOverride.where(locale: 'en', translation_key: 'js.themes.error_caused_by').first expect(ovr).to be_present - expect(ovr.value).to eq("setup wizard ✨alert('TEST');") + expect(ovr.value).to eq("Click here alert('TEST');") end it "stores js for a message format key" do