fix(editor): Fix source control push modal checkboxes (#10910)

This commit is contained in:
Csaba Tuncsik 2024-09-24 11:40:28 +02:00 committed by GitHub
parent 73daabbd0e
commit 8db8817851
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 227 additions and 70 deletions

View file

@ -0,0 +1,150 @@
import { within } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';
import { useRoute } from 'vue-router';
import { createComponentRenderer } from '@/__tests__/render';
import SourceControlPushModal from '@/components/SourceControlPushModal.ee.vue';
import { createTestingPinia } from '@pinia/testing';
import { createEventBus } from 'n8n-design-system';
import type { SourceControlAggregatedFile } from '@/Interface';
const eventBus = createEventBus();
vi.mock('vue-router', () => ({
useRoute: vi.fn().mockReturnValue({
params: vi.fn(),
fullPath: vi.fn(),
}),
RouterLink: vi.fn(),
}));
let route: ReturnType<typeof useRoute>;
const renderModal = createComponentRenderer(SourceControlPushModal, {
global: {
stubs: {
Modal: {
template: `
<div>
<slot name="header" />
<slot name="title" />
<slot name="content" />
<slot name="footer" />
</div>
`,
},
},
},
});
describe('SourceControlPushModal', () => {
beforeEach(() => {
route = useRoute();
});
it('mounts', () => {
vi.spyOn(route, 'fullPath', 'get').mockReturnValue('');
const { getByTitle } = renderModal({
pinia: createTestingPinia(),
props: {
data: {
eventBus,
status: [],
},
},
});
expect(getByTitle('Commit and push changes')).toBeInTheDocument();
});
it('should toggle checkboxes', async () => {
const status: SourceControlAggregatedFile[] = [
{
id: 'gTbbBkkYTnNyX1jD',
name: 'My workflow 1',
type: 'workflow',
status: 'created',
location: 'local',
conflict: false,
file: '/home/user/.n8n/git/workflows/gTbbBkkYTnNyX1jD.json',
updatedAt: '2024-09-20T10:31:40.000Z',
},
{
id: 'JIGKevgZagmJAnM6',
name: 'My workflow 2',
type: 'workflow',
status: 'created',
location: 'local',
conflict: false,
file: '/home/user/.n8n/git/workflows/JIGKevgZagmJAnM6.json',
updatedAt: '2024-09-20T14:42:51.968Z',
},
];
vi.spyOn(route, 'fullPath', 'get').mockReturnValue('/home/workflows');
const { getByTestId, getAllByTestId } = renderModal({
pinia: createTestingPinia(),
props: {
data: {
eventBus,
status,
},
},
});
const files = getAllByTestId('source-control-push-modal-file-checkbox');
expect(files).toHaveLength(2);
await userEvent.click(files[0]);
expect(within(files[0]).getByRole('checkbox')).toBeChecked();
expect(within(files[1]).getByRole('checkbox')).not.toBeChecked();
await userEvent.click(within(files[0]).getByRole('checkbox'));
expect(within(files[0]).getByRole('checkbox')).not.toBeChecked();
expect(within(files[1]).getByRole('checkbox')).not.toBeChecked();
await userEvent.click(within(files[1]).getByRole('checkbox'));
expect(within(files[0]).getByRole('checkbox')).not.toBeChecked();
expect(within(files[1]).getByRole('checkbox')).toBeChecked();
await userEvent.click(files[1]);
expect(within(files[0]).getByRole('checkbox')).not.toBeChecked();
expect(within(files[1]).getByRole('checkbox')).not.toBeChecked();
await userEvent.click(within(files[0]).getByText('My workflow 2'));
expect(within(files[0]).getByRole('checkbox')).toBeChecked();
expect(within(files[1]).getByRole('checkbox')).not.toBeChecked();
await userEvent.click(within(files[1]).getByText('My workflow 1'));
expect(within(files[0]).getByRole('checkbox')).toBeChecked();
expect(within(files[1]).getByRole('checkbox')).toBeChecked();
await userEvent.click(within(files[1]).getByText('My workflow 1'));
expect(within(files[0]).getByRole('checkbox')).toBeChecked();
expect(within(files[1]).getByRole('checkbox')).not.toBeChecked();
await userEvent.click(getByTestId('source-control-push-modal-toggle-all'));
expect(within(files[0]).getByRole('checkbox')).toBeChecked();
expect(within(files[1]).getByRole('checkbox')).toBeChecked();
await userEvent.click(within(files[0]).getByText('My workflow 2'));
await userEvent.click(within(files[1]).getByText('My workflow 1'));
expect(within(files[0]).getByRole('checkbox')).not.toBeChecked();
expect(within(files[1]).getByRole('checkbox')).not.toBeChecked();
expect(
within(getByTestId('source-control-push-modal-toggle-all')).getByRole('checkbox'),
).not.toBeChecked();
await userEvent.click(within(files[0]).getByText('My workflow 2'));
await userEvent.click(within(files[1]).getByText('My workflow 1'));
expect(within(files[0]).getByRole('checkbox')).toBeChecked();
expect(within(files[1]).getByRole('checkbox')).toBeChecked();
expect(
within(getByTestId('source-control-push-modal-toggle-all')).getByRole('checkbox'),
).toBeChecked();
await userEvent.click(getByTestId('source-control-push-modal-toggle-all'));
expect(within(files[0]).getByRole('checkbox')).not.toBeChecked();
expect(within(files[1]).getByRole('checkbox')).not.toBeChecked();
});
});

View file

@ -262,66 +262,66 @@ function getStatusText(file: SourceControlAggregatedFile): string {
<div :class="$style.container"> <div :class="$style.container">
<div v-if="files.length > 0"> <div v-if="files.length > 0">
<div v-if="workflowFiles.length > 0"> <div v-if="workflowFiles.length > 0">
<n8n-text> <n8n-text tag="div" class="mb-l">
{{ i18n.baseText('settings.sourceControl.modals.push.description') }} {{ i18n.baseText('settings.sourceControl.modals.push.description') }}
<n8n-link :to="i18n.baseText('settings.sourceControl.docs.using.pushPull.url')"> <n8n-link :to="i18n.baseText('settings.sourceControl.docs.using.pushPull.url')">
{{ i18n.baseText('settings.sourceControl.modals.push.description.learnMore') }} {{ i18n.baseText('settings.sourceControl.modals.push.description.learnMore') }}
</n8n-link> </n8n-link>
</n8n-text> </n8n-text>
<div class="mt-l mb-2xs"> <n8n-checkbox
<n8n-checkbox :class="$style.selectAll"
:indeterminate="selectAllIndeterminate" :indeterminate="selectAllIndeterminate"
:model-value="selectAll" :model-value="selectAll"
@update:model-value="onToggleSelectAll" data-test-id="source-control-push-modal-toggle-all"
> @update:model-value="onToggleSelectAll"
<n8n-text bold tag="strong">
{{ i18n.baseText('settings.sourceControl.modals.push.workflowsToCommit') }}
</n8n-text>
<n8n-text v-show="workflowFiles.length > 0" tag="strong">
({{ stagedWorkflowFiles.length }}/{{ workflowFiles.length }})
</n8n-text>
</n8n-checkbox>
</div>
<n8n-card
v-for="file in sortedFiles"
v-show="!defaultStagedFileTypes.includes(file.type)"
:key="file.file"
:class="$style.listItem"
@click="setStagedStatus(file, !staged[file.file])"
> >
<div :class="$style.listItemBody"> <n8n-text bold tag="strong">
<n8n-checkbox {{ i18n.baseText('settings.sourceControl.modals.push.workflowsToCommit') }}
:model-value="staged[file.file]" </n8n-text>
:class="$style.listItemCheckbox" <n8n-text v-show="workflowFiles.length > 0" tag="strong">
@update:model-value="setStagedStatus(file, !staged[file.file])" ({{ stagedWorkflowFiles.length }}/{{ workflowFiles.length }})
/> </n8n-text>
<div> </n8n-checkbox>
<n8n-text v-if="file.status === 'deleted'" color="text-light">
<span v-if="file.type === 'workflow'"> Deleted Workflow: </span> <n8n-checkbox
<span v-if="file.type === 'credential'"> Deleted Credential: </span> v-for="file in sortedFiles"
<strong>{{ file.name || file.id }}</strong> :key="file.file"
</n8n-text> :class="[
<n8n-text v-else bold> {{ file.name }} </n8n-text> 'scopedListItem',
<div v-if="file.updatedAt"> $style.listItem,
<n8n-text color="text-light" size="small"> { [$style.hiddenListItem]: defaultStagedFileTypes.includes(file.type) },
{{ renderUpdatedAt(file) }} ]"
</n8n-text> data-test-id="source-control-push-modal-file-checkbox"
</div> :model-value="staged[file.file]"
</div> @update:model-value="setStagedStatus(file, !staged[file.file])"
<div :class="$style.listItemStatus"> >
<n8n-badge <span>
v-if="workflowId === file.id && file.type === 'workflow'" <n8n-text v-if="file.status === 'deleted'" color="text-light">
class="mr-2xs" <span v-if="file.type === 'workflow'"> Deleted Workflow: </span>
> <span v-if="file.type === 'credential'"> Deleted Credential: </span>
Current workflow <strong>{{ file.name || file.id }}</strong>
</n8n-badge> </n8n-text>
<n8n-badge :theme="statusToBadgeThemeMap[file.status] || 'default'"> <n8n-text v-else bold> {{ file.name }} </n8n-text>
{{ getStatusText(file) }} <n8n-text
</n8n-badge> v-if="file.updatedAt"
</div> tag="p"
</div> class="mt-0"
</n8n-card> color="text-light"
size="small"
>
{{ renderUpdatedAt(file) }}
</n8n-text>
</span>
<span>
<n8n-badge v-if="workflowId === file.id && file.type === 'workflow'" class="mr-2xs">
Current workflow
</n8n-badge>
<n8n-badge :theme="statusToBadgeThemeMap[file.status] || 'default'">
{{ getStatusText(file) }}
</n8n-badge>
</span>
</n8n-checkbox>
</div> </div>
<n8n-notice v-else class="mt-0"> <n8n-notice v-else class="mt-0">
<i18n-t keypath="settings.sourceControl.modals.push.noWorkflowChanges"> <i18n-t keypath="settings.sourceControl.modals.push.noWorkflowChanges">
@ -380,11 +380,15 @@ function getStatusText(file: SourceControlAggregatedFile): string {
} }
.listItem { .listItem {
margin-top: var(--spacing-2xs); display: flex;
margin-bottom: var(--spacing-2xs); width: 100%;
align-items: center;
margin: var(--spacing-2xs) 0 var(--spacing-2xs);
padding: var(--spacing-xs);
cursor: pointer; cursor: pointer;
transition: border 0.3s ease; transition: border 0.3s ease;
padding: var(--spacing-xs); border-radius: var(--border-radius-large);
border: var(--border-base);
&:hover { &:hover {
border-color: var(--color-foreground-dark); border-color: var(--color-foreground-dark);
@ -397,22 +401,16 @@ function getStatusText(file: SourceControlAggregatedFile): string {
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&.hiddenListItem {
display: none !important;
}
} }
.listItemBody { .selectAll {
display: flex; float: left;
flex-direction: row; clear: both;
align-items: center; margin: 0 0 var(--spacing-2xs);
}
.listItemCheckbox {
display: inline-flex !important;
margin-bottom: 0 !important;
margin-right: var(--spacing-2xs) !important;
}
.listItemStatus {
margin-left: auto;
} }
.footer { .footer {
@ -421,3 +419,12 @@ function getStatusText(file: SourceControlAggregatedFile): string {
justify-content: flex-end; justify-content: flex-end;
} }
</style> </style>
<style scoped lang="scss">
.scopedListItem :deep(.el-checkbox__label) {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
</style>