Initialized Recreate workflow files modal

dashboard/src/main/home/cluster-dashboard/preview-environments/components/RecreateWorkflowFilesModal.tsx

@@ -0,0 +1,124 @@
+import Modal from "main/home/modals/Modal";
+import React from "react";
+import styled from "styled-components";
+
+type Props = {
+  hide: boolean;
+  isReEnable: boolean;
+  onClose: () => void;
+};
+
+const RecreateWorkflowFilesModal = (props: Props) => {
+  const createNewWorkflows = () => {};
+
+  if (props.hide) {
+    return null;
+  }
+
+  return (
+    <Modal title="Workflow files not found">
+      <div>
+        <div>
+          We couldn't find any workflow files to process the{" "}
+          {props.isReEnable
+            ? "re enabling of this preview environment"
+            : "creation of this preview environment"}
+          .
+          <HighlightText>
+            Do you want to create the workflow files? Or Remove the repository?
+          </HighlightText>
+          <Warning highlight>
+            ⚠️ If the workflow files don't exist, Porter will not be able to
+            create any preview environment for this repository.
+          </Warning>
+        </div>
+
+        <ActionWrapper>
+          <DeleteButton onClick={() => props.onClose()}>Close</DeleteButton>
+          <CancelButton onClick={() => createNewWorkflows()}>
+            Create new workflows
+          </CancelButton>
+        </ActionWrapper>
+      </div>
+    </Modal>
+  );
+};
+
+export default RecreateWorkflowFilesModal;
+
+const Button = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: "Work Sans", sans-serif;
+  border-radius: 10px;
+  color: white;
+  height: 35px;
+  padding: 10px 16px;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-shadow: 0 5px 8px 0px #00000010;
+  cursor: pointer;
+  border: none;
+  :not(:last-child) {
+    margin-right: 10px;
+  }
+`;
+
+const DeleteButton = styled(Button)`
+  ${({ disabled }: { disabled?: boolean }) => {
+    if (disabled) {
+      return `
+      background: #aaaabbee;
+      :hover {
+        background: #aaaabbee;
+      }    
+      `;
+    }
+
+    return `
+      background: #dd4b4b;
+      :hover {
+        background: #b13d3d;
+      }`;
+  }}
+`;
+
+const CancelButton = styled(Button)`
+  background: #616feecc;
+  :hover {
+    background: #505edddd;
+  }
+`;
+
+const ActionWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Warning = styled.div`
+  font-size: 13px;
+  display: flex;
+  width: 100%;
+  margin-top: 10px;
+  line-height: 1.4em;
+  align-items: center;
+  color: white;
+  > i {
+    margin-right: 10px;
+    font-size: 18px;
+  }
+  color: ${(props: { highlight: boolean }) =>
+    props.highlight ? "#f5cb42" : ""};
+`;
+
+const HighlightText = styled.div`
+  font-size: 16px;
+  font-weight: bold;
+  color: #ffffff;
+`;

dashboard/src/main/home/cluster-dashboard/preview-environments/deployments/PullRequestCard.tsx

@@ -8,6 +8,7 @@ import { Context } from "shared/Context";
 import { ActionButton } from "../components/ActionButton";
 import Loading from "components/Loading";
 import DynamicLink from "components/DynamicLink";
+import RecreateWorkflowFilesModal from "../components/RecreateWorkflowFilesModal";
 
 const PullRequestCard = ({
   pullRequest,
@@ -21,6 +22,10 @@ const PullRequestCard = ({
   );
   const [showRepoTooltip, setShowRepoTooltip] = useState(false);
   const [showMergeInfoTooltip, setShowMergeInfoTooltip] = useState(false);
+  const [
+    openRecreateWorkflowFilesModal,
+    setOpenRecreateWorkflowFilesModal,
+  ] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [hasError, setHasError] = useState(false);
 
@@ -35,6 +40,7 @@ const PullRequestCard = ({
       });
       onCreation(pullRequest);
     } catch (error) {
+      debugger;
       setCurrentError(error);
       setHasError(true);
       setTimeout(() => {
@@ -46,72 +52,80 @@ const PullRequestCard = ({
   };
 
   return (
-    <DeploymentCardWrapper>
-      <DataContainer>
-        <PRName>
-          <PRIcon src={pr_icon} alt="pull request icon" />
-          <DynamicLink
-            to={`https://github.com/${pullRequest.repo_owner}/${pullRequest.repo_name}/pull/${pullRequest.pr_number}`}
-            target="_blank"
-          >
-            {pullRequest.pr_title}
-          </DynamicLink>
-
-          <InfoWrapper>
-            <MergeInfo
-              onMouseOver={() => setShowMergeInfoTooltip(true)}
-              onMouseOut={() => setShowMergeInfoTooltip(false)}
+    <>
+      <RecreateWorkflowFilesModal
+        hide={!openRecreateWorkflowFilesModal}
+        onClose={() => setOpenRecreateWorkflowFilesModal(false)}
+        isReEnable={false}
+      />
+      <DeploymentCardWrapper>
+        <DataContainer>
+          <PRName>
+            <PRIcon src={pr_icon} alt="pull request icon" />
+            <DynamicLink
+              to={`https://github.com/${pullRequest.repo_owner}/${pullRequest.repo_name}/pull/${pullRequest.pr_number}`}
+              target="_blank"
             >
