From d84a5b9c6752c54cd9368de5371cc8e2a06bd0cb Mon Sep 17 00:00:00 2001
From: Eduardo Brito <47034949+edurbrito@users.noreply.github.com>
Date: Tue, 23 Feb 2021 21:02:36 +0000
Subject: [PATCH] feat(yaml-inspector): add button to expand/collapse yaml
 inspector (#4007) (#4828)

* #4007 feat(yaml-inspector): add button to expand/collapse yaml inspector

* feat(yaml-inspector): add button to expand/collapse yaml inspector

Better yamlInspector.html formatting

* feat(yaml-inspector): change name of toggle function

More descriptive name for the function that toggles the expansion of the YAML inspector.
---
 .../components/yaml-inspector/yamlInspector.html          | 2 ++
 .../components/yaml-inspector/yamlInspectorController.js  | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/app/kubernetes/components/yaml-inspector/yamlInspector.html b/app/kubernetes/components/yaml-inspector/yamlInspector.html
index 1f2627e88..e0e24bcfa 100644
--- a/app/kubernetes/components/yaml-inspector/yamlInspector.html
+++ b/app/kubernetes/components/yaml-inspector/yamlInspector.html
@@ -2,6 +2,8 @@
   <code-editor identifier="application-details-yaml" read-only="true" value="$ctrl.data"></code-editor>
   <div style="margin: 15px;">
     <span class="btn btn-primary btn-sm" ng-click="$ctrl.copyYAML()"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy to clipboard</span>
+    <span class="btn btn-primary btn-sm space-left" ng-click="$ctrl.toggleYAMLInspectorExpansion()">
+      <i class="fa fa-{{ $ctrl.expanded ? 'minus' : 'plus' }} space-right" aria-hidden="true"></i>{{ $ctrl.expanded ? 'Collapse' : 'Expand' }}</span>
     <span id="copyNotificationYAML" style="margin-left: 7px; display: none; color: #23ae89;" class="small"> <i class="fa fa-check" aria-hidden="true"></i> copied </span>
   </div>
 </div>
diff --git a/app/kubernetes/components/yaml-inspector/yamlInspectorController.js b/app/kubernetes/components/yaml-inspector/yamlInspectorController.js
index 82b009316..e0c737710 100644
--- a/app/kubernetes/components/yaml-inspector/yamlInspectorController.js
+++ b/app/kubernetes/components/yaml-inspector/yamlInspectorController.js
@@ -5,12 +5,20 @@ class KubernetesYamlInspectorController {
 
   constructor(clipboard) {
     this.clipboard = clipboard;
+    this.expanded = false;
   }
 
   copyYAML() {
     this.clipboard.copyText(this.data);
     $('#copyNotificationYAML').show().fadeOut(2500);
   }
+
+  toggleYAMLInspectorExpansion() {
+    let selector = 'kubernetes-yaml-inspector code-editor > div.CodeMirror';
+    let height = this.expanded ? '500px' : '80vh';
+    $(selector).css({ height: height });
+    this.expanded = !this.expanded;
+  }
 }
 
 export default KubernetesYamlInspectorController;