Merge pull request #568 from kinvolk/svg-fix

SVG fix, headlamp-plugin 0.4.9

Author: joaquimrocha

frontend/package.json

@@ -90,7 +90,7 @@
     "test": "cross-env TEST_TZ=true react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint -c package.json --ext .js,.ts,.tsx src/ ../app/electron ../plugins/headlamp-plugin --ignore-pattern ../plugins/headlamp-plugin/template",
-    "format": "prettier --config package.json --write src ../app/electron ../plugins/headlamp-plugin/bin ../plugins/headlamp-plugin/lib ../plugins/headlamp-plugin/config",
+    "format": "prettier --config package.json --write src ../app/electron ../plugins/headlamp-plugin/bin ../plugins/headlamp-plugin/lib ../plugins/headlamp-plugin/config ../plugins/headlamp-plugin/template",
     "format-check": "prettier --config package.json --check src ../app/electron ../plugins/headlamp-plugin",
     "storybook": "start-storybook -p 6006 -s public",
     "build-typedoc": "npx typedoc",

frontend/src/plugin/index.ts

@@ -17,6 +17,7 @@ window.pluginLib = {
   MuiCore: require('@material-ui/core'),
   MuiStyles: require('@material-ui/styles'),
   React: require('react'),
+  ReactDOM: require('react-dom'),
   Recharts: require('recharts'),
   ReactRouter: require('react-router-dom'),
   ReactRedux: require('react-redux'),

frontend/src/plugin/lib.ts

@@ -62,9 +62,10 @@
  *
  * Third party Libraries in window.pluginLib that can be used by plugins.
  *
- * - ReactRedux, {@link https://www.npmjs.com/package/@material-ui/core @material-ui/core}
+ * - MuiCore, {@link https://www.npmjs.com/package/@material-ui/core @material-ui/core}
  * - MuiStyles, {@link https://www.npmjs.com/package/@material-ui/styles @material-ui/styles}
  * - React, {@link https://www.npmjs.com/package/react react}
+ * - ReactDOM, {@link https://www.npmjs.com/package/react-dom react-dom}
  * - ReactRedux, {@link https://www.npmjs.com/package/react-redux react-redux}
  * - Iconify, {@link https://www.npmjs.com/package/@iconify/react @iconify/react}
  * - Lodash, {@link https://www.npmjs.com/package/lodash lodash}
@@ -78,9 +79,6 @@
 import { ClusterRequest, setCluster } from '../lib/k8s/apiProxy';
 import Registry from './registry';
 
-// @todo: types for CommonComponents, K8s, and Utils should be put into plugins-pkg.
-//        Because available in window.pluginLib.
-
 /**
  * Plugins should call Headlamp.registerPlugin(pluginId: string, pluginObj: Plugin) to register themselves.
  *

plugins/headlamp-plugin/config/webpack.config.js

@@ -5,6 +5,7 @@ const externalModules = {
   recharts: 'pluginLib.Recharts',
   'react-router': 'pluginLib.ReactRouter',
   'react-redux': 'pluginLib.ReactRedux',
+  'react-dom': 'pluginLib.ReactDOM',
   '@iconify/react': 'pluginLib.Iconify',
   lodash: 'pluginLib.Lodash',
   notistack: 'pluginLib.Notistack',
@@ -67,7 +68,27 @@ module.exports = {
         },
       },
       {
-        test: /\.(jpe?g|gif|png|svg)$/i,
+        test: /\.svg$/,
+        use: [
+          {
+            loader: require.resolve('@svgr/webpack'),
+            options: {
+              prettier: false,
+              svgo: false,
+              svgoConfig: {
+                plugins: [{ removeViewBox: false }],
+              },
+              titleProp: true,
+              ref: true,
+            },
+          },
+        ],
+        issuer: {
+          and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+        },
+      },
+      {
+        test: /\.(jpe?g|gif|png)$/i,
         use: [
           {
             loader: require.resolve('url-loader'),

plugins/headlamp-plugin/lib/additional.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly PUBLIC_URL: string;
+  }
+}
+
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+
+  const src: string;
+  export default src;
+}