UI fixes- Add Alphabetical sort for Apps and Add Banner (#3398)

dashboard/src/assets/calendar-number.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.125 8.46875H20.875M7.16071 2V3.68771M18.625 2V3.6875M18.625 3.6875H7.375C5.51104 3.6875 4 5.19854 4 7.0625V18.3126C4 20.1766 5.51104 21.6876 7.375 21.6876H18.625C20.489 21.6876 22 20.1766 22 18.3126L22 7.0625C22 5.19854 20.489 3.6875 18.625 3.6875ZM11.875 13.5313L13.5625 11.8438V17.4688M13.5625 17.4688H11.875M13.5625 17.4688H15.25" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/src/assets/vector.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.3999 19.4705H4.78814M12.694 19.4705H20.5999M4.6752 13.8234H12.4681M8.40225 3.99755L14.9528 19.4705M2.52931 19.4705L9.30578 1.3999H11.5646L19.4705 19.4705" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dashboard/src/main/home/app-dashboard/AppDashboard.tsx

@@ -10,6 +10,8 @@ import time from "assets/time.png";
 import healthy from "assets/status-healthy.png";
 import grid from "assets/grid.png";
 import list from "assets/list.png";
+import letter from "assets/vector.svg";
+import calendar from "assets/calendar-number.svg";
 import notFound from "assets/not-found.png";
 
 import { Context } from "shared/Context";
@@ -57,6 +59,8 @@ const AppDashboard: React.FC<Props> = ({ }) => {
   const [error, setError] = useState(null);
   const [searchValue, setSearchValue] = useState("");
   const [view, setView] = useState("grid");
+  const [sort, setSort] = useState<"calendar" | "letter">("calendar");
+
   const [isLoading, setIsLoading] = useState(true);
   const [shouldLoadTime, setShouldLoadTime] = useState(true);
 
@@ -66,8 +70,14 @@ const AppDashboard: React.FC<Props> = ({ }) => {
       isCaseSensitive: false,
     });
 
-    return _.sortBy(filteredBySearch);
-  }, [apps, searchValue]);
+    if (sort === "letter") {
+      return _.sortBy(filteredBySearch, ["name"]);
+    } else if (sort === "calendar") {
+      return _.sortBy(filteredBySearch, ["last_deployed"]).reverse(); // Assuming that the latest date should come first.
+    }
+
+    return filteredBySearch; // default
+  }, [apps, searchValue, sort]);
 
   const getApps = async () => {
     setIsLoading(true);
@@ -245,6 +255,16 @@ const AppDashboard: React.FC<Props> = ({ }) => {
                 width="100%"
               />
               <Spacer inline x={2} />
+              <Toggle
+                items={[
+                  { label: <ToggleIcon src={calendar} />, value: "calendar" },
+                  { label: <ToggleIcon src={letter} />, value: "letter" },
+                ]}
+                active={sort}
+                setActive={setSort}
+              />
+              <Spacer inline x={1} />
+
               <Toggle
                 items={[
                   { label: <ToggleIcon src={grid} />, value: "grid" },
@@ -253,6 +273,7 @@ const AppDashboard: React.FC<Props> = ({ }) => {
                 active={view}
                 setActive={setView}
               />
+
               <Spacer inline x={2} />
               <PorterLink to="/apps/new/app">
                 <Button onClick={async () => updateStackStartedStep()} height="30px" width="160px">

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -703,6 +703,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
               setEnvVars(envVars);
               //onAppUpdate(services, envVars.filter((e) => e.key !== "" || e.value !== ""));
             }}
+            setShowUnsavedChangesBanner={setShowUnsavedChangesBanner}
             syncedEnvGroups={syncedEnvGroups}
             status={buttonStatus}
             updatePorterApp={updatePorterApp}

dashboard/src/main/home/app-dashboard/expanded-app/env-vars/EnvVariablesTab.tsx

@@ -1,7 +1,7 @@
 import Button from "components/porter/Button";
 import Spacer from "components/porter/Spacer";
 import EnvGroupArrayStacks from "main/home/cluster-dashboard/env-groups/EnvGroupArrayStacks";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import styled, { keyframes } from "styled-components";
 import Text from "components/porter/Text";
 import Error from "components/porter/Error";
@@ -24,12 +24,14 @@ interface EnvVariablesTabProps {
   clearStatus: () => void;
   appData: any;
   deletedEnvGroups: NewPopulatedEnvGroup[];
+  setShowUnsavedChangesBanner: (x: boolean) => void;
   setDeletedEnvGroups: (values: NewPopulatedEnvGroup[]) => void;
 }
 
 export const EnvVariablesTab: React.FC<EnvVariablesTabProps> = ({
   envVars,
   setEnvVars,
+  setShowUnsavedChangesBanner,
   status,
   updatePorterApp,
   syncedEnvGroups,
@@ -46,8 +48,15 @@ export const EnvVariablesTab: React.FC<EnvVariablesTabProps> = ({
   const { currentCluster, currentProject } = useContext(Context);
 
   const [values, setValues] = React.useState<string>(yaml.dump(appData.chart.config));
+  const initialMount = useRef(true);
+
   useEffect(() => {
-    setEnvVars(envVars);
+    if (initialMount.current) {
+      initialMount.current = false;
+    } else {
+      setShowUnsavedChangesBanner(true);
+      setEnvVars(envVars);
+    }
   }, [envVars]);
   useEffect(() => {
     updateEnvGroups();