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

@@ -27,7 +27,19 @@ interface Props extends HasFormatOption {
     coverageToken: string;
 }
 
-export class DownloadCoverageContentComponent extends RemoteContentComponent<DownloadCoverageComponentProps> {
+interface DownloadState {
+    downloadButtonEnabled: boolean;
+}
+
+export class DownloadCoverageContentComponent extends RemoteContentComponent<DownloadCoverageComponentProps, DownloadState> {
+    constructor() {
+        super();
+        this.state = {
+            downloadButtonEnabled: true
+        }
+        this.onDownloadClicked = this.onDownloadClicked.bind(this);
+    }
+
     static getStores() {
         return [responsibilityStore];
     }
@@ -43,7 +55,7 @@ export class DownloadCoverageContentComponent extends RemoteContentComponent<Dow
                     scenario: r.scenario,
                     coverageSets: r.coverageSets,
                     coverageToken: state.coverageOneTimeToken,
-                    selectedFormat: state.selectedFormat
+                    selectedFormat: state.selectedFormat,
                 }
             };
         } else {
@@ -54,7 +66,6 @@ export class DownloadCoverageContentComponent extends RemoteContentComponent<Dow
         }
     }
 
-
     onSelectFormat(format: string) {
         coverageSetActions.selectFormat(format);
         responsibilityStore.fetchOneTimeCoverageToken().catch(doNothing);
@@ -65,6 +76,19 @@ export class DownloadCoverageContentComponent extends RemoteContentComponent<Dow
         responsibilityStore.fetchOneTimeCoverageToken();
     }
 
+    onDownloadClicked() {
+        setTimeout(() => {
+            this.setState({
+                downloadButtonEnabled: false,
+            })
+        }, 50)
+        setTimeout(() => {
+            this.setState({
+                downloadButtonEnabled: true,
+            })
+        }, 5000)
+    }
+
     renderContent(props: DownloadCoverageComponentProps) {
         const data = props.props;
         return <div>
@@ -132,7 +156,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"
         });
@@ -58,6 +59,22 @@ describe("DownloadCoverageContentComponent", () => {
         expect(fetchNewToken.called).to.be.true;
     });
 
+    it("calling meth onDownloadClicked sets state prop downloadButtonEnabled to false for 5 seconds", function(done: DoneCallback) {
+        this.timeout(5020);
+        const props = makeProps({ coverageToken: "TOKEN" });
+        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();
+        },5010);
+    });
+
     it("renders format control", () => {
         const props = makeProps({ selectedFormat: "x" });
         const rendered = shallow(<DownloadCoverageContentComponent {...props} />);

app/src/test/shared/components/OneTimeButtonTests.tsx

@@ -4,8 +4,15 @@ import { shallow } from "enzyme";
 import { OneTimeButton } from "../../../main/shared/components/OneTimeButton";
 import { doNothing } from "../../../main/shared/Helpers";
 import fetcher from "../../../main/shared/sources/Fetcher";
+import { Sandbox } from "../../Sandbox";
 
 describe("OneTimeButton", () => {
+    const sandbox = new Sandbox();
+
+    afterEach(() => {
+        sandbox.restore();
+    });
+
     it("renders form with onetime URL", () => {
         const rendered = shallow(<OneTimeButton token="TOKEN" refreshToken={doNothing} />);
         expect(rendered.find("form").prop("action")).to.equal(fetcher.fetcher.buildURL("/onetime_link/TOKEN/"));
@@ -36,7 +43,7 @@ describe("OneTimeButton", () => {
         checkImage("TOKEN", true, false);
     });
 
-    it("clicking button triggers callback after timeout", (done: DoneCallback) => {
+    it("clicking button triggers refresh token callback after timeout", (done: DoneCallback) => {
         let tracker = false;
         const callback = () => tracker = true;
 
@@ -51,4 +58,16 @@ describe("OneTimeButton", () => {
             done();
         });
     });
+
+    it("clicking button triggers outer callback", () => {
+        const outerCallbackSpy = sandbox.createSpy();
+        const rendered = shallow(<OneTimeButton
+            token="TOKEN"
+            refreshToken={()=>{}}
+            onClickOuterEvent={outerCallbackSpy}
+        />);
+        const button = rendered.find("form").find("button");
+        button.simulate("click");
+        expect(outerCallbackSpy.calledOnce).to.equal(true);
+    });
 });