tweaking the macOS project settings page, dialogs, and docs (#84)

Author: robertpatrick

.gitignore

@@ -2,6 +2,9 @@
 *#
 .#*
 
+# Hugo-related files
+**/.hugo_build.lock
+
 # Dependency directories
 **/node_modules/
 **/bower_components/

documentation/1.1/content/navigate/project-settings.md

@@ -20,14 +20,14 @@ PATH environment variable and restarting the application. On macOS, things are a
 
 When running the application on macOS, the application inherits the environment of a daemon process called `launchd` instead
 of your environment.  By default, the `launchd` environment contains only a few core directories on the `PATH`
-(that is, `/usr/bin`, `/bin`, `/usr/sbin`, and `/sbin`).  This will cause `kubectl` invocations requiring access to one of
-the cloud providers' command-line tooling to fail if the tool is not found in one of those locations.  While it is
-possible for an administrative user to change the environment that `launchd` uses to address this issue, the WKT UI application
-provides the `Extra Path Directories` field to explicitly add the directory where the cloud providers'
-command-line tooling is installed, to the `PATH` that the application uses to invoke `kubectl`. Also, use the
-`Extra Environment Variable Names/Extra Environment Variable Values` fields to define extra environment variables as
-needed. Note that this extra environment configuration is used _only_ when invoking Docker/Podman, kubectl, and Helm.
-This section is visible only when running the application on macOS.
+(that is, `/usr/bin`, `/bin`, `/usr/sbin`, and `/sbin`).  This will, for example, cause `kubectl` invocations requiring
+access to one of the cloud providers' command-line tooling to fail if the tool is not found in one of those locations.
+While it is possible for an administrative user to change the environment that `launchd` uses to address this issue, the
+WKT UI application provides the `Extra Path Directory` table to explicitly add the directory where the cloud providers'
+command-line tooling is installed, to the `PATH` that the application uses to invoke `docker`, `podman`, `kubectl`, and
+`helm`. Also, use the `Extra Environment Variable Name/Extra Environment Variable Value` table to define extra
+environment variables as needed. Note that this extra environment configuration is used _only_ when invoking 
+Docker/Podman, kubectl, and Helm. This section is visible only when running the application on macOS.
 
 
 #### Choosing a Credential Storage Scheme

electron/app/locales/en/webui.json

@@ -84,13 +84,13 @@
   "project-settings-add-path-row-icon-text": "Add Extra Path Directory",
   "project-settings-choose-path-icon-text": "Choose Extra Path Directory",
   "project-settings-delete-path-row-icon-text": "Remove Extra Path Directory",
-  "project-settings-extra-path-directory-header": "Extra Path Directories",
+  "project-settings-extra-path-directory-header": "Extra Path Directory",
   "project-settings-hints-macos-path-directories": "Show System Path Directories",
   "project-settings-button-macos-path-directories": "Show System Path",
   "project-settings-add-env-var-row-icon-text": "Add Extra Environment Variable",
   "project-settings-delete-env-var-row-icon-text": "Remove Extra Environment Variable",
-  "project-settings-extra-environment-variable-name-header": "Extra Environment Variable Names",
-  "project-settings-extra-environment-variable-value-header": "Extra Environment Variable Values",
+  "project-settings-extra-environment-variable-name-header": "Extra Environment Variable Name",
+  "project-settings-extra-environment-variable-value-header": "Extra Environment Variable Value",
   "project-settings-hints-macos-environment-variables": "Show System Environment Variables",
   "project-settings-button-macos-environment-variables": "Show System Environment",
   "project-settings-mac-environment-answer-message": "On macOS, applications started from the Launchpad, Dock, Finder, and Spotlight do not inherit the user's environment.  As such, this application may not have the environment necessary to invoke Docker/Podman, kubectl, and Helm.  Use this section to add extra directories to the PATH and define the extra environment variables needed.  Please note that this extra environment configuration is only used when invoking Docker/Podman, kubectl, and Helm.",
@@ -143,11 +143,12 @@
   "project-settings-credential-store-none-label": "Not Stored",
   "project-settings-credential-store-policy-answer-message": "The Credential Store Policy controls how credentials are handled when the project is saved and loaded.  The options are to store them in the machine's native credential store, store them in the project file encrypted with a passphrase, or not store them at all.",
 
-  "macos-path-directories-dialog-title": "Inherited PATH Environment Variable Directories",
+  "macos-path-directories-dialog-title": "System Path",
+  "macos-path-directories-dialog-name-header": "Path Directory",
 
-  "macos-environment-variables-dialog-title": "Inherited Environment Variables",
-  "macos-environment-variables-dialog-name-header": "Name",
-  "macos-environment-variables-dialog-value-header": "Value",
+  "macos-environment-variables-dialog-title": "System Environment Variables",
+  "macos-environment-variables-dialog-name-header": "Environment Variable Name",
+  "macos-environment-variables-dialog-value-header": "Environment Variable Value",
 
   "user-settings-dialog-log-level-error": "Error",
   "user-settings-dialog-log-level-warn": "Warning",

webui/src/css/app.css

@@ -250,11 +250,16 @@
   z-index: 2;
 }
 
