feat: edit workspace schedule page #1701

greyscaled · 2022-05-24T06:00:00Z

Resolves: #1455
Resolves: #1456

Summary

Adds a page (accessible from Workspace Schedule section on a workspace) to edit a schedule.

State Machine

Impact of Change

General parity with CLI for autostart/autostop: that is you can update your schedule from the UI

Demo of Change

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx

site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts

site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx

site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts

johnstcn

Looking good so far! Comments below.

kylecarbs

Code looks good to me, but skipping a thorough review until in a ready state 😄!

What do you think about Schedule being an option in the Settings pages? It could be helpful to the user for all editable options to be in one spot!

greyscaled · 2022-05-24T14:03:14Z

What do you think about Schedule being an option in the Settings pages? It could be helpful to the user for all editable options to be in one spot!

In the short term, I don't want to do that for the reasons of:

we don't yet have the settings page or a design or really any thoughts of how it will look
the schedule form is complex and is represented as a full-page form for that reason right now

I do think it's the right call in the long(er) term, longer here is relative - could even be as early as next sprint (week). I don't want to pause getting it in here as our current workspace design has a sidebar that links out to the schedule page, and it fits in really nicely.

If we decide we have cycles to design the settings page, I'd absolutely believe this could be a candidate.

kylecarbs · 2022-05-24T14:08:02Z

Makes complete sense to me! Appreciate hearing the thought process 💡

ammario · 2022-05-24T15:39:45Z

@vapurrmaid could you share what it looks like please?

johnstcn · 2022-05-24T16:08:10Z

@ammario you can check the Storybook UI review

site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx

ammario · 2022-05-25T14:49:14Z

@johnstcn thanks for sharing the Storybook.

Why did we omit the timezone field?
Why was "runtime" selected instead of "TTL"?
Why is runtime in minutes instead of hours?

greyscaled · 2022-05-25T16:31:54Z

@johnstcn thanks for sharing the Storybook.

Why did we omit the timezone field?

Why was "runtime" selected instead of "TTL"?

Why is runtime in minutes instead of hours?

There are no good reasons other than the initial draft, followed by iteration.

I'll change from runtime to TTL.

I'll change from minutes to hours.

I'll add a timezone field

ammario · 2022-05-25T17:03:44Z

Sounds good @vapurrmaid. I think the UI is clean and professional and I'm excited to give it a swing!

greyscaled

This PR is unfortunately large (though a lot of the code is test code, thankfully).

I am adding REVIEW comments to most diffs to add further explanation/context.

I'm happy to do a synchronous review in Discord if it's warranted.

Sorry that this one got large, I like to find smaller pieces, but this is just how things are as CE deadline approaches. Many thanks in advance 💖 .

Edit: Also, if you're newer to cron strings, https://crontab.guru/#30_09_*_*_1-5 is the way to go

Edit: If you're wondering why we don't use a cron library for some of our manipulation, it's because we have a custom implementation right now and do not want to expand it to full blast just yet.

Edit: This PR grew way larger than I had intended. I'm happy to address all comments, but my default response to things like refactors, improvements, nice-to-haves will be "iteration", as in follow-up efforts.

@johnstcn and I already have various follow-up efforts, like changing the ttl from nanosecond precision. Some of the messy hours to nanosecond time conversion will get cleaned up then.

See also @ammario and I's awesome comment thread and a consensus here: #1701 (comment) that we want to give the user a diff-like preview in this form while editing it. That may not land in CE (I'll certainly try), as there are other priorities like notifications and extension that must come first.

greyscaled · 2022-05-26T05:42:47Z

site/src/AppRouter.tsx

+                  <WorkspaceSchedulePage />
+                </RequireAuth>
+              }
+            />


Review:

A route /workspaces/:workspace/schedule was added to view the form

greyscaled · 2022-05-26T05:44:28Z

site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx

