Social badge support for static previews (#2871)

The static previews don't support the social badges. Adding that lets us remove support for `exampleUrl`. Close #2479.

This includes `style` and `namedLogo` in the service-definition export and updates the frontend to use it. To accomplish this, it passes `namedLogo` through `coalesceBadge`. After logo resolution is moved to `makeBadge` this duplication can be removed, as `logo` will no longer be needed in the result of `coalesceBadge`.

core/badge-urls/make-badge-url.js

@@ -59,6 +59,7 @@ function staticBadgeUrl({
   message,
   color = 'lightgray',
   style,
+  namedLogo,
   format = 'svg',
 }) {
   if (!label || !message) {
@@ -67,6 +68,7 @@ function staticBadgeUrl({
   const path = [label, message, color].map(encodeField).join('-')
   const outQueryString = queryString.stringify({
     style,
+    logo: namedLogo,
   })
   const suffix = outQueryString ? `?${outQueryString}` : ''
   return `${baseUrl}/badge/${path}.${format}${suffix}`

core/badge-urls/make-badge-url.spec.js

@@ -53,7 +53,8 @@ describe('Badge URL generation functions', function() {
       color: 'blue',
       style: 'flat-square',
       format: 'png',
-    }).expect('/badge/foo-bar-blue.png?style=flat-square')
+      namedLogo: 'github',
+    }).expect('/badge/foo-bar-blue.png?logo=github&style=flat-square')
     given({
       label: 'Hello World',
       message: 'Привет Мир',

core/base-service/base.spec.js

@@ -288,6 +288,7 @@ describe('BaseService', function() {
         text: ['cat', 'Hello namedParamA: bar with queryParamA: ?'],
         color: 'lightgrey',
         template: undefined,
+        namedLogo: undefined,
         logo: undefined,
         logoWidth: undefined,
         logoPosition: undefined,
@@ -360,6 +361,8 @@ describe('BaseService', function() {
           label: 'cat',
           message: 'Hello namedParamA: foo with queryParamA: bar',
           color: 'lightgrey',
+          namedLogo: undefined,
+          style: undefined,
         },
         keywords: ['hello'],
         documentation: undefined,
@@ -375,6 +378,8 @@ describe('BaseService', function() {
           label: 'cat',
           message: 'Hello namedParamA: foo with queryParamA: bar',
           color: 'lightgrey',
+          namedLogo: undefined,
+          style: undefined,
         },
         keywords: ['hello'],
         documentation: undefined,
@@ -390,6 +395,8 @@ describe('BaseService', function() {
           color: 'lightgrey',
           label: 'cat',
           message: 'Hello namedParamA: foo with queryParamA: bar',
+          namedLogo: undefined,
+          style: undefined,
         },
         keywords: ['hello'],
         documentation: undefined,

core/base-service/coalesce-badge.js

@@ -94,12 +94,13 @@ module.exports = function coalesceBadge(
 
   const style = coalesce(overrideStyle, serviceStyle)
 
+  const namedLogo = coalesce(
+    overrideNamedLogo,
+    serviceNamedLogo,
+    style === 'social' ? defaultNamedLogo : undefined
+  )
   const namedLogoSvgBase64 = prepareNamedLogo({
-    name: coalesce(
-      overrideNamedLogo,
-      serviceNamedLogo,
-      style === 'social' ? defaultNamedLogo : undefined
-    ),
+    name: namedLogo,
     color: coalesce(
       overrideLogoColor,
       // If the logo has been overridden it does not make sense to inherit
@@ -130,6 +131,7 @@ module.exports = function coalesceBadge(
       defaultLabelColor
     ),
     template: style,
+    namedLogo,
     logo: coalesce(
       overrideLogoSvgBase64,
       serviceLogoSvgBase64,

core/base-service/coalesce-badge.spec.js

@@ -122,6 +122,9 @@ describe('coalesceBadge', function() {
     })
 
     it('applies the named logo', function() {
+      expect(coalesceBadge({}, { namedLogo: 'npm' }, {}).namedLogo).to.equal(
+        'npm'
+      )
       expect(coalesceBadge({}, { namedLogo: 'npm' }, {}).logo).to.equal(
         getShieldsIcon({ name: 'npm' })
       ).and.not.to.be.empty

core/base-service/service-definitions.js

@@ -15,6 +15,8 @@ const staticBadgeContent = Joi.object({
   label: Joi.string(),
   message: Joi.string().required(),
   color: Joi.string().required(),
+  style: Joi.string(),
+  namedLogo: Joi.string(),
 })
 
 const serviceDefinition = Joi.object({

core/base-service/transform-example.js

@@ -21,6 +21,7 @@ const optionalServiceData = Joi.object({
     )
     .required(),
   color: Joi.string(),
+  style: Joi.string(),
 })
 
 const schema = Joi.object({
@@ -147,13 +148,21 @@ function transformExample(inExample, index, ServiceClass) {
     const {
       text: [label, message],
       color,
+      template: style,
+      namedLogo,
     } = coalesceBadge(
       {},
       staticPreview,
       ServiceClass.defaultBadgeData,
       ServiceClass
     )
-    preview = { label, message: `${message}`, color }
+    preview = {
+      label,
+      message: `${message}`,
+      color,
+      style: style === 'flat' ? undefined : style,
+      namedLogo,
+    }
   } else {
     preview = {
       path: makeFullUrl(ServiceClass.route.base, previewUrl),