From 5aaa9f874d761060baa53815d937e2a5d3634062 Mon Sep 17 00:00:00 2001
From: HarveyKandola <harvey@documize.com>
Date: Fri, 6 Dec 2019 10:13:15 +0000
Subject: [PATCH] Hide PlantUML sample diagrams when you have content

Closes #346
---
 .../section/plantuml/type-editor.js           | 25 +++++++++-------
 .../section/plantuml/type-editor.hbs          | 29 ++++++++++---------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/gui/app/components/section/plantuml/type-editor.js b/gui/app/components/section/plantuml/type-editor.js
index ce1a0641..71964f40 100644
--- a/gui/app/components/section/plantuml/type-editor.js
+++ b/gui/app/components/section/plantuml/type-editor.js
@@ -30,6 +30,9 @@ export default Component.extend({
 		let page = this.get('page');
 		return `plantuml-preview-${page.id}`;
     }),
+	emptyDiagram: computed('diagramText', function () {
+		return _.isEmpty(this.get('diagramText'));
+    }),
 
     generatePreview() {
         this.set('waiting', true);
@@ -50,7 +53,7 @@ export default Component.extend({
             });
         });
     },
-    
+
     didReceiveAttrs() {
         this._super(...arguments);
         this.set('waiting', false);
@@ -96,20 +99,20 @@ title Servlet Container
 
 if "Page.onSecurityCheck" then
     ->[true] "Page.onInit()"
-    
+
     if "isForward?" then
     ->[no] "Process controls"
-    
+
     if "continue processing?" then
         -->[yes] ===RENDERING===
     else
         -->[no] ===REDIRECT_CHECK===
     endif
-    
+
     else
     -->[yes] ===RENDERING===
     endif
-    
+
     if "is Post?" then
     -->[yes] "Page.onPost()"
     --> "Page.onRender()" as render
@@ -118,7 +121,7 @@ if "Page.onSecurityCheck" then
     -->[no] "Page.onGet()"
     --> render
     endif
-    
+
 else
     -->[false] ===REDIRECT_CHECK===
 endif
@@ -243,7 +246,7 @@ if (Page.onSecurityCheck) then (true)
     if (continue processing?) then (no)
         stop
     endif
-    
+
     if (isPost?) then (yes)
         :Page.onPost();
     else (no)
@@ -280,11 +283,11 @@ package "Some Group" {
     HTTP - [First Component]
     [Another Component]
 }
-    
+
 node "Other Groups" {
     FTP - [Second Component]
     [First Component] --> FTP
-} 
+}
 
 cloud {
     [Example 1]
@@ -331,11 +334,11 @@ state State3 {
 State3 --> State3 : Failed
 State3 --> [*] : Succeeded / Save Result
 State3 --> [*] : Aborted
-    
+
 @enduml`;
 
             this.set('diagramText', txt);
             this.generatePreview();
-        }  
+        }
     }
 });
diff --git a/gui/app/templates/components/section/plantuml/type-editor.hbs b/gui/app/templates/components/section/plantuml/type-editor.hbs
index 89e669f6..db5463e7 100644
--- a/gui/app/templates/components/section/plantuml/type-editor.hbs
+++ b/gui/app/templates/components/section/plantuml/type-editor.hbs
@@ -10,24 +10,25 @@
 		<div class="form-group">
 			<label><a href="http://plantuml.com/" target="_blank">PlantUML Diagram</a></label>
 			<Ui::UiSpacer @size="200" />
-			<div>
-				<p>Insert sample diagrams:</p>
-				<p>
-					{{ui/ui-button color=constants.Color.Gray light=true label="Sequence" onClick=(action "onInsertSequence")}}
-					{{ui/ui-button color=constants.Color.Gray light=true label="Use Case" onClick=(action "onInsertUseCase")}}
-					{{ui/ui-button color=constants.Color.Gray light=true label="Class" onClick=(action "onInsertClass")}}
-					{{ui/ui-button color=constants.Color.Gray light=true label="Activity" onClick=(action "onInsertActivity")}}
-					{{ui/ui-button color=constants.Color.Gray light=true label="Activity (new syntax)" onClick=(action "onInsertActivityNew")}}
-					{{ui/ui-button color=constants.Color.Gray light=true label="Component" onClick=(action "onInsertComponent")}}
-					{{ui/ui-button color=constants.Color.Gray light=true label="State" onClick=(action "onInsertState")}}
-				</p>
-			</div>
 			{{focus-textarea value=diagramText rows=30 id=editorId class="diagram-editor form-control mousetrap"}}
+			{{#if emptyDiagram}}
+				<div>
+					<Ui::UiSpacer @size="100" />
+					<p>Insert sample diagrams:</p>
+					<p>
+						{{ui/ui-button color=constants.Color.Gray light=true label="Sequence" onClick=(action "onInsertSequence")}}
+						{{ui/ui-button color=constants.Color.Gray light=true label="Use Case" onClick=(action "onInsertUseCase")}}
+						{{ui/ui-button color=constants.Color.Gray light=true label="Class" onClick=(action "onInsertClass")}}
+						{{ui/ui-button color=constants.Color.Gray light=true label="Activity" onClick=(action "onInsertActivity")}}
+						{{ui/ui-button color=constants.Color.Gray light=true label="Activity (new syntax)" onClick=(action "onInsertActivityNew")}}
+						{{ui/ui-button color=constants.Color.Gray light=true label="Component" onClick=(action "onInsertComponent")}}
+						{{ui/ui-button color=constants.Color.Gray light=true label="State" onClick=(action "onInsertState")}}
+					</p>
+				</div>
+			{{/if}}
 		</div>
 	</div>
 
-	<Ui::UiSpacer @size="200" />
-
 	{{ui/ui-button color=constants.Color.Yellow light=true label=previewButtonCaption onClick=(action "onPreview")}}
 
 	<Ui::UiSpacer @size="200" />