Show errors when parsing Config (#957)

* Show errors when parsing Config

* Move getConfig call to component

* Update ConfigLoader.test.tsx

* Wrap test in describe function

dashboard/src/actions/config.ts

@@ -8,14 +8,21 @@ export const requestConfig = createAction("REQUEST_CONFIG");
 export const receiveConfig = createAction("RECEIVE_CONFIG", resolve => {
   return (config: IConfig) => resolve(config);
 });
+export const errorConfig = createAction("ERROR_CONFIG", resolve => {
+  return (err: Error) => resolve(err);
+});
 
-const allActions = [requestConfig, receiveConfig];
+const allActions = [requestConfig, receiveConfig, errorConfig];
 export type ConfigAction = ActionType<typeof allActions[number]>;
 
 export function getConfig(): ThunkAction<Promise<void>, IStoreState, null, ConfigAction> {
   return async dispatch => {
     dispatch(requestConfig());
-    const config = await Config.getConfig();
-    dispatch(receiveConfig(config));
+    try {
+      const config = await Config.getConfig();
+      dispatch(receiveConfig(config));
+    } catch (e) {
+      dispatch(errorConfig(e));
+    }
   };
 }

dashboard/src/components/ConfigLoader/ConfigLoader.test.tsx

@@ -0,0 +1,35 @@
+import { shallow } from "enzyme";
+import context from "jest-plugin-context";
+import * as React from "react";
+
+import ConfigLoader from ".";
+import UnexpectedErrorPage from "../../components/ErrorAlert/UnexpectedErrorAlert";
+import itBehavesLike from "../../shared/specs";
+
+context("when the config is not ready", () => {
+  itBehavesLike("aLoadingComponent", {
+    component: ConfigLoader,
+    props: {
+      loaded: false,
+      getConfig: jest.fn(),
+    },
+  });
+});
+
+context("when there is an error", () => {
+  it("renders the error details", () => {
+    const wrapper = shallow(
+      <ConfigLoader error={new Error("Wrong config!")} getConfig={jest.fn()} />,
+    );
+    expect(wrapper.find(UnexpectedErrorPage)).toExist();
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe("componentDidMount", () => {
+  it("calls getConfig", () => {
+    const getConfig = jest.fn();
+    shallow(<ConfigLoader getConfig={getConfig} />);
+    expect(getConfig).toHaveBeenCalled();
+  });
+})

dashboard/src/components/ConfigLoader/ConfigLoader.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import UnexpectedErrorPage from "../../components/ErrorAlert/UnexpectedErrorAlert";
+import LoadingWrapper, { ILoadingWrapperProps } from "../../components/LoadingWrapper";
+
+interface IConfigLoaderProps extends ILoadingWrapperProps {
+  getConfig: () => void;
+  error?: Error;
+}
+
+class ConfigLoader extends React.Component<IConfigLoaderProps> {
+  public componentDidMount() {
+    this.props.getConfig();
+  }
+
+  public render() {
+    const { error, ...otherProps } = this.props;
+    if (error) {
+      return (
+        <UnexpectedErrorPage
+          raw={true}
+          showGenericMessage={true}
+          text={`Unable to load Kubeapps configuration: ${error.message}`}
+        />
+      );
+    }
+    return <LoadingWrapper {...otherProps} />;
+  }
+}
+
+export default ConfigLoader;

dashboard/src/components/ConfigLoader/__snapshots__/ConfigLoader.test.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when the config is not ready loading spinner matches the snapshot 1`] = `
+<LoadingWrapper
+  getConfig={
+    [MockFunction] {
+      "calls": Array [
+        Array [],
+        Array [],
+      ],
+    }
+  }
+  loaded={false}
+  type={0}
+/>
+`;
+
+exports[`when there is an error renders the error details 1`] = `
+<UnexpectedErrorPage
+  raw={true}
+  showGenericMessage={true}
+  text="Unable to load Kubeapps configuration: Wrong config!"
+  title="Sorry! Something went wrong."
+/>
+`;

dashboard/src/components/ConfigLoader/index.tsx

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

dashboard/src/containers/ConfigLoaderContainer/ConfigLoaderContainer.ts

@@ -4,19 +4,22 @@ import { ThunkDispatch } from "redux-thunk";
 import actions from "../../actions";
 import { ConfigAction } from "../../actions/config";
 
-import LoadingWrapper, { ILoadingWrapperProps } from "../../components/LoadingWrapper";
+import ConfigLoader from "../../components/ConfigLoader";
 import { IStoreState } from "../../shared/types";
 
-function mapStateToProps({ config }: IStoreState): ILoadingWrapperProps {
+function mapStateToProps({ config }: IStoreState) {
   return {
     loaded: config.loaded,
+    error: config.error,
   };
 }
 function mapDispatchToProps(dispatch: ThunkDispatch<IStoreState, null, ConfigAction>) {
-  dispatch(actions.config.getConfig());
+  return {
+    getConfig: () => dispatch(actions.config.getConfig()),
+  };
 }
 
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(LoadingWrapper);
+)(ConfigLoader);

dashboard/src/reducers/config.ts

@@ -23,6 +23,11 @@ const configReducer = (state: IConfigState = initialState, action: ConfigAction)
         loaded: true,
         ...action.payload,
       };
+    case getType(actions.config.errorConfig):
+      return {
+        ...state,
+        error: action.payload,
+      };
     default:
   }
   return state;

dashboard/src/shared/Config.ts

@@ -4,6 +4,7 @@ import axios from "axios";
 export interface IConfig {
   namespace: string;
   appVersion: string;
+  error?: Error;
 }
 
 export default class Config {