feat(listview): set default view mode based on THUMBNAIL feature flag (#10691)

* feat(listview): set default view mode based on THUMBNAIL feature flag

* add spec

* better generic typing for ListView

* lint

* fix specs

superset-frontend/spec/javascripts/components/ListView/ListView_spec.jsx

@@ -292,13 +292,13 @@ describe('ListView', () => {
     );
   });
 
-  it('disable card view based on prop', async () => {
+  it('disables card view based on prop', async () => {
     expect(wrapper.find(CardCollection).exists()).toBe(false);
     expect(wrapper.find(CardSortSelect).exists()).toBe(false);
     expect(wrapper.find(TableCollection).exists()).toBe(true);
   });
 
-  it('enable card view based on prop', async () => {
+  it('enables card view based on prop', async () => {
     const wrapper2 = factory({
       ...mockedProps,
       renderCard: jest.fn(),
@@ -310,6 +310,26 @@ describe('ListView', () => {
     expect(wrapper2.find(TableCollection).exists()).toBe(false);
   });
 
+  it('allows setting the default view mode', async () => {
+    const wrapper2 = factory({
+      ...mockedProps,
+      renderCard: jest.fn(),
+      defaultViewMode: 'card',
+      initialSort: [{ id: 'something' }],
+    });
+    await waitForComponentToPaint(wrapper2);
+    expect(wrapper2.find(CardCollection).exists()).toBe(true);
+
+    const wrapper3 = factory({
+      ...mockedProps,
+      renderCard: jest.fn(),
+      defaultViewMode: 'table',
+      initialSort: [{ id: 'something' }],
+    });
+    await waitForComponentToPaint(wrapper3);
+    expect(wrapper3.find(TableCollection).exists()).toBe(true);
+  });
+
   it('Throws an exception if filter missing in columns', () => {
     expect.assertions(1);
     const props = {

superset-frontend/spec/javascripts/views/CRUD/chart/ChartList_spec.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
+import * as featureFlags from 'src/featureFlags';
 
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import { styledMount as mount } from 'spec/helpers/theming';
@@ -75,6 +76,13 @@ global.URL.createObjectURL = jest.fn();
 fetchMock.get('/thumbnail', { body: new Blob(), sendAsJson: false });
 
 describe('ChartList', () => {
+  const isFeatureEnabledMock = jest
+    .spyOn(featureFlags, 'isFeatureEnabled')
+    .mockImplementation(feature => feature === 'THUMBNAILS');
+
+  afterAll(() => {
+    isFeatureEnabledMock.restore();
+  });
   const mockedProps = {};
   const wrapper = mount(<ChartList {...mockedProps} />, {
     context: { store },

superset-frontend/spec/javascripts/views/CRUD/dashboard/DashboardList_spec.jsx

@@ -20,6 +20,7 @@ import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
+import * as featureFlags from 'src/featureFlags';
 
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import { styledMount as mount } from 'spec/helpers/theming';
@@ -67,6 +68,14 @@ global.URL.createObjectURL = jest.fn();
 fetchMock.get('/thumbnail', { body: new Blob(), sendAsJson: false });
 
 describe('DashboardList', () => {
+  const isFeatureEnabledMock = jest
+    .spyOn(featureFlags, 'isFeatureEnabled')
+    .mockImplementation(feature => feature === 'THUMBNAILS');
+
+  afterAll(() => {
+    isFeatureEnabledMock.restore();
+  });
+
   const mockedProps = {};
   const wrapper = mount(<DashboardList {...mockedProps} />, {
     context: { store },