fix(DashboardEditor): CSS template selector UI in dashboard properties modal restored (#35106)

Author: rebenitez1802

superset-frontend/package-lock.json

@@ -715,6 +715,7 @@ const PropertiesModal = ({
                   onThemeChange={handleThemeChange}
                   onColorSchemeChange={onColorSchemeChange}
                   onCustomCssChange={setCustomCss}
+                  addDangerToast={addDangerToast}
                 />
               ),
             },

superset-frontend/src/dashboard/components/PropertiesModal/index.tsx

@@ -16,9 +16,29 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render, screen, userEvent } from 'spec/helpers/testing-library';
+import {
+  render,
+  screen,
+  userEvent,
+  waitFor,
+} from 'spec/helpers/testing-library';
+import { SupersetClient, isFeatureEnabled } from '@superset-ui/core';
 import StylingSection from './StylingSection';
 
+// Mock SupersetClient
+jest.mock('@superset-ui/core', () => ({
+  ...jest.requireActual('@superset-ui/core'),
+  SupersetClient: {
+    get: jest.fn(),
+  },
+  isFeatureEnabled: jest.fn(),
+}));
+
+const mockSupersetClient = SupersetClient as jest.Mocked<typeof SupersetClient>;
+const mockIsFeatureEnabled = isFeatureEnabled as jest.MockedFunction<
+  typeof isFeatureEnabled
+>;
+
 // Mock ColorSchemeSelect component
 jest.mock('src/dashboard/components/ColorSchemeSelect', () => ({
   __esModule: true,
@@ -33,6 +53,14 @@ jest.mock('src/dashboard/components/ColorSchemeSelect', () => ({
   ),
 }));
 
+const mockCssTemplates = [
+  { template_name: 'Corporate Blue', css: '.dashboard { background: blue; }' },
+  {
+    template_name: 'Modern Dark',
+    css: '.dashboard { background: black; color: white; }',
+  },
+];
+
 const defaultProps = {
   themes: [
     { id: 1, theme_name: 'Dark Theme' },
@@ -45,10 +73,17 @@ const defaultProps = {
   onThemeChange: jest.fn(),
   onColorSchemeChange: jest.fn(),
   onCustomCssChange: jest.fn(),
+  addDangerToast: jest.fn(),
 };
 
 beforeEach(() => {
   jest.clearAllMocks();
+  // Reset mocks
+  mockIsFeatureEnabled.mockReturnValue(false);
+  mockSupersetClient.get.mockResolvedValue({
+    json: { result: mockCssTemplates },
+    response: {} as Response,
+  });
 });
 
 test('renders theme selection when themes are available', () => {
@@ -120,3 +155,76 @@ test('displays current color scheme value', () => {
   const colorSchemeInput = screen.getByLabelText('Select color scheme');
   expect(colorSchemeInput).toHaveValue('testColors');
 });
+
+// CSS Template Tests
+describe('CSS Template functionality', () => {
+  test('does not show CSS template select when feature flag is disabled', () => {
+    mockIsFeatureEnabled.mockReturnValue(false);
+    render(<StylingSection {...defaultProps} />);
+
+    expect(
+      screen.queryByTestId('dashboard-css-template-field'),
+    ).not.toBeInTheDocument();
+  });
+
+  test('fetches CSS templates on mount when feature enabled', async () => {
+    mockIsFeatureEnabled.mockImplementation(flag => flag === 'CSS_TEMPLATES');
+    render(<StylingSection {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(mockSupersetClient.get).toHaveBeenCalledWith({
+        endpoint: expect.stringContaining('/api/v1/css_template/'),
+      });
+    });
+  });
+
+  test('shows CSS template select when feature flag is enabled and templates exist', async () => {
+    mockIsFeatureEnabled.mockImplementation(flag => flag === 'CSS_TEMPLATES');
+    render(<StylingSection {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Load CSS template (optional)'),
+      ).toBeInTheDocument();
+    });
+
+    expect(
+      screen.getByTestId('dashboard-css-template-select'),
+    ).toBeInTheDocument();
+  });
+
+  test('shows error toast when template fetch fails', async () => {
+    mockIsFeatureEnabled.mockImplementation(flag => flag === 'CSS_TEMPLATES');
+    const addDangerToast = jest.fn();
+    mockSupersetClient.get.mockRejectedValueOnce(new Error('API Error'));
+
+    render(
+      <StylingSection {...defaultProps} addDangerToast={addDangerToast} />,
+    );
+
+    await waitFor(() => {
+      expect(addDangerToast).toHaveBeenCalledWith(
+        'An error occurred while fetching available CSS templates',
+      );
+    });
+  });
+
+  test('does not show CSS template select when no templates available', async () => {
+    mockIsFeatureEnabled.mockImplementation(flag => flag === 'CSS_TEMPLATES');
+    mockSupersetClient.get.mockResolvedValueOnce({
+      json: { result: [] },
+      response: {} as Response,
+    });
+
+    render(<StylingSection {...defaultProps} />);
+
+    // Wait for fetch to complete
+    await waitFor(() => {
+      expect(mockSupersetClient.get).toHaveBeenCalled();
+    });
+
+    expect(
+      screen.queryByTestId('dashboard-css-template-field'),
+    ).not.toBeInTheDocument();
+  });
+});