fix: query cancel block other query execution and some table issues

sarike · sunlei · commit 03657d61d87f · 2023-03-08T12:02:39.000Z
(cherry picked from commit 6c6d33a47bbf15e06a3acec09291fede6bcef45e)
diff --git a/client/packages/openblocks-design/src/components/CustomModal.tsx b/client/packages/openblocks-design/src/components/CustomModal.tsx
@@ -35,8 +35,7 @@ const ModalHeaderWrapper = styled.div<{ $draggable?: boolean }>`
   cursor: ${(props) => (props.$draggable ? "move" : "auto")};
   display: flex;
   align-items: center;
-  line-height: 26px;
-  padding: 11px 16px;
+  padding: 16px;
 `;
 
 const ModalHeaderTitle = styled.div`
diff --git a/client/packages/openblocks/src/api/queryApi.ts b/client/packages/openblocks/src/api/queryApi.ts
@@ -50,6 +50,13 @@ export class QueryApi extends Api {
 
   static queryExecuteCancelTokenSource: Record<string, CancelTokenSource> = {};
 
+  static cancelAllQuery() {
+    Object.values(QueryApi.queryExecuteCancelTokenSource).forEach((s) => {
+      s.cancel();
+    });
+    QueryApi.queryExecuteCancelTokenSource = {};
+  }
+
   static executeQuery(
     request: QueryExecuteRequest,
     timeout?: number
diff --git a/client/packages/openblocks/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/openblocks/src/comps/comps/layout/mobileTabLayout.tsx
@@ -157,7 +157,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
     currentTab.children.app.getAppId() &&
     currentTab.children.app.getView()) || (
     <EmptyContent
-      text={trans("aggregation.emptyTabTooltip")}
+      text={readOnly ? "" : trans("aggregation.emptyTabTooltip")}
       style={{ height: "100%", backgroundColor: "white" }}
     />
   );
diff --git a/client/packages/openblocks/src/comps/comps/tableComp/column/tableColumnListComp.tsx b/client/packages/openblocks/src/comps/comps/tableComp/column/tableColumnListComp.tsx
@@ -1,5 +1,9 @@
 import { ColumnComp, newPrimaryColumn } from "comps/comps/tableComp/column/tableColumnComp";
-import { calcColumnWidth, COLUMN_CHILDREN_KEY } from "comps/comps/tableComp/tableUtils";
+import {
+  calcColumnWidth,
+  COLUMN_CHILDREN_KEY,
+  supportChildrenTree,
+} from "comps/comps/tableComp/tableUtils";
 import { list } from "comps/generators/list";
 import { getReduceContext } from "comps/utils/reduceContext";
 import _ from "lodash";
@@ -123,18 +127,18 @@ export class ColumnListComp extends ColumnListTmpComp {
         return;
       }
       const dataIndex = column.getView().dataIndex;
-      if (!dataKeys.find((key) => dataIndex === key)) {
+      if (dataIndex === COLUMN_CHILDREN_KEY || !dataKeys.find((key) => dataIndex === key)) {
         // to Delete
         actions.push(this.deleteAction(index - deleteCnt));
         deleteCnt += 1;
       }
     });
     // The order should be the same as the data
     dataKeys.forEach((key) => {
-      if (
-        key !== COLUMN_CHILDREN_KEY &&
-        !columnsView.find((column) => column.getView().dataIndex === key)
-      ) {
+      if (key === COLUMN_CHILDREN_KEY && supportChildrenTree(data)) {
+        return;
+      }
+      if (!columnsView.find((column) => column.getView().dataIndex === key)) {
         // to Add
         actions.push(this.pushAction(newPrimaryColumn(key, calcColumnWidth(key, data))));
       }
diff --git a/client/packages/openblocks/src/comps/comps/tableComp/tableComp.tsx b/client/packages/openblocks/src/comps/comps/tableComp/tableComp.tsx
@@ -15,6 +15,7 @@ import {
   sortData,
   transformDispalyData,
   tranToTableRecord,
+  supportChildrenTree,
 } from "comps/comps/tableComp/tableUtils";
 import { isTriggerAction } from "comps/controls/actionSelector/actionSelectorControl";
 import { withPropertyViewFn, withViewFn } from "comps/generators";
@@ -60,6 +61,7 @@ export class TableImplComp extends TableInitComp implements IContainer {
   private getSlotContainer() {
     return this.children.expansion.children.slot.getSelectedComp().getComp().children.container;
   }
+
   findContainer(key: string) {
     return this.getSlotContainer().findContainer(key);
   }
@@ -291,8 +293,11 @@ export class TableImplComp extends TableInitComp implements IContainer {
     const filteredDataNode = withFunction(fromRecord(nodes), (input) => {
       const { data, searchValue, filter, showFilter } = input;
       const filteredData = filterData(data, searchValue.value, filter, showFilter.value);
+      const supportChildren = supportChildrenTree(filteredData);
       // console.info("filterNode. data: ", data, " filter: ", filter, " filteredData: ", filteredData);
-      return filteredData.map((row) => tranToTableRecord(row, row[OB_ROW_ORI_INDEX]));
+      return filteredData.map((row) =>
+        tranToTableRecord(row, row[OB_ROW_ORI_INDEX], supportChildren)
+      );
     });
     return lastValueIfEqual(this, "filteredDataNode", [filteredDataNode, nodes] as const, (a, b) =>
       shallowEqual(a[1], b[1])
@@ -390,7 +395,7 @@ function _indexKeyToRecord(data: JSONObject[], key: string) {
   let res = undefined;
   for (let k of keyPath) {
     const index = Number(k);
-    if (index >= 0 && currentData && index < currentData.length) {
+    if (index >= 0 && Array.isArray(currentData) && index < currentData.length) {
       res = currentData[index];
       currentData = res[COLUMN_CHILDREN_KEY] as JSONObject[];
     }
diff --git a/client/packages/openblocks/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/openblocks/src/comps/comps/tableComp/tableCompView.tsx
@@ -10,6 +10,7 @@ import {
   CustomColumnType,
   onTableChange,
   RecordType,
+  supportChildrenTree,
 } from "comps/comps/tableComp/tableUtils";
 import {
   defaultTheme,
@@ -137,7 +138,7 @@ const getStyle = (style: TableStyleType) => {
       }
 
       // link color
-      td a {
+      td :not(li) > a {
         color: ${isDark && "#A6FFFF"};
 
         &:hover {
@@ -568,6 +569,7 @@ export function TableCompView(props: {
       onEvent={onEvent}
     />
   );
+  const supportChildren = supportChildrenTree(data);
 
   return (
     <BackgroundColorContext.Provider value={style.background}>
@@ -576,7 +578,9 @@ export function TableCompView(props: {
         <ResizeableTable<RecordType>
           expandable={{
             ...expansion.expandableConfig,
-            childrenColumnName: COLUMN_CHILDREN_KEY,
+            childrenColumnName: supportChildren
+              ? COLUMN_CHILDREN_KEY
+              : "OB_CHILDREN_KEY_PLACEHOLDER",
             fixed: "left",
           }}
           rowColor={compChildren.rowColor.getView() as any}
diff --git a/client/packages/openblocks/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/openblocks/src/comps/comps/tableComp/tableUtils.tsx
@@ -16,7 +16,7 @@ import { EditableIcon } from "openblocks-design";
 import { tryToNumber } from "util/convertUtils";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { StatusType } from "./column/columnTypeComps/columnStatusComp";
-import { ColumnListComp } from "./column/tableColumnListComp";
+import { ColumnListComp, tableDataRowExample } from "./column/tableColumnListComp";
 
 export const COLUMN_CHILDREN_KEY = "children";
 export const OB_ROW_ORI_INDEX = "__ob_origin_index";
@@ -113,14 +113,18 @@ export function buildOriginIndex(index: string, childIndex: string) {
   return index + "-" + childIndex;
 }
 
-export function tranToTableRecord(dataObj: JSONObject, index: string | number): RecordType {
+export function tranToTableRecord(
+  dataObj: JSONObject,
+  index: string | number,
+  supportChildren: boolean
+): RecordType {
   const indexString = index + "";
-  if (Array.isArray(dataObj[COLUMN_CHILDREN_KEY])) {
+  if (supportChildren && Array.isArray(dataObj[COLUMN_CHILDREN_KEY])) {
     return {
       ...dataObj,
       [OB_ROW_ORI_INDEX]: indexString,
       children: dataObj[COLUMN_CHILDREN_KEY].map((child: any, i: number) =>
-        tranToTableRecord(child, buildOriginIndex(indexString, i + ""))
+        tranToTableRecord(child, buildOriginIndex(indexString, i + ""), supportChildren)
       ),
     };
   }
@@ -135,6 +139,7 @@ export function getOriDisplayData(
   pageSize: number,
   columns: Array<{ dataIndex: string; render: NodeToValue<ReturnType<Render["node"]>> }>
 ) {
+  const supportChildren = supportChildrenTree(data);
   return data.map((row, idx) => {
     const displayData: JSONObject = {};
     columns.forEach((col) => {
@@ -145,7 +150,7 @@ export function getOriDisplayData(
         currentIndex: idx % pageSize,
         currentOriginalIndex: row[OB_ROW_ORI_INDEX],
       }) as any;
-      if (Array.isArray(row[COLUMN_CHILDREN_KEY])) {
+      if (supportChildren && Array.isArray(row[COLUMN_CHILDREN_KEY])) {
         displayData[COLUMN_CHILDREN_KEY] = getOriDisplayData(
           row[COLUMN_CHILDREN_KEY] as Array<RecordType>,
           pageSize,
@@ -380,3 +385,8 @@ export function genSelectionParams(
     currentOriginalIndex: tryToNumber(currentRow[OB_ROW_ORI_INDEX]),
   };
 }
+
+export function supportChildrenTree(data: Array<JSONObject>) {
+  const rowSample = tableDataRowExample(data) as any;
+  return rowSample && Array.isArray(rowSample[COLUMN_CHILDREN_KEY]);
+}
diff --git a/client/packages/openblocks/src/i18n/locales/en.ts b/client/packages/openblocks/src/i18n/locales/en.ts
@@ -1952,9 +1952,9 @@ export const en = {
     app: "App",
     navigation: "Navigation",
     navLayout: "PC Navigation",
-    navLayoutDesc: "Provide left side navigation",
+    navLayoutDesc: "Left-side menu for easy desktop navigation.",
     mobileTabLayout: "Mobile Navigation",
-    mobileTabLayoutDesc: "Provide bottom side navigation",
+    mobileTabLayoutDesc: "Bottom navigation bar for smooth mobile browsing.",
     folders: "Folders",
     folder: "Folder",
     rootFolder: "Root",
diff --git a/client/packages/openblocks/src/pages/ApplicationV2/CreateDropdown.tsx b/client/packages/openblocks/src/pages/ApplicationV2/CreateDropdown.tsx
@@ -93,7 +93,7 @@ const LayoutPickWrapper = styled.div`
 const LayoutItemWrapper = styled.div`
   background: #f9fafb;
   cursor: pointer;
-  width: 160px;
+  width: 184px;
   border: 1px solid #eeeeee;
   border-radius: 4px;
   display: flex;
diff --git a/client/packages/openblocks/src/pages/ApplicationV2/HomeResCard.tsx b/client/packages/openblocks/src/pages/ApplicationV2/HomeResCard.tsx
@@ -36,7 +36,7 @@ const ExecButton = styled(TacoButton)`
   width: 52px;
   height: 24px;
   padding: 5px 12px;
-  margin-right: 44px;
+  margin-right: 24px;
   background: #fafbff;
   border: 1px solid #c9d1fc;
   border-radius: 4px;
@@ -105,6 +105,7 @@ const CardInfo = styled.div`
   flex-grow: 1;
   cursor: pointer;
   overflow: hidden;
+  padding-right: 12px;
 
   :hover {
     .ant-typography {
diff --git a/client/packages/openblocks/src/pages/editor/appEditorInternal.tsx b/client/packages/openblocks/src/pages/editor/appEditorInternal.tsx
@@ -92,10 +92,7 @@ export function useRootCompInstance(appInfo: AppSummaryInfo, readOnly: boolean,
 
   useUnmount(() => {
     comp?.clearPreload();
-
-    Object.values(QueryApi.queryExecuteCancelTokenSource).forEach((s) => {
-      s.cancel();
-    });
+    QueryApi.cancelAllQuery();
   });
 
   return useMemo(() => {
