DEVPROD-8688: Add time zone selector to host uptime scheduler (#286)

evergreen-ci · Aug 6, 2024 · ddbea6b · ddbea6b
1 parent 4a66d87
commit ddbea6b
Show file tree

Hide file tree

Showing 14 changed files with 240 additions and 121 deletions.
diff --git a/apps/spruce/src/components/Spawn/editHostModal/getFormSchema.tsx b/apps/spruce/src/components/Spawn/editHostModal/getFormSchema.tsx
@@ -23,7 +23,7 @@ interface Props {
   myPublicKeys: MyPublicKeysQuery["myPublicKeys"];
   noExpirationCheckboxTooltip: string;
   permanentlyExempt: boolean;
-  timeZone?: string;
+  timeZone: string;
   volumes: MyVolumesQuery["myVolumes"];
 }
 

diff --git a/apps/spruce/src/components/Spawn/editHostModal/transformer.test.ts b/apps/spruce/src/components/Spawn/editHostModal/transformer.test.ts
@@ -8,7 +8,6 @@ describe("edit spawn host modal", () => {
         hostId: "host_id",
         myPublicKeys,
         oldUserTags,
-        timeZone: "America/New_York",
       }),
     ).toStrictEqual({
       hostId: "host_id",
@@ -67,6 +66,9 @@ const formState = {
           runContinuously: false,
         },
       },
+      details: {
+        timeZone: "America/New_York",
+      },
     },
   },
   instanceType: "m4.xlarge",

