added back buttons'

dashboard/src/components/expanded-object/Header.tsx

@@ -4,6 +4,8 @@ import styled from "styled-components";
 import backArrow from "assets/back_arrow.png";
 import TitleSection from "components/TitleSection";
 
+import leftArrow from "assets/left-arrow.svg";
+
 type Props = {
   last_updated: string;
   back_link: string;
@@ -26,26 +28,63 @@ const Header: React.FunctionComponent<Props> = (props) => {
   } = props;
 
   return (
-    <HeaderWrapper>
-      <BackButton to={back_link}>
-        <BackButtonImg src={backArrow} />
-      </BackButton>
-      <Title icon={icon} iconWidth="25px" materialIconClass={materialIconClass}>
-        {name}
-        <Flex>{inline_title_items}</Flex>
-      </Title>
+    <>
+      <BreadcrumbRow>
+        <Breadcrumb to={back_link}>
+          <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+        </Breadcrumb>
+      </BreadcrumbRow>
+      <HeaderWrapper>
+        <Title icon={icon} iconWidth="25px" materialIconClass={materialIconClass}>
+          {name}
+          <Flex>{inline_title_items}</Flex>
+        </Title>
 
-      {sub_title_items || (
-        <InfoWrapper>
-          <InfoText>Last updated {last_updated}</InfoText>
-        </InfoWrapper>
-      )}
-    </HeaderWrapper>
+        {sub_title_items || (
+          <InfoWrapper>
+            <InfoText>Last updated {last_updated}</InfoText>
+          </InfoWrapper>
+        )}
+      </HeaderWrapper>
+    </>
   );
 };
 
 export default Header;
 
+const Wrap = styled.div`
+  z-index: 999;
+`;
+
+const ArrowIcon = styled.img`
+  width: 15px;
+  margin-right: 8px;
+  opacity: 50%;
+`;
+
+const BreadcrumbRow = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+`;
+
+const Breadcrumb = styled(DynamicLink)`
+  color: #aaaabb88;
+  font-size: 13px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  margin-top: -10px;
+  z-index: 999;
+  padding: 5px;
+  padding-right: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff11;
+  }
+`;
+
 const HeaderWrapper = styled.div`
   position: relative;
   margin-bottom: 10px;
@@ -63,33 +102,6 @@ const InfoText = styled.span`
   color: #aaaabb66;
 `;
 
