Implemented sort for stack list

dashboard/src/main/home/cluster-dashboard/stacks/Dashboard.tsx

@@ -1,13 +1,18 @@
 import DynamicLink from "components/DynamicLink";
+import Selector from "components/Selector";
 import React, { useEffect, useState } from "react";
 import { useHistory, useLocation } from "react-router";
 import { useRouting } from "shared/routing";
 import styled from "styled-components";
 import DashboardHeader from "../DashboardHeader";
 import NamespaceSelector from "../NamespaceSelector";
+import SortSelector from "../SortSelector";
 import StackList from "./_StackList";
 const Dashboard = () => {
   const [currentNamespace, setCurrentNamespace] = useState("default");
+  const [currentSort, setCurrentSort] = useState<
+    "created_at" | "updated_at" | "alphabetical"
+  >("created_at");
 
   const location = useLocation();
   const history = useHistory();
@@ -38,18 +43,65 @@ const Dashboard = () => {
           <i className="material-icons">add</i>
           Create Stack
         </Button>
-        <NamespaceSelector
-          namespace={currentNamespace}
-          setNamespace={handleNamespaceChange}
-        />
+        <FilterWrapper>
+          <StyledSortSelector>
+            <Label>
+              <i className="material-icons">sort</i> Sort
+            </Label>
+            <Selector
+              activeValue={currentSort}
+              setActiveValue={(sortType) => setCurrentSort(sortType as any)}
+              options={[
+                {
+                  value: "created_at",
+                  label: "Created at",
+                },
+                {
+                  value: "updated_at",
+                  label: "Last updated",
+                },
+                {
+                  value: "alphabetical",
+                  label: "Alphabetical",
+                },
+              ]}
+              dropdownLabel="Sort By"
+              width="150px"
+              dropdownWidth="230px"
+              closeOverlay={true}
+            />
+          </StyledSortSelector>
+          <NamespaceSelector
+            namespace={currentNamespace}
+            setNamespace={handleNamespaceChange}
+          />
+        </FilterWrapper>
       </ActionRow>
-      <StackList namespace={currentNamespace} />
+      <StackList namespace={currentNamespace} sortBy={currentSort} />
     </>
   );
 };
 
 export default Dashboard;
 
+const Label = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+
+  > i {
+    margin-right: 8px;
+    font-size: 18px;
+  }
+`;
+
+const StyledSortSelector = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  margin-right: 30px;
+`;
+
 const Button = styled(DynamicLink)`
   display: flex;
   flex-direction: row;
@@ -101,3 +153,7 @@ const ActionRow = styled.div`
   align-items: center;
   margin-bottom: 35px;
 `;
+
+const FilterWrapper = styled.div`
+  display: flex;
+`;

dashboard/src/main/home/cluster-dashboard/stacks/_StackList.tsx

@@ -1,6 +1,6 @@
 import DynamicLink from "components/DynamicLink";
 import Loading from "components/Loading";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import api from "shared/api";
 import { Context } from "shared/Context";
 import Placeholder from "components/Placeholder";
@@ -24,7 +24,7 @@ const StackList = ({
   sortBy,
 }: {
   namespace: string;
-  sortBy: "created_by" | "updated_at" | "alphabetical";
+  sortBy: "created_at" | "updated_at" | "alphabetical";
 }) => {
   const { currentProject, currentCluster, setCurrentError } = useContext(
     Context
@@ -93,6 +93,21 @@ const StackList = ({
     };
   }, [namespace]);
 
+  const sortedStacks = useMemo(() => {
+    return (
+      stacks?.sort((a, b) => {
+        switch (sortBy) {
+          case "created_at":
+            return Date.parse(a.created_at) < Date.parse(b.created_at) ? 1 : -1;
+          case "updated_at":
+            return Date.parse(a.updated_at) < Date.parse(b.updated_at) ? 1 : -1;
+          default:
+            return a.name > b.name ? 1 : -1;
+        }
+      }) || []
+    );
+  }, [stacks, sortBy]);
+
   if (isLoading) {
     return <Loading />;
   }
@@ -108,6 +123,16 @@ const StackList = ({
     );
   }
 
+  if (sortedStacks.length === 0) {
+    return (
+      <Placeholder height="250px">
+        <div>
+          <h3>No stacks found with the given filters</h3>
+        </div>
+      </Placeholder>
+    );
+  }
+
   return (
     <>
       <Card.Grid>