Replace modal content when no versions of InfluxDB support a package or function (#4238)

assets/js/flux-influxdb-versions.js

@@ -3,6 +3,7 @@ Interactions related to the Flux/InfluxDB version modal
 */
 
 const fluxInfluxDBModal = '.modal-content#flux-influxdb-versions'
+const pageType = ($(document).attr('title')).includes("package") ? "package" : "function";
 
 // Check for deprecated or pending versions
 function keysPresent() {
@@ -11,6 +12,7 @@ function keysPresent() {
   return {
     pending: list.find('.pending').length !== 0,
     deprecated: list.find('.deprecated').length !== 0,
+    supported: list.find('.supported').length !== 0,
   }
 }
 
@@ -22,6 +24,12 @@ if ($(fluxInfluxDBModal).length > 0) {
   if (presentKeys.pending === false) { $(fluxInfluxDBModal + ' .color-key #pending-key' ).remove() }
   if (presentKeys.deprecated === false) { $(fluxInfluxDBModal + ' .color-key #deprecated-key' ).remove() }
   if (presentKeys.pending === false && presentKeys.deprecated === false) { $(fluxInfluxDBModal + ' .color-key' ).remove() }
+
+  // If no versions are supported, remove and replace InfluxDB version tables
+  if (Object.values(presentKeys).every(value => !value)) {
+    $(fluxInfluxDBModal + ' .influxdb-versions > :not(".more-info")').remove();
+    $(fluxInfluxDBModal + ' .influxdb-versions').prepend(`<p class="no-support">No versions of InfluxDB currently support this ${pageType}.</p>`)
+  }
 }
 
 

assets/styles/layouts/modals/_flux-versions.scss

@@ -85,4 +85,12 @@
   .more-info {
     margin-top: 1.5rem;
   }
+
+  .no-support {
+    margin: 1rem 1rem 3rem;
+    text-align: center;
+    font-size: 1.15rem;
+    font-style: italic;
+    color: rgba($article-text, .65);
+  }
 }

data/flux_influxdb_versions.yml

@@ -1,7 +1,8 @@
-# This file is automatically generated by update-flux-versions.js.
+# This file is auto-generated by flux-build-scripts/update-flux-versions.js.
 # It is used to identify what versions of Flux are installed with each version
 # of InfluxDB. You are welcome to make changes to this file, but they will be
-# overwritten whenever update-flux-versions.js runs in the build/deploy process.
+# overwritten whenever flux-build-scripts/update-flux-versions.js runs in the
+# build/deploy process.
 
 flux:
   latest: 0.175.0

layouts/partials/footer/modals/flux-influxdb-versions.html

@@ -33,7 +33,7 @@
           <div class="version-col"><p>
             {{ if $cloudExcluded }}
             {{ else if $cloudDeprecated }}<span class="deprecated"></span>
-            {{ else if $cloudSupported }}<span class="cf-icon checkmark-new{{ if $sameAsLatest }} pending{{ end }}"></span>
+            {{ else if $cloudSupported }}<span class="cf-icon checkmark-new{{ if $sameAsLatest }} pending{{ end }} supported"></span>
             {{ end }}
           </p></div>
         </div>
@@ -51,7 +51,7 @@
           <div class="version-col"><p>
             {{ if $excluded }}
             {{ else if $deprecated }}<span class="deprecated"></span>      
-            {{ else if $supported }}<span class="cf-icon checkmark-new{{ if $sameAsLatest }} pending{{ end }}"></span>
+            {{ else if $supported }}<span class="cf-icon checkmark-new{{ if $sameAsLatest }} pending{{ end }} supported"></span>
             {{ end }}
           </div>
         </div>
@@ -70,7 +70,7 @@
         <div class="version-col"><p>
           {{ if $excluded }}
           {{ else if $deprecated }}<span class="deprecated"></span>
-          {{ else if $supported }}<span class="cf-icon checkmark-new{{ if $sameAsLatest }} pending{{ end }}"></span>
+          {{ else if $supported }}<span class="cf-icon checkmark-new{{ if $sameAsLatest }} pending{{ end }} supported"></span>
           {{ end }}
         </div>
       </div>