i586 - on click download button it will be disabled for 5 seconds

app/src/main/admin/components/ModellingGroups/List/ModellingGroupsList.tsx

@@ -10,7 +10,7 @@ interface ModellingGroupsProps extends RemoteContent {
     groups: ModellingGroup[]
 }
 
-export class ModellingGroupsListComponent extends RemoteContentComponent<ModellingGroupsProps> {
+export class ModellingGroupsListComponent extends RemoteContentComponent<ModellingGroupsProps, undefined> {
     static getStores() {
         return [ groupStore ];
     }

app/src/main/admin/components/ModellingGroups/SingleGroup/Admin/GroupAdminContent.tsx

@@ -18,7 +18,7 @@ interface Props extends RemoteContent {
     isAdmin: boolean;
 }
 
-export class GroupAdminContentComponent extends RemoteContentComponent<Props> {
+export class GroupAdminContentComponent extends RemoteContentComponent<Props, undefined> {
     static getStores() {
         return [ groupStore, userStore, adminAuthStore ];
     }

app/src/main/admin/components/ModellingGroups/SingleGroup/Details/ModellingGroupDetailsContent.tsx

@@ -14,7 +14,7 @@ interface Props extends RemoteContent {
     users: User[];
 }
 
-class ModellingGroupDetailsContentComponent extends RemoteContentComponent<Props> {
+class ModellingGroupDetailsContentComponent extends RemoteContentComponent<Props, undefined> {
     static getStores() {
         return [ groupStore, userStore ];
     }

app/src/main/admin/components/ModellingGroups/SingleGroup/ModellingGroupTitle.tsx

@@ -8,7 +8,7 @@ export interface GroupTitleProps extends RemoteContent {
     group: ModellingGroup;
 }
 
-export abstract class ModellingGroupTitle extends RemoteContentComponent<GroupTitleProps> {
+export abstract class ModellingGroupTitle extends RemoteContentComponent<GroupTitleProps, undefined> {
     static getStores() {
         return [ groupStore ];
     }

app/src/main/admin/components/Users/List/UsersList.tsx

@@ -10,7 +10,7 @@ interface UserProps extends RemoteContent {
     users: User[]
 }
 
-export class UsersListComponent extends RemoteContentComponent<UserProps> {
+export class UsersListComponent extends RemoteContentComponent<UserProps, undefined> {
     static getStores() {
         return [userStore];
     }

app/src/main/admin/components/Users/SingleUser/UserDetailsContent.tsx

@@ -15,7 +15,7 @@ interface Props extends RemoteContent {
 
 const commonStyles = require("../../../../shared/styles/common.css");
 
-export class UserDetailsContentComponent extends RemoteContentComponent<Props> {
+export class UserDetailsContentComponent extends RemoteContentComponent<Props, undefined> {
     static getStores() {
         return [userStore];
     }

app/src/main/admin/components/Users/SingleUser/UserTitle.tsx

@@ -8,7 +8,7 @@ export interface UserTitleProps extends RemoteContent {
     user: User;
 }
 
-export abstract class UserTitle extends RemoteContentComponent<UserTitleProps> {
+export abstract class UserTitle extends RemoteContentComponent<UserTitleProps, undefined> {
     static getStores() {
         return [ userStore ];
     }

app/src/main/contrib/components/ChooseAction/ChooseActionContent.tsx

@@ -16,7 +16,7 @@ export interface ChooseActionContentProps extends RemoteContent {
     group: ModellingGroup
 }
 
-export class ChooseActionContentComponent extends RemoteContentComponent<ChooseActionContentProps> {
+export class ChooseActionContentComponent extends RemoteContentComponent<ChooseActionContentProps, undefined> {
     static getStores() {
         return [ responsibilityStore, contribAuthStore ];
     }

app/src/main/contrib/components/ChooseGroup/ChooseGroupContent.tsx

@@ -15,7 +15,7 @@ export interface ChooseGroupProps extends RemoteContent {
     groups: ModellingGroup[];
 }
 
-export class ChooseGroupContentComponent extends RemoteContentComponent<ChooseGroupProps> {
+export class ChooseGroupContentComponent extends RemoteContentComponent<ChooseGroupProps, undefined> {
     static getStores() {
         return [ responsibilityStore, contribAuthStore ];
     }

app/src/main/contrib/components/Responsibilities/BurdenEstimates/UploadBurdenEstimatesContent.tsx

@@ -21,7 +21,7 @@ export interface UploadBurdenEstimatesContentComponentProps extends RemoteConten
     };
 }
 
-export class UploadBurdenEstimatesContentComponent extends RemoteContentComponent<UploadBurdenEstimatesContentComponentProps> {
+export class UploadBurdenEstimatesContentComponent extends RemoteContentComponent<UploadBurdenEstimatesContentComponentProps, undefined> {
 
     static getStores() {
         return [responsibilityStore];

app/src/main/contrib/components/Responsibilities/Coverage/DownloadCoverageContent.tsx

@@ -17,44 +17,51 @@ const commonStyles = require("../../../../shared/styles/common.css");
 const styles = require("../Responsibilities.css");
 
 export interface DownloadCoverageComponentProps extends RemoteContent {
-    props: Props
+    touchstone?: Touchstone;
+    scenario?: Scenario;
+    coverageSets?: CoverageSet[];
+    coverageToken?: string;
+    downloadButtonDisableTimeout?: number;
+    selectedFormat?: string;
 }
 
-interface Props extends HasFormatOption {
-    touchstone: Touchstone;
-    scenario: Scenario;
-    coverageSets: CoverageSet[];
-    coverageToken: string;
+interface DownloadState {
+    downloadButtonEnabled: boolean;
 }
 
-export class DownloadCoverageContentComponent extends RemoteContentComponent<DownloadCoverageComponentProps> {
+export class DownloadCoverageContentComponent
+    extends RemoteContentComponent<DownloadCoverageComponentProps, DownloadState>
+{
+    downloadButtonDisableTimeout: number;
+
+    constructor(props?: DownloadCoverageComponentProps) {
+        super(props);
+        this.state = {
+            downloadButtonEnabled: true,
+        };
+        this.onDownloadClicked = this.onDownloadClicked.bind(this);
+        this.downloadButtonDisableTimeout = this.props.downloadButtonDisableTimeout
+            ? this.props.downloadButtonDisableTimeout
+            : 5000;
+    }
+
     static getStores() {
         return [responsibilityStore];
     }
 
     static getPropsFromStores(): DownloadCoverageComponentProps {
         const state = responsibilityStore.getState();
-        const r = state.currentResponsibility;
-        if (r != null) {
-            return {
-                ready: state.ready,
-                props: {
-                    touchstone: state.currentTouchstone,
-                    scenario: r.scenario,
-                    coverageSets: r.coverageSets,
-                    coverageToken: state.coverageOneTimeToken,
-                    selectedFormat: state.selectedFormat
-                }
-            };
-        } else {
-            return {
-                ready: false,
-                props: null
-            };
-        }
+        const curResp = state.currentResponsibility;
+        return {
+            ready: curResp ? state.ready : false,
+            touchstone: state.currentTouchstone,
+            scenario: curResp.scenario,
+            coverageSets: curResp.coverageSets,
+            coverageToken: state.coverageOneTimeToken,
+            selectedFormat: state.selectedFormat,
+        };
     }
 
-
     onSelectFormat(format: string) {
         coverageSetActions.selectFormat(format);
         responsibilityStore.fetchOneTimeCoverageToken().catch(doNothing);
@@ -65,8 +72,21 @@ export class DownloadCoverageContentComponent extends RemoteContentComponent<Dow
         responsibilityStore.fetchOneTimeCoverageToken();
     }
 
+    onDownloadClicked() {
+        setTimeout(() => {
+            this.setState({
+                downloadButtonEnabled: false,
+            })
+        }, 20);
+        setTimeout(() => {
+            this.setState({
+                downloadButtonEnabled: true,
+            })
+        }, this.downloadButtonDisableTimeout);
+    }
+
     renderContent(props: DownloadCoverageComponentProps) {
-        const data = props.props;
+        const data = props;
         return <div>
             <p>
                 Each scenario is based on vaccination coverage from up to 3 different
@@ -123,7 +143,7 @@ export class DownloadCoverageContentComponent extends RemoteContentComponent<Dow
                                 </div>
                             </td>
                             <td><FormatControl
-                                value={props.props.selectedFormat}
+                                value={props.selectedFormat}
                                 onSelectFormat={this.onSelectFormat}/>
                             </td>
                         </tr>
@@ -132,7 +152,12 @@ export class DownloadCoverageContentComponent extends RemoteContentComponent<Dow
                 </div>
             </div>
             <div className="mt-4">
-                <OneTimeButton token={data.coverageToken} refreshToken={this.refreshToken}>
+                <OneTimeButton
+                    token={data.coverageToken}
+                    refreshToken={this.refreshToken}
+                    enabled={this.state.downloadButtonEnabled}
+                    onClickOuterEvent={this.onDownloadClicked}
+                >
                     Download combined coverage set data in CSV format
                 </OneTimeButton>
             </div>

app/src/main/contrib/components/Responsibilities/Demographics/DownloadDemographicsContent.tsx

@@ -22,7 +22,7 @@ export interface DownloadDemographicsContentProps extends RemoteContent {
     token: string;
 }
 
-export class DownloadDemographicsContentComponent extends RemoteContentComponent<DownloadDemographicsContentProps> {
+export class DownloadDemographicsContentComponent extends RemoteContentComponent<DownloadDemographicsContentProps, undefined> {
     static getStores() {
         return [demographicStore, responsibilityStore];
     }

app/src/main/contrib/components/Responsibilities/Overview/ResponsibilityOverviewContent.tsx

@@ -18,7 +18,7 @@ export interface ResponsibilityOverviewComponentProps extends RemoteContent {
     modellingGroup: ModellingGroup;
 }
 
-export class ResponsibilityOverviewContentComponent extends RemoteContentComponent<ResponsibilityOverviewComponentProps> {
+export class ResponsibilityOverviewContentComponent extends RemoteContentComponent<ResponsibilityOverviewComponentProps, undefined> {
     static getStores() {
         return [responsibilityStore];
     }

app/src/main/report/components/Reports/ReportDetails.tsx

@@ -24,7 +24,7 @@ export interface ReportDetailsProps extends RemoteContent, PublicProps {
     allVersions: string[];
 }
 
-export class ReportDetailsComponent extends RemoteContentComponent<ReportDetailsProps> {
+export class ReportDetailsComponent extends RemoteContentComponent<ReportDetailsProps, undefined> {
     static getStores() {
         return [reportStore];
     }

app/src/main/report/components/Reports/ReportList.tsx

@@ -10,7 +10,7 @@ interface ReportProps extends RemoteContent {
     reports: Report[]
 }
 
-export class ReportListComponent extends RemoteContentComponent<ReportProps> {
+export class ReportListComponent extends RemoteContentComponent<ReportProps, undefined> {
     static getStores() {
         return [reportStore];
     }

app/src/main/shared/components/OneTimeButton.tsx

@@ -8,16 +8,17 @@ interface Props {
     token: string
     enabled?: boolean;
     refreshToken: () => void;
+    onClickOuterEvent?: () =>void;
 }
 
-export class OneTimeButton extends React.Component<Props, undefined> {
+export class OneTimeButton extends React.Component<Props, any> {
     static defaultProps: Partial<Props> = {
         enabled: true
     };
 
     constructor() {
         super();
-        this.refreshToken = this.refreshToken.bind(this);
+        this.onClick = this.onClick.bind(this);
     }
 
     refreshToken() {
@@ -32,14 +33,23 @@ export class OneTimeButton extends React.Component<Props, undefined> {
         }
     }
 
+    onClick() {
+        this.refreshToken();
+        if (typeof this.props.onClickOuterEvent === 'function') {
+            this.props.onClickOuterEvent();
+        }
+    }
+
     render() {
         const props = this.props;
         const url = fetcher.fetcher.buildOneTimeLink(props.token);
         const enabled = props.enabled && props.token != null;
         return <form action={ url }>
-            <button onClick={ this.refreshToken }
-                    disabled={ !enabled }
-                    type="submit">
+            <button
+                onClick={ this.onClick }
+                disabled={ !enabled }
+                type="submit"
+            >
                 { this.props.children }
             </button>
             { this.renderAnimation() }

app/src/main/shared/components/RemoteContentComponent/RemoteContentComponent.tsx

@@ -4,7 +4,7 @@ import { RemoteContent } from "../../models/RemoteContent";
 const spinner = require("./spinner.gif");
 const messageStyles = require("../../styles/messages.css");
 
-export abstract class RemoteContentComponent<TProps extends RemoteContent> extends React.Component<TProps, undefined> {
+export abstract class RemoteContentComponent<TProps extends RemoteContent, TState> extends React.Component<TProps, TState> {
     abstract renderContent(content: TProps): JSX.Element;
 
     render() {

app/src/test/Sandbox.ts

@@ -42,4 +42,12 @@ export class Sandbox {
     stubFetch(obj: any, method: string): sinon.SinonStub {
         return this.sinon.stub(obj, method).returns(Promise.resolve(true));
     }
+
+    setSpy(obj: any, method: string): sinon.SinonSpy {
+        return this.sinon.spy(obj, method);
+    }
+
+    createSpy(): sinon.SinonSpy {
+        return this.sinon.spy();
+    }
 }

app/src/test/contrib/components/RemoteContentComponentsTests.tsx

@@ -7,7 +7,7 @@ import { RemoteContentComponent } from "../../../main/shared/components/RemoteCo
 
 const spinner = require("../../../main/shared/components/RemoteContentComponent/spinner.gif");
 
-class DummyComponent extends RemoteContentComponent<RemoteContent> {
+class DummyComponent extends RemoteContentComponent<RemoteContent, undefined> {
     renderContent() {
         return <span>Content</span>
     }

app/src/test/contrib/components/Responsibilities/DownloadCoverageComponentTests.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { expect } from "chai";
 import { mockCoverageSet, mockScenario, mockTouchstone } from "../../../mocks/mockModels";
-import { shallow, ShallowWrapper } from "enzyme";
+import { shallow, ShallowWrapper, mount } from "enzyme";
 
 import {
     DownloadCoverageContentComponent,
@@ -45,6 +45,7 @@ describe("DownloadCoverageContentComponent", () => {
         expect(rendered.find(OneTimeButton).props()).to.eql({
             token: "TOKEN",
             refreshToken: (rendered.instance() as DownloadCoverageContentComponent).refreshToken,
+            onClickOuterEvent: (rendered.instance() as DownloadCoverageContentComponent).onDownloadClicked,
             enabled: true,
             children: "Download combined coverage set data in CSV format"
         });
@@ -53,11 +54,33 @@ describe("DownloadCoverageContentComponent", () => {
     it("refreshToken triggers token refresh", () => {
         const spy = sandbox.dispatchSpy();
         const fetchNewToken = sandbox.stubFetch(responsibilityStore, "fetchOneTimeCoverageToken");
-        new DownloadCoverageContentComponent().refreshToken();
+        const props = makeProps({ready: true});
+        const component = shallow(<DownloadCoverageContentComponent {...props} />);
+        const instance = component.instance() as DownloadCoverageContentComponent;
+        instance.refreshToken();
         expectOneAction(spy, { action: "CoverageTokenActions.clearUsedToken" });
         expect(fetchNewToken.called).to.be.true;
     });
 
+    it("calling meth onDownloadClicked sets state prop downloadButtonEnabled to false after given timeout in 100ms", function(done: DoneCallback) {
+        this.timeout(140);
+        const props = makeProps({
+            coverageToken: "TOKEN",
+            downloadButtonDisableTimeout: 100,
+        });
+        const component = shallow(<DownloadCoverageContentComponent {...props} />);
+        const instance = component.instance() as DownloadCoverageContentComponent;
+        expect(component.state().downloadButtonEnabled).to.be.equal(true)
+        instance.onDownloadClicked();
+        setTimeout(() => {
+            expect(component.state().downloadButtonEnabled).to.be.equal(false)
+        },70);
+        setTimeout(() => {
+            expect(component.state().downloadButtonEnabled).to.be.equal(true)
+            done();
+        },110);
+    });
+
     it("renders format control", () => {
         const props = makeProps({ selectedFormat: "x" });
         const rendered = shallow(<DownloadCoverageContentComponent {...props} />);
@@ -91,11 +114,10 @@ function makeProps(props: any): DownloadCoverageComponentProps {
     const scenario = mockScenario();
     return {
         ready: true,
-        props: Object.assign({
-            touchstone,
-            scenario,
-            coverageSets: [],
-            coverageToken: null,
-        }, props)
+        touchstone,
+        scenario,
+        coverageSets: [],
+        coverageToken: null,
+        ...props
     };
 }