feat: add image editor in dataset form (#2180) (#2246)

Fix #2180

client/.eslintrc.json

@@ -263,6 +263,7 @@
           "webhook",
           "webhooks",
           "webpack",
+          "webworkers",
           "whitespace",
           "wip",
           "yaml",

client/package.json

@@ -14,6 +14,7 @@
     "@renku/ckeditor5-build-renku": "0.0.6",
     "@sentry/react": "^6.16.1",
     "@sentry/tracing": "^6.16.1",
+    "@types/react-avatar-editor": "^13.0.0",
     "@types/lodash": "^4.14.189",
     "ajv": "^6.12.6",
     "bootstrap": "^5.0.2",
@@ -37,6 +38,7 @@
     "query-string": "^6.14.1",
     "react": "^17.0.2",
     "react-autosuggest": "^10.1.0",
+    "react-avatar-editor": "^13.0.0",
     "react-bootstrap-icons": "^1.8.4",
     "react-clipboard.js": "^2.0.16",
     "react-collapse": "^5.0.0",
@@ -102,6 +104,7 @@
     "@types/dropzone": "^5.7.4",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.21",
+    "@types/pica": "^9.0.1",
     "@types/react": "^17.0.41",
     "@types/react-dom": "^17.0.14",
     "@types/react-pdf": "^6.2.0",
@@ -121,6 +124,7 @@
     "jest-websocket-mock": "^2.4.0",
     "mermaid": "^9.1.3",
     "node-fetch": "^2.6.7",
+    "pica": "^9.0.1",
     "react-docgen-typescript": "^2.2.2",
     "react-error-overlay": "^6.0.9",
     "react-scripts": "5.0.1",

client/src/dataset/Dataset.present.js

@@ -29,7 +29,7 @@ import {
 import _ from "lodash";
 
 import { DatasetError } from "./DatasetError";
-import { getDatasetAuthors, getDatasetImageUrl } from "./DatasetFunctions";
+import { getDatasetAuthors, getDatasetImageUrl, getUpdatedDatasetImage } from "./DatasetFunctions";
 import DeleteDataset from "../project/datasets/delete/index";
 import Time from "../utils/helpers/Time";
 import FileExplorer from "../utils/components/FileExplorer";
@@ -109,7 +109,7 @@ function DisplayFiles(props) {
 }
 
 function DisplayProjects(props) {
-  if (props.projects === undefined) return null;
+  if (props.projects === undefined || !Array.isArray(props.projects)) return null;
   return <Card key="datasetProjectDetails" className="border-rk-light mb-4">
     <CardHeader className="bg-white p-3 ps-4">Projects using this dataset</CardHeader>
     <CardBody className="p-4 pt-3 pb-3 lh-lg pb-2">
@@ -374,9 +374,8 @@ export default function DatasetView(props) {
     new Date(datasetDate.replace(/ /g, "T")) :
     "";
 
-  const imageUrl = dataset.mediaContent ? dataset.mediaContent :
-    dataset.images?.length > 0 ?
-      getDatasetImageUrl(dataset.images) : undefined;
+  const imageUrl = dataset.mediaContent ? getUpdatedDatasetImage(dataset.mediaContent, datasetDate) :
+    dataset.images?.length > 0 ? getUpdatedDatasetImage(getDatasetImageUrl(dataset.images), datasetDate) : undefined;
 
   return (<div className={props.insideProject ? "row" : "container-xxl renku-container py-4 mt-2"}>
     <Col>

client/src/dataset/DatasetFunctions.js

@@ -52,11 +52,27 @@ function getDatasetAuthors(dataset) {
  */
 function getDatasetImageUrl(images) {
   try {
-    return images[0]["_links"][0].href;
+    // images could contain previous image url, so we get the last in the array.
+    const index = images?.length - 1;
+    return images[index]["_links"][0].href;
   }
   catch {
     return undefined;
   }
 }
 
-export { mapDataset, getDatasetAuthors, getDatasetImageUrl };
+/**
+ * Returns image url with extra parameter to avoid outdated cached url
+ *
+ * @param {string} imageUrl - Url image
+ * @param {string} lastUpdateDate - last url update
+ */
+function getUpdatedDatasetImage(imageUrl, lastUpdateDate) {
+  if (!imageUrl)
+    return undefined;
+
+  const lastUpdate = new Date(lastUpdateDate).getTime();
+  return `${imageUrl}?${lastUpdate}`;
+}
+
+export { mapDataset, getDatasetAuthors, getDatasetImageUrl, getUpdatedDatasetImage };

client/src/dataset/list/DatasetList.present.js

@@ -35,7 +35,7 @@ import { ButtonDropdown } from "reactstrap";
 import { Loader } from "../../utils/components/Loader";
 import { MarkdownTextExcerpt } from "../../utils/components/markdown/RenkuMarkdown";
 import ListDisplay from "../../utils/components/List";
-import { getDatasetImageUrl } from "../DatasetFunctions";
+import { getDatasetImageUrl, getUpdatedDatasetImage } from "../DatasetFunctions";
 
 
 function OrderByDropdown(props) {
@@ -183,6 +183,7 @@ class DatasetsRows extends Component {
       const projectsCount = dataset.projectsCount > 1
         ? `In ${dataset.projectsCount} projects`
         : `In ${dataset.projectsCount} project`;
+      const datasetImage = dataset.images?.length > 0 ? getDatasetImageUrl(dataset.images) : undefined;
 
       return {
         id: dataset.identifier,
@@ -201,7 +202,7 @@ class DatasetsRows extends Component {
         labelCaption: projectsCount + ". Created",
         creators: dataset.published !== undefined && dataset.published.creator !== undefined ?
           dataset.published.creator : null,
-        imageUrl: dataset.images?.length > 0 ? getDatasetImageUrl(dataset.images) : undefined,
+        imageUrl: getUpdatedDatasetImage(datasetImage, dataset.date),
       };
     });
 

client/src/model/RenkuModels.js

@@ -618,9 +618,9 @@ const datasetFormSchema = new Schema({
     label: "Image",
     edit: true,
     type: FormGenerator.FieldTypes.IMAGE,
-    maxSize: 200 * 1024,
+    maxSize: 10000 * 1024,
     format: "image/png,image/jpeg,image/gif,image/tiff",
-    help: "JPG, PNG, and JPEG files are allowed, up to 200KB.",
+    help: "JPG, PNG, and JPEG files are allowed, up to 10MB.",
     value: {
       options: [],
       selected: -1

client/src/project/datasets/DatasetsListView.js

@@ -9,6 +9,7 @@ import { MarkdownTextExcerpt } from "../../utils/components/markdown/RenkuMarkdo
 import { Loader } from "../../utils/components/Loader";
 import ListDisplay from "../../utils/components/List";
 import { ThrottledTooltip } from "../../utils/components/Tooltip";
+import { getUpdatedDatasetImage } from "../../dataset/DatasetFunctions";
 
 function datasetToDict(datasetsUrl, dataset_kg, graphStatus, gridDisplay, dataset) {
   const kgCaption =
@@ -34,7 +35,7 @@ function datasetToDict(datasetsUrl, dataset_kg, graphStatus, gridDisplay, datase
     timeCaption: timeCaption,
     labelCaption: `${kgCaption}. Created `,
     creators: dataset.creators,
-    imageUrl: dataset.mediaContent
+    imageUrl: getUpdatedDatasetImage(dataset?.mediaContent, timeCaption)
   };
 }
 

client/src/styles/bootstrap_ext/_button.scss

@@ -333,3 +333,58 @@ $borderRadius: 1000px;
     padding-left: 20px;
   }
 }
+.edit-image-btn {
+  position: absolute;
+  left: 15px;
+  background-color: #d9d9d9de;
+  color: black;
+  border: none;
+  border-radius: 8px;
+
+  &:hover {
+    background-color: rgba(166, 166, 166, 0.87);
+    color: white;
+  }
+  &:focus {
+    background-color: rgba(166, 166, 166, 0.87);
+    color: white;
+  }
+}
+
+.editor-control-btn {
+  border-radius: 4px;
+  background-color: #D9D9D9;
+  border: none;
+  padding: 2px 8px;
+  color: var(--bs-dark);
+
+  &:hover {
+    background-color: #d9d9d9de;
+    color: var(--bs-dark);
+  }
+  &:focus {
+    background-color: #d9d9d9de;
+    color: var(--bs-dark);
+  }
+  &:disabled {
+    background-color: rgba(217, 217, 217, 0.81);
+    color: var(--bs-dark);
+  }
+}
+
+.form-rk-pink .btn-save-editor {
+  background-color: var(--bs-rk-pink);
+  border: none;
+
+  &:hover {
+    background-color: #d980a7;
+  }
+}
+
+.form-rk-green .btn-save-editor {
+  background-color: var(--bs-rk-green);
+  border: none;
+  &:hover {
+    background-color: #26a57f;
+  }
+}

client/src/utils/components/buttons/Button.js

@@ -181,4 +181,5 @@ function RoundButtonGroup({ buttons }) {
   );
 }
 
-export { RefreshButton, ButtonWithMenu, CardButton, GoBackButton, InlineSubmitButton, RoundButtonGroup };
+export {
+  RefreshButton, ButtonWithMenu, CardButton, GoBackButton, InlineSubmitButton, RoundButtonGroup };

client/src/utils/components/entityHeader/EntityHeader.tsx

@@ -79,7 +79,7 @@ function EntityHeader({
       <div className="entity-image">
         <div style={imageStyles}
           className={`header-entity-image ${!imageUrl ? `card-header-entity--${itemType}` : ""}`}>
-          <div className="card-bg-title card-bg-title--small">{title}</div>
+          {!imageUrl ? <div className="card-bg-title card-bg-title--small">{title}</div> : null}
         </div>
       </div>
       <div className="entity-time-tags">