From ea87a1287d08968909c3d5db0f83e71a2650cc52 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Thu, 12 Oct 2023 07:05:04 +0200
Subject: [PATCH 1/5] BGDIINF_SB-2430: Improved sharing embed previzualization

---
 .../menu/components/share/MenuShareEmbed.vue  | 82 +++++++++++--------
 .../share/MenuShareShortLinkInput.vue         |  8 +-
 src/setup-fontawesome.js                      |  2 +
 3 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/src/modules/menu/components/share/MenuShareEmbed.vue b/src/modules/menu/components/share/MenuShareEmbed.vue
index 6b10f8d23..9109a9560 100644
--- a/src/modules/menu/components/share/MenuShareEmbed.vue
+++ b/src/modules/menu/components/share/MenuShareEmbed.vue
@@ -39,14 +39,11 @@
             fluid
             @close="togglePreviewModal"
         >
-            <div class="embed-preview-modal">
-                <div
-                    class="d-flex embed-preview-modal-tools mb-1"
-                    :class="{ 'custom-size': isPreviewSizeCustom }"
-                >
+            <div class="embed-preview-modal" :style="embedPreviewModalWidth">
+                <div class="d-flex flex-row mb-2" :class="{ 'custom-size': isPreviewSizeCustom }">
                     <select
                         v-model="currentPreviewSize"
-                        class="embed-preview-modal-size-selector form-select w-auto"
+                        class="embed-preview-modal-size-selector form-select"
                         data-cy="menu-share-embed-iframe-size-selector"
                     >
                         <option
@@ -60,7 +57,7 @@
                         </option>
                     </select>
                     <MenuShareShortLinkInput
-                        class="flex-grow-1 ms-1"
+                        class="ms-1 flex-grow-1"
                         :with-text="false"
                         :small="false"
                         :short-link="iFrameLink"
@@ -69,34 +66,32 @@
                         data-cy="menu-share-embed-iframe-snippet"
                     />
                 </div>
-                <div v-if="isPreviewSizeCustom" class="row mb-1">
-                    <div class="col-sm-7">
-                        <div class="input-group">
-                            <input
-                                v-if="!customSize.fullWidth"
-                                v-model="customSize.width"
-                                type="number"
-                                class="form-control"
-                                data-cy="menu-share-embed-iframe-custom-width"
-                            />
-                            <input
-                                v-else
-                                class="form-control form-control-plaintext text-center"
-                                type="text"
-                                value="100%"
-                                readonly
-                                data-cy="menu-share-embed-iframe-custom-width"
-                            />
-                            <span class="input-group-text">x</span>
-                            <input
-                                v-model="customSize.height"
-                                type="number"
-                                class="form-control"
-                                data-cy="menu-share-embed-iframe-custom-height"
-                            />
-                        </div>
-                    </div>
-                    <div class="col-sm-5 align-self-center">
+                <div v-if="isPreviewSizeCustom" class="d-flex flex-row mb-2">
+                    <input
+                        v-if="!customSize.fullWidth"
+                        v-model="customSize.width"
+                        type="number"
+                        class="form-control text-center custom-preview-input"
+                        data-cy="menu-share-embed-iframe-custom-width"
+                    />
+                    <input
+                        v-else
+                        class="form-control form-control-plaintext custom-preview-input text-center"
+                        type="text"
+                        value="100 %"
+                        readonly
+                        data-cy="menu-share-embed-iframe-custom-width"
+                    />
+                    <span class="p-2">
+                        <font-awesome-icon :icon="['fas', 'xmark']" />
+                    </span>
+                    <input
+                        v-model="customSize.height"
+                        type="number"
+                        class="form-control custom-preview-input text-center"
+                        data-cy="menu-share-embed-iframe-custom-height"
+                    />
+                    <div class="align-self-center ps-2">
                         <div class="form-check">
                             <input
                                 id="fullWidthCheckbox"
@@ -122,8 +117,9 @@
                     :style="iFrameStyle"
                     allow="geolocation"
                 ></iframe>
