Skip to content

Commit

Permalink
post generation modal logic, css, and error handling done (#1066)
Browse files Browse the repository at this point in the history 
* post generation modal logic, css, and error handling done

* make fonts bigger

* formatting

* Remove ms from Azure links

* added aria label and renaming

* Report an issue show in service failed

* clean code
  • Loading branch information
@Tanya0609
Tanya0609 authored Aug 13, 2019
1 parent 0e2ecf8 commit b51ca65
Show file tree
Hide file tree
Showing 7 changed files with 260 additions and 139 deletions.
3 changes: 3 additions & 0 deletions src/client/src/assets/errorred.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
258 changes: 171 additions & 87 deletions src/client/src/containers/PostGenerationModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import * as React from "react";
import { connect } from "react-redux";
import { RouteComponentProps, withRouter } from "react-router";
import ReactMarkdown from "react-markdown";
import { ReactComponent as Checkmark } from "../../assets/checkgreen.svg";
import { ReactComponent as ErrorRed } from "../../assets/errorred.svg";

import asModal from "../../components/Modal";
import { ReactComponent as Spinner } from "../../assets/spinner.svg";
Expand Down Expand Up @@ -34,11 +36,11 @@ interface LinksDict {
}
const links: LinksDict = {
"Azure Functions":
"[Azure](https://portal.azure.com/#blade/WebsitesExtension/FunctionsIFrameBladeMain)",
"[View](https://portal.azure.com/#blade/WebsitesExtension/FunctionsIFrameBladeMain)",
"Cosmos DB":
"[Azure](https://portal.azure.com/#blade/HubsExtension/BrowseResourceBlade/resourceType/Microsoft.DocumentDb%2FdatabaseAccounts)",
"[View](https://portal.azure.com/#blade/HubsExtension/BrowseResourceBlade/resourceType/Microsoft.DocumentDb%2FdatabaseAccounts)",
"App Service":
"[Azure](https://ms.portal.azure.com/#blade/HubsExtension/BrowseResourceBlade/resourceType/Microsoft.Web%2Fsites)"
"[View](https://portal.azure.com/#blade/HubsExtension/BrowseResourceBlade/resourceType/Microsoft.Web%2Fsites)"
};

interface IStateProps {
Expand Down Expand Up @@ -76,6 +78,8 @@ const PostGenerationModal = ({
history
}: Props) => {
const { formatMessage } = intl;
let serviceFailed = false;
const templateGenerated = isTemplateGenerated && !isTemplatesFailed;
const templateGenerationInProgress =
!isTemplateGenerated && !isTemplatesFailed;

Expand All @@ -84,12 +88,6 @@ const PostGenerationModal = ({
{props.children}
</a>
);
const handleCloseWizard = () => {
vscode.postMessage({
module: EXTENSION_MODULES.GENERATE,
command: EXTENSION_COMMANDS.CLOSE_WIZARD
});
};

const handleOpenProjectOrRestartWizard = () => {
if (isTemplatesFailed) {
Expand All @@ -112,57 +110,168 @@ const PostGenerationModal = ({
if (isTemplatesFailed) {
return formatMessage(messages.restartWizard);
}
if (isTemplateGenerated) {
return formatMessage(messages.openInCode);
}
return (
<React.Fragment>
<Spinner className={styles.spinner} />
{formatMessage(messages.working)}
</React.Fragment>
);
return formatMessage(messages.openInCode);
};

const handleCreateAnotherProject = () => {
resetWizard();
history.push(ROUTES.NEW_PROJECT);
};

const postGenMessage = () => {
return (
<div>
{isServicesSelected && (
<p className={styles.sectionLine}>
{formatMessage(messages.generationCompleteWithAzure)}
</p>
)}
<p className={styles.sectionLine}>
{formatMessage(
isServicesSelected
? messages.seeReadMePrefixWithAzure
: messages.seeReadMePrefix
)}
<span className={styles.readMeText}>
{formatMessage(messages.readMe)}
</span>
{formatMessage(messages.seeReadMeSuffix)}
</p>
</div>
);
};

const renderTemplatesError = () => {
return (
<div className={styles.sectionLine}>
{formatMessage(messages.failedToGenerate)}
</div>
);
};

const renderTemplatesStatus = () => {
return (
<div className={styles.checkmarkStatusRow}>
<React.Fragment>
<div>{formatMessage(messages.projectCreation)}</div>
{templateGenerationInProgress && (
<div role="img" aria-label="project creation in progress">
<Spinner className={styles.spinner} />
</div>
)}
{templateGenerated && (
<div role="img" aria-label="project creation done">
<Checkmark className={styles.iconCheck} />
</div>
)}
{isTemplatesFailed && (
<div role="img" aria-label="project creation failed">
<ErrorRed className={styles.iconError} />
</div>
)}
</React.Fragment>
</div>
);
};

const renderServiceError = () => {
if (isTemplatesFailed) {
return (
<div className={styles.sectionLine}>
{isServicesSelected && formatMessage(messages.deploymentHalted)}
</div>
);
}
return Object.keys(serviceStatus).map((service: string, idx: number) => {
const serviceTitle = formatMessage(serviceStatus[service].title);
if (
serviceStatus[service].isSelected &&
serviceStatus[service].isFailed
) {
serviceFailed = true;
return (
<div
className={styles.sectionLine}
key={`${messages.error.defaultMessage}${idx}`}
>{`${formatMessage(messages.error)} ${serviceTitle} ${formatMessage(
messages.deploymentFailure
)}`}</div>
);
}
});
};

const renderServiceStatus = () => {
if (isTemplatesFailed) {
return formatMessage(messages.deploymentHalted);
return Object.keys(serviceStatus).map((service: string, idx: number) => {
const serviceTitle = formatMessage(serviceStatus[service].title);
if (serviceStatus[service].isSelected) {
const halted = `${serviceTitle} deployment halted`;
return (
<div
className={styles.checkmarkStatusRow}
key={`${messages.isDeploying.defaultMessage}${idx}`}
>
<React.Fragment>
<div>{serviceTitle}</div>
<div role="img" aria-label={halted}>
<ErrorRed className={styles.iconError} />
</div>
</React.Fragment>
</div>
);
}
});
}
return Object.keys(serviceStatus).map((service: string, idx: number) => {
const serviceTitle = formatMessage(serviceStatus[service].title);
if (serviceStatus[service].isSelected) {
if (serviceStatus[service].isFailed) {
const failed = `${serviceTitle} deployment failed`;
return (
<div
key={`${messages.error.defaultMessage}${idx}`}
>{`${formatMessage(messages.error)} ${serviceTitle} ${formatMessage(
messages.deploymentFailure
)}`}</div>
className={styles.checkmarkStatusRow}
key={`${messages.isDeploying.defaultMessage}${idx}`}
>
<React.Fragment>
<div>{serviceTitle}</div>
<div role="img" aria-label={failed}>
<ErrorRed className={styles.iconError} />
</div>
</React.Fragment>
</div>
);
}
if (serviceStatus[service].isDeployed) {
const deployed = `${serviceTitle} deployment done`;
return (
<ReactMarkdown
source={`${serviceTitle} ${formatMessage(
messages.deploymentSuccess
)} ${links[serviceTitle]}`}
key={`${messages.deploymentSuccess.defaultMessage}${idx}`}
renderers={{ link: LinkRenderer }}
/>
<div className={styles.checkmarkStatusRow}>
<div>{serviceTitle}</div>
<div className={styles.inLine}>
<ReactMarkdown
source={`${links[serviceTitle]}`}
key={`${messages.deploymentSuccess.defaultMessage}${idx}`}
renderers={{ link: LinkRenderer }}
/>
<div role="img" aria-label={deployed}>
<Checkmark className={styles.iconCheck} />
</div>
</div>
</div>
);
}
const inProgress = `${serviceTitle} deployment in progress`;
return (
<div
className={styles.loading}
className={styles.checkmarkStatusRow}
key={`${messages.isDeploying.defaultMessage}${idx}`}
>
{`${formatMessage(messages.isDeploying)} ${formatMessage(
serviceStatus[service].title
)}`}
<React.Fragment>
<div>{serviceTitle}</div>
<div role="img" aria-label={inProgress}>
<Spinner className={styles.spinner} />
</div>
</React.Fragment>
</div>
);
}
Expand All @@ -174,68 +283,43 @@ const PostGenerationModal = ({
<div className={styles.title}>
{formatMessage(messages.creatingYourProject)}
</div>
<div className={styles.templateStatus}>
<div className={styles.sectionLine}>
{isTemplatesFailed && formatMessage(messages.failedToGenerate)}
</div>
{!isTemplateGenerated && !isTemplatesFailed && (

<div className={styles.section}>
{templateGenerationInProgress && (
<div className={styles.sectionLine}>{templateGenStatus}</div>
)}
{isTemplateGenerated && !isTemplatesFailed && (
<div>
<p className={styles.sectionLine}>
{formatMessage(messages.generationComplete)}
</p>
<p className={styles.sectionLine}>
{formatMessage(messages.openReadMe)}
<span className={styles.readMeText}>
{formatMessage(messages.readMe)}
</span>
{formatMessage(messages.toStart)}
</p>
</div>
)}
{templateGenerated && postGenMessage()}
{isTemplatesFailed && renderTemplatesError()}
{isServicesSelected && renderServiceError()}
</div>
{isServicesSelected && (
<div className={styles.section}>
<div className={styles.azureTitle}>
{formatMessage(messages.azureServices)}
</div>
<div className={styles.sectionLine}>{renderServiceStatus()}</div>
</div>
)}
<div className={styles.section}>
<div className={styles.sectionLineButton}>
{isTemplateGenerated && !isTemplatesFailed && isServicesDeployed && (
<button
className={styles.buttonToLink}
onClick={handleCreateAnotherProject}
>
{formatMessage(messages.createAnotherProject)}
</button>
)}

<div className={classnames(styles.section, styles.checkmarkSection)}>
<div className={styles.containerWithMargin}>
{renderTemplatesStatus()}
{isServicesSelected && renderServiceStatus()}
</div>
</div>
<div className={styles.sectionLineButton}>
{isTemplateGenerated && !isTemplatesFailed && isServicesDeployed && (

<div className={styles.footerContainer}>
{(isTemplatesFailed || serviceFailed) && (
<a
className={styles.link}
href={WEB_TEMPLATE_STUDIO_LINKS.ISSUES}
onKeyUp={keyUpHandler}
>
{formatMessage(messages.help)}
</a>
)}

{templateGenerated && isServicesDeployed && (
<button
className={classnames(styles.buttonToLink)}
onClick={handleCloseWizard}
className={classnames(styles.button, buttonStyles.buttonDark)}
onClick={handleCreateAnotherProject}
>
{formatMessage(messages.closeWizard)}
{formatMessage(messages.createAnotherProject)}
</button>
)}
</div>
<div className={styles.sectionLine}>
<a
className={styles.link}
href={WEB_TEMPLATE_STUDIO_LINKS.ISSUES}
onKeyUp={keyUpHandler}
>
{formatMessage(messages.help)}
</a>
</div>
<div className={styles.footerContainer}>

<button
className={classnames(styles.button, {
[buttonStyles.buttonDark]: templateGenerationInProgress,
Expand Down
32 changes: 18 additions & 14 deletions src/client/src/containers/PostGenerationModal/strings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ export const strings = defineMessages({
},
deploymentHalted: {
id: "postGenerationModal.deploymentHalted",
defaultMessage: "ERROR: Halted due to template error."
defaultMessage: "ERROR: Azure Service deployment halted due to template error."
},
restartWizard: {
id: "postGenerationModal.restartWizard",
defaultMessage: "Restart Wizard"
defaultMessage: "Restart"
},
error: {
id: "postGenerationModal.error",
Expand Down Expand Up @@ -61,25 +61,29 @@ export const strings = defineMessages({
id: "postGenerationModal.creatingYourProject",
defaultMessage: "Creating Your Project"
},
azureServices: {
id: "postGenerationModal.azureServices",
defaultMessage: "Azure Services"
projectCreation: {
id: "postGenerationModal.projectCreation",
defaultMessage: "Project Creation"
},
generationComplete: {
id: "postGenerationModal.generationComplete",
defaultMessage: "Project successfully created."
generationCompleteWithAzure: {
id: "postGenerationModal.generationCompleteWithAzure",
defaultMessage: "Open your project while we take a few minutes to finish deploying Azure services."
},
openReadMe: {
id: "postGenerationModal.openReadMe",
defaultMessage: "After 'Open Project' see "
seeReadMePrefix: {
id: "postGenerationModal.seeReadMePrefix",
defaultMessage: "Click 'Open Project' and see "
},
seeReadMePrefixWithAzure: {
id: "postGenerationModal.seeReadMePrefixWithAzure",
defaultMessage: "See "
},
readMe: {
id: "postGenerationModal.readme",
defaultMessage: "README.md"
},
toStart: {
id: "postGenerationModal.toStart",
defaultMessage: " to start"
seeReadMeSuffix: {
id: "postGenerationModal.seeReadMeSuffix",
defaultMessage: " to get instructions."
},
templateGeneration: {
id: "postGenerationModal.templateGeneration",
Expand Down
Loading

0 comments on commit b51ca65

Please sign in to comment.