feat(interface): improve GitLab support (#303)

NodeSecure · Dec 4, 2023 · 7776e84 · 7776e84
1 parent 3b8eb0d
commit 7776e84
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 80 deletions.
diff --git a/public/common/utils.js b/public/common/utils.js
@@ -7,68 +7,26 @@ import { createExpandableSpan } from "../components/expandable/expandable";
 
 window.activeLegendElement = null;
 
-function getVCSRepositoryPath(url) {
+export function getVCSRepositoryPathAndPlatform(url) {
   if (!url) {
     return null;
   }
 
   try {
     const repo = new URL(url);
 
-    return repo.pathname.slice(
+    const platform = repo.pathname.slice(
       1,
       repo.pathname.includes(".git") ? -4 : repo.pathname.length
     );
-  }
-  catch {
-    return null;
-  }
-}
-
-function getVCSRepositoryPlatform(url) {
-  if (!url) {
-    return null;
-  }
-
-  try {
-    const repo = new URL(url);
 
-    return repo.host;
+    return [platform, repo.host];
   }
   catch {
     return null;
   }
 }
 
-export function getRepositoryName(repository) {
-  return getVCSRepositoryPath(repository.links?.github?.href) ??
-    getVCSRepositoryPath(repository.links?.gitlab?.href) ??
-    getVCSRepositoryPath(repository.links?.homepage?.href) ??
-    getVCSRepositoryPath(repository.metadata?.homepage) ??
-    repository.name;
-}
-
-export function getRepositoryPlatform(repository) {
-  return getVCSRepositoryPlatform(repository.links?.github?.href) ??
-    getVCSRepositoryPlatform(repository.links?.gitlab?.href) ??
-    getVCSRepositoryPlatform(repository.links?.homepage) ??
-    getVCSRepositoryPlatform(repository.metadata?.homepage) ??
-    "github.com";
-}
-
-export function isGitLabHost(host) {
-  if (!host) {
-    return false;
-  }
-
-  try {
-    return new URL(host).host === "gitlab.com";
-  }
-  catch {
-    return false;
-  }
-}
-
 export function extractEmojis(strWithEmojis) {
   const segmenter = new Intl.Segmenter("en", {
     granularity: "grapheme"

diff --git a/public/components/package/header/header.js b/public/components/package/header/header.js
@@ -67,29 +67,32 @@ export class PackageHeader {
     }
 
     // Links
-    const packageHomePage = this.package.dependency.metadata.homepage || null;
-    const packageGithubPage = utils.parseRepositoryUrl(
-      repository,
-      packageHomePage !== null && new URL(packageHomePage).hostname === "github.com" ? packageHomePage : null
-    );
-
     const hasNoLicense = license === "unkown license";
+    const repositoryUrl = this.package.dependency.versions[packageVersion].links.repository;
+    const repositoryUrlHostname = repositoryUrl ? new URL(repositoryUrl).hostname : null;
+
     const links = {
       npm: {
-        href: `https://www.npmjs.com/package/${packageName}/v/${packageVersion}`,
+        href: this.package.dependency.versions[packageVersion].links.npm,
         text: "NPM",
         image: "npm-icon.svg",
         showInHeader: true
       },
       homepage: {
-        href: packageHomePage,
+        href: this.package.dependency.versions[packageVersion].links.homepage,
         showInHeader: false
       },
       github: {
-        href: packageGithubPage,
+        href: repositoryUrl,
         text: "GitHub",
         image: "github-mark.png",
-        showInHeader: true
+        showInHeader: repositoryUrlHostname === "github.com"
+      },
+      gitlab: {
+        href: repositoryUrl,
+        text: "GitLab",
+        image: "gitlab-logo.png",
+        showInHeader: repositoryUrlHostname === "gitlab.com"
       },
       unpkg: {
         href: `https://unpkg.com/${packageName}@${packageVersion}/`,

diff --git a/public/components/package/pannels/overview/overview.js b/public/components/package/pannels/overview/overview.js
@@ -44,12 +44,32 @@ export class Overview {
       }
     );
 
-    // Fetch Github stats
+    // Fetch Github/Gitlab stats
     const githubLink = this.package.links.github;
-    if (githubLink.href !== null) {
+    if (githubLink.showInHeader) {
+      setTimeout(() => {
+        document.querySelector(".gitlab-overview")?.classList.add("hidden");
+      });
+
       this.fetchGithubStats(githubLink.href)
         .catch(console.error);
     }
+    else {
+      setTimeout(() => {
+        document.querySelector(".github-overview")?.classList.add("hidden");
+      });
+
+      const gitlabLink = this.package.links.gitlab;
+      if (gitlabLink.showInHeader) {
+        this.fetchGitlabStats(gitlabLink.href)
+          .catch(console.error);
+      }
+      else {
+        setTimeout(() => {
+          document.querySelector(".gitlab-overview").classList.add("hidden");
+        });
+      }
+    }
 
     clone.querySelector(".package-maintainers")
       .appendChild(this.renderMaintainers());
@@ -74,6 +94,24 @@ export class Overview {
     document.querySelector(".github-forks").textContent = forks_count;
   }
 
+  async fetchGitlabStats(gitlabLink) {
+    const gitlab = new URL(gitlabLink);
+    const repoName = gitlab.pathname.slice(
+      1,
+      gitlab.pathname.includes(".git") ? -4 : gitlab.pathname.length
+    );
+
+
+    const {
+      star_count,
+      forks_count
+    } = await fetch(`https://gitlab.com/api/v4/projects/${encodeURIComponent(repoName)}`)
+      .then((value) => value.json());
+
+    document.querySelector(".gitlab-stars").innerHTML = `<i class='icon-star'></i> ${star_count}`;
+    document.querySelector(".gitlab-forks").textContent = forks_count;
+  }
+
   renderTopFields() {
     const { size, composition, engines } = this.package.dependencyVersion;
     const { metadata } = this.package.dependency;

diff --git a/public/components/package/pannels/scorecard/scorecard.js b/public/components/package/pannels/scorecard/scorecard.js
@@ -18,11 +18,10 @@ export class Scorecard {
    * @param {!HTMLTemplateElement} clone
    */
   generate(clone) {
-    const repoName = utils.getRepositoryName(this.package);
-
+    // Note: links.github.href can be a gitlab link
+    // Both links.github & links.gitlab are same, the showInHeader defines wheither its a gitlab or github link
+    const [repoName, platform] = utils.getVCSRepositoryPathAndPlatform(this.package.links.github.href) ?? [];
     const pannel = clone.getElementById("pan-scorecard");
-    const isGitlab = this.package.links.gitlab || utils.isGitLabHost(this.package.links.homepage?.href);
-    const platform = isGitlab ? "gitlab.com" : "github.com";
 
     fetchScorecardData(repoName, platform).then((data) => {
       if (!data) {

diff --git a/public/components/views/home/home.js b/public/components/views/home/home.js
@@ -48,15 +48,16 @@ export class HomeView {
   }
 
   generateScorecard() {
-    const { name } = this.secureDataSet.linker.get(0);
+    const { name, version } = this.secureDataSet.linker.get(0);
     const pkg = this.secureDataSet.data.dependencies[name];
-    const repoName = utils.getRepositoryName(pkg);
-    const platform = utils.getRepositoryPlatform(pkg);
+    const { repository } = pkg.versions[version].links;
 
-    if (repoName === null) {
+    if (repository === null) {
       return;
     }
 
+    const [repoName, platform] = utils.getVCSRepositoryPathAndPlatform(repository) ?? [];
+
     fetchScorecardData(repoName, platform).then((data) => {
       if (data !== null) {
         document

diff --git a/public/img/gitlab-logo.png b/public/img/gitlab-logo.png
diff --git a/views/index.html b/views/index.html
@@ -375,21 +375,39 @@ <h2><i class="icon-keyboard"></i>Shortcuts</h2>
     </div>
     <div class="list-item line" id="usedby" style="margin-top: 0px;"></div>
 
-    <div class="head-title">
-      <p>github</p>
-    </div>
-    <div class="bundlephobia" style="margin-bottom: 10px;">
-      <div>
-        <b class="github-stars">N/A</b>
-        <span>STARS</span>
+    <div class="github-overview">
+      <div class="head-title">
+        <p>github</p>
       </div>
-      <div>
-        <b class="github-issues">N/A</b>
-        <span>ISSUES</span>
+      <div class="bundlephobia" style="margin-bottom: 10px;">
+        <div>
+          <b class="github-stars">N/A</b>
+          <span>STARS</span>
+        </div>
+        <div>
+          <b class="github-issues">N/A</b>
+          <span>ISSUES</span>
+        </div>
+        <div>
+          <b class="github-forks">N/A</b>
+          <span>FORKS</span>
+        </div>
       </div>
-      <div>
-        <b class="github-forks">N/A</b>
-        <span>FORKS</span>
+    </div>
+
+    <div class="gitlab-overview">
+      <div class="head-title">
+        <p>gitlab</p>
+      </div>
+      <div class="bundlephobia" style="margin-bottom: 10px;">
+        <div>
+          <b class="gitlab-stars">N/A</b>
+          <span>STARS</span>
+        </div>
+        <div>
+          <b class="gitlab-forks">N/A</b>
+          <span>FORKS</span>
+        </div>
       </div>
     </div>
 

diff --git a/workspaces/vis-network/src/dataset.js b/workspaces/vis-network/src/dataset.js
@@ -73,7 +73,7 @@ export default class NodeSecureDataSet extends EventTarget {
 
     for (const [packageName, descriptor] of dataEntries) {
       for (const [currVersion, opt] of Object.entries(descriptor.versions)) {
-        const { id, usedBy, flags, size, license, author, composition, warnings } = opt;
+        const { id, usedBy, flags, size, license, author, composition, warnings, links } = opt;
 
         const filteredWarnings = warnings
           .filter((row) => !this.warningsToIgnore.has(row.kind));
@@ -102,7 +102,8 @@ export default class NodeSecureDataSet extends EventTarget {
           name: packageName,
           version: currVersion,
           hasWarnings,
-          flags: flagStr.replace(/\s/g, "")
+          flags: flagStr.replace(/\s/g, ""),
+          links
         });
 
         const label = `<b>${packageName}@${currVersion}</b>${flagStr}\n<b>[${prettyBytes(size)}]</b>`;