feat(ui): renovate the Docker volume creation page EE-3514 (#7380)

app/docker/components/imageRegistry/por-image-registry.html

@@ -13,7 +13,7 @@
     </div>
   </div>
   <div class="form-group" ng-if="$ctrl.model.UseRegistry">
-    <label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left col-sm-3 col-lg-2">Image</label>
+    <label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left col-sm-3 col-lg-2 required">Image</label>
     <div ng-class="$ctrl.inputClass" class="col-sm-8">
       <div class="input-group">
         <span class="input-group-addon" id="registry-name">{{ $ctrl.displayedRegistryURL() }}</span>
@@ -47,12 +47,12 @@
   <div ng-if="!$ctrl.model.UseRegistry">
     <div class="form-group">
       <span class="small">
-        <p class="text-muted mb-5" style="margin-left: 15px">
+        <p class="text-muted ml-4">
           <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
           When using advanced mode, image and repository <b>must be</b> publicly available.
         </p>
       </span>
-      <label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left col-sm-3 col-lg-2">Image </label>
+      <label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left col-sm-3 col-lg-2 required">Image </label>
       <div ng-class="$ctrl.inputClass" class="col-sm-8">
         <input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/my-image:my-tag" required />
       </div>
@@ -75,10 +75,10 @@
     <div class="col-sm-12">
       <p>
         <a class="small interactive" ng-if="!$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = true;">
-          <i class="fa fa-database space-right" aria-hidden="true"></i> Simple mode
+          <pr-icon icon="'database'" feather="true"> </pr-icon> Simple mode
         </a>
         <a class="small interactive" ng-if="$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = false;">
-          <i class="fa fa-globe space-right" aria-hidden="true"></i> Advanced mode
+          <pr-icon icon="'globe'" feather="true"> </pr-icon> Advanced mode
         </a>
       </p>
     </div>

app/docker/components/volumesCIFSForm/volumesCifsForm.html

@@ -4,7 +4,7 @@
     <div class="col-sm-12 form-section-title"> CIFS Settings </div>
     <!-- address-input -->
     <div class="form-group col-md-12">
-      <label for="cifs_address" class="col-sm-2 col-md-1 control-label text-left">Address</label>
+      <label for="cifs_address" class="col-sm-2 col-md-1 control-label text-left required">Address</label>
       <div class="col-sm-10 col-md-11">
         <input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="cifs_address" placeholder="e.g. my.cifs-server.com OR xxx.xxx.xxx.xxx" required />
       </div>
@@ -19,7 +19,7 @@
     <!-- !address-input -->
     <!-- mount-point-input -->
     <div class="form-group col-md-12">
-      <label for="cifs_share" class="col-sm-2 col-md-1 control-label text-left">Share</label>
+      <label for="cifs_share" class="col-sm-2 col-md-1 control-label text-left required">Share</label>
       <div class="col-sm-10 col-md-11">
         <input type="text" class="form-control" ng-model="$ctrl.data.share" name="cifs_share" placeholder="e.g. /myshare" required />
       </div>
@@ -49,7 +49,7 @@
     <!-- !version-input -->
     <!-- username -->
     <div class="form-group col-md-12">
-      <label for="cifs_username" class="col-sm-2 col-md-1 control-label text-left">Username</label>
+      <label for="cifs_username" class="col-sm-2 col-md-1 control-label text-left required">Username</label>
       <div class="col-sm-10 col-md-11">
         <input type="text" class="form-control" ng-model="$ctrl.data.username" name="cifs_username" required />
       </div>

app/docker/components/volumesNFSForm/volumesnfsForm.html

@@ -4,7 +4,7 @@
     <div class="col-sm-12 form-section-title"> NFS Settings </div>
     <!-- address-input -->
     <div class="form-group col-md-12">
-      <label for="nfs_address" class="col-sm-2 col-md-1 control-label text-left">Address</label>
+      <label for="nfs_address" class="col-sm-2 col-md-1 control-label text-left required">Address</label>
       <div class="col-sm-10 col-md-11">
         <input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="nfs_address" placeholder="e.g. my.nfs-server.com OR xxx.xxx.xxx.xxx" required />
       </div>
@@ -34,7 +34,7 @@
     <!-- !version-input -->
     <!-- mount-point-input -->
     <div class="form-group col-md-12">
-      <label for="nfs_mountpoint" class="col-sm-2 col-md-1 control-label text-left">Mount point</label>
+      <label for="nfs_mountpoint" class="col-sm-2 col-md-1 control-label text-left required">Mount point</label>
       <div class="col-sm-10 col-md-11">
         <input
           type="text"

app/docker/views/volumes/create/createVolumeController.js

@@ -38,6 +38,24 @@ angular.module('portainer.docker').controller('CreateVolumeController', [
       $scope.formValues.DriverOptions.splice(index, 1);
     };
 
+    $scope.onUseNFSChange = onUseNFSChange;
+
+    function onUseNFSChange(checked) {
+      return $scope.$evalAsync(() => {
+        $scope.formValues.NFSData.useNFS = checked;
+        $scope.formValues.CIFSData.useCIFS = false;
+      });
+    }
+
+    $scope.onUseCIFSChange = onUseCIFSChange;
+
+    function onUseCIFSChange(checked) {
+      return $scope.$evalAsync(() => {
+        $scope.formValues.CIFSData.useCIFS = checked;
+        $scope.formValues.NFSData.useNFS = false;
+      });
+    }
+
     function validateForm(accessControlData, isAdmin) {
       $scope.state.formValidationError = '';
       var error = '';

app/docker/views/volumes/create/createvolume.html

@@ -57,22 +57,14 @@
           <!-- !driver-options -->
           <!-- nfs-management -->
           <div class="form-group col-md-12">
-            <label for="useNFS" class="control-label text-left"> Use NFS volume </label>
+            <por-switch-field checked="formValues.NFSData.useNFS" label="'Use NFS volume'" on-change="(onUseNFSChange)"></por-switch-field>
-            <label class="switch" style="margin-left: 20px">
-              <input type="checkbox" name="useNFS" ng-model="formValues.NFSData.useNFS" ng-click="formValues.CIFSData.useCIFS = false" />
-              <i></i>
-            </label>
             <div ng-if="formValues.NFSData.useNFS" class="small text-muted" style="margin-top: 10px"> Ensure <code>nfs-utils</code> are installed on your hosts. </div>
           </div>
           <volumes-nfs-form data="formValues.NFSData" ng-show="formValues.Driver === 'local'"></volumes-nfs-form>
           <!-- !nfs-management -->
           <!-- cifs-management -->
           <div class="form-group col-md-12">
-            <label for="useCIFS" class="control-label text-left"> Use CIFS volume </label>
+            <por-switch-field checked="formValues.CIFSData.useCIFS" label="'Use CIFS volume'" on-change="(onUseCIFSChange)"></por-switch-field>
-            <label class="switch" style="margin-left: 20px">
-              <input type="checkbox" name="useCIFS" ng-model="formValues.CIFSData.useCIFS" ng-click="formValues.NFSData.useNFS = false" />
-              <i></i>
-            </label>
             <div ng-if="formValues.CIFSData.useCIFS" class="small text-muted" style="margin-top: 10px"> Ensure <code>cifs-utils</code> are installed on your hosts. </div>
           </div>
           <volumes-cifs-form data="formValues.CIFSData" ng-show="formValues.Driver === 'local'"></volumes-cifs-form>