[FEATURE] Permettre de masquer le champ JSON dans la preview modulix (P…

…IX-15830) #10868
1024pix · Dec 24, 2024 · d517ef1 · d517ef1
2 parents 2fc9530 + 0e4f3a5
commit d517ef1
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 24 deletions.
diff --git a/mon-pix/app/components/module/preview.gjs b/mon-pix/app/components/module/preview.gjs
@@ -1,3 +1,4 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
 import PixButtonLink from '@1024pix/pix-ui/components/pix-button-link';
 import PixTextarea from '@1024pix/pix-ui/components/pix-textarea';
 import { on } from '@ember/modifier';
@@ -13,6 +14,8 @@ export default class ModulixPreview extends Component {
   @service store;
   @service modulixPreviewMode;
 
+  @tracked moduleCodeDisplayed = false;
+
   @tracked
   module = `{
   "id": "0000000a-0000-0bcd-e000-0f0000gh0000",
@@ -130,10 +133,31 @@ export default class ModulixPreview extends Component {
     return this.formattedModule.transitionTexts.find((transition) => transition.grainId === grainId);
   }
 
+  @action
+  toggleModuleCodeEditor() {
+    this.moduleCodeDisplayed = !this.moduleCodeDisplayed;
+  }
+
   <template>
     {{pageTitle this.formattedModule.title}}
 
-    <div class="module-preview">
+    <div class="module-preview__buttons">
+      <PixButton @triggerAction={{this.toggleModuleCodeEditor}}>
+        {{t "pages.modulix.preview.showJson"}}
+      </PixButton>
+
+      <PixButtonLink
+        @variant="secondary"
+        @href="https://1024pix.github.io/modulix-editor/"
+        @size="small"
+        target="_blank"
+      >
+        {{! template-lint-disable "no-bare-strings" }}
+        Modulix Editor
+      </PixButtonLink>
+    </div>
+
+    <div class="module-preview {{if this.moduleCodeDisplayed 'module-preview--with-editor'}}">
       <aside class="module-preview__passage">
         <div class="module-preview-passage__title">
           <h1>{{this.formattedModule.title}}</h1>
@@ -164,24 +188,17 @@ export default class ModulixPreview extends Component {
       </aside>
 
       <main class="module-preview__form">
-        <PixButtonLink
-          @variant="tertiary"
-          @href="https://1024pix.github.io/modulix-editor/"
-          @size="small"
-          target="_blank"
-        >
-          {{! template-lint-disable "no-bare-strings" }}
-          Modulix Editor
-        </PixButtonLink>
-        <PixTextarea
-          class="module-preview-form__textarea"
-          @id="module"
-          @value={{this.module}}
-          @errorMessage={{this.errorMessage}}
-          {{on "change" this.updateModule}}
-        >
-          <:label>{{t "pages.modulix.preview.textarea-label"}}</:label>
-        </PixTextarea>
+        {{#if this.moduleCodeDisplayed}}
+          <PixTextarea
+            class="module-preview-form__textarea"
+            @id="module"
+            @value={{this.module}}
+            @errorMessage={{this.errorMessage}}
+            {{on "change" this.updateModule}}
+          >
+            <:label>{{t "pages.modulix.preview.textarea-label"}}</:label>
+          </PixTextarea>
+        {{/if}}
       </main>
     </div>
   </template>

diff --git a/mon-pix/app/styles/pages/_module-preview.scss b/mon-pix/app/styles/pages/_module-preview.scss
@@ -2,7 +2,18 @@
   @extend .modulix;
 
   display: grid;
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: 1fr;
+
+  &--with-editor {
+    grid-template-columns: 2fr 1fr;
+  }
+
+  &__buttons {
+    display: flex;
+    gap: var(--pix-spacing-2x);
+    justify-content: flex-end;
+    padding: var(--pix-spacing-3x);
+  }
 
   &__passage {
     @extend .module-passage;

diff --git a/mon-pix/tests/acceptance/module/preview-test.js b/mon-pix/tests/acceptance/module/preview-test.js
@@ -1,5 +1,5 @@
 import { fillByLabel, visit } from '@1024pix/ember-testing-library';
-import { currentURL } from '@ember/test-helpers';
+import { click, currentURL } from '@ember/test-helpers';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { setupApplicationTest } from 'ember-qunit';
 import { module, test } from 'qunit';
@@ -12,17 +12,18 @@ module('Acceptance | Module | Routes | Preview', function (hooks) {
   setupIntl(hooks);
 
   test('should allow to preview module', async function (assert) {
-    // given & when
+    // given
     const screen = await visit('/modules/preview');
 
-    assert.strictEqual(currentURL(), '/modules/preview');
-
+    // when
+    await click(screen.getByRole('button', { name: 'Afficher le JSON' }));
     await fillByLabel(
       'Contenu du Module',
       '{ "grains": [{ "id":"1", "type": "lesson", "title": "Preview", "components": [{ "type": "element", "element": {"type": "text", "content": "Preview du module" }}] }] }',
     );
 
     // then
+    assert.strictEqual(currentURL(), '/modules/preview');
     assert.dom(screen.getByText('Preview du module')).exists();
   });
 });
diff --git a/mon-pix/tests/integration/components/module/preview_test.gjs b/mon-pix/tests/integration/components/module/preview_test.gjs
@@ -1,4 +1,5 @@
 import { render } from '@1024pix/ember-testing-library';
+import { click } from '@ember/test-helpers';
 import ModulixPreview from 'mon-pix/components/module/preview';
 import { module, test } from 'qunit';
 
@@ -20,4 +21,24 @@ module('Integration | Component | Module | Preview', function (hooks) {
     assert.dom(linkToModulixEditor).exists();
     assert.strictEqual(linkToModulixEditor.href, expectedUrl);
   });
+
+  test('should hide json textarea by default', async function (assert) {
+    //  when
+    const screen = await render(<template><ModulixPreview /></template>);
+
+    // then
+    assert.dom(screen.queryByRole('textbox', { name: 'Contenu du Module' })).doesNotExist();
+  });
+
+  test('should display json textarea on button click', async function (assert) {
+    //  given
+    const screen = await render(<template><ModulixPreview /></template>);
+    const button = screen.getByRole('button', { name: 'Afficher le JSON' });
+
+    // when
+    await click(button);
+
+    // then
+    assert.dom(screen.queryByRole('textbox', { name: 'Contenu du Module' })).exists();
+  });
 });
diff --git a/mon-pix/translations/en.json b/mon-pix/translations/en.json
@@ -1621,6 +1621,7 @@
         }
       },
       "preview": {
+        "showJson": "Show JSON",
         "textarea-label": "Module content"
       },
       "qcm": {

diff --git a/mon-pix/translations/es.json b/mon-pix/translations/es.json
@@ -1631,6 +1631,7 @@
         }
       },
       "preview": {
+        "showJson": "Show JSON",
         "textarea-label": "Contenido del módulo"
       },
       "qcm": {

diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json
@@ -1622,6 +1622,7 @@
         }
       },
       "preview": {
+        "showJson": "Afficher le JSON",
         "textarea-label": "Contenu du Module"
       },
       "qcm": {

diff --git a/mon-pix/translations/nl.json b/mon-pix/translations/nl.json
@@ -1631,6 +1631,7 @@
         }
       },
       "preview": {
+        "showJson": "Show JSON",
         "textarea-label": "Inhoud module"
       },
       "qcm": {