feat: add experimental workspace parameters page for dynamic params #17841
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import type * as TypesGen from "api/typesGenerated"; | ||
| import { useEffect, useRef } from "react"; | ||
|
|
||
| import type { PreviewParameter } from "api/typesGenerated"; | ||
|
|
||
| type UseSyncFormParametersProps = { | ||
| parameters: readonly PreviewParameter[]; | ||
| formValues: readonly TypesGen.WorkspaceBuildParameter[]; | ||
| setFieldValue: ( | ||
| field: string, | ||
| value: TypesGen.WorkspaceBuildParameter[], | ||
| ) => void; | ||
| }; | ||
|
|
||
| export function useSyncFormParameters({ | ||
| parameters, | ||
| formValues, | ||
| setFieldValue, | ||
| }: UseSyncFormParametersProps) { | ||
| // Form values only needs to be updated when parameters change | ||
| // Keep track of form values in a ref to avoid unnecessary updates to rich_parameter_values | ||
| const formValuesRef = useRef(formValues); | ||
|
|
||
| useEffect(() => { | ||
| formValuesRef.current = formValues; | ||
| }, [formValues]); | ||
|
|
||
| useEffect(() => { | ||
| if (!parameters) return; | ||
| const currentFormValues = formValuesRef.current; | ||
|
|
||
| const newParameterValues = parameters.map((param) => { | ||
| return { | ||
| name: param.name, | ||
| value: param.value.valid ? param.value.value : "", | ||
| }; | ||
| }); | ||
jaaydenh marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| const isChanged = | ||
| currentFormValues.length !== newParameterValues.length || | ||
| newParameterValues.some( | ||
| (p) => | ||
| !currentFormValues.find( | ||
| (formValue) => | ||
| formValue.name === p.name && formValue.value === p.value, | ||
| ), | ||
| ); | ||
|
There was a problem hiding this comment. this is O(n^2), but could pretty easily be rewritten to be O(n) using I guess it was already like this tho 🤷♀️ There was a problem hiding this comment. Good call out, I can improve. |
||
|
|
||
| if (isChanged) { | ||
| setFieldValue("rich_parameter_values", newParameterValues); | ||
| } | ||
| }, [parameters, setFieldValue]); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import { ErrorAlert } from "components/Alert/ErrorAlert"; | ||
| import { Loader } from "components/Loader/Loader"; | ||
| import { useDashboard } from "modules/dashboard/useDashboard"; | ||
| import type { FC } from "react"; | ||
| import { useQuery } from "react-query"; | ||
| import { ExperimentalFormContext } from "../../CreateWorkspacePage/ExperimentalFormContext"; | ||
| import { useWorkspaceSettings } from "../WorkspaceSettingsLayout"; | ||
| import WorkspaceParametersPage from "./WorkspaceParametersPage"; | ||
| import WorkspaceParametersPageExperimental from "./WorkspaceParametersPageExperimental"; | ||
|
|
||
| const WorkspaceParametersExperimentRouter: FC = () => { | ||
| const { experiments } = useDashboard(); | ||
| const workspace = useWorkspaceSettings(); | ||
| const dynamicParametersEnabled = experiments.includes("dynamic-parameters"); | ||
|
|
||
| const optOutQuery = useQuery( | ||
| dynamicParametersEnabled | ||
| ? { | ||
| queryKey: [ | ||
| "workspace", | ||
| workspace.id, | ||
| "template_id", | ||
| workspace.template_id, | ||
| "optOut", | ||
| ], | ||
| queryFn: () => { | ||
| const templateId = workspace.template_id; | ||
| const workspaceId = workspace.id; | ||
| const localStorageKey = optOutKey(templateId); | ||
| const storedOptOutString = localStorage.getItem(localStorageKey); | ||
|
|
||
| let optOutResult: boolean; | ||
|
|
||
| if (storedOptOutString !== null) { | ||
| optOutResult = storedOptOutString === "true"; | ||
| } else { | ||
| optOutResult = Boolean( | ||
| workspace.template_use_classic_parameter_flow, | ||
| ); | ||
| } | ||
|
|
||
| return { | ||
| templateId, | ||
| workspaceId, | ||
| optedOut: optOutResult, | ||
| }; | ||
| }, | ||
| } | ||
| : { enabled: false }, | ||
| ); | ||
|
|
||
| if (dynamicParametersEnabled) { | ||
| if (optOutQuery.isLoading) { | ||
| return <Loader />; | ||
| } | ||
| if (!optOutQuery.data) { | ||
| return <ErrorAlert error={optOutQuery.error} />; | ||
| } | ||
|
|
||
| const toggleOptedOut = () => { | ||
| const key = optOutKey(optOutQuery.data.templateId); | ||
| const storedValue = localStorage.getItem(key); | ||
|
|
||
| const current = storedValue | ||
| ? storedValue === "true" | ||
| : Boolean(workspace.template_use_classic_parameter_flow); | ||
|
|
||
| localStorage.setItem(key, (!current).toString()); | ||
| optOutQuery.refetch(); | ||
| }; | ||
|
|
||
| return ( | ||
| <ExperimentalFormContext.Provider value={{ toggleOptedOut }}> | ||
| {optOutQuery.data.optedOut ? ( | ||
| <WorkspaceParametersPage /> | ||
| ) : ( | ||
| <WorkspaceParametersPageExperimental /> | ||
| )} | ||
| </ExperimentalFormContext.Provider> | ||
| ); | ||
| } | ||
|
|
||
| return <WorkspaceParametersPage />; | ||
| }; | ||
|
|
||
| export default WorkspaceParametersExperimentRouter; | ||
|
|
||
| const optOutKey = (id: string) => `parameters.${id}.optOut`; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this isn't a very general purpose hook. could we put this in modules/workspaces or something instead?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This hook will eventually be used a many different places, TemplateEmbedPage, WorkspaceSettingsPage, CreateWorkspacePage, UpdateBuildParametersDialog, BuildParametersPopover, WorkspaceParametersForm. Its not general purpose but it also doesn't feel like it should be buried in a subfolder. Maybe we don't currently have a good place for things like this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved to modules/hooks, modules are the place to gather all coder business logic that is not in pages so seems like the best place to put coder specific non-general purpose hooks