Show a badge pattern instead of a badge url (#3438)

* Show patterns instead of real paths

* realBadge property instead of preview.buildFromExample

* E2e test for displaying a badge

* Check bagde url in badge wrapper

* expectBadgeExample helper function

* Remove a hostname from badge url

* Simpler Cypress assertions

* realBadge -> isBadgeSuggestion

* Do not show regexp in patterns

frontend/components/badge-examples.js

@@ -2,10 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {
+  badgeUrlFromPath,
   badgeUrlFromPattern,
   staticBadgeUrl,
 } from '../../core/badge-urls/make-badge-url'
 import { examplePropType } from '../lib/service-definitions/example-prop-types'
+import { removeRegexpFromPattern } from '../lib/pattern-helpers'
 import { Badge } from './common'
 import { StyledCode } from './snippet'
 
@@ -28,18 +30,18 @@ const ClickableCode = styled(StyledCode)`
 `
 
 function Example({ baseUrl, onClick, exampleData }) {
-  const { title, example, preview } = exampleData
-
+  const { title, example, preview, isBadgeSuggestion } = exampleData
   const { pattern, namedParams, queryParams } = example
-  const exampleUrl = badgeUrlFromPattern({
-    baseUrl,
-    pattern,
-    namedParams,
-    queryParams,
-  })
-
+  let exampleUrl
   let previewUrl
-  if (preview.buildFromExample) {
+
+  if (isBadgeSuggestion) {
+    exampleUrl = badgeUrlFromPattern({
+      baseUrl,
+      pattern,
+      namedParams,
+      queryParams,
+    })
     previewUrl = exampleUrl
   } else {
     const { label, message, color, style, namedLogo } = preview
@@ -51,6 +53,11 @@ function Example({ baseUrl, onClick, exampleData }) {
       style,
       namedLogo,
     })
+    exampleUrl = badgeUrlFromPath({
+      path: removeRegexpFromPattern(pattern),
+      namedParams,
+      queryParams,
+    })
   }
 
   const handleClick = () => onClick(exampleData)

frontend/components/markup-modal/markup-modal-content.js

@@ -16,7 +16,8 @@ export default function MarkupModalContent({ example, baseUrl }) {
     documentation,
     example: { pattern, namedParams, queryParams },
     link,
-    preview: { style: initialStyle, buildFromExample } = {},
+    preview: { style: initialStyle } = {},
+    isBadgeSuggestion,
   } = example
 
   return (
@@ -30,7 +31,7 @@ export default function MarkupModalContent({ example, baseUrl }) {
         exampleNamedParams={namedParams}
         exampleQueryParams={queryParams}
         initialStyle={initialStyle}
-        isPrefilled={buildFromExample}
+        isPrefilled={isBadgeSuggestion}
         link={link}
         pattern={pattern}
         title={title}

frontend/components/suggestion-and-search.js

@@ -72,7 +72,8 @@ export default class SuggestionAndSearch extends React.Component {
         title,
         link,
         example,
-        preview: { ...preview, buildFromExample: true },
+        preview,
+        isBadgeSuggestion: true,
         documentation,
       })
     )