Improvements on readability and usability for lists

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

@@ -27,6 +27,7 @@ const DeploymentCard: React.FC<{
   const [isDeleting, setIsDeleting] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [hasErrorOnReEnabling, setHasErrorOnReEnabling] = useState(false);
+  const [showMergeInfoTooltip, setShowMergeInfoTooltip] = useState(false);
   const { url: currentUrl } = useRouteMatch();
 
   let repository = `${deployment.gh_repo_owner}/${deployment.gh_repo_name}`;
@@ -53,6 +54,7 @@ const DeploymentCard: React.FC<{
 
   const reEnablePreviewEnvironment = () => {
     setIsLoading(true);
+
     api
       .reenablePreviewEnvironmentDeployment(
         "<token>",
@@ -82,7 +84,29 @@ const DeploymentCard: React.FC<{
       <DataContainer>
         <PRName>
           <PRIcon src={pr_icon} alt="pull request icon" />
-          {deployment.gh_pr_name}
+          <DynamicLink
+            to={`https://github.com/${deployment.gh_repo_owner}/${deployment.gh_repo_name}/pull/${deployment.pull_request_id}`}
+            target="_blank"
+          >
+            {deployment.gh_pr_name}
+          </DynamicLink>
+          {deployment.gh_branch_from && deployment.gh_branch_into ? (
+            <MergeInfoWrapper>
+              <MergeInfo
+                onMouseOver={() => setShowMergeInfoTooltip(true)}
+                onMouseOut={() => setShowMergeInfoTooltip(false)}
+              >
+                From: {deployment.gh_branch_from} Into:{" "}
+                {deployment.gh_branch_into}
+              </MergeInfo>
+              {showMergeInfoTooltip && (
+                <Tooltip>
+                  From: {deployment.gh_branch_from} Into:{" "}
+                  {deployment.gh_branch_into}
+                </Tooltip>
+              )}
+            </MergeInfoWrapper>
+          ) : null}
         </PRName>
 
         <Flex>
@@ -313,7 +337,7 @@ const Status = styled.span`
 const StatusDot = styled.div`
   width: 8px;
   height: 8px;
-  margin-right: 15px;
+  margin-right: 10px;
   background: ${(props: { status: string }) =>
     props.status === "created"
       ? "#4797ff"
@@ -400,3 +424,22 @@ const LastDeployed = styled.div`
   align-items: center;
   color: #aaaabb66;
 `;
+
+const MergeInfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  position: relative;
+`;
+
+const MergeInfo = styled.div`
+  font-size: 13px;
+  margin-left: 14px;
+  margin-top: -1px;
+  align-items: center;
+  color: #aaaabb66;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 300px;
+`;

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

@@ -233,15 +233,10 @@ const DeploymentList = ({ environments }: { environments: Environment[] }) => {
     );
   };
 
-  const repoOptions = environments
-    .map((env) => ({
-      label: `${env.git_repo_owner}/${env.git_repo_name}`,
-      value: `${env.git_repo_owner}/${env.git_repo_name}`,
-    }))
-    .concat({
-      label: "All",
-      value: "all",
-    });
+  const repoOptions = environments.map((env) => ({
+    label: `${env.git_repo_owner}/${env.git_repo_name}`,
+    value: `${env.git_repo_owner}/${env.git_repo_name}`,
+  }));
 
   const handleStatusFilterChange = (value: string) => {
     pushQueryParams({ status_filter: value });
@@ -305,7 +300,13 @@ const DeploymentList = ({ environments }: { environments: Environment[] }) => {
             <Selector
               activeValue={selectedRepo}
               setActiveValue={handleRepoFilterChange}
-              options={repoOptions}
+              options={[
+                {
+                  label: "All",
+                  value: "all",
+                },
+                ...repoOptions,
+              ]}
               dropdownLabel="Repository"
               width="200px"
               dropdownWidth="300px"

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

@@ -7,6 +7,7 @@ import api from "shared/api";
 import { Context } from "shared/Context";
 import { ActionButton } from "../components/ActionButton";
 import Loading from "components/Loading";
+import DynamicLink from "components/DynamicLink";
 
 const PullRequestCard = ({
   pullRequest,
@@ -19,6 +20,7 @@ const PullRequestCard = ({
     Context
   );
   const [showRepoTooltip, setShowRepoTooltip] = useState(false);
+  const [showMergeInfoTooltip, setShowMergeInfoTooltip] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [hasError, setHasError] = useState(false);
 
@@ -48,13 +50,32 @@ const PullRequestCard = ({
       <DataContainer>
         <PRName>
           <PRIcon src={pr_icon} alt="pull request icon" />
-          {pullRequest.pr_title}
+          <DynamicLink
+            to={`https://github.com/${pullRequest.repo_owner}/${pullRequest.repo_name}/pull/${pullRequest.pr_number}`}
+            target="_blank"
+          >
+            {pullRequest.pr_title}
+          </DynamicLink>
+
+          <InfoWrapper>
+            <MergeInfo
+              onMouseOver={() => setShowMergeInfoTooltip(true)}
+              onMouseOut={() => setShowMergeInfoTooltip(false)}
+            >
+              From: {pullRequest.branch_from} Into: {pullRequest.branch_into}
+            </MergeInfo>
+            {showMergeInfoTooltip && (
+              <Tooltip>
+                From: {pullRequest.branch_from} Into: {pullRequest.branch_into}
+              </Tooltip>
+            )}
+          </InfoWrapper>
         </PRName>
 
         <Flex>
           <StatusContainer>
             <Status>
-              <StatusDot status="" />
+              <StatusDot />
               Not deployed
             </Status>
           </StatusContainer>
@@ -71,11 +92,6 @@ const PullRequestCard = ({
               {repository}
             </RepositoryName>
             {showRepoTooltip && <Tooltip>{repository}</Tooltip>}
-            <InfoWrapper>
-              <LastDeployed>
-                From: {pullRequest.branch_from} Into: {pullRequest.branch_into}
-              </LastDeployed>
-            </InfoWrapper>
           </DeploymentImageContainer>
         </Flex>
       </DataContainer>
@@ -124,7 +140,6 @@ const DeploymentCardWrapper = styled.div`
   margin-bottom: 5px;
   border-radius: 10px;
   padding: 14px;
-  overflow: hidden;
   height: 80px;
   font-size: 13px;
   animation: fadeIn 0.5s;
@@ -170,15 +185,8 @@ const Status = styled.span`
 const StatusDot = styled.div`
   width: 8px;
   height: 8px;
-  margin-right: 15px;
-  background: ${(props: { status: string }) =>
-    props.status === "created"
-      ? "#4797ff"
-      : props.status === "failed"
-      ? "#ed5f85"
-      : props.status === "completed"
-      ? "#00d12a"
-      : "#f5cb42"};
+  margin-right: 10px;
+  background: #ffffff88;
   border-radius: 20px;
   margin-left: 3px;
 `;
@@ -216,8 +224,8 @@ const RepositoryName = styled.div`
 
 const Tooltip = styled.div`
   position: absolute;
-  left: -20px;
-  top: 10px;
+  left: 14px;
+  top: 20px;
   min-height: 18px;
   max-width: calc(700px);
   padding: 5px 7px;
@@ -243,17 +251,18 @@ const Tooltip = styled.div`
 const InfoWrapper = styled.div`
   display: flex;
   align-items: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   margin-right: 8px;
+  position: relative;
 `;
 
-const LastDeployed = styled.div`
+const MergeInfo = styled.div`
   font-size: 13px;
   margin-left: 14px;
   margin-top: -1px;
-  display: flex;
   align-items: center;
   color: #aaaabb66;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 300px;
 `;

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

@@ -13,6 +13,7 @@ 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";
 
 type Props = {
   environment: Environment;
@@ -122,7 +123,12 @@ const EnvironmentCard = ({ environment, onDelete }: Props) => {
               src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png"
               alt="git repository icon"
             />
-            {git_repo_owner}/{git_repo_name}
+            <DynamicLink
+              to={`https://github.com/${git_repo_owner}/${git_repo_name}`}
+              target="_blank"
+            >
+              {git_repo_owner}/{git_repo_name}
+            </DynamicLink>
           </RepoName>
           <Status>
             <StatusDot status={last_deployment_status} />

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

@@ -11,6 +11,8 @@ export type PRDeployment = {
   gh_repo_owner: string;
   gh_repo_name: string;
   gh_commit_sha: string;
+  gh_branch_from?: string;
+  gh_branch_into?: string;
 };
 
 export type Environment = {