fix(editor): Simplifying empty project deletion (#15834)

This commit is contained in:
Csaba Tuncsik
2025-05-30 10:29:36 +02:00
committed by GitHub
parent 29a41a48a4
commit 6bf2d8a4d4
6 changed files with 160 additions and 55 deletions

View File

@@ -7,6 +7,7 @@ import { useI18n } from '@/composables/useI18n';
type Props = {
currentProject: Project | null;
projects: ProjectListItem[];
isCurrentProjectEmpty: boolean;
};
const props = defineProps<Props>();
@@ -21,16 +22,15 @@ const selectedProject = ref<ProjectSharingData | null>(null);
const operation = ref<'transfer' | 'wipe' | null>(null);
const wipeConfirmText = ref('');
const isValid = computed(() => {
if (operation.value === 'transfer') {
return !!selectedProject.value;
}
if (operation.value === 'wipe') {
return (
wipeConfirmText.value ===
locale.baseText('projects.settings.delete.question.wipe.placeholder')
);
}
return false;
const expectedWipeConfirmation = locale.baseText(
'projects.settings.delete.question.wipe.placeholder',
);
return (
props.isCurrentProjectEmpty ||
(operation.value === 'transfer' && !!selectedProject.value) ||
(operation.value === 'wipe' && wipeConfirmText.value === expectedWipeConfirmation)
);
});
const onDelete = () => {
@@ -55,47 +55,55 @@ const onDelete = () => {
"
width="500"
>
<n8n-text color="text-base">{{ locale.baseText('projects.settings.delete.message') }}</n8n-text>
<div class="pt-l">
<el-radio
:model-value="operation"
label="transfer"
class="mb-s"
@update:model-value="operation = 'transfer'"
>
<n8n-text color="text-dark">{{
locale.baseText('projects.settings.delete.question.transfer.label')
}}</n8n-text>
</el-radio>
<div v-if="operation === 'transfer'" :class="$style.operation">
<n8n-text color="text-dark">{{
locale.baseText('projects.settings.delete.question.transfer.title')
}}</n8n-text>
<ProjectSharing
v-model="selectedProject"
class="pt-2xs"
:projects="props.projects"
:empty-options-text="locale.baseText('projects.sharing.noMatchingProjects')"
/>
</div>
<el-radio
:model-value="operation"
label="wipe"
class="mb-s"
@update:model-value="operation = 'wipe'"
>
<n8n-text color="text-dark">{{
locale.baseText('projects.settings.delete.question.wipe.label')
}}</n8n-text>
</el-radio>
<div v-if="operation === 'wipe'" :class="$style.operation">
<n8n-input-label :label="locale.baseText('projects.settings.delete.question.wipe.title')">
<n8n-input
v-model="wipeConfirmText"
:placeholder="locale.baseText('projects.settings.delete.question.wipe.placeholder')"
<n8n-text v-if="isCurrentProjectEmpty" color="text-base">{{
locale.baseText('projects.settings.delete.message.empty')
}}</n8n-text>
<div v-else>
<n8n-text color="text-base">{{
locale.baseText('projects.settings.delete.message')
}}</n8n-text>
<div class="pt-l">
<el-radio
:model-value="operation"
label="transfer"
class="mb-s"
@update:model-value="operation = 'transfer'"
>
<n8n-text color="text-dark">{{
locale.baseText('projects.settings.delete.question.transfer.label')
}}</n8n-text>
</el-radio>
<div v-if="operation === 'transfer'" :class="$style.operation">
<n8n-text color="text-dark">{{
locale.baseText('projects.settings.delete.question.transfer.title')
}}</n8n-text>
<ProjectSharing
v-model="selectedProject"
class="pt-2xs"
:projects="props.projects"
:empty-options-text="locale.baseText('projects.sharing.noMatchingProjects')"
/>
</n8n-input-label>
</div>
<el-radio
:model-value="operation"
label="wipe"
class="mb-s"
@update:model-value="operation = 'wipe'"
>
<n8n-text color="text-dark">{{
locale.baseText('projects.settings.delete.question.wipe.label')
}}</n8n-text>
</el-radio>
<div v-if="operation === 'wipe'" :class="$style.operation">
<n8n-input-label :label="locale.baseText('projects.settings.delete.question.wipe.title')">
<n8n-input
v-model="wipeConfirmText"
data-test-id="project-delete-confirm-input"
:placeholder="locale.baseText('projects.settings.delete.question.wipe.placeholder')"
/>
</n8n-input-label>
</div>
</div>
</div>
<template #footer>