From 4a835a4299bbe90def232e376f919bc494b2d0a1 Mon Sep 17 00:00:00 2001
From: smileydev <47900232+prosdev0107@users.noreply.github.com>
Date: Wed, 27 Apr 2022 12:57:15 -0400
Subject: [PATCH] fix(dashboard-css): make to load saved css template (#19840)

* fix(dashboard-css): make to load saved css template

* fix(dashboard-css): make to update state css with componentDidMount

* fix(dashobard-css): make to inject custom css after updateCss

* fix(dashboard-css): make to add RTL for custom css

* fix(dashboard-css): make to fix lint issue
---
 .../HeaderActionsDropdown.test.tsx            | 28 +++++++++++++++++++
 .../Header/HeaderActionsDropdown/index.jsx    | 11 ++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
index d1f87ec999e0c..57fe7a1333973 100644
--- a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
+++ b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/HeaderActionsDropdown.test.tsx
@@ -17,6 +17,8 @@
  * under the License.
  */
 import React from 'react';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
 import { render, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
@@ -202,3 +204,29 @@ test('should show the properties modal', async () => {
   userEvent.click(screen.getByText('Edit dashboard properties'));
   expect(editModeOnProps.showPropertiesModal).toHaveBeenCalledTimes(1);
 });
+
+describe('UNSAFE_componentWillReceiveProps', () => {
+  let wrapper: any;
+  const mockedProps = createProps();
+  const props = { ...mockedProps, customCss: '' };
+
+  beforeEach(() => {
+    wrapper = shallow(<HeaderActionsDropdown {...props} />);
+    wrapper.setState({ css: props.customCss });
+    sinon.spy(wrapper.instance(), 'setState');
+  });
+
+  afterEach(() => {
+    wrapper.instance().setState.restore();
+  });
+
+  it('css should update state and inject custom css', () => {
+    wrapper.instance().UNSAFE_componentWillReceiveProps({
+      ...props,
+      customCss: mockedProps.customCss,
+    });
+    expect(wrapper.instance().setState.calledOnce).toBe(true);
+    const stateKeys = Object.keys(wrapper.instance().setState.lastCall.args[0]);
+    expect(stateKeys).toContain('css');
+  });
+});
diff --git a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
index 619e10ea22e80..45946ecc8fa13 100644
--- a/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx
@@ -136,10 +136,15 @@ class HeaderActionsDropdown extends React.PureComponent {
       });
   }
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.customCss !== nextProps.customCss) {
+      this.setState({ css: nextProps.customCss }, () => {
+        injectCustomCss(nextProps.customCss);
+      });
+    }
+  }
+
   changeCss(css) {
-    this.setState({ css }, () => {
-      injectCustomCss(css);
-    });
     this.props.onChange();
     this.props.updateCss(css);
   }