EE-2570 disable pull image toggle when invalid (#7002)

app/assets/css/app.css

@@ -858,3 +858,12 @@ json-tree .branch-preview {
 .form-check.radio {
   margin-left: 15px;
 }
+
+.inline-text {
+  display: inline;
+  position: absolute;
+  font-family: 'Montserrat';
+  font-size: smaller;
+  margin-left: 5px;
+  margin-right: 5px;
+}

app/docker/views/containers/edit/containerController.js

@@ -372,7 +372,8 @@ angular.module('portainer.docker').controller('ContainerController', [
     }
 
     $scope.recreate = function () {
-      ModalService.confirmContainerRecreation(function (result) {
+      const cannotPullImage = !$scope.container.Config.Image || $scope.container.Config.Image.toLowerCase().startsWith('sha256');
+      ModalService.confirmContainerRecreation(cannotPullImage, function (result) {
         if (!result) {
           return;
         }

app/portainer/services/modal.service/prompt.ts

@@ -85,7 +85,10 @@ export function selectRegistry(options: PromptOptions) {
   prompt(options);
 }
 
-export function confirmContainerRecreation(callback: PromptCallback) {
+export function confirmContainerRecreation(
+  cannotPullImage: boolean | null,
+  callback: PromptCallback
+) {
   const box = prompt({
     title: 'Are you sure?',
 
@@ -105,9 +108,26 @@ export function confirmContainerRecreation(callback: PromptCallback) {
     callback,
   });
 
-  const message = `You're about to re-create this container, any non-persisted data will be lost. This container will be removed and another one will be created using the same configuration.`;
-
-  customizeCheckboxPrompt(box, message);
+  const message = `You're about to recreate this container and any non-persisted data will be lost. This container will be removed and another one will be created using the same configuration.`;
+  box.find('.bootbox-body').prepend(`<p>${message}</p>`);
+  const label = box.find('.form-check-label');
+  label.css('padding-left', '5px');
+  label.css('padding-right', '25px');
+
+  if (cannotPullImage) {
+    label.css('cursor', 'not-allowed');
+    label.find('i').css('cursor', 'not-allowed');
+    const checkbox = box.find('.bootbox-input-checkbox');
+    checkbox.prop('disabled', true);
+    const formCheck = box.find('.form-check');
+    formCheck.prop('style', 'height: 45px;');
+    const cannotPullImageMessage = `<div class="fa fa-exclamation-triangle text-warning"/>
+               <div class="inline-text text-warning">
+                   <span>Cannot pull latest as the image is inaccessible - either it no longer exists or the tag or name is no longer correct.
+                   </span>
+               </div>`;
+    formCheck.append(`${cannotPullImageMessage}`);
+  }
 }
 
 export function confirmServiceForceUpdate(