+
                 <!-- eslint-disable vue/no-v-html-->
-                <div class="small" v-html="$t('share_disclaimer')"></div>
+                <div class="small text-wrap" v-html="$t('share_disclaimer')"></div>
                 <!-- eslint-enable vue/no-v-html-->
             </div>
         </ModalWithBackdrop>
@@ -197,6 +193,10 @@ export default {
         }
     },
     computed: {
+        embedPreviewModalWidth() {
+            // User the iframe with as maximal width for the embed preview modal window
+            return { 'max-width': this.iFrameWidth }
+        },
         isPreviewSizeCustom() {
             return this.currentPreviewSize.i18nKey === EmbedSizes.CUSTOM.i18nKey
         },
@@ -255,7 +255,17 @@ export default {
         display: block;
     }
 }
+
+.embed-preview-modal {
+    min-width: 26rem;
+}
+
 .embed-preview-modal-size-selector {
     cursor: pointer;
+    max-width: 15rem;
+}
+
+.custom-preview-input {
+    max-width: 6rem;
 }
 </style>
diff --git a/src/modules/menu/components/share/MenuShareShortLinkInput.vue b/src/modules/menu/components/share/MenuShareShortLinkInput.vue
index 844454999..059aa3064 100644
--- a/src/modules/menu/components/share/MenuShareShortLinkInput.vue
+++ b/src/modules/menu/components/share/MenuShareShortLinkInput.vue
@@ -4,7 +4,7 @@
         <div class="input-group" :class="{ 'input-group-sm': small }">
             <input
                 type="text"
-                class="form-control"
+                class="form-control input-text-to-copy"
                 readonly="readonly"
                 :value="shortLink"
                 data-cy="menu-share-shortlink-input"
@@ -76,3 +76,9 @@ export default {
     },
 }
 </script>
