Allow setting time for date filter at dashboard (#32763)

* Allow selecting time on datepicker at dashboard filter

* Add e2e test

* Rename variable

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;
 

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());

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;

frontend/src/metabase/components/DateAllOptionsWidget/index.ts

-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export { default } from "./DateAllOptionsWidget";
+export { DateAllOptionsWidget } from "./DateAllOptionsWidget";

frontend/src/metabase/components/DateRangeWidget/DateRangeWidget.tsx

 import moment from "moment-timezone";
-import DateAllOptionsWidget from "metabase/components/DateAllOptionsWidget";
+import { DateAllOptionsWidget } from "metabase/components/DateAllOptionsWidget";
 
 interface DateRangeWidgetProps {
   setValue: (value: string | null) => void;

frontend/src/metabase/components/DateSingleWidget/DateSingleWidget.tsx

 import moment from "moment-timezone";
-import DateAllOptionsWidget from "metabase/components/DateAllOptionsWidget";
+import { DateAllOptionsWidget } from "metabase/components/DateAllOptionsWidget";
 
 interface DateSingleWidgetProps {
   setValue: (value: string | null) => void;

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";

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)}