fix: preventing save button from flickering in SQL Lab (#25106)

apache · Sep 26, 2023 · 296ff17 · 296ff17
1 parent 52eba11
commit 296ff17
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx b/superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx
@@ -27,7 +27,7 @@ import { initialState, databases } from 'src/SqlLab/fixtures';
 const mockedProps = {
   queryEditorId: '123',
   animation: false,
-  database: databases.result[0],
+  database: { ...databases.result[0], allows_virtual_table_explore: false },
   onUpdate: () => {},
   onSave: () => {},
   saveQueryWarning: null,
@@ -61,6 +61,25 @@ const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
 
 describe('SavedQuery', () => {
+  it('doesnt render save button when allows_virtual_table_explore is undefined', async () => {
+    const noRenderProps = {
+      ...mockedProps,
+      database: {
+        ...mockedProps.database,
+        allows_virtual_table_explore: undefined,
+      },
+    };
+    render(<SaveQuery {...noRenderProps} />, {
+      useRedux: true,
+      store: mockStore(mockState),
+    });
+    expect(() => {
+      screen.getByRole('button', { name: /save/i });
+    }).toThrow(
+      'Unable to find an accessible element with the role "button" and name `/save/i`',
+    );
+  });
+
   it('renders a non-split save button when allows_virtual_table_explore is not enabled', () => {
     render(<SaveQuery {...mockedProps} />, {
       useRedux: true,

diff --git a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
@@ -98,6 +98,8 @@ const SaveQuery = ({
   const [showSaveDatasetModal, setShowSaveDatasetModal] = useState(false);
   const isSaved = !!query.remoteId;
   const canExploreDatabase = !!database?.allows_virtual_table_explore;
+  const shouldShowSaveButton =
+    database?.allows_virtual_table_explore !== undefined;
 
   const overlayMenu = (
     <Menu>
@@ -180,10 +182,12 @@ const SaveQuery = ({
 
   return (
     <Styles className="SaveQuery">
-      <SaveDatasetActionButton
-        setShowSave={setShowSave}
-        overlayMenu={canExploreDatabase ? overlayMenu : null}
-      />
+      {shouldShowSaveButton && (
+        <SaveDatasetActionButton
+          setShowSave={setShowSave}
+          overlayMenu={canExploreDatabase ? overlayMenu : null}
+        />
+      )}
       <SaveDatasetModal
         visible={showSaveDatasetModal}
         onHide={() => setShowSaveDatasetModal(false)}