nav back

dashboard/src/components/porter/Button.tsx

@@ -16,6 +16,8 @@ type Props = {
   height?: string;
   color?: string;
   withBorder?: boolean;
+  rounded?: boolean;
+  alt?: boolean;
 };
 
 const Button: React.FC<Props> = ({
@@ -31,6 +33,8 @@ const Button: React.FC<Props> = ({
   height,
   color,
   withBorder,
+  rounded,
+  alt,
 }) => {
   const renderStatus = () => {
     switch (status) {
@@ -67,7 +71,9 @@ const Button: React.FC<Props> = ({
         width={width}
         height={height}
         color={color}
-        withBorder={withBorder}
+        withBorder={withBorder || alt}
+        rounded={rounded || alt}
+        alt={alt}
       >
         <Text>{children}</Text>
       </StyledButton>
@@ -134,6 +140,8 @@ const StyledButton = styled.button<{
   height: string;
   color: string;
   withBorder: boolean;
+  rounded: boolean;
+  alt: boolean;
 }>`
   height: ${props => props.height || "35px"};
   width: ${props => props.width || "auto"};
@@ -143,11 +151,16 @@ const StyledButton = styled.button<{
   border: none;
   outline: none;
   color: white;
-  background: ${props => (props.disabled && !props.color) ? "#aaaabb" : (props.color || "#5561C0")};
+  background: ${props => {
+    if (props.alt) {
+      return props.theme.fg;
+    }
+    return (props.disabled && !props.color) ? "#aaaabb" : (props.color || "#5561C0");
+  }};
   display: flex;
   ailgn-items: center;
   justify-content: center;
-  border-radius: 5px;
+  border-radius: ${props => props.rounded ? "50px" : "5px"};
   border: ${props => props.withBorder ? "1px solid #494b4f" : "none"};
 
   :hover {

dashboard/src/main/home/add-on-dashboard/ExpandedTemplate.tsx

@@ -15,56 +15,43 @@ import TemplateList from "../launch/TemplateList";
 import SearchBar from "components/porter/SearchBar";
 import Spacer from "components/porter/Spacer";
 import Loading from "components/Loading";
+import Button from "components/porter/Button";
 
 type Props = {
+  currentTemplate: any;
+  goBack: () => void;
 };
 
 const ExpandedTemplate: React.FC<Props> = ({
+  currentTemplate,
+  goBack,
 }) => {
   const { capabilities, currentProject } = useContext(Context);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [searchValue, setSearchValue] = useState("");
   const [addOnTemplates, setAddOnTemplates] = useState<any[]>([]);
-  const [currentTemplate, setCurrentTemplate] = useState<any>(null);
 
   return (
     <StyledExpandedTemplate>
-      <DashboardHeader
-        prefix={(
-          <Link to="/addons">
-            <I className="material-icons">keyboard_backspace</I>
-          </Link>
-        )}
-        image={addOn}
-        title="Deploy a new add-on"
-        capitalize={false}
-        description="Create a new add-ons for this project."
-        disableLineBreak
-      />
-      <SearchBar 
-        value={searchValue}
-        setValue={setSearchValue}
-        placeholder="Search available add-ons . . ."
-        width="100%"
-      />
-      <Spacer y={1} />
-
-      {/* Temporary space reducer for legacy template list */}
-      {isLoading ? <Loading offset="-150px" /> : (
-        <>
-          <DarkMatter />
-          <TemplateList
-            templates={filteredTemplates}
-            setCurrentTemplate={(x) => setCurrentTemplate(x)}
-          />
-        </>
-      )}
+      <Button 
+        onClick={goBack}
+        alt
+      >
+        <I className="material-icons">first_page</I>
+        <Spacer inline x={1} />
+        Select template
+      </Button>
     </StyledExpandedTemplate>
   );
 };
 
 export default ExpandedTemplate;
 
+const I = styled.i`
+  color: white;
+  font-size: 16px;
+`;
+
 const StyledExpandedTemplate = styled.div`
   width: 100%;
   height: 100%;

dashboard/src/main/home/add-on-dashboard/NewAddOnFlow.tsx

@@ -15,6 +15,7 @@ import TemplateList from "../launch/TemplateList";
 import SearchBar from "components/porter/SearchBar";
 import Spacer from "components/porter/Spacer";
 import Loading from "components/Loading";
+import ExpandedTemplate from "./ExpandedTemplate";
 
 type Props = {
 };
@@ -23,7 +24,7 @@ const HIDDEN_CHARTS = ["porter-agent", "loki"];
 
 const NewAddOnFlow: React.FC<Props> = ({
 }) => {
-  const { capabilities, currentProject } = useContext(Context);
+  const { capabilities, currentProject, currentCluster } = useContext(Context);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [searchValue, setSearchValue] = useState("");
   const [addOnTemplates, setAddOnTemplates] = useState<any[]>([]);
@@ -77,7 +78,7 @@ const NewAddOnFlow: React.FC<Props> = ({
 
   useEffect(() => {
     getTemplates();
-  }, []);
+  }, [currentProject, currentCluster]);
 
   return (
     <StyledTemplateComponent>
@@ -103,13 +104,20 @@ const NewAddOnFlow: React.FC<Props> = ({
 
       {/* Temporary space reducer for legacy template list */}
       {isLoading ? <Loading offset="-150px" /> : (
-        <>
-          <DarkMatter />
-          <TemplateList
-            templates={filteredTemplates}
-            setCurrentTemplate={(x) => setCurrentTemplate(x)}
+        currentTemplate ? (
+          <ExpandedTemplate 
+            currentTemplate={currentTemplate}
+            goBack={() => setCurrentTemplate(null)}
           />
-        </>
+        ) : (
+          <>
+            <DarkMatter />
+            <TemplateList
+              templates={filteredTemplates}
+              setCurrentTemplate={(x) => setCurrentTemplate(x)}
+            />
+          </>
+        )
       )}
     </StyledTemplateComponent>
   );