From 2188005b48657a063d9da1733c2e5c480dbade26 Mon Sep 17 00:00:00 2001
From: Matt Hook <hookenz@gmail.com>
Date: Mon, 12 Dec 2022 14:30:05 +1300
Subject: [PATCH] feat(kubernetes): add rolling restart button teaser [EE-4510]
 (#8126)

* rolling restart teaser button

* add be only rolling restart

* move position of button
---
 .../yaml-inspector/yamlInspector.html         |  8 +++-
 .../react/views/beOnlyButton/index.tsx        | 44 +++++++++++++++++++
 app/kubernetes/react/views/index.ts           | 11 +++--
 .../react/views/yamlReplace/index.tsx         | 30 -------------
 .../views/applications/edit/application.html  | 18 +++++---
 .../edit/applicationController.js             |  3 ++
 app/react/portainer/feature-flags/enums.ts    |  1 +
 .../feature-flags/feature-flags.service.ts    |  1 +
 8 files changed, 75 insertions(+), 41 deletions(-)
 create mode 100644 app/kubernetes/react/views/beOnlyButton/index.tsx
 delete mode 100644 app/kubernetes/react/views/yamlReplace/index.tsx

diff --git a/app/kubernetes/components/yaml-inspector/yamlInspector.html b/app/kubernetes/components/yaml-inspector/yamlInspector.html
index 18870043f..33fc07656 100644
--- a/app/kubernetes/components/yaml-inspector/yamlInspector.html
+++ b/app/kubernetes/components/yaml-inspector/yamlInspector.html
@@ -22,6 +22,12 @@
       <pr-icon class="vertical-center" icon="'check'" size="'md'" mode="'success'"></pr-icon> copied
     </span>
 
-    <yaml-replace class="float-right" feature-id="$ctrl.limitedFeature"></yaml-replace>
+    <be-only-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>
   </div>
 </div>
diff --git a/app/kubernetes/react/views/beOnlyButton/index.tsx b/app/kubernetes/react/views/beOnlyButton/index.tsx
new file mode 100644
index 000000000..c136815fc
--- /dev/null
+++ b/app/kubernetes/react/views/beOnlyButton/index.tsx
@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+
+import { FeatureId } from '@/react/portainer/feature-flags/enums';
+
+import { Button } from '@@/buttons';
+import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
+
+interface Props {
+  featureId: FeatureId;
+  heading: string;
+  message: string;
+  buttonText: string;
+  className?: string;
+  icon?: ReactNode;
+}
+
+export function BEOnlyButton({
+  featureId,
+  heading,
+  message,
+  buttonText,
+  className,
+  icon,
+}: Props) {
+  return (
+    <TooltipWithChildren
+      className={className}
+      heading={heading}
+      BEFeatureID={featureId}
+      message={message}
+    >
+      <Button
+        icon={icon}
+        type="button"
+        color="warninglight"
+        size="small"
+        onClick={() => {}}
+        disabled
+      >
+        {buttonText}
+      </Button>
+    </TooltipWithChildren>
+  );
+}
diff --git a/app/kubernetes/react/views/index.ts b/app/kubernetes/react/views/index.ts
index d2408b12e..deecb7a5b 100644
--- a/app/kubernetes/react/views/index.ts
+++ b/app/kubernetes/react/views/index.ts
@@ -4,7 +4,7 @@ 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 { YAMLReplace } from '@/kubernetes/react/views/yamlReplace';
+import { BEOnlyButton } from '@/kubernetes/react/views/beOnlyButton';
 import { IngressesDatatableView } from '@/react/kubernetes/ingresses/IngressDatatable';
 import { CreateIngressView } from '@/react/kubernetes/ingresses/CreateIngressView';
 
@@ -22,8 +22,13 @@ export const viewsModule = angular
     r2a(withUIRouter(withReactQuery(withCurrentUser(CreateIngressView))), [])
   )
   .component(
-    'yamlReplace',
-    r2a(withUIRouter(withReactQuery(withCurrentUser(YAMLReplace))), [
+    'beOnlyButton',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(BEOnlyButton))), [
       'featureId',
+      'heading',
+      'message',
+      'buttonText',
+      'className',
+      'icon',
     ])
   ).name;
diff --git a/app/kubernetes/react/views/yamlReplace/index.tsx b/app/kubernetes/react/views/yamlReplace/index.tsx
deleted file mode 100644
index 35f24100d..000000000
--- a/app/kubernetes/react/views/yamlReplace/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { FeatureId } from '@/react/portainer/feature-flags/enums';
-
-import { Button } from '@@/buttons';
-import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
-
-interface Props {
-  featureId: FeatureId;
-}
-export function YAMLReplace({ featureId }: Props) {
-  return (
-    <TooltipWithChildren
-      className="float-right"
-      heading="Apply YAML changes"
-      BEFeatureID={featureId}
-      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."
-    >
-      <div className="float-right">
-        <Button
-          type="button"
-          color="warninglight"
-          size="small"
-          onClick={() => {}}
-          disabled
-        >
-          Apply changes
-        </Button>
-      </div>
-    </TooltipWithChildren>
-  );
-}
diff --git a/app/kubernetes/views/applications/edit/application.html b/app/kubernetes/views/applications/edit/application.html
index 5de3b7b29..1542e44e6 100644
--- a/app/kubernetes/views/applications/edit/application.html
+++ b/app/kubernetes/views/applications/edit/application.html
@@ -214,11 +214,11 @@
     <div class="col-sm-12">
       <rd-widget>
         <rd-widget-body>
