chore: minor fixes

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

@@ -174,7 +174,7 @@ const DeploymentCard: React.FC<{
 
   const DeploymentCardActions = [
     {
-      active: deployment.last_workflow_run_url,
+      active: !!deployment.last_workflow_run_url,
       label: "View last workflow",
       action: (e: React.MouseEvent) => {
         e.preventDefault();
@@ -195,7 +195,7 @@ const DeploymentCard: React.FC<{
 
   return (
     <DeploymentCardWrapper
-      to={`/preview-environments/details/${deployment.namespace}?environment_id=${deployment.environment_id}`}
+      to={`/preview-environments/details/${deployment.id}?environment_id=${deployment.environment_id}`}
     >
       <DataContainer>
         <PRName>

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

@@ -18,7 +18,7 @@ import Modal from "main/home/modals/Modal";
 import { validatePorterYAML } from "../utils";
 
 const DeploymentDetail = () => {
-  const { params } = useRouteMatch<{ namespace: string }>();
+  const { params } = useRouteMatch<{ id: string }>();
   const context = useContext(Context);
   const [prDeployment, setPRDeployment] = useState<PRDeployment>(null);
   const [environmentId, setEnvironmentId] = useState("");
@@ -38,10 +38,10 @@ const DeploymentDetail = () => {
     let environment_id = parseInt(searchParams.get("environment_id"));
     setEnvironmentId(searchParams.get("environment_id"));
     api
-      .getPRDeploymentByEnvironment(
+      .getPRDeploymentByID(
         "<token>",
         {
-          namespace: params.namespace,
+          id: parseInt(params.id),
         },
         {
           project_id: currentProject.id,
@@ -63,11 +63,11 @@ const DeploymentDetail = () => {
       });
   }, [params]);
 
-  if (!prDeployment) {
-    return <Loading />;
-  }
-
   useEffect(() => {
+    if (!prDeployment) {
+      return;
+    }
+
     const isSubscribed = true;
     const environment_id = parseInt(searchParams.get("environment_id"));
 
@@ -90,9 +90,91 @@ const DeploymentDetail = () => {
           setPorterYAMLErrors([]);
         }
       });
-  }, []);
+  }, [prDeployment]);
 
-  let repository = `${prDeployment.gh_repo_owner}/${prDeployment.gh_repo_name}`;
+  if (!prDeployment) {
+    return <Loading />;
+  }
+
+  const repository = `${prDeployment.gh_repo_owner}/${prDeployment.gh_repo_name}`;
+
+  // TODO (soham): Add a view linking to the current workflow
+  if (!prDeployment.namespace) {
+    return (
+      <>
+        <BreadcrumbRow>
+          <Breadcrumb to={`/preview-environments/deployments/settings`}>
+            <ArrowIcon src={PullRequestIcon} />
+            <Wrap>Preview environments</Wrap>
+          </Breadcrumb>
+          <Slash>/</Slash>
+          <Breadcrumb
+            to={`/preview-environments/deployments/${environmentId}/${repository}`}
+          >
+            <GitIcon src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png" />
+            <Wrap>{repository}</Wrap>
+          </Breadcrumb>
+        </BreadcrumbRow>
+        <StyledExpandedChart>
+          <HeaderWrapper>
+            <Title
+              icon={pr_icon}
+              iconWidth="25px"
+              onClick={() =>
+                window.open(
+                  `https://github.com/${repository}/pull/${prDeployment.pull_request_id}`,
+                  "_blank"
+                )
+              }
+            >
+              {prDeployment.gh_pr_name}
+            </Title>
+            <InfoWrapper>
+              {prDeployment.subdomain && (
+                <PRLink to={prDeployment.subdomain} target="_blank">
+                  <i className="material-icons">link</i>
+                  {prDeployment.subdomain}
+                </PRLink>
+              )}
+            </InfoWrapper>
+            <Flex>
+              <Status>
+                <StatusDot status={prDeployment.status} />
+                {capitalize(prDeployment.status)}
+              </Status>
+              <Dot>•</Dot>
+              <DeploymentImageContainer>
+                <DeploymentTypeIcon src={integrationList.repo.icon} />
+                <RepositoryName
+                  onMouseOver={() => {
+                    setShowRepoTooltip(true);
+                  }}
+                  onMouseOut={() => {
+                    setShowRepoTooltip(false);
+                  }}
+                >
+                  {repository}
+                </RepositoryName>
+                {showRepoTooltip && <Tooltip>{repository}</Tooltip>}
+              </DeploymentImageContainer>
+              <Dot>•</Dot>
+              {prDeployment.last_workflow_run_url ? (
+                <GHALink
+                  to={prDeployment.last_workflow_run_url}
+                  target="_blank"
+                >
+                  <img src={github} /> View last workflow run
+                  <i className="material-icons">open_in_new</i>
+                </GHALink>
+              ) : null}
+            </Flex>
+            <LinkToActionsWrapper></LinkToActionsWrapper>
+          </HeaderWrapper>
+          <ChartListWrapper></ChartListWrapper>
+        </StyledExpandedChart>
+      </>
+    );
+  }
 
   return (
     <>
@@ -148,7 +230,7 @@ const DeploymentDetail = () => {
               </PRLink>
             )}
             <TagWrapper>
-              Namespace <NamespaceTag>{params.namespace}</NamespaceTag>
+              Namespace <NamespaceTag>{prDeployment.namespace}</NamespaceTag>
             </TagWrapper>
           </InfoWrapper>
           <Flex>
@@ -198,7 +280,7 @@ const DeploymentDetail = () => {
             currentCluster={context.currentCluster}
             currentView="cluster-dashboard"
             sortType="Newest"
-            namespace={params.namespace}
+            namespace={prDeployment.namespace}
             disableBottomPadding
             closeChartRedirectUrl={`${window.location.pathname}${window.location.search}`}
           />

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

@@ -26,55 +26,11 @@ const AvailableStatusFilters = ["all", "created", "failed", "not_deployed"];
 
 type AvailableStatusFiltersType = typeof AvailableStatusFilters[number];
 
-
-const HARD_CODED_DEPLOYMENTS: PRDeployment[] = [
-  {
-    id: 1,
-    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: "gh_pr_name",
-    gh_repo_owner: "meehawk",
-    gh_repo_name: "meehawk",
-    gh_commit_sha: "3659ef050a687da4d04bb870b27058bd9d1957be",
-    gh_pr_branch_from: "gh_pr_branch_from",
-    gh_pr_branch_into: "gh_pr_branch_into",
-  },
-  {
-    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 DeploymentList = () => {
   const [sortOrder, setSortOrder] = useState("Newest");
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
-  const [deploymentList, setDeploymentList] = useState<PRDeployment[]>([
-    ...HARD_CODED_DEPLOYMENTS
-  ]);
+  const [deploymentList, setDeploymentList] = useState<PRDeployment[]>([]);
   const [pullRequests, setPullRequests] = useState<PullRequest[]>([]);
   const [searchValue, setSearchValue] = useState("");
   const [newCommentsDisabled, setNewCommentsDisabled] = useState(false);
@@ -172,7 +128,7 @@ const DeploymentList = () => {
           }
 
           setPorterYAMLErrors(porterYAMLErrors);
-          setDeploymentList(deploymentList.deployments ?? HARD_CODED_DEPLOYMENTS);
+          setDeploymentList(deploymentList.deployments ?? []);
           setPullRequests(deploymentList.pull_requests || []);
 
           setNewCommentsDisabled(

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

@@ -113,6 +113,16 @@ const EnvironmentCard = ({ environment, onDelete }: Props) => {
             <RepoLink
               to={`https://github.com/${git_repo_owner}/${git_repo_name}`}
               target="_blank"
+              // TODO (soham): FIXME
+              // onClick={(e) => {
+              //   e.preventDefault();
+              //   e.stopPropagation();
+
+              //   window.open(
+              //     `https://github.com/${git_repo_owner}/${git_repo_name}`,
+              //     "_blank"
+              //   );
+              // }}
             >
               <i className="material-icons">open_in_new</i>
               View Repo

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

@@ -22,7 +22,7 @@ export const Routes = () => {
         <Route path={`${path}/connect-repo`}>
           <ConnectNewRepo />
         </Route>
-        <Route path={`${path}/details/:namespace?`}>
+        <Route path={`${path}/details/:id`}>
           <DeploymentDetail />
         </Route>
         <Route

dashboard/src/shared/api.tsx

@@ -439,9 +439,9 @@ const getPRDeploymentList = baseApi<
   return `/api/projects/${project_id}/clusters/${cluster_id}/deployments`;
 });
 
-const getPRDeploymentByEnvironment = baseApi<
+const getPRDeploymentByID = baseApi<
   {
-    namespace: string;
+    id: number;
   },
   {
     cluster_id: number;
@@ -454,27 +454,28 @@ const getPRDeploymentByEnvironment = baseApi<
   return `/api/projects/${project_id}/clusters/${cluster_id}/environments/${environment_id}/deployment`;
 });
 
-const getPRDeployment = baseApi<
-  {
-    namespace: string;
-  },
-  {
-    cluster_id: number;
-    project_id: number;
-    git_installation_id: number;
-    git_repo_owner: string;
-    git_repo_name: string;
-  }
->("GET", (pathParams) => {
-  const {
-    cluster_id,
-    project_id,
-    git_installation_id,
-    git_repo_owner,
-    git_repo_name,
-  } = pathParams;
-  return `/api/projects/${project_id}/gitrepos/${git_installation_id}/${git_repo_owner}/${git_repo_name}/clusters/${cluster_id}/deployment`;
-});
+// TODO (soham): Check if we are really using this?
+// const getPRDeployment = baseApi<
+//   {
+//     namespace: string;
+//   },
+//   {
+//     cluster_id: number;
+//     project_id: number;
+//     git_installation_id: number;
+//     git_repo_owner: string;
+//     git_repo_name: string;
+//   }
+// >("GET", (pathParams) => {
+//   const {
+//     cluster_id,
+//     project_id,
+//     git_installation_id,
+//     git_repo_owner,
+//     git_repo_name,
+//   } = pathParams;
+//   return `/api/projects/${project_id}/gitrepos/${git_installation_id}/${git_repo_owner}/${git_repo_name}/clusters/${cluster_id}/deployment`;
+// });
 
 const deletePRDeployment = baseApi<
   {},
@@ -2344,8 +2345,8 @@ export default {
   getClusterNode,
   getConfigMap,
   getPRDeploymentList,
-  getPRDeploymentByEnvironment,
-  getPRDeployment,
+  getPRDeploymentByID,
+  // getPRDeployment,
   getGHAWorkflowTemplate,
   getGitRepoList,
   getGitRepoPermission,