Allow editing all environment variables in pipeline popups (#3314)

This commit is contained in:
Lukas 2024-02-09 00:46:08 +01:00 committed by GitHub
parent 6785806873
commit 147137c7bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 106 additions and 82 deletions

View file

@ -38,7 +38,7 @@
"trigger": "Run pipeline",
"select_branch": "Select branch",
"variables": {
"add": "Add variable",
"delete": "Delete variable",
"title": "Additional pipeline variables",
"desc": "Specify additional variables to use in your pipeline. Variables with the same name will be overwritten.",
"name": "Variable name",
@ -50,7 +50,7 @@
"enter_target": "Target deployment environment",
"trigger": "Deploy",
"variables": {
"add": "Add variable",
"delete": "Delete variable",
"title": "Additional pipeline variables",
"desc": "Specify additional variables to use in your pipeline. Variables with the same name will be overwritten.",
"name": "Variable name",

View file

@ -11,35 +11,29 @@
<InputField v-slot="{ id }" :label="$t('repo.deploy_pipeline.variables.title')">
<span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.deploy_pipeline.variables.desc') }}</span>
<div class="flex flex-col gap-2">
<div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
<TextField :id="id" :model-value="name" disabled />
<TextField :id="id" :model-value="value" disabled />
<div class="w-34 flex-shrink-0">
<Button color="red" class="ml-auto" @click="deleteVar(name)">
<div v-for="(_, i) in payload.variables" :key="i" class="flex gap-4">
<TextField
:id="id"
v-model="payload.variables[i].name"
:placeholder="$t('repo.deploy_pipeline.variables.name')"
/>
<TextField
:id="id"
v-model="payload.variables[i].value"
:placeholder="$t('repo.deploy_pipeline.variables.value')"
/>
<div class="w-10 flex-shrink-0">
<Button
v-if="i !== payload.variables.length - 1"
color="red"
class="ml-auto"
:title="$t('repo.deploy_pipeline.variables.delete')"
@click="deleteVar(i)"
>
<i-la-times />
</Button>
</div>
</div>
<form class="flex gap-4" @submit.prevent="addPipelineVariable">
<TextField
:id="id"
v-model="newPipelineVariable.name"
:placeholder="$t('repo.deploy_pipeline.variables.name')"
required
/>
<TextField
:id="id"
v-model="newPipelineVariable.value"
:placeholder="$t('repo.deploy_pipeline.variables.value')"
required
/>
<Button
class="w-34 flex-shrink-0"
start-icon="plus"
type="submit"
:text="$t('repo.deploy_pipeline.variables.add')"
/>
</form>
</div>
</InputField>
<Button type="submit" :text="$t('repo.deploy_pipeline.trigger')" />
@ -49,7 +43,7 @@
</template>
<script lang="ts" setup>
import { onMounted, ref, toRef } from 'vue';
import { computed, onMounted, ref, toRef, watch } from 'vue';
import { useRouter } from 'vue-router';
import Button from '~/components/atomic/Button.vue';
@ -75,35 +69,53 @@ const repo = inject('repo');
const router = useRouter();
const payload = ref<{ id: string; environment: string; variables: Record<string, string> }>({
const payload = ref<{ id: string; environment: string; variables: { name: string; value: string }[] }>({
id: '',
environment: '',
variables: {},
variables: [
{
name: '',
value: '',
},
],
});
const pipelineOptions = computed(() => {
const variables = Object.fromEntries(
payload.value.variables.filter((e) => e.name !== '').map((item) => [item.name, item.value]),
);
return {
...payload.value,
variables,
};
});
const newPipelineVariable = ref<{ name: string; value: string }>({ name: '', value: '' });
const loading = ref(true);
onMounted(async () => {
loading.value = false;
});
function addPipelineVariable() {
if (!newPipelineVariable.value.name || !newPipelineVariable.value.value) {
return;
watch(
payload,
() => {
if (payload.value.variables[payload.value.variables.length - 1].name !== '') {
payload.value.variables.push({
name: '',
value: '',
});
}
payload.value.variables[newPipelineVariable.value.name] = newPipelineVariable.value.value;
newPipelineVariable.value.name = '';
newPipelineVariable.value.value = '';
}
},
{ deep: true },
);
function deleteVar(key: string) {
delete payload.value.variables[key];
function deleteVar(index: number) {
payload.value.variables.splice(index, 1);
}
const pipelineNumber = toRef(props, 'pipelineNumber');
async function triggerDeployPipeline() {
loading.value = true;
const newPipeline = await apiClient.deployPipeline(repo.value.id, pipelineNumber.value, payload.value);
const newPipeline = await apiClient.deployPipeline(repo.value.id, pipelineNumber.value, pipelineOptions.value);
emit('close');

View file

@ -9,35 +9,29 @@
<InputField v-slot="{ id }" :label="$t('repo.manual_pipeline.variables.title')">
<span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
<div class="flex flex-col gap-2">
<div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
<TextField :id="id" :model-value="name" disabled />
<TextField :id="id" :model-value="value" disabled />
<div class="w-34 flex-shrink-0">
<Button color="red" class="ml-auto" @click="deleteVar(name)">
<div v-for="(_, i) in payload.variables" :key="i" class="flex gap-4">
<TextField
:id="id"
v-model="payload.variables[i].name"
:placeholder="$t('repo.manual_pipeline.variables.name')"
/>
<TextField
:id="id"
v-model="payload.variables[i].value"
:placeholder="$t('repo.manual_pipeline.variables.value')"
/>
<div class="w-10 flex-shrink-0">
<Button
v-if="i !== payload.variables.length - 1"
color="red"
class="ml-auto"
:title="$t('repo.manual_pipeline.variables.delete')"
@click="deleteVar(i)"
>
<i-la-times />
</Button>
</div>
</div>
<form class="flex gap-4" @submit.prevent="addPipelineVariable">
<TextField
:id="id"
v-model="newPipelineVariable.name"
:placeholder="$t('repo.manual_pipeline.variables.name')"
required
/>
<TextField
:id="id"
v-model="newPipelineVariable.value"
:placeholder="$t('repo.manual_pipeline.variables.value')"
required
/>
<Button
class="w-34 flex-shrink-0"
start-icon="plus"
type="submit"
:text="$t('repo.manual_pipeline.variables.add')"
/>
</form>
</div>
</InputField>
<Button type="submit" :text="$t('repo.manual_pipeline.trigger')" />
@ -47,7 +41,7 @@
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { computed, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import Button from '~/components/atomic/Button.vue';
@ -74,11 +68,25 @@ const repo = inject('repo');
const router = useRouter();
const branches = ref<{ text: string; value: string }[]>([]);
const payload = ref<{ branch: string; variables: Record<string, string> }>({
const payload = ref<{ branch: string; variables: { name: string; value: string }[] }>({
branch: 'main',
variables: {},
variables: [
{
name: '',
value: '',
},
],
});
const pipelineOptions = computed(() => {
const variables = Object.fromEntries(
payload.value.variables.filter((e) => e.name !== '').map((item) => [item.name, item.value]),
);
return {
...payload.value,
variables,
};
});
const newPipelineVariable = ref<{ name: string; value: string }>({ name: '', value: '' });
const loading = ref(true);
onMounted(async () => {
@ -90,22 +98,26 @@ onMounted(async () => {
loading.value = false;
});
function addPipelineVariable() {
if (!newPipelineVariable.value.name || !newPipelineVariable.value.value) {
return;
watch(
payload,
() => {
if (payload.value.variables[payload.value.variables.length - 1].name !== '') {
payload.value.variables.push({
name: '',
value: '',
});
}
payload.value.variables[newPipelineVariable.value.name] = newPipelineVariable.value.value;
newPipelineVariable.value.name = '';
newPipelineVariable.value.value = '';
}
},
{ deep: true },
);
function deleteVar(key: string) {
delete payload.value.variables[key];
function deleteVar(index: number) {
payload.value.variables.splice(index, 1);
}
async function triggerManualPipeline() {
loading.value = true;
const pipeline = await apiClient.createPipeline(repo.value.id, payload.value);
const pipeline = await apiClient.createPipeline(repo.value.id, pipelineOptions.value);
emit('close');