From 9695b248015656f5dbfcd2ac1f407125e07e86a3 Mon Sep 17 00:00:00 2001
From: Amine Mouhoub <ma.mouhoub@gmail.com>
Date: Wed, 31 Jan 2024 17:00:43 +0100
Subject: [PATCH] Add variables view modal

---
 app/index.html                                | 17 ++++-
 app/scripts/proactive/model/Job.js            |  3 +-
 .../templates/job-variable-template.html      | 65 ++++++++++++++---
 app/scripts/proactive/view/FileBrowserView.js |  4 ++
 app/scripts/proactive/view/JobVariableView.js |  6 +-
 .../view/ThirdPartyCredentialView.js          |  4 ++
 .../proactive/view/ViewWithProperties.js      | 14 ++--
 app/scripts/proactive/view/dom.js             | 69 ++++++++++++++++---
 app/styles/studio.css                         | 12 ++++
 9 files changed, 168 insertions(+), 26 deletions(-)

diff --git a/app/index.html b/app/index.html
index e814ff33..a29a9ceb 100644
--- a/app/index.html
+++ b/app/index.html
@@ -920,7 +920,22 @@ <h4>Set the variables used for the job</h4>
         </div>
     </div>
 </div>
-<!--style="overflow:hidden; outline:none"-->
+
+<div id="workflow-variables-modal" class="modal fade nested-modal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog" style="min-width: 900px; width: 80%">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3>Workflow variables structured by categories</h3>
+            </div>
+            <div class="modal-body" id="job-variables-mode" style="height:100%">
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-primary" id="check-button-v2" type="button">Check</button>
+            </div>
+        </div>
+    </div>
+</div>
 <div id="third-party-credential-modal" class="modal fade nested-modal" tabindex="-1" role="dialog" aria-hidden="true"></div>
 <div id="file-browser-modal" class="modal fade nested-modal" tabindex="-1" role="dialog" aria-hidden="true"></div>
 <div id="plan-workflow-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
diff --git a/app/scripts/proactive/model/Job.js b/app/scripts/proactive/model/Job.js
index 541858ab..4550fae2 100644
--- a/app/scripts/proactive/model/Job.js
+++ b/app/scripts/proactive/model/Job.js
@@ -89,7 +89,8 @@ define(
           fieldAttrs: {
             "data-tab": "Workflow Variables",
             'placeholder': 'variables->variable',
-            "data-tab-help": "Workflow variables that will be available in all tasks."
+            "data-tab-help": "Workflow variables that will be available in all tasks.",
+            "sub-data-tab": "See Variables Structured by Categories"
           },
           confirmDelete: 'You are about to remove a variable.',
           itemToString: Utils.inlineNameValue,
diff --git a/app/scripts/proactive/templates/job-variable-template.html b/app/scripts/proactive/templates/job-variable-template.html
index 8199a324..70b911c6 100644
--- a/app/scripts/proactive/templates/job-variable-template.html
+++ b/app/scripts/proactive/templates/job-variable-template.html
@@ -1,5 +1,5 @@
 <div>
-    <center>
+    <div class="text-center">
         <% _.each(jobGenericInfos, function(gi) {
                     var label = gi["Property Name"];
                     if (label == "workflow.icon" )  %>
@@ -7,28 +7,31 @@
         <% }) %>
 
         <h4 class="modal-title"><%- jobName %> </h4>
-    </center>
+    </div>
 
-    <span class="font-bold"><b>Description : </b><div class="description"><small><%- jobDescription %></small></div></span>
-    <span class="font-bold"><b>Project name : </b><small><%- jobProjectName %></small></span><br>
+    <% if (isSubmissionMode) { %>
+    <div><span class="font-bold">Description :</span></div><div class="description font-small"><%- jobDescription %></div>
+    <div><span class="font-bold">Project name :</span><span class="p-w-xs font-small"><%- jobProjectName %></span></div>
     <% if (jobTags && jobTags.length>0) { %>
-    <span class="font-bold"><b>Tags : </b><small><%=jobTags.join()%></small></span><br>
-    <% } %><br>
+    <div><span class="font-bold">Tags :</span><span class="p-w-xs font-small"><%=jobTags.join()%></span></div>
+    <% } %>
     <% _.each(jobGenericInfos, function(gi) {
     var label = gi["Property Name"];
     if (label == "bucketName" )  %>
-    <span class="font-bold"><b>Bucket name : </b><small><%=gi["Property Value"] %></small></span><br>
+    <div><span class="font-bold">Bucket name :</span><span class="p-w-xs font-small"><%=gi["Property Value"] %></span></div>
 <% }) %>
 
 <% _.each(jobGenericInfos, function(gi) {
 	var label = gi["Property Name"];
     if (label == "Documentation" )  %>
-    <span class="font-bold"><b> Documentation : </b><small><a href='<%="/doc/"+gi["Property Value"]%>' target="_blank"><%=gi["Property Value"]%></a></small></span><br>
+    <div><span class="font-bold">Documentation :</span><span class="p-w-xs font-small"><a href='<%="/doc/"+gi["Property Value"]%>' target="_blank"><%=gi["Property Value"]%></a></span></div>
 <% }) %>
+    <% } %>
 
 </div>
 <style>
