add-mocks (#72)

Author: yaacov

.github/workflows/pr__unit_tests.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Yarn
         uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
           cache: 'yarn'
       - run: yarn install
       - run: yarn build
@@ -33,7 +33,7 @@ jobs:
       - name: Setup Yarn
         uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '16'
           cache: 'yarn'
       - run: yarn install
 

__mocks__/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}

bridge/dynamic-plugin-sdk-mocks/index.ts

@@ -0,0 +1 @@
+export * from './useK8sWatchResource';

bridge/dynamic-plugin-sdk-mocks/useK8sWatchResource.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { K8sResourceCommon, WatchK8sResource } from '@openshift-console/dynamic-plugin-sdk';
+
+const getURL = (props: WatchK8sResource): string => {
+  const {name, namespace, namespaced, isList, groupVersionKind} = props;
+  const {group, version, kind} = groupVersionKind;
+  if (!group || !kind || !version) {
+    return;
+  }
+
+  const baseURL ='/api/kubernetes/apis/' + group + '/' + version;
+  const namespaceURL =
+    namespaced ? '/namespaces/' + (namespace.toString() || 'default') : '';
+  const resourceKind = kind.toLowerCase();
+  const pluralize = isList ? 's' : '';
+  const resourceName = name ? name.toString() : '';
+  const url = baseURL + namespaceURL + '/' + resourceKind + pluralize + '/' + resourceName;
+
+  return url;
+};
+
+export const useK8sWatchResource = <R extends K8sResourceCommon | K8sResourceCommon[]>(
+    props: WatchK8sResource | null,
+  ) => {
+    const [loaded, setLoaded] = React.useState(false);
+    const [loadError, setLoadError] = React.useState<string>(null);
+    const [data, setData] = React.useState<R>();
+  
+    React.useEffect(() => {
+      const url = getURL(props);
+  
+      fetch(url)
+        .then(response => response.json())
+        .then((jsonData) => {
+          setData(jsonData as R);
+          setLoaded(true);
+        })
+        .catch((error) => {
+          setLoadError(error);
+          setLoaded(true);
+        });
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props?.name, props?.namespace]);
+  
+    return [data, loaded, loadError];
+  };
+
+  export default useK8sWatchResource;

package.json

@@ -10,7 +10,7 @@
   "author": "Yaacov Zamir <[email protected]>",
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "rollup -c",
+    "build": "rollup -c rollup.config.js",
     "lint": "eslint src --color",
     "lint:fix": "yarn lint --fix",
     "check-types": "tsc",
@@ -74,6 +74,7 @@
     "rollup": "^2.63.0",
     "rollup-plugin-dts": "^4.1.0",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-svg": "^2.0.0",
     "sass": "^1.49.4",
     "sass-loader": "^12.4.0",
     "style-loader": "^3.3.1",

rollup.config.js

@@ -27,7 +27,7 @@ export default [
     external: ['react', 'react-dom'],
   },
   {
-    input: 'dist/esm/types/src/index.d.ts',
+    input: 'src/index.ts',
     output: [{ file: 'dist/index.d.ts', format: 'esm' }],
     plugins: [dts()],
     external: ['react', 'react-dom', /\.(css|less|scss)$/],

src/components/utils/ConditionLabel/ConditionLabel.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Label, Popover, PopoverPosition } from '@patternfly/react-core';
+
 export interface k8sStatusConditions {
   /**
    * Type indicate which type of condition is.
@@ -26,12 +27,9 @@ export interface k8sStatusConditions {
  *
  * On mouse click it creates a popover to explain the state in a more disursive way.
  */
-export const ConditionLabel: React.FC<k8sStatusConditions> = React.memo((condition) => {
+export const ConditionLabel: React.FC<k8sStatusConditions> = ({ message, status, reason }) => {
   const preventLabelLink = React.useCallback((e) => e.preventDefault(), []);
-  const getBodyContent = React.useCallback(
-    () => <div>{condition?.message}</div>,
-    [condition?.message],
-  );
+  const getBodyContent = React.useCallback(() => <div>{message}</div>, [message]);
 
   return (
     <Popover
@@ -40,9 +38,9 @@ export const ConditionLabel: React.FC<k8sStatusConditions> = React.memo((conditi
       bodyContent={getBodyContent}
     >
       <Label color="grey" isTruncated href="#" onClick={preventLabelLink}>
-        {condition?.reason}={condition?.status}
+        {reason}={status}
       </Label>
     </Popover>
   );
-});
+};
 ConditionLabel.displayName = 'ConditionLabel';

styleguide.config.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
-const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = {
   propsParser: require('react-docgen-typescript').withDefaultConfig().parse,

styleguide.config.proxy.js

@@ -60,15 +60,18 @@ module.exports = {
   },
   assetsDir: path.join(__dirname, 'styleguide/assets'),
   configureServer(app) {
-		app.use('/api/kubernetes', createProxyMiddleware({
-      target: process.env.BRIDGE_CLUSTER_ENDPOINT,
-      secure: false,
-      changeOrigin: true,
-      ws: true,
-      headers: {Authorization:`Bearer ${process.env.BRIDGE_AUTH_BEARER_TOKEN}`},
-      pathRewrite: {
+    app.use(
+      '/api/kubernetes',
+      createProxyMiddleware({
+        target: process.env.BRIDGE_CLUSTER_ENDPOINT,
+        secure: false,
+        changeOrigin: true,
+        ws: true,
+        headers: { Authorization: `Bearer ${process.env.BRIDGE_AUTH_BEARER_TOKEN}` },
+        pathRewrite: {
           [`^/api/kubernetes`]: '',
-      },
-    }));
-	},
+        },
+      }),
+    );
+  },
 };

styleguide/webpack.config.js

@@ -5,7 +5,7 @@ const webpack = require('webpack');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 const allKubevirtTypes = fs
-  .readdirSync(path.resolve(__dirname, '../node_modules/@kubevirt-ui/kubevirt-api/kubevirt/models'))
+  .readdirSync(path.resolve(__dirname, '../node_modules/@kubevirt-ui/kubevirt-api'))
   .map((filename) => filename.replace(/\.[^/.]+$/, ''));
 
 module.exports = () => {
@@ -54,6 +54,9 @@ module.exports = () => {
     },
     resolve: {
       extensions: ['.js', '.ts', '.tsx', '.jsx'],
+      alias: {
+        '@openshift-console/dynamic-plugin-sdk': '@dynamic-plugin-sdk-mocks',
+      },
       plugins: [
         new TsconfigPathsPlugin({
           configFile: path.resolve(__dirname, '../tsconfig.json'),