Implemented v1 of select source

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

@@ -1,7 +1,45 @@
-import React from "react";
+import ImageSelector from "components/image-selector/ImageSelector";
+import React, { useContext, useState } from "react";
+import { StacksLaunchContext } from "./Store";
+import { CreateStackBody } from "../types";
+import { useRouting } from "shared/routing";
 
 const SelectSource = () => {
-  return <div>SelectSource</div>;
+  const { addSourceConfig } = useContext(StacksLaunchContext);
+
+  const [imageUrl, setImageUrl] = useState("");
+  const [imageTag, setImageTag] = useState("");
+  const { pushFiltered } = useRouting();
+
+  const handleNext = () => {
+    if (!imageUrl || !imageTag) {
+      return;
+    }
+
+    const newSource: Omit<CreateStackBody["source_configs"][0], "name"> = {
+      image_repo_uri: imageUrl,
+      image_tag: imageTag,
+    };
+
+    addSourceConfig(newSource);
+    pushFiltered("/stacks/launch/overview", []);
+  };
+
+  return (
+    <>
+      <ImageSelector
+        selectedImageUrl={imageUrl}
+        setSelectedImageUrl={setImageUrl}
+        selectedTag={imageTag}
+        setSelectedTag={setImageTag}
+        forceExpanded
+      />
+
+      <button disabled={!imageUrl || !imageTag} onClick={handleNext}>
+        Next
+      </button>
+    </>
+  );
 };
 
 export default SelectSource;

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

@@ -0,0 +1,116 @@
+import React, { createContext, useState } from "react";
+import { CreateStackBody } from "../types";
+
+export type StacksLaunchContextType = {
+  newStack: CreateStackBody;
+
+  setStackName: (name: string) => void;
+  setStackCluster: (clusterId: number) => void;
+  setStackNamespace: (namespace: string) => void;
+
+  addSourceConfig: (
+    sourceConfig: Omit<CreateStackBody["source_configs"][0], "name">
+  ) => void;
+
+  addAppResource: (appResource: CreateStackBody["app_resources"][0]) => void;
+
+  submit: () => Promise<void>;
+};
+
+const defaultValues: StacksLaunchContextType = {
+  newStack: {
+    name: "",
+    app_resources: [],
+    source_configs: [],
+  },
+
+  setStackName: (name: string) => {},
+  setStackCluster: (clusterId: number) => {},
+  setStackNamespace: (namespace: string) => {},
+
+  addSourceConfig: (
+    sourceConfig: Omit<CreateStackBody["source_configs"][0], "name">
+  ) => {},
+
+  addAppResource: (appResource: CreateStackBody["app_resources"][0]) => {},
+
+  submit: async () => {},
+};
+
+export const StacksLaunchContext = createContext<StacksLaunchContextType>(
+  defaultValues
+);
+
+const StacksLaunchContextProvider: React.FC<{}> = ({ children }) => {
+  const [newStack, setNewStack] = useState<CreateStackBody>(
+    defaultValues.newStack
+  );
+  const [clusterId, setClusterId] = useState<number>();
+  const [namespace, setNamespace] = useState("default");
+
+  const setStackName: StacksLaunchContextType["setStackName"] = (name) => {
+    setNewStack((prev) => ({
+      ...prev,
+      name,
+    }));
+  };
+  const setStackCluster: StacksLaunchContextType["setStackCluster"] = (
+    newClusterId
+  ) => {
+    setClusterId(newClusterId);
+  };
+  const setStackNamespace: StacksLaunchContextType["setStackNamespace"] = (
+    namespace
+  ) => {
+    setNamespace(namespace);
+  };
+
+  const addSourceConfig: StacksLaunchContextType["addSourceConfig"] = (
+    sourceConfig
+  ) => {
+    const newSourceConfigName = (stackName: string, index: number) =>
+      sourceConfig.build
+        ? `${stackName}-${sourceConfig.build.method}-${index}`
+        : `${stackName}-${sourceConfig.image_repo_uri}-${sourceConfig.image_tag}-${index}`;
+
+    setNewStack((prev) => ({
+      ...prev,
+      source_configs: [
+        ...prev.source_configs,
+        {
+          name: newSourceConfigName(prev.name, prev.source_configs.length),
+          ...sourceConfig,
+        },
+      ],
+    }));
+  };
+
+  const addAppResource: StacksLaunchContextType["addAppResource"] = (
+    appResource
+  ) => {
+    setNewStack((prev) => ({
+      ...prev,
+      app_resources: [...prev.app_resources, appResource],
+    }));
+  };
+
+  const submit: StacksLaunchContextType["submit"] = async () => {};
+
+  return (
+    <StacksLaunchContext.Provider
+      value={{
+        newStack,
+        setStackName,
+        setStackCluster,
+        setStackNamespace,
+        addSourceConfig,
+        addAppResource,
+        submit,
+      }}
+    >
+      {children}
+    </StacksLaunchContext.Provider>
+  );
+};
+
+export default StacksLaunchContextProvider;

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

