Merge branch 'nico/por-521-frontend-stacks-work' of github.com:porter-dev/porter into dev

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

@@ -62,7 +62,10 @@ const StackList = ({ namespace }: { namespace: string }) => {
     <>
       {stacks.map((stack) => (
         <Card to={`/stacks/${stack.id}`} key={stack.id}>
-          {stack.name} - Current Revision: {stack.latest_revision.id}
+          {stack.name} -{" "}
+          {stack.latest_revision
+            ? `No revision available for this stack`
+            : `Current Revision: ${stack.latest_revision.id}`}
         </Card>
       ))}
     </>

dashboard/src/main/home/cluster-dashboard/stacks/launch/Overview.tsx

@@ -13,24 +13,19 @@ import { useOutsideAlerter } from "shared/hooks/useOutsideAlerter";
 import { capitalize } from "shared/string_utils";
 import SaveButton from "components/SaveButton";
 import { useRouting } from "shared/routing";
+import Loading from "components/Loading";
 
 const Overview = () => {
   const {
     newStack,
-    clusterId,
     namespace,
     setStackName,
     setStackNamespace,
-    setStackCluster,
     submit,
   } = useContext(StacksLaunchContext);
-  const { currentProject } = useContext(Context);
+  const { currentProject, currentCluster } = useContext(Context);
   const [isAuthorized] = useAuth();
 
-  const [clusterOptions, setClusterOptions] = useState<
-    { label: string; value: string }[]
-  >([]);
-
   const [namespaceOptions, setNamespaceOptions] = useState<
     { label: string; value: string }[]
   >([]);
@@ -39,31 +34,6 @@ const Overview = () => {
 
   const { pushFiltered } = useRouting();
 
-  const getClusters = () => {
-    return api
-      .getClusters("<token>", {}, { id: currentProject.id })
-      .then((res) => {
-        if (res.data) {
-          let clusterOptions: {
-            label: string;
-            value: string;
-          }[] = res.data.map((cluster: ClusterType, i: number) => ({
-            label: cluster.name,
-            value: `${cluster.id}`,
-          }));
-
-          if (res.data.length > 0) {
-            setClusterOptions(clusterOptions);
-            console.log({ clusterId });
-            if (isNaN(clusterId)) {
-              const newClusterId = res.data[0].id;
-              setStackCluster(newClusterId);
-            }
-          }
-        }
-      });
-  };
-
   const updateNamespaces = (cluster_id: number) => {
     api
       .getNamespaces(
@@ -107,28 +77,28 @@ const Overview = () => {
   };
 
   useEffect(() => {
-    getClusters();
-  }, []);
-
-  useEffect(() => {
-    if (isNaN(clusterId)) {
-      return;
-    }
-    updateNamespaces(clusterId);
-  }, [clusterId]);
+    updateNamespaces(currentCluster.id);
+  }, [currentCluster]);
 
   const isValid = useMemo(() => {
     if (namespace === "") {
       return false;
     }
-    if (isNaN(clusterId)) {
+
+    if (newStack.name === "") {
       return false;
     }
-    if (newStack.name === "") {
+
+    if (newStack.source_configs.length === 0) {
       return false;
     }
+
+    if (newStack.app_resources.length === 0) {
+      return false;
+    }
+
     return true;
-  }, [namespace, clusterId, newStack.name]);
+  }, [namespace, newStack.name]);
 
   return (
     <div style={{ position: "relative" }}>
@@ -138,21 +108,10 @@ const Overview = () => {
         setValue={(newName: string) => setStackName(newName)}
       />
 
-      <Selector
-        activeValue={`${clusterId}`}
-        setActiveValue={(cluster: string) => {
-          setStackCluster(Number(cluster));
-        }}
-        options={clusterOptions}
-        width="250px"
-        dropdownWidth="335px"
-        closeOverlay={true}
-      />
-
       <Selector
         key={"namespace"}
         refreshOptions={() => {
-          updateNamespaces(clusterId);
+          updateNamespaces(currentCluster.id);
         }}
         addButton={isAuthorized("namespace", "", ["get", "create"])}
         activeValue={namespace}
@@ -286,6 +245,16 @@ const TemplateSelector = ({
     return capitalize(template?.name || "");
   };
 
+  if (!Array.isArray(options) || options.length === 0) {
+    return (
+      <SelectorStyles.Wrapper>
+        <SelectorStyles.Button expanded={false}>
+          <Loading />
+        </SelectorStyles.Button>
+      </SelectorStyles.Wrapper>
+    );
+  }
+
   return (
     <>
       <SelectorStyles.Wrapper ref={wrapperRef}>
@@ -334,6 +303,16 @@ const VersionSelector = ({
 
   useOutsideAlerter(wrapperRef, () => setIsExpanded(false));
 
+  if (!Array.isArray(options) || options.length === 0) {
+    return (
+      <SelectorStyles.Wrapper>
+        <SelectorStyles.Button expanded={false}>
+          <Loading />
+        </SelectorStyles.Button>
+      </SelectorStyles.Wrapper>
+    );
+  }
+
   return (
     <>
       <SelectorStyles.Wrapper ref={wrapperRef}>

dashboard/src/main/home/cluster-dashboard/stacks/launch/Store.tsx

@@ -7,10 +7,8 @@ export type StacksLaunchContextType = {
   newStack: CreateStackBody;
 
   namespace: string;
-  clusterId: number;
 
   setStackName: (name: string) => void;
-  setStackCluster: (clusterId: number) => void;
   setStackNamespace: (namespace: string) => void;
 
   addSourceConfig: (
@@ -30,10 +28,8 @@ const defaultValues: StacksLaunchContextType = {
   },
 
   namespace: "",
-  clusterId: NaN,
 
   setStackName: (name: string) => {},
-  setStackCluster: (clusterId: number) => {},
   setStackNamespace: (namespace: string) => {},
 
   addSourceConfig: (
@@ -50,11 +46,12 @@ export const StacksLaunchContext = createContext<StacksLaunchContextType>(
 );
 
 const StacksLaunchContextProvider: React.FC<{}> = ({ children }) => {
-  const { currentProject, setCurrentError } = useContext(Context);
+  const { currentProject, currentCluster, setCurrentError } = useContext(
+    Context
+  );
   const [newStack, setNewStack] = useState<CreateStackBody>(
     defaultValues.newStack
   );
-  const [clusterId, setClusterId] = useState<number>(NaN);
   const [namespace, setNamespace] = useState("default");
 
   const setStackName: StacksLaunchContextType["setStackName"] = (name) => {
@@ -63,11 +60,7 @@ const StacksLaunchContextProvider: React.FC<{}> = ({ children }) => {
       name,
     }));
   };
-  const setStackCluster: StacksLaunchContextType["setStackCluster"] = (
-    newClusterId
-  ) => {
-    setClusterId(newClusterId);
-  };
+
   const setStackNamespace: StacksLaunchContextType["setStackNamespace"] = (
     namespace
   ) => {
@@ -106,7 +99,7 @@ const StacksLaunchContextProvider: React.FC<{}> = ({ children }) => {
   const submit: StacksLaunchContextType["submit"] = async () => {
     try {
       await api.createStack("<token>", newStack, {
-        cluster_id: clusterId,
+        cluster_id: currentCluster.id,
         namespace: namespace,
         project_id: currentProject.id,
       });
@@ -121,9 +114,7 @@ const StacksLaunchContextProvider: React.FC<{}> = ({ children }) => {
       value={{
         newStack,
         namespace,
-        clusterId,
         setStackName,
-        setStackCluster,
         setStackNamespace,
         addSourceConfig,
         addAppResource,