@raketa-cloud/admin 1.10.11 → 1.10.13

package/src/helpers/utils.js

@@ -1,3 +1,8 @@
+import commentMarkdown, {
+  commentMentionIds,
+  commentMentionsText,
+} from "./commentMarkdown";
+
 function includedInCollection(value, collection) {
   if (!collection) {
     return false;
@@ -43,6 +48,21 @@ export function isFeatureEnabled(value) {
   return value === true;
 }
 
+// Initials of the first two words of the name, e.g. "Jane van Doe" -> "JV".
+// Falls back to the first letter of the email when there is no name.
+function initials(name, email = "") {
+  const words = (name || "").trim().split(/\s+/).filter(Boolean);
+
+  if (words.length) {
+    return words
+      .slice(0, 2)
+      .map((word) => word[0].toUpperCase())
+      .join("");
+  }
+
+  return (email || "?").trim().charAt(0).toUpperCase() || "?";
+}
+
 function feature(featureName, context) {
   return isFeatureEnabled(context?.globalConfig?.features?.[featureName]);
 }
@@ -52,9 +72,13 @@ function contentTaskProviderEnabled(provider, context) {
 }
 
 export default {
+  commentMarkdown,
+  commentMentionIds,
+  commentMentionsText,
   includedInCollection,
   formattedDate,
   formattedDateTime,
   feature,
   contentTaskProviderEnabled,
+  initials,
 };

package/src/index.js

@@ -40,6 +40,7 @@ export { default as ResourcesAPIHandler } from "./handlers/resources/ResourcesAP
 export { default as ResourceChangeHandler } from "./handlers/resources/ChangeHandler";
 export { default as ResourceClonesHandler } from "./handlers/resources/ClonesHandler";
 export { default as ResourceDeletesHandler } from "./handlers/resources/DeletesHandler";
+export { default as ResourceDiscussionsHandler } from "./handlers/resources/DiscussionsHandler";
 export { default as ResourceExportsHandler } from "./handlers/resources/ExportsHandler";
 export { default as ResourceHistoryHandler } from "./handlers/resources/HistoryHandler";
 export { default as ResourceTranslationsHandler } from "./handlers/resources/TranslationsHandler";

package/src/routeResourceModule.js

@@ -13,6 +13,7 @@ import WidgetHandler from "./handlers/resource_revisions/WidgetHandler";
 import ChangeHandler from "./handlers/resources/ChangeHandler";
 import ClonesHandler from "./handlers/resources/ClonesHandler";
 import DeletesHandler from "./handlers/resources/DeletesHandler";
+import DiscussionsHandler from "./handlers/resources/DiscussionsHandler";
 import ExportsHandler from "./handlers/resources/ExportsHandler";
 import HistoryHandler from "./handlers/resources/HistoryHandler";
 import PartialTranslationsHandler from "./handlers/resources/PartialTranslationsHandler";
@@ -43,12 +44,15 @@ function routeResourceModule(
 
   const reportsEnabled =
     adapter.globalConfig?.features?.reports?.[resourceType] || false;
+  const commentsEnabled =
+    adapter.globalConfig?.features?.comments?.[resourceType] || false;
 
   const resourceConfig = {
     resourceType,
     resourceTypePlural,
     dateFields,
     reports: reportsEnabled,
+    comments: commentsEnabled,
   };
 
   const exportsMapping = [
@@ -110,6 +114,44 @@ function routeResourceModule(
     viewsFallback: "resources/history",
   });
 
+  if (commentsEnabled) {
+    // Every route is scoped by the resource type, as the discussions handler
+    // builds its redirects from the resource config of the route.
+    const discussionsPath = `/${baseResource}/:parent_id/discussions`;
+    const commentPath = `/${baseResource}/:parent_id/comments/:id`;
+    const discussionsViews = `${baseResource}/discussions`;
+
+    adapter.routeNestedCollection(
+      [
+        ["GET", discussionsPath, "index", DiscussionsHandler.index],
+        ["POST", discussionsPath, "create_form", DiscussionsHandler.create],
+        // The discussions of revisions, next to the general one above.
+        [
+          "GET",
+          `${discussionsPath}/:revision_id`,
+          "index",
+          DiscussionsHandler.index,
+        ],
+        [
+          "POST",
+          `${discussionsPath}/:revision_id`,
+          "create_form",
+          DiscussionsHandler.create,
+        ],
+        ["PUT", commentPath, "update", DiscussionsHandler.update],
+        ["DELETE", commentPath, "destroy", DiscussionsHandler.destroy],
+      ].map(([verb, path, action, handler]) => [
+        verb,
+        path,
+        "discussions",
+        discussionsViews,
+        action,
+        handler,
+      ]),
+      { ...resourceConfig, viewsFallback: "resources/discussions" },
+    );
+  }
+
   routeNestedCollection(
     adapter,
     baseResource,

package/src/setupCloud.js

@@ -1,5 +1,7 @@
 import Categories from "./cloud/Categories";
+import Comments from "./cloud/Comments";
 import ContentTasks from "./cloud/ContentTasks";
+import Editors from "./cloud/Editors";
 import Redirects from "./cloud/Redirects";
 import ResourceChanges from "./cloud/ResourceChanges";
 import ResourceRevisions from "./cloud/ResourceRevisions";
@@ -26,6 +28,8 @@ function setupCloud(ctx, getConfig) {
     ctx.authentication.token,
   );
   ctx.client.categories = new Categories(getConfig, ctx.authentication.token);
+  ctx.client.comments = new Comments(getConfig, ctx.authentication.token);
+  ctx.client.editors = new Editors(getConfig, ctx.authentication.token);
   ctx.client.contentTasks = new ContentTasks(
     getConfig,
     ctx.authentication.token,

package/src/styles/application.css

@@ -357,6 +357,62 @@ body {
   }
 
   /* Dashboard specific */
+  /* Markdown of the discussion comments */
+  .comment-body {
+    @apply text-sm leading-relaxed break-words;
+
+    p,
+    ul,
+    ol,
+    blockquote {
+      @apply my-1.5 first:mt-0 last:mb-0;
+    }
+
+    ul {
+      @apply pl-5 list-disc;
+    }
+
+    ol {
+      @apply pl-5 list-decimal;
+    }
+
+    blockquote {
+      @apply pl-3 border-l-4 border-raketa-primary/40 text-raketa-foreground/70;
+    }
+
+    a {
+      @apply underline underline-offset-2 text-raketa-primary hover:text-raketa-foreground;
+    }
+
+    strong {
+      @apply font-semibold;
+    }
+
+    .comment-mention {
+      @apply px-1 font-semibold text-blue-700 bg-blue-100 rounded dark:bg-blue-900/50 dark:text-blue-300;
+    }
+
+    .comment-mention-unknown {
+      @apply italic text-raketa-foreground/50;
+    }
+  }
+
+  /* Textareas can't style parts of their text, so it is drawn transparent and
+     a copy of it with the mentions highlighted is laid over it. The copy must
+     keep the same text metrics, so no padding or font weight changes. */
+  .mention-input {
+    color: transparent;
+    caret-color: var(--color-raketa-foreground);
+  }
+
+  .mention-backdrop {
+    @apply absolute overflow-hidden border-solid pointer-events-none whitespace-pre-wrap break-words;
+
+    mark {
+      @apply text-blue-700 bg-blue-100 rounded-sm dark:bg-blue-900/50 dark:text-blue-300;
+    }
+  }
+
   .card-button {
     @apply flex items-center gap-2 mb-2 max-w-[400px] border p-4 rounded font-semibold text-raketa-primary hover:border-raketa-primary hover:bg-raketa-primary/5;
   }

package/src/tests/cloud/Comments.test.js

@@ -0,0 +1,141 @@
+import Comments from "../../cloud/Comments";
+import {
+  CreateResourceCommentDocument,
+  DeleteResourceCommentDocument,
+  ResourceCommentCountsDocument,
+  ResourceCommentsDocument,
+  UpdateResourceCommentDocument,
+} from "../../cloud/documents/commentsDocuments";
+
+describe("Comments client", () => {
+  function buildClient() {
+    return new Comments(() => ({}), "token");
+  }
+
+  test("list requests the comments of the resource", async () => {
+    const client = buildClient();
+    const items = { list: [], pagination: null };
+    const query = jest
+      .spyOn(client, "query")
+      .mockResolvedValue({ resourceComments: items });
+
+    const result = await client.list({ page: "2" }, "7", "en", "page");
+
+    expect(result).toBe(items);
+    expect(query).toHaveBeenCalledWith(ResourceCommentsDocument, {
+      input: {
+        id: "7",
+        locale: "en",
+        resourceType: "page",
+        revisionId: null,
+        pagination: { page: 2, pageSize: 25 },
+      },
+    });
+  });
+
+  test("create posts the comment with the quoted comment", async () => {
+    const client = buildClient();
+    const comment = { id: "1" };
+    const query = jest.spyOn(client, "query").mockResolvedValue({
+      createResourceComment: { comment, errors: null },
+    });
+
+    const result = await client.create("7", "en", "page", {
+      body: "Hello",
+      replyId: "3",
+      revisionId: "200",
+    });
+
+    expect(result).toEqual({ comment, errors: null });
+    expect(query).toHaveBeenCalledWith(CreateResourceCommentDocument, {
+      input: {
+        id: "7",
+        locale: "en",
+        resourceType: "page",
+        revisionId: "200",
+        comment: { body: "Hello", replyId: "3" },
+      },
+    });
+  });
+
+  test("list requests the comments of a revision discussion", async () => {
+    const client = buildClient();
+    const query = jest
+      .spyOn(client, "query")
+      .mockResolvedValue({ resourceComments: { list: [] } });
+
+    await client.list({}, "7", "en", "page", "200");
+
+    expect(query.mock.calls[0][1].input.revisionId).toEqual("200");
+  });
+
+  test("create sends a null reply id when not quoting", async () => {
+    const client = buildClient();
+    const query = jest.spyOn(client, "query").mockResolvedValue({
+      createResourceComment: { comment: null, errors: [] },
+    });
+
+    await client.create("7", "en", "page", { body: "Hello", replyId: "" });
+
+    expect(query.mock.calls[0][1].input.comment).toEqual({
+      body: "Hello",
+      replyId: null,
+    });
+    expect(query.mock.calls[0][1].input.revisionId).toBeNull();
+  });
+
+  test("counts maps the comment counts by discussion", async () => {
+    const client = buildClient();
+    const query = jest.spyOn(client, "query").mockResolvedValue({
+      resourceCommentCounts: [
+        { revisionId: null, count: 2 },
+        { revisionId: "200", count: 5 },
+      ],
+    });
+
+    const result = await client.counts("7", "en", "page");
+
+    expect(result).toEqual({ general: 2, 200: 5 });
+    expect(query).toHaveBeenCalledWith(ResourceCommentCountsDocument, {
+      input: { id: "7", locale: "en", resourceType: "page" },
+    });
+  });
+
+  test("counts handles a missing list", async () => {
+    const client = buildClient();
+    jest
+      .spyOn(client, "query")
+      .mockResolvedValue({ resourceCommentCounts: null });
+
+    expect(await client.counts("7", "en", "page")).toEqual({});
+  });
+
+  test("update changes the body of the comment", async () => {
+    const client = buildClient();
+    const comment = { id: "1", body: "Edited" };
+    const query = jest.spyOn(client, "query").mockResolvedValue({
+      updateResourceComment: { comment, errors: null },
+    });
+
+    const result = await client.update("1", { body: "Edited" });
+
+    expect(result).toEqual({ comment, errors: null });
+    expect(query).toHaveBeenCalledWith(UpdateResourceCommentDocument, {
+      input: { id: "1", comment: { body: "Edited" } },
+    });
+  });
+
+  test("delete removes the comment", async () => {
+    const client = buildClient();
+    const query = jest.spyOn(client, "query").mockResolvedValue({
+      deleteResourceComment: { comment: { id: "1" }, errors: null },
+    });
+
+    const result = await client.delete("1");
+
+    expect(result).toEqual({ comment: { id: "1" }, errors: null });
+    expect(query).toHaveBeenCalledWith(DeleteResourceCommentDocument, {
+      input: { id: "1" },
+    });
+  });
+});

package/src/tests/cloud/Editors.test.js

@@ -0,0 +1,47 @@
+import Editors from "../../cloud/Editors";
+import {
+  CurrentEditorDocument,
+  WebsiteEditorsDocument,
+} from "../../cloud/documents/editorsDocuments";
+
+describe("Editors client", () => {
+  test("current requests the editor behind the identity", async () => {
+    const client = new Editors(() => ({}), "token");
+    const editor = {
+      id: "5",
+      name: "Jane",
+      email: "jane@example.com",
+      avatar: "",
+    };
+    const query = jest
+      .spyOn(client, "query")
+      .mockResolvedValue({ currentEditor: editor });
+
+    const result = await client.current();
+
+    expect(result).toBe(editor);
+    expect(query).toHaveBeenCalledWith(CurrentEditorDocument);
+  });
+
+  test("website requests the editors of the website", async () => {
+    const client = new Editors(() => ({}), "token");
+    const editors = [
+      { id: "5", name: "Jane", email: "jane@example.com", avatar: "" },
+    ];
+    const query = jest
+      .spyOn(client, "query")
+      .mockResolvedValue({ websiteEditors: { list: editors } });
+
+    const result = await client.website();
+
+    expect(result).toBe(editors);
+    expect(query).toHaveBeenCalledWith(WebsiteEditorsDocument);
+  });
+
+  test("website returns an empty list without editors", async () => {
+    const client = new Editors(() => ({}), "token");
+    jest.spyOn(client, "query").mockResolvedValue({ websiteEditors: null });
+
+    expect(await client.website()).toEqual([]);
+  });
+});

package/src/tests/cloud/ResourceChanges.test.js

@@ -0,0 +1,25 @@
+import ResourceChanges from "../../cloud/ResourceChanges";
+import { ResourceHistoryDocument } from "../../cloud/documents/resourcesDocuments";
+
+describe("ResourceChanges", () => {
+  describe("list", () => {
+    test("uses camelCase pageSize when requesting resource history", async () => {
+      const client = new ResourceChanges(() => ({}), "token");
+      const query = jest
+        .spyOn(client, "query")
+        .mockResolvedValue({ resourceHistory: { list: [] } });
+
+      await client.list({ page: "2" }, "resource-1", "en", "page");
+
+      expect(query).toHaveBeenCalledWith(ResourceHistoryDocument, {
+        input: {
+          id: "resource-1",
+          locale: "en",
+          resourceType: "page",
+          filters: {},
+          pagination: { page: 2, pageSize: 50 },
+        },
+      });
+    });
+  });
+});

package/src/tests/handlers/resources/DiscussionsHandler.test/create.test.js

@@ -0,0 +1,108 @@
+import Comments from "../../../../cloud/Comments";
+import DiscussionsHandler from "../../../../handlers/resources/DiscussionsHandler";
+
+describe("Resources Discussions Handler create", () => {
+  function buildCtx(comment) {
+    return {
+      client: {
+        comments: new Comments(() => ({}), "token"),
+      },
+      resourceParams: { comment },
+      locale: "en",
+      params: { parent_id: "123" },
+      resourceConfig: {
+        resourceType: "article",
+        resourceTypePlural: "articles",
+      },
+    };
+  }
+
+  test("creates the comment and redirects back to the discussions page", async () => {
+    const ctx = buildCtx({ body: "  Hello  ", reply_id: "5" });
+    const create = jest
+      .spyOn(ctx.client.comments, "create")
+      .mockImplementation(() => ({ comment: { id: "9" }, errors: null }));
+
+    const result = await DiscussionsHandler.create(ctx);
+
+    expect(create).toHaveBeenCalledWith("123", "en", "article", {
+      body: "Hello",
+      replyId: "5",
+      revisionId: null,
+    });
+    expect(result).toEqual({
+      redirect: "/en/articles/123/discussions",
+    });
+  });
+
+  test("creates the comment in a revision discussion", async () => {
+    const ctx = buildCtx({ body: "Hello" });
+    ctx.params.revision_id = "200";
+    const create = jest
+      .spyOn(ctx.client.comments, "create")
+      .mockImplementation(() => ({ comment: { id: "9" }, errors: null }));
+
+    const result = await DiscussionsHandler.create(ctx);
+
+    expect(create).toHaveBeenCalledWith("123", "en", "article", {
+      body: "Hello",
+      replyId: undefined,
+      revisionId: "200",
+    });
+    expect(result).toEqual({
+      redirect: "/en/articles/123/discussions/200",
+    });
+  });
+
+  test("redirects with an error for a blank body", async () => {
+    const ctx = buildCtx({ body: "   " });
+    const create = jest.spyOn(ctx.client.comments, "create");
+
+    const result = await DiscussionsHandler.create(ctx);
+
+    expect(create).not.toHaveBeenCalled();
+    expect(result).toEqual({
+      redirect: `/en/articles/123/discussions?comment_error=${encodeURIComponent("Comment can't be blank.")}`,
+    });
+  });
+
+  test("redirects with an error when there are no params", async () => {
+    const ctx = { ...buildCtx(), resourceParams: {} };
+
+    const result = await DiscussionsHandler.create(ctx);
+
+    expect(result.redirect).toContain("comment_error=");
+  });
+
+  test("redirects with the API errors", async () => {
+    const ctx = buildCtx({ body: "Hello", reply_id: "99" });
+    jest.spyOn(ctx.client.comments, "create").mockImplementation(() => ({
+      comment: null,
+      errors: [
+        { key: "replyId", message: "does not exist" },
+        { key: "generalError", message: "Article not found" },
+      ],
+    }));
+
+    const result = await DiscussionsHandler.create(ctx);
+
+    expect(result).toEqual({
+      redirect: `/en/articles/123/discussions?comment_error=${encodeURIComponent("does not exist, Article not found")}`,
+    });
+  });
+
+  test("redirects with the read-only error for a published revision", async () => {
+    const ctx = buildCtx({ body: "Hello" });
+    ctx.params.revision_id = "200";
+    jest.spyOn(ctx.client.comments, "create").mockImplementation(() => ({
+      comment: null,
+      errors: [{ key: "revisionId", message: "does not exist" }],
+    }));
+
+    const result = await DiscussionsHandler.create(ctx);
+
+    expect(result).toEqual({
+      redirect: `/en/articles/123/discussions/200?comment_error=${encodeURIComponent("This revision was published, its discussion is read-only.")}`,
+    });
+  });
+});

package/src/tests/handlers/resources/DiscussionsHandler.test/destroy.test.js

@@ -0,0 +1,55 @@
+import Comments from "../../../../cloud/Comments";
+import DiscussionsHandler from "../../../../handlers/resources/DiscussionsHandler";
+
+describe("Resources Discussions Handler destroy", () => {
+  function buildCtx() {
+    return {
+      client: {
+        comments: new Comments(() => ({}), "token"),
+      },
+      locale: "en",
+      params: { id: "9" },
+    };
+  }
+
+  test("deletes the comment and refreshes the page", async () => {
+    const ctx = buildCtx();
+    const remove = jest
+      .spyOn(ctx.client.comments, "delete")
+      .mockImplementation(() => ({ comment: { id: "9" }, errors: null }));
+
+    const result = await DiscussionsHandler.destroy(ctx);
+
+    expect(remove).toHaveBeenCalledWith("9");
+    expect(result).toEqual({ headers: { "HX-Refresh": "true" }, json: {} });
+  });
+
+  test("throws when the comment cannot be deleted", async () => {
+    const ctx = buildCtx();
+    jest.spyOn(ctx.client.comments, "delete").mockImplementation(() => ({
+      comment: null,
+      errors: [{ key: "generalError", message: "Comment not found" }],
+    }));
+
+    await expect(DiscussionsHandler.destroy(ctx)).rejects.toMatch(
+      "Failed to delete comment #9: Comment not found",
+    );
+  });
+
+  test("throws with the reason when the comment is frozen", async () => {
+    const ctx = buildCtx();
+    jest.spyOn(ctx.client.comments, "delete").mockImplementation(() => ({
+      comment: null,
+      errors: [
+        {
+          key: "generalError",
+          message: "Comments of published revisions cannot be changed",
+        },
+      ],
+    }));
+
+    await expect(DiscussionsHandler.destroy(ctx)).rejects.toMatch(
+      "Failed to delete comment #9: Comments of published revisions cannot be changed",
+    );
+  });
+});