@@ -3,25 +3,28 @@ import { Redirect, Route, Switch, useRouteMatch } from "react-router";
 import NewApp from "./NewApp";
 import Overview from "./Overview";
 import SelectSource from "./SelectSource";
+import StacksLaunchContextProvider from "./Store";
 
 const LaunchRoutes = () => {
   const { path } = useRouteMatch();
 
   return (
-    <Switch>
-      <Route path={`${path}/source`}>
-        <SelectSource />
-      </Route>
-      <Route path={`${path}/overview`}>
-        <Overview />
-      </Route>
-      <Route path={`${path}/new-app`}>
-        <NewApp />
-      </Route>
-      <Route path={`*`}>
-        <Redirect to={`${path}/source`} />
-      </Route>
-    </Switch>
+    <StacksLaunchContextProvider>
+      <Switch>
+        <Route path={`${path}/source`}>
+          <SelectSource />
+        </Route>
+        <Route path={`${path}/overview`}>
+          <Overview />
+        </Route>
+        <Route path={`${path}/new-app`}>
+          <NewApp />
+        </Route>
+        <Route path={`*`}>
+          <Redirect to={`${path}/source`} />
+        </Route>
+      </Switch>
+    </StacksLaunchContextProvider>
   );
 };
 

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

@@ -10,7 +10,8 @@ export type CreateStackBody = {
   source_configs: {
     name: string;
     image_repo_uri: string;
-    build: {
+    image_tag: string;
+    build?: {
       method: "pack" | "docker";
       folder_path: string;
       git?: unknown;

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -191,8 +191,13 @@ class Sidebar extends Component<PropsType, StateType> {
             )}
           {currentProject?.preview_envs_enabled && (
             <NavButton to="/preview-environments">
-              <InlineSVGWrapper id="Flat" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
-                <path d="M103.99951,68a36,36,0,1,0-44,35.0929v49.8142a36,36,0,1,0,16,0V103.0929A36.05516,36.05516,0,0,0,103.99951,68Zm-56,0a20,20,0,1,1,20,20A20.0226,20.0226,0,0,1,47.99951,68Zm40,120a20,20,0,1,1-20-20A20.0226,20.0226,0,0,1,87.99951,188ZM196.002,152.907l-.00146-33.02563a55.63508,55.63508,0,0,0-16.40137-39.59619L155.31348,56h20.686a8,8,0,0,0,0-16h-40c-.02978,0-.05859.00415-.08838.00446-.2334.00256-.46631.01245-.69824.03527-.12891.01258-.25391.03632-.38086.05494-.13135.01928-.26318.03424-.39355.06-.14014.02778-.27686.06611-.41455.10114-.11475.02924-.23047.05426-.34424.08862-.13428.04059-.26367.0907-.395.13806-.11524.04151-.231.07929-.34473.12629-.12109.05011-.23681.10876-.35449.16455-.11914.05621-.23926.10907-.356.17144-.11133.0597-.21728.12757-.32519.1922-.11621.06928-.23389.13483-.34668.21051-.11719.07831-.227.16553-.33985.24976-.09668.07227-.1958.1394-.28955.21655-.18652.1529-.36426.31531-.53564.48413-.01612.01593-.03418.02918-.05029.04529-.02051.02051-.0376.04321-.05762.06391-.16358.16711-.32178.33941-.47022.52032-.083.10059-.15527.20648-.23193.31006-.07861.10571-.16064.20862-.23438.3183-.08056.12072-.15087.24591-.2246.36993-.05958.1-.12208.19757-.17725.30036-.06787.12591-.125.25531-.18506.384-.05078.1084-.10547.21466-.15137.32568-.05127.12463-.09326.25189-.13867.37848-.04248.11987-.08887.238-.126.36047-.03857.12775-.06738.25757-.09912.38678-.03125.124-.06591.24622-.0913.37244-.02979.15088-.04786.30328-.06934.45544-.01465.10645-.03516.21094-.0459.31867q-.03955.39752-.04.79706V88a8,8,0,0,0,16,0V67.31378l24.28516,24.28485a39.73874,39.73874,0,0,1,11.71582,28.28321l.00146,33.02533a36.00007,36.00007,0,1,0,16-.00019ZM188.00244,208a20,20,0,1,1,20-20A20.0226,20.0226,0,0,1,188.00244,208Z"/>
+              <InlineSVGWrapper
+                id="Flat"
+                fill="#FFFFFF"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 256 256"
+              >
+                <path d="M103.99951,68a36,36,0,1,0-44,35.0929v49.8142a36,36,0,1,0,16,0V103.0929A36.05516,36.05516,0,0,0,103.99951,68Zm-56,0a20,20,0,1,1,20,20A20.0226,20.0226,0,0,1,47.99951,68Zm40,120a20,20,0,1,1-20-20A20.0226,20.0226,0,0,1,87.99951,188ZM196.002,152.907l-.00146-33.02563a55.63508,55.63508,0,0,0-16.40137-39.59619L155.31348,56h20.686a8,8,0,0,0,0-16h-40c-.02978,0-.05859.00415-.08838.00446-.2334.00256-.46631.01245-.69824.03527-.12891.01258-.25391.03632-.38086.05494-.13135.01928-.26318.03424-.39355.06-.14014.02778-.27686.06611-.41455.10114-.11475.02924-.23047.05426-.34424.08862-.13428.04059-.26367.0907-.395.13806-.11524.04151-.231.07929-.34473.12629-.12109.05011-.23681.10876-.35449.16455-.11914.05621-.23926.10907-.356.17144-.11133.0597-.21728.12757-.32519.1922-.11621.06928-.23389.13483-.34668.21051-.11719.07831-.227.16553-.33985.24976-.09668.07227-.1958.1394-.28955.21655-.18652.1529-.36426.31531-.53564.48413-.01612.01593-.03418.02918-.05029.04529-.02051.02051-.0376.04321-.05762.06391-.16358.16711-.32178.33941-.47022.52032-.083.10059-.15527.20648-.23193.31006-.07861.10571-.16064.20862-.23438.3183-.08056.12072-.15087.24591-.2246.36993-.05958.1-.12208.19757-.17725.30036-.06787.12591-.125.25531-.18506.384-.05078.1084-.10547.21466-.15137.32568-.05127.12463-.09326.25189-.13867.37848-.04248.11987-.08887.238-.126.36047-.03857.12775-.06738.25757-.09912.38678-.03125.124-.06591.24622-.0913.37244-.02979.15088-.04786.30328-.06934.45544-.01465.10645-.03516.21094-.0459.31867q-.03955.39752-.04.79706V88a8,8,0,0,0,16,0V67.31378l24.28516,24.28485a39.73874,39.73874,0,0,1,11.71582,28.28321l.00146,33.02533a36.00007,36.00007,0,1,0,16-.00019ZM188.00244,208a20,20,0,1,1,20-20A20.0226,20.0226,0,0,1,188.00244,208Z" />
               </InlineSVGWrapper>
               <EllipsisTextWrapper
                 onMouseOver={() => {
@@ -218,6 +223,10 @@ class Sidebar extends Component<PropsType, StateType> {
               </EllipsisTextWrapper>
             </NavButton>
           )}
+          <NavButton to="/stacks">
+            <Icon className="material-icons-outlined">lan</Icon>
+            Stacks
+          </NavButton>
         </>
       );
     }