Implemented re enabling for inactive deployments and extra animations and status for buttons

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

@@ -0,0 +1,58 @@
+import styled, { css, keyframes } from "styled-components";
+
+const Shake = keyframes`
+10%, 90% {
+  transform: translate3d(-0.5px, 0, 0);
+}
+
+20%, 80% {
+  transform: translate3d(1px, 0, 0);
+}
+
+30%, 50%, 70% {
+  transform: translate3d(-2px, 0, 0);
+}
+
+40%, 60% {
+  transform: translate3d(2px, 0, 0);
+}
+`;
+
+const ShakeAnimation = css`
+  animation: ${Shake} 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+`;
+
+export const ActionButton = styled.button`
+  font-size: 12px;
+  padding: 8px 10px;
+  margin-left: 10px;
+  border-radius: 5px;
+  color: #ffffff;
+  border: 1px solid
+    ${(props: { disabled: boolean; hasError: boolean }) =>
+      props.hasError ? "red" : "#aaaabb"};
+  display: flex;
+  align-items: center;
+  background: ${(props: { disabled: boolean; hasError: boolean }) =>
+    props.disabled ? "#ffffff22" : "#ffffff08"};
+  cursor: pointer;
+  min-height: 32px;
+  min-width: 220px;
+  :hover {
+    background: #ffffff22;
+  }
+
+  ${(props: { disabled: boolean; hasError: boolean }) => {
+    if (props.hasError) {
+      return ShakeAnimation;
+    }
+  }}
+
+  > i {
+    font-size: 14px;
+    margin-right: 8px;
+  }
+`;

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import styled, { keyframes } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import { Environment, PRDeployment } from "../types";
 import pr_icon from "assets/pull_request_icon.svg";
 import { integrationList } from "shared/common";
@@ -9,16 +9,24 @@ import { capitalize, readableDate } from "shared/string_utils";
 import api from "shared/api";
 import { useContext } from "react";
 import { Context } from "shared/Context";
+import Loading from "components/Loading";
+import { ActionButton } from "../components/ActionButton";
 
 const DeploymentCard: React.FC<{
   deployment: PRDeployment;
-  onDelete?: () => void;
-}> = ({ deployment, onDelete }) => {
-  const { setCurrentOverlay, currentProject, currentCluster } = useContext(
-    Context
-  );
+  onDelete: () => void;
+  onReEnable: () => void;
+}> = ({ deployment, onDelete, onReEnable }) => {
+  const {
+    setCurrentOverlay,
+    currentProject,
+    currentCluster,
+    setCurrentError,
+  } = useContext(Context);
   const [showRepoTooltip, setShowRepoTooltip] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasErrorOnReEnabling, setHasErrorOnReEnabling] = useState(false);
   const { url: currentUrl } = useRouteMatch();
 
   let repository = `${deployment.gh_repo_owner}/${deployment.gh_repo_name}`;
@@ -43,6 +51,32 @@ const DeploymentCard: React.FC<{
       });
   };
 
