Last fixes around deletion

dashboard/src/main/home/cluster-dashboard/env-groups/ExpandedEnvGroup.tsx

@@ -546,23 +546,39 @@ const EnvGroupSettings = ({
           </Helper>
           {!canDelete && (
             <Helper color="#f5cb42">
-              Applications are still synced to this env group.
-              Navigate to "Linked Applications" and remove this env group from all applications to delete.
+              Applications are still synced to this env group. Navigate to
+              "Linked Applications" and remove this env group from all
+              applications to delete.
             </Helper>
           )}
-          <Button
-            color="#b91133"
-            onClick={() => {
-              setCurrentOverlay({
-                message: `Are you sure you want to delete ${name}?`,
-                onYes: handleDeleteEnvGroup,
-                onNo: () => setCurrentOverlay(null),
-              });
-            }}
-            disabled={!canDelete}
-          >
-            Delete {envGroup.name}
-          </Button>
+          {envGroup.stack_id?.length ? (
+            <>
+              <Helper color="#f5cb42">
+                You have to delete the stack to remove this env group.
+              </Helper>
+              <CloneButton
+                as={DynamicLink}
+                color="#5561C0"
+                to={`/stacks/${envGroup.namespace}/${envGroup.stack_id}`}
+              >
+                Go to the stack
+              </CloneButton>
+            </>
+          ) : (
+            <Button
+              color="#b91133"
+              onClick={() => {
+                setCurrentOverlay({
+                  message: `Are you sure you want to delete ${envGroup.name}?`,
+                  onYes: handleDeleteEnvGroup,
+                  onNo: () => setCurrentOverlay(null),
+                });
+              }}
+              disabled={!canDelete}
+            >
+              Delete {envGroup.name}
+            </Button>
+          )}
         </InnerWrapper>
       )}
     </TabWrapper>
@@ -705,6 +721,17 @@ const Button = styled.button`
   }
 `;
 
