@raketa-cloud/admin 0.0.58 → 0.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "0.0.58",
+  "version": "0.0.62",
   "main": "src/index.js",
   "scripts": {
     "dev": "npx tailwindcss -i ./src/styles/application.css -o ../../apps/admin/static/application.css --watch",

package/src/handlers/articles/DeletesHandler.js

@@ -8,6 +8,7 @@ const create_form = async (ctx) => {
 
   return {
     assigns: {
+      article,
       resource: {
         id: article.id,
         redirect: "",

package/src/handlers/articles/URLsHandler.js

@@ -10,6 +10,7 @@ const create_form = async (ctx) => {
 
   return {
     assigns: {
+      article,
       resource: {
         id: article.id,
         slug: article.slug,

package/src/handlers/events/DeletesHandler.js

@@ -8,6 +8,7 @@ const create_form = async (ctx) => {
 
   return {
     assigns: {
+      event,
       resource: {
         id: event.id,
         redirect: "",

package/src/handlers/events/URLsHandler.js

@@ -10,6 +10,7 @@ const create_form = async (ctx) => {
 
   return {
     assigns: {
+      event,
       resource: {
         id: event.id,
         slug: event.slug,

package/src/handlers/page_revisions/TagHandler.js

@@ -1,5 +1,33 @@
 import { checkboxesToArray } from "../../utils";
 
+const fetchDefaultLocaleTags = async (ctx, resource) => {
+  if (ctx.locale === ctx.defaultLocale) {
+    return { defaultLocaleName: "", defaultLocaleTags: [] };
+  }
+
+  const originalPage = await ctx.client.pages.find(
+    resource.originalId,
+    ctx.locale
+  );
+
+  if (
+    Object.keys(originalPage.translations).length === 0 ||
+    !originalPage.translations[ctx.defaultLocale]
+  ) {
+    return { defaultLocaleName: "", defaultLocaleTags: [] };
+  }
+
+  const defaultLocale = ctx.locales[ctx.defaultLocale];
+  const defaultLocalePage = await ctx.client.pages.find(
+    originalPage.translations[ctx.defaultLocale].id,
+    ctx.defaultLocale
+  );
+
+  const defaultLocaleTags = defaultLocalePage?.tags || [];
+
+  return { defaultLocaleName: defaultLocale.name, defaultLocaleTags };
+};
+
 const edit_form = async (ctx) => {
   const { parent_id } = ctx.params;
 
@@ -13,12 +41,19 @@ const edit_form = async (ctx) => {
 
   resource.tags = resource.tags.map((t) => t.id);
 
+  const { defaultLocaleName, defaultLocaleTags } = await fetchDefaultLocaleTags(
+    ctx,
+    resource
+  );
+
   return {
     assigns: {
       resource,
       tags: tags.list,
       errors: {},
       _translations: [],
+      defaultLocaleTags,
+      defaultLocaleName,
     },
   };
 };
@@ -46,6 +81,9 @@ const update = async (ctx) => {
   if (errors) {
     const tags = await ctx.client.tags.all(ctx.locale);
 
+    const { defaultLocaleName, defaultLocaleTags } =
+      await fetchDefaultLocaleTags(ctx, resource);
+
     return {
       assigns: {
         resource,
@@ -54,6 +92,8 @@ const update = async (ctx) => {
           resource: ctx.client.pageRevisions.formatErrors(errors),
         },
         _translations: [],
+        defaultLocaleTags,
+        defaultLocaleName,
       },
     };
   }

package/src/handlers/pages/DeletesHandler.js

@@ -8,6 +8,7 @@ const create_form = async (ctx) => {
 
   return {
     assigns: {
+      page,
       resource: {
         id: page.id,
         redirect: "",

package/src/handlers/pages/URLsHandler.js

@@ -10,6 +10,7 @@ const create_form = async (ctx) => {
 
   return {
     assigns: {
+      page,
       resource: {
         id: page.id,
         slug: page.slug,

package/src/helpers/FormBuilder.js

@@ -234,8 +234,8 @@ export default class FormBuilder extends HTMLBuilder {
         renderedOpts.length
           ? renderedOpts.join("")
           : this.tag("div", "No items available.", {
-              class: "italic opacity-50",
-            }),
+            class: "italic opacity-50",
+          }),
 
         {
           ...rest,

package/src/styles/application.css

@@ -25,6 +25,10 @@ body {
   @apply text-raketa-foreground bg-raketa-background;
 }
 
+.markdown {
+  @apply prose text-raketa-foreground text-sm;
+}
+
 @layer components {
 
   /* Utils */

package/src/tests/handlers/articles/DeletesHandler.test/create_form.test.js

@@ -1,5 +1,5 @@
-import DeletesHandler from "../../../../handlers/articles/DeletesHandler";
 import Articles from "../../../../cloud/Articles";
+import DeletesHandler from "../../../../handlers/articles/DeletesHandler";
 import Factory from "../../../support/factory";
 import { remoteConfig } from "../../../support/handlersHelper";
 
@@ -33,6 +33,7 @@ describe("Article delete", () => {
 
     expect(result).toEqual({
       assigns: {
+        article,
         resource: {
           id: article.id,
           redirect: "",

package/src/tests/handlers/articles/URLsHandler.test/create_form.test.js

@@ -1,5 +1,5 @@
-import URLsHandler from "../../../../handlers/articles/URLsHandler";
 import Articles from "../../../../cloud/Articles";
+import URLsHandler from "../../../../handlers/articles/URLsHandler";
 import Factory from "../../../support/factory";
 
 function buildCtx(article) {
@@ -31,6 +31,7 @@ describe("Article change url", () => {
 
     expect(result).toEqual({
       assigns: {
+        article,
         resource: { slug: article.slug, id: article.id, redirect: null },
         errors: {},
         _translations: [],

package/src/tests/handlers/events/DeletesHandler.test/create_form.test.js

@@ -1,5 +1,5 @@
-import DeletesHandler from "../../../../handlers/events/DeletesHandler";
 import Events from "../../../../cloud/Events";
+import DeletesHandler from "../../../../handlers/events/DeletesHandler";
 import Factory from "../../../support/factory";
 import { remoteConfig } from "../../../support/handlersHelper";
 
@@ -33,6 +33,7 @@ describe("Event delete", () => {
 
     expect(result).toEqual({
       assigns: {
+        event,
         resource: {
           id: event.id,
           redirect: "",

package/src/tests/handlers/events/URLsHandler.test/create_form.test.js

@@ -1,5 +1,5 @@
-import URLsHandler from "../../../../handlers/events/URLsHandler";
 import Events from "../../../../cloud/Events";
+import URLsHandler from "../../../../handlers/events/URLsHandler";
 import Factory from "../../../support/factory";
 
 function buildCtx(event) {
@@ -31,6 +31,7 @@ describe("Event change url", () => {
 
     expect(result).toEqual({
       assigns: {
+        event,
         resource: { slug: event.slug, id: event.id, redirect: null },
         errors: {},
         _translations: [],

package/src/tests/handlers/page_revisions/TagHandler.test/edit_form.test.js

@@ -1,6 +1,7 @@
-import TagHandler from "../../../../handlers/page_revisions/TagHandler";
 import PageRevisions from "../../../../cloud/PageRevisions";
+import Pages from "../../../../cloud/Pages";
 import Tags from "../../../../cloud/Tags";
+import TagHandler from "../../../../handlers/page_revisions/TagHandler";
 
 import Factory from "../../../support/factory";
 
@@ -9,9 +10,17 @@ function buildCtx(revision) {
     client: {
       pageRevisions: new PageRevisions(() => ({}), "token"),
       tags: new Tags(() => ({}), "token"),
+      pages: new Pages(() => ({}), "token"),
     },
     params: { parent_id: revision.id },
     locale: "en",
+    defaultLocale: "es",
+    locales: {
+      es: {
+        name: "Spanish",
+        code: "es",
+      },
+    },
   };
 }
 
@@ -21,23 +30,47 @@ describe("Page revision tags settings", () => {
       Factory.build("tag", { id: 42 }),
       Factory.build("tag", { id: 69 }),
     ];
+    const spanishTags = [Factory.build("tag", { id: 100 })];
     const revision = Factory.build("page_revision", { tags: [tags[0]] });
+    const originalPage = Factory.build("page", {
+      id: "original-123",
+      translations: {
+        en: { id: "translated-123" },
+        es: { id: "es-translated-123" },
+      },
+    });
+    const spanishPage = Factory.build("page", {
+      id: "es-translated-123",
+      tags: spanishTags,
+    });
+
     const ctx = buildCtx(revision);
 
     const mockFind = jest
       .spyOn(ctx.client.pageRevisions, "find")
       .mockImplementation(() => revision);
 
+    const mockPageFind = jest
+      .spyOn(ctx.client.pages, "find")
+      .mockImplementation((id, locale) => {
+        if (locale === "es") {
+          return spanishPage;
+        }
+        return originalPage;
+      });
+
     const mockTags = jest
       .spyOn(ctx.client.tags, "all")
-      .mockImplementation(() => ({
-        list: tags,
+      .mockImplementation((locale) => ({
+        list: locale === "es" ? spanishTags : tags,
       }));
 
     const result = await TagHandler.edit_form(ctx);
 
     expect(mockFind).toHaveBeenCalledWith(revision.id, "en");
     expect(mockTags).toHaveBeenCalledWith("en");
+    expect(mockPageFind).toHaveBeenCalledWith(revision.originalId, "en");
+    expect(mockPageFind).toHaveBeenCalledWith("es-translated-123", "es");
 
     expect(result).toEqual({
       assigns: {
@@ -45,6 +78,8 @@ describe("Page revision tags settings", () => {
         tags: tags,
         errors: {},
         _translations: [],
+        defaultLocaleTags: spanishTags,
+        defaultLocaleName: "Spanish",
       },
     });
   });

package/src/tests/handlers/page_revisions/TagHandler.test/update.test.js

@@ -1,6 +1,7 @@
-import TagHandler from "../../../../handlers/page_revisions/TagHandler";
 import PageRevisions from "../../../../cloud/PageRevisions";
+import Pages from "../../../../cloud/Pages";
 import Tags from "../../../../cloud/Tags";
+import TagHandler from "../../../../handlers/page_revisions/TagHandler";
 
 import Factory from "../../../support/factory";
 
@@ -9,12 +10,20 @@ function buildCtx(revision, updateSettings) {
     client: {
       pageRevisions: new PageRevisions(() => ({}), "token"),
       tags: new Tags(() => ({}), "token"),
+      pages: new Pages(() => ({}), "token"),
     },
     params: { parent_id: revision.id },
     resourceParams: {
       resource: updateSettings,
     },
     locale: "en",
+    defaultLocale: "es",
+    locales: {
+      es: {
+        name: "Spanish",
+        code: "es",
+      },
+    },
     resourceConfig: {
       pageType: "page",
       pageTypePlural: "pages",
@@ -70,8 +79,22 @@ describe("Page revision tags settings", () => {
       Factory.build("tag", { id: 42 }),
       Factory.build("tag", { id: 69 }),
     ];
+    const spanishTags = [Factory.build("tag", { id: 100 })];
     const revision = Factory.build("page_revision", { tags: [tags[0]] });
 
+    const originalPage = Factory.build("page", {
+      id: "original-123",
+      translations: {
+        en: { id: "translated-123" },
+        es: { id: "es-translated-123" },
+      },
+    });
+
+    const spanishPage = Factory.build("page", {
+      id: "es-translated-123",
+      tags: spanishTags,
+    });
+
     const updateSettings = {
       tags: [tags.map((t) => t.id)],
     };
@@ -91,10 +114,19 @@ describe("Page revision tags settings", () => {
 
     const mockTags = jest
       .spyOn(ctx.client.tags, "all")
-      .mockImplementation(() => ({
-        list: tags,
+      .mockImplementation((locale) => ({
+        list: locale === "es" ? spanishTags : tags,
       }));
 
+    const mockPageFind = jest
+      .spyOn(ctx.client.pages, "find")
+      .mockImplementation((id, locale) => {
+        if (locale === "es") {
+          return spanishPage;
+        }
+        return originalPage;
+      });
+
     const result = await TagHandler.update(ctx);
 
     expect(mockFind).toHaveBeenCalledWith(revision.id, "en");
@@ -108,6 +140,8 @@ describe("Page revision tags settings", () => {
       settings: revision.settings,
     });
     expect(mockTags).toHaveBeenCalledWith("en");
+    expect(mockPageFind).toHaveBeenCalledWith(revision.originalId, "en");
+    expect(mockPageFind).toHaveBeenCalledWith("es-translated-123", "es");
 
     expect(result).toEqual({
       assigns: {
@@ -120,6 +154,8 @@ describe("Page revision tags settings", () => {
         },
         tags: tags,
         _translations: [],
+        defaultLocaleTags: spanishTags,
+        defaultLocaleName: "Spanish",
       },
     });
   });

package/src/tests/handlers/pages/DeletesHandler.test/create.test.js

@@ -1,5 +1,5 @@
-import DeletesHandler from "../../../../handlers/pages/DeletesHandler";
 import Pages from "../../../../cloud/Pages";
+import DeletesHandler from "../../../../handlers/pages/DeletesHandler";
 import Factory from "../../../support/factory";
 import { remoteConfig } from "../../../support/handlersHelper";
 

package/src/tests/handlers/pages/DeletesHandler.test/create_form.test.js

@@ -33,6 +33,7 @@ describe("Page delete", () => {
 
     expect(result).toEqual({
       assigns: {
+        page,
         resource: {
           id: page.id,
           redirect: "",

package/src/tests/handlers/pages/URLsHandler.test/create_form.test.js

@@ -34,6 +34,7 @@ describe("Page change url", () => {
 
     expect(result).toEqual({
       assigns: {
+        page,
         resource: { slug: page.slug, id: page.id, redirect: null },
         errors: {},
         _translations: [],

package/src/views/article_revisions/codes/edit_form.ejs

@@ -1,6 +1,9 @@
 <div class="page-wrapper">
   <div class="page-title">
-    <h1 class="heading-1">Edit revision / Code customizations</h1>
+    <h1 class="heading-1">
+      <span class="opacity-50">Code customizations / </span>
+      <%= resource.title %>
+    </h1>
   </div>
 
   <%- render_partial('../_nav.ejs', { resource, active: 'codes' }) %>
@@ -32,19 +35,5 @@
       </form>
       <% }) %>
     </div>
-
-    <div>
-      <div class="help">
-        <div class="flex items-center gap-1 mb-2">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
-          </svg>
-
-          <h3 class="heading-3">Contextual help</h3>
-        </div>
-
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
-      </div>
-    </div>
   </div>
-</div>
+</div>

package/src/views/article_revisions/general/_form.ejs

@@ -0,0 +1,17 @@
+<% form_for({ resource }, errors, (f) => { %>
+<form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/general` %>" method="POST" class="form">
+  <%- f.field('resource.title', { required: true }) %>
+  <%- f.field('resource.slug', { label: "URL", required: true, hint: "Only lowercase letters, numbers and dash allowed. E.g: celebrate-friday-13" }) %>
+  <%- f.field('resource.publishAt', { required: true, type: 'datetime-local', label: 'Publish at (UTC)' }) %>
+  <%- f.field('resource.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
+
+  <%- include('../../_shared/_credentials_input.ejs', { f, visibilityFieldId: "f_resource_visibility"}) %>
+
+  <div class="form-actions">
+    <div class="btn-toolbar">
+      <%- f.submit('Save changes', { class: 'btn-primary' }) %>
+      <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.originalId}` %>" class="btn-secondary">Back</a>
+    </div>
+  </div>
+</form>
+<% }) %>

package/src/views/article_revisions/general/edit_form.ejs

@@ -1,43 +1,16 @@
 <div class="page-wrapper">
   <div class="page-title">
-    <h1 class="heading-1">Edit revision / General</h1>
+    <h1 class="heading-1">
+      <span class="opacity-50">General / </span>
+      <%= resource.title %>
+    </h1>
   </div>
 
   <%- render_partial('../_nav.ejs', { resource, active: 'general' }) %>
 
   <div class="grid gap-4 md:grid-cols-3">
     <div>
-      <% form_for({ resource }, errors, (f) => { %>
-      <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/general` %>" method="POST" class="form">
-        <%- f.field('resource.title', { required: true }) %>
-        <%- f.field('resource.slug', { label: "URL", required: true }) %>
-        <%- f.field('resource.publishAt', { required: true, type: 'datetime-local', label: 'Publish at (UTC)' }) %>
-        <%- f.field('resource.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
-
-        <%- include('../../_shared/_credentials_input.ejs', { f, visibilityFieldId: "f_resource_visibility"}) %>
-
-        <div class="form-actions">
-          <div class="btn-toolbar">
-            <%- f.submit('Save changes', { class: 'btn-primary' }) %>
-            <a href="<%= `/${_context.locale}/${_context.resourceConfig.articleTypePlural}/${resource.originalId}` %>" class="btn-secondary">Back</a>
-          </div>
-        </div>
-      </form>
-      <% }) %>
-    </div>
-
-    <div>
-      <div class="help">
-        <div class="flex items-center gap-1 mb-2">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
-          </svg>
-
-          <h3 class="heading-3">Contextual help</h3>
-        </div>
-
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
-      </div>
+      <%- render_partial('_form.ejs') %>
     </div>
   </div>
-</div>
+</div>

package/src/views/article_revisions/locks/create_form.ejs

@@ -25,11 +25,13 @@
             <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
           </svg>
 
-          <h3 class="heading-3">Contextual help</h3>
+          <h3 class="heading-3">How to lock a revision?</h3>
         </div>
 
-        <p>Locking a revision will prevent further changes to this version of the article. This action cannot be undone. Please provide a reason for locking this revision.</p>
+        <div class="markdown">
+          <p>You can lock a revision to prevent publishing or deletion by anyone, including yourself. When locking, provide a clear, informative message explaining the reason. Remember that while this feature is designed to facilitate collaboration, any user can still unlock the revision.</p>
+        </div>
       </div>
     </div>
   </div>
-</div>
+</div>

package/src/views/article_revisions/meta/edit_form.ejs

@@ -1,6 +1,9 @@
 <div class="page-wrapper">
   <div class="page-title">
-    <h1 class="heading-1">Edit revision / Open graph & meta tags</h1>
+    <h1 class="heading-1">
+      <span class="opacity-50">OpenGraph & Meta tags / </span>
+      <%= resource.title %>
+    </h1>
   </div>
 
   <%- render_partial('../_nav.ejs', { resource, active: 'meta' }) %>
@@ -9,10 +12,10 @@
     <div>
       <% form_for({ resource }, errors, (f) => { %>
       <form action="<%= `/${_context.locale}/${_context.resourceConfig.articleType}_revisions/${resource.id}/meta` %>" method="POST" class="form">
-        <%- f.field('resource.settings.meta.title', { required: true, label: "Meta title" }) %>
-        <%- f.field('resource.settings.meta.description', { as: "textarea", required: true, label: "Meta description" }) %>
+        <%- f.field('resource.settings.meta.title', { required: true, label: "Meta title", hint: "Used for both meta and OpenGraph" }) %>
+        <%- f.field('resource.settings.meta.description', { as: "textarea", required: true, label: "Meta description", hint: "Used for both meta and OpenGraph" }) %>
 
-        <raketa-image-picker name="resource[settings][meta][image]" value="<%= JSON.stringify(resource.settings?.meta?.image || {}) %>" label="Meta image"></raketa-image-picker>
+        <raketa-image-picker name="resource[settings][meta][image]" value="<%= JSON.stringify(resource.settings?.meta?.image || {}) %>" label="OpenGraph image"></raketa-image-picker>
 
         <div class="form-actions">
           <div class="btn-toolbar">
@@ -23,19 +26,5 @@
       </form>
       <% }) %>
     </div>
-
-    <div>
-      <div class="help">
-        <div class="flex items-center gap-1 mb-2">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
-          </svg>
-
-          <h3 class="heading-3">Contextual help</h3>
-        </div>
-
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
-      </div>
-    </div>
   </div>
-</div>
+</div>