mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Migrate WorkflowShareModal.ee.vue to composition API (#11605)

Browse source
This commit is contained in:
Ricardo Espinoza 2024-11-07 07:28:27 -05:00 committed by GitHub
parent d25ae8e0d9
commit 81921387ac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 198 additions and 234 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

338
packages/editor-ui/src/components/WorkflowShareModal.ee.vue
View file

@ -1,6 +1,5 @@
<script lang="ts"> <script setup lang="ts">
import { defineComponent } from 'vue'; import { computed, watch, onMounted, ref } from 'vue';
import { mapStores } from 'pinia';
import { createEventBus } from 'n8n-design-system/utils'; import { createEventBus } from 'n8n-design-system/utils';
import Modal from './Modal.vue'; import Modal from './Modal.vue';
@ -8,10 +7,8 @@ import {
EnterpriseEditionFeature, EnterpriseEditionFeature,
MODAL_CONFIRM, MODAL_CONFIRM,
PLACEHOLDER_EMPTY_WORKFLOW_ID, PLACEHOLDER_EMPTY_WORKFLOW_ID,
VIEWS,
WORKFLOW_SHARE_MODAL_KEY, WORKFLOW_SHARE_MODAL_KEY,
} from '@/constants'; } from '@/constants';
import type { IUser, IWorkflowDb } from '@/Interface';
import { getResourcePermissions } from '@/permissions'; import { getResourcePermissions } from '@/permissions';
import { useMessage } from '@/composables/useMessage'; import { useMessage } from '@/composables/useMessage';
import { useToast } from '@/composables/useToast'; import { useToast } from '@/composables/useToast';
@ -23,239 +20,208 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
import { useWorkflowsEEStore } from '@/stores/workflows.ee.store'; import { useWorkflowsEEStore } from '@/stores/workflows.ee.store';
import type { ITelemetryTrackProperties } from 'n8n-workflow'; import type { ITelemetryTrackProperties } from 'n8n-workflow';
import type { BaseTextKey } from '@/plugins/i18n'; import type { BaseTextKey } from '@/plugins/i18n';
import { isNavigationFailure } from 'vue-router';
import ProjectSharing from '@/components/Projects/ProjectSharing.vue'; import ProjectSharing from '@/components/Projects/ProjectSharing.vue';
import { useProjectsStore } from '@/stores/projects.store'; import { useProjectsStore } from '@/stores/projects.store';
import type { ProjectListItem, ProjectSharingData, Project } from '@/types/projects.types'; import type { ProjectSharingData, Project } from '@/types/projects.types';
import { ProjectTypes } from '@/types/projects.types'; import { ProjectTypes } from '@/types/projects.types';
import { useRolesStore } from '@/stores/roles.store'; import { useRolesStore } from '@/stores/roles.store';
import type { RoleMap } from '@/types/roles.types';
import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper'; import { usePageRedirectionHelper } from '@/composables/usePageRedirectionHelper';
import { useI18n } from '@/composables/useI18n';
import { telemetry } from '@/plugins/telemetry';
export default defineComponent({ const props = defineProps<{
name: 'WorkflowShareModal',
components: {
Modal,
ProjectSharing,
},
props: {
data: { data: {
type: Object, id: string;
default: () => ({}),
},
},
setup() {
return {
...useToast(),
...useMessage(),
...usePageRedirectionHelper(),
}; };
}, }>();
data() {
const workflowsStore = useWorkflowsStore();
const workflow =
this.data.id === PLACEHOLDER_EMPTY_WORKFLOW_ID
? workflowsStore.workflow
: workflowsStore.workflowsById[this.data.id];
return { const { data } = props;
WORKFLOW_SHARE_MODAL_KEY,
loading: true, const workflowsStore = useWorkflowsStore();
isDirty: false, const settingsStore = useSettingsStore();
modalBus: createEventBus(), const uiStore = useUIStore();
sharedWithProjects: [...(workflow.sharedWithProjects || [])] as ProjectSharingData[], const usersStore = useUsersStore();
EnterpriseEditionFeature, const workflowsEEStore = useWorkflowsEEStore();
teamProject: null as Project | null, const projectsStore = useProjectsStore();
}; const rolesStore = useRolesStore();
},
computed: { const toast = useToast();
...mapStores( const message = useMessage();
useSettingsStore, const pageRedirectionHelper = usePageRedirectionHelper();
useUIStore, const i18n = useI18n();
useUsersStore,
useWorkflowsStore, const workflow = ref(
useWorkflowsEEStore, data.id === PLACEHOLDER_EMPTY_WORKFLOW_ID
useProjectsStore, ? workflowsStore.workflow
useRolesStore, : workflowsStore.workflowsById[data.id],
), );
isSharingEnabled(): boolean { const loading = ref(true);
return this.settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing]; const isDirty = ref(false);
}, const modalBus = createEventBus();
modalTitle(): string { const sharedWithProjects = ref([
if (this.isHomeTeamProject) { ...(workflow.value.sharedWithProjects ?? []),
return this.$locale.baseText('workflows.shareModal.title.static', { ] as ProjectSharingData[]);
interpolate: { projectName: this.workflow.homeProject?.name ?? '' }, const teamProject = ref(null as Project | null);
const isSharingEnabled = computed(
() => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing],
);
const isHomeTeamProject = computed(() => workflow.value.homeProject?.type === ProjectTypes.Team);
const modalTitle = computed(() => {
if (isHomeTeamProject.value) {
return i18n.baseText('workflows.shareModal.title.static', {
interpolate: { projectName: workflow.value.homeProject?.name ?? '' },
}); });
} }
return this.$locale.baseText( return i18n.baseText(
this.isSharingEnabled isSharingEnabled.value
? (this.uiStore.contextBasedTranslationKeys.workflows.sharing.title as BaseTextKey) ? (uiStore.contextBasedTranslationKeys.workflows.sharing.title as BaseTextKey)
: (this.uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable : (uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.title as BaseTextKey),
.title as BaseTextKey),
{ {
interpolate: { name: this.workflow.name }, interpolate: { name: workflow.value.name },
}, },
); );
}, });
workflow(): IWorkflowDb {
return this.data.id === PLACEHOLDER_EMPTY_WORKFLOW_ID const workflowPermissions = computed(() => getResourcePermissions(workflow.value?.scopes).workflow);
? this.workflowsStore.workflow
: this.workflowsStore.workflowsById[this.data.id]; const workflowOwnerName = computed(() =>
}, workflowsEEStore.getWorkflowOwnerName(`${workflow.value.id}`),
currentUser(): IUser | null { );
return this.usersStore.currentUser;
}, const projects = computed(() =>
workflowPermissions() { projectsStore.personalProjects.filter((project) => project.id !== workflow.value.homeProject?.id),
return getResourcePermissions(this.workflow?.scopes).workflow; );
},
workflowOwnerName(): string { const numberOfMembersInHomeTeamProject = computed(() => teamProject.value?.relations.length ?? 0);
return this.workflowsEEStore.getWorkflowOwnerName(`${this.workflow.id}`);
}, const workflowRoleTranslations = computed(() => ({
projects(): ProjectListItem[] { 'workflow:editor': i18n.baseText('workflows.shareModal.role.editor'),
return this.projectsStore.personalProjects.filter( 'workflow:owner': '',
(project) => project.id !== this.workflow.homeProject?.id, }));
);
}, const workflowRoles = computed(() =>
isHomeTeamProject(): boolean { rolesStore.processedWorkflowRoles.map(({ role, scopes, licensed }) => ({
return this.workflow.homeProject?.type === ProjectTypes.Team;
},
numberOfMembersInHomeTeamProject(): number {
return this.teamProject?.relations.length ?? 0;
},
workflowRoleTranslations(): Record<string, string> {
return {
'workflow:editor': this.$locale.baseText('workflows.shareModal.role.editor'),
};
},
workflowRoles(): RoleMap['workflow'] {
return this.rolesStore.processedWorkflowRoles.map(({ role, scopes, licensed }) => ({
role, role,
name: this.workflowRoleTranslations[role], name: workflowRoleTranslations.value[role],
scopes, scopes,
licensed, licensed,
})); })),
}, );
},
watch: { const trackTelemetry = (eventName: string, data: ITelemetryTrackProperties) => {
sharedWithProjects: { telemetry.track(eventName, {
handler() { workflow_id: workflow.value.id,
this.isDirty = true; ...data,
}, });
deep: true, };
},
}, const onProjectAdded = (project: ProjectSharingData) => {
async mounted() { trackTelemetry('User selected sharee to add', {
await this.initialize(); project_id_sharer: workflow.value.homeProject?.id,
},
methods: {
onProjectAdded(project: ProjectSharingData) {
this.trackTelemetry('User selected sharee to add', {
project_id_sharer: this.workflow.homeProject?.id,
project_id_sharee: project.id, project_id_sharee: project.id,
}); });
}, };
onProjectRemoved(project: ProjectSharingData) {
this.trackTelemetry('User selected sharee to remove', { const onProjectRemoved = (project: ProjectSharingData) => {
project_id_sharer: this.workflow.homeProject?.id, trackTelemetry('User selected sharee to remove', {
project_id_sharer: workflow.value.homeProject?.id,
project_id_sharee: project.id, project_id_sharee: project.id,
}); });
}, };
async onSave() {
if (this.loading) { const onSave = async () => {
if (loading.value) {
return; return;
} }
this.loading = true; loading.value = true;
const saveWorkflowPromise = async () => { const saveWorkflowPromise = async () => {
return await new Promise<string>((resolve) => { return await new Promise<string>((resolve) => {
if (this.workflow.id === PLACEHOLDER_EMPTY_WORKFLOW_ID) { if (workflow.value.id === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
nodeViewEventBus.emit('saveWorkflow', () => { nodeViewEventBus.emit('saveWorkflow', () => {
resolve(this.workflow.id); resolve(workflow.value.id);
}); });
} else { } else {
resolve(this.workflow.id); resolve(workflow.value.id);
} }
}); });
}; };
try { try {
const workflowId = await saveWorkflowPromise(); const workflowId = await saveWorkflowPromise();
await this.workflowsEEStore.saveWorkflowSharedWith({ await workflowsEEStore.saveWorkflowSharedWith({
workflowId, workflowId,
sharedWithProjects: this.sharedWithProjects, sharedWithProjects: sharedWithProjects.value,
}); });
this.showMessage({ toast.showMessage({
title: this.$locale.baseText('workflows.shareModal.onSave.success.title'), title: i18n.baseText('workflows.shareModal.onSave.success.title'),
type: 'success',
}); });
this.isDirty = false; isDirty.value = false;
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('workflows.shareModal.onSave.error.title')); toast.showError(error, i18n.baseText('workflows.shareModal.onSave.error.title'));
} finally { } finally {
this.modalBus.emit('close'); modalBus.emit('close');
this.loading = false; loading.value = false;
} }
}, };
async onCloseModal() {
if (this.isDirty) { const onCloseModal = async () => {
const shouldSave = await this.confirm( if (isDirty.value) {
this.$locale.baseText('workflows.shareModal.saveBeforeClose.message'), const shouldSave = await message.confirm(
this.$locale.baseText('workflows.shareModal.saveBeforeClose.title'), i18n.baseText('workflows.shareModal.saveBeforeClose.message'),
i18n.baseText('workflows.shareModal.saveBeforeClose.title'),
{ {
type: 'warning', type: 'warning',
confirmButtonText: this.$locale.baseText( confirmButtonText: i18n.baseText('workflows.shareModal.saveBeforeClose.confirmButtonText'),
'workflows.shareModal.saveBeforeClose.confirmButtonText', cancelButtonText: i18n.baseText('workflows.shareModal.saveBeforeClose.cancelButtonText'),
),
cancelButtonText: this.$locale.baseText(
'workflows.shareModal.saveBeforeClose.cancelButtonText',
),
}, },
); );
if (shouldSave === MODAL_CONFIRM) { if (shouldSave === MODAL_CONFIRM) {
return await this.onSave(); return await onSave();
} }
} }
return true; return true;
}, };
goToUsersSettings() {
this.$router.push({ name: VIEWS.USERS_SETTINGS }).catch((failure) => {
if (!isNavigationFailure(failure)) {
console.error(failure);
}
});
this.modalBus.emit('close');
},
trackTelemetry(eventName: string, data: ITelemetryTrackProperties) {
this.$telemetry.track(eventName, {
workflow_id: this.workflow.id,
...data,
});
},
goToUpgrade() {
void this.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
},
async initialize() {
if (this.isSharingEnabled) {
await Promise.all([this.usersStore.fetchUsers(), this.projectsStore.getAllProjects()]);
if (this.workflow.id !== PLACEHOLDER_EMPTY_WORKFLOW_ID) { const goToUpgrade = () => {
await this.workflowsStore.fetchWorkflow(this.workflow.id); void pageRedirectionHelper.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
};
const initialize = async () => {
if (isSharingEnabled.value) {
await Promise.all([usersStore.fetchUsers(), projectsStore.getAllProjects()]);
if (workflow.value.id !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
await workflowsStore.fetchWorkflow(workflow.value.id);
} }
if (this.isHomeTeamProject && this.workflow.homeProject) { if (isHomeTeamProject.value && workflow.value.homeProject) {
this.teamProject = await this.projectsStore.fetchProject(this.workflow.homeProject.id); teamProject.value = await projectsStore.fetchProject(workflow.value.homeProject.id);
} }
} }
this.loading = false; loading.value = false;
}, };
},
onMounted(async () => {
await initialize();
}); });
watch(
sharedWithProjects,
() => {
isDirty.value = true;
},
{ deep: true },
);
</script> </script>
<template> <template>
@ -272,7 +238,7 @@ export default defineComponent({
<div v-if="!isSharingEnabled" :class="$style.container"> <div v-if="!isSharingEnabled" :class="$style.container">
<n8n-text> <n8n-text>
{{ {{
$locale.baseText( i18n.baseText(
uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description.modal, uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description.modal,
) )
}} }}
@ -285,7 +251,7 @@ export default defineComponent({
class="mb-s" class="mb-s"
> >
{{ {{
$locale.baseText('workflows.shareModal.info.sharee', { i18n.baseText('workflows.shareModal.info.sharee', {
interpolate: { workflowOwnerName }, interpolate: { workflowOwnerName },
}) })
}} }}
@ -299,7 +265,7 @@ export default defineComponent({
:roles="workflowRoles" :roles="workflowRoles"
:readonly="!workflowPermissions.share" :readonly="!workflowPermissions.share"
:static="isHomeTeamProject || !workflowPermissions.share" :static="isHomeTeamProject || !workflowPermissions.share"
:placeholder="$locale.baseText('workflows.shareModal.select.placeholder')" :placeholder="i18n.baseText('workflows.shareModal.select.placeholder')"
@project-added="onProjectAdded" @project-added="onProjectAdded"
@project-removed="onProjectRemoved" @project-removed="onProjectRemoved"
/> />
@ -311,7 +277,7 @@ export default defineComponent({
<template #members> <template #members>
<strong> <strong>
{{ {{
$locale.baseText('workflows.shareModal.info.members.number', { i18n.baseText('workflows.shareModal.info.members.number', {
interpolate: { interpolate: {
number: String(numberOfMembersInHomeTeamProject), number: String(numberOfMembersInHomeTeamProject),
}, },
@ -344,9 +310,7 @@ export default defineComponent({
<div v-if="!isSharingEnabled" :class="$style.actionButtons"> <div v-if="!isSharingEnabled" :class="$style.actionButtons">
<n8n-button @click="goToUpgrade"> <n8n-button @click="goToUpgrade">
{{ {{
$locale.baseText( i18n.baseText(uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.button)
uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.button,
)
}} }}
</n8n-button> </n8n-button>
</div> </div>
@ -356,10 +320,10 @@ export default defineComponent({
:class="$style.actionButtons" :class="$style.actionButtons"
> >
<n8n-text v-show="isDirty" color="text-light" size="small" class="mr-xs"> <n8n-text v-show="isDirty" color="text-light" size="small" class="mr-xs">
{{ $locale.baseText('workflows.shareModal.changesHint') }} {{ i18n.baseText('workflows.shareModal.changesHint') }}
</n8n-text> </n8n-text>
<n8n-button v-if="isHomeTeamProject" type="secondary" @click="modalBus.emit('close')"> <n8n-button v-if="isHomeTeamProject" type="secondary" @click="modalBus.emit('close')">
{{ $locale.baseText('generic.close') }} {{ i18n.baseText('generic.close') }}
</n8n-button> </n8n-button>
<n8n-button <n8n-button
v-else v-else
@ -369,7 +333,7 @@ export default defineComponent({
data-test-id="workflow-sharing-modal-save-button" data-test-id="workflow-sharing-modal-save-button"
@click="onSave" @click="onSave"
> >
{{ $locale.baseText('workflows.shareModal.save') }} {{ i18n.baseText('workflows.shareModal.save') }}
</n8n-button> </n8n-button>
</enterprise-edition> </enterprise-edition>
</template> </template>