[E] Add link to maker error

Author: 1aurend

client/src/backend/components/collaborator/AddForm/index.js

@@ -1,13 +1,14 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { FormContext } from "helpers/contexts";
 import Form, { Unwrapped } from "global/components/form";
 import InputError from "global/components/form/InputError";
-import { useTranslation } from "react-i18next";
+import { useTranslation, Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom-v5-compat";
 import { makersAPI, collaboratorsAPI } from "api";
 import { useApiCallback } from "hooks";
 import capitalize from "lodash/capitalize";
+import * as Styled from "./styles";
 
 export default function AddCollaboratorForm({
   entityId,
@@ -53,7 +54,12 @@ export default function AddCollaboratorForm({
     if (!maker?.id) {
       return setFormErrors([
         {
-          detail: t("projects.contributor_maker_error"),
+          detail: (
+            <Trans
+              i18nKey="projects.contributor_maker_error"
+              components={[<Styled.ErrorLink to="/backend/records/makers" />]}
+            />
+          ),
           source: "maker"
         }
       ]);

client/src/backend/components/collaborator/AddForm/styles.js

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { Link } from "react-router-dom-v5-compat";
 
 export const RoleButton = styled.button`
   display: flex;
@@ -22,3 +23,9 @@ export const RoleGroup = styled.div`
     margin-block-start: 40px;
   }
 `;
+
+export const ErrorLink = styled(Link)`
+  &:hover {
+    color: var(--color);
+  }
+`;

client/src/config/app/locale/en-US/json/backend/projects.json

@@ -11,7 +11,7 @@
     "manage_resource_collections": "Manage Resource Collections",
     "contributors_header": "Manage Contributors",
     "add_contributor_label": "Add Contributor",
-    "contributor_maker_error": "Maker is required. If adding a new maker, you must first create the maker in the records tab before adding as a collaborator.",
+    "contributor_maker_error": "Maker is required. If this is a new maker, you must <0>first create the maker</0> before adding as a contributor.",
     "contributor_role_error": "Please select at least one role.",
     "forms": {
       "title_label": "Title",

client/src/global/components/form/InputError/index.js

@@ -16,6 +16,7 @@ export default class InputError extends Component {
   };
 
   errorString(error) {
+    if (typeof error.detail === "object") return error.detail;
     if (error.detail.split(".").length > 1) {
       return error.detail;
     }