Add infrastructure for Console dynamic plugins

.gitignore

@@ -11,10 +11,9 @@
 /frontend/__coverage__
 /frontend/__chrome_browser__
 /frontend/**/node_modules
-/frontend/public/bower_components
-/frontend/public/dist
-/frontend/npm-debug.log
-/frontend/yarn-error.log
+/frontend/**/npm-debug.log
+/frontend/**/yarn-error.log
+/frontend/**/dist
+/frontend/@types/gql
 /frontend/gui_test_screenshots
 /frontend/packages/integration-tests-cypress/cypress-a11y-report.json
-/frontend/@types

frontend/.eslintignore

@@ -1,8 +1,9 @@
 .yarn
 __coverage__
-public/dist
+**/node_modules
+**/dist
 *.min.js
 public/lib
-**/node_modules
 Godeps
 @types
+dynamic-demo-plugin

frontend/.prettierignore

@@ -1,5 +1,4 @@
-node_modules
-bower_components
 .cache-loader
 .yarn
-public/dist
+node_modules
+public/dist

frontend/public/declarations.d.ts → frontend/@types/console/declarations.d.ts

@@ -45,6 +45,8 @@ declare interface Window {
  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: Function;
  store?: {}; // Redux store
  pluginStore?: {}; // Console plugin store
+ loadPluginEntry?: Function;
+ loadPluginFromURL?: Function;
  Cypress?: {};
 }
 

frontend/__tests__/reducers/dashboards.spec.ts

