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

app/react/components/BoxSelector/BoxOption.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 
-import { Tooltip } from '@@/Tip/Tooltip';
+import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
 
 import './BoxSelectorItem.css';
 
@@ -29,7 +29,7 @@ export function BoxOption<T extends number | string>({
   type = 'radio',
   children,
 }: PropsWithChildren<Props<T>>) {
-  return (
+  const BoxOption = (
     <div className={clsx('box-selector-item', className)}>
       <input
         type={type}
@@ -44,13 +44,13 @@ export function BoxOption<T extends number | string>({
       <label htmlFor={option.id} data-cy={`${radioName}_${option.value}`}>
         {children}
       </label>
-      {tooltip && (
-        <Tooltip
-          position="bottom"
-          className="portainer-tooltip"
-          message={tooltip}
-        />
-      )}
     </div>
   );
+
+  if (tooltip) {
+    return (
+      <TooltipWithChildren message={tooltip}>{BoxOption}</TooltipWithChildren>
+    );
+  }
+  return BoxOption;
 }

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

app/react/portainer/settings/types.ts

@@ -160,8 +160,6 @@ export interface PublicSettingsResponse {
   RequiredPasswordLength: number;
   /** Deployment options for encouraging deployment as code (only on BE) */
   GlobalDeploymentOptions: GlobalDeploymentOptions;
-  /** Show the Kompose build option (discontinued in 2.18) */
-  ShowKomposeBuildOption: boolean;
   /** Whether edge compute features are enabled */
   EnableEdgeComputeFeatures: boolean;
   /** Supported feature flags */