From 9f0d7d128fd23c22944a1e054b72bac1a6f8cfad Mon Sep 17 00:00:00 2001
From: WithoutAName25 <withoutaname@withoutaname.eu>
Date: Wed, 2 Oct 2024 22:27:11 +0200
Subject: [PATCH] GH-2234 Fix snippet inconsistencies

The snippet is now extracted from the HTML via textContent and not generated separately to avoid inconsistencies
---
 .../src/components/card/ArtifactSnippet.vue   | 16 ++++++---
 .../src/components/card/RepositorySnippet.vue | 14 +++++---
 .../src/components/card/SnippetsCard.vue      | 15 ++++----
 .../src/store/maven/artifact.js               | 36 -------------------
 .../src/store/maven/repository.js             | 19 +---------
 5 files changed, 27 insertions(+), 73 deletions(-)
 delete mode 100644 reposilite-frontend/src/store/maven/artifact.js

diff --git a/reposilite-frontend/src/components/card/ArtifactSnippet.vue b/reposilite-frontend/src/components/card/ArtifactSnippet.vue
index e03b02a91..1c2b0bcf0 100644
--- a/reposilite-frontend/src/components/card/ArtifactSnippet.vue
+++ b/reposilite-frontend/src/components/card/ArtifactSnippet.vue
@@ -18,6 +18,7 @@
 import XmlTag from './XmlTag.vue'
 import CodeString from './CodeString.vue'
 import CodeBrackets from "./CodeBrackets.vue"
