web: upgrade date-fns to v3

The changelog mentions that the v3 version of the library can be used to work with UTCDates
https://blog.date-fns.org/v3-is-out/

client/branded/src/components/Timestamp/Timestamp.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react'
 
-import { format, addMinutes, parseISO } from 'date-fns'
-import formatDistance from 'date-fns/formatDistance'
-import formatDistanceStrict from 'date-fns/formatDistanceStrict'
+import { format, addMinutes, parseISO, formatDistance, formatDistanceStrict } from 'date-fns'
 
 import { Tooltip } from '@sourcegraph/wildcard'
 

client/branded/src/search-ui/components/LastSyncedIcon.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { mdiCloudAlert, mdiCloudClock } from '@mdi/js'
 import classNames from 'classnames'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 
 import { Icon, Tooltip } from '@sourcegraph/wildcard'
 

client/web/src/enterprise/codeintel/configuration/components/Duration.tsx

@@ -1,7 +1,6 @@
 import type { FunctionComponent } from 'react'
 
-import { intervalToDuration } from 'date-fns'
-import formatDuration from 'date-fns/formatDuration'
+import { intervalToDuration, formatDuration } from 'date-fns'
 
 import { Tooltip } from '@sourcegraph/wildcard'
 

client/web/src/enterprise/codeintel/configuration/components/DurationSelect.tsx

@@ -1,8 +1,7 @@
 import { type FunctionComponent, useState } from 'react'
 
 import classNames from 'classnames'
-import { intervalToDuration } from 'date-fns'
-import formatDuration from 'date-fns/formatDuration'
+import { intervalToDuration, formatDuration } from 'date-fns'
 
 import { Select, Input } from '@sourcegraph/wildcard'
 

client/web/src/enterprise/insights/components/creation-ui/code-insight-time-step-picker/get-interval-descrtiption-text/get-interval-description-text.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react'
 
+import { Duration } from 'date-fns'
+
 import type { InsightStep } from '../../../../pages/insights/creation/search-insight'
 
 // eslint-disable-next-line @typescript-eslint/no-namespace

client/web/src/enterprise/productSubscription/ExpirationDate.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 
 import { formatRelativeExpirationDate, isProductLicenseExpired } from '../../productSubscription/helpers'
 

client/web/src/enterprise/site-admin/dotcom/productSubscriptions/SiteAdminGenerateProductLicenseForSubscriptionForm.tsx

@@ -2,8 +2,7 @@ import React, { useState, useCallback } from 'react'
 
 import { mdiChatQuestionOutline } from '@mdi/js'
 import classNames from 'classnames'
-import addDays from 'date-fns/addDays'
-import endOfDay from 'date-fns/endOfDay'
+import { addDays, endOfDay } from 'date-fns'
 import { noop } from 'lodash'
 
 import { useMutation } from '@sourcegraph/http-client'

client/web/src/global/GlobalAlerts.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 
 import classNames from 'classnames'
-import { parseISO } from 'date-fns'
-import differenceInDays from 'date-fns/differenceInDays'
+import { parseISO, differenceInDays } from 'date-fns'
 
 import { renderMarkdown } from '@sourcegraph/common'
 import { gql, useQuery } from '@sourcegraph/http-client'

client/web/src/productSubscription/helpers.ts

@@ -1,6 +1,4 @@
-import { parseISO } from 'date-fns'
-import formatDistanceStrict from 'date-fns/formatDistanceStrict'
-import isAfter from 'date-fns/isAfter'
+import { parseISO, formatDistanceStrict, isAfter } from 'date-fns'
 
 import { numberWithCommas, pluralize } from '@sourcegraph/common'
 

client/web/src/repo/blob/blameRecency.tsx

@@ -1,4 +1,4 @@
-import subYears from 'date-fns/subYears'
+import { subYears } from 'date-fns'
 
 // We use an exponential scale to get more diverse colors for more recent changes.
 //

client/web/src/site-admin/SiteAdminBackgroundJobsPage.tsx

@@ -11,7 +11,7 @@ import {
     mdiNumeric,
     mdiShape,
 } from '@mdi/js'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 
 import { Timestamp } from '@sourcegraph/branded/src/components/Timestamp'
 import { pluralize } from '@sourcegraph/common'

client/web/src/site-admin/SiteAdminUpdatesPage.tsx

@@ -2,8 +2,7 @@ import React, { type FunctionComponent, useCallback, useEffect, useMemo, useStat
 
 import { mdiOpenInNew, mdiCheckCircle, mdiChevronUp, mdiChevronDown, mdiAlertOctagram, mdiContentCopy } from '@mdi/js'
 import classNames from 'classnames'
-import { parseISO } from 'date-fns'
-import formatDistance from 'date-fns/formatDistance'
+import { parseISO, formatDistance } from 'date-fns'
 import type {
     SetAutoUpgradeResult,
     SetAutoUpgradeVariables,

client/web/src/site-admin/analytics/AnalyticsOverviewPage/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react'
 
 import { mdiAccount, mdiCommentOutline, mdiSourceRepository } from '@mdi/js'
 import classNames from 'classnames'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 
 import { useQuery } from '@sourcegraph/http-client'
 import { AnchorLink, Card, H2, Link, LoadingSpinner, Text } from '@sourcegraph/wildcard'

client/web/src/site-admin/permissions-center/PermissionsSyncJobsTable.tsx

@@ -3,8 +3,7 @@ import React, { type ChangeEvent, type FC, useCallback, useEffect, useRef, useSt
 import type { ApolloError } from '@apollo/client/errors'
 import { mdiCancel, mdiClose, mdiDetails, mdiMapSearch, mdiReload, mdiSecurity } from '@mdi/js'
 import classNames from 'classnames'
-import { intervalToDuration } from 'date-fns'
-import formatDuration from 'date-fns/formatDuration'
+import { intervalToDuration, formatDuration } from 'date-fns'
 import { capitalize, noop } from 'lodash'
 import { animated, useSpring } from 'react-spring'
 

client/web/src/site/LicenseExpirationAlert.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import classNames from 'classnames'
-import formatDistanceStrict from 'date-fns/formatDistanceStrict'
+import { formatDistanceStrict } from 'date-fns'
 
 import { Link } from '@sourcegraph/wildcard'
 

package.json

@@ -332,7 +332,7 @@
     "d3-shape": "^1.2.0",
     "d3-time-format": "^3.0.0",
     "d3-voronoi": "^1.1.2",
-    "date-fns": "^2.16.1",
+    "date-fns": "^3.3.1",
     "delay": "^4.4.1",
     "detect-indent": "^6.1.0",
     "downshift": "^3.4.8",

pnpm-lock.yaml

@@ -215,8 +215,8 @@ importers:
         specifier: ^1.1.2
         version: 1.1.4
       date-fns:
-        specifier: ^2.16.1
-        version: 2.29.3
+        specifier: ^3.3.1
+        version: 3.3.1
       delay:
         specifier: ^4.4.1
         version: 4.4.1
@@ -14059,6 +14059,11 @@ packages:
   /date-fns@2.29.3:
     resolution: {integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==}
     engines: {node: '>=0.11'}
+    dev: true
+
+  /date-fns@3.3.1:
+    resolution: {integrity: sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==}
+    dev: false
 
   /dayjs@1.11.10:
     resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}