Merge pull request #163 from jpinsonneau/316

NETOBSERV-316 Console plugin as standalone

Author: jpinsonneau

Makefile

@@ -91,9 +91,17 @@ build-frontend: install-frontend fmt-frontend
 	@echo "### Building frontend"
 	cd web && npm run build
 
+.PHONY: build-frontend-standalone
+build-frontend-standalone: install-frontend fmt-frontend
+	@echo "### Building frontend standalone"
+	cd web && npm run build:standalone
+
 .PHONY: build
 build: build-backend build-frontend
 
+.PHONY: build-standalone
+build-standalone: build-backend build-frontend-standalone
+
 .PHONY: frontend
 frontend: build-frontend lint-frontend test-frontend
 
@@ -128,11 +136,23 @@ serve-mock:
 	./plugin-backend --loki-mock --loglevel trace
 
 .PHONY: start
-start: build-backend 
+start: build-backend install-frontend
 	@echo "### Starting backend on http://localhost:9002"
 	bash -c "trap 'fuser -k 9002/tcp' EXIT; \
 					./plugin-backend -port 9002 & cd web && npm run start" 
 
+.PHONY: start-standalone
+start-standalone: build-backend install-frontend
+	@echo "### Starting backend on http://localhost:9002"
+	bash -c "trap 'fuser -k 9002/tcp' EXIT; \
+					./plugin-backend -port 9002 & cd web && npm run start:standalone"
+
+.PHONY: start-standalone-mock
+start-standalone-mock: build-backend install-frontend
+	@echo "### Starting backend on http://localhost:9002 using mock"
+	bash -c "trap 'fuser -k 9002/tcp' EXIT; \
+					./plugin-backend -port 9002 --loki-mock --loglevel trace & cd web && npm run start:standalone"
+
 .PHONY: bridge
 bridge:
 ifeq (,${CONSOLE})

web/moduleMapper/dummy.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { ResourceLinkProps } from '@openshift-console/dynamic-plugin-sdk';
+import { useK8sModelsWithColors } from '../src/utils/k8s-models-hook';
+import { k8sModels } from './k8s-models';
+
+// This dummy file is used to resolve @Console imports from @openshift-console for JEST / Standalone
+// You can add any exports needed here
+// Check "moduleNameMapper" in package.json for jest
+// and "NormalModuleReplacementPlugin" in webpack.standalone.ts 
+export class Dummy extends Error {
+  constructor() {
+    super('Dummy file for exports');
+  }
+}
+
+export function isModelFeatureFlag(e: never) {
+  return null;
+}
+
+export function useResolvedExtensions(isModelFeatureFlag: boolean) {
+  return [
+    [{
+      flags: "dummy",
+      model: "",
+    }],
+    undefined, undefined];
+}
+
+export function useK8sModels() {
+  return [
+    k8sModels,
+    false
+  ]
+}
+
+export const ResourceLink: React.FC<ResourceLinkProps> = ({
+  className,
+  displayName,
+  kind,
+  name,
+  children,
+  dataTest,
+}) => {
+  const k8sModels = useK8sModelsWithColors();
+  const value = displayName ? displayName : name;
+
+  return (
+    //TODO: add icon here
+    <span className={className}>
+      <span
+        className="co-m-resource-icon"
+        style={{ backgroundColor: k8sModels[kind!].color }}
+        title={kind}>
+        {k8sModels[kind!].abbr}
+      </span>
+      <span className="co-resource-item__resource-name" data-test-id={value} data-test={dataTest}>
+        {value}
+      </span>
+      {children}
+    </span>
+  );
+};