Add test

src/components/Header/UserDropdown.tsx

@@ -33,7 +33,7 @@ export const UserDropdown = () => {
     },
   ];
   if (permissions?.canEditAdminSettings) {
-    menuItems.splice(1, 0, {
+    menuItems.splice(2, 0, {
       "data-cy": "admin-link",
       text: "Admin",
       href: adminSettingsURL,

src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx

@@ -225,7 +225,9 @@ export const LeafyGreenRadio: React.FC<EnumSpruceWidgetProps> = ({
   } = options;
   return (
     <ElementWrapper css={elementWrapperCSS}>
-      <Label htmlFor={id}>{label}</Label>
+      <LabelContainer>
+        <Label htmlFor={id}>{label}</Label>
+      </LabelContainer>
       <RadioGroup
         data-cy={dataCy}
         id={id}
@@ -278,12 +280,12 @@ export const LeafyGreenRadioBox: React.FC<
   return (
     <ElementWrapper css={elementWrapperCSS}>
       {showLabel !== false && (
-        <RadioBoxLabelContainer>
+        <LabelContainer>
           <Label htmlFor={id} disabled={disabled}>
             {label}
           </Label>
           {description && <Description>{description}</Description>}
-        </RadioBoxLabelContainer>
+        </LabelContainer>
       )}
       {!!errors && (
         <StyledBanner variant="danger" data-cy="error-banner">
@@ -323,7 +325,7 @@ const StyledBanner = styled(Banner)`
   margin-bottom: ${size.s};
 `;
 
-const RadioBoxLabelContainer = styled.div`
+const LabelContainer = styled.div`
   margin-bottom: ${size.xs};
 `;
 

src/constants/fieldMaps.ts

@@ -185,6 +185,11 @@ export const dateFormats = listOfDateFormatStrings.map((format) => ({
   })}`,
 }));
 
+export enum TimeFormat {
+  TwelveHour = "h:mm:ss aa",
+  TwentyFourHour = "H:mm:ss",
+}
+
 export const notificationFields = {
   patchFinish: "Patch finish",
   patchFirstFailure: "Patch first task failure",

src/pages/preferences/preferencesTabs/ProfileTab.tsx

@@ -6,7 +6,7 @@ import { Skeleton } from "antd";
 import { usePreferencesAnalytics } from "analytics";
 import { SettingsCard } from "components/SettingsCard";
 import { SpruceForm } from "components/SpruceForm";
-import { timeZones, dateFormats } from "constants/fieldMaps";
+import { timeZones, dateFormats, TimeFormat } from "constants/fieldMaps";
 import { useToastContext } from "context/toast";
 import {
   UpdateUserSettingsMutation,
@@ -27,10 +27,11 @@ export const ProfileTab: React.FC = () => {
     dateFormat,
     githubUser,
     region,
-    timeFormat = "h:mm:ss aa",
+    timeFormat: dbTimeFormat,
     timezone,
   } = userSettings ?? {};
   const lastKnownAs = githubUser?.lastKnownAs || "";
+  const timeFormat = dbTimeFormat || TimeFormat.TwelveHour;
 
   const { data: awsRegionData, loading: awsRegionLoading } =
     useQuery<AwsRegionsQuery>(AWS_REGIONS);
@@ -170,14 +171,14 @@ export const ProfileTab: React.FC = () => {
                     type: "string" as "string",
                     title: "12-hour clock",
                     description: "Display time with AM/PM, e.g. 12:34 PM",
-                    enum: ["h:mm:ss aa"],
+                    enum: [TimeFormat.TwelveHour],
                   },
 
                   {
                     type: "string" as "string",
                     title: "24-hour clock",
                     description: "Use 24-hour notation, e.g. 13:34",
-                    enum: ["H:mm:ss"],
+                    enum: [TimeFormat.TwentyFourHour],
                   },
                 ],
               },

src/utils/string/string.test.ts

@@ -1,3 +1,4 @@
+import { TimeFormat } from "constants/fieldMaps";
 import {
   msToDuration,
   sortFunctionDate,
@@ -292,7 +293,25 @@ describe("getDateCopy", () => {
       getDateCopy("08/31/1996", { dateFormat: "MM/dd/yyyy", dateOnly: true }),
     ).toBe("08/31/1996");
   });
+
+  it("returns dates with a custom time format when supplied with the option", () => {
+    expect(
+      getDateCopy(new Date("2020-11-16T22:17:29z"), {
+        omitTimezone: true,
+        timeFormat: TimeFormat.TwentyFourHour,
+      }),
+    ).toBe("Nov 16, 2020, 22:17:29");
+
+    expect(
+      getDateCopy(new Date("2020-11-16T22:17:29z"), {
+        omitSeconds: true,
+        omitTimezone: true,
+        timeFormat: TimeFormat.TwelveHour,
+      }),
+    ).toBe("Nov 16, 2020, 10:17 PM");
+  });
 });
+
 describe("applyStrictRegex", () => {
   it("converts string to strict regex", () => {
     expect(applyStrictRegex("dog")).toBe("^dog$");