fix(teaser): add up-to-date teaser [EE-5014] (#8548)

Co-authored-by: testa113 <testa113>

app/docker/views/docker-features-configuration/docker-features-configuration.controller.js

@@ -9,7 +9,8 @@ export default class DockerFeaturesConfigurationController {
     this.Notifications = Notifications;
     this.StateManager = StateManager;
 
-    this.limitedFeature = FeatureId.HIDE_AUTO_UPDATE_WINDOW;
+    this.limitedFeatureAutoUpdate = FeatureId.HIDE_AUTO_UPDATE_WINDOW;
+    this.limitedFeatureUpToDateImage = FeatureId.IMAGE_UP_TO_DATE_INDICATOR;
 
     this.formValues = {
       enableHostManagementFeatures: false,

app/docker/views/docker-features-configuration/docker-features-configuration.html

@@ -48,7 +48,7 @@
                 name="'disableSysctlSettingForRegularUsers'"
                 label="'Enable Change Window'"
                 label-class="'col-sm-7 col-lg-4'"
-                feature-id="$ctrl.limitedFeature"
+                feature-id="$ctrl.limitedFeatureAutoUpdate"
                 tooltip="'Specify a time-frame during which automatic updates can occur in this environment.'"
                 on-change="($ctrl.onToggleAutoUpdate)"
               >
@@ -147,6 +147,21 @@
           </div>
           <!-- !security -->
 
+          <!-- other -->
+          <div class="col-sm-12 form-section-title"> Other </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <por-switch-field
+                label="'Show a notification to indicate out-of-date images for Docker environments'"
+                checked="false"
+                name="'outOfDateImageToggle'"
+                label-class="'col-sm-7 col-lg-4'"
+                feature-id="$ctrl.limitedFeatureUpToDateImage"
+              ></por-switch-field>
+            </div>
+          </div>
+          <!-- !other -->
+
           <!-- actions -->
           <div class="col-sm-12 form-section-title"> Actions </div>
           <div class="form-group">

app/react/portainer/feature-flags/enums.ts

@@ -28,6 +28,7 @@ export enum FeatureId {
   ACTIVITY_AUDIT = 'activity-audit',
   FORCE_REDEPLOYMENT = 'force-redeployment',
   HIDE_AUTO_UPDATE_WINDOW = 'hide-auto-update-window',
+  IMAGE_UP_TO_DATE_INDICATOR = 'image-up-to-date-indicator',
   STACK_PULL_IMAGE = 'stack-pull-image',
   STACK_WEBHOOK = 'stack-webhook',
   CONTAINER_WEBHOOK = 'container-webhook',

app/react/portainer/feature-flags/feature-flags.service.ts

@@ -32,6 +32,7 @@ export async function init(edition: Edition) {
     [FeatureId.TEAM_MEMBERSHIP]: Edition.BE,
     [FeatureId.FORCE_REDEPLOYMENT]: Edition.BE,
     [FeatureId.HIDE_AUTO_UPDATE_WINDOW]: Edition.BE,
+    [FeatureId.IMAGE_UP_TO_DATE_INDICATOR]: Edition.BE,
     [FeatureId.STACK_PULL_IMAGE]: Edition.BE,
     [FeatureId.STACK_WEBHOOK]: Edition.BE,
     [FeatureId.CONTAINER_WEBHOOK]: Edition.BE,

app/react/portainer/feature-flags/feature-ids.js

@@ -10,6 +10,7 @@ export const HIDE_INTERNAL_AUTH = 'hide-internal-auth';
 export const EXTERNAL_AUTH_LDAP = 'external-auth-ldap';
 export const ACTIVITY_AUDIT = 'activity-audit';
 export const HIDE_AUTO_UPDATE_WINDOW = 'hide-auto-update-window';
+export const IMAGE_UP_TO_DATE_INDICATOR = 'image-up-to-date-indicator';
 export const FORCE_REDEPLOYMENT = 'force-redeployment';
 export const STACK_PULL_IMAGE = 'stack-pull-image';
 export const STACK_WEBHOOK = 'stack-webhook';