>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3585452. --> Reported by: [tedbow](https://www.drupal.org/user/240860) Related to !935 >>> <h3 id="overview">Overview</h3> <p>Currently, you cannot make translations through the UI until a number of issues are resolved</p> <p>But we met with @lauriii and we generally know a couple of things</p> <ol> <li>For MVP: Translation will not happen in the Canvas UI. It will happen in content_translation/config_translation and/or TMGMT and its sub-modules</li> <li>We will need a method to preview non-default languages in the UI</li> </ol> <h3 id="proposed-resolution">Proposed resolution</h3> <p>What we will need </p> <ol> <li>A language dropdown<br> <img src="https://www.drupal.org/files/issues/2026-04-17/language-dropdown.png" alt="language dropdown"><br> This design is from Asymmetric translation but the dropdown should be similar <p>It should show all languages on the site. These can be found here admin/config/regional/language. It should not just show languages the current entity is translated for. This is for 2 reasons. 1) Regions do not have their own URL, so you need to see regions in a different language even if no page/template is in that language. 2) A page/template can look different in another language even if it falls back to the default language because the entities it references might have translations, and templates will display field values in that language even if there is no template translation</p> <p>The dropdown should appear and be enabled when either config_translation or content_translation is enabled. </p> <p>This is true for Pages and ContentTemplates. For Pages, even though they are content entities, if only config_translation is on, regions could be translated. For ContentTemplates, even though they are config entities, even if only content_translation is enabled, the preview nodes could be translated. </p></li> <li> Once the user selects a different language, it should open a view similar to the view you see when you click "Preview". We can't use the current Preview mode because that just displays the current layout HTML. (I, tedbow, am not a front end developer, so I am not sure how we should do this) </li> <li> The previewing of the non-default language can use the existing layout endpoint at <code>/canvas/api/v0/layout/{entity_type}/{entity}</code> but with a language prefix <code>fr/canvas/api/v0/layout/{entity_type}/{entity}</code> <p><code>\Drupal\Tests\canvas\Functional\TranslationTest::testTranslation </code> proves that you can request a translation of the layout; see the assertions</p> <div class="codeblock"> <pre><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br>self</span><span style="color: #007700">::</span><span style="color: #0000BB">assertSame</span><span style="color: #007700">(</span><span style="color: #0000BB">$expected_original_label</span><span style="color: #007700">, </span><span style="color: #0000BB">$get_name_in_api_response</span><span style="color: #007700">(</span><span style="color: #DD0000">'/canvas/api/v0/layout/node/1'</span><span style="color: #007700">));<br></span><span style="color: #0000BB">self</span><span style="color: #007700">::</span><span style="color: #0000BB">assertSame</span><span style="color: #007700">(</span><span style="color: #DD0000">"Drupal, c'est magnifique !"</span><span style="color: #007700">, </span><span style="color: #0000BB">$get_name_in_api_response</span><span style="color: #007700">(</span><span style="color: #DD0000">'/fr/canvas/api/v0/layout/node/1'</span><span style="color: #007700">));<br></span><span style="color: #0000BB">?&gt;</span></span></pre></div> </li> </ol> <p>Currently we can't make translations via the UI. To get around this:</p> <ol> <li>For manual testing, create <code>canvas_test_translation</code> to create translations on install for testing. <p>Create an entity and translation for each type: Page, Template, Content Template. </p> <p>See \Drupal\Tests\canvas\Functional\TranslationTest::createCanvasNodeWithTranslation; this creates a node, but creating a Page should be the same. </p> <p>For <code>ContentTemplate</code>'s we don't have an example in 1.x, so you will have to look at this <a href="https://git.drupalcode.org/project/canvas/-/merge_requests/898?file=8cd19b0519ffc218e1abb99edb8575b9b7a3715e#8cd19b0519ffc218e1abb99edb8575b9b7a3715e_68_83">https://git.drupalcode.org/project/canvas/-/merge_requests/898?file=8cd19b0519ffc218e1abb99edb8575b9b7a3715e#8cd19b0519ffc218e1abb99edb8575b9b7a3715e_68_83</a></p> <p>which is this MR <a href="https://git.drupalcode.org/project/canvas/-/merge_requests/898">https://git.drupalcode.org/project/canvas/-/merge_requests/898</a></p> <p>We don't have an example for PageRegion, but it should be similar to <code>ContentTemplate</code> (if this is a blocker, just skip PageRegion for now to get the issue moving) </p></li> <li> The minimum <code>canvas_test_translation</code> should create: <ul> <li>A canvas page with a header component and different text for the header in a translation</li> <li>A PageRegion with a header component and different text for the header in the config language override</li> <li>A ContentTemplate with a header component and different text for the header in the config language override<br> and a header component that is linked to the node title <p>There are a couple of other scenarios we can't test, but we should put @todo's to test later<br> <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3552924" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3552924</a></span><br> <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3583379" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3583379</a></span><br> (note to self, check if these issues are actually duplicates) </p></li> </ul> </li> <li>A playwright test can enable <code>canvas_test_translation</code> and test with the entities and the translations it makes. </li> </ol> <h3 id="ui-changes">User interface changes</h3> <p>When viewing a page and either config_translation or content translation is enabled and canvas_dev_translation is enabled:</p> <ol> <li>There should be a new dropdown to select a language to preview the entity in another language. It should show all languages enabled on the site; see /admin/config/regional/language</li> <li>When a language is selected, the user is shown the current layout in a modal similar to if they clicked "Preview" in the toolbar now</li> </ol> > Related issue: [Issue #3552924](https://www.drupal.org/node/3552924) > Related issue: [Issue #3583379](https://www.drupal.org/node/3583379) > Related issue: [Issue #3590196](https://www.drupal.org/node/3590196)