@raketa-cloud/admin 1.8.9 → 1.8.11

package/src/views/content_tasks/index.ejs

@@ -0,0 +1,191 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Content Tasks</h1>
+
+    <div class="actions-toolbar">
+      <button type="button" data-toggle-sidebar="1" class="p-2.5 rounded hover:bg-neutral-200 transition-all duration-300 ease-in-out dark:hover:bg-neutral-700">
+        <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="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <table class="data-grid">
+    <thead>
+      <tr>
+        <th>Resource</th>
+        <th>Locale</th>
+        <th>Workflow</th>
+        <th>Started at</th>
+        <th>Finished at</th>
+        <th>Status</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <% if (items && items.list && items.list.length > 0) { %>
+        <% items.list.forEach(task => { %>
+          <tr>
+            <td class="w-1/3">
+              <% if (task.resource) { %>
+                <a href="<%= buildResourceUrl(task.resource) %>" target="_blank" class="btn-text">
+                  <%= task.resource.title %>
+                </a>
+                <div class="body-3 text-raketa-foreground/50 mt-1">
+                  <strong>Type:</strong> <%= Inflector.humanize(Inflector.capitalize(task.resource.resourceType)) %>
+                </div>
+              <% } else { %>
+                <span class="text-raketa-foreground/50">—</span>
+              <% } %>
+            </td>
+
+            <td>
+              <% if (task.resource && _context.locales[task.resource.locale]) { %>
+                <% const { name, flag } = _context.locales[task.resource.locale] %>
+                <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="size-6 rounded-full border dark:border-neutral-700" />
+              <% } else { %>
+                <span class="text-raketa-foreground/50">—</span>
+              <% } %>
+            </td>
+
+            <td>
+              <span class="body-2">
+                <%= Inflector.capitalize(task.workflow) %>
+              </span>
+            </td>
+
+            <td>
+              <div class="body-3 text-raketa-foreground/50">
+                <div class="flex items-center gap-1 mb-0.5">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                  </svg>
+                  <time data-pretty-datetime datetime="<%= task.insertedAt %>"><%= utils.formattedDateTime(task.insertedAt) %></time>
+                </div>
+
+                <div class="flex items-center gap-1" title="<%= task.operatorMeta?.name %>">
+                  <% if (task.operatorMeta?.avatar) { %>
+                  <img src="<%= task.operatorMeta?.avatar %>" class="size-4 rounded-full" alt="<%= task.operatorMeta?.name %>">
+                  <% } else { %>
+                  <div class="size-4 rounded-full"></div>
+                  <% } %>
+                  <%= task.operatorMeta?.name %>
+                </div>
+              </div>
+            </td>
+
+            <td>
+              <% if (task.completedAt || task.failedAt || task.rejectedAt) { %>
+                <div class="body-3 text-raketa-foreground/50">
+                  <div class="flex items-center gap-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                    </svg>
+                    <time data-pretty-datetime datetime="<%= task.completedAt || task.failedAt || task.rejectedAt %>">
+                      <%= utils.formattedDateTime(task.completedAt || task.failedAt || task.rejectedAt) %>
+                    </time>
+                  </div>
+                </div>
+              <% } else { %>
+                <span class="text-raketa-foreground/50">—</span>
+              <% } %>
+            </td>
+
+            <td>
+              <% if (task.completedAt) { %>
+                <span class="bg-emerald-100 chip text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
+                  Completed
+                </span>
+              <% } else if (task.failedAt) { %>
+                <span class="bg-red-100 chip text-red-700 dark:bg-red-900/50 dark:text-red-300">
+                  Failed
+                </span>
+              <% } else if (task.rejectedAt) { %>
+                <span class="bg-orange-100 chip text-orange-700 dark:bg-orange-900/50 dark:text-orange-300">
+                  Rejected
+                </span>
+              <% } else { %>
+                <span class="bg-blue-100 chip text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
+                  In Progress
+                </span>
+              <% } %>
+            </td>
+          </tr>
+        <% }) %>
+      <% } %>
+    </tbody>
+  </table>
+
+  <% if (!items || !items.list || items.list.length === 0) { %>
+    <div class="empty-state">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-12">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
+      </svg>
+      <h3 class="heading-3 mt-4">No content tasks</h3>
+      <p class="body-2 text-raketa-foreground/70 mt-2">
+        <% if (Object.keys(_context.query).some(k => k.startsWith('f:'))) { %>
+          No tasks match the selected filters. Try adjusting your filters.
+        <% } else { %>
+          No translation workflow tasks have been created yet.
+        <% } %>
+      </p>
+    </div>
+  <% } %>
+
+  <%- pagination(items.pagination, _context) %>
+</div>
+
+<div data-sidebar="1" class="search-sidebar <%= Object.keys(_context.query).some(k => k.startsWith('f:')) ? '' : 'hidden' %>">
+  <span class="heading-2">Filter by</span>
+
+  <form action="/<%= _context.locale %>/content_tasks" method="GET" class="form mt-4">
+    <input type="hidden" name="order_direction" value="<%= _context.query.order_direction %>" />
+    <input type="hidden" name="order_by" value="<%= _context.query.order_by %>" />
+
+    <div class="mb-4">
+      <label for="f:locale" class="font-semibold hover:cursor-pointer body-3">Locale</label>
+      <select name="f:locale" id="f:locale">
+        <option value="">All Locales</option>
+        <% Object.keys(_context.locales).forEach(key => { %>
+          <option value="<%= key %>" <%= _context.query['f:locale'] === key ? 'selected' : '' %>>
+            <%= _context.locales[key].name %> (<%= key.toUpperCase() %>)
+          </option>
+        <% }) %>
+      </select>
+    </div>
+
+    <div class="mb-4">
+      <label for="f:author" class="font-semibold hover:cursor-pointer body-3">Author</label>
+      <select name="f:author" id="f:author">
+        <option value="">All Authors</option>
+        <% editors.forEach(editor => { %>
+          <option value="<%= editor.id %>" <%= _context.query['f:author'] === editor.id ? 'selected' : '' %>>
+            <%= editor.name %>
+          </option>
+        <% }) %>
+      </select>
+    </div>
+
+    <div class="mb-4">
+      <label for="f:status" class="font-semibold hover:cursor-pointer body-3">Status</label>
+      <select name="f:status" id="f:status">
+        <option value="">All Statuses</option>
+        <option value="IN_PROGRESS" <%= _context.query['f:status'] === 'IN_PROGRESS' ? 'selected' : '' %>>
+          In Progress
+        </option>
+        <option value="COMPLETED" <%= _context.query['f:status'] === 'COMPLETED' ? 'selected' : '' %>>
+          Completed
+        </option>
+        <option value="FAILED" <%= _context.query['f:status'] === 'FAILED' ? 'selected' : '' %>>
+          Failed
+        </option>
+      </select>
+    </div>
+
+    <div class="btn-toolbar">
+      <button type="submit" class="btn-primary">Filter</button>
+      <a href="/<%= _context.locale %>/content_tasks" class="btn-text">Clear filters</a>
+    </div>
+  </form>
+</div>

