From 4dc643acd94d5b2fe0c00aace86f3c1a962d5575 Mon Sep 17 00:00:00 2001
From: Matt Hook <hookenz@gmail.com>
Date: Tue, 10 Jan 2023 10:02:07 +1300
Subject: [PATCH] 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>
---
 .../yaml-inspector/yamlInspector.html         |  4 ++--
 app/kubernetes/react/views/index.ts           | 12 ----------
 .../views/applications/edit/application.html  | 12 ++++++----
 .../edit/applicationController.js             | 17 ++++++++-----
 app/portainer/react/components/index.ts       | 12 ++++++++++
 .../components/BETeaserButton.tsx}            | 24 ++++++++++---------
 6 files changed, 45 insertions(+), 36 deletions(-)
 rename app/{kubernetes/react/views/beOnlyButton/index.tsx => react/components/BETeaserButton.tsx} (69%)

diff --git a/app/kubernetes/components/yaml-inspector/yamlInspector.html b/app/kubernetes/components/yaml-inspector/yamlInspector.html
index 33fc07656..f424819f0 100644
--- a/app/kubernetes/components/yaml-inspector/yamlInspector.html
+++ b/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>
diff --git a/app/kubernetes/react/views/index.ts b/app/kubernetes/react/views/index.ts
index deecb7a5b..89e9b14c3 100644
--- a/app/kubernetes/react/views/index.ts
+++ b/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;
diff --git a/app/kubernetes/views/applications/edit/application.html b/app/kubernetes/views/applications/edit/application.html
index 1542e44e6..4a7a3b77d 100644
--- a/app/kubernetes/views/applications/edit/application.html
+++ b/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()"
diff --git a/app/kubernetes/views/applications/edit/applicationController.js b/app/kubernetes/views/applications/edit/applicationController.js
index 7eb439c9a..07a3b045b 100644
--- a/app/kubernetes/views/applications/edit/applicationController.js
+++ b/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);
   }
 
   /**
diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index 1526fd5d7..fd71f8089 100644
--- a/app/portainer/react/components/index.ts
+++ b/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'])
diff --git a/app/kubernetes/react/views/beOnlyButton/index.tsx b/app/react/components/BETeaserButton.tsx
similarity index 69%
rename from app/kubernetes/react/views/beOnlyButton/index.tsx
rename to app/react/components/BETeaserButton.tsx
index c136815fc..9400ba3c6 100644
--- a/app/kubernetes/react/views/beOnlyButton/index.tsx
+++ b/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>
   );
 }