mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
chore(toggle thumbnails): use localstorage for toggle (#14013)
* use localstorage for toggle * fix lint * add check
This commit is contained in:
parent
df7e2b6a8e
commit
38a1f65646
@ -45,7 +45,6 @@ interface ChartCardProps {
|
|||||||
chartFilter?: string;
|
chartFilter?: string;
|
||||||
userId?: number;
|
userId?: number;
|
||||||
showThumbnails?: boolean;
|
showThumbnails?: boolean;
|
||||||
featureFlag?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ChartCard({
|
export default function ChartCard({
|
||||||
@ -62,7 +61,6 @@ export default function ChartCard({
|
|||||||
favoriteStatus,
|
favoriteStatus,
|
||||||
chartFilter,
|
chartFilter,
|
||||||
userId,
|
userId,
|
||||||
featureFlag,
|
|
||||||
}: ChartCardProps) {
|
}: ChartCardProps) {
|
||||||
const canEdit = hasPerm('can_write');
|
const canEdit = hasPerm('can_write');
|
||||||
const canDelete = hasPerm('can_write');
|
const canDelete = hasPerm('can_write');
|
||||||
@ -142,7 +140,11 @@ export default function ChartCard({
|
|||||||
<ListViewCard
|
<ListViewCard
|
||||||
loading={loading}
|
loading={loading}
|
||||||
title={chart.slice_name}
|
title={chart.slice_name}
|
||||||
cover={!featureFlag || !showThumbnails ? <></> : null}
|
cover={
|
||||||
|
!isFeatureEnabled(FeatureFlag.THUMBNAILS) || !showThumbnails ? (
|
||||||
|
<></>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
url={bulkSelectEnabled ? undefined : chart.url}
|
url={bulkSelectEnabled ? undefined : chart.url}
|
||||||
imgURL={chart.thumbnail_url || ''}
|
imgURL={chart.thumbnail_url || ''}
|
||||||
imgFallbackURL="/static/assets/images/chart-card-fallback.svg"
|
imgFallbackURL="/static/assets/images/chart-card-fallback.svg"
|
||||||
|
@ -46,6 +46,7 @@ import ListView, {
|
|||||||
SelectOption,
|
SelectOption,
|
||||||
FilterOperators,
|
FilterOperators,
|
||||||
} from 'src/components/ListView';
|
} from 'src/components/ListView';
|
||||||
|
import { getFromLocalStorage } from 'src/utils/localStorageHelpers';
|
||||||
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
||||||
import PropertiesModal from 'src/explore/components/PropertiesModal';
|
import PropertiesModal from 'src/explore/components/PropertiesModal';
|
||||||
import ImportModelsModal from 'src/components/ImportModal/index';
|
import ImportModelsModal from 'src/components/ImportModal/index';
|
||||||
@ -506,9 +507,16 @@ function ChartList(props: ChartListProps) {
|
|||||||
];
|
];
|
||||||
|
|
||||||
function renderCard(chart: Chart) {
|
function renderCard(chart: Chart) {
|
||||||
|
const { userId } = props.user;
|
||||||
|
const userKey = getFromLocalStorage(userId.toString(), null);
|
||||||
return (
|
return (
|
||||||
<ChartCard
|
<ChartCard
|
||||||
chart={chart}
|
chart={chart}
|
||||||
|
showThumbnails={
|
||||||
|
userKey
|
||||||
|
? userKey.thumbnails
|
||||||
|
: isFeatureEnabled(FeatureFlag.THUMBNAILS)
|
||||||
|
}
|
||||||
hasPerm={hasPerm}
|
hasPerm={hasPerm}
|
||||||
openChartEditModal={openChartEditModal}
|
openChartEditModal={openChartEditModal}
|
||||||
bulkSelectEnabled={bulkSelectEnabled}
|
bulkSelectEnabled={bulkSelectEnabled}
|
||||||
|
@ -23,6 +23,7 @@ import {
|
|||||||
handleBulkDashboardExport,
|
handleBulkDashboardExport,
|
||||||
CardStyles,
|
CardStyles,
|
||||||
} from 'src/views/CRUD/utils';
|
} from 'src/views/CRUD/utils';
|
||||||
|
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
|
||||||
import { Dropdown, Menu } from 'src/common/components';
|
import { Dropdown, Menu } from 'src/common/components';
|
||||||
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
|
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
|
||||||
import ListViewCard from 'src/components/ListViewCard';
|
import ListViewCard from 'src/components/ListViewCard';
|
||||||
@ -47,7 +48,6 @@ interface DashboardCardProps {
|
|||||||
dashboardFilter?: string;
|
dashboardFilter?: string;
|
||||||
userId?: number;
|
userId?: number;
|
||||||
showThumbnails?: boolean;
|
showThumbnails?: boolean;
|
||||||
featureFlag?: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function DashboardCard({
|
function DashboardCard({
|
||||||
@ -63,7 +63,6 @@ function DashboardCard({
|
|||||||
favoriteStatus,
|
favoriteStatus,
|
||||||
saveFavoriteStatus,
|
saveFavoriteStatus,
|
||||||
showThumbnails,
|
showThumbnails,
|
||||||
featureFlag,
|
|
||||||
}: DashboardCardProps) {
|
}: DashboardCardProps) {
|
||||||
const canEdit = hasPerm('can_write');
|
const canEdit = hasPerm('can_write');
|
||||||
const canDelete = hasPerm('can_write');
|
const canDelete = hasPerm('can_write');
|
||||||
@ -150,7 +149,11 @@ function DashboardCard({
|
|||||||
titleRight={
|
titleRight={
|
||||||
<Label>{dashboard.published ? t('published') : t('draft')}</Label>
|
<Label>{dashboard.published ? t('published') : t('draft')}</Label>
|
||||||
}
|
}
|
||||||
cover={!featureFlag || !showThumbnails ? <></> : null}
|
cover={
|
||||||
|
!isFeatureEnabled(FeatureFlag.THUMBNAILS) || !showThumbnails ? (
|
||||||
|
<></>
|
||||||
|
) : null
|
||||||
|
}
|
||||||
url={bulkSelectEnabled ? undefined : dashboard.url}
|
url={bulkSelectEnabled ? undefined : dashboard.url}
|
||||||
imgURL={dashboard.thumbnail_url}
|
imgURL={dashboard.thumbnail_url}
|
||||||
imgFallbackURL="/static/assets/images/dashboard-card-fallback.svg"
|
imgFallbackURL="/static/assets/images/dashboard-card-fallback.svg"
|
||||||
|
@ -34,6 +34,7 @@ import ListView, {
|
|||||||
Filters,
|
Filters,
|
||||||
FilterOperators,
|
FilterOperators,
|
||||||
} from 'src/components/ListView';
|
} from 'src/components/ListView';
|
||||||
|
import { getFromLocalStorage } from 'src/utils/localStorageHelpers';
|
||||||
import Owner from 'src/types/Owner';
|
import Owner from 'src/types/Owner';
|
||||||
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
import withToasts from 'src/messageToasts/enhancers/withToasts';
|
||||||
import FacePile from 'src/components/FacePile';
|
import FacePile from 'src/components/FacePile';
|
||||||
@ -452,12 +453,19 @@ function DashboardList(props: DashboardListProps) {
|
|||||||
];
|
];
|
||||||
|
|
||||||
function renderCard(dashboard: Dashboard) {
|
function renderCard(dashboard: Dashboard) {
|
||||||
|
const { userId } = props.user;
|
||||||
|
const userKey = getFromLocalStorage(userId.toString(), null);
|
||||||
return (
|
return (
|
||||||
<DashboardCard
|
<DashboardCard
|
||||||
dashboard={dashboard}
|
dashboard={dashboard}
|
||||||
hasPerm={hasPerm}
|
hasPerm={hasPerm}
|
||||||
bulkSelectEnabled={bulkSelectEnabled}
|
bulkSelectEnabled={bulkSelectEnabled}
|
||||||
refreshData={refreshData}
|
refreshData={refreshData}
|
||||||
|
showThumbnails={
|
||||||
|
userKey
|
||||||
|
? userKey.thumbnails
|
||||||
|
: isFeatureEnabled(FeatureFlag.THUMBNAILS)
|
||||||
|
}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
addDangerToast={addDangerToast}
|
addDangerToast={addDangerToast}
|
||||||
addSuccessToast={addSuccessToast}
|
addSuccessToast={addSuccessToast}
|
||||||
|
@ -45,7 +45,6 @@ interface ChartTableProps {
|
|||||||
user?: User;
|
user?: User;
|
||||||
mine: Array<any>;
|
mine: Array<any>;
|
||||||
showThumbnails: boolean;
|
showThumbnails: boolean;
|
||||||
featureFlag: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function ChartTable({
|
function ChartTable({
|
||||||
@ -54,7 +53,6 @@ function ChartTable({
|
|||||||
addSuccessToast,
|
addSuccessToast,
|
||||||
mine,
|
mine,
|
||||||
showThumbnails,
|
showThumbnails,
|
||||||
featureFlag,
|
|
||||||
}: ChartTableProps) {
|
}: ChartTableProps) {
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const {
|
const {
|
||||||
@ -186,7 +184,6 @@ function ChartTable({
|
|||||||
hasPerm={hasPerm}
|
hasPerm={hasPerm}
|
||||||
showThumbnails={showThumbnails}
|
showThumbnails={showThumbnails}
|
||||||
bulkSelectEnabled={bulkSelectEnabled}
|
bulkSelectEnabled={bulkSelectEnabled}
|
||||||
featureFlag={featureFlag}
|
|
||||||
refreshData={refreshData}
|
refreshData={refreshData}
|
||||||
addDangerToast={addDangerToast}
|
addDangerToast={addDangerToast}
|
||||||
addSuccessToast={addSuccessToast}
|
addSuccessToast={addSuccessToast}
|
||||||
|
@ -43,7 +43,6 @@ function DashboardTable({
|
|||||||
addSuccessToast,
|
addSuccessToast,
|
||||||
mine,
|
mine,
|
||||||
showThumbnails,
|
showThumbnails,
|
||||||
featureFlag,
|
|
||||||
}: DashboardTableProps) {
|
}: DashboardTableProps) {
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const {
|
const {
|
||||||
@ -193,7 +192,6 @@ function DashboardTable({
|
|||||||
dashboard={e}
|
dashboard={e}
|
||||||
hasPerm={hasPerm}
|
hasPerm={hasPerm}
|
||||||
bulkSelectEnabled={false}
|
bulkSelectEnabled={false}
|
||||||
featureFlag={featureFlag}
|
|
||||||
showThumbnails={showThumbnails}
|
showThumbnails={showThumbnails}
|
||||||
dashboardFilter={dashboardFilter}
|
dashboardFilter={dashboardFilter}
|
||||||
refreshData={refreshData}
|
refreshData={refreshData}
|
||||||
|
@ -228,7 +228,6 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
|
|||||||
user={user}
|
user={user}
|
||||||
mine={dashboardData}
|
mine={dashboardData}
|
||||||
showThumbnails={checked}
|
showThumbnails={checked}
|
||||||
featureFlag={isFeatureEnabled(FeatureFlag.THUMBNAILS)}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Collapse.Panel>
|
</Collapse.Panel>
|
||||||
@ -248,12 +247,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
|
|||||||
{!chartData ? (
|
{!chartData ? (
|
||||||
<Loading position="inline" />
|
<Loading position="inline" />
|
||||||
) : (
|
) : (
|
||||||
<ChartTable
|
<ChartTable showThumbnails={checked} user={user} mine={chartData} />
|
||||||
showThumbnails={checked}
|
|
||||||
user={user}
|
|
||||||
mine={chartData}
|
|
||||||
featureFlag={isFeatureEnabled(FeatureFlag.THUMBNAILS)}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</Collapse.Panel>
|
</Collapse.Panel>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
|
Loading…
Reference in New Issue
Block a user