mirror of https://github.com/portainer/portainer
refactor(custom-templates): migrate common-fields to react [EE-6207] (#10445)
Chaim Lev-Ari
GitHub
parent
1ad9488ca7
commit
6b5c24faff
|
|
@ -21,7 +21,6 @@ class KubeCreateCustomTemplateViewController {
|
|||
formValidationError: '',
|
||||
isEditorDirty: false,
|
||||
isTemplateValid: true,
|
||||
templateNameRegex: KUBE_TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
};
|
||||
|
||||
this.formValues = {
|
||||
|
|
@ -42,12 +41,30 @@ class KubeCreateCustomTemplateViewController {
|
|||
ComposeFilePathInRepository: 'manifest.yml',
|
||||
};
|
||||
|
||||
this.validationData = {
|
||||
title: {
|
||||
pattern: KUBE_TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
error:
|
||||
"This field must consist of lower-case alphanumeric characters, '.', '_' or '-', must start and end with an alphanumeric character and must be 63 characters or less (e.g. 'my-name', or 'abc-123').",
|
||||
},
|
||||
};
|
||||
|
||||
this.onChangeFile = this.onChangeFile.bind(this);
|
||||
this.onChangeFileContent = this.onChangeFileContent.bind(this);
|
||||
this.onChangeMethod = this.onChangeMethod.bind(this);
|
||||
this.onBeforeOnload = this.onBeforeOnload.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.onVariablesChange = this.onVariablesChange.bind(this);
|
||||
this.onChangePlatform = this.onChangePlatform.bind(this);
|
||||
this.onChangeType = this.onChangeType.bind(this);
|
||||
}
|
||||
|
||||
onChangePlatform(value) {
|
||||
this.handleChange({ Platform: value });
|
||||
}
|
||||
|
||||
onChangeType(value) {
|
||||
this.handleChange({ Type: value });
|
||||
}
|
||||
|
||||
onChangeMethod(method) {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,7 @@
|
|||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal" name="$ctrl.form">
|
||||
<custom-template-common-fields
|
||||
form-values="$ctrl.formValues"
|
||||
name-regex="$ctrl.state.templateNameRegex"
|
||||
name-regex-error="'This field must consist of lower-case alphanumeric characters, \'.\', \'_\' or \'-\', must start and end with an alphanumeric character and must be 63 characters or less (e.g. \'my-name\', or \'abc-123\').'"
|
||||
></custom-template-common-fields>
|
||||
<custom-templates-common-fields values="$ctrl.formValues" on-change="($ctrl.handleChange)" validation-data="$ctrl.validationData"></custom-templates-common-fields>
|
||||
|
||||
<!-- build-method -->
|
||||
<div class="col-sm-12 form-section-title"> Build method </div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ class KubeEditCustomTemplateViewController {
|
|||
this.formValues = {
|
||||
Variables: [],
|
||||
TLSSkipVerify: false,
|
||||
Title: '',
|
||||
Description: '',
|
||||
Note: '',
|
||||
Logo: '',
|
||||
};
|
||||
this.state = {
|
||||
formValidationError: '',
|
||||
|
|
@ -25,10 +29,17 @@ class KubeEditCustomTemplateViewController {
|
|||
templateLoadFailed: false,
|
||||
templatePreviewFailed: false,
|
||||
templatePreviewError: '',
|
||||
templateNameRegex: KUBE_TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
};
|
||||
this.templates = [];
|
||||
|
||||
this.validationData = {
|
||||
title: {
|
||||
pattern: KUBE_TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
error:
|
||||
"This field must consist of lower-case alphanumeric characters, '.', '_' or '-', must start and end with an alphanumeric character and must be 63 characters or less (e.g. 'my-name', or 'abc-123').",
|
||||
},
|
||||
};
|
||||
|
||||
this.getTemplate = this.getTemplate.bind(this);
|
||||
this.submitAction = this.submitAction.bind(this);
|
||||
this.onChangeFileContent = this.onChangeFileContent.bind(this);
|
||||
|
|
@ -36,6 +47,16 @@ class KubeEditCustomTemplateViewController {
|
|||
this.handleChange = this.handleChange.bind(this);
|
||||
this.onVariablesChange = this.onVariablesChange.bind(this);
|
||||
this.previewFileFromGitRepository = this.previewFileFromGitRepository.bind(this);
|
||||
this.onChangePlatform = this.onChangePlatform.bind(this);
|
||||
this.onChangeType = this.onChangeType.bind(this);
|
||||
}
|
||||
|
||||
onChangePlatform(value) {
|
||||
this.handleChange({ Platform: value });
|
||||
}
|
||||
|
||||
onChangeType(value) {
|
||||
this.handleChange({ Type: value });
|
||||
}
|
||||
|
||||
getTemplate() {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,7 @@
|
|||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal" name="$ctrl.form">
|
||||
<custom-template-common-fields
|
||||
form-values="$ctrl.formValues"
|
||||
name-regex="$ctrl.state.templateNameRegex"
|
||||
name-regex-error="'This field must consist of lower-case alphanumeric characters, \'.\', \'_\' or \'-\', must start and end with an alphanumeric character and must be 63 characters or less (e.g. \'my-name\', or \'abc-123\').'"
|
||||
></custom-template-common-fields>
|
||||
<custom-templates-common-fields values="$ctrl.formValues" on-change="($ctrl.handleChange)" validation-data="$ctrl.validationData"></custom-templates-common-fields>
|
||||
|
||||
<git-form value="$ctrl.formValues" on-change="($ctrl.handleChange)" ng-if="$ctrl.formValues.GitConfig"></git-form>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
<ng-form name="commonCustomTemplateForm">
|
||||
<!-- title-input -->
|
||||
<div class="form-group mb-0">
|
||||
<label for="template_title" class="col-sm-3 col-lg-2 control-label required text-left"> Title </label>
|
||||
<div class="col-sm-8">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
ng-model="$ctrl.formValues.Title"
|
||||
ng-pattern="$ctrl.nameRegex"
|
||||
id="template_title"
|
||||
name="template_title"
|
||||
placeholder="e.g. mytemplate"
|
||||
auto-focus
|
||||
required
|
||||
/>
|
||||
<span class="help-block">
|
||||
<div ng-show="commonCustomTemplateForm.template_title.$invalid">
|
||||
<div class="small text-warning mt-2">
|
||||
<div ng-messages="commonCustomTemplateForm.template_title.$error">
|
||||
<p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Title is required. </p>
|
||||
<p class="vertical-center" ng-message="pattern">
|
||||
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
|
||||
{{ $ctrl.nameRegexError }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !title-input -->
|
||||
|
||||
<!-- description-input -->
|
||||
<div class="form-group mb-0">
|
||||
<label for="description" class="col-sm-3 col-lg-2 control-label required text-left">Description</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="description" ng-model="$ctrl.formValues.Description" name="description" required />
|
||||
<span class="help-block">
|
||||
<div class="small text-warning mt-2">
|
||||
<div ng-show="commonCustomTemplateForm.description.$invalid">
|
||||
<div ng-messages="commonCustomTemplateForm.description.$error">
|
||||
<p class="vertical-center" ng-message="required"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Description is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !description-input -->
|
||||
|
||||
<!-- note-input -->
|
||||
<div class="form-group">
|
||||
<label for="note" class="col-sm-3 col-lg-2 control-label text-left">Note</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="note" ng-model="$ctrl.formValues.Note" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- !note-input -->
|
||||
|
||||
<!-- icon-url-input -->
|
||||
<div class="form-group">
|
||||
<label for="icon-url" class="col-sm-3 col-lg-2 control-label text-left">Icon URL</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="form-control" id="icon-url" ng-model="$ctrl.formValues.Logo" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- !icon-url-input -->
|
||||
|
||||
<!-- platform-input -->
|
||||
<div ng-if="$ctrl.showPlatformField" class="form-group">
|
||||
<label for="platform" class="col-sm-3 col-lg-2 control-label text-left">Platform</label>
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control" ng-model="$ctrl.formValues.Platform" ng-options="+(opt.value) as opt.label for opt in $ctrl.platformTypes"> </select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !platform-input -->
|
||||
|
||||
<!-- platform-input -->
|
||||
<div ng-if="$ctrl.showTypeField" class="form-group">
|
||||
<label for="platform" class="col-sm-3 col-lg-2 control-label text-left">Type</label>
|
||||
<div class="col-sm-8">
|
||||
<select class="form-control" ng-model="$ctrl.formValues.Type" ng-options="+(opt.value) as opt.label for opt in $ctrl.templateTypes"> </select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !platform-input -->
|
||||
</ng-form>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
class CustomTemplateCommonFieldsController {
|
||||
/* @ngInject */
|
||||
constructor() {
|
||||
this.platformTypes = [
|
||||
{ label: 'Linux', value: 1 },
|
||||
{ label: 'Windows', value: 2 },
|
||||
];
|
||||
|
||||
this.templateTypes = [
|
||||
{ label: 'Swarm', value: 1 },
|
||||
{ label: 'Standalone', value: 2 },
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
export default CustomTemplateCommonFieldsController;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import CustomTemplateCommonFieldsController from './customTemplateCommonFieldsController.js';
|
||||
|
||||
angular.module('portainer.app').component('customTemplateCommonFields', {
|
||||
templateUrl: './customTemplateCommonFields.html',
|
||||
controller: CustomTemplateCommonFieldsController,
|
||||
bindings: {
|
||||
formValues: '=',
|
||||
showPlatformField: '<',
|
||||
showTypeField: '<',
|
||||
nameRegex: '<',
|
||||
nameRegexError: '<',
|
||||
},
|
||||
});
|
||||
|
|
@ -8,10 +8,17 @@ import { CustomTemplatesListItem } from '@/react/portainer/templates/custom-temp
|
|||
import { withCurrentUser } from '@/react-tools/withCurrentUser';
|
||||
import { withUIRouter } from '@/react-tools/withUIRouter';
|
||||
import { AppTemplatesListItem } from '@/react/portainer/templates/app-templates/AppTemplatesListItem';
|
||||
import {
|
||||
CommonFields,
|
||||
validation as commonFieldsValidation,
|
||||
} from '@/react/portainer/custom-templates/components/CommonFields';
|
||||
import { PlatformField } from '@/react/portainer/custom-templates/components/PlatformSelector';
|
||||
import { TemplateTypeSelector } from '@/react/portainer/custom-templates/components/TemplateTypeSelector';
|
||||
import { withFormValidation } from '@/react-tools/withFormValidation';
|
||||
|
||||
import { VariablesFieldAngular } from './variables-field';
|
||||
|
||||
export const customTemplatesModule = angular
|
||||
export const ngModule = angular
|
||||
.module('portainer.app.react.components.custom-templates', [])
|
||||
.component(
|
||||
'customTemplatesVariablesFieldReact',
|
||||
|
|
@ -48,4 +55,22 @@ export const customTemplatesModule = angular
|
|||
'isSelected',
|
||||
'onDuplicate',
|
||||
])
|
||||
).name;
|
||||
)
|
||||
.component(
|
||||
'customTemplatesPlatformSelector',
|
||||
r2a(PlatformField, ['onChange', 'value'])
|
||||
)
|
||||
.component(
|
||||
'customTemplatesTypeSelector',
|
||||
r2a(TemplateTypeSelector, ['onChange', 'value'])
|
||||
);
|
||||
|
||||
withFormValidation(
|
||||
ngModule,
|
||||
withControlledInput(CommonFields, { values: 'onChange' }),
|
||||
'customTemplatesCommonFields',
|
||||
[],
|
||||
commonFieldsValidation
|
||||
);
|
||||
|
||||
export const customTemplatesModule = ngModule.name;
|
||||
|
|
|
|||
|
|
@ -5,13 +5,11 @@
|
|||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal" name="customTemplateForm">
|
||||
<custom-template-common-fields
|
||||
form-values="$ctrl.formValues"
|
||||
show-platform-field="true"
|
||||
show-type-field="true"
|
||||
name-regex="$ctrl.state.templateNameRegex"
|
||||
name-regex-error="'This field must consist of lower-case alphanumeric characters, \'_\' or \'-\' (e.g. \'my-name\', or \'abc-123\').'"
|
||||
></custom-template-common-fields>
|
||||
<custom-templates-common-fields values="$ctrl.formValues" on-change="($ctrl.handleChange)" validation-data="$ctrl.validationData"></custom-templates-common-fields>
|
||||
|
||||
<custom-templates-platform-selector value="$ctrl.formValues.Platform" on-change="($ctrl.onChangePlatform)"></custom-templates-platform-selector>
|
||||
|
||||
<custom-templates-type-selector value="$ctrl.formValues.Type" on-change="($ctrl.onChangeType)"></custom-templates-type-selector>
|
||||
|
||||
<!-- build-method -->
|
||||
<div ng-if="!$ctrl.state.fromStack">
|
||||
|
|
|
|||
|
|
@ -54,10 +54,16 @@ class CreateCustomTemplateViewController {
|
|||
fromStack: false,
|
||||
loading: true,
|
||||
isEditorDirty: false,
|
||||
templateNameRegex: TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
isTemplateValid: true,
|
||||
};
|
||||
|
||||
this.validationData = {
|
||||
title: {
|
||||
pattern: TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
error: "This field must consist of lower-case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').",
|
||||
},
|
||||
};
|
||||
|
||||
this.templates = [];
|
||||
|
||||
this.createCustomTemplate = this.createCustomTemplate.bind(this);
|
||||
|
|
@ -71,12 +77,22 @@ class CreateCustomTemplateViewController {
|
|||
this.onChangeMethod = this.onChangeMethod.bind(this);
|
||||
this.onVariablesChange = this.onVariablesChange.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.onChangePlatform = this.onChangePlatform.bind(this);
|
||||
this.onChangeType = this.onChangeType.bind(this);
|
||||
}
|
||||
|
||||
onVariablesChange(value) {
|
||||
this.handleChange({ Variables: value });
|
||||
}
|
||||
|
||||
onChangePlatform(value) {
|
||||
this.handleChange({ Platform: value });
|
||||
}
|
||||
|
||||
onChangeType(value) {
|
||||
this.handleChange({ Type: value });
|
||||
}
|
||||
|
||||
handleChange(values) {
|
||||
return this.$async(async () => {
|
||||
this.formValues = {
|
||||
|
|
|
|||
|
|
@ -5,13 +5,11 @@
|
|||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal" name="customTemplateForm">
|
||||
<custom-template-common-fields
|
||||
form-values="$ctrl.formValues"
|
||||
show-platform-field="true"
|
||||
show-type-field="true"
|
||||
name-regex="$ctrl.state.templateNameRegex"
|
||||
name-regex-error="'This field must consist of lower-case alphanumeric characters, \'_\' or \'-\' (e.g. \'my-name\', or \'abc-123\').'"
|
||||
></custom-template-common-fields>
|
||||
<custom-templates-common-fields values="$ctrl.formValues" on-change="($ctrl.handleChange)" validation-data="$ctrl.validationData"></custom-templates-common-fields>
|
||||
|
||||
<custom-templates-platform-selector value="$ctrl.formValues.Platform" on-change="($ctrl.onChangePlatform)"></custom-templates-platform-selector>
|
||||
|
||||
<custom-templates-type-selector value="$ctrl.formValues.Type" on-change="($ctrl.onChangeType)"></custom-templates-type-selector>
|
||||
|
||||
<git-form value="$ctrl.formValues" on-change="($ctrl.handleChange)" ng-if="$ctrl.formValues.GitConfig"></git-form>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,12 @@ class EditCustomTemplateViewController {
|
|||
this.formValues = {
|
||||
Variables: [],
|
||||
TLSSkipVerify: false,
|
||||
Title: '',
|
||||
Description: '',
|
||||
Note: '',
|
||||
Logo: '',
|
||||
};
|
||||
|
||||
this.state = {
|
||||
formValidationError: '',
|
||||
isEditorDirty: false,
|
||||
|
|
@ -27,8 +32,15 @@ class EditCustomTemplateViewController {
|
|||
templateLoadFailed: false,
|
||||
templatePreviewFailed: false,
|
||||
templatePreviewError: '',
|
||||
templateNameRegex: TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
};
|
||||
|
||||
this.validationData = {
|
||||
title: {
|
||||
pattern: TEMPLATE_NAME_VALIDATION_REGEX,
|
||||
error: "This field must consist of lower-case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').",
|
||||
},
|
||||
};
|
||||
|
||||
this.templates = [];
|
||||
|
||||
this.getTemplate = this.getTemplate.bind(this);
|
||||
|
|
@ -39,6 +51,16 @@ class EditCustomTemplateViewController {
|
|||
this.onVariablesChange = this.onVariablesChange.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.previewFileFromGitRepository = this.previewFileFromGitRepository.bind(this);
|
||||
this.onChangePlatform = this.onChangePlatform.bind(this);
|
||||
this.onChangeType = this.onChangeType.bind(this);
|
||||
}
|
||||
|
||||
onChangePlatform(value) {
|
||||
this.handleChange({ Platform: value });
|
||||
}
|
||||
|
||||
onChangeType(value) {
|
||||
this.handleChange({ Type: value });
|
||||
}
|
||||
|
||||
getTemplate() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
import { SchemaOf, object, string } from 'yup';
|
||||
import { FormikErrors } from 'formik';
|
||||
|
||||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { Input } from '@@/form-components/Input';
|
||||
|
||||
interface Values {
|
||||
Title: string;
|
||||
Description: string;
|
||||
Note: string;
|
||||
Logo: string;
|
||||
}
|
||||
|
||||
export function CommonFields({
|
||||
values,
|
||||
onChange,
|
||||
errors,
|
||||
}: {
|
||||
values: Values;
|
||||
onChange: (values: Values) => void;
|
||||
errors?: FormikErrors<Values>;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<FormControl
|
||||
label="Title"
|
||||
required
|
||||
inputId="template-title"
|
||||
errors={errors?.Title}
|
||||
>
|
||||
<Input
|
||||
name="title"
|
||||
placeholder="e.g. mytemplate"
|
||||
id="template-title"
|
||||
required
|
||||
value={values.Title}
|
||||
onChange={(e) => {
|
||||
handleChange({ Title: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl
|
||||
label="Description"
|
||||
required
|
||||
inputId="template-description"
|
||||
errors={errors?.Description}
|
||||
>
|
||||
<Input
|
||||
name="description"
|
||||
id="template-description"
|
||||
required
|
||||
value={values.Description}
|
||||
onChange={(e) => {
|
||||
handleChange({ Description: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl label="Note" inputId="template-note" errors={errors?.Note}>
|
||||
<Input
|
||||
name="note"
|
||||
id="template-note"
|
||||
value={values.Note}
|
||||
onChange={(e) => {
|
||||
handleChange({ Note: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl label="Logo" inputId="template-logo" errors={errors?.Logo}>
|
||||
<Input
|
||||
name="logo"
|
||||
id="template-logo"
|
||||
value={values.Logo}
|
||||
onChange={(e) => {
|
||||
handleChange({ Logo: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</>
|
||||
);
|
||||
|
||||
function handleChange(change: Partial<Values>) {
|
||||
onChange({ ...values, ...change });
|
||||
}
|
||||
}
|
||||
|
||||
export function validation({
|
||||
title,
|
||||
}: {
|
||||
title?: { pattern: string; error: string };
|
||||
} = {}): SchemaOf<Values> {
|
||||
let titleSchema = string().required('Title is required.');
|
||||
if (title?.pattern) {
|
||||
const pattern = new RegExp(title.pattern);
|
||||
titleSchema = titleSchema.matches(pattern, title.error);
|
||||
}
|
||||
|
||||
return object({
|
||||
Title: titleSchema,
|
||||
Description: string().required('Description is required.'),
|
||||
Note: string().default(''),
|
||||
Logo: string().default(''),
|
||||
});
|
||||
}
|
||||
|
|
@ -1 +1,2 @@
|
|||
export { CustomTemplatesVariablesDefinitionField } from './CustomTemplatesVariablesDefinitionField';
|
||||
export type { VariableDefinition } from './CustomTemplatesVariablesDefinitionField';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { Select } from '@@/form-components/Input';
|
||||
|
||||
import { Platform } from '../types';
|
||||
|
||||
const platformOptions = [
|
||||
{ label: 'Linux', value: Platform.LINUX },
|
||||
{ label: 'Windows', value: Platform.WINDOWS },
|
||||
];
|
||||
|
||||
export function PlatformField({
|
||||
onChange,
|
||||
value,
|
||||
}: {
|
||||
onChange: (platform: Platform) => void;
|
||||
value: Platform;
|
||||
}) {
|
||||
return (
|
||||
<FormControl label="Platform" required inputId="template-platform">
|
||||
<Select
|
||||
name="platform"
|
||||
id="template-platform"
|
||||
required
|
||||
options={platformOptions}
|
||||
value={value}
|
||||
onChange={(e) => onChange(parseInt(e.target.value, 10))}
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { StackType } from '@/react/common/stacks/types';
|
||||
|
||||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { Select } from '@@/form-components/Input';
|
||||
|
||||
const typeOptions = [
|
||||
{ label: 'Swarm', value: StackType.DockerSwarm },
|
||||
{ label: 'Standalone', value: StackType.DockerCompose },
|
||||
];
|
||||
|
||||
export function TemplateTypeSelector({
|
||||
onChange,
|
||||
value,
|
||||
}: {
|
||||
onChange: (type: StackType) => void;
|
||||
value: StackType;
|
||||
}) {
|
||||
return (
|
||||
<FormControl label="Type" required inputId="template-type">
|
||||
<Select
|
||||
name="type"
|
||||
id="template-type"
|
||||
required
|
||||
options={typeOptions}
|
||||
value={value}
|
||||
onChange={(e) => onChange(parseInt(e.target.value, 10))}
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,19 +4,14 @@ import { StackType } from '@/react/common/stacks/types';
|
|||
import { ResourceControlResponse } from '../access-control/types';
|
||||
import { RepoConfigResponse } from '../gitops/types';
|
||||
|
||||
import { VariableDefinition } from './components/CustomTemplatesVariablesDefinitionField';
|
||||
|
||||
export enum Platform {
|
||||
LINUX = 1,
|
||||
WINDOWS,
|
||||
}
|
||||
|
||||
export /**
|
||||
* CustomTemplate represents a custom template.
|
||||
*/
|
||||
interface CustomTemplate {
|
||||
/**
|
||||
* CustomTemplate Identifier.
|
||||
* @example 1
|
||||
*/
|
||||
export type CustomTemplate = {
|
||||
Id: number;
|
||||
|
||||
/**
|
||||
|
|
@ -82,6 +77,8 @@ interface CustomTemplate {
|
|||
*/
|
||||
ResourceControl?: ResourceControlResponse;
|
||||
|
||||
Variables: VariableDefinition[];
|
||||
|
||||
/**
|
||||
* GitConfig for the template.
|
||||
*/
|
||||
|
|
@ -92,7 +89,7 @@ interface CustomTemplate {
|
|||
* @example false
|
||||
*/
|
||||
IsComposeFormat: boolean;
|
||||
}
|
||||
};
|
||||
|
||||
export type CustomTemplateFileContent = {
|
||||
FileContent: string;
|
||||
|
|
|
|||
Loading…
Reference in New Issue