Initialize environment settings modal with basic actions

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

@@ -18,6 +18,7 @@ import { PreviewEnvironmentsHeader } from "../components/PreviewEnvironmentsHead
 import SearchBar from "components/SearchBar";
 import CheckboxRow from "components/form-components/CheckboxRow";
 import DocsHelper from "components/DocsHelper";
+import EnvironmentSettings from "../environments/EnvironmentSettings";
 
 const AvailableStatusFilters = [
   "all",
@@ -36,7 +37,6 @@ const DeploymentList = () => {
   const [deploymentList, setDeploymentList] = useState<PRDeployment[]>([]);
   const [pullRequests, setPullRequests] = useState<PullRequest[]>([]);
   const [searchValue, setSearchValue] = useState("");
-  const [newCommentsDisabled, setNewCommentsDisabled] = useState(false);
 
   const [
     statusSelectorVal,
@@ -69,18 +69,6 @@ const DeploymentList = () => {
     // return mockRequest();
   };
 
-  const getEnvironment = () => {
-    return api.getEnvironment(
-      "<token>",
-      {},
-      {
-        project_id: currentProject.id,
-        cluster_id: currentCluster.id,
-        environment_id: Number(environment_id),
-      }
-    );
-  };
-
   useEffect(() => {
     const status_filter = getQueryParam("status_filter");
 
@@ -102,29 +90,18 @@ const DeploymentList = () => {
     let isSubscribed = true;
     setIsLoading(true);
 
-    Promise.allSettled([getPRDeploymentList(), getEnvironment()]).then(
-      ([getDeploymentsResponse, getEnvironmentResponse]) => {
-        const deploymentList =
-          getDeploymentsResponse.status === "fulfilled"
-            ? getDeploymentsResponse.value.data
-            : {};
-        const environmentList =
-          getEnvironmentResponse.status === "fulfilled"
-            ? getEnvironmentResponse.value.data
-            : {};
-
-        if (!isSubscribed) {
-          return;
-        }
+    getPRDeploymentList().then(({ data }) => {
+      const deploymentList = data;
 
-        setDeploymentList(deploymentList.deployments || []);
-        setPullRequests(deploymentList.pull_requests || []);
+      if (!isSubscribed) {
+        return;
+      }
 
-        setNewCommentsDisabled(environmentList.new_comments_disabled || false);
+      setDeploymentList(deploymentList.deployments || []);
+      setPullRequests(deploymentList.pull_requests || []);
 
-        setIsLoading(false);
-      }
-    );
+      setIsLoading(false);
+    });
 
     return () => {
       isSubscribed = false;
@@ -141,13 +118,6 @@ const DeploymentList = () => {
       setHasError(true);
       console.error(error);
     }
-    try {
-      const { data } = await getEnvironment();
-      setNewCommentsDisabled(data.new_comments_disabled || false);
-    } catch (error) {
-      setHasError(true);
-      console.error(error);
-    }
     setIsLoading(false);
   };
 
@@ -262,24 +232,6 @@ const DeploymentList = () => {
     setStatusSelectorVal(value);
   };
 
-  const handleToggleCommentStatus = (currentlyDisabled: boolean) => {
-    api
-      .toggleNewCommentForEnvironment(
-        "<token>",
-        {
-          disable: !currentlyDisabled,
-        },
-        {
-          project_id: currentProject.id,
-          cluster_id: currentCluster.id,
-          environment_id: Number(environment_id),
-        }
-      )
-      .then(() => {
-        setNewCommentsDisabled(!currentlyDisabled);
-      });
-  };
-
   return (
     <>
       <PreviewEnvironmentsHeader />
@@ -327,27 +279,11 @@ const DeploymentList = () => {
               dropdownWidth="230px"
               closeOverlay={true}
             />
+            <EnvironmentSettings environmentId={environment_id} />
           </StyledStatusSelector>
         </ActionsWrapper>
       </Flex>
-      <Flex>
-        <ActionsWrapper>
-          <FlexWrap>
-            <CheckboxRow
-              label="Disable new comments for deployments"
-              checked={newCommentsDisabled}
-              toggle={() => handleToggleCommentStatus(newCommentsDisabled)}
-            />
-            <Div>
-              <DocsHelper
-                disableMargin
-                tooltipText="When checked, comments for every new deployment are disabled. Instead, the most recent comment is updated each time."
-                placement="top-end"
-              />
-            </Div>
-          </FlexWrap>
-        </ActionsWrapper>
-      </Flex>
+
       <Container>
         <EventsGrid>{renderDeploymentList()}</EventsGrid>
       </Container>

dashboard/src/main/home/cluster-dashboard/preview-environments/environments/EnvironmentCard.tsx

@@ -74,7 +74,7 @@ const EnvironmentCard = ({ environment, onDelete }: Props) => {
 
   return (
     <>
-      {showDeleteModal ? (
+      {/* {showDeleteModal ? (
         <Modal
           title={`Remove Preview Envs for ${git_repo_owner}/${git_repo_name}`}
           width="800px"
@@ -102,7 +102,7 @@ const EnvironmentCard = ({ environment, onDelete }: Props) => {
             </DeleteButton>
           </ActionWrapper>
         </Modal>
-      ) : null}
+      ) : null} */}
       <EnvironmentCardWrapper
         to={`/preview-environments/deployments/${id}/${git_repo_owner}/${git_repo_name}`}
       >
@@ -141,13 +141,6 @@ const EnvironmentCard = ({ environment, onDelete }: Props) => {
             )}
           </Status>
         </DataContainer>
-        <OptionWrapper>
-          <Options.Dropdown expandIcon="more_vert" shrinkIcon="more_vert">
-            <Options.Option onClick={() => setShowDeleteModal(true)}>
-              <i className="material-icons">delete</i> Delete
-            </Options.Option>
-          </Options.Dropdown>
-        </OptionWrapper>
       </EnvironmentCardWrapper>
     </>
   );

dashboard/src/main/home/cluster-dashboard/preview-environments/environments/EnvironmentSettings.tsx

@@ -0,0 +1,131 @@
+import DocsHelper from "components/DocsHelper";
+import CheckboxRow from "components/form-components/CheckboxRow";
+import Loading from "components/Loading";
+import Modal from "main/home/modals/Modal";
+import React, { useContext, useReducer, useState } from "react";
+import api from "shared/api";
+import { Context } from "shared/Context";
+import styled, { css, keyframes } from "styled-components";
+import { Environment } from "../types";
+
+const EnvironmentSettings = ({ environmentId }: { environmentId: string }) => {
+  const { currentCluster, currentProject } = useContext(Context);
+
+  const [show, toggle] = useReducer((prev) => !prev, false);
+
+  const [environment, setEnvironment] = useState<Environment>();
+
+  const [isNewCommentsDisabled, setIsNewCommentsDisabled] = useState(false);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const getEnvironment = async () => {
+    return api.getEnvironment(
+      "<token>",
+      {},
+      {
+        project_id: currentProject.id,
+        cluster_id: currentCluster.id,
+        environment_id: Number(environmentId),
+      }
+    );
+  };
+  const handleToggleCommentStatus = async (currentlyDisabled: boolean) => {
+    try {
+      await api.toggleNewCommentForEnvironment(
+        "<token>",
+        {
+          disable: !currentlyDisabled,
+        },
+        {
+          project_id: currentProject.id,
+          cluster_id: currentCluster.id,
+          environment_id: Number(environmentId),
+        }
+      );
+
+      setIsNewCommentsDisabled(!currentlyDisabled);
+    } catch (error) {}
+  };
+
+  const handleOpen = async () => {
+    setIsLoading(true);
+    const response = await getEnvironment();
+    setEnvironment(response.data);
+    setIsLoading(false);
+    toggle();
+  };
+
+  return (
+    <>
+      <SettingsButton type="button" onClick={handleOpen} isLoading={isLoading}>
+        <i className="material-icons">settings</i>
+      </SettingsButton>
+      {show && (
+        <Modal
+          height="300px"
+          onRequestClose={toggle}
+          title={`${environment.name}`}
+        >
+          <>
+            {/* Add checkbox to change deployment mode (auto | manaul) */}
+            {/* Add branch selector (probably will have to create a new component that lets the user pick multiple) */}
+            {/* Add Flex to keep this inline */}
+            <CheckboxRow
+              label="Disable new comments for deployments"
+              checked={isNewCommentsDisabled}
+              toggle={() => handleToggleCommentStatus(isNewCommentsDisabled)}
+            />
+            <DocsHelper
+              disableMargin
+              tooltipText="When checked, comments for every new deployment are disabled. Instead, the most recent comment is updated each time."
+              placement="top-end"
+            />
+            {/* <Flex>
+        <ActionsWrapper>
+          <FlexWrap>
+            <Div></Div>
+          </FlexWrap>
+        </ActionsWrapper>
+      </Flex> */}
+          </>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default EnvironmentSettings;
+
+const rotatingAnimation = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+const iconAnimation = css`
+  animation: ${rotatingAnimation} 1s linear infinite;
+`;
+
+const SettingsButton = styled.button<{ isLoading: boolean }>`
+  background: none;
+  color: white;
+  border: none;
+  margin-left: 10px;
+  cursor: pointer;
+  > i {
+    font-size: 20px;
+    ${({ isLoading }) => (isLoading ? iconAnimation : "")}
+  }
+`;
+
+const mockPromise = (): Promise<any> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({});
+    }, 1000);
+  });
+};