chore: minor fixes

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

@@ -4,7 +4,7 @@ import TitleSection from "components/TitleSection";
 import pr_icon from "assets/pull_request_icon.svg";
 import { useRouteMatch, useLocation } from "react-router";
 import DynamicLink from "components/DynamicLink";
-import { PRDeployment } from "../types";
+import { DeploymentStatus, PRDeployment } from "../types";
 import PullRequestIcon from "assets/pull_request_icon.svg";
 import Loading from "components/Loading";
 import { Context } from "shared/Context";
@@ -100,7 +100,10 @@ const DeploymentDetail = () => {
 
   const repository = `${prDeployment.gh_repo_owner}/${prDeployment.gh_repo_name}`;
 
-  if (!prDeployment.namespace) {
+  if (
+    !prDeployment.namespace &&
+    ["creating", "updating"].includes(prDeployment.status)
+  ) {
     return (
       <>
         <BreadcrumbRow>
@@ -172,22 +175,13 @@ const DeploymentDetail = () => {
           </HeaderWrapper>
           <ChartListWrapper>
             <Placeholder height="370px">
-              {prDeployment.status === "creating" ? (
-                <>
-                  This preview deployment has not been created yet.{" "}
-                  <ViewLastWorkflowLink
-                    to={`https://github.com/${prDeployment.gh_repo_owner}/${prDeployment.gh_repo_name}/actions`}
-                    target="_blank"
-                  >
-                    View last workflow
-                  </ViewLastWorkflowLink>
-                </>
-              ) : (
-                <>
-                  Error connecting to cluster&nbsp;
-                  <i className="material-icons">info</i>
-                </>
-              )}
+              This preview deployment has not been created yet.{" "}
+              <ViewLastWorkflowLink
+                to={`https://github.com/${prDeployment.gh_repo_owner}/${prDeployment.gh_repo_name}/actions`}
+                target="_blank"
+              >
+                View last workflow
+              </ViewLastWorkflowLink>
             </Placeholder>
           </ChartListWrapper>
         </StyledExpandedChart>

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

@@ -17,6 +17,8 @@ import Banner from "components/Banner";
 import Modal from "main/home/modals/Modal";
 import { useRouting } from "shared/routing";
 import PorterYAMLErrorsModal from "../components/PorterYAMLErrorsModal";
+import { PlaceHolder } from "brace";
+import Placeholder from "components/Placeholder";
 
 const CreateEnvironment: React.FC = () => {
   const router = useRouting();
@@ -87,6 +89,102 @@ const CreateEnvironment: React.FC = () => {
     }
   };
 
+  const renderPullRequestList = () => {
+    return (
+      <>
+        <Helper>
+          Select an open pull request to preview. Pull requests must contain a{" "}
+          <Code>porter.yaml</Code> file.
+        </Helper>
+        <Br height="10px" />
+        <PullRequestList>
+          {(pullRequests ?? []).map((pullRequest: PullRequest, i: number) => {
+            return (
+              <PullRequestRow
+                onClick={() => {
+                  handlePRRowItemClick(pullRequest);
+                }}
+                isLast={i === pullRequests.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>
+        {showErrorsModal && selectedPR ? (
+          <PorterYAMLErrorsModal
+            errors={porterYAMLErrors}
+            onClose={() => setShowErrorsModal(false)}
+            repo={selectedPR.repo_owner + "/" + selectedPR.repo_name}
+            branch={selectedPR.branch_from}
+          />
+        ) : null}
+        {selectedPR && porterYAMLErrors.length ? (
+          <ValidationErrorBannerWrapper>
+            <Banner type="warning">
+              We found some errors in the porter.yaml file in the&nbsp;
+              {selectedPR.branch_from}&nbsp;branch. &nbsp;
+              <LearnMoreButton onClick={() => setShowErrorsModal(true)}>
+                Learn more
+              </LearnMoreButton>
+            </Banner>
+          </ValidationErrorBannerWrapper>
+        ) : null}
+        <CreatePreviewDeploymentWrapper>
+          <SubmitButton
+            onClick={handleCreatePreviewDeployment}
+            disabled={loading || !selectedPR || porterYAMLErrors.length > 0}
+          >
+            Create preview deployment
+          </SubmitButton>
+          {selectedPR && porterYAMLErrors.length ? (
+            <RevalidatePorterYAMLSpanWrapper>
+              Please fix your porter.yaml file to continue.{" "}
+              <RevalidateSpan
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+
+                  if (!selectedPR) {
+                    return;
+                  }
+
+                  handlePRRowItemClick(selectedPR);
+                }}
+              >
+                Refresh
+              </RevalidateSpan>
+            </RevalidatePorterYAMLSpanWrapper>
+          ) : null}
+        </CreatePreviewDeploymentWrapper>
+      </>
+    );
+  };
+
   return (
     <>
       <BreadcrumbRow>
@@ -108,95 +206,16 @@ 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>
-      <Br height="10px" />
-      <PullRequestList>
-        {(pullRequests ?? []).map((pullRequest: PullRequest, i: number) => {
-          return (
-            <PullRequestRow
-              onClick={() => {
-                handlePRRowItemClick(pullRequest);
-              }}
-              isLast={i === pullRequests.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>
-      {showErrorsModal && selectedPR ? (
-        <PorterYAMLErrorsModal
-          errors={porterYAMLErrors}
-          onClose={() => setShowErrorsModal(false)}
-          repo={selectedPR.repo_owner + "/" + selectedPR.repo_name}
-          branch={selectedPR.branch_from}
-        />
-      ) : null}
-      {selectedPR && porterYAMLErrors.length ? (
-        <ValidationErrorBannerWrapper>
-          <Banner type="warning">
-            We found some errors in the porter.yaml file in the&nbsp;
-            {selectedPR.branch_from}&nbsp;branch. &nbsp;
-            <LearnMoreButton onClick={() => setShowErrorsModal(true)}>
-              Learn more
-            </LearnMoreButton>
-          </Banner>
-        </ValidationErrorBannerWrapper>
-      ) : null}
-      <CreatePreviewDeploymentWrapper>
-        <SubmitButton
-          onClick={handleCreatePreviewDeployment}
-          disabled={loading || !selectedPR || porterYAMLErrors.length > 0}
-        >
-          Create preview deployment
-        </SubmitButton>
-        {selectedPR && porterYAMLErrors.length ? (
-          <RevalidatePorterYAMLSpanWrapper>
-            Please fix your porter.yaml file to continue.{" "}
-            <RevalidateSpan
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-
-                if (!selectedPR) {
-                  return;
-                }
-
-                handlePRRowItemClick(selectedPR);
-              }}
-            >
-              Refresh
-            </RevalidateSpan>
-          </RevalidatePorterYAMLSpanWrapper>
-        ) : null}
-      </CreatePreviewDeploymentWrapper>
+      {pullRequests?.length ? (
+        renderPullRequestList()
+      ) : (
+        <>
+          <Br height="30px" />
+          <Placeholder height="370px">
+            You do not have any pull requests.
+          </Placeholder>
+        </>
+      )}
     </>
   );
 };