Include error handling for New Environment functionality

src/components/NewEnvironment/NewEnvironmentButton/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { notification } from 'antd';
+import Button from 'components/Button';
+
+export const NewEnvButton = ({ action, loading, error, disabled, data }) => {
+  const [api, contextHolder] = notification.useNotification();
+
+  const openNotificationWithIcon = errorMessage => {
+    api['error']({
+      message: 'There was a problem creating an Environment.',
+      description: errorMessage,
+      placement: 'top',
+      duration: 0,
+      style: { width: '500px' },
+    });
+  };
+  return (
+      <>
+        {contextHolder}
+        <Button action={action} loading={loading} disabled={disabled} variant="primary">
+          {loading ? "Creating" : "Create"}
+        </Button>
+        {error && openNotificationWithIcon(data.deployEnvironmentBranch)}
+      </>
+  );
+};
+
+const NewEnvironmentButton = ({ deployEnvironmentBranch, inputBranchName, inputProjectName, loading, error, disabled, data }) => (
+  <NewEnvButton
+      action={() => {
+        deployEnvironmentBranch({
+          variables: {
+            branch: inputBranchName,
+            project: inputProjectName,
+          },
+        });
+      }}
+      loading={loading}
+      error={error}
+      disabled={disabled}
+      data={data}
+  />
+);
+
+export default NewEnvironmentButton;

src/components/NewEnvironment/index.js

@@ -13,6 +13,7 @@ import {useQuery} from "@apollo/react-hooks";
 import ProjectByNameWithDeployKeyQuery from "../../lib/query/ProjectByNameWithDeployKey";
 import { Footer } from '../Organizations/SharedStyles';
 import getConfig from "next/config";
+import NewEnvironmentButton from "./NewEnvironmentButton";
 const { WEBHOOK_URL } = getConfig().publicRuntimeConfig;
 
 const DEPLOY_ENVIRONMENT_BRANCH_MUTATION = gql`
@@ -94,8 +95,8 @@ const NewEnvironment = ({
                 if (error) {
                   return <div>{error.message}</div>;
                 }
-                if (data) {
-                  refresh().then(setClear).then(closeModal);
+                if (data && !data.deployEnvironmentBranch.includes("Skipped")) {
+                    refresh().then(setClear).then(closeModal);
                 }
 
                 return (
@@ -217,22 +218,17 @@ const NewEnvironment = ({
                                 }</span> environment: <b>{inputBranchName}</b></div>
                               : null
                             }
-                            <Button
+                            <NewEnvironmentButton
                                 disabled={inputBranchName === ''}
-                                action={() => {
-                                  deployEnvironmentBranch({
-                                    variables: {
-                                      branch: inputBranchName,
-                                      project: inputProjectName,
-                                    },
-                                  });
-                                }}
-                                variant="primary"
-                            >
-                              {loading ? <div className="loader"></div> : "Create"}
-                            </Button>
+                                deployEnvironmentBranch={deployEnvironmentBranch}
+                                inputBranchName={inputBranchName}
+                                inputProjectName={inputProjectName}
+                                loading={loading}
+                                error={data && data.deployEnvironmentBranch.includes("Skipped")}
+                                data={data}
+                            />
 
-                            <Button action={() => closeModal()} variant="ghost">
+                            <Button action={() => [setClear(), closeModal()]} variant="ghost">
                               Cancel
                             </Button>
                           </Footer>