support upgrade notes on frontend

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

@@ -28,7 +28,6 @@ import FormWrapper from "components/values-form/FormWrapper";
 import RevisionSection from "./RevisionSection";
 import ValuesYaml from "./ValuesYaml";
 import GraphSection from "./GraphSection";
-import UpgradeSection from "./upgrade/UpgradeSection"
 import MetricsSection from "./metrics/MetricsSection";
 import ListSection from "./ListSection";
 import StatusSection from "./status/StatusSection";
@@ -355,8 +354,6 @@ const ExpandedChart: React.FC<Props> = (props) => {
     let chart = currentChart;
 
     switch (currentTab) {
-      case "upgrade":
-        return <UpgradeSection currentChart={chart} />;
       case "metrics":
         return <MetricsSection currentChart={chart} />;
       case "status":
@@ -435,9 +432,6 @@ const ExpandedChart: React.FC<Props> = (props) => {
       tabOptions.push({ label: "Metrics", value: "metrics" });
     }
 
-    // TODO: case if upgrade is available
-    tabOptions.push({ label: "Upgrade", value: "upgrade" });
-
     tabOptions.push({ label: "Chart Overview", value: "graph" });
 
     if (devOpsMode) {
@@ -657,7 +651,6 @@ const ExpandedChart: React.FC<Props> = (props) => {
         <BackButton onClick={props.closeChart}>
           <BackButtonImg src={backArrow} />
         </BackButton>
-
         <ConfirmOverlay
           show={showDeleteOverlay}
           message={`Are you sure you want to delete ${currentChart.name}?`}

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

@@ -9,6 +9,9 @@ import { ChartType, StorageType } from "shared/types";
 import ConfirmOverlay from "components/ConfirmOverlay";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
 
+import Modal from "main/home/modals/Modal";
+import UpgradeChartModal from "main/home/modals/UpgradeChartModal";
+
 type PropsType = WithAuthProps & {
   showRevisions: boolean;
   toggleShowRevisions: () => void;
@@ -281,6 +284,26 @@ class RevisionSection extends Component<PropsType, StateType> {
       this.state.maxVersion === 0;
     return (
       <div>
+        {this.state.upgradeVersion &&
+              <Modal
+                onRequestClose={() => this.setState({ upgradeVersion: "" })}
+                width="500px"
+                height="450px"
+              >
+                <UpgradeChartModal 
+                  currentChart={this.props.chart}
+                  closeModal={() => {
+                    this.setState({ upgradeVersion: "" });
+                  }}
+                  onSubmit={() => {
+                    this.props.upgradeVersion(this.state.upgradeVersion, () => {
+                      this.setState({ loading: false });
+                    });
+                    this.setState({ upgradeVersion: "", loading: true });
+                  }}
+                />
+              </Modal>
+              }
         <RevisionHeader
           showRevisions={this.props.showRevisions}
           isCurrent={isCurrent}
@@ -304,7 +327,8 @@ class RevisionSection extends Component<PropsType, StateType> {
                 <i className="material-icons">notification_important</i>
                 Template Update Available
               </RevisionUpdateMessage>
-              <ConfirmOverlay
+              
+              {/* <ConfirmOverlay
                 show={!!this.state.upgradeVersion}
                 message={`Are you sure you want to redeploy and upgrade to version ${this.state.upgradeVersion}?`}
                 onYes={(e) => {
@@ -319,7 +343,7 @@ class RevisionSection extends Component<PropsType, StateType> {
                   e.stopPropagation();
                   this.setState({ upgradeVersion: "" });
                 }}
-              />
+              /> */}
             </div>
           )}
         </RevisionHeader>

dashboard/src/main/home/cluster-dashboard/expanded-chart/upgrade/UpgradeSection.tsx

@@ -1,76 +0,0 @@
-import React, { Component } from "react";
-import styled from "styled-components";
-import { Context } from "shared/Context";
-
-import api from "shared/api";
-import { ChartType } from "shared/types";
-
-import Markdown from "markdown-to-jsx";
-import SaveButton from "components/SaveButton";
-import { flatMap } from "lodash";
-
-type PropsType = {
-    currentChart: ChartType;
-};
-
-type StateType = {
-    notes: string;
-};
-
-export default class UpgradeSection extends Component<PropsType, StateType> {
-    state = {
-        notes: "Loading..."
-    }
-
-  componentDidMount() {
-      // get the chart update notes from the api
-      api
-      .getTemplateUpgradeNotes("<token>", {
-          repo_url: "https://charts.dev.getporter.dev",
-          prev_version: "0.1.0",
-       }, {
-        name: this.props.currentChart.chart.metadata.name.toLowerCase().trim(),
-        version: "0.8.0",
-      })
-      .then((res) => {
-          let noteArr = res.data.upgrade_notes.map((note : any) => {
-              return `
-### Version ${note.previous} -> ${note.target}
-${note.note}
-              `
-          })
-
-          this.setState({ notes: noteArr.join("\n")})
-      })
-      .catch((err) => console.log(err));
-  }
-
-  onSubmit = () => {}
-
-  render() {
-    return (
-      <StyledUpgradeSection>
-          <Markdown>{this.state.notes}</Markdown>
-            <SaveButton
-            disabled={false}
-            text="Upgrade"
-            status="Hello status"
-            onClick={this.onSubmit}
-            />
-      </StyledUpgradeSection>
-    );
-  }
-}
-
-UpgradeSection.contextType = Context;
-
-const StyledUpgradeSection = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  font-size: 13px;
-  border-radius: 5px;
-  overflow: hidden;
-`;

dashboard/src/main/home/modals/UpgradeChartModal.tsx

@@ -0,0 +1,131 @@
+import React, { Component, createRef } from "react";
+import styled from "styled-components";
+import close from "assets/close.png";
+import api from "shared/api";
+
+import { Context } from "shared/Context";
+import { ChartType } from "shared/types";
+
+import Markdown from "markdown-to-jsx";
+import SaveButton from "components/SaveButton";
+
+type PropsType = {
+  currentChart: ChartType;
+  onSubmit: () => void;
+  closeModal: () => void;
+};
+
+type StateType = {
+  notes: string;
+};
+
+export default class UpgradeChartModal extends Component<PropsType, StateType> {
+  state = {
+    notes: "Loading..."
+  };
+
+  componentDidMount() {
+    // get the chart update notes from the api
+    let repoURL = process.env.ADDON_CHART_REPO_URL
+    let chartName = this.props.currentChart.chart.metadata.name.toLowerCase().trim()
+
+    if (chartName == "web" || chartName == "worker") {
+        repoURL = process.env.APPLICATION_CHART_REPO_URL
+    }
+
+    api
+    .getTemplateUpgradeNotes("<token>", {
+        repo_url: repoURL,
+        prev_version: this.props.currentChart.chart.metadata.version,
+     }, {
+      name: chartName,
+      version: this.props.currentChart.latest_version,
+    })
+    .then((res) => {
+        let noteArr = res.data.upgrade_notes.map((note : any) => {
+            return `
+## Version ${note.previous} -> ${note.target}
+${note.note}
+            `
+        })
+
+        this.setState({ notes: noteArr.join("\n")})
+    })
+    .catch((err) => console.log(err));
+}
+
+  render() {
+    return (
+      <StyledUpgradeChartModal>
+        <CloseButton onClick={this.props.closeModal}>
+          <CloseButtonImg src={close} />
+        </CloseButton>
+
+        <Markdown>{this.state.notes}</Markdown>
+
+        <SaveButton
+          disabled={false}
+          text="Submit"
+          status={
+            "This will update your application"
+          }
+          onClick={this.props.onSubmit}
+        />
+      </StyledUpgradeChartModal>
+    );
+  }
+}
+
+UpgradeChartModal.contextType = Context;
+
+const ModalTitle = styled.div`
+  margin: 0px 0px 13px;
+  display: flex;
+  flex: 1;
+  font-family: Work Sans, sans-serif;
+  font-size: 12px;
+  color: #ffffff;
+  user-select: none;
+  font-weight: 700;
+  align-items: center;
+  position: relative;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  display: block;
+  width: 40px;
+  height: 40px;
+  padding: 13px 0 12px 0;
+  z-index: 1;
+  text-align: center;
+  border-radius: 50%;
+  right: 15px;
+  top: 12px;
+  cursor: pointer;
+  :hover {
+    background-color: #ffffff11;
+  }
+`;
+
+const CloseButtonImg = styled.img`
+  width: 14px;
+  margin: 0 auto;
+`;
+
+const StyledUpgradeChartModal = styled.div`
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  padding: 25px 30px;
+  overflow: hidden;
+  border-radius: 6px;
+  background: #202227;
+  font-size: 13px; 
+  line-height: 1.8em; 
+  font-family: Work Sans, sans-serif;
+`;

internal/helm/upgrade/upgrade.go

@@ -1,8 +1,6 @@
 package upgrade
 
 import (
-	"fmt"
-
 	semver "github.com/Masterminds/semver/v3"
 	"sigs.k8s.io/yaml"
 )
@@ -55,8 +53,6 @@ func (u *UpgradeFile) GetUpgradeFileBetweenVersions(prev, target string) (*Upgra
 	resNotes := make([]*UpgradeNote, 0)
 
 	for _, note := range u.UpgradeNotes {
-		fmt.Println("ONE NOTE IS", note)
-
 		notePrevVersion, err := semver.NewVersion(note.PreviousVersion)
 
 		if err != nil {
@@ -69,8 +65,6 @@ func (u *UpgradeFile) GetUpgradeFileBetweenVersions(prev, target string) (*Upgra
 			return nil, err
 		}
 
-		fmt.Println(prev, target, prevVersion.Compare(notePrevVersion), targetVersion.Compare(noteTargetVersion))
-
 		// check that the previous version is not smaller than the note previous version
 		if comp := prevVersion.Compare(notePrevVersion); comp != -1 {
 			// check that the target version is smaller than the note target version