[CORL-544] use react helmet to add favicon declarations to head (#2595)

* use react helmet to add favicon declarations to head

* rename adminHead to head

* fix: case

package-lock.json

@@ -4168,6 +4168,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-helmet": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-5.0.10.tgz",
+      "integrity": "sha512-wGr0J7yncqwOS4ae+yYeMd4L3Gh43CgYcbq9bXEeSozB4d/+Z/XLT9wyMUwfWImWtOLCFLP6Xnt7w5P6+02gZg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-relay": {
       "version": "1.3.14",
       "resolved": "https://registry.npmjs.org/@types/react-relay/-/react-relay-1.3.14.tgz",
@@ -28824,6 +28833,11 @@
       "integrity": "sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==",
       "dev": true
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "react-feather": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-1.1.6.tgz",
@@ -28839,6 +28853,17 @@
         "@babel/runtime": "^7.1.2"
       }
     },
+    "react-helmet": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz",
+      "integrity": "sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.5.4",
+        "react-fast-compare": "^2.0.2",
+        "react-side-effect": "^1.1.0"
+      }
+    },
     "react-hot-loader": {
       "version": "4.8.4",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.8.4.tgz",
@@ -29151,6 +29176,14 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-side-effect": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.2.0.tgz",
+      "integrity": "sha512-v1ht1aHg5k/thv56DRcjw+WtojuuDHFUgGfc+bFHOWsF4ZK6C2V57DO0Or0GPsg6+LSTE0M6Ry/gfzhzSwbc5w==",
+      "requires": {
+        "shallowequal": "^1.0.1"
+      }
+    },
     "react-sizes": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-sizes/-/react-sizes-1.0.4.tgz",
@@ -30671,8 +30704,7 @@
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "dev": true
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
     },
     "shebang-command": {
       "version": "1.2.0",

package.json

@@ -125,6 +125,7 @@
     "prom-client": "^11.3.0",
     "proxy-agent": "^3.1.0",
     "querystringify": "^2.1.0",
+    "react-helmet": "^5.2.1",
     "source-map-support": "^0.5.12",
     "stack-utils": "^1.0.2",
     "striptags": "^3.1.1",
@@ -135,12 +136,6 @@
     "verror": "^1.10.0"
   },
   "devDependencies": {
-    "farce": "^0.2.6",
-    "common-tags": "^1.8.0",
-    "found": "^0.4.0-alpha.17",
-    "found-relay": "^0.4.0-alpha.8",
-    "react-relay-network-modern": "^4.0.4",
-    "@types/archiver": "^3.0.0",
     "@babel/core": "^7.4.5",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-modules-commonjs": "^7.4.4",
@@ -152,6 +147,7 @@
     "@coralproject/rte": "^0.10.15",
     "@intervolga/optimize-cssnano-plugin": "^1.0.6",
     "@types/agent-base": "^4.2.0",
+    "@types/archiver": "^3.0.0",
     "@types/basic-auth": "^1.1.2",
     "@types/bcryptjs": "^2.4.1",
     "@types/bull": "^3.5.12",
@@ -209,6 +205,7 @@
     "@types/react": "^16.8.15",
     "@types/react-copy-to-clipboard": "^4.2.6",
     "@types/react-dom": "^16.8.4",
+    "@types/react-helmet": "^5.0.10",
     "@types/react-relay": "^1.3.14",
     "@types/react-responsive": "^3.0.1",
     "@types/react-test-renderer": "^16.8.1",
@@ -249,6 +246,7 @@
     "classnames": "^2.2.6",
     "commander": "^2.20.0",
     "comment-json": "^1.1.3",
+    "common-tags": "^1.8.0",
     "compression-webpack-plugin": "^2.0.0",
     "copy-webpack-plugin": "^5.0.3",
     "cross-spawn": "^6.0.5",
@@ -261,12 +259,15 @@
     "enzyme-adapter-react-16": "^1.12.1",
     "enzyme-to-json": "^3.3.5",
     "eventemitter2": "^5.0.1",
+    "farce": "^0.2.6",
     "final-form": "4.11.0",
     "flat": "^4.1.0",
     "fluent-intl-polyfill": "^0.1.0",
     "fluent-langneg": "^0.1.1",
     "fluent-react": "^0.8.4",
     "fork-ts-checker-webpack-plugin": "^1.3.0",
+    "found": "^0.4.0-alpha.17",
+    "found-relay": "^0.4.0-alpha.8",
     "graphql-schema-linter": "^0.2.0",
     "graphql-schema-typescript": "^1.2.9",
     "gulp": "^4.0.2",
@@ -312,6 +313,7 @@
     "react-final-form": "4.0.2",
     "react-popper": "^1.3.2",
     "react-relay": "^4.0.0",
+    "react-relay-network-modern": "^4.0.4",
     "react-responsive": "^7.0.0",
     "react-test-renderer": "^16.9.0-alpha.0",
     "react-timeago": "^4.1.9",

src/core/client/admin/Head.tsx

@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from "react";
+import { Helmet } from "react-helmet";
+
+import favicon120 from "./assets/favicon120.png";
+import favicon128 from "./assets/favicon128.png";
+import favicon152 from "./assets/favicon152.png";
+import favicon180 from "./assets/favicon180.png";
+import favicon196 from "./assets/favicon196.png";
+import favicon228 from "./assets/favicon228.png";
+import favicon32 from "./assets/favicon32.png";
+import favicon57 from "./assets/favicon57.png";
+import favicon76 from "./assets/favicon76.png";
+import favicon96 from "./assets/favicon96.png";
+
+const Head: FunctionComponent = () => (
+  <Helmet>
+    <link rel="icon" href={favicon32} sizes="32x32" />
+    <link rel="icon" href={favicon57} sizes="57x57" />
+    <link rel="icon" href={favicon76} sizes="76x76" />
+    <link rel="icon" href={favicon96} sizes="96x96" />
+    <link rel="icon" href={favicon128} sizes="128x128" />
+    <link rel="icon" href={favicon228} sizes="228x228" />
+    <link rel="shortcut icon" sizes="196x196" href={favicon196} />
+    <link rel="apple-touch-icon" href={favicon120} sizes="120x120" />
+    <link rel="apple-touch-icon" href={favicon152} sizes="152x152" />
+    <link rel="apple-touch-icon" href={favicon180} sizes="180x180" />
+  </Helmet>
+);
+
+export default Head;

src/core/client/admin/index.tsx

@@ -3,6 +3,7 @@ import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
 import App from "./App";
+import Head from "./Head";
 import { initLocalState } from "./local";
 import localesData from "./locales";
 
@@ -17,6 +18,7 @@ async function main() {
 
   const Index: FunctionComponent = () => (
     <ManagedCoralContextProvider>
+      <Head />
       <App />
     </ManagedCoralContextProvider>
   );

src/types/images.d.ts

@@ -1,2 +1,3 @@
-// Allowing loading svg files.
+// Allowing loading svg and png files.
 declare module "*.svg";
+declare module "*.png";