Merge pull request #1884 from porter-dev/nafees/preview-env-new-endpoints

Add placeholder when preview environments don't exist

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

@@ -64,7 +64,7 @@ const DeploymentDetail = () => {
   return (
     <StyledExpandedChart>
       <HeaderWrapper>
-        <BackButton to={"/preview-environments"}>
+        <BackButton to={`/preview-environments?repository=${repository}`}>
           <BackButtonImg src={backArrow} />
         </BackButton>
         <Title icon={pr_icon} iconWidth="25px">

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

@@ -29,6 +29,11 @@ const EnvironmentsList = ({ environments, setEnvironments }: Props) => {
           <i className="material-icons">add</i> Add Repository
         </Button>
       </ControlRow>
+      {environments.length === 0 && (
+        <Placeholder>
+          No repositories found with Preview Environments enabled.
+        </Placeholder>
+      )}
       <EnvironmentsGrid>
         {environments.map((env) => (
           <EnvironmentCard
@@ -44,6 +49,28 @@ const EnvironmentsList = ({ environments, setEnvironments }: Props) => {
 
 export default EnvironmentsList;
 
+const Placeholder = styled.div`
+  padding: 30px;
+  margin-top: 35px;
+  padding-bottom: 40px;
+  font-size: 13px;
+  color: #ffffff44;
+  min-height: 400px;
+  height: 50vh;
+  background: #ffffff11;
+  border-radius: 8px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  > i {
+    font-size: 18px;
+    margin-right: 8px;
+  }
+`;
+
 const EnvironmentsGrid = styled.div`
   margin-top: 32px;
   padding-bottom: 150px;