From 2fa167c7f84efec79edd3bfcc91ccdb5691d436c Mon Sep 17 00:00:00 2001 From: Carissa Knipe Date: Wed, 27 Mar 2024 15:33:48 -0700 Subject: [PATCH 1/6] fix: Display domain url for links in shared files again --- .../components/SharedDataEntryBase.js | 64 +++++++++++++------ .../components/SharedDataEntryLink.js | 2 +- 2 files changed, 47 insertions(+), 19 deletions(-) diff --git a/src/sharedData/components/SharedDataEntryBase.js b/src/sharedData/components/SharedDataEntryBase.js index b588c69b4..dca8b21ee 100644 --- a/src/sharedData/components/SharedDataEntryBase.js +++ b/src/sharedData/components/SharedDataEntryBase.js @@ -56,6 +56,7 @@ const SharedDataEntryBase = props => { ShareComponent, fileSize, resourceType, + domain, } = props; const [isEditingName, setIsEditingName] = useState(false); const [isEditingDescription, setIsEditingDescription] = useState(false); @@ -162,6 +163,45 @@ const SharedDataEntryBase = props => { [dataEntry, owner] ); + const LinkInfo = ({ domain }) => { + return ( + + {domain} + + ); + }; + + const FileInfo = ({ fileSize, resourceType }) => { + return ( + <> + + {resourceType} + + + {fileSize} + + + ); + }; + return ( { - - {resourceType} - - - {fileSize} - + {dataEntry.entryType === 'LINK' ? ( + + ) : ( + + )} + diff --git a/src/sharedData/components/SharedDataEntryLink.js b/src/sharedData/components/SharedDataEntryLink.js index 8ee037f4c..c447c9f7d 100644 --- a/src/sharedData/components/SharedDataEntryLink.js +++ b/src/sharedData/components/SharedDataEntryLink.js @@ -88,7 +88,7 @@ const SharedDataEntryLink = props => { /> )} DownloadComponent={DownloadComponent} - info={domain} + domain={domain} /> ); }; From a2c4af25b70bb3169604b1e9cac9ddd8383cefaf Mon Sep 17 00:00:00 2001 From: Carissa Knipe Date: Wed, 27 Mar 2024 16:39:45 -0700 Subject: [PATCH 2/6] refactor: create InfoComponent for Link and File, instead of conditional logic in Base --- .../components/SharedDataEntryBase.js | 88 +++++++++---------- .../components/SharedDataEntryFile.js | 34 ++++++- .../components/SharedDataEntryLink.js | 36 ++++++-- 3 files changed, 106 insertions(+), 52 deletions(-) diff --git a/src/sharedData/components/SharedDataEntryBase.js b/src/sharedData/components/SharedDataEntryBase.js index dca8b21ee..ad9708bf9 100644 --- a/src/sharedData/components/SharedDataEntryBase.js +++ b/src/sharedData/components/SharedDataEntryBase.js @@ -54,9 +54,10 @@ const SharedDataEntryBase = props => { EntryTypeIcon, DownloadComponent, ShareComponent, - fileSize, - resourceType, - domain, + InfoComponent, + //fileSize, //TODO-cknipe: REMOVE + //fileType, + //linkDomain, } = props; const [isEditingName, setIsEditingName] = useState(false); const [isEditingDescription, setIsEditingDescription] = useState(false); @@ -163,44 +164,45 @@ const SharedDataEntryBase = props => { [dataEntry, owner] ); - const LinkInfo = ({ domain }) => { - return ( - - {domain} - - ); - }; + // const LinkInfo = ({ linkDomain }) => { + // return ( + // + // {linkDomain} + // + // ); + // }; - const FileInfo = ({ fileSize, resourceType }) => { - return ( - <> - - {resourceType} - - - {fileSize} - - - ); - }; + // TODO-cknipe: Remove + // const FileInfo = ({ fileSize, fileType }) => { + // return ( + // <> + // + // {fileType} + // + // + // {fileSize} + // + // + // ); + // }; return ( @@ -252,11 +254,7 @@ const SharedDataEntryBase = props => { - {dataEntry.entryType === 'LINK' ? ( - - ) : ( - - )} + {InfoComponent && } diff --git a/src/sharedData/components/SharedDataEntryFile.js b/src/sharedData/components/SharedDataEntryFile.js index 239c53d52..614c0d62e 100644 --- a/src/sharedData/components/SharedDataEntryFile.js +++ b/src/sharedData/components/SharedDataEntryFile.js @@ -62,6 +62,33 @@ const StackRow = props => ( ); +const InfoComponent = ({ sharedResource }) => { + const fileSize = filesize(sharedResource.dataEntry.size, { round: 0 }); + const fileType = sharedResource.dataEntry.resourceType; + return ( + <> + + {fileType} + + + {fileSize} + + + ); +}; + const Visualizations = props => { const { baseOwnerUrl } = useCollaborationContext(); const { i18n, t } = useTranslation(); @@ -373,8 +400,11 @@ const SharedDataEntryFile = props => { )} DownloadComponent={DownloadComponent} ShareComponent={ShareComponent} - fileSize={filesize(sharedResource.dataEntry.size, { round: 0 })} - resourceType={sharedResource.dataEntry.resourceType} + InfoComponent={InfoComponent} + // TODO-cknipe: Remove + //fileSize: filesize(sharedResource.dataEntry.size, { round: 0 }), + //fileType: sharedResource.dataEntry.fileType, + //}} > diff --git a/src/sharedData/components/SharedDataEntryLink.js b/src/sharedData/components/SharedDataEntryLink.js index c447c9f7d..70f58e1a1 100644 --- a/src/sharedData/components/SharedDataEntryLink.js +++ b/src/sharedData/components/SharedDataEntryLink.js @@ -17,7 +17,7 @@ import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import OpenInNewIcon from '@mui/icons-material/OpenInNew'; -import { IconButton } from '@mui/material'; +import { Grid, IconButton } from '@mui/material'; import { useCollaborationContext } from 'collaboration/collaborationContext'; import ExternalLink from 'common/components/ExternalLink'; @@ -60,9 +60,8 @@ const DownloadComponent = props => { ); }; -const SharedDataEntryLink = props => { - const { t } = useTranslation(); - const { sharedResource } = props; +// TODO-cknipe: Move this and finsih +const InfoComponent = ({ sharedResource }) => { const dataEntry = useMemo( () => sharedResource.dataEntry, [sharedResource.dataEntry] @@ -73,6 +72,33 @@ const SharedDataEntryLink = props => { return url.hostname; }, [dataEntry.url]); + return ( + + {domain} + + ); +}; + +const SharedDataEntryLink = props => { + const { t } = useTranslation(); + const { sharedResource } = props; + // TODO-cknipe: Think move this up to InfoComponent? + // const dataEntry = useMemo( + // () => sharedResource.dataEntry, + // [sharedResource.dataEntry] + // ); + + // const domain = useMemo(() => { + // const url = new URL(dataEntry.url); + // return url.hostname; + // }, [dataEntry.url]); + return ( { }} /> )} + InfoComponent={InfoComponent} DownloadComponent={DownloadComponent} - domain={domain} /> ); }; From 90fb2f413c6c296b61a7db2ce846bee973b10bce Mon Sep 17 00:00:00 2001 From: Carissa Knipe Date: Thu, 28 Mar 2024 13:07:00 -0700 Subject: [PATCH 3/6] refactor: Wrap InfoComponent in a Grid item and change the file and link implementations with respect to that parent Grid item It's not quite a refactor because the spacing changes very slightly, but I'm just gonna call it a refactor. --- .../components/SharedDataEntryBase.js | 13 +++++++++++-- .../components/SharedDataEntryFile.js | 18 ++++++------------ .../components/SharedDataEntryLink.js | 8 +------- 3 files changed, 18 insertions(+), 21 deletions(-) diff --git a/src/sharedData/components/SharedDataEntryBase.js b/src/sharedData/components/SharedDataEntryBase.js index ad9708bf9..8c07fd5ba 100644 --- a/src/sharedData/components/SharedDataEntryBase.js +++ b/src/sharedData/components/SharedDataEntryBase.js @@ -254,9 +254,18 @@ const SharedDataEntryBase = props => { - {InfoComponent && } + + {InfoComponent && } + + - {t('sharedData.file_date_and_author', { diff --git a/src/sharedData/components/SharedDataEntryFile.js b/src/sharedData/components/SharedDataEntryFile.js index 614c0d62e..4e4e15900 100644 --- a/src/sharedData/components/SharedDataEntryFile.js +++ b/src/sharedData/components/SharedDataEntryFile.js @@ -66,26 +66,20 @@ const InfoComponent = ({ sharedResource }) => { const fileSize = filesize(sharedResource.dataEntry.size, { round: 0 }); const fileType = sharedResource.dataEntry.resourceType; return ( - <> + {fileType} - + {fileSize} - + + ); }; diff --git a/src/sharedData/components/SharedDataEntryLink.js b/src/sharedData/components/SharedDataEntryLink.js index 70f58e1a1..57d657805 100644 --- a/src/sharedData/components/SharedDataEntryLink.js +++ b/src/sharedData/components/SharedDataEntryLink.js @@ -73,13 +73,7 @@ const InfoComponent = ({ sharedResource }) => { }, [dataEntry.url]); return ( - + {domain} ); From 58b57c9da2f54fb19708f6723f1618354daca399 Mon Sep 17 00:00:00 2001 From: Carissa Knipe Date: Thu, 28 Mar 2024 13:30:07 -0700 Subject: [PATCH 4/6] chore: Clean up comments --- .../components/SharedDataEntryBase.js | 43 ------------------- .../components/SharedDataEntryFile.js | 4 -- .../components/SharedDataEntryLink.js | 11 ----- 3 files changed, 58 deletions(-) diff --git a/src/sharedData/components/SharedDataEntryBase.js b/src/sharedData/components/SharedDataEntryBase.js index 8c07fd5ba..cd28bfe8b 100644 --- a/src/sharedData/components/SharedDataEntryBase.js +++ b/src/sharedData/components/SharedDataEntryBase.js @@ -55,9 +55,6 @@ const SharedDataEntryBase = props => { DownloadComponent, ShareComponent, InfoComponent, - //fileSize, //TODO-cknipe: REMOVE - //fileType, - //linkDomain, } = props; const [isEditingName, setIsEditingName] = useState(false); const [isEditingDescription, setIsEditingDescription] = useState(false); @@ -164,46 +161,6 @@ const SharedDataEntryBase = props => { [dataEntry, owner] ); - // const LinkInfo = ({ linkDomain }) => { - // return ( - // - // {linkDomain} - // - // ); - // }; - - // TODO-cknipe: Remove - // const FileInfo = ({ fileSize, fileType }) => { - // return ( - // <> - // - // {fileType} - // - // - // {fileSize} - // - // - // ); - // }; - return ( { DownloadComponent={DownloadComponent} ShareComponent={ShareComponent} InfoComponent={InfoComponent} - // TODO-cknipe: Remove - //fileSize: filesize(sharedResource.dataEntry.size, { round: 0 }), - //fileType: sharedResource.dataEntry.fileType, - //}} > diff --git a/src/sharedData/components/SharedDataEntryLink.js b/src/sharedData/components/SharedDataEntryLink.js index 57d657805..5126ebbb5 100644 --- a/src/sharedData/components/SharedDataEntryLink.js +++ b/src/sharedData/components/SharedDataEntryLink.js @@ -60,7 +60,6 @@ const DownloadComponent = props => { ); }; -// TODO-cknipe: Move this and finsih const InfoComponent = ({ sharedResource }) => { const dataEntry = useMemo( () => sharedResource.dataEntry, @@ -82,16 +81,6 @@ const InfoComponent = ({ sharedResource }) => { const SharedDataEntryLink = props => { const { t } = useTranslation(); const { sharedResource } = props; - // TODO-cknipe: Think move this up to InfoComponent? - // const dataEntry = useMemo( - // () => sharedResource.dataEntry, - // [sharedResource.dataEntry] - // ); - - // const domain = useMemo(() => { - // const url = new URL(dataEntry.url); - // return url.hostname; - // }, [dataEntry.url]); return ( Date: Thu, 28 Mar 2024 14:11:31 -0700 Subject: [PATCH 5/6] test: Add test that the expected items are in the shared data entries for files and links --- .../components/LandscapeView.test.js | 40 +++++++++++++++++-- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/src/landscape/components/LandscapeView.test.js b/src/landscape/components/LandscapeView.test.js index 3c381596b..6a06b8905 100644 --- a/src/landscape/components/LandscapeView.test.js +++ b/src/landscape/components/LandscapeView.test.js @@ -109,6 +109,7 @@ const baseViewTest = async ( })), }; + // Add files to the shared resources const sharedResources = { edges: Array(6) .fill(0) @@ -129,6 +130,25 @@ const baseViewTest = async ( }, })), }; + // Add a link to the shared resources + let index = 6; + sharedResources.edges.push({ + node: { + id: `sr-${index}`, + source: { + id: `de-${index}`, + createdAt: '2023-05-20T16:25:21.536679+00:00', + name: `Data Entry ${index}`, + createdBy: { id: 'user-id', firstName: 'First', lastName: 'Last' }, + description: `Description ${index}`, + size: null, + entryType: 'LINK', + resourceType: 'link', + url: `https://www.link-${index}.com`, + visualizations: { edges: [] }, + }, + }, + }); when(terrasoApi.requestGraphQL) .calledWith( @@ -218,10 +238,22 @@ test('LandscapeView: Display data', async () => { ).toBeInTheDocument(); const entriesList = within(sharedDataRegion.getByRole('list')); const items = entriesList.getAllByRole('listitem'); - expect(items.length).toBe(6); - const firstEntry = within(items[0]); - expect(firstEntry.getByText('Data Entry 0')).toBeInTheDocument(); - expect(firstEntry.getByText('txt')).toBeInTheDocument(); + expect(items.length).toBe(7); + const fileEntry = within(items[0]); + expect(fileEntry.getByText('Data Entry 0')).toBeInTheDocument(); + expect(fileEntry.getByText('txt')).toBeInTheDocument(); + expect(fileEntry.getByText('3 kB')).toBeInTheDocument(); + expect( + fileEntry.getByText('May 20, 2022, by First Last') + ).toBeInTheDocument(); + expect(fileEntry.getByText('Description 0')).toBeInTheDocument(); + const linkEntry = within(items[6]); + expect(linkEntry.getByText('Data Entry 6')).toBeInTheDocument(); + expect(linkEntry.getByText('www.link-6.com')).toBeInTheDocument(); + expect( + linkEntry.getByText('May 20, 2023, by First Last') + ).toBeInTheDocument(); + expect(linkEntry.getByText('Description 6')).toBeInTheDocument(); // Boundary expect( From 1997b32017664e7d510846a0f86c66551657a1dc Mon Sep 17 00:00:00 2001 From: Carissa Knipe Date: Mon, 1 Apr 2024 12:42:13 -0700 Subject: [PATCH 6/6] refactor: Change Grid container to React fragment --- src/sharedData/components/SharedDataEntryFile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sharedData/components/SharedDataEntryFile.js b/src/sharedData/components/SharedDataEntryFile.js index 000360486..ff1e14ff9 100644 --- a/src/sharedData/components/SharedDataEntryFile.js +++ b/src/sharedData/components/SharedDataEntryFile.js @@ -66,7 +66,7 @@ const InfoComponent = ({ sharedResource }) => { const fileSize = filesize(sharedResource.dataEntry.size, { round: 0 }); const fileType = sharedResource.dataEntry.resourceType; return ( - + <> { {fileSize} - + ); };