feat(edge): create edge device with wizard [EE-3096] (#7029)

app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EndpointTypeView.tsx

@@ -8,6 +8,8 @@ import { Button } from '@@/buttons';
 import { PageHeader } from '@@/PageHeader';
 import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
 
+import { useCreateEdgeDeviceParam } from '../hooks/useCreateEdgeDeviceParam';
+
 import {
   EnvironmentSelector,
   EnvironmentSelectorValue,
@@ -15,6 +17,8 @@ import {
 import { environmentTypes } from './environment-types';
 
 export function EnvironmentTypeSelectView() {
+  const createEdgeDevice = useCreateEdgeDeviceParam();
+
   const [types, setTypes] = useState<EnvironmentSelectorValue[]>([]);
   const { trackEvent } = useAnalytics();
   const router = useRouter();
@@ -31,7 +35,11 @@ export function EnvironmentTypeSelectView() {
           <Widget>
             <WidgetTitle icon="fa-magic" title="Environment Wizard" />
             <WidgetBody>
-              <EnvironmentSelector value={types} onChange={setTypes} />
+              <EnvironmentSelector
+                value={types}
+                onChange={setTypes}
+                createEdgeDevice={createEdgeDevice}
+              />
               <Button
                 disabled={types.length === 0}
                 onClick={() => startWizard()}
@@ -63,6 +71,7 @@ export function EnvironmentTypeSelectView() {
 
     router.stateService.go('portainer.wizard.endpoints.create', {
       envType: types,
+      ...(createEdgeDevice ? { edgeDevice: createEdgeDevice } : {}),
     });
   }
 }

app/react/portainer/environments/wizard/EnvironmentTypeSelectView/EnvironmentSelector.tsx

@@ -9,9 +9,16 @@ export type EnvironmentSelectorValue = typeof environmentTypes[number]['id'];
 interface Props {
   value: EnvironmentSelectorValue[];
   onChange(value: EnvironmentSelectorValue[]): void;
+  createEdgeDevice?: boolean;
 }
 
-export function EnvironmentSelector({ value, onChange }: Props) {
+const hasEdge: EnvironmentSelectorValue[] = ['docker', 'kubernetes'];
+
+export function EnvironmentSelector({
+  value,
+  onChange,
+  createEdgeDevice,
+}: Props) {
   return (
     <div className="row">
       <FormSection title="Select your environment(s)">
@@ -20,17 +27,19 @@ export function EnvironmentSelector({ value, onChange }: Props) {
           apply.
         </p>
         <div className="flex gap-4 flex-wrap">
-          {environmentTypes.map((eType) => (
-            <Option
-              key={eType.id}
-              featureId={eType.featureId}
-              title={eType.title}
-              description={eType.description}
-              icon={eType.icon}
-              active={value.includes(eType.id)}
-              onClick={() => handleClick(eType.id)}
-            />
-          ))}
+          {filterEdgeDevicesIfNeed(environmentTypes, createEdgeDevice).map(
+            (eType) => (
+              <Option
+                key={eType.id}
+                featureId={eType.featureId}
+                title={eType.title}
+                description={eType.description}
+                icon={eType.icon}
+                active={value.includes(eType.id)}
+                onClick={() => handleClick(eType.id)}
+              />
+            )
+          )}
         </div>
       </FormSection>
     </div>
@@ -45,3 +54,14 @@ export function EnvironmentSelector({ value, onChange }: Props) {
     onChange([...value, eType]);
   }
 }
+
+function filterEdgeDevicesIfNeed(
+  types: typeof environmentTypes,
+  createEdgeDevice?: boolean
+) {
+  if (!createEdgeDevice) {
+    return types;
+  }
+
+  return types.filter((eType) => hasEdge.includes(eType.id));
+}

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx

@@ -7,6 +7,7 @@ import { BoxSelector, type BoxSelectorOption } from '@@/BoxSelector';
 
 import { AnalyticsStateKey } from '../types';
 import { EdgeAgentTab } from '../shared/EdgeAgentTab';
+import { useFilterEdgeOptionsIfNeeded } from '../useOnlyEdgeOptions';
 
 import { AgentTab } from './AgentTab';
 import { APITab } from './APITab';
@@ -16,7 +17,9 @@ interface Props {
   onCreate(environment: Environment, analytics: AnalyticsStateKey): void;
 }
 
-const options: BoxSelectorOption<'agent' | 'api' | 'socket' | 'edgeAgent'>[] = [
+const defaultOptions: BoxSelectorOption<
+  'agent' | 'api' | 'socket' | 'edgeAgent'
+>[] = [
   {
     id: 'agent',
     icon: 'fa fa-bolt',
@@ -49,6 +52,8 @@ const options: BoxSelectorOption<'agent' | 'api' | 'socket' | 'edgeAgent'>[] = [
 ];
 
 export function WizardDocker({ onCreate }: Props) {
+  const options = useFilterEdgeOptionsIfNeeded(defaultOptions, 'edgeAgent');
+
   const [creationType, setCreationType] = useState(options[0].value);
 
   const tab = getTab(creationType);

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardKubernetes/WizardKubernetes.tsx

@@ -13,6 +13,7 @@ import { BEFeatureIndicator } from '@@/BEFeatureIndicator';
 
 import { AnalyticsStateKey } from '../types';
 import { EdgeAgentTab } from '../shared/EdgeAgentTab';
+import { useFilterEdgeOptionsIfNeeded } from '../useOnlyEdgeOptions';
 
 import { AgentPanel } from './AgentPanel';
 import { KubeConfigTeaserForm } from './KubeConfigTeaserForm';
@@ -21,11 +22,7 @@ interface Props {
   onCreate(environment: Environment, analytics: AnalyticsStateKey): void;
 }
 
-const options: BoxSelectorOption<
-  | EnvironmentCreationTypes.AgentEnvironment
-  | EnvironmentCreationTypes.EdgeAgentEnvironment
-  | EnvironmentCreationTypes.KubeConfigEnvironment
->[] = [
+const defaultOptions: BoxSelectorOption<EnvironmentCreationTypes>[] = [
   {
     id: 'agent_endpoint',
     icon: 'fa fa-bolt',
@@ -52,6 +49,11 @@ const options: BoxSelectorOption<
 ];
 
 export function WizardKubernetes({ onCreate }: Props) {
+  const options = useFilterEdgeOptionsIfNeeded(
+    defaultOptions,
+    EnvironmentCreationTypes.EdgeAgentEnvironment
+  );
+
   const [creationType, setCreationType] = useState(options[0].value);
 
   const tab = getTab(creationType);

app/react/portainer/environments/wizard/EnvironmentsCreationView/useOnlyEdgeOptions.ts

@@ -0,0 +1,18 @@
+import { EnvironmentCreationTypes } from '@/portainer/environments/types';
+
+import { BoxSelectorOption } from '@@/BoxSelector';
+
+import { useCreateEdgeDeviceParam } from '../hooks/useCreateEdgeDeviceParam';
+
+export function useFilterEdgeOptionsIfNeeded<T = EnvironmentCreationTypes>(
+  options: BoxSelectorOption<T>[],
+  edgeValue: T
+) {
+  const createEdgeDevice = useCreateEdgeDeviceParam();
+
+  if (!createEdgeDevice) {
+    return options;
+  }
+
+  return options.filter((option) => option.value === edgeValue);
+}

app/react/portainer/environments/wizard/hooks/useCreateEdgeDeviceParam.ts

@@ -0,0 +1,11 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+export function useCreateEdgeDeviceParam() {
+  const {
+    params: { edgeDevice: edgeDeviceParam },
+  } = useCurrentStateAndParams();
+
+  const createEdgeDevice = edgeDeviceParam ? edgeDeviceParam === 'true' : false;
+
+  return createEdgeDevice;
+}