diff --git a/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/AddColumnButton.test.ts b/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/AddColumnButton.test.ts index 8c955832e2..f84f1212c6 100644 --- a/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/AddColumnButton.test.ts +++ b/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/AddColumnButton.test.ts @@ -294,7 +294,31 @@ describe('AddColumnButton', () => { expect(getByText('string')).toBeInTheDocument(); expect(getByText('number')).toBeInTheDocument(); expect(getByText('boolean')).toBeInTheDocument(); - expect(getByText('date')).toBeInTheDocument(); + expect(getByText('datetime')).toBeInTheDocument(); + }); + }); + + it('should set value to "date" when selecting "datetime" option', async () => { + const { getByTestId, getByRole, getByText, getByPlaceholderText } = renderComponent(); + const addButton = getByTestId('data-store-add-column-trigger-button'); + + await fireEvent.click(addButton); + + const nameInput = getByPlaceholderText('Enter column name'); + await fireEvent.update(nameInput, 'dateColumn'); + + const selectElement = getByRole('combobox'); + await fireEvent.click(selectElement); + + const dateOption = getByText('datetime'); + await fireEvent.click(dateOption); + + const submitButton = getByTestId('data-store-add-column-submit-button'); + await fireEvent.click(submitButton); + + expect(addColumnHandler).toHaveBeenCalledWith({ + name: 'dateColumn', + type: 'date', }); }); diff --git a/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/AddColumnButton.vue b/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/AddColumnButton.vue index 7bfdc3c0b5..361c0248d1 100644 --- a/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/AddColumnButton.vue +++ b/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/AddColumnButton.vue @@ -5,6 +5,7 @@ import type { DataStoreColumnCreatePayload, DataStoreColumnType, } from '@/features/dataStore/datastore.types'; +import { DATA_STORE_COLUMN_TYPES } from '@/features/dataStore/datastore.types'; import { useI18n } from '@n8n/i18n'; import { useDataStoreTypes } from '@/features/dataStore/composables/useDataStoreTypes'; import { COLUMN_NAME_REGEX, MAX_COLUMN_NAME_LENGTH } from '@/features/dataStore/constants'; @@ -34,7 +35,7 @@ const nameInputRef = ref(null); const columnName = ref(''); const columnType = ref('string'); -const columnTypes: DataStoreColumnType[] = ['string', 'number', 'boolean', 'date']; +const columnTypes: DataStoreColumnType[] = [...DATA_STORE_COLUMN_TYPES]; const error = ref(null); @@ -44,6 +45,15 @@ const isSelectOpen = ref(false); const popoverId = computed(() => props.popoverId ?? 'add-column-popover'); +const columnTypeOptions = computed(() => { + // Renaming 'date' to 'datetime' but only in UI label + // we still want to use 'date' as value so nothing breaks + return columnTypes.map((type) => ({ + label: type === 'date' ? 'datetime' : type, + value: type, + })); +}); + const onAddButtonClicked = async () => { validateName(); if (!columnName.value || !columnType.value || error.value) { @@ -178,10 +188,15 @@ const onInput = debounce(validateName, { debounceTime: 100 }); :append-to="`#${popoverId}`" @visible-change="isSelectOpen = $event" > - +
- - {{ type }} + + {{ option.label }}
diff --git a/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/DataStoreTable.vue b/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/DataStoreTable.vue index 484a788d32..010dbfb95b 100644 --- a/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/DataStoreTable.vue +++ b/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/DataStoreTable.vue @@ -395,5 +395,13 @@ defineExpose({ width: var(--spacing-m); } } + + // A hacky solution for element ui bug where clicking svg inside .more button does not work + :global(.el-pager .more) { + background: transparent !important; + svg { + z-index: -1; + } + } } diff --git a/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/ElDatePickerCellEditor.vue b/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/ElDatePickerCellEditor.vue index 300ab7e0af..609004f4fb 100644 --- a/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/ElDatePickerCellEditor.vue +++ b/packages/frontend/editor-ui/src/features/dataStore/components/dataGrid/ElDatePickerCellEditor.vue @@ -1,26 +1,67 @@