Skip to content

refactor: Move schedule to the header #2775

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jul 1, 2022
Merged

refactor: Move schedule to the header #2775

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c7d86ba
refactor: Move schedule to the header
BrunoQuaresma Jul 1, 2022
b383a0f
test: Add storybook
BrunoQuaresma Jul 1, 2022
ead1ff9
Move tests to the schedule button
BrunoQuaresma Jul 1, 2022
a564dcb
Cleaning up components
BrunoQuaresma Jul 1, 2022
f0d1481
Remove comment
BrunoQuaresma Jul 1, 2022
d4e38f5
Memoize workspace schedule button
BrunoQuaresma Jul 1, 2022
fcef0ae
Extract isShuttingDown logic
BrunoQuaresma Jul 1, 2022
700fb67
Ignores the label on workspace schedule button
BrunoQuaresma Jul 1, 2022
2280693
Remove memoization
BrunoQuaresma Jul 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Memoize workspace schedule button
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Jul 1, 2022
commit d4e38f57e8404e463b048d73c7ba71f35fc16f93
10 changes: 8 additions & 2 deletions site/src/components/Workspace/Workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { makeStyles } from "@material-ui/core/styles"
import { FC } from "react"
import React, { FC } from "react"
import { useNavigate } from "react-router-dom"
import * as TypesGen from "../../api/typesGenerated"
import { BuildsTable } from "../BuildsTable/BuildsTable"
Expand All @@ -14,6 +14,12 @@ import { WorkspaceScheduleButton } from "../WorkspaceScheduleButton/WorkspaceSch
import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
import { WorkspaceStats } from "../WorkspaceStats/WorkspaceStats"

// The WorkspaceScheduleButton does some calculation to display the date labels
// so to avoid doing that every seconds - because of the workspace pooling - we
// are memoizing this component. More details:
// https://github.com/coder/coder/pull/2775#discussion_r912080377
const MemoizedWorkspaceScheduleButton = React.memo(WorkspaceScheduleButton)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@BrunoQuaresma I haven't used memo before - only useMemo - so this is new to me. Does this somehow update the Button component if the workspace changes? Also I know we are relying on Dayjs() in the component - we probably don't want the current moment to memoized, right? Otherwise it will get stale. IDK, maybe I'm misunderstanding how this works.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, looks like maybe the workspace will update the component because it is a prop, but not sure that the current time will get updated, so our comparisons might be off.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thinking better, memoization for this component does not solve anything since the workspace prop reference will change every second. useMemo also would not work directly, since I would have to pass the workspace to the deps array, and like before, the reference of this object changes every 1 second. Probably I think we can solve that by writing a custom comparison function but I really would like to avoid that until it is needed. Since it looks a bit more complex, is it ok to not have memoization at all for now?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that's fair! Thanks for trying it out; I appreciate it!


export interface WorkspaceProps {
bannerProps: {
isLoading?: boolean
Expand Down Expand Up @@ -60,7 +66,7 @@ export const Workspace: FC<WorkspaceProps> = ({
<PageHeader
actions={
<Stack direction="row" spacing={1}>
<WorkspaceScheduleButton
<MemoizedWorkspaceScheduleButton
workspace={workspace}
onDeadlineMinus={scheduleProps.onDeadlineMinus}
onDeadlinePlus={scheduleProps.onDeadlinePlus}
Expand Down