Date range menu appears blank after change of perspective

https://issues.redhat.com/browse/COST-5586

Author: dlabrecq

src/routes/explorer/explorer.tsx

@@ -375,6 +375,18 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
     }
   };
 
+  private handleOnDateRangeSelect = (dateRangeType: string) => {
+    const { query, router } = this.props;
+
+    const newQuery = {
+      ...JSON.parse(JSON.stringify(query)),
+      dateRangeType,
+      start_date: undefined,
+      end_date: undefined,
+    };
+    router.navigate(getRouteForQuery(newQuery, router.location, true), { replace: true });
+  };
+
   private handleOnExportModalClose = (isOpen: boolean) => {
     this.setState({ isExportModalOpen: isOpen });
   };
@@ -569,6 +581,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
           onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router)}
           onCostTypeSelect={() => handleOnCostTypeSelect(query, router)}
           onCurrencySelect={() => handleOnCurrencySelect(query, router)}
+          onDateRangeSelect={this.handleOnDateRangeSelect}
           onFilterAdded={filter => handleOnFilterAdded(query, router, filter)}
           onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)}
           onGroupBySelect={this.handleOnGroupBySelect}

src/routes/explorer/explorerDatePicker.tsx

@@ -16,7 +16,7 @@ interface ExplorerDatePickerOwnProps extends RouterComponentProps, WrappedCompon
   dateRangeType?: DateRangeType;
   endDate?: string;
   onSelect(startDate: Date, endDate: Date);
-  startDate?: Date;
+  startDate?: string;
 }
 
 interface ExplorerDatePickerState {
@@ -39,11 +39,6 @@ class ExplorerDatePickerBase extends React.Component<ExplorerDatePickerProps, Ex
 
   public componentDidMount() {
     const { dateRangeType, endDate, startDate } = this.props;
-    // const queryFromRoute = parseQuery<Query>(router.location.search);
-    //
-    // // Query dates are undefined until a selection is made
-    // const end_date = queryFromRoute.end_date;
-    // const start_date = queryFromRoute.start_date;
 
     if (this.startDateRef?.current) {
       this.startDateRef.current.setCalendarOpen(dateRangeType !== DateRangeType.custom);

src/routes/explorer/explorerFilter.tsx

@@ -43,7 +43,7 @@ import {
 
 interface ExplorerFilterOwnProps extends RouterComponentProps, WrappedComponentProps {
   dateRangeType: DateRangeType;
-  endDate?: boolean;
+  endDate?: string;
   groupBy: string;
   isCurrentMonthData?: boolean;
   isDisabled?: boolean;
@@ -53,7 +53,7 @@ interface ExplorerFilterOwnProps extends RouterComponentProps, WrappedComponentP
   perspective: PerspectiveType;
   pagination?: React.ReactNode;
   query?: Query;
-  startDate?: boolean;
+  startDate?: string;
 }
 
 interface ExplorerFilterStateProps {
@@ -80,7 +80,6 @@ interface ExplorerFilterDispatchProps {
 
 interface ExplorerFilterState {
   categoryOptions?: ToolbarChipGroup[];
-  currentDateRange: DateRangeType;
   showDatePicker?: boolean;
 }
 
@@ -92,24 +91,20 @@ const tagType = TagType.tag;
 
 export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, ExplorerFilterState> {
   protected defaultState: ExplorerFilterState = {
-    currentDateRange: this.props.dateRangeType,
     showDatePicker: false,
   };
   public state: ExplorerFilterState = { ...this.defaultState };
 
   public componentDidMount() {
-    const { dateRangeType } = this.props;
-
     this.updateReport();
     this.setState({
-      currentDateRange: dateRangeType,
       categoryOptions: this.getCategoryOptions(),
-      showDatePicker: dateRangeType === DateRangeType.custom,
+      showDatePicker: this.props.dateRangeType === DateRangeType.custom,
     });
   }
 
   public componentDidUpdate(prevProps: ExplorerFilterProps) {
-    const { dateRangeType, orgReport, perspective, query, tagReport } = this.props;
+    const { dateRangeType, orgReport, query, tagReport } = this.props;
 
     if (query && !isEqual(query, prevProps.query)) {
       this.updateReport();
@@ -120,18 +115,10 @@ export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, Exp
       prevProps.dateRangeType !== dateRangeType
     ) {
       this.setState({
-        currentDateRange: dateRangeType,
         categoryOptions: this.getCategoryOptions(),
         showDatePicker: dateRangeType === DateRangeType.custom,
       });
     }
-    // Preserve filter -- see https://issues.redhat.com/browse/COST-1090
-    if (prevProps.perspective !== perspective) {
-      const currentDateRange = undefined;
-      this.setState({ currentDateRange }, () => {
-        this.updateDateRange(currentDateRange);
-      });
-    }
   }
 
   private getCategoryOptions = (): ToolbarChipGroup[] => {
@@ -172,12 +159,11 @@ export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, Exp
   };
 
   private getDateRangeComponent = () => {
-    const { isCurrentMonthData, isDisabled } = this.props;
-    const { currentDateRange } = this.state;
+    const { dateRangeType, isCurrentMonthData, isDisabled } = this.props;
 
     return (
       <DateRange
-        dateRangeType={currentDateRange}
+        dateRangeType={dateRangeType}
         isCurrentMonthData={isCurrentMonthData}
         isDisabled={isDisabled}
         isExplorer
@@ -219,30 +205,13 @@ export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, Exp
 
     const currentDateRange = getDateRangeById(value);
     const showDatePicker = value === DateRangeType.custom;
-    this.setState({ currentDateRange, showDatePicker }, () => {
-      if (!showDatePicker) {
-        this.updateDateRange(currentDateRange);
-
-        // Clear inline alert
-        if (onDateRangeSelect) {
-          onDateRangeSelect(currentDateRange);
-        }
+    this.setState({ showDatePicker }, () => {
+      if (onDateRangeSelect && !showDatePicker) {
+        onDateRangeSelect(currentDateRange);
       }
     });
   };
 
-  private updateDateRange = (value: string) => {
-    const { query, router } = this.props;
-
-    const newQuery = {
-      ...JSON.parse(JSON.stringify(query)),
-      dateRangeType: value,
-      start_date: undefined,
-      end_date: undefined,
-    };
-    router.navigate(getRouteForQuery(newQuery, router.location, true), { replace: true });
-  };
-
   private updateReport = () => {
     const {
       fetchOrg,