history section

dashboard/src/components/porter/Modal.tsx

@@ -104,6 +104,7 @@ const StyledModal = styled.div<{
   border: 1px solid #494b4f;
   font-size: 13px;
   width: ${props => props.width || "600px"};
+  max-width: calc(100vw - 40px);
   background: #42444933;
   backdrop-filter: saturate(150%) blur(8px);
 

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -11,12 +11,14 @@ import github from "assets/github.png";
 import pr_icon from "assets/pull_request_icon.svg";
 import loadingImg from "assets/loading.gif";
 import refresh from "assets/refresh.png";
+import history from "assets/history.png";
 
 import api from "shared/api";
 import { Context } from "shared/Context";
 import useAuth from "shared/auth/useAuth";
 import Error from "components/porter/Error";
 
+import PorterIcon from "components/porter/Icon";
 import Banner from "components/porter/Banner";
 import Loading from "components/Loading";
 import Text from "components/porter/Text";
@@ -47,6 +49,7 @@ import JobRuns from "./JobRuns";
 import MetricsSection from "./MetricsSection";
 import StatusSectionFC from "./status/StatusSection";
 import ExpandedJob from "./expanded-job/ExpandedJob";
+import Modal from "components/porter/Modal";
 
 type Props = RouteComponentProps & {};
 
@@ -93,6 +96,9 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
   const [envVars, setEnvVars] = useState<KeyValueType[]>([]);
   const [buttonStatus, setButtonStatus] = useState<React.ReactNode>("");
   const [subdomain, setSubdomain] = useState<string>("");
+  const [isCurrent, setIsCurrent] = useState<boolean>(true);
+
+  const [showRevisionModal, setShowRevisionModal] = useState<boolean>(false);
 
   const getPorterApp = async () => {
     // setIsLoading(true);
@@ -768,9 +774,28 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
               <Spacer y={0.5} />
             </>
           )}
-          <Text color="#aaaabb66">
-            Last deployed {getReadableDate(appData.chart.info.last_deployed)}
-          </Text>
+          <Spacer y={0.1} />
+          <Container row>
+            <Text color="#aaaabb66">
+              Last deployed {getReadableDate(appData.chart.info.last_deployed)}
+            </Text>
+            {hasBuiltImage && (
+              <>
+                <Spacer inline x={1} />
+                <Button onClick={() => setShowRevisionModal(true)} withBorder color="fg" height="20px">
+                  <PorterIcon height="14px" src={history} />
+                  <Spacer inline x={0.5} />
+                  History
+                  {!isCurrent && (
+                    <>
+                      <Spacer inline x={0.5} />
+                      <Text color="#f5cb42">Previewing version no. {appData.chart.version}</Text>
+                    </>
+                  )}
+                </Button>
+              </>
+            )}
+          </Container>
           <Spacer y={1} />
           {deleting ? (
             <Fieldset>
@@ -785,57 +810,39 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
           ) : (
             <>
               {!workflowCheckPassed ? (
-                <GHABanner
-                  repoName={appData.app.repo_name}
-                  branchName={appData.app.git_branch}
-                  pullRequestUrl={appData.app.pull_request_url}
-                  stackName={appData.app.name}
-                  gitRepoId={appData.app.git_repo_id}
-                  porterYamlPath={appData.app.porter_yaml_path}
-                />
-              ) : !hasBuiltImage ? (
-                <Banner
-                  suffix={
-                    <RefreshButton onClick={() => window.location.reload()}>
-                      <img src={refresh} /> Refresh
-                    </RefreshButton>
-                  }
-                >
-                  Your GitHub repo has not been built yet.
-                  <Spacer inline width="5px" />
-                  <Link
-                    hasunderline
-                    target="_blank"
-                    to={`https://github.com/${appData.app.repo_name}/actions`}
-                  >
-                    Check status
-                  </Link>
-                </Banner>
-              ) : (
                 <>
-                  <DarkMatter />
-                  <RevisionSection
-                    showRevisions={showRevisions}
-                    toggleShowRevisions={() => {
-                      setShowRevisions(!showRevisions);
-                    }}
-                    chart={appData.chart}
-                    refreshChart={() => getChartData(appData.chart)}
-                    setRevision={setRevision}
-                    forceRefreshRevisions={forceRefreshRevisions}
-                    refreshRevisionsOff={() => setForceRefreshRevisions(false)}
-                    shouldUpdate={
-                      appData.chart.latest_version &&
-                      appData.chart.latest_version !==
-                      appData.chart.chart.metadata.version
-                    }
-                    latestVersion={appData.chart.latest_version}
-                    upgradeVersion={appUpgradeVersion}
+                  <GHABanner
+                    repoName={appData.app.repo_name}
+                    branchName={appData.app.git_branch}
+                    pullRequestUrl={appData.app.pull_request_url}
+                    stackName={appData.app.name}
+                    gitRepoId={appData.app.git_repo_id}
+                    porterYamlPath={appData.app.porter_yaml_path}
                   />
-                  <DarkMatter antiHeight="-18px" />
+                  <Spacer y={1} />
+                </>
+              ) : !hasBuiltImage && (
+                <>
+                  <Banner
+                    suffix={
+                      <RefreshButton onClick={() => window.location.reload()}>
+                        <img src={refresh} /> Refresh
+                      </RefreshButton>
+                    }
+                  >
+                    Your GitHub repo has not been built yet.
+                    <Spacer inline width="5px" />
+                    <Link
+                      hasunderline
+                      target="_blank"
+                      to={`https://github.com/${appData.app.repo_name}/actions`}
+                    >
+                      Check status
+                    </Link>
+                  </Banner>
+                  <Spacer y={1} />
                 </>
               )}
-              <Spacer y={1} />
               <TabSelector
                 options={
                   appData.app.git_repo_id
@@ -907,6 +914,36 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
           }}
         />
       )}
