nytai commented on a change in pull request #10680:
URL:
https://github.com/apache/incubator-superset/pull/10680#discussion_r477605900
##########
File path: superset-frontend/src/views/CRUD/chart/ChartList.tsx
##########
@@ -102,190 +80,239 @@ const createFetchDatasets = (handleError: (err:
Response) => void) => async (
}
return [];
};
-class ChartList extends React.PureComponent<Props, State> {
- static propTypes = {
- addDangerToast: PropTypes.func.isRequired,
- };
- state: State = {
- bulkSelectEnabled: false,
- chartCount: 0,
- charts: [],
- favoriteStatus: {}, // Hash mapping dashboard id to 'isStarred' status
- lastFetchDataConfig: null,
- loading: true,
- permissions: [],
- sliceCurrentlyEditing: null,
- };
+interface ChartListProps {
+ addDangerToast: (msg: string) => void;
+ addSuccessToast: (msg: string) => void;
+}
+
+function ChartList(props: ChartListProps) {
+ const {
+ state: {
+ loading,
+ resourceCount: chartCount,
+ resourceCollection: charts,
+ bulkSelectEnabled,
+ },
+ setResourceCollection: setCharts,
+ hasPerm,
+ fetchData,
+ toggleBulkSelect,
+ refreshData,
+ } = useListViewResource<Chart>('chart', t('chart'), props.addDangerToast);
+ const [favoriteStatusRef, fetchFaveStar, saveFaveStar] = useFavoriteStatus(
+ {},
+ FAVESTAR_BASE_URL,
+ props.addDangerToast,
+ );
+ const [
+ sliceCurrentlyEditing,
+ setSliceCurrentlyEditing,
+ ] = useState<Slice | null>(null);
+
+ 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}`,
+ }).then(
+ () => {
+ refreshData();
+ props.addSuccessToast(t('Deleted: %s', sliceName));
+ },
+ () => {
+ props.addDangerToast(t('There was an issue deleting: %s', sliceName));
+ },
+ );
+ }
- componentDidMount() {
- SupersetClient.get({
- endpoint: `/api/v1/chart/_info`,
+ function handleBulkChartDelete(chartsToDelete: Chart[]) {
+ SupersetClient.delete({
+ endpoint: `/api/v1/chart/?q=${rison.encode(
+ chartsToDelete.map(({ id }) => id),
+ )}`,
}).then(
- ({ json: infoJson = {} }) => {
- this.setState({
- permissions: infoJson.permissions,
- });
+ ({ json = {} }) => {
+ refreshData();
+ props.addSuccessToast(json.message);
},
createErrorHandler(errMsg =>
- this.props.addDangerToast(
- t('An error occurred while fetching chart info: %s', errMsg),
+ props.addDangerToast(
+ t('There was an issue deleting the selected charts: %s', errMsg),
),
),
);
}
- get canEdit() {
- return this.hasPerm('can_edit');
- }
-
- get canDelete() {
- return this.hasPerm('can_delete');
+ function renderFaveStar(id: number) {
+ return (
+ <FaveStar
+ itemId={id}
+ fetchFaveStar={fetchFaveStar}
+ saveFaveStar={saveFaveStar}
+ isStarred={!!favoriteStatusRef.current[id]}
+ height={20}
+ width={20}
+ />
+ );
}
- initialSort = [{ id: 'changed_on_delta_humanized', desc: true }];
-
- fetchMethods = createFaveStarHandlers(
- FAVESTAR_BASE_URL,
- this,
- (message: string) => {
- this.props.addDangerToast(message);
- },
- );
-
- columns = [
- {
- Cell: ({ row: { original } }: any) => {
- return (
- <FaveStar
- itemId={original.id}
- fetchFaveStar={this.fetchMethods.fetchFaveStar}
- saveFaveStar={this.fetchMethods.saveFaveStar}
- isStarred={!!this.state.favoriteStatus[original.id]}
- height={20}
- />
- );
+ const columns = useMemo(
+ () => [
+ {
+ Cell: ({
+ row: {
+ original: { id },
+ },
+ }: any) => renderFaveStar(id),
+ Header: '',
+ id: 'favorite',
+ disableSortBy: true,
},
- Header: '',
- id: 'favorite',
- disableSortBy: true,
- },
- {
- Cell: ({
- row: {
- original: { url, slice_name: sliceName },
- },
- }: any) => <a href={url}>{sliceName}</a>,
- Header: t('Chart'),
- accessor: 'slice_name',
- },
- {
- Cell: ({
- row: {
- original: { viz_type: vizType },
- },
- }: any) => vizType,
- Header: t('Visualization Type'),
- accessor: 'viz_type',
- },
- {
- Cell: ({
- row: {
- original: { datasource_name_text: dsNameTxt, datasource_url: dsUrl },
- },
- }: any) => <a href={dsUrl}>{dsNameTxt}</a>,
- Header: t('Datasource'),
- accessor: 'datasource_name',
- },
- {
- Cell: ({
- row: {
- original: {
- changed_by_name: changedByName,
- changed_by_url: changedByUrl,
+ {
+ Cell: ({
+ row: {
+ original: { url, slice_name: sliceName },
},
- },
- }: any) => <a href={changedByUrl}>{changedByName}</a>,
- Header: t('Modified By'),
- accessor: 'changed_by.first_name',
- },
- {
- Cell: ({
- row: {
- original: { changed_on_delta_humanized: changedOn },
- },
- }: any) => <span className="no-wrap">{changedOn}</span>,
- Header: t('Last Modified'),
- accessor: 'changed_on_delta_humanized',
- },
- {
- accessor: 'description',
- hidden: true,
- disableSortBy: true,
- },
- {
- accessor: 'owners',
- hidden: true,
- disableSortBy: true,
- },
- {
- accessor: 'datasource_id',
- hidden: true,
- disableSortBy: true,
- },
- {
- Cell: ({ row: { original } }: any) => {
- const handleDelete = () => this.handleChartDelete(original);
- const openEditModal = () => this.openChartEditModal(original);
- if (!this.canEdit && !this.canDelete) {
- return null;
- }
+ }: any) => <a href={url}>{sliceName}</a>,
+ Header: t('Chart'),
+ accessor: 'slice_name',
+ },
+ {
+ Cell: ({
+ row: {
+ original: { viz_type: vizType },
+ },
+ }: any) => vizType,
+ Header: t('Visualization Type'),
+ accessor: 'viz_type',
+ },
+ {
+ Cell: ({
+ row: {
+ original: {
+ datasource_name_text: dsNameTxt,
+ datasource_url: dsUrl,
+ },
+ },
+ }: any) => <a href={dsUrl}>{dsNameTxt}</a>,
+ Header: t('Datasource'),
+ accessor: 'datasource_name',
+ },
+ {
+ Cell: ({
+ row: {
+ original: {
+ changed_by_name: changedByName,
+ changed_by_url: changedByUrl,
+ },
+ },
+ }: any) => <a href={changedByUrl}>{changedByName}</a>,
+ Header: t('Modified By'),
+ accessor: 'changed_by.first_name',
+ },
+ {
+ Cell: ({
+ row: {
+ original: { changed_on_delta_humanized: changedOn },
+ },
+ }: any) => <span className="no-wrap">{changedOn}</span>,
+ Header: t('Last Modified'),
+ accessor: 'changed_on_delta_humanized',
+ },
+ {
+ accessor: 'description',
+ hidden: true,
+ disableSortBy: true,
Review comment:
originally the property was called "sortable" however there were a few
type errors creeped up so I opted to use react-table's included property
https://react-table.tanstack.com/docs/api/useSortBy#table-options
If time permits I'll do a second pass at trying to clean up the columns
config api.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
