From b68c21538c790409204de16c17f725940bd86313 Mon Sep 17 00:00:00 2001
From: Pham Hai Duong <tanphamhaiduong@gmail.com>
Date: Thu, 13 Feb 2020 22:08:32 +0700
Subject: [PATCH] fix: #161 fix wrong id surfaced for developers when edit app
 (#266)

---
 .../ui/__tests__/__snapshots__/app-detail.tsx.snap          | 2 +-
 packages/marketplace/src/components/ui/app-detail.tsx       | 6 +++---
 packages/marketplace/src/tests/badges/badge-branches.svg    | 2 +-
 packages/marketplace/src/tests/badges/badge-lines.svg       | 2 +-
 packages/marketplace/src/tests/badges/badge-statements.svg  | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-detail.tsx.snap b/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-detail.tsx.snap
index 2cfb833ac7..48e1474b6b 100644
--- a/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-detail.tsx.snap
+++ b/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-detail.tsx.snap
@@ -33,7 +33,7 @@ exports[`AppDetailModalInner should match a snapshot 1`] = `
           </p>
           <div>
             <p>
-              App ID:
+              Client ID:
             </p>
             <p />
           </div>
diff --git a/packages/marketplace/src/components/ui/app-detail.tsx b/packages/marketplace/src/components/ui/app-detail.tsx
index bdc97e9d62..5a68ae99ca 100644
--- a/packages/marketplace/src/components/ui/app-detail.tsx
+++ b/packages/marketplace/src/components/ui/app-detail.tsx
@@ -46,7 +46,6 @@ export const AppDetail: React.FunctionComponent<AppDetailProps> = ({
   if (!data) {
     return null
   }
-
   const {
     id,
     media = [],
@@ -59,6 +58,7 @@ export const AppDetail: React.FunctionComponent<AppDetailProps> = ({
     isListed,
     isDirectApi,
     authFlow,
+    externalId,
   } = data
   const icon = media.filter(({ type }) => type === 'icon')[0]
   const carouselImages = media.filter(({ type }) => type === 'image')
@@ -111,8 +111,8 @@ export const AppDetail: React.FunctionComponent<AppDetailProps> = ({
               <>
                 <p className={styles.appInfo}>App Information</p>
                 <div key="app-id" className={styles.appInfoRow}>
-                  <p className={styles.appInfoProperty}>App ID:</p>
-                  <p>{id}</p>
+                  <p className={styles.appInfoProperty}>Client ID:</p>
+                  <p>{externalId}</p>
                 </div>
                 <div key="app-listed" className={styles.appInfoRow}>
                   <p className={styles.appInfoProperty}>Status:</p>
diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg
index c2b9077404..be2d3dd077 100644
--- a/packages/marketplace/src/tests/badges/badge-branches.svg
+++ b/packages/marketplace/src/tests/badges/badge-branches.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h117v20H0z"/><path fill="#e05d44" d="M117 0h53v20H117z"/><path fill="url(#b)" d="M0 0h170v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"> <text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">70.51%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">70.51%</text></g> </svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h117v20H0z"/><path fill="#e05d44" d="M117 0h53v20H117z"/><path fill="url(#b)" d="M0 0h170v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"> <text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">70.33%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">70.33%</text></g> </svg>
diff --git a/packages/marketplace/src/tests/badges/badge-lines.svg b/packages/marketplace/src/tests/badges/badge-lines.svg
index 589b5e41b2..25014ed3cc 100644
--- a/packages/marketplace/src/tests/badges/badge-lines.svg
+++ b/packages/marketplace/src/tests/badges/badge-lines.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h93v20H0z"/><path fill="#4c1" d="M93 0h53v20H93z"/><path fill="url(#b)" d="M0 0h146v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"> <text x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.38%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">90.38%</text></g> </svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h93v20H0z"/><path fill="#4c1" d="M93 0h53v20H93z"/><path fill="url(#b)" d="M0 0h146v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"> <text x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.42%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">90.42%</text></g> </svg>
diff --git a/packages/marketplace/src/tests/badges/badge-statements.svg b/packages/marketplace/src/tests/badges/badge-statements.svg
index a15da43851..a306a63a89 100644
--- a/packages/marketplace/src/tests/badges/badge-statements.svg
+++ b/packages/marketplace/src/tests/badges/badge-statements.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h129v20H0z"/><path fill="#dfb317" d="M129 0h53v20H129z"/><path fill="url(#b)" d="M0 0h182v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"> <text x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">89.54%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">89.54%</text></g> </svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h129v20H0z"/><path fill="#dfb317" d="M129 0h53v20H129z"/><path fill="url(#b)" d="M0 0h182v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"> <text x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">89.59%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">89.59%</text></g> </svg>