From 60e6b2a6e6508a48c84b89515e2268b5c4ebc4f7 Mon Sep 17 00:00:00 2001
From: Sami Ekblad <sami@vaadin.com>
Date: Thu, 20 Apr 2023 11:34:54 +0300
Subject: [PATCH] Split the Maven repository from dependency

Makes it easier to see what is needed. This also fixes #45
---
 frontend/views/addon/addon-view.css      |  8 ++++----
 frontend/views/addon/install-tabsheet.ts | 20 +++++++++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/views/addon/addon-view.css b/frontend/views/addon/addon-view.css
index 74a1cf2..f4aa9e5 100644
--- a/frontend/views/addon/addon-view.css
+++ b/frontend/views/addon/addon-view.css
@@ -420,7 +420,7 @@ addon-view install-tabsheet {
   font-size: var(--text-size-md);
 }
 
-[theme~="addon-version-menu"] :is(a, button) {
+[theme~="addon-version-menu"] :is(a, button, p) {
   -webkit-appearance: none;
   appearance: none;
   margin: 0;
@@ -437,18 +437,18 @@ addon-view install-tabsheet {
   border-radius: var(--roundness-md);
 }
 
-[theme~="addon-version-menu"] :is(a, button):hover {
+[theme~="addon-version-menu"] :is(a, button, p):hover {
   background-color: var(--blue-100);
   color: var(--blue-600);
   text-decoration: none;
 }
 
-[theme~="addon-version-menu"] :is(a, button):focus {
+[theme~="addon-version-menu"] :is(a, button, p):focus {
   outline: none;
   box-shadow: inset 0 0 0 2px var(--blue-400);
 }
 
-[theme~="addon-version-menu"] :is(a, button) span {
+[theme~="addon-version-menu"] :is(a, button, p) span {
   display: block;
   font-size: 0.8em;
   color: var(--secondary-text-color);
diff --git a/frontend/views/addon/install-tabsheet.ts b/frontend/views/addon/install-tabsheet.ts
index cd2e1da..04c0a70 100644
--- a/frontend/views/addon/install-tabsheet.ts
+++ b/frontend/views/addon/install-tabsheet.ts
@@ -40,17 +40,27 @@ export class InstallTabSheet extends Layout {
     create.onclick = () => { logAddonInstall(this.addon?.urlIdentifier, this.version?.name, "create", this.getCurrentUserId()); }
     create.innerHTML = '<div>Create project</div><span>Create and download a new project using this add-on</span>';
 
-    const copyMaven = document.createElement('button');
+    const copyMaven = document.createElement('p');
     copyMaven.onclick = () => {
       logAddonInstall(this.addon?.urlIdentifier, this.version?.name, "maven", this.getCurrentUserId());
-      this.copyToClipboard(this.version?.installs['Maven']);
+      const text = this.version?.installs['Maven'] || '';
+      const [textDep,textRepo] = text.split('\n<!-- Vaadin Maven repository -->\n') || '';
+      this.copyToClipboard(textDep);
 
       if (copyMaven.getElementsByTagName('pre').length == 0) {
         const  snippet = document.createElement('pre');
-        snippet.innerText = this.version?.installs['Maven'] || '';
-        copyMaven.appendChild(snippet);
+        snippet.textContent = textDep;
+        copyMaven.appendChild(snippet); 
+        if (textRepo) {
+          const repoInfo =  document.createElement('span');
+          const repoSnippet =  document.createElement('pre');
+          repoInfo.textContent = "Make sure you also have Vaadin Maven repository:"
+          repoSnippet.textContent = textRepo;
+          copyMaven.appendChild(repoInfo);
+          copyMaven.appendChild(repoSnippet);  
+        }
       }
-      copyMaven.firstElementChild!.textContent = 'Copied ✔';
+      copyMaven.firstElementChild!.textContent = 'Copied dependency to clipboard ✔';
       setTimeout(() => {
         copyMaven.firstElementChild!.textContent = 'Maven POM';
         this.updateInstallInfo();