Use grid layout for env tables with buttons

Author: rakillen

webui/src/css/app.css

@@ -460,6 +460,25 @@ h6:first-child {
   margin: 0;
 }
 
+/* container for oj-tables with a button beside each */
+.wkt-table-button-grid {
+  display: grid;
+  grid-column-gap: 1em;
+  grid-row-gap: 1em;
+  grid-auto-columns: auto auto;
+  margin-bottom: var(--oj-form-layout-margin-bottom);
+}
+
+.wkt-table-button-grid .oj-table {
+  grid-column-start: 1;
+  grid-column-end: 1;
+}
+
+.wkt-table-button-grid .oj-button {
+  grid-column-start: 2;
+  grid-column-end: 2;
+}
+
 /* the oj-switcher in the code view should use the remaining height */
 .wkt-code-view-switcher {
   min-height: 1px;

webui/src/js/viewModels/project-settings-page.js

@@ -6,10 +6,12 @@
 'use strict';
 
 define(['accUtils', 'knockout', 'utils/i18n', 'models/wkt-project', 'ojs/ojarraydataprovider',
-  'ojs/ojbufferingdataprovider', 'utils/common-utilities', 'utils/dialog-helper', 'utils/wkt-logger',
-  'utils/url-catalog', 'ojs/ojinputtext', 'ojs/ojlabel', 'ojs/ojbutton', 'ojs/ojformlayout', 'ojs/ojradioset',
-  'ojs/ojswitch', 'ojs/ojselectsingle', 'ojs/ojtable' ],
-function(accUtils, ko, i18n, project, ArrayDataProvider, BufferingDataProvider, utils, dialogHelper) {
+  'ojs/ojbufferingdataprovider', 'utils/common-utilities', 'utils/dialog-helper', 'utils/view-helper',
+  'utils/wkt-logger', 'utils/url-catalog', 'ojs/ojinputtext', 'ojs/ojlabel', 'ojs/ojbutton', 'ojs/ojformlayout',
+  'ojs/ojradioset', 'ojs/ojswitch', 'ojs/ojselectsingle', 'ojs/ojtable' ],
+function(accUtils, ko, i18n, project, ArrayDataProvider,
+  BufferingDataProvider, utils, dialogHelper, viewHelper) {
+
   function ProjectSettingsViewModel() {
 
     this.connected = () => {
@@ -38,14 +40,16 @@ function(accUtils, ko, i18n, project, ArrayDataProvider, BufferingDataProvider,
         'headerClassName': 'wkt-table-add-header',
         'headerTemplate': 'chooseHeaderTemplate',
         'template': 'actionTemplate',
-        'sortable': 'disable'
+        'sortable': 'disable',
+        width: viewHelper.BUTTON_COLUMN_WIDTH
       },
       {
         'className': 'wkt-table-delete-cell',
         'headerClassName': 'wkt-table-add-header',
         'headerTemplate': 'headerTemplate',
         'template': 'actionTemplate',
-        'sortable': 'disable'
+        'sortable': 'disable',
+        width: viewHelper.BUTTON_COLUMN_WIDTH
       }
     ];
 
@@ -76,7 +80,8 @@ function(accUtils, ko, i18n, project, ArrayDataProvider, BufferingDataProvider,
         'headerClassName': 'wkt-table-add-header',
         'headerTemplate': 'headerTemplate',
         'template': 'actionTemplate',
-        'sortable': 'disable'
+        'sortable': 'disable',
+        width: viewHelper.BUTTON_COLUMN_WIDTH
       }
     ];
 

webui/src/js/views/project-settings-page.html

@@ -8,12 +8,13 @@ <h6><oj-bind-text value="[[labelMapper('title')]]"></oj-bind-text></h6>
   <oj-bind-if test="[[isMac()]]">
     <div class="oj-panel" id="kubectl-mac-only">
       <h6 class="wkt-subheading"><oj-bind-text value="[[labelMapper('mac-environment-question')]]"></oj-bind-text></h6>
-      <oj-form-layout max-columns="1" direction="row">
+      <div class="wkt-table-button-grid">
         <oj-table id="extra-path-directories-table"
                   class="wkt-paths-table"
                   aria-label="Extra Path Directories Table"
                   data="[[extraPathDirectoriesDataProvider]]"
                   display="grid"
+                  layout="fixed"
                   horizontal-grid-visible="enabled"
                   vertical-grid-visible="enabled"
                   edit-mode="rowEdit"
@@ -73,6 +74,7 @@ <h6 class="wkt-subheading"><oj-bind-text value="[[labelMapper('mac-environment-q
                   aria-label="Extra Environment Variables Table"
                   data="[[extraEnvironmentVariablesDataProvider]]"
                   display="grid"
+                  layout="fixed"
                   horizontal-grid-visible="enabled"
                   vertical-grid-visible="enabled"
                   edit-mode="rowEdit"
@@ -119,7 +121,7 @@ <h6 class="wkt-subheading"><oj-bind-text value="[[labelMapper('mac-environment-q
             <oj-bind-text value="[[labelMapper('button-macos-environment-variables')]]"></oj-bind-text>
           </span>
         </oj-button>
-      </oj-form-layout>
+      </div>
       <p><oj-bind-text value="[[labelMapper('mac-environment-answer-message')]]"></oj-bind-text></p>
     </div>
   </oj-bind-if>