SONAR-7709 Help users to not enter wrong date periods

6 files changed, 59 insertions, 36 deletions

diff --git a/server/sonar-web/src/main/js/apps/issues/components/App.js b/server/sonar-web/src/main/js/apps/issues/components/App.js
index f6616f229ed..984aedca11c 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/App.js
+++ b/server/sonar-web/src/main/js/apps/issues/components/App.js
@@ -420,7 +420,7 @@ export default class App extends React.PureComponent {
         if (this.mounted) {
           this.setState({ loading: false });
         }
-        return Promise.reject();
+        return [];
       }
     );
   }
@@ -518,29 +518,32 @@ export default class App extends React.PureComponent {
   };
 
   fetchFacet = (facet /*: string */) => {
-    return this.fetchIssues({ ps: 1, facets: mapFacet(facet) }).then(({ facets, ...other }) => {
-      if (this.mounted) {
-        this.setState(state => ({
-          facets: { ...state.facets, ...parseFacets(facets) },
-          referencedComponents: {
-            ...state.referencedComponents,
-            ...keyBy(other.components, 'uuid')
-          },
-          referencedLanguages: {
-            ...state.referencedLanguages,
-            ...keyBy(other.languages, 'key')
-          },
-          referencedRules: {
-            ...state.referencedRules,
-            ...keyBy(other.rules, 'key')
-          },
-          referencedUsers: {
-            ...state.referencedUsers,
-            ...keyBy(other.users, 'login')
-          }
-        }));
-      }
-    });
+    return this.fetchIssues({ ps: 1, facets: mapFacet(facet) }).then(
+      ({ facets, ...other }) => {
+        if (this.mounted) {
+          this.setState(state => ({
+            facets: { ...state.facets, ...parseFacets(facets) },
+            referencedComponents: {
+              ...state.referencedComponents,
+              ...keyBy(other.components, 'uuid')
+            },
+            referencedLanguages: {
+              ...state.referencedLanguages,
+              ...keyBy(other.languages, 'key')
+            },
+            referencedRules: {
+              ...state.referencedRules,
+              ...keyBy(other.rules, 'key')
+            },
+            referencedUsers: {
+              ...state.referencedUsers,
+              ...keyBy(other.users, 'login')
+            }
+          }));
+        }
+      },
+      () => {}
+    );
   };
 
   isFiltered = () => {
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.js b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.js
index 461d3405d14..edc61cf799d 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.js
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.js
@@ -228,6 +228,7 @@ export default class CreationDateFacet extends React.PureComponent {
         <DateInput
           className="search-navigator-date-facet-selection-dropdown-left"
           inputClassName="search-navigator-date-facet-selection-input"
+          maxDate={createdBefore ? toShortNotSoISOString(createdBefore) : '+0'}
           onChange={this.handlePeriodChangeAfter}
           placeholder={translate('from')}
           value={createdAfter ? toShortNotSoISOString(createdAfter) : undefined}
@@ -235,6 +236,7 @@ export default class CreationDateFacet extends React.PureComponent {
         <DateInput
           className="search-navigator-date-facet-selection-dropdown-right"
           inputClassName="search-navigator-date-facet-selection-input"
+          minDate={createdAfter ? toShortNotSoISOString(createdAfter) : undefined}
           onChange={this.handlePeriodChangeBefore}
           placeholder={translate('to')}
           value={createdBefore ? toShortNotSoISOString(createdBefore) : undefined}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.js
index edd3ca20dc7..a277fb95856 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.js
@@ -49,18 +49,20 @@ export default class ProjectActivityDateInput extends React.PureComponent {
       <div>
         <DateInput
           className="little-spacer-right"
+          maxDate={this.formatDate(this.props.to) || '+0'}
           name="from"
-          value={this.formatDate(this.props.from)}
-          placeholder={translate('from')}
           onChange={this.handleFromDateChange}
+          placeholder={translate('from')}
+          value={this.formatDate(this.props.from)}
         />
         {'—'}
         <DateInput
           className="little-spacer-left"
+          minDate={this.formatDate(this.props.from)}
           name="to"
-          value={this.formatDate(this.props.to)}
-          placeholder={translate('to')}
           onChange={this.handleToDateChange}
+          placeholder={translate('to')}
+          value={this.formatDate(this.props.to)}
         />
         <button
           className="spacer-left"
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityDateInput-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityDateInput-test.js.snap
index a25f91ca43f..5967a6968c2 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityDateInput-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityDateInput-test.js.snap
@@ -5,7 +5,7 @@ exports[`should render correctly the date inputs 1`] = `
   <DateInput
     className="little-spacer-right"
     format="yy-mm-dd"
-    maxDate="+0"
+    maxDate="2016-12-27"
     name="from"
     onChange={[Function]}
     placeholder="from"
@@ -16,6 +16,7 @@ exports[`should render correctly the date inputs 1`] = `
     className="little-spacer-left"
     format="yy-mm-dd"
     maxDate="+0"
+    minDate="2016-10-27"
     name="to"
     onChange={[Function]}
     placeholder="to"
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx
index 288529c6c63..de47bc42a0d 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ChangelogSearch.tsx
@@ -31,11 +31,11 @@ interface Props {
 }
 
 export default class ChangelogSearch extends React.PureComponent<Props> {
-  handleResetClick(event: React.SyntheticEvent<HTMLElement>) {
+  handleResetClick = (event: React.SyntheticEvent<HTMLElement>) => {
     event.preventDefault();
     event.currentTarget.blur();
     this.props.onReset();
-  }
+  };
 
   formatDate = (date?: string) => (date ? toShortNotSoISOString(date) : undefined);
 
@@ -43,19 +43,21 @@ export default class ChangelogSearch extends React.PureComponent<Props> {
     return (
       <div className="display-inline-block" id="quality-profile-changelog-form">
         <DateInput
+          maxDate={this.formatDate(this.props.toDate) || '+0'}
           name="since"
-          value={this.formatDate(this.props.fromDate)}
-          placeholder={translate('from')}
           onChange={this.props.onFromDateChange}
+          placeholder={translate('from')}
+          value={this.formatDate(this.props.fromDate)}
         />
         {' — '}
         <DateInput
+          minDate={this.formatDate(this.props.fromDate)}
           name="to"
-          value={this.formatDate(this.props.toDate)}
-          placeholder={translate('to')}
           onChange={this.props.onToDateChange}
+          placeholder={translate('to')}
+          value={this.formatDate(this.props.toDate)}
         />
-        <button className="spacer-left" onClick={this.handleResetClick.bind(this)}>
+        <button className="spacer-left" onClick={this.handleResetClick}>
           {translate('reset_verb')}
         </button>
       </div>
diff --git a/server/sonar-web/src/main/js/components/controls/DateInput.tsx b/server/sonar-web/src/main/js/components/controls/DateInput.tsx
index e3676215149..5a0c0911f61 100644
--- a/server/sonar-web/src/main/js/components/controls/DateInput.tsx
+++ b/server/sonar-web/src/main/js/components/controls/DateInput.tsx
@@ -30,6 +30,7 @@ interface Props {
   inputClassName?: string;
   // see http://api.jqueryui.com/datepicker/#option-maxDate for details
   maxDate?: Date | string | number;
+  minDate?: Date | string | number;
   name: string;
   onChange: (value?: string) => void;
   placeholder: string;
@@ -48,6 +49,17 @@ export default class DateInput extends React.PureComponent<Props> {
     this.attachDatePicker();
   }
 
+  componentDidUpdate(prevProps: Props) {
+    if ($.fn && ($.fn as any).datepicker && this.input) {
+      if (prevProps.maxDate !== this.props.maxDate) {
+        ($(this.input) as any).datepicker('option', { maxDate: this.props.maxDate });
+      }
+      if (prevProps.minDate !== this.props.minDate) {
+        ($(this.input) as any).datepicker('option', { minDate: this.props.minDate });
+      }
+    }
+  }
+
   handleChange = () => {
     const { value } = this.input;
     this.props.onChange(value);
@@ -65,6 +77,7 @@ export default class DateInput extends React.PureComponent<Props> {
       changeMonth: true,
       changeYear: true,
       maxDate: this.props.maxDate,
+      minDate: this.props.minDate,
       onSelect: this.handleChange
     };