@raketa-cloud/admin 1.8.15 → 1.8.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "1.8.15",
+  "version": "1.8.17",
   "main": "src/index.js",
   "files": [
     "src/",

package/src/HonoAdapter.js

@@ -13,6 +13,7 @@ import history from "./helpers/historyUtils";
 import pagination from "./helpers/pagination_helper";
 import sort_button from "./helpers/sort_button";
 import utils from "./helpers/utils";
+import * as content_tasks from "./helpers/content_tasks_helper";
 
 function escapeHtml(string) {
   const escape = {
@@ -168,6 +169,7 @@ export default class HonoAdapter {
       sort_button,
       pagination,
       Inflector,
+      content_tasks,
     };
   }
 

package/src/handlers/content_tasks/ContentTasksHandler.js

@@ -1,28 +1,11 @@
-function buildResourceUrl(resource, resourceRoutes) {
-  if (!resource) return "#";
-
-  const { locale, resourceType, id } = resource;
-
-  const route = resourceRoutes[resourceType];
-
-  return `/${locale}/${route}/${id}`;
-}
-
 async function index(ctx) {
   const items = await ctx.client.contentTasks.list(ctx.query);
   const editors = await ctx.client.contentTasks.editors();
-  const resourceRoutes = ctx.globalConfig.resourceRoutes;
-
-  if (!resourceRoutes) {
-    throw new Error("Missing resourceRoutes in the admin config!");
-  }
 
   return {
     assigns: {
       items,
       editors: editors.list || [],
-      buildResourceUrl: (resource) =>
-        buildResourceUrl(resource, resourceRoutes),
     },
   };
 }

package/src/handlers/resources/TranslationsHandler.js

@@ -252,14 +252,10 @@ const create = async (ctx) => {
         };
       }
     }
-
-    return {
-      redirect: `/${originalLocale}/${resourceTypePlural}/${parent_id}/translations?translations=${translationIds.join(";")}`,
-    };
   }
 
   return {
-    redirect: `/${originalLocale}/${resourceTypePlural}/${parent_id}`,
+    redirect: `/${originalLocale}/${resourceTypePlural}/${parent_id}/translations?translations=${translationIds.join(";")}`,
   };
 };
 

package/src/helpers/content_tasks_helper.js

@@ -0,0 +1,25 @@
+const WORKFLOWS_MAP = {
+  lokalise_to_ai_rt_hum: "Lokalise: AI translation & Human review",
+  lokalise_tt_hum: "Lokalise: Human translation",
+  lokalise_tt_ai: "Lokalise: AI translation",
+};
+
+export const workflowsMap = (workflowType) => {
+  return WORKFLOWS_MAP[workflowType] || "Unknown workflow";
+};
+
+export const buildResourceUrl = (resource, globalConfig) => {
+  if (!resource) return "#";
+
+  const resourceRoutes = globalConfig.resourceRoutes;
+
+  if (!resourceRoutes) {
+    throw new Error("Missing resourceRoutes in the admin config!");
+  }
+
+  const { locale, resourceType, id } = resource;
+
+  const route = resourceRoutes[resourceType];
+
+  return `/${locale}/${route}/${id}`;
+};

package/src/tests/handlers/content_tasks/ContentTasksHandler.test/index.test.js

@@ -21,7 +21,7 @@ describe("ContentTasksHandler", () => {
     };
   }
 
