Upgrade to FontAwesome 5 (take two) (#6673)

* Add missing icons to set

* Revert FA5 revert

 This reverts commit 42572ff

* use new SVG syntax in locales

* Noscript page changes (remove login button, center "powered by" footer text)

* Cast wider net for SVG icons in settings

- include any _icon setting for SVG registry (offers better support for plugin settings)

- let themes store multiple pipe-delimited icons in a setting

- also replaces broken onebox image icon with SVG reference in cooked post processor

* interpolate icons in locales

* Fix composer whisper icon alignment

* Add support for stacked icons

* SECURITY: enforce hostname to match discourse hostname

This ensures that the hostname rails uses for various helpers always matches
the Discourse hostname

* load SVG sprite with pre-initializers

* FIX: enable caching on SVG sprites

* PERF: use JSONP for SVG sprites so they are served from CDN

This avoids needing to deal with CORS for loading of the SVG

Note, added the svg- prefix to the filename so we can quickly tell in
dev tools what the file is

* Add missing SVG sprite JSONP script to CSP

* Upgrade to FA 5.5.0

* Add support for all FA4.7 icons

- adds complete frontend and backend for renamed FA4.7 icons

- improves performance of SvgSprite.bundle and SvgSprite.all_icons

* Fix group avatar flair preview

- adds an endpoint at /svg-sprites/search/:keyword

- adds frontend ajax call that pulls icon in avatar flair preview even when it is not in subset

* Remove FA 4.7 font files

test/javascripts/acceptance/composer-actions-test.js.es6

@@ -88,11 +88,7 @@ QUnit.test("replying to post - toggle_whisper", async assert => {
   await composerActions.expand();
   await composerActions.selectRowByValue("toggle_whisper");
 
-  assert.ok(
-    find(".composer-fields .whisper")
-      .text()
-      .indexOf(I18n.t("composer.whisper")) > 0
-  );
+  assert.ok(find(".composer-fields .whisper .d-icon-eye-slash").length === 1);
 });
 
 QUnit.test("replying to post - reply_as_new_topic", async assert => {

test/javascripts/acceptance/composer-test.js.es6

@@ -375,9 +375,7 @@ QUnit.test("Composer can toggle whispers", async assert => {
   );
 
   assert.ok(
-    find(".composer-fields .whisper")
-      .text()
-      .indexOf(I18n.t("composer.whisper")) > 0,
+    find(".composer-fields .whisper .d-icon-eye-slash").length === 1,
     "it sets the post type to whisper"
   );
 
@@ -387,9 +385,7 @@ QUnit.test("Composer can toggle whispers", async assert => {
   );
 
   assert.ok(
-    find(".composer-fields .whisper")
-      .text()
-      .indexOf(I18n.t("composer.whisper")) <= 0,
+    find(".composer-fields .whisper .d-icon-eye-slash").length === 0,
     "it removes the whisper mode"
   );
 });
@@ -406,9 +402,7 @@ QUnit.test(
     );
 
     assert.ok(
-      find(".composer-fields .whisper")
-        .text()
-        .indexOf(I18n.t("composer.whisper")) > 0,
+      find(".composer-fields .whisper .d-icon-eye-slash").length === 1,
       "it sets the post type to whisper"
     );
 
@@ -417,9 +411,7 @@ QUnit.test(
 
     await click("#create-topic");
     assert.ok(
-      find(".composer-fields .whisper")
-        .text()
-        .indexOf(I18n.t("composer.whisper")) === -1,
+      find(".composer-fields .whisper .d-icon-eye-slash").length === 0,
       "it should reset the state of the composer's model"
     );
 

test/javascripts/acceptance/group-index-test.js.es6

@@ -6,7 +6,7 @@ QUnit.test("Viewing Members as anon user", async assert => {
   await visit("/groups/discourse");
 
   assert.ok(
-    count(".avatar-flair .fa-adjust") === 1,
+    count(".avatar-flair .d-icon-adjust") === 1,
     "it displays the group's avatar flair"
   );
   assert.ok(count(".group-members tr") > 0, "it lists group members");

test/javascripts/admin/components/themes-list-item-test.js.es6

@@ -11,7 +11,7 @@ componentTest("default theme", {
 
   test(assert) {
     assert.expect(1);
-    assert.equal(this.$(".fa-check").length, 1, "shows default theme icon");
+    assert.equal(this.$(".d-icon-check").length, 1, "shows default theme icon");
   }
 });
 
@@ -26,11 +26,15 @@ componentTest("pending updates", {
 
   test(assert) {
     assert.expect(1);
-    assert.equal(this.$(".fa-refresh").length, 1, "shows pending update icon");
+    assert.equal(
+      this.$(".d-icon-refresh").length,
+      1,
+      "shows pending update icon"
+    );
   }
 });
 
-componentTest("borken theme", {
+componentTest("broken theme", {
   template: "{{themes-list-item theme=theme}}",
   beforeEach() {
     this.set(
@@ -45,7 +49,7 @@ componentTest("borken theme", {
   test(assert) {
     assert.expect(1);
     assert.equal(
-      this.$(".fa-exclamation-circle").length,
+      this.$(".d-icon-exclamation-circle").length,
       1,
       "shows broken theme icon"
     );

test/javascripts/components/d-icon-test.js.es6

@@ -9,7 +9,10 @@ componentTest("default", {
     const html = this.$()
       .html()
       .trim();
-    assert.equal(html, '<i class="fa fa-bars d-icon d-icon-bars"></i>');
+    assert.equal(
+      html,
+      '<svg class="fa d-icon d-icon-bars svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#bars"></use></svg>'
+    );
   }
 });
 
@@ -22,7 +25,7 @@ componentTest("with replacement", {
       .trim();
     assert.equal(
       html,
-      '<i class="fa fa-exclamation-circle d-icon d-icon-d-watching"></i>'
+      '<svg class="fa d-icon d-icon-d-watching svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#exclamation-circle"></use></svg>'
     );
   }
 });

test/javascripts/lib/icon-library-test.js.es6

@@ -0,0 +1,34 @@
+import {
+  iconHTML,
+  iconNode,
+  convertIconClass
+} from "discourse-common/lib/icon-library";
+
+QUnit.module("lib:icon-library");
+
+QUnit.test("return icon markup", assert => {
+  assert.ok(iconHTML("bars").indexOf('use xlink:href="#bars"') > -1);
+
+  const nodeIcon = iconNode("bars");
+  assert.equal(nodeIcon.tagName, "svg");
+  assert.equal(
+    nodeIcon.properties.attributes.class,
+    "fa d-icon d-icon-bars svg-icon svg-node"
+  );
+});
+
+QUnit.test("convert icon names", assert => {
+  const fa47Icon = convertIconClass("fa-clock-o");
+  assert.ok(iconHTML(fa47Icon).indexOf("far-clock") > -1, "FA 4.7 syntax");
+
+  assert.ok(
+    iconHTML("area-chart").indexOf("chart-area") > -1,
+    "renamed FA 4.7 icons"
+  );
+
+  const fa5Icon = convertIconClass("fab fa-facebook");
+  assert.ok(iconHTML(fa5Icon).indexOf("fab-facebook") > -1, "FA 5 syntax");
+
+  const iconC = convertIconClass("  fab fa-facebook  ");
+  assert.ok(iconHTML(iconC).indexOf("  ") === -1, "trims whitespace");
+});

test/javascripts/widgets/avatar-flair-test.js.es6

@@ -0,0 +1,36 @@
+import { moduleForWidget, widgetTest } from "helpers/widget-test";
+
+moduleForWidget("avatar-flair");
+
+widgetTest("avatar flair with an icon", {
+  template: '{{mount-widget widget="avatar-flair" args=args}}',
+  beforeEach() {
+    this.set("args", {
+      primary_group_flair_url: "fa-bars",
+      primary_group_flair_bg_color: "CC0000",
+      primary_group_flair_color: "FFFFFF"
+    });
+  },
+  test(assert) {
+    assert.ok(this.$(".avatar-flair").length, "it has the tag");
+    assert.ok(this.$("svg.d-icon-bars").length, "it has the svg icon");
+    assert.equal(
+      this.$(".avatar-flair").attr("style"),
+      "background-color: #CC0000; color: #FFFFFF; ",
+      "it has styles"
+    );
+  }
+});
+
+widgetTest("avatar flair with an image", {
+  template: '{{mount-widget widget="avatar-flair" args=args}}',
+  beforeEach() {
+    this.set("args", {
+      primary_group_flair_url: "/images/avatar.png"
+    });
+  },
+  test(assert) {
+    assert.ok(this.$(".avatar-flair").length, "it has the tag");
+    assert.ok(this.$("svg").length === 0, "it does not have an svg icon");
+  }
+});

test/javascripts/widgets/widget-test.js.es6

@@ -217,7 +217,7 @@ widgetTest("handlebars d-icon", {
   },
 
   test(assert) {
-    assert.equal(this.$("i.fa.fa-arrow-down").length, 1);
+    assert.equal(this.$(".d-icon-arrow-down").length, 1);
   }
 });