fix(rolling-restart): wording and icon changes [EE-4834] (#8239)

* icon and wording changes

* fix inconsistencies and grammar

* fix(ui/buttons): show tooltip

* Change icon and confirmation dialog

* edit icon

* rename be-only-button to be-teaser-button for consistency

Co-authored-by: Chaim Lev-Ari <chaim.levi-ari@portainer.io>

app/kubernetes/components/yaml-inspector/yamlInspector.html

@@ -22,12 +22,12 @@
       <pr-icon class="vertical-center" icon="'check'" size="'md'" mode="'success'"></pr-icon> copied
     </span>
 
-    <be-only-button
+    <be-teaser-button
       class="float-right"
       feature-id="$ctrl.limitedFeature"
       message="'Applies any changes that you make in the YAML editor by calling the Kubernetes API to patch the relevant resources. Any resource removals or unexpected resource additions that you make in the YAML will be ignored. Note that editing is disabled for resources in namespaces marked as system.'"
       heading="'Apply YAML changes'"
       button-text="'Apply changes'"
-    ></be-only-button>
+    ></be-teaser-button>
   </div>
 </div>

app/kubernetes/react/views/index.ts

@@ -4,7 +4,6 @@ import { r2a } from '@/react-tools/react2angular';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
-import { BEOnlyButton } from '@/kubernetes/react/views/beOnlyButton';
 import { IngressesDatatableView } from '@/react/kubernetes/ingresses/IngressDatatable';
 import { CreateIngressView } from '@/react/kubernetes/ingresses/CreateIngressView';
 
@@ -20,15 +19,4 @@ export const viewsModule = angular
   .component(
     'kubernetesIngressesCreateView',
     r2a(withUIRouter(withReactQuery(withCurrentUser(CreateIngressView))), [])
-  )
-  .component(
-    'beOnlyButton',
-    r2a(withUIRouter(withReactQuery(withCurrentUser(BEOnlyButton))), [
-      'featureId',
-      'heading',
-      'message',
-      'buttonText',
-      'className',
-      'icon',
-    ])
   ).name;

app/kubernetes/views/applications/edit/application.html

@@ -223,7 +223,7 @@
               style="margin-left: 0"
               data-cy="k8sAppDetail-editAppButton"
             >
-              <pr-icon icon="'code'" class="mr-1"></pr-icon>Edit this application
+              <pr-icon icon="'pencil'" class="mr-1"></pr-icon>Edit this application
             </button>
             <button
               authorization="K8sApplicationDetailsW"
@@ -233,15 +233,17 @@
               ui-sref="kubernetes.applications.application.edit"
               data-cy="k8sAppDetail-editAppButton"
             >
-              <pr-icon icon="'code'" class-name="'mr-1'"></pr-icon>Edit External application
+              <pr-icon icon="'pencil'" class-name="'mr-1'"></pr-icon>Edit external application
             </button>
-            <be-only-button
+            <be-teaser-button
               icon="'refresh-cw'"
               feature-id="ctrl.limitedFeature"
               message="'A rolling restart of the application is performed.'"
               heading="'Rolling restart'"
               button-text="'Rolling restart'"
-            ></be-only-button>
+              class-name="'be-tooltip-teaser'"
+              className="'be-tooltip-teaser'"
+            ></be-teaser-button>
             <button
               ng-if="ctrl.application.ApplicationType !== ctrl.KubernetesApplicationTypes.POD"
               type="button"
@@ -249,7 +251,7 @@
               ng-click="ctrl.redeployApplication()"
               data-cy="k8sAppDetail-redeployButton"
             >
-              <pr-icon icon="'rotate-cw'" class="'mr-1'"></pr-icon>Redeploy
+              <pr-icon icon="'rotate-cw'" class="'mr-1'"></pr-icon>Terminate and restart
             </button>
             <button
               ng-if="!ctrl.isExternalApplication()"

app/kubernetes/views/applications/edit/applicationController.js

@@ -224,7 +224,7 @@ class KubernetesApplicationController {
   }
 
   rollbackApplication() {
-    this.ModalService.confirmUpdate('Rolling back the application to a previous configuration may cause a service interruption. Do you wish to continue?', (confirmed) => {
+    this.ModalService.confirmUpdate('Rolling back the application to a previous configuration may cause service interruption. Do you wish to continue?', (confirmed) => {
       if (confirmed) {
         return this.$async(this.rollbackApplicationAsync);
       }
@@ -234,6 +234,15 @@ class KubernetesApplicationController {
    * REDEPLOY
    */
   async redeployApplicationAsync() {
+    const confirmed = await this.ModalService.confirmAsync({
+      title: 'Are you sure?',
+      message: 'Terminating and restarting the application will cause service interruption. Do you wish to continue?',
+      buttons: { confirm: { label: 'Terminate and restart', className: 'btn-primary' } },
+    });
+    if (!confirmed) {
+      return;
+    }
+
     try {
       const promises = _.map(this.application.Pods, (item) => this.KubernetesPodService.delete(item));
       await Promise.all(promises);
@@ -245,11 +254,7 @@ class KubernetesApplicationController {
   }
 
   redeployApplication() {
-    this.ModalService.confirmUpdate('Redeploying the application may cause a service interruption. Do you wish to continue?', (confirmed) => {
-      if (confirmed) {
-        return this.$async(this.redeployApplicationAsync);
-      }
-    });
+    return this.$async(this.redeployApplicationAsync);
   }
 
   /**

app/portainer/react/components/index.ts

@@ -35,6 +35,7 @@ import { TeamsSelector } from '@@/TeamsSelector';
 import { PortainerSelect } from '@@/form-components/PortainerSelect';
 import { Slider } from '@@/form-components/Slider';
 import { TagButton } from '@@/TagButton';
+import { BETeaserButton } from '@@/BETeaserButton';
 
 import { fileUploadField } from './file-upload-field';
 import { switchField } from './switch-field';
@@ -46,6 +47,17 @@ export const componentsModule = angular
     'tagSelector',
     r2a(withReactQuery(TagSelector), ['allowCreate', 'onChange', 'value'])
   )
+  .component(
+    'beTeaserButton',
+    r2a(BETeaserButton, [
+      'featureId',
+      'heading',
+      'message',
+      'buttonText',
+      'className',
+      'icon',
+    ])
+  )
   .component(
     'tagButton',
     r2a(TagButton, ['value', 'label', 'title', 'onRemove'])

app/react/components/BETeaserButton.tsx

@@ -14,7 +14,7 @@ interface Props {
   icon?: ReactNode;
 }
 
-export function BEOnlyButton({
+export function BETeaserButton({
   featureId,
   heading,
   message,
@@ -29,16 +29,18 @@ export function BEOnlyButton({
       BEFeatureID={featureId}
       message={message}
     >
-      <Button
-        icon={icon}
-        type="button"
-        color="warninglight"
-        size="small"
-        onClick={() => {}}
-        disabled
-      >
-        {buttonText}
-      </Button>
+      <span>
+        <Button
+          icon={icon}
+          type="button"
+          color="warninglight"
+          size="small"
+          onClick={() => {}}
+          disabled
+        >
+          {buttonText}
+        </Button>
+      </span>
     </TooltipWithChildren>
   );
 }