From 58da51f76745c47a6575f977e710c54a214b2818 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Wed, 3 Jan 2024 10:04:08 +1300
Subject: [PATCH] refactor(app): migrate deployment type section [EE-6237]
 (#10704)

Co-authored-by: testa113 <testa113>
---
 app/kubernetes/react/components/index.ts      |  6 ++--
 .../create/createApplication.html             | 10 ++----
 .../AppDeploymentTypeFormSection.tsx          | 34 +++++++++++++++++++
 .../KubeApplicationDeploymentTypeSelector.tsx | 27 ---------------
 4 files changed, 39 insertions(+), 38 deletions(-)
 create mode 100644 app/react/kubernetes/applications/CreateView/AppDeploymentTypeFormSection.tsx
 delete mode 100644 app/react/kubernetes/applications/CreateView/KubeApplicationDeploymentTypeSelector.tsx

diff --git a/app/kubernetes/react/components/index.ts b/app/kubernetes/react/components/index.ts
index eab580a93..97329f898 100644
--- a/app/kubernetes/react/components/index.ts
+++ b/app/kubernetes/react/components/index.ts
@@ -9,7 +9,7 @@ import { RegistriesSelector } from '@/react/kubernetes/namespaces/components/Reg
 import { DataAccessPolicyFormSection } from '@/react/kubernetes/applications/CreateView/DataAccessPolicyFormSection';
 import { KubeServicesForm } from '@/react/kubernetes/applications/CreateView/application-services/KubeServicesForm';
 import { kubeServicesValidation } from '@/react/kubernetes/applications/CreateView/application-services/kubeServicesValidation';
-import { KubeApplicationDeploymentTypeSelector } from '@/react/kubernetes/applications/CreateView/KubeApplicationDeploymentTypeSelector';
+import { AppDeploymentTypeFormSection } from '@/react/kubernetes/applications/CreateView/AppDeploymentTypeFormSection';
 import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import {
@@ -109,8 +109,8 @@ export const ngModule = angular
     ])
   )
   .component(
-    'kubeApplicationDeploymentTypeSelector',
-    r2a(KubeApplicationDeploymentTypeSelector, [
+    'appDeploymentTypeFormSection',
+    r2a(AppDeploymentTypeFormSection, [
       'value',
       'onChange',
       'supportGlobalDeployment',
diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index a4af13daa..b0d0ce83f 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@@ -442,19 +442,13 @@
                     resource-quota-capacity-exceeded="ctrl.resourceQuotaCapacityExceeded()"
                   ></resource-reservation-form-section>
 
-                  <div class="col-sm-12 form-section-title"> Deployment </div>
-                  <!-- #region DEPLOYMENT -->
-                  <div class="form-group">
-                    <div class="col-sm-12 small text-muted"> Select how you want to deploy your application inside the cluster. </div>
-                  </div>
-
                   <!-- deployment options -->
-                  <kube-application-deployment-type-selector
+                  <app-deployment-type-form-section
                     value="ctrl.formValues.DeploymentType"
                     on-change="(ctrl.onChangeDeploymentType)"
                     support-global-deployment="ctrl.supportGlobalDeployment()"
                     radio-name="'deploymentType'"
-                  ></kube-application-deployment-type-selector>
+                  ></app-deployment-type-form-section>
 
                   <!-- replica count -->
                   <div class="form-group" ng-if="ctrl.formValues.DeploymentType === ctrl.ApplicationDeploymentTypes.REPLICATED">
diff --git a/app/react/kubernetes/applications/CreateView/AppDeploymentTypeFormSection.tsx b/app/react/kubernetes/applications/CreateView/AppDeploymentTypeFormSection.tsx
new file mode 100644
index 000000000..0b5b4d2e1
--- /dev/null
+++ b/app/react/kubernetes/applications/CreateView/AppDeploymentTypeFormSection.tsx
@@ -0,0 +1,34 @@
+import { BoxSelector } from '@@/BoxSelector';
+import { FormSection } from '@@/form-components/FormSection';
+import { TextTip } from '@@/Tip/TextTip';
+
+import { getDeploymentOptions } from './deploymentOptions';
+
+interface Props {
+  value: number;
+  onChange(value: number): void;
+  supportGlobalDeployment: boolean;
+}
+
+export function AppDeploymentTypeFormSection({
+  supportGlobalDeployment,
+  value,
+  onChange,
+}: Props) {
+  const options = getDeploymentOptions(supportGlobalDeployment);
+
+  return (
+    <FormSection title="Deployment">
+      <TextTip color="blue">
+        Select how you want to deploy your application inside the cluster.
+      </TextTip>
+      <BoxSelector
+        slim
+        options={options}
+        value={value}
+        onChange={onChange}
+        radioName="deploymentType"
+      />
+    </FormSection>
+  );
+}
diff --git a/app/react/kubernetes/applications/CreateView/KubeApplicationDeploymentTypeSelector.tsx b/app/react/kubernetes/applications/CreateView/KubeApplicationDeploymentTypeSelector.tsx
deleted file mode 100644
index b67483acb..000000000
--- a/app/react/kubernetes/applications/CreateView/KubeApplicationDeploymentTypeSelector.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { BoxSelector } from '@@/BoxSelector';
-
-import { getDeploymentOptions } from './deploymentOptions';
-
-interface Props {
-  value: number;
-  onChange(value: number): void;
-  supportGlobalDeployment: boolean;
-}
-
-export function KubeApplicationDeploymentTypeSelector({
-  supportGlobalDeployment,
-  value,
-  onChange,
-}: Props) {
-  const options = getDeploymentOptions(supportGlobalDeployment);
-
-  return (
-    <BoxSelector
-      slim
-      options={options}
-      value={value}
-      onChange={onChange}
-      radioName="deploymentType"
-    />
-  );
-}