rfac: move calls to utils

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

@@ -15,6 +15,7 @@ import { capitalize } from "shared/string_utils";
 import leftArrow from "assets/left-arrow.svg";
 import Banner from "components/Banner";
 import Modal from "main/home/modals/Modal";
+import { validatePorterYAML } from "../utils";
 
 const DeploymentDetail = () => {
   const { params } = useRouteMatch<{ namespace: string }>();
@@ -23,9 +24,9 @@ const DeploymentDetail = () => {
   const [environmentId, setEnvironmentId] = useState("");
   const [showRepoTooltip, setShowRepoTooltip] = useState(false);
   const [porterYAMLErrors, setPorterYAMLErrors] = useState<string[]>([]);
-  const [expandedPorterYAMLErrors, setExpandedPorterYAMLErrors] = useState<string[]>(
-    []
-  );
+  const [expandedPorterYAMLErrors, setExpandedPorterYAMLErrors] = useState<
+    string[]
+  >([]);
 
   const { currentProject, currentCluster } = useContext(Context);
 
@@ -68,21 +69,15 @@ const DeploymentDetail = () => {
   }
 
   useEffect(() => {
-    let isSubscribed = true;
-    let environment_id = parseInt(searchParams.get("environment_id"));
-
-    api
-      .validatePorterYAML(
-        "<token>",
-        {
-          branch: prDeployment.gh_pr_branch_from,
-        },
-        {
-          project_id: currentProject.id,
-          cluster_id: currentCluster.id,
-          environment_id: environment_id,
-        }
-      )
+    const isSubscribed = true;
+    const environment_id = parseInt(searchParams.get("environment_id"));
+
+    validatePorterYAML({
+      projectID: currentProject.id,
+      clusterID: currentCluster.id,
+      environmentID: environment_id,
+      branch: prDeployment.gh_pr_branch_from,
+    })
       .then(({ data }) => {
         if (!isSubscribed) {
           return;
@@ -109,7 +104,12 @@ const DeploymentDetail = () => {
         >
           <Message>
             {expandedPorterYAMLErrors.map((el) => {
-              return <div>{"- "}{el}</div>
+              return (
+                <div>
+                  {"- "}
+                  {el}
+                </div>
+              );
             })}
           </Message>
         </Modal>

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

@@ -20,6 +20,7 @@ import pullRequestIcon from "assets/pull_request_icon.svg";
 import filterOutline from "assets/filter-outline.svg";
 import sort from "assets/sort.svg";
 import { search } from "shared/search";
+import { getPRDeploymentList, validatePorterYAML } from "../utils";
 
 const AvailableStatusFilters = ["all", "created", "failed", "not_deployed"];
 
@@ -77,9 +78,9 @@ const DeploymentList = () => {
   const [searchValue, setSearchValue] = useState("");
   const [newCommentsDisabled, setNewCommentsDisabled] = useState(false);
   const [porterYAMLErrors, setPorterYAMLErrors] = useState<string[]>([]);
-  const [expandedPorterYAMLErrors, setExpandedPorterYAMLErrors] = useState(
-    null
-  );
+  const [expandedPorterYAMLErrors, setExpandedPorterYAMLErrors] = useState<
+    string[]
+  >([]);
 
   const [
     statusSelectorVal,
@@ -98,20 +99,6 @@ const DeploymentList = () => {
 
   const selectedRepo = `${repo_owner}/${repo_name}`;
 
-  const getPRDeploymentList = () => {
-    return api.getPRDeploymentList(
-      "<token>",
-      {
-        environment_id: Number(environment_id),
-      },
-      {
-        project_id: currentProject.id,
-        cluster_id: currentCluster.id,
-      }
-    );
-    // return mockRequest();
-  };
-
   const getEnvironment = () => {
     return api.getEnvironment(
       "<token>",
@@ -124,18 +111,6 @@ const DeploymentList = () => {
     );
   };
 
-  const validatePorterYAML = () => {
-    return api.validatePorterYAML(
-      "<token>",
-      {},
-      {
-        project_id: currentProject.id,
-        cluster_id: currentCluster.id,
-        environment_id: Number(environment_id),
-      }
-    );
-  };
-
   useEffect(() => {
     const status_filter = getQueryParam("status_filter");
 
@@ -158,8 +133,16 @@ const DeploymentList = () => {
     setIsLoading(true);
 
     Promise.allSettled([
-      validatePorterYAML(),
-      getPRDeploymentList(),
+      validatePorterYAML({
+        projectID: currentProject.id,
+        clusterID: currentCluster.id,
+        environmentID: Number(environment_id),
+      }),
+      getPRDeploymentList({
+        projectID: currentProject.id,
+        clusterID: currentCluster.id,
+        environmentID: Number(environment_id),
+      }),
       getEnvironment(),
     ])
       .then(
@@ -205,12 +188,16 @@ const DeploymentList = () => {
     return () => {
       isSubscribed = false;
     };
-  }, [currentCluster, currentProject]);
+  }, [currentCluster, currentProject, environment_id]);
 
   const handleRefresh = async () => {
     setIsLoading(true);
     try {
-      const { data } = await getPRDeploymentList();
+      const { data } = await getPRDeploymentList({
+        projectID: currentProject.id,
+        clusterID: currentCluster.id,
+        environmentID: Number(environment_id),
+      });
       setDeploymentList(data.deployments || []);
       setPullRequests(data.pull_requests || []);
     } catch (error) {
@@ -351,9 +338,9 @@ const DeploymentList = () => {
 
   return (
     <>
-      {expandedPorterYAMLErrors && (
+      {expandedPorterYAMLErrors.length && (
         <Modal
-          onRequestClose={() => setExpandedPorterYAMLErrors(null)}
+          onRequestClose={() => setExpandedPorterYAMLErrors([])}
           height="auto"
         >
           <Message>

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

@@ -15,18 +15,18 @@ import pr_icon from "assets/pull_request_icon.svg";
 import { EllipsisTextWrapper, RepoLink } from "../components/styled";
 
 const dummyData: any = [
- {
-  name: "this is a name",
-  branches: "asdf"
- },
- {
-  name: "this is a name",
-  branches: "asdf"
- },
- {
-  name: "this is a name",
-  branches: "asdf"
- },
+  {
+    name: "this is a name",
+    branches: "asdf",
+  },
+  {
+    name: "this is a name",
+    branches: "asdf",
+  },
+  {
+    name: "this is a name",
+    branches: "asdf",
+  },
 ];
 
 const CreateEnvironment: React.FC = () => {
@@ -49,7 +49,9 @@ const CreateEnvironment: React.FC = () => {
             width: 140,
             Cell: ({ row }: CellProps<any>) => {
               return (
-                <>
+                <div style={{
+                  cursor: 'pointer',
+                }} onClick={() => alert("Hello world")}>
                   <PRName>
                     <PRIcon src={pr_icon} alt="pull request icon" />
                     <EllipsisTextWrapper tooltipText="test">
@@ -65,22 +67,19 @@ const CreateEnvironment: React.FC = () => {
                   <Flex>
                     <DeploymentImageContainer>
                       <InfoWrapper>
-                        <LastDeployed>
-                          Last updated xyz
-                        </LastDeployed>
+                        <LastDeployed>Last updated xyz</LastDeployed>
                       </InfoWrapper>
                       <SepDot>•</SepDot>
                       <MergeInfoWrapper>
-                      <MergeInfo
-                      >
-                        from-this-branch
-                        <i className="material-icons">arrow_forward</i>
-                        to-this-branch
-                      </MergeInfo>
-                    </MergeInfoWrapper>
+                        <MergeInfo>
+                          from-this-branch
+                          <i className="material-icons">arrow_forward</i>
+                          to-this-branch
+                        </MergeInfo>
+                      </MergeInfoWrapper>
                     </DeploymentImageContainer>
                   </Flex>
-                </>
+                </div>
               );
             },
           },
@@ -89,13 +88,11 @@ const CreateEnvironment: React.FC = () => {
     ],
     []
   );
- 
+
   return (
     <>
       <BreadcrumbRow>
-        <Breadcrumb
-          to={`/preview-environments/deployments/settings`}
-        >
+        <Breadcrumb to={`/preview-environments/deployments/settings`}>
           <ArrowIcon src={PullRequestIcon} />
           <Wrap>Preview environments</Wrap>
         </Breadcrumb>
@@ -113,11 +110,14 @@ const CreateEnvironment: React.FC = () => {
         capitalize={false}
       />
       <DarkMatter />
-      <Helper>Select an open pull request to preview. Pull requests must contain a <Code>porter.yaml</Code> file.</Helper>
+      <Helper>
+        Select an open pull request to preview. Pull requests must contain a{" "}
+        <Code>porter.yaml</Code> file.
+      </Helper>
       <Br height="10px" />
-      <Table 
-        columns={columns} 
-        data={dummyData} 
+      <Table
+        columns={columns}
+        data={dummyData}
         placeholder="No open pull requests found."
       />
       <SubmitButton>Create preview deployment</SubmitButton>
@@ -128,8 +128,8 @@ const CreateEnvironment: React.FC = () => {
 export default CreateEnvironment;
 
 const Code = styled.span`
-  font-family: monospace;
-;`
+  font-family: monospace; ;
+`;
 
 const Spacer = styled.div`
   width: 5px;
@@ -295,7 +295,7 @@ const DeleteButton = styled.div`
 
 const Br = styled.div<{ height: string }>`
   width: 100%;
-  height: ${props => props.height || "2px"};
+  height: ${(props) => props.height || "2px"};
 `;
 
 const StyledPlaceholder = styled.div`

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

@@ -2,11 +2,8 @@ import React, { useContext, useState } from "react";
 import { capitalize } from "shared/string_utils";
 import styled from "styled-components";
 import { Environment } from "../types";
-import Options from "components/OptionsDropdown";
 import api from "shared/api";
 import { Context } from "shared/Context";
-import Modal from "main/home/modals/Modal";
-import InputRow from "components/form-components/InputRow";
 import DynamicLink from "components/DynamicLink";
 import { RepoLink } from "../components/styled";
 

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

@@ -0,0 +1,50 @@
+import api from "shared/api";
+
+interface ValidatePorterYAMLProps {
+  projectID: number;
+  clusterID: number;
+  environmentID: number;
+  branch?: string;
+}
+
+export const validatePorterYAML = ({
+  projectID,
+  clusterID,
+  environmentID,
+  branch,
+}: ValidatePorterYAMLProps) => {
+  return api.validatePorterYAML(
+    "<token>",
+    {
+      ...(branch ? { branch } : {}),
+    },
+    {
+      project_id: projectID,
+      cluster_id: clusterID,
+      environment_id: environmentID,
+    }
+  );
+};
+
+interface GetPRDeploymentListProps {
+  projectID: number;
+  clusterID: number;
+  environmentID: number;
+}
+
+export const getPRDeploymentList = ({
+  clusterID,
+  projectID,
+  environmentID,
+}: GetPRDeploymentListProps) => {
+  return api.getPRDeploymentList(
+    "<token>",
+    {
+      environment_id: environmentID,
+    },
+    {
+      project_id: projectID,
+      cluster_id: clusterID,
+    }
+  );
+};