-    .hidden-var {display: none !important;color: #888;}
+    /*.hidden-var {display: none !important;color: #888;}*/
+    .hidden-var {display: <%= showHidden ? 'inline-flex' : 'none' %>;color: #888;}
     .advanced-var {display: <%= showAdvanced ? 'inline-flex' : 'none' %>;color: #E86D1F;}
     ul li.formLayout label.advanced-to-hide {display: <%= showAdvanced ? 'none' : 'inline-flex' %>;}
     ul li.formLayout br.advanced-to-hide {display: <%= showAdvanced ? 'none' : 'inline-flex' %>;}
@@ -36,6 +39,7 @@ <h4 class="modal-title"><%- jobName %> </h4>
 <br>
 <%
 var totalNumberOfadvancedVariables = 0;
+var totalNumberOfHiddenVariables = 0;
 for (var key in jobVariables) {
     var variable;
     var hidden = false;
@@ -47,6 +51,9 @@ <h4 class="modal-title"><%- jobName %> </h4>
         }
         if (variable.hasOwnProperty("resolvedHidden")) {
             hidden = variable.resolvedHidden;
+            if (hidden) {
+                totalNumberOfHiddenVariables++;
+            }
         }
         if (!hidden && variable.hasOwnProperty("Advanced") && variable.Advanced) {
             totalNumberOfadvancedVariables++;
@@ -58,9 +65,47 @@ <h4 class="modal-title"><%- jobName %> </h4>
     <div class="formLayout">
         <div for="Job_Variables" style="font-weight: bold;width: 100%" data-toggle="tooltip">Job Variables</div>
         <%
+        if (!isSubmissionMode && totalNumberOfHiddenVariables > 0) {
+        %>
+        <label for="hidden-checkbox" class="p-w-xs" style="color: #888; white-space: nowrap;" data-toggle="tooltip">Hidden
+            <%
+            if (showHidden) {
+            %>
+            <input id="hidden-checkbox" type="checkbox" checked style="margin-left: 3px; display: table-cell; vertical-align: middle; margin-bottom: 5px;">
+            <%
+            } else {
+            %>
+            <input id="hidden-checkbox" type="checkbox" style="margin-left: 3px; display: table-cell; vertical-align: middle; margin-bottom: 5px;">
+            <%
+            }
+            %>
+        </label>
+        <script type="text/javascript">
+            //<![CDATA[
+            jQuery(document).ready(function($){
+                $('#hidden-checkbox').on('change', function() {
+                    if ($(this).is(':checked')) {
+                        // show the advanced variables
+                        $('.hidden-var').css('display', 'inline-flex')
+                        // hide group labels of visible variables if necessary (see below)
+                        $('.advanced-to-hide').css('display', 'none')
+                    } else {
+                        // hide the advanced variables
+                        $('.hidden-var').css('display', 'none')
+                        // show group labels of visible variables if necessary (see below)
+                        $('.advanced-to-hide').css('display', 'inline-flex')
+                    }
+                })
+            })
+            //]]>
+        </script>
+        <%
+        }
+        %>
+        <%
         if (totalNumberOfadvancedVariables > 0) {
         %>
-        <label for="Advanced" style="color: #E86D1F; white-space: nowrap;" data-toggle="tooltip">Advanced
+        <label for="advanced-checkbox" style="color: #E86D1F; white-space: nowrap;" data-toggle="tooltip">Advanced
             <%
                 if (showAdvanced) {
                     %>
diff --git a/app/scripts/proactive/view/FileBrowserView.js b/app/scripts/proactive/view/FileBrowserView.js
index 6ab4ede6..0c41acdc 100644
--- a/app/scripts/proactive/view/FileBrowserView.js
+++ b/app/scripts/proactive/view/FileBrowserView.js
@@ -79,6 +79,10 @@ define(
             $('#execute-workflow-modal').on('hidden.bs.modal', function() {
                 that.closeFileBrowser();
             });
+            // whenever parent modal is hidden, close inside modal
+            $('#workflow-variables-modal').on('hidden.bs.modal', function() {
+                that.closeFileBrowser();
+            });
         },
 
         filterFiles: function () {
diff --git a/app/scripts/proactive/view/JobVariableView.js b/app/scripts/proactive/view/JobVariableView.js
index d9bd73e5..e804a487 100644
--- a/app/scripts/proactive/view/JobVariableView.js
+++ b/app/scripts/proactive/view/JobVariableView.js
@@ -36,7 +36,6 @@ define(
         },
 
         initialize: function () {
-            this.$el = $('#job-variables');
             // fix overlays of nested modal "third-party-credential-modal" inside "execute-workflow-modal" (backdrop overlays the previous modal)
             $(document).on('show.bs.modal', '.nested-modal', function() {
                 var zIndex = 1040 + (10 * $('.modal:visible').length);
@@ -51,6 +50,11 @@ define(
         render: function (jobInfos) {
             var jobInfosCloned = JSON.parse(JSON.stringify(jobInfos));
             this.model = $.extend(this.model, jobInfosCloned);
+            if (jobInfos.isSubmissionMode) {
+                this.$el = $('#job-variables');
+            } else {
+                this.$el = $('#job-variables-mode');
+            }
             this.$el.html(this.template(this.model));
             new BeautifiedModalAdapter().beautifyForm(this.$el);
             return this;
diff --git a/app/scripts/proactive/view/ThirdPartyCredentialView.js b/app/scripts/proactive/view/ThirdPartyCredentialView.js
index 15936b5c..bf6165a9 100644
--- a/app/scripts/proactive/view/ThirdPartyCredentialView.js
+++ b/app/scripts/proactive/view/ThirdPartyCredentialView.js
@@ -38,6 +38,10 @@ define(
             $('#execute-workflow-modal').on('hidden.bs.modal', function() {
                 that.closeThirdPartyCredential()
             });
+            // whenever parent modal is hidden, close inside modal
+            $('#workflow-variables-modal').on('hidden.bs.modal', function() {
+                that.closeThirdPartyCredential()
+            });
         },
 
         render: function () {
diff --git a/app/scripts/proactive/view/ViewWithProperties.js b/app/scripts/proactive/view/ViewWithProperties.js
index 2b43b507..13264b90 100644
--- a/app/scripts/proactive/view/ViewWithProperties.js
+++ b/app/scripts/proactive/view/ViewWithProperties.js
@@ -232,12 +232,12 @@ define(
 							var openAccordion = false;
 							if (isTask) {
 							    // Task properties panel : open the last one open or 1st one by default
-							    if ((i == 0 && !StudioApp.models.openedAccordion) || accId == StudioApp.models.openedAccordion) {
+							    if ((i === 0 && !StudioApp.models.openedAccordion) || accId === StudioApp.models.openedAccordion) {
                                     openAccordion = true;
                                 }
 							} else {
 							    // Workflow properties panel : 1st one open
-							    if (i == 0) {
+							    if (i === 0) {
                                     openAccordion = true;
                                 }
 							}
@@ -248,7 +248,13 @@ define(
 								dataTabHelp = ' data-help="' + el.attr("data-tab-help") + '"';
 							}
 
-							var accordionGroup = $('<div class="panel panel-default"><div class="panel-heading"><a id="'+ el.attr("data-tab")+ '" data-toggle="collapse"' + dataTabHelp + ' data-parent="#accordion-properties" href="#' + accId + '">' + el.attr("data-tab") + '</a></div></div>');
+							var isWorkflowVariables = el.attr('sub-data-tab')
+							var detailedVarsViewLink = ""
+							if (isWorkflowVariables) {
+								detailedVarsViewLink = '<div class="font-smaller text-muted p-w-xs m-l-a"><a id="#variables-button" class="skip btn-block">' + isWorkflowVariables + '</a></div>'
+							}
+
+							var accordionGroup = $('<div class="panel panel-default"><div class="panel-heading container-flex w-100"><a id="'+ el.attr("data-tab")+ '" data-toggle="collapse"' + dataTabHelp + ' data-parent="#accordion-properties" href="#' + accId + '">' + el.attr("data-tab") + '</a>' + detailedVarsViewLink + '</div></div>');
 							currentAccordionGroup = $('<div id="' + accId + '" class="panel-body collapse ' + (openAccordion ? "in" : "") + '"></div>');
 
 							if (el.attr("data-help")) {
@@ -416,7 +422,7 @@ define(
 					var addHelpAfter = el.find("label:first")
 
 					if (addHelpAfter.length==0) {
-						addHelpAfter = el.parents(".panel").find(".panel-heading a");
+						addHelpAfter = el.parents(".panel").find(".panel-heading a:not(.skip)");
 					} else if (addHelpAfter.hasClass("checkbox")) {
 						addHelpAfter = addHelpAfter.find("input:last");
 					}
diff --git a/app/scripts/proactive/view/dom.js b/app/scripts/proactive/view/dom.js
index 2c2f1153..13012a7b 100644
--- a/app/scripts/proactive/view/dom.js
+++ b/app/scripts/proactive/view/dom.js
@@ -769,7 +769,7 @@ define(
             return toggledTasks;
         }
 
-        $("#submit-button").click(function (event) {
+        $("#submit-button,#variables-button").click(function (event) {
             event.preventDefault();
 
             var studioApp = require('StudioApp');
@@ -787,7 +787,7 @@ define(
             var jobDescription = studioApp.models.jobModel.get("Description");
             var jobDocumentation = studioApp.models.jobModel.get("Generic Info Documentation");
             var jobGenericInfos = studioApp.models.jobModel.get("Generic Info");
-
+            var isSubmissionMode = event.currentTarget.id === 'submit-button';
 
             var jobVariablesOriginal = readOrStoreVariablesInModel();
 
@@ -864,8 +864,26 @@ define(
                 executeIfConnected(submit);
                 return;
             }
-            studioApp.views.jobVariableView.render({'jobVariables': jobVariables, 'jobName':jobName, 'jobProjectName':jobProjectName, 'jobTags':jobTags, 'jobDescription':jobDescription, 'jobDocumentation':jobDocumentation, 'jobGenericInfos':jobGenericInfos, 'errorMessage':'', 'infoMessage' :'', 'showAdvanced' : false, 'toggledTasks' : []});
-            $('#execute-workflow-modal').modal();
+            studioApp.views.jobVariableView.render({
+                'jobVariables': jobVariables,
+                'jobName': jobName,
+                'jobProjectName': jobProjectName,
+                'jobTags': jobTags,
+                'jobDescription': jobDescription,
+                'jobDocumentation': jobDocumentation,
+                'jobGenericInfos': jobGenericInfos,
+                'errorMessage': '',
+                'isSubmissionMode': isSubmissionMode,
+                'infoMessage': '',
+                'showAdvanced': false,
+                'showHidden': false,
+                'toggledTasks': []
+            });
+            if (event.currentTarget.id === 'variables-button') {
+                $('#workflow-variables-modal').modal();
+            } else {
+                $('#execute-workflow-modal').modal();
+            }
 
             initializeSubmitFormForTaskVariables();
         });
@@ -893,6 +911,10 @@ define(
             executeOrCheck(event, true, false)
         });
 
+        $("#workflow-variables-modal,#execute-workflow-modal").on('hidden.bs.modal', function () {
+            $(this).data('bs.modal', null);
+        });
+
         // show ThirdPartyCredential modal with updated value of the corresponding variable
         $(document).on("click", '.third-party-credential-button', function (event) {
             var varKey = event.currentTarget.getAttribute('value');
@@ -913,6 +935,7 @@ define(
                 var inputVariables = {};
                 var inputReceived = $('#job-variables .variableValue');
                 var showAdvanced = $('#advanced-checkbox').is(":checked");
+                var showHidden = $('#hidden-checkbox').is(":checked");
                 var toggledTasks = getToggledTasks();
 
                 var extractVariableName = function (key) { return (key.split(":").length == 2 ? key.split(":")[1] : key) };
@@ -954,21 +977,49 @@ define(
 
                 if (!validationData.valid) {
                     var jobVariables = extractUpdatedVariables(inputVariables, validationData);
-                    studioApp.views.jobVariableView.render({'jobVariables': jobVariables, 'jobName':jobName, 'jobProjectName':jobProjectName, 'jobTags':jobTags, 'jobDescription':jobDescription, 'jobDocumentation':jobDocumentation, 'jobGenericInfos':jobGenericInfos, 'errorMessage': validationData.errorMessage, 'infoMessage' : '', 'showAdvanced' : showAdvanced, 'toggledTasks' : toggledTasks});
+                    studioApp.views.jobVariableView.render({
+                        'jobVariables': jobVariables,
+                        'jobName': jobName,
+                        'jobProjectName': jobProjectName,
+                        'jobTags': jobTags,
+                        'jobDescription': jobDescription,
+                        'jobDocumentation': jobDocumentation,
+                        'jobGenericInfos': jobGenericInfos,
+                        'errorMessage': validationData.errorMessage,
+                        'infoMessage': '',
+                        'showAdvanced': showAdvanced,
+                        'showHidden': showHidden,
+                        'isSubmissionMode':isSubmissionMode,
+                        'toggledTasks': toggledTasks
+                    });
                 } else if (check) {
-                    studioApp.views.jobVariableView.render({'jobVariables': extractUpdatedVariables(inputVariables, validationData), 'jobName':jobName, 'jobProjectName':jobProjectName, 'jobTags':jobTags, 'jobDescription':jobDescription, 'jobDocumentation':jobDocumentation, 'jobGenericInfos':jobGenericInfos, 'errorMessage': '', 'infoMessage' : 'Workflow is valid.', 'showAdvanced' : showAdvanced, 'toggledTasks' : toggledTasks});
+                    studioApp.views.jobVariableView.render({
+                        'jobVariables': extractUpdatedVariables(inputVariables, validationData),
+                        'jobName': jobName,
+                        'jobProjectName': jobProjectName,
+                        'jobTags': jobTags,
+                        'jobDescription': jobDescription,
+                        'jobDocumentation': jobDocumentation,
+                        'jobGenericInfos': jobGenericInfos,
+                        'errorMessage': '',
+                        'infoMessage': 'Workflow is valid.',
+                        'showAdvanced': showAdvanced,
+                        'showHidden': showHidden,
+                        'isSubmissionMode':isSubmissionMode,
+                        'toggledTasks': toggledTasks
+                    });
                 } else {
                     $('#execute-workflow-modal').modal("hide");
-                    if(!plan){
+                    if (!plan) {
                         submit();
-                    }else{
+                    } else {
                         $("#plan-workflow-modal").modal();
                     }
                 }
                 readOrStoreVariablesInModel(oldVariables);
 
                 initializeSubmitFormForTaskVariables();
-                
+
                 if (handler) {
                     handler(validationData);
                 }
diff --git a/app/styles/studio.css b/app/styles/studio.css
index 54e55d4f..5bd4c83c 100644
--- a/app/styles/studio.css
+++ b/app/styles/studio.css
@@ -1836,6 +1836,14 @@ ul, #submitFormUL {
     display: inline-block;
 }
 
+.font-bold {
+    font-weight: 600;
+}
+
+.font-small {
+    font-size: small;
+}
+
 .font-smaller {
     font-size: smaller;
 }
@@ -1853,6 +1861,10 @@ ul, #submitFormUL {
     margin-left: 10px;
 }
 
+.m-l-a {
+    margin-left: auto;
+}
+
 .text-muted {
     color: #888888;
 }