banner

api/server/handlers/stacks/update_porter_app.go

@@ -67,6 +67,9 @@ func (c *UpdatePorterAppHandler) ServeHTTP(w http.ResponseWriter, r *http.Reques
 	if request.ImageRepoURI != "" {
 		porterApp.ImageRepoURI = request.ImageRepoURI
 	}
+	if request.PullRequestURL != "" {
+		porterApp.PullRequestURL = request.PullRequestURL
+	}
 
 	updatedPorterApp, err := c.Repo().PorterApp().UpdatePorterApp(porterApp)
 	if err != nil {

dashboard/src/components/Banner.tsx

@@ -29,7 +29,7 @@ const Banner: React.FC<Props> = ({ type, icon, children, noMargin }) => {
       noMargin={noMargin}
     >
       {renderIcon()}
-      {children}
+      <span>{children}</span>
     </StyledBanner>
   );
 };

dashboard/src/components/porter/Link.tsx

@@ -7,6 +7,7 @@ type Props = {
   onClick?: () => void;
   children: React.ReactNode;
   target?: string;
+  underline?: boolean;
 };
 
 const Link: React.FC<Props> = ({
@@ -14,13 +15,25 @@ const Link: React.FC<Props> = ({
   onClick,
   children,
   target,
+  underline,
 }) => {
   return (
     <>
       {to ? (
-        <StyledLink to={to} target={target}>{children}</StyledLink>
+        <StyledLink 
+          to={to} 
+          target={target}
+          underline={underline}
+        >
+          {children}
+        </StyledLink>
       ) : (
-        <Div onClick={onClick}>{children}</Div>
+        <Div 
+          onClick={onClick}
+          underline={underline}
+        >
+          {children}
+        </Div>
       )}
     </>
   );
@@ -28,14 +41,16 @@ const Link: React.FC<Props> = ({
 
 export default Link;
 
-const Div = styled.span`
+const Div = styled.span<{ underline?: boolean }>`
   color: #8590ff;
   cursor: pointer;
   display: inline;
+  text-decoration: ${props => props.underline ? "underline" : ""};
 `;
 
-const StyledLink = styled(DynamicLink)`
+const StyledLink = styled(DynamicLink)<{ underline?: boolean }>`
   color: #8590ff;
   display: inline;
   cursor: pointer;
+  text-decoration: ${props => props.underline ? "underline" : ""};
 `;

dashboard/src/main/home/app-dashboard/expanded-app/AppEvents.tsx

@@ -25,16 +25,13 @@ const AppEvents: React.FC<Props> = ({
     <StyledAppEvents>
       <Fieldset>
         <Text size={16}>
-          Approval required for Porter GitHub Action
+          Dream on
         </Text>
         <Spacer y={0.5} />
         <Text color="helper">
-          We've opened a PR to add the Porter GitHub Action to the {branchName} branch of {repoName}.
-        </Text>
-        <Spacer y={0.5} />
-        <Text color="helper">
-          <Link to="/">Merge Porter PR</Link>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         </Text>
+        <Spacer height="10px" />
       </Fieldset>
     </StyledAppEvents>
   );

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -557,9 +557,33 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
           ) : (
             <>
               {true ? (
-                <Banner type="warning">
-                  Your application won't be available until you approve and merge this PR in your GitHub repository.
-                </Banner>
+                <>
+                  {appData.app.pull_request_url ? (
+                    <Banner type="warning">
+                      Your application will not be available until you merge
+                      <Spacer inline width="5px" />
+                      <Link
+                        to={appData.app.pull_request_url}
+                        underline
+                      >
+                        this PR
+                      </Link>
+                      <Spacer inline width="5px" />
+                      into your <Mono>{appData.app.git_branch}</Mono> branch.
+                    </Banner>
+                  ) : (
+                    <Banner type="warning">
+                      Your application will not be available until you add the Porter GitHub Action to your <Mono>{appData.app.git_branch}</Mono> branch.
+                      <Spacer inline width="5px" />
+                      <Link
+                        to={appData.app.pull_request_url}
+                        underline
+                      >
+                        See details
+                      </Link>
+                    </Banner>
+                  )}
+                </>
               ) : (
                 <>
                   <DarkMatter />
@@ -630,6 +654,12 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
 
 export default withRouter(ExpandedApp);
 
+const Mono = styled.span`
+  font-family: monospace;
+  display: inline;
+  margin: 0 3px 0;
+`;
+
 const Spinner = styled.img`
   width: 15px;
   height: 15px;

dashboard/src/main/home/app-dashboard/expanded-app/GHABanner.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+
+type Props = {
+  pull_request_url: string;
+  branchName: string;
+  repoName: string;
+};
+
+const GHABanner: React.FC<Props> = ({
+  pull_request_url,
+  branchName,
+  repoName,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    // Do something
+  }, []);
+
+  return (
+    <StyledGHABanner>
+      <>
+        {appData.app.pull_request_url ? (
+          <Banner type="warning">
+            Your application will not be available until you merge
+            <Spacer inline width="5px" />
+            <Link
+              to={appData.app.pull_request_url}
+              underline
+            >
+              this PR
+            </Link>
+            <Spacer inline width="5px" />
+            into your <Mono>{appData.app.git_branch}</Mono> branch.
+          </Banner>
+        ) : (
+          <Banner type="warning">
+            Your application will not be available until you add the Porter GitHub Action to your <Mono>{appData.app.git_branch}</Mono> branch.
+            <Spacer inline width="5px" />
+            <Link
+              to={appData.app.pull_request_url}
+              underline
+            >
+              See details
+            </Link>
+          </Banner>
+        )}
+      </>
+    </StyledGHABanner>
+  );
+};
+
+export default GHABanner;
+
+const StyledGHABanner = styled.div`
+`;

dashboard/src/main/home/app-dashboard/new-app-flow/GithubActionModal.tsx

@@ -73,6 +73,17 @@ const GithubActionModal: React.FC<Props> = ({
             }
           );
           if (res?.data?.url) {
+            const updateRes = await api.updatePorterApp(
+              "<token>",
+              {
+                pull_request_url: res.data.url,
+              },
+              {
+                project_id: projectId,
+                cluster_id: clusterId,
+                name: stackName,
+              }
+            )
             window.open(res.data.url, "_blank", "noreferrer");
           }
           props.history.push(`/apps/${stackName}`);

dashboard/src/shared/api.tsx

@@ -217,6 +217,7 @@ const updatePorterApp = baseApi<
     buildpacks?: string;
     dockerfile?: string;
     image_repo_uri?: string;
+    pull_request_url?: string;
   },
   {
     project_id: number;