Skip to content

Commit

Permalink
fix(date-inputs): use correct variables delimiters for default variab…
Browse files Browse the repository at this point in the history 
…les [TCTC-8076] (#2037)

* fix(dates): use correct delimiters for variables in date input

* chore: update changelog

* chore: fix lint

* fix: cover uncovered new code
  • Loading branch information
@alice-sevin
alice-sevin authored Mar 11, 2024
1 parent b58aef6 commit 61e1a97
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 34 deletions.
3 changes: 3 additions & 0 deletions ui/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

### Fixed
- DateForms: use correct delimiters for default date variables

## [0.111.2] - 2024-01-10

### Fixed
Expand Down
21 changes: 20 additions & 1 deletion ui/src/components/stepforms/widgets/DateComponents/DateRangeInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ import t, { LocaleIdentifier } from '@/lib/internationalization';
import {
AvailableVariable,
extractVariableIdentifier,
isTrustedVariable,
VariableDelimiters,
VariablesBucket,
} from '@/lib/variables';
Expand Down Expand Up @@ -374,8 +375,26 @@ export default class DateRangeInput extends Vue {
this.isEditorOpened = false;
}
setVariableDelimiters(value: string): string {
const retrieveVariableDelimiters = (
variableIdentifier: string,
): VariableDelimiters | undefined => {
const variable = this.availableVariables.find((v) => v.identifier === variableIdentifier);
if (!variable) {
return; // if variable is unfound we don't want to display any delimiters
} else if (isTrustedVariable(variable)) {
return this.trustedVariableDelimiters;
}
return this.variableDelimiters;
};
const delimiters = retrieveVariableDelimiters(value);
if (!delimiters) return value;
return `${delimiters.start}${value}${delimiters.end}`;
}
selectVariable(value: string): void {
const variableWithDelimiters = `${this.variableDelimiters.start}${value}${this.variableDelimiters.end}`;
const variableWithDelimiters = this.setVariableDelimiters(value);
this.$emit('input', variableWithDelimiters);
this.closeEditor();
}
Expand Down
22 changes: 20 additions & 2 deletions ui/src/components/stepforms/widgets/DateComponents/NewDateInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ import Tabs from '@/components/Tabs.vue';
import { dateToString, isRelativeDate, relativeDateToString } from '@/lib/dates';
import type { CustomDate, DateRange } from '@/lib/dates';
import { sendAnalytics } from '@/lib/send-analytics';
import { extractVariableIdentifier } from '@/lib/variables';
import { extractVariableIdentifier, isTrustedVariable } from '@/lib/variables';
import type { AvailableVariable, VariableDelimiters, VariablesBucket } from '@/lib/variables';
import CustomVariableList from './CustomVariableList.vue';
Expand Down Expand Up @@ -283,8 +283,26 @@ export default class NewDateInput extends Vue {
this.isEditingCustomVariable = false;
}
setVariableDelimiters(value: string): string {
const retrieveVariableDelimiters = (
variableIdentifier: string,
): VariableDelimiters | undefined => {
const variable = this.availableVariables.find((v) => v.identifier === variableIdentifier);
if (!variable) {
return; // if variable is unfound we don't want to display any delimiters
} else if (isTrustedVariable(variable)) {
return this.trustedVariableDelimiters;
}
return this.variableDelimiters;
};
const delimiters = retrieveVariableDelimiters(value);
if (!delimiters) return value;
return `${delimiters.start}${value}${delimiters.end}`;
}
selectVariable(value: string): void {
const variableWithDelimiters = `${this.variableDelimiters.start}${value}${this.variableDelimiters.end}`;
const variableWithDelimiters = this.setVariableDelimiters(value);
this.$emit('input', variableWithDelimiters);
this.closeEditor();
sendAnalytics({ name: 'Date input - Select variable', value });
Expand Down
76 changes: 55 additions & 21 deletions ui/tests/unit/date-range-input.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,37 @@ const SAMPLE_VARIABLES = [
identifier: 'dates.last_7_days',
label: 'Last 7 days',
value: '',
trusted: true,
},
{
identifier: 'dates.last_14_days',
label: 'Last 14 days',
value: { start: new Date(2020, 11), end: new Date(2020, 11) },
trusted: true,
},
{
identifier: 'dates.last_30_days',
label: 'Last 30 days',
value: '',
trusted: true,
},
{
identifier: 'dates.last_3_months',
label: 'Last 3 Months',
value: '',
trusted: true,
},
{
identifier: 'dates.last_12_months',
label: 'Last 12 Months',
value: '',
trusted: true,
},
{
identifier: 'dates.month_to_date',
label: 'Month to date',
value: '',
trusted: true,
},
{
identifier: 'dates.quarter_to_date',
Expand All @@ -51,6 +57,7 @@ const SAMPLE_VARIABLES = [
identifier: 'dates.all_time',
label: 'All time',
value: '',
trusted: true,
},
];

Expand All @@ -59,16 +66,19 @@ const RELATIVE_SAMPLE_VARIABLES = [
label: 'Today',
identifier: 'today',
value: new Date(2020, 11),
trusted: true,
},
{
label: 'Last month',
identifier: 'last_month',
value: '',
trusted: true,
},
{
label: 'Last year',
identifier: 'last_year',
value: '',
trusted: true,
},
];

Expand All @@ -90,7 +100,8 @@ describe('Date range input', () => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
relativeAvailableVariables: RELATIVE_SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
value: 'anythingnotokay',
});
});
Expand Down Expand Up @@ -159,16 +170,26 @@ describe('Date range input', () => {
});
});

