You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by yj...@apache.org on 2020/10/29 05:45:07 UTC
[incubator-superset] 24/33: add suggestions
This is an automated email from the ASF dual-hosted git repository.
yjc pushed a commit to branch home-screen-mvp
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 659a49bbaef752ecbcf5e192eda05c2dace8761d
Author: Phillip Kelley-Dotson <pk...@yahoo.com>
AuthorDate: Thu Oct 22 17:41:46 2020 -0700
add suggestions
---
superset-frontend/src/components/Menu/SubMenu.tsx | 2 +-
.../src/views/CRUD/chart/ChartCard.tsx | 4 +-
superset-frontend/src/views/CRUD/hooks.ts | 5 -
.../src/views/CRUD/welcome/ActivityTable.tsx | 41 +++----
.../src/views/CRUD/welcome/ChartTable.tsx | 10 +-
.../src/views/CRUD/welcome/DashboardTable.tsx | 6 +-
.../src/views/CRUD/welcome/EmptyState.tsx | 128 ++++++++++-----------
.../src/views/CRUD/welcome/SavedQueries.tsx | 17 ++-
.../src/views/CRUD/welcome/Welcome.tsx | 8 +-
9 files changed, 98 insertions(+), 123 deletions(-)
diff --git a/superset-frontend/src/components/Menu/SubMenu.tsx b/superset-frontend/src/components/Menu/SubMenu.tsx
index 67bceea..60cecb5 100644
--- a/superset-frontend/src/components/Menu/SubMenu.tsx
+++ b/superset-frontend/src/components/Menu/SubMenu.tsx
@@ -99,7 +99,7 @@ export interface ButtonProps {
export interface SubMenuProps {
buttons?: Array<ButtonProps>;
- name: string;
+ name?: string;
children?: MenuChild[];
activeChild?: MenuChild['name'];
/* If usesRouter is true, a react-router <Link> component will be used instead of href.
diff --git a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx
index 05872a7..368b0f6 100644
--- a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx
+++ b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx
@@ -96,7 +96,7 @@ export default function ChartCard({
className="action-button"
onClick={confirmDelete}
>
- <ListViewCard.MenuIcon name="trash" /> Delete
+ <ListViewCard.MenuIcon name="trash" /> {t('Delete')}
</div>
)}
</ConfirmStatusChange>
@@ -108,7 +108,7 @@ export default function ChartCard({
tabIndex={0}
onClick={() => openChartEditModal(chart)}
>
- <ListViewCard.MenuIcon name="edit-alt" /> Edit
+ <ListViewCard.MenuIcon name="edit-alt" /> {t('Edit')}
</Menu.Item>
)}
</Menu>
diff --git a/superset-frontend/src/views/CRUD/hooks.ts b/superset-frontend/src/views/CRUD/hooks.ts
index 08e1262..1261a5e 100644
--- a/superset-frontend/src/views/CRUD/hooks.ts
+++ b/superset-frontend/src/views/CRUD/hooks.ts
@@ -35,11 +35,6 @@ interface ListViewResourceState<D extends object = any> {
bulkSelectEnabled: boolean;
}
-interface EditChartModal {
- setCharts: () => void;
- charts: Array<any>;
-}
-
export function useListViewResource<D extends object = any>(
resource: string,
resourceLabel: string, // resourceLabel for translations
diff --git a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx
index a198717..bb21c58 100644
--- a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx
@@ -78,7 +78,7 @@ const ActivityContainer = styled.div`
margin-left: 5px;
}
.ant-card-meta-title {
- font-weight: 700;
+ font-weight: ${({ theme }) => theme.typography.weights.bold};
}
`;
@@ -105,7 +105,7 @@ export default function ActivityTable({ user }: ActivityProps) {
if (e.url?.indexOf('explore') !== -1) {
return 'nav-charts';
}
- if (e.item_url?.indexOf('explore') !== -1) {
+ if (e.url?.includes('explore') || e.item_url?.includes('explore')) {
return 'nav-charts';
}
return '';
@@ -148,17 +148,17 @@ export default function ActivityTable({ user }: ActivityProps) {
useEffect(() => {
getBatchData(user.userId, recent)
- .then(r => {
+ .then(res => {
const data: any = {
- Created: [...r.createdByChart, ...r.createdByDash],
- Edited: [...r.editedChart, ...r.editedDash],
+ Created: [...res.createdByChart, ...res.createdByDash],
+ Edited: [...res.editedChart, ...res.editedDash],
};
- if (r.viewed) {
- const filtered = reject(r.viewed, ['item_url', null]).map(r => r);
+ if (res.viewed) {
+ const filtered = reject(res.viewed, ['item_url', null]).map(r => r);
data.Viewed = filtered;
setActiveChild('Viewed');
} else {
- data.Examples = r.examples;
+ data.Examples = res.examples;
setActiveChild('Examples');
}
setActivityData(data);
@@ -173,7 +173,7 @@ export default function ActivityTable({ user }: ActivityProps) {
}, []);
const renderActivity = () => {
- return activityData[activeChild].map((e: MapProps, i: any) => (
+ return activityData[activeChild].map((e: MapProps, i: number) => (
<ListViewCard
key={`${i}`}
isRecent
@@ -193,20 +193,17 @@ export default function ActivityTable({ user }: ActivityProps) {
if (loading) return <>loading ...</>;
return (
<>
+ <SubMenu
+ activeChild={activeChild}
+ // eslint-disable-next-line react/no-children-prop
+ children={tabs}
+ />
<>
- <SubMenu
- activeChild={activeChild}
- name=""
- // eslint-disable-next-line react/no-children-prop
- children={tabs}
- />
- <>
- {activityData[activeChild]?.length > 0 ? (
- <ActivityContainer>{renderActivity()}</ActivityContainer>
- ) : (
- <EmptyState tableName="RECENTS" tab={activeChild} />
- )}
- </>
+ {activityData[activeChild]?.length > 0 ? (
+ <ActivityContainer>{renderActivity()}</ActivityContainer>
+ ) : (
+ <EmptyState tableName="RECENTS" tab={activeChild} />
+ )}
</>
</>
);
diff --git a/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx b/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
index c2784d1..a54d5a3 100644
--- a/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx
@@ -130,25 +130,23 @@ function ChartTable({
),
buttonStyle: 'tertiary',
onClick: () => {
- // @ts-ignore
- window.location = '/chart/add';
+ window.location.href = '/chart/add';
},
},
{
name: 'View All »',
buttonStyle: 'link',
onClick: () => {
- // @ts-ignore
- window.location = '/chart/list';
+ window.location.href = '/chart/list';
},
},
]}
/>
{charts.length ? (
<CardContainer>
- {charts.map((e, i) => (
+ {charts.map(e => (
<ChartCard
- key={`${i}`}
+ key={`${e.id}`}
openChartEditModal={openChartEditModal}
loading={loading}
chart={e}
diff --git a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
index ae3daeb..15bc8a3 100644
--- a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx
@@ -146,16 +146,14 @@ function DashboardTable({
),
buttonStyle: 'tertiary',
onClick: () => {
- // @ts-ignore
- window.location = '/dashboard/new';
+ window.location.href = '/dashboard/new';
},
},
{
name: 'View All »',
buttonStyle: 'link',
onClick: () => {
- // @ts-ignore
- window.location = '/dashboard/list/';
+ window.location.href = '/dashboard/list/';
},
},
]}
diff --git a/superset-frontend/src/views/CRUD/welcome/EmptyState.tsx b/superset-frontend/src/views/CRUD/welcome/EmptyState.tsx
index 67bed3c..21a37ff 100644
--- a/superset-frontend/src/views/CRUD/welcome/EmptyState.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/EmptyState.tsx
@@ -18,7 +18,8 @@
*/
import React from 'react';
import Button from 'src/components/Button';
-import { styled } from '@superset-ui/core';
+import { Empty } from 'src/common/components';
+import { t, styled } from '@superset-ui/core';
import Icon from 'src/components/Icon';
import { IconContainer } from '../utils';
@@ -27,29 +28,10 @@ interface EmptyStateProps {
tab?: string;
}
-const Container = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin-top: 20px;
- img {
- width: 114px;
- display: block;
- margin: 0 auto;
- margin-bottom: 15px;
- }
- div:nth-child(2) {
- text-align: center;
- margin-top: 15px;
- color: ${({ theme }) => theme.colors.grayscale.dark1};
- font-weight: 400;
- }
- button {
- margin: 0 auto;
- padding: 6px 27px;
- margin-top: 10px;
+const ButtonContainer = styled.div`
+ Button {
svg {
- color: white;
+ color: ${({ theme }) => theme.colors.grayscale.light5};
}
}
`;
@@ -72,64 +54,70 @@ export default function EmptyState({ tableName, tab }: EmptyStateProps) {
SAVED_QUERIES: 'empty-queries.png',
};
const mine = (
- <div>
- <div>{`No ${
- tableName === 'SAVED_QUERIES'
- ? 'saved queries'
- : tableName.toLowerCase()
- } yet`}</div>
- <Button
- buttonStyle="primary"
- onClick={() => {
- window.location = mineRedirects[tableName];
- }}
- >
- <IconContainer>
- <Icon name="plus-small" />{' '}
- {tableName === 'SAVED_QUERIES'
- ? 'SQL QUERY'
- : tableName
- .split('')
- .slice(0, tableName.length - 1)
- .join('')}{' '}
- </IconContainer>
- </Button>
- </div>
+ <div>{`No ${
+ tableName === 'SAVED_QUERIES'
+ ? t('saved queries')
+ : t(`${tableName.toLowerCase()}`)
+ } yet`}</div>
);
const span = (
<div className="no-recents">
- Recently {tab?.toLowerCase()} charts, dashboards, and saved queries will
- appear here
+ {t(`Recently ${tab?.toLowerCase()} charts, dashboards, and saved queries will
+ appear here`)}
</div>
);
// Mine and Recent Activity(all tabs) tab empty state
if (tab === 'Mine' || tableName === 'RECENTS') {
return (
- <Container>
- <img
- src={`/static/assets/images/${tableIcon[tableName]}`}
- alt={`${tableName}`}
- />
- {tableName === 'RECENTS' ? span : mine}
- </Container>
+ <Empty
+ image={`/static/assets/images/${tableIcon[tableName]}`}
+ description={tableName === 'RECENTS' ? span : mine}
+ >
+ {tableName !== 'RECENTS' && (
+ <ButtonContainer>
+ <Button
+ buttonStyle="primary"
+ onClick={() => {
+ window.location = mineRedirects[tableName];
+ }}
+ >
+ <IconContainer>
+ <Icon name="plus-small" />{' '}
+ {tableName === 'SAVED_QUERIES'
+ ? t('SQL QUERY')
+ : t(`${tableName
+ .split('')
+ .slice(0, tableName.length - 1)
+ .join('')}
+ `)}
+ </IconContainer>
+ </Button>
+ </ButtonContainer>
+ )}
+ </Empty>
);
}
// Favorite tab empty state
return (
- <Container>
- <img src="/static/assets/images/star-circle.png" alt="star.png" />
- <div>
- <div className="no-favorites">You don't have any favorites yet!</div>
- <Button
- buttonStyle="primary"
- onClick={() => {
- window.location = favRedirects[tableName];
- }}
- >
- SEE ALL{' '}
- {tableName === 'SAVED_QUERIES' ? 'SQL LAB QUERIES' : tableName}
- </Button>
- </div>
- </Container>
+ <Empty
+ image="/static/assets/images/star-circle.png"
+ description={
+ <div className="no-favorites">
+ {t("You don't have any favorites yet!")}
+ </div>
+ }
+ >
+ <Button
+ buttonStyle="primary"
+ onClick={() => {
+ window.location = favRedirects[tableName];
+ }}
+ >
+ SEE ALL{' '}
+ {tableName === 'SAVED_QUERIES'
+ ? t('SQL LAB QUERIES')
+ : t(`${tableName}`)}
+ </Button>
+ </Empty>
);
}
diff --git a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
index d2aae27..43646d4 100644
--- a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx
@@ -124,10 +124,10 @@ const SavedQueries = ({
<Menu.Item
onClick={() => {
// @ts-ignore
- window.location = `/superset/sqllab?savedQueryId=${query.id}`;
+ window.location.href = `/superset/sqllab?savedQueryId=${query.id}`;
}}
>
- Edit
+ {t('Edit')}
</Menu.Item>
)}
<Menu.Item
@@ -136,7 +136,7 @@ const SavedQueries = ({
copyQueryLink(query.id, addDangerToast, addSuccessToast);
}}
>
- Share
+ {t('Share')}
</Menu.Item>
{canDelete && (
<Menu.Item
@@ -145,7 +145,7 @@ const SavedQueries = ({
setCurrentlyEdited(query);
}}
>
- Delete
+ {t('Delete')}
</Menu.Item>
)}
</Menu>
@@ -194,8 +194,7 @@ const SavedQueries = ({
),
buttonStyle: 'tertiary',
onClick: () => {
- // @ts-ignore
- window.location = '/superset/sqllab';
+ window.location.href = '/superset/sqllab';
},
},
{
@@ -203,16 +202,16 @@ const SavedQueries = ({
buttonStyle: 'link',
onClick: () => {
// @ts-ignore
- window.location = '/savedqueryview/list';
+ window.location.href = '/savedqueryview/list';
},
},
]}
/>
{queries.length > 0 ? (
<CardContainer>
- {queries.map((q, i) => (
+ {queries.map(q => (
<ListViewCard
- key={`${i}`}
+ key={`${q.id}`}
imgFallbackURL=""
imgURL=""
url={`/superset/sqllab?savedQueryId=${q.id}`}
diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
index 4719468..effe8cb 100644
--- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
@@ -41,7 +41,7 @@ const WelcomeContainer = styled.div`
content: '';
display: block;
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- margin: 0px 26px;
+ margin: 0px ${({ theme }) => theme.gridUnit * 6}px;
position: relative;
${[mq[1]]} {
margin-top: 5px;
@@ -52,7 +52,7 @@ const WelcomeContainer = styled.div`
& > li:nth-child(1),
& > li:nth-child(2),
& > li:nth-child(3) {
- margin-top: 8px;
+ margin-top: ${({ theme }) => theme.gridUnit * 2}px;
}
}
button {
@@ -67,8 +67,8 @@ const WelcomeContainer = styled.div`
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
}
.ant-collapse-header {
- font-weight: 500;
- font-size: 16px;
+ font-weight: ${({ theme }) => theme.typography.weights.normal};
+ font-size: ${({ theme }) => theme.gridUnit * 4}px;
}
`;