@raketa-cloud/admin 1.10.3 → 1.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "1.10.3",
+  "version": "1.10.5",
   "main": "src/index.js",
   "files": [
     "src/",
@@ -23,13 +23,14 @@
     "@babel/preset-env": "7.29.0",
     "@babel/preset-typescript": "7.28.5",
     "@repo/typescript-config": "*",
-    "@tailwindcss/forms": "0.5.7",
-    "@tailwindcss/typography": "0.5.13",
+    "@tailwindcss/cli": "4.3.3",
+    "@tailwindcss/forms": "0.5.11",
+    "@tailwindcss/typography": "0.5.20",
     "@types/node": "24.10.1",
-    "babel-jest": "29.7.0",
-    "jest": "29.7.0",
-    "jest-environment-node": "29.7.0",
-    "tailwindcss": "3.4.4",
+    "babel-jest": "30.5.2",
+    "jest": "30.5.2",
+    "jest-environment-node": "30.5.2",
+    "tailwindcss": "4.3.3",
     "typescript": "5.9.3"
   },
   "dependencies": {

package/src/helpers/content_tasks_helper.js

@@ -24,26 +24,21 @@ export const buildResourceUrl = (resource, globalConfig) => {
   return `/${locale}/${route}/${id}`;
 };
 
-export const hasUnattachedKeys = (task) => {
-  if (!task) return false;
+export const unattachedKeys = (task) => {
+  const keys = task?.lokaliseWorkflow?.settings?.unattached_keys;
+  const values = keys?.names || keys?.ids;
 
-  const unattachedKeys = task.lokaliseWorkflow?.settings?.unattached_keys;
-  const ids = unattachedKeys?.ids;
+  if (Array.isArray(values)) return values;
 
-  if (Array.isArray(ids)) {
-    return ids.length > 0;
-  }
-
-  return Boolean(ids);
+  return values ? [values] : [];
 };
 
-export const unattachedKeyIds = (task) => {
-  const unattachedKeys = task?.lokaliseWorkflow?.settings?.unattached_keys;
-  const ids = unattachedKeys?.ids;
+export const hasUnattachedKeys = (task) => unattachedKeys(task).length > 0;
 
-  if (Array.isArray(ids)) {
-    return ids.join(", ");
-  }
+export const unattachedKeyUrl = (task, key) => {
+  const keys = task?.lokaliseWorkflow?.settings?.unattached_keys;
+
+  if (!keys?.names || !keys.url) return null;
 
-  return ids ? String(ids) : "";
+  return `${keys.url}${encodeURIComponent(key)}`;
 };

package/src/styles/application.css

@@ -1,6 +1,28 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+@source "../**/*.{html,js,ejs}";
+@source "../../../apps/**/*.{html,js,ejs}";
+
+@theme {
+  --color-raketa-background: rgb(var(--background));
+  --color-raketa-foreground: rgb(var(--foreground));
+  --color-raketa-primary: rgb(var(--primary));
+  --color-raketa-primary-light: rgb(var(--primary-light));
+  --color-raketa-primary-dark: rgb(var(--primary-dark));
+  --color-mono-purple-25: #f0f0f8;
+  --color-mono-purple-100: #9d9dd2;
+  --color-mono-purple-300: #6e6eb2;
+  --color-mono-25: #eaeaea;
+  --color-mono-50: #d0d1d2;
+  --color-mono-100: #f6f6f6;
+  --color-mono-200: #b7b7b7;
+  --color-mono-300: #737373;
+  --color-mono-800: #33333c;
+  --color-mono-850: #232324;
+  --color-mono-900: #1a1a1a;
+  --color-mono-950: #1c1c1e;
+}
 
 :root {
   --background: 255, 255, 255;
@@ -40,7 +62,7 @@ body {
   }
 
   .help {
-    @apply bg-orange-50 body-2 p-4 rounded sticky top-6 dark:bg-raketa-primary/20;
+    @apply bg-orange-50 leading-[1.5] text-sm p-4 rounded sticky top-6 dark:bg-raketa-primary/20;
 
     .heading-3 {
       @apply text-raketa-foreground;
@@ -228,7 +250,7 @@ body {
 
   /* Tables */
   .data-grid {
-    @apply text-sm text-left body-1 w-full text-raketa-foreground/60 rounded-t overflow-hidden;
+    @apply text-sm text-left leading-[1.5] text-base w-full text-raketa-foreground/60 rounded-t overflow-hidden;
 
     th,
     td {

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

@@ -2,7 +2,8 @@ import {
   workflowsMap,
   buildResourceUrl,
   hasUnattachedKeys,
-  unattachedKeyIds,
+  unattachedKeys,
+  unattachedKeyUrl,
 } from "../../helpers/content_tasks_helper";
 
 describe("content_tasks_helper", () => {
@@ -114,46 +115,89 @@ describe("content_tasks_helper", () => {
       ).toBe(false);
     });
 
-    test("returns true when task is in progress and has unattached key ids", () => {
+    test("returns true when the task has unattached key ids or names", () => {
       expect(
         hasUnattachedKeys({
-          completedAt: null,
-          failedAt: null,
           lokaliseWorkflow: {
             settings: { unattached_keys: { ids: [101, 102] } },
           },
         }),
       ).toBe(true);
+      expect(
+        hasUnattachedKeys({
+          lokaliseWorkflow: {
+            settings: { unattached_keys: { names: ["key_a"] } },
+          },
+        }),
+      ).toBe(true);
     });
   });
 
-  describe("unattachedKeyIds", () => {
-    test("returns empty string when no unattached keys exist", () => {
-      expect(unattachedKeyIds(null)).toBe("");
-      expect(unattachedKeyIds({})).toBe("");
-      expect(
-        unattachedKeyIds({
-          lokaliseWorkflow: { settings: { unattached_keys: {} } },
-        }),
-      ).toBe("");
+  describe("unattachedKeys", () => {
+    test("returns an empty array when no unattached keys exist", () => {
+      expect(unattachedKeys(null)).toEqual([]);
+      expect(unattachedKeys({})).toEqual([]);
     });
 
-    test("returns comma separated string of ids", () => {
+    test("prefers names and falls back to ids", () => {
       expect(
-        unattachedKeyIds({
+        unattachedKeys({
           lokaliseWorkflow: {
-            settings: { unattached_keys: { ids: [101, 102, 103] } },
+            settings: {
+              unattached_keys: { names: ["key_a", "key_b"], ids: [101, 102] },
+            },
           },
         }),
-      ).toBe("101, 102, 103");
-
+      ).toEqual(["key_a", "key_b"]);
       expect(
-        unattachedKeyIds({
+        unattachedKeys({
           lokaliseWorkflow: {
-            settings: { unattached_keys: { ids: ["key_a", "key_b"] } },
+            settings: { unattached_keys: { ids: [101, 102] } },
           },
         }),
-      ).toBe("key_a, key_b");
+      ).toEqual([101, 102]);
+    });
+  });
+
+  describe("unattachedKeyUrl", () => {
+    const task = {
+      lokaliseWorkflow: {
+        settings: {
+          unattached_keys: {
+            names: ["key one"],
+            url: "https://app.lokalise.com/project/123/?search=",
+          },
+        },
+      },
+    };
+
+    test("builds a Lokalise URL for a key name", () => {
+      expect(unattachedKeyUrl(task, "key one")).toBe(
+        "https://app.lokalise.com/project/123/?search=key%20one",
+      );
+    });
+
+    test("returns null for legacy ids or when the URL is missing", () => {
+      expect(
+        unattachedKeyUrl(
+          {
+            lokaliseWorkflow: {
+              settings: { unattached_keys: { ids: [101] } },
+            },
+          },
+          101,
+        ),
+      ).toBeNull();
+      expect(
+        unattachedKeyUrl(
+          {
+            lokaliseWorkflow: {
+              settings: { unattached_keys: { names: ["key_a"] } },
+            },
+          },
+          "key_a",
+        ),
+      ).toBeNull();
     });
   });
 });

package/src/views/_shared/_content_tasks.ejs

@@ -1,6 +1,6 @@
 <% if (tasks.length > 0) { %>
   <table class="data-grid alt">
-    <thead>
+    <thead class="whitespace-nowrap">
       <tr>
         <% if (showAllDetails) { %>
         <th>Resource</th>
@@ -26,7 +26,7 @@
             <td class="w-1/3">
               <% if (resources && resources.length > 0) { %>
                 <% resources.forEach((resource, idx) => { %>
-                  <div class="<%= idx > 0 ? 'mt-2' : '' %>">
+                  <div class="body-3 <%= idx > 0 ? 'mt-2' : '' %>">
 
                     <a href="<%= content_tasks.buildResourceUrl(resource, _context.globalConfig) %>" target="_blank" class="btn-text">
                       <div class="flex gap-1 items-center">
@@ -46,13 +46,13 @@
                   </div>
                 <% }) %>
               <% } else { %>
-                <span class="text-raketa-foreground/50">—</span>
+                <span class="body-3 text-raketa-foreground/50">—</span>
               <% } %>
             </td>
 
             <td>
               <% if (resources[0]?.resourceType) { %>
-                <%= Inflector.humanize(Inflector.capitalize(resources[0].resourceType)) %>
+                <span class="body-3"><%= Inflector.humanize(Inflector.capitalize(resources[0].resourceType)) %></span>
               <% } else { %>
                 <span class="text-raketa-foreground/50">—</span>
               <% } %>
@@ -60,18 +60,40 @@
           <% } %>
 
           <td>
-            <span class="body-2">
+            <span class="body-3">
               <%= content_tasks.workflowsMap(task.workflow) %>
             </span>
 
             <% if (isMarked) { %>
-              <div class="body-3 text-raketa-foreground/50">
-                <%= content_tasks.unattachedKeyIds(task) %>
-              </div>
+              <details class="body-3 text-raketa-foreground/50">
+                <summary class="cursor-pointer whitespace-nowrap" onclick="event.preventDefault(); this.parentElement.nextElementSibling.showModal()">Unattached keys</summary>
+              </details>
+
+              <dialog class="w-full max-w-2xl rounded-lg bg-raketa-background p-0 text-raketa-foreground shadow-xl backdrop:bg-black/50">
+                <div class="flex items-center justify-between border-b p-4 dark:border-neutral-700">
+                  <h2 class="heading-3">Unattached keys</h2>
+                  <form method="dialog">
+                    <button type="submit" class="btn-text" aria-label="Close">Close</button>
+                  </form>
+                </div>
+
+                <ul class="max-h-[70vh] divide-y overflow-y-auto dark:divide-neutral-700">
+                  <% content_tasks.unattachedKeys(task).forEach((key) => { %>
+                    <% const keyUrl = content_tasks.unattachedKeyUrl(task, key) %>
+                    <li class="p-4 break-all">
+                      <% if (keyUrl) { %>
+                        <a href="<%= keyUrl %>" target="_blank" title="<%= key %>" class="btn-text"><%= key %></a>
+                      <% } else { %>
+                        <span title="<%= key %>"><%= key %></span>
+                      <% } %>
+                    </li>
+                  <% }) %>
+                </ul>
+              </dialog>
             <% } %>
           </td>
 
-          <td>
+          <td class="whitespace-nowrap">
             <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">
@@ -92,7 +114,7 @@
           </td>
 
           <% if (showAllDetails) { %>
-            <td>
+            <td class="whitespace-nowrap">
               <div class="body-3 text-raketa-foreground/50">
                 <% const dueDate = task.lokaliseWorkflow?.settings?.due_date %>
 
@@ -109,7 +131,7 @@
               </div>
             </td>
 
-            <td>
+            <td class="whitespace-nowrap">
               <% if (task.completedAt || task.failedAt) { %>
                 <div class="body-3 text-raketa-foreground/50">
                   <div class="flex items-center gap-1">
@@ -127,7 +149,7 @@
             </td>
           <% } %>
 
-          <td>
+          <td class="whitespace-nowrap">
             <% if (task.completedAt) { %>
               <span class="bg-emerald-100 chip text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
                 Completed