fixed revision preview

dashboard/src/components/SaveButton.tsx

@@ -110,6 +110,8 @@ const StatusTextWrapper = styled.p`
   margin: 0;
 `;
 
+// TODO: prevent status re-render on form refresh to allow animation
+// animation: statusFloatIn 0.5s;
 const StatusWrapper = styled.div<{
   successful: boolean;
   position: "right" | "left";
@@ -136,7 +138,6 @@ const StatusWrapper = styled.div<{
     color: ${(props) => (props.successful ? "#4797ff" : "#fcba03")};
   }
 
-  animation: statusFloatIn 0.5s;
   animation-fill-mode: forwards;
 
   @keyframes statusFloatIn {

dashboard/src/components/porter-form/PorterForm.tsx

@@ -135,13 +135,10 @@ const PorterForm: React.FC<Props> = (props) => {
 
   const renderTab = (): JSX.Element => {
     if (!formData) {
-      console.log("hm fuck");
       return props.renderTabContents(currentTab);
     }
 
     const tab = formData.tabs?.filter((tab) => tab.name == currentTab)[0];
-    console.log("currentTab", currentTab);
-    console.log("tab", tab);
 
     // Handle external tab
     if (!tab) {
@@ -180,7 +177,6 @@ const PorterForm: React.FC<Props> = (props) => {
     return props.saveValuesStatus;
   };
 
-  console.log(getTabOptions());
   return (
     <>
       <TabRegion

dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

@@ -253,7 +253,7 @@ const StyledChart = styled.div`
   margin-bottom: 25px;
   padding: 1px;
   border-radius: 8px;
-  box-shadow: 0 5px 8px 0px #00000033;
+  box-shadow: 0 4px 15px 0px #00000055;
   position: relative;
   border: 2px solid #9eb4ff00;
   width: calc(100% + 2px);
@@ -271,7 +271,7 @@ const StyledChart = styled.div`
       padding-top: 4px;
       padding-bottom: 14px;
       margin-left: 0px;
-      box-shadow: 0 5px 8px 0px #00000033;
+      box-shadow: 0 4px 15px 0px #00000055;
       padding-left: 1px;
       margin-bottom: 25px;
       margin-top: 0px;
@@ -304,7 +304,7 @@ const StyledChart = styled.div`
       padding-top: 4px;
       padding-bottom: 14px;
       margin-left: 0px;
-      box-shadow: 0 5px 8px 0px #00000033;
+      box-shadow: 0 4px 15px 0px #00000055;
       padding-left: 1px;
       margin-bottom: 25px;
       margin-top: 0px;

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

@@ -306,8 +306,8 @@ const StyledCard = styled.div`
   justify-content: space-between;
   align-items: center;
   border: 1px solid #26282f;
-  box-shadow: 0 5px 8px 0px #00000033;
-  border-radius: 5px;
+  box-shadow: 0 4px 15px 0px #00000055;
+  border-radius: 8px;
   padding: 14px;
   animation: fadeIn 0.5s;
   @keyframes fadeIn {

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

@@ -146,8 +146,8 @@ const NodeListWrapper = styled.div`
 const StyledChart = styled.div`
   background: #26282f;
   padding: 14px;
-  border-radius: 5px;
-  box-shadow: 0 5px 8px 0px #00000033;
+  border-radius: 8px;
+  box-shadow: 0 4px 15px 0px #00000055;
   position: relative;
   border: 2px solid #9eb4ff00;
   width: 100%;

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

@@ -208,8 +208,8 @@ const StyledEnvGroup = styled.div`
   cursor: pointer;
   margin-bottom: 25px;
   padding: 1px;
-  border-radius: 5px;
-  box-shadow: 0 5px 8px 0px #00000033;
+  border-radius: 8px;
+  box-shadow: 0 4px 15px 0px #00000055;
   position: relative;
   border: 2px solid #9eb4ff00;
   width: calc(100% + 2px);
@@ -227,7 +227,7 @@ const StyledEnvGroup = styled.div`
       padding-top: 4px;
       padding-bottom: 14px;
       margin-left: 0px;
-      box-shadow: 0 5px 8px 0px #00000033;
+      box-shadow: 0 4px 15px 0px #00000055;
       padding-left: 1px;
       margin-bottom: 25px;
       margin-top: 0px;
@@ -260,7 +260,7 @@ const StyledEnvGroup = styled.div`
       padding-top: 4px;
       padding-bottom: 14px;
       margin-left: 0px;
-      box-shadow: 0 5px 8px 0px #00000033;
+      box-shadow: 0 4px 15px 0px #00000055;
       padding-left: 1px;
       margin-bottom: 25px;
       margin-top: 0px;

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

@@ -228,6 +228,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
   };
 
   const onSubmit = async (rawValues: any) => {
+    console.log("raw", rawValues);
     // Convert dotted keys to nested objects
     let values = {};
 
@@ -251,6 +252,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
 
     setSaveValueStatus("loading");
     getChartData(currentChart);
+    console.log("valuesYaml", valuesYaml)
     try {
       await api.upgradeChartValues(
         "<token>",
@@ -727,7 +729,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
               upgradeVersion={handleUpgradeVersion}
             />
             {
-              leftTabOptions.length > 0 && (
+              (isPreview || leftTabOptions.length > 0) && (
                 <BodyWrapper>
                   <PorterFormWrapper
                     formData={currentChart.form}

dashboard/src/main/home/dashboard/ClusterList.tsx

@@ -232,7 +232,6 @@ const CodeBlock = styled.span`
   width: 90%;
   margin-left: 5%;
   margin-top: 20px;
-  overflow-x: hidden;
   overflow-y: auto;
   padding: 10px;
   overflow-wrap: break-word;
@@ -241,6 +240,7 @@ const CodeBlock = styled.span`
 const StyledClusterList = styled.div`
   margin-top: -17px;
   padding-left: 2px;
+  overflow: visible;
 `;
 
 const TitleContainer = styled.div`
@@ -282,7 +282,7 @@ const TemplateBlock = styled.div`
   border: 1px solid #ffffff00;
   align-items: center;
   user-select: none;
-  border-radius: 5px;
+  border-radius: 8px;
   display: flex;
   font-size: 13px;
   font-weight: 500;
@@ -295,7 +295,7 @@ const TemplateBlock = styled.div`
   color: #ffffff;
   position: relative;
   background: #26282f;
-  box-shadow: 0 5px 8px 0px #00000033;
+  box-shadow: 0 4px 15px 0px #00000055;
   :hover {
     background: #ffffff11;
   }
@@ -313,6 +313,7 @@ const TemplateBlock = styled.div`
 
 const TemplateList = styled.div`
   overflow-y: auto;
+  overflow: visible;
   margin-top: 32px;
   padding-bottom: 150px;
   display: grid;
@@ -321,44 +322,6 @@ const TemplateList = styled.div`
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 `;
 
-const Title = styled.div`
-  font-size: 20px;
-  font-weight: 500;
-  font-family: "Work Sans", sans-serif;
-  color: #ffffff;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const TitleSection = styled.div`
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  > a {
-    > i {
-      display: flex;
-      align-items: center;
-      margin-bottom: -2px;
-      font-size: 18px;
-      margin-left: 18px;
-      color: #858faaaa;
-      cursor: pointer;
-      :hover {
-        color: #aaaabb;
-      }
-    }
-  }
-`;
-
-const TemplatesWrapper = styled.div`
-  width: calc(90% - 150px);
-  min-width: 300px;
-  padding-top: 50px;
-`;
-
 const Url = styled.a`
   width: 100%;
   font-size: 13px;

dashboard/src/main/home/integrations/IntegrationList.tsx

@@ -237,8 +237,8 @@ const Integration = styled.div`
   cursor: ${(props: { disabled: boolean }) =>
     props.disabled ? "not-allowed" : "pointer"};
   margin-bottom: 15px;
-  border-radius: 5px;
-  box-shadow: 0 5px 8px 0px #00000033;
+  border-radius: 8px;
+  box-shadow: 0 4px 15px 0px #00000055;
 `;
 
 const Label = styled.div`

dashboard/src/main/home/integrations/IntegrationRow.tsx

@@ -133,8 +133,8 @@ const Integration = styled.div`
   cursor: ${(props: { disabled: boolean }) =>
     props.disabled ? "not-allowed" : "pointer"};
   margin-bottom: 15px;
-  border-radius: 5px;
-  box-shadow: 0 5px 8px 0px #00000033;
+  border-radius: 8px;
+  box-shadow: 0 4px 15px 0px #00000055;
 `;
 
 const Icon = styled.img`

dashboard/src/main/home/integrations/SlackIntegrationList.tsx

@@ -160,8 +160,8 @@ const Integration = styled.div`
   cursor: ${(props: { disabled: boolean }) =>
     props.disabled ? "not-allowed" : "pointer"};
   margin-bottom: 15px;
-  border-radius: 5px;
-  box-shadow: 0 5px 8px 0px #00000033;
+  border-radius: 8px;
+  box-shadow: 0 4px 15px 0px #00000055;
 `;
 
 const Icon = styled.img`

dashboard/src/main/home/launch/Launch.tsx

@@ -361,7 +361,7 @@ const TemplateBlock = styled.div`
   border: 1px solid #ffffff00;
   align-items: center;
   user-select: none;
-  border-radius: 5px;
+  border-radius: 8px;
   display: flex;
   font-size: 13px;
   font-weight: 500;
@@ -374,7 +374,7 @@ const TemplateBlock = styled.div`
   color: #ffffff;
   position: relative;
   background: #26282f;
-  box-shadow: 0 5px 8px 0px #00000033;
+  box-shadow: 0 4px 15px 0px #00000044;
   :hover {
     background: #ffffff11;
   }
@@ -391,7 +391,7 @@ const TemplateBlock = styled.div`
 `;
 
 const TemplateList = styled.div`
-  overflow-y: auto;
+  overflow: visible;
   margin-top: 35px;
   padding-bottom: 150px;
   display: grid;
@@ -402,5 +402,6 @@ const TemplateList = styled.div`
 
 const TemplatesWrapper = styled.div`
   width: calc(85%);
+  overflow: visible;
   min-width: 300px;
 `;