From 63a2503fc385b1450cde879a3a1cf2b05584e5bd Mon Sep 17 00:00:00 2001
From: markobean <mark.o.bean@gmail.com>
Date: Sat, 21 Oct 2023 10:09:29 -0400
Subject: [PATCH] NIFI-11874 update Process Group configuration layout in the
 UI (#7591)

* NIFI-11874 update Process Group configuration layout in the UI

* NIFI-11874: relocate checkbox for recursive application of paramenter context

* NIFI-11874 remove comments tab from process group configuration

* NIFI-11874 minor cleanup of float CSS for process-group-parameter-context-combo

This closes #7591
---
 .../canvas/process-group-configuration.jsp    | 238 +++++++++---------
 .../css/process-group-configuration.css       |  11 +-
 2 files changed, 134 insertions(+), 115 deletions(-)

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
index f4858a4405..4064ec5cf0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
@@ -26,130 +26,142 @@
             <button id="add-process-group-configuration-controller-service" class="add-button fa fa-plus" title="Create a new controller service"></button>
             <div id="general-process-group-configuration-tab-content" class="configuration-tab">
                 <div id="general-process-group-configuration">
-                    <div class="setting">
-                        <div class="setting-name">Process group name</div>
-                        <span id="process-group-id" class="hidden"></span>
-                        <div class="editable setting-field">
-                            <input type="text" id="process-group-name" class="setting-input"/>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-name" class="unset"></span>
-                        </div>
-                    </div>
-                    <div class="setting">
-                        <div class="setting-name">Process group parameter context</div>
-                        <div class="editable setting-field">
-                            <div id="process-group-parameter-context-combo"></div>
-                            <div id="parameter-contexts-recursive-container">
-                                <div id="parameter-contexts-recursive" class="nf-checkbox checkbox-unchecked"></div>
-                                <div class="nf-checkbox-label">Apply recursively</div>
-                                <div class="fa fa-question-circle" alt="Info" title="When checked Parameter Context will be applied to the Process Group and all the embedded Process Groups recursively, if the user has the proper permissions on all the respective components. If the user does not have the proper permissions on any embedded Process Group, then the Parameter Context will not be applied for any components."></div>
+                    <div class="settings-columns">
+                        <div class="settings-column">
+                            <div class="setting">
+                                <div class="setting-name">Process group name</div>
+                                <span id="process-group-id" class="hidden"></span>
+                                <div class="editable setting-field">
+                                    <input type="text" id="process-group-name" class="setting-input"/>
+                                </div>
+                                <div class="read-only setting-field">
+                                    <span id="read-only-process-group-name" class="unset"></span>
+                                </div>
                             </div>
-                            <div class="clear"></div>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-parameter-context" class="unset">Unauthorized</span>
-                        </div>
-                    </div>
-                    <div class="setting">
-                        <div class="setting-name">Execution Engine</div>
-                        <div class="editable setting-field">
-                            <div id="process-group-execution-engine-combo"></div>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-execution-engine" class="unset"></span>
-                        </div>
-                    </div>
-                    <div id="stateless-group-options" class="setting">
-                        <div class="setting">
-                            <div class="setting-name">Max Concurrent Tasks</div>
-                            <div class="editable setting-field">
-                                <input type="text" id="process-group-max-concurrent-tasks" class="setting-input"/>
+                            <div class="setting">
+                                <div class="setting-name">Process group parameter context</div>
+                                <div class="editable setting-field">
+                                    <div id="process-group-parameter-context-combo"></div>
+                                    <div id="parameter-contexts-recursive-container">
+                                        <div id="parameter-contexts-recursive" class="nf-checkbox checkbox-unchecked"></div>
+                                        <div class="nf-checkbox-label">Apply recursively</div>
+                                        <div class="fa fa-question-circle" alt="Info" title="When checked Parameter Context will be applied to the Process Group and all the embedded Process Groups recursively, if the user has the proper permissions on all the respective components. If the user does not have the proper permissions on any embedded Process Group, then the Parameter Context will not be applied for any components."></div>
+                                    </div>
+                                    <div class="clear"></div>
+                                </div>
+                                <div class="read-only setting-field">
+                                    <span id="read-only-process-group-parameter-context" class="unset">Unauthorized</span>
+                                </div>
                             </div>
-                            <div class="read-only setting-field">
-                                <span id="read-only-process-group-max-concurrent-tasks" class="unset"></span>
+                            <div class="setting">
+                                <div class="setting-name">Execution Engine</div>
+                                <div class="editable setting-field">
+                                    <div id="process-group-execution-engine-combo"></div>
+                                </div>
+                                <div class="read-only setting-field">
+                                    <span id="read-only-process-group-execution-engine" class="unset"></span>
+                                </div>
+                            </div>
+                            <div id="stateless-group-options" class="setting">
+                                <div class="setting">
+                                    <div class="setting-name">Max Concurrent Tasks</div>
+                                    <div class="editable setting-field">
+                                        <input type="text" id="process-group-max-concurrent-tasks" class="setting-input"/>
+                                    </div>
+                                    <div class="read-only setting-field">
+                                        <span id="read-only-process-group-max-concurrent-tasks" class="unset"></span>
+                                    </div>
+                                </div>
+                                <div class="setting">
+                                    <div class="setting-name">Stateless Flow Timeout</div>
+                                    <div class="editable setting-field">
+                                        <input type="text" id="process-group-stateless-flow-timeout" class="setting-input"/>
+                                    </div>
+                                    <div class="read-only setting-field">
+                                        <span id="read-only-process-group-stateless-flow-timeout" class="unset"></span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="setting">
+                                <div class="setting-name">Process group FlowFile concurrency</div>
+                                <div class="editable setting-field">
+                                    <div id="process-group-flowfile-concurrency-combo"></div>
+                                </div>
+                                <div class="read-only setting-field">
+                                    <span id="read-only-process-group-flowfile-concurrency" class="unset"></span>
+                                </div>
+                            </div>
+                            <div class="setting">
+                                <div class="setting-name">Process group outbound policy</div>
+                                <div class="editable setting-field">
+                                    <div id="process-group-outbound-policy-combo"></div>
+                                </div>
+                                <div class="read-only setting-field">
+                                    <span id="read-only-process-group-outbound-policy" class="unset"></span>
+                                </div>
                             </div>
                         </div>
-                        <div class="setting">
-                            <div class="setting-name">Stateless Flow Timeout</div>
-                            <div class="editable setting-field">
-                                <input type="text" id="process-group-stateless-flow-timeout" class="setting-input"/>
+                        <div class="settings-column">
+                            <div class="setting">
+                                <div class="setting-name">Default FlowFile Expiration
+                                    <div class="fa fa-question-circle" alt="Info" title="This setting applies as the default FLowFile expiration for any new connection. Configuration of existing connections is unaffected."></div>
+                                </div>
+                                <div class="editable setting-field">
+                                    <input type="text" id="process-group-default-flowfile-expiration" class="setting-input"/>
+                                </div>
+                                <div class="read-only setting-field">
+                                    <span id="read-only-process-group-default-flowfile-expiration" class="unset"></span>
+                                </div>
                             </div>
-                            <div class="read-only setting-field">
-                                <span id="read-only-process-group-stateless-flow-timeout" class="unset"></span>
+                            <div class="setting">
+                                <div class="setting-name">Default Back Pressure Object Threshold
+                                    <div class="fa fa-question-circle" alt="Info" title="This setting applies as the default back pressure object count for any new connection. Configuration of existing connections is unaffected."></div>
+                                </div>
+                                <div class="editable setting-field">
+                                    <input type="text" id="process-group-default-back-pressure-object-threshold" class="setting-input"/>
+                                </div>
+                                <div class="read-only setting-field">
+                                    <span id="read-only-process-group-default-back-pressure-object-threshold" class="unset"></span>
+                                </div>
+                            </div>
+                            <div class="setting">
+                                <div class="setting-name">Default Back Pressure Data Size Threshold
+                                    <div class="fa fa-question-circle" alt="Info" title="This setting applies as the default back pressure data size for any new connection. Configuration of existing connections is unaffected."></div>
+                                </div>
+                                <div class="editable setting-field">
+                                    <input type="text" id="process-group-default-back-pressure-data-size-threshold" class="setting-input"/>
+                                </div>
+                                <div class="read-only setting-field">
+                                    <span id="read-only-process-group-default-back-pressure-data-size-threshold" class="unset"></span>
+                                </div>
+                            </div>
+                            <div class="setting">
+                                <div class="setting-name">Log File Suffix
+                                    <div class="fa fa-question-circle" alt="Info" title="Turns on dedicated logging. When left empty log messages will be logged only to the primary app log. When set messages logged by components in this group will be sent to the standard app log, as well as a separate log file, with the provided name, specific to this group."></div>
+                                </div>
+                                <div class="editable setting-field">
+                                    <input type="text" id="process-group-log-file-suffix" class="setting-input"/>
+                                </div>
+                                <div class="read-only setting-field">
+                                    <span id="read-only-process-group-log-file-suffix" class="unset"></span>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <div class="setting">
-                        <div class="setting-name">Process group FlowFile concurrency</div>
-                        <div class="editable setting-field">
-                            <div id="process-group-flowfile-concurrency-combo"></div>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-flowfile-concurrency" class="unset"></span>
-                        </div>
+                </div>
+                <div class="setting">
+                    <div class="setting-name">Process group comments</div>
+                    <div class="editable setting-field">
+                        <textarea id="process-group-comments" class="setting-input"></textarea>
                     </div>
-                    <div class="setting">
-                        <div class="setting-name">Process group outbound policy</div>
-                        <div class="editable setting-field">
-                            <div id="process-group-outbound-policy-combo"></div>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-outbound-policy" class="unset"></span>
-                        </div>
-                    </div>
-                    <div class="setting">
-                        <div class="setting-name">Default FlowFile Expiration</div>
-                        <div class="editable setting-field">
-                            <input type="text" id="process-group-default-flowfile-expiration" class="setting-input"/>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-default-flowfile-expiration" class="unset"></span>
-                        </div>
-                    </div>
-                    <div class="setting">
-                        <div class="setting-name">Default Back Pressure Object Threshold</div>
-                        <div class="editable setting-field">
-                            <input type="text" id="process-group-default-back-pressure-object-threshold" class="setting-input"/>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-default-back-pressure-object-threshold" class="unset"></span>
-                        </div>
-                    </div>
-                    <div class="setting">
-                        <div class="setting-name">Default Back Pressure Data Size Threshold</div>
-                        <div class="editable setting-field">
-                            <input type="text" id="process-group-default-back-pressure-data-size-threshold" class="setting-input"/>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-default-back-pressure-data-size-threshold" class="unset"></span>
-                        </div>
-                    </div>
-                    <div class="setting">
-                        <div class="setting-name">Log File Suffix
-                        <div class="fa fa-question-circle" alt="Info" title="Turns on dedicated logging. When left empty log messages will be logged only to the primary app log. When set messages logged by components in this group will be sent to the standard app log, as well as a separate log file, with the provided name, specific to this group."></div>
-                        </div>
-                        <div class="editable setting-field">
-                            <input type="text" id="process-group-log-file-suffix" class="setting-input"/>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-log-file-suffix" class="unset"></span>
-                        </div>
-                    </div>
-                    <div class="setting">
-                        <div class="setting-name">Process group comments</div>
-                        <div class="editable setting-field">
-                            <textarea id="process-group-comments" class="setting-input"></textarea>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-comments" class="unset"></span>
-                        </div>
+                    <div class="read-only setting-field">
+                        <span id="read-only-process-group-comments" class="unset"></span>
                     </div>
+                </div>
 
-                    <div class="editable settings-buttons">
-                        <div id="process-group-configuration-save" class="button">Apply</div>
-                        <div class="clear"></div>
-                    </div>
+                <div class="editable settings-buttons">
+                    <div id="process-group-configuration-save" class="button">Apply</div>
+                    <div class="clear"></div>
                 </div>
             </div>
             <div id="process-group-controller-services-tab-content" class="configuration-tab">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
index ca0b80f8eb..1059af3956 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
@@ -76,6 +76,14 @@
 
 /* general */
 
+#general-process-group-configuration div.settings-columns {
+    display: flex;
+}
+
+#general-process-group-configuration div.settings-columns .settings-column {
+    margin-right: 50px;
+}
+
 #general-process-group-configuration input, #general-process-group-configuration textarea {
     width: 350px;
     vertical-align: middle;
@@ -83,11 +91,9 @@
 
 #process-group-parameter-context-combo {
     width: 328px;
-    float: left;
 }
 
 #parameter-contexts-recursive-container {
-    float: left;
     margin-left: 10px;
 }
 
@@ -126,6 +132,7 @@
 
 #process-group-comments {
     height: 100px;
+    width: 750px;
 }
 
 #read-only-process-group-comments {