@gingkoo/pandora-metabase 1.0.140 → 1.0.141-alpha.4

package/lib/es/components/dialog/formula-list/index.js

@@ -1,11 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _excluded = ["notExistsToolbar", "toolbar"],
-  _excluded2 = ["subToolbar", "notExistsColumns", "showFields", "isExit", "toolbar"];
+var _excluded = ["operator", "leftAtoms", "rightAtoms", "atoms"],
+  _excluded2 = ["notExistsToolbar", "toolbar"],
+  _excluded3 = ["subToolbar", "notExistsColumns", "showFields", "isExit", "toolbar"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState, useMemo, useRef, forwardRef } from 'react';
@@ -18,9 +21,9 @@ import isEqual from 'lodash/isEqual';
 import { getObjTem, getQuotes, formulaIsError } from '../formula/utils';
 import { AtomsTypeEnum, FormulaTypeEnum } from '../../../store/types';
 import { ColumnsPopupThemeEnum } from '../../../store/enum';
-import { Select, Input, Modal2, Modal, InputNumber, Radio, Space, Button, Checkbox, Tooltip } from '@gingkoo/pandora';
+import { Select, Input, Modal2, Modal, InputNumber, Space, Button, Checkbox, Tooltip, Code, Toast } from '@gingkoo/pandora';
 import cloneDeep from 'lodash/cloneDeep';
-import { buildSqlQuery, isError, changeCopyField, isExistsError } from '../../../utils';
+import { buildSqlQuery, isError, changeCopyField, isExistsError, normalizeAndOrStructure } from '../../../utils';
 import Formula from '../formula';
 import { AddIcon, CloseIcon } from '../../icons';
 import { Expression, SelectColumnMultiple } from '../../dialog';
@@ -104,6 +107,12 @@ var TOKEN_PALETTE = {
   gray: 'rgb(147, 161, 171)',
   green: 'rgb(136, 191, 77)'
 };
+var createUnknownAtom = function createUnknownAtom() {
+  return {
+    val: '',
+    type: AtomsTypeEnum.UNKNOWN
+  };
+};
 var getTokenStyleByClassName = function getTokenStyleByClassName(className, extraStyle) {
   var names = " ".concat(className || '', " ");
   var color = TOKEN_PALETTE.blue;
@@ -273,22 +282,29 @@ var FormulaList = forwardRef(function (props, ref) {
     });
     return map;
   }, [otherTypes]);
-  var caseList = value || [];
+  var normalizedValue = useMemo(function () {
+    return normalizeAndOrStructure(value || []);
+  }, [value]);
+  var caseList = normalizedValue;
+  var initialValueRef = useRef(cloneDeep(caseList));
   var caseListRef = useRef(caseList);
+  caseListRef.current = caseList;
+  var hasFormulaSqlAction = Boolean(store.showFormulaSql && store.hasFormulaSqlCode);
+  var hasFormulaDiffAction = Boolean(store.showFormulaDiff && store.hasFormulaDiffCode);
   var operatorList = useMemo(function () {
     if (store.operatorList.length > 0) {
       return store.operatorList;
     }
     return __operatorList;
   }, [store.operatorList]);
