IDS-718 fix links on homepage (#482)

* Initial fixes for homepage * Change badge colours to be more subtle * Update snapshots to match new styling * Fix tests and bootstrap 5 issues * Make public projects/exps show links too * Update other project and experiment links * Use main tag for semantic markup * Add updated test snapshot files after rebase
UoA-eResearch · Jul 5, 2024 · ada8719 · ada8719
1 parent 412ad82
commit ada8719
Show file tree

Hide file tree

Showing 35 changed files with 2,346 additions and 2,693 deletions.
diff --git a/assets/css/default.css b/assets/css/default.css
@@ -238,7 +238,7 @@ i.group-icon :hover {
 }
 
 .experiments .card-body {
-    background-color: #E8F6FF;
+    background-color: #FCFEFF;
 }
 
 .experiments .accordion-inner .dataset-list-header {
@@ -259,7 +259,7 @@ i.group-icon :hover {
 }
 
 .projects .card-body {
-    background-color: #E8F6FF;
+    background-color: #FCFEFF;
 }
 
 .projects .accordion-inner .exp-list-header {

diff --git a/assets/js/apps/badges/components/DatafileCountBadge.jsx b/assets/js/apps/badges/components/DatafileCountBadge.jsx
@@ -16,7 +16,7 @@ const DatafileCountBadge = ({ experimentData }) => {
 
   return (
     <Fragment>
-      <Badge variant="info" title={title}>
+      <Badge bg="light" text="dark" title={title}>
         <i className="fa fa-file" />
 &nbsp;
         {datafileCount}
@@ -29,4 +29,4 @@ DatafileCountBadge.propTypes = {
   experimentData: PropTypes.object.isRequired,
 };
 
-export default DatafileCountBadge;
+export default DatafileCountBadge;
diff --git a/assets/js/apps/badges/components/DatasetCountBadge.jsx b/assets/js/apps/badges/components/DatasetCountBadge.jsx
@@ -16,7 +16,7 @@ const DatasetCountBadge = ({ experimentData }) => {
 
   return (
     <Fragment>
-      <Badge variant="info" title={title}>
+      <Badge bg="light" text="dark" title={title}>
         <i className="fa fa-folder" />
 &nbsp;
         {datasetCount}

diff --git a/assets/js/apps/badges/components/DatasetDatafileCountBadge.jsx b/assets/js/apps/badges/components/DatasetDatafileCountBadge.jsx
@@ -15,7 +15,7 @@ const DatasetDatafileCountBadge = ({ datasetData }) => {
 
   return (
     <Fragment>
-      <Badge variant="info" title={title}>
+      <Badge bg="light" text="dark" title={title}>
         <i className="fa fa-file" />
 &nbsp;
         {count}

diff --git a/assets/js/apps/badges/components/DatasetExperimentCountBadge.jsx b/assets/js/apps/badges/components/DatasetExperimentCountBadge.jsx
@@ -15,7 +15,7 @@ const DatasetExperimentCountBadge = ({ datasetData }) => {
 
   return (
     <Fragment>
-      <Badge variant="info" title={title}>
+      <Badge bg="light" text="dark" title={title}>
         <i className="fa fa-cogs" />
 &nbsp;
         {count}

diff --git a/assets/js/apps/badges/components/DatasetSizeBadge.jsx b/assets/js/apps/badges/components/DatasetSizeBadge.jsx
@@ -16,7 +16,7 @@ const DatasetSizeBadge = ({ datasetData }) => {
 
   return (
     <Fragment>
-      <Badge variant="info" title={title}>
+      <Badge bg="light" text="dark" title={title}>
         {datasetSize}
       </Badge>
     </Fragment>

diff --git a/assets/js/apps/badges/components/ExperimentCountBadge.jsx b/assets/js/apps/badges/components/ExperimentCountBadge.jsx
@@ -16,7 +16,7 @@ const ExperimentCountBadge = ({ projectData }) => {
 
   return (
     <Fragment>
-      <Badge variant="info" title={title}>
+      <Badge bg="light" text="dark" title={title}>
         <i className="fa fa-cogs" />
 &nbsp;
         {experimentCount}

diff --git a/assets/js/apps/badges/components/ExperimentLastUpdateBadge.jsx b/assets/js/apps/badges/components/ExperimentLastUpdateBadge.jsx
@@ -20,7 +20,7 @@ const ExperimentLastUpdatedBadge = ({ experimentData }) => {
       {loading
         ? <span className=" float-end spinner-grow spinner-grow-sm" role="status" aria-hidden="true" />
         : (
-          <Badge variant="info" title={title}>
+          <Badge bg="light" text="dark" title={title}>
             <i className="fa fa-clock-o" />
 &nbsp;
             {lastUpdatedTime}

diff --git a/assets/js/apps/badges/components/ExperimentSizeBadge.jsx b/assets/js/apps/badges/components/ExperimentSizeBadge.jsx
@@ -15,7 +15,7 @@ const ExperimentSizeBadge = ({ experimentData }) => {
   }, []);
   return (
     <Fragment>
-      <Badge variant="info" title={title}>
+      <Badge bg="light" text="dark" title={title}>
         {experimentSize}
       </Badge>
     </Fragment>

diff --git a/assets/js/apps/badges/components/HSMDataFileCountBadge.jsx b/assets/js/apps/badges/components/HSMDataFileCountBadge.jsx
@@ -16,7 +16,7 @@ const HSMDataFileCountBadge = ({ datasetId }) => {
 
   return (
     <Fragment>
-      <Badge variant="info" title={`${onlineFilesCount} of ${totalFileCount} Files online`}>
+      <Badge bg="light" text="dark" title={`${onlineFilesCount} of ${totalFileCount} Files online`}>
         <i className="fa fa-file" />
 &nbsp;
         {totalFileCount}

diff --git a/assets/js/apps/badges/components/PublicAccessBadge.jsx b/assets/js/apps/badges/components/PublicAccessBadge.jsx
@@ -12,26 +12,27 @@ const PublicAccessBadge = ({ experimentData }) => {
     if (accessType === 1) {
       setPublicAccess(' Private');
       setTitle(' No public access');
-      setvariantType('secondary');
+      setvariantType('light');
     } else if (accessType === 100) {
       setPublicAccess(' Public');
       setTitle(' All data is public');
-      setvariantType('success');
+      setvariantType('light');
     } else if (accessType === 25) {
       setPublicAccess(' [PUBLICATION] Awaiting release');
       setTitle(' Under embargo and awaiting release');
-      setvariantType('secondary');
+      setvariantType('light');
     } else if (accessType === 50) {
       setPublicAccess(' Metadata');
       setTitle(' Only descriptions are public, not data');
-      setvariantType('success');
+      setvariantType('light');
     }
   }, [experimentData]);
 
   return (
     <Fragment>
       <Badge
-        variant={variantType}
+        bg={variantType}
+        text="dark"
         content={title}
         title={title}
       >

diff --git a/assets/js/apps/badges/components/__tests__/DatasetViewPageBadges.spec.jsx b/assets/js/apps/badges/components/__tests__/DatasetViewPageBadges.spec.jsx
@@ -73,6 +73,6 @@ describe('renders badges on experiment view page', () => {
       ReactDOM.render(<DatasetViewPageBadges datasetID="123" hsmEnabled />, container);
     });
     expect(container.querySelectorAll('span')[4].textContent.trim())
-      .toEqual('13.56 MB');
+      .toEqual('13.56 MiB');
   });
 });
diff --git a/assets/js/apps/badges/components/__tests__/__snapshots__/DatasetViewPageBadges.spec.jsx.snap b/assets/js/apps/badges/components/__tests__/__snapshots__/DatasetViewPageBadges.spec.jsx.snap
@@ -9,7 +9,7 @@ exports[`renders badges on experiment view page should render all badges 1`] = `
     class="mr-2"
   >
     <span
-      class="badge badge-info"
+      class="badge text-dark bg-light"
       title="In 3 experiments"
     >
       <i
@@ -23,7 +23,7 @@ exports[`renders badges on experiment view page should render all badges 1`] = `
     class="mr-2"
   >
     <span
-      class="badge badge-info"
+      class="badge text-dark bg-light"
       title="4 of 4 Files online"
     >
       <i
@@ -37,10 +37,10 @@ exports[`renders badges on experiment view page should render all badges 1`] = `
     class="mr-2"
   >
     <span
-      class="badge badge-info"
+      class="badge text-dark bg-light"
       title="Dataset size is"
     >
-      13.56 MB
+      13.56 MiB
     </span>
   </span>
 </div>

diff --git a/.../js/apps/badges/components/__tests__/__snapshots__/ExperimentViewPageBadges.spec.jsx.snap b/.../js/apps/badges/components/__tests__/__snapshots__/ExperimentViewPageBadges.spec.jsx.snap
@@ -9,7 +9,7 @@ exports[`renders badges on experiment view page should render all badges 1`] = `
     class="mr-2"
   >
     <span
-      class="badge badge-info"
+      class="badge text-dark bg-light"
       title="1 dataset"
     >
       <i
@@ -23,7 +23,7 @@ exports[`renders badges on experiment view page should render all badges 1`] = `
     class="mr-2"
   >
     <span
-      class="badge badge-info"
+      class="badge text-dark bg-light"
       title="100 files"
     >
       <i
@@ -37,17 +37,17 @@ exports[`renders badges on experiment view page should render all badges 1`] = `
     class="mr-2"
   >
     <span
-      class="badge badge-info"
-      title="Experiment size is ~ 1 KB"
+      class="badge text-dark bg-light"
+      title="Experiment size is ~ 1 KiB"
     >
-      1 KB
+      1 KiB
     </span>
   </span>
   <span
     class="mr-2"
   >
     <span
-      class="badge badge-info"
+      class="badge text-dark bg-light"
       title="Last updated: Mon, Jan 13, 2020 2:00 PM"
     >
       <i
@@ -61,7 +61,7 @@ exports[`renders badges on experiment view page should render all badges 1`] = `
     class="mr-2"
   >
     <span
-      class="badge badge-secondary"
+      class="badge text-dark bg-light"
       content=" No public access"
       title=" No public access"
     >

diff --git a/assets/js/apps/badges/components/__tests__/__snapshots__/IndexPageBadges.spec.jsx.snap b/assets/js/apps/badges/components/__tests__/__snapshots__/IndexPageBadges.spec.jsx.snap
@@ -9,7 +9,7 @@ exports[`renders badges on index page should render correctly 1`] = `
       class="mr-1 list-inline-item"
     >
       <span
-        class="badge badge-info"
+        class="badge text-dark bg-light"
         title="Last updated: Mon, Jan 13, 2020 2:00 PM"
       >
         <i
@@ -23,7 +23,7 @@ exports[`renders badges on index page should render correctly 1`] = `
       class="mr-1 list-inline-item"
     >
       <span
-        class="badge badge-info"
+        class="badge text-dark bg-light"
         title="1 dataset"
       >
         <i
@@ -37,7 +37,7 @@ exports[`renders badges on index page should render correctly 1`] = `
       class="mr-1 list-inline-item"
     >
       <span
-        class="badge badge-info"
+        class="badge text-dark bg-light"
         title="100 files"
       >
         <i
@@ -51,7 +51,7 @@ exports[`renders badges on index page should render correctly 1`] = `
       class="mr-1 list-inline-item"
     >
       <span
-        class="badge badge-secondary"
+        class="badge text-dark bg-light"
         content=" No public access"
         title=" No public access"
       >

diff --git a/assets/js/apps/projects/view/init.js b/assets/js/apps/projects/view/init.js
@@ -40,7 +40,7 @@ $(document).on("change", "#schemaselect", function(e) {
     var $jqmContentDiv = $this.closest(".modal-body");
 
     var type = $this.attr("data-type");
-    var parentObjectId = $this.attr("data-parent_object_id");
+    var parentObjectId = $this.attr("data-bs-parent_object_id");
     var href = "/project/ajax/add_" + type + "_parameters/" + parentObjectId + "/?schema_id=" + $this.val();
     $.get(href, function(data) {
         $jqmContentDiv.html(data);
@@ -73,7 +73,7 @@ $(document).on("submit", "#add_metadata_form", function(e) {
 
     var schemaId = $("#schemaselect").val();
     var type = form.attr("data-type");
-    var parentObjectId = form.attr("data-parent_object_id");
+    var parentObjectId = form.attr("data-bs-parent_object_id");
     var href = "/project/ajax/add_" + type + "_parameters/" + parentObjectId + "/?schema_id=" + schemaId;
 
     $.ajax({