-.wkt-env-vars-table, .wkt-paths-table, .wkt-domain-properties-table,
+.wkt-env-vars-table, .wkt-domain-properties-table,
 .wkt-domain-clusters-table, .wkt-domain-secrets-table {
   border: 1px solid var(--oj-collection-border-color);
 }
 
+.wkt-paths-table {
+  .wkt-env-vars-table;
+  width: 100%;
+}
+
 .wkt-domain-clusters-table,
 .wkt-domain-properties-table,
 .wkt-domain-secrets-table {

webui/src/js/viewModels/macos-environment-variables-dialog.js

@@ -55,14 +55,16 @@ function(accUtils, ko, i18n, viewHelper, ArrayDataProvider, ListDataProviderView
         'headerClassName': 'wkt-table-env-vars-header',
         'headerText': this.labelMapper('name-header'),
         'field': 'name',
-        'resizable': 'enabled'
+        'resizable': 'enabled',
+        'weight': 30
       },
       {
         'className': 'wkt-table-env-vars-cell',
         'headerClassName': 'wkt-table-env-vars-header',
         'headerText': this.labelMapper('value-header'),
         'field': 'value',
-        'resizable': 'enabled'
+        'resizable': 'enabled',
+        'weight': 70
       }
     ];
 

webui/src/js/viewModels/macos-path-directories-dialog.js

@@ -7,7 +7,7 @@
 
 define(['accUtils', 'knockout', 'utils/i18n', 'utils/view-helper', 'ojs/ojarraydataprovider', 'ojs/ojknockout',
   'ojs/ojinputtext', 'ojs/ojlabel', 'ojs/ojbutton', 'ojs/ojdialog', 'ojs/ojformlayout' ],
-function(accUtils, ko, i18n, viewHelper) {
+function(accUtils, ko, i18n, viewHelper, ArrayDataProvider) {
   function PathDirectoriesDialogModel(config) {
     const DIALOG_SELECTOR = '#wktMacosPathDirectoriesDialog';
 
@@ -41,6 +41,17 @@ function(accUtils, ko, i18n, viewHelper) {
 
     this.i18n = i18n;
     this.pathDirectories = this.formatPathDirectoriesData();
+    this.pathDirectoriesDataProvider = new ArrayDataProvider(this.pathDirectories, {  keyAttributes: 'value' })
+
+    this.pathDirectoriesColumnData = [
+      {
+        'className': 'wkt-table-env-vars-cell',
+        'headerClassName': 'wkt-table-env-vars-header',
+        'headerText': this.labelMapper('name-header'),
+        'field': 'value',
+        'sortable': 'disable'
+      }
+    ];
 
     this.dismissDialog = () => {
       const dialog = this.dialogContainer;

webui/src/js/views/macos-path-directories-dialog.html

@@ -9,15 +9,23 @@
 
   <div slot="body">
     <div class="oj-panel wkt-notop wkt-full-height">
-      <div>
-        <ol>
-          <oj-bind-for-each data="[[pathDirectories]]">
-            <template data-oj-as="pathDirectory">
-              <li><oj-bind-text value="[[pathDirectory.data.value]]"></oj-bind-text></li>
-            </template>
-          </oj-bind-for-each>
-        </ol>
-      </div>
+      <oj-table id="macos-path-variable-table"
+                class="wkt-paths-table"
+                aria-label="Inherited PATH Environment Variable Table"
+                data="[[pathDirectoriesDataProvider]]"
+                display="grid"
+                horizontal-grid-visible="enabled"
+                vertical-grid-visible="enabled"
+                edit-mode="none"
+                columns='[[pathDirectoriesColumnData]]'>
+        <template slot="rowTemplate" data-oj-as="row">
+          <tr>
+            <td>
+              <oj-bind-text value="[[row.data.value]]"></oj-bind-text>
+            </td>
+          </tr>
+        </template>
+      </oj-table>
     </div>
   </div>