Add 'Refresh All App Repositories' button

Close #582. Add a button next to 'Add App Repository'
to refresh all app repositories.

dashboard/src/actions/repos.ts

@@ -101,6 +101,30 @@ export const resyncRepo = (
   };
 };
 
+export const resyncAllRepos = (): ThunkAction<Promise<void>, IStoreState, null, AppReposAction> => {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        config: { namespace },
+      } = getState();
+      // TODO: Do something to show progress
+      const repos = await AppRepository.list(namespace);
+      if (repos.items.length > 0) {
+        repos.items.forEach(repo => {
+          if (repo && repo.spec) {
+            repo.spec.resyncRequests = repo.spec.resyncRequests || 0;
+            repo.spec.resyncRequests++;
+            const name = repo.metadata.name;
+            AppRepository.update(name, namespace, repo);
+          }
+        });
+      }
+    } catch (e) {
+      dispatch(errorRepos(e, "update"));
+    }
+  };
+};
+
 export const fetchRepos = (): ThunkAction<Promise<void>, IStoreState, null, AppReposAction> => {
   return async (dispatch, getState) => {
     dispatch(requestRepos());

dashboard/src/components/Config/AppRepoList/AppRepoButton.tsx

@@ -43,7 +43,7 @@ export class AppRepoAddButton extends React.Component<
   public render() {
     const { redirectTo } = this.props;
     return (
-      <div className="AppRepoAddButton">
+      <span>
         <button className="button button-primary" onClick={this.openModal}>
           Add App Repository
         </button>
@@ -64,7 +64,7 @@ export class AppRepoAddButton extends React.Component<
           <AppRepoForm install={this.install} onAfterInstall={this.closeModal} />
         </Modal>
         {redirectTo && <Redirect to={redirectTo} />}
-      </div>
+      </span>
     );
   }
 

dashboard/src/components/Config/AppRepoList/AppRepoList.tsx

@@ -4,6 +4,7 @@ import { IAppRepository, IRBACRole } from "../../../shared/types";
 import ErrorSelector from "../../ErrorAlert/ErrorSelector";
 import { AppRepoAddButton } from "./AppRepoButton";
 import { AppRepoListItem } from "./AppRepoListItem";
+import { AppRepoRefreshAllButton } from "./AppRepoRefreshAllButton";
 
 export interface IAppRepoListProps {
   errors: {
@@ -16,6 +17,7 @@ export interface IAppRepoListProps {
   fetchRepos: () => void;
   deleteRepo: (name: string) => Promise<boolean>;
   resyncRepo: (name: string) => void;
+  resyncAllRepos: () => void;
   install: (name: string, url: string, authHeader: string, customCA: string) => Promise<boolean>;
   kubeappsNamespace: string;
 }
@@ -61,7 +63,15 @@ class AppRepoList extends React.Component<IAppRepoListProps> {
   }
 
   public render() {
-    const { errors, repos, install, deleteRepo, resyncRepo, kubeappsNamespace } = this.props;
+    const {
+      errors,
+      repos,
+      install,
+      deleteRepo,
+      resyncRepo,
+      resyncAllRepos,
+      kubeappsNamespace,
+    } = this.props;
     return (
       <div className="app-repo-list">
         <h1>App Repositories</h1>
@@ -92,6 +102,11 @@ class AppRepoList extends React.Component<IAppRepoListProps> {
           install={install}
           kubeappsNamespace={kubeappsNamespace}
         />
+        <AppRepoRefreshAllButton
+          error={errors.update}
+          resyncAllRepos={resyncAllRepos}
+          kubeappsNamespace={kubeappsNamespace}
+        />
       </div>
     );
   }

dashboard/src/components/Config/AppRepoList/AppRepoRefreshAllButton.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import "./AppRepo.css";
+
+interface IAppRepoRefreshAllButtonProps {
+  error?: Error;
+  resyncAllRepos: () => void;
+  kubeappsNamespace: string;
+}
+
+export class AppRepoRefreshAllButton extends React.Component<IAppRepoRefreshAllButtonProps> {
+  public render() {
+    return (
+      <span>
+        <button
+          className="button button-primary margin-l-big"
+          onClick={this.handleResyncAllClick()}
+          title="Refresh All App Repositories"
+        >
+          Refresh All
+        </button>
+      </span>
+    );
+  }
+
+  private handleResyncAllClick() {
+    return () => {
+      this.props.resyncAllRepos();
+    };
+  }
+}

dashboard/src/containers/RepoListContainer/RepoListContainer.ts

@@ -28,6 +28,9 @@ function mapDispatchToProps(dispatch: ThunkDispatch<IStoreState, null, Action>)
     resyncRepo: async (name: string) => {
       return dispatch(actions.repos.resyncRepo(name));
     },
+    resyncAllRepos: async () => {
+      return dispatch(actions.repos.resyncAllRepos());
+    },
   };
 }
 

dashboard/src/shared/types.ts

@@ -277,6 +277,7 @@ export interface IAppRepository
           };
         };
       };
+      resyncRequests: number;
     },
     undefined
   > {}