chore(toggle thumbnails): use localstorage for toggle (#14013)

* use localstorage for toggle

* fix lint

* add check

superset-frontend/src/views/CRUD/chart/ChartCard.tsx

@@ -45,7 +45,6 @@ interface ChartCardProps {
   chartFilter?: string;
   userId?: number;
   showThumbnails?: boolean;
-  featureFlag?: boolean;
 }
 
 export default function ChartCard({
@@ -62,7 +61,6 @@ export default function ChartCard({
   favoriteStatus,
   chartFilter,
   userId,
-  featureFlag,
 }: ChartCardProps) {
   const canEdit = hasPerm('can_write');
   const canDelete = hasPerm('can_write');
@@ -142,7 +140,11 @@ export default function ChartCard({
       <ListViewCard
         loading={loading}
         title={chart.slice_name}
-        cover={!featureFlag || !showThumbnails ? <></> : null}
+        cover={
+          !isFeatureEnabled(FeatureFlag.THUMBNAILS) || !showThumbnails ? (
+            <></>
+          ) : null
+        }
         url={bulkSelectEnabled ? undefined : chart.url}
         imgURL={chart.thumbnail_url || ''}
         imgFallbackURL="/static/assets/images/chart-card-fallback.svg"

superset-frontend/src/views/CRUD/chart/ChartList.tsx

@@ -46,6 +46,7 @@ import ListView, {
   SelectOption,
   FilterOperators,
 } from 'src/components/ListView';
+import { getFromLocalStorage } from 'src/utils/localStorageHelpers';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import PropertiesModal from 'src/explore/components/PropertiesModal';
 import ImportModelsModal from 'src/components/ImportModal/index';
@@ -506,9 +507,16 @@ function ChartList(props: ChartListProps) {
   ];
 
   function renderCard(chart: Chart) {
+    const { userId } = props.user;
+    const userKey = getFromLocalStorage(userId.toString(), null);
     return (
       <ChartCard
         chart={chart}
+        showThumbnails={
+          userKey
+            ? userKey.thumbnails
+            : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+        }
         hasPerm={hasPerm}
         openChartEditModal={openChartEditModal}
         bulkSelectEnabled={bulkSelectEnabled}

superset-frontend/src/views/CRUD/dashboard/DashboardCard.tsx

@@ -23,6 +23,7 @@ import {
   handleBulkDashboardExport,
   CardStyles,
 } from 'src/views/CRUD/utils';
+import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import { Dropdown, Menu } from 'src/common/components';
 import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
 import ListViewCard from 'src/components/ListViewCard';
@@ -47,7 +48,6 @@ interface DashboardCardProps {
   dashboardFilter?: string;
   userId?: number;
   showThumbnails?: boolean;
-  featureFlag?: boolean;
 }
 
 function DashboardCard({
@@ -63,7 +63,6 @@ function DashboardCard({
   favoriteStatus,
   saveFavoriteStatus,
   showThumbnails,
-  featureFlag,
 }: DashboardCardProps) {
   const canEdit = hasPerm('can_write');
   const canDelete = hasPerm('can_write');
@@ -150,7 +149,11 @@ function DashboardCard({
         titleRight={
           <Label>{dashboard.published ? t('published') : t('draft')}</Label>
         }
-        cover={!featureFlag || !showThumbnails ? <></> : null}
+        cover={
+          !isFeatureEnabled(FeatureFlag.THUMBNAILS) || !showThumbnails ? (
+            <></>
+          ) : null
+        }
         url={bulkSelectEnabled ? undefined : dashboard.url}
         imgURL={dashboard.thumbnail_url}
         imgFallbackURL="/static/assets/images/dashboard-card-fallback.svg"

superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx

@@ -34,6 +34,7 @@ import ListView, {
   Filters,
   FilterOperators,
 } from 'src/components/ListView';
+import { getFromLocalStorage } from 'src/utils/localStorageHelpers';
 import Owner from 'src/types/Owner';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import FacePile from 'src/components/FacePile';
@@ -452,12 +453,19 @@ function DashboardList(props: DashboardListProps) {
   ];
 
   function renderCard(dashboard: Dashboard) {
+    const { userId } = props.user;
+    const userKey = getFromLocalStorage(userId.toString(), null);
     return (
       <DashboardCard
         dashboard={dashboard}
         hasPerm={hasPerm}
         bulkSelectEnabled={bulkSelectEnabled}
         refreshData={refreshData}
+        showThumbnails={
+          userKey
+            ? userKey.thumbnails
+            : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+        }
         loading={loading}
         addDangerToast={addDangerToast}
         addSuccessToast={addSuccessToast}

superset-frontend/src/views/CRUD/welcome/ChartTable.tsx

@@ -45,7 +45,6 @@ interface ChartTableProps {
   user?: User;
   mine: Array<any>;
   showThumbnails: boolean;
-  featureFlag: boolean;
 }
 
 function ChartTable({
@@ -54,7 +53,6 @@ function ChartTable({
   addSuccessToast,
   mine,
   showThumbnails,
-  featureFlag,
 }: ChartTableProps) {
   const history = useHistory();
   const {
@@ -186,7 +184,6 @@ function ChartTable({
               hasPerm={hasPerm}
               showThumbnails={showThumbnails}
               bulkSelectEnabled={bulkSelectEnabled}
-              featureFlag={featureFlag}
               refreshData={refreshData}
               addDangerToast={addDangerToast}
               addSuccessToast={addSuccessToast}

superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx

@@ -43,7 +43,6 @@ function DashboardTable({
   addSuccessToast,
   mine,
   showThumbnails,
-  featureFlag,
 }: DashboardTableProps) {
   const history = useHistory();
   const {
@@ -193,7 +192,6 @@ function DashboardTable({
               dashboard={e}
               hasPerm={hasPerm}
               bulkSelectEnabled={false}
-              featureFlag={featureFlag}
               showThumbnails={showThumbnails}
               dashboardFilter={dashboardFilter}
               refreshData={refreshData}

superset-frontend/src/views/CRUD/welcome/Welcome.tsx

@@ -228,7 +228,6 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
               user={user}
               mine={dashboardData}
               showThumbnails={checked}
-              featureFlag={isFeatureEnabled(FeatureFlag.THUMBNAILS)}
             />
           )}
         </Collapse.Panel>
@@ -248,12 +247,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
           {!chartData ? (
             <Loading position="inline" />
           ) : (
-            <ChartTable
+            <ChartTable showThumbnails={checked} user={user} mine={chartData} />
-              showThumbnails={checked}
-              user={user}
-              mine={chartData}
-              featureFlag={isFeatureEnabled(FeatureFlag.THUMBNAILS)}
-            />
           )}
         </Collapse.Panel>
       </Collapse>