feat(podman): support add podman envs in the wizard [r8s-20] (#12056)

app/docker/views/images/build/buildimage.html

@@ -30,7 +30,7 @@
                 <div class="form-group">
                   <span class="col-sm-12 text-muted small">
                     A name must be specified in one of the following formats: <code>name:tag</code>, <code>repository/name:tag</code> or
-                    <code>registryfqdn:port/repository/name:tag</code> format. If you omit the tag the default <b>latest</b> value is assumed.
+                    <code>registry:port/repository/name:tag</code> format. If you omit the tag the default <b>latest</b> value is assumed.
                   </span>
                 </div>
                 <div class="form-group">

app/docker/views/images/edit/image.html

@@ -86,7 +86,7 @@
           <!-- !tag-note -->
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.RegistryModel.Image" ng-click="tagImage()">Tag</button>
+              <button type="button" class="btn btn-primary btn-sm !ml-0" ng-disabled="!formValues.RegistryModel.Image" ng-click="tagImage()">Tag</button>
             </div>
           </div>
         </form>
@@ -103,7 +103,7 @@
         <table class="table">
           <tbody>
             <tr>
-              <td>ID</td>
+              <td class="min-w-[80px]">ID</td>
               <td>
                 {{ image.Id }}
                 <button authorization="DockerImageDelete" class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)">
@@ -145,7 +145,7 @@
               <td>
                 <table class="table-bordered table-condensed table">
                   <tr ng-repeat="(k, v) in image.Labels">
-                    <td>{{ k }}</td>
+                    <td class="min-w-[80px]">{{ k }}</td>
                     <td>{{ v }}</td>
                   </tr>
                 </table>

app/docker/views/images/edit/imageController.js

@@ -2,6 +2,7 @@ import _ from 'lodash-es';
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
 import { confirmImageExport } from '@/react/docker/images/common/ConfirmExportModal';
 import { confirmDelete } from '@@/modals/confirm';
+import { fullURIIntoRepoAndTag } from '@/react/docker/images/utils';
 
 angular.module('portainer.docker').controller('ImageController', [
   '$async',
@@ -71,8 +72,9 @@ angular.module('portainer.docker').controller('ImageController', [
       const registryModel = $scope.formValues.RegistryModel;
 
       const image = ImageHelper.createImageConfigForContainer(registryModel);
+      const { repo, tag } = fullURIIntoRepoAndTag(image.fromImage);
 
-      ImageService.tagImage($transition$.params().id, image.fromImage)
+      ImageService.tagImage($transition$.params().id, repo, tag)
         .then(function success() {
           Notifications.success('Success', 'Image successfully tagged');
           $state.go('docker.images.image', { id: $transition$.params().id }, { reload: true });

app/docker/views/images/import/importImageController.js

@@ -1,15 +1,17 @@
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
+import { fullURIIntoRepoAndTag } from '@/react/docker/images/utils';
 
 angular.module('portainer.docker').controller('ImportImageController', [
   '$scope',
   '$state',
+  '$async',
   'ImageService',
   'Notifications',
   'HttpRequestHelper',
   'Authentication',
   'ImageHelper',
   'endpoint',
-  function ($scope, $state, ImageService, Notifications, HttpRequestHelper, Authentication, ImageHelper, endpoint) {
+  function ($scope, $state, $async, ImageService, Notifications, HttpRequestHelper, Authentication, ImageHelper, endpoint) {
     $scope.state = {
       actionInProgress: false,
     };
@@ -33,15 +35,20 @@ angular.module('portainer.docker').controller('ImportImageController', [
       const registryModel = $scope.formValues.RegistryModel;
       if (registryModel.Image) {
         const image = ImageHelper.createImageConfigForContainer(registryModel);
+        const { repo, tag } = fullURIIntoRepoAndTag(image.fromImage);
         try {
-          await ImageService.tagImage(id, image.fromImage);
+          await ImageService.tagImage(id, repo, tag);
         } catch (err) {
           Notifications.error('Failure', err, 'Unable to tag image');
         }
       }
     }
 
-    $scope.uploadImage = async function () {
+    $scope.uploadImage = function () {
+      return $async(uploadImageAsync);
+    };
+
+    async function uploadImageAsync() {
       $scope.state.actionInProgress = true;
 
       var nodeName = $scope.formValues.NodeName;
@@ -52,7 +59,8 @@ angular.module('portainer.docker').controller('ImportImageController', [
         if (data.error) {
           Notifications.error('Failure', data.error, 'Unable to upload image');
         } else if (data.stream) {
-          var regex = /Loaded.*?: (.*?)\n$/g;
+          // docker has /n at the end of the stream, podman doesn't
+          var regex = /Loaded.*?: (.*?)(?:\n|$)/g;
           var imageIds = regex.exec(data.stream);
           if (imageIds && imageIds.length == 2) {
             await tagImage(imageIds[1]);
@@ -67,6 +75,6 @@ angular.module('portainer.docker').controller('ImportImageController', [
       } finally {
         $scope.state.actionInProgress = false;
       }
-    };
+    }
   },
 ]);

app/docker/views/images/import/importimage.html

@@ -12,7 +12,7 @@
           </div>
           <div class="form-group">
             <div class="col-sm-12 vertical-center">
-              <button type="button" class="btn btn-sm btn-primary" ngf-select ngf-min-size="10" ng-model="formValues.UploadFile">Select file</button>
+              <button type="button" class="btn btn-sm btn-primary !ml-0" ngf-select ngf-min-size="10" ng-model="formValues.UploadFile">Select file</button>
               <span class="ml-1">
                 {{ formValues.UploadFile.name }}
                 <pr-icon icon="'x'" mode="'danger'" ng-if="!formValues.UploadFile"></pr-icon>
@@ -27,7 +27,7 @@
             <!-- !node-selection -->
           </div>
           <div class="row" authorization="DockerImageCreate">
-            <div class="col-lg-12 col-md-12 col-xs-12">
+            <div class="col-lg-12 col-md-12 col-xs-12 p-0">
               <rd-widget>
                 <rd-widget-header icon="tag" title-text="Tag the image"></rd-widget-header>
                 <rd-widget-body>
@@ -51,7 +51,7 @@
             <div class="col-sm-12">
               <button
                 type="button"
-                class="btn btn-primary btn-sm"
+                class="btn btn-primary btn-sm !ml-0"
                 ng-disabled="state.actionInProgress || !formValues.UploadFile"
                 ng-click="uploadImage()"
                 button-spinner="state.actionInProgress"