@nocobase/client-v2 2.2.0-beta.3 → 2.2.0-beta.6

package/src/flow/models/fields/__tests__/SelectFieldModel.test.tsx

@@ -0,0 +1,43 @@
+/**
+ * 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 React from 'react';
+import { describe, expect, it } from 'vitest';
+import { SelectFieldModel } from '../SelectFieldModel';
+
+function mockT(text: string) {
+  if (text === '{{t("Yes")}}') return '是';
+  if (text === '{{t("No")}}') return '否';
+  return text;
+}
+
+describe('SelectFieldModel', () => {
+  it('translates enum fallback labels for selected values', () => {
+    const model = {
+      props: {
+        value: true,
+      },
+      context: {
+        collectionField: {
+          uiSchema: {
+            enum: [
+              { label: '{{t("Yes")}}', value: true },
+              { label: '{{t("No")}}', value: false },
+            ],
+          },
+        },
+      },
+      translate: mockT,
+    } as unknown as SelectFieldModel;
+
+    const element = SelectFieldModel.prototype.render.call(model) as React.ReactElement;
+
+    expect(element.props.value).toEqual({ label: '是', value: true });
+  });
+});

package/src/flow/models/topbar/TopbarActionModel.tsx

@@ -14,8 +14,9 @@ import { Button, Dropdown, theme, Tooltip, type ButtonProps, type MenuProps } fr
 import React, { useEffect, useMemo, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useACLRoleContext } from '../../../acl';
+import type { BaseApplication } from '../../../BaseApplication';
 import type { PluginSettingsPageType } from '../../../PluginSettingsManager';
 import { useApp } from '../../../hooks/useApp';
 import {
@@ -64,6 +65,89 @@ const topbarActionTriggerClassName = css`
   height: 100%;
 `;
 
+type TopbarSettingsAppLike = Pick<BaseApplication<any>, 'router' | 'getPublicPath'>;
+
+const normalizeTopbarPath = (pathname?: string) => {
+  const trimmed = pathname?.trim();
+  if (!trimmed || trimmed === '/') {
+    return '/';
+  }
+  return `/${trimmed.replace(/^\/+/, '')}`;
+};
+
+const normalizeTopbarBasePath = (pathname?: string) => {
+  const normalized = normalizeTopbarPath(pathname).replace(/\/+$/, '');
+  return normalized === '' || normalized === '/' ? '' : normalized;
+};
+
+const getTopbarRouterBasePath = (app: TopbarSettingsAppLike | undefined) => {
+  return app?.router?.getBasename?.() || app?.router?.basename || app?.getPublicPath?.() || '';
+};
+
+const stripTopbarRouterBasePath = (pathname: string, basename?: string) => {
+  const normalizedPath = normalizeTopbarPath(pathname);
+  const normalizedBase = normalizeTopbarBasePath(basename);
+
+  if (!normalizedBase) {
+    return normalizedPath;
+  }
+
+  if (normalizedPath === normalizedBase) {
+    return '/';
+  }
+
+  if (normalizedPath.startsWith(`${normalizedBase}/`)) {
+    return normalizeTopbarPath(normalizedPath.slice(normalizedBase.length));
+  }
+
+  return normalizedPath;
+};
+
+const isAdminRuntimePath = (pathname: string) => {
+  return pathname === '/admin' || pathname.startsWith('/admin/');
+};
+
+const buildTopbarDocumentHref = (targetPath: string, basename?: string) => {
+  const normalizedTarget = normalizeTopbarPath(targetPath);
+  const normalizedBase = normalizeTopbarBasePath(basename);
+
+  if (!normalizedBase || normalizedTarget === normalizedBase || normalizedTarget.startsWith(`${normalizedBase}/`)) {
+    return normalizedTarget;
+  }
+
+  return `${normalizedBase}${normalizedTarget}`;
+};
+
+function TopbarExternalSettingsLabel(props: { title: React.ReactNode; link: string }) {
+  return (
+    <div
+      onClick={() => {
+        window.open(props.link, '_blank', 'noopener,noreferrer');
+      }}
+    >
+      {props.title}
+    </div>
+  );
+}
+
+function TopbarInternalSettingsLabel(props: { title: React.ReactNode; path?: string }) {
+  const app = useApp();
+  const location = useLocation();
+  const targetPath = props.path || '/admin/settings';
+  const basename = getTopbarRouterBasePath(app);
+  const currentPath = stripTopbarRouterBasePath(location.pathname, basename);
+
+  if (isAdminRuntimePath(currentPath)) {
+    return <Link to={targetPath}>{props.title}</Link>;
+  }
+
+  return (
+    <a href={buildTopbarDocumentHref(targetPath, basename)} target="_blank" rel="noopener noreferrer">
+      {props.title}
+    </a>
+  );
+}
+
 /**
  * 将 settings 顶部菜单转换成右上角 dropdown items。
  *
@@ -112,15 +196,9 @@ export function getTopbarPluginSettingsItems(options: {
       title: targetTitle,
       icon: item.icon,
       label: targetLink ? (
-        <div
-          onClick={() => {
-            window.open(targetLink, '_blank', 'noopener,noreferrer');
-          }}
-        >
-          {targetTitle}
-        </div>
+        <TopbarExternalSettingsLabel title={targetTitle} link={targetLink} />
       ) : (
-        <Link to={targetPath || '/admin/settings'}>{targetTitle}</Link>
+        <TopbarInternalSettingsLabel title={targetTitle} path={targetPath} />
       ),
     };
   });
@@ -131,7 +209,12 @@ export function getTopbarPluginSettingsItems(options: {
     items.push({
       key: pluginManagerSetting.key,
       icon: pluginManagerSetting.icon || <ApiOutlined />,
-      label: <Link to={pluginManagerSetting.path}>{pluginManagerSetting.title || t('Plugin manager')}</Link>,
+      label: (
+        <TopbarInternalSettingsLabel
+          title={pluginManagerSetting.title || t('Plugin manager')}
+          path={pluginManagerSetting.path}
+        />
+      ),
     });
   }
 

package/src/flow/utils/__tests__/dateTimeFormat.test.ts

@@ -48,6 +48,264 @@ describe('dateTimeFormat', () => {
     });
   });
 
+  it('uses the association title field when deciding the format schema', () => {
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsTime',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsTime'
+                  ? {
+                      type: 'time',
+                      interface: 'time',
+                    }
+                  : null,
+            },
+          },
+        },
+      },
+    };
+
+    expect(Object.keys(dateTimeFormat.uiSchema(ctx))).toEqual(['timeFormat']);
+  });
+
+  it('saves association title time field format as a time format', () => {
+    const setProps = vi.fn();
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsTime',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsTime'
+                  ? {
+                      type: 'time',
+                      interface: 'time',
+                    }
+                  : null,
+            },
+          },
+        },
+        setProps,
+      },
+    };
+
+    dateTimeFormat.handler(ctx, { timeFormat: 'hh:mm:ss a' });
+
+    expect(setProps).toHaveBeenCalledWith({
+      timeFormat: 'hh:mm:ss a',
+      format: 'hh:mm:ss a',
+    });
+  });
+
+  it('applies and persists date time format params when settings are saved', async () => {
+    const setProps = vi.fn();
+    const save = vi.fn();
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsDatetime',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsDatetime'
+                  ? {
+                      type: 'datetime',
+                      interface: 'datetime',
+                    }
+                  : null,
+            },
+          },
+        },
+        setProps,
+        save,
+      },
+    };
+
+    await dateTimeFormat.beforeParamsSave(ctx, {
+      picker: 'date',
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'hh:mm:ss a',
+    });
+
+    expect(setProps).toHaveBeenCalledWith({
+      picker: 'date',
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'hh:mm:ss a',
+      format: 'YYYY-MM-DD hh:mm:ss a',
+    });
+    expect(save).toHaveBeenCalled();
+  });
+
+  it('syncs table association column props when title date time format settings are saved', async () => {
+    const setProps = vi.fn();
+    const save = vi.fn();
+    const setParentProps = vi.fn();
+    const model = {
+      props: {
+        titleField: 'shipmentsDatetime',
+      },
+      context: {
+        collectionField: {
+          type: 'belongsTo',
+          targetCollection: {
+            getField: (name) =>
+              name === 'shipmentsDatetime'
+                ? {
+                    type: 'datetime',
+                    interface: 'datetime',
+                  }
+                : null,
+          },
+        },
+      },
+      setProps,
+      save,
+      parent: {
+        use: 'TableColumnModel',
+        collectionField: {
+          isAssociationField: () => true,
+        },
+        setProps: setParentProps,
+      },
+    };
+    model.parent['subModels'] = {
+      field: model,
+    };
+
+    await dateTimeFormat.beforeParamsSave(
+      { model },
+      {
+        picker: 'date',
+        dateFormat: 'YYYY-MM-DD',
+        showTime: true,
+        timeFormat: 'hh:mm:ss a',
+      },
+    );
+
+    expect(setParentProps).toHaveBeenCalledWith({
+      picker: 'date',
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'hh:mm:ss a',
+      format: 'YYYY-MM-DD hh:mm:ss a',
+    });
+    expect(save).toHaveBeenCalled();
+  });
+
+  it('hides time format for association title date-only fields', () => {
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsDateOnly',
+          showTime: true,
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsDateOnly'
+                  ? {
+                      type: 'dateOnly',
+                      interface: 'date',
+                      getComponentProps: () => ({
+                        dateOnly: true,
+                        showTime: false,
+                      }),
+                    }
+                  : null,
+            },
+          },
+        },
+      },
+    };
+    const schema = dateTimeFormat.uiSchema(ctx);
+    const timeFormatField: any = schema.timeFormat;
+    const showTimeField: any = schema.showTime;
+    const timeFormatState = {
+      hidden: false,
+      form: {
+        values: {
+          picker: 'date',
+          showTime: true,
+        },
+      },
+    };
+    const showTimeState = {
+      hidden: false,
+      value: true,
+      form: {
+        values: {
+          picker: 'date',
+        },
+      },
+    };
+
+    timeFormatField['x-reactions'][0](timeFormatState);
+    showTimeField['x-reactions'][1](showTimeState);
+
+    expect(timeFormatState.hidden).toBe(true);
+    expect(showTimeState.hidden).toBe(true);
+    expect(showTimeState.value).toBe(false);
+    expect(dateTimeFormat.defaultParams(ctx)).toMatchObject({
+      showTime: false,
+    });
+  });
+
+  it('saves association title date-only field format without time even when params contain showTime', () => {
+    const setProps = vi.fn();
+    const ctx = {
+      model: {
+        props: {
+          titleField: 'shipmentsDateOnly',
+        },
+        context: {
+          collectionField: {
+            type: 'belongsTo',
+            targetCollection: {
+              getField: (name) =>
+                name === 'shipmentsDateOnly'
+                  ? {
+                      type: 'dateOnly',
+                      interface: 'date',
+                    }
+                  : null,
+            },
+          },
+        },
+        setProps,
+      },
+    };
+
+    dateTimeFormat.handler(ctx, {
+      dateFormat: 'YYYY-MM-DD',
+      showTime: true,
+      timeFormat: 'HH:mm:ss',
+    });
+
+    expect(setProps).toHaveBeenCalledWith({
+      dateFormat: 'YYYY-MM-DD',
+      showTime: false,
+      timeFormat: 'HH:mm:ss',
+      format: 'YYYY-MM-DD',
+    });
+  });
+
   it('uses format as the default time format when timeFormat is missing', () => {
     const ctx = {
       model: {

package/src/flow/utils/dateTimeDisplayProps.ts

@@ -0,0 +1,135 @@
+/**
+ * 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 type { FlowModelContext } from '@nocobase/flow-engine';
+
+type DateTimeDisplayProps = {
+  dateOnly?: boolean;
+  dateFormat?: string;
+  format?: string;
+  picker?: string;
+  showTime?: boolean;
+  timeFormat?: string;
+};
+
+type DateTimeCollectionField = {
+  type?: string;
+  interface?: string;
+  getComponentProps?: () => DateTimeDisplayProps;
+  targetCollection?: {
+    getField?: (name?: string) => DateTimeCollectionField | undefined;
+  };
+};
+
+type DateTimeModelContext = FlowModelContext & {
+  collectionField?: DateTimeCollectionField;
+};
+
+type DateTimeModel = {
+  props?: DateTimeDisplayProps & {
+    titleField?: string;
+  };
+  context?: DateTimeModelContext;
+  getStepParams?: (flowKey: string, stepKey: string) => DateTimeDisplayProps | undefined;
+};
+
+type ResolveDateTimeDisplayPropsOptions = {
+  model?: DateTimeModel;
+  collectionField?: DateTimeCollectionField;
+  titleField?: string;
+  currentProps?: DateTimeDisplayProps;
+  params?: DateTimeDisplayProps;
+  withDefaults?: boolean;
+};
+
+const dateTimeDisplayPropKeys: Array<keyof DateTimeDisplayProps> = [
+  'dateOnly',
+  'dateFormat',
+  'format',
+  'picker',
+  'showTime',
+  'timeFormat',
+];
+
+const pickDateTimeDisplayProps = (source?: DateTimeDisplayProps) => {
+  if (!source) {
+    return {};
+  }
+
+  const result: DateTimeDisplayProps = {};
+  for (const key of dateTimeDisplayPropKeys) {
+    if (key === 'dateOnly' || key === 'showTime') {
+      if (typeof source[key] !== 'undefined') {
+        result[key] = source[key];
+      }
+    } else if (typeof source[key] !== 'undefined') {
+      result[key] = source[key];
+    }
+  }
+  return result;
+};
+
+const stripUndefined = (props: DateTimeDisplayProps) =>
+  Object.fromEntries(Object.entries(props).filter(([, value]) => typeof value !== 'undefined')) as DateTimeDisplayProps;
+
+const getModelCollectionField = (model?: DateTimeModel) => model?.context?.collectionField;
+
+export const getDateTimeFormatCollectionField = (options: ResolveDateTimeDisplayPropsOptions) => {
+  const collectionField = options.collectionField || getModelCollectionField(options.model);
+  const titleField = options.titleField || options.model?.props?.titleField;
+  return collectionField?.targetCollection?.getField?.(titleField) || collectionField;
+};
+
+export const isTimeCollectionField = (collectionField?: DateTimeCollectionField) =>
+  collectionField?.type === 'time' || collectionField?.interface === 'time';
+
+export const isDateOnlyCollectionField = (collectionField?: DateTimeCollectionField) =>
+  collectionField?.type === 'dateOnly' || collectionField?.interface === 'dateOnly';
+
+export const getSavedDateTimeFormatParams = (model?: DateTimeModel) =>
+  model?.getStepParams?.('datetimeSettings', 'dateFormat') || model?.getStepParams?.('timeSettings', 'dateFormat');
+
+export const resolveDateTimeDisplayProps = (options: ResolveDateTimeDisplayPropsOptions) => {
+  const collectionField = options.collectionField || getModelCollectionField(options.model);
+  const targetCollectionField = getDateTimeFormatCollectionField(options);
+  const mergedProps = {
+    ...pickDateTimeDisplayProps(collectionField?.getComponentProps?.()),
+    ...pickDateTimeDisplayProps(
+      targetCollectionField !== collectionField ? targetCollectionField?.getComponentProps?.() : undefined,
+    ),
+    ...pickDateTimeDisplayProps(options.currentProps || options.model?.props),
+    ...pickDateTimeDisplayProps(getSavedDateTimeFormatParams(options.model)),
+    ...pickDateTimeDisplayProps(options.params),
+  };
+
+  if (isTimeCollectionField(targetCollectionField)) {
+    const timeFormat = mergedProps.timeFormat || mergedProps.format || 'HH:mm:ss';
+    return stripUndefined({
+      ...mergedProps,
+      timeFormat,
+      format: timeFormat,
+    });
+  }
+
+  const picker = mergedProps.picker || (options.withDefaults ? 'date' : undefined);
+  const dateFormat = mergedProps.dateFormat || (options.withDefaults ? 'YYYY-MM-DD' : undefined);
+  const timeFormat = mergedProps.timeFormat || (options.withDefaults ? 'HH:mm:ss' : undefined);
+  const showTime = isDateOnlyCollectionField(targetCollectionField) ? false : mergedProps.showTime;
+  const finalDateFormat = dateFormat || 'YYYY-MM-DD';
+  const finalTimeFormat = timeFormat || 'HH:mm:ss';
+
+  return stripUndefined({
+    ...mergedProps,
+    picker,
+    dateFormat,
+    timeFormat,
+    showTime,
+    format: showTime ? `${finalDateFormat} ${finalTimeFormat}` : finalDateFormat,
+  });
+};