Add ModelFeatureFlag and improve plugin support

openshift · May 13, 2019 · 52b6ec9 · 52b6ec9
1 parent 6ad3dae
commit 52b6ec9
Show file tree

Hide file tree

Showing 14 changed files with 340 additions and 120 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -131,6 +131,7 @@
     "@typescript-eslint/parser": "^1.7.0",
     "bootstrap-sass": "^3.3.7",
     "cache-loader": "1.x",
+    "chalk": "2.3.x",
     "chromedriver": "^2.43.3",
     "circular-dependency-plugin": "5.0.2",
     "css-loader": "0.28.x",

diff --git a/frontend/packages/console-demo-plugin/src/plugin.ts b/frontend/packages/console-demo-plugin/src/plugin.ts
@@ -4,6 +4,7 @@ import {
   ResourceNSNavItem,
   ResourceListPage,
   ResourceDetailPage,
+  ModelFeatureFlag,
 } from '@console/plugin-sdk';
 
 // TODO(vojtech): internal code needed by plugins should be moved to console-shared package
@@ -13,7 +14,8 @@ type ConsumedExtensions =
   | HrefNavItem
   | ResourceNSNavItem
   | ResourceListPage
-  | ResourceDetailPage;
+  | ResourceDetailPage
+  | ModelFeatureFlag;
 
 const plugin: Plugin<ConsumedExtensions> = [
   {
@@ -23,6 +25,7 @@ const plugin: Plugin<ConsumedExtensions> = [
       componentProps: {
         name: 'Test Href Link',
         href: '/test',
+        required: 'TEST_MODEL_FLAG',
       },
     },
   },
@@ -33,6 +36,7 @@ const plugin: Plugin<ConsumedExtensions> = [
       componentProps: {
         name: 'Test ResourceNS Link',
         resource: 'pods',
+        required: 'TEST_MODEL_FLAG',
       },
     },
   },
@@ -50,6 +54,13 @@ const plugin: Plugin<ConsumedExtensions> = [
       loader: () => import('@console/internal/components/pod' /* webpackChunkName: "pod" */).then(m => m.PodsDetailsPage),
     },
   },
+  {
+    type: 'FeatureFlag/Model',
+    properties: {
+      model: PodModel,
+      flag: 'TEST_MODEL_FLAG',
+    },
+  },
 ];
 
 export default plugin;
diff --git a/frontend/packages/console-plugin-sdk/src/codegen/__tests__/index.spec.ts b/frontend/packages/console-plugin-sdk/src/codegen/__tests__/index.spec.ts
@@ -0,0 +1,104 @@
+import {
+  Package,
+  PluginPackage,
+  isValidPluginPackage,
+  resolveActivePlugins,
+  getActivePluginsModule,
+} from '..';
+
+const templatePackage: Package = { name: 'test', version: '1.2.3', readme: '', _id: '@' };
+
+describe('codegen', () => {
+
+  describe('isValidPluginPackage', () => {
+    it('returns false if package.consolePlugin is missing', () => {
+      expect(isValidPluginPackage({
+        ...templatePackage,
+      })).toBe(false);
+    });
+
+    it('returns false if package.consolePlugin.entry is missing', () => {
+      expect(isValidPluginPackage({
+        ...templatePackage,
+        consolePlugin: {},
+      })).toBe(false);
+    });
+
+    it('returns false if package.consolePlugin.entry is an empty string', () => {
+      expect(isValidPluginPackage({
+        ...templatePackage,
+        consolePlugin: { entry: '' },
+      })).toBe(false);
+    });
+
+    it('returns true if package.consolePlugin.entry is not an empty string', () => {
+      expect(isValidPluginPackage({
+        ...templatePackage,
+        consolePlugin: { entry: 'plugin.ts' },
+      })).toBe(true);
+    });
+  });
+
+  describe('resolveActivePlugins', () => {
+    it('filters out packages which are not listed in appPackage.dependencies', () => {
+      const appPackage: Package = {
+        ...templatePackage,
+        name: 'app',
+        dependencies: {
+          'foo': '0.1.2',
+          'bar': '1.2.3',
+        },
+      };
+
+      const pluginPackages: PluginPackage[] = [
+        {
+          ...templatePackage,
+          name: 'bar',
+          version: '1.2.3',
+          consolePlugin: { entry: 'plugin.ts' },
+        },
+        {
+          ...templatePackage,
+          name: 'qux',
+          version: '2.3.4',
+          consolePlugin: { entry: 'plugin.ts' },
+        },
+      ];
+
+      expect(resolveActivePlugins(appPackage, pluginPackages)).toEqual([
+        { ...pluginPackages[0] },
+      ]);
+    });
+  });
+
+  describe('getActivePluginsModule', () => {
+    it('returns the source of a module that exports the list of active plugins', () => {
+      const pluginPackages: PluginPackage[] = [
+        {
+          ...templatePackage,
+          name: 'bar',
+          version: '1.2.3',
+          consolePlugin: { entry: 'src/plugin.ts' },
+        },
+        {
+          ...templatePackage,
+          name: 'qux-plugin',
+          version: '2.3.4',
+          consolePlugin: { entry: 'index.ts' },
+        },
+      ];
+
+      const expectedModule = `
+        const activePlugins = [];
+        import plugin_0 from 'bar/src/plugin.ts';
+        activePlugins.push(plugin_0);
+        import plugin_1 from 'qux-plugin/index.ts';
+        activePlugins.push(plugin_1);
+        export default activePlugins;
+      `.replace(/^\s+/gm, '');
+
+      expect(getActivePluginsModule(pluginPackages)).toBe(expectedModule);
+    });
+  });
+
+});
diff --git a/frontend/packages/console-plugin-sdk/src/codegen/index.ts b/frontend/packages/console-plugin-sdk/src/codegen/index.ts
@@ -3,19 +3,29 @@
 import * as path from 'path';
 import * as readPkg from 'read-pkg';
 
