Add skeleton to include operators in the dashboard (#1555)

chart/kubeapps/values.yaml

@@ -641,3 +641,4 @@ authProxy:
 ## These are used to switch on in development features or new features not yet released.
 featureFlags:
   reposPerNamespace: false
+  operators: false

dashboard/public/config.json

@@ -5,6 +5,7 @@
   "oauthLoginURI": "/oauth2/start",
   "oauthLogoutURI": "/oauth2/sign_out",
   "featureFlags": {
-    "reposPerNamespace": false
+    "reposPerNamespace": false,
+    "operators": true
   }
 }

dashboard/src/containers/LoginFormContainer/LoginFormContainer.test.tsx

@@ -34,7 +34,7 @@ const makeStore = (
     namespace: "",
     appVersion: "",
     oauthLogoutURI: "",
-    featureFlags: { reposPerNamespace: false },
+    featureFlags: { reposPerNamespace: false, operators: false },
   };
   return mockStore({ auth, config });
 };

dashboard/src/containers/OperatorInstanceCreateContainer/OperatorInstanceCreateContainer.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { RouteComponentProps } from "react-router";
+import { Action } from "redux";
+import { ThunkDispatch } from "redux-thunk";
+
+import { IStoreState } from "../../shared/types";
+
+function mapStateToProps(
+  { apps, namespace, charts }: IStoreState,
+  { location }: RouteComponentProps<{}>,
+) {
+  return {};
+}
+
+function mapDispatchToProps(dispatch: ThunkDispatch<IStoreState, null, Action>) {
+  return {};
+}
+
+class Comp extends React.Component {
+  public render() {
+    return <h1>This component has not been built yet</h1>;
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Comp);

dashboard/src/containers/OperatorInstanceCreateContainer/index.tsx

@@ -0,0 +1,3 @@
+import OperatorInstanceCreateContainer from "./OperatorInstanceCreateContainer";
+
+export default OperatorInstanceCreateContainer;

dashboard/src/containers/OperatorInstanceViewContainer/OperatorInstanceViewContainer.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { RouteComponentProps } from "react-router";
+import { Action } from "redux";
+import { ThunkDispatch } from "redux-thunk";
+
+import { IStoreState } from "../../shared/types";
+
+function mapStateToProps(
+  { apps, namespace, charts }: IStoreState,
+  { location }: RouteComponentProps<{}>,
+) {
+  return {};
+}
+
+function mapDispatchToProps(dispatch: ThunkDispatch<IStoreState, null, Action>) {
+  return {};
+}
+
+class Comp extends React.Component {
+  public render() {
+    return <h1>This component has not been built yet</h1>;
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Comp);

dashboard/src/containers/OperatorInstanceViewContainer/index.tsx

@@ -0,0 +1,3 @@
+import OperatorInstanceViewContainer from "./OperatorInstanceViewContainer";
+
+export default OperatorInstanceViewContainer;

dashboard/src/containers/OperatorViewContainer/OperatorViewContainer.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { RouteComponentProps } from "react-router";
+import { Action } from "redux";
+import { ThunkDispatch } from "redux-thunk";
+
+import { IStoreState } from "../../shared/types";
+
+function mapStateToProps(
+  { apps, namespace, charts }: IStoreState,
+  { location }: RouteComponentProps<{}>,
+) {
+  return {};
+}
+
+function mapDispatchToProps(dispatch: ThunkDispatch<IStoreState, null, Action>) {
+  return {};
+}
+
+class Comp extends React.Component {
+  public render() {
+    return <h1>This component has not been built yet</h1>;
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Comp);

dashboard/src/containers/OperatorViewContainer/index.tsx

@@ -0,0 +1,3 @@
+import OperatorViewContainer from "./OperatorViewContainer";
+
+export default OperatorViewContainer;

dashboard/src/containers/OperatorsListContainer/OperatorsListContainer.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { RouteComponentProps } from "react-router";
+import { Action } from "redux";
+import { ThunkDispatch } from "redux-thunk";
+
+import { IStoreState } from "../../shared/types";
+
+function mapStateToProps(
+  { apps, namespace, charts }: IStoreState,
+  { location }: RouteComponentProps<{}>,
+) {
+  return {};
+}
+
+function mapDispatchToProps(dispatch: ThunkDispatch<IStoreState, null, Action>) {
+  return {};
+}
+
+class Comp extends React.Component {
+  public render() {
+    return <h1>This component has not been built yet</h1>;
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Comp);

dashboard/src/containers/OperatorsListContainer/index.tsx

@@ -0,0 +1,3 @@
+import OperatorsListContainer from "./OperatorsListContainer";
+
+export default OperatorsListContainer;

dashboard/src/containers/RoutesContainer/Routes.test.tsx

@@ -91,7 +91,7 @@ describe("Routes depending on feature flags", () => {
           {...emptyRouteComponentProps}
           namespace={namespace}
           authenticated={true}
-          featureFlags={{ reposPerNamespace: false }}
+          featureFlags={{ reposPerNamespace: false, operators: false }}
         />
       </StaticRouter>,
     )
@@ -112,7 +112,7 @@ describe("Routes depending on feature flags", () => {
           {...emptyRouteComponentProps}
           namespace={namespace}
           authenticated={true}
-          featureFlags={{ reposPerNamespace: true }}
+          featureFlags={{ reposPerNamespace: true, operators: false }}
         />
       </StaticRouter>,
     )

dashboard/src/containers/RoutesContainer/Routes.tsx

@@ -9,6 +9,10 @@ import AppViewContainer from "../../containers/AppViewContainer";
 import CatalogContainer from "../../containers/CatalogContainer";
 import ChartViewContainer from "../../containers/ChartViewContainer";
 import LoginFormContainer from "../../containers/LoginFormContainer";
+import OperatorInstanceCreateContainer from "../../containers/OperatorInstanceCreateContainer";
+import OperatorInstanceViewContainer from "../../containers/OperatorInstanceViewContainer";
+import OperatorsListContainer from "../../containers/OperatorsListContainer";
+import OperatorViewContainer from "../../containers/OperatorViewContainer";
 import PrivateRouteContainer from "../../containers/PrivateRouteContainer";
 import RepoListContainer from "../../containers/RepoListContainer";
 import ServiceBrokerListContainer from "../../containers/ServiceBrokerListContainer";
@@ -45,20 +49,29 @@ interface IRoutesProps extends IRouteComponentPropsAndRouteProps {
   authenticated: boolean;
   featureFlags: {
     reposPerNamespace: boolean;
+    operators: boolean;
   };
 }
 
 class Routes extends React.Component<IRoutesProps> {
   public static defaultProps = {
-    featureFlags: { reposPerNamespace: false },
+    featureFlags: { reposPerNamespace: false, operators: false },
   };
   public render() {
     // The path used for AppRepository list depends on a feature flag.
     // TODO(mnelson, #1256) Remove when feature becomes default.
     const reposPath = this.props.featureFlags.reposPerNamespace
       ? "/config/ns/:namespace/repos"
       : "/config/repos";
-
+    if (this.props.featureFlags.operators) {
+      // Add routes related to operators
+      Object.assign(privateRoutes, {
+        "/operators/ns/:namespace": OperatorsListContainer,
+        "/operators/ns/:namespace/:operator": OperatorViewContainer,
+        "/operators-instances/ns/:namespace/:instanceName": OperatorInstanceViewContainer,
+        "/operators-instances/ns/:namespace/new/:operator/:instanceType": OperatorInstanceCreateContainer,
+      });
+    }
     return (
       <Switch>
         <Route exact={true} path="/" render={this.rootNamespacedRedirect} />

dashboard/src/reducers/config.ts

@@ -15,7 +15,7 @@ const initialState: IConfigState = {
   authProxyEnabled: false,
   oauthLoginURI: "",
   oauthLogoutURI: "",
-  featureFlags: { reposPerNamespace: true },
+  featureFlags: { reposPerNamespace: true, operators: true },
 };
 
 const configReducer = (state: IConfigState = initialState, action: ConfigAction): IConfigState => {

dashboard/src/shared/Auth.test.ts

@@ -171,7 +171,7 @@ describe("Auth", () => {
         oauthLogoutURI,
         namespace: "ns",
         appVersion: "2",
-        featureFlags: { reposPerNamespace: false },
+        featureFlags: { reposPerNamespace: false, operators: false },
       });
 
       expect(mockedAssign).toBeCalledWith(oauthLogoutURI);
@@ -185,7 +185,7 @@ describe("Auth", () => {
         oauthLogoutURI: "",
         namespace: "ns",
         appVersion: "2",
-        featureFlags: { reposPerNamespace: false },
+        featureFlags: { reposPerNamespace: false, operators: false },
       });
 
       expect(mockedAssign).toBeCalledWith("/oauth2/sign_out");

dashboard/src/shared/Config.ts

@@ -10,6 +10,7 @@ export interface IConfig {
   error?: Error;
   featureFlags: {
     reposPerNamespace: boolean;
+    operators: boolean;
   };
 }