Make volume read-only checkbox a dropdown

src/translation/en.json

@@ -1455,7 +1455,12 @@
                 "volume": "Volume",
                 "noMounts": "No volumes are mounted.",
                 "addMountAction": "Add a volume mount",
-                "saveAction": "Save"
+                "saveAction": "Save",
+                "permissions": {
+                    "readOnly": "Read Only",
+                    "readWrite": "Read and Write",
+                    "label": "Permissions"
+                }
             }
         },
         "graphs": {

src/views/app.html

@@ -1010,7 +1010,7 @@
             <thead>
               <tr>
                 <th style="width: 40%">{{ 'app.storage.mounts.volume' | tr }}</th>
-                <th class="text-left hidden-xs hidden-sm">{{ 'app.storage.mounts.readOnly' | tr }}</th>
+                <th class="text-left hidden-xs hidden-sm">{{ 'app.storage.mounts.permissions.label' | tr }}</th>
                 <th style="width: 100px" class="text-right">{{ 'main.actions' | tr }}</th>
               </tr>
             </thead>
@@ -1020,7 +1020,10 @@
                   <multiselect ng-model="mount.volume" data-compare-by="hostPath" options="volume.name for volume in volumes" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
                 </td>
                 <td class="text-left" style="vertical-align: middle;">
-                  <input type="checkbox" ng-model="mount.readOnly" style="margin-top: initial;"/>
+                  <select class="form-control" ng-model="mount.readOnly">
+                    <option value="true">{{ 'app.storage.mounts.permissions.readOnly' | tr }}</option>
+                    <option value="false">{{ 'app.storage.mounts.permissions.readWrite' | tr }}</option>
+                  </select>
                 </td>
                 <td class="text-right no-wrap" style="vertical-align: middle">
                   <button class="btn btn-danger btn-xs" ng-click="storage.delMount($event, $index)"><i class="far fa-trash-alt"></i></button>

src/views/app.js

@@ -618,7 +618,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
 
             app.mounts.forEach(function (mount) { // { volumeId, readOnly }
                 var volume = $scope.volumes.find(function (v) { return v.id === mount.volumeId; });
-                $scope.storage.mounts.push({ volume: volume, readOnly: mount.readOnly });
+                $scope.storage.mounts.push({ volume: volume, readOnly: mount.readOnly ? 'true' : 'false' });
             });
         },
 
@@ -669,7 +669,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
 
             var data = [];
             $scope.storage.mounts.forEach(function (mount) {
-                data.push({ volumeId: mount.volume.id, readOnly: mount.readOnly });
+                data.push({ volumeId: mount.volume.id, readOnly: mount.readOnly === 'true' });
             });
 
             Client.configureApp($scope.app.id, 'mounts', { mounts: data }, function (error) {