+
+<style lang="scss" scoped>
+.input-text-to-copy {
+    width: 0; // here we set the width to 0 in order to allow to shrink to the outer component
+}
+</style>
diff --git a/src/setup-fontawesome.js b/src/setup-fontawesome.js
index 15f2fbc54..963ba472f 100644
--- a/src/setup-fontawesome.js
+++ b/src/setup-fontawesome.js
@@ -54,6 +54,7 @@ import {
     faTimesCircle,
     faUser,
     faWindowMinimize,
+    faXmark,
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -102,6 +103,7 @@ library.add(
     faTimesCircle,
     faUser,
     faWindowMinimize,
+    faXmark,
     // Regular
     faCheckSquare,
     faClock,

From 1cd15a5a18968d909a9ffde7d5a45dce7cf4f3bd Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Thu, 12 Oct 2023 09:17:37 +0200
Subject: [PATCH 2/5] Allow &nbsp; character in translation of button

The non-breaking space character of the french and italian where displayed
as &nbsp;.

It seems that in vue template we are not allowed to use html entity but need to
use the escape character for nbsp, see https://lightrun.com/answers/kazupon-vue-i18n-non-breaking-space-nbsp-and-other-special-chars
---
 .../menu/components/share/MenuShareShortLinkInput.vue    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/modules/menu/components/share/MenuShareShortLinkInput.vue b/src/modules/menu/components/share/MenuShareShortLinkInput.vue
index 059aa3064..258ab690c 100644
--- a/src/modules/menu/components/share/MenuShareShortLinkInput.vue
+++ b/src/modules/menu/components/share/MenuShareShortLinkInput.vue
@@ -15,7 +15,7 @@
                 data-cy="menu-share-shortlink-copy-button"
                 @click="copyShortLinkInClipboard"
             >
-                {{ $t(copiedInClipboard ? copiedText : copyText) }}
+                {{ buttonText }}
             </button>
         </div>
     </div>
@@ -55,6 +55,13 @@ export default {
             timeoutCopied: null,
         }
     },
+    computed: {
+        buttonText() {
+            return this.$i18n
+                .t(this.copiedInClipboard ? this.copiedText : this.copyText)
+                .replace('&nbsp;', '\xa0')
+        },
+    },
     watch: {
         shortLink() {
             this.clearIsCopiedInClipboard()

From e71064b27baa17723c1a8b36dc127a6f2b40c69e Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Thu, 12 Oct 2023 15:35:46 +0200
Subject: [PATCH 3/5] BGDIINF_SB-2430: Renamed generic component

---
 .../menu/components/share/MenuShareEmbed.vue  | 11 +++---
 ...Input.vue => MenuShareInputCopyButton.vue} | 35 +++++++++----------
 .../components/share/MenuShareSection.vue     | 12 +++++--
 .../integration/shareShortLink.cy.js          |  2 +-
 4 files changed, 31 insertions(+), 29 deletions(-)
 rename src/modules/menu/components/share/{MenuShareShortLinkInput.vue => MenuShareInputCopyButton.vue} (71%)

diff --git a/src/modules/menu/components/share/MenuShareEmbed.vue b/src/modules/menu/components/share/MenuShareEmbed.vue
index 9109a9560..5e9b0b7b9 100644
--- a/src/modules/menu/components/share/MenuShareEmbed.vue
+++ b/src/modules/menu/components/share/MenuShareEmbed.vue
@@ -56,13 +56,10 @@
                             {{ $t(size.i18nKey) }}
                         </option>
                     </select>
-                    <MenuShareShortLinkInput
+                    <MenuShareInputCopyButton
                         class="ms-1 flex-grow-1"
-                        :with-text="false"
                         :small="false"
-                        :short-link="iFrameLink"
-                        :copy-text="'copy_cta'"
-                        :copied-text="'copy_done'"
+                        :input-text="iFrameLink"
                         data-cy="menu-share-embed-iframe-snippet"
                     />
                 </div>
@@ -127,7 +124,7 @@
 </template>
 
 <script>
-import MenuShareShortLinkInput from '@/modules/menu/components/share/MenuShareShortLinkInput.vue'
+import MenuShareInputCopyButton from '@/modules/menu/components/share/MenuShareInputCopyButton.vue'
 import ModalWithBackdrop from '@/utils/ModalWithBackdrop.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 // importing directly the vue component, see https://github.com/ivanvermeyen/vue-collapse-transition/issues/5
@@ -169,7 +166,7 @@ const EmbedSizes = {
 export default {
     components: {
         FontAwesomeIcon,
-        MenuShareShortLinkInput,
+        MenuShareInputCopyButton,
         ModalWithBackdrop,
         CollapseTransition,
     },
diff --git a/src/modules/menu/components/share/MenuShareShortLinkInput.vue b/src/modules/menu/components/share/MenuShareInputCopyButton.vue
similarity index 71%
rename from src/modules/menu/components/share/MenuShareShortLinkInput.vue
rename to src/modules/menu/components/share/MenuShareInputCopyButton.vue
index 258ab690c..90a1d33ae 100644
--- a/src/modules/menu/components/share/MenuShareShortLinkInput.vue
+++ b/src/modules/menu/components/share/MenuShareInputCopyButton.vue
@@ -1,19 +1,19 @@
 <template>
-    <div v-if="shortLink">
-        <label v-if="withText">{{ $t('share_link') }}: </label>
+    <div v-if="inputText">
+        <label v-if="labelText">{{ labelText }}: </label>
         <div class="input-group" :class="{ 'input-group-sm': small }">
             <input
                 type="text"
                 class="form-control input-text-to-copy"
                 readonly="readonly"
-                :value="shortLink"
-                data-cy="menu-share-shortlink-input"
+                :value="inputText"
+                data-cy="menu-share-input-copy-button"
                 @focus="$event.target.select()"
             />
             <button
                 class="btn btn-outline-secondary"
-                data-cy="menu-share-shortlink-copy-button"
-                @click="copyShortLinkInClipboard"
+                data-cy="menu-share-input-copy-button"
+                @click="copyInputToClipboard"
             >
                 {{ buttonText }}
             </button>
@@ -23,30 +23,29 @@
 
 <script>
 /**
- * Simple input containing the current short link of the app, with a helper button to copy the short
- * link to the clipboard
+ * Simple input with a helper button to copy the input value to the clipboard
  */
 export default {
     props: {
-        shortLink: {
+        inputText: {
             type: String,
             default: null,
         },
-        withText: {
-            type: Boolean,
-            default: true,
-        },
         small: {
             type: Boolean,
             default: true,
         },
         copyText: {
             type: String,
-            default: 'copy_url',
+            default: 'copy_cta', // 'copy_url',
         },
         copiedText: {
             type: String,
-            default: 'copy_success',
+            default: 'copy_done', // 'copy_success',
+        },
+        labelText: {
+            type: String,
+            default: null,
         },
     },
     data() {
@@ -63,7 +62,7 @@ export default {
         },
     },
     watch: {
-        shortLink() {
+        inputText() {
             this.clearIsCopiedInClipboard()
         },
     },
@@ -75,8 +74,8 @@ export default {
             this.copiedInClipboard = false
             clearTimeout(this.timeoutCopied)
         },
-        copyShortLinkInClipboard() {
-            navigator.clipboard.writeText(this.shortLink)
+        copyInputToClipboard() {
+            navigator.clipboard.writeText(this.inputText)
             this.copiedInClipboard = true
             this.timeoutCopied = setTimeout(this.clearIsCopiedInClipboard, 2500)
         },
diff --git a/src/modules/menu/components/share/MenuShareSection.vue b/src/modules/menu/components/share/MenuShareSection.vue
index 5c82ccfda..85b471e7a 100644
--- a/src/modules/menu/components/share/MenuShareSection.vue
+++ b/src/modules/menu/components/share/MenuShareSection.vue
@@ -11,7 +11,13 @@
         <FontAwesomeIcon v-if="!shortLink" icon="spinner" spin size="2x" class="p-2" />
         <div v-if="shortLink" class="p-2">
             <MenuShareSocialNetworks :short-link="shortLink" class="pt-1" />
-            <MenuShareShortLinkInput :short-link="shortLink" class="px-2 py-3" />
+            <MenuShareInputCopyButton
+                :input-text="shortLink"
+                :label-text="$t('share_link')"
+                :copy-text="'copy_url'"
+                :copied-text="'copy_success'"
+                class="px-2 py-3"
+            />
             <MenuShareEmbed :short-link="embeddedShortLink" class="pb-1" />
         </div>
     </MenuSection>
@@ -20,7 +26,7 @@
 <script>
 import MenuSection from '@/modules/menu/components/menu/MenuSection.vue'
 import MenuShareEmbed from '@/modules/menu/components/share/MenuShareEmbed.vue'
-import MenuShareShortLinkInput from '@/modules/menu/components/share/MenuShareShortLinkInput.vue'
+import MenuShareInputCopyButton from '@/modules/menu/components/share/MenuShareInputCopyButton.vue'
 import MenuShareSocialNetworks from '@/modules/menu/components/share/MenuShareSocialNetworks.vue'
 import { mapActions, mapState } from 'vuex'
 
@@ -28,7 +34,7 @@ import { mapActions, mapState } from 'vuex'
 export default {
     components: {
         MenuShareEmbed,
-        MenuShareShortLinkInput,
+        MenuShareInputCopyButton,
         MenuShareSocialNetworks,
         MenuSection,
     },
diff --git a/tests/e2e-cypress/integration/shareShortLink.cy.js b/tests/e2e-cypress/integration/shareShortLink.cy.js
index d27cb5bbd..cb9f6c142 100644
--- a/tests/e2e-cypress/integration/shareShortLink.cy.js
+++ b/tests/e2e-cypress/integration/shareShortLink.cy.js
@@ -156,7 +156,7 @@ describe('Testing the share menu', () => {
         () => {
             const checkIFrameSnippetSize = (width, height) => {
                 cy.get(
-                    '[data-cy="menu-share-embed-iframe-snippet"] [data-cy="menu-share-shortlink-input"]'
+                    '[data-cy="menu-share-embed-iframe-snippet"] [data-cy="menu-share-input-copy-button"]'
                 )
                     .should('contain.value', `width: ${width}`)
                     .should('contain.value', `height: ${height}`)

From 3402ac10dbc82c3f4008d0c19790438d2b003c96 Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Thu, 12 Oct 2023 16:06:27 +0200
Subject: [PATCH 4/5] Fixed e2e tests

---
 tests/e2e-cypress/integration/shareShortLink.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e-cypress/integration/shareShortLink.cy.js b/tests/e2e-cypress/integration/shareShortLink.cy.js
index cb9f6c142..ade650e77 100644
--- a/tests/e2e-cypress/integration/shareShortLink.cy.js
+++ b/tests/e2e-cypress/integration/shareShortLink.cy.js
@@ -225,7 +225,7 @@ describe('Testing the share menu', () => {
                     .click()
                 cy.get('[data-cy="menu-share-embed-iframe-custom-width"]')
                     .should('be.visible')
-                    .should('contain.value', '100%')
+                    .should('contain.value', '100 %')
                     .should('have.attr', 'readonly')
                 checkIFrameSnippetSize('100%', 300)
             })

From bfec254183d4a9abf9a1c5501ae052689b17faed Mon Sep 17 00:00:00 2001
From: Brice Schaffner <brice.schaffner@swisstopo.ch>
Date: Fri, 13 Oct 2023 07:56:48 +0200
Subject: [PATCH 5/5] BGDIINF_SB-2430: Improved code based on code review

---
 src/modules/menu/components/share/MenuShareEmbed.vue           | 2 +-
 src/modules/menu/components/share/MenuShareInputCopyButton.vue | 2 +-
 src/modules/menu/components/share/MenuShareSection.vue         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/menu/components/share/MenuShareEmbed.vue b/src/modules/menu/components/share/MenuShareEmbed.vue
index 5e9b0b7b9..f109e23d2 100644
--- a/src/modules/menu/components/share/MenuShareEmbed.vue
+++ b/src/modules/menu/components/share/MenuShareEmbed.vue
@@ -191,7 +191,7 @@ export default {
     },
     computed: {
         embedPreviewModalWidth() {
-            // User the iframe with as maximal width for the embed preview modal window
+            // Uses the iframe's width as maximal width for the entire modal window
             return { 'max-width': this.iFrameWidth }
         },
         isPreviewSizeCustom() {
diff --git a/src/modules/menu/components/share/MenuShareInputCopyButton.vue b/src/modules/menu/components/share/MenuShareInputCopyButton.vue
index 90a1d33ae..181802a84 100644
--- a/src/modules/menu/components/share/MenuShareInputCopyButton.vue
+++ b/src/modules/menu/components/share/MenuShareInputCopyButton.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="inputText">
-        <label v-if="labelText">{{ labelText }}: </label>
+        <label v-if="labelText">{{ $t(labelText) }}: </label>
         <div class="input-group" :class="{ 'input-group-sm': small }">
             <input
                 type="text"
diff --git a/src/modules/menu/components/share/MenuShareSection.vue b/src/modules/menu/components/share/MenuShareSection.vue
index 85b471e7a..a0a687940 100644
--- a/src/modules/menu/components/share/MenuShareSection.vue
+++ b/src/modules/menu/components/share/MenuShareSection.vue
@@ -13,7 +13,7 @@
             <MenuShareSocialNetworks :short-link="shortLink" class="pt-1" />
             <MenuShareInputCopyButton
                 :input-text="shortLink"
-                :label-text="$t('share_link')"
+                :label-text="'share_link'"
                 :copy-text="'copy_url'"
                 :copied-text="'copy_success'"
                 class="px-2 py-3"