chore(kompose): remove from settings [EE-4741] (#8375)

app/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector.tsx

@@ -0,0 +1,55 @@
+import { EditorType } from '@/react/edge/edge-stacks/types';
+
+import { BoxSelector } from '@@/BoxSelector';
+import { BoxSelectorOption } from '@@/BoxSelector/types';
+import {
+  compose,
+  kubernetes,
+} from '@@/BoxSelector/common-options/deployment-methods';
+
+interface Props {
+  value: number;
+  onChange(value: number): void;
+  hasDockerEndpoint: boolean;
+  hasKubeEndpoint: boolean;
+}
+
+export function EdgeStackDeploymentTypeSelector({
+  value,
+  onChange,
+  hasDockerEndpoint,
+  hasKubeEndpoint,
+}: Props) {
+  const deploymentOptions: BoxSelectorOption<number>[] = [
+    {
+      ...compose,
+      value: EditorType.Compose,
+      disabled: () => hasKubeEndpoint,
+      tooltip: () =>
+        hasKubeEndpoint
+          ? 'Cannot use this option with Edge Kubernetes environments'
+          : '',
+    },
+    {
+      ...kubernetes,
+      value: EditorType.Kubernetes,
+      disabled: () => hasDockerEndpoint,
+      tooltip: () =>
+        hasDockerEndpoint
+          ? 'Cannot use this option with Edge Docker environments'
+          : '',
+    },
+  ];
+
+  return (
+    <>
+      <div className="col-sm-12 form-section-title"> Deployment type</div>
+      <BoxSelector
+        radioName="deploymentType"
+        value={value}
+        options={deploymentOptions}
+        onChange={onChange}
+      />
+    </>
+  );
+}

app/react/edge/edge-stacks/utils.test.ts

@@ -0,0 +1,40 @@
+import { EnvironmentType } from '@/react/portainer/environments/types';
+
+import { EditorType } from './types';
+import { getValidEditorTypes } from './utils';
+
+interface GetValidEditorTypesTest {
+  endpointTypes: EnvironmentType[];
+  expected: EditorType[];
+  title: string;
+}
+
+describe('getValidEditorTypes', () => {
+  const tests: GetValidEditorTypesTest[] = [
+    {
+      endpointTypes: [EnvironmentType.EdgeAgentOnDocker],
+      expected: [EditorType.Compose],
+      title: 'should return compose for docker envs',
+    },
+    {
+      endpointTypes: [EnvironmentType.EdgeAgentOnKubernetes],
+      expected: [EditorType.Kubernetes],
+      title: 'should return kubernetes for kubernetes envs',
+    },
+    {
+      endpointTypes: [
+        EnvironmentType.EdgeAgentOnDocker,
+        EnvironmentType.EdgeAgentOnKubernetes,
+      ],
+      expected: [],
+      title: 'should return empty for docker and kubernetes envs',
+    },
+  ];
+
+  tests.forEach((test) => {
+    // eslint-disable-next-line jest/valid-title
+    it(test.title, () => {
+      expect(getValidEditorTypes(test.endpointTypes)).toEqual(test.expected);
+    });
+  });
+});

app/react/edge/edge-stacks/utils.ts

@@ -0,0 +1,16 @@
+import _ from 'lodash';
+
+import { EnvironmentType } from '@/react/portainer/environments/types';
+
+import { EditorType } from './types';
+
+export function getValidEditorTypes(endpointTypes: EnvironmentType[]) {
+  const right: Partial<Record<EnvironmentType, EditorType[]>> = {
+    [EnvironmentType.EdgeAgentOnDocker]: [EditorType.Compose],
+    [EnvironmentType.EdgeAgentOnKubernetes]: [EditorType.Kubernetes],
+  };
+
+  return endpointTypes.length
+    ? _.intersection(...endpointTypes.map((type) => right[type]))
+    : [EditorType.Compose, EditorType.Kubernetes];
+}