fix:feature/1826-warning message moved to proper place, license change checked for the last version

Author: aisiklar

app/components/LicenseChangeWarning.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useLicenseChanges } from '~/composables/useLicenseChanges'
+
+const props = defineProps<{
+  license?: string
+  packageName?: string
+  resolvedVersion: string | null | undefined
+}>()
+
+const licenseChanges = useLicenseChanges(
+  () => props.packageName,
+  () => props.resolvedVersion,
+)
+
+const changes = computed(() => licenseChanges.data.value?.changes ?? [])
+
+const licenseChangeText = computed(() =>
+  changes.value
+    .map(item =>
+      $t('package.versions.license_change_item', {
+        from: item.from,
+        to: item.to,
+        version: item.version,
+      }),
+    )
+    .join('; '),
+)
+</script>
+
+<template>
+  <div
+    v-if="changes && changes.length > 0"
+    class="border border-amber-600/40 bg-amber-500/10 rounded-lg mt-1 gap-x-1 py-2 px-3"
+    :aria-label="$t('package.versions.license_change_help')"
+  >
+    <p class="text-md text-amber-800 dark:text-amber-400 flex items-center gap-2">
+      <span
+        class="i-lucide:alert-triangle w-4 h-4 flex-shrink-0"
+        role="img"
+        :aria-label="$t('package.versions.license_change_help')"
+      />
+      {{ $t('package.versions.license_change_warning') }}
+    </p>
+    <p class="text-md text-amber-800 dark:text-amber-400 mt-1">
+      <i18n-t keypath="package.versions.changed_license" tag="span">
+        <template #license_change>{{ licenseChangeText }}</template>
+      </i18n-t>
+    </p>
+  </div>
+</template>
+
+<style scoped></style>

app/components/LicenseDisplay.vue

@@ -1,29 +1,11 @@
 <script setup lang="ts">
 import { parseLicenseExpression } from '#shared/utils/spdx'
 
-import { useLicenseChanges } from '~/composables/useLicenseChanges'
-
 const props = defineProps<{
   license: string
-  packageName?: string
 }>()
 
 const tokens = computed(() => parseLicenseExpression(props.license))
-const licenseChanges = useLicenseChanges(() => props.packageName)
-
-const changes = computed(() => licenseChanges.data.value?.changes ?? [])
-
-const licenseChangeText = computed(() =>
-  changes.value
-    .map(item =>
-      $t('package.versions.license_change_item', {
-        from: item.from,
-        to: item.to,
-        version: item.version,
-      }),
-    )
-    .join('; '),
-)
 
 const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'license' && t.url))
 </script>
@@ -50,31 +32,4 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
       aria-hidden="true"
     />
   </span>
-  <div
-    v-if="changes.length > 0"
-    class="border border-amber-600/40 bg-amber-500/10 rounded-lg inline-flex justify-start items-center mt-1 gap-x-1 py-[2px] px-[3px]"
-  >
-    <p class="text-md text-amber-800 dark:text-amber-400">
-      {{ $t('package.versions.license_change_warning') }}
-    </p>
-    <TooltipApp interactive position="top">
-      <span
-        tabindex="0"
-        class="block cursor-help shrink-0 -m-2 p-2 -me-1 focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
-      >
-        <span
-          class="block i-lucide:info w-3.5 h-3.5 text-fg-subtle"
-          role="img"
-          :aria-label="$t('package.versions.license_change_help')"
-        />
-      </span>
-      <template #content>
-        <p class="text-xs text-fg-muted">
-          <i18n-t keypath="package.versions.changed_license" tag="span">
-            <template #license_change>{{ licenseChangeText }}</template>
-          </i18n-t>
-        </p>
-      </template>
-    </TooltipApp>
-  </div>
 </template>

app/composables/useLicenseChanges.ts