-          <Link className={styles.scheduleAction}>{Language.editScheduleLink}</Link>
+          <Link className={styles.scheduleAction} component={RouterLink} to={`/workspaces/${workspace.id}/schedule`}>
+            {Language.editScheduleLink}
+          </Link>


Review: The dashboard link to edit a workspace schedule now works!

greyscaled · 2022-05-26T05:45:52Z

site/src/components/WorkspaceStats/WorkspaceScheduleForm.stories.tsx

-    action("onSubmit")
-    return Promise.resolve()
-  },
+  onSubmit: () => action("onSubmit"),


Review:

You'll see this show up in the WorkspaceScheduleForm component as well: I un-promisified onSubmit. I did this because the model goes to a new state once the promises resolve and the API calls are success. We use that state to navigate away from the page.

In other words, there is a bit of a 'fire-n-forget' from Formik's point of view, but since we also pass in isLoading to the form, which stems from the model, it still works out OK.

greyscaled · 2022-05-26T05:51:04Z

site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx

            {form.errors.monday && <FormHelperText>{Language.errorNoDayOfWeek}</FormHelperText>}
          </FormControl>

          <TextField
            {...formHelpers("ttl", Language.ttlHelperText)}
-            inputProps={{ min: 0, step: 30 }}
+            disabled={form.isSubmitting || isLoading}
+            inputProps={{ min: 0, step: 1 }}


Review:

We changed from minutes to hours

greyscaled · 2022-05-26T05:51:20Z

site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx

+    { value: form.values.thursday, name: "thursday", label: Language.dayThursdayLabel },
+    { value: form.values.friday, name: "friday", label: Language.dayFridayLabel },
+    { value: form.values.saturday, name: "saturday", label: Language.daySaturdayLabel },
+  ]


Review:

I refactored to use a map

greyscaled · 2022-05-26T05:53:13Z

site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx

+  startTime: Yup.string()
+    .ensure()
+    .test("is-time-string", Language.errorTime, (value) => {
+      if (value === "") {
+        return true
+      } else if (!/^[0-9][0-9]:[0-9][0-9]$/.test(value)) {
+        return false
+      } else {
+        const parts = value.split(":")
+        const HH = Number(parts[0])
+        const mm = Number(parts[1])
+        return HH >= 0 && HH <= 23 && mm >= 0 && mm <= 59
+      }
+    }),


Review:

We had no tests or validation on startTime previously. See related tests in WorkspaceScheduleForm.test.tsx.

greyscaled · 2022-05-26T05:53:28Z

site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx

@@ -45,6 +62,7 @@ export interface WorkspaceScheduleFormValues {
  saturday: boolean

  startTime: string
+  timezone: string


Review:

The form now has a new timezone input, with validation and tests.

site/src/util/formUtils.tsx

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.test.tsx

…t.tsx

greyscaled · 2022-05-26T06:30:34Z

site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts

+/**
+ * @fileoverview workspaceSchedule is an xstate machine backing a form to CRUD
+ * an individual workspace's schedule.
+ */


Review:

Here's a GIF of me stepping through the machine states/possibilities. Please LMK if there are any questions.

To attempt and get ahead, I added a final state submitSuccess that's essentially a dupe of the idle state, but the page is using it to know to navigate.

This was so helpful; thank you!

greyscaled · 2022-05-26T06:33:44Z

site/src/util/schedule.ts

+ * The 0th index is Sunday
+ * The 6th index is Saturday
+ */
+export type WeeklyFlag = [boolean, boolean, boolean, boolean, boolean, boolean, boolean]


Review:

This type is very helpful and needed because we get some static analysis on the size of the arrays. The semantic meaning is like a bit mask where in the array, each index corresponds to a day and whether that day is "set" (true) or unset "false".

So in other words, it goes from Sunday -> Saturday.

This sort of thing is easier to understand than bit masks, and maps very cleanly to setting values for the checkbox group.

greyscaled · 2022-05-26T06:36:16Z

site/src/util/schedule.ts

+  }
+
+  return result
+}


Review:

