Add GH button on next-step modal (#1369)

Author: ia3andy

.gitignore

@@ -37,3 +37,5 @@ nb-configuration.xml
 *.orig
 *.rej
 
+
+.env

base/src/main/resources/web/lib/components/api/quarkus-project-utils.ts

@@ -175,6 +175,7 @@ export function getProjectShareUrl(api: Api, project: QuarkusProject, github = f
   return `${BASE_LOCATION}?${generateProjectQuery(api, project, github, false)}`;
 }
 
+
 export async function generateProject(api: Api, environment: string, project: QuarkusProject, target: Target): Promise<GenerateResult> {
   switch (target) {
   case Target.DOWNLOAD:
@@ -191,14 +192,19 @@ export async function generateProject(api: Api, environment: string, project: Qu
   }
 }
 
-export const createOnGitHub = (api: Api, project: QuarkusProject, clientId: string) => {
+export const createOnGitHubUrl = (api: Api, project: QuarkusProject, clientId: string) => {
   const authParams = {
     redirect_uri: getProjectShareUrl(api, project, true),
     client_id: clientId,
     scope: 'public_repo,workflow',
     state: Math.random().toString(36)
   };
-  window.location.href = `https://github.com/login/oauth/authorize?${stringify(authParams)}`;
+  return `https://github.com/login/oauth/authorize?${stringify(authParams)}`;
+};
+
+
+export const createOnGitHub = (api: Api, project: QuarkusProject, clientId: string) => {
+  window.location.href = createOnGitHubUrl(api, project, clientId)
 };
 
 export function newDefaultProject(): QuarkusProject {

base/src/main/resources/web/lib/components/code-quarkus.scss

@@ -88,7 +88,7 @@ button.btn, a.btn {
     }
 
     h3 {
-      margin-top: 20px;
+      margin-top: 10px;
     }
 
   }
@@ -99,21 +99,36 @@ button.btn, a.btn {
     border: none;
   }
 
-  a.download-button {
+  a.action-button, button.action-button {
+    cursor: pointer;
+    display: inline-block;
     background-color: var(--nextStepsModalDownloadButtonBg);
     border: 1px solid var(--nextStepsModalDownloadButtonBg);
     color: var(--nextStepsModalDownloadButtonTextColor);
     border-radius: 0;
     text-transform: uppercase;
-    width: 200px;
-    padding: 5px;
+    padding: 10px;
     text-decoration: none;
-
+    margin-bottom: 20px;
+    line-height: 20px;
     &:hover {
       border: 1px solid var(--nextStepsModalDownloadButtonBorderColorOnHover);
     }
+    svg {
+      margin-right: 10px;
+      vertical-align: middle;
+    }
+
+    span {
+      vertical-align: middle;
+    }
+
+    &.github {
+      background-color: transparent;
+    }
   }
 
+
   .modal-footer {
     border: none;
     button.btn {

base/src/main/resources/web/lib/components/modals/next-steps-modal.tsx

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import { useAnalytics, createLinkTracker } from '../../core/analytics';
 import { CopyToClipboard, ExternalLink } from '../../core/components';
-import { GenerateResult, Target } from '../api/quarkus-project-utils';
-import { Extension } from '../api/model';
+import {GenerateResult, Target, createOnGitHub} from '../api/quarkus-project-utils';
+import {Extension, QuarkusProject} from '../api/model';
 import { Button, Modal } from 'react-bootstrap';
+import { FaGithub, FaFileArchive } from 'react-icons/fa';
+import {Api} from "../api/code-quarkus-api";
 
 interface NextStepsProps {
   result: GenerateResult;
   buildTool: string;
   extensions: Extension[];
-
+  api: Api;
+  project: QuarkusProject;
+  githubClientId?: string;
   onClose?(reset?: boolean): void;
 }
 
@@ -28,6 +32,12 @@ export function NextStepsModal(props: NextStepsProps) {
   const extensionsWithGuides = props.extensions.filter(e => !!e.guide);
   const devModeEventContext = { ...context, label: 'Dev mode command' }
   const zip = props.result.target === Target.DOWNLOAD || props.result.target === Target.GENERATE;
+
+  const githubClick = (e: any) => {
+    linkTracker(e);
+    createOnGitHub(props.api, props.project, props.githubClientId!);
+  };
+
   return (
     <Modal
       className="next-steps-modal code-quarkus-modal"
@@ -38,15 +48,22 @@ export function NextStepsModal(props: NextStepsProps) {
       <Modal.Header><h2>Your Supersonic Subatomic App is ready!</h2></Modal.Header>
       <Modal.Body>
         {zip && (
-          <>
-            {props.result.target === Target.DOWNLOAD ? (
-              <p>Your download should start shortly. If it doesn't, please use the direct link:</p>
-            ) : (
-              <p>It's time to download it:</p>
-            )}
-            <Button as="a" href={props.result.url} aria-label="Download the zip" className="download-button"
-              onClick={linkTracker}>Download the zip</Button>
-          </>
+            <>
+              {props.result.target === Target.DOWNLOAD ? (
+                  <p>Your download should start shortly. If it doesn't, please use the direct link:</p>
+              ) : (
+                  <p>Your download link is ready:</p>
+              )}
+              <Button as="a" href={props.result.url} aria-label="Download the zip" className="action-button"
+                      onClick={linkTracker}><FaFileArchive /><span>Download the zip</span></Button>
+              {props.githubClientId && (
+                  <>
+                    <p>If you want to start collaborating:</p>
+                    <Button as="button" aria-label="Create on GitHub" className="action-button github"
+                            onClick={githubClick}><FaGithub/><span>Push to GitHub</span></Button>
+                  </>
+              )}
+            </>
         )}
         {props.result.target === Target.GITHUB && (
           <>
@@ -87,8 +104,9 @@ export function NextStepsModal(props: NextStepsProps) {
 
         </div>
         {extensionsWithGuides.length === 1 && (
-          <div>
-            <b>Follow the <ExternalLink href={extensionsWithGuides[0].guide!} aria-label={`Open ${extensionsWithGuides[0].name} guide`} onClick={onClickGuide(extensionsWithGuides[0].id)}>{extensionsWithGuides[0].name} guide</ExternalLink> for your next steps!</b>
+            <div>
+              <b>Follow the <ExternalLink href={extensionsWithGuides[0].guide!}
+                                          aria-label={`Open ${extensionsWithGuides[0].name} guide`} onClick={onClickGuide(extensionsWithGuides[0].id)}>{extensionsWithGuides[0].name} guide</ExternalLink> for your next steps!</b>
           </div>
         )}
         {extensionsWithGuides.length > 1 && (

base/src/main/resources/web/lib/components/quarkus-project/quarkus-project-flow.tsx

@@ -35,6 +35,7 @@ interface QuarkusProjectFlowProps extends ConfiguredCodeQuarkusProps {
 }
 
 export function QuarkusProjectFlow(props: QuarkusProjectFlowProps) {
+  const initialized = React.useRef(false);
   const [ run, setRun ] = React.useState<RunState>({ status: Status.EDITION });
   const [ missingExtensions, setMissingExtensions ] = React.useState<string[]>([]);
   const analytics = useAnalytics();
@@ -59,8 +60,11 @@ export function QuarkusProjectFlow(props: QuarkusProjectFlowProps) {
   };
 
   React.useEffect(() => {
-    if (props.project.github) {
-      generate(Target.GITHUB);
+    if (!initialized.current) {
+      initialized.current = true;
+      if (props.project.github) {
+        generate(Target.GITHUB);
+      }
     }
     // eslint-disable-next-line
   }, []);
@@ -88,7 +92,7 @@ export function QuarkusProjectFlow(props: QuarkusProjectFlowProps) {
         <LoadingModal/>
       )}
       {!run.error && run.status === Status.DOWNLOADED && (
-        <NextStepsModal onClose={closeModal} result={run.result} buildTool={props.project.metadata.buildTool} extensions={mappedExtensions.mapped}/>
+          <NextStepsModal api={props.api} project={props.project} githubClientId={props.config.gitHubClientId} onClose={closeModal} result={run.result} buildTool={props.project.metadata.buildTool} extensions={mappedExtensions.mapped}/>
       )}
       {run.error && (
         <ErrorModal onHide={() => closeModal(false)} error={run.error}/>