-              From: {pullRequest.branch_from} Into: {pullRequest.branch_into}
-            </MergeInfo>
-            {showMergeInfoTooltip && (
-              <Tooltip>
+              {pullRequest.pr_title}
+            </DynamicLink>
+
+            <InfoWrapper>
+              <MergeInfo
+                onMouseOver={() => setShowMergeInfoTooltip(true)}
+                onMouseOut={() => setShowMergeInfoTooltip(false)}
+              >
                 From: {pullRequest.branch_from} Into: {pullRequest.branch_into}
-              </Tooltip>
-            )}
-          </InfoWrapper>
-        </PRName>
+              </MergeInfo>
+              {showMergeInfoTooltip && (
+                <Tooltip>
+                  From: {pullRequest.branch_from} Into:{" "}
+                  {pullRequest.branch_into}
+                </Tooltip>
+              )}
+            </InfoWrapper>
+          </PRName>
 
+          <Flex>
+            <StatusContainer>
+              <Status>
+                <StatusDot />
+                Not deployed
+              </Status>
+            </StatusContainer>
+            <DeploymentImageContainer>
+              <DeploymentTypeIcon src={integrationList.repo.icon} />
+              <RepositoryName
+                onMouseOver={() => {
+                  setShowRepoTooltip(true);
+                }}
+                onMouseOut={() => {
+                  setShowRepoTooltip(false);
+                }}
+              >
+                {repository}
+              </RepositoryName>
+              {showRepoTooltip && <Tooltip>{repository}</Tooltip>}
+            </DeploymentImageContainer>
+          </Flex>
+        </DataContainer>
         <Flex>
-          <StatusContainer>
-            <Status>
-              <StatusDot />
-              Not deployed
-            </Status>
-          </StatusContainer>
-          <DeploymentImageContainer>
-            <DeploymentTypeIcon src={integrationList.repo.icon} />
-            <RepositoryName
-              onMouseOver={() => {
-                setShowRepoTooltip(true);
-              }}
-              onMouseOut={() => {
-                setShowRepoTooltip(false);
-              }}
-            >
-              {repository}
-            </RepositoryName>
-            {showRepoTooltip && <Tooltip>{repository}</Tooltip>}
-          </DeploymentImageContainer>
+          <ActionButton
+            onClick={createPreviewEnvironment}
+            disabled={isLoading}
+            hasError={hasError}
+          >
+            {isLoading ? (
+              <Loading width="198px" height="14px" />
+            ) : (
+              <>
+                <i className="material-icons">add</i>
+                Create Preview environment
+              </>
+            )}
+          </ActionButton>
         </Flex>
-      </DataContainer>
-      <Flex>
-        <ActionButton
-          onClick={createPreviewEnvironment}
-          disabled={isLoading}
-          hasError={hasError}
-        >
-          {isLoading ? (
-            <Loading width="198px" height="14px" />
-          ) : (
-            <>
-              <i className="material-icons">add</i>
-              Create Preview environment
-            </>
-          )}
-        </ActionButton>
-      </Flex>
-    </DeploymentCardWrapper>
+      </DeploymentCardWrapper>
+    </>
   );
 };