+      {showRevisionModal && (
+        <Modal closeModal={() => setShowRevisionModal(false)} width="900px">
+          <Container row>
+            <PorterIcon height="18px" src={history} />
+            <Spacer inline x={1} />
+            <Text size={16}>Version history for "{appData.app.name}"</Text>
+          </Container>
+          <RevisionSection
+            forceExpanded={true}
+            showRevisions={showRevisions}
+            toggleShowRevisions={() => {
+              setShowRevisions(!showRevisions);
+            }}
+            chart={appData.chart}
+            refreshChart={() => getChartData(appData.chart)}
+            setRevision={setRevision}
+            forceRefreshRevisions={forceRefreshRevisions}
+            refreshRevisionsOff={() => setForceRefreshRevisions(false)}
+            shouldUpdate={
+              appData.chart.latest_version &&
+              appData.chart.latest_version !==
+              appData.chart.chart.metadata.version
+            }
+            latestVersion={appData.chart.latest_version}
+            upgradeVersion={appUpgradeVersion}
+            setIsCurrent={setIsCurrent}
+          />
+          <DarkMatter antiHeight="-18px" />
+        </Modal>
+      )}
     </>
   );
 };

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

@@ -15,6 +15,7 @@ import { readableDate } from "shared/string_utils";
 import { createPortal } from "react-dom";
 
 type PropsType = WithAuthProps & {
+  forceExpanded?: boolean;
   chart: ChartType;
   refreshChart: () => void;
   setRevision: (x: ChartType, isCurrent?: boolean) => void;
@@ -25,6 +26,7 @@ type PropsType = WithAuthProps & {
   latestVersion: string;
   showRevisions?: boolean;
   toggleShowRevisions?: () => void;
+  setIsCurrent?: (x: boolean) => void;
 };
 
 type StateType = {
@@ -44,7 +46,7 @@ class RevisionSection extends Component<PropsType, StateType> {
     upgradeVersion: "",
     loading: false,
     maxVersion: 0, // Track most recent version even when previewing old revisions
-    expandRevisions: false,
+    expandRevisions: false || this.props.forceExpanded,
   };
 
   refreshHistory = () => {
@@ -206,7 +208,10 @@ class RevisionSection extends Component<PropsType, StateType> {
       return (
         <Tr
           key={i}
-          onClick={() => this.handleClickRevision(revision)}
+          onClick={() => {
+            this.handleClickRevision(revision);
+            this.props.setIsCurrent(isCurrent);
+          }}
           selected={this.props.chart.version === revision.version}
         >
           <Td>{revision.version}</Td>
@@ -313,18 +318,23 @@ class RevisionSection extends Component<PropsType, StateType> {
         <RevisionHeader
           showRevisions={this.props.showRevisions}
           isCurrent={isCurrent}
+          forceExpanded={this.props.forceExpanded}
           onClick={() => {
-            if (typeof this.props.toggleShowRevisions === "function") {
-              this.props.toggleShowRevisions();
+            if (!this.props.forceExpanded) {
+              if (typeof this.props.toggleShowRevisions === "function") {
+                this.props.toggleShowRevisions();
+              }
+              this.setState((prev) => ({
+                ...prev,
+                expandRevisions: !prev.expandRevisions,
+              }));
             }
-            this.setState((prev) => ({
-              ...prev,
-              expandRevisions: !prev.expandRevisions,
-            }));
           }}
         >
           <RevisionPreview>
-            <i className="material-icons">arrow_drop_down</i>
+            {!this.props.forceExpanded && (
+              <i className="material-icons">arrow_drop_down</i>
+            )}
             {isCurrent
               ? `Current version`
               : `Previewing revision (not deployed)`}{" "}
@@ -351,7 +361,10 @@ class RevisionSection extends Component<PropsType, StateType> {
 
   render() {
     return (
-      <StyledRevisionSection showRevisions={this.state.expandRevisions}>
+      <StyledRevisionSection 
+        showRevisions={this.state.expandRevisions}
+        forceExpanded={this.props.forceExpanded}
+      >
         {this.renderContents()}
         {createPortal(
           <ConfirmOverlay
@@ -465,9 +478,12 @@ const Revision = styled.div`
   margin-left: 5px;
 `;
 
-const RevisionHeader = styled.div`
-  color: ${(props: { showRevisions: boolean; isCurrent: boolean }) =>
-    props.isCurrent ? "#ffffff66" : "#f5cb42"};
+const RevisionHeader = styled.div<{
+  showRevisions: boolean;
+  isCurrent: boolean;
+  forceExpanded?: boolean;
+}>`
+  color: ${props => props.isCurrent ? "#ffffff66" : "#f5cb42"};
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -475,10 +491,10 @@ const RevisionHeader = styled.div`
   font-size: 13px;
   width: 100%;
   padding-left: 10px;
-  cursor: pointer;
+  cursor: ${props => props.forceExpanded ? "" : "pointer"};
   background: ${({ theme }) => theme.fg};
   :hover {
-    background: ${(props) => props.showRevisions && props.theme.fg2};
+    background: ${props => props.showRevisions && !props.forceExpanded && props.theme.fg2};
   }
 
   > div > i {
@@ -486,12 +502,14 @@ const RevisionHeader = styled.div`
     font-size: 20px;
     cursor: pointer;
     border-radius: 20px;
-    transform: ${(props: { showRevisions: boolean; isCurrent: boolean }) =>
-    props.showRevisions ? "" : "rotate(-90deg)"};
+    transform: ${props => props.showRevisions ? "" : "rotate(-90deg)"};
   }
 `;
 
-const StyledRevisionSection = styled.div`
+const StyledRevisionSection = styled.div<{ 
+  showRevisions: boolean;
+  forceExpanded?: boolean;
+}>`
   width: 100%;
   max-height: ${(props: { showRevisions: boolean }) =>
     props.showRevisions ? "255px" : "40px"};
@@ -501,7 +519,7 @@ const StyledRevisionSection = styled.div`
   background: ${props => props.theme.fg};
   border: 1px solid #494b4f;
   :hover {
-    border: 1px solid #7a7b80;
+    border: ${props => props.forceExpanded ? "" : "1px solid #7a7b80"};
   }
   animation: ${(props: { showRevisions: boolean }) =>
     props.showRevisions ? "expandRevisions 0.3s" : ""};