refactor(app): migrate deployment type section [EE-6237] (#10704)

Co-authored-by: testa113 <testa113>

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',

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">

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>
+  );
+}

app/react/kubernetes/applications/CreateView/KubeApplicationDeploymentTypeSelector.tsx

@@ -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"
-    />
-  );
-}