@raketa-cloud/admin 1.10.6 → 1.10.8

package/dist/application.css

@@ -1160,92 +1160,78 @@
       padding-right: 0px;
     }
   }
-  @media (prefers-color-scheme: dark) {
-    :where(.dark\:divide-neutral-700 > :not(:last-child)) {
-      border-color: var(--color-neutral-700);
-    }
-    .dark\:border-neutral-500 {
-      border-color: var(--color-neutral-500);
-    }
-    .dark\:border-neutral-700 {
-      border-color: var(--color-neutral-700);
-    }
-    .dark\:bg-blue-900\/50 {
-      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 50%, transparent);
-    }
+  :where(.dark\:divide-neutral-700:where(.dark, .dark *) > :not(:last-child)) {
+    border-color: var(--color-neutral-700);
+  }
+  .dark\:border-neutral-500:where(.dark, .dark *) {
+    border-color: var(--color-neutral-500);
+  }
+  .dark\:border-neutral-700:where(.dark, .dark *) {
+    border-color: var(--color-neutral-700);
+  }
+  .dark\:bg-blue-900\/50:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      .dark\:bg-blue-900\/50 {
-        background-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);
-      }
-    }
-    .dark\:bg-emerald-900\/50 {
-      background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 50%, transparent);
+      background-color: color-mix(in oklab, var(--color-blue-900) 50%, transparent);
     }
+  }
+  .dark\:bg-emerald-900\/50:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      .dark\:bg-emerald-900\/50 {
-        background-color: color-mix(in oklab, var(--color-emerald-900) 50%, transparent);
-      }
-    }
-    .dark\:bg-neutral-800 {
-      background-color: var(--color-neutral-800);
-    }
-    .dark\:bg-orange-900\/50 {
-      background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 50%, transparent);
+      background-color: color-mix(in oklab, var(--color-emerald-900) 50%, transparent);
     }
+  }
+  .dark\:bg-neutral-800:where(.dark, .dark *) {
+    background-color: var(--color-neutral-800);
+  }
+  .dark\:bg-orange-900\/50:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      .dark\:bg-orange-900\/50 {
-        background-color: color-mix(in oklab, var(--color-orange-900) 50%, transparent);
-      }
-    }
-    .dark\:bg-orange-950\/40 {
-      background-color: color-mix(in srgb, oklch(26.6% 0.079 36.259) 40%, transparent);
+      background-color: color-mix(in oklab, var(--color-orange-900) 50%, transparent);
     }
+  }
+  .dark\:bg-orange-950\/40:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(26.6% 0.079 36.259) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      .dark\:bg-orange-950\/40 {
-        background-color: color-mix(in oklab, var(--color-orange-950) 40%, transparent);
-      }
-    }
-    .dark\:bg-raketa-primary\/15 {
-      background-color: color-mix(in srgb, rgb(var(--primary)) 15%, transparent);
+      background-color: color-mix(in oklab, var(--color-orange-950) 40%, transparent);
     }
+  }
+  .dark\:bg-raketa-primary\/15:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, rgb(var(--primary)) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      .dark\:bg-raketa-primary\/15 {
-        background-color: color-mix(in oklab, var(--color-raketa-primary) 15%, transparent);
-      }
-    }
-    .dark\:bg-red-900\/50 {
-      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
+      background-color: color-mix(in oklab, var(--color-raketa-primary) 15%, transparent);
     }
+  }
+  .dark\:bg-red-900\/50:where(.dark, .dark *) {
+    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      .dark\:bg-red-900\/50 {
-        background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
-      }
-    }
-    .dark\:text-blue-300 {
-      color: var(--color-blue-300);
-    }
-    .dark\:text-emerald-300 {
-      color: var(--color-emerald-300);
-    }
-    .dark\:text-orange-300 {
-      color: var(--color-orange-300);
+      background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
     }
