From a0179ac513278cd5abc8d56162c6efbd04dc1dd8 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Tue, 29 Jun 2021 00:32:17 -0700
Subject: [PATCH] refactor: icon to icons for inderteminatecheckbox icon
 (#15397)

* initial commit

* fix cypress tests

* Update superset-frontend/src/components/IndeterminateCheckbox/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 .../integration/chart_list/list_view.test.ts  |  6 ++---
 .../dashboard_list/list_view.test.ts          |  6 ++---
 .../IndeterminateCheckbox/index.tsx           | 22 ++++++++++++++-----
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts b/superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts
index 915bf15f0a..7b51e984e2 100644
--- a/superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts
@@ -51,11 +51,11 @@ describe('chart list view', () => {
   it('should bulk delete correctly', () => {
     cy.get('[data-test="listview-table"]').should('be.visible');
     cy.get('[data-test="bulk-select"]').eq(0).click();
-    cy.get('[data-test="checkbox-off"]').eq(1).siblings('input').click();
-    cy.get('[data-test="checkbox-off"]').eq(2).siblings('input').click();
+    cy.get('[aria-label="checkbox-off"]').eq(1).siblings('input').click();
+    cy.get('[aria-label="checkbox-off"]').eq(2).siblings('input').click();
     cy.get('[data-test="bulk-select-action"]').eq(0).click();
     cy.get('[data-test="delete-modal-input"]').eq(0).type('DELETE');
     cy.get('[data-test="modal-confirm-button"]').eq(0).click();
-    cy.get('[data-test="checkbox-on"]').should('not.exist');
+    cy.get('[aria-label="checkbox-on"]').should('not.exist');
   });
 });
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard_list/list_view.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard_list/list_view.test.ts
index 924cf84b6e..045d43c4c5 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard_list/list_view.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard_list/list_view.test.ts
@@ -51,11 +51,11 @@ describe('dashboard list view', () => {
   it('should bulk delete correctly', () => {
     cy.get('[data-test="listview-table"]').should('be.visible');
     cy.get('[data-test="bulk-select"]').eq(0).click();
-    cy.get('[data-test="checkbox-off"]').eq(1).siblings('input').click();
-    cy.get('[data-test="checkbox-off"]').eq(2).siblings('input').click();
+    cy.get('[aria-label="checkbox-off"]').eq(1).siblings('input').click();
+    cy.get('[aria-label="checkbox-off"]').eq(2).siblings('input').click();
     cy.get('[data-test="bulk-select-action"]').eq(0).click();
     cy.get('[data-test="delete-modal-input"]').eq(0).type('DELETE');
     cy.get('[data-test="modal-confirm-button"]').eq(0).click();
-    cy.get('[data-test="checkbox-on"]').should('not.exist');
+    cy.get('[aria-label="checkbox-on"]').should('not.exist');
   });
 });
diff --git a/superset-frontend/src/components/IndeterminateCheckbox/index.tsx b/superset-frontend/src/components/IndeterminateCheckbox/index.tsx
index 4056cac14b..b29b243775 100644
--- a/superset-frontend/src/components/IndeterminateCheckbox/index.tsx
+++ b/superset-frontend/src/components/IndeterminateCheckbox/index.tsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { styled } from '@superset-ui/core';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 
 export interface IndeterminateCheckboxProps {
   indeterminate: boolean;
@@ -35,8 +35,18 @@ const CheckboxLabel = styled.label`
   margin-bottom: 0;
 `;
 
-const IconWithColor = styled(Icon)`
-  color: ${({ theme }) => theme.colors.primary.dark1};
+const CheckboxHalf = styled(Icons.CheckboxHalf)`
+  color: ${({ theme }) => theme.colors.primary.base};
+  cursor: pointer;
+`;
+
+const CheckboxOff = styled(Icons.CheckboxOff)`
+  color: ${({ theme }) => theme.colors.grayscale.base};
+  cursor: pointer;
+`;
+
+const CheckboxOn = styled(Icons.CheckboxOn)`
+  color: ${({ theme }) => theme.colors.primary.base};
   cursor: pointer;
 `;
 
@@ -79,9 +89,9 @@ const IndeterminateCheckbox = React.forwardRef(
     return (
       <>
         <InputContainer>
-          {indeterminate && <IconWithColor name="checkbox-half" />}
-          {!indeterminate && checked && <IconWithColor name="checkbox-on" />}
-          {!indeterminate && !checked && <Icon name="checkbox-off" />}
+          {indeterminate && <CheckboxHalf />}
+          {!indeterminate && checked && <CheckboxOn />}
+          {!indeterminate && !checked && <CheckboxOff />}
           <HiddenInput
             name={id}
             id={id}