admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Type errors in VariablesView.vue (no-changelog) (#9558)

Browse Source
This commit is contained in:
Ricardo Espinoza
2024-06-03 13:17:01 -04:00
committed by GitHub
parent 08d9c9a787
commit 631f077c18
6 changed files with 79 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
packages/editor-ui/src/views/VariablesView.vue
View File

@@ -10,17 +10,15 @@ import { useTelemetry } from '@/composables/useTelemetry';
import { useToast } from '@/composables/useToast';
import { useMessage } from '@/composables/useMessage';
import type { IResource } from '@/components/layouts/ResourcesListLayout.vue';
import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
import VariablesRow from '@/components/VariablesRow.vue';
import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
import type {
DatatableColumn,
EnvironmentVariable,
TemporaryEnvironmentVariable,
} from '@/Interface';
import type { DatatableColumn, EnvironmentVariable } from '@/Interface';
import { uid } from 'n8n-design-system/utils';
import { getVariablesPermissions } from '@/permissions';
import type { BaseTextKey } from '@/plugins/i18n';
const settingsStore = useSettingsStore();
const environmentsStore = useEnvironmentsStore();
@@ -38,7 +36,7 @@ const { showError } = useToast();
const TEMPORARY_VARIABLE_UID_BASE = '@tmpvar';
const allVariables = ref<Array<EnvironmentVariable | TemporaryEnvironmentVariable>>([]);
const allVariables = ref<EnvironmentVariable[]>([]);
const editMode = ref<Record<string, boolean>>({});
const permissions = getVariablesPermissions(usersStore.currentUser);
@@ -46,6 +44,11 @@ const permissions = getVariablesPermissions(usersStore.currentUser);
const isFeatureEnabled = computed(() =>
settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Variables),
);
const variablesToResources = computed((): IResource[] =>
allVariables.value.map((v) => ({ id: v.id, name: v.key, value: v.value })),
);
const canCreateVariables = computed(() => isFeatureEnabled.value && permissions.create);
const datatableColumns = computed<DatatableColumn[]>(() => [
@@ -80,9 +83,9 @@ const datatableColumns = computed<DatatableColumn[]>(() => [
const contextBasedTranslationKeys = computed(() => uiStore.contextBasedTranslationKeys);
const newlyAddedVariableIds = ref<number[]>([]);
const newlyAddedVariableIds = ref<string[]>([]);
const nameSortFn = (a: EnvironmentVariable, b: EnvironmentVariable, direction: 'asc' | 'desc') => {
const nameSortFn = (a: IResource, b: IResource, direction: 'asc' | 'desc') => {
if (`${a.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
return -1;
} else if (`${b.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
@@ -103,10 +106,10 @@ const nameSortFn = (a: EnvironmentVariable, b: EnvironmentVariable, direction: '
: displayName(b).trim().localeCompare(displayName(a).trim());
};
const sortFns = {
nameAsc: (a: EnvironmentVariable, b: EnvironmentVariable) => {
nameAsc: (a: IResource, b: IResource) => {
return nameSortFn(a, b, 'asc');
},
nameDesc: (a: EnvironmentVariable, b: EnvironmentVariable) => {
nameDesc: (a: IResource, b: IResource) => {
return nameSortFn(a, b, 'desc');
},
};
@@ -115,6 +118,14 @@ function resetNewVariablesList() {
newlyAddedVariableIds.value = [];
}
const resourceToEnvironmentVariable = (data: IResource): EnvironmentVariable => {
return {
id: data.id,
key: data.name,
value: data.value,
};
};
async function initialize() {
if (!isFeatureEnabled.value) return;
await environmentsStore.fetchAllVariables();
@@ -123,7 +134,7 @@ async function initialize() {
}
function addTemporaryVariable() {
const temporaryVariable: TemporaryEnvironmentVariable = {
const temporaryVariable: EnvironmentVariable = {
id: uid(TEMPORARY_VARIABLE_UID_BASE),
key: '',
value: '',
@@ -132,7 +143,7 @@ function addTemporaryVariable() {
if (layoutRef.value) {
// Reset scroll position
if (layoutRef.value.$refs.listWrapperRef) {
layoutRef.value.$refs.listWrapperRef.scrollTop = 0;
(layoutRef.value.$refs.listWrapperRef as HTMLDivElement).scrollTop = 0;
}
// Reset pagination
@@ -147,18 +158,19 @@ function addTemporaryVariable() {
telemetry.track('User clicked add variable button');
}
async function saveVariable(data: EnvironmentVariable | TemporaryEnvironmentVariable) {
async function saveVariable(data: IResource) {
let updatedVariable: EnvironmentVariable;
const variable = resourceToEnvironmentVariable(data);
try {
if (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
const { id, ...rest } = data;
const { id, ...rest } = variable;
updatedVariable = await environmentsStore.createVariable(rest);
allVariables.value.unshift(updatedVariable);
allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
newlyAddedVariableIds.value.unshift(updatedVariable.id);
} else {
updatedVariable = await environmentsStore.updateVariable(data as EnvironmentVariable);
updatedVariable = await environmentsStore.updateVariable(variable);
allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
allVariables.value.push(updatedVariable);
toggleEditing(updatedVariable);
@@ -175,11 +187,11 @@ function toggleEditing(data: EnvironmentVariable) {
};
}
function cancelEditing(data: EnvironmentVariable | TemporaryEnvironmentVariable) {
function cancelEditing(data: EnvironmentVariable) {
if (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
} else {
toggleEditing(data as EnvironmentVariable);
toggleEditing(data);
}
}
@@ -209,8 +221,8 @@ function goToUpgrade() {
void uiStore.goToUpgrade('variables', 'upgrade-variables');
}
function displayName(resource: EnvironmentVariable) {
return resource.key;
function displayName(resource: IResource) {
return resource.name;
}
onBeforeMount(() => {
@@ -234,7 +246,7 @@ onBeforeUnmount(() => {
class="variables-view"
resource-key="variables"
:disabled="!isFeatureEnabled"
:resources="allVariables"
:resources="variablesToResources"
:initialize="initialize"
:shareable="false"
:display-name="displayName"
@@ -277,11 +289,17 @@ onBeforeUnmount(() => {
class="mb-m"
data-test-id="unavailable-resources-list"
emoji="👋"
:heading="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)"
:description="
$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)
:heading="
$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title as BaseTextKey)
"
:description="
$locale.baseText(
contextBasedTranslationKeys.variables.unavailable.description as BaseTextKey,
)
"
:button-text="
$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button as BaseTextKey)
"
:button-text="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)"
button-type="secondary"
@click:button="goToUpgrade"
/>
@@ -291,11 +309,17 @@ onBeforeUnmount(() => {
v-if="!isFeatureEnabled"
data-test-id="unavailable-resources-list"
emoji="👋"
:heading="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)"
:description="
$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)
:heading="
$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title as BaseTextKey)
"
:description="
$locale.baseText(
contextBasedTranslationKeys.variables.unavailable.description as BaseTextKey,
)
"
:button-text="
$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button as BaseTextKey)
"
:button-text="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)"
button-type="secondary"
@click:button="goToUpgrade"
/>
@@ -305,7 +329,7 @@ onBeforeUnmount(() => {
emoji="👋"
:heading="
$locale.baseText('variables.empty.notAllowedToCreate.heading', {
interpolate: { name: usersStore.currentUser.firstName },
interpolate: { name: usersStore.currentUser?.firstName ?? '' },
})
"
:description="$locale.baseText('variables.empty.notAllowedToCreate.description')"