code style fixes

superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx

@@ -1,27 +1,23 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { render, screen } from '@testing-library/react';
+import { render, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import AlteredSliceTag, {
   alterForComparison,
   formatValueHandler,
 } from 'src/components/AlteredSliceTag';
-import { ThemeProvider, supersetTheme } from '@superset-ui/core';
 import { defaultProps, expectedRows } from './AlteredSliceTagMocks';
 
-const renderWithTheme = ui =>
-  render(<ThemeProvider theme={supersetTheme}>{ui}</ThemeProvider>);
-
 describe('AlteredSliceTag', () => {
   it('renders the "Altered" label', () => {
-    renderWithTheme(<AlteredSliceTag {...defaultProps} />);
+    render(<AlteredSliceTag {...defaultProps} />);
 
     const alteredLabel = screen.getByText('Altered');
     expect(alteredLabel).toBeInTheDocument();
   });
 
   it('opens the modal on click', () => {
-    renderWithTheme(<AlteredSliceTag {...defaultProps} />);
+    render(<AlteredSliceTag {...defaultProps} />);
 
     const alteredLabel = screen.getByText('Altered');
     userEvent.click(alteredLabel);
@@ -31,7 +27,7 @@ describe('AlteredSliceTag', () => {
   });
 
   it('displays the differences in the modal', () => {
-    renderWithTheme(<AlteredSliceTag {...defaultProps} />);
+    render(<AlteredSliceTag {...defaultProps} />);
 
     const alteredLabel = screen.getByText('Altered');
     userEvent.click(alteredLabel);
@@ -43,7 +39,7 @@ describe('AlteredSliceTag', () => {
   });
 
   it('does not render anything if there are no differences', () => {
-    renderWithTheme(
+    render(
       <AlteredSliceTag
         {...defaultProps}
         currentFormData={defaultProps.origFormData}

superset-frontend/src/components/AlteredSliceTag/index.jsx

@@ -17,10 +17,10 @@
  * under the License.
  */
 
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { isEqual, isEmpty } from 'lodash';
-import { styled, t } from '@superset-ui/core';
+import { styled, t, usePrevious } from '@superset-ui/core';
 import { sanitizeFormData } from 'src/explore/exploreUtils/formData';
 import getControlsForVizType from 'src/utils/getControlsForVizType';
 import { safeStringify } from 'src/utils/safeStringify';
@@ -123,11 +123,11 @@ export const isEqualish = (val1, val2) =>
   isEqual(alterForComparison(val1), alterForComparison(val2));
 
 const AlteredSliceTag = props => {
-  const prevProps = useRef({});
+  const prevProps = usePrevious(props);
   const [rows, setRows] = useState([]);
   const [hasDiffs, setHasDiffs] = useState(false);
 
-  const getDiffs = useCallback(props => {
+  const getDiffs = useCallback(() => {
     // Returns all properties that differ in the
     // current form data and the saved form data
     const ofd = sanitizeFormData(props.origFormData);
@@ -147,33 +147,30 @@ const AlteredSliceTag = props => {
       }
     });
     return diffs;
-  }, []);
+  }, [props.currentFormData, props.origFormData]);
 
   useEffect(() => {
-    const diffs = getDiffs(props);
+    const diffs = getDiffs();
     const controlsMap = getControlsForVizType(props.origFormData?.viz_type);
-    const rows = getRowsFromDiffs(diffs, controlsMap);
-    const hasDiffs = !isEmpty(diffs);
-    setRows(rows);
-    setHasDiffs(hasDiffs);
-  }, []);
+    setRows(getRowsFromDiffs(diffs, controlsMap));
+    setHasDiffs(!isEmpty(diffs));
+  }, [getDiffs, props]);
 
   useEffect(() => {
-    const diffs = getDiffs(props);
+    const diffs = getDiffs();
 
-    const updateStateWithDiffs = newProps => {
-      if (isEqual(prevProps.current, newProps)) {
+    const updateStateWithDiffs = () => {
+      if (isEqual(prevProps, props)) {
         return;
       }
       setRows(prevRows => getRowsFromDiffs(diffs, prevRows));
       setHasDiffs(!isEmpty(diffs));
     };
 
-    updateStateWithDiffs(props);
-    prevProps.current = props;
-  }, [getDiffs, props]);
+    updateStateWithDiffs();
+  }, [getDiffs, props, prevProps]);
 
-  const renderModalBodyHandler = useCallback(() => {
+  const renderModalBody = useCallback(() => {
     const columns = [
       {
         accessor: 'control',
@@ -202,7 +199,7 @@ const AlteredSliceTag = props => {
     );
   }, [rows]);
 
-  const renderTriggerNodeHandler = useCallback(
+  const renderTriggerNode = useCallback(
     () => (
       <Tooltip id="difference-tooltip" title={t('Click to see difference')}>
         <StyledLabel className="label">{t('Altered')}</StyledLabel>
@@ -219,9 +216,9 @@ const AlteredSliceTag = props => {
   // differences in the slice
   return (
     <ModalTrigger
-      triggerNode={renderTriggerNodeHandler()}
+      triggerNode={renderTriggerNode()}
       modalTitle={t('Chart changes')}
-      modalBody={renderModalBodyHandler()}
+      modalBody={renderModalBody()}
       responsive
     />
   );