@raketa-cloud/admin 0.0.57 → 0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "main": "src/index.js",
   "scripts": {
     "dev": "npx tailwindcss -i ./src/styles/application.css -o ../../apps/admin/static/application.css --watch",

package/src/handlers/pages/TranslationsHandler.js

@@ -1,21 +1,73 @@
+const index = async (ctx) => {
+  const { parent_id } = ctx.params;
+  const { translations } = ctx.query;
+  let translatedPages = [];
+
+  if (translations) {
+    const translationPairs = translations.split(";").map((pair) => {
+      const [locale, id] = pair.split(":");
+      return { locale, id };
+    });
+
+    translatedPages = await Promise.all(
+      translationPairs.map(async ({ locale, id }) => {
+        const page = await ctx.client.pages.find(id, locale);
+
+        if (!page) {
+          throw new Error(
+            `Cannot find translated page with id ${id} and locale ${locale}`
+          );
+        }
+
+        const revisions = await ctx.client.pageRevisions.all(id, locale);
+        const openRevision = revisions.list[0];
+
+        return {
+          ...page,
+          translationLocale: locale,
+          revisionId: openRevision?.id,
+        };
+      })
+    );
+  }
+
+  const items = await ctx.client.pages.list(
+    ctx.query,
+    ctx.locale,
+    ctx.resourceConfig.pageType
+  );
+
+  const originalPage = await ctx.client.pages.find(parent_id, ctx.locale);
+
+  return {
+    assigns: {
+      items,
+      visibilityOptions: ctx.client.pages.visibilityOptions(),
+      translations: translatedPages,
+      parent_id,
+      pageTitle: originalPage.title,
+    },
+  };
+};
+
 const create_form = async (ctx) => {
-  const { target_locale } = ctx.query;
-  const target_locate_tags = await ctx.client.tags.all(target_locale);
+  const { target_locale = "" } = ctx.query;
 
   const { parent_id } = ctx.params;
   const blueprint = await ctx.client.pages.find(parent_id, ctx.locale);
 
+  if (!blueprint) {
+    throw new Error(`Cannot find page with id ${parent_id}`);
+  }
+
   const resource = structuredClone(blueprint);
-  resource.tags = [];
 
   return {
     assigns: {
       resource,
       blueprint,
       targetLocale: target_locale,
-      tags: target_locate_tags.list,
       errors: {},
-      visibilityOptions: ctx.client.pages.visibilityOptions(),
       _translations: [],
     },
   };
@@ -23,51 +75,93 @@ const create_form = async (ctx) => {
 
 const create = async (ctx) => {
   const { parent_id } = ctx.params;
-  const blueprint = await ctx.client.pages.find(parent_id, ctx.locale);
+  const originalLocale = ctx.locale;
+  const blueprint = await ctx.client.pages.find(parent_id, originalLocale);
 
-  const { target_locale } = ctx.resourceParams;
-  const params = { ...ctx.resourceParams.resource };
+  const formLanguages = Array.isArray(ctx.resourceParams.resource.languages)
+    ? ctx.resourceParams.resource.languages
+    : [ctx.resourceParams.resource.languages].filter(Boolean);
 
-  const resource = ctx.client.pages.deepMerge(
-    {
-      settings: {
-        ...blueprint.settings,
-      },
-      widgets: blueprint.widgets,
-      categories: blueprint.categories.map((category) => category.id),
-      tags: [],
-    },
-    params
+  const existingTranslations = Object.keys(blueprint.translations || {});
+  const selectedLocales = formLanguages.filter(
+    (locale) =>
+      locale !== originalLocale && !existingTranslations.includes(locale)
   );
 
-  const { errors } = await ctx.client.pages.translate(
-    parent_id,
-    target_locale,
-    resource
-  );
+  const params = {
+    title: blueprint.title,
+    tags: [],
+    visibility: "private",
+    slug: blueprint.slug,
+  };
 
-  if (errors) {
-    const tags = await ctx.client.tags.all(target_locale);
-
-    return {
-      assigns: {
-        resource,
-        blueprint,
-        targetLocale: target_locale,
-        tags: tags.list,
-        errors: { resource: ctx.client.pages.formatErrors(errors) },
-        visibilityOptions: ctx.client.pages.visibilityOptions(),
-        _translations: [],
+  const translationIds = [];
+
+  for (const locale of selectedLocales) {
+    const resource = ctx.client.pages.deepMerge(
+      {
+        settings: blueprint.settings,
+        widgets: blueprint.widgets,
+        categories: blueprint.categories.map((category) => category.id),
       },
-    };
+      params
+    );
+
+    const { errors, page } = await ctx.client.pages.translate(
+      parent_id,
+      locale,
+      resource
+    );
+
+    if (errors) {
+      return {
+        assigns: {
+          resource: {
+            ...resource,
+            translations: blueprint.translations || {},
+            languages: formLanguages,
+          },
+          blueprint,
+          targetLocale: locale,
+          errors: { resource: ctx.client.pages.formatErrors(errors) },
+        },
+      };
+    }
+
+    if (page) {
+      translationIds.push(`${locale}:${page.id}`);
+    }
+
+    const { errors: revisionErrors } = await ctx.client.pageRevisions.create(
+      page.id,
+      locale
+    );
+
+    if (revisionErrors) {
+      return {
+        assigns: {
+          resource: {
+            ...resource,
+            translations: blueprint.translations || {},
+            languages: formLanguages,
+          },
+          blueprint,
+          targetLocale: locale,
+          errors: {
+            resource: ctx.client.pages.formatErrors(revisionErrors),
+          },
+        },
+      };
+    }
   }
 
   return {
-    redirect: `/${ctx.locale}/${ctx.resourceConfig.pageTypePlural}/${parent_id}`,
+    redirect: `/${originalLocale}/${ctx.resourceConfig.pageTypePlural}/${parent_id}/translations?translations=${translationIds.join(";")}`,
   };
 };
 
 export default {
+  index,
   create_form,
   create,
 };

package/src/routePagesModule.js

@@ -1,22 +1,22 @@
-import routeCollection from "./routeCollection";
-import routeNestedCollection from "./routeNestedCollection";
-import routeNestedMember from "./routeNestedMember";
-import TranslationsHandler from "./handlers/pages/TranslationsHandler";
-import PageRevisionsHandler from "./handlers/page_revisions/PageRevisionsHandler";
-import GeneralHandler from "./handlers/page_revisions/GeneralHandler";
-import VisualHandler from "./handlers/page_revisions/VisualHandler";
 import CodeHandler from "./handlers/page_revisions/CodeHandler";
+import GeneralHandler from "./handlers/page_revisions/GeneralHandler";
+import LocksHandler from "./handlers/page_revisions/LocksHandler";
 import MetaHandler from "./handlers/page_revisions/MetaHandler";
+import PageRevisionsHandler from "./handlers/page_revisions/PageRevisionsHandler";
+import PublishesHandler from "./handlers/page_revisions/PublishesHandler";
+import RevertsHandler from "./handlers/page_revisions/RevertsHandler";
 import TagHandler from "./handlers/page_revisions/TagHandler";
-import LocksHandler from "./handlers/page_revisions/LocksHandler";
 import UnlocksHandler from "./handlers/page_revisions/UnlocksHandler";
+import VisualHandler from "./handlers/page_revisions/VisualHandler";
+import WidgetHandler from "./handlers/page_revisions/WidgetHandler";
 import ClonesHandler from "./handlers/pages/ClonesHandler";
-import URLsHandler from "./handlers/pages/URLsHandler";
 import DeletesHandler from "./handlers/pages/DeletesHandler";
-import RevertsHandler from "./handlers/page_revisions/RevertsHandler";
-import PublishesHandler from "./handlers/page_revisions/PublishesHandler";
-import WidgetHandler from "./handlers/page_revisions/WidgetHandler";
 import PagesHandler from "./handlers/pages/PagesHandler";
+import TranslationsHandler from "./handlers/pages/TranslationsHandler";
+import URLsHandler from "./handlers/pages/URLsHandler";
+import routeCollection from "./routeCollection";
+import routeNestedCollection from "./routeNestedCollection";
+import routeNestedMember from "./routeNestedMember";
 
 function routePagesModule(
   adapter,

package/src/tests/handlers/pages/TranslationHandler.test/create.test.js

@@ -0,0 +1,279 @@
+import PageRevisions from "../../../../cloud/PageRevisions";
+import Pages from "../../../../cloud/Pages";
+import TranslationsHandler from "../../../../handlers/pages/TranslationsHandler";
+import Factory from "../../../support/factory";
+
+function buildCtx(params, page) {
+  return {
+    client: {
+      pages: new Pages(() => ({}), "token"),
+      pageRevisions: new PageRevisions(() => ({}), "token"),
+    },
+    params: { parent_id: page.id },
+    resourceParams: {
+      resource: params,
+    },
+    locale: "en",
+    resourceConfig: {
+      pageType: "page",
+      pageTypePlural: "pages",
+    },
+  };
+}
+
+describe("Translation Handler", () => {
+  test("create fails with translation errors", async () => {
+    const page = Factory.build("page", {
+      translations: {},
+      categories: [{ id: "cat1" }],
+    });
+    const params = {
+      languages: ["fr"],
+    };
+
+    const ctx = buildCtx(params, page);
+
+    const mockFind = jest
+      .spyOn(ctx.client.pages, "find")
+      .mockImplementation(() => page);
+
+    const translationErrors = [{ key: "title", message: "cannot be blank" }];
+    const mockTranslate = jest
+      .spyOn(ctx.client.pages, "translate")
+      .mockImplementation(() => ({
+        page: null,
+        errors: translationErrors,
+      }));
+
+    const mockFormatErrors = jest
+      .spyOn(ctx.client.pages, "formatErrors")
+      .mockImplementation(() => ({ title: "cannot be blank" }));
+
+    const result = await TranslationsHandler.create(ctx);
+
+    expect(mockFind).toHaveBeenCalledWith(page.id, "en");
+    expect(mockTranslate).toHaveBeenCalled();
+    expect(mockFormatErrors).toHaveBeenCalledWith(translationErrors);
+
+    expect(result).toEqual({
+      assigns: {
+        resource: {
+          title: page.title,
+          tags: [],
+          visibility: "private",
+          slug: page.slug,
+          settings: page.settings,
+          widgets: page.widgets,
+          categories: ["cat1"],
+          translations: {},
+          languages: ["fr"],
+        },
+        blueprint: page,
+        targetLocale: "fr",
+        errors: { resource: { title: "cannot be blank" } },
+      },
+    });
+  });
+
+  test("create successfully multiple translations with already one is existing", async () => {
+    const page = Factory.build("page", {
+      translations: { de: "de-id" },
+      categories: [{ id: "cat1" }],
+    });
+
+    const params = {
+      languages: ["fr", "es", "de"],
+    };
+
+    const ctx = buildCtx(params, page);
+
+    const mockFind = jest
+      .spyOn(ctx.client.pages, "find")
+      .mockImplementation(() => page);
+
+    const mockTranslate = jest
+      .spyOn(ctx.client.pages, "translate")
+      .mockImplementation((parentId, locale) => ({
+        page: { id: `translated-page-${locale}` },
+        errors: null,
+      }));
+
+    const mockCreateRevision = jest
+      .spyOn(ctx.client.pageRevisions, "create")
+      .mockImplementation(() => ({ errors: null }));
+
+    const result = await TranslationsHandler.create(ctx);
+
+    expect(mockFind).toHaveBeenCalledWith(page.id, "en");
+
+    expect(mockTranslate).toHaveBeenCalledTimes(2);
+    expect(mockTranslate).toHaveBeenCalledWith(
+      page.id,
+      "fr",
+      expect.objectContaining({
+        title: page.title,
+        tags: [],
+        visibility: "private",
+        slug: page.slug,
+      })
+    );
+    expect(mockTranslate).toHaveBeenCalledWith(
+      page.id,
+      "es",
+      expect.objectContaining({
+        title: page.title,
+        tags: [],
+        visibility: "private",
+        slug: page.slug,
+      })
+    );
+
+    expect(mockCreateRevision).toHaveBeenCalledTimes(2);
+    expect(mockCreateRevision).toHaveBeenCalledWith("translated-page-fr", "fr");
+    expect(mockCreateRevision).toHaveBeenCalledWith("translated-page-es", "es");
+
+    expect(result).toEqual({
+      redirect: `/en/pages/${page.id}/translations?translations=fr:translated-page-fr;es:translated-page-es`,
+    });
+  });
+
+  test("create translations fails if any translation fails", async () => {
+    const page = Factory.build("page", {
+      translations: {},
+      categories: [{ id: "some-category-uno" }],
+    });
+
+    const params = {
+      languages: ["fr", "es"],
+    };
+
+    const ctx = buildCtx(params, page);
+
+    const mockFind = jest
+      .spyOn(ctx.client.pages, "find")
+      .mockImplementation(() => page);
+
+    const translationResponses = {
+      fr: { page: { id: "translated-page-fr" }, errors: null },
+      es: {
+        page: null,
+        errors: [{ key: "title", message: "invalid for spanish" }],
+      },
+    };
+
+    const mockTranslate = jest
+      .spyOn(ctx.client.pages, "translate")
+      .mockImplementation((parentId, locale) => translationResponses[locale]);
+
+    const mockFormatErrors = jest
+      .spyOn(ctx.client.pages, "formatErrors")
+      .mockImplementation(() => ({
+        title: "invalid for spanish",
+      }));
+
+    const mockCreateRevision = jest
+      .spyOn(ctx.client.pageRevisions, "create")
+      .mockImplementation(() => ({ errors: null }));
+
+    const result = await TranslationsHandler.create(ctx);
+
+    expect(mockFind).toHaveBeenCalledWith(page.id, "en");
+
+    expect(mockTranslate).toHaveBeenCalledWith(
+      page.id,
+      "fr",
+      expect.objectContaining({
+        title: page.title,
+        tags: [],
+        visibility: "private",
+        slug: page.slug,
+      })
+    );
+
+    expect(mockTranslate).toHaveBeenCalledWith(
+      page.id,
+      "es",
+      expect.objectContaining({
+        title: page.title,
+        tags: [],
+        visibility: "private",
+        slug: page.slug,
+      })
+    );
+
+    expect(result).toEqual({
+      assigns: {
+        resource: {
+          title: page.title,
+          tags: [],
+          visibility: "private",
+          slug: page.slug,
+          settings: page.settings,
+          widgets: page.widgets,
+          categories: ["some-category-uno"],
+          translations: {},
+          languages: ["fr", "es"],
+        },
+        blueprint: page,
+        targetLocale: "es",
+        errors: { resource: { title: "invalid for spanish" } },
+      },
+    });
+  });
+
+  test("create translation fails with revision errors", async () => {
+    const page = Factory.build("page", {
+      translations: {},
+      categories: [{ id: "cat1" }],
+    });
+    const params = {
+      languages: ["fr"],
+    };
+
+    const ctx = buildCtx(params, page);
+
+    const mockFind = jest
+      .spyOn(ctx.client.pages, "find")
+      .mockImplementation(() => page);
+
+    const mockTranslate = jest
+      .spyOn(ctx.client.pages, "translate")
+      .mockImplementation(() => ({
+        page: { id: "translated-page-id" },
+        errors: null,
+      }));
+
+    const revisionErrors = [{ key: "base", message: "something went wrong" }];
+    const mockCreateRevision = jest
+      .spyOn(ctx.client.pageRevisions, "create")
+      .mockImplementation(() => ({ errors: revisionErrors }));
+
+    const mockFormatErrors = jest
+      .spyOn(ctx.client.pages, "formatErrors")
+      .mockImplementation(() => ({ base: "something went wrong" }));
+
+    const result = await TranslationsHandler.create(ctx);
+
+    expect(mockCreateRevision).toHaveBeenCalledWith("translated-page-id", "fr");
+    expect(mockFormatErrors).toHaveBeenCalledWith(revisionErrors);
+
+    expect(result).toEqual({
+      assigns: {
+        resource: {
+          title: page.title,
+          tags: [],
+          visibility: "private",
+          slug: page.slug,
+          settings: page.settings,
+          widgets: page.widgets,
+          categories: ["cat1"],
+          translations: {},
+          languages: ["fr"],
+        },
+        blueprint: page,
+        targetLocale: "fr",
+        errors: { resource: { base: "something went wrong" } },
+      },
+    });
+  });
+});

package/src/tests/handlers/pages/TranslationHandler.test/create_form.test.js

@@ -0,0 +1,71 @@
+import Pages from "../../../../cloud/Pages";
+import TranslationsHandler from "../../../../handlers/pages/TranslationsHandler";
+import Factory from "../../../support/factory";
+
+function buildCtx(page) {
+  return {
+    client: {
+      pages: new Pages(() => ({}), "token"),
+    },
+    params: { parent_id: page.id },
+    query: { target_locale: "" },
+    locale: "en",
+    resourceConfig: {
+      pageType: "page",
+      pageTypePlural: "pages",
+    },
+  };
+}
+
+describe("Page translation form", () => {
+  test("create_form when a page exists with target locale", async () => {
+    const page = Factory.build("page");
+    const ctx = buildCtx(page);
+    ctx.query.target_locale = "fr";
+
+    const mockFindPage = jest
+      .spyOn(ctx.client.pages, "find")
+      .mockImplementation(() => page);
+
+    const result = await TranslationsHandler.create_form(ctx);
+
+    expect(mockFindPage).toHaveBeenCalledWith(page.id, "en");
+
+    const expectedResource = structuredClone(page);
+
+    expect(result).toEqual({
+      assigns: {
+        resource: expectedResource,
+        blueprint: page,
+        targetLocale: "fr",
+        errors: {},
+        _translations: [],
+      },
+    });
+  });
+
+  test("create_form when a page exists without target locale", async () => {
+    const page = Factory.build("page");
+    const ctx = buildCtx(page);
+
+    const mockFindPage = jest
+      .spyOn(ctx.client.pages, "find")
+      .mockImplementation(() => page);
+
+    const result = await TranslationsHandler.create_form(ctx);
+
+    expect(mockFindPage).toHaveBeenCalledWith(page.id, "en");
+
+    const expectedResource = structuredClone(page);
+
+    expect(result).toEqual({
+      assigns: {
+        resource: expectedResource,
+        blueprint: page,
+        targetLocale: "",
+        errors: {},
+        _translations: [],
+      },
+    });
+  });
+});

package/src/tests/handlers/pages/TranslationHandler.test/index.test.js

@@ -0,0 +1,87 @@
+import PageRevisions from "../../../../cloud/PageRevisions";
+import Pages from "../../../../cloud/Pages";
+import TranslationsHandler from "../../../../handlers/pages/TranslationsHandler";
+import Factory from "../../../support/factory";
+
+describe("Translations Handler", () => {
+  function buildCtx() {
+    const originalPage = Factory.build("page", {
+      id: "original-page-id",
+      title: "Test Page Title",
+    });
+
+    return {
+      client: {
+        pages: new Pages(() => ({}), "token"),
+        pageRevisions: new PageRevisions(() => ({}), "token"),
+      },
+      params: { parent_id: originalPage.id },
+      query: { translations: "fr:fr-page-id;es:es-page-id" },
+      locale: "en",
+      resourceConfig: {
+        pageType: "page",
+        pageTypePlural: "pages",
+      },
+      originalPage,
+    };
+  }
+
+  test("index", async () => {
+    const frPage = Factory.build("page", { id: "fr-page-id" });
+    const esPage = Factory.build("page", { id: "es-page-id" });
+    const esRevision = Factory.build("page_revision", { id: "es-revision-id" });
+    const frRevision = Factory.build("page_revision", { id: "fr-revision-id" });
+    const ctx = buildCtx();
+
+    const mockedFind = jest
+      .spyOn(ctx.client.pages, "find")
+      .mockImplementation((id, locale) => {
+        if (locale === "fr") return frPage;
+        if (locale === "es") return esPage;
+        if (id === "original-page-id") return ctx.originalPage;
+      });
+
+    const mockedRevisions = jest
+      .spyOn(ctx.client.pageRevisions, "all")
+      .mockImplementation((id, locale) => ({
+        list: locale === "fr" ? [frRevision] : [esRevision],
+      }));
+
+    const mockedList = jest
+      .spyOn(ctx.client.pages, "list")
+      .mockImplementation(() => ({}));
+
+    const result = await TranslationsHandler.index(ctx);
+
+    expect(mockedFind).toHaveBeenCalledWith("fr-page-id", "fr");
+    expect(mockedFind).toHaveBeenCalledWith("es-page-id", "es");
+    expect(mockedRevisions).toHaveBeenCalledWith("fr-page-id", "fr");
+    expect(mockedRevisions).toHaveBeenCalledWith("es-page-id", "es");
+    expect(mockedList).toHaveBeenCalledWith(
+      { translations: "fr:fr-page-id;es:es-page-id" },
+      "en",
+      "page"
+    );
+
+    expect(result).toEqual({
+      assigns: {
+        items: {},
+        visibilityOptions: ctx.client.pages.visibilityOptions(),
+        translations: [
+          {
+            ...frPage,
+            translationLocale: "fr",
+            revisionId: "fr-revision-id",
+          },
+          {
+            ...esPage,
+            translationLocale: "es",
+            revisionId: "es-revision-id",
+          },
+        ],
+        parent_id: "original-page-id",
+        pageTitle: "Test Page Title",
+      },
+    });
+  });
+});

package/src/views/pages/show.ejs

@@ -5,6 +5,14 @@
   </div>
 
   <div class="flex flex-wrap items-center gap-1 mb-6 -mt-4">
+    <%
+        const availableLocales = Object.keys(_context.locales);
+        const totalPossibleTranslations = availableLocales.length - 1;
+        const existingTranslationsCount = Object.keys(resource.translations).length;
+        const canBeTranslated = existingTranslationsCount < totalPossibleTranslations;
+      %>
+
+
     <% Object.keys(_context.locales).forEach(key => { %>
     <% const { name, _code, flag} = _context.locales[key] %>
     <% if (key === _context.locale) { %>
@@ -19,6 +27,12 @@
     </a>
     <% } %>
     <% }); %>
+
+    <% if (canBeTranslated) { %>
+    <a href="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${resource.id}/translations/new` %>" class="btn-text">
+      Translate
+    </a>
+    <% } %>
   </div>
 
   <% if (revisions.length) { %>
@@ -155,4 +169,4 @@
       </tbody>
     </table>
   </div>
-</div>
+</div>

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

@@ -1,9 +1,65 @@
 <div class="page-wrapper">
-  <div class="page-title">
-    <h1 class="heading-1">Create <%= Inflector.humanize(Inflector.downcase(_context.resourceConfig.pageType)) %> translation</h1>
+  <div class="page-title flex flex-col items-start">
+    <h1 class="heading-1">Translate from <%= _context.locales[_context.locale].name %></h1>
+    <h1 class="body-2 opacity-50"><%= blueprint.title %></h1>
   </div>
 
   <div class="grid gap-4 md:grid-cols-3">
-    <%- render_partial('_form.ejs') %>
+    <% form_for({ resource }, errors, (f) => { %>
+    <form action="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${blueprint.id}/translations` %>" method="post" class="form">
+      <h6>Available languages:</h6>
+      <% if (targetLocale) { %>
+      <input type="hidden" name="resource[languages][]" value="<%= targetLocale %>">
+      <% } %>
+      <div class="checkbox-group !max-h-fit mb-3">
+        <% Object.entries(_context.locales).forEach(([key, locale]) => {
+          const isExistingTranslation = resource.translations[key];
+          const isCurrentLocale = key === _context.locale;
+          const wasSelected = Array.isArray(resource.languages) && resource.languages.includes(key);
+          const isChecked = isExistingTranslation || isCurrentLocale || key === targetLocale || wasSelected;
+          const isDisabled = isExistingTranslation || isCurrentLocale || key === targetLocale;
+        %>
+        <% if(!isCurrentLocale) { %>
+        <label class="<%= isDisabled && key !== targetLocale ? 'opacity-50' : '' %>">
+          <input type="<%= isCurrentLocale ? 'hidden' : 'checkbox' %>" name="resource[languages][]" value="<%= key %>" <%= isChecked ? 'checked' : '' %> <%= isDisabled ? 'disabled' : '' %>>
+          <%= locale.name %>
+        </label>
+        <% } %>
+        <% }) %>
+      </div>
+
+      <% if (errors?.resource && targetLocale) { %>
+      <div>
+        <p class="text-sm text-red-600 font-medium mb-1">
+          Failed to create <%= _context.locales[targetLocale].name %> translation.
+        </p>
+        <% Object.entries(errors.resource).forEach(([errorKey, error]) => { %>
+        <p class="text-sm text-red-600 font-medium mb-3"> Reason is <%= errorKey %>: <%= error %></p>
+        <% }) %>
+      </div>
+      <% } %>
+
+      <div class="form-actions">
+        <div class="btn-toolbar">
+          <%- f.submit('Initiate translations', { class: 'btn-primary' }) %>
+          <a href="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${blueprint.id}` %>" class="btn-secondary">Cancel</a>
+        </div>
+      </div>
+    </form>
+    <% }) %>
+
+    <div>
+      <div class="help">
+        <div class="flex items-center gap-1 mb-2">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
   </div>
-</div>
+</div>

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

@@ -0,0 +1,54 @@
+<div class="page-wrapper">
+  <div class="page-title flex flex-col items-start">
+    <h1 class="heading-1">Translations initiated</h1>
+    <h1 class="body-2 opacity-50"><%= pageTitle %></h1>
+  </div>
+
+  <% if (translations && translations.length > 0) { %>
+  <table class="data-grid alt">
+    <thead>
+      <tr>
+        <th>Locale</th>
+        <th>&nbsp;</th>
+        <th>&nbsp;</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% translations.forEach(translation => { %>
+      <tr class="border-b border-mono-25">
+        <td class="py-4 pl-2 w-full">
+          <div class="flex gap-1 items-center">
+            <a href="<%= `/${translation.translationLocale}/${_context.resourceConfig.pageTypePlural}/${translation.id}` %>" class="btn-text">
+              <%= _context.locales[translation.translationLocale].name %>
+            </a>
+          </div>
+        </td>
+
+        <td class="whitespace-nowrap">
+          <div class="body-3 text-raketa-foreground/50">
+            <div class="flex items-center gap-1">
+              <a href="<%= `/${translation.translationLocale}/page_revisions/${translation.revisionId}/general/edit` %>" class="btn-text">
+                Update Settings
+              </a>
+            </div>
+          </div>
+        </td>
+
+        <td class="whitespace-nowrap">
+          <div class="body-3 text-raketa-foreground/50">
+            <div class="flex items-center gap-1">
+              <a href="/remote-login?redirect_to=/<%= translation.translationLocale %>/admin/<%= _context.resourceConfig.pageType %>-revisions/<%= translation.revisionId %>/builder" target="_blank" class="btn-text">
+                Update Content
+              </a>
+            </div>
+          </div>
+        </td>
+      </tr>
+      <% }) %>
+    </tbody>
+  </table>
+  <% } %>
+  <a href="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${parent_id}` %>" class="btn-primary mt-8">
+    Go to original
+  </a>
+</div>

package/src/views/pages/translations/_form.ejs

@@ -1,44 +0,0 @@
-<% form_for({ resource }, errors, (f) => { %>
-<form action="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${blueprint.id}/translations` %>" method="post" class="form">
-  <input type="hidden" name="target_locale" value="<%= targetLocale %>" />
-
-  <%- f.field('resource.title', { required: true }) %>
-  <%- f.field('resource.slug', { label: "URL", required: true }) %>
-  <%- f.field('resource.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
-
-  <%- include('../../_shared/_credentials_input.ejs', { f, visibilityFieldId: "f_resource_visibility"}) %>
-  <%- include('../../_shared/_layout_input.ejs', { f }) %>
-
-  <%- f.field('resource.settings.meta.title', { required: true, label: "Meta title" }) %>
-  <%- f.field('resource.settings.meta.description', { as: "textarea", required: true, label: "Meta description" }) %>
-
-  <raketa-image-picker name="resource[settings][meta][image]" value="<%= JSON.stringify(resource.settings?.meta?.image || {}) %>" label="Meta image"></raketa-image-picker>
-
-  <h6>Original tags:</h6>
-  <div><%= blueprint.tags.map((tag) => tag.name).join(", ")%></div>
-
-  <%- f.field('resource.tags', { as: 'checkbox_group', options: tags.map(tag => [tag.id, tag.name]) }) %>
-
-  <div class="form-actions">
-    <div class="btn-toolbar">
-      <%- f.submit('Save record', { class: 'btn-primary' }) %>
-
-      <a href="<%= `/${_context.locale}/${_context.resourceConfig.pageTypePlural}/${blueprint.id}` %>" class="btn-secondary">Cancel</a>
-    </div>
-  </div>
-</form>
-<% }) %>
-
-<div>
-  <div class="help">
-    <div class="flex items-center gap-1 mb-2">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
-      </svg>
-
-      <h3 class="heading-3">Contextual help</h3>
-    </div>
-
-    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
-  </div>
-</div>