-const BackButton = styled(DynamicLink)`
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  display: flex;
-  width: 36px;
-  cursor: pointer;
-  height: 36px;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #ffffff55;
-  border-radius: 100px;
-  background: #ffffff11;
-
-  :hover {
-    background: #ffffff22;
-    > img {
-      opacity: 1;
-    }
-  }
-`;
-
-const BackButtonImg = styled.img`
-  width: 16px;
-  opacity: 0.75;
-`;
-
 const Title = styled(TitleSection)`
   font-size: 16px;
   margin-top: 4px;

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -191,7 +191,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
                 pushFiltered(this.props, "/launch", ["project_id"])
               }
             >
-              <i className="material-icons">add</i> Launch Template
+              <i className="material-icons">add</i> Launch template
             </Button>
           )}
           <SortFilterWrapper>{this.renderCommonFilters()}</SortFilterWrapper>
@@ -240,7 +240,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
                 pushFiltered(this.props, "/launch", ["project_id"])
               }
             >
-              <i className="material-icons">add</i> Launch Template
+              <i className="material-icons">add</i> Launch template
             </Button>
           )}
           <SortFilterWrapper>

dashboard/src/main/home/cluster-dashboard/dashboard/node-view/ExpandedNodeView.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import { useHistory, useLocation, useParams } from "react-router";
 import styled from "styled-components";
-import backArrow from "assets/back_arrow.png";
+import leftArrow from "assets/left-arrow.svg";
 import api from "shared/api";
 import { Context } from "shared/Context";
 
@@ -49,8 +49,6 @@ export const ExpandedNodeView = () => {
           setNode(res.data);
         }
       });
-
-    return () => (isSubscribed = false);
   }, [nodeId, currentCluster.id, currentProject.id]);
 
   const closeNodeView = () => {
@@ -92,10 +90,12 @@ export const ExpandedNodeView = () => {
 
   return (
     <StyledExpandedNodeView>
+      <BreadcrumbRow>
+        <Breadcrumb onClick={closeNodeView}>
+          <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+        </Breadcrumb>
+      </BreadcrumbRow>
       <HeaderWrapper>
-        <BackButton onClick={closeNodeView}>
-          <BackButtonImg src={backArrow} />
-        </BackButton>
         <TitleSection icon={nodePng}>
           {nodeId}
           <InstanceType>{instanceType}</InstanceType>
@@ -121,6 +121,39 @@ export const ExpandedNodeView = () => {
 
 export default ExpandedNodeView;
 
+const ArrowIcon = styled.img`
+  width: 15px;
+  margin-right: 8px;
+  opacity: 50%;
+`;
+
+const BreadcrumbRow = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+`;
+
+const Breadcrumb = styled.div`
+  color: #aaaabb88;
+  font-size: 13px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  margin-top: -10px;
+  z-index: 999;
+  padding: 5px;
+  padding-right: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff11;
+  }
+`;
+
+const Wrap = styled.div`
+  z-index: 999;
+`;
+
 const BackButton = styled.div`
   position: absolute;
   top: 0px;

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

@@ -207,7 +207,7 @@ export default class CreateEnvGroup extends Component<PropsType, StateType> {
           />
           <SaveButton
             disabled={this.isDisabled()}
-            text="Create Env Group"
+            text="Create env group"
             onClick={this.onSubmit}
             status={
               this.isDisabled()

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

@@ -64,7 +64,7 @@ class EnvGroupDashboard extends Component<PropsType, StateType> {
                   this.setState({ createEnvMode: !this.state.createEnvMode })
                 }
               >
-                <i className="material-icons">add</i> Create Env Group
+                <i className="material-icons">add</i> Create env group
               </Button>
             )}
             <SortFilterWrapper>

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

@@ -9,6 +9,7 @@ import styled, { keyframes } from "styled-components";
 import backArrow from "assets/back_arrow.png";
 import key from "assets/key.svg";
 import loading from "assets/loading.gif";
+import leftArrow from "assets/left-arrow.svg";
 
 import { ClusterType } from "shared/types";
 import { Context } from "shared/Context";
@@ -418,10 +419,12 @@ export const ExpandedEnvGroupFC = ({
 
   return (
     <StyledExpandedChart>
+      <BreadcrumbRow>
+        <Breadcrumb onClick={closeExpanded}>
+          <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+        </Breadcrumb>
+      </BreadcrumbRow>
       <HeaderWrapper>
-        <BackButton onClick={closeExpanded}>
-          <BackButtonImg src={backArrow} />
-        </BackButton>
         <TitleSection icon={key} iconWidth="33px">
           {envGroup.name}
           <TagWrapper>
@@ -628,6 +631,39 @@ const ApplicationsList = ({ envGroup }: { envGroup: EditableEnvGroup }) => {
   );
 };
 
+const ArrowIcon = styled.img`
+  width: 15px;
+  margin-right: 8px;
+  opacity: 50%;
+`;
+
+const BreadcrumbRow = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+`;
+
+const Breadcrumb = styled.div`
+  color: #aaaabb88;
+  font-size: 13px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  margin-top: -10px;
+  z-index: 999;
+  padding: 5px;
+  padding-right: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff11;
+  }
+`;
+
+const Wrap = styled.div`
+  z-index: 999;
+`;
+
 const HeadingWrapper = styled.div`
   display: flex;
   margin-bottom: 15px;

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 import yaml from "js-yaml";
-import backArrow from "assets/back_arrow.png";
 import _, { cloneDeep } from "lodash";
 import loadingSrc from "assets/loading.gif";
 import leftArrow from "assets/left-arrow.svg";
@@ -906,12 +905,6 @@ const BreadcrumbRow = styled.div`
   justify-content: flex-start;
 `;
 
-const BreadcrumbIcon = styled.img`
-  width: 13px;
-  opacity: 50%;
-  margin-right: 7px;
-`;
-
 const Breadcrumb = styled.div`
   color: #aaaabb88;
   font-size: 13px;
