From 12262cd43fcb2b1bb9a2fed4849ac554ae8247cb Mon Sep 17 00:00:00 2001
From: Renderz <464816158@qq.com>
Date: Mon, 6 Jun 2022 16:28:22 +0800
Subject: [PATCH 1/4] fix(cosmetic): cannot find m-r-10 class in superset.less

---
 superset-frontend/src/assets/stylesheets/superset.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/superset-frontend/src/assets/stylesheets/superset.less b/superset-frontend/src/assets/stylesheets/superset.less
index 0cf419b30d190..7d69734c76ebf 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less
+++ b/superset-frontend/src/assets/stylesheets/superset.less
@@ -307,6 +307,10 @@ table.table-no-hover tr:hover {
   margin-right: 3px;
 }
 
+.m-r-10 {
+  margin-right: 10px;
+}
+
 .m-t-4 {
   margin-top: 4px;
 }

From 97b971d706e0510e0f87e9af18ea541f17f4d939 Mon Sep 17 00:00:00 2001
From: Renderz <464816158@qq.com>
Date: Wed, 15 Jun 2022 10:11:20 +0800
Subject: [PATCH 2/4] fix: remove .m-r-10 class and use emotion instead

---
 superset-frontend/src/assets/stylesheets/superset.less   | 4 ----
 .../src/components/Datasource/CollectionTable.tsx        | 9 +++++++--
 .../src/components/Datasource/DatasourceEditor.jsx       | 9 +++++++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/src/assets/stylesheets/superset.less b/superset-frontend/src/assets/stylesheets/superset.less
index 7d69734c76ebf..0cf419b30d190 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less
+++ b/superset-frontend/src/assets/stylesheets/superset.less
@@ -307,10 +307,6 @@ table.table-no-hover tr:hover {
   margin-right: 3px;
 }
 
-.m-r-10 {
-  margin-right: 10px;
-}
-
 .m-t-4 {
   margin-top: 4px;
 }
diff --git a/superset-frontend/src/components/Datasource/CollectionTable.tsx b/superset-frontend/src/components/Datasource/CollectionTable.tsx
index 7ce0bfb95fbdc..ac0ba1fd36fe8 100644
--- a/superset-frontend/src/components/Datasource/CollectionTable.tsx
+++ b/superset-frontend/src/components/Datasource/CollectionTable.tsx
@@ -130,6 +130,11 @@ const CrudButtonWrapper = styled.div`
   ${({ theme }) => `margin-bottom: ${theme.gridUnit * 2}px`}
 `;
 
+const StyledButtonWrapper = styled.span`
+  margin-top: 10px;
+  margin-left: 10px;
+`;
+
 export default class CRUDCollection extends React.PureComponent<
   CRUDCollectionProps,
   CRUDCollectionState
@@ -424,7 +429,7 @@ export default class CRUDCollection extends React.PureComponent<
       <>
         <CrudButtonWrapper>
           {this.props.allowAddItem && (
-            <span className="m-t-10 m-r-10">
+            <StyledButtonWrapper>
               <Button
                 buttonSize="small"
                 buttonStyle="tertiary"
@@ -434,7 +439,7 @@ export default class CRUDCollection extends React.PureComponent<
                 <i data-test="crud-add-table-item" className="fa fa-plus" />{' '}
                 {t('Add item')}
               </Button>
-            </span>
+            </StyledButtonWrapper>
           )}
         </CrudButtonWrapper>
         <CrudTableWrapper
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index afa47ea80b984..9c1e1ce5fb6aa 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -123,6 +123,11 @@ const StyledColumnsTabWrapper = styled.div`
   }
 `;
 
+const StyledButtonWrapper = styled.span`
+  margin-top: 10px;
+  margin-left: 10px;
+`;
+
 const checkboxGenerator = (d, onChange) => (
   <CheckboxControl value={d} onChange={onChange} />
 );
@@ -1358,7 +1363,7 @@ class DatasourceEditor extends React.PureComponent {
           >
             <StyledColumnsTabWrapper>
               <ColumnButtonWrapper>
-                <span className="m-t-10 m-r-10">
+                <StyledButtonWrapper>
                   <Button
                     buttonSize="small"
                     buttonStyle="tertiary"
@@ -1369,7 +1374,7 @@ class DatasourceEditor extends React.PureComponent {
                     <i className="fa fa-database" />{' '}
                     {t('Sync columns from source')}
                   </Button>
-                </span>
+                </StyledButtonWrapper>
               </ColumnButtonWrapper>
               <ColumnCollectionTable
                 className="columns-table"

From 8d11d4e77598054703a08481d3f4ae8f58449062 Mon Sep 17 00:00:00 2001
From: jiAng <464816158@qq.com>
Date: Fri, 17 Jun 2022 09:11:10 +0800
Subject: [PATCH 3/4] Update
 superset-frontend/src/components/Datasource/CollectionTable.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 .../src/components/Datasource/CollectionTable.tsx           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/components/Datasource/CollectionTable.tsx b/superset-frontend/src/components/Datasource/CollectionTable.tsx
index ac0ba1fd36fe8..194d3765792c9 100644
--- a/superset-frontend/src/components/Datasource/CollectionTable.tsx
+++ b/superset-frontend/src/components/Datasource/CollectionTable.tsx
@@ -131,8 +131,10 @@ const CrudButtonWrapper = styled.div`
 `;
 
 const StyledButtonWrapper = styled.span`
-  margin-top: 10px;
-  margin-left: 10px;
+  ${({ theme }) => `
+    margin-top: ${theme.gridUnit * 3}px;
+    margin-left: ${theme.gridUnit * 3}px;
+  `}
 `;
 
 export default class CRUDCollection extends React.PureComponent<

From fdbf0d71545f2eab475a4ee7c9ecb3dc4193114b Mon Sep 17 00:00:00 2001
From: jiAng <464816158@qq.com>
Date: Fri, 17 Jun 2022 09:11:15 +0800
Subject: [PATCH 4/4] Update
 superset-frontend/src/components/Datasource/DatasourceEditor.jsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 .../src/components/Datasource/DatasourceEditor.jsx          | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index 9c1e1ce5fb6aa..32eac781b794c 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -124,8 +124,10 @@ const StyledColumnsTabWrapper = styled.div`
 `;
 
 const StyledButtonWrapper = styled.span`
-  margin-top: 10px;
-  margin-left: 10px;
+  ${({ theme }) => `
+    margin-top: ${theme.gridUnit * 3}px;
+    margin-left: ${theme.gridUnit * 3}px;
+  `}
 `;
 
 const checkboxGenerator = (d, onChange) => (