Introduce a way to use injectables for UI

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/renderer/cluster-frame.tsx

@@ -22,6 +22,7 @@ import React from "react";
 import { observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Redirect, Route, Router, Switch } from "react-router";
+import { DiContextProvider } from "@ogre-tools/injectable-react";
 import { history } from "./navigation";
 import { NotFound } from "./components/+404";
 import { UserManagement } from "./components/+user-management/user-management";
@@ -73,12 +74,14 @@ import { watchHistoryState } from "./remote-helpers/history-updater";
 import { unmountComponentAtNode } from "react-dom";
 import { PortForwardDialog } from "./port-forward";
 import { DeleteClusterDialog } from "./components/delete-cluster-dialog";
+import { getDi } from "./components/getDi";
 
 @observer
 export class ClusterFrame extends React.Component {
   static clusterId: ClusterId;
   static readonly logPrefix = "[CLUSTER-FRAME]:";
   static displayName = "ClusterFrame";
+  diContainer = getDi();
 
   constructor(props: {}) {
     super(props);
@@ -193,40 +196,42 @@ export class ClusterFrame extends React.Component {
 
   render() {
     return (
-      <Router history={history}>
-        <ErrorBoundary>
-          <MainLayout sidebar={<Sidebar/>} footer={<Dock/>}>
-            <Switch>
-              <Route component={ClusterOverview} {...routes.clusterRoute}/>
-              <Route component={Nodes} {...routes.nodesRoute}/>
-              <Route component={Workloads} {...routes.workloadsRoute}/>
-              <Route component={Config} {...routes.configRoute}/>
-              <Route component={Network} {...routes.networkRoute}/>
-              <Route component={Storage} {...routes.storageRoute}/>
-              <Route component={Namespaces} {...routes.namespacesRoute}/>
-              <Route component={Events} {...routes.eventRoute}/>
-              <Route component={CustomResources} {...routes.crdRoute}/>
-              <Route component={UserManagement} {...routes.usersManagementRoute}/>
-              <Route component={Apps} {...routes.appsRoute}/>
-              {this.renderExtensionTabLayoutRoutes()}
-              {this.renderExtensionRoutes()}
-              <Redirect exact from="/" to={this.startUrl}/>
-              <Route component={NotFound}/>
-            </Switch>
-          </MainLayout>
-          <Notifications/>
-          <ConfirmDialog/>
-          <KubeObjectDetails/>
-          <KubeConfigDialog/>
-          <DeploymentScaleDialog/>
-          <StatefulSetScaleDialog/>
-          <ReplicaSetScaleDialog/>
-          <CronJobTriggerDialog/>
-          <PortForwardDialog/>
-          <DeleteClusterDialog/>
-          <CommandContainer clusterId={ClusterFrame.clusterId}/>
-        </ErrorBoundary>
-      </Router>
+      <DiContextProvider value={{ di: this.diContainer }}>
+        <Router history={history}>
+          <ErrorBoundary>
+            <MainLayout sidebar={<Sidebar/>} footer={<Dock/>}>
+              <Switch>
+                <Route component={ClusterOverview} {...routes.clusterRoute}/>
+                <Route component={Nodes} {...routes.nodesRoute}/>
+                <Route component={Workloads} {...routes.workloadsRoute}/>
+                <Route component={Config} {...routes.configRoute}/>
+                <Route component={Network} {...routes.networkRoute}/>
+                <Route component={Storage} {...routes.storageRoute}/>
+                <Route component={Namespaces} {...routes.namespacesRoute}/>
+                <Route component={Events} {...routes.eventRoute}/>
+                <Route component={CustomResources} {...routes.crdRoute}/>
+                <Route component={UserManagement} {...routes.usersManagementRoute}/>
+                <Route component={Apps} {...routes.appsRoute}/>
+                {this.renderExtensionTabLayoutRoutes()}
+                {this.renderExtensionRoutes()}
+                <Redirect exact from="/" to={this.startUrl}/>
+                <Route component={NotFound}/>
+              </Switch>
+            </MainLayout>
+            <Notifications/>
+            <ConfirmDialog/>
+            <KubeObjectDetails/>
+            <KubeConfigDialog/>
+            <DeploymentScaleDialog/>
+            <StatefulSetScaleDialog/>
+            <ReplicaSetScaleDialog/>
+            <CronJobTriggerDialog/>
+            <PortForwardDialog/>
+            <DeleteClusterDialog/>
+            <CommandContainer clusterId={ClusterFrame.clusterId}/>
+          </ErrorBoundary>
+        </Router>
+      </DiContextProvider>
     );
   }
 }

src/renderer/components/getDi.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { createContainer } from "@ogre-tools/injectable";
+import type { IConfigurableDependencyInjectionContainer } from "@ogre-tools/injectable";
+
+export const getDi = () => {
+  const di: IConfigurableDependencyInjectionContainer = createContainer(
+    () => require.context("./", true, /\.injectable\.(ts|tsx)$/),
+  );
+
+  return di;
+};

src/renderer/components/getDiForUnitTesting.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import glob from "glob";
+import { memoize } from "lodash/fp";
+
+import {
+  createContainer,
+  IConfigurableDependencyInjectionContainer,
+} from "@ogre-tools/injectable";
+
+export const getDiForUnitTesting = () => {
+  const di: IConfigurableDependencyInjectionContainer = createContainer();
+
+  getInjectableFilePaths()
+    .map(key => {
+      const injectable = require(key).default;
+
+      return {
+        id: key,
+        ...injectable,
+        aliases: [injectable, ...(injectable.aliases || [])],
+      };
+    })
+
+    .forEach(injectable => di.register(injectable));
+
+  di.preventSideEffects();
+
+  return di;
+};
+
+const getInjectableFilePaths = memoize(() =>
+  glob.sync("./**/*.injectable.{ts,tsx}", { cwd: __dirname }),
+);