display internal URI for web services

dashboard/src/main/home/app-dashboard/validate-apply/services-settings/tabs/Networking.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { ControlledInput } from "components/porter/ControlledInput";
 import Spacer from "components/porter/Spacer";
 import { ClientService, prefixSubdomain } from "lib/porter-apps/services";
@@ -8,6 +8,9 @@ import Checkbox from "components/porter/Checkbox";
 import Text from "components/porter/Text";
 import CustomDomains from "./CustomDomains";
 import IngressCustomAnnotations from "./IngressCustomAnnotations";
+import styled from "styled-components";
+import CopyToClipboard from "components/CopyToClipboard";
+import copy from "assets/copy-left.svg";
 
 type NetworkingProps = {
   index: number;
@@ -16,13 +19,23 @@ type NetworkingProps = {
       type: "web";
     };
   };
+  namespace: string;
 };
 
-const Networking: React.FC<NetworkingProps> = ({ index, service }) => {
+const Networking: React.FC<NetworkingProps> = ({ index, service, namespace }) => {
   const { register, control, watch } = useFormContext<PorterAppFormData>();
 
   const privateService = watch(`app.services.${index}.config.private.value`);
 
+  const port = watch(`app.services.${index}.port.value`);
+
+  const internalURL = useMemo(() => {
+    if (port) {
+      return `http://${service.name.value}.${namespace}.svc.cluster.local:${port}`;
+    } 
+    return `http://${service.name.value}.${namespace}.svc.cluster.local`;
+  }, [service.name.value, namespace, port]);
+
   const getApplicationURLText = () => {
     if (service.config.domains.length !== 0) {
       return (
@@ -60,7 +73,26 @@ const Networking: React.FC<NetworkingProps> = ({ index, service }) => {
         disabledTooltip={"You may only edit this field in your porter.yaml."}
         {...register(`app.services.${index}.port.value`)}
       />
-      <Spacer y={1} />
+      <Spacer y={0.5} />
+      {namespace && 
+        <>
+          <Spacer y={0.5} />
+          <Text color="helper">
+            Internal URL (for networking between services of this application): 
+          </Text>
+          <Spacer y={0.5} />
+          <IdContainer>
+                    <Code>{internalURL}</Code>
+                    <CopyContainer>
+                        <CopyToClipboard text={internalURL}>
+                            <CopyIcon src={copy} alt="copy" />
+                        </CopyToClipboard>
+                    </CopyContainer>
+                </IdContainer>
+          <Spacer y={0.5} />
+        </>
+      }
+      <Spacer y={0.5} />
       <Controller
         name={`app.services.${index}.config.private.value`}
         control={control}
@@ -114,3 +146,36 @@ const Networking: React.FC<NetworkingProps> = ({ index, service }) => {
 };
 
 export default Networking;
+
+const Code = styled.span`
+  font-family: monospace;
+`;
+
+const IdContainer = styled.div`
+    background: #26292E;  
+    border-radius: 5px;
+    padding: 10px;
+    display: flex;
+    width: 550px;
+    border-radius: 5px;
+    border: 1px solid ${({ theme }) => theme.border};
+    align-items: center;
+    user-select: text;
+`;
+
+const CopyContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+`;
+
+const CopyIcon = styled.img`
+  cursor: pointer;
+  margin-left: 5px;
+  margin-right: 5px;
+  width: 15px;
+  height: 15px;
+  :hover {
+    opacity: 0.8;
+  }
+`;

dashboard/src/main/home/app-dashboard/validate-apply/services-settings/tabs/WebTabs.tsx

@@ -7,6 +7,7 @@ import Networking from "./Networking";
 import MainTab from "./Main";
 import Resources from "./Resources";
 import Health from "./Health";
+import { useLatestRevision } from "main/home/app-dashboard/app-view/LatestRevisionContext";
 
 interface Props {
   index: number;
@@ -25,6 +26,8 @@ const WebTabs: React.FC<Props> = ({ index, service, maxRAM, maxCPU }) => {
     "main" | "resources" | "networking" | "advanced"
   >("main");
 
+  const { deploymentTarget: { namespace } } = useLatestRevision();
+
   return (
     <>
       <TabSelector
@@ -40,7 +43,7 @@ const WebTabs: React.FC<Props> = ({ index, service, maxRAM, maxCPU }) => {
       {match(currentTab)
         .with("main", () => <MainTab index={index} service={service} />)
         .with("networking", () => (
-          <Networking index={index} service={service} />
+          <Networking index={index} service={service} namespace={namespace} />
         ))
         .with("resources", () => (
           <Resources