table: improving related resources pagination and related packages links

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo-knowledge-hub/geo-components-react",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "main": "dist/cjs/index.js",
   "browser": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/lib/components/table/thematic/RelatedPackagesTable/RelatedPackagesTable.js

@@ -10,7 +10,7 @@ import React, { useMemo } from 'react';
 import { PaginableTable } from '../../moldure';
 
 import _get from 'lodash/get';
-import _head from 'lodash/head';
+import _last from 'lodash/last';
 import _isNil from 'lodash/isNil';
 import _sortBy from 'lodash/sortBy';
 import _groupBy from 'lodash/groupBy';
@@ -54,8 +54,8 @@ export const RelatedPackagesTable = ({ tableData }) => {
             };
           });
 
-          // Getting the title from the first version
-          const rowFirstVersion = _head(_sortBy(rowVersions));
+          // Getting the title from the latest version
+          const rowLastVersion = _last(_sortBy(rowVersions));
 
           return (
             <Grid>
@@ -76,7 +76,9 @@ export const RelatedPackagesTable = ({ tableData }) => {
                   mobile={14}
                   tablet={11}
                 >
-                  <p>{rowFirstVersion.title}</p>
+                  <a href={rowLastVersion.url}>
+                    {rowLastVersion.title}
+                  </a>
                 </Grid.Column>
                 <Grid.Column
                   widescreen={4}

src/lib/components/table/thematic/RelatedResourceTable/RelatedResourceTable.js

@@ -48,14 +48,18 @@ const SEARCH_OPTIONS = {
  */
 export const RelatedResourceTable = ({
   records,
+  packageId,
   resourceTypeDefinitions,
   paginationSizes,
   transitionProps,
 }) => {
+  // default config
+  const defaultPageSize = paginationSizes[0];
+
   // search state
   const [paginationConfig, setPaginationConfig] = useState({
     currentPage: 1,
-    pageSize: 3,
+    pageSize: defaultPageSize,
   });
   const [searchBarContent, setSearchBarContent] = useState('');
   const [activeResourceType, setActiveResourceType] = useState(null);
@@ -127,6 +131,9 @@ export const RelatedResourceTable = ({
           records: {
             data: records,
           },
+          package: {
+            id: packageId
+          }
         }}
       >
         <TypeSelectorCard />
@@ -175,11 +182,13 @@ export const RelatedResourceTable = ({
 
 RelatedResourceTable.propTypes = {
   records: PropTypes.array.isRequired,
-  paginationSizes: PropTypes.array,
+  packageId: PropTypes.string.isRequired,
+  paginationSizes: PropTypes.array.isRequired,
   transitionProps: PropTypes.object,
 };
 
 RelatedResourceTable.defaultProps = {
+  packageId: "#",
   paginationSizes: [3, 5, 10, 15, 50, 100],
   transitionProps: {
     type: 'fade down',

src/lib/components/table/thematic/RelatedResourceTable/search/results/RecordList/RecordList.js

@@ -20,14 +20,15 @@ export const RecordList = () => {
   const indexContext = useContext(IndexContext);
 
   const records = indexContext.searchContext.index.results;
+  const packageId = indexContext.package.id;
 
   return (
     <>
       {records.length > 0 ? (
         <Segment attached="bottom">
           <Item.Group divided>
             {records.map((record) => (
-              <RecordListItem key={record.id} recordData={record} />
+              <RecordListItem key={record.id} recordData={record} packageId={packageId} />
             ))}
           </Item.Group>
         </Segment>

src/lib/components/table/thematic/RelatedResourceTable/search/results/RecordList/RecordList.test.js

@@ -28,6 +28,9 @@ describe('RecordList tests', () => {
               results: relatedRecordsData,
             },
           },
+          package: {
+            id: "#"
+          }
         },
       });
 

src/lib/components/table/thematic/RelatedResourceTable/search/results/RecordList/RecordListItem.js

@@ -17,7 +17,7 @@ import './RecordListItem.css';
 /**
  * Record Item component for the Record List
  */
-export const RecordListItem = ({ recordData }) => {
+export const RecordListItem = ({ recordData, packageId }) => {
   // extracting the informations
   const creators = _get(recordData, 'ui.creators.creators', null);
   const publicationDate = _get(
@@ -45,10 +45,10 @@ export const RecordListItem = ({ recordData }) => {
   const recordId = _get(recordData, 'id', null);
   const recordUrlPrefix = isPackage ? 'packages' : 'records';
 
-  let recordUrl = `/${recordUrlPrefix}/${recordId}`;
+  let recordUrl = `/${recordUrlPrefix}/${recordId}?package=${packageId}`;
 
   if (isDraft) {
-    recordUrl = `${recordUrl}?preview=1&navigate=1`;
+    recordUrl = `${recordUrl}&preview=1&navigate=1`;
   }
 
   const accessStatusID = _get(recordData, 'ui.access_status.id', null);