package/src/views/layouts/application.ejs

@@ -66,7 +66,8 @@
 
       <div class="my-4">
         <% _context.layout.sidebar.forEach((menu, idx) => { %>
-        <% if (menu.submenus) { %>
+        <% if (!menu) { %>
+        <% } else if (menu.submenus) { %>
         <% const pathMatchesMenuItem = menu.submenus.some(item => _context.path.includes(item.link)) %>
 
         <div class="relative group-[.expanded]:hidden group/item">

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

@@ -1,7 +1,14 @@
 <div>
+  <%
+    const hasActiveContentTask = utils.feature("contentTasks", _context) &&
+      resource.activeContentTask &&
+      !resource.activeContentTask.completedAt &&
+      !resource.activeContentTask.failedAt &&
+      !resource.activeContentTask.rejectedAt;
+  %>
   <div class="actions-toolbar">
     <form method="POST" action="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/${_context.resourceConfig.resourceType}_revisions` %>" class="inline-block">
-      <% if (resource.revisionsCount >= _context?.maxOpenRevisions) { %>
+      <% if (resource.revisionsCount >= _context?.maxOpenRevisions || hasActiveContentTask) { %>
       <button type="submit" class="btn-primary" disabled style="opacity: 50%;">
         Start revision
       </button>
@@ -12,6 +19,15 @@
       <% } %>
     </form>
 
+    <% if (hasActiveContentTask) { %>
+    <button type="button" class="btn-text has-icon" disabled style="opacity: 50%; cursor: not-allowed;">
+      <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="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
+      </svg>
+
+      Change URL
+    </button>
+    <% } else { %>
     <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/urls/new` %>" class="btn-text has-icon">
       <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="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
@@ -19,9 +35,10 @@
 
       Change URL
     </a>
+    <% } %>
 
     <form action="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/clones` %>" method="post" class="inline-block">
-      <button type="submit" class="btn-text has-icon">
+      <button type="submit" class="btn-text has-icon" <%= hasActiveContentTask ? 'disabled style="opacity: 50%;"' : '' %>>
         <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="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
         </svg>
@@ -30,6 +47,15 @@
       </button>
     </form>
 
+    <% if (hasActiveContentTask) { %>
+    <button type="button" class="btn-danger has-icon" disabled style="opacity: 50%; cursor: not-allowed;">
+      <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="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+      </svg>
+
+      Delete <%= Inflector.humanize(Inflector.downcase(_context.resourceConfig.resourceType)) %>
+    </button>
+    <% } else { %>
     <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/deletes/new` %>" class="btn-danger has-icon">
       <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="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
@@ -37,9 +63,14 @@
 
       Delete <%= Inflector.humanize(Inflector.downcase(_context.resourceConfig.resourceType)) %>
     </a>
+    <% } %>
   </div>
 
   <% if (_context.query?.revisions_count_error) { %>
   <div class="text-red-600">Cannot open a new revision. Current limit is <%= _context.maxOpenRevisions %>. </div>
   <% } %>
+
+  <% if (hasActiveContentTask) { %>
+  <div class="text-orange-700 mt-2 dark:text-orange-300">Actions are disabled while a content task is in progress.</div>
+  <% } %>
 </div>

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

@@ -0,0 +1,71 @@
+<div class="flex flex-wrap items-center gap-1 mb-6 -my-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) { %>
+  <%
+    const currentHasActiveTask = utils.feature("contentTasks", _context) &&
+      resource.activeContentTask &&
+      !resource.activeContentTask.completedAt &&
+      !resource.activeContentTask.failedAt &&
+      !resource.activeContentTask.rejectedAt;
+
+    const contentTaskMessage = currentHasActiveTask ? `${name}: ${Inflector.capitalize(resource.activeContentTask.workflow)} task in progress` : '';
+  %>
+
+  <span class="relative inline-block" title="<%= currentHasActiveTask ? contentTaskMessage : "" %>">
+    <img
+      title="<%= currentHasActiveTask ? contentTaskMessage : name %>"
+      src="<%= flag %>"
+      alt="<%= name %>"
+      class="border rounded-full size-6 dark:border-neutral-700"
+    />
+
+    <% if (currentHasActiveTask) { %>
+    <span class="absolute -top-0.5 -right-0.5 flex h-3 w-3">
+      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-raketa-primary opacity-75"></span>
+      <span class="relative inline-flex rounded-full h-3 w-3 bg-raketa-primary"></span>
+    </span>
+    <% } %>
+  </span>
+  <% } else if (resource.translations[key]) { %>
+  <% const hasActiveTask = resource.translations[key].active_content_task; %>
+  <% const contentTaskMessage = hasActiveTask ? `${name}: ${Inflector.capitalize(resource.translations[key].active_content_task.workflow)} task in progress` : ""; %>
+  <a
+    href="<%= `/${key}/${_context.resourceConfig.resourceTypePlural}/${resource.translations[key].id}` %>"
+    class="relative inline-block"
+    title="<%= hasActiveTask ? contentTaskMessage : "" %>"
+  >
+    <img
+      title="<%= hasActiveTask ? contentTaskMessage : name %>"
+      src="<%= flag %>"
+      alt="<%= name %>"
+      class="border rounded-full size-6 dark:border-neutral-700"
+    />
+
+    <% if (hasActiveTask) { %>
+    <span class="absolute -top-0.5 -right-0.5 flex h-3 w-3">
+      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-raketa-primary opacity-75"></span>
+      <span class="relative inline-flex rounded-full h-3 w-3 bg-raketa-primary"></span>
+    </span>
+    <% } %>
+  </a>
+  <% } else { %>
+  <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/translations/new?target_locale=${key}` %>">
+    <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="<%= [" transition-all ease-in-out duration-300 size-6 rounded-full border hover:opacity-100 dark:border-neutral-700", key === _context.locale ? "opacity-100" : "opacity-10"].join(" ") %>" />
+  </a>
+  <% } %>
+  <% }); %>
+
+  <% if (canBeTranslated) { %>
+  <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/translations/new` %>" class="ml-2 btn-text">
+    Translate
+  </a>
+  <% } %>
+</div>

package/src/views/resources/index.ejs

@@ -40,6 +40,11 @@
           <% if (item.revisionsCount > 0) { %>
           <span class="bg-orange-100 chip text-orange-700 dark:bg-orange-900/50 dark:text-orange-300"><%= item.revisionsCount !== 1 ? `${item.revisionsCount} open revisions` : 'Open revision' %></span>
           <% } %>
+          <% if (utils.feature("contentTasks", _context) && item.activeContentTask && !item.activeContentTask.completedAt && !item.activeContentTask.failedAt && !item.activeContentTask.rejectedAt) { %>
+          <span class="bg-blue-100 chip text-blue-700 dark:bg-blue-900/50 dark:text-blue-300" title="<%= item.activeContentTask.workflow ? `${item.activeContentTask.workflow} workflow` : 'Translation in progress' %>">
+            Content task in progress
+          </span>
+          <% } %>
 
           <% if (item.visibility !== "private") { %>
           <div class="mt-1">

package/src/views/resources/show.ejs

@@ -4,35 +4,7 @@
     <%- render_partial('./_shared/_toolbar.ejs') %>
   </div>
 
-  <div class="flex flex-wrap items-center gap-1 mb-6 -my-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) { %>
-    <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="border rounded-full size-6 dark:border-neutral-700" />
-    <% } else if (resource.translations[key]) { %>
-    <a href="<%= `/${key}/${_context.resourceConfig.resourceTypePlural}/${resource.translations[key].id}` %>">
-      <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="border rounded-full size-6 dark:border-neutral-700" />
-    </a>
-    <% } else { %>
-    <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/translations/new?target_locale=${key}` %>">
-      <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="<%= [" transition-all ease-in-out duration-300 size-6 rounded-full border hover:opacity-100 dark:border-neutral-700", key === _context.locale ? "opacity-100" : "opacity-10"].join(" ") %>" />
-    </a>
-    <% } %>
-    <% }); %>
-
-    <% if (canBeTranslated) { %>
-    <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/translations/new` %>" class="ml-2 btn-text">
-      Translate
-    </a>
-    <% } %>
-  </div>
+  <%- render_partial('./_shared/_translations_strip.ejs') %>
 
   <%
     const openedRevisions = []

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

@@ -30,6 +30,19 @@
         <% }) %>
       </div>
 
+      <% if (utils.feature("contentTasks", _context) && _context.locale === _context.defaultLocale) { %>
+      <div class="mb-4">
+        <label for="workflow" class="font-semibold hover:cursor-pointer body-3">Translation workflow</label>
+        <select name="resource[workflow]" id="workflow">
+          <option value="">Default (no workflow)</option>
+          <option value="lokalise" <%= resource.workflow === 'lokalise' ? 'selected' : '' %>>Lokalise workflow</option>
+        </select>
+        <p class="text-sm text-raketa-foreground/50 mt-1">
+          Select a workflow for the translation process. Lokalise workflow initiates a content task for external translation.
+        </p>
+      </div>
+      <% } %>
+
       <% if (errors?.resource && targetLocale) { %>
       <div>
         <% if (targetLocale !== _context.locale) { %>