feat: Date range filter for workflow list. Fixes #8329

ui/src/app/shared/components/first-time-user-panel.tsx

@@ -4,7 +4,7 @@ import {useEffect, useState} from 'react';
 // This wraps the children components in a FTU which allows you to provide an explanation of how to use the feature.
 // The child components are hidden behind the panel until the users dismissed the panel by clicking "Continue".
 // The fact the users dismissed the panel is persisted in local storage and the panel not show again.
-export const FirstTimeUserPanel = ({id, explanation, children}: {id: string; explanation: string; children: React.ReactElement}) => {
+export const FirstTimeUserPanel = ({id, explanation, children, style}: {id: string; explanation: string; children: React.ReactElement; style?: React.CSSProperties}) => {
     const localStorageKey = 'FirstTimeUserPanel/' + id;
     const [dismissed, setDismissed] = useState(localStorage.getItem(localStorageKey) === 'true');
 
@@ -14,9 +14,9 @@ export const FirstTimeUserPanel = ({id, explanation, children}: {id: string; exp
 
     if (!dismissed) {
         return (
-            <div className='white-box'>
+            <div className='white-box' style={{textAlign: 'center', ...style}}>
                 <p>{explanation}</p>
-                <p style={{textAlign: 'center'}}>
+                <p>
                     <a onClick={() => setDismissed(true)}>Continue</a>
                 </p>
             </div>

ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import DatePicker from 'react-datepicker';
 import * as models from '../../../../models';
 import {WorkflowPhase} from '../../../../models';
 import {CheckboxFilter} from '../../../shared/components/checkbox-filter/checkbox-filter';
@@ -15,7 +16,9 @@ interface WorkflowFilterProps {
     phaseItems: WorkflowPhase[];
     selectedPhases: WorkflowPhase[];
     selectedLabels: string[];
-    onChange: (namespace: string, selectedPhases: WorkflowPhase[], labels: string[]) => void;
+    minStartedAt?: Date;
+    maxStartedAt?: Date;
+    onChange: (namespace: string, selectedPhases: WorkflowPhase[], labels: string[], minStartedAt: Date, maxStartedAt: Date) => void;
 }
 
 export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
@@ -40,7 +43,7 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
                         <NamespaceFilter
                             value={this.props.namespace}
                             onChange={ns => {
-                                this.props.onChange(ns, this.props.selectedPhases, this.props.selectedLabels);
+                                this.props.onChange(ns, this.props.selectedPhases, this.props.selectedLabels, this.props.minStartedAt, this.props.maxStartedAt);
                             }}
                         />
                     </div>
@@ -51,7 +54,7 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
                             autocomplete={this.labelSuggestion}
                             tags={this.props.selectedLabels}
                             onChange={tags => {
-                                this.props.onChange(this.props.namespace, this.props.selectedPhases, tags);
+                                this.props.onChange(this.props.namespace, this.props.selectedPhases, tags, this.props.minStartedAt, this.props.maxStartedAt);
                             }}
                         />
                     </div>
@@ -82,20 +85,61 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
                                 this.props.onChange(
                                     this.props.namespace,
                                     selected.map(x => x as WorkflowPhase),
-                                    this.props.selectedLabels
+                                    this.props.selectedLabels,
+                                    this.props.minStartedAt,
+                                    this.props.maxStartedAt
                                 );
                             }}
                             items={this.getPhaseItems(this.props.workflows)}
                             type='phase'
                         />
                     </div>
+                    <div className='columns small-5 xlarge-12'>
+                        <p className='wf-filters-container__title'>Started Time</p>
+                        <div>
+                            <DatePicker
+                                selected={this.props.minStartedAt}
+                                onChange={date => {
+                                    this.props.onChange(this.props.namespace, this.props.selectedPhases, this.props.selectedLabels, date, this.props.maxStartedAt);
+                                }}
+                                placeholderText='From'
+                                dateFormat='dd MMM yyyy'
+                                todayButton='Today'
+                                className='argo-field argo-textarea'
+                            />
+                            <a
+                                onClick={() => {
+                                    this.props.onChange(this.props.namespace, this.props.selectedPhases, this.props.selectedLabels, undefined, this.props.maxStartedAt);
+                                }}>
+                                <i className='fa fa-times-circle' />
+                            </a>
+                        </div>
+                        <div>
+                            <DatePicker
+                                selected={this.props.maxStartedAt}
+                                onChange={date => {
+                                    this.props.onChange(this.props.namespace, this.props.selectedPhases, this.props.selectedLabels, this.props.minStartedAt, date);
+                                }}
+                                placeholderText='To'
+                                dateFormat='dd MMM yyyy'
+                                todayButton='Today'
+                                className='argo-field argo-textarea'
+                            />
+                            <a
+                                onClick={() => {
+                                    this.props.onChange(this.props.namespace, this.props.selectedPhases, this.props.selectedLabels, this.props.minStartedAt, undefined);
+                                }}>
+                                <i className='fa fa-times-circle' />
+                            </a>
+                        </div>
+                    </div>
                 </div>
             </div>
         );
     }
 
     private setLabel(name: string, value: string) {
-        this.props.onChange(this.props.namespace, this.props.selectedPhases, [name.concat('=' + value)]);
+        this.props.onChange(this.props.namespace, this.props.selectedPhases, [name.concat('=' + value)], this.props.minStartedAt, this.props.maxStartedAt);
     }
 
     private getPhaseItems(workflows: models.Workflow[]) {