@@ -947,33 +940,6 @@ const BodyWrapper = styled.div`
   margin-bottom: 50px;
 `;
 
-const BackButton = styled.div`
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  display: flex;
-  width: 36px;
-  cursor: pointer;
-  height: 36px;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #ffffff55;
-  border-radius: 100px;
-  background: #ffffff11;
-
-  :hover {
-    background: #ffffff22;
-    > img {
-      opacity: 1;
-    }
-  }
-`;
-
-const BackButtonImg = styled.img`
-  width: 16px;
-  opacity: 0.75;
-`;
-
 const Header = styled.div`
   font-weight: 500;
   color: #aaaabb;
@@ -1112,10 +1078,6 @@ const NamespaceTag = styled.div`
   border-bottom-left-radius: 0px;
 `;
 
-const Icon = styled.img`
-  width: 100%;
-`;
-
 const StyledExpandedChart = styled.div`
   width: 100%;
   z-index: 0;

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

@@ -2,7 +2,7 @@ import React, { useContext, useMemo, useState } from "react";
 import styled from "styled-components";
 import yaml from "js-yaml";
 
-import backArrow from "assets/back_arrow.png";
+import leftArrow from "assets/left-arrow.svg";
 import { cloneDeep, set } from "lodash";
 import loading from "assets/loading.gif";
 
@@ -426,54 +426,91 @@ const ExpandedJobHeader: React.FC<{
   setDisableForm,
   disableRevisions,
 }) => (
-  <HeaderWrapper>
-    <BackButton onClick={closeChart}>
-      <BackButtonImg src={backArrow} />
-    </BackButton>
-    <TitleSection icon={chart?.chart.metadata.icon} iconWidth="33px">
-      {chart?.name}
-      <DeploymentType currentChart={chart} />
-      <TagWrapper>
-        Namespace <NamespaceTag>{chart.namespace}</NamespaceTag>
-      </TagWrapper>
-    </TitleSection>
-    {chart?.config?.description ? (
-      <Description>{chart?.config?.description}</Description>
-    ) : null}
-
-    <InfoWrapper>
-      <LastDeployed>
-        Run {jobs?.length} times <Dot>•</Dot>Last template update at
-        {" " + readableDate(chart.info.last_deployed)}
-      </LastDeployed>
-    </InfoWrapper>
-    {!disableRevisions ? (
-      <RevisionSection
-        chart={chart}
-        refreshChart={() => refreshChart()}
-        setRevision={(chart, isCurrent) => {
-          loadChartWithSpecificRevision(chart?.version);
-          setDisableForm(!isCurrent);
-        }}
-        forceRefreshRevisions={false}
-        refreshRevisionsOff={() => {}}
-        shouldUpdate={
-          chart?.latest_version &&
-          chart?.latest_version !== chart?.chart.metadata.version
-        }
-        latestVersion={chart?.latest_version}
-        upgradeVersion={(_version, cb) => {
-          upgradeChart().then(() => {
-            if (typeof cb === "function") {
-              cb();
-            }
-          });
-        }}
-      />
-    ) : null}
-  </HeaderWrapper>
+  <>
+    <BreadcrumbRow>
+      <Breadcrumb onClick={closeChart}>
+        <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+      </Breadcrumb>
+    </BreadcrumbRow>
+    <HeaderWrapper>
+      <TitleSection icon={chart?.chart.metadata.icon} iconWidth="33px">
+        {chart?.name}
+        <DeploymentType currentChart={chart} />
+        <TagWrapper>
+          Namespace <NamespaceTag>{chart.namespace}</NamespaceTag>
+        </TagWrapper>
+      </TitleSection>
+      {chart?.config?.description ? (
+        <Description>{chart?.config?.description}</Description>
+      ) : null}
+
+      <InfoWrapper>
+        <LastDeployed>
+          Run {jobs?.length} times <Dot>•</Dot>Last template update at
+          {" " + readableDate(chart.info.last_deployed)}
+        </LastDeployed>
+      </InfoWrapper>
+      {!disableRevisions ? (
+        <RevisionSection
+          chart={chart}
+          refreshChart={() => refreshChart()}
+          setRevision={(chart, isCurrent) => {
+            loadChartWithSpecificRevision(chart?.version);
+            setDisableForm(!isCurrent);
+          }}
+          forceRefreshRevisions={false}
+          refreshRevisionsOff={() => {}}
+          shouldUpdate={
+            chart?.latest_version &&
+            chart?.latest_version !== chart?.chart.metadata.version
+          }
+          latestVersion={chart?.latest_version}
+          upgradeVersion={(_version, cb) => {
+            upgradeChart().then(() => {
+              if (typeof cb === "function") {
+                cb();
+              }
+            });
+          }}
+        />
+      ) : null}
+    </HeaderWrapper>
+  </>
 );
 