This is a "private" method (only meant to be used in dowToWeeklyFlag and thus is not exported.

I'd review this before I'd review dowToWeeklyFlag.

The algorithm does the following:

takes a number (ex: 1)

or number range (ex: 1-5)

and returns the associated WeeklyFlag array (see: https://github.com/coder/coder/pull/1701/files#r882360151).

I have a method that focuses just on number or range, because in the parent function dowToWeeklyFlag, you can have comma-separated values like this:

1,3,5
1-2,4-5

So this function is called in a loop on each comma-separated group.

greyscaled · 2022-05-26T06:37:07Z

site/src/util/schedule.ts

+  }
+
+  return results
+}


Review:

Before reading this function, I'd read https://github.com/coder/coder/pull/1701/files#r882361592

This builds upon processRangeOrNum by calling it in a loop after splitting the dow cron string by comma.

site/src/util/schedule.test.ts

johnstcn

Looking good!

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx

site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx

site/src/util/schedule.ts

Co-authored-by: Kira Pilot <[email protected]>

kylecarbs

Very thorough comments and tests!

site/src/util/schedule.ts

Kira-Pilot · 2022-05-26T14:21:18Z

I noticed that I can blissfully keyboard shortcut my way through the form until I get to the Days of Week checklist; then I must use a mouse. Accessibility probably isn't a huge priority rn, but would be nice to revisit this at some time.

Fantastic work! Also great job leaving comments/screenshots throughout the PR - that made it much easier to review.

greyscaled · 2022-05-26T14:40:26Z

keyboard shortcut my way through the form until I get to the Days of Week checklist; then I must use a mouse.

Interesting, I wonder why that is - I will look into this and see if I can figure it out. If I get stuck spinning my wheels, I'll log a ticket and move on.

The code I was using was adapted from: https://v4.mui.com/components/checkboxes/#checkboxes-with-formgroup which means their example must not be accessible either (odd).

Either way, thank you for finding this, that's a wonderful thing to test/review!!!!

Resolves: #1455 Resolves: #1456 Summary: Adds a page (accessible from Workspace Schedule section on a workspace) to edit a schedule. Impact: General parity with CLI for autostart/autostop: that is you can update your schedule from the UI

greyscaled added 2 commits May 24, 2022 05:51

feat: edit workspace schedule page

58ecefa

fixup! feat: edit workspace schedule page

3f73a6c

greyscaled mentioned this pull request May 24, 2022

refactor: resource strings in WorkspaceSchedule #1702

Merged

greyscaled commented May 24, 2022

View reviewed changes

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx Outdated Show resolved Hide resolved

greyscaled commented May 24, 2022

View reviewed changes

site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts Show resolved Hide resolved

greyscaled requested a review from johnstcn May 24, 2022 06:05

johnstcn reviewed May 24, 2022

View reviewed changes

site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx Outdated Show resolved Hide resolved

johnstcn reviewed May 24, 2022

View reviewed changes

site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx Outdated Show resolved Hide resolved

johnstcn reviewed May 24, 2022

View reviewed changes

site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts Show resolved Hide resolved

johnstcn reviewed May 24, 2022

View reviewed changes

kylecarbs reviewed May 24, 2022

View reviewed changes

johnstcn mentioned this pull request May 24, 2022

Codersdk/ts: migrate workspace ttl to ttl_ms #1707

Closed

greyscaled self-assigned this May 24, 2022

greyscaled mentioned this pull request May 24, 2022

Add retry to frontend API calls #912

Closed

2 tasks

greyscaled added 6 commits May 24, 2022 14:53

Merge branch 'main' into vapurrmaid/gh-1455/part-3/page

30dff81

remove promise

ecc6792

Merge origin/main

c0f28c3

refactor to map + add loading/disabled

d61a332

time validation

f60f59b

more tests

406d465

greyscaled commented May 24, 2022

View reviewed changes

site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx Outdated Show resolved Hide resolved

greyscaled commented May 24, 2022