-type Package = readPkg.NormalizedPackageJson;
+export type Package = readPkg.NormalizedPackageJson;
 
-interface PluginPackage extends Package {
+export interface PluginPackage extends Package {
   consolePlugin: {
     entry: string;
   }
 }
 
-function isValidPluginPackage(pkg: Package): pkg is PluginPackage {
-  return (pkg as PluginPackage).consolePlugin && typeof (pkg as PluginPackage).consolePlugin.entry === 'string';
+export function isValidPluginPackage(pkg: Package): pkg is PluginPackage {
+  if (!(pkg as PluginPackage).consolePlugin) {
+    return false;
+  }
+
+  const entry = (pkg as PluginPackage).consolePlugin.entry;
+  return typeof entry === 'string' && entry.length > 0;
 }
 
-function readPackages(packageFiles: string[]) {
+/**
+ * Read package metadata and detect any plugins.
+ *
+ * @param packageFiles Paths to `package.json` files (all the monorepo packages).
+ */
+export function readPackages(packageFiles: string[]) {
   const pkgList: Package[] = packageFiles.map(file => readPkg.sync({ cwd: path.dirname(file), normalize: true }));
 
   return {
@@ -24,32 +34,29 @@ function readPackages(packageFiles: string[]) {
   };
 }
 
+/**
+ * Resolve the list of active plugins.
+ */
+export function resolveActivePlugins(appPackage: Package, pluginPackages: PluginPackage[]) {
+  return pluginPackages.filter(pkg => appPackage.dependencies[pkg.name] === pkg.version);
+}
+
 /**
  * Generate the "active plugins" module source.
- *
- * @param packageFiles Paths to `package.json` files (all the monorepo packages).
  */
-export function getActivePluginsModule(packageFiles: string[]): string {
-  const { appPackage, pluginPackages } = readPackages(packageFiles);
+export function getActivePluginsModule(activePluginPackages: PluginPackage[]): string {
   let output = `
     const activePlugins = [];
   `;
 
-  if (appPackage) {
-    for (const depName of Object.keys(appPackage.dependencies)) {
-      const depVersion = appPackage.dependencies[depName];
-      const foundPluginPackage = pluginPackages.find(pkg => pkg.name === depName && pkg.version === depVersion);
-
-      if (foundPluginPackage) {
-        const importName = `plugin_${pluginPackages.indexOf(foundPluginPackage)}`;
-        const importPath = `${foundPluginPackage.name}/${foundPluginPackage.consolePlugin.entry}`;
-        output = `
-          ${output}
-          import ${importName} from '${importPath}';
-          activePlugins.push(${importName});
-        `;
-      }
-    }
+  for (const pkg of activePluginPackages) {
+    const importName = `plugin_${activePluginPackages.indexOf(pkg)}`;
+    const importPath = `${pkg.name}/${pkg.consolePlugin.entry}`;
+    output = `
+      ${output}
+      import ${importName} from '${importPath}';
+      activePlugins.push(${importName});
+    `;
   }
 
   output = `

diff --git a/frontend/packages/console-plugin-sdk/src/registry.ts b/frontend/packages/console-plugin-sdk/src/registry.ts
@@ -1,5 +1,5 @@
 import * as _ from 'lodash-es';
-import { Extension, PluginList, isNavItem, isResourcePage } from './typings';
+import { Extension, PluginList, isNavItem, isResourcePage, isFeatureFlag } from './typings';
 
 /**
  * Registry used to query for Console extensions.
@@ -20,4 +20,8 @@ export class ExtensionRegistry {
     return this.extensions.filter(isResourcePage);
   }
 
+  public getFeatureFlags() {
+    return this.extensions.filter(isFeatureFlag);
+  }
+
 }
diff --git a/frontend/packages/console-plugin-sdk/src/typings/features.ts b/frontend/packages/console-plugin-sdk/src/typings/features.ts
@@ -0,0 +1,24 @@
+import { Extension } from '.';
+import { K8sKind } from '@console/internal/module/k8s';
+
+namespace ExtensionProperties {
+  export interface ModelFeatureFlag {
+    model: K8sKind;
+    flag: string;
+  }
+}
+
+export interface ModelFeatureFlag extends Extension<ExtensionProperties.ModelFeatureFlag> {
+  type: 'FeatureFlag/Model';
+}
+
+// TODO(vojtech): add ActionFeatureFlag
+export type FeatureFlag = ModelFeatureFlag;
+
+export function isModelFeatureFlag(e: Extension<any>): e is ModelFeatureFlag {
+  return e.type === 'FeatureFlag/Model';
+}
+
+export function isFeatureFlag(e: Extension<any>): e is FeatureFlag {
+  return isModelFeatureFlag(e);
+}
diff --git a/frontend/packages/console-plugin-sdk/src/typings/index.ts b/frontend/packages/console-plugin-sdk/src/typings/index.ts
@@ -62,5 +62,6 @@ export type PluginList = Plugin<Extension<any>>[];
 
 // TODO(vojtech): internal code needed by plugin SDK should be moved to console-shared package
 
+export * from './features';
 export * from './nav';
 export * from './pages';
diff --git a/frontend/packages/console-plugin-sdk/src/typings/nav.ts b/frontend/packages/console-plugin-sdk/src/typings/nav.ts
@@ -1,36 +1,38 @@
 import { Extension } from '.';
 import { K8sKind } from '@console/internal/module/k8s';
 
-export interface NavItemProperties {
-  // TODO(vojtech): link to existing nav sections by value
-  section: 'Home' | 'Workloads';
-  componentProps: {
-    name: string;
-    required?: string;
-    disallowed?: string;
-    startsWith?: string[];
+namespace ExtensionProperties {
+  interface NavItem {
+    // TODO(vojtech): link to existing nav sections by value
+    section: 'Home' | 'Workloads';
+    componentProps: {
+      name: string;
+      required?: string;
+      disallowed?: string;
+      startsWith?: string[];
+    }
   }
-}
 
-export interface HrefProperties extends NavItemProperties {
-  componentProps: NavItemProperties['componentProps'] & {
-    href: string;
-    activePath?: string;
+  export interface HrefNavItem extends NavItem {
+    componentProps: NavItem['componentProps'] & {
+      href: string;
+      activePath?: string;
+    }
   }
-}
 
-export interface ResourceNSProperties extends NavItemProperties {
-  componentProps: NavItemProperties['componentProps'] & {
-    resource: string;
-    model?: K8sKind;
+  export interface ResourceNSNavItem extends NavItem {
+    componentProps: NavItem['componentProps'] & {
+      resource: string;
+      model?: K8sKind;
+    }
   }
 }
 
-export interface HrefNavItem extends Extension<HrefProperties> {
+export interface HrefNavItem extends Extension<ExtensionProperties.HrefNavItem> {
   type: 'NavItem/Href';
 }
 
-export interface ResourceNSNavItem extends Extension<ResourceNSProperties> {
+export interface ResourceNSNavItem extends Extension<ExtensionProperties.ResourceNSNavItem> {
   type: 'NavItem/ResourceNS';
 }
 

diff --git a/frontend/packages/console-plugin-sdk/src/typings/pages.ts b/frontend/packages/console-plugin-sdk/src/typings/pages.ts
@@ -2,16 +2,18 @@ import * as React from 'react';
 import { Extension } from '.';
 import { K8sKind } from '@console/internal/module/k8s';
 
-export interface ResourcePageProperties {
-  model: K8sKind;
-  loader: () => Promise<React.ComponentType<any>>;
+namespace ExtensionProperties {
+  export interface ResourcePage {
+    model: K8sKind;
+    loader: () => Promise<React.ComponentType<any>>;
+  }
 }
 
-export interface ResourceListPage extends Extension<ResourcePageProperties> {
+export interface ResourceListPage extends Extension<ExtensionProperties.ResourcePage> {
   type: 'ResourcePage/List';
 }
 
-export interface ResourceDetailPage extends Extension<ResourcePageProperties> {
+export interface ResourceDetailPage extends Extension<ExtensionProperties.ResourcePage> {
   type: 'ResourcePage/Detail';
 }
 

diff --git a/frontend/public/components/app.jsx b/frontend/public/components/app.jsx
@@ -356,6 +356,7 @@ window.onunhandledrejection = function(e) {
 
 if ('serviceWorker' in navigator) {
   if (window.SERVER_FLAGS.loadTestFactor > 1) {
+    // eslint-disable-next-line import/no-unresolved
     import('file-loader?name=load-test.sw.js!../load-test.sw.js')
       .then(() => navigator.serviceWorker.register('/load-test.sw.js'))
       .then(() => new Promise(r => navigator.serviceWorker.controller ? r() : navigator.serviceWorker.addEventListener('controllerchange', () => r())))