-    .dark\:text-red-300 {
-      color: var(--color-red-300);
-    }
-    .dark\:invert {
-      --tw-invert: invert(100%);
-      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-    }
-    @media (hover: hover) {
-      .dark\:hover\:bg-neutral-700:hover {
-        background-color: var(--color-neutral-700);
-      }
+  }
+  .dark\:text-blue-300:where(.dark, .dark *) {
+    color: var(--color-blue-300);
+  }
+  .dark\:text-emerald-300:where(.dark, .dark *) {
+    color: var(--color-emerald-300);
+  }
+  .dark\:text-orange-300:where(.dark, .dark *) {
+    color: var(--color-orange-300);
+  }
+  .dark\:text-red-300:where(.dark, .dark *) {
+    color: var(--color-red-300);
+  }
+  .dark\:invert:where(.dark, .dark *) {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  @media (hover: hover) {
+    .dark\:hover\:bg-neutral-700:where(.dark, .dark *):hover {
+      background-color: var(--color-neutral-700);
     }
-    @media (width >= 64rem) {
-      :where(.dark\:lg\:divide-neutral-700 > :not(:last-child)) {
-        border-color: var(--color-neutral-700);
-      }
+  }
+  @media (width >= 64rem) {
+    :where(.dark\:lg\:divide-neutral-700:where(.dark, .dark *) > :not(:last-child)) {
+      border-color: var(--color-neutral-700);
     }
   }
 }
@@ -1706,7 +1692,7 @@ body {
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-leading: 1.5;
     line-height: 1.5;
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: color-mix(in srgb, rgb(var(--primary)) 20%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-raketa-primary) 20%, transparent);
@@ -1839,7 +1825,7 @@ body {
         color: var(--color-raketa-foreground);
       }
     }
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-red-700);
     }
   }
@@ -1917,18 +1903,18 @@ body {
       padding-block: calc(var(--spacing) * 2);
       --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      @media (prefers-color-scheme: dark) {
+      &:where(.dark, .dark *) {
         border-color: var(--color-neutral-700);
       }
-      @media (prefers-color-scheme: dark) {
+      &:where(.dark, .dark *) {
         background-color: var(--color-neutral-800);
       }
-      @media (prefers-color-scheme: dark) {
+      &:where(.dark, .dark *) {
         &:focus {
           border-color: var(--color-raketa-primary);
         }
       }
-      @media (prefers-color-scheme: dark) {
+      &:where(.dark, .dark *) {
         &:focus {
           --tw-ring-color: var(--color-raketa-primary);
         }
@@ -1958,7 +1944,7 @@ body {
       padding-block: var(--spacing);
       --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      @media (prefers-color-scheme: dark) {
+      &:where(.dark, .dark *) {
         border-color: var(--color-neutral-700);
       }
     }
@@ -2071,7 +2057,7 @@ body {
       transition-duration: 100ms;
       --tw-ease: var(--ease-in-out);
       transition-timing-function: var(--ease-in-out);
-      @media (prefers-color-scheme: dark) {
+      &:where(.dark, .dark *) {
         border-color: var(--color-neutral-700);
       }
     }
@@ -2083,7 +2069,7 @@ body {
         border-bottom-color: color-mix(in oklab, var(--color-black) 25%, transparent);
       }
       color: var(--color-raketa-foreground);
-      @media (prefers-color-scheme: dark) {
+      &:where(.dark, .dark *) {
         border-bottom-color: color-mix(in srgb, #fff 40%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
           border-bottom-color: color-mix(in oklab, var(--color-white) 40%, transparent);
@@ -2096,10 +2082,10 @@ body {
           border-color: var(--color-neutral-300);
           background-color: var(--color-neutral-50);
           color: var(--color-raketa-foreground);
-          @media (prefers-color-scheme: dark) {
+          &:where(.dark, .dark *) {
             border-color: var(--color-neutral-600);
           }
-          @media (prefers-color-scheme: dark) {
+          &:where(.dark, .dark *) {
             background-color: var(--color-neutral-800);
           }
         }
@@ -2203,10 +2189,10 @@ body {
     border-left-width: 1px;
     background-color: var(--color-slate-50);
     padding: calc(var(--spacing) * 4);
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       border-color: var(--color-neutral-700);
     }
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: color-mix(in srgb, oklch(26.9% 0 none) 70%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-neutral-800) 70%, transparent);
@@ -2229,7 +2215,7 @@ body {
     height: calc(var(--spacing) * 6);
     width: 1px;
     background-color: var(--color-mono-50);
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       background-color: var(--color-neutral-700);
     }
   }

package/package.json

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

package/src/handlers/resources/PartialTranslationsHandler.js

@@ -22,6 +22,39 @@ const targetTranslationLocales = (resource, sourceLocale) =>
     )
     .map(([locale]) => locale);
 
+const localesAtOpenRevisionLimit = (resource, sourceLocale, maxOpenRevisions) =>
+  Object.entries(resource.translations || {})
+    .filter(
+      ([locale, translation]) =>
+        locale !== sourceLocale &&
+        translation?.id &&
+        translation.revisionsCount >= maxOpenRevisions,
+    )
+    .map(([locale]) => locale);
+
+const withTranslationRevisionCounts = async (ctx, resource, resourceType) => {
+  const revisionCounts = await Promise.all(
+    Object.entries(resource.translations || {}).map(
+      async ([locale, translation]) => {
+        if (locale === ctx.locale || !translation?.id) {
+          return [locale, translation];
+        }
+
+        const target = await ctx.client.resources.find(
+          translation.id,
+          locale,
+          resourceType,
+        );
+        return [
+          locale,
+          { ...translation, revisionsCount: target.revisionsCount },
+        ];
+      },
+    ),
+  );
+
+  return { ...resource, translations: Object.fromEntries(revisionCounts) };
+};
 const selectedWidgetIds = (resource, query = {}) => {
   const requested = Array.isArray(query.widget_ids)
     ? query.widget_ids
@@ -73,6 +106,7 @@ const validatePartialTranslation = ({
   workflow,
   unknownWidgetIds,
   unknownLocales,
+  localesAtRevisionLimit,
 }) => {
   const errors = [];
 
@@ -91,6 +125,12 @@ const validatePartialTranslation = ({
       message: `not found in the resource translations: ${unknownLocales.join(", ")}`,
     });
   }
+  if (localesAtRevisionLimit.length > 0) {
+    errors.push({
+      key: "locales",
+      message: `open revision limit reached for: ${localesAtRevisionLimit.join(", ")}`,
+    });
+  }
   if (!workflow.type) {
     errors.push({ key: "workflow", message: "can't be blank" });
   }
@@ -131,14 +171,19 @@ const create_form = async (ctx) => {
     throw new Error(`Cannot find ${resourceType} with id ${parent_id}`);
   }
 
-  const widgetIds = selectedWidgetIds(resource, ctx.query);
+  const resourceWithTranslationRevisionCounts =
+    await withTranslationRevisionCounts(ctx, resource, resourceType);
+  const widgetIds = selectedWidgetIds(
+    resourceWithTranslationRevisionCounts,
+    ctx.query,
+  );
   const { validWidgetIds, unknownWidgetIds } = partitionWidgetIds(
-    resource,
+    resourceWithTranslationRevisionCounts,
     widgetIds,
   );
 
   const previewUrl = ctx.client.resources.previewUrl(
-    { ...resource, resourceType },
+    { ...resourceWithTranslationRevisionCounts, resourceType },
     ctx.locale,
   );
   const validationErrors = [];
@@ -170,7 +215,7 @@ const create_form = async (ctx) => {
   if (validationErrors.length > 0) {
     return {
       assigns: formAssigns(
-        resource,
+        resourceWithTranslationRevisionCounts,
         ctx.query,
         previewUrl,
         { widgetIds: validWidgetIds },
@@ -182,7 +227,13 @@ const create_form = async (ctx) => {
     };
   }
 
-  return { assigns: formAssigns(resource, ctx.query, previewUrl) };
+  return {
+    assigns: formAssigns(
+      resourceWithTranslationRevisionCounts,
+      ctx.query,
+      previewUrl,
+    ),
+  };
 };
 
 const create = async (ctx) => {
@@ -198,8 +249,10 @@ const create = async (ctx) => {
     throw new Error(`Cannot find ${resourceType} with id ${parent_id}`);
   }
 
+  const resourceWithTranslationRevisionCounts =
+    await withTranslationRevisionCounts(ctx, resource, resourceType);
   const previewUrl = ctx.client.resources.previewUrl(
-    { ...resource, resourceType },
+    { ...resourceWithTranslationRevisionCounts, resourceType },
     ctx.locale,
   );
   const values = ctx.resourceParams?.partial_translation || {};
@@ -210,30 +263,42 @@ const create = async (ctx) => {
       : toArray(values.widget_ids);
   const workflow = values.workflow || {};
   const { validWidgetIds, unknownWidgetIds } = partitionWidgetIds(
-    resource,
+    resourceWithTranslationRevisionCounts,
     widgetIds,
   );
-  const validLocales = targetTranslationLocales(resource, ctx.locale);
+  const validLocales = targetTranslationLocales(
+    resourceWithTranslationRevisionCounts,
+    ctx.locale,
+  );
   const unknownLocales = locales.filter(
     (locale) => !validLocales.includes(locale),
   );
-  const selectedValidLocales = locales.filter((locale) =>
-    validLocales.includes(locale),
+  const localesAtRevisionLimit = localesAtOpenRevisionLimit(
+    resourceWithTranslationRevisionCounts,
+    ctx.locale,
+    ctx.maxOpenRevisions,
+  );
+  const selectedValidLocales = locales.filter(
+    (locale) =>
+      validLocales.includes(locale) && !localesAtRevisionLimit.includes(locale),
   );
 
   const validationErrors = validatePartialTranslation({
-    resource,
+    resource: resourceWithTranslationRevisionCounts,
     locales,
     widgetIds,
     workflow,
     unknownWidgetIds,
     unknownLocales,
+    localesAtRevisionLimit: locales.filter((locale) =>
+      localesAtRevisionLimit.includes(locale),
+    ),
   });
 
   if (validationErrors.length > 0) {
     return {
       assigns: formAssigns(
-        resource,
+        resourceWithTranslationRevisionCounts,
         ctx.query,
         previewUrl,
         {
@@ -250,21 +315,25 @@ const create = async (ctx) => {
     };
   }
 
-  const widgets = (resource.widgets || []).filter((widget) =>
-    validWidgetIds.includes(widget.widgetId),
+  const widgets = (resourceWithTranslationRevisionCounts.widgets || []).filter(
+    (widget) => validWidgetIds.includes(widget.widgetId),
   );
   const { errors } = await ctx.client.resources.multiPartialTranslate(
     parent_id,
     locales,
     widgets,
     workflow,
-    { ...resource, locale: ctx.locale, resourceType },
+    {
+      ...resourceWithTranslationRevisionCounts,
+      locale: ctx.locale,
+      resourceType,
+    },
   );
 
   if (errors) {
     return {
       assigns: formAssigns(
-        resource,
+        resourceWithTranslationRevisionCounts,
         ctx.query,
         previewUrl,
         { ...values, locales, widgetIds: validWidgetIds, workflow },

package/src/styles/application.css

@@ -1,4 +1,8 @@
 @import "tailwindcss";
+
+/* Keep dark utilities opt-in through a `.dark` ancestor, rather than the OS theme. */
+@custom-variant dark (&:where(.dark, .dark *));
+
 @plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/typography";
 @source "../**/*.{html,js,ejs}";

package/src/tests/handlers/resources/PartialTranslationsHandler.test.js

@@ -24,6 +24,7 @@ const buildCtx = (params = {}) => ({
   params: { parent_id: "42" },
   query: {},
   locale: "en",
+  maxOpenRevisions: 1,
   resourceConfig: { resourceType: "page", resourceTypePlural: "pages" },
   resourceParams: params,
 });
@@ -194,6 +195,30 @@ describe("PartialTranslationsHandler", () => {
     });
   });
 
+  test("does not submit to locales at the open revision limit", async () => {
+    const ctx = buildCtx({
+      partial_translation: {
+        locales: ["fr"],
+        widget_ids: ["hero-1"],
+        workflow: { type: "LOKALISE_TT_AI" },
+      },
+    });
+    ctx.client.resources.find
+      .mockResolvedValueOnce({
+        ...resource,
+        translations: { fr: { id: "43" } },
+      })
+      .mockResolvedValueOnce({ id: "43", revisionsCount: 1 });
+
+    const result = await PartialTranslationsHandler.create(ctx);
+
+    expect(ctx.client.resources.multiPartialTranslate).not.toHaveBeenCalled();
+    expect(result.assigns.partialTranslation.locales).toEqual([]);
+    expect(result.assigns.errors.partialTranslation).toEqual({
+      locales: "open revision limit reached for: fr",
+    });
+  });
+
   test("does not submit when a translation has an active content task", async () => {
     const ctx = buildCtx({
       partial_translation: {

package/src/tests/views/partial_translations.test.js

@@ -10,6 +10,7 @@ function renderPartialTranslations(translations) {
   return ejs.render(template, {
     _context: {
       locale: "en",
+      maxOpenRevisions: 1,
       locales: { en: { name: "English" }, fr: { name: "French" } },
       resourceConfig: { resourceTypePlural: "pages" },
     },
@@ -47,4 +48,14 @@ describe("partial translations form", () => {
     expect(rendered).not.toContain('value="de"');
     expect(rendered).not.toContain("This resource has no translations.");
   });
+
+  test("disables translations at the open revision limit", () => {
+    const rendered = renderPartialTranslations({
+      fr: { id: "43", revisionsCount: 1 },
+    });
+
+    expect(rendered).toContain('value="fr"');
+    expect(rendered).toContain('value="fr"  disabled');
+    expect(rendered).toContain("open revision limit reached");
+  });
 });

package/src/views/resource_revisions/_nav.ejs

@@ -9,7 +9,7 @@
 
 <div class="flex gap-4 w-full pb-4">
   <div class="flex items-center justify-between mb-4">
-    <div class="flex items-center border-b-2">
+    <div class="flex items-center border-b-2 border-neutral-200 dark:border-neutral-700">
       <div class=" <%= active === 'general' ? activeClass : inactiveClass %>">
         <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceType}_revisions/${resource.id}/general/edit` %>" class="text-raketa-primary font-semibold">
           General

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

@@ -11,10 +11,11 @@
       <div class="mb-4">
         <h6>Current translations</h6>
         <div class="checkbox-group !max-h-fit">
-          <% targetTranslations.forEach(([locale]) => { %>
-          <label>
-            <input type="checkbox" name="partial_translation[locales][]" value="<%= locale %>" <%= partialTranslation.locales.includes(locale) ? 'checked' : '' %>>
+          <% targetTranslations.forEach(([locale, translation]) => { const atRevisionLimit = translation.revisionsCount >= _context.maxOpenRevisions; %>
+          <label class="<%= atRevisionLimit ? 'opacity-50' : '' %>">
+            <input type="checkbox" name="partial_translation[locales][]" value="<%= locale %>" <%= partialTranslation.locales.includes(locale) ? 'checked' : '' %> <%= atRevisionLimit ? 'disabled' : '' %>>
             <%= _context.locales[locale]?.name || locale %>
+            <% if (atRevisionLimit) { %><span class="text-sm text-raketa-foreground/50">(open revision limit reached)</span><% } %>
           </label>
           <% }) %>
         </div>

package/src/views/settings/_nav.ejs

@@ -5,7 +5,7 @@
 
 <div class="flex w-full pb-4">
   <div class="flex items-center justify-between mb-4">
-    <div class="flex items-center border-b-2">
+    <div class="flex items-center border-b-2 border-neutral-200 dark:border-neutral-700">
       <div class="<%= active === 'meta' ? activeClass : inactiveClass %>">
         <a href="<%= `/${_context.locale}/settings/meta/edit` %>" class="text-raketa-primary font-semibold">
           Meta and OpenGraph