Website: Update testimonial sort order on /customer-stories, render testimonials server-side (#23996)

Changes:
- Updated the sort order of cards on the /customer-stories page
- Updated the cards on the /customer-stories page to be rendered
server-side.
- Updated styles for testimonial cards.

handbook/company/testimonials.yml

@@ -150,7 +150,7 @@
   productCategories: [Vulnerability management, Endpoint operations]
 -
   quote: Fleet has such a huge amount of use cases. My goal was to get telemetry on endpoints, but then our IR team, our TBM team, and multiple other folks in security started heavily utilizing the system in ways I didn’t expect. It spread so naturally, even our corporate and infrastructure teams want to run it.
-  quoteAuthorName: Charles Zaffery
+  quoteAuthorName: charles zaffery # Note: this name is lowercased here so we can sort the two endpoint-ops-related Charles Zaffery quotes in different spots. (The name will be capitalized via CSS)
   quoteLinkUrl: https://www.linkedin.com/in/charleszaffery/
   quoteAuthorJobTitle: Principle computer janitor
   quoteAuthorProfileImageFilename: testimonial-author-charles-zaffery-48x48@2x.png

website/api/controllers/view-testimonials.js

@@ -28,12 +28,82 @@ module.exports = {
     let testimonialsForMdm = _.filter(testimonials, (testimonial)=>{
       return _.contains(testimonial.productCategories, 'Device management');
     });
+    let testimonialOrderForMdm = [
+      'Scott MacVicar',
+      'Wes Whetstone',
+      'Nick Fohs',
+      'Erik Gomez',
+      'Matt Carr',
+      'Nico Waisman',
+      'Kenny Botelho',
+      'Dan Grzelak',
+      'Eric Tan',
+    ];
+    testimonialsForMdm.sort((a, b)=>{
+      if(testimonialOrderForMdm.indexOf(a.quoteAuthorName) === -1){
+        return 1;
+      } else if(testimonialOrderForMdm.indexOf(b.quoteAuthorName) === -1) {
+        return -1;
+      }
+      return testimonialOrderForMdm.indexOf(a.quoteAuthorName) - testimonialOrderForMdm.indexOf(b.quoteAuthorName);
+    });
     let testimonialsForSecurityEngineering = _.filter(testimonials, (testimonial)=>{
       return _.contains(testimonial.productCategories, 'Vulnerability management');
     });
+    let testimonialOrderForSecurityEngineering = [
+      'Nico Waisman',
+      'Austin Anderson',
+      'Chandra Majumdar',
+      'Andre Shields',
+      'Dan Grzelak',
+      'Charles Zaffery',
+      'Erik Gomez',
+      'Nick Fohs',
+      'Dhruv Majumdar',
+      'Arsenio Figueroa',
+    ];
+    testimonialsForSecurityEngineering.sort((a, b)=>{
+      if(testimonialOrderForSecurityEngineering.indexOf(a.quoteAuthorName) === -1){
+        return 1;
+      } else if(testimonialOrderForSecurityEngineering.indexOf(b.quoteAuthorName) === -1) {
+        return -1;
+      }
+      return testimonialOrderForSecurityEngineering.indexOf(a.quoteAuthorName) - testimonialOrderForSecurityEngineering.indexOf(b.quoteAuthorName);
+    });
     let testimonialsForItEngineering = _.filter(testimonials, (testimonial)=>{
       return _.contains(testimonial.productCategories, 'Endpoint operations');
     });
+    let testimonialOrderForItEngineering = [
+      'Charles Zaffery',
+      'Nico Waisman',
+      'Erik Gomez',
+      'Mike Arpaia',
+      'Ahmed Elshaer',
+      'Kenny Botelho',
+      'Alvaro Gutierrez',
+      'Tom Larkin',
+      'Nick Fohs',
+      'charles zaffery',// Note: This testimonial's quoteAuthorName value is lowercased so it can be sorted to a different position than the other Charles Zaffery quote.
+      'Andre Shields',
+      'Abubakar Yousafzai',
+      'Chandra Majumdar',
+      'Joe Pistone',
+      'Dan Grzelak',
+      'Austin Anderson',
+      'Brendan Shaklovitz',
+      'Dhruv Majumdar',
+      'Wes Whetstone',
+      'Eric Tan',
+      'Arsenio Figueroa',
+    ];
+    testimonialsForItEngineering.sort((a, b)=>{
+      if(testimonialOrderForItEngineering.indexOf(a.quoteAuthorName) === -1){
+        return 1;
+      } else if(testimonialOrderForItEngineering.indexOf(b.quoteAuthorName) === -1) {
+        return -1;
+      }
+      return testimonialOrderForItEngineering.indexOf(a.quoteAuthorName) - testimonialOrderForItEngineering.indexOf(b.quoteAuthorName);
+    });
     let testimonialsWithVideoLinks = _.filter(testimonials, (testimonial)=>{
       return testimonial.youtubeVideoUrl;
     });

website/assets/styles/components/scrollable-tweets.component.less

@@ -92,6 +92,7 @@
         line-height: 18px !important;//lesshint-disable-line importantRule,duplicateProperty
       }
       [purpose='name'] {
+        text-transform: capitalize;
         color: @core-fleet-black !important;//lesshint-disable-line importantRule,duplicateProperty
       }
       [purpose='profile-picture'] {

website/assets/styles/pages/testimonials.less

@@ -116,6 +116,7 @@
     border: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
     background: var(--Core-White, #FFF);
     height: min-content;
+    margin-bottom: 24px;
     [purpose='logo'] {
       img {
         max-height: 32px;
@@ -146,6 +147,7 @@
       }
       [purpose='name'] {
         color: @core-fleet-black;
+        text-transform: capitalize;
       }
       [purpose='profile-picture'] {
         margin-right: 16px;

website/views/pages/testimonials.ejs

@@ -29,68 +29,86 @@
       </div>
       <div v-if="selectedContent === 'mdm'">
         <div purpose="testimonials-container" class="card-columns">
-          <div purpose="testimonial-card" class="card" v-for="testimonial in testimonialsForMdm" target="_blank" :href="testimonial.quoteLinkUrl">
-            <div purpose="logo" class="mb-4" v-if="testimonial.quoteImageFilename">
-              <img alt="logo" :height="testimonial.imageHeight"  :src="'/images/'+testimonial.quoteImageFilename"/>
-            </div>
-            <p purpose="quote">
-              {{testimonial.quote}}
-              <a purpose="video-link" v-if="testimonial.youtubeVideoUrl" @click="clickOpenVideoModal(testimonial.quoteAuthorName)">See the video.</a>
-            </p>
-            <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
-              <div purpose="profile-picture">
-                <img alt="Profile picture" :src="'/images/'+testimonial.quoteAuthorProfileImageFilename">
-              </div>
-              <div class="d-flex flex-column align-self-top">
-                <p purpose="name" class="font-weight-bold m-0">{{testimonial.quoteAuthorName}}</p>
-                <p purpose="job-title" class="m-0">{{testimonial.quoteAuthorJobTitle}}</p>
+          <% for(let testimonial of testimonialsForMdm) {%>
+            <div purpose="testimonial-card" class="card">
+              <% if(testimonial.quoteImageFilename){ %>
+                <div purpose="logo" class="mb-4">
+                  <img alt="logo" height="<%- testimonial.imageHeight%>"  src="/images/<%- testimonial.quoteImageFilename %>"/>
+                </div>
+              <% } %>
+              <p purpose="quote">
+                <%- testimonial.quote %>
+                <%if(testimonial.youtubeVideoUrl) {%>
+                  <a purpose="video-link" @click="clickOpenVideoModal('<%- testimonial.quoteAuthorName %>')">See the video.</a>
+                <% } %>
+              </p>
+              <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
+                <div purpose="profile-picture">
+                  <img alt="Profile picture" src="/images/<%- testimonial.quoteAuthorProfileImageFilename %>">
+                </div>
+                <div class="d-flex flex-column align-self-top">
+                  <p purpose="name" class="font-weight-bold m-0"><%- testimonial.quoteAuthorName %></p>
+                  <p purpose="job-title" class="m-0"><%- testimonial.quoteAuthorJobTitle %></p>
+                </div>
               </div>
             </div>
-          </div>
+          <% } %>
         </div>
       </div>
       <div v-if="selectedContent === 'it'">
         <div purpose="testimonials-container" class="card-columns">
-          <div purpose="testimonial-card" class="card" v-for="testimonial in testimonialsForItEngineering" target="_blank" :href="testimonial.quoteLinkUrl">
-            <div purpose="logo" class="mb-4" v-if="testimonial.quoteImageFilename">
-              <img alt="logo"  :height="testimonial.imageHeight"  :src="'/images/'+testimonial.quoteImageFilename"/>
-            </div>
-            <p purpose="quote">
-              {{testimonial.quote}}
-              <a purpose="video-link" v-if="testimonial.youtubeVideoUrl" @click.prevent.self="clickOpenVideoModal(testimonial.quoteAuthorName)">See the video.</a>
-            </p>
-            <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
-              <div purpose="profile-picture">
-                <img alt="Profile picture" :src="'/images/'+testimonial.quoteAuthorProfileImageFilename">
-              </div>
-              <div class="d-flex flex-column align-self-top">
-                <p purpose="name" class="font-weight-bold m-0">{{testimonial.quoteAuthorName}}</p>
-                <p purpose="job-title" class="m-0">{{testimonial.quoteAuthorJobTitle}}</p>
+          <% for(let testimonial of testimonialsForItEngineering) {%>
+            <div purpose="testimonial-card" class="card">
+              <% if(testimonial.quoteImageFilename){ %>
+                <div purpose="logo" class="mb-4">
+                  <img alt="logo" height="<%- testimonial.imageHeight%>"  src="/images/<%- testimonial.quoteImageFilename %>"/>
+                </div>
+              <% } %>
+              <p purpose="quote">
+                <%- testimonial.quote %>
+                <%if(testimonial.youtubeVideoUrl) {%>
+                  <a purpose="video-link" @click="clickOpenVideoModal('<%- testimonial.quoteAuthorName %>')">See the video.</a>
+                <% } %>
+              </p>
+              <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
+                <div purpose="profile-picture">
+                  <img alt="Profile picture" src="/images/<%- testimonial.quoteAuthorProfileImageFilename %>">
+                </div>
+                <div class="d-flex flex-column align-self-top">
+                  <p purpose="name" class="font-weight-bold m-0"><%- testimonial.quoteAuthorName %></p>
+                  <p purpose="job-title" class="m-0"><%- testimonial.quoteAuthorJobTitle %></p>
+                </div>
               </div>
             </div>
-          </div>
+          <% } %>
         </div>
       </div>
       <div v-if="selectedContent === 'security'">
         <div purpose="testimonials-container" class="card-columns">
-          <div purpose="testimonial-card" class="card" v-for="testimonial in testimonialsForSecurityEngineering" target="_blank" :href="testimonial.quoteLinkUrl">
-            <div purpose="logo" class="mb-4" v-if="testimonial.quoteImageFilename">
-              <img alt="logo" :height="testimonial.imageHeight"  :src="'/images/'+testimonial.quoteImageFilename"/>
-            </div>
-            <p purpose="quote">
-              {{testimonial.quote}}
-              <a purpose="video-link" v-if="testimonial.youtubeVideoUrl" @click.prevent.self="clickOpenVideoModal(testimonial.quoteAuthorName)">See the video.</a>
-            </p>
-            <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
-              <div purpose="profile-picture">
-                <img alt="Profile picture" :src="'/images/'+testimonial.quoteAuthorProfileImageFilename">
-              </div>
-              <div class="d-flex flex-column align-self-top">
-                <p purpose="name" class="font-weight-bold m-0">{{testimonial.quoteAuthorName}}</p>
-                <p purpose="job-title" class="m-0">{{testimonial.quoteAuthorJobTitle}}</p>
+          <% for(let testimonial of testimonialsForSecurityEngineering) {%>
+            <div purpose="testimonial-card" class="card">
+              <% if(testimonial.quoteImageFilename){ %>
+                <div purpose="logo" class="mb-4">
+                  <img alt="logo" height="<%- testimonial.imageHeight%>"  src="/images/<%- testimonial.quoteImageFilename %>"/>
+                </div>
+              <% } %>
+              <p purpose="quote">
+                <%- testimonial.quote %>
+                <%if(testimonial.youtubeVideoUrl) {%>
+                  <a purpose="video-link" @click="clickOpenVideoModal('<%- testimonial.quoteAuthorName %>')">See the video.</a>
+                <% } %>
+              </p>
+              <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
+                <div purpose="profile-picture">
+                  <img alt="<%- testimonial.quoteAuthorName %>" src="/images/<%- testimonial.quoteAuthorProfileImageFilename %>">
+                </div>
+                <div class="d-flex flex-column align-self-top">
+                  <p purpose="name" class="font-weight-bold m-0"><%- testimonial.quoteAuthorName %></p>
+                  <p purpose="job-title" class="m-0"><%- testimonial.quoteAuthorJobTitle %></p>
+                </div>
               </div>
             </div>
-          </div>
+          <% } %>
         </div>
       </div>
       <div purpose="page-section">