Merge branch 'nico/por-559-support-environment-group-creation-from' of github.com:porter-dev/porter into dev

dashboard/src/main/home/Home.tsx

@@ -541,6 +541,7 @@ const ViewWrapper = styled.div`
 const DashboardWrapper = styled.div`
   width: calc(85%);
   min-width: 300px;
+  height: fit-content;
 `;
 
 const StyledHome = styled.div`

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupList.tsx

@@ -87,8 +87,6 @@ class EnvGroupList extends Component<PropsType, StateType> {
         if (envGroup) {
           this.props.setExpandedEnvGroup(envGroup);
           return;
-        } else {
-          pushQueryParams(this.props, {}, ["selected_env_group"]);
         }
       }
       this.setState({ envGroups, loading: false });
@@ -118,6 +116,8 @@ class EnvGroupList extends Component<PropsType, StateType> {
             );
             if (envGroup) {
               this.props.setExpandedEnvGroup(envGroup);
+            } else {
+              pushQueryParams(this.props, {}, ["selected_env_group"]);
             }
           }
         });

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -207,8 +207,6 @@ const SettingsSection: React.FC<PropsType> = ({
       buttonStatus = "Unauthorized to create webhook token";
     }
 
-    console.log(currentChart.stack_id, !currentChart.stack_id?.length);
-
     return (
       <>
         {!currentChart.stack_id?.length &&

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/ExpandedStack/ExpandedStack.tsx

@@ -122,15 +122,16 @@ const ExpandedStack = () => {
       </InfoWrapper>
 
       {/* Stack error message */}
-      {stack.latest_revision &&
-      stack.latest_revision.status === "failed" &&
-      stack.latest_revision.message?.length > 0 ? (
+      {currentRevision &&
+      currentRevision?.reason &&
+      currentRevision?.message?.length > 0 ? (
         <StackErrorMessageStyles.Wrapper>
           <StackErrorMessageStyles.Title color="#b7b7c9">
-            Error reason:
+            Revision message:
           </StackErrorMessageStyles.Title>
           <StackErrorMessageStyles.Text color="#aaaabb">
-            {stack.latest_revision.message}
+            {currentRevision?.status === "failed" ? "Error: " : ""}
+            {currentRevision?.message}
           </StackErrorMessageStyles.Text>
         </StackErrorMessageStyles.Wrapper>
       ) : null}

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";
@@ -19,7 +19,13 @@ import {
 } from "./components/styles";
 import { getStackStatus, getStackStatusMessage } from "./shared";
 
-const StackList = ({ namespace }: { namespace: string }) => {
+const StackList = ({
+  namespace,
+  sortBy,
+}: {
+  namespace: string;
+  sortBy: "created_at" | "updated_at" | "alphabetical";
+}) => {
   const { currentProject, currentCluster, setCurrentError } = useContext(
     Context
   );
@@ -87,6 +93,21 @@ const StackList = ({ namespace }: { namespace: string }) => {
     };
   }, [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 />;
   }
@@ -102,6 +123,16 @@ const StackList = ({ namespace }: { namespace: string }) => {
     );
   }
 
+  if (sortedStacks.length === 0) {
+    return (
+      <Placeholder height="250px">
+        <div>
+          <h3>No stacks found with the given filters</h3>
+        </div>
+      </Placeholder>
+    );
+  }
+
   return (
     <>
       <Card.Grid>

dashboard/src/main/home/cluster-dashboard/stacks/types.ts

@@ -60,7 +60,14 @@ export type StackRevision = {
   created_at: string;
   status: "deploying" | "deployed" | "failed"; // type with enum
   stack_id: string;
-  reason: "DeployError" | "SaveError" | "RollbackError";
+  reason:
+    | "DeployError"
+    | "SaveError"
+    | "RollbackError"
+    | "EnvGroupUpgrade"
+    | "ApplicationUpgrade"
+    | "SourceConfigUpgrade"
+    | "Rollback";
   message: string;
 };