refactor(ui/box-selector): replace all selectors [EE-3856] (#7902)

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

@@ -0,0 +1,70 @@
+import { Box, Boxes } from 'lucide-react';
+
+import { KubernetesApplicationDataAccessPolicies } from '@/kubernetes/models/application/models';
+
+import { BoxSelector, BoxSelectorOption } from '@@/BoxSelector';
+
+interface Props {
+  isEdit: boolean;
+  persistedFoldersUseExistingVolumes: boolean;
+  value: number;
+  onChange(value: number): void;
+}
+
+export function KubeApplicationAccessPolicySelector({
+  isEdit,
+  persistedFoldersUseExistingVolumes,
+  value,
+  onChange,
+}: Props) {
+  const options = getOptions(value, isEdit, persistedFoldersUseExistingVolumes);
+
+  return (
+    <BoxSelector
+      slim
+      options={options}
+      value={value}
+      onChange={onChange}
+      radioName="data_access_policy"
+    />
+  );
+}
+
+function getOptions(
+  value: number,
+  isEdit: boolean,
+  persistedFoldersUseExistingVolumes: boolean
+): ReadonlyArray<BoxSelectorOption<number>> {
+  return [
+    {
+      value: KubernetesApplicationDataAccessPolicies.ISOLATED,
+      id: 'data_access_isolated',
+      icon: Boxes,
+      iconType: 'badge',
+      label: 'Isolated',
+      description:
+        'Application will be deployed as a StatefulSet with each instantiating their own data',
+      tooltip: () =>
+        isEdit || persistedFoldersUseExistingVolumes
+          ? 'Changing the data access policy is not allowed'
+          : '',
+      disabled: () =>
+        (isEdit &&
+          value !== KubernetesApplicationDataAccessPolicies.ISOLATED) ||
+        persistedFoldersUseExistingVolumes,
+    },
+    {
+      value: KubernetesApplicationDataAccessPolicies.SHARED,
+      id: 'data_access_shared',
+      icon: Box,
+      iconType: 'badge',
+      label: 'Shared',
+      description:
+        'Application will be deployed as a Deployment with a shared storage access',
+      tooltip: () =>
+        isEdit ? 'Changing the data access policy is not allowed' : '',
+      disabled: () =>
+        isEdit && value !== KubernetesApplicationDataAccessPolicies.SHARED,
+    },
+  ] as const;
+}

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

@@ -0,0 +1,27 @@
+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"
+    />
+  );
+}

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

@@ -0,0 +1,34 @@
+import { Boxes, Sliders } from 'lucide-react';
+
+import { KubernetesApplicationDeploymentTypes } from '@/kubernetes/models/application/models';
+
+import { BoxSelectorOption } from '@@/BoxSelector';
+
+export function getDeploymentOptions(
+  supportGlobalDeployment: boolean
+): ReadonlyArray<BoxSelectorOption<number>> {
+  return [
+    {
+      id: 'deployment_replicated',
+      label: 'Replicated',
+      value: KubernetesApplicationDeploymentTypes.REPLICATED,
+      icon: Sliders,
+      iconType: 'badge',
+      description: 'Run one or multiple instances of this container',
+    },
+    {
+      id: 'deployment_global',
+      disabled: () => !supportGlobalDeployment,
+      tooltip: () =>
+        !supportGlobalDeployment
+          ? 'The storage or access policy used for persisted folders cannot be used with this option'
+          : '',
+      label: 'Global',
+      description:
+        'Application will be deployed as a DaemonSet with an instance on each node of the cluster',
+      value: KubernetesApplicationDeploymentTypes.GLOBAL,
+      icon: Boxes,
+      iconType: 'badge',
+    },
+  ] as const;
+}