feat(editor): Workflow history [WIP]- Add workflow history opening button to main header component (no-changelog) (#7310)
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
This commit is contained in:
Csaba Tuncsik
GitHub
@@ -1,7 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { saveAs } from 'file-saver';
|
||||
import { onBeforeMount, ref, watchEffect } from 'vue';
|
||||
import { onBeforeMount, onUnmounted, ref, watchEffect, computed } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import type { IWorkflowDb } from '@/Interface';
|
||||
import { VIEWS } from '@/constants';
|
||||
import { useI18n } from '@/composables';
|
||||
import type {
|
||||
@@ -13,6 +14,7 @@ import WorkflowHistoryList from '@/components/WorkflowHistory/WorkflowHistoryLis
|
||||
import WorkflowHistoryContent from '@/components/WorkflowHistory/WorkflowHistoryContent.vue';
|
||||
import { useWorkflowHistoryStore } from '@/stores/workflowHistory.store';
|
||||
import { useUIStore } from '@/stores/ui.store';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
|
||||
type WorkflowHistoryActionRecord = {
|
||||
[K in Uppercase<WorkflowHistoryActionTypes[number]>]: Lowercase<K>;
|
||||
@@ -34,21 +36,47 @@ const router = useRouter();
|
||||
const i18n = useI18n();
|
||||
const workflowHistoryStore = useWorkflowHistoryStore();
|
||||
const uiStore = useUIStore();
|
||||
const workflowsStore = useWorkflowsStore();
|
||||
|
||||
const isListLoading = ref(true);
|
||||
const requestNumberOfItems = ref(20);
|
||||
const lastReceivedItemsLength = ref(0);
|
||||
const editorRoute = computed(() => ({
|
||||
name: VIEWS.WORKFLOW,
|
||||
params: {
|
||||
name: route.params.workflowId,
|
||||
},
|
||||
}));
|
||||
const activeWorkflow = ref<IWorkflowDb | null>(null);
|
||||
const activeWorkflowVersionPreview = computed<IWorkflowDb | null>(() => {
|
||||
if (workflowHistoryStore.activeWorkflowVersion && activeWorkflow.value) {
|
||||
return {
|
||||
...activeWorkflow.value,
|
||||
nodes: workflowHistoryStore.activeWorkflowVersion.nodes,
|
||||
connections: workflowHistoryStore.activeWorkflowVersion.connections,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
const loadMore = async (queryParams: WorkflowHistoryRequestParams) => {
|
||||
const history = await workflowHistoryStore.getWorkflowHistory(
|
||||
route.params.workflowId,
|
||||
queryParams,
|
||||
);
|
||||
lastReceivedItemsLength.value = history.length;
|
||||
workflowHistoryStore.addWorkflowHistory(history);
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await loadMore({ take: requestNumberOfItems.value });
|
||||
const [workflow] = await Promise.all([
|
||||
workflowsStore.fetchWorkflow(route.params.workflowId),
|
||||
loadMore({ take: requestNumberOfItems.value }),
|
||||
]);
|
||||
activeWorkflow.value = workflow;
|
||||
isListLoading.value = false;
|
||||
|
||||
if (!route.params.versionId) {
|
||||
if (!route.params.versionId && workflowHistoryStore.workflowHistory.length) {
|
||||
await router.replace({
|
||||
name: VIEWS.WORKFLOW_HISTORY,
|
||||
params: {
|
||||
@@ -59,6 +87,10 @@ onBeforeMount(async () => {
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
workflowHistoryStore.reset();
|
||||
});
|
||||
|
||||
const openInNewTab = (id: WorkflowVersionId) => {
|
||||
const { href } = router.resolve({
|
||||
name: VIEWS.WORKFLOW_HISTORY,
|
||||
@@ -75,12 +107,20 @@ const downloadVersion = async (id: WorkflowVersionId) => {
|
||||
route.params.workflowId,
|
||||
id,
|
||||
);
|
||||
if (workflowVersion?.workflow) {
|
||||
const { workflow } = workflowVersion;
|
||||
const blob = new Blob([JSON.stringify(workflow, null, 2)], {
|
||||
type: 'application/json;charset=utf-8',
|
||||
});
|
||||
saveAs(blob, workflow.name.replace(/[^a-z0-9]/gi, '_') + '.json');
|
||||
if (workflowVersion?.nodes && workflowVersion?.connections && activeWorkflow.value) {
|
||||
const { connections, nodes } = workflowVersion;
|
||||
const blob = new Blob(
|
||||
[JSON.stringify({ ...activeWorkflow.value, nodes, connections }, null, 2)],
|
||||
{
|
||||
type: 'application/json;charset=utf-8',
|
||||
},
|
||||
);
|
||||
saveAs(
|
||||
blob,
|
||||
`${activeWorkflow.value.name.replace(/[^a-zA-Z0-9]/gi, '_')}-${
|
||||
workflowVersion.versionId
|
||||
}.json`,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -132,35 +172,40 @@ watchEffect(async () => {
|
||||
<template>
|
||||
<div :class="$style.view">
|
||||
<n8n-heading :class="$style.header" tag="h2" size="medium" bold>
|
||||
{{ workflowHistoryStore.activeWorkflowVersion?.workflow?.name }}
|
||||
{{ activeWorkflow?.name }}
|
||||
</n8n-heading>
|
||||
<div :class="$style.corner">
|
||||
<n8n-heading tag="h2" size="medium" bold>
|
||||
{{ i18n.baseText('workflowHistory.title') }}
|
||||
</n8n-heading>
|
||||
<n8n-button type="tertiary" icon="times" size="small" text square />
|
||||
<router-link :to="editorRoute">
|
||||
<n8n-button type="tertiary" icon="times" size="small" text square />
|
||||
</router-link>
|
||||
</div>
|
||||
<div :class="$style.contentComponentWrapper">
|
||||
<workflow-history-content :workflow-version="activeWorkflowVersionPreview" />
|
||||
</div>
|
||||
<div :class="$style.listComponentWrapper">
|
||||
<workflow-history-list
|
||||
:items="workflowHistoryStore.workflowHistory"
|
||||
:lastReceivedItemsLength="lastReceivedItemsLength"
|
||||
:activeItem="workflowHistoryStore.activeWorkflowVersion"
|
||||
:actionTypes="workflowHistoryActionTypes"
|
||||
:requestNumberOfItems="requestNumberOfItems"
|
||||
:shouldUpgrade="workflowHistoryStore.shouldUpgrade"
|
||||
:evaluatedPruneTime="workflowHistoryStore.evaluatedPruneTime"
|
||||
:isListLoading="isListLoading"
|
||||
@action="onAction"
|
||||
@preview="onPreview"
|
||||
@load-more="loadMore"
|
||||
@upgrade="onUpgrade"
|
||||
/>
|
||||
</div>
|
||||
<workflow-history-content
|
||||
:class="$style.contentComponent"
|
||||
:workflow-version="workflowHistoryStore.activeWorkflowVersion"
|
||||
/>
|
||||
<workflow-history-list
|
||||
:class="$style.listComponent"
|
||||
:items="workflowHistoryStore.workflowHistory"
|
||||
:active-item="workflowHistoryStore.activeWorkflowVersion"
|
||||
:action-types="workflowHistoryActionTypes"
|
||||
:request-number-of-items="requestNumberOfItems"
|
||||
:shouldUpgrade="workflowHistoryStore.shouldUpgrade"
|
||||
:maxRetentionPeriod="workflowHistoryStore.maxRetentionPeriod"
|
||||
@action="onAction"
|
||||
@preview="onPreview"
|
||||
@load-more="loadMore"
|
||||
@upgrade="onUpgrade"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<style module lang="scss">
|
||||
.view {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-areas: 'header corner' 'content list';
|
||||
@@ -188,12 +233,26 @@ watchEffect(async () => {
|
||||
border-left: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
|
||||
}
|
||||
|
||||
.contentComponent {
|
||||
.contentComponentWrapper {
|
||||
grid-area: content;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.listComponent {
|
||||
grid-area: list;
|
||||
.listComponentWrapper {
|
||||
grid-area: list;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: var(--border-width-base);
|
||||
background-color: var(--color-foreground-base);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,10 @@ import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
|
||||
import WorkflowHistoryPage from '@/views/WorkflowHistory.vue';
|
||||
import { useWorkflowHistoryStore } from '@/stores/workflowHistory.store';
|
||||
import { STORES, VIEWS } from '@/constants';
|
||||
import type { WorkflowHistory } from '@/types/workflowHistory';
|
||||
import {
|
||||
workflowHistoryDataFactory,
|
||||
workflowVersionDataFactory,
|
||||
} from '@/stores/__tests__/utils/workflowHistoryTestUtils';
|
||||
|
||||
vi.mock('vue-router', () => {
|
||||
const params = {};
|
||||
@@ -29,21 +32,6 @@ vi.mock('vue-router', () => {
|
||||
};
|
||||
});
|
||||
|
||||
const workflowHistoryDataFactory: () => WorkflowHistory = () => ({
|
||||
versionId: faker.string.nanoid(),
|
||||
createdAt: faker.date.past().toDateString(),
|
||||
authors: Array.from({ length: faker.number.int({ min: 2, max: 5 }) }, faker.person.fullName).join(
|
||||
', ',
|
||||
),
|
||||
});
|
||||
|
||||
const workflowVersionDataFactory: () => WorkflowHistory = () => ({
|
||||
...workflowHistoryDataFactory(),
|
||||
workflow: {
|
||||
name: faker.lorem.words(3),
|
||||
},
|
||||
});
|
||||
|
||||
const workflowId = faker.string.nanoid();
|
||||
const historyData = Array.from({ length: 5 }, workflowHistoryDataFactory);
|
||||
const versionData = {
|
||||
@@ -87,6 +75,7 @@ describe('WorkflowHistory', () => {
|
||||
route = useRoute();
|
||||
router = useRouter();
|
||||
|
||||
vi.spyOn(workflowHistoryStore, 'getWorkflowHistory').mockResolvedValue(historyData);
|
||||
vi.spyOn(workflowHistoryStore, 'workflowHistory', 'get').mockReturnValue(historyData);
|
||||
vi.spyOn(workflowHistoryStore, 'activeWorkflowVersion', 'get').mockReturnValue(versionData);
|
||||
windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
|
||||
|
||||
Reference in New Issue
Block a user