+  const reEnablePreviewEnvironment = () => {
+    setIsLoading(true);
+    api
+      .reenablePreviewEnvironmentDeployment(
+        "<token>",
+        {},
+        {
+          cluster_id: currentCluster.id,
+          project_id: currentProject.id,
+          deployment_id: deployment.id,
+        }
+      )
+      .then(() => {
+        setIsLoading(false);
+        onReEnable();
+      })
+      .catch((err) => {
+        setHasErrorOnReEnabling(true);
+        setIsLoading(false);
+        setCurrentError(err);
+        setTimeout(() => {
+          setHasErrorOnReEnabling(false);
+        }, 500);
+      });
+  };
+
   return (
     <DeploymentCardWrapper>
       <DataContainer>
@@ -82,39 +116,57 @@ const DeploymentCard: React.FC<{
       <Flex>
         {!isDeleting ? (
           <>
-            {deployment.status !== "creating" && (
-              <>
-                <RowButton
-                  to={`${currentUrl}/pr-env-detail/${deployment.namespace}?environment_id=${deployment.environment_id}`}
-                  key={deployment.id}
-                >
-                  <i className="material-icons-outlined">info</i>
-                  Details
-                </RowButton>
-                <RowButton
-                  to={deployment.subdomain}
-                  key={deployment.subdomain}
-                  target="_blank"
-                >
-                  <i className="material-icons">open_in_new</i>
-                  View Live
-                </RowButton>
-              </>
+            {deployment.status !== "creating" &&
+              deployment.status !== "inactive" && (
+                <>
+                  <RowButton
+                    to={`${currentUrl}/pr-env-detail/${deployment.namespace}?environment_id=${deployment.environment_id}`}
+                    key={deployment.id}
+                  >
+                    <i className="material-icons-outlined">info</i>
+                    Details
+                  </RowButton>
+                  <RowButton
+                    to={deployment.subdomain}
+                    key={deployment.subdomain}
+                    target="_blank"
+                  >
+                    <i className="material-icons">open_in_new</i>
+                    View Live
+                  </RowButton>
+                </>
+              )}
+            {deployment.status === "inactive" ? (
+              <ActionButton
+                onClick={reEnablePreviewEnvironment}
+                disabled={isLoading}
+                hasError={hasErrorOnReEnabling}
+              >
+                {isLoading ? (
+                  <Loading width="198px" height="14px" />
+                ) : (
+                  <>
+                    <i className="material-icons">play_arrow</i>
+                    Activate preview environment
+                  </>
+                )}
+              </ActionButton>
+            ) : (
+              <RowButton
+                to={"#"}
+                key={deployment.subdomain}
+                onClick={() =>
+                  setCurrentOverlay({
+                    message: `Are you sure you want to delete this deployment?`,
+                    onYes: deleteDeployment,
+                    onNo: () => setCurrentOverlay(null),
+                  })
+                }
+              >
+                <i className="material-icons">delete</i>
+                Delete
+              </RowButton>
             )}
-            <RowButton
-              to={"#"}
-              key={deployment.subdomain}
-              onClick={() =>
-                setCurrentOverlay({
-                  message: `Are you sure you want to delete this deployment?`,
-                  onYes: deleteDeployment,
-                  onNo: () => setCurrentOverlay(null),
-                })
-              }
-            >
-              <i className="material-icons">delete</i>
-              Delete
-            </RowButton>
           </>
         ) : (
           <DeleteMessage>

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

@@ -225,6 +225,7 @@ const DeploymentList = ({ environments }: { environments: Environment[] }) => {
               key={d.id}
               deployment={d}
               onDelete={handleRefresh}
+              onReEnable={handleRefresh}
             />
           );
         })}

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

@@ -5,6 +5,8 @@ import { PullRequest } from "../types";
 import { integrationList } from "shared/common";
 import api from "shared/api";
 import { Context } from "shared/Context";
+import { ActionButton } from "../components/ActionButton";
+import Loading from "components/Loading";
 
 const PullRequestCard = ({
   pullRequest,
@@ -17,10 +19,13 @@ const PullRequestCard = ({
     Context
   );
   const [showRepoTooltip, setShowRepoTooltip] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
 
   const repository = `${pullRequest.repo_owner}/${pullRequest.repo_name}`;
 
   const createPreviewEnvironment = async () => {
+    setIsLoading(true);
     try {
       await api.createPreviewEnvironmentDeployment("<token>", pullRequest, {
         cluster_id: currentCluster?.id,
@@ -29,6 +34,12 @@ const PullRequestCard = ({
       onCreation(pullRequest);
     } catch (error) {
       setCurrentError(error);
+      setHasError(true);
+      setTimeout(() => {
+        setHasError(false);
+      }, 500);
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -69,10 +80,20 @@ const PullRequestCard = ({
         </Flex>
       </DataContainer>
       <Flex>
-        <CreatePreviewEnvironmentButton onClick={createPreviewEnvironment}>
-          <i className="material-icons">add</i>
-          Create Preview environment
-        </CreatePreviewEnvironmentButton>
+        <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>
   );
@@ -80,27 +101,6 @@ const PullRequestCard = ({
 
 export default PullRequestCard;
 
-const CreatePreviewEnvironmentButton = styled.button`
-  font-size: 12px;
-  padding: 8px 10px;
-  margin-left: 10px;
-  border-radius: 5px;
-  color: #ffffff;
-  border: 1px solid #aaaabb;
-  display: flex;
-  align-items: center;
-  background: #ffffff08;
-  cursor: pointer;
-  :hover {
-    background: #ffffff22;
-  }
-
-  > i {
-    font-size: 14px;
-    margin-right: 8px;
-  }
-`;
-
 const Flex = styled.div`
   display: flex;
   align-items: center;

dashboard/src/main/home/cluster-dashboard/preview-environments/mocks.ts

@@ -129,7 +129,7 @@ export const deployments = [
     git_installation_id: 0,
     environment_id: 37,
     namespace: "pr-1-porter-docs",
-    status: "failed",
+    status: "inactive",
     subdomain: "https://docs-web-7b93751b98e68139.staging-onporter.run",
     pull_request_id: 1,
   },