fix(sqllab): autocomplete and delete tabs (#34781)

superset-frontend/src/SqlLab/components/SqlEditor/index.tsx

@@ -286,8 +286,6 @@ const SqlEditor: FC<Props> = ({
 
   const SqlFormExtension = extensionsRegistry.get('sqleditor.extension.form');
 
-  const isTempId = (value: unknown): boolean => Number.isNaN(Number(value));
-
   const startQuery = useCallback(
     (ctasArg = false, ctas_method = CtasEnum.Table) => {
       if (!database) {
@@ -979,9 +977,7 @@ const SqlEditor: FC<Props> = ({
               {({ height }) =>
                 isActive && (
                   <AceEditorWrapper
-                    autocomplete={
-                      autocompleteEnabled && !isTempId(queryEditor.id)
-                    }
+                    autocomplete={autocompleteEnabled}
                     onBlur={onSqlChanged}
                     onChange={onSqlChanged}
                     queryEditorId={queryEditor.id}

superset-frontend/src/SqlLab/reducers/getInitialState.ts

@@ -163,7 +163,10 @@ export default function getInitialState({
     if (localStorageData && sqlLabCacheData?.sqlLab) {
       const { sqlLab } = sqlLabCacheData;
 
-      if (sqlLab.queryEditors.length === 0) {
+      if (
+        sqlLab.queryEditors.length === 0 &&
+        Object.keys(sqlLab.destroyedQueryEditors ?? {}).length === 0
+      ) {
         // migration was successful
         localStorage.removeItem('redux');
       } else {
@@ -221,18 +224,21 @@ export default function getInitialState({
           });
         }
         if (sqlLab.tabHistory) {
-          tabHistory.push(...sqlLab.tabHistory);
+          tabHistory.push(
+            ...sqlLab.tabHistory.filter(
+              tabId => !sqlLab.destroyedQueryEditors?.[tabId],
+            ),
+          );
         }
-        lastUpdatedActiveTab = tabHistory.slice(tabHistory.length - 1)[0] || '';
-
         if (sqlLab.destroyedQueryEditors) {
           Object.entries(sqlLab.destroyedQueryEditors).forEach(([id, ts]) => {
+            destroyedQueryEditors[id] = ts;
             if (queryEditors[id]) {
-              destroyedQueryEditors[id] = ts;
               delete queryEditors[id];
             }
           });
         }
+        lastUpdatedActiveTab = tabHistory.slice(tabHistory.length - 1)[0] || '';
       }
     }
   } catch (error) {

superset-frontend/src/SqlLab/reducers/sqlLab.js

@@ -135,7 +135,7 @@ export default function sqlLabReducer(state = {}, action) {
       };
       let newState = removeFromArr(state, 'queryEditors', queryEditor);
       // List of remaining queryEditor ids
-      const qeIds = newState.queryEditors.map(qe => qe.id);
+      const qeIds = newState.queryEditors.map(qe => qe.tabViewId ?? qe.id);
 
       const queries = {};
       Object.keys(state.queries).forEach(k => {
@@ -150,7 +150,8 @@ export default function sqlLabReducer(state = {}, action) {
 
       // Remove associated table schemas
       const tables = state.tables.filter(
-        table => table.queryEditorId !== queryEditor.id,
+        table =>
+          table.queryEditorId !== (queryEditor.tabViewId ?? queryEditor.id),
       );
 
       newState = {
@@ -167,7 +168,9 @@ export default function sqlLabReducer(state = {}, action) {
         },
         destroyedQueryEditors: {
           ...newState.destroyedQueryEditors,
-          ...(!queryEditor.inLocalStorage && { [queryEditor.id]: Date.now() }),
+          ...(!queryEditor.inLocalStorage && {
+            [queryEditor.tabViewId ?? queryEditor.id]: Date.now(),
+          }),
         },
       };
       return newState;

superset-frontend/src/SqlLab/reducers/sqlLab.test.js

@@ -240,11 +240,13 @@ describe('sqlLabReducer', () => {
       );
     });
     it('should migrate query editor by new query editor id', () => {
+      const { length } = newState.queryEditors;
       const index = newState.queryEditors.findIndex(({ id }) => id === qe.id);
       const newQueryEditor = {
         ...qe,
-        id: 'updatedNewId',
+        tabViewId: 'updatedNewId',
         schema: 'updatedSchema',
+        inLocalStorage: false,
       };
       const action = {
         type: actions.MIGRATE_QUERY_EDITOR,
@@ -252,8 +254,18 @@ describe('sqlLabReducer', () => {
         newQueryEditor,
       };
       newState = sqlLabReducer(newState, action);
-      expect(newState.queryEditors[index].id).toEqual('updatedNewId');
+      expect(newState.queryEditors[index].id).toEqual(qe.id);
+      expect(newState.queryEditors[index].tabViewId).toEqual('updatedNewId');
       expect(newState.queryEditors[index]).toEqual(newQueryEditor);
+      const removeAction = {
+        type: actions.REMOVE_QUERY_EDITOR,
+        queryEditor: newQueryEditor,
+      };
+      newState = sqlLabReducer(newState, removeAction);
+      expect(newState.queryEditors).toHaveLength(length - 1);
+      expect(Object.keys(newState.destroyedQueryEditors)).toContain(
+        newQueryEditor.tabViewId,
+      );
     });
     it('should clear the destroyed query editors', () => {
       const expectedQEId = '1233289';