From a95f7f59d58f3265c39c37a1474989b0cac9ce4e Mon Sep 17 00:00:00 2001 From: Alex Cottner Date: Fri, 26 Apr 2024 13:31:29 -0600 Subject: [PATCH 1/7] Adding spinner to bucket groups --- src/components/bucket/BucketGroups.tsx | 6 +++--- src/components/bucket/GroupDataList.tsx | 7 ++++++- test/components/bucket/GroupDataList_test.tsx | 5 +++++ 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/bucket/BucketGroups.tsx b/src/components/bucket/BucketGroups.tsx index 2ddd4b224..c35b1bf72 100644 --- a/src/components/bucket/BucketGroups.tsx +++ b/src/components/bucket/BucketGroups.tsx @@ -30,7 +30,7 @@ export default function BucketCollections({ params: { bid }, } = match; const { groups } = bucket; - + const listActions = ( ); @@ -42,12 +42,12 @@ export default function BucketCollections({ {listActions} - {groups.length === 0 ? ( + {!bucket.busy && groups.length === 0 ? (

This bucket has no groups.

) : ( - + )} {listActions} diff --git a/src/components/bucket/GroupDataList.tsx b/src/components/bucket/GroupDataList.tsx index 2912b7af4..93526cbcb 100644 --- a/src/components/bucket/GroupDataList.tsx +++ b/src/components/bucket/GroupDataList.tsx @@ -4,9 +4,10 @@ import { timeago } from "@src/utils"; import React from "react"; import { Gear } from "react-bootstrap-icons"; import { ClockHistory } from "react-bootstrap-icons"; +import Spinner from "../Spinner"; export function DataList(props) { - const { bid, groups, capabilities } = props; + const { bid, groups, capabilities, showSpinner } = props; return ( @@ -18,6 +19,10 @@ export function DataList(props) { + {showSpinner && + } {groups.map((group, index) => { const { id: gid, members, last_modified } = group; const date = new Date(last_modified); diff --git a/test/components/bucket/GroupDataList_test.tsx b/test/components/bucket/GroupDataList_test.tsx index 18ae837a9..b5ebefb58 100644 --- a/test/components/bucket/GroupDataList_test.tsx +++ b/test/components/bucket/GroupDataList_test.tsx @@ -36,6 +36,11 @@ describe("Bucket GroupDataList", () => { expect(screen.queryByText("memberA-1, memberA-2")).toBeDefined(); expect(screen.queryByText("memberB-1, memberB-2")).toBeDefined(); }); + + it("Should render a spinner when showSpinner is true", () => { + renderWithProvider(); + expect(screen.queryByTestId("spinner")).toBeDefined(); + }); }); describe("Bucket GroupListActions", () => { From f368211c40eb52c0e58b88b00693aae2be347b6b Mon Sep 17 00:00:00 2001 From: Alex Cottner Date: Fri, 26 Apr 2024 13:37:26 -0600 Subject: [PATCH 2/7] Adding spinner to bucket collections --- src/components/bucket/BucketCollections.tsx | 1 + src/components/bucket/CollectionDataList.tsx | 6 +++++- test/components/bucket/CollectionDataList_test.tsx | 4 ++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/bucket/BucketCollections.tsx b/src/components/bucket/BucketCollections.tsx index 9e1d1d60f..ee06e4721 100644 --- a/src/components/bucket/BucketCollections.tsx +++ b/src/components/bucket/BucketCollections.tsx @@ -76,6 +76,7 @@ export default function BucketCollections({ collections={collections} listBucketNextCollections={listBucketNextCollections} capabilities={capabilities} + showSpinner={!collections.loaded} /> )} {listActions} diff --git a/src/components/bucket/CollectionDataList.tsx b/src/components/bucket/CollectionDataList.tsx index 7cfcb7395..69dc6f2cc 100644 --- a/src/components/bucket/CollectionDataList.tsx +++ b/src/components/bucket/CollectionDataList.tsx @@ -4,6 +4,7 @@ import { canCreateCollection } from "@src/permission"; import { timeago } from "@src/utils"; import React from "react"; import { ClockHistory, Gear, Justify } from "react-bootstrap-icons"; +import Spinner from "../Spinner"; export function ListActions(props) { const { bid, session, bucket } = props; @@ -28,7 +29,7 @@ export function ListActions(props) { } export function DataList(props) { - const { bid, collections, capabilities, listBucketNextCollections } = props; + const { bid, collections, capabilities, listBucketNextCollections, showSpinner } = props; const { loaded, entries, hasNextPage } = collections; const thead = ( @@ -45,6 +46,9 @@ export function DataList(props) { const tbody = ( + {showSpinner && + } {entries.map((collection, index) => { const { id: cid, diff --git a/test/components/bucket/CollectionDataList_test.tsx b/test/components/bucket/CollectionDataList_test.tsx index e8f68218f..5cfc04ca2 100644 --- a/test/components/bucket/CollectionDataList_test.tsx +++ b/test/components/bucket/CollectionDataList_test.tsx @@ -64,6 +64,10 @@ describe("Bucket CollectionDataList", () => { expect(screen.queryByTitle("Browse collection")).toBeDefined(); expect(screen.queryByTitle("Edit collection attributes")).toBeDefined(); }); + it("Should render a spinner when showSpinner is true", () => { + renderWithProvider(); + expect(screen.queryByTestId("spinner")).toBeDefined(); + }); }); describe("Bucket CollectionListActions", () => { From 85dfdaed39ad161d9253151d04b52008e1e31387 Mon Sep 17 00:00:00 2001 From: Alex Cottner Date: Fri, 26 Apr 2024 13:42:04 -0600 Subject: [PATCH 3/7] Moving spinner on bucket attributes to inside of card --- css/styles.css | 4 ++++ src/components/bucket/BucketAttributes.tsx | 7 ++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/css/styles.css b/css/styles.css index a069e6ee6..34c08bc6c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -44,6 +44,10 @@ h1 { font-weight: bold; } +.card > .card-body { + position: relative; +} + .sidebar-filters > .card-body { padding: 15px 15px 0 15px; } diff --git a/src/components/bucket/BucketAttributes.tsx b/src/components/bucket/BucketAttributes.tsx index 9b2705980..836caef2b 100644 --- a/src/components/bucket/BucketAttributes.tsx +++ b/src/components/bucket/BucketAttributes.tsx @@ -60,16 +60,13 @@ export default function BucketAttributes({ [bid, updateBucket] ); - if (busy) { - return ; - } - return (

Edit {bid} bucket attributes

+ {busy ? : + />}
); From dfbdf0a61f0451ea36ebe27333a33ab30fa496de Mon Sep 17 00:00:00 2001 From: Alex Cottner Date: Fri, 26 Apr 2024 13:43:38 -0600 Subject: [PATCH 4/7] Moving spinner in bucket permissions --- src/components/bucket/BucketPermissions.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/bucket/BucketPermissions.tsx b/src/components/bucket/BucketPermissions.tsx index e8387a87b..ebb34a654 100644 --- a/src/components/bucket/BucketPermissions.tsx +++ b/src/components/bucket/BucketPermissions.tsx @@ -19,9 +19,6 @@ export function BucketPermissions() { const { busy, permissions } = bucket; const acls = ["read", "write", "collection:create", "group:create"]; - if (busy) { - return ; - } return (

@@ -32,12 +29,13 @@ export function BucketPermissions() { capabilities={session.serverInfo.capabilities} selected="permissions" > + { busy ? : + />}

); From 548a6162cac75b22709649b34eb062e669151b1e Mon Sep 17 00:00:00 2001 From: Alex Cottner Date: Fri, 26 Apr 2024 14:10:12 -0600 Subject: [PATCH 5/7] Moving simple review loader to within tab --- src/components/signoff/SimpleReview/index.tsx | 9 ++++++--- .../signoff/SimpleReview/SimpleReview_test.tsx | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/signoff/SimpleReview/index.tsx b/src/components/signoff/SimpleReview/index.tsx index 50fa798da..46f63ff89 100644 --- a/src/components/signoff/SimpleReview/index.tsx +++ b/src/components/signoff/SimpleReview/index.tsx @@ -116,6 +116,8 @@ export default function SimpleReview({ console.error(ex); } } + } else { + setRecords({ oldRecords: [], newRecords: [], loading: false }); } } getRecords(); @@ -139,8 +141,7 @@ export default function SimpleReview({ ); } else if ( session.authenticating || - session.busy || - (records.loading && signoffSource && signoffDest) + session.busy ) { return ; } @@ -196,6 +197,8 @@ export default function SimpleReview({ ); }; + console.warn(records) + return (

@@ -212,7 +215,7 @@ export default function SimpleReview({ capabilities={capabilities || {}} totalRecords={collection?.totalRecords || 0} > - + {records.loading ? : }

); diff --git a/test/components/signoff/SimpleReview/SimpleReview_test.tsx b/test/components/signoff/SimpleReview/SimpleReview_test.tsx index e66a5a6c4..e011692c1 100644 --- a/test/components/signoff/SimpleReview/SimpleReview_test.tsx +++ b/test/components/signoff/SimpleReview/SimpleReview_test.tsx @@ -117,7 +117,7 @@ describe("SimpleTest component", () => { it("should render not reviewable", async () => { renderSimpleReview({ signoff: undefined }); expect( - screen.getByText(/This collection does not support/).textContent + (await screen.findByText(/This collection does not support/)).textContent ).toBe( "This collection does not support reviews, or you do not have permission to review." ); From a0a8bc40921bd1de85e995ee85d011c15ba980a2 Mon Sep 17 00:00:00 2001 From: Alex Cottner Date: Wed, 1 May 2024 09:06:51 -0600 Subject: [PATCH 6/7] Finished moving spinners to standard places. Ran format. --- src/components/bucket/BucketAttributes.tsx | 21 ++++++++------ src/components/bucket/BucketGroups.tsx | 9 ++++-- src/components/bucket/BucketPermissions.tsx | 17 ++++++----- src/components/bucket/CollectionDataList.tsx | 20 +++++++++---- src/components/bucket/GroupDataList.tsx | 13 +++++---- .../collection/CollectionAttributes.tsx | 28 +++++++++---------- .../collection/CollectionPermissions.tsx | 19 +++++++------ src/components/group/GroupAttributes.tsx | 28 +++++++++---------- src/components/group/GroupPermissions.tsx | 19 +++++++------ src/components/record/RecordPermissions.tsx | 19 +++++++------ src/components/signoff/SimpleReview/index.tsx | 9 ++---- 11 files changed, 113 insertions(+), 89 deletions(-) diff --git a/src/components/bucket/BucketAttributes.tsx b/src/components/bucket/BucketAttributes.tsx index 836caef2b..1d0cc8a1d 100644 --- a/src/components/bucket/BucketAttributes.tsx +++ b/src/components/bucket/BucketAttributes.tsx @@ -66,15 +66,18 @@ export default function BucketAttributes({ Edit {bid} bucket attributes - {busy ? : - } + {busy ? ( + + ) : ( + + )} ); diff --git a/src/components/bucket/BucketGroups.tsx b/src/components/bucket/BucketGroups.tsx index c35b1bf72..fdb5d9ff8 100644 --- a/src/components/bucket/BucketGroups.tsx +++ b/src/components/bucket/BucketGroups.tsx @@ -30,7 +30,7 @@ export default function BucketCollections({ params: { bid }, } = match; const { groups } = bucket; - + const listActions = ( ); @@ -47,7 +47,12 @@ export default function BucketCollections({

This bucket has no groups.

) : ( - + )} {listActions} diff --git a/src/components/bucket/BucketPermissions.tsx b/src/components/bucket/BucketPermissions.tsx index ebb34a654..6b10f3012 100644 --- a/src/components/bucket/BucketPermissions.tsx +++ b/src/components/bucket/BucketPermissions.tsx @@ -29,13 +29,16 @@ export function BucketPermissions() { capabilities={session.serverInfo.capabilities} selected="permissions" > - { busy ? : - } + {busy ? ( + + ) : ( + + )} ); diff --git a/src/components/bucket/CollectionDataList.tsx b/src/components/bucket/CollectionDataList.tsx index 69dc6f2cc..1bd5e7895 100644 --- a/src/components/bucket/CollectionDataList.tsx +++ b/src/components/bucket/CollectionDataList.tsx @@ -1,10 +1,10 @@ +import Spinner from "../Spinner"; import AdminLink from "@src/components/AdminLink"; import PaginatedTable from "@src/components/PaginatedTable"; import { canCreateCollection } from "@src/permission"; import { timeago } from "@src/utils"; import React from "react"; import { ClockHistory, Gear, Justify } from "react-bootstrap-icons"; -import Spinner from "../Spinner"; export function ListActions(props) { const { bid, session, bucket } = props; @@ -29,7 +29,13 @@ export function ListActions(props) { } export function DataList(props) { - const { bid, collections, capabilities, listBucketNextCollections, showSpinner } = props; + const { + bid, + collections, + capabilities, + listBucketNextCollections, + showSpinner, + } = props; const { loaded, entries, hasNextPage } = collections; const thead = ( @@ -46,9 +52,13 @@ export function DataList(props) { const tbody = ( - {showSpinner && - } + {showSpinner && ( + + + + )} {entries.map((collection, index) => { const { id: cid, diff --git a/src/components/bucket/GroupDataList.tsx b/src/components/bucket/GroupDataList.tsx index 93526cbcb..074febf1a 100644 --- a/src/components/bucket/GroupDataList.tsx +++ b/src/components/bucket/GroupDataList.tsx @@ -1,10 +1,10 @@ +import Spinner from "../Spinner"; import AdminLink from "@src/components/AdminLink"; import { canCreateGroup } from "@src/permission"; import { timeago } from "@src/utils"; import React from "react"; import { Gear } from "react-bootstrap-icons"; import { ClockHistory } from "react-bootstrap-icons"; -import Spinner from "../Spinner"; export function DataList(props) { const { bid, groups, capabilities, showSpinner } = props; @@ -19,10 +19,13 @@ export function DataList(props) { - {showSpinner && - } + {showSpinner && ( + + + + )} {groups.map((group, index) => { const { id: gid, members, last_modified } = group; const date = new Date(last_modified); diff --git a/src/components/collection/CollectionAttributes.tsx b/src/components/collection/CollectionAttributes.tsx index 856160a05..55ff4399d 100644 --- a/src/components/collection/CollectionAttributes.tsx +++ b/src/components/collection/CollectionAttributes.tsx @@ -63,10 +63,6 @@ export default function CollectionAttributes({ } = match; const { busy, data: formData } = collection; - if (busy) { - return ; - } - return (

@@ -82,16 +78,20 @@ export default function CollectionAttributes({ selected="attributes" capabilities={capabilities} > - + {busy ? ( + + ) : ( + + )}

); diff --git a/src/components/collection/CollectionPermissions.tsx b/src/components/collection/CollectionPermissions.tsx index c141c0fc1..b07410466 100644 --- a/src/components/collection/CollectionPermissions.tsx +++ b/src/components/collection/CollectionPermissions.tsx @@ -28,9 +28,6 @@ export function CollectionPermissions() { ); }; - if (busy) { - return ; - } return (

@@ -46,12 +43,16 @@ export function CollectionPermissions() { capabilities={session.serverInfo.capabilities} selected="permissions" > - + {busy ? ( + + ) : ( + + )}

); diff --git a/src/components/group/GroupAttributes.tsx b/src/components/group/GroupAttributes.tsx index b6d9042b6..1d38ebec4 100644 --- a/src/components/group/GroupAttributes.tsx +++ b/src/components/group/GroupAttributes.tsx @@ -60,10 +60,6 @@ export default function GroupAttributes(props: Props) { [bid, deleteGroup] ); - if (busy || formData == null) { - return ; - } - return (

@@ -79,16 +75,20 @@ export default function GroupAttributes(props: Props) { selected="attributes" capabilities={capabilities} > - + {busy || formData == null ? ( + + ) : ( + + )}

); diff --git a/src/components/group/GroupPermissions.tsx b/src/components/group/GroupPermissions.tsx index b17fff8d2..7c7656ef1 100644 --- a/src/components/group/GroupPermissions.tsx +++ b/src/components/group/GroupPermissions.tsx @@ -22,9 +22,6 @@ export function GroupPermissions() { const onSubmit = ({ formData }: { formData: GroupPermissionsType }) => { dispatch(BucketActions.updateGroup(bid, gid, { permissions: formData })); }; - if (busy) { - return ; - } return (

@@ -40,12 +37,16 @@ export function GroupPermissions() { capabilities={session.serverInfo.capabilities} selected="permissions" > - + {busy ? ( + + ) : ( + + )}

); diff --git a/src/components/record/RecordPermissions.tsx b/src/components/record/RecordPermissions.tsx index 159140c85..14e5b800c 100644 --- a/src/components/record/RecordPermissions.tsx +++ b/src/components/record/RecordPermissions.tsx @@ -26,9 +26,6 @@ export function RecordPermissions() { }; const { busy, permissions } = record; const acls = ["read", "write"]; - if (busy) { - return ; - } return (

@@ -45,12 +42,16 @@ export function RecordPermissions() { capabilities={session.serverInfo.capabilities} selected="permissions" > - + {busy ? ( + + ) : ( + + )}

); diff --git a/src/components/signoff/SimpleReview/index.tsx b/src/components/signoff/SimpleReview/index.tsx index 46f63ff89..d3d7c2727 100644 --- a/src/components/signoff/SimpleReview/index.tsx +++ b/src/components/signoff/SimpleReview/index.tsx @@ -139,10 +139,7 @@ export default function SimpleReview({ Not authenticated ); - } else if ( - session.authenticating || - session.busy - ) { + } else if (session.authenticating || session.busy) { return ; } const handleRollback = (text: string) => { @@ -197,8 +194,8 @@ export default function SimpleReview({ ); }; - console.warn(records) - + console.warn(records); + return (

From 248bb9bd45f71c8ebc7fdcd1e83813b0941c2a3a Mon Sep 17 00:00:00 2001 From: Alex Cottner Date: Thu, 2 May 2024 12:17:52 -0600 Subject: [PATCH 7/7] added comment and removed console warning from debug --- src/components/group/GroupAttributes.tsx | 3 ++- src/components/signoff/SimpleReview/index.tsx | 2 -- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/group/GroupAttributes.tsx b/src/components/group/GroupAttributes.tsx index 1d38ebec4..9ed1e5873 100644 --- a/src/components/group/GroupAttributes.tsx +++ b/src/components/group/GroupAttributes.tsx @@ -43,6 +43,7 @@ export default function GroupAttributes(props: Props) { params: { bid, gid }, } = match; const { busy, data: formData } = group; + console.log(group); const onSubmit = useCallback( (formData: GroupData) => { @@ -75,7 +76,7 @@ export default function GroupAttributes(props: Props) { selected="attributes" capabilities={capabilities} > - {busy || formData == null ? ( + {busy || formData == null ? ( // formData will be null until it is fetched, busy will be false until the fetch starts, need to wait for for both conditions before rendering ) : (

+ +
+
-
+ +
- -
+ +