Skip to content

chore(site): remove xstate #10659

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 33 commits into from
Nov 14, 2023
Merged

chore(site): remove xstate #10659

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
3c99474
Remove template deprecation warning
BrunoQuaresma Nov 9, 2023
878f995
Move deployment values fetching
BrunoQuaresma Nov 9, 2023
cdf8859
Remove unused code from template warning
BrunoQuaresma Nov 9, 2023
964c3d2
Extract initial data
BrunoQuaresma Nov 9, 2023
2cd9de1
Move quota fetching to be used close to where it is used
BrunoQuaresma Nov 9, 2023
4fd62bb
Fix test on Terminal because of workspace query changes
BrunoQuaresma Nov 9, 2023
168024d
Merge branch 'main' of https://github.com/coder/coder into bq/refacto…
BrunoQuaresma Nov 13, 2023
b6ee59a
Move can suto start to be on WorkspaceReadyPage
BrunoQuaresma Nov 13, 2023
2388cae
Extract ssh config
BrunoQuaresma Nov 13, 2023
3d96b94
Extract watching workspace out of xstate
BrunoQuaresma Nov 13, 2023
b0fba32
Remove unused code
BrunoQuaresma Nov 13, 2023
9edfd71
Organize code on ready page
BrunoQuaresma Nov 13, 2023
3e1de93
Extract change version from xstate
BrunoQuaresma Nov 13, 2023
ab8977c
Extract update workspace
BrunoQuaresma Nov 13, 2023
cb2c966
Extract delete
BrunoQuaresma Nov 13, 2023
6c8ec9f
Extract activate
BrunoQuaresma Nov 13, 2023
039f4bb
Remove unecessary require permission
BrunoQuaresma Nov 13, 2023
987f14f
Remove unused RequirePermission usage
BrunoQuaresma Nov 13, 2023
13e954f
Extract refresh timeline
BrunoQuaresma Nov 13, 2023
764f047
Remove REFRESH_WORKSPACE
BrunoQuaresma Nov 13, 2023
633c431
Extract stop
BrunoQuaresma Nov 13, 2023
20e073f
Extract start
BrunoQuaresma Nov 13, 2023
bfcc99d
Extract cancellation and remove xservices
BrunoQuaresma Nov 13, 2023
cf6896a
Clean up
BrunoQuaresma Nov 13, 2023
b6c9469
Add retry with debug
BrunoQuaresma Nov 13, 2023
a4a33f9
Remove XState
BrunoQuaresma Nov 13, 2023
e72abf5
Merge branch 'main' of https://github.com/coder/coder into bq/refacto…
BrunoQuaresma Nov 14, 2023
75d39a2
Clean up event source
BrunoQuaresma Nov 14, 2023
c3de809
Rename workspace mutations
BrunoQuaresma Nov 14, 2023
477b928
Invalidate workspace builds data on cancel
BrunoQuaresma Nov 14, 2023
d189c20
use useEffectEvent to avoid unecessary updates
BrunoQuaresma Nov 14, 2023
49b95a2
Merge branch 'main' of https://github.com/coder/coder into bq/refacto…
BrunoQuaresma Nov 14, 2023
6cc257a
Fix cancel action
BrunoQuaresma Nov 14, 2023
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
Organize code on ready page
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Nov 13, 2023
commit 9edfd717f1673ccb7fc18e352f93bd8cf11ab73d
79 changes: 62 additions & 17 deletions site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { StateFrom } from "xstate";
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
import { Workspace, WorkspaceErrors } from "./Workspace";
import { pageTitle } from "utils/page";
import { getFaviconByStatus, hasJobError } from "utils/workspace";
import { hasJobError } from "utils/workspace";
import {
WorkspaceEvent,
workspaceMachine,
Expand Down Expand Up @@ -68,14 +68,14 @@ export const WorkspaceReadyPage = ({
isLoadingMoreBuilds,
hasMoreBuilds,
}: WorkspaceReadyPageProps): JSX.Element => {
const navigate = useNavigate();
const { buildInfo } = useDashboard();
const featureVisibility = useFeatureVisibility();
const { buildError, cancellationError, missedParameters } =
workspaceState.context;
if (workspace === undefined) {
throw Error("Workspace is undefined");
}
const deadline = getDeadline(workspace);
const canUpdateWorkspace = Boolean(permissions?.updateWorkspace);
const canUpdateTemplate = Boolean(permissions?.updateTemplate);
const { data: deploymentValues } = useQuery({
Expand All @@ -85,15 +85,10 @@ export const WorkspaceReadyPage = ({
const canRetryDebugMode = Boolean(
deploymentValues?.config.enable_terraform_debug_mode,
);
const favicon = getFaviconByStatus(workspace.latest_build);
const navigate = useNavigate();
const [changeVersionDialogOpen, setChangeVersionDialogOpen] = useState(false);
const [isConfirmingUpdate, setIsConfirmingUpdate] = useState(false);
const [confirmingRestart, setConfirmingRestart] = useState<{
open: boolean;
buildParameters?: TypesGen.WorkspaceBuildParameter[];
}>({ open: false });

// Versions
const { data: allVersions } = useQuery({
...templateVersions(workspace.template_id),
enabled: changeVersionDialogOpen,
Expand All @@ -102,22 +97,20 @@ export const WorkspaceReadyPage = ({
...templateVersion(workspace.template_active_version_id),
enabled: workspace.outdated,
});
const [faviconTheme, setFaviconTheme] = useState<"light" | "dark">("dark");
useEffect(() => {
if (typeof window === "undefined" || !window.matchMedia) {
return;
}

const isDark = window.matchMedia("(prefers-color-scheme: dark)");
// We want the favicon the opposite of the theme.
setFaviconTheme(isDark.matches ? "light" : "dark");
}, []);
// Build logs
const buildLogs = useWorkspaceBuildLogs(workspace.latest_build.id);
const shouldDisplayBuildLogs =
hasJobError(workspace) ||
["canceling", "deleting", "pending", "starting", "stopping"].includes(
workspace.latest_build.status,
);

// Restart
const [confirmingRestart, setConfirmingRestart] = useState<{
Copy link
Member

Choose a reason for hiding this comment

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

Wondering if the state type could be defined as a discriminated union, so that you're guaranteed to have buildParameters be defined whenever open is true

Though I guess that would also require updating the type definitions further down the tree

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I usually think discriminated unions are always a good idea but for this case, I would just let it as it is since there is not too much value and to avoid more changes.

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

open: boolean;
buildParameters?: TypesGen.WorkspaceBuildParameter[];
}>({ open: false });
const {
mutate: mutateRestartWorkspace,
error: restartBuildError,
Expand All @@ -126,6 +119,8 @@ export const WorkspaceReadyPage = ({
mutationFn: restartWorkspace,
});

// Schedule controls
const deadline = getDeadline(workspace);
const onDeadlineChangeSuccess = () => {
displaySuccess("Updated workspace shutdown time.");
};
Expand All @@ -145,13 +140,28 @@ export const WorkspaceReadyPage = ({
onError: onDeadlineChangeFails,
});

// Auto start
const canAutostartResponse = useQuery(
workspaceResolveAutostart(workspace.id),
);
const canAutostart = !canAutostartResponse.data?.parameter_mismatch ?? false;

// SSH Prefix
const sshPrefixQuery = useQuery(deploymentSSHConfig());

// Favicon
const favicon = getFaviconByStatus(workspace.latest_build);
const [faviconTheme, setFaviconTheme] = useState<"light" | "dark">("dark");
useEffect(() => {
if (typeof window === "undefined" || !window.matchMedia) {
return;
}

const isDark = window.matchMedia("(prefers-color-scheme: dark)");
// We want the favicon the opposite of the theme.
setFaviconTheme(isDark.matches ? "light" : "dark");
}, []);

return (
<>
<Helmet>
Expand Down Expand Up @@ -320,3 +330,38 @@ const WarningDialog: FC<
> = (props) => {
return <ConfirmDialog type="info" hideCancel={false} {...props} />;
};

// You can see the favicon designs here: https://www.figma.com/file/YIGBkXUcnRGz2ZKNmLaJQf/Coder-v2-Design?node-id=560%3A620
type FaviconType =
| "favicon"
| "favicon-success"
| "favicon-error"
| "favicon-warning"
| "favicon-running";

const getFaviconByStatus = (build: TypesGen.WorkspaceBuild): FaviconType => {
switch (build.status) {
case undefined:
return "favicon";
case "running":
return "favicon-success";
case "starting":
return "favicon-running";
case "stopping":
return "favicon-running";
case "stopped":
return "favicon";
case "deleting":
return "favicon";
case "deleted":
return "favicon";
case "canceling":
return "favicon-warning";
case "canceled":
return "favicon";
case "failed":
return "favicon-error";
case "pending":
return "favicon";
}
};
38 changes: 0 additions & 38 deletions site/src/utils/workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,44 +147,6 @@ export const defaultWorkspaceExtension = (
};
};

// You can see the favicon designs here: https://www.figma.com/file/YIGBkXUcnRGz2ZKNmLaJQf/Coder-v2-Design?node-id=560%3A620

type FaviconType =
| "favicon"
| "favicon-success"
| "favicon-error"
| "favicon-warning"
| "favicon-running";

export const getFaviconByStatus = (
build: TypesGen.WorkspaceBuild,
): FaviconType => {
switch (build.status) {
case undefined:
return "favicon";
case "running":
return "favicon-success";
case "starting":
return "favicon-running";
case "stopping":
return "favicon-running";
case "stopped":
return "favicon";
case "deleting":
return "favicon";
case "deleted":
return "favicon";
case "canceling":
return "favicon-warning";
case "canceled":
return "favicon";
case "failed":
return "favicon-error";
case "pending":
return "favicon";
}
};

export const getDisplayWorkspaceTemplateName = (
workspace: TypesGen.Workspace,
): string => {
Expand Down