From c211f7df8e5d3ebe0d0424016354f27aef5882aa Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Tue, 22 Jun 2021 15:07:09 -0700
Subject: [PATCH] refactor: icon to icons in DatasourceEditor (#15240)

* intial commit

* lint

* fix test

* fix lint

* remove console.

* Removing pixel placement override.

Co-authored-by: Evan Rusackas <evan@preset.io>
---
 .../datasource/DatasourceEditor_spec.jsx          |  9 +++++----
 .../src/datasource/DatasourceEditor.jsx           | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
index 96d23eb63d..e430b9223d 100644
--- a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
+++ b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
@@ -27,6 +27,7 @@ import { render, screen } from 'spec/helpers/testing-library';
 import { Radio } from 'src/components/Radio';
 
 import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import Tabs from 'src/components/Tabs';
 import DatasourceEditor from 'src/datasource/DatasourceEditor';
 import Field from 'src/CRUD/Field';
@@ -174,8 +175,8 @@ describe('DatasourceEditor', () => {
       const sourceTab = wrapper.find(Tabs.TabPane).first();
       expect(sourceTab.find(Radio).first().prop('disabled')).toBe(false);
 
-      const icon = sourceTab.find(Icon);
-      expect(icon.prop('name')).toBe('lock-unlocked');
+      const icon = wrapper.find(Icons.LockUnlocked);
+      expect(icon).toExist();
 
       const tableSelector = sourceTab.find(Field).shallow().find(TableSelector);
       expect(tableSelector.length).toBe(1);
@@ -187,8 +188,8 @@ describe('DatasourceEditor', () => {
       expect(sourceTab.find(Radio).length).toBe(2);
       expect(sourceTab.find(Radio).first().prop('disabled')).toBe(true);
 
-      const icon = sourceTab.find(Icon);
-      expect(icon.prop('name')).toBe('lock-locked');
+      const icon = wrapper.find(Icons.LockLocked);
+      expect(icon).toExist();
       icon.parent().simulate('click');
       expect(wrapper.state('isEditMode')).toBe(true);
 
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
index c1ad4269ce..48cda77f43 100644
--- a/superset-frontend/src/datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -30,7 +30,6 @@ import Tabs from 'src/components/Tabs';
 import CertifiedIcon from 'src/components/CertifiedIcon';
 import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
 import DatabaseSelector from 'src/components/DatabaseSelector';
-import Icon from 'src/components/Icon';
 import Label from 'src/components/Label';
 import Loading from 'src/components/Loading';
 import TableSelector from 'src/components/TableSelector';
@@ -51,6 +50,7 @@ import Field from 'src/CRUD/Field';
 
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
+import Icons from 'src/components/Icons';
 
 const DatasourceContainer = styled.div`
   .change-warning {
@@ -842,10 +842,15 @@ class DatasourceEditor extends React.PureComponent {
         {this.allowEditSource && (
           <EditLockContainer>
             <span role="button" tabIndex={0} onClick={this.onChangeEditMode}>
-              <Icon
-                color={supersetTheme.colors.grayscale.base}
-                name={this.state.isEditMode ? 'lock-unlocked' : 'lock-locked'}
-              />
+              {this.state.isEditMode ? (
+                <Icons.LockUnlocked
+                  iconColor={supersetTheme.colors.grayscale.base}
+                />
+              ) : (
+                <Icons.LockLocked
+                  iconColor={supersetTheme.colors.grayscale.base}
+                />
+              )}
             </span>
             {!this.state.isEditMode && (
               <div>{t('Click the lock to make changes.')}</div>