undoing some unintended changes and some QOL fixes

dashboard/src/components/YamlEditor.tsx

@@ -38,7 +38,6 @@ class YamlEditor extends Component<PropsType, StateType> {
     e.preventDefault();
   };
 
-
   render() {
     return (
       <Holder>

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

@@ -974,13 +974,14 @@ const ExpandedChart: React.FC<Props> = (props) => {
                     latestVersion={currentChart.latest_version}
                     upgradeVersion={handleUpgradeVersion}
                     comparisonMode={comparisonMode}
-                    toggleComparisonMode={() => {
+                    setComparisonMode={(x: boolean) => {
                       if (!comparisonMode) {
                         setOverrideCurrentTab('values');
 
                       }
-                      setComparisonMode(!comparisonMode);
+                      setComparisonMode(x);
                     }}
+                    devOpsMode={devOpsMode}
                   />
                   {isStack && isLoadingStackEnvGroups ? (
                     <>

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

@@ -25,9 +25,10 @@ type PropsType = WithAuthProps & {
   showRevisions?: boolean;
   toggleShowRevisions?: () => void;
   comparisonMode: boolean;
-  toggleComparisonMode: () => void;
+  setComparisonMode: (x: boolean) => void;
   setCompareChart: (chart: ChartType) => void;
   compareChart?: ChartType;
+  devOpsMode: boolean;
 };
 
 type StateType = {
@@ -77,7 +78,6 @@ class RevisionSection extends Component<PropsType, StateType> {
       .catch(console.log);
   };
 
-
   componentDidMount() {
     this.refreshHistory();
     this.connectToLiveUpdates();
@@ -151,10 +151,14 @@ class RevisionSection extends Component<PropsType, StateType> {
       this.refreshHistory().then(() => {
         this.props.setRevision(this.state.revisions[0], true);
       });
-
     } else if (this.props.chart !== prevProps.chart) {
       this.refreshHistory();
     }
+
+    if (prevProps.devOpsMode && !this.props.devOpsMode && prevProps.comparisonMode) {
+      this.props.setComparisonMode(false);
+      this.props.setCompareChart(null);
+    }
   }
 
   handleRollback = () => {
@@ -194,10 +198,10 @@ class RevisionSection extends Component<PropsType, StateType> {
       if (this.props.compareChart) {
         if (revision.version === this.props.chart.version) {
           this.props.setRevision(this.props.compareChart, this.props.compareChart.version === this.state.maxVersion)
-          this.props.toggleComparisonMode();
+          this.props.setComparisonMode(false);
           this.props.setCompareChart(null);
         } else if (revision.version === this.props.compareChart.version) {
-          this.props.toggleComparisonMode();
+          this.props.setComparisonMode(false);
           this.props.setCompareChart(null);
         } else {
           this.props.setCompareChart(revision);
@@ -211,7 +215,7 @@ class RevisionSection extends Component<PropsType, StateType> {
     }
   };
 
-  startComparison = () => {
+  startOrEndComparison = () => {
     this.props.setCompareChart(
       this.props.comparisonMode ?
         null
@@ -220,7 +224,7 @@ class RevisionSection extends Component<PropsType, StateType> {
           this.state.revisions.find((revision) => revision.version === this.props.chart.version - 1)
           :
           null);
-    this.props.toggleComparisonMode();
+    this.props.setComparisonMode(!this.props.comparisonMode);
   }
 
   renderRevisionList = () => {
@@ -304,6 +308,7 @@ class RevisionSection extends Component<PropsType, StateType> {
         </TableWrapper>
       );
     }
+
   };
 
   renderContents = () => {
@@ -375,16 +380,18 @@ class RevisionSection extends Component<PropsType, StateType> {
               </RevisionUpdateMessage>
             </div>
           )}
-          <CompareVersionsWrapper>
-            <CompareVersionsToggle
-              checked={this.props.comparisonMode}
-              disabled={this.state.revisions.length < 2}
-              onChange={this.startComparison}
-              onClick={(e) => {
-                e.stopPropagation();
-              }} />
-            <span>Compare Versions</span>
-          </CompareVersionsWrapper>
+          {this.props.devOpsMode &&
+            <CompareVersionsWrapper>
+              <CompareVersionsToggle
+                checked={this.props.comparisonMode}
+                disabled={this.state.revisions.length < 2}
+                onChange={this.startOrEndComparison}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }} />
+              <span>Compare Versions</span>
+            </CompareVersionsWrapper>
+          }
         </RevisionHeader>
         <RevisionList>{this.renderExpanded()}</RevisionList>
       </div>
@@ -393,7 +400,7 @@ class RevisionSection extends Component<PropsType, StateType> {
 
   render() {
     return (
-      <StyledRevisionSection showRevisions={this.state.expandRevisions}>
+      <StyledRevisionSection showRevisions={this.state.expandRevisions || this.props.comparisonMode}>
         {this.renderContents()}
         <ConfirmOverlay
           show={this.state.rollbackRevision && true}

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

@@ -102,26 +102,28 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
   };
 
   render() {
-    const compareVersionPrecedesCurrentVersion = this.props.compareChart && this.props.compareChart.version < this.props.currentChart.version;
+    const { currentChart, compareChart, disabled } = this.props;
+    const { values, compareValues, saveValuesStatus } = this.state;
+    const compareVersionPrecedesCurrentVersion = compareChart && compareChart.version < currentChart.version;
 
     return (
       <>
-        {this.props.compareChart ?
+        {compareChart ?
           <ReactDiffViewer
-            oldValue={compareVersionPrecedesCurrentVersion ? this.state.compareValues : this.state.values}
-            newValue={compareVersionPrecedesCurrentVersion ? this.state.values : this.state.compareValues}
+            oldValue={compareVersionPrecedesCurrentVersion ? compareValues : values}
+            newValue={compareVersionPrecedesCurrentVersion ? values : compareValues}
             splitView
             useDarkTheme
-            leftTitle={compareVersionPrecedesCurrentVersion ? `Version ${this.props.compareChart.version.toString()} (Deployed ${readableDate(this.props.compareChart.info.last_deployed)})` : `Version ${this.props.currentChart.version.toString()} (Deployed ${readableDate(this.props.currentChart.info.last_deployed)})`}
-            rightTitle={compareVersionPrecedesCurrentVersion ? `Version ${this.props.currentChart.version.toString()} (Deployed ${readableDate(this.props.currentChart.info.last_deployed)})` : `Version ${this.props.compareChart.version.toString()} (Deployed ${readableDate(this.props.compareChart.info.last_deployed)})`}
+            leftTitle={compareVersionPrecedesCurrentVersion ? `Version ${compareChart.version.toString()} (Deployed ${readableDate(compareChart.info.last_deployed)})` : `Version ${currentChart.version.toString()} (Deployed ${readableDate(currentChart.info.last_deployed)})`}
+            rightTitle={compareVersionPrecedesCurrentVersion ? `Version ${currentChart.version.toString()} (Deployed ${readableDate(currentChart.info.last_deployed)})` : `Version ${compareChart.version.toString()} (Deployed ${readableDate(compareChart.info.last_deployed)})`}
           />
           :
           <StyledValuesYaml>
             <Wrapper>
               <YamlEditor
-                value={this.state.values}
+                value={values}
                 onChange={(e: any) => this.setState({ values: e })}
-                readOnly={this.props.disabled}
+                readOnly={disabled}
                 height="calc(100vh - 412px)"
               />
             </Wrapper>
@@ -129,7 +131,7 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
               <SaveButton
                 text="Update values"
                 onClick={this.handleSaveValues}
-                status={this.state.saveValuesStatus}
+                status={saveValuesStatus}
                 statusPosition="right"
                 clearPosition={true}
                 makeFlush={true}