Merge pull request #1901 from porter-dev/nico/fix-text-styling-on-cards

[FIX] Fixed overflow for Preview environments cards

dashboard/src/main/home/cluster-dashboard/preview-environments/components/styled.tsx

@@ -0,0 +1,84 @@
+import styled from "styled-components";
+import DynamicLink from "components/DynamicLink";
+import React, { useState } from "react";
+
+export const EllipsisTextWrapper: React.FC<
+  { tooltipText?: string } & React.HTMLAttributes<HTMLDivElement>
+> = ({ children, tooltipText, className, ...divProps }) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+  return (
+    <StyledTooltipWrapper
+      {...divProps}
+      className={className}
+      onMouseOver={() => setShowTooltip(true)}
+      onMouseOut={() => setShowTooltip(false)}
+    >
+      <StyledEllipsisTextWrapper>{children}</StyledEllipsisTextWrapper>
+      {tooltipText && showTooltip ? <Tooltip>{tooltipText}</Tooltip> : null}
+    </StyledTooltipWrapper>
+  );
+};
+
+export const Tooltip = styled.div`
+  position: absolute;
+  left: -20px;
+  top: 10px;
+  min-height: 18px;
+  max-width: calc(700px);
+  padding: 5px 7px;
+  background: #272731;
+  z-index: 999;
+  color: white;
+  font-size: 12px;
+  font-family: "Work Sans", sans-serif;
+  outline: 1px solid #ffffff55;
+  opacity: 0;
+  animation: faded-in 0.2s 0.15s;
+  animation-fill-mode: forwards;
+  @keyframes faded-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+const StyledTooltipWrapper = styled.div`
+  position: relative;
+  overflow: visible;
+`;
+
+export const StyledEllipsisTextWrapper = styled.span`
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  max-width: 350px;
+`;
+
+export const RepoLink = styled(DynamicLink)`
+  height: 22px;
+  border-radius: 50px;
+  margin-left: 6px;
+  display: flex;
+  font-size: 12px;
+  cursor: pointer;
+  color: #a7a6bb;
+  align-items: center;
+  justify-content: center;
+  :hover {
+    color: #ffffff;
+    > i {
+      color: #ffffff;
+    }
+  }
+
+  > i {
+    margin-right: 5px;
+    color: #a7a6bb;
+    font-size: 16px;
+  }
+`;

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

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
-import styled, { css, keyframes } from "styled-components";
-import { Environment, PRDeployment } from "../types";
+import styled, { keyframes } from "styled-components";
+import { PRDeployment } from "../types";
 import pr_icon from "assets/pull_request_icon.svg";
-import { integrationList } from "shared/common";
 import { useRouteMatch } from "react-router";
 import DynamicLink from "components/DynamicLink";
 import { capitalize, readableDate } from "shared/string_utils";
@@ -11,6 +10,7 @@ import { useContext } from "react";
 import { Context } from "shared/Context";
 import Loading from "components/Loading";
 import { ActionButton } from "../components/ActionButton";
+import { EllipsisTextWrapper, RepoLink } from "../components/styled";
 
 const DeploymentCard: React.FC<{
   deployment: PRDeployment;
@@ -23,14 +23,10 @@ const DeploymentCard: React.FC<{
     currentCluster,
     setCurrentError,
   } = useContext(Context);
-  const [showRepoTooltip, setShowRepoTooltip] = useState(false);
   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}`;
 
   const deleteDeployment = () => {
     setIsDeleting(true);
@@ -87,7 +83,9 @@ const DeploymentCard: React.FC<{
       <DataContainer>
         <PRName>
           <PRIcon src={pr_icon} alt="pull request icon" />
-          {deployment.gh_pr_name}
+          <EllipsisTextWrapper tooltipText={deployment.gh_pr_name}>
+            {deployment.gh_pr_name}
+          </EllipsisTextWrapper>
           {deployment.gh_pr_branch_from && deployment.gh_pr_branch_into ? (
             <MergeInfoWrapper>
               <MergeInfo
@@ -100,16 +98,15 @@ const DeploymentCard: React.FC<{
               </MergeInfo>
               {showMergeInfoTooltip && (
                 <Tooltip>
-                  {deployment.gh_pr_branch_from} {"->"} {deployment.gh_pr_branch_into}
+                  {deployment.gh_pr_branch_from} {"->"}{" "}
+                  {deployment.gh_pr_branch_into}
                 </Tooltip>
               )}
             </MergeInfoWrapper>
           ) : null}
           <RepoLink
-            onClick={e => {
-              e.stopPropagation();
-              window.open(`https://github.com/${deployment.gh_repo_owner}/${deployment.gh_repo_name}/pull/${deployment.pull_request_id}`, "_blank")
-            }}
+            to={`https://github.com/${deployment.gh_repo_owner}/${deployment.gh_repo_name}/pull/${deployment.pull_request_id}`}
+            target="_blank"
           >
             <i className="material-icons">open_in_new</i>
             View PR
@@ -178,7 +175,7 @@ const DeploymentCard: React.FC<{
                     message: `Are you sure you want to delete this deployment?`,
                     onYes: deleteDeployment,
                     onNo: () => setCurrentOverlay(null),
-                  })
+                  });
                 }}
               >
                 <i className="material-icons">delete</i>
