@raketa-cloud/admin 1.10.5 → 1.10.7

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);
@@ -1146,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);
     }
   }
 }
@@ -1692,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);
@@ -1825,7 +1825,7 @@ body {
         color: var(--color-raketa-foreground);
       }
     }
-    @media (prefers-color-scheme: dark) {
+    &:where(.dark, .dark *) {
       color: var(--color-red-700);
     }
   }
@@ -1903,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);
         }
@@ -1944,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);
       }
     }
@@ -2057,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);
       }
     }
@@ -2069,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);
@@ -2082,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);
           }
         }
@@ -2189,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);
@@ -2215,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);
     }
   }
@@ -2492,6 +2492,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 +2729,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.7",
   "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 };