You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by vi...@apache.org on 2021/08/16 05:48:55 UTC
[superset] 05/34: feat: add sticky state to tables and loadingcards
state. (#16102)
This is an automated email from the ASF dual-hosted git repository.
villebro pushed a commit to branch 1.3
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 74b37c363174bc5edbc1e55b5bb8cdf0f32ee901
Author: Phillip Kelley-Dotson <pk...@yahoo.com>
AuthorDate: Tue Aug 10 06:43:59 2021 -0700
feat: add sticky state to tables and loadingcards state. (#16102)
* initial feat commit
* fix chart and dash rendering onload
* Update superset-frontend/src/views/CRUD/welcome/Welcome.tsx
Co-authored-by: Michael S. Molina <70...@users.noreply.github.com>
* fix jumpyness and add const
Co-authored-by: Michael S. Molina <70...@users.noreply.github.com>
(cherry picked from commit a70248736fc97572b0d45909c37aa6cef0e9c784)
---
superset-frontend/src/views/CRUD/storageKeys.ts | 3 +-
superset-frontend/src/views/CRUD/utils.tsx | 5 ++-
.../src/views/CRUD/welcome/ActivityTable.tsx | 6 +--
.../src/views/CRUD/welcome/ChartTable.tsx | 3 +-
.../src/views/CRUD/welcome/DashboardTable.tsx | 3 +-
.../src/views/CRUD/welcome/SavedQueries.tsx | 4 +-
.../src/views/CRUD/welcome/Welcome.tsx | 47 +++++++++++++++++-----
7 files changed, 51 insertions(+), 20 deletions(-)
diff --git a/superset-frontend/src/views/CRUD/storageKeys.ts b/superset-frontend/src/views/CRUD/storageKeys.ts
index cd8f476..5002420 100644
--- a/superset-frontend/src/views/CRUD/storageKeys.ts
+++ b/superset-frontend/src/views/CRUD/storageKeys.ts
@@ -17,7 +17,8 @@
* under the License.
*/
-// storage keys for welcome page sticky tabs..
+// storage keys for welcome page sticky tabs and tables
export const HOMEPAGE_CHART_FILTER = 'homepage_chart_filter';
export const HOMEPAGE_ACTIVITY_FILTER = 'homepage_activity_filter';
export const HOMEPAGE_DASHBOARD_FILTER = 'homepage_dashboard_filter';
+export const HOMEPAGE_COLLAPSE_STATE = 'homepage_collapse_state';
diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx
index 2b0f80c..123a44d 100644
--- a/superset-frontend/src/views/CRUD/utils.tsx
+++ b/superset-frontend/src/views/CRUD/utils.tsx
@@ -269,6 +269,9 @@ export function shortenSQL(sql: string, maxLines: number) {
return lines.join('\n');
}
+// loading card count for homepage
+export const loadingCardCount = 5;
+
const breakpoints = [576, 768, 992, 1200];
export const mq = breakpoints.map(bp => `@media (max-width: ${bp}px)`);
@@ -286,7 +289,7 @@ export const CardContainer = styled.div<{
display: grid;
grid-gap: ${theme.gridUnit * 12}px ${theme.gridUnit * 4}px;
grid-template-columns: repeat(auto-fit, 300px);
- max-height: ${showThumbnails ? '314' : '140'}px;
+ max-height: ${showThumbnails ? '314' : '148'}px;
margin-top: ${theme.gridUnit * -6}px;
padding: ${
showThumbnails
diff --git a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx
index c7fa967..930cfca 100644
--- a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx
@@ -21,9 +21,9 @@ import moment from 'moment';
import { styled, t } from '@superset-ui/core';
import { setInLocalStorage } from 'src/utils/localStorageHelpers';
-import Loading from 'src/components/Loading';
import ListViewCard from 'src/components/ListViewCard';
import SubMenu from 'src/components/Menu/SubMenu';
+import { LoadingCards, ActivityData } from 'src/views/CRUD/welcome/Welcome';
import {
CardStyles,
getEditedObjects,
@@ -34,7 +34,7 @@ import { Chart } from 'src/types/Chart';
import { Dashboard, SavedQueryObject } from 'src/views/CRUD/types';
import Icons from 'src/components/Icons';
-import { ActivityData } from './Welcome';
+
import EmptyState from './EmptyState';
/**
@@ -230,7 +230,7 @@ export default function ActivityTable({
const doneFetching = loadedCount < 3;
if ((loadingState && !editedObjs) || doneFetching) {
- return <Loading position="inline" />;
+ return <LoadingCards />;
}
return (
<Styles>
diff --git a/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx b/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
index 9c78c81..d9654b6 100644
--- a/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
@@ -35,6 +35,7 @@ import PropertiesModal from 'src/explore/components/PropertiesModal';
import { User } from 'src/types/bootstrapTypes';
import { CardContainer, PAGE_SIZE } from 'src/views/CRUD/utils';
import { HOMEPAGE_CHART_FILTER } from 'src/views/CRUD/storageKeys';
+import { LoadingCards } from 'src/views/CRUD/welcome/Welcome';
import ChartCard from 'src/views/CRUD/chart/ChartCard';
import Chart from 'src/types/Chart';
import handleResourceExport from 'src/utils/export';
@@ -177,7 +178,7 @@ function ChartTable({
});
}
- if (loading) return <Loading position="inline" />;
+ if (loading) return <LoadingCards cover={showThumbnails} />;
return (
<ErrorBoundary>
{sliceCurrentlyEditing && (
diff --git a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
index caba49c..0c17e2c 100644
--- a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
@@ -31,6 +31,7 @@ import {
setInLocalStorage,
getFromLocalStorage,
} from 'src/utils/localStorageHelpers';
+import { LoadingCards } from 'src/views/CRUD/welcome/Welcome';
import {
createErrorHandler,
CardContainer,
@@ -189,7 +190,7 @@ function DashboardTable({
filters: getFilters(filter),
});
- if (loading) return <Loading position="inline" />;
+ if (loading) return <LoadingCards cover={showThumbnails} />;
return (
<>
<SubMenu
diff --git a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
index 0394739..4a20b38 100644
--- a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
@@ -22,7 +22,7 @@ import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
import withToasts from 'src/messageToasts/enhancers/withToasts';
-import Loading from 'src/components/Loading';
+import { LoadingCards } from 'src/views/CRUD/welcome/Welcome';
import { Dropdown, Menu } from 'src/common/components';
import { useListViewResource, copyQueryLink } from 'src/views/CRUD/hooks';
import ListViewCard from 'src/components/ListViewCard';
@@ -240,7 +240,7 @@ const SavedQueries = ({
</Menu>
);
- if (loading) return <Loading position="inline" />;
+ if (loading) return <LoadingCards cover={showThumbnails} />;
return (
<>
{queryDeleteModal && (
diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
index 540b635..63d7776 100644
--- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
@@ -25,15 +25,20 @@ import {
getFromLocalStorage,
setInLocalStorage,
} from 'src/utils/localStorageHelpers';
+import ListViewCard from 'src/components/ListViewCard';
import withToasts from 'src/messageToasts/enhancers/withToasts';
-import Loading from 'src/components/Loading';
import {
createErrorHandler,
getRecentAcitivtyObjs,
mq,
+ CardContainer,
getUserOwnedObjects,
+ loadingCardCount,
} from 'src/views/CRUD/utils';
-import { HOMEPAGE_ACTIVITY_FILTER } from 'src/views/CRUD/storageKeys';
+import {
+ HOMEPAGE_ACTIVITY_FILTER,
+ HOMEPAGE_COLLAPSE_STATE,
+} from 'src/views/CRUD/storageKeys';
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
import { Switch } from 'src/common/components';
@@ -54,6 +59,10 @@ export interface ActivityData {
Examples?: Array<object>;
}
+interface LoadingProps {
+ cover?: boolean;
+}
+
const DEFAULT_TAB_ARR = ['2', '3'];
const WelcomeContainer = styled.div`
@@ -96,6 +105,12 @@ const WelcomeContainer = styled.div`
div.ant-collapse-item:last-child .ant-collapse-header {
padding-bottom: ${({ theme }) => theme.gridUnit * 9}px;
}
+ .loading-cards {
+ margin-top: ${({ theme }) => theme.gridUnit * 8}px;
+ .ant-card-cover > div {
+ height: 168px;
+ }
+ }
`;
const WelcomeNav = styled.div`
@@ -118,6 +133,14 @@ const WelcomeNav = styled.div`
}
`;
+export const LoadingCards = ({ cover }: LoadingProps) => (
+ <CardContainer showThumbnails={cover} className="loading-cards">
+ {[...new Array(loadingCardCount)].map(() => (
+ <ListViewCard cover={cover ? false : <></>} description="" loading />
+ ))}
+ </CardContainer>
+);
+
function Welcome({ user, addDangerToast }: WelcomeProps) {
const userid = user.userId;
const id = userid.toString();
@@ -137,16 +160,18 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
null,
);
const [loadedCount, setLoadedCount] = useState(0);
- const [activeState, setActiveState] = useState<Array<string>>(
- DEFAULT_TAB_ARR,
- );
+
+ const collapseState = getFromLocalStorage(HOMEPAGE_COLLAPSE_STATE, null);
+ const [activeState, setActiveState] = useState<Array<string>>(collapseState);
const handleCollapse = (state: Array<string>) => {
setActiveState(state);
+ setInLocalStorage(HOMEPAGE_COLLAPSE_STATE, state);
};
useEffect(() => {
const activeTab = getFromLocalStorage(HOMEPAGE_ACTIVITY_FILTER, null);
+ setActiveState(collapseState || DEFAULT_TAB_ARR);
getRecentAcitivtyObjs(user.userId, recent, addDangerToast)
.then(res => {
const data: ActivityData | null = {};
@@ -216,7 +241,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
};
useEffect(() => {
- if (queryData?.length) {
+ if (!collapseState && queryData?.length) {
setActiveState(activeState => [...activeState, '4']);
}
setActivityData(activityData => ({
@@ -230,7 +255,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
}, [chartData, queryData, dashboardData]);
useEffect(() => {
- if (activityData?.Viewed?.length) {
+ if (!collapseState && activityData?.Viewed?.length) {
setActiveState(activeState => ['1', ...activeState]);
}
}, [activityData]);
@@ -263,12 +288,12 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
loadedCount={loadedCount}
/>
) : (
- <Loading position="inline" />
+ <LoadingCards />
)}
</Collapse.Panel>
<Collapse.Panel header={t('Dashboards')} key="2">
{!dashboardData || isRecentActivityLoading ? (
- <Loading position="inline" />
+ <LoadingCards cover={checked} />
) : (
<DashboardTable
user={user}
@@ -280,7 +305,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
</Collapse.Panel>
<Collapse.Panel header={t('Charts')} key="3">
{!chartData || isRecentActivityLoading ? (
- <Loading position="inline" />
+ <LoadingCards cover={checked} />
) : (
<ChartTable
showThumbnails={checked}
@@ -292,7 +317,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
</Collapse.Panel>
<Collapse.Panel header={t('Saved queries')} key="4">
{!queryData ? (
- <Loading position="inline" />
+ <LoadingCards cover={checked} />
) : (
<SavedQueries
showThumbnails={checked}