@@ -201,30 +198,6 @@ const DeploymentCard: React.FC<{
 
 export default DeploymentCard;
 
-const RepoLink = styled.div`
-  height: 22px;
-  border-radius: 50px;
-  margin-left: 6px;
-  display: flex;
-  font-size: 12px;
-  cursor: pointer;
-  color: #a7a6bb;
-  align-items: center;
-  justify-content: center;
-  :hover {
-    color: #ffffff;
-    > i {
-      color: #ffffff;
-    }
-  }
-
-  > i {
-    margin-right: 5px;
-    color: #a7a6bb;
-    font-size: 16px;
-  }
-`;
-
 const SepDot = styled.div`
   color: #aaaabb66;
 `;
@@ -328,6 +301,7 @@ const PRIcon = styled.img`
 `;
 
 const RowButton = styled(DynamicLink)`
+  white-space: nowrap;
   font-size: 12px;
   padding: 8px 10px;
   margin-left: 10px;

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

@@ -58,7 +58,7 @@ const DeploymentList = ({ environments }: { environments: Environment[] }) => {
     const selected_repo = getQueryParam("repository");
 
     const repo = environments.find(
-      env => `${env.git_repo_owner}/${env.git_repo_name}` === selected_repo
+      (env) => `${env.git_repo_owner}/${env.git_repo_name}` === selected_repo
     );
 
     if (repo && true) {
@@ -162,14 +162,17 @@ const DeploymentList = ({ environments }: { environments: Environment[] }) => {
     } else if (statusSelectorVal === "inactive") {
       tmpDeploymentList = tmpDeploymentList.filter((d) => {
         return d.status === "inactive";
-      });      
+      });
     }
 
     return tmpDeploymentList;
   }, [selectedRepo, statusSelectorVal, deploymentList]);
 
   const filteredPullRequests = useMemo(() => {
-    if (statusSelectorVal !== "not_deployed" && statusSelectorVal !== "inactive") {
+    if (
+      statusSelectorVal !== "not_deployed" &&
+      statusSelectorVal !== "inactive"
+    ) {
       return [];
     }
 
@@ -245,7 +248,7 @@ const DeploymentList = ({ environments }: { environments: Environment[] }) => {
         <EventsGrid>{renderDeploymentList()}</EventsGrid>
       </Container>
     );
-  }
+  };
 
   return (
     <>
@@ -278,7 +281,7 @@ const DeploymentList = ({ environments }: { environments: Environment[] }) => {
                 {
                   value: "inactive",
                   label: "Inactive",
-                }
+                },
               ]}
               dropdownLabel="Status"
               width="150px"
@@ -290,7 +293,7 @@ const DeploymentList = ({ environments }: { environments: Environment[] }) => {
       </Flex>
       {renderMain()}
     </>
-  )
+  );
 };
 
 export default DeploymentList;
@@ -312,8 +315,8 @@ const Flex = styled.div`
 
   > i {
     cursor: pointer;
-    font-size 24px;
-    color: #969Fbbaa;
+    font-size: 24px;
+    color: #969fbbaa;
     padding: 3px;
     border-radius: 100px;
     :hover {

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

@@ -9,6 +9,7 @@ import { ActionButton } from "../components/ActionButton";
 import Loading from "components/Loading";
 import DynamicLink from "components/DynamicLink";
 import RecreateWorkflowFilesModal from "../components/RecreateWorkflowFilesModal";
+import { EllipsisTextWrapper, RepoLink } from "../components/styled";
 
 const PullRequestCard = ({
   pullRequest,
@@ -20,7 +21,6 @@ const PullRequestCard = ({
   const { currentProject, currentCluster, setCurrentError } = useContext(
     Context
   );
-  const [showRepoTooltip, setShowRepoTooltip] = useState(false);
   const [showMergeInfoTooltip, setShowMergeInfoTooltip] = useState(false);
   const [
     openRecreateWorkflowFilesModal,
@@ -29,8 +29,6 @@ const PullRequestCard = ({
   const [isLoading, setIsLoading] = useState(false);
   const [hasError, setHasError] = useState(false);
 
-  const repository = `${pullRequest.repo_owner}/${pullRequest.repo_name}`;
-
   const createPreviewEnvironment = async () => {
     setIsLoading(true);
     try {
@@ -40,7 +38,6 @@ const PullRequestCard = ({
       });
       onCreation(pullRequest);
     } catch (error) {
-      debugger;
       setCurrentError(error);
       setHasError(true);
       setTimeout(() => {
@@ -62,7 +59,9 @@ const PullRequestCard = ({
         <DataContainer>
           <PRName>
             <PRIcon src={pr_icon} alt="pull request icon" />
-            {pullRequest.pr_title}
+            <EllipsisTextWrapper tooltipText={pullRequest.pr_title}>
+              {pullRequest.pr_title}
+            </EllipsisTextWrapper>
             <InfoWrapper>
               <MergeInfo
                 onMouseOver={() => setShowMergeInfoTooltip(true)}
@@ -80,10 +79,8 @@ const PullRequestCard = ({
               )}
             </InfoWrapper>
             <RepoLink
-              onClick={e => {
-                e.stopPropagation();
-                window.open(`https://github.com/${pullRequest.repo_owner}/${pullRequest.repo_name}/pull/${pullRequest.pr_number}`, "_blank")
-              }}
+              to={`https://github.com/${pullRequest.repo_owner}/${pullRequest.repo_name}/pull/${pullRequest.pr_number}`}
+              target="_blank"
             >
               <i className="material-icons">open_in_new</i>
               View PR
@@ -122,30 +119,6 @@ const PullRequestCard = ({
 
 export default PullRequestCard;
 
-const RepoLink = styled.div`
-  height: 22px;
-  border-radius: 50px;
-  margin-left: 6px;
-  display: flex;
-  font-size: 12px;
-  cursor: pointer;
-  color: #a7a6bb;
-  align-items: center;
-  justify-content: center;
-  :hover {
-    color: #ffffff;
-    > i {
-      color: #ffffff;
-    }
-  }
-
-  > i {
-    margin-right: 5px;
-    color: #a7a6bb;
-    font-size: 16px;
-  }
-`;
-
 const Flex = styled.div`
   display: flex;
   align-items: center;
@@ -300,4 +273,4 @@ const MergeInfo = styled.div`
     font-size: 16px;
     margin: 0 2px;
   }
-`;
+`;

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

@@ -14,6 +14,7 @@ import { Context } from "shared/Context";
 import Modal from "main/home/modals/Modal";
 import InputRow from "components/form-components/InputRow";
 import DynamicLink from "components/DynamicLink";
+import { RepoLink } from "../components/styled";
 
 type Props = {
   environment: Environment;
@@ -94,7 +95,8 @@ const EnvironmentCard = ({ environment, onDelete }: Props) => {
           onRequestClose={closeForm}
         >
           <Warning highlight>
-            ⚠️ All Preview Environment deployments associated with this repo will be deleted.
+            ⚠️ All Preview Environment deployments associated with this repo
+            will be deleted.
           </Warning>
           <InputRow
             type="text"
@@ -123,10 +125,8 @@ const EnvironmentCard = ({ environment, onDelete }: Props) => {
             />
             {git_repo_owner}/{git_repo_name}
             <RepoLink
-              onClick={e => {
-                e.stopPropagation();
-                window.open(`https://github.com/${git_repo_owner}/${git_repo_name}`, "_blank")
-              }}
+              to={`https://github.com/${git_repo_owner}/${git_repo_name}`}
+              target="_blank"
             >
               <i className="material-icons">open_in_new</i>
               View Repo
@@ -142,8 +142,8 @@ const EnvironmentCard = ({ environment, onDelete }: Props) => {
             ) : null}
             {deployment_count > 0 ? (
               <Span>
-                {deployment_count || 0}{" "}
-                pull {deployment_count > 1 ? "requests" : "request"} deployed
+                {deployment_count || 0} pull{" "}
+                {deployment_count > 1 ? "requests" : "request"} deployed
               </Span>
             ) : (
               <Span>
@@ -176,29 +176,6 @@ const OptionWrapper = styled.div`
   justify-content: center;
 `;
 
-const RepoLink = styled.div`
-  height: 22px;
-  border-radius: 50px;
-  margin-left: 10px;
-  display: flex;
-  font-size: 12px;
-  color: #a7a6bb;
-  align-items: center;
-  justify-content: center;
-  :hover {
-    color: #ffffff;
-    > i {
-      color: #ffffff;
-    }
-  }
-
-  > i {
-    margin-right: 5px;
-    color: #a7a6bb;
-    font-size: 16px;
-  }
-`;
-
 const EnvironmentCardWrapper = styled.div`
   display: flex;
   background: #2b2e3699;