Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: Add form to modify managed Template variables #6257

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 26 commits into from
Mar 2, 2023
Merged

feat: Add form to modify managed Template variables #6257

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
aaa0539
WIP
mtojek Feb 17, 2023
335f7fb
WIP
mtojek Feb 27, 2023
247ee88
Fix
mtojek Feb 27, 2023
2f3b663
fmt
mtojek Feb 27, 2023
1fbb2ef
Tests work after merge
mtojek Feb 27, 2023
19478de
WIP
mtojek Feb 27, 2023
76cd96f
WIP
mtojek Feb 28, 2023
dd9404f
WIP
mtojek Feb 28, 2023
1fb043f
TemplateVariableField
mtojek Feb 28, 2023
92fb4de
i18n
mtojek Feb 28, 2023
8514cc7
WIP
mtojek Feb 28, 2023
44a8e86
fix: initialValue
mtojek Feb 28, 2023
579a30a
Stacked errors
mtojek Mar 1, 2023
e945f33
Prepare to trigger API
mtojek Mar 1, 2023
1064122
Created
mtojek Mar 1, 2023
4e4b935
Fixes
mtojek Mar 1, 2023
b8b295a
Fixes
mtojek Mar 1, 2023
e922349
Fix: fmt
mtojek Mar 1, 2023
1798c9e
storybook: WithVariables
mtojek Mar 1, 2023
de0e48d
Storybook
mtojek Mar 1, 2023
e570c02
unit tests
mtojek Mar 1, 2023
5cbd670
Fix: lint
mtojek Mar 1, 2023
380e3e1
Use getTemplateDataError
mtojek Mar 2, 2023
6814d9f
Always show Variables button
mtojek Mar 2, 2023
507bf8e
Fix: test
mtojek Mar 2, 2023
96a813c
unusedVariablesNotice
mtojek Mar 2, 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
WIP
  • Loading branch information
@mtojek
mtojek committed Feb 28, 2023
commit dd9404f8fa87bb362b4d7d61ee89c87a2dd77c18
142 changes: 27 additions & 115 deletions site/src/pages/TemplateVariablesPage/TemplateVariablesForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,15 @@ import {
} from "api/typesGenerated"
import { FormikContextType, FormikTouched, useFormik } from "formik"
import { FC } from "react"
import { getFormHelpers, onChangeTrimmed } from "util/formUtils"
import { getFormHelpers } from "util/formUtils"
import * as Yup from "yup"
import { useTranslation } from "react-i18next"
import { LazyIconField } from "components/IconField/LazyIconField"
import {
FormFields,
FormSection,
HorizontalForm,
FormFooter,
} from "components/HorizontalForm/HorizontalForm"
import { Stack } from "components/Stack/Stack"
import Checkbox from "@material-ui/core/Checkbox"
import { makeStyles } from "@material-ui/core/styles"

export const getValidationSchema = (): Yup.AnyObjectSchema => Yup.object()

Expand Down Expand Up @@ -63,135 +59,50 @@ export const TemplateVariablesForm: FC<TemplateVariablesForm> = ({
form,
error,
)
const { t } = useTranslation("TemplateVariablesPage")
const styles = useStyles()
const { t } = useTranslation("templateVariablesPage")

return (
<HorizontalForm
onSubmit={form.handleSubmit}
aria-label={t("formAriaLabel")}
>
<FormSection
title={t("generalInfo.title")}
description={t("generalInfo.description")}
>
<FormFields>
<TextField
{...getFieldHelpers("name")}
disabled={isSubmitting}
onChange={onChangeTrimmed(form)}
autoFocus
fullWidth
label={t("nameLabel")}
variant="outlined"
/>
</FormFields>
</FormSection>

<FormSection
title={t("displayInfo.title")}
description={t("displayInfo.description")}
>
<FormFields>
<TextField
{...getFieldHelpers("display_name")}
disabled={isSubmitting}
fullWidth
label={t("displayNameLabel")}
variant="outlined"
/>

<TextField
{...getFieldHelpers("description")}
multiline
disabled={isSubmitting}
fullWidth
label={t("descriptionLabel")}
variant="outlined"
rows={2}
/>

<LazyIconField
{...getFieldHelpers("icon")}
disabled={isSubmitting}
onChange={onChangeTrimmed(form)}
fullWidth
label={t("iconLabel")}
variant="outlined"
onPickEmoji={(value) => form.setFieldValue("icon", value)}
/>
</FormFields>
</FormSection>

<FormSection
title={t("schedule.title")}
description={t("schedule.description")}
>
<TextField
{...getFieldHelpers("default_ttl_ms")}
disabled={isSubmitting}
fullWidth
inputProps={{ min: 0, step: 1 }}
label={t("defaultTtlLabel")}
variant="outlined"
type="number"
/>
</FormSection>

<FormSection
title={t("operations.title")}
description={t("operations.description")}
>
<label htmlFor="allow_user_cancel_workspace_jobs">
<Stack direction="row" spacing={1}>
<Checkbox
color="primary"
id="allow_user_cancel_workspace_jobs"
name="allow_user_cancel_workspace_jobs"
{templateVariables.map((templateVariable, index) => (
<FormSection
key={templateVariable.name}
title={templateVariable.name}
description={templateVariable.description}
>
<FormFields>
<TextField
{...getFieldHelpers("user_variable_values[" + index + "].value")}
disabled={isSubmitting}
checked={false}
onChange={form.handleChange}
autoFocus
fullWidth
label={templateVariable.name}
variant="outlined"
/>

<Stack direction="column" spacing={0.5}>
<Stack
direction="row"
alignItems="center"
spacing={0.5}
className={styles.optionText}
>
{t("allowUserCancelWorkspaceJobsLabel")}
</Stack>
<span className={styles.optionHelperText}>
{t("allowUsersCancelHelperText")}
</span>
</Stack>
</Stack>
</label>
</FormSection>
</FormFields>
</FormSection>
))}

<FormFooter onCancel={onCancel} isLoading={isSubmitting} />
</HorizontalForm>
)
}

const useStyles = makeStyles((theme) => ({
optionText: {
fontSize: theme.spacing(2),
color: theme.palette.text.primary,
},

optionHelperText: {
fontSize: theme.spacing(1.5),
color: theme.palette.text.secondary,
},
}))

export const selectInitialUserVariableValues = (
templateVariables: TemplateVersionVariable[],
): VariableValue[] => {
const defaults: VariableValue[] = []
templateVariables.forEach((templateVariable) => {
if (templateVariable.sensitive) {
defaults.push({
name: templateVariable.name,
value: "",
})
return
}

if (
templateVariable.value === "" &&
templateVariable.default_value !== ""
Expand All @@ -202,6 +113,7 @@ export const selectInitialUserVariableValues = (
})
return
}

defaults.push({
name: templateVariable.name,
value: templateVariable.value,
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/TemplateVariablesPage/TemplateVariablesPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
!templateVariables &&
!errors.getTemplateError &&
!errors.getTemplateVariablesError
const { t } = useTranslation("TemplateVariablesPage")
const { t } = useTranslation("templateVariablesPage")

return (
<FullPageHorizontalForm title={t("title")} onCancel={onCancel}>
Expand Down