+const ArrowIcon = styled.img`
+  width: 15px;
+  margin-right: 8px;
+  opacity: 50%;
+`;
+
+const BreadcrumbRow = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+`;
+
+const Breadcrumb = styled.div`
+  color: #aaaabb88;
+  font-size: 13px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  margin-top: -10px;
+  z-index: 999;
+  padding: 5px;
+  padding-right: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff11;
+  }
+`;
+
+const Wrap = styled.div`
+  z-index: 999;
+`;
+
 const RunsDescription = styled.div`
   color: #ffffff;
   font-size: 13px;

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/ExpandedJobRun.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { get, isEmpty } from "lodash";
 import styled from "styled-components";
 
-import backArrow from "assets/back_arrow.png";
+import leftArrow from "assets/left-arrow.svg";
 import KeyValueArray from "components/form-components/KeyValueArray";
 import Loading from "components/Loading";
 import TabRegion from "components/TabRegion";
@@ -197,10 +197,12 @@ const ExpandedJobRun = ({
 
   return (
     <StyledExpandedChart>
+      <BreadcrumbRow>
+        <Breadcrumb onClick={onClose}>
+          <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+        </Breadcrumb>
+      </BreadcrumbRow>
       <HeaderWrapper>
-        <BackButton onClick={() => onClose()}>
-          <BackButtonImg src={backArrow} />
-        </BackButton>
         <TitleSection icon={currentChart.chart.metadata.icon} iconWidth="33px">
           {chart.name} <Gray>at {readableDate(run.status.startTime)}</Gray>
         </TitleSection>
@@ -261,6 +263,39 @@ const ExpandedJobRun = ({
 
 export default ExpandedJobRun;
 
+const ArrowIcon = styled.img`
+  width: 15px;
+  margin-right: 8px;
+  opacity: 50%;
+`;
+
+const BreadcrumbRow = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+`;
+
+const Breadcrumb = styled.div`
+  color: #aaaabb88;
+  font-size: 13px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  margin-top: -10px;
+  z-index: 999;
+  padding: 5px;
+  padding-right: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff11;
+  }
+`;
+
+const Wrap = styled.div`
+  z-index: 999;
+`;
+
 const Row = styled.div`
   margin-top: 20px;
 `;

dashboard/src/main/home/cluster-dashboard/preview-environments/environments/EnvironmentCard.tsx

@@ -168,17 +168,16 @@ const OptionWrapper = styled.div`
 const EnvironmentCardWrapper = styled(DynamicLink)`
   display: flex;
   color: #ffffff;
-  background: #2b2e3699;
   justify-content: space-between;
-  border-radius: 5px;
   cursor: pointer;
   height: 75px;
   padding: 12px;
   padding-left: 14px;
-  border: 1px solid #ffffff0f;
-
+  border-radius: 5px;
+  background: #262A30;
+  border: 1px solid #494b4f;
   :hover {
-    border: 1px solid #ffffff3c;
+    border: 1px solid #7A7B80;
   }
   animation: fadeIn 0.5s;
   @keyframes fadeIn {
@@ -278,13 +277,6 @@ const DeleteButton = styled(Button)`
   }}
 `;
 
-const CancelButton = styled(Button)`
-  background: #616feecc;
-  :hover {
-    background: #505edddd;
-  }
-`;
-
 const ActionWrapper = styled.div`
   display: flex;
   align-items: center;

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

@@ -42,7 +42,7 @@ const Dashboard = () => {
       <Action.Row>
         <Action.Button to={"/stacks/launch"}>
           <i className="material-icons">add</i>
-          Create Stack
+          Create stack
         </Action.Button>
         <FilterWrapper>
           <StyledSortSelector>

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

@@ -3,7 +3,7 @@ import Placeholder from "components/Placeholder";
 import TabSelector from "components/TabSelector";
 import TitleSection from "components/TitleSection";
 import React, { useContext, useState } from "react";
-import backArrow from "assets/back_arrow.png";
+import leftArrow from "assets/left-arrow.svg";
 import { useParams, useRouteMatch } from "react-router";
 import api from "shared/api";
 import { Context } from "shared/Context";
@@ -94,10 +94,12 @@ const ExpandedStack = () => {
 
   return (
     <div>
+      <BreadcrumbRow>
+        <Breadcrumb to="/stacks">
+          <ArrowIcon src={leftArrow} /><Wrap>Back</Wrap>
+        </Breadcrumb>
+      </BreadcrumbRow>
       <StackTitleWrapper>
-        <BackButton to="/stacks">
-          <BackButtonImg src={backArrow} />
-        </BackButton>
         <TitleSection materialIconClass="material-icons-outlined" icon={"lan"}>
           {stack.name}
         </TitleSection>
@@ -205,7 +207,7 @@ const ExpandedStack = () => {
                 <Action.Row>
                   <Action.Button to={`${url}/new-env-group`}>
                     <i className="material-icons">add</i>
-                    Create Env Group
+                    Create env group
                   </Action.Button>
                 </Action.Row>
                 <EnvGroups stack={stack} />
@@ -238,6 +240,39 @@ const ExpandedStack = () => {
 
 export default ExpandedStack;
 
+const ArrowIcon = styled.img`
+  width: 15px;
+  margin-right: 8px;
+  opacity: 50%;
+`;
+
+const BreadcrumbRow = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+`;
+
+const Breadcrumb = styled(DynamicLink)`
+  color: #aaaabb88;
+  font-size: 13px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  margin-top: -10px;
+  z-index: 999;
+  padding: 5px;
+  padding-right: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+  :hover {
+    background: #ffffff11;
+  }
+`;
+
+const Wrap = styled.div`
+  z-index: 999;
+`;
+
 const PaddingBottom = styled.div`
   width: 100%;
   height: 150px;

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

@@ -117,7 +117,7 @@ const StackList = ({
       <Placeholder height="250px">
         <div>
           <h3>No stacks found</h3>
-          <p>You can create a stack by clicking the "Create Stack" button.</p>
+          <p>You can create a stack by clicking the "Create stack" button.</p>
         </div>
       </Placeholder>
     );

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

@@ -220,13 +220,13 @@ const Overview = () => {
 
       <SubmitButton
         disabled={!isValid || submitButtonStatus !== ""}
-        text="Create Stack"
+        text="Create stack"
         onClick={handleSubmit}
         clearPosition
         statusPosition="left"
         status={submitButtonStatus}
       >
-        Create Stack
+        Create stack
       </SubmitButton>
     </>
   );

dashboard/src/main/home/cluster-dashboard/stacks/launch/components/styles.tsx

@@ -11,14 +11,14 @@ export const Card = {
   Wrapper: styled.div<{ variant?: "clickable" | "unclickable" }>`
     display: flex;
     color: #ffffff;
-    background: #2b2e3699;
     justify-content: space-between;
-    border-radius: 5px;
     height: 75px;
     padding: 12px;
     padding-left: 14px;
-    border: 1px solid #ffffff0f;
     align-items: center;
+    border-radius: 5px;
+    background: #262A30;
+    border: 1px solid #494b4f;
 
     ${(props) => {
       if (props.variant === "unclickable") {
@@ -33,7 +33,7 @@ export const Card = {
       return `
         cursor: pointer;
         :hover {
-          border: 1px solid #ffffff3c;
+          border: 1px solid #7A7B80;
         }
       `;
     }}

dashboard/src/shared/api.tsx

@@ -1304,6 +1304,7 @@ const upgradeChartValues = baseApi<
   {
     values: string;
     version?: string;
+    latest_revision?: number;
   },
   {
     id: number;