Query ArtifactHub for repo suggestion (#225)

* Query ArtifactHub for repo suggestion

* Refactor & improve

* Add notice on local chart support

pkg/dashboard/static/actions.js

@@ -25,7 +25,11 @@ function checkUpgradeable(name) {
         if (!data || !data.length) {
             btnUpgradeCheck.prop("disabled", true)
             btnUpgradeCheck.text("")
-            $("#btnAddRepository").text("Add repository for it")
+            $("#btnAddRepository").text("Add repository for it").data("suggestRepo", "")
+        } else if (data[0].isSuggestedRepo) {
+            btnUpgradeCheck.prop("disabled", true)
+            btnUpgradeCheck.text("")
+            $("#btnAddRepository").text("Add repository for it: "+data[0].repository).data("suggestRepo", data[0].repository).data("suggestRepoUrl", data[0].urls[0])
         } else {
             $("#btnAddRepository").text("")
             btnUpgradeCheck.text("Check for new version")
@@ -399,7 +403,12 @@ $("#btnRollback").click(function () {
 })
 
 $("#btnAddRepository").click(function () {
+    const self=$(this)
     setHashParam("section", "repository")
+    if (self.data("suggestRepo")) {
+        setHashParam("suggestRepo", self.data("suggestRepo"))
+        setHashParam("suggestRepoUrl", self.data("suggestRepoUrl"))
+    }
     window.location.reload()
 })
 

pkg/dashboard/static/index.html

@@ -89,6 +89,7 @@
                 <button class="btn btn-sm border-secondary text-muted">
                     <i class="bi-plus-lg"></i> Add Repository
                 </button>
+                <div class="mt-2 p-2 small">Charts developers: you can also add local directories as chart source. Use <span class="font-monospace text-success">--local-chart</span> CLI switch to specify it.</div>
             </div>
         </div>
         <div class="col-9 repo-details bg-white b-shadow pt-4 px-5 overflow-auto rounded">

pkg/dashboard/static/list-view.js

@@ -89,7 +89,13 @@ function buildChartCard(elm) {
         }
 
         if (isNewerVersion(elm.chartVersion, data[0].version)) {
-            card.find(".rel-name span").append("<span class='bi-arrow-up-circle-fill ms-2 text-success' title='Upgrade available: "+data[0].version+"'></span>")
+            const icon = $("<span class='ms-2 text-success' title='Upgrade available: " + data[0].version + " from " + data[0].repository + "'></span>")
+            if (data[0].isSuggestedRepo) {
+                icon.addClass("bi-arrow-up-circle")
+            } else {
+                icon.addClass("bi-arrow-up-circle-fill")
+            }
+            card.find(".rel-name span").append(icon)
         }
     })
 

pkg/dashboard/static/repo.js

@@ -2,6 +2,13 @@ function loadRepoView() {
     $("#sectionRepo .repo-details").hide()
     $("#sectionRepo").show()
 
+    $("#repoAddModal input[name=name]").val(getHashParam("suggestRepo"))
+    $("#repoAddModal input[name=url]").val(getHashParam("suggestRepoUrl"))
+
+    if (getHashParam("suggestRepo")) {
+        $("#sectionRepo .repo-list .btn").click()
+    }
+
     $.getJSON("/api/helm/repositories").fail(function (xhr) {
         reportError("Failed to get list of repositories", xhr)
         sendStats('Get repo', {'status': 'fail'});
@@ -85,6 +92,8 @@ $("#inputSearch").keyup(function () {
 })
 
 $("#sectionRepo .repo-list .btn").click(function () {
+    setHashParam("suggestRepo", null)
+    setHashParam("suggestRepoUrl", null)
     const myModal = new bootstrap.Modal(document.getElementById('repoAddModal'), {});
     myModal.show()
 })