diff --git a/src/components/Header/UserDropdown.tsx b/src/components/Header/UserDropdown.tsx index 2ead04aca1..d63301c51b 100644 --- a/src/components/Header/UserDropdown.tsx +++ b/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, diff --git a/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx b/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx index 3dd73b8d4d..b4562011b4 100644 --- a/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx +++ b/src/components/SpruceForm/Widgets/LeafyGreenWidgets.tsx @@ -225,7 +225,9 @@ export const LeafyGreenRadio: React.FC = ({ } = options; return ( - + + + {showLabel !== false && ( - + {description && {description}} - + )} {!!errors && ( @@ -323,7 +325,7 @@ const StyledBanner = styled(Banner)` margin-bottom: ${size.s}; `; -const RadioBoxLabelContainer = styled.div` +const LabelContainer = styled.div` margin-bottom: ${size.xs}; `; diff --git a/src/constants/fieldMaps.ts b/src/constants/fieldMaps.ts index 1368f86f5b..2325ba668d 100644 --- a/src/constants/fieldMaps.ts +++ b/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", diff --git a/src/pages/preferences/preferencesTabs/ProfileTab.tsx b/src/pages/preferences/preferencesTabs/ProfileTab.tsx index 4ac8d99f97..5cb51876c3 100644 --- a/src/pages/preferences/preferencesTabs/ProfileTab.tsx +++ b/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(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], }, ], }, diff --git a/src/utils/string/string.test.ts b/src/utils/string/string.test.ts index d3ab32b7fd..bc90a0898e 100644 --- a/src/utils/string/string.test.ts +++ b/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$");