@nocobase/flow-engine 2.2.0-beta.7 → 2.2.0-beta.8

package/src/utils/dirtyAwareApiClient.ts

@@ -0,0 +1,430 @@
+/**
+ * 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 { ActionParams, APIClient, IResource, RequestOptions } from '@nocobase/sdk';
+import type { FlowContext } from '../flowContext';
+import { getDataSourceKeyFromHeaders, markDataSourceDirty } from './dataSourceDirty';
+
+type ResourceActionFn = (params?: ActionParams, opts?: unknown) => Promise<unknown>;
+
+export const SKIP_DATA_SOURCE_DIRTY = '__nocobaseSkipDataSourceDirty';
+
+type ResourceRequestOptions = RequestOptions & {
+  resource?: unknown;
+  resourceOf?: unknown;
+  action?: unknown;
+  headers?: unknown;
+  [SKIP_DATA_SOURCE_DIRTY]?: boolean;
+};
+
+type DirtyResourceAction = {
+  dataSourceKey?: string;
+  resourceName: string;
+  actionName: string;
+};
+
+type ApiUrlProvider = {
+  getApiUrl?: (pathname?: string) => string;
+};
+
+type DirtyAwareAPIClient = APIClient & {
+  resource: APIClient['resource'];
+  request: APIClient['request'];
+};
+
+type APIClientRequestConfig = Parameters<APIClient['request']>[0];
+
+const dirtyAwareApiClientCache = new WeakMap<object, WeakMap<object, APIClient>>();
+const dirtyAwareApiClientProxies = new WeakSet<object>();
+
+const MUTATING_RESOURCE_ACTIONS = [
+  'add',
+  'bulkdestroy',
+  'bulkupdate',
+  'create',
+  'delete',
+  'destroy',
+  'execute',
+  'firstorcreate',
+  'import',
+  'move',
+  'remove',
+  'save',
+  'saveastemplate',
+  'set',
+  'setfields',
+  'submit',
+  'update',
+  'updateorcreate',
+  'upsert',
+];
+
+function isApiClientLike(value: unknown): value is DirtyAwareAPIClient {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  const candidate = value as { resource?: unknown; request?: unknown };
+  return typeof candidate.resource === 'function' && typeof candidate.request === 'function';
+}
+
+function isMutatingResourceAction(actionName: string): boolean {
+  const normalized = String(actionName || '').trim();
+  if (!normalized) {
+    return false;
+  }
+  const baseActionName = normalized.split('/')[0];
+  const lowerBaseActionName = baseActionName.toLowerCase();
+  return MUTATING_RESOURCE_ACTIONS.some((action) => {
+    if (lowerBaseActionName === action) {
+      return true;
+    }
+    if (!lowerBaseActionName.startsWith(action) || baseActionName.length <= action.length) {
+      return false;
+    }
+
+    const nextChar = baseActionName[action.length];
+    return nextChar === '-' || nextChar === '_' || (nextChar >= 'A' && nextChar <= 'Z');
+  });
+}
+
+function getCurrentOrigin(): string | undefined {
+  return typeof window === 'undefined' ? undefined : window.location?.origin;
+}
+
+function parseUrl(value: string, base?: string): URL | undefined {
+  try {
+    return new URL(value, base);
+  } catch {
+    return undefined;
+  }
+}
+
+function stripSearchAndHash(path: string): string {
+  const index = path.search(/[?#]/);
+  return index === -1 ? path : path.slice(0, index);
+}
+
+function stripKnownApiPrefix(path: string): string | undefined {
+  const cleanPath = stripSearchAndHash(path).trim();
+  if (!cleanPath) {
+    return undefined;
+  }
+
+  const normalizedPath = cleanPath.replace(/^\/+/, '');
+  if (!normalizedPath || normalizedPath === 'api') {
+    return undefined;
+  }
+  if (normalizedPath.startsWith('api/')) {
+    return normalizedPath.slice('api/'.length);
+  }
+
+  return normalizedPath;
+}
+
+function normalizePathname(pathname: string) {
+  return pathname.endsWith('/') ? pathname : `${pathname}/`;
+}
+
+function getAppApiUrl(app?: ApiUrlProvider): URL | undefined {
+  if (!app?.getApiUrl) {
+    return undefined;
+  }
+
+  try {
+    return parseUrl(app.getApiUrl(), getCurrentOrigin());
+  } catch {
+    return undefined;
+  }
+}
+
+function stripConfiguredApiPrefix(path: string, apiPathname: string): string | undefined {
+  const cleanPath = stripSearchAndHash(path).trim();
+  if (!cleanPath.startsWith('/')) {
+    return undefined;
+  }
+
+  const apiPath = normalizePathname(apiPathname);
+  const requestPath = normalizePathname(cleanPath);
+  if (!requestPath.startsWith(apiPath)) {
+    return undefined;
+  }
+
+  const apiPathWithoutTrailingSlash = apiPath.replace(/\/$/, '');
+  return cleanPath.slice(apiPathWithoutTrailingSlash.length).replace(/^\/+/, '') || undefined;
+}
+
+function getDirtyResourcePathFromAbsoluteUrl(url: URL, app?: ApiUrlProvider): string | undefined {
+  if (!['http:', 'https:'].includes(url.protocol)) {
+    return undefined;
+  }
+
+  if (app?.getApiUrl) {
+    const apiUrl = getAppApiUrl(app);
+    if (!apiUrl || url.origin !== apiUrl.origin) {
+      return undefined;
+    }
+
+    return stripConfiguredApiPrefix(url.pathname, apiUrl.pathname);
+  }
+
+  const currentOrigin = getCurrentOrigin();
+  if (!currentOrigin || url.origin !== currentOrigin) {
+    return undefined;
+  }
+
+  return stripKnownApiPrefix(url.pathname);
+}
+
+function getDirtyResourcePathFromUrl(url: unknown, context: FlowContext): string | undefined {
+  if (typeof url !== 'string') {
+    return undefined;
+  }
+
+  const trimmedUrl = url.trim();
+  if (!trimmedUrl || trimmedUrl.startsWith('//')) {
+    return undefined;
+  }
+
+  if (/^https?:\/\//i.test(trimmedUrl)) {
+    const parsedUrl = parseUrl(trimmedUrl);
+    if (!parsedUrl) {
+      return undefined;
+    }
+    return getDirtyResourcePathFromAbsoluteUrl(parsedUrl, context.app as ApiUrlProvider | undefined);
+  }
+
+  const appApiUrl = getAppApiUrl(context.app as ApiUrlProvider | undefined);
+  const configuredResourcePath = appApiUrl ? stripConfiguredApiPrefix(trimmedUrl, appApiUrl.pathname) : undefined;
+  if (configuredResourcePath) {
+    return configuredResourcePath;
+  }
+
+  return stripKnownApiPrefix(trimmedUrl);
+}
+
+function decodeResourcePathSegment(segment: string): string {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}
+
+function getDataSourceKeyFromResourceOf(resourceOf: unknown): string | undefined {
+  const dataSourceKey = String(resourceOf ?? '').trim();
+  return dataSourceKey || undefined;
+}
+
+function parseResourceActionFromSegments(segments: string[]): DirtyResourceAction | undefined {
+  const resourceSegments: string[] = [];
+  let actionName: string | undefined;
+  let actionSegmentIndex = -1;
+
+  for (let index = 0; index < segments.length; index += 2) {
+    const segment = segments[index];
+    const actionDelimiterIndex = segment.lastIndexOf(':');
+    const resourceSegment = actionDelimiterIndex === -1 ? segment : segment.slice(0, actionDelimiterIndex);
+    if (!resourceSegment) {
+      return undefined;
+    }
+
+    resourceSegments.push(decodeResourcePathSegment(resourceSegment));
+    if (actionDelimiterIndex !== -1) {
+      actionName = decodeResourcePathSegment(segment.slice(actionDelimiterIndex + 1)).trim();
+      actionSegmentIndex = index;
+      break;
+    }
+  }
+
+  if (!actionName || !resourceSegments.length) {
+    return undefined;
+  }
+
+  if (segments.length > actionSegmentIndex + 2) {
+    return undefined;
+  }
+
+  return {
+    resourceName: resourceSegments.join('.'),
+    actionName,
+  };
+}
+
+function parseDirtyResourceActionFromUrl(url: unknown, context: FlowContext): DirtyResourceAction | undefined {
+  const resourcePath = getDirtyResourcePathFromUrl(url, context);
+  if (!resourcePath) {
+    return undefined;
+  }
+
+  const segments = stripSearchAndHash(resourcePath).split('/').filter(Boolean);
+  const firstSegment = decodeResourcePathSegment(segments[0] || '');
+  if (firstSegment === 'dataSources' && segments.length >= 3) {
+    const dataSourceKey = getDataSourceKeyFromResourceOf(decodeResourcePathSegment(segments[1]));
+    const parsed = parseResourceActionFromSegments(segments.slice(2));
+    if (dataSourceKey && parsed) {
+      return {
+        ...parsed,
+        dataSourceKey,
+      };
+    }
+  }
+
+  return parseResourceActionFromSegments(segments);
+}
+
+function resolveDirtyResourceActionFromResource(
+  resourceName: string,
+  resourceOf: unknown,
+  actionName: string,
+  context: FlowContext,
+): DirtyResourceAction | undefined {
+  const normalizedResourceName = resourceName.trim();
+  const normalizedActionName = actionName.trim();
+  if (!normalizedResourceName || !normalizedActionName) {
+    return undefined;
+  }
+
+  if (normalizedResourceName.includes('/')) {
+    const parsed = parseDirtyResourceActionFromUrl(`${normalizedResourceName}:${normalizedActionName}`, context);
+    if (parsed) {
+      return parsed;
+    }
+  }
+
+  const dataSourcesPrefix = 'dataSources.';
+  if (normalizedResourceName.startsWith(dataSourcesPrefix)) {
+    const dataSourceKey = getDataSourceKeyFromResourceOf(resourceOf);
+    const nestedResourceName = normalizedResourceName.slice(dataSourcesPrefix.length).trim();
+    if (dataSourceKey && nestedResourceName) {
+      return {
+        dataSourceKey,
+        resourceName: nestedResourceName,
+        actionName: normalizedActionName,
+      };
+    }
+  }
+
+  return {
+    resourceName: normalizedResourceName,
+    actionName: normalizedActionName,
+  };
+}
+
+function resolveDirtyResourceAction(
+  options: ResourceRequestOptions,
+  context: FlowContext,
+): DirtyResourceAction | undefined {
+  const resourceName = typeof options?.resource === 'string' ? options.resource : undefined;
+  const actionName = typeof options?.action === 'string' ? options.action : undefined;
+  if (resourceName && actionName) {
+    return resolveDirtyResourceActionFromResource(resourceName, options.resourceOf, actionName, context);
+  }
+
+  return parseDirtyResourceActionFromUrl(options?.url, context);
+}
+
+function markResourceActionDataSourceDirty(
+  context: FlowContext,
+  dirtyResourceAction: DirtyResourceAction,
+  headers: unknown,
+) {
+  markDataSourceDirty({
+    engine: context.engine,
+    dataSourceKey: dirtyResourceAction.dataSourceKey || getDataSourceKeyFromHeaders(headers),
+    resourceName: dirtyResourceAction.resourceName,
+    includePreviousEngines: true,
+  });
+}
+
+function createDirtyAwareResource(
+  context: FlowContext,
+  resource: IResource,
+  resourceName: string,
+  resourceOf: unknown,
+  headers: unknown,
+): IResource {
+  return new Proxy(resource, {
+    get(target, prop, receiver) {
+      const original = Reflect.get(target, prop, receiver);
+      if (typeof prop !== 'string' || typeof original !== 'function' || !isMutatingResourceAction(prop)) {
+        return original;
+      }
+
+      const action = original as ResourceActionFn;
+      return async (...args: Parameters<ResourceActionFn>) => {
+        const result = await action(...args);
+        const dirtyResourceAction = resolveDirtyResourceActionFromResource(resourceName, resourceOf, prop, context);
+        if (dirtyResourceAction) {
+          markResourceActionDataSourceDirty(context, dirtyResourceAction, headers);
+        }
+        return result;
+      };
+    },
+  });
+}
+
+function createDirtyAwareApiClient(api: DirtyAwareAPIClient, context: FlowContext): APIClient {
+  const resource: APIClient['resource'] = (name, of, headers, cancel) => {
+    const targetResource = api.resource(name, of, headers, cancel);
+    return createDirtyAwareResource(context, targetResource, name, of, headers);
+  };
+
+  const request = (<T, R, D>(config: APIClientRequestConfig): Promise<R> => {
+    const options = config as ResourceRequestOptions;
+    const skipDataSourceDirty = options?.[SKIP_DATA_SOURCE_DIRTY];
+    const dirtyResourceAction = skipDataSourceDirty ? undefined : resolveDirtyResourceAction(options, context);
+    const { [SKIP_DATA_SOURCE_DIRTY]: _skipDataSourceDirty, ...cleanConfig } = options;
+    return api.request<T, R, D>(cleanConfig as typeof config).then((result) => {
+      if (dirtyResourceAction && isMutatingResourceAction(dirtyResourceAction.actionName)) {
+        markResourceActionDataSourceDirty(context, dirtyResourceAction, options.headers);
+      }
+      return result;
+    });
+  }) as APIClient['request'];
+
+  const proxy = new Proxy(api, {
+    get(target, prop, receiver) {
+      if (prop === 'resource') {
+        return resource;
+      }
+      if (prop === 'request') {
+        return request;
+      }
+      return Reflect.get(target, prop, receiver);
+    },
+  }) as APIClient;
+  dirtyAwareApiClientProxies.add(proxy);
+  return proxy;
+}
+
+export function getDirtyAwareApiClient(value: unknown, context: FlowContext): unknown {
+  if (!isApiClientLike(value)) {
+    return value;
+  }
+
+  if (dirtyAwareApiClientProxies.has(value)) {
+    return value;
+  }
+
+  const api = value as unknown as APIClient;
+  let contextCache = dirtyAwareApiClientCache.get(api);
+  if (!contextCache) {
+    contextCache = new WeakMap<object, APIClient>();
+    dirtyAwareApiClientCache.set(api, contextCache);
+  }
+
+  const cached = contextCache.get(context);
+  if (cached) {
+    return cached;
+  }
+
+  const wrapped = createDirtyAwareApiClient(value, context);
+  contextCache.set(context, wrapped);
+  return wrapped;
+}

package/src/utils/index.ts

@@ -66,6 +66,16 @@ export { extractPropertyPath, formatPathToVariable, isVariableExpression } from
 
 export { clearAutoFlowError, getAutoFlowError, setAutoFlowError, type AutoFlowError } from './autoFlowError';
 export { parsePathnameToViewParams, type ViewParam } from './parsePathnameToViewParams';
+export {
+  createOpenViewRouteState,
+  decodeOpenViewRouteState,
+  encodeOpenViewRouteState,
+  isOpenViewRouteStateToken,
+  RUNJS_OPEN_VIEW_ROUTE_STATE,
+  type OpenViewRouteMode,
+  type OpenViewRouteSize,
+  type OpenViewRouteState,
+} from './openViewRouteState';
 export {
   decodeBase64Url,
   encodeBase64Url,

package/src/utils/openViewRouteState.ts

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ */
+
+const OPEN_VIEW_ROUTE_MODES = ['drawer', 'dialog', 'embed'] as const;
+const OPEN_VIEW_ROUTE_SIZES = ['small', 'medium', 'large'] as const;
+const OPEN_VIEW_ROUTE_STATE_TOKEN_ALPHABET = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+const OPEN_VIEW_ROUTE_STATE_TOKEN_LENGTH = 8;
+
+export type OpenViewRouteMode = (typeof OPEN_VIEW_ROUTE_MODES)[number];
+export type OpenViewRouteSize = (typeof OPEN_VIEW_ROUTE_SIZES)[number];
+
+export type OpenViewRouteState = {
+  mode?: OpenViewRouteMode;
+  size?: OpenViewRouteSize;
+};
+
+export const RUNJS_OPEN_VIEW_ROUTE_STATE = Symbol.for('nocobase.runjs.openViewRouteState');
+
+function isOpenViewRouteMode(value: unknown): value is OpenViewRouteMode {
+  return typeof value === 'string' && (OPEN_VIEW_ROUTE_MODES as readonly string[]).includes(value);
+}
+
+function isOpenViewRouteSize(value: unknown): value is OpenViewRouteSize {
+  return typeof value === 'string' && (OPEN_VIEW_ROUTE_SIZES as readonly string[]).includes(value);
+}
+
+export function createOpenViewRouteState(input?: { mode?: unknown; size?: unknown }): OpenViewRouteState | undefined {
+  const state: OpenViewRouteState = {};
+
+  if (isOpenViewRouteMode(input?.mode)) {
+    state.mode = input.mode;
+  }
+  if (isOpenViewRouteSize(input?.size)) {
+    state.size = input.size;
+  }
+
+  return state.mode || state.size ? state : undefined;
+}
+
+function hashString(value: string) {
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= value.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+
+function stateToCode(state: OpenViewRouteState) {
+  const modeIndex = state.mode ? OPEN_VIEW_ROUTE_MODES.indexOf(state.mode) + 1 : 0;
+  const sizeIndex = state.size ? OPEN_VIEW_ROUTE_SIZES.indexOf(state.size) + 1 : 0;
+  const code = modeIndex * 4 + sizeIndex;
+  return code > 0 ? code : undefined;
+}
+
+function codeToState(code: number): OpenViewRouteState | undefined {
+  const modeIndex = Math.floor(code / 4);
+  const sizeIndex = code % 4;
+  return createOpenViewRouteState({
+    mode: modeIndex ? OPEN_VIEW_ROUTE_MODES[modeIndex - 1] : undefined,
+    size: sizeIndex ? OPEN_VIEW_ROUTE_SIZES[sizeIndex - 1] : undefined,
+  });
+}
+
+function tokenForCode(viewUid: string, code: number) {
+  let seed = hashString(`${viewUid}:${code}`);
+  let token = '';
+  for (let i = 0; i < OPEN_VIEW_ROUTE_STATE_TOKEN_LENGTH; i++) {
+    seed = Math.imul(seed ^ (code + i * 17), 16777619) >>> 0;
+    token += OPEN_VIEW_ROUTE_STATE_TOKEN_ALPHABET[seed % OPEN_VIEW_ROUTE_STATE_TOKEN_ALPHABET.length];
+  }
+  return token;
+}
+
+export function isOpenViewRouteStateToken(value: unknown): value is string {
+  return (
+    typeof value === 'string' &&
+    value.length === OPEN_VIEW_ROUTE_STATE_TOKEN_LENGTH &&
+    [...value].every((char) => OPEN_VIEW_ROUTE_STATE_TOKEN_ALPHABET.includes(char))
+  );
+}
+
+export function encodeOpenViewRouteState(viewUid: string, input?: { mode?: unknown; size?: unknown }) {
+  const state = createOpenViewRouteState(input);
+  const code = state ? stateToCode(state) : undefined;
+  return code ? tokenForCode(viewUid, code) : undefined;
+}
+
+export function decodeOpenViewRouteState(viewUid: string, token: unknown) {
+  if (!isOpenViewRouteStateToken(token)) {
+    return undefined;
+  }
+
+  for (let code = 1; code < 16; code++) {
+    if (tokenForCode(viewUid, code) === token) {
+      return codeToState(code);
+    }
+  }
+
+  return undefined;
+}

package/src/utils/parsePathnameToViewParams.ts

@@ -7,6 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { decodeOpenViewRouteState, type OpenViewRouteState } from './openViewRouteState';
+
 export interface ViewParam {
   /** 视图唯一标识符，一般为某个 Model 实例的 uid */
   viewUid: string;
@@ -16,6 +18,8 @@ export interface ViewParam {
   filterByTk?: string | Record<string, string | number>;
   /** source Id */
   sourceId?: string;
+  /** RunJS ctx.openView runtime display overrides decoded from URL. */
+  openViewRouteState?: OpenViewRouteState;
 }
 
 export interface ParsePathnameToViewParamsOptions {
@@ -109,7 +113,25 @@ export const parsePathnameToViewParams = (
       }
     }
     // 处理参数
-    else if (currentView && i + 1 < segments.length) {
+    else if (currentView) {
+      if (segment === 'opts') {
+        if (i + 1 < segments.length) {
+          const routeState = decodeOpenViewRouteState(currentView.viewUid, segments[i + 1]);
+          if (routeState) {
+            currentView.openViewRouteState = routeState;
+          }
+          i += 2;
+        } else {
+          i++;
+        }
+        continue;
+      }
+
+      if (i + 1 >= segments.length) {
+        i++;
+        continue;
+      }
+
       const rawValue = segments[i + 1];
       // 尝试对路径段进行解码
       let decoded: string = rawValue;

package/src/views/ViewNavigation.ts

@@ -9,7 +9,7 @@
 
 import { FlowEngineContext } from '../flowContext';
 import { define, observable } from '../reactive';
-import { ViewParam as SharedViewParam } from '../utils';
+import { encodeOpenViewRouteState, ViewParam as SharedViewParam } from '../utils';
 
 type ViewParams = Omit<SharedViewParam, 'viewUid'> & { viewUid?: string };
 
@@ -79,6 +79,11 @@ export function generatePathnameFromViewParams(
     // 添加视图 UID
     segments.push(viewParam.viewUid);
 
+    const openViewRouteStateToken = encodeOpenViewRouteState(viewParam.viewUid, viewParam.openViewRouteState);
+    if (openViewRouteStateToken) {
+      segments.push('opts', openViewRouteStateToken);
+    }
+
     // 添加参数
     if (viewParam.tabUid) {
       segments.push('tab', viewParam.tabUid);

package/src/views/__tests__/ViewNavigation.test.ts

@@ -7,6 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { encodeOpenViewRouteState } from '../../utils/openViewRouteState';
 import { ViewNavigation, generatePathnameFromViewParams } from '../ViewNavigation';
 
 describe('ViewNavigation', () => {
@@ -220,6 +221,20 @@ describe('generatePathnameFromViewParams', () => {
     expect(generatePathnameFromViewParams([{ viewUid: 'xxx' }, { viewUid: 'yyy' }])).toBe('/admin/xxx/view/yyy');
   });
 
+  it('should generate RunJS openView route state params after the matching view uid', () => {
+    const token = encodeOpenViewRouteState('yyy', { mode: 'dialog', size: 'large' });
+    if (!token) {
+      throw new Error('Expected openView route state token.');
+    }
+    const pathname = generatePathnameFromViewParams([
+      { viewUid: 'xxx' },
+      { viewUid: 'yyy', openViewRouteState: { mode: 'dialog', size: 'large' }, filterByTk: '1' },
+    ]);
+
+    expect(token).toMatch(/^[A-Za-z]{8}$/);
+    expect(pathname).toBe(`/admin/xxx/view/yyy/opts/${token}/filterbytk/1`);
+  });
+
   it('should generate complex path with all parameters', () => {
     expect(
       generatePathnameFromViewParams([