describe('when selecting a variable in CustomVariableList', () => {
const selectedVariable = SAMPLE_VARIABLES[1].identifier;
beforeEach(async () => {
wrapper.find('CustomVariableList-stub').vm.$emit('input', selectedVariable);
describe('when choosing a variable', () => {
it('should emit the new value with correct delimiters (trusted variable)', async () => {
wrapper.find('CustomVariableList-stub').vm.$emit('input', 'dates.last_7_days');
await wrapper.vm.$nextTick();
expect(wrapper.emitted('input')).toHaveLength(1);
expect(wrapper.emitted('input')[0]).toEqual(['{{dates.last_7_days}}']);
expect(wrapper.find('popover-stub').props().visible).toBe(false);
});
it('should emit the selected variable identifier with delimiters', () => {
expect(wrapper.emitted().input[0][0]).toBe(`{{${selectedVariable}}}`);
it('should emit the new value with correct delimiters (untrusted variable)', async () => {
wrapper.find('CustomVariableList-stub').vm.$emit('input', 'dates.quarter_to_date');
await wrapper.vm.$nextTick();
expect(wrapper.emitted('input')).toHaveLength(1);
expect(wrapper.emitted('input')[0]).toEqual(['<%=dates.quarter_to_date%>']);
expect(wrapper.find('popover-stub').props().visible).toBe(false);
});
it('should hide editor', () => {
it('should emit the correct value (undefined variable)', async () => {
wrapper.find('CustomVariableList-stub').vm.$emit('input', 'noop');
await wrapper.vm.$nextTick();
expect(wrapper.emitted('input')).toHaveLength(1);
expect(wrapper.emitted('input')[0]).toEqual(['noop']);
expect(wrapper.find('popover-stub').props().visible).toBe(false);
});
});
Expand Down Expand Up @@ -202,7 +223,8 @@ describe('Date range input', () => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
relativeAvailableVariables: RELATIVE_SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
});
});

Expand Down Expand Up @@ -285,7 +307,8 @@ describe('Date range input', () => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
relativeAvailableVariables: RELATIVE_SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
value: initialValue,
});
await wrapper.setProps({
Expand Down Expand Up @@ -351,7 +374,8 @@ describe('Date range input', () => {
beforeEach(() => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
value: `{{${selectedVariable.identifier}}}`,
});
});
Expand All @@ -372,7 +396,8 @@ describe('Date range input', () => {
beforeEach(() => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
value,
});
});
Expand Down Expand Up @@ -420,7 +445,8 @@ describe('Date range input', () => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
relativeAvailableVariables: RELATIVE_SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
value,
});
});
Expand Down Expand Up @@ -449,7 +475,8 @@ describe('Date range input', () => {
beforeEach(() => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
enableRelativeDate: false,
});
});
Expand All @@ -468,7 +495,8 @@ describe('Date range input', () => {
beforeEach(() => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
enableCustom: false,
});
});
Expand All @@ -484,7 +512,8 @@ describe('Date range input', () => {
beforeEach(async () => {
createWrapper({
availableVariables: [{ label: 'Hidden', identifier: 'hidden', category: 'hidden' }],
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
});
wrapper.find('.widget-date-input__container').trigger('click');
await wrapper.vm.$nextTick();
Expand All @@ -505,7 +534,8 @@ describe('Date range input', () => {
{ label: 'Available', identifier: 'available' },
],
bounds: '{{hidden}}', // hidden variables can be used as variable reference for bounds or presets
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
});
wrapper.find('.widget-date-input__container').trigger('click');
await wrapper.vm.$nextTick();
Expand All @@ -528,7 +558,8 @@ describe('Date range input', () => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
relativeAvailableVariables: RELATIVE_SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
value: { start: new Date('2020/2/1'), end: new Date('2020/3/1') },
bounds,
});
Expand Down Expand Up @@ -573,7 +604,8 @@ describe('Date range input', () => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
relativeAvailableVariables: RELATIVE_SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
compactMode: true,
});
});
Expand Down Expand Up @@ -602,7 +634,8 @@ describe('Date range input', () => {
beforeEach(() => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
value: { start: new Date(), end: new Date(1) },
compactMode: true,
});
Expand All @@ -624,7 +657,8 @@ describe('Date range input', () => {
createWrapper({
availableVariables: SAMPLE_VARIABLES,
relativeAvailableVariables: RELATIVE_SAMPLE_VARIABLES,
variableDelimiters: { start: '{{', end: '}}' },
variableDelimiters: { start: '<%=', end: '%>' },
trustedVariableDelimiters: { start: '{{', end: '}}' },
hidePlaceholder: true,
});
});
Expand Down
Loading

0 comments on commit 61e1a97

Please sign in to comment.