web/resourceInfo: trim the URL we display for endpoints (and some ren…

…aming for consistency) [ch9652] (#3835)
tilt-dev · Oct 7, 2020 · 52d80ff · 52d80ff
1 parent 2b7307b
commit 52d80ff
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 11 deletions.
diff --git a/web/src/ResourceInfo.test.tsx b/web/src/ResourceInfo.test.tsx
@@ -93,3 +93,28 @@ it("displays mixed named/unnamed endpoints", () => {
   expect(links.at(1).prop("href")).toEqual(namedEndpointLink.url)
   expect(links.at(1).text()).toEqual(namedEndpointLink.name)
 })
+
+it("trims URLs for unnamed endpoints", () => {
+  let ep1 = { url: "http://www.apple.com", expectedText: "apple.com" }
+  let ep2 = { url: "https://www.banana.com", expectedText: "banana.com" }
+  let ep3 = { url: "http://cherry.com", expectedText: "cherry.com" }
+  let ep4 = { url: "www.durian.com", expectedText: "durian.com" }
+  let endpoints = [ep1, ep2, ep3, ep4]
+
+  const root = mount(
+    <ResourceInfo
+      showSnapshotButton={false}
+      handleOpenModal={fakeHandleOpenModal}
+      highlight={null}
+      endpoints={endpoints}
+    />
+  )
+
+  let links = root.find("span#endpoints a")
+  expect(links).toHaveLength(4)
+
+  endpoints.forEach((ep, i) => {
+    expect(links.at(i).prop("href")).toEqual(ep.url)
+    expect(links.at(i).text()).toEqual(ep.expectedText)
+  })
+})
diff --git a/web/src/ResourceInfo.tsx b/web/src/ResourceInfo.tsx
@@ -36,22 +36,22 @@ let PodStatus = styled.span`
 
 let PodId = styled.span``
 
-let PortForward = styled.span`
+let Endpoints = styled.span`
   ${PodId} + & {
     margin-left: ${s.SizeUnit(0.5)};
     border-left: 1px solid ${s.Color.gray};
     padding-left: ${s.SizeUnit(0.5)};
   }
 `
 
-let ResourceLinkLabel = styled.span`
+let EndpointsLabel = styled.span`
   color: ${s.Color.grayLight};
   margin-right: ${s.SizeUnit(0.25)};
 
   ${s.mixinHideOnSmallScreen}
 `
 
-let ResourceLink = styled.a`
+let Endpoint = styled.a`
   & + & {
     padding-left: ${s.SizeUnit(0.25)};
     border-left: 1px dotted ${s.Color.grayLight};
@@ -116,22 +116,22 @@ class ResourceInfo extends PureComponent<HUDHeaderProps> {
 
     let endpoints = this.props.endpoints ?? []
     let endpointsEl = endpoints?.length > 0 && (
-      <PortForward id="endpoints">
-        <ResourceLinkLabel>
-          Port-Forward{endpoints?.length > 1 ? "s" : ""}:
-        </ResourceLinkLabel>
+      <Endpoints id="endpoints">
+        <EndpointsLabel>
+          Endpoint{endpoints?.length > 1 ? "s" : ""}:
+        </EndpointsLabel>
 
         {endpoints?.map(ep => (
-          <ResourceLink
+          <Endpoint
             href={ep.url}
             target="_blank"
             rel="noopener noreferrer"
             key={ep.url}
           >
-            {ep.name || ep.url}
-          </ResourceLink>
+            {ep.name || displayURL(ep)}
+          </Endpoint>
         ))}
-      </PortForward>
+      </Endpoints>
     )
 
     return (
@@ -147,4 +147,11 @@ class ResourceInfo extends PureComponent<HUDHeaderProps> {
   }
 }
 
+function displayURL(li: Link): string {
+  let url = li.url?.replace(/^(http:\/\/)/, "")
+  url = url?.replace(/^(https:\/\/)/, "")
+  url = url?.replace(/^(www\.)/, "")
+  return url || ""
+}
+
 export default ResourceInfo