@@ -26,19 +26,26 @@ interface NpmRegistryResponse {
 /**
  * Composable to detect license changes across all versions of a package
  */
-export function useLicenseChanges(packageName: MaybeRefOrGetter<string | null | undefined>) {
+export function useLicenseChanges(
+  packageName: MaybeRefOrGetter<string | null | undefined>,
+  resolvedVersion: MaybeRefOrGetter<string | null | undefined> = () => undefined,
+) {
   return useAsyncData<LicenseChangesResult>(
-    () => `license-changes:${toValue(packageName)}`,
+    () => {
+      const name = toValue(packageName)
+      const version = toValue(resolvedVersion) ?? 'latest'
+      return `license-changes:${name}:${version}`
+    },
     async () => {
       const name = toValue(packageName)
+      const resolvedVer = toValue(resolvedVersion)
       if (!name) return { changes: [] }
 
       // Fetch full package metadata from npm registry
       const url = `https://registry.npmjs.org/${name}`
       const data = await $fetch<NpmRegistryResponse>(url)
 
       const changes: LicenseChange[] = []
-      let prevLicense: string | undefined = undefined
 
       // `data.versions` is an object with version keys
       const versions = Object.values(data.versions) as NpmRegistryVersion[]
@@ -52,23 +59,30 @@ export function useLicenseChanges(packageName: MaybeRefOrGetter<string | null |
         return dateA - dateB
       })
 
-      // Detect license changes
-      for (const version of versions) {
-        const license = (version.license as string) ?? 'UNKNOWN'
-        if (prevLicense && license !== prevLicense) {
-          changes.push({
-            from: prevLicense,
-            to: license,
-            version: version.version as string,
-          })
+      // When resolvedVer is not provided, check changes across all versions
+      const targetVersion = resolvedVer ?? versions[versions.length - 1]?.version
+
+      if (targetVersion) {
+        const resolvedIndex = versions.findIndex(v => v.version === targetVersion)
+
+        if (resolvedIndex > 0) {
+          const currentLicense = (versions[resolvedIndex]?.license as string) ?? 'UNKNOWN'
+          const previousLicense = (versions[resolvedIndex - 1]?.license as string) ?? 'UNKNOWN'
+
+          if (currentLicense !== previousLicense) {
+            changes.push({
+              from: previousLicense,
+              to: currentLicense,
+              version: (versions[resolvedIndex]?.version as string) || 'UNKNOWN',
+            })
+          }
         }
-        prevLicense = license
       }
       return { changes }
     },
     {
       default: () => ({ changes: [] }),
-      watch: [() => toValue(packageName)],
+      watch: [() => toValue(packageName), () => toValue(resolvedVersion)],
     },
   )
 }

app/pages/package/[[org]]/[name].vue

@@ -459,6 +459,15 @@ const versionUrlPattern = computed(
   () => `/package/${pkg.value?.name || packageName.value}/v/{version}`,
 )
 
+//delete
+watch(
+  resolvedVersion,
+  newV => {
+    console.log('#1 resolvedVersion ', newV)
+  },
+  { immediate: true },
+)
+
 const dependencyCount = computed(() => getDependencyCount(displayVersion.value))
 
 const numberFormatter = useNumberFormatter()
@@ -582,11 +591,7 @@ const showSkeleton = shallowRef(false)
                 {{ $t('package.stats.license') }}
               </dt>
               <dd class="font-mono text-sm text-fg">
-                <LicenseDisplay
-                  v-if="pkg.license"
-                  :license="pkg.license"
-                  :package-name="pkg.name"
-                />
+                <LicenseDisplay v-if="pkg.license" :license="pkg.license" />
                 <span v-else>{{ $t('package.license.none') }}</span>
               </dd>
             </div>
@@ -887,6 +892,8 @@ const showSkeleton = shallowRef(false)
         </section>
 
         <div class="space-y-6" :class="$style.areaVulns">
+          <!-- license change warning -->
+          <LicenseChangeWarning :packageName="pkg.name" :resolvedVersion="resolvedVersion" />
           <!-- Bad package warning -->
           <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
           <!-- Size / dependency increase notice -->

i18n/locales/en.json

@@ -435,8 +435,8 @@
       "license_change_help": "License Change Details",
       "license_change_item": "from {from} to {to} at version {version}",
       "filter_tooltip": "Filter versions using a {link}. For example, ^3.0.0 shows all 3.x versions.",
-      "changed_license": "The license was changed: {license_change}",
-      "license_change_warning": "change!",
+      "changed_license": "The license was changed {license_change}",
+      "license_change_warning": "License change!",
       "filter_tooltip_link": "semver range",
       "no_matches": "No versions match this range",
       "copy_alt": {

i18n/locales/tr-TR.json

@@ -390,7 +390,7 @@
       "license_change_item": "{version} sürümünde {from}'den {to}'ya",
       "filter_tooltip": "Sürümleri {link} kullanarak filtreleyin. Örneğin, ^3.0.0 tüm 3.x sürümlerini gösterir.",
       "changed_license": "Lisans değişikliği gerçekleşti: {license_change}",
-      "license_change_warning": "değişiklik!",
+      "license_change_warning": "Lisans değişikliği!",
       "filter_tooltip_link": "semver aralığı",
       "no_matches": "Bu aralığa uygun sürüm yok",
       "copy_alt": {