-          <div ng-if="!ctrl.isSystemNamespace()" style="margin-bottom: 15px">
+          <div ng-if="!ctrl.isSystemNamespace()" class="mb-4 flex items-center gap-1">
             <button
               ng-if="!ctrl.isExternalApplication()"
               type="button"
-              class="btn btn-sm btn-light vertical-center"
+              class="btn btn-sm btn-light vertical-center ml-2"
               ui-sref="kubernetes.applications.application.edit"
               style="margin-left: 0"
               data-cy="k8sAppDetail-editAppButton"
@@ -229,18 +229,23 @@
               authorization="K8sApplicationDetailsW"
               ng-if="ctrl.isExternalApplication()"
               type="button"
-              class="btn btn-sm btn-light"
+              class="btn btn-sm btn-light ml-2"
               ui-sref="kubernetes.applications.application.edit"
-              style="margin-left: 0"
               data-cy="k8sAppDetail-editAppButton"
             >
               <pr-icon icon="'code'" class-name="'mr-1'"></pr-icon>Edit External application
             </button>
+            <be-only-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>
             <button
               ng-if="ctrl.application.ApplicationType !== ctrl.KubernetesApplicationTypes.POD"
               type="button"
-              class="btn btn-sm btn-light"
-              style="margin-left: 0"
+              class="btn btn-sm btn-light ml-2"
               ng-click="ctrl.redeployApplication()"
               data-cy="k8sAppDetail-redeployButton"
             >
@@ -250,7 +255,6 @@
               ng-if="!ctrl.isExternalApplication()"
               type="button"
               class="btn btn-sm btn-light"
-              style="margin-left: 0"
               ng-click="ctrl.rollbackApplication()"
               ng-disabled="ctrl.application.Revisions.length < 2 || ctrl.state.appType !== ctrl.KubernetesDeploymentTypes.APPLICATION_FORM"
               data-cy="k8sAppDetail-rollbackButton"
diff --git a/app/kubernetes/views/applications/edit/applicationController.js b/app/kubernetes/views/applications/edit/applicationController.js
index 49c8384fa..7eb439c9a 100644
--- a/app/kubernetes/views/applications/edit/applicationController.js
+++ b/app/kubernetes/views/applications/edit/applicationController.js
@@ -1,6 +1,7 @@
 import angular from 'angular';
 import _ from 'lodash-es';
 import * as JsonPatch from 'fast-json-patch';
+import { FeatureId } from '@/react/portainer/feature-flags/enums';
 
 import {
   KubernetesApplicationDataAccessPolicies,
@@ -350,6 +351,8 @@ class KubernetesApplicationController {
   }
 
   async onInit() {
+    this.limitedFeature = FeatureId.K8S_ROLLING_RESTART;
+
     this.state = {
       activeTab: 0,
       currentName: this.$state.$current.name,
diff --git a/app/react/portainer/feature-flags/enums.ts b/app/react/portainer/feature-flags/enums.ts
index e8887daa3..afdcb8af3 100644
--- a/app/react/portainer/feature-flags/enums.ts
+++ b/app/react/portainer/feature-flags/enums.ts
@@ -35,4 +35,5 @@ export enum FeatureId {
   CUSTOM_LOGIN_BANNER = 'custom-login-banner',
   ENFORCE_DEPLOYMENT_OPTIONS = 'k8s-enforce-deployment-options',
   K8S_ADM_ONLY_USR_INGRESS_DEPLY = 'k8s-admin-only-ingress-deploy',
+  K8S_ROLLING_RESTART = 'k8s-rolling-restart',
 }
diff --git a/app/react/portainer/feature-flags/feature-flags.service.ts b/app/react/portainer/feature-flags/feature-flags.service.ts
index 8f806925c..1e372fb50 100644
--- a/app/react/portainer/feature-flags/feature-flags.service.ts
+++ b/app/react/portainer/feature-flags/feature-flags.service.ts
@@ -40,6 +40,7 @@ export async function init(edition: Edition) {
     [FeatureId.K8S_EDIT_YAML]: Edition.BE,
     [FeatureId.ENFORCE_DEPLOYMENT_OPTIONS]: Edition.BE,
     [FeatureId.K8S_ADM_ONLY_USR_INGRESS_DEPLY]: Edition.BE,
+    [FeatureId.K8S_ROLLING_RESTART]: Edition.BE,
   };
 
   state.currentEdition = currentEdition;