-  var _useState3 = useState(''),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    oldCode = _useState4[0],
-    setOldCode = _useState4[1];
-  var _useState5 = useState('code'),
+    sqlLoading = _useState4[0],
+    setSqlLoading = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    previewMode = _useState6[0],
-    setPreviewMode = _useState6[1];
+    diffLoading = _useState6[0],
+    setDiffLoading = _useState6[1];
   var _useState7 = useState(function () {
       if (!enableCopy) {
         return false;
@@ -332,8 +348,54 @@ var FormulaList = forwardRef(function (props, ref) {
     }
     return field.fieldName || field.fieldAlias || '';
   }
+  var normalizeAndOrItems = function normalizeAndOrItems() {
+    var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var legacyItem = item;
+    if (Array.isArray(legacyItem.items) && legacyItem.items.length > 0) {
+      return legacyItem.items.map(function (currentItem, index) {
+        return _objectSpread(_objectSpread({}, index > 0 ? {
+          operator: currentItem.operator || legacyItem.operator || 'and'
+        } : {}), {}, {
+          atoms: Array.isArray(currentItem.atoms) && currentItem.atoms.length > 0 ? currentItem.atoms : [createUnknownAtom()]
+        });
+      });
+    }
+    if (Array.isArray(legacyItem.leftAtoms) || Array.isArray(legacyItem.rightAtoms)) {
+      return [{
+        atoms: Array.isArray(legacyItem.leftAtoms) && legacyItem.leftAtoms.length > 0 ? legacyItem.leftAtoms : [createUnknownAtom()]
+      }, {
+        operator: legacyItem.operator || 'and',
+        atoms: Array.isArray(legacyItem.rightAtoms) && legacyItem.rightAtoms.length > 0 ? legacyItem.rightAtoms : [createUnknownAtom()]
+      }];
+    }
+    return [{
+      atoms: Array.isArray(legacyItem.atoms) && legacyItem.atoms.length > 0 ? legacyItem.atoms : [createUnknownAtom()]
+    }];
+  };
+  var buildAndOrItem = function buildAndOrItem(item, items) {
+    var normalizedItems = normalizeAndOrItems({
+      items: items
+    });
+    var operator = item.operator,
+      leftAtoms = item.leftAtoms,
+      rightAtoms = item.rightAtoms,
+      atoms = item.atoms,
+      nextItem = _objectWithoutProperties(item, _excluded);
+    var itemForQuotes = _objectSpread(_objectSpread({}, nextItem), {}, {
+      items: normalizedItems
+    });
+    return _objectSpread(_objectSpread({}, nextItem), {}, {
+      items: normalizedItems,
+      quotes: getItemQuotes(itemForQuotes)
+    });
+  };
   function getItemDisplayText(v) {
+    var visited = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new WeakSet();
     if (!v) return '';
+    if (_typeof(v) === 'object') {
+      if (visited.has(v)) return v.quotes || '';
+      visited.add(v);
+    }
     if (v.quotes) return v.quotes;
     if (v.type === AtomsTypeEnum.FIELD) return getFieldDisplayName(v);
     if (v.fieldName) return v.fieldName;
@@ -342,25 +404,30 @@ var FormulaList = forwardRef(function (props, ref) {
     }
     if (v.type === AtomsTypeEnum.CASE_WHEN) {
       var caseAtomsText = (v.caseAtoms || []).map(function (item) {
-        return getItemDisplayText(item);
+        return getItemDisplayText(item, visited);
       }).join(' ');
       var whenClausesText = (v.whenClauses || []).map(function (branch) {
-        var whenText = (branch.whenAtoms || []).map(getItemDisplayText).join(' ');
-        var thenText = (branch.thenAtoms || []).map(getItemDisplayText).join(' ');
+        var whenText = (branch.whenAtoms || []).map(function (item) {
+          return getItemDisplayText(item, visited);
+        }).join(' ');
+        var thenText = (branch.thenAtoms || []).map(function (item) {
+          return getItemDisplayText(item, visited);
+        }).join(' ');
         return "when ".concat(whenText, " then ").concat(thenText).trim();
       }).join(' ');
-      var elseAtomsText = (v.elseAtoms || []).length ? " else ".concat((v.elseAtoms || []).map(getItemDisplayText).join(' ')) : '';
+      var elseAtomsText = (v.elseAtoms || []).length ? " else ".concat((v.elseAtoms || []).map(function (item) {
+        return getItemDisplayText(item, visited);
+      }).join(' ')) : '';
       return "case ".concat(caseAtomsText, " ").concat(whenClausesText).concat(elseAtomsText, " end").replace(/\s+/g, ' ').trim();
     }
     if (v.type === AtomsTypeEnum.AND_OR) {
-      var hasBinarySides = Array.isArray(v.leftAtoms) || Array.isArray(v.rightAtoms);
-      if (hasBinarySides) {
-        var leftText = (v.leftAtoms || []).map(getItemDisplayText).join(' ');
-        var rightText = (v.rightAtoms || []).map(getItemDisplayText).join(' ');
-        return "( ".concat(leftText, " ").concat(v.operator || 'and', " ").concat(rightText, " )").replace(/\s+/g, ' ').trim();
-      }
-      var atomsText = (v.atoms || []).map(getItemDisplayText).join(' ');
-      return "".concat(v.operator || 'and', " ( ").concat(atomsText, " )").replace(/\s+/g, ' ').trim();
+      var itemsText = normalizeAndOrItems(v).map(function (item, index) {
+        var atomsText = (item.atoms || []).map(function (atom) {
+          return getItemDisplayText(atom, visited);
+        }).join(' ');
+        return index === 0 ? atomsText : "".concat(item.operator || 'and', " ").concat(atomsText);
+      }).join(' ');
+      return "( ".concat(itemsText, " )").replace(/\s+/g, ' ').trim();
     }
     if (v.type === AtomsTypeEnum.SELECT) {
       return getSelectDisplayText(v);
@@ -375,55 +442,61 @@ var FormulaList = forwardRef(function (props, ref) {
       quotes: ''
     }));
   };
-  var _withSyncedQuotes = function withSyncedQuotes(item) {
+  var _withSyncedQuotesInner = function withSyncedQuotesInner(item, visited) {
+    if (!item || _typeof(item) !== 'object') return item;
+    if (visited.has(item)) return visited.get(item);
     if (item.type === AtomsTypeEnum.CASE_WHEN) {
       var _item$elseAtoms;
       var nextItem = _objectSpread(_objectSpread({}, item), {}, {
-        caseAtoms: (item.caseAtoms || []).map(function (currentItem) {
-          return _withSyncedQuotes(currentItem);
-        }),
-        whenClauses: (item.whenClauses || []).map(function (clause) {
-          return _objectSpread(_objectSpread({}, clause), {}, {
-            whenAtoms: (clause.whenAtoms || []).map(function (currentItem) {
-              return _withSyncedQuotes(currentItem);
-            }),
-            thenAtoms: (clause.thenAtoms || []).map(function (currentItem) {
-              return _withSyncedQuotes(currentItem);
-            })
-          });
-        }),
-        elseAtoms: (_item$elseAtoms = item.elseAtoms) === null || _item$elseAtoms === void 0 ? void 0 : _item$elseAtoms.map(function (currentItem) {
-          return _withSyncedQuotes(currentItem);
-        })
+        caseAtoms: [],
+        whenClauses: [],
+        elseAtoms: []
       });
-      return _objectSpread(_objectSpread({}, nextItem), {}, {
-        quotes: getItemQuotes(nextItem)
+      visited.set(item, nextItem);
+      nextItem.caseAtoms = (item.caseAtoms || []).map(function (currentItem) {
+        return _withSyncedQuotesInner(currentItem, visited);
       });
-    }
-    if (item.type === AtomsTypeEnum.AND_OR) {
-      var hasBinarySides = Array.isArray(item.leftAtoms) || Array.isArray(item.rightAtoms);
-      var _nextItem = _objectSpread(_objectSpread({}, item), hasBinarySides ? {
-        atoms: undefined,
-        leftAtoms: (item.leftAtoms || []).map(function (currentItem) {
-          return _withSyncedQuotes(currentItem);
-        }),
-        rightAtoms: (item.rightAtoms || []).map(function (currentItem) {
-          return _withSyncedQuotes(currentItem);
-        })
-      } : {
-        atoms: (item.atoms || []).map(function (currentItem) {
-          return _withSyncedQuotes(currentItem);
-        })
+      nextItem.whenClauses = (item.whenClauses || []).map(function (clause) {
+        return _objectSpread(_objectSpread({}, clause), {}, {
+          whenAtoms: (clause.whenAtoms || []).map(function (currentItem) {
+            return _withSyncedQuotesInner(currentItem, visited);
+          }),
+          thenAtoms: (clause.thenAtoms || []).map(function (currentItem) {
+            return _withSyncedQuotesInner(currentItem, visited);
+          })
+        });
       });
-      return _objectSpread(_objectSpread({}, _nextItem), {}, {
-        quotes: getItemQuotes(_nextItem)
+      nextItem.elseAtoms = (_item$elseAtoms = item.elseAtoms) === null || _item$elseAtoms === void 0 ? void 0 : _item$elseAtoms.map(function (currentItem) {
+        return _withSyncedQuotesInner(currentItem, visited);
       });
+      nextItem.quotes = getItemQuotes(nextItem);
+      return nextItem;
+    }
+    if (item.type === AtomsTypeEnum.AND_OR) {
+      var _nextItem = {
+        type: item.type,
+        quotes: item.quotes || '',
+        items: []
+      };
+      visited.set(item, _nextItem);
+      var syncedItem = buildAndOrItem(item, normalizeAndOrItems(item).map(function (currentItem) {
+        return _objectSpread(_objectSpread({}, currentItem), {}, {
+          atoms: (currentItem.atoms || []).map(function (atom) {
+            return _withSyncedQuotesInner(atom, visited);
+          })
+        });
+      }));
+      _extends(_nextItem, syncedItem);
+      return _nextItem;
     }
     return item;
   };
+  var withSyncedQuotes = function withSyncedQuotes(item) {
+    return _withSyncedQuotesInner(item, new WeakMap());
+  };
   var setCaseList = function setCaseList(data) {
     var nextData = data.map(function (item) {
-      return _withSyncedQuotes(item);
+      return withSyncedQuotes(item);
     });
     var quotes = nextData.map(function (item) {
       return getItemDisplayText(item);
@@ -437,21 +510,160 @@ var FormulaList = forwardRef(function (props, ref) {
     nextList[index] = nextItem;
     setCaseList(nextList);
   };
-  var getPreviewStr = function getPreviewStr() {
+  var getFormulaSqlText = function getFormulaSqlText(result) {
+    var _ref3, _result$sql;
+    if (typeof result === 'string') return result;
+    if (!result) return '';
+    return String((_ref3 = (_result$sql = result.sql) !== null && _result$sql !== void 0 ? _result$sql : result.code) !== null && _ref3 !== void 0 ? _ref3 : '');
+  };
+  var getFormulaDiffData = function getFormulaDiffData(result) {
+    var _result$oldCode, _ref4, _result$newCode;
+    if (typeof result === 'string') {
+      return {
+        oldCode: '',
+        newCode: result
+      };
+    }
+    if (!result) {
+      return {
+        oldCode: '',
+        newCode: ''
+      };
+    }
+    return {
+      oldCode: String((_result$oldCode = result.oldCode) !== null && _result$oldCode !== void 0 ? _result$oldCode : ''),
+      newCode: String((_ref4 = (_result$newCode = result.newCode) !== null && _result$newCode !== void 0 ? _result$newCode : result.code) !== null && _ref4 !== void 0 ? _ref4 : '')
+    };
+  };
+  var normalizeFormulaValueForOutput = function normalizeFormulaValueForOutput() {
     var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    return data.map(function (v) {
-      if (v.type === AtomsTypeEnum.OPERATOR && (v.val === 'and' || v.val === 'or')) {
-        return "\r".concat(v.val, "\r");
-      }
-      if (v.type === AtomsTypeEnum.OPERATOR && (v.val === '(' || v.val === ')')) {
-        return "".concat(v.val);
-      }
-      return getItemDisplayText(v);
-    }).join(' ');
+    return data.map(function (item) {
+      return withSyncedQuotes(item);
+    });
   };
-  useEffect(function () {
-    setOldCode(getPreviewStr(caseList));
-  }, []);
+  var getCurrentFormulaValue = function getCurrentFormulaValue() {
+    return cloneDeep(normalizeFormulaValueForOutput(caseListRef.current || caseList || []));
+  };
+  var getInitialFormulaValue = function getInitialFormulaValue() {
+    return cloneDeep(normalizeFormulaValueForOutput(initialValueRef.current || []));
+  };
+  var showFormulaSql = function () {
+    var _ref5 = _asyncToGenerator(_regeneratorRuntime.mark(function _callee() {
+      var result, sql, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!hasFormulaSqlAction || sqlLoading)) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            setSqlLoading(true);
+            _context.prev = 2;
+            _context.next = 3;
+            return store.getFormulaSqlCode(getCurrentFormulaValue());
+          case 3:
+            result = _context.sent;
+            sql = getFormulaSqlText(result);
+            if (sql) {
+              _context.next = 4;
+              break;
+            }
+            Toast.warning('暂无可展示的SQL');
+            return _context.abrupt("return");
+          case 4:
+            openChildModal({
+              title: '查看SQL',
+              transparentMask: true,
+              content: _jsx("div", {
+                className: 'Sqb-FormulaSqlPreview  scroller',
+                children: _jsx(Code, {
+                  mode: 'code',
+                  language: 'sql',
+                  children: sql
+                })
+              }),
+              onClose: function onClose() {}
+            });
+            _context.next = 6;
+            break;
+          case 5:
+            _context.prev = 5;
+            _t = _context["catch"](2);
+            Toast.error('获取SQL失败');
+          case 6:
+            _context.prev = 6;
+            setSqlLoading(false);
+            return _context.finish(6);
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 5, 6, 7]]);
+    }));
+    return function showFormulaSql() {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var showFormulaDiff = function () {
+    var _ref6 = _asyncToGenerator(_regeneratorRuntime.mark(function _callee2() {
+      var result, _getFormulaDiffData, oldCode, newCode, _t2;
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(!hasFormulaDiffAction || diffLoading)) {
+              _context2.next = 1;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 1:
+            setDiffLoading(true);
+            _context2.prev = 2;
+            _context2.next = 3;
+            return store.getFormulaDiffCode({
+              oldValue: getInitialFormulaValue(),
+              newValue: getCurrentFormulaValue()
+            });
+          case 3:
+            result = _context2.sent;
+            _getFormulaDiffData = getFormulaDiffData(result), oldCode = _getFormulaDiffData.oldCode, newCode = _getFormulaDiffData.newCode;
+            if (!(!oldCode && !newCode)) {
+              _context2.next = 4;
+              break;
+            }
+            Toast.warning('暂无可展示的对比结果');
+            return _context2.abrupt("return");
+          case 4:
+            openChildModal({
+              title: '对比结果',
+              transparentMask: true,
+              content: _jsx(DiffViewer, {
+                oldCode: oldCode,
+                newCode: newCode
+              }),
+              onClose: function onClose() {}
+            });
+            _context2.next = 6;
+            break;
+          case 5:
+            _context2.prev = 5;
+            _t2 = _context2["catch"](2);
+            Toast.error('获取对比结果失败');
+          case 6:
+            _context2.prev = 6;
+            setDiffLoading(false);
+            return _context2.finish(6);
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 5, 6, 7]]);
+    }));
+    return function showFormulaDiff() {
+      return _ref6.apply(this, arguments);
+    };
+  }();
   var renderTokenContent = function renderTokenContent(children) {
     return _jsx("span", {
       className: 'Sqb-TokenContent',
@@ -475,7 +687,7 @@ var FormulaList = forwardRef(function (props, ref) {
         activeZoomRegionKey = _useState12[0],
         setActiveZoomRegionKey = _useState12[1];
       var updateDraftValue = function updateDraftValue(nextValue) {
-        setDraftValue(_withSyncedQuotes(nextValue));
+        setDraftValue(withSyncedQuotes(nextValue));
       };
       var handleOk = function handleOk() {
         var _modalInstance2, _modalInstance2$close;
@@ -636,7 +848,7 @@ var FormulaList = forwardRef(function (props, ref) {
         setDraftList = _useState14[1];
       var updateDraftList = function updateDraftList(nextList) {
         setDraftList(nextList.map(function (item) {
-          return _withSyncedQuotes(item);
+          return withSyncedQuotes(item);
         }));
       };
       var handleOk = function handleOk() {
@@ -841,38 +1053,66 @@ var FormulaList = forwardRef(function (props, ref) {
     });
   };
   var renderAndOrEditor = function renderAndOrEditor(value, index) {
-    var createUnknownAtom = function createUnknownAtom() {
-      return {
-        val: '',
-        type: AtomsTypeEnum.UNKNOWN
-      };
+    var items = normalizeAndOrItems(value);
+    var updateItems = function updateItems(nextItems) {
+      updateAtomAt(index, buildAndOrItem(value, nextItems));
     };
-    var leftAtoms = Array.isArray(value.leftAtoms) ? value.leftAtoms : value.atoms || [createUnknownAtom()];
-    var rightAtoms = Array.isArray(value.rightAtoms) ? value.rightAtoms : [createUnknownAtom()];
     return _jsx(LogicGroup, {
-      operator: value.operator || 'and',
-      onToggleOperator: function onToggleOperator() {
-        updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-          atoms: undefined,
-          leftAtoms: leftAtoms,
-          rightAtoms: rightAtoms,
-          operator: value.operator === 'or' ? 'and' : 'or'
-        }));
-      },
-      leftContent: renderNestedFormulaList(leftAtoms, function (nextList) {
-        updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-          atoms: undefined,
-          rightAtoms: rightAtoms,
-          leftAtoms: nextList
-        }));
-      }),
-      rightContent: renderNestedFormulaList(rightAtoms, function (nextList) {
-        updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-          atoms: undefined,
-          leftAtoms: leftAtoms,
-          rightAtoms: nextList
-        }));
+      items: items.map(function (item, itemIndex) {
+        return {
+          operator: item.operator,
+          content: renderNestedFormulaList(item.atoms, function (nextList) {
+            var nextItems = items.slice();
+            nextItems[itemIndex] = _objectSpread(_objectSpread({}, nextItems[itemIndex]), {}, {
+              atoms: nextList
+            });
+            updateItems(nextItems);
+          })
+        };
       }),
+      onChangeOperator: function onChangeOperator(itemIndex, operator) {
+        var nextItems = items.slice();
+        if (itemIndex <= 0 || !nextItems[itemIndex]) return;
+        nextItems[itemIndex] = _objectSpread(_objectSpread({}, nextItems[itemIndex]), {}, {
+          operator: operator
+        });
+        updateItems(nextItems);
+      },
+      onAddItem: function onAddItem() {
+        var nextItems = items.slice();
+        nextItems.push({
+          operator: 'and',
+          atoms: [createUnknownAtom()]
+        });
+        if (nextItems[0]) {
+          nextItems[0] = _objectSpread(_objectSpread({}, nextItems[0]), {}, {
+            operator: undefined
+          });
+        }
+        updateItems(nextItems);
+      },
+      onDeleteItem: function onDeleteItem(operatorIndex, side) {
+        if (items.length <= 2) return;
+        var nextItems = items.slice();
+        if (side === 'left') {
+          var _nextItems;
+          var previousOperator = (_nextItems = nextItems[operatorIndex - 1]) === null || _nextItems === void 0 ? void 0 : _nextItems.operator;
+          nextItems.splice(operatorIndex - 1, 1);
+          if (nextItems[operatorIndex - 1]) {
+            nextItems[operatorIndex - 1] = _objectSpread(_objectSpread({}, nextItems[operatorIndex - 1]), {}, {
+              operator: previousOperator
+            });
+          }
+        } else {
+          nextItems.splice(operatorIndex, 1);
+        }
+        if (nextItems[0]) {
+          nextItems[0] = _objectSpread(_objectSpread({}, nextItems[0]), {}, {
+            operator: undefined
+          });
+        }
+        updateItems(nextItems);
+      },
       onDelete: function onDelete(e) {
         return handleDel(e, index);
       }
@@ -1326,10 +1566,10 @@ var FormulaList = forwardRef(function (props, ref) {
       title: __('metabase.prompt'),
       content: __('customColumn.confirmDelete'),
       onOk: function () {
-        var _onOk = _asyncToGenerator(_regeneratorRuntime.mark(function _callee() {
+        var _onOk = _asyncToGenerator(_regeneratorRuntime.mark(function _callee3() {
           var selectedIndexSet, _caseList;
-          return _regeneratorRuntime.wrap(function (_context) {
-            while (1) switch (_context.prev = _context.next) {
+          return _regeneratorRuntime.wrap(function (_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
               case 0:
                 selectedIndexSet = new Set(selectedIndices);
                 _caseList = caseList.filter(function (_, index) {
@@ -1339,9 +1579,9 @@ var FormulaList = forwardRef(function (props, ref) {
                 initPaste();
               case 1:
               case "end":
-                return _context.stop();
+                return _context3.stop();
             }
-          }, _callee);
+          }, _callee3);
         }));
         function onOk() {
           return _onOk.apply(this, arguments);
@@ -1445,7 +1685,7 @@ var FormulaList = forwardRef(function (props, ref) {
     var _store$preProps = store.preProps,
       notExistsToolbar = _store$preProps.notExistsToolbar,
       toolbar = _store$preProps.toolbar,
-      other = _objectWithoutProperties(_store$preProps, _excluded);
+      other = _objectWithoutProperties(_store$preProps, _excluded2);
     var _value = ((_caseList$i = caseList[i]) === null || _caseList$i === void 0 ? void 0 : _caseList$i.notExists) || [];
     var oldList = cloneDeep(((_caseList$i2 = caseList[i]) === null || _caseList$i2 === void 0 ? void 0 : _caseList$i2.notExists) || []);
     var childModalZIndex = getTopLayerZIndex() + 1;
@@ -1493,7 +1733,7 @@ var FormulaList = forwardRef(function (props, ref) {
       showFields = _store$preProps2.showFields,
       isExit = _store$preProps2.isExit,
       toolbar = _store$preProps2.toolbar,
-      other = _objectWithoutProperties(_store$preProps2, _excluded2);
+      other = _objectWithoutProperties(_store$preProps2, _excluded3);
     var _value = ((_caseList$i3 = caseList[i]) === null || _caseList$i3 === void 0 ? void 0 : _caseList$i3.subQuery) || [];
     var oldList = cloneDeep(((_caseList$i4 = caseList[i]) === null || _caseList$i4 === void 0 ? void 0 : _caseList$i4.subQuery) || []);
     var childModalZIndex = getTopLayerZIndex() + 1;
@@ -2104,50 +2344,31 @@ var FormulaList = forwardRef(function (props, ref) {
           size: 'middle',
           className: 'preview-container',
           children: [_jsxs("div", {
+            className: 'Sqb-FormulaPreviewHeader',
             children: [_jsx("p", {
               children: "\u9884\u89C8\uFF1A"
-            }), _jsxs(Radio.Group, {
-              direction: 'vertical',
-              defaultValue: previewMode,
-              buttonStyle: 'solid',
-              type: 'button',
+            }), hasFormulaSqlAction && _jsx(Button, {
               size: 'small',
-              onChange: setPreviewMode,
-              children: [_jsx(Radio, {
-                value: 'code',
-                children: "\u9884\u89C8\u6A21\u5F0F"
-              }), _jsx(Radio, {
-                value: 'diff',
-                children: "\u6BD4\u5BF9\u6A21\u5F0F"
-              })]
-            })]
-          }), _jsxs("div", {
-            style: {
-              maxHeight: '700px',
-              overflow: 'auto',
-              wordBreak: 'break-word'
-            },
-            children: [previewMode === 'diff' && _jsx(DiffViewer, {
-              oldCode: oldCode,
-              newCode: getPreviewStr(caseList)
-            }), previewMode === 'code' && _jsx("div", {
-              className: cx({
-                isSqlError: errorInfo.isError
-              }),
-              children: caseList.map(function (v, i) {
-                return _jsx("span", {
-                  className: 'mr-1',
-                  children: getItemDisplayText(v)
-                }, i);
-              })
-            }), _jsx("div", {
-              className: 'errorMsg mt-2',
-              children: errorInfo.isError && _jsxs(_Fragment, {
-                children: ["\u63D0\u793A\uFF1A", _jsx("span", {
-                  children: errorInfo.error
-                })]
-              })
+              type: 'link',
+              loading: sqlLoading,
+              disabled: sqlLoading,
+              onClick: showFormulaSql,
+              children: "\u9884\u89C8SQL"
+            }), hasFormulaDiffAction && _jsx(Button, {
+              size: 'small',
+              type: 'link',
+              loading: diffLoading,
+              disabled: diffLoading,
+              onClick: showFormulaDiff,
+              children: "\u5BF9\u6BD4\u7ED3\u679C"
             })]
+          }), _jsx("div", {
+            className: 'errorMsg mt-2',
+            children: errorInfo.isError && _jsxs(_Fragment, {
+              children: ["\u63D0\u793A\uFF1A", _jsx("span", {
+                children: errorInfo.error
+              })]
+            })
           })]
         })
       })]