feat(kubernetes): add note teaser and styled application note on details EE-5364 (#9016)

app/portainer/views/settings/settings.html

@@ -48,11 +48,23 @@
               feature-id="enforceDeploymentOptions"
               disabled="true"
               checked="false"
-              field-class="'col-sm-10'"
+              field-class="'col-sm-12'"
               label-class="'col-sm-2'"
               tooltip="'Hides the \'Add with form\' buttons and prevents adding/editing of resources via forms'"
             ></por-switch-field>
           </div>
+          <div class="form-group">
+            <por-switch-field
+              label="'Require a note on applications'"
+              name="'toggle_requireNoteOnApplications'"
+              feature-id="requireNoteOnApplications"
+              disabled="true"
+              checked="false"
+              field-class="'col-sm-12'"
+              label-class="'col-sm-2'"
+              tooltip="'BE allows entry of notes in Add/Edit application. Using this setting will enforce entry of a note in Add/Edit application (and prevent complete clearing of it in Application details).'"
+            ></por-switch-field>
+          </div>
           <!-- !deployment options -->
           <!-- actions -->
           <div class="form-group">

app/portainer/views/settings/settingsController.js

@@ -15,6 +15,7 @@ angular.module('portainer.app').controller('SettingsController', [
     $scope.enforceDeploymentOptions = FeatureId.ENFORCE_DEPLOYMENT_OPTIONS;
     $scope.updateSettings = updateSettings;
     $scope.handleSuccess = handleSuccess;
+    $scope.requireNoteOnApplications = FeatureId.K8S_REQUIRE_NOTE_ON_APPLICATIONS;
 
     $scope.backupOptions = options;
 

app/react/components/buttons/Button.css

@@ -7,6 +7,7 @@
 
 .btn-none:focus {
   outline: none;
+  color: inherit;
 }
 
 .btn-warninglight {

app/react/kubernetes/applications/DetailsView/ApplicationSummaryWidget.tsx

@@ -1,4 +1,4 @@
-import { User, Clock, Edit, ChevronDown, ChevronUp } from 'lucide-react';
+import { User, Clock, Edit, ChevronRight, ChevronUp } from 'lucide-react';
 import moment from 'moment';
 import { useEffect, useState } from 'react';
 import { Pod } from 'kubernetes-types/core/v1';
@@ -197,16 +197,16 @@ export function ApplicationSummaryWidget() {
             <form className="form-horizontal">
               <div className="form-group">
                 <div className="col-sm-12 vertical-center">
-                  <Edit /> Note
                   <Button
-                    size="xsmall"
+                    size="small"
                     type="button"
-                    color="light"
+                    color="none"
                     data-cy="k8sAppDetail-expandNoteButton"
                     onClick={() => setIsNoteOpen(!isNoteOpen)}
+                    className="!m-0 !p-0"
                   >
-                    {isNoteOpen ? 'Collapse' : 'Expand'}
-                    {isNoteOpen ? <ChevronUp /> : <ChevronDown />}
+                    {isNoteOpen ? <ChevronUp /> : <ChevronRight />} <Edit />{' '}
+                    Note
                   </Button>
                 </div>
               </div>
@@ -267,7 +267,7 @@ export function ApplicationSummaryWidget() {
       {
         op: 'replace',
         path: `/metadata/annotations/${appNoteAnnotation}`,
-        value: 'applicationNoteFormValues',
+        value: applicationNoteFormValues,
       },
     ];
     if (application?.kind) {

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

@@ -41,4 +41,5 @@ export enum FeatureId {
   K8SINSTALL = 'k8s-install',
   K8S_ANNOTATIONS = 'k8s-annotations',
   CA_FILE = 'ca-file',
+  K8S_REQUIRE_NOTE_ON_APPLICATIONS = 'k8s-note-on-applications',
 }

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

@@ -46,6 +46,7 @@ export async function init(edition: Edition) {
     [FeatureId.K8S_ROLLING_RESTART]: Edition.BE,
     [FeatureId.K8S_ANNOTATIONS]: Edition.BE,
     [FeatureId.CA_FILE]: Edition.BE,
+    [FeatureId.K8S_REQUIRE_NOTE_ON_APPLICATIONS]: Edition.BE,
   };
 
   state.currentEdition = currentEdition;