chore: minor fixes

api/server/handlers/environment/list_deployments_by_cluster.go

@@ -293,6 +293,8 @@ func fetchOpenPullRequests(
 				RepoName:   env.GitRepoName,
 				BranchFrom: pr.GetHead().GetRef(),
 				BranchInto: pr.GetBase().GetRef(),
+				CreatedAt:  pr.GetCreatedAt(),
+				UpdatedAt:  pr.GetUpdatedAt(),
 			})
 		}
 	}

api/types/environment.go

@@ -129,12 +129,14 @@ type GetDeploymentRequest struct {
 }
 
 type PullRequest struct {
-	Title      string `json:"pr_title"`
-	Number     uint   `json:"pr_number"`
-	RepoOwner  string `json:"repo_owner"`
-	RepoName   string `json:"repo_name"`
-	BranchFrom string `json:"branch_from"`
-	BranchInto string `json:"branch_into"`
+	Title      string    `json:"pr_title"`
+	Number     uint      `json:"pr_number"`
+	RepoOwner  string    `json:"repo_owner"`
+	RepoName   string    `json:"repo_name"`
+	BranchFrom string    `json:"branch_from"`
+	BranchInto string    `json:"branch_into"`
+	CreatedAt  time.Time `json:"created_at"`
+	UpdatedAt  time.Time `json:"updated_at"`
 }
 
 type ToggleNewCommentRequest struct {

dashboard/src/components/form-components/Helper.tsx

@@ -5,7 +5,7 @@ export const Helper = styled.div<{ color?: string }>`
   color: ${({ color }) => (color ? color : "#aaaabb")};
   line-height: 1.6em;
   font-size: 13px;
-  margin-bottom: 15px;
+  margin-bottom: 35px;
   margin-top: 20px;
 `;
 

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

@@ -46,13 +46,14 @@ const CreateEnvironment: React.FC = () => {
         capitalize={false}
       />
       <DarkMatter />
-      <TabSelector
+      {/* <TabSelector
         options={TAB_OPTIONS}
         currentTab={currentTab.value}
         setCurrentTab={(value: string) =>
           setCurrentTab(TAB_OPTIONS.find((tab) => tab.value === value))
         }
-      />
+      /> */}
+
       {currentTab.value === "pull_requests" ? (
         <CreatePREnvironment environmentID={environment_id} />
       ) : (

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

@@ -17,6 +17,8 @@ import RadioFilter from "components/RadioFilter";
 import sort from "assets/sort.svg";
 import { search } from "shared/search";
 import _ from "lodash";
+import { readableDate } from "shared/string_utils";
+import dayjs from "dayjs";
 
 interface Props {
   environmentID: string;
@@ -100,10 +102,12 @@ const CreatePREnvironment = ({ environmentID }: Props) => {
     });
 
     switch (sortOrder) {
-    //   case "Newest":
-    //     return _.sortBy(filteredBySearch, "updated_at").reverse();
-    //   case "Oldest":
-    //     return _.sortBy(filteredBySearch, "updated_at");
+      case "Recently Updated":
+        return _.sortBy(filteredBySearch, "updated_at").reverse();
+      case "Newest":
+        return _.sortBy(filteredBySearch, "created_at").reverse();
+      case "Oldest":
+        return _.sortBy(filteredBySearch, "created_at");
       case "Alphabetical":
       default:
         return _.sortBy(filteredBySearch, "gh_pr_name");
@@ -150,18 +154,18 @@ const CreatePREnvironment = ({ environmentID }: Props) => {
           <RefreshButton color={"#7d7d81"} onClick={handleRefresh}>
             <i className="material-icons">refresh</i>
           </RefreshButton>
-          {/* TODO: Uncomment when we support sorting. Right now we dont get dates from backend */}
-          {/* <RadioFilter
+          <RadioFilter
             icon={sort}
             selected={sortOrder}
             setSelected={setSortOrder}
             options={[
+              { label: "Recently Updated", value: "Recently Updated" },
               { label: "Newest", value: "Newest" },
               { label: "Oldest", value: "Oldest" },
               { label: "Alphabetical", value: "Alphabetical" },
             ]}
             name="Sort"
-          /> */}
+          />
         </Flex>
       </FlexRow>
       <Br height="10px" />
@@ -197,6 +201,11 @@ const CreatePREnvironment = ({ environmentID }: Props) => {
                         <i className="material-icons">arrow_forward</i>
                         {pullRequest.branch_into}
                       </MergeInfo>
+                      <SepDot>•</SepDot>
+                      <LastDeployed>
+                        Last updated{" "}
+                        {dayjs(pullRequest.updated_at).format("hh:mma on MM/DD/YYYY")}
+                      </LastDeployed>
                     </MergeInfoWrapper>
                   </DeploymentImageContainer>
                 </Flex>
@@ -275,6 +284,15 @@ const PullRequestRow = styled.div<{ isLast?: boolean; isSelected?: boolean }>`
   }
 `;
 
+const InfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 8px;
+`;
+
 const Code = styled.span`
   font-family: monospace; ;
 `;
@@ -299,7 +317,6 @@ const DeploymentImageContainer = styled.div`
 const LastDeployed = styled.div`
   font-size: 13px;
   margin-top: -1px;
-  margin-left: 10px;
   display: flex;
   align-items: center;
   color: #aaaabb66;
@@ -311,6 +328,7 @@ const MergeInfoWrapper = styled.div`
   margin-right: 8px;
   position: relative;
   margin-left: 10px;
+  gap: 8px;
 `;
 
 const MergeInfo = styled.div`
@@ -330,6 +348,10 @@ const MergeInfo = styled.div`
   }
 `;
 
+const SepDot = styled.div`
+  color: #aaaabb66;
+`;
+
 const PRIcon = styled.img`
   font-size: 20px;
   height: 16px;
@@ -446,7 +468,6 @@ const SearchRow = styled.div`
 const SearchRowWrapper = styled(SearchRow)`
   border-radius: 5px;
   width: 250px;
-  margin-top: 35px;
 `;
 
 const SearchBarWrapper = styled.div`

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

@@ -55,4 +55,6 @@ export type PullRequest = {
   repo_name: string;
   branch_from: string;
   branch_into: string;
+  created_at: string;
+  updated_at: string;
 };