fix(propertyselector): fix bug (#1607)

Co-authored-by: maxin <maxin@growingio.com>
Co-authored-by: GEARLESS JOE <31471551+berber1016@users.noreply.github.com>

package.json

@@ -170,4 +170,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

src/legacy/property-selector/PropertyPicker.tsx

@@ -61,7 +61,6 @@ export const ExpandableGroupOrSubGroup = (props: {
 };
 
 const pinyinMatch = pinyin.default;
-const Tabs = toPairs(PropertyTypes).map((v) => ({ key: v[0], children: v[1] }));
 
 const PropertyPicker: React.FC<PropertyPickerProps> = (props: PropertyPickerProps) => {
   const {
@@ -82,6 +81,7 @@ const PropertyPicker: React.FC<PropertyPickerProps> = (props: PropertyPickerProp
   } = props;
   const locale = useLocale('PropertyPicker');
   const localeText = { ...defaultLocale, ...locale } as typeof defaultLocale;
+  const Tabs = toPairs(PropertyTypes(localeText)).map((v) => ({ key: v[0], children: v[1] }));
   const [scope, setScope] = useState('all');
   const [keyword, setKeyword] = useState<string | undefined>('');
   const [recentlyUsedInMemo, setRecentlyUsedInMemo] = useState<{
@@ -320,6 +320,20 @@ const PropertyPicker: React.FC<PropertyPickerProps> = (props: PropertyPickerProp
         <List.Divider key="divider-group-recently" />
       </React.Fragment>
     );
+
+    const groupFn = (item: PropertyItem, existIsSystem: boolean) => {
+      if (existIsSystem) {
+        if (item.groupId === 'tag') {
+          return 'tag';
+        }
+        if (item.groupId === 'virtual') {
+          return 'virtual';
+        }
+        return item.isSystem;
+      }
+      return item.groupId;
+    };
+
     const groupDataNodes = keys(groupDatasource).map((key, index) => {
       const groupData = groupDatasource[key];
       const existIsSystem = has(groupData, '[0].isSystem');
@@ -350,18 +364,10 @@ const PropertyPicker: React.FC<PropertyPickerProps> = (props: PropertyPickerProp
               acc.push(...cur);
               return acc;
             }, []),
-          existIsSystem ? 'isSystem' : 'groupId'
+          (item) => groupFn(item, existIsSystem)
         );
       } else {
-        subGroupDic = groupBy(groupData, (item) => {
-          if (existIsSystem) {
-            if (item.groupId === 'tag') {
-              return 'tag';
-            }
-            return item.isSystem;
-          }
-          return item.groupId;
-        });
+        subGroupDic = groupBy(groupData, (item) => groupFn(item, existIsSystem));
       }
 
       const { typeName } = groupData[0];

src/legacy/property-selector/components/list/ExpandItem.tsx

@@ -14,7 +14,7 @@ function ExpandItem({ className, title, ...restProps }: ExpandItemProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     <li role="option" aria-selected {...restProps} className={cls}>
       <DownOutlined className={`${prefixCls}__icon`} size="14px" />
-      <span className={`${prefixCls}__text`}>{title ?? localeTextObject.expandAll()}</span>
+      <span className={`${prefixCls}__text`}>{title ?? localeTextObject.expandAll?.()}</span>
     </li>
   );
 }

src/legacy/property-selector/components/list/utils.tsx

@@ -29,7 +29,7 @@ export function renderExpandableItems(
       .map(renderItem)
       .concat(
         <ExpandItem
-          title={localesText.expandAll(currentItems.length - showItems.length)}
+          title={localesText.expandAll?.(currentItems.length - showItems.length)}
           key={`expand-item-${currentItems[0].key}-${showItems.length + 1}`}
           onClick={onExpand}
         />

src/legacy/property-selector/demos/insightDimensions.ts

@@ -24,6 +24,17 @@ const insightDimensions: ReadonlyArray<any> = [
     type: 'global',
     valueType: 'string',
   },
+  {
+    id: 'vvar_virtual_1',
+    associatedKey: null,
+    description: null,
+    groupId: 'virtual',
+    groupName: 'Virtual Variable',
+    name: '虚拟属性1',
+    type: 'vvar',
+    valueType: 'string',
+    isSystem: false,
+  },
   {
     associatedKey: null,
     description:
@@ -822,16 +833,6 @@ const insightDimensions: ReadonlyArray<any> = [
     type: 'global',
     valueType: 'string',
   },
-  {
-    id: 'vvar_virtual_1',
-    associatedKey: null,
-    description: null,
-    groupId: 'virtual',
-    groupName: 'Virtual Variable',
-    name: '虚拟属性1',
-    type: 'vvar',
-    valueType: 'string',
-  },
 ];
 
 export default insightDimensions;

src/legacy/property-selector/locales/en-US.ts

@@ -15,8 +15,8 @@ export default {
   device: 'Device',
   element: 'Autotrack Event',
   tag: 'User Tags',
-  preset: (text: Key) => `Preset ${text}`,
-  custom: (text: Key) => `Custom ${text}`,
+  preset: (text?: Key) => `Preset ${text}`,
+  custom: (text?: Key) => `Custom ${text}`,
   dimensionTable: 'Dimension Table',
   eventVariables: 'Event Variables',
   virtualProperties: 'Virtual Properties',

src/legacy/property-selector/util.ts

@@ -26,6 +26,7 @@ export const DimensionGroupTypeMapper: Mapper = {
   geo: 'avar',
   device: 'avar',
   origin: 'avar',
+  virtual: 'event',
 };
 
 export const PropertyGroupOrder = [
@@ -65,7 +66,7 @@ const regroup = (data: PropertyItem, localeText: typeof defaultLocale): Property
     newTypeName = PropertyTypes(localeText)[newType];
   }
 
-  let groupName = isSystem ? localeText.preset(typeName) : localeText.custom(typeName);
+  let groupName = isSystem ? localeText.preset?.(typeName) : localeText.custom?.(typeName);
   if (groupId === 'tag') {
     groupName = localeText.tag;
   }
@@ -107,7 +108,6 @@ export const dimensionToPropertyItem: TypeMapping = (item: Dimension, localeText
   // 虚拟属性需要添加到事件属性中，但是有自己的type和groupId，所以和维度表（多物品模型）做相同处理
   if (groupId === 'virtual' && _type === 'vvar') {
     result.iconId = 'virtual';
-    result.groupId = 'event';
     result.groupName = localeText.virtualProperties;
     result.previewTypeName = localeText.virtualProperties;
   }
@@ -120,7 +120,7 @@ export const dimensionToPropertyItem: TypeMapping = (item: Dimension, localeText
   const tOrder = ['event', 'avar', 'usr'].indexOf(result.type);
   result.typeOrder = tOrder > -1 ? tOrder : 99999;
 
-  if (has(item, 'isSystem')) {
+  if (has(item, 'isSystem') && groupId !== 'virtual') {
     return regroup(result, localeText);
   }
   return result;

src/panel/BatchActions.tsx

@@ -10,7 +10,7 @@ const BatchActions: React.FC<BatchActionProps> = ({ onClose, count = 0, children
   const prefixCls = usePrefixCls('panel__batch-actions');
   return (
     <div className={prefixCls}>
-      <span className={`${prefixCls}__text`}>{localeTextObject.hasSelected(count)}</span>
+      <span className={`${prefixCls}__text`}>{localeTextObject.hasSelected?.(count)}</span>
       <IconButton type="text" size="small" onClick={onClose}>
         <CloseOutlined />
       </IconButton>

src/static-past-time-picker/constant.ts

@@ -4,10 +4,10 @@ export const DATE_FORMAT = 'yyyy/MM/dd';
 
 export const experimentalQuickOptions = (localeText: typeof defaultLocaleText) => [
   [
-    { value: 'hour:25,1', label: localeText.lastSomeHours(24) },
-    { value: 'hour:73,1', label: localeText.lastSomeHours(72) },
+    { value: 'hour:25,1', label: localeText.lastSomeHours?.(24) },
+    { value: 'hour:73,1', label: localeText.lastSomeHours?.(72) },
   ],
-  [{ value: 'hour:49,1', label: localeText.lastSomeHours(48) }],
+  [{ value: 'hour:49,1', label: localeText.lastSomeHours?.(48) }],
 ];
 
 export const QUICK_MAPPING = {