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 <[email protected]> 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; } `;