diff --git a/apps/spruce/src/components/Spawn/editHostModal/transformer.ts b/apps/spruce/src/components/Spawn/editHostModal/transformer.ts
@@ -13,14 +13,12 @@ interface Props {
   myPublicKeys: MyPublicKeysQuery["myPublicKeys"];
   formData: FormState;
   oldUserTags: { key: string; value: string }[];
-  timeZone: string;
 }
 export const formToGql = ({
   formData,
   hostId,
   myPublicKeys,
   oldUserTags,
-  timeZone,
 }: Props): EditSpawnHostMutationVariables => {
   const {
     expirationDetails,
@@ -78,8 +76,6 @@ export const formToGql = ({
     },
     savePublicKey: !useExisting && savePublicKey,
     sleepSchedule:
-      noExpiration && hostUptime
-        ? getSleepSchedule(hostUptime, timeZone)
-        : null,
+      noExpiration && hostUptime ? getSleepSchedule(hostUptime) : null,
   };
 };
diff --git a/apps/spruce/src/components/Spawn/getFormSchema.tsx b/apps/spruce/src/components/Spawn/getFormSchema.tsx
@@ -6,7 +6,7 @@ import { add } from "date-fns";
 import widgets from "components/SpruceForm/Widgets";
 import { StyledLink } from "components/styles";
 import { hostUptimeDocumentationUrl } from "constants/externalResources";
-import { prettifyTimeZone } from "constants/fieldMaps";
+import { abbreviateTimeZone, timeZones } from "constants/fieldMaps";
 import { size } from "constants/tokens";
 import { MyPublicKeysQuery } from "gql/generated/types";
 import {
@@ -24,7 +24,7 @@ type HostUptimeProps = {
     warnings: string[];
   };
   isEditModal: boolean;
-  timeZone?: string;
+  timeZone: string;
 };
 
 const getHostUptimeSchema = ({
@@ -38,7 +38,7 @@ const getHostUptimeSchema = ({
     properties: {
       useDefaultUptimeSchedule: {
         type: "boolean" as "boolean",
-        title: "Use default host uptime schedule (Mon–Fri, 8am–8pm)",
+        title: `Use default host uptime schedule (Mon–Fri, 8am–8pm ${abbreviateTimeZone(timeZone)})`,
         default: true,
       },
       sleepSchedule: {
@@ -97,7 +97,24 @@ const getHostUptimeSchema = ({
         },
       },
       details: {
-        type: "null" as "null",
+        type: "object" as "object",
+        title: "",
+        properties: {
+          timeZone: {
+            type: "string",
+            title: "Time Zone",
+            default: timeZone,
+            oneOf: timeZones.map(({ str, value }) => ({
+              type: "string" as "string",
+              title: str,
+              enum: [value],
+            })),
+          },
+
+          uptimeHours: {
+            type: "null" as "null",
+          },
+        },
       },
       isBetaTester: {
         type: "boolean" as "boolean",
@@ -169,16 +186,35 @@ const getHostUptimeSchema = ({
       },
     },
     details: {
-      "ui:descriptionNode": (
-        <Details
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          timeZone={timeZone}
-          // @ts-expect-error: FIXME. This comment was added by an automated script.
-          totalUptimeHours={hostUptimeWarnings?.enabledHoursCount}
-        />
-      ),
-      "ui:showLabel": false,
-      "ui:warnings": hostUptimeWarnings?.warnings,
+      "ui:elementWrapperCSS": css`
+        align-items: flex-end;
+        display: flex;
+        gap: ${size.xs};
+        flex-wrap: wrap;
+
+        > div {
+          width: 40%;
+        }
+
+        > [role="alert"] {
+          margin-top: 0;
+          width: 100%;
+        }
+      `,
+      timeZone: {
+        "ui:allowDeselect": false,
+        "ui:sizeVariant": "xsmall",
+      },
+      uptimeHours: {
+        "ui:descriptionNode": (
+          <Details
+            // @ts-expect-error: FIXME. This comment was added by an automated script.
+            totalUptimeHours={hostUptimeWarnings?.enabledHoursCount}
+          />
+        ),
+        "ui:showLabel": false,
+        "ui:warnings": hostUptimeWarnings?.warnings,
+      },
     },
     isBetaTester: {
       "ui:widget": widgets.ToggleWidget,
@@ -210,19 +246,18 @@ const getHostUptimeSchema = ({
   },
 });
 
-const Details: React.FC<{ timeZone: string; totalUptimeHours: number }> = ({
-  timeZone,
+const Details: React.FC<{ totalUptimeHours: number }> = ({
   totalUptimeHours,
 }) => (
   <DetailsDiv data-cy="host-uptime-details">
-    All times are displayed in{" "}
-    <Badge>{prettifyTimeZone.get(timeZone) ?? timeZone}</Badge> •{" "}
-    {totalUptimeHours} host uptime hours per week
+    {" "}
+    • {totalUptimeHours} host uptime hours per week
   </DetailsDiv>
 );
 
 const DetailsDiv = styled.div`
-  margin-bottom: ${size.xs};
+  margin-bottom: 21px;
+  white-space: nowrap;
 `;
 
 type ExpirationProps = {
@@ -234,7 +269,7 @@ type ExpirationProps = {
   isEditModal: boolean;
   noExpirationCheckboxTooltip?: string;
   permanentlyExempt?: boolean;
-  timeZone?: string;
+  timeZone: string;
 };
 
 export const getExpirationDetailsSchema = ({

diff --git a/apps/spruce/src/components/Spawn/spawnHostModal/getFormSchema.tsx b/apps/spruce/src/components/Spawn/spawnHostModal/getFormSchema.tsx
@@ -35,7 +35,7 @@ interface Props {
   noExpirationCheckboxTooltip: string;
   permanentlyExempt: boolean;
   spawnTaskData?: SpawnTaskQuery["task"];
-  timeZone?: string;
+  timeZone: string;
   useSetupScript?: boolean;
   useProjectSetupScript?: boolean;
   userAwsRegion?: string;

diff --git a/apps/spruce/src/components/Spawn/spawnHostModal/transformer.test.ts b/apps/spruce/src/components/Spawn/spawnHostModal/transformer.test.ts
@@ -11,7 +11,6 @@ describe("spawn host modal", () => {
           formData,
           myPublicKeys,
           spawnTaskData: null,
-          timeZone: "America/New_York",
         }),
       ).toStrictEqual(mutationInput);
     });
@@ -26,7 +25,6 @@ describe("spawn host modal", () => {
           myPublicKeys,
           spawnTaskData: null,
           migrateVolumeId,
-          timeZone: "America/New_York",
         }),
       ).toStrictEqual({
         ...mutationInput,
@@ -120,6 +118,7 @@ const data: Array<{ formData: FormState; mutationInput: SpawnHostInput }> = [
               runContinuously: false,
             },
           },
+          details: { timeZone: "America/New_York" },
         },
       },
       homeVolumeDetails: { selectExistingVolume: true, volumeSelect: "" },

diff --git a/apps/spruce/src/components/Spawn/spawnHostModal/transformer.ts b/apps/spruce/src/components/Spawn/spawnHostModal/transformer.ts
@@ -15,15 +15,13 @@ interface Props {
   myPublicKeys: MyPublicKeysQuery["myPublicKeys"];
   spawnTaskData?: SpawnTaskQuery["task"];
   migrateVolumeId?: string;
-  timeZone?: string;
 }
 export const formToGql = ({
   formData,
   isVirtualWorkStation,
   migrateVolumeId,
   myPublicKeys,
   spawnTaskData,
-  timeZone,
 }: Props): SpawnHostMutationVariables["spawnHostInput"] => {
   const {
     expirationDetails,
@@ -50,8 +48,7 @@ export const formToGql = ({
     noExpiration: expirationDetails?.noExpiration,
     sleepSchedule:
       expirationDetails?.noExpiration && hostUptime
-        ? // @ts-expect-error: FIXME. This comment was added by an automated script.
-          getSleepSchedule(hostUptime, timeZone)
+        ? getSleepSchedule(hostUptime)
         : null,
     volumeId:
       migrateVolumeId ||