+import { computed, ref } from "vue";
 
 defineProps({
   configuration: {
@@ -29,23 +30,28 @@ defineProps({
     required: true
   }
 })
+
+const preElement = ref()
+const content = computed(() => preElement?.value?.textContent)
+
+defineExpose({ content })
 </script>
 
 <template>
-<pre v-if="configuration.lang === 'xml'">
+<pre v-if="configuration.lang === 'xml'" ref="preElement">
 <XmlTag name="dependency">
   <XmlTag name="groupId">{{ data.groupId }}</XmlTag>
   <XmlTag name="artifactId">{{ data.artifactId }}</XmlTag>
   <XmlTag name="version">{{ data.version }}</XmlTag>
 </XmlTag>
 </pre>
-<pre v-else-if="configuration.lang === 'groovy'">
+<pre v-else-if="configuration.lang === 'groovy'" ref="preElement">
 implementation <CodeString>{{ `${data.groupId}:${data.artifactId}:${data.version}` }}</CodeString>
 </pre>
-<pre v-else-if="configuration.lang === 'kotlin'">
+<pre v-else-if="configuration.lang === 'kotlin'" ref="preElement">
 implementation<CodeBrackets start="(" end=")"><CodeString>{{ `${data.groupId}:${data.artifactId}:${data.version}` }}</CodeString></CodeBrackets>
 </pre>
-<pre v-else-if="configuration.lang === 'scala'">
+<pre v-else-if="configuration.lang === 'scala'" ref="preElement">
 <CodeString>{{data.groupId}}</CodeString> %% <CodeString>{{data.artifactId}}</CodeString> %% <CodeString>{{data.version}}</CodeString>
 </pre>
-</template>
\ No newline at end of file
+</template>
diff --git a/reposilite-frontend/src/components/card/RepositorySnippet.vue b/reposilite-frontend/src/components/card/RepositorySnippet.vue
index b5b9f1965..cd7a165bd 100644
--- a/reposilite-frontend/src/components/card/RepositorySnippet.vue
+++ b/reposilite-frontend/src/components/card/RepositorySnippet.vue
@@ -18,7 +18,7 @@
 import XmlTag from './XmlTag.vue'
 import CodeString from './CodeString.vue'
 import CodeBrackets from "./CodeBrackets.vue"
-import {computed} from 'vue'
+import { computed, ref } from 'vue'
 
 const props = defineProps({
   configuration: {
@@ -40,29 +40,33 @@ const gradleId = computed(() => {
   return gradleIdUppercase.charAt(0).toLowerCase() + gradleIdUppercase.slice(1)
 })
 
+const preElement = ref(null)
+const content = computed(() => preElement?.value?.textContent)
+
+defineExpose({ content })
 </script>
 
 <template>
-<pre v-if="configuration.lang === 'xml'">
+<pre v-if="configuration.lang === 'xml'" ref="preElement">
 <XmlTag name="repository">
   <XmlTag name="id">{{ data.repoId }}</XmlTag>
   <XmlTag name="name">{{ data.title }}</XmlTag>
   <XmlTag name="url">{{ data.domain }}</XmlTag>
 </XmlTag>
 </pre>
-<pre v-else-if="configuration.lang === 'groovy'">
+<pre v-else-if="configuration.lang === 'groovy'" ref="preElement">
 maven <CodeBrackets start="{" end="}">
     name <CodeString>{{ gradleId }}</CodeString>
     url <CodeString>{{ data.domain }}</CodeString>
 </CodeBrackets>
 </pre>
-<pre v-else-if="configuration.lang === 'kotlin'">
+<pre v-else-if="configuration.lang === 'kotlin'" ref="preElement">
 maven <CodeBrackets start="{" end="}">
     name = <CodeString>{{ gradleId }}</CodeString>
     url = uri<CodeBrackets start="(" end=")"><CodeString>{{ data.domain }}</CodeString></CodeBrackets>
 </CodeBrackets>
 </pre>
-<pre v-else-if="configuration.lang === 'scala'">
+<pre v-else-if="configuration.lang === 'scala'" ref="preElement">
 resolvers +=
   <CodeString>{{data.repoId}}</CodeString>
      at <CodeString>{{data.domain}}</CodeString>
diff --git a/reposilite-frontend/src/components/card/SnippetsCard.vue b/reposilite-frontend/src/components/card/SnippetsCard.vue
index be6c389e3..f15229029 100644
--- a/reposilite-frontend/src/components/card/SnippetsCard.vue
+++ b/reposilite-frontend/src/components/card/SnippetsCard.vue
@@ -19,7 +19,6 @@ import { ref, watch, watchEffect } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { createToast } from 'mosha-vue-toastify'
 import { useSession } from '../../store/session'
-import useArtifacts from '../../store/maven/artifact'
 import useRepository from '../../store/maven/repository'
 import useMetadata from '../../store/maven/metadata'
 import CopyIcon from '../icons/CopyIcon.vue'
@@ -42,8 +41,7 @@ const configurations = [
   { name: 'SBT', lang: 'scala' }
 ]
 const data = ref({})
-const { createRepositories, createRepositorySnippet } = useRepository()
-const { createArtifactSnippet } = useArtifacts()
+const { createRepositories } = useRepository()
 const { parseMetadata } = useMetadata()
 const { client } = useSession()
 const { copy: copyText, isSupported: isCopySupported } = useClipboard()
@@ -96,13 +94,10 @@ watch(selectedTab, (to, from) => {
   transitionName.value = toIndex - fromIndex < 0 ? 'slide-left' : 'slide-right'
 })
 
+const snippetRef = ref()
+
 const copy = async () => {
-  let snippet = ''
-  if (data.value.type === 'artifact') {
-    snippet = createArtifactSnippet(selectedTab.value, data.value)
-  } else if (data.value.type === 'repository') {
-    snippet = createRepositorySnippet(selectedTab.value, data.value)
-  }
+  let snippet = snippetRef.value[0].content.trim()
   await copyText(snippet)
   return createToast('Snippet copied', { type: 'info', timeout: '2000' })
 }
@@ -136,11 +131,13 @@ const selectTab = (tab) =>
           <template v-if="entry.name === selectedTab">
             <RepositorySnippet
                 v-if="data.type === 'repository'"
+                ref="snippetRef"
                 :configuration="entry"
                 :data="data"
             />
             <ArtifactSnippet
                 v-else-if="data.type === 'artifact'"
+                ref="snippetRef"
                 :configuration="entry"
                 :data="data"
             />
diff --git a/reposilite-frontend/src/store/maven/artifact.js b/reposilite-frontend/src/store/maven/artifact.js
deleted file mode 100644
index 516ecbb73..000000000
--- a/reposilite-frontend/src/store/maven/artifact.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright (c) 2023 dzikoysk
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default function useArtifact() {
-  const createArtifactSnippet = (lang, { groupId, artifactId, version }) => {
-    switch (lang) {
-      case "Maven": return `
-<dependency>
-  <groupId>${groupId}</groupId>
-  <artifactId>${artifactId}</artifactId>
-  <version>${version}</version>
-</dependency>`.trim()
-      case "Gradle Groovy": return `implementation "${groupId}:${artifactId}:${version}"`
-      case "Gradle Kotlin": return `implementation("${groupId}:${artifactId}:${version}")`
-      case "SBT": return `"${groupId}" %% "${artifactId}" %% "${version}"`
-      default: return ""
-    }
-  }
-
-  return {
-    createArtifactSnippet
-  }
-}
\ No newline at end of file
diff --git a/reposilite-frontend/src/store/maven/repository.js b/reposilite-frontend/src/store/maven/repository.js
index 6698499b7..528305ce3 100644
--- a/reposilite-frontend/src/store/maven/repository.js
+++ b/reposilite-frontend/src/store/maven/repository.js
@@ -34,24 +34,7 @@ export default function useRepository() {
     return { type: "repository", repoId, title, domain }
   }
 
-  const createRepositorySnippet = (name, { repoId, title, domain }) => {
-    switch (name) {
-      case "Maven": return `
-<repository>
-  <id>${repoId}</id>
-  <name>${title}</name>
-  <url>${domain}</url>
-</repository>`.trim()
-      case "Gradle Groovy": return `maven {\n    url "${domain}"\n}`
-      case "Gradle Kotlin": return `maven {\n    url = uri("${domain}")\n}`
-      case "SBT": return `resolvers +=\n  "${repoId}" \n     at "${domain}"`
-      default: return ""
-    }
-  }
-
-
   return {
-    createRepositories,
-    createRepositorySnippet
+    createRepositories
   }
 }