+const CloneButton = styled(Button)`
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff11;
+  :hover {
+    background-color: #ffffff18;
+  }
+`;
+
 const InnerWrapper = styled.div<{ full?: boolean }>`
   width: 100%;
   height: ${(props) => (props.full ? "100%" : "calc(100% - 65px)")};

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -19,6 +19,7 @@ import { Link } from "react-router-dom";
 import { isDeployedFromGithub } from "shared/release/utils";
 import TagSelector from "./TagSelector";
 import { PORTER_IMAGE_TEMPLATES } from "shared/common";
+import DynamicLink from "components/DynamicLink";
 
 type PropsType = {
   currentChart: ChartType;
@@ -316,10 +317,24 @@ const SettingsSection: React.FC<PropsType> = ({
           )}
 
           <Heading>Additional Settings</Heading>
-
-          <Button color="#b91133" onClick={() => setShowDeleteOverlay(true)}>
-            Delete {currentChart.name}
-          </Button>
+          {currentChart.stack_id?.length ? (
+            <>
+              <Helper>
+                You have to delete the stack to remove this application.
+              </Helper>
+              <CloneButton
+                as={DynamicLink}
+                color="#5561C0"
+                to={`/stacks/${currentChart.namespace}/${currentChart.stack_id}`}
+              >
+                Go to the stack
+              </CloneButton>
+            </>
+          ) : (
+            <Button color="#b91133" onClick={() => setShowDeleteOverlay(true)}>
+              Delete {currentChart.name}
+            </Button>
+          )}
         </StyledSettingsSection>
       ) : (
         <Loading />
@@ -368,7 +383,7 @@ const Button = styled.button`
 
 const CloneButton = styled(Button)`
   display: flex;
-  width: min-content;
+  width: fit-content;
   align-items: center;
   justify-content: center;
   background-color: #ffffff11;

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/ExpandedStack.tsx

@@ -28,6 +28,7 @@ import EnvGroups from "./components/EnvGroups";
 import RevisionList from "./_RevisionList";
 import SourceConfig from "./_SourceConfig";
 import { NavLink } from "react-router-dom";
+import Settings from "./components/Settings";
 
 const ExpandedStack = () => {
   const { namespace, stack_id } = useParams<{
@@ -42,8 +43,8 @@ const ExpandedStack = () => {
   );
 
   const [stack, setStack] = useState<Stack>();
-  const [sortType, setSortType] = useState("Alphabetical");
   const [isLoading, setIsLoading] = useState(true);
+  const [isDeleting, setIsDeleting] = useState(false);
   const [currentTab, setCurrentTab] = useState("apps");
 
   const [currentRevision, setCurrentRevision] = useState<FullStackRevision>();
@@ -73,6 +74,28 @@ const ExpandedStack = () => {
     }
   };
 
+  const handleDelete = () => {
+    setIsDeleting(true);
+    api
+      .deleteStack(
+        "<token>",
+        {},
+        {
+          namespace,
+          project_id: currentProject.id,
+          cluster_id: currentCluster.id,
+          stack_id: stack.id,
+        }
+      )
+      .then(() => {
+        pushFiltered("/stacks", []);
+      })
+      .catch((err) => {
+        setCurrentError(err);
+        setIsDeleting(false);
+      });
+  };
+
   useEffect(() => {
     getStack();
   }, [stack_id]);
@@ -81,16 +104,25 @@ const ExpandedStack = () => {
     return <Loading />;
   }
 
+  if (isDeleting) {
+    return (
+      <Placeholder height="400px">
+        <div>
+          <h1>Deleting Stack</h1>
+          <p>This may take some time...</p>
+          <Loading />
+        </div>
+      </Placeholder>
+    );
+  }
+
   return (
     <div>
       <StackTitleWrapper>
         <BackButton to="/stacks">
           <BackButtonImg src={backArrow} />
         </BackButton>
-        <TitleSection
-          materialIconClass="material-icons-outlined"
-          icon={"lan"}
-        >
+        <TitleSection materialIconClass="material-icons-outlined" icon={"lan"}>
           {stack.name}
         </TitleSection>
         <NamespaceTag.Wrapper>
@@ -101,18 +133,17 @@ const ExpandedStack = () => {
 
       {/* Stack error message */}
       {currentRevision &&
-        currentRevision?.reason &&
-        currentRevision?.message?.length > 0 ? (
-          <StackErrorMessageStyles.Wrapper>
-            <i className="material-icons">history</i>
-            <StackErrorMessageStyles.Text color="#aaaabb">
-              {currentRevision?.status === "failed" ? "Error: " : ""}
-              {currentRevision?.message}
-            </StackErrorMessageStyles.Text>
-          </StackErrorMessageStyles.Wrapper>
-        ) : null
-      }
-      
+      currentRevision?.reason &&
+      currentRevision?.message?.length > 0 ? (
+        <StackErrorMessageStyles.Wrapper>
+          <i className="material-icons">history</i>
+          <StackErrorMessageStyles.Text color="#aaaabb">
+            {currentRevision?.status === "failed" ? "Error: " : ""}
+            {currentRevision?.message}
+          </StackErrorMessageStyles.Text>
+        </StackErrorMessageStyles.Wrapper>
+      ) : null}
+
       <Break />
       <InfoWrapper>
         <LastDeployed>
@@ -193,6 +224,16 @@ const ExpandedStack = () => {
               </>
             ),
           },
+          {
+            label: "Settings",
+            value: "settings",
+            component: (
+              <>
+                <Gap></Gap>
+                <Settings stackName={stack.name} onDelete={handleDelete} />
+              </>
+            ),
+          },
         ]}
         setCurrentTab={(tab) => {
           setCurrentTab(tab);

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/components/Settings.tsx

@@ -0,0 +1,79 @@
+import Heading from "components/form-components/Heading";
+import React, { useContext } from "react";
+import { Context } from "shared/Context";
+import styled from "styled-components";
+
+const Settings = ({
+  stackName,
+  onDelete,
+}: {
+  stackName: string;
+  onDelete: () => void;
+}) => {
+  const { setCurrentOverlay } = useContext(Context);
+
+  const handleDelete = () => {
+    setCurrentOverlay({
+      message: `Are you sure you want to delete ${stackName}?`,
+      onYes: () => {
+        onDelete();
+        setCurrentOverlay(null);
+      },
+      onNo: () => setCurrentOverlay(null),
+    });
+  };
+  return (
+    <Wrapper>
+      <StyledSettingsSection>
+        <Heading>Settings</Heading>
+        <Button color="#b91133" onClick={handleDelete}>
+          Delete stack
+        </Button>
+      </StyledSettingsSection>
+    </Wrapper>
+  );
+};
+
+export default Settings;
+
+const Wrapper = styled.div`
+  width: 100%;
+  padding-bottom: 65px;
+  height: 100%;
+`;
+
+const StyledSettingsSection = styled.div`
+  width: 100%;
+  background: #ffffff11;
+  padding: 0 35px;
+  padding-bottom: 15px;
+  position: relative;
+  border-radius: 8px;
+  overflow: auto;
+  height: calc(100% - 55px);
+`;
+
+const Button = styled.button`
+  height: 35px;
+  font-size: 13px;
+  margin-top: 20px;
+  margin-bottom: 30px;
+  font-weight: 500;
+  font-family: "Work Sans", sans-serif;
+  color: white;
+  padding: 6px 20px 7px 20px;
+  text-align: left;
+  border: 0;
+  border-radius: 5px;
+  background: ${(props) => (!props.disabled ? props.color : "#aaaabb")};
+  box-shadow: ${(props) =>
+    !props.disabled ? "0 2px 5px 0 #00000030" : "none"};
+  cursor: ${(props) => (!props.disabled ? "pointer" : "default")};
+  user-select: none;
+  :focus {
+    outline: 0;
+  }
+  :hover {
+    filter: ${(props) => (!props.disabled ? "brightness(120%)" : "")};
+  }
+`;

dashboard/src/main/home/cluster-dashboard/stacks/launch/index.tsx

@@ -50,4 +50,5 @@ const StyledLaunchFlow = styled.div`
   min-width: 300px;
   margin-top: ${(props: { disableMarginTop?: boolean }) =>
     props.disableMarginTop ? "inherit" : "calc(50vh - 380px)"};
+  margin-bottom: 50px;
 `;