ref(js): Consolidate dateTime format functions (#51201)

static/app/components/charts/components/tooltip.tsx

@@ -29,7 +29,7 @@ export function defaultFormatAxisLabel(
   const formatOptions = {local: !utc};
 
   const timeFormat = showTimeInTooltip
-    ? getTimeFormat({displaySeconds: addSecondsToTimeFormat})
+    ? getTimeFormat({seconds: addSecondsToTimeFormat})
     : '';
 
   if (!bucketSize) {

static/app/components/charts/components/xAxis.tsx

@@ -32,7 +32,7 @@ function XAxis({
   ...props
 }: Props): XAXisComponentOption {
   const AxisLabelFormatter = (value: string, index: number) => {
-    const timeFormat = getTimeFormat({displaySeconds: addSecondsToTimeFormat});
+    const timeFormat = getTimeFormat({seconds: addSecondsToTimeFormat});
     const dateFormat = useShortDate ? 'MMM Do' : `MMM D ${timeFormat}`;
     const firstItem = index === 0;
     const format =

static/app/components/dateTime.tsx

@@ -2,6 +2,7 @@ import moment from 'moment';
 import momentTimezone from 'moment-timezone';
 
 import ConfigStore from 'sentry/stores/configStore';
+import {getFormat} from 'sentry/utils/dates';
 
 interface Props extends React.HTMLAttributes<HTMLTimeElement> {
   /**
@@ -43,52 +44,6 @@ interface Props extends React.HTMLAttributes<HTMLTimeElement> {
   year?: boolean;
 }
 
-function getDateFormat({year}: Pick<Props, 'year'>) {
-  // "Jan 1, 2022" or "Jan 1"
-  return year ? 'MMM D, YYYY' : 'MMM D';
-}
-
-function getTimeFormat({clock24Hours, seconds, timeZone}) {
-  const substrings = [
-    clock24Hours ? 'HH' : 'h', // hour – "23" (24h format) or "11" (12h format)
-    ':mm', // minute
-    seconds ? ':ss' : '', // second
-    clock24Hours ? '' : ' A', // AM/PM
-    timeZone ? ' z' : '', // time zone
-  ];
-  return substrings.join('');
-}
-
-function getFormat({
-  dateOnly,
-  timeOnly,
-  year,
-  seconds,
-  timeZone,
-  clock24Hours,
-}: Pick<Props, 'dateOnly' | 'timeOnly' | 'year' | 'seconds' | 'timeZone'> & {
-  clock24Hours: boolean;
-}) {
-  if (dateOnly) {
-    return getDateFormat({year});
-  }
-
-  if (timeOnly) {
-    return getTimeFormat({clock24Hours, seconds, timeZone});
-  }
-
-  const dateFormat = getDateFormat({year});
-  const timeFormat = getTimeFormat({
-    clock24Hours,
-    seconds,
-    timeZone,
-  });
-
-  // If the year is shown, then there's already a comma in dateFormat ("Jan 1, 2020"),
-  // so we don't need to add another comma between the date and time
-  return year ? `${dateFormat} ${timeFormat}` : `${dateFormat}, ${timeFormat}`;
-}
-
 function DateTime({
   format,
   date,

static/app/utils/dates.tsx

@@ -229,16 +229,103 @@ export function statsPeriodToDays(
   return 0;
 }
 
+/**
+ * Does the user prefer a 24 hour clock?
+ */
 export function shouldUse24Hours() {
   return ConfigStore.get('user')?.options?.clock24Hours;
 }
 
-export function getTimeFormat({displaySeconds = false}: {displaySeconds?: boolean} = {}) {
-  if (shouldUse24Hours()) {
-    return displaySeconds ? 'HH:mm:ss' : 'HH:mm';
+/**
+ * Get a common date format
+ */
+export function getDateFormat({year}: {year?: boolean}) {
+  // "Jan 1, 2022" or "Jan 1"
+  return year ? 'MMM D, YYYY' : 'MMM D';
+}
+
+/**
+ * Get a common time format
+ */
+export function getTimeFormat({
+  clock24Hours,
+  seconds,
+  timeZone,
+}: {
+  clock24Hours?: boolean;
+  seconds?: boolean;
+  timeZone?: boolean;
+} = {}) {
+  let format = '';
+
+  if (clock24Hours ?? shouldUse24Hours()) {
+    format = seconds ? 'HH:mm:ss' : 'HH:mm';
+  } else {
+    format = seconds ? 'LTS' : 'LT';
   }
 
-  return displaySeconds ? 'LTS' : 'LT';
+  if (timeZone) {
+    format += ' z';
+  }
+
+  return format;
+}
+
+interface FormatProps {
+  /**
+   * Should show a 24hour clock? If not set the users preference will be used
+   */
+  clock24Hours?: boolean;
+  /**
+   * If true, will only return the date part, e.g. "Jan 1".
+   */
+  dateOnly?: boolean;
+  /**
+   * Whether to show the seconds.
+   */
+  seconds?: boolean;
+  /**
+   * If true, will only return the time part, e.g. "2:50 PM"
+   */
+  timeOnly?: boolean;
+  /**
+   * Whether to show the time zone.
+   */
+  timeZone?: boolean;
+  /**
+   * Whether to show the year. If not specified, the returned date string will
+   * not contain the year _if_ the date is not in the current calendar year.
+   * For example: "Feb 1" (2022), "Jan 1" (2022), "Dec 31, 2021".
+   */
+  year?: boolean;
+}
+
+export function getFormat({
+  dateOnly,
+  timeOnly,
+  year,
+  seconds,
+  timeZone,
+  clock24Hours,
+}: FormatProps = {}) {
+  if (dateOnly) {
+    return getDateFormat({year});
+  }
+
+  if (timeOnly) {
+    return getTimeFormat({clock24Hours, seconds, timeZone});
+  }
+
+  const dateFormat = getDateFormat({year});
+  const timeFormat = getTimeFormat({
+    clock24Hours,
+    seconds,
+    timeZone,
+  });
+
+  // If the year is shown, then there's already a comma in dateFormat ("Jan 1, 2020"),
+  // so we don't need to add another comma between the date and time
+  return year ? `${dateFormat} ${timeFormat}` : `${dateFormat}, ${timeFormat}`;
 }
 
 export function getInternalDate(date: string | Date, utc?: boolean | null) {