fix(sqllab): error while removing a referenced table (#25114)

(cherry picked from commit 29355577f1)

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

@@ -21,7 +21,7 @@ import { useDispatch } from 'react-redux';
 import Collapse from 'src/components/Collapse';
 import Card from 'src/components/Card';
 import ButtonGroup from 'src/components/ButtonGroup';
-import { css, t, styled } from '@superset-ui/core';
+import { css, t, styled, useTheme } from '@superset-ui/core';
 import { debounce } from 'lodash';
 
 import {
@@ -111,6 +111,7 @@ const StyledCollapsePanel = styled(Collapse.Panel)`
 
 const TableElement = ({ table, ...props }: TableElementProps) => {
   const { dbId, schema, name, expanded } = table;
+  const theme = useTheme();
   const dispatch = useDispatch();
   const {
     data: tableMetadata,
@@ -258,7 +259,13 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
       );
     }
     return (
-      <ButtonGroup className="ws-el-controls">
+      <ButtonGroup
+        css={css`
+          display: flex;
+          column-gap: ${theme.gridUnit * 1.5}px;
+          margin-right: ${theme.gridUnit}px;
+        `}
+      >
         {keyLink}
         <IconTooltip
           className={

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

@@ -184,6 +184,9 @@ export default function sqlLabReducer(state = {}, action) {
         if (action.query) {
           at.dataPreviewQueryId = action.query.id;
         }
+        if (existingTable.initialized) {
+          at.id = existingTable.id;
+        }
         return alterInArr(state, 'tables', existingTable, at);
       }
       // for new table, associate Id of query for data preview

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

@@ -248,6 +248,38 @@ describe('sqlLabReducer', () => {
       expect(newState.tables).toHaveLength(1);
       expect(newState.tables[0].extra).toBe(true);
     });
+    it('should overwrite table ID be ignored when the existing table is already initialized', () => {
+      const action = {
+        type: actions.MERGE_TABLE,
+        table: newTable,
+      };
+      newState = sqlLabReducer(newState, action);
+      expect(newState.tables).toHaveLength(1);
+      // Merging the initialized remote id
+      const remoteId = 1;
+      const syncAction = {
+        type: actions.MERGE_TABLE,
+        table: {
+          ...newTable,
+          id: remoteId,
+          initialized: true,
+        },
+      };
+      newState = sqlLabReducer(newState, syncAction);
+      expect(newState.tables).toHaveLength(1);
+      expect(newState.tables[0].initialized).toBe(true);
+      expect(newState.tables[0].id).toBe(remoteId);
+      const overwriteAction = {
+        type: actions.MERGE_TABLE,
+        table: {
+          id: 'rnd_new_id',
+          ...newTable,
+        },
+      };
+      newState = sqlLabReducer(newState, overwriteAction);
+      expect(newState.tables).toHaveLength(1);
+      expect(newState.tables[0].id).toBe(remoteId);
+    });
     it('should expand and collapse a table', () => {
       const collapseTableAction = {
         type: actions.COLLAPSE_TABLE,