updated create pr list

dashboard/src/components/Placeholder.tsx

@@ -18,7 +18,7 @@ const Placeholder: React.FC<Props> = ({
     <StyledPlaceholder height={height} minHeight={minHeight}>
       <Wrapper>
         <Title>{title}</Title>
-        {children}
+        <Flex>{children}</Flex>
       </Wrapper>
     </StyledPlaceholder>
   );
@@ -26,12 +26,16 @@ const Placeholder: React.FC<Props> = ({
 
 export default Placeholder;
 
-const Wrapper = styled.div`
-  margin-bottom: 10px;
+const Flex = styled.div`
   display: flex;
+  margin-top: 10px;
   align-items: center;
 `;
 
+const Wrapper = styled.div`
+  margin-bottom: 10px;
+`;
+
 const Title = styled.div`
   font-size: 16px;
   color: white;

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

@@ -18,32 +18,10 @@ import Banner from "components/Banner";
 import Modal from "main/home/modals/Modal";
 import { validatePorterYAML } from "../utils";
 
-// ret2
-const HARD_CODED_DEPLOYMENT: PRDeployment = {
-  id: 2,
-  created_at: "2021-03-01T00:00:00.000Z",
-  updated_at: "2021-03-01T00:00:00.000Z",
-  subdomain: "subdomain",
-  status: "created",
-  environment_id: 1,
-  pull_request_id: 1,
-  namespace: "namespace",
-  last_workflow_run_url: "",
-  gh_installation_id: 1,
-  gh_deployment_id: 1,
-  gh_pr_name: "some_awesome_pr",
-  gh_repo_owner: "godzilla",
-  gh_repo_name: "kong",
-  gh_commit_sha: "3659ef050a687da4d04bb870b27058bd9d1957be",
-  gh_pr_branch_from: "gh_pr_branch_from",
-  gh_pr_branch_into: "gh_pr_branch_into",
-}
-
 const DeploymentDetail = () => {
   const { params } = useRouteMatch<{ namespace: string }>();
   const context = useContext(Context);
-  // ret2 back to null
-  const [prDeployment, setPRDeployment] = useState<PRDeployment>(HARD_CODED_DEPLOYMENT);
+  const [prDeployment, setPRDeployment] = useState<PRDeployment>(null);
   const [environmentId, setEnvironmentId] = useState("");
   const [showRepoTooltip, setShowRepoTooltip] = useState(false);
   const [porterYAMLErrors, setPorterYAMLErrors] = useState<string[]>([]);
@@ -76,14 +54,12 @@ const DeploymentDetail = () => {
         if (!isSubscribed) {
           return;
         }
-        // ret2
-        //setPRDeployment(data);
+        setPRDeployment(data);
       })
       .catch((err) => {
         console.error(err);
         if (isSubscribed) {
-          // ret2
-          //setPRDeployment(null);
+          setPRDeployment(null);
         }
       });
   }, [params]);

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

@@ -114,42 +114,7 @@ const CreateEnvironment: React.FC = () => {
               row: { original: pullRequest },
             }: CellProps<PullRequest>) => {
               return (
-                <div
-                  style={{
-                    cursor: "pointer",
-                  }}
-                  onClick={() => {
-                    handlePRRowItemClick(pullRequest);
-                  }}
-                >
-                  <PRName>
-                    <PRIcon src={pr_icon} alt="pull request icon" />
-                    <EllipsisTextWrapper tooltipText={pullRequest.pr_title}>
-                      {pullRequest.pr_title}
-                    </EllipsisTextWrapper>
-                    <Spacer />
-                    <RepoLink to="" target="_blank">
-                      <i className="material-icons">open_in_new</i>
-                      View last workflow
-                    </RepoLink>
-                  </PRName>
-
-                  <Flex>
-                    <DeploymentImageContainer>
-                      <InfoWrapper>
-                        <LastDeployed>Last updated xyz</LastDeployed>
-                      </InfoWrapper>
-                      <SepDot>•</SepDot>
-                      <MergeInfoWrapper>
-                        <MergeInfo>
-                          {pullRequest.branch_from}
-                          <i className="material-icons">arrow_forward</i>
-                          {pullRequest.branch_into}
-                        </MergeInfo>
-                      </MergeInfoWrapper>
-                    </DeploymentImageContainer>
-                  </Flex>
-                </div>
+                <h1>asdf</h1>
               );
             },
           },
@@ -185,11 +150,44 @@ const CreateEnvironment: React.FC = () => {
         <Code>porter.yaml</Code> file.
       </Helper>
       <Br height="10px" />
-      <Table
-        columns={columns}
-        data={pullRequests}
-        placeholder="No open pull requests found."
-      />
+      <PullRequestList>
+        {
+          pullRequests.map((pullRequest: any, i: number) => {
+            return (
+              <PullRequestRow
+                onClick={() => {
+                  handlePRRowItemClick(pullRequest);
+                }}
+                isLast={i === dummyData.length - 1}
+                isSelected={pullRequest === selectedPR}
+              >
+                <PRName>
+                  <PRIcon src={pr_icon} alt="pull request icon" />
+                  <EllipsisTextWrapper tooltipText={pullRequest.pr_title}>
+                    {pullRequest.pr_title}
+                  </EllipsisTextWrapper>
+                </PRName>
+
+                <Flex>
+                  <DeploymentImageContainer>
+                    <InfoWrapper>
+                      <LastDeployed>#{pullRequest.pr_number} last updated xyz</LastDeployed>
+                    </InfoWrapper>
+                    <SepDot>•</SepDot>
+                    <MergeInfoWrapper>
+                      <MergeInfo>
+                        {pullRequest.branch_from}
+                        <i className="material-icons">arrow_forward</i>
+                        {pullRequest.branch_into}
+                      </MergeInfo>
+                    </MergeInfoWrapper>
+                  </DeploymentImageContainer>
+                </Flex>
+              </PullRequestRow>
+            )
+          })
+        }
+      </PullRequestList>
       {modalContent ? (
         <Modal onRequestClose={() => setModalContent(null)} height="auto">
           {modalContent}
@@ -232,6 +230,29 @@ const CreateEnvironment: React.FC = () => {
 
 export default CreateEnvironment;
 
+const PRNumber = styled.div`
+  color: #aaaabb;
+  font-weight: 400;
+  margin-left: 7px;
+`;
+
+const PullRequestList = styled.div`
+  border: 1px solid #494b4f;
+  border-radius: 5px;
+  overflow: hidden;
+`;
+
+const PullRequestRow = styled.div<{ isLast?: boolean, isSelected?: boolean }>`
+  width: 100%;
+  padding: 15px;
+  cursor: pointer;
+  background: ${props => props.isSelected ? "#ffffff11" : "#26292e"};
+  border-bottom: ${props => props.isLast ? "" : "1px solid #494b4f"};
+  :hover {
+    background: #ffffff11;
+  }
+`;
+
 const Code = styled.span`
   font-family: monospace; ;
 `;
@@ -307,7 +328,7 @@ const MergeInfo = styled.div`
 
 const PRIcon = styled.img`
   font-size: 20px;
-  height: 17px;
+  height: 16px;
   margin-right: 10px;
   color: #aaaabb;
   opacity: 50%;

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

@@ -89,12 +89,8 @@ const EnvironmentsList = () => {
       }
 
       setEnvironments(envs);
-
-      //
-      setEnvironments(HARD_CODED_ENVS);
     } catch (error) {
-      // ret2: remove placeholder (set to empty array)
-      setEnvironments(HARD_CODED_ENVS);
+      setEnvironments([]);
     }
   };