Feature/manually add related work (#1112)

Author: jdddog

CHANGELOG.md

@@ -1,4 +1,5 @@
 ## Added
+- Added ability to manually add a related work via a DOI [#835]
 - Added a shared `utils/apolloErrorHandler.ts` file to handle `AbortError` related to the updated Apollo Client v4 [#1094]
 - Added new graphql queries `MetadataStandardsByURIs` and `RepositoriesByURIs` to get the preferred standards and repos for the Research Output Answer modals [#1094]
 - Added `errorTypePolicies` to use in the `apollo-wrapper.tsx` file, due to changes in Apollo's default caching and merge behavior. Setting "merge: false" always replaces new data, instead of trying to merge error objects [#1089]

app/[locale]/projects/[projectId]/dmp/[dmpid]/members/page.tsx

@@ -50,7 +50,7 @@ import { addPlanMemberAction } from './actions/addPlanMemberAction';
 import { ProjectMembersInterface } from '@/app/types';
 import { routePath } from '@/utils/routes';
 import styles from './ProjectsProjectPlanAdjustMembers.module.scss';
-import { orcidToUrl } from "@/lib/idToUrl";
+import { orcidToUrl } from "@/lib/identifierUtils";
 
 interface PlanMemberDropdown {
   id: string;

app/[locale]/projects/[projectId]/dmp/[dmpid]/related-works/__tests__/page.spec.tsx

@@ -11,8 +11,8 @@ import { RelatedWorksByPlanDocument } from "@/generated/graphql";
 import {
   MOCK_ACCEPTED_WORKS,
   MOCK_PENDING_WORKS,
-  MOCK_REJECTED_WORKS,
-} from "@/components/RelatedWorksList/__tests__/index.spec";
+  MOCK_REJECTED_WORKS
+} from "@/app/[locale]/projects/[projectId]/dmp/[dmpid]/related-works/mockWorks";
 
 expect.extend(toHaveNoViolations);
 
@@ -87,14 +87,16 @@ describe("RelatedWorks", () => {
 
   it("should render the page header with correct title and description", () => {
     render(<RelatedWorksHarness />);
-    expect(screen.getByText("header.title")).toBeInTheDocument();
-    expect(screen.getByText("header.description")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 1, name: 'title' })).toBeInTheDocument();
+    expect(screen.getByText("description")).toBeInTheDocument();
   });
 
   it("should render the breadcrumb links", () => {
     render(<RelatedWorksHarness />);
-    expect(screen.getByText("Home")).toBeInTheDocument();
-    expect(screen.getByText("Projects")).toBeInTheDocument();
+    expect(screen.getByText("breadcrumbs.home")).toBeInTheDocument();
+    expect(screen.getByText("breadcrumbs.projects")).toBeInTheDocument();
+    expect(screen.getByText("breadcrumbs.projectOverview")).toBeInTheDocument();
+    expect(screen.getByText("breadcrumbs.planOverview")).toBeInTheDocument();
   });
 
   it("should render tabs", () => {
@@ -200,7 +202,7 @@ describe("RelatedWorks", () => {
     });
 
     render(<RelatedWorksHarness />);
-    const addButton = screen.getByRole("button", { name: "buttons.addRelatedWorkManually" });
+    const addButton = screen.getByRole("link", { name: "buttons.addRelatedWorkManually" });
     expect(addButton).toBeInTheDocument();
   });
 

app/[locale]/projects/[projectId]/dmp/[dmpid]/related-works/actions/upsertRelatedWorkAction.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import { executeGraphQLMutation } from "@/utils/server/graphqlServerActionHandler";
+import { ActionResponse } from "@/app/types";
+import { UpsertRelatedWorkDocument, RelatedWorkStatus } from "@/generated/graphql";
+
+export async function upsertRelatedWorkAction({ planId, doi, hash, status }: { planId: number; doi: string; hash: string, status: RelatedWorkStatus }): Promise<ActionResponse> {
+  return await executeGraphQLMutation({
+    document: UpsertRelatedWorkDocument,
+    variables: { input: { planId, doi, hash, status } },
+    dataPath: "upsertRelatedWork",
+  });
+}

app/[locale]/projects/[projectId]/dmp/[dmpid]/related-works/add/AddRelatedWork.module.scss

@@ -0,0 +1,122 @@
+@use "@/styles/responsive.scss" as *;
+
+.relatedWorksItem {
+  padding: 1.25rem 0.8rem 1.25rem var(--space-4);
+  border-radius: var(--card-border-radius);
+  background: var(--bg-white);
+  box-shadow: var(--card-shadow);
+  border: 1px solid var(--card-border);
+}
+
+.overview {
+  display: flex;
+  flex-direction: column;
+}
+
+.overviewHeader {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  @include device(md) {
+    flex-direction: row;
+    gap: 1rem;
+  }
+}
+
+.overviewTitle {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+
+  h3 {
+    margin: 0;
+    padding: 0 0 0.2rem;
+    line-height: var(--lh-tight) !important;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    a {
+      color: var(--text-color);
+      font-size: var(--fs-lg);
+      font-weight: var(--fw-bold);
+      line-height: var(--lh-tight) !important;
+    }
+  }
+
+  h4 {
+    color: var(--gray-600);
+    font-size: var(--fs-base);
+    font-weight: var(--fw-normal);
+    line-height: var(--lh-tight);
+    margin: 0;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.overviewHeaderActions {
+  padding-top: 0.1rem;
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.overviewFooter {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  @include device(md) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.overviewMetadata {
+  display: flex;
+  gap: var(--space-4);
+  color: var(--gray-500);
+  font-size: var(--fs-small);
+  font-weight: var(--fw-normal);
+  padding-top: 1rem;
+}
+
+.status {
+  line-height: 1.1rem;
+  color: var(--text-color);
+  font-weight: var(--fw-bold);
+  padding-top: 0.1rem;
+  padding-right: var(--space-2);
+}
+
+.overviewFooterActions {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-start;
+  gap: var(--space-2);
+  margin-right: 0.5rem;
+
+  @include device(md) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.sourceUrl {
+  color: var(--gray-500) !important;
+}
+
+.searchSection {
+  margin-bottom: 2rem;
+}