Skip to content

Commit 5478afa

Browse files
just-at-uberjust-at-uber
authored
Fix/open date range (#102)
* open workflows now no longer have a min start date disabled. When switching from open to close will limit to max retention if range is greater * fixing tests * fixing lint * 3.10.1-beta.0 * PR comments * fixing tests * eslint fixes * 3.10.1-beta.1 * fixing bug from testing in staging environment * 3.10.1-beta.2 * 3.10.1
1 parent bb31df9 commit 5478afa

File tree

5 files changed

+135
-118
lines changed

5 files changed

+135
-118
lines changed

‎client/components/date-range-picker/helpers.js‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,6 @@ export const getDateString = date => moment(date).format(DATETIME_FORMAT);
99

1010
export const getMaxEndDate = now => moment(now).endOf('day');
1111

12-
export const getMinStartDate = (maxDays, now) =>
13-
moment(now)
14-
.startOf('day')
15-
.subtract(maxDays, 'days');
16-
1712
export const getRange = dateRange => {
1813
if (!dateRange) {
1914
return [];
@@ -63,9 +58,13 @@ export const getRangeDisplayText = dateRange => {
6358
return `Last ${parsedCount} ${unit}`;
6459
};
6560

66-
export const getShortcuts = (maxDays, onClickHandler) => {
61+
export const getShortcuts = (maxDays, minStartDate) => {
6762
let options = RANGE_OPTIONS;
6863

64+
if (!minStartDate) {
65+
return options;
66+
}
67+
6968
if (maxDays && maxDays < 90) {
7069
options = options.filter(o => o.daysAgo < maxDays);
7170
const periodType = maxDays === 1 ? 'day' : 'days';
@@ -80,21 +79,17 @@ export const getShortcuts = (maxDays, onClickHandler) => {
8079
options.sort((a, b) => a.daysAgo - b.daysAgo);
8180
}
8281

83-
options = options.map(option => ({
84-
...option,
85-
onClick: () => onClickHandler(option),
86-
}));
87-
8882
return options;
8983
};
9084

9185
export const getTimePanelLabel = showTimePanel =>
9286
showTimePanel ? 'Select date' : 'Select time';
9387

9488
export const isDateValid = (date, minStartDate, maxEndDate) =>
95-
date._isValid &&
96-
date.isSameOrAfter(minStartDate) &&
97-
date.isSameOrBefore(maxEndDate);
89+
(date.isValid &&
90+
!date.isAfter(maxEndDate) &&
91+
!(minStartDate && date.isBefore(minStartDate))) ||
92+
false;
9893

9994
export const isDayDisabled = minStartDate => date => {
10095
const momentDate = moment(date);

‎client/components/date-range-picker/helpers.spec.js‎

Lines changed: 39 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import moment from 'moment';
22
import {
33
getDateString,
44
getMaxEndDate,
5-
getMinStartDate,
65
getRange,
76
getRangeDisplayText,
87
getShortcuts,
@@ -39,43 +38,6 @@ describe('DateRangePicker helpers', () => {
3938
});
4039
});
4140

42-
describe('getMinStartDate', () => {
43-
describe('When moment is set to March 10th 2020', () => {
44-
beforeEach(() => {
45-
jest
46-
.spyOn(Date, 'now')
47-
.mockImplementation(() => new Date(2020, 2, 10).getTime());
48-
});
49-
50-
describe('and maxDays = 1', () => {
51-
it('should return date March 9th 2020.', () => {
52-
const maxDays = 1;
53-
const output = getMinStartDate(maxDays);
54-
55-
expect(output.toISOString()).toEqual('2020-03-09T07:00:00.000Z');
56-
});
57-
});
58-
59-
describe('and maxDays = 3', () => {
60-
it('should return date March 7th 2020.', () => {
61-
const maxDays = 3;
62-
const output = getMinStartDate(maxDays);
63-
64-
expect(output.toISOString()).toEqual('2020-03-07T08:00:00.000Z');
65-
});
66-
});
67-
68-
describe('and maxDays = 30', () => {
69-
it('should return date Feburary 9th 2020.', () => {
70-
const maxDays = 30;
71-
const output = getMinStartDate(maxDays);
72-
73-
expect(output.toISOString()).toEqual('2020-02-09T08:00:00.000Z');
74-
});
75-
});
76-
});
77-
});
78-
7941
describe('getRange', () => {
8042
describe('When dateRange = "".', () => {
8143
it('should return [].', () => {
@@ -370,27 +332,18 @@ describe('DateRangePicker helpers', () => {
370332
});
371333

372334
describe('getShortcuts', () => {
373-
describe('When maxDays = 1', () => {
335+
describe('When maxDays = 1 and minStartDate is defined', () => {
374336
const maxDays = 1;
375-
376-
describe('and onClick function is called', () => {
377-
it('should try to call the passed in onClickHandler.', () => {
378-
const onClickHandler = jest.fn();
379-
const output = getShortcuts(maxDays, onClickHandler);
380-
381-
output[0].onClick();
382-
expect(onClickHandler).toHaveBeenCalled();
383-
});
384-
});
337+
const minStartDate = {};
385338

386339
it('should return 4 shortcuts.', () => {
387-
const output = getShortcuts(maxDays);
340+
const output = getShortcuts(maxDays, minStartDate);
388341

389342
expect(output.length).toEqual(4);
390343
});
391344

392345
it('should not contain "Last 24 hours".', () => {
393-
const output = getShortcuts(maxDays);
346+
const output = getShortcuts(maxDays, minStartDate);
394347
const last24HourOption = output.find(
395348
option => option.text === 'Last 24 hours'
396349
);
@@ -399,75 +352,97 @@ describe('DateRangePicker helpers', () => {
399352
});
400353

401354
it('should return the last option as "Last 1 day".', () => {
402-
const output = getShortcuts(maxDays);
355+
const output = getShortcuts(maxDays, minStartDate);
403356
const lastOption = output[output.length - 1];
404357

405358
expect(lastOption.text).toEqual('Last 1 day');
406359
});
407360
});
408361

409-
describe('When maxDays = 3', () => {
362+
describe('When maxDays = 3 and minStartDate is defined', () => {
410363
const maxDays = 3;
364+
const minStartDate = {};
411365

412366
it('should return 5 shortcuts.', () => {
413-
const output = getShortcuts(maxDays);
367+
const output = getShortcuts(maxDays, minStartDate);
414368

415369
expect(output.length).toEqual(5);
416370
});
417371

418372
it('should return the last option as "Last 3 days".', () => {
419-
const output = getShortcuts(maxDays);
373+
const output = getShortcuts(maxDays, minStartDate);
420374
const lastOption = output[output.length - 1];
421375

422376
expect(lastOption.text).toEqual('Last 3 days');
423377
});
424378
});
425379

426-
describe('When maxDays = 7', () => {
380+
describe('When maxDays = 7 and minStartDate is defined', () => {
427381
const maxDays = 7;
382+
const minStartDate = {};
428383

429384
it('should return 6 shortcuts.', () => {
430-
const output = getShortcuts(maxDays);
385+
const output = getShortcuts(maxDays, minStartDate);
431386

432387
expect(output.length).toEqual(6);
433388
});
434389

435390
it('should return the last option as "Last 7 days".', () => {
436-
const output = getShortcuts(maxDays);
391+
const output = getShortcuts(maxDays, minStartDate);
437392
const lastOption = output[output.length - 1];
438393

439394
expect(lastOption.text).toEqual('Last 7 days');
440395
});
441396
});
442397

443-
describe('When maxDays = 30', () => {
398+
describe('When maxDays = 30 and minStartDate is defined', () => {
444399
const maxDays = 30;
400+
const minStartDate = {};
445401

446402
it('should return 7 shortcuts.', () => {
447-
const output = getShortcuts(maxDays);
403+
const output = getShortcuts(maxDays, minStartDate);
448404

449405
expect(output.length).toEqual(7);
450406
});
451407

452408
it('should return the last option as "Last 30 days".', () => {
453-
const output = getShortcuts(maxDays);
409+
const output = getShortcuts(maxDays, minStartDate);
454410
const lastOption = output[output.length - 1];
455411

456412
expect(lastOption.text).toEqual('Last 30 days');
457413
});
458414
});
459415

460-
describe('When maxDays = 90', () => {
416+
describe('When maxDays = 90 and minStartDate is defined', () => {
461417
const maxDays = 90;
418+
const minStartDate = {};
462419

463420
it('should return 8 shortcuts.', () => {
464-
const output = getShortcuts(maxDays);
421+
const output = getShortcuts(maxDays, minStartDate);
422+
423+
expect(output.length).toEqual(8);
424+
});
425+
426+
it('should return the last option as "Last 3 months".', () => {
427+
const output = getShortcuts(maxDays, minStartDate);
428+
const lastOption = output[output.length - 1];
429+
430+
expect(lastOption.text).toEqual('Last 3 months');
431+
});
432+
});
433+
434+
describe('When maxDays = 3 and minStartDate = null', () => {
435+
const maxDays = 3;
436+
const minStartDate = null;
437+
438+
it('should return 8 shortcuts', () => {
439+
const output = getShortcuts(maxDays, minStartDate);
465440

466441
expect(output.length).toEqual(8);
467442
});
468443

469444
it('should return the last option as "Last 3 months".', () => {
470-
const output = getShortcuts(maxDays);
445+
const output = getShortcuts(maxDays, minStartDate);
471446
const lastOption = output[output.length - 1];
472447

473448
expect(lastOption.text).toEqual('Last 3 months');

‎client/components/date-range-picker/index.vue‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,6 @@
5252
:class="{ invalid: endTimeInvalid }"
5353
/>
5454
</div>
55-
<div>
56-
<label for="custom-range-filter-by">Filter by:</label>
57-
<input id="custom-range-filter-by" disabled :value="filterBy" />
58-
</div>
5955
<div>
6056
<button
6157
class="sidebar-button"
@@ -83,7 +79,6 @@ import DatePicker from 'vue2-datepicker';
8379
import {
8480
getDateString,
8581
getMaxEndDate,
86-
getMinStartDate,
8782
getRange,
8883
getRangeDisplayText,
8984
getShortcuts,
@@ -93,7 +88,7 @@ import {
9388
} from './helpers';
9489
9590
export default {
96-
props: ['dateRange', 'filterBy', 'maxDays'],
91+
props: ['dateRange', 'maxDays', 'minStartDate'],
9792
data() {
9893
const range = getRange(this.dateRange);
9994
@@ -128,14 +123,11 @@ export default {
128123
maxEndDate() {
129124
return getMaxEndDate(this.now);
130125
},
131-
minStartDate() {
132-
return getMinStartDate(this.maxDays, this.now);
133-
},
134126
rangeDisplayText() {
135127
return getRangeDisplayText(this.dateRange);
136128
},
137129
shortcuts() {
138-
return getShortcuts(this.maxDays, this.onShortcutClick);
130+
return getShortcuts(this.maxDays, this.minStartDate);
139131
},
140132
startTime() {
141133
return moment(this.startTimeString);
@@ -200,7 +192,7 @@ export default {
200192
</script>
201193

202194
<style lang="stylus">
203-
sidebarColumnCustomRangeWidth = 175px;
195+
sidebarColumnCustomRangeWidth = 181px;
204196
sidebarColumnShortcutsWidth = 130px;
205197
sidebarColumnPadding = 12px;
206198
sidebarWidth = sidebarColumnShortcutsWidth + sidebarColumnCustomRangeWidth;
@@ -240,7 +232,7 @@ sidebarWidth = sidebarColumnShortcutsWidth + sidebarColumnCustomRangeWidth;
240232
input {
241233
margin: 0 0 8px 0;
242234
padding: 8px 10px;
243-
width: 150px;
235+
width: 156px;
244236
245237
&.invalid {
246238
border: 1px solid #D44333;

0 commit comments

Comments
 (0)