standard confirm overlay

dashboard/src/components/porter/ConfirmOverlay.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import styled from "styled-components";
+
+type Props = {
+  message: string;
+  onYes: React.MouseEventHandler;
+  onNo: React.MouseEventHandler;
+};
+
+const TemplateComponent: React.FC<Props> = ({
+  message,
+  onYes,
+  onNo,
+}) => {
+  return (
+    <>
+      {
+        createPortal(
+          <StyledConfirmOverlay>
+            {message}
+            <ButtonRow>
+              <ConfirmButton onClick={onYes}>Yes</ConfirmButton>
+              <ConfirmButton onClick={onNo}>No</ConfirmButton>
+            </ButtonRow>
+          </StyledConfirmOverlay>,
+          document.body
+        )
+      }
+    </>
+  );
+};
+
+export default TemplateComponent;
+
+const StyledConfirmOverlay = styled.div`
+  position: absolute;
+  top: 0px;
+  opacity: 100%;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  display: flex;
+  padding-bottom: 30px;
+  align-items: center;
+  justify-content: center;
+  font-family: "Work Sans", sans-serif;
+  font-size: 18px;
+  color: white;
+  flex-direction: column;
+  background: rgb(0, 0, 0, 0.73);
+  backdrop-filter: blur(5px);
+  animation: lindEnter 0.2s;
+  animation-fill-mode: forwards;
+
+  @keyframes lindEnter {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+const ButtonRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 140px;
+  margin-top: 30px;
+`;
+
+const ConfirmButton = styled.div`
+  outline: none;
+  height: 40px;
+  border: 1px solid white;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  cursor: pointer;
+  opacity: 0;
+  font-family: "Work Sans", sans-serif;
+  font-size: 15px;
+  animation: linEnter 0.3s 0.1s;
+  animation-fill-mode: forwards;
+  @keyframes linEnter {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0px);
+      opacity: 1;
+    }
+  }
+  :hover {
+    background: white;
+    color: #232323;
+  }
+`;

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -24,6 +24,7 @@ import { ChartType, ResourceType } from "shared/types";
 import RevisionSection from "main/home/cluster-dashboard/expanded-chart/RevisionSection";
 import BuildSettingsTabStack from "./BuildSettingsTabStack";
 import Button from "components/porter/Button";
+import ConfirmOverlay from "components/porter/ConfirmOverlay";
 
 type Props = RouteComponentProps & {};
 
@@ -40,13 +41,11 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
     currentCluster,
     currentProject,
     setCurrentError,
-    setCurrentOverlay,
   } = useContext(Context);
 
   const [isLoading, setIsLoading] = useState(true);
   const [appData, setAppData] = useState(null);
   const [error, setError] = useState(null);
-  const [isAuthorized] = useAuth();
   const [forceRefreshRevisions, setForceRefreshRevisions] = useState<boolean>(
     false
   );
@@ -58,10 +57,9 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
   const [loading, setLoading] = useState<boolean>(false);
   const [components, setComponents] = useState<ResourceType[]>([]);
 
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isAgentInstalled, setIsAgentInstalled] = useState<boolean>(false);
   const [showRevisions, setShowRevisions] = useState<boolean>(false);
   const [newestImage, setNewestImage] = useState<string>(null);
+  const [showDeleteOverlay, setShowDeleteOverlay] = useState<boolean>(false);
 
   const getPorterApp = async () => {
     setIsLoading(true);
@@ -275,17 +273,20 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
         return (
           <>
             <Text size={16}>
-              Delete app "{appData.app.name}"
+              Delete "{appData.app.name}"
             </Text>
             <Spacer y={1} />
             <Text color="helper">
               Delete this application and all of its resources.
             </Text>
             <Spacer y={1} />
-            <Button onClick={() => {
-              // set delete overlay
-            }} color="#b91133">
-              Delete {appData.app.name}
+            <Button
+              onClick={() => {
+                setShowDeleteOverlay(true)
+              }}
+              color="#b91133"
+            >
+              Delete
             </Button>
           </>
         );
@@ -392,6 +393,17 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
           {renderTabContents()}
         </StyledExpandedApp>
       )}
+      {showDeleteOverlay && (
+        <ConfirmOverlay
+          message={`Are you sure you want to delete "${appData.app.name}"?`}
+          onYes={() => {
+            // deleteApp();
+          }}
+          onNo={() => {
+            setShowDeleteOverlay(false);
+          }}
+        />
+      )}
     </>
   );
 };