adjusted sorter + selector closes upon click

dashboard/src/components/Selector.tsx

@@ -58,6 +58,7 @@ export default class Selector extends Component<PropsType, StateType> {
           <Dropdown
             dropdownWidth={this.props.dropdownWidth ? this.props.dropdownWidth : this.props.width}
             dropdownMaxHeight={this.props.dropdownMaxHeight}
+            onClick={() => this.setState({ expanded: false })}
           >
             {this.renderDropdownLabel()}
             {this.renderOptionList()}

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -26,7 +26,7 @@ type StateType = {
 export default class ClusterDashboard extends Component<PropsType, StateType> {
   state = {
     namespace: 'default',
-    sortType: 'chronological',
+    sortType: 'Newest',
     currentChart: null as (ChartType | null)
   }
 
@@ -40,7 +40,7 @@ export default class ClusterDashboard extends Component<PropsType, StateType> {
     localStorage.setItem("SortType", this.state.sortType);
     // Reset namespace filter and close expanded chart on cluster change
     if (prevProps.currentCluster !== this.props.currentCluster) {
-      this.setState({ namespace: 'default', sortType: 'chronological', currentChart: null });
+      this.setState({ namespace: 'default', sortType: 'Newest', currentChart: null });
     }
   }
 

dashboard/src/main/home/cluster-dashboard/SortSelector.tsx

@@ -18,8 +18,9 @@ type StateType = {
 export default class SortSelector extends Component<PropsType, StateType> {
   state = {
     sortOptions: [
-      { label: 'chronological', value: 'chronological' },
-      { label: 'alphabetical', value: 'alphabetical' }
+      { label: 'Newest', value: 'Newest' },
+      { label: 'Oldest', value: 'Oldest' },
+      { label: 'Alphabetical', value: 'Alphabetical' }
     ] as {label: string, value: string}[]
   }
 

dashboard/src/main/home/cluster-dashboard/chart/ChartList.tsx

@@ -54,9 +54,11 @@ export default class ChartList extends Component<PropsType, StateType> {
         this.setState({ loading: false, error: true });
       } else {
         let charts = res.data || [];
-        if (this.props.sortType == "chronological") {
+        if (this.props.sortType == "Newest") {
           charts.sort((a: any, b: any) => (Date.parse(a.info.last_deployed) > Date.parse(b.info.last_deployed)) ? -1 : 1);
-        } else if (this.props.sortType == "alphabetical") {
+        } else if (this.props.sortType == "Oldest") {
+          charts.sort((a: any, b: any) => (Date.parse(a.info.last_deployed) > Date.parse(b.info.last_deployed)) ? 1 : -1);
+        } else if (this.props.sortType == "Alphabetical") {
           charts.sort((a: any, b: any) => (a.name > b.name) ? 1: -1);
         }
         this.setState({ charts }, () => {