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 08470384645a4929cce1074364ad15bcd1485e29 Author: Phillip Kelley-Dotson <[email protected]> AuthorDate: Wed Oct 7 09:40:05 2020 -0700 clean up code --- .../src/views/CRUD/chart/ChartCard.tsx | 10 +---- .../src/views/CRUD/chart/ChartList.tsx | 35 +++++------------ superset-frontend/src/views/CRUD/hooks.ts | 45 ++++++++++++++++++++++ superset-frontend/src/views/CRUD/types.ts | 4 +- .../src/views/CRUD/welcome/ActivityTable.tsx | 44 +++++++++++---------- .../src/views/CRUD/welcome/ChartTable.tsx | 43 ++++++++++----------- .../src/views/CRUD/welcome/DashboardTable.tsx | 15 +------- .../src/views/CRUD/welcome/SavedQueries.tsx | 40 ++++++++++--------- 8 files changed, 126 insertions(+), 110 deletions(-) diff --git a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx index a8a123c..1046f3a 100644 --- a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx +++ b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx @@ -60,15 +60,6 @@ export default function ChartCard({ addDangerToast, ); - function openChartEditModal(chart: Chart) { - setSliceCurrentlyEditing({ - slice_id: chart.id, - slice_name: chart.slice_name, - description: chart.description, - cache_timeout: chart.cache_timeout, - }); - } - function handleChartDelete({ id, slice_name: sliceName }: Chart) { SupersetClient.delete({ endpoint: `/api/v1/chart/${id}`, @@ -121,6 +112,7 @@ export default function ChartCard({ )} </Menu> ); + console.log('favorite status', favoriteStatusRef) return ( <ListViewCard loading={loading} diff --git a/superset-frontend/src/views/CRUD/chart/ChartList.tsx b/superset-frontend/src/views/CRUD/chart/ChartList.tsx index d326db7..ec0722e 100644 --- a/superset-frontend/src/views/CRUD/chart/ChartList.tsx +++ b/superset-frontend/src/views/CRUD/chart/ChartList.tsx @@ -22,7 +22,11 @@ import rison from 'rison'; import { uniqBy } from 'lodash'; import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags'; import { createFetchRelated, createErrorHandler } from 'src/views/CRUD/utils'; -import { useListViewResource, useFavoriteStatus } from 'src/views/CRUD/hooks'; +import { + useListViewResource, + useFavoriteStatus, + useChartEditModal, +} from 'src/views/CRUD/hooks'; import ConfirmStatusChange from 'src/components/ConfirmStatusChange'; import SubMenu, { SubMenuProps } from 'src/components/Menu/SubMenu'; import Icon from 'src/components/Icon'; @@ -102,37 +106,18 @@ function ChartList(props: ChartListProps) { FAVESTAR_BASE_URL, props.addDangerToast, ); - const [ + const { sliceCurrentlyEditing, - setSliceCurrentlyEditing, - ] = useState<Slice | null>(null); + handleChartUpdated, + openChartEditModal, + closeChartEditModal, + } = useChartEditModal(setCharts, charts); const canCreate = hasPerm('can_add'); const canEdit = hasPerm('can_edit'); const canDelete = hasPerm('can_delete'); const initialSort = [{ id: 'changed_on_delta_humanized', desc: true }]; - function openChartEditModal(chart: Chart) { - setSliceCurrentlyEditing({ - slice_id: chart.id, - slice_name: chart.slice_name, - description: chart.description, - cache_timeout: chart.cache_timeout, - }); - } - - function closeChartEditModal() { - setSliceCurrentlyEditing(null); - } - - function handleChartUpdated(edits: Chart) { - // update the chart in our state with the edited info - const newCharts = charts.map(chart => - chart.id === edits.id ? { ...chart, ...edits } : chart, - ); - setCharts(newCharts); - } - function handleChartDelete({ id, slice_name: sliceName }: Chart) { SupersetClient.delete({ endpoint: `/api/v1/chart/${id}`, diff --git a/superset-frontend/src/views/CRUD/hooks.ts b/superset-frontend/src/views/CRUD/hooks.ts index 9c2386f..80de0a7 100644 --- a/superset-frontend/src/views/CRUD/hooks.ts +++ b/superset-frontend/src/views/CRUD/hooks.ts @@ -21,7 +21,9 @@ import { useState, useEffect, useCallback, useRef } from 'react'; import { SupersetClient, t } from '@superset-ui/core'; import { createErrorHandler } from 'src/views/CRUD/utils'; +import { Slice } from 'src/explore/components/PropertiesModal'; import { FetchDataConfig } from 'src/components/ListView'; +import Chart from 'src/types/Chart'; import { FavoriteStatus } from './types'; interface ListViewResourceState<D extends object = any> { @@ -33,6 +35,11 @@ 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 @@ -352,3 +359,41 @@ export function useFavoriteStatus( return [favoriteStatusRef, fetchFaveStar, saveFaveStar] as const; } + +export const useChartEditModal = ( + setCharts: (charts: Array<Chart>) => void, + charts: Array<Chart>, +) => { + const [ + sliceCurrentlyEditing, + setSliceCurrentlyEditing, + ] = useState<Slice | null>(null); + + function openChartEditModal(chart: Chart) { + setSliceCurrentlyEditing({ + slice_id: chart.id, + slice_name: chart.slice_name, + description: chart.description, + cache_timeout: chart.cache_timeout, + }); + } + + function closeChartEditModal() { + setSliceCurrentlyEditing(null); + } + + function handleChartUpdated(edits: Chart) { + // update the chart in our state with the edited info + const newCharts = charts.map((chart: Chart) => + chart.id === edits.id ? { ...chart, ...edits } : chart, + ); + setCharts(newCharts); + } + + return { + sliceCurrentlyEditing, + handleChartUpdated, + openChartEditModal, + closeChartEditModal, + }; +}; diff --git a/superset-frontend/src/views/CRUD/types.ts b/superset-frontend/src/views/CRUD/types.ts index 7f5fce5..afd1956 100644 --- a/superset-frontend/src/views/CRUD/types.ts +++ b/superset-frontend/src/views/CRUD/types.ts @@ -31,7 +31,7 @@ export interface DashboardTableProps { user?: User; } -interface Dashboard { +export interface Dashboard { changed_by_name: string; changed_by_url: string; changed_on_delta_humanized: string; @@ -43,7 +43,7 @@ interface Dashboard { url: string; thumbnail_url: string; owners: Owner[]; - loading: boolean; + loading?: boolean; } export interface DashboardCardProps { diff --git a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx index b4c941c..de237b4 100644 --- a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx +++ b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx @@ -40,34 +40,35 @@ interface ActivityProps { activityFilter: string; } -const filters = { - // Chart and dashbaord uses same filters - // for edited and created - edited: [ - { - col: 'changed_by', - opr: 'rel_o_m', - value: 1, - }, - ], - created: [ - { - col: 'owners', - opr: 'rel_m_m', - value: 1, - }, - ], -}; - export default function ActivityTable({ user, activityFilter }: ActivityProps) { const [active, setActiveState] = useState([]); const [loading, setLoading] = useState(false); - const recent = `/superset/recent_activity/${user.userId}/?limit=10`; + const recent = `/superset/recent_activity/${user.userId}/?limit=5`; + const filters = { + // Chart and dashbaord uses same filters + // for edited and created + edited: [ + { + col: 'changed_by', + opr: 'rel_o_m', + value: `${user.userId}`, + }, + ], + created: [ + { + col: 'created_by', + opr: 'rel_o_m', + value: `${user.userId}`, + }, + ], + }; + const setData = (endpoint: string) => { setLoading(true); SupersetClient.get({ endpoint }) .then(({ json }) => { setLoading(false); + // @ts-ignore setActiveState(json); }) .catch(() => { @@ -79,13 +80,14 @@ export default function ActivityTable({ user, activityFilter }: ActivityProps) { }; const setBatchData = (q: string) => { + // @ts-ignore createBatchMethod(q).then((res: Array<object>) => setActiveState(res)); }; const getIconName = (name: string | undefined) => { if (name === 'explore_json') return 'sql'; if (name === 'dashboard') return 'nav-dashboard'; - if (name === 'log') return 'nav-charts'; + if (name === 'log' || name === 'explore') return 'nav-charts'; return ''; }; diff --git a/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx b/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx index e1223cb..d0ccaee 100644 --- a/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx +++ b/superset-frontend/src/views/CRUD/welcome/ChartTable.tsx @@ -18,8 +18,9 @@ */ import React, { useEffect } from 'react'; import { t } from '@superset-ui/core'; -import { useListViewResource, useFavoriteStatus } from 'src/views/CRUD/hooks'; +import { useListViewResource, useChartEditModal } from 'src/views/CRUD/hooks'; import withToasts from 'src/messageToasts/enhancers/withToasts'; +import PropertiesModal from 'src/explore/components/PropertiesModal'; import { User } from 'src/types/bootstrapTypes'; import Owner from 'src/types/Owner'; import ChartCard from 'src/views/CRUD/chart/ChartCard'; @@ -35,27 +36,6 @@ interface ChartTableProps { user?: User; } -interface Dashboard { - changed_by_name: string; - changed_by_url: string; - changed_on_delta_humanized: string; - changed_by: string; - dashboard_title: string; - slice_name: string; - id: number; - published: boolean; - url: string; - thumbnail_url: string; - owners: Owner[]; - loading: boolean; -} - -interface ChartTableState { - charts: Dashboard[]; - chart_count: number; - loading: boolean; -} - function ChartTable({ chartFilter, user, @@ -64,10 +44,19 @@ function ChartTable({ }: ChartTableProps) { const { state: { loading, resourceCollection: charts, bulkSelectEnabled }, + setResourceCollection: setCharts, hasPerm, refreshData, fetchData, } = useListViewResource<Chart>('chart', t('chart'), addDangerToast); + + const { + sliceCurrentlyEditing, + openChartEditModal, + handleChartUpdated, + closeChartEditModal, + } = useChartEditModal(setCharts, charts); + const getFilters = () => { const filters = []; @@ -112,9 +101,19 @@ function ChartTable({ return ( <> + {sliceCurrentlyEditing && ( + <PropertiesModal + onHide={closeChartEditModal} + onSave={handleChartUpdated} + show + slice={sliceCurrentlyEditing} + /> + )} + {charts.map((e, i) => ( <ChartCard key={`${i}`} + openChartEditModal={openChartEditModal} loading={loading} chart={e} hasPerm={hasPerm} diff --git a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx index 0167006..c47b2dd 100644 --- a/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx +++ b/superset-frontend/src/views/CRUD/welcome/DashboardTable.tsx @@ -20,20 +20,12 @@ import React, { useEffect } from 'react'; import { t } from '@superset-ui/core'; import { useListViewResource, useFavoriteStatus } from 'src/views/CRUD/hooks'; import withToasts from 'src/messageToasts/enhancers/withToasts'; -import { User } from 'src/types/bootstrapTypes'; import Owner from 'src/types/Owner'; -import DashboardCard from '../dashboard/DashboardCard'; +import { DashboardTableProps } from 'src/views/CRUD/types'; +import DashboardCard from 'src/views/CRUD/dashboard/DashboardCard'; const PAGE_SIZE = 3; -interface DashboardTableProps { - addDangerToast: (message: string) => void; - addSuccessToast: (message: string) => void; - search: string; - dashboardFilter?: string; - user?: User; -} - interface Dashboard { changed_by_name: string; changed_by_url: string; @@ -72,9 +64,6 @@ function DashboardTable({ addDangerToast, ); - console.log('dashboards', dashboards); - console.log('dashboardFilter', dashboardFilter); - const getFilters = () => { const filters = []; diff --git a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx index 73c7547..d30db0b 100644 --- a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx +++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx @@ -87,24 +87,28 @@ const SavedQueries = ({ user, queryFilter }) => { return ( <> - {queries.map(q => ( - <ListViewCard - imgFallbackURL={null} - imgURL={null} - title={q.database.database_name} - rows={q.rows} - loading={loading} - description={t('Last run ', q.end_time)} - showImg={false} - actions={ - <ListViewCard.Actions> - <Dropdown overlay={menu}> - <Icon name="more-horiz" /> - </Dropdown> - </ListViewCard.Actions> - } - /> - ))} + {queries ? ( + queries.map(q => ( + <ListViewCard + imgFallbackURL={null} + imgURL={null} + title={q.database.database_name} + rows={q.rows} + loading={loading} + description={t('Last run ', q.end_time)} + showImg={false} + actions={ + <ListViewCard.Actions> + <Dropdown overlay={menu}> + <Icon name="more-horiz" /> + </Dropdown> + </ListViewCard.Actions> + } + /> + )) + ) : ( + <span>You have no Saved Queries!</span> + )} </> ); };
