From 0c8420305368e1ea54deb48535dff77b2c84ba38 Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Tue, 16 Aug 2022 10:55:27 -0300
Subject: [PATCH] fix: Unable to sync columns when dataset name has '+'
 (#21019)

---
 .../src/components/Datasource/DatasourceEditor.jsx   |  4 +++-
 .../components/Datasource/DatasourceEditor.test.jsx  | 12 ++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index bf524c22101..260cf5eab73 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -741,7 +741,9 @@ class DatasourceEditor extends React.PureComponent {
       database_name:
         datasource.database.database_name || datasource.database.name,
       schema_name: datasource.schema,
-      table_name: datasource.table_name,
+      table_name: datasource.table_name
+        ? encodeURIComponent(datasource.table_name)
+        : datasource.table_name,
     };
     Object.entries(params).forEach(([key, value]) => {
       // rison can't encode the undefined value
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
index 7ad7b9f9a84..b6e43d29135 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
@@ -39,7 +39,12 @@ describe('DatasourceEditor', () => {
   let isFeatureEnabledMock;
 
   beforeEach(() => {
-    el = <DatasourceEditor {...props} />;
+    el = (
+      <DatasourceEditor
+        {...props}
+        datasource={{ ...props.datasource, table_name: 'Vehicle Sales +' }}
+      />
+    );
     render(el, { useRedux: true });
   });
 
@@ -51,7 +56,7 @@ describe('DatasourceEditor', () => {
     expect(screen.getByTestId('edit-dataset-tabs')).toBeInTheDocument();
   });
 
-  it('makes an async request', () =>
+  it('can sync columns from source', () =>
     new Promise(done => {
       const columnsTab = screen.getByTestId('collection-tab-Columns');
 
@@ -63,6 +68,9 @@ describe('DatasourceEditor', () => {
 
       setTimeout(() => {
         expect(fetchMock.calls(DATASOURCE_ENDPOINT)).toHaveLength(1);
+        expect(fetchMock.calls(DATASOURCE_ENDPOINT)[0][0]).toContain(
+          'Vehicle%20Sales%20%2B%27',
+        );
         fetchMock.reset();
         done();
       }, 0);