From c131654294dfab7da83cd800a09ac4583947adee Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Mon, 13 Nov 2023 10:19:38 -0700 Subject: [PATCH] Update v3 wayfinding modal (#5230) * update description and verbiage in v3 wayfinding modal to address user feedback * Update layouts/partials/footer/v3-wayfinding.html Co-authored-by: Jason Stirnaman --------- Co-authored-by: Jason Stirnaman --- .../{iox-wayfinding.js => v3-wayfinding.js} | 22 +++++----- ...ox-wayfinding.scss => _v3-wayfinding.scss} | 27 +++++++++--- assets/styles/styles-default.scss | 2 +- layouts/partials/footer.html | 2 +- layouts/partials/footer/javascript.html | 6 +-- ...iox-wayfinding.html => v3-wayfinding.html} | 42 ++++++++++--------- 6 files changed, 60 insertions(+), 41 deletions(-) rename assets/js/{iox-wayfinding.js => v3-wayfinding.js} (86%) rename assets/styles/layouts/{iox-wayfinding.scss => _v3-wayfinding.scss} (90%) rename layouts/partials/footer/{iox-wayfinding.html => v3-wayfinding.html} (56%) diff --git a/assets/js/iox-wayfinding.js b/assets/js/v3-wayfinding.js similarity index 86% rename from assets/js/iox-wayfinding.js rename to assets/js/v3-wayfinding.js index 9af8d069c..970d81f15 100644 --- a/assets/js/iox-wayfinding.js +++ b/assets/js/v3-wayfinding.js @@ -1,13 +1,13 @@ // Store the host value for the current page currentPageHost = window.location.href.match(/^(?:[^\/]*\/){2}[^\/]+/g)[0] -// Define iox-wayfinding elements -var wayfindingModal = document.getElementById('iox-wayfinding-modal'); -var wayfindingClose = document.getElementById('iox-wayfinding-close'); -var wayfindingStay = document.getElementById('iox-wayfinding-stay'); -var wayfindingSwitch = document.getElementById('iox-wayfinding-switch'); -var wayfindingOptOut = document.getElementById('iox-wayfinding-opt-out'); -var wayfindingOptOutInput = document.getElementById('iox-wayfinding-opt-out-input'); +// Define v3-wayfinding elements +var wayfindingModal = document.getElementById('v3-wayfinding-modal'); +var wayfindingClose = document.getElementById('v3-wayfinding-close'); +var wayfindingStay = document.getElementById('v3-wayfinding-stay'); +var wayfindingSwitch = document.getElementById('v3-wayfinding-switch'); +var wayfindingOptOut = document.getElementById('v3-wayfinding-opt-out'); +var wayfindingOptOutInput = document.getElementById('v3-wayfinding-opt-out-input'); var wayfindingFindOutToggle = document.getElementById('find-out-toggle'); var wayfindingFindOutInstructions = document.getElementById('find-out-instructions'); @@ -17,10 +17,10 @@ var wayfindingFindOutInstructions = document.getElementById('find-out-instructio */ var referrerWhitelist = cloudUrls.concat(currentPageHost); -// iox-wayfinding preference cookie name +// v3-wayfinding preference cookie name var wayfindingPrefCookie = 'influx-iox-show-wayfinding' -// Toggle the iox-wayfinding modal +// Toggle the v3-wayfinding modal function toggleWayfinding() { wayfindingModal.classList.toggle("open"); } @@ -46,7 +46,7 @@ function slideUp(elem) { } /** - * Check to see if the iox-wayfinding modal should be opened: + * Check to see if the v3-wayfinding modal should be opened: * - Is the user coming from a non-whitelisted external referrer? * - Has the user opted out of the wayfinding modal? */ @@ -134,7 +134,7 @@ wayfindingFindOutToggle.onclick = function(event) { /** * Check to see if the referrer is in the referrer whitelist, otherwise trigger - * the iox-wayfinding modal. + * the v3-wayfinding modal. * This reuses the referrerHost variable defined in assets/js/influxdb-url.js */ if (shouldOpenWayfinding()) { diff --git a/assets/styles/layouts/iox-wayfinding.scss b/assets/styles/layouts/_v3-wayfinding.scss similarity index 90% rename from assets/styles/layouts/iox-wayfinding.scss rename to assets/styles/layouts/_v3-wayfinding.scss index e7b2897e7..ab5f02cc8 100644 --- a/assets/styles/layouts/iox-wayfinding.scss +++ b/assets/styles/layouts/_v3-wayfinding.scss @@ -1,4 +1,4 @@ -#iox-wayfinding-modal { +#v3-wayfinding-modal { display: flex; width: 100%; justify-content: center; @@ -72,16 +72,18 @@ } #find-out-instructions { - text-align: center; + text-align: center; + line-height: 1rem; transition: height .2s ease-out, opacity .2s; opacity: 0; height: 0; overflow: hidden; p { - margin-top: -.5rem; + margin-top: 0; font-size: .95rem; font-style: italic; + line-height: 1.3rem; } a { @@ -115,6 +117,19 @@ font-size: .95rem; font-weight: bold; text-align: center; + + span.storage-description { + display: block; + color: $grey55; + font-weight: normal; + line-height: 1.1rem; + + &.git-head::after { + content: "(xxxxxx)"; + font-family: $code; + margin-left: .2rem; + } + } } } @@ -127,7 +142,7 @@ align-content: center; } - .iox-wayfinding-btn { + .v3-wayfinding-btn { display: block; padding: 1rem; margin-bottom: .5rem; @@ -148,7 +163,7 @@ } - #iox-wayfinding-close { + #v3-wayfinding-close { position: absolute; top: .75rem; right: .75rem; @@ -225,7 +240,7 @@ //////////////////////////////////////////////////////////////////////////////// @include media(small) { - #iox-wayfinding-modal { + #v3-wayfinding-modal { .wayfinding-content-info { flex-direction: column; } diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss index 1d4b514aa..d4af4a284 100644 --- a/assets/styles/styles-default.scss +++ b/assets/styles/styles-default.scss @@ -31,7 +31,7 @@ "layouts/notifications", "layouts/custom-time-trigger", "layouts/code-controls", - "layouts/iox-wayfinding"; + "layouts/v3-wayfinding"; // Import Product-specifc color schemes @import "product-overrides/telegraf", diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index a33bcbe9c..ce59bb6db 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -18,7 +18,7 @@ {{ if in (slice "cloud" "cloud-serverless") $currentVersion }} - {{ partial "footer/iox-wayfinding.html" . }} + {{ partial "footer/v3-wayfinding.html" . }} {{ end }} diff --git a/layouts/partials/footer/javascript.html b/layouts/partials/footer/javascript.html index d0f1c9251..ba8d3dec4 100644 --- a/layouts/partials/footer/javascript.html +++ b/layouts/partials/footer/javascript.html @@ -15,13 +15,13 @@ {{ $pageFeedback := resources.Get "js/page-feedback.js" }} {{ $homepageInteractions := resources.Get "js/home-interactions.js" }} {{ $fluxInfluxDBVersions := resources.Get "/js/flux-influxdb-versions.js" }} -{{ $ioxWayfinding := resources.Get "/js/iox-wayfinding.js"}} +{{ $v3Wayfinding := resources.Get "/js/v3-wayfinding.js"}} {{ $codePlaceholders := resources.Get "/js/code-placeholders.js" }} {{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $listFilters $modals $influxdbURLs $featureCallouts $tabbedContent $notifications $keybindings $codeControls $pageFeedback $homepageInteractions $fluxInfluxDBVersions | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }} {{ $fluxGroupKeyjs := $fluxGroupKeys | resources.Fingerprint }} {{ $dateTimejs := $dateTime | resources.Fingerprint }} {{ $influxdbGSTimestampsjs := $influxdbGSTimestamps | resources.Fingerprint }} -{{ $ioxWayfindingjs := $ioxWayfinding | resources.Fingerprint }} +{{ $v3Wayfindingjs := $v3Wayfinding | resources.Fingerprint }} {{ $codePlaceholdersjs := $codePlaceholders | resources.Fingerprint }} @@ -69,7 +69,7 @@ {{ if in (slice "cloud" "cloud-serverless") (index (findRE "[^/]+.*?" .Page.RelPermalink) 1) }} - + {{ end }} diff --git a/layouts/partials/footer/iox-wayfinding.html b/layouts/partials/footer/v3-wayfinding.html similarity index 56% rename from layouts/partials/footer/iox-wayfinding.html rename to layouts/partials/footer/v3-wayfinding.html index cabb5ddda..58cfc8192 100644 --- a/layouts/partials/footer/iox-wayfinding.html +++ b/layouts/partials/footer/v3-wayfinding.html @@ -2,27 +2,29 @@ {{ $productPathData := findRE "[^/]+.*?" .RelPermalink }} {{ $version := index $productPathData 1 }} {{ $altVersion := cond (ne $version "cloud-serverless") "cloud-serverless" "cloud" }} -{{ $engine := cond (eq $version "cloud-serverless") "IOx" "TSM" }} -{{ $altEngine := cond (eq $version "cloud-serverless") "TSM" "IOx" }} +{{ $engine := cond (eq $version "cloud-serverless") "v3" "TSM" }} +{{ $altEngine := cond (eq $version "cloud-serverless") "TSM" "v3" }} {{ $productName := cond (eq $version "cloud-serverless") "InfluxDB Cloud Serverless" "InfluxDB Cloud (TSM)" }} {{ $altProductName := cond (eq $version "cloud-serverless") "InfluxDB Cloud (TSM)" "InfluxDB Cloud Serverless" }} {{ $altDoc := .Page.Params.alt_engine | default "" }} {{ $altLink := cond (ne $altDoc "") $altDoc (print "/influxdb/" $altVersion "/") }} {{ $isCloud := eq $version "cloud" }} -{{ $isIOx := eq $version "cloud-serverless" }} +{{ $isV3 := eq $version "cloud-serverless" }} {{ $scratch.Set "uiText" "" }} {{ $scratch.Set "link" "" }} {{ if $isCloud }} {{ $scratch.Set "uiText" "InfluxDB Cloud powered by TSM"}} - {{ $altIOxPage := $.GetPage ((replaceRE "influxdb/cloud" "influxdb/cloud-serverless" $.Page.RelPermalink) | replaceRE `\/$` "") }} + {{ $scratch.Set "uiStorageDescription" "Storage Engine Version 2" }} + {{ $altV3Page := $.GetPage ((replaceRE "influxdb/cloud" "influxdb/cloud-serverless" $.Page.RelPermalink) | replaceRE `\/$` "") }} {{ if ne $altDoc "" }} {{ $scratch.Set "link" $altDoc }} - {{ else if gt (len $altIOxPage.Title) 0 }} - {{ $scratch.Set "link" $altIOxPage.RelPermalink }} + {{ else if gt (len $altV3Page.Title) 0 }} + {{ $scratch.Set "link" $altV3Page.RelPermalink }} {{ end }} -{{ else if $isIOx }} -{{ $scratch.Set "uiText" "InfluxDB Cloud Serverless"}} +{{ else if $isV3 }} + {{ $scratch.Set "uiText" "InfluxDB Cloud Serverless"}} + {{ $scratch.Set "uiStorageDescription" "Storage Engine Version 3" }} {{ $altCloudPage := $.GetPage ((replaceRE "influxdb/cloud-serverless" "influxdb/cloud" $.Page.RelPermalink) | replaceRE `\/$` "") }} {{ if ne $altDoc "" }} {{ $scratch.Set "link" $altDoc }} @@ -32,47 +34,49 @@ {{ end }} {{ $uiText := $scratch.Get "uiText" }} +{{ $uiStorageDescription := $scratch.Get "uiStorageDescription" }} {{ $altLink := cond (eq ($scratch.Get "link") "") (print "/influxdb/" $altVersion "/") ($scratch.Get "link") }} -
+
-

InfluxDB Cloud{{ if $isIOx }} Serverless{{ else }} powered by {{ $engine }}{{end}}

+

InfluxDB Cloud{{ if $isV3 }} Serverless{{ else }} powered by {{ $engine }}{{end}}

You are currently viewing documentation specific to InfluxDB Cloud - {{ if $isIOx }}Serverless{{ end }} + {{ if $isV3 }}Serverless{{ end }} powered by the {{ $engine }} storage engine, which offers different functionality than InfluxDB Cloud - {{ if not $isIOx }}Serverless{{ end }} + {{ if not $isV3 }}Serverless{{ end }} powered by the {{ $altEngine }} storage engine.

- Are you using InfluxDB Cloud {{ if $isIOx }}Serverless{{ else }}powered by TSM{{ end }}? + Are you using InfluxDB Cloud {{ if $isV3 }}Serverless{{ else }}powered by TSM{{ end }}? How to find out?

Visit your organization's homepage - and look for: + and find the following at the bottom of the right column:

{{ $uiText }} + {{ $uiStorageDescription }}
- Yes – I'm using {{ $productName }} - No – I'm using {{ $altProductName }} + Yes – I'm using {{ $productName }} + No – I'm using {{ $altProductName }}
- +
\ No newline at end of file