- Notifications
You must be signed in to change notification settings - Fork1k
feat: add experimental workspace parameters page for dynamic params#17841
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.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Merged
Uh oh!
There was an error while loading.Please reload this page.
Merged
Changes fromall commits
Commits
Show all changes
7 commits Select commitHold shift + click to select a range
dd83a00 feat: add experimental workspace parameters page for dynamic params
jaaydenhf19178c fix: update type
jaaydenh0c7f4c1 chore: get parity with create workspace page
jaaydenh17a2c85 fix: pass form value to dynamic parameter
jaaydenh93359a0 chore: move useSyncFormParameters to shared hook
jaaydenh82e0b07 chore: use Map to improve performance
jaaydenhe827b2c chore: move hook inside modules
jaaydenhFile filter
Filter by extension
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
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) => ({ | ||
| name: param.name, | ||
| value: param.value.valid ? param.value.value : "", | ||
| })); | ||
| const currentFormValuesMap = new Map( | ||
| currentFormValues.map((value) => [value.name, value.value]), | ||
| ); | ||
| const isChanged = | ||
| currentFormValues.length !== newParameterValues.length || | ||
| newParameterValues.some( | ||
| (p) => | ||
| !currentFormValuesMap.has(p.name) || | ||
| currentFormValuesMap.get(p.name) !== p.value, | ||
| ); | ||
| if (isChanged) { | ||
| setFieldValue("rich_parameter_values", newParameterValues); | ||
| } | ||
| }, [parameters, setFieldValue]); | ||
| } |
50 changes: 1 addition & 49 deletionssite/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx
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
88 changes: 88 additions & 0 deletions...ges/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersExperimentRouter.tsx
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`; |
31 changes: 22 additions & 9 deletionssite/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
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.
Uh oh!
There was an error while loading.Please reload this page.
Oops, something went wrong.
Uh oh!
There was an error while loading.Please reload this page.
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.