View reviewed changes

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx Outdated Show resolved Hide resolved

Update site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx

a6dff9d

greyscaled commented May 26, 2022

View reviewed changes

greyscaled added 2 commits May 26, 2022 02:03

Apply suggestions from code review

5bacfb1

Update site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tes…

5b3adc3

…t.tsx

greyscaled requested review from johnstcn, ammario and kylecarbs May 26, 2022 06:04

fix ttl initialization

81e7e05

greyscaled commented May 26, 2022

View reviewed changes

site/src/util/schedule.test.ts Show resolved Hide resolved

Update site/src/util/schedule.test.ts

531df3e

johnstcn approved these changes May 26, 2022

View reviewed changes

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx Outdated Show resolved Hide resolved

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx Show resolved Hide resolved

site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx Show resolved Hide resolved

Kira-Pilot reviewed May 26, 2022

View reviewed changes

site/src/components/WorkspaceStats/WorkspaceScheduleForm.tsx Show resolved Hide resolved

Kira-Pilot reviewed May 26, 2022

View reviewed changes

site/src/util/schedule.ts Outdated Show resolved Hide resolved

Fix typo

7ae590a

Co-authored-by: Kira Pilot <[email protected]>

kylecarbs approved these changes May 26, 2022

View reviewed changes

site/src/util/schedule.ts Show resolved Hide resolved

Kira-Pilot approved these changes May 26, 2022

View reviewed changes

greyscaled added 4 commits May 26, 2022 15:45

import ReactNode directly

262d9e3

guess timezone

5d22197

fix test

eda8ad8

lint

f59f056

greyscaled merged commit 7c59ec4 into main May 26, 2022

greyscaled deleted the vapurrmaid/gh-1455/part-3/page branch May 26, 2022 16:11

This was referenced May 26, 2022

Feat: rename auto-off TTL in UI to normal English #1784

Closed

feat: Delete workspace #1822

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: edit workspace schedule page #1701

feat: edit workspace schedule page #1701

greyscaled commented May 24, 2022 •

edited

Loading

johnstcn left a comment

kylecarbs left a comment

greyscaled commented May 24, 2022

kylecarbs commented May 24, 2022

ammario commented May 24, 2022

johnstcn commented May 24, 2022

ammario commented May 25, 2022 •

edited

Loading

greyscaled commented May 25, 2022

ammario commented May 25, 2022

greyscaled left a comment •

edited

Loading

greyscaled May 26, 2022

greyscaled May 26, 2022

greyscaled May 26, 2022

greyscaled May 26, 2022

greyscaled May 26, 2022

greyscaled May 26, 2022

greyscaled May 26, 2022

greyscaled May 26, 2022

Kira-Pilot May 26, 2022

greyscaled May 26, 2022

greyscaled May 26, 2022

greyscaled May 26, 2022

johnstcn left a comment

kylecarbs left a comment

Kira-Pilot commented May 26, 2022

greyscaled commented May 26, 2022

feat: edit workspace schedule page #1701

feat: edit workspace schedule page #1701

Conversation

greyscaled commented May 24, 2022 • edited Loading

Summary

State Machine

Impact of Change

Demo of Change

johnstcn left a comment

Choose a reason for hiding this comment

kylecarbs left a comment

Choose a reason for hiding this comment

greyscaled commented May 24, 2022

kylecarbs commented May 24, 2022

ammario commented May 24, 2022

johnstcn commented May 24, 2022

ammario commented May 25, 2022 • edited Loading

greyscaled commented May 25, 2022

ammario commented May 25, 2022

greyscaled left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnstcn left a comment

Choose a reason for hiding this comment

kylecarbs left a comment

Choose a reason for hiding this comment

Kira-Pilot commented May 26, 2022

greyscaled commented May 26, 2022

greyscaled commented May 24, 2022 •

edited

Loading

ammario commented May 25, 2022 •

edited

Loading

greyscaled left a comment •

edited

Loading