From a1fca2abfff416106d3ada6d855d7360dc29009d Mon Sep 17 00:00:00 2001 From: "Hugh A. Miles II" Date: Sat, 30 Sep 2023 22:57:59 +0000 Subject: [PATCH 1/4] update loading + pagination --- .../features/allEntities/AllEntitiesTable.tsx | 44 +++-------------- .../src/pages/AllEntities/index.tsx | 49 ++++++++++++++++++- 2 files changed, 54 insertions(+), 39 deletions(-) diff --git a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx index 75491c5baa2b1..6a7ca22cdb743 100644 --- a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx +++ b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx @@ -16,20 +16,18 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import moment from 'moment'; -import { t, styled, logging } from '@superset-ui/core'; +import { t, styled } from '@superset-ui/core'; import TableView, { EmptyWrapperType } from 'src/components/TableView'; -import { addDangerToast } from 'src/components/MessageToasts/actions'; -import Loading from 'src/components/Loading'; import { TagsList } from 'src/components/Tags'; import FacePile from 'src/components/FacePile'; import Tag from 'src/types/TagType'; import Owner from 'src/types/Owner'; import { EmptyStateBig } from 'src/components/EmptyState'; -import { fetchObjects } from '../tags/tags'; const MAX_TAGS_TO_SHOW = 3; +const PAGE_SIZE = 5; const AllEntitiesTableContainer = styled.div` text-align: left; @@ -72,50 +70,21 @@ interface TaggedObjects { interface AllEntitiesTableProps { search?: string; setShowTagModal: (show: boolean) => void; + objects: TaggedObjects; } export default function AllEntitiesTable({ search = '', setShowTagModal, + objects, }: AllEntitiesTableProps) { type objectType = 'dashboard' | 'chart' | 'query'; - const [objects, setObjects] = useState({ - dashboard: [], - chart: [], - query: [], - }); - const [isLoading, setLoading] = useState(true); const showListViewObjs = objects.dashboard.length > 0 || objects.chart.length > 0 || objects.query.length > 0; - useEffect(() => { - if (search === '') { - return; - } - - setLoading(true); - - fetchObjects( - { tags: search, types: null }, - (data: TaggedObject[]) => { - const objects = { dashboard: [], chart: [], query: [] }; - data.forEach(function (object) { - const object_type = object.type; - objects[object_type].push(object); - }); - setObjects(objects); - setLoading(false); - }, - (error: Response) => { - addDangerToast('Error Fetching Tagged Objects'); - logging.log(error.text); - }, - ); - }, [search]); - const renderTable = (type: objectType) => { const data = objects[type].map((o: TaggedObject) => ({ [type]: {o.name}, @@ -129,7 +98,7 @@ export default function AllEntitiesTable({ className="table-condensed" emptyWrapperType={EmptyWrapperType.Small} data={data} - pageSize={50} + pageSize={PAGE_SIZE} columns={[ { accessor: type, @@ -176,7 +145,6 @@ export default function AllEntitiesTable({ ); }; - if (isLoading) return ; return ( {showListViewObjs ? ( diff --git a/superset-frontend/src/pages/AllEntities/index.tsx b/superset-frontend/src/pages/AllEntities/index.tsx index 63d5883537cd9..587f3958a9e59 100644 --- a/superset-frontend/src/pages/AllEntities/index.tsx +++ b/superset-frontend/src/pages/AllEntities/index.tsx @@ -32,6 +32,20 @@ import { fetchSingleTag } from 'src/features/tags/tags'; import { Tag } from 'src/views/CRUD/types'; import TagModal from 'src/features/tags/TagModal'; import withToasts, { useToasts } from 'src/components/MessageToasts/withToasts'; +import { fetchObjects } from 'src/features/tags/tags'; +import Loading from 'src/components/Loading'; + +interface TaggedObject { + id: number; + type: string; + name: string; + url: string; + changed_on: moment.MomentInput; + created_by: number | undefined; + creator: string; + owners: Owner[]; + tags: Tag[]; +} const additionalItemsStyles = (theme: SupersetTheme) => css` display: flex; @@ -88,6 +102,12 @@ function AllEntities() { const [tag, setTag] = useState(null); const [showTagModal, setShowTagModal] = useState(false); const { addSuccessToast, addDangerToast } = useToasts(); + const [isLoading, setLoading] = useState(false); + const [objects, setObjects] = useState({ + dashboard: [], + chart: [], + query: [], + }); const editableTitleProps = { title: tag?.name || '', @@ -114,13 +134,34 @@ function AllEntities() { }; const items = [description, owner, lastModified]; + const fetchTaggedObjects = () => { + setLoading(true); + fetchObjects( + { tags: tag?.name || '', types: null }, + (data: TaggedObject[]) => { + const objects = { dashboard: [], chart: [], query: [] }; + data.forEach(function (object) { + const object_type = object.type; + objects[object_type].push(object); + }); + setObjects(objects); + setLoading(false); + }, + (error: Response) => { + addDangerToast('Error Fetching Tagged Objects'); + }, + ); + }; + useEffect(() => { // fetch single tag met if (tagId) { + setLoading(true); fetchSingleTag( tagId, (tag: Tag) => { setTag(tag); + setLoading(false); }, (error: Response) => { addDangerToast(t('Error Fetching Tagged Objects')); @@ -129,6 +170,11 @@ function AllEntities() { } }, [tagId]); + useEffect(() => { + if (tag) fetchTaggedObjects(); + }, [tag]); + + if (isLoading) return ; return ( {}} // todo(hugh): implement refreshData on table reload + refreshData={fetchTaggedObjects} /> From 1fa758f81dbe71e95144aacd45e8c3722f799ab0 Mon Sep 17 00:00:00 2001 From: "Hugh A. Miles II" Date: Wed, 4 Oct 2023 00:22:08 +0000 Subject: [PATCH 2/4] ok --- .../src/features/allEntities/AllEntitiesTable.tsx | 2 +- superset-frontend/src/pages/AllEntities/index.tsx | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx index 6a7ca22cdb743..ac544208247ac 100644 --- a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx +++ b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx @@ -61,7 +61,7 @@ interface TaggedObject { tags: Tag[]; } -interface TaggedObjects { +export interface TaggedObjects { dashboard: TaggedObject[]; chart: TaggedObject[]; query: TaggedObject[]; diff --git a/superset-frontend/src/pages/AllEntities/index.tsx b/superset-frontend/src/pages/AllEntities/index.tsx index 587f3958a9e59..c5a4db8584aa4 100644 --- a/superset-frontend/src/pages/AllEntities/index.tsx +++ b/superset-frontend/src/pages/AllEntities/index.tsx @@ -19,7 +19,9 @@ import React, { useEffect, useState } from 'react'; import { styled, t, css, SupersetTheme } from '@superset-ui/core'; import { NumberParam, useQueryParam } from 'use-query-params'; -import AllEntitiesTable from 'src/features/allEntities/AllEntitiesTable'; +import AllEntitiesTable, { + TaggedObjects, +} from 'src/features/allEntities/AllEntitiesTable'; import Button from 'src/components/Button'; import MetadataBar, { MetadataType, @@ -28,11 +30,10 @@ import MetadataBar, { LastModified, } from 'src/components/MetadataBar'; import { PageHeaderWithActions } from 'src/components/PageHeaderWithActions'; -import { fetchSingleTag } from 'src/features/tags/tags'; import { Tag } from 'src/views/CRUD/types'; import TagModal from 'src/features/tags/TagModal'; import withToasts, { useToasts } from 'src/components/MessageToasts/withToasts'; -import { fetchObjects } from 'src/features/tags/tags'; +import { fetchObjects, fetchSingleTag } from 'src/features/tags/tags'; import Loading from 'src/components/Loading'; interface TaggedObject { From fdd85415ff0778f2a2543f6ba59f475d871bada1 Mon Sep 17 00:00:00 2001 From: "Hugh A. Miles II" Date: Thu, 5 Oct 2023 16:07:41 +0000 Subject: [PATCH 3/4] update loading states --- superset-frontend/src/pages/AllEntities/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/superset-frontend/src/pages/AllEntities/index.tsx b/superset-frontend/src/pages/AllEntities/index.tsx index c5a4db8584aa4..9dc0f995b2020 100644 --- a/superset-frontend/src/pages/AllEntities/index.tsx +++ b/superset-frontend/src/pages/AllEntities/index.tsx @@ -150,6 +150,7 @@ function AllEntities() { }, (error: Response) => { addDangerToast('Error Fetching Tagged Objects'); + setLoading(false); }, ); }; @@ -166,6 +167,7 @@ function AllEntities() { }, (error: Response) => { addDangerToast(t('Error Fetching Tagged Objects')); + setLoading(false); }, ); } From 6fa31722ad9cfef9edb8b1c6707821ebd2ce6f51 Mon Sep 17 00:00:00 2001 From: "Hugh A. Miles II" Date: Thu, 5 Oct 2023 16:30:35 +0000 Subject: [PATCH 4/4] update styles --- superset-frontend/src/pages/AllEntities/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/superset-frontend/src/pages/AllEntities/index.tsx b/superset-frontend/src/pages/AllEntities/index.tsx index 9dc0f995b2020..9000d9cfcf016 100644 --- a/superset-frontend/src/pages/AllEntities/index.tsx +++ b/superset-frontend/src/pages/AllEntities/index.tsx @@ -74,6 +74,9 @@ const AllEntitiesContainer = styled.div` .entities { margin: ${theme.gridUnit * 6}px; 0px; } + .pagination-container { + background-color: transparent; + } `} `;