create separate upgrade section tab

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

@@ -28,6 +28,7 @@ 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";
@@ -353,6 +354,8 @@ 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":
@@ -431,6 +434,9 @@ 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) {

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

@@ -0,0 +1,76 @@
+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/shared/api.tsx

@@ -699,6 +699,16 @@ const getTemplateInfo = baseApi<
   return `/api/templates/${pathParams.name}/${pathParams.version}`;
 });
 
+const getTemplateUpgradeNotes = baseApi<
+  {
+    repo_url?: string;
+    prev_version: string;
+  },
+  { name: string; version: string }
+>("GET", (pathParams) => {
+  return `/api/templates/upgrade_notes/${pathParams.name}/${pathParams.version}`;
+});
+
 const getTemplates = baseApi<
   {
     repo_url?: string;
@@ -1039,6 +1049,7 @@ export default {
   getRepos,
   getRevisions,
   getTemplateInfo,
+  getTemplateUpgradeNotes,
   getTemplates,
   getUser,
   linkGithubProject,