From c8afac24548a9adf346ffff61ebc7d2cf7509184 Mon Sep 17 00:00:00 2001
From: Uladzimir Havenchyk <125459446+uladzimirdev@users.noreply.github.com>
Date: Wed, 2 Aug 2023 00:32:28 +0300
Subject: [PATCH] Allow setting time for date filter at dashboard (#32763)
* Allow selecting time on datepicker at dashboard filter
* Add e2e test
* Rename variable
---
.../dashboard-filters/dashboard-filters-date.cy.spec.js | 3 ++-
.../native-filters/helpers/e2e-date-filter-helpers.js | 8 ++++++++
.../DateAllOptionsWidget/DateAllOptionsWidget.tsx | 7 ++-----
.../src/metabase/components/DateAllOptionsWidget/index.ts | 3 +--
.../components/DateRangeWidget/DateRangeWidget.tsx | 2 +-
.../components/DateSingleWidget/DateSingleWidget.tsx | 2 +-
.../parameters/components/ParameterValueWidget.jsx | 2 +-
.../filters/pickers/DatePicker/HoursMinutesInput.tsx | 2 ++
8 files changed, 18 insertions(+), 11 deletions(-)
diff --git a/e2e/test/scenarios/dashboard-filters/dashboard-filters-date.cy.spec.js b/e2e/test/scenarios/dashboard-filters/dashboard-filters-date.cy.spec.js
index 4494b621176..221c61dfe34 100644
--- a/e2e/test/scenarios/dashboard-filters/dashboard-filters-date.cy.spec.js
+++ b/e2e/test/scenarios/dashboard-filters/dashboard-filters-date.cy.spec.js
@@ -23,7 +23,7 @@ describe("scenarios > dashboard > filters > date", () => {
editDashboard();
});
- it(`should work when set through the filter widget`, () => {
+ it("should work when set through the filter widget", () => {
// Add and connect every single available date filter type
Object.entries(DASHBOARD_DATE_FILTERS).forEach(([filter]) => {
cy.log(`Make sure we can connect ${filter} filter`);
@@ -174,6 +174,7 @@ function dateFilterSelector({ filterType, filterValue } = {}) {
case "Single Date":
DateFilter.setSingleDate(filterValue);
+ DateFilter.setTime({ hours: 11, minutes: 0 });
cy.findByText("Update filter").click();
break;
diff --git a/e2e/test/scenarios/native-filters/helpers/e2e-date-filter-helpers.js b/e2e/test/scenarios/native-filters/helpers/e2e-date-filter-helpers.js
index c90b0886701..5af610f8848 100644
--- a/e2e/test/scenarios/native-filters/helpers/e2e-date-filter-helpers.js
+++ b/e2e/test/scenarios/native-filters/helpers/e2e-date-filter-helpers.js
@@ -24,6 +24,14 @@ export function setSingleDate(date) {
setDate(date, cy.findByTestId("specific-date-picker"));
}
+export function setTime({ hours, minutes }) {
+ popover().within(() => {
+ cy.findByText("Add a time").click();
+ cy.findByPlaceholderText("hh").clear().type(hours);
+ cy.findByPlaceholderText("mm").clear().type(minutes);
+ });
+}
+
export function setDateRange({ startDate, endDate } = {}) {
setDate(startDate, cy.findAllByTestId("specific-date-picker").first());
setDate(endDate, cy.findAllByTestId("specific-date-picker").last());
diff --git a/frontend/src/metabase/components/DateAllOptionsWidget/DateAllOptionsWidget.tsx b/frontend/src/metabase/components/DateAllOptionsWidget/DateAllOptionsWidget.tsx
index 33f20788963..86cb6f63d31 100644
--- a/frontend/src/metabase/components/DateAllOptionsWidget/DateAllOptionsWidget.tsx
+++ b/frontend/src/metabase/components/DateAllOptionsWidget/DateAllOptionsWidget.tsx
@@ -22,7 +22,7 @@ interface DateAllOptionsWidgetProps {
disableOperatorSelection?: boolean;
}
-const DateAllOptionsWidget = ({
+export const DateAllOptionsWidget = ({
setValue,
onClose,
disableOperatorSelection,
@@ -41,13 +41,13 @@ const DateAllOptionsWidget = ({
const filterValues = filter.slice(2);
return filterValues.every((value: any) => value != null);
};
+
return (
<WidgetRoot>
<DatePicker
filter={filter as any}
onFilterChange={setFilter}
onCommit={commitAndClose}
- hideTimeSelectors
hideEmptinessOperators
disableOperatorSelection={disableOperatorSelection}
supportsExpressions
@@ -64,6 +64,3 @@ const DateAllOptionsWidget = ({
</WidgetRoot>
);
};
-
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export default DateAllOptionsWidget;
diff --git a/frontend/src/metabase/components/DateAllOptionsWidget/index.ts b/frontend/src/metabase/components/DateAllOptionsWidget/index.ts
index 063e5941c2f..e2da3823e0f 100644
--- a/frontend/src/metabase/components/DateAllOptionsWidget/index.ts
+++ b/frontend/src/metabase/components/DateAllOptionsWidget/index.ts
@@ -1,2 +1 @@
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export { default } from "./DateAllOptionsWidget";
+export { DateAllOptionsWidget } from "./DateAllOptionsWidget";
diff --git a/frontend/src/metabase/components/DateRangeWidget/DateRangeWidget.tsx b/frontend/src/metabase/components/DateRangeWidget/DateRangeWidget.tsx
index 3ba4e69e580..ba0faae0725 100644
--- a/frontend/src/metabase/components/DateRangeWidget/DateRangeWidget.tsx
+++ b/frontend/src/metabase/components/DateRangeWidget/DateRangeWidget.tsx
@@ -1,5 +1,5 @@
import moment from "moment-timezone";
-import DateAllOptionsWidget from "metabase/components/DateAllOptionsWidget";
+import { DateAllOptionsWidget } from "metabase/components/DateAllOptionsWidget";
interface DateRangeWidgetProps {
setValue: (value: string | null) => void;
diff --git a/frontend/src/metabase/components/DateSingleWidget/DateSingleWidget.tsx b/frontend/src/metabase/components/DateSingleWidget/DateSingleWidget.tsx
index edd2035148e..1645f414825 100644
--- a/frontend/src/metabase/components/DateSingleWidget/DateSingleWidget.tsx
+++ b/frontend/src/metabase/components/DateSingleWidget/DateSingleWidget.tsx
@@ -1,5 +1,5 @@
import moment from "moment-timezone";
-import DateAllOptionsWidget from "metabase/components/DateAllOptionsWidget";
+import { DateAllOptionsWidget } from "metabase/components/DateAllOptionsWidget";
interface DateSingleWidgetProps {
setValue: (value: string | null) => void;
diff --git a/frontend/src/metabase/parameters/components/ParameterValueWidget.jsx b/frontend/src/metabase/parameters/components/ParameterValueWidget.jsx
index 40b2cb4fffa..550cd43fc7b 100644
--- a/frontend/src/metabase/parameters/components/ParameterValueWidget.jsx
+++ b/frontend/src/metabase/parameters/components/ParameterValueWidget.jsx
@@ -15,7 +15,7 @@ import DateRangeWidget from "metabase/components/DateRangeWidget";
import DateRelativeWidget from "metabase/components/DateRelativeWidget";
import DateMonthYearWidget from "metabase/components/DateMonthYearWidget";
import DateQuarterYearWidget from "metabase/components/DateQuarterYearWidget";
-import DateAllOptionsWidget from "metabase/components/DateAllOptionsWidget";
+import { DateAllOptionsWidget } from "metabase/components/DateAllOptionsWidget";
import TextWidget from "metabase/components/TextWidget";
import WidgetStatusIcon from "metabase/parameters/components/WidgetStatusIcon";
import FormattedParameterValue from "metabase/parameters/components/FormattedParameterValue";
diff --git a/frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/HoursMinutesInput.tsx b/frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/HoursMinutesInput.tsx
index 41695c9eaf9..27a4906465d 100644
--- a/frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/HoursMinutesInput.tsx
+++ b/frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/HoursMinutesInput.tsx
@@ -29,6 +29,7 @@ const HoursMinutesInput = ({
style={{ height: 36 }}
size={2}
maxLength={2}
+ placeholder="hh"
value={
is24HourMode
? String(hours)
@@ -46,6 +47,7 @@ const HoursMinutesInput = ({
<NumericInput
style={{ height: 36 }}
size={2}
+ placeholder="mm"
maxLength={2}
value={(minutes < 10 ? "0" : "") + minutes}
onChange={(value: number) => onChangeMinutes(value)}
--
GitLab