fix(dateVariable): fix default value issue in chart filter block (#5405)

* fix(dateVariable): fix default value issue in chart filter block

* test: add e2e test

* chore: update unit test

packages/core/client/src/schema-component/antd/date-picker/util.ts

@@ -217,9 +217,9 @@ export const getDateRanges = (props?: {
 };
 
 function withParams(value: any[], params: { fieldOperator?: string; isParsingVariable?: boolean }) {
-  if (params?.fieldOperator === '$dateBetween' || !params?.isParsingVariable) {
-    return value;
+  if (params?.isParsingVariable && params?.fieldOperator && params.fieldOperator !== '$dateBetween') {
+    return value[0];
   }
 
-  return value[0];
+  return value;
 }

packages/core/client/src/variables/__tests__/useVariables.test.tsx

@@ -298,7 +298,11 @@ describe('useVariables', () => {
     });
 
     await waitFor(async () => {
-      expect(await result.current.parseVariable('{{ $date.today }}').then(({ value }) => typeof value)).toBe('string');
+      expect(
+        await result.current
+          .parseVariable('{{ $date.today }}', [], { fieldOperator: '$dateOn' })
+          .then(({ value }) => typeof value),
+      ).toBe('string');
       expect(
         Array.isArray(
           await result.current

packages/plugins/@nocobase/plugin-data-visualization/src/client/__e2e__/defaultValue.test.ts

@@ -0,0 +1,40 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { expect, test } from '@nocobase/test/e2e';
+
+test.describe('defaultValue', () => {
+  test('date variables', async ({ page, mockPage }) => {
+    await mockPage().goto();
+
+    // 1. First, create a chart filter block and add a custom date field (date range)
+    await page.getByLabel('schema-initializer-Grid-page:').hover();
+    await page.getByRole('menuitem', { name: 'line-chart Charts' }).click();
+    await page.getByLabel('schema-initializer-Grid-charts:addBlock').hover();
+    await page.getByRole('menuitem', { name: 'Filter' }).click();
+    await page.getByTestId('configure-fields-button-of-chart-filter-item').hover();
+    await page.getByRole('menuitem', { name: 'Custom' }).click();
+    await page.getByLabel('block-item-Input-Field title').getByRole('textbox').fill('date');
+    await page.getByLabel('block-item-Select-Field').getByTestId('select-single').click();
+    await page.getByRole('option', { name: 'Date range' }).click();
+    await page.getByRole('button', { name: 'OK' }).click();
+
+    // 2. Set a date variable default value for the custom field, after saving, the date input box should display the default value
+    await page.getByLabel('block-item-DatePicker.').hover();
+    await page.getByLabel('designer-schema-settings-DatePicker.RangePicker-ChartFilterItemDesigner').hover();
+    await page.getByRole('menuitem', { name: 'Set default value' }).click();
+    await page.getByLabel('variable-button').click();
+    await page.getByRole('menuitemcheckbox', { name: 'Date variables right' }).click();
+    await page.getByRole('menuitemcheckbox', { name: 'Last week' }).click();
+    await page.getByRole('button', { name: 'OK' }).click();
+
+    await expect(page.getByPlaceholder('Start date')).toHaveValue(/[0-9]{4}-[0-9]{2}-[0-9]{2}/);
+    await expect(page.getByPlaceholder('End date')).toHaveValue(/[0-9]{4}-[0-9]{2}-[0-9]{2}/);
+  });
+});