1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00

refactor(app): migrate env var form section [EE-6232] (#10499)

* refactor(app): migrate env var form section [EE-6232]

* allow undoing delete in inputlist
This commit is contained in:
Ali 2024-01-03 08:17:54 +13:00 committed by GitHub
parent 6228314e3c
commit 488393007f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 274 additions and 209 deletions

View file

@ -383,103 +383,12 @@
<div class="col-sm-12 vertical-center">
<label class="control-label !pt-0 text-left">Environment variables</label>
</div>
<div class="col-sm-12 form-inline mt-2">
<div ng-repeat="envVar in ctrl.formValues.EnvironmentVariables | orderBy: 'NameIndex'" class="mt-2">
<div style="margin-top: 2px">
<div class="col-sm-4 input-group input-group-sm mr-2">
<div class="input-group col-sm-12 input-group-sm" ng-class="{ striked: envVar.NeedsDeletion }">
<span class="input-group-addon required">name</span>
<input
type="text"
name="environment_variable_name_{{ $index }}"
class="form-control"
ng-model="envVar.Name"
ng-change="ctrl.onChangeEnvironmentName()"
ng-pattern="/^[-._a-zA-Z][-._a-zA-Z0-9]*$/"
placeholder="foo"
ng-disabled="ctrl.formValues.Containers.length > 1"
data-cy="k8sAppCreate-envVarName_{{ $index }}"
required
/>
</div>
</div>
<div class="col-sm-4 input-group input-group-sm mr-2" ng-class="{ striked: envVar.NeedsDeletion }">
<span class="input-group-addon">value</span>
<input
type="text"
name="environment_variable_value_{{ $index }}"
class="form-control"
ng-model="envVar.Value"
placeholder="bar"
ng-disabled="ctrl.formValues.Containers.length > 1"
data-cy="k8sAppCreate-envVarValue_{{ $index }}"
/>
</div>
<div class="col-sm-2 input-group input-group-sm" ng-if="ctrl.formValues.Containers.length <= 1">
<button
ng-if="!envVar.NeedsDeletion"
class="btn btn-md btn-dangerlight btn-only-icon !ml-0"
type="button"
ng-click="ctrl.removeEnvironmentVariable(envVar)"
>
<pr-icon icon="'trash-2'" size="'md'"></pr-icon>
</button>
<button
ng-if="envVar.NeedsDeletion"
class="btn btn-sm btn-light btn-only-icon"
type="button"
ng-click="ctrl.restoreEnvironmentVariable(envVar)"
data-cy="k8sAppCreate-removeEnvVarButton_{{ $index }}"
>
<pr-icon icon="'rotate-cw'" size="'md'"></pr-icon>
</button>
</div>
</div>
<div
ng-show="
kubernetesApplicationCreationForm['environment_variable_name_' + $index].$invalid ||
ctrl.state.duplicates.environmentVariables.refs[$index] !== undefined
"
>
<div class="col-sm-8 input-group input-group-sm">
<div
class="small"
style="margin-top: 5px"
ng-show="
kubernetesApplicationCreationForm['environment_variable_name_' + $index].$invalid ||
ctrl.state.duplicates.environmentVariables.refs[$index] !== undefined
"
>
<ng-messages for="kubernetesApplicationCreationForm['environment_variable_name_' + $index].$error">
<p ng-message="required" class="text-warning vertical-center"
><pr-icon icon="'alert-triangle'" mode="'warning'" class-="vertical-center"></pr-icon> Environment variable name is required.</p
>
<p ng-message="pattern" class="text-warning vertical-center"
><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This field must consist of alphabetic characters, digits, '_', '-', or '.', and must
not start with a digit (e.g. 'my.env-name', or 'MY_ENV.NAME', or 'MyEnvName1'.</p
>
</ng-messages>
<p class="text-warning vertical-center" ng-if="ctrl.state.duplicates.environmentVariables.refs[$index] !== undefined"
><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This environment variable is already defined.</p
>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 mt-2">
<span
ng-if="ctrl.formValues.Containers.length <= 1"
class="btn btn-primary btn-sm btn btn-sm btn-light mb-2 !ml-0"
ng-click="ctrl.addEnvironmentVariable()"
data-cy="k8sAppCreate-addEnvVarButton"
>
<pr-icon icon="'plus'" size="'sm'"></pr-icon> Add environment variable
</span>
<div class="col-sm-11 col-lg-10 mt-2">
<kube-environment-variables-fieldset
values="ctrl.formValues.EnvironmentVariables"
on-change="(ctrl.onEnvironmentVariableChange)"
can-undo-delete="true"
></kube-environment-variables-fieldset>
</div>
</div>
<!-- #endregion -->

View file

@ -154,6 +154,7 @@ class KubernetesCreateApplicationController {
this.supportGlobalDeployment = this.supportGlobalDeployment.bind(this);
this.onChangePlacementType = this.onChangePlacementType.bind(this);
this.onServicesChange = this.onServicesChange.bind(this);
this.onEnvironmentVariableChange = this.onEnvironmentVariableChange.bind(this);
}
/* #endregion */
@ -359,30 +360,14 @@ class KubernetesCreateApplicationController {
/* #endregion */
/* #region ENVIRONMENT UI MANAGEMENT */
addEnvironmentVariable() {
this.formValues.EnvironmentVariables.push(new KubernetesApplicationEnvironmentVariableFormValue());
}
restoreEnvironmentVariable(item) {
item.NeedsDeletion = false;
}
removeEnvironmentVariable(item) {
const index = this.formValues.EnvironmentVariables.indexOf(item);
if (index !== -1) {
const envVar = this.formValues.EnvironmentVariables[index];
if (!envVar.IsNew) {
envVar.NeedsDeletion = true;
} else {
this.formValues.EnvironmentVariables.splice(index, 1);
}
}
this.onChangeEnvironmentName();
}
onChangeEnvironmentName() {
this.state.duplicates.environmentVariables.refs = KubernetesFormValidationHelper.getDuplicates(_.map(this.formValues.EnvironmentVariables, 'Name'));
this.state.duplicates.environmentVariables.hasRefs = Object.keys(this.state.duplicates.environmentVariables.refs).length > 0;
onEnvironmentVariableChange(enviromnentVariables) {
return this.$async(async () => {
const newEnvVars = enviromnentVariables.map((envVar) => {
const newEnvVar = new KubernetesApplicationEnvironmentVariableFormValue();
return { newEnvVar, ...envVar };
});
this.formValues.EnvironmentVariables = newEnvVars;
});
}
/* #endregion */