fixed pr details routing and improved details header styling

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

@@ -216,6 +216,7 @@ const ActionContainer = styled.div`
   display: flex;
   justify-content: flex-end;
   margin-top: 20px;
+  padding-bottom: 100px;
 `;
 
 const CodeBlock = styled.span`

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

@@ -140,7 +140,7 @@ const DeploymentCard: React.FC<{
               deployment.status !== "inactive" && (
                 <>
                   <RowButton
-                    to={`/details/${deployment.namespace}?environment_id=${deployment.environment_id}`}
+                    to={`/preview-environments/details/${deployment.namespace}?environment_id=${deployment.environment_id}`}
                     key={deployment.id}
                   >
                     <i className="material-icons-outlined">info</i>

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

@@ -28,7 +28,6 @@ const DeploymentDetail = () => {
   useEffect(() => {
     let isSubscribed = true;
     let environment_id = parseInt(searchParams.get("environment_id"));
-
     api
       .getPRDeploymentByCluster(
         "<token>",
@@ -65,28 +64,11 @@ const DeploymentDetail = () => {
   return (
     <StyledExpandedChart>
       <HeaderWrapper>
-        <BackButton to={"/cluster-dashboard?selected_tab=preview_environments"}>
+        <BackButton to={"/preview-environments"}>
           <BackButtonImg src={backArrow} />
         </BackButton>
         <Title icon={pr_icon} iconWidth="25px">
           {prDeployment.gh_pr_name}
-          <DeploymentImageContainer>
-            <DeploymentTypeIcon src={integrationList.repo.icon} />
-            <RepositoryName
-              onMouseOver={() => {
-                setShowRepoTooltip(true);
-              }}
-              onMouseOut={() => {
-                setShowRepoTooltip(false);
-              }}
-            >
-              {repository}
-            </RepositoryName>
-            {showRepoTooltip && <Tooltip>{repository}</Tooltip>}
-          </DeploymentImageContainer>
-          <TagWrapper>
-            Namespace <NamespaceTag>{params.namespace}</NamespaceTag>
-          </TagWrapper>
         </Title>
         <InfoWrapper>
           {prDeployment.subdomain && (
@@ -95,6 +77,9 @@ const DeploymentDetail = () => {
               {prDeployment.subdomain}
             </PRLink>
           )}
+          <TagWrapper>
+            Namespace <NamespaceTag>{params.namespace}</NamespaceTag>
+          </TagWrapper>
         </InfoWrapper>
         <Flex>
           <Status>
@@ -102,11 +87,26 @@ const DeploymentDetail = () => {
             {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>
           <GHALink
             to={`https://github.com/${repository}/pull/${prDeployment.pull_request_id}`}
             target="_blank"
           >
-            <img src={github} /> GitHub
+            <img src={github} /> GitHub PR
             <i className="material-icons">open_in_new</i>
           </GHALink>
         </Flex>
@@ -203,6 +203,7 @@ const BackButtonImg = styled.img`
 
 const HeaderWrapper = styled.div`
   position: relative;
+  padding-right: 40px;
 `;
 
 const Dot = styled.div`
@@ -214,8 +215,7 @@ const Dot = styled.div`
 const InfoWrapper = styled.div`
   display: flex;
   align-items: center;
-  width: auto;
-  justify-content: space-between;
+  margin-top: 20px;
 `;
 
 const TagWrapper = styled.div`
@@ -336,7 +336,7 @@ const DeploymentImageContainer = styled.div`
   font-size: 13px;
   position: relative;
   display: flex;
-  margin-left: 15px;
+  margin-left: 5px;
   margin-bottom: -3px;
   align-items: center;
   font-weight: 400;

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

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