Skip to content

Commit

Permalink
fix(editor): Simplifying DOM by removing elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@cstuncsik
cstuncsik committed Sep 23, 2024
1 parent 2be8a72 commit 6318166
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 45 deletions.
43 changes: 41 additions & 2 deletions packages/editor-ui/src/components/SourceControlPushModal.ee.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ describe('SourceControlPushModal', () => {

vi.spyOn(route, 'fullPath', 'get').mockReturnValue('/home/workflows');

const { getAllByTestId } = renderModal({
const { getByTestId, getAllByTestId } = renderModal({
pinia: createTestingPinia(),
props: {
data: {
Expand All @@ -92,7 +92,7 @@ describe('SourceControlPushModal', () => {
},
});

const files = getAllByTestId('source-control-push-modal-file');
const files = getAllByTestId('source-control-push-modal-file-checkbox');
expect(files).toHaveLength(2);

await userEvent.click(files[0]);
Expand All @@ -101,11 +101,50 @@ describe('SourceControlPushModal', () => {

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();
});
});
98 changes: 55 additions & 43 deletions packages/editor-ui/src/components/SourceControlPushModal.ee.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,63 +262,66 @@ function getStatusText(file: SourceControlAggregatedFile): string {
<div :class="$style.container">
<div v-if="files.length > 0">
<div v-if="workflowFiles.length > 0">
<n8n-text>
<n8n-text tag="div" class="mb-l">
{{ i18n.baseText('settings.sourceControl.modals.push.description') }}
<n8n-link :to="i18n.baseText('settings.sourceControl.docs.using.pushPull.url')">
{{ i18n.baseText('settings.sourceControl.modals.push.description.learnMore') }}
</n8n-link>
</n8n-text>

<div class="mt-l mb-2xs">
<n8n-checkbox
:indeterminate="selectAllIndeterminate"
:model-value="selectAll"
@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>
<label
<n8n-checkbox
:class="$style.selectAll"
:indeterminate="selectAllIndeterminate"
:model-value="selectAll"
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>

<n8n-checkbox
v-for="file in sortedFiles"
v-show="!defaultStagedFileTypes.includes(file.type)"
:key="file.file"
:for="file.name"
:class="$style.listItem"
data-test-id="source-control-push-modal-file"
:class="[
'scopedListItem',
$style.listItem,
{ [$style.hiddenListItem]: defaultStagedFileTypes.includes(file.type) },
]"
data-test-id="source-control-push-modal-file-checkbox"
:model-value="staged[file.file]"
@update:model-value="setStagedStatus(file, !staged[file.file])"
>
<n8n-checkbox
:id="file.name"
:model-value="staged[file.file]"
:class="$style.listItemCheckbox"
@update:model-value="setStagedStatus(file, !staged[file.file])"
/>
<div>
<span>
<n8n-text v-if="file.status === 'deleted'" color="text-light">
<span v-if="file.type === 'workflow'"> Deleted Workflow: </span>
<span v-if="file.type === 'credential'"> Deleted Credential: </span>
<strong>{{ file.name || file.id }}</strong>
</n8n-text>
<n8n-text v-else bold> {{ file.name }} </n8n-text>
<div v-if="file.updatedAt">
<n8n-text color="text-light" size="small">
{{ renderUpdatedAt(file) }}
</n8n-text>
</div>
</div>
<div :class="$style.listItemStatus">
<n8n-text
v-if="file.updatedAt"
tag="p"
class="mt-0"
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>
</div>
</label>
</span>
</n8n-checkbox>
</div>
<n8n-notice v-else class="mt-0">
<i18n-t keypath="settings.sourceControl.modals.push.noWorkflowChanges">
Expand Down Expand Up @@ -398,16 +401,16 @@ function getStatusText(file: SourceControlAggregatedFile): string {
&:last-child {
margin-bottom: 0;
}
}
.listItemCheckbox {
display: inline-flex !important;
margin-bottom: 0 !important;
margin-right: var(--spacing-2xs) !important;
&.hiddenListItem {
display: none !important;
}
}
.listItemStatus {
margin-left: auto;
.selectAll {
float: left;
clear: both;
margin: 0 0 var(--spacing-2xs);
}
.footer {
Expand All @@ -416,3 +419,12 @@ function getStatusText(file: SourceControlAggregatedFile): string {
justify-content: flex-end;
}
</style>

<style scoped lang="scss">
.scopedListItem :deep(.el-checkbox__label) {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
</style>

0 comments on commit 6318166

Please sign in to comment.