-  test("index - returns content tasks with editors and buildResourceUrl helper", async () => {
+  test("index - returns content tasks with editors", async () => {
     const contentTasks = [
       Factory.build("contentTask", {
         id: "1",
@@ -76,86 +76,5 @@ describe("ContentTasksHandler", () => {
       pagination: { currentPage: 1, pagesCount: 1 },
     });
     expect(result.assigns.editors).toEqual(editors);
-    expect(typeof result.assigns.buildResourceUrl).toBe("function");
-  });
-
-  test("index - throws error when resourceRoutes is missing", async () => {
-    const ctx = buildCtx();
-    ctx.globalConfig = {}; // No resourceRoutes
-
-    const mockedList = jest
-      .spyOn(ctx.client.contentTasks, "list")
-      .mockImplementation(() => ({ list: [], pagination: {} }));
-
-    const mockedEditors = jest
-      .spyOn(ctx.client.contentTasks, "editors")
-      .mockImplementation(() => ({ list: [] }));
-
-    await expect(ContentTasksHandler.index(ctx)).rejects.toThrow(
-      "Missing resourceRoutes in the admin config!",
-    );
-  });
-
-  test("buildResourceUrl helper - builds correct URL for standard resource", async () => {
-    const ctx = buildCtx();
-
-    const mockedList = jest
-      .spyOn(ctx.client.contentTasks, "list")
-      .mockImplementation(() => ({ list: [], pagination: {} }));
-
-    const mockedEditors = jest
-      .spyOn(ctx.client.contentTasks, "editors")
-      .mockImplementation(() => ({ list: [] }));
-
-    const result = await ContentTasksHandler.index(ctx);
-    const { buildResourceUrl } = result.assigns;
-
-    const resource = {
-      id: "123",
-      locale: "en",
-      resourceType: "page",
-    };
-
-    expect(buildResourceUrl(resource)).toBe("/en/pages/123");
-  });
-
-  test("buildResourceUrl helper - builds correct URL for custom route", async () => {
-    const ctx = buildCtx();
-
-    const mockedList = jest
-      .spyOn(ctx.client.contentTasks, "list")
-      .mockImplementation(() => ({ list: [], pagination: {} }));
-
-    const mockedEditors = jest
-      .spyOn(ctx.client.contentTasks, "editors")
-      .mockImplementation(() => ({ list: [] }));
-
-    const result = await ContentTasksHandler.index(ctx);
-    const { buildResourceUrl } = result.assigns;
-
-    const resource = {
-      id: "456",
-      locale: "de",
-      resourceType: "movie-type",
-    };
-
-    expect(buildResourceUrl(resource)).toBe("/de/movie-types/456");
-  });
-
-  test("buildResourceUrl helper - returns # for null resource", async () => {
-    const ctx = buildCtx();
-
-    const mockedList = jest
-      .spyOn(ctx.client.contentTasks, "list")
-      .mockImplementation(() => ({ list: [], pagination: {} }));
-
-    const mockedEditors = jest
-      .spyOn(ctx.client.contentTasks, "editors")
-      .mockImplementation(() => ({ list: [] }));
-
-    const result = await ContentTasksHandler.index(ctx);
-    const { buildResourceUrl } = result.assigns;
-
-    expect(buildResourceUrl(null)).toBe("#");
   });
 });

package/src/tests/helpers/content_tasks_helper.test.js

@@ -0,0 +1,68 @@
+import {
+  workflowsMap,
+  buildResourceUrl,
+} from "../../helpers/content_tasks_helper";
+
+describe("content_tasks_helper", () => {
+  describe("workflowsMap", () => {
+    test("returns correct workflow name for known type", () => {
+      expect(workflowsMap("lokalise_to_ai_rt_hum")).toBe(
+        "Lokalise: AI translation & Human review",
+      );
+      expect(workflowsMap("lokalise_tt_hum")).toBe(
+        "Lokalise: Human translation",
+      );
+      expect(workflowsMap("lokalise_tt_ai")).toBe("Lokalise: AI translation");
+    });
+
+    test("returns 'Unknown workflow' for unknown type", () => {
+      expect(workflowsMap("unknown")).toBe("Unknown workflow");
+    });
+  });
+
+  describe("buildResourceUrl", () => {
+    const globalConfig = {
+      resourceRoutes: {
+        page: "pages",
+        author: "authors",
+        article: "articles",
+        "movie-type": "movie-types",
+      },
+    };
+
+    test("builds correct URL for standard resource", () => {
+      const resource = {
+        id: "123",
+        locale: "en",
+        resourceType: "page",
+      };
+      expect(buildResourceUrl(resource, globalConfig)).toBe("/en/pages/123");
+    });
+
+    test("builds correct URL for custom route", () => {
+      const resource = {
+        id: "456",
+        locale: "de",
+        resourceType: "movie-type",
+      };
+      expect(buildResourceUrl(resource, globalConfig)).toBe(
+        "/de/movie-types/456",
+      );
+    });
+
+    test("returns # for null resource", () => {
+      expect(buildResourceUrl(null, globalConfig)).toBe("#");
+    });
+
+    test("throws error when resourceRoutes is missing", () => {
+      const resource = {
+        id: "123",
+        locale: "en",
+        resourceType: "page",
+      };
+      expect(() => buildResourceUrl(resource, {})).toThrow(
+        "Missing resourceRoutes in the admin config!",
+      );
+    });
+  });
+});

package/src/views/_shared/_content_tasks.ejs

@@ -0,0 +1,110 @@
+<% if (tasks.length > 0) { %>
+  <table class="data-grid alt">
+    <thead>
+      <tr>
+        <% if (showAllDetails) { %>
+        <th>Resource</th>
+        <th>Locale</th>
+        <% } %>
+        <th>Workflow</th>
+        <th>Started at</th>
+        <% if (showAllDetails) { %>
+        <th>Finished at</th>
+        <% } %>
+        <th>Status</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <% tasks.forEach(task => { %>
+        <tr>
+          <% if (showAllDetails) { %>
+            <td class="w-1/3">
+              <% if (task.resource) { %>
+                <a href="<%= content_tasks.buildResourceUrl(task.resource, _context.globalConfig) %>" target="_blank" class="btn-text">
+                  <%= task.resource.title %>
+                </a>
+
+                <div class="body-3 text-raketa-foreground/50 mt-1">
+                  <strong>Type:</strong> <%= Inflector.humanize(Inflector.capitalize(task.resource.resourceType)) %>
+                </div>
+              <% } else { %>
+                <span class="text-raketa-foreground/50">—</span>
+              <% } %>
+            </td>
+
+            <td>
+              <% if (task.resource && _context.locales[task.resource.locale]) { %>
+                <% const { name, flag } = _context.locales[task.resource.locale] %>
+                <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="size-6 rounded-full border dark:border-neutral-700" />
+              <% } else { %>
+                <span class="text-raketa-foreground/50">—</span>
+              <% } %>
+            </td>
+          <% } %>
+
+          <td>
+            <span class="body-2">
+              <%= content_tasks.workflowsMap(task.workflow) %>
+            </span>
+          </td>
+
+          <td>
+            <div class="body-3 text-raketa-foreground/50">
+              <div class="flex items-center gap-1 mb-0.5">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                </svg>
+                <time data-pretty-datetime datetime="<%= task.insertedAt %>"><%= utils.formattedDateTime(task.insertedAt) %></time>
+              </div>
+
+              <div class="flex items-center gap-1" title="<%= task.operatorMeta?.name %>">
+                <% if (task.operatorMeta?.avatar) { %>
+                <img src="<%= task.operatorMeta?.avatar %>" class="size-4 rounded-full" alt="<%= task.operatorMeta?.name %>">
+                <% } else { %>
+                <div class="size-4 rounded-full"></div>
+                <% } %>
+                <%= task.operatorMeta?.name %>
+              </div>
+            </div>
+          </td>
+
+          <% if (showAllDetails) { %>
+            <td>
+              <% if (task.completedAt || task.failedAt) { %>
+                <div class="body-3 text-raketa-foreground/50">
+                  <div class="flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                    </svg>
+                    <time data-pretty-datetime datetime="<%= task.completedAt || task.failedAt %>">
+                      <%= utils.formattedDateTime(task.completedAt || task.failedAt) %>
+                    </time>
+                  </div>
+                </div>
+              <% } else { %>
+                <span class="text-raketa-foreground/50">—</span>
+              <% } %>
+            </td>
+          <% } %>
+
+          <td>
+            <% if (task.completedAt) { %>
+              <span class="bg-emerald-100 chip text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
+                Completed
+              </span>
+            <% } else if (task.failedAt) { %>
+              <span class="bg-red-100 chip text-red-700 dark:bg-red-900/50 dark:text-red-300">
+                Failed
+              </span>
+            <% } else { %>
+              <span class="bg-blue-100 chip text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
+                In Progress
+              </span>
+            <% } %>
+          </td>
+        </tr>
+      <% }) %>
+    </tbody>
+  </table>
+<% } %>

package/src/views/content_tasks/index.ejs

@@ -11,107 +11,7 @@
     </div>
   </div>
 
-  <table class="data-grid">
-    <thead>
-      <tr>
-        <th>Resource</th>
-        <th>Locale</th>
-        <th>Workflow</th>
-        <th>Started at</th>
-        <th>Finished at</th>
-        <th>Status</th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <% if (items && items.list && items.list.length > 0) { %>
-        <% items.list.forEach(task => { %>
-          <tr>
-            <td class="w-1/3">
-              <% if (task.resource) { %>
-                <a href="<%= buildResourceUrl(task.resource) %>" target="_blank" class="btn-text">
-                  <%= task.resource.title %>
-                </a>
-                <div class="body-3 text-raketa-foreground/50 mt-1">
-                  <strong>Type:</strong> <%= Inflector.humanize(Inflector.capitalize(task.resource.resourceType)) %>
-                </div>
-              <% } else { %>
-                <span class="text-raketa-foreground/50">—</span>
-              <% } %>
-            </td>
-
-            <td>
-              <% if (task.resource && _context.locales[task.resource.locale]) { %>
-                <% const { name, flag } = _context.locales[task.resource.locale] %>
-                <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="size-6 rounded-full border dark:border-neutral-700" />
-              <% } else { %>
-                <span class="text-raketa-foreground/50">—</span>
-              <% } %>
-            </td>
-
-            <td>
-              <span class="body-2">
-                <%= Inflector.capitalize(task.workflow) %>
-              </span>
-            </td>
-
-            <td>
-              <div class="body-3 text-raketa-foreground/50">
-                <div class="flex items-center gap-1 mb-0.5">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                  </svg>
-                  <time data-pretty-datetime datetime="<%= task.insertedAt %>"><%= utils.formattedDateTime(task.insertedAt) %></time>
-                </div>
-
-                <div class="flex items-center gap-1" title="<%= task.operatorMeta?.name %>">
-                  <% if (task.operatorMeta?.avatar) { %>
-                  <img src="<%= task.operatorMeta?.avatar %>" class="size-4 rounded-full" alt="<%= task.operatorMeta?.name %>">
-                  <% } else { %>
-                  <div class="size-4 rounded-full"></div>
-                  <% } %>
-                  <%= task.operatorMeta?.name %>
-                </div>
-              </div>
-            </td>
-
-            <td>
-              <% if (task.completedAt || task.failedAt) { %>
-                <div class="body-3 text-raketa-foreground/50">
-                  <div class="flex items-center gap-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                    </svg>
-                    <time data-pretty-datetime datetime="<%= task.completedAt || task.failedAt %>">
-                      <%= utils.formattedDateTime(task.completedAt || task.failedAt) %>
-                    </time>
-                  </div>
-                </div>
-              <% } else { %>
-                <span class="text-raketa-foreground/50">—</span>
-              <% } %>
-            </td>
-
-            <td>
-              <% if (task.completedAt) { %>
-                <span class="bg-emerald-100 chip text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
-                  Completed
-                </span>
-              <% } else if (task.failedAt) { %>
-                <span class="bg-red-100 chip text-red-700 dark:bg-red-900/50 dark:text-red-300">
-                  Failed
-                </span>
-              <% } else { %>
-                <span class="bg-blue-100 chip text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
-                  In Progress
-                </span>
-              <% } %>
-            </td>
-          </tr>
-        <% }) %>
-      <% } %>
-    </tbody>
-  </table>
+  <%- render_partial('../_shared/_content_tasks.ejs', { tasks: items.list || [], showAllDetails: true }) %>
 
   <% if (!items || !items.list || items.list.length === 0) { %>
     <div class="empty-state">

package/src/views/resources/show.ejs

@@ -166,6 +166,23 @@
   </div>
   <% } %>
 
+  <% if (utils.feature("contentTasks", _context) && resource.activeContentTask) { %>
+    <div class="mb-4">
+      <h4 class="flex items-center gap-2 pb-4 heading-3">
+        <svg class="size-4 text-raketa-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+
+        Active tasks
+      </h4>
+
+      <%- render_partial('../_shared/_content_tasks.ejs', {
+        tasks: [{...resource.activeContentTask, resource: resource}],
+        showAllDetails: false }
+      ) %>
+    </div>
+  <% } %>
+
   <%- render_partial('./_shared/_addons.ejs') %>
 
   <div class="mb-4">

package/src/views/resources/translations/create_form.ejs

@@ -82,7 +82,7 @@
           <div class="markdown">
             Select one or multiple locales to initiate bulk translations. The process depends on your selected workflow:
             <br />
-            <ol>
+            <ul>
               <li>
                 <strong>Default (Content Editors):</strong> A private copy and new revision are created immediately. The next screen provides quick links to translate settings and widgets so you can translate the content manually.
               </li>
@@ -95,10 +95,15 @@
               <li>
                 <strong>Human Translation (Lokalise):</strong> A task is sent to Lokalise where a human translator fully translates and reviews the content.
               </li>
-            </ol>
+            </ul>
 
             <br />
-            <strong>Note:</strong> For all Lokalise workflows (<strong>AI, AI + Human</strong>, and <strong>Human</strong>), the private copy and new revision will be automatically created here in the CMS only after the external task is completed and returned.
+            <strong>Notes:</strong> For all Lokalise workflows (<strong>AI, AI + Human</strong>, and <strong>Human</strong>):
+            <ul>
+              <li>Content is required to start a Lokalise task.</li>
+              <li>The private copy and new revision will be automatically created here in the CMS only after the external task is completed and returned.</li>
+              <li>You can track translation progress in the <a href="<%= `/${_context.locale}/content_tasks` %>" target="_blank">Content tasks</a> module.</li>
+            </ul>
           </div>
         </div>
 
@@ -114,11 +119,11 @@
           </div>
 
           <div class="markdown">
-            <ol>
+            <ul>
               <li>Select multiple locales to initiate bulk translations.</li>
               <li>A private copy of the <%= Inflector.downcase(_context.resourceConfig.resourceType) %> will be automatically created for each selected language, with a new revision opened to facilitate the translation process.</li>
               <li>On the next screen you'll see a list with quick links to transalte settings and widgets.</li>
-            </ol>
+            </ul>
           </div>
         </div>
 

package/src/views/resources/translations/index.ejs

@@ -6,12 +6,18 @@
     </div>
   </div>
 
-  <% if (translations && translations.length > 0) { %>
+  <% const activeContentTasks = translations?.some(t => Boolean(t.activeContentTask)) %>
+
+  <% if (translations.length > 0) { %>
   <table class="data-grid alt">
     <thead>
       <tr>
         <th>Locale</th>
-        <th>&nbsp;</th>
+        <% if (activeContentTasks) { %>
+          <th>Status</th>
+        <% } else { %>
+          <th>&nbsp;</th>
+        <% } %>
       </tr>
     </thead>
     <tbody>
@@ -25,9 +31,25 @@
           </div>
         </td>
 
-        <td class="whitespace-nowrap">
-          <%- render_partial('./_translation_toolbar.ejs', { translation }) %>
-        </td>
+        <% if (activeContentTasks) { %>
+          <td class="whitespace-nowrap">
+            <a href="<%= `/${_context.locale}/content_tasks`%>" target="blank">
+              <%= content_tasks.workflowsMap(translation.activeContentTask.workflow) %>
+
+              <% if (translation.activeContentTask.completedAt) { %>
+                  completed
+              <% } else if (translation.activeContentTask.failedAt) { %>
+                  failed
+              <% } else { %>
+                  in Progress
+              <% } %>
+            </a>
+          </td>
+        <% } else { %>
+          <td class="whitespace-nowrap">
+            <%- render_partial('./_translation_toolbar.ejs', { translation }) %>
+          </td>
+        <% } %>
       </tr>
       <% }) %>
     </tbody>