From 4bc9164032852426511ab5567e7b179e5afc1ebf Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Wed, 4 Oct 2023 16:45:18 +0200 Subject: [PATCH] feat(editor): Workflow history [WIP]- Add workflow history opening button to main header component (no-changelog) (#7310) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Iván Ovejero --- packages/editor-ui/src/__tests__/utils.ts | 13 ++ .../components/MainHeader/WorkflowDetails.vue | 27 +++- .../WorkflowHistoryContent.vue | 5 + .../WorkflowHistory/WorkflowHistoryList.vue | 68 +++++----- .../WorkflowHistoryListItem.vue | 16 ++- .../__tests__/WorkflowHistoryList.test.ts | 65 ++++++++-- .../__tests__/WorkflowHistoryListItem.test.ts | 12 +- .../src/plugins/i18n/locales/en.json | 3 +- packages/editor-ui/src/plugins/icons/index.ts | 2 + packages/editor-ui/src/router.ts | 1 - .../utils/workflowHistoryTestUtils.ts | 17 +++ .../__tests__/workflowHistory.store.test.ts | 57 +++++++++ .../src/stores/workflowHistory.store.ts | 19 ++- .../editor-ui/src/views/WorkflowHistory.vue | 121 +++++++++++++----- .../views/__tests__/WorkflowHistory.test.ts | 21 +-- 15 files changed, 334 insertions(+), 113 deletions(-) create mode 100644 packages/editor-ui/src/stores/__tests__/utils/workflowHistoryTestUtils.ts create mode 100644 packages/editor-ui/src/stores/__tests__/workflowHistory.store.test.ts diff --git a/packages/editor-ui/src/__tests__/utils.ts b/packages/editor-ui/src/__tests__/utils.ts index 47f5a0dd00..836b5608fb 100644 --- a/packages/editor-ui/src/__tests__/utils.ts +++ b/packages/editor-ui/src/__tests__/utils.ts @@ -91,6 +91,19 @@ export const SETTINGS_STORE_DEFAULT_STATE: ISettingsState = { variables: { limit: 100, }, + expressions: { + evaluator: 'tournament', + }, + banners: { + dismissed: [], + }, + ai: { + enabled: false, + }, + workflowHistory: { + pruneTime: -1, + licensePruneTime: -1, + }, }, promptsData: { message: '', diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue index 8c046dbd1c..f746cd62c7 100644 --- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue +++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue @@ -101,6 +101,13 @@ data-test-id="workflow-save-button" @click="onSaveButtonClick" /> + + +
diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue index c577445789..0f8e594552 100644 --- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue +++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryContent.vue @@ -14,6 +14,11 @@ const props = defineProps<{ diff --git a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue index ca2793dc39..d49472831c 100644 --- a/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue +++ b/packages/editor-ui/src/components/WorkflowHistory/WorkflowHistoryList.vue @@ -10,21 +10,17 @@ import type { } from '@/types/workflowHistory'; import WorkflowHistoryListItem from '@/components/WorkflowHistory/WorkflowHistoryListItem.vue'; -const props = withDefaults( - defineProps<{ - items: WorkflowHistory[]; - activeItem: WorkflowHistory | null; - actionTypes: WorkflowHistoryActionTypes; - requestNumberOfItems: number; - shouldUpgrade: boolean; - maxRetentionPeriod: number; - }>(), - { - items: () => [], - shouldUpgrade: false, - maxRetentionPeriod: 0, - }, -); +const props = defineProps<{ + items: WorkflowHistory[]; + activeItem: WorkflowHistory | null; + actionTypes: WorkflowHistoryActionTypes; + requestNumberOfItems: number; + lastReceivedItemsLength: number; + evaluatedPruneTime: number; + shouldUpgrade?: boolean; + isListLoading?: boolean; +}>(); + const emit = defineEmits<{ ( event: 'action', @@ -98,7 +94,10 @@ const onItemMounted = ({ listElement.value?.scrollTo({ top: offsetTop, behavior: 'smooth' }); } - if (index === props.items.length - 1 && props.items.length >= props.requestNumberOfItems) { + if ( + index === props.items.length - 1 && + props.lastReceivedItemsLength === props.requestNumberOfItems + ) { observeElement(listElement.value?.children[index] as Element); } }; @@ -117,16 +116,28 @@ const onItemMounted = ({ @preview="onPreview" @mounted="onItemMounted" /> -
  • +
  • {{ i18n.baseText('workflowHistory.empty') }}
    {{ i18n.baseText('workflowHistory.hint') }}
    • -
  • +
  • + + + +
    • +
  • {{ i18n.baseText('workflowHistory.limit', { - interpolate: { maxRetentionPeriod: props.maxRetentionPeriod }, + interpolate: { evaluatedPruneTime: props.evaluatedPruneTime }, }) }} @@ -143,19 +154,12 @@ const onItemMounted = ({ diff --git a/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts b/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts index 2ec57fb9fb..35e8b57891 100644 --- a/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts +++ b/packages/editor-ui/src/views/__tests__/WorkflowHistory.test.ts @@ -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);