fix: Deprecate old datetime picker (#265)

ctrlplanedev · Dec 16, 2024 · e863175 · e863175
1 parent da317d2
commit e863175
Show file tree

Hide file tree

Showing 15 changed files with 34 additions and 542 deletions.
diff --git a/apps/webservice/package.json b/apps/webservice/package.json
@@ -26,7 +26,6 @@
     "@ctrlplane/validators": "workspace:*",
     "@hookform/resolvers": "^3.3.4",
     "@icons-pack/react-simple-icons": "^10.0.0",
-    "@internationalized/date": "^3.5.4",
     "@monaco-editor/react": "^4.6.0",
     "@next/bundle-analyzer": "^14.2.13",
     "@octokit/auth-app": "^7.1.0",

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-drawer/Overview.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/environment-drawer/Overview.tsx
@@ -31,17 +31,6 @@ type OverviewProps = {
   environment: SCHEMA.Environment;
 };
 
-const isUsing12HourClock = (): boolean => {
-  const date = new Date();
-  const options: Intl.DateTimeFormatOptions = {
-    hour: "numeric",
-  };
-  const formattedTime = new Intl.DateTimeFormat(undefined, options).format(
-    date,
-  );
-  return formattedTime.includes("AM") || formattedTime.includes("PM");
-};
-
 export const Overview: React.FC<OverviewProps> = ({ environment }) => {
   const expiresAt = environment.expiresAt ?? undefined;
   const defaultValues = { ...environment, expiresAt };
@@ -103,7 +92,6 @@ export const Overview: React.FC<OverviewProps> = ({ environment }) => {
                     value={value}
                     onChange={onChange}
                     granularity="minute"
-                    hourCycle={isUsing12HourClock() ? 12 : 24}
                     className="w-60"
                   />
                   <Button

diff --git a/.../src/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/RolloutAndTiming.tsx b/.../src/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/RolloutAndTiming.tsx
@@ -1,14 +1,13 @@
 import type * as SCHEMA from "@ctrlplane/db/schema";
 import React from "react";
-import { ZonedDateTime } from "@internationalized/date";
 import { IconX } from "@tabler/icons-react";
 import _ from "lodash";
 import ms from "ms";
 import prettyMilliseconds from "pretty-ms";
 import { z } from "zod";
 
 import { Button } from "@ctrlplane/ui/button";
-import { DateTimePicker } from "@ctrlplane/ui/date-time-picker/date-time-picker";
+import { DateTimePicker } from "@ctrlplane/ui/datetime-picker";
 import {
   Form,
   FormControl,
@@ -33,30 +32,6 @@ import {
 
 import { api } from "~/trpc/react";
 
-const toZonedDateTime = (date: Date): ZonedDateTime => {
-  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const offset = -date.getTimezoneOffset() * ms("1m");
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hour = date.getHours();
-  const minute = date.getMinutes();
-  const second = date.getSeconds();
-  const millisecond = date.getMilliseconds();
-
-  return new ZonedDateTime(
-    year,
-    month,
-    day,
-    timeZone,
-    offset,
-    hour,
-    minute,
-    second,
-    millisecond,
-  );
-};
-
 const isValidDuration = (str: string) => !isNaN(ms(str));
 
 const schema = z.object({
@@ -143,31 +118,17 @@ export const RolloutAndTiming: React.FC<{
                           className="flex w-fit items-center gap-2 rounded-md border p-1 text-sm"
                         >
                           <DateTimePicker
-                            value={toZonedDateTime(value.startTime)}
-                            aria-label="Start Time"
-                            onChange={(t) => {
-                              onChange({
-                                ...value,
-                                startTime: t.toDate(
-                                  Intl.DateTimeFormat().resolvedOptions()
-                                    .timeZone,
-                                ),
-                              });
-                            }}
+                            value={value.startTime}
+                            onChange={onChange}
+                            granularity="minute"
+                            className="w-60"
                           />{" "}
                           <span className="text-muted-foreground">to</span>{" "}
                           <DateTimePicker
-                            value={toZonedDateTime(value.endTime)}
-                            onChange={(t) => {
-                              onChange({
-                                ...value,
-                                endTime: t.toDate(
-                                  Intl.DateTimeFormat().resolvedOptions()
-                                    .timeZone,
-                                ),
-                              });
-                            }}
-                            aria-label="End Time"
+                            value={value.endTime}
+                            onChange={onChange}
+                            granularity="minute"
+                            className="w-60"
                           />
                           <span className="text-muted-foreground">
                             recurring

diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/DateConditionRender.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_components/filter/DateConditionRender.tsx
@@ -1,9 +1,5 @@
-import type { DateValue } from "@internationalized/date";
-import { ZonedDateTime } from "@internationalized/date";
-import ms from "ms";
-
 import { cn } from "@ctrlplane/ui";
-import { DateTimePicker } from "@ctrlplane/ui/date-time-picker/date-time-picker";
+import { DateTimePicker } from "@ctrlplane/ui/datetime-picker";
 import {
   Select,
   SelectContent,
@@ -13,34 +9,10 @@ import {
 } from "@ctrlplane/ui/select";
 import { DateOperator } from "@ctrlplane/validators/conditions";
 
-const toZonedDateTime = (date: Date): ZonedDateTime => {
-  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const offset = -date.getTimezoneOffset() * ms("1m");
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hour = date.getHours();
-  const minute = date.getMinutes();
-  const second = date.getSeconds();
-  const millisecond = date.getMilliseconds();
-
-  return new ZonedDateTime(
-    year,
-    month,
-    day,
-    timeZone,
-    offset,
-    hour,
-    minute,
-    second,
-    millisecond,
-  );
-};
-
 type Operator = "before" | "after" | "before-or-on" | "after-or-on";
 
 type DateConditionRenderProps = {
-  setDate: (date: DateValue) => void;
+  setDate: (date: Date) => void;
   setOperator: (operator: DateOperator) => void;
   value: string;
   operator: Operator;
@@ -81,10 +53,11 @@ export const DateConditionRender: React.FC<DateConditionRenderProps> = ({
       </div>
       <div className="col-span-7">
         <DateTimePicker
-          value={toZonedDateTime(new Date(value))}
-          onChange={(value) => setDate(value)}
+          value={new Date(value)}
+          onChange={(value) => setDate(value ?? new Date())}
           aria-label={type}
-          variant="filter"
+          granularity="minute"
+          className="rounded-l-none"
         />
       </div>
     </div>

diff --git a/...e/src/app/[workspaceSlug]/(app)/_components/job-condition/JobCreatedAtConditionRender.tsx b/...e/src/app/[workspaceSlug]/(app)/_components/job-condition/JobCreatedAtConditionRender.tsx
@@ -2,21 +2,15 @@ import type {
   CreatedAtCondition,
   DateOperatorType,
 } from "@ctrlplane/validators/conditions";
-import type { DateValue } from "@internationalized/date";
 
 import type { JobConditionRenderProps } from "./job-condition-props";
 import { DateConditionRender } from "../filter/DateConditionRender";
 
 export const JobCreatedAtConditionRender: React.FC<
   JobConditionRenderProps<CreatedAtCondition>
 > = ({ condition, onChange, className }) => {
-  const setDate = (t: DateValue) =>
-    onChange({
-      ...condition,
-      value: t
-        .toDate(Intl.DateTimeFormat().resolvedOptions().timeZone)
-        .toISOString(),
-    });
+  const setDate = (value: Date) =>
+    onChange({ ...condition, value: value.toISOString() });
 
   const setOperator = (operator: DateOperatorType) =>
     onChange({ ...condition, operator });

diff --git a/...p/[workspaceSlug]/(app)/_components/release-condition/ReleaseCreatedAtConditionRender.tsx b/...p/[workspaceSlug]/(app)/_components/release-condition/ReleaseCreatedAtConditionRender.tsx
@@ -2,21 +2,15 @@ import type {
   CreatedAtCondition,
   DateOperatorType,
 } from "@ctrlplane/validators/conditions";
-import type { DateValue } from "@internationalized/date";
 
 import type { ReleaseConditionRenderProps } from "./release-condition-props";
 import { DateConditionRender } from "../filter/DateConditionRender";
 
 export const CreatedAtConditionRender: React.FC<
   ReleaseConditionRenderProps<CreatedAtCondition>
 > = ({ condition, onChange, className }) => {
-  const setDate = (t: DateValue) =>
-    onChange({
-      ...condition,
-      value: t
-        .toDate(Intl.DateTimeFormat().resolvedOptions().timeZone)
-        .toISOString(),
-    });
+  const setDate = (value: Date) =>
+    onChange({ ...condition, value: value.toISOString() });
 
   const setOperator = (operator: DateOperatorType) =>
     onChange({ ...condition, operator });

diff --git a/...[workspaceSlug]/(app)/_components/resource-condition/ResourceCreatedAtConditionRender.tsx b/...[workspaceSlug]/(app)/_components/resource-condition/ResourceCreatedAtConditionRender.tsx
@@ -2,21 +2,15 @@ import type {
   CreatedAtCondition,
   DateOperatorType,
 } from "@ctrlplane/validators/conditions";
-import type { DateValue } from "@internationalized/date";
 
 import type { ResourceConditionRenderProps } from "./resource-condition-props";
 import { DateConditionRender } from "../filter/DateConditionRender";
 
 export const ResourceCreatedAtConditionRender: React.FC<
   ResourceConditionRenderProps<CreatedAtCondition>
 > = ({ condition, onChange, className }) => {
-  const setDate = (t: DateValue) =>
-    onChange({
-      ...condition,
-      value: t
-        .toDate(Intl.DateTimeFormat().resolvedOptions().timeZone)
-        .toISOString(),
-    });
+  const setDate = (value: Date) =>
+    onChange({ ...condition, value: value.toISOString() });
 
   const setOperator = (operator: DateOperatorType) =>
     onChange({ ...condition, operator });