@@ -34,7 +34,7 @@ describe('dashboardsReducer', () => {
  });
 
  it('updates watch timeout reference', () => {
- const timeout = { ref: noop, unref: noop };
+ const timeout = { ref: noop, refresh: noop, unref: noop } as NodeJS.Timer;
  const action = updateWatchTimeout(RESULTS_TYPE.URL, 'fooUrl', timeout);
  const initialState = Immutable.Map(defaults);
  const stateWithTimeout = dashboardsReducer(initialState, action);
@@ -43,7 +43,7 @@ describe('dashboardsReducer', () => {
  initialState.setIn([RESULTS_TYPE.URL, 'fooUrl', 'timeout'], timeout),
  );
 
- const nextTimeout = { ref: noop, unref: noop };
+ const nextTimeout = { ref: noop, refresh: noop, unref: noop } as NodeJS.Timer;
  const nextAction = updateWatchTimeout(RESULTS_TYPE.URL, 'fooUrl', nextTimeout);
 
  const nextState = dashboardsReducer(stateWithTimeout, nextAction);
@@ -69,7 +69,7 @@ describe('dashboardsReducer', () => {
  });
 
  it('stops watch', () => {
- const timeout = { ref: noop, unref: noop };
+ const timeout = { ref: noop, refresh: noop, unref: noop } as NodeJS.Timer;
  const action = stopWatch(RESULTS_TYPE.URL, 'fooUrl');
  const initialState = Immutable.Map(defaults).merge({
  [RESULTS_TYPE.URL]: { fooUrl: { active: 2, timeout } },

frontend/__tests__/reducers/ui.spec.ts

@@ -3,7 +3,8 @@ import uiReducer, { getActivePerspective, getDefaultPerspective } from '../../pu
 import { LAST_PERSPECTIVE_LOCAL_STORAGE_KEY } from '@console/shared';
 import * as UIActions from '../../public/actions/ui';
 import { RootState } from '@console/internal/redux';
-import { pluginStore, Perspective } from '../../public/plugins';
+import { Perspective } from '@console/plugin-sdk';
+import { pluginStore } from '../../public/plugins';
 import '../../__mocks__/localStorage';
 
 describe('getDefaultPerspective', () => {

frontend/dynamic-demo-plugin/console-extensions.json

@@ -0,0 +1,24 @@
+{
+ "$schema": "../packages/console-dynamic-plugin-sdk/dist/schema/console-extensions.json",
+ "data": [
+ {
+ "type": "console.flag",
+ "properties": {
+ "handler": {
+ "$codeRef": "barUtils.testHandler"
+ }
+ }
+ },
+ {
+ "type": "console.flag/model",
+ "properties": {
+ "flag": "EXAMPLE",
+ "model": {
+ "group": "kubevirt.io",
+ "version": "v1alpha3",
+ "kind": "ExampleModel"
+ }
+ }
+ }
+ ]
+}

frontend/dynamic-demo-plugin/package.json

@@ -0,0 +1,34 @@
+{
+ "name": "@console/dynamic-demo-plugin",
+ "version": "0.0.0-fixed",
+ "private": true,
+ "scripts": {
+ "clean": "rm -rf ./dist",
+ "build": "yarn clean && yarn ts-node ./node_modules/.bin/webpack",
+ "http-server": "http-server ./dist -p 9001 -c-1 --cors",
+ "ts-node": "ts-node -O '{\"module\":\"commonjs\"}' -I '/node_modules/(?!(@console)/)/'"
+ },
+ "dependencies": {
+ "react": "16.9.0"
+ },
+ "devDependencies": {
+ "@console/dynamic-plugin-sdk": "link:../packages/console-dynamic-plugin-sdk",
+ "@types/react": "16.8.13",
+ "http-server": "0.12.x",
+ "ts-loader": "6.2.2",
+ "ts-node": "5.0.1",
+ "typescript": "3.8.3",
+ "webpack": "5.0.0-beta.16",
+ "webpack-cli": "3.3.9"
+ },
+ "consolePlugin": {
+ "displayName": "Dynamic Demo Plugin",
+ "description": "Plasma reactors online. Initiating hyper drive.",
+ "exposedModules": {
+ "barUtils": "./utils/bar"
+ },
+ "dependencies": {
+ "@console/pluginAPI": "~0.0.1"
+ }
+ }
+}

frontend/dynamic-demo-plugin/src/components/Foo.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const Foo: React.FC<{ label: string }> = ({ label }) => <h2>Hello {label} Component!</h2>;
+
+export default Foo;

frontend/dynamic-demo-plugin/src/utils/bar.ts

@@ -0,0 +1,8 @@
+import { FeatureFlagHandler } from '@console/dynamic-plugin-sdk/src/extensions/feature-flags';
+
+export default (label: string) => `Hello ${label} Function!`;
+
+export const testHandler: FeatureFlagHandler = function() {
+ // eslint-disable-next-line no-console
+ console.log('testHandler called', arguments);
+};

frontend/dynamic-demo-plugin/tsconfig.json

@@ -0,0 +1,13 @@
+{
+ "compilerOptions": {
+ "baseUrl": ".",
+ "module": "esnext",
+ "moduleResolution": "node",
+ "target": "es2016",
+ "jsx": "react",
+ "allowJs": true,
+ "strict": true,
+ "noUnusedLocals": true
+ },
+ "include": ["src"]
+}

frontend/dynamic-demo-plugin/webpack.config.ts

@@ -0,0 +1,51 @@
+/* eslint-env node */
+
+import * as webpack from 'webpack';
+import * as path from 'path';
+import { ConsoleRemotePlugin } from '@console/dynamic-plugin-sdk/src/webpack/ConsoleRemotePlugin';
+
+const config: webpack.Configuration = {
+ context: path.resolve(__dirname, 'src'),
+ output: {
+ path: path.resolve(__dirname, 'dist'),
+ publicPath: 'http://localhost:9001/',
+ filename: '[name]-bundle.js',
+ chunkFilename: '[name]-chunk.js',
+ },
+ resolve: {
+ extensions: ['.ts', '.tsx', '.js', '.jsx'],
+ },
+ module: {
+ rules: [
+ {
+ test: /(\.jsx?)|(\.tsx?)$/,
+ exclude: /node_modules/,
+ use: [
+ {
+ loader: 'ts-loader',
+ options: {
+ configFile: path.resolve(__dirname, 'tsconfig.json'),
+ },
+ },
+ ],
+ },
+ ],
+ },
+ plugins: [new ConsoleRemotePlugin()],
+ mode: 'development',
+ devtool: 'source-map',
+ optimization: {
+ chunkIds: 'named',
+ minimize: false,
+ },
+};
+
+if (process.env.NODE_ENV === 'production') {
+ config.output.filename = '[name]-bundle-[hash].min.js';
+ config.output.chunkFilename = '[name]-chunk-[chunkhash].min.js';
+ config.mode = 'production';
+ config.optimization.chunkIds = 'deterministic';
+ config.optimization.minimize = true;
+}
+
+export default config;