@raketa-cloud/admin 1.10.5 → 1.10.6

package/dist/application.css

@@ -326,6 +326,9 @@
   .z-50 {
     z-index: 50;
   }
+  .m-auto {
+    margin: auto;
+  }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
@@ -514,6 +517,9 @@
   .flex-none {
     flex: none;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -569,6 +575,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
   .gap-1 {
     gap: var(--spacing);
   }
@@ -587,6 +596,11 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
+  }
   :where(.divide-y > :not(:last-child)) {
     --tw-divide-y-reverse: 0;
     border-bottom-style: var(--tw-border-style);
@@ -2492,6 +2506,11 @@ body {
   syntax: "*";
   inherits: false;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;
@@ -2724,6 +2743,7 @@ body {
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;

package/package.json

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

package/src/cloud/Resources.js

@@ -7,6 +7,7 @@ import {
   CreateResourceDocument,
   DeleteResourceDocument,
   MiniResourcesDocument,
+  MultiPartialTranslateResourceDocument,
   MultiTranslateResourceDocument,
   ResourceByIdDocument,
   ResourceChangePreviewDocument,
@@ -38,6 +39,17 @@ export default class Resources extends RaketaClient {
     };
   }
 
+  previewUrl(resource, locale) {
+    return buildMagicPreviewAddress(
+      {
+        slug: resource.slug,
+        locale,
+        resourceType: resource.resourceType,
+      },
+      this.getConfig(),
+    );
+  }
+
   visibilityOptions() {
     return [
       ["private", "Private"],
@@ -213,6 +225,33 @@ export default class Resources extends RaketaClient {
     return { resources, errors, localeErrors };
   }
 
+  async multiPartialTranslate(
+    sourceResourceId,
+    locales,
+    widgets,
+    workflow,
+    resource,
+  ) {
+    const input = {
+      sourceResourceId,
+      translations: locales.map((locale) => ({
+        locale,
+        widgets: JSON.stringify(widgets),
+      })),
+    };
+    this.appendWorkflow(input, workflow, {
+      slug: resource.slug,
+      locale: resource.locale,
+      resourceType: resource.resourceType,
+    });
+
+    const {
+      multiPartialTranslateResource: { contentTask, errors },
+    } = await this.query(MultiPartialTranslateResourceDocument, { input });
+
+    return { contentTask, errors };
+  }
+
   async translateBatch(
     sourceResourceId,
     locales,

package/src/cloud/documents/contentTasksDocuments.js

@@ -28,6 +28,7 @@ export const ContentTasksDocument = gql`
         lokaliseWorkflow {
           id
           status
+          partial
           settings
           insertedAt
           updatedAt

package/src/cloud/documents/resourcesDocuments.js

@@ -199,6 +199,17 @@ const MultiTranslateResourceDocument = gql`
   }
 `;
 
+const MultiPartialTranslateResourceDocument = gql`
+  mutation MultiPartialTranslateResource(
+    $input: MultiPartialTranslateResourceInput!
+  ) {
+    multiPartialTranslateResource(input: $input) {
+      contentTask ${contentTaskFragment()}
+      errors ${errorsFragment()}
+    }
+  }
+`;
+
 const ResourceRevisionsDocument = gql`
   query ResourceRevisions($input: IdTypeInput!) {
     resourceRevisions(input: $input) {
@@ -351,6 +362,7 @@ export {
   ResourceAndSiteDocument,
   TranslateResourceDocument,
   MultiTranslateResourceDocument,
+  MultiPartialTranslateResourceDocument,
   ResourceRevisionDocument,
   ResourceRevisionsDocument,
   StartResourceRevisionDocument,

package/src/handlers/resources/PartialTranslationsHandler.js

@@ -0,0 +1,279 @@
+const toArray = (value) =>
+  Array.isArray(value) ? value : [value].filter(Boolean);
+
+const isActiveContentTask = (task) =>
+  task && !task.completedAt && !task.failedAt;
+
+const hasActiveContentTask = (resource) =>
+  isActiveContentTask(resource.activeContentTask) ||
+  Object.values(resource.translations || {}).some((translation) =>
+    isActiveContentTask(translation.active_content_task),
+  );
+
+const hasTranslations = (resource) =>
+  Object.values(resource.translations || {}).some(
+    (translation) => translation?.id,
+  );
+
+const targetTranslationLocales = (resource, sourceLocale) =>
+  Object.entries(resource.translations || {})
+    .filter(
+      ([locale, translation]) => locale !== sourceLocale && translation?.id,
+    )
+    .map(([locale]) => locale);
+
+const selectedWidgetIds = (resource, query = {}) => {
+  const requested = Array.isArray(query.widget_ids)
+    ? query.widget_ids
+    : String(query.widget_ids || "")
+        .split(",")
+        .filter(Boolean);
+
+  return [...new Set(requested)];
+};
+
+const partitionWidgetIds = (resource, widgetIds) => {
+  const resourceWidgetIds = new Set(
+    (resource.widgets || []).map((widget) => widget.widgetId).filter(Boolean),
+  );
+
+  return {
+    validWidgetIds: widgetIds.filter((widgetId) =>
+      resourceWidgetIds.has(widgetId),
+    ),
+    unknownWidgetIds: widgetIds.filter(
+      (widgetId) => !resourceWidgetIds.has(widgetId),
+    ),
+  };
+};
+
+const formAssigns = (resource, query, previewUrl, values = {}, errors = {}) => {
+  const submittedWidgetIds = values.widgetIds ?? values.widget_ids;
+
+  return {
+    resource,
+    previewUrl,
+    partialTranslation: {
+      locales: [],
+      workflow: {},
+      ...values,
+      widgetIds:
+        submittedWidgetIds === undefined
+          ? selectedWidgetIds(resource, query)
+          : toArray(submittedWidgetIds),
+    },
+    errors,
+  };
+};
+
+const validatePartialTranslation = ({
+  resource,
+  locales,
+  widgetIds,
+  workflow,
+  unknownWidgetIds,
+  unknownLocales,
+}) => {
+  const errors = [];
+
+  if (locales.length === 0) {
+    errors.push({
+      key: "locales",
+      message: "select at least one existing translation",
+    });
+  }
+  if (widgetIds.length === 0) {
+    errors.push({ key: "widgetIds", message: "can't be blank" });
+  }
+  if (unknownLocales.length > 0) {
+    errors.push({
+      key: "locales",
+      message: `not found in the resource translations: ${unknownLocales.join(", ")}`,
+    });
+  }
+  if (!workflow.type) {
+    errors.push({ key: "workflow", message: "can't be blank" });
+  }
+  if (unknownWidgetIds.length > 0) {
+    errors.push({
+      key: "widgetIds",
+      message: `not found in the source resource: ${unknownWidgetIds.join(", ")}`,
+    });
+  }
+  if (!hasTranslations(resource)) {
+    errors.push({
+      key: "generalError",
+      message:
+        "cannot start a partial translation without existing translations",
+    });
+  }
+  if (hasActiveContentTask(resource)) {
+    errors.push({
+      key: "generalError",
+      message:
+        "cannot start a partial translation while a translation task is in progress",
+    });
+  }
+
+  return errors;
+};
+
+const create_form = async (ctx) => {
+  const { parent_id } = ctx.params;
+  const { resourceType } = ctx.resourceConfig;
+  const resource = await ctx.client.resources.find(
+    parent_id,
+    ctx.locale,
+    resourceType,
+  );
+
+  if (!resource) {
+    throw new Error(`Cannot find ${resourceType} with id ${parent_id}`);
+  }
+
+  const widgetIds = selectedWidgetIds(resource, ctx.query);
+  const { validWidgetIds, unknownWidgetIds } = partitionWidgetIds(
+    resource,
+    widgetIds,
+  );
+
+  const previewUrl = ctx.client.resources.previewUrl(
+    { ...resource, resourceType },
+    ctx.locale,
+  );
+  const validationErrors = [];
+
+  if (widgetIds.length === 0) {
+    validationErrors.push({ key: "widgetIds", message: "can't be blank" });
+  }
+  if (unknownWidgetIds.length > 0) {
+    validationErrors.push({
+      key: "widgetIds",
+      message: `not found in the source resource: ${unknownWidgetIds.join(", ")}`,
+    });
+  }
+  if (!hasTranslations(resource)) {
+    validationErrors.push({
+      key: "generalError",
+      message:
+        "cannot start a partial translation without existing translations",
+    });
+  }
+  if (hasActiveContentTask(resource)) {
+    validationErrors.push({
+      key: "generalError",
+      message:
+        "cannot start a partial translation while a translation task is in progress",
+    });
+  }
+
+  if (validationErrors.length > 0) {
+    return {
+      assigns: formAssigns(
+        resource,
+        ctx.query,
+        previewUrl,
+        { widgetIds: validWidgetIds },
+        {
+          partialTranslation:
+            ctx.client.resources.formatErrors(validationErrors),
+        },
+      ),
+    };
+  }
+
+  return { assigns: formAssigns(resource, ctx.query, previewUrl) };
+};
+
+const create = async (ctx) => {
+  const { parent_id } = ctx.params;
+  const { resourceType, resourceTypePlural } = ctx.resourceConfig;
+  const resource = await ctx.client.resources.find(
+    parent_id,
+    ctx.locale,
+    resourceType,
+  );
+
+  if (!resource) {
+    throw new Error(`Cannot find ${resourceType} with id ${parent_id}`);
+  }
+
+  const previewUrl = ctx.client.resources.previewUrl(
+    { ...resource, resourceType },
+    ctx.locale,
+  );
+  const values = ctx.resourceParams?.partial_translation || {};
+  const locales = toArray(values.locales);
+  const widgetIds =
+    values.widget_ids === undefined
+      ? selectedWidgetIds({ widgets: [] }, ctx.query)
+      : toArray(values.widget_ids);
+  const workflow = values.workflow || {};
+  const { validWidgetIds, unknownWidgetIds } = partitionWidgetIds(
+    resource,
+    widgetIds,
+  );
+  const validLocales = targetTranslationLocales(resource, ctx.locale);
+  const unknownLocales = locales.filter(
+    (locale) => !validLocales.includes(locale),
+  );
+  const selectedValidLocales = locales.filter((locale) =>
+    validLocales.includes(locale),
+  );
+
+  const validationErrors = validatePartialTranslation({
+    resource,
+    locales,
+    widgetIds,
+    workflow,
+    unknownWidgetIds,
+    unknownLocales,
+  });
+
+  if (validationErrors.length > 0) {
+    return {
+      assigns: formAssigns(
+        resource,
+        ctx.query,
+        previewUrl,
+        {
+          ...values,
+          locales: selectedValidLocales,
+          widgetIds: validWidgetIds,
+          workflow,
+        },
+        {
+          partialTranslation:
+            ctx.client.resources.formatErrors(validationErrors),
+        },
+      ),
+    };
+  }
+
+  const widgets = (resource.widgets || []).filter((widget) =>
+    validWidgetIds.includes(widget.widgetId),
+  );
+  const { errors } = await ctx.client.resources.multiPartialTranslate(
+    parent_id,
+    locales,
+    widgets,
+    workflow,
+    { ...resource, locale: ctx.locale, resourceType },
+  );
+
+  if (errors) {
+    return {
+      assigns: formAssigns(
+        resource,
+        ctx.query,
+        previewUrl,
+        { ...values, locales, widgetIds: validWidgetIds, workflow },
+        { partialTranslation: ctx.client.resources.formatErrors(errors) },
+      ),
+    };
+  }
+
+  return { redirect: `/${ctx.locale}/${resourceTypePlural}/${parent_id}` };
+};
+
+export default { create_form, create };

package/src/routeResourceModule.js

@@ -15,6 +15,7 @@ import ClonesHandler from "./handlers/resources/ClonesHandler";
 import DeletesHandler from "./handlers/resources/DeletesHandler";
 import ExportsHandler from "./handlers/resources/ExportsHandler";
 import HistoryHandler from "./handlers/resources/HistoryHandler";
+import PartialTranslationsHandler from "./handlers/resources/PartialTranslationsHandler";
 import ReportsAPIHandler from "./handlers/resources/ReportsAPIHandler";
 import ResourcesAPIHandler from "./handlers/resources/ResourcesAPIHandler";
 import ResourcesHandler from "./handlers/resources/ResourcesHandler";
@@ -93,6 +94,16 @@ function routeResourceModule(
     { ...resourceConfig, viewsFallback: "resources/translations" },
   );
 
+  if (adapter.globalConfig?.features?.contentTasks) {
+    routeNestedCollection(
+      adapter,
+      baseResource,
+      "partial-translations",
+      PartialTranslationsHandler,
+      { ...resourceConfig, viewsFallback: "resources/partial-translations" },
+    );
+  }
+
   routeNestedCollection(adapter, baseResource, "history", HistoryHandler, {
     ...resourceConfig,
     viewsFallback: "resources/history",

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

@@ -0,0 +1,279 @@
+import PartialTranslationsHandler from "../../../handlers/resources/PartialTranslationsHandler";
+
+const resource = {
+  id: "42",
+  slug: "hello",
+  title: "Hello",
+  translations: { fr: { id: "43" } },
+  widgets: [
+    { widgetId: "hero-1", component: "Hero", settings: { title: "Hero" } },
+  ],
+};
+
+const buildCtx = (params = {}) => ({
+  client: {
+    resources: {
+      find: jest.fn().mockResolvedValue(resource),
+      previewUrl: jest.fn().mockReturnValue("https://preview.example/hello"),
+      formatErrors: jest.fn((errors) =>
+        Object.fromEntries(errors.map((error) => [error.key, error.message])),
+      ),
+      multiPartialTranslate: jest.fn().mockResolvedValue({ errors: null }),
+    },
+  },
+  params: { parent_id: "42" },
+  query: {},
+  locale: "en",
+  resourceConfig: { resourceType: "page", resourceTypePlural: "pages" },
+  resourceParams: params,
+});
+
+describe("PartialTranslationsHandler", () => {
+  test("builds the form from the selected source widgets", async () => {
+    const ctx = buildCtx();
+    ctx.query = { widget_ids: "hero-1" };
+
+    const result = await PartialTranslationsHandler.create_form(ctx);
+
+    expect(result.assigns).toMatchObject({
+      resource,
+      previewUrl: "https://preview.example/hello",
+      partialTranslation: { widgetIds: ["hero-1"] },
+    });
+  });
+
+  test.each([{}, { widget_ids: "" }])(
+    "returns a validation error when selected widgets are missing",
+    async (query) => {
+      const ctx = buildCtx();
+      ctx.query = query;
+
+      const result = await PartialTranslationsHandler.create_form(ctx);
+
+      expect(result.assigns).toMatchObject({
+        partialTranslation: { widgetIds: [] },
+        errors: { partialTranslation: { widgetIds: "can't be blank" } },
+      });
+    },
+  );
+
+  test("returns an error and preserves valid widgets when a requested widget does not exist", async () => {
+    const ctx = buildCtx();
+    ctx.query = { widget_ids: "hero-1,missing-widget" };
+
+    const result = await PartialTranslationsHandler.create_form(ctx);
+
+    expect(result.assigns).toMatchObject({
+      partialTranslation: { widgetIds: ["hero-1"] },
+      errors: {
+        partialTranslation: {
+          widgetIds: "not found in the source resource: missing-widget",
+        },
+      },
+    });
+  });
+
+  test("returns an error when the resource has no translations", async () => {
+    const ctx = buildCtx();
+    ctx.query = { widget_ids: "hero-1" };
+    ctx.client.resources.find.mockResolvedValue({
+      ...resource,
+      translations: {},
+    });
+
+    const result = await PartialTranslationsHandler.create_form(ctx);
+
+    expect(result.assigns.errors.partialTranslation).toEqual({
+      generalError:
+        "cannot start a partial translation without existing translations",
+    });
+  });
+
+  test("returns an error when the source has an active content task", async () => {
+    const ctx = buildCtx();
+    ctx.query = { widget_ids: "hero-1" };
+    ctx.client.resources.find.mockResolvedValue({
+      ...resource,
+      activeContentTask: { workflow: "lokalise_tt_ai" },
+    });
+
+    const result = await PartialTranslationsHandler.create_form(ctx);
+
+    expect(result.assigns.errors.partialTranslation).toEqual({
+      generalError:
+        "cannot start a partial translation while a translation task is in progress",
+    });
+  });
+
+  test("starts a partial translation workflow", async () => {
+    const ctx = buildCtx({
+      partial_translation: {
+        locales: ["fr"],
+        widget_ids: ["hero-1"],
+        workflow: { type: "LOKALISE_TT_AI" },
+      },
+    });
+
+    const result = await PartialTranslationsHandler.create(ctx);
+
+    expect(ctx.client.resources.multiPartialTranslate).toHaveBeenCalledWith(
+      "42",
+      ["fr"],
+      [
+        {
+          widgetId: "hero-1",
+          component: "Hero",
+          settings: { title: "Hero" },
+        },
+      ],
+      { type: "LOKALISE_TT_AI" },
+      { ...resource, locale: "en", resourceType: "page" },
+    );
+    expect(result).toEqual({ redirect: "/en/pages/42" });
+  });
+
+  test("does not submit unknown widgets and keeps only valid widgets on the form", async () => {
+    const ctx = buildCtx({
+      partial_translation: {
+        locales: ["fr"],
+        widget_ids: ["hero-1", "missing-widget"],
+        workflow: { type: "LOKALISE_TT_AI" },
+      },
+    });
+
+    const result = await PartialTranslationsHandler.create(ctx);
+
+    expect(ctx.client.resources.multiPartialTranslate).not.toHaveBeenCalled();
+    expect(result.assigns.partialTranslation.widgetIds).toEqual(["hero-1"]);
+    expect(result.assigns.errors.partialTranslation).toEqual({
+      widgetIds: "not found in the source resource: missing-widget",
+    });
+  });
+
+  test.each(["en", "stale-locale"])(
+    "does not submit locales outside the resource translations: %s",
+    async (locale) => {
+      const ctx = buildCtx({
+        partial_translation: {
+          locales: ["fr", locale],
+          widget_ids: ["hero-1"],
+          workflow: { type: "LOKALISE_TT_AI" },
+        },
+      });
+
+      const result = await PartialTranslationsHandler.create(ctx);
+
+      expect(ctx.client.resources.multiPartialTranslate).not.toHaveBeenCalled();
+      expect(result.assigns.partialTranslation.locales).toEqual(["fr"]);
+      expect(result.assigns.errors.partialTranslation).toEqual({
+        locales: `not found in the resource translations: ${locale}`,
+      });
+    },
+  );
+
+  test("does not submit when the resource has no translations", async () => {
+    const ctx = buildCtx({
+      partial_translation: {
+        locales: ["fr"],
+        widget_ids: ["hero-1"],
+        workflow: { type: "LOKALISE_TT_AI" },
+      },
+    });
+    ctx.client.resources.find.mockResolvedValue({
+      ...resource,
+      translations: {},
+    });
+
+    const result = await PartialTranslationsHandler.create(ctx);
+
+    expect(ctx.client.resources.multiPartialTranslate).not.toHaveBeenCalled();
+    expect(result.assigns.errors.partialTranslation).toEqual({
+      locales: "not found in the resource translations: fr",
+      generalError:
+        "cannot start a partial translation without existing translations",
+    });
+  });
+
+  test("does not submit when a translation has an active content task", async () => {
+    const ctx = buildCtx({
+      partial_translation: {
+        locales: ["fr"],
+        widget_ids: ["hero-1"],
+        workflow: { type: "LOKALISE_TT_AI" },
+      },
+    });
+    ctx.client.resources.find.mockResolvedValue({
+      ...resource,
+      translations: {
+        fr: {
+          id: "43",
+          active_content_task: { workflow: "lokalise_tt_ai" },
+        },
+      },
+    });
+
+    const result = await PartialTranslationsHandler.create(ctx);
+
+    expect(ctx.client.resources.multiPartialTranslate).not.toHaveBeenCalled();
+    expect(result.assigns.errors.partialTranslation).toEqual({
+      generalError:
+        "cannot start a partial translation while a translation task is in progress",
+    });
+  });
+
+  test("preserves selected widget IDs when the API returns errors", async () => {
+    const ctx = buildCtx({
+      partial_translation: {
+        locales: ["fr"],
+        widget_ids: ["hero-1"],
+        workflow: { type: "LOKALISE_TT_AI" },
+      },
+    });
+    ctx.client.resources.find.mockResolvedValue({
+      ...resource,
+      widgets: [
+        ...resource.widgets,
+        { widgetId: "body-1", component: "Body", settings: {} },
+      ],
+    });
+    ctx.client.resources.multiPartialTranslate.mockResolvedValue({
+      errors: [{ key: "generalError", message: "translation failed" }],
+    });
+
+    const result = await PartialTranslationsHandler.create(ctx);
+
+    expect(result.assigns.partialTranslation.widgetIds).toEqual(["hero-1"]);
+    expect(result.assigns.errors.partialTranslation).toEqual({
+      generalError: "translation failed",
+    });
+  });
+
+  test("preserves query widget IDs when the submitted body omits them", async () => {
+    const ctx = buildCtx({ partial_translation: {} });
+    ctx.query = { widget_ids: "hero-1" };
+    ctx.client.resources.find.mockResolvedValue({
+      ...resource,
+      widgets: [
+        ...resource.widgets,
+        { widgetId: "body-1", component: "Body", settings: {} },
+      ],
+    });
+
+    const result = await PartialTranslationsHandler.create(ctx);
+
+    expect(result.assigns.partialTranslation.widgetIds).toEqual(["hero-1"]);
+  });
+
+  test("returns validation errors without calling the API", async () => {
+    const ctx = buildCtx({ partial_translation: {} });
+
+    const result = await PartialTranslationsHandler.create(ctx);
+
+    expect(ctx.client.resources.multiPartialTranslate).not.toHaveBeenCalled();
+    expect(result.assigns.errors.partialTranslation).toEqual({
+      locales: "select at least one existing translation",
+      widgetIds: "can't be blank",
+      workflow: "can't be blank",
+    });
+  });
+});

package/src/tests/routeResourceModule.test.js

@@ -210,6 +210,32 @@ describe("routeResourceModule", () => {
     );
   });
 
+  test("registers partial translations only when content tasks are enabled", () => {
+    const enabledAdapter = makeAdapter({ features: { contentTasks: true } });
+    const disabledAdapter = makeAdapter({ features: { contentTasks: false } });
+
+    routeResourceModule(enabledAdapter, "article", "articles");
+    routeResourceModule(disabledAdapter, "article", "articles");
+
+    const routes = (adapter) =>
+      adapter.routeNestedCollection.mock.calls.flatMap(([mapping]) =>
+        mapping.map(([method, path]) => `${method} ${path}`),
+      );
+
+    expect(routes(enabledAdapter)).toEqual(
+      expect.arrayContaining([
+        "GET /articles/:parent_id/partial-translations/new",
+        "POST /articles/:parent_id/partial-translations",
+      ]),
+    );
+    expect(routes(disabledAdapter)).not.toContain(
+      "GET /articles/:parent_id/partial-translations/new",
+    );
+    expect(routes(disabledAdapter)).not.toContain(
+      "POST /articles/:parent_id/partial-translations",
+    );
+  });
+
   test("registers nested members for general, visuals, codes, meta, tags", () => {
     const adapter = makeAdapter();
 

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

@@ -0,0 +1,121 @@
+import { readFileSync } from "node:fs";
+import vm from "node:vm";
+import ejs from "ejs";
+
+const template = readFileSync(
+  `${process.cwd()}/src/views/resources/_shared/_due_date.ejs`,
+  "utf8",
+);
+
+function renderDueDate(assigns) {
+  return ejs.render(template, assigns);
+}
+
+function setupDueDateScript({ workflow = "", dueDate = "" } = {}) {
+  const listeners = {};
+  const workflowSelect = {
+    value: workflow,
+    addEventListener: jest.fn((event, callback) => {
+      listeners.workflow = { event, callback };
+    }),
+  };
+  const dueDateWrapper = { style: {} };
+  const dueDateInput = {
+    value: dueDate,
+    min: "",
+    validationMessage: "",
+    setCustomValidity(message) {
+      this.validationMessage = message;
+    },
+    addEventListener: jest.fn((event, callback) => {
+      listeners.dueDate = { event, callback };
+    }),
+  };
+  const elements = {
+    workflow: workflowSelect,
+    due_date_wrapper: dueDateWrapper,
+    due_date: dueDateInput,
+  };
+  let loadCallback;
+  const window = {
+    addEventListener: jest.fn((event, callback) => {
+      if (event === "load") loadCallback = callback;
+    }),
+  };
+  const document = {
+    getElementById: jest.fn((id) => elements[id]),
+  };
+  const rendered = renderDueDate({
+    dueDateField: "resource[workflow][due_date]",
+    workflow: { due_date: dueDate },
+  });
+  const script = rendered.match(/<script>([\s\S]*?)<\/script>/)[1];
+
+  vm.runInNewContext(script, { window, document, Date });
+  loadCallback();
+
+  return { workflowSelect, dueDateWrapper, dueDateInput, listeners };
+}
+
+describe("resources shared due date", () => {
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  test("renders the configured field name and submitted value", () => {
+    const standard = renderDueDate({
+      dueDateField: "resource[workflow][due_date]",
+      workflow: { due_date: "2026-10-19T12:30" },
+    });
+    const partial = renderDueDate({
+      dueDateField: "partial_translation[workflow][due_date]",
+      workflow: { due_date: "2026-10-20T09:15" },
+    });
+
+    expect(standard).toContain('name="resource[workflow][due_date]"');
+    expect(standard).toContain('value="2026-10-19T12:30"');
+    expect(partial).toContain('name="partial_translation[workflow][due_date]"');
+    expect(partial).toContain('value="2026-10-20T09:15"');
+  });
+
+  test("hides and clears the due date when no workflow is selected", () => {
+    const { dueDateWrapper, dueDateInput } = setupDueDateScript({
+      dueDate: "2026-10-19T12:30",
+    });
+
+    expect(dueDateWrapper.style.display).toBe("none");
+    expect(dueDateInput.value).toBe("");
+  });
+
+  test("shows the due date and defaults it to the minimum weekday", () => {
+    jest.useFakeTimers().setSystemTime(new Date("2026-10-16T10:00:00"));
+
+    const { dueDateWrapper, dueDateInput } = setupDueDateScript({
+      workflow: "LOKALISE_TT_AI",
+    });
+
+    expect(dueDateWrapper.style.display).toBe("block");
+    expect(dueDateInput.value).toBe("2026-10-19T10:00");
+    expect(dueDateInput.min).toBe("2026-10-19T10:00");
+  });
+
+  test("rejects weekend dates and accepts weekdays", () => {
+    const { dueDateInput, listeners } = setupDueDateScript({
+      workflow: "LOKALISE_TT_AI",
+      dueDate: "2026-10-19T12:30",
+    });
+
+    dueDateInput.value = "2026-10-17T12:30";
+    listeners.dueDate.callback();
+
+    expect(dueDateInput.value).toBe("");
+    expect(dueDateInput.validationMessage).toBe(
+      "Weekends are not allowed. Please select a weekday.",
+    );
+
+    dueDateInput.value = "2026-10-19T12:30";
+    listeners.dueDate.callback();
+
+    expect(dueDateInput.validationMessage).toBe("");
+  });
+});

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

@@ -0,0 +1,50 @@
+import { readFileSync } from "node:fs";
+import ejs from "ejs";
+
+const template = readFileSync(
+  `${process.cwd()}/src/views/resources/partial-translations/create_form.ejs`,
+  "utf8",
+);
+
+function renderPartialTranslations(translations) {
+  return ejs.render(template, {
+    _context: {
+      locale: "en",
+      locales: { en: { name: "English" }, fr: { name: "French" } },
+      resourceConfig: { resourceTypePlural: "pages" },
+    },
+    content_tasks: { workflowsMap: (workflow) => workflow },
+    errors: {},
+    partialTranslation: { locales: [], widgetIds: ["hero-1"], workflow: {} },
+    previewUrl: "https://preview.example/hello",
+    render_partial: () => "",
+    resource: {
+      id: "42",
+      title: "Hello",
+      translations,
+      widgets: [{ widgetId: "hero-1", component: "Hero", settings: {} }],
+    },
+  });
+}
+
+describe("partial translations form", () => {
+  test("shows an empty-translations message when only the source locale exists", () => {
+    const rendered = renderPartialTranslations({ en: { id: "42" } });
+
+    expect(rendered).toContain("This resource has no translations.");
+    expect(rendered).not.toContain('value="en"');
+  });
+
+  test("renders only existing target translations", () => {
+    const rendered = renderPartialTranslations({
+      en: { id: "42" },
+      fr: { id: "43" },
+      de: {},
+    });
+
+    expect(rendered).toContain('value="fr"');
+    expect(rendered).not.toContain('value="en"');
+    expect(rendered).not.toContain('value="de"');
+    expect(rendered).not.toContain("This resource has no translations.");
+  });
+});

package/src/views/_shared/_content_tasks.ejs

@@ -60,7 +60,19 @@
           <% } %>
 
           <td>
-            <span class="body-3">
+            <span class="body-3 flex items-center gap-0.5">
+              <% if (task.lokaliseWorkflow?.partial) { %>
+                <svg viewBox="0 0 20 20" class="size-3.5 shrink-0 text-raketa-primary" role="img" aria-label="Partial translation">
+                  <title>Partial translation</title>
+                  <path fill="currentColor" d="M10 10V2a8 8 0 1 1-8 8h8Z" />
+                </svg>
+              <% } else { %>
+                <svg viewBox="0 0 20 20" class="size-3.5 shrink-0 text-raketa-primary" role="img" aria-label="Full translation">
+                  <title>Full translation</title>
+                  <circle cx="10" cy="10" r="8" fill="currentColor" />
+                </svg>
+              <% } %>
+
               <%= content_tasks.workflowsMap(task.workflow) %>
             </span>
 
@@ -69,7 +81,7 @@
                 <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">
+              <dialog class="m-auto 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">

package/src/views/resources/_shared/_due_date.ejs

@@ -0,0 +1,71 @@
+<div class="mb-4" id="due_date_wrapper">
+  <label for="due_date" class="font-semibold hover:cursor-pointer body-3">Due date (UTC)</label>
+  <input type="datetime-local" name="<%= dueDateField %>" id="due_date" value="<%= workflow?.due_date || "" %>" />
+
+  <p class="mt-1 text-sm text-raketa-foreground/50">
+    Select a due date for the translation. Weekends are not a valid choice.
+  </p>
+</div>
+
+<script>
+  window.addEventListener("load", () => {
+    const workflowSelect = document.getElementById("workflow");
+    const dueDateWrapper = document.getElementById("due_date_wrapper");
+    const dueDateInput = document.getElementById("due_date");
+
+    if (!workflowSelect || !dueDateWrapper || !dueDateInput) return;
+
+    function validateInputValue() {
+      if (dueDateInput.value === "") {
+        dueDateInput.setCustomValidity("");
+        return;
+      }
+
+      const selectedDate = new Date(dueDateInput.value);
+      const day = selectedDate.getDay();
+
+      if (day === 0 || day === 6) {
+        dueDateInput.setCustomValidity("Weekends are not allowed. Please select a weekday.");
+        dueDateInput.value = "";
+      } else {
+        dueDateInput.setCustomValidity("");
+      }
+    }
+
+    function getMinimumDueDate() {
+      const date = new Date();
+      date.setDate(date.getDate() + 3);
+
+      while (date.getDay() === 0 || date.getDay() === 6) {
+        date.setDate(date.getDate() + 1);
+      }
+
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      const hours = String(date.getHours()).padStart(2, "0");
+      const minutes = String(date.getMinutes()).padStart(2, "0");
+      return `${year}-${month}-${day}T${hours}:${minutes}`;
+    }
+
+    function toggleDueDate() {
+      const minDate = getMinimumDueDate();
+      dueDateInput.min = minDate;
+
+      const isDefault = !workflowSelect.value;
+      dueDateWrapper.style.display = isDefault ? "none" : "block";
+
+      if (isDefault) {
+        dueDateInput.value = "";
+      } else if (!dueDateInput.value) {
+        dueDateInput.value = minDate;
+      }
+
+      validateInputValue();
+    }
+
+    dueDateInput.addEventListener("change", validateInputValue);
+    workflowSelect.addEventListener("change", toggleDueDate);
+    toggleDueDate();
+  });
+</script>

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

@@ -0,0 +1,72 @@
+<div class="page-wrapper">
+  <div class="page-title flex flex-col items-start">
+    <h1 class="heading-1">
+      <span class="opacity-50">Partially translate / </span><%= resource.title %>
+    </h1>
+  </div>
+
+  <% const targetTranslations = Object.entries(resource.translations || {}).filter(([locale, translation]) => locale !== _context.locale && translation?.id); %>
+  <div class="grid gap-4 md:grid-cols-3">
+    <form action="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/partial-translations?widget_ids=${encodeURIComponent(partialTranslation.widgetIds.join(','))}` %>" method="post" class="form">
+      <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' : '' %>>
+            <%= _context.locales[locale]?.name || locale %>
+          </label>
+          <% }) %>
+        </div>
+        <% if (targetTranslations.length === 0) { %>
+        <p class="text-sm text-raketa-foreground/50">This resource has no translations.</p>
+        <% } %>
+      </div>
+
+      <div class="mb-4">
+        <label for="workflow" class="font-semibold body-3">Translation workflow</label>
+        <select name="partial_translation[workflow][type]" id="workflow" required>
+          <option value="">Select workflow</option>
+          <% ['LOKALISE_TT_AI_RT_HUM', 'LOKALISE_TT_HUM', 'LOKALISE_TT_AI'].forEach(workflow => { %>
+          <option value="<%= workflow %>" <%= partialTranslation.workflow?.type === workflow ? 'selected' : '' %>><%= content_tasks.workflowsMap(workflow.toLowerCase()) %></option>
+          <% }) %>
+        </select>
+      </div>
+
+      <%- render_partial('../_shared/_due_date.ejs', {
+        workflow: partialTranslation.workflow,
+        dueDateField: 'partial_translation[workflow][due_date]',
+      }) %>
+
+      <div class="mb-4">
+        <h6>Widgets selected for translation</h6>
+        <ul class="mt-2 space-y-1">
+          <% partialTranslation.widgetIds.forEach(widgetId => { const widget = (resource.widgets || []).find(item => item.widgetId === widgetId); %>
+          <li class="rounded border px-3 py-2 dark:border-neutral-500">
+            <input type="hidden" name="partial_translation[widget_ids][]" value="<%= widgetId %>">
+            <strong><%= widget?.component || 'Widget' %></strong>
+            <% if (widget?.settings?.title) { %> — <%= widget.settings.title %><% } %>
+            <span class="text-sm text-raketa-foreground/50">(<%= widgetId %>)</span>
+          </li>
+          <% }) %>
+        </ul>
+      </div>
+
+      <div class="mb-4">
+        <h6>Preview of the original page</h6>
+        <a href="<%= previewUrl %>" target="_blank" rel="noopener noreferrer" class="btn-text">Open preview</a>
+      </div>
+
+      <% Object.entries(errors?.partialTranslation || {}).forEach(([key, error]) => { %>
+      <p class="mb-2 text-sm font-medium text-red-600"><%= key %>: <%= error %></p>
+      <% }) %>
+
+      <div class="form-actions">
+        <div class="btn-toolbar">
+          <button type="submit" class="btn-primary">Initiate partial translations</button>
+          <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}` %>" class="btn-secondary">Cancel</a>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>

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

@@ -53,88 +53,10 @@
         </p>
       </div>
 
-      <div class="mb-4" id="due_date_wrapper">
-        <label for="due_date" class="font-semibold hover:cursor-pointer body-3">Due date (UTC)</label>
-        <input type="datetime-local" name="resource[workflow][due_date]" id="due_date" value="<%= resource.workflow?.due_date || "" %>" />
-
-        <p class="text-sm text-raketa-foreground/50 mt-1">
-          Select a due date for the translation. Weekends are not a valid choice.
-        </p>
-      </div>
-
-      <script>
-        window.addEventListener("load", (_event) => {
-          (function () {
-            const workflowSelect = document.getElementById("workflow");
-            const dueDateWrapper = document.getElementById("due_date_wrapper");
-            const dueDateInput = document.getElementById("due_date");
-
-            function validateInputValue(dInput) {
-              if (dInput.value === "") {
-                dInput.setCustomValidity('');
-                return;
-              }
-
-              const selectedDate = new Date(dInput.value);
-              const day = selectedDate.getDay();
-
-              if (day === 0 || day === 6) {
-                dInput.setCustomValidity('Weekends are not allowed. Please select a weekday.')
-                selectedDate.value = '';
-              } else {
-                dInput.setCustomValidity('');
-              }
-            }
-
-            dueDateInput.addEventListener('change', function(e) {
-              validateInputValue(dueDateInput);
-            });
-
-            function getTwoDaysFromNowString() {
-              const date = new Date();
-
-
-              date.setDate(date.getDate() + 3);
-
-              // Skip weekends.
-              while(date.getDay() === 0 || date.getDay() === 6) {
-                date.setDate(date.getDate() + 1);
-              }
-
-              const year = date.getFullYear();
-              const month = String(date.getMonth() + 1).padStart(2, "0");
-              const day = String(date.getDate()).padStart(2, "0");
-              const hours = String(date.getHours()).padStart(2, "0");
-              const minutes = String(date.getMinutes()).padStart(2, "0");
-              return `${year}-${month}-${day}T${hours}:${minutes}`;
-            }
-
-            function toggleDueDate() {
-              if (!workflowSelect || !dueDateWrapper || !dueDateInput) return;
-              const minDate = getTwoDaysFromNowString();
-              dueDateInput.min = minDate;
-
-              const isDefault = !workflowSelect.value;
-              dueDateWrapper.style.display = isDefault ? "none" : "block";
-
-              if (isDefault) {
-                dueDateInput.value = "";
-              } else if (!dueDateInput.value) {
-                dueDateInput.value = minDate;
-              }
-
-              // Trigger the on change so hints are visible together with the validation.
-              const changeEvent = new Event('change', { bubbles: true });
-              dueDateInput.dispatchEvent(changeEvent);
-            }
-
-            if (workflowSelect) {
-              workflowSelect.addEventListener("change", toggleDueDate);
-              toggleDueDate();
-            }
-          })();
-        })
-      </script>
+      <%- render_partial('../_shared/_due_date.ejs', {
+        workflow: resource.workflow,
+        dueDateField: 'resource[workflow][due_date]',
+      }) %>
       <% } %>
 
       <% const currentLocaleErrors = errors?.localeErrors || []; %>