feat(wizard): add edge form [EE-3000] (#6979)

app/portainer/components/BoxSelector/BoxSelector.css

@@ -1,5 +1,4 @@
 .boxselector_wrapper {
   display: flex;
   flex-flow: row wrap;
-  margin: 5px;
 }

app/portainer/components/BoxSelector/index.ts

@@ -5,6 +5,8 @@ import { react2angular } from '@/react-tools/react2angular';
 import { BoxSelector, buildOption } from './BoxSelector';
 import { BoxSelectorAngular } from './BoxSelectorAngular';
 
+export { type BoxSelectorOption } from './types';
+
 export { BoxSelector, buildOption };
 const BoxSelectorReact = react2angular(BoxSelector, [
   'value',

app/portainer/environments/types.ts

@@ -60,6 +60,7 @@ export type Environment = {
   TagIds: TagId[];
   GroupId: EnvironmentGroupId;
   EdgeID?: string;
+  EdgeKey: string;
   EdgeCheckinInterval?: number;
   QueryDate?: number;
   LastCheckInDate?: number;
@@ -73,7 +74,6 @@ export type Environment = {
   UserTrusted: boolean;
   AMTDeviceGUID?: string;
 };
-
 /**
  * TS reference of endpoint_create.go#EndpointCreationType iota
  */

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.stories.tsx

@@ -70,5 +70,6 @@ function mockEnvironment(type: EnvironmentType): Environment {
     },
     URL: 'url',
     UserTrusted: false,
+    EdgeKey: '',
   };
 }

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.test.tsx

@@ -23,6 +23,7 @@ test('loads component', async () => {
     Kubernetes: { Snapshots: [] },
     Id: 3,
     UserTrusted: false,
+    EdgeKey: '',
   };
   const { getByText } = renderComponent(env);
 
@@ -44,6 +45,7 @@ test('shows group name', async () => {
     Kubernetes: { Snapshots: [] },
     Id: 3,
     UserTrusted: false,
+    EdgeKey: '',
   };
 
   const { findByText } = renderComponent(env, { Name: groupName });

app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx

@@ -2,12 +2,23 @@ import { useMutation } from 'react-query';
 import { useEffect } from 'react';
 
 import { Widget, WidgetBody, WidgetTitle } from '@/portainer/components/widget';
-import { EdgeScriptForm } from '@/edge/components/EdgeScriptForm';
 import { generateKey } from '@/portainer/environments/environment.service/edge';
 import { useSettings } from '@/portainer/settings/queries';
+import { EdgeScriptForm } from '@/react/edge/components/EdgeScriptForm';
+import { commandsTabs } from '@/react/edge/components/EdgeScriptForm/scripts';
 
 import { AutoEnvCreationSettingsForm } from './AutoEnvCreationSettingsForm';
 
+const commands = {
+  linux: [
+    commandsTabs.k8sLinux,
+    commandsTabs.swarmLinux,
+    commandsTabs.standaloneLinux,
+    commandsTabs.nomadLinux,
+  ],
+  win: [commandsTabs.swarmWindows, commandsTabs.standaloneWindow],
+};
+
 export function AutomaticEdgeEnvCreation() {
   const edgeKeyMutation = useGenerateKeyMutation();
   const { mutate: generateKey } = edgeKeyMutation;
@@ -39,7 +50,13 @@ export function AutomaticEdgeEnvCreation() {
         {edgeKeyMutation.isLoading ? (
           <div>Generating key for {url} ... </div>
         ) : (
-          edgeKey && <EdgeScriptForm edgeKey={edgeKey} />
+          edgeKey && (
+            <EdgeScriptForm
+              edgeInfo={{ key: edgeKey }}
+              commands={commands}
+              isNomadTokenVisible
+            />
+          )
         )}
       </WidgetBody>
     </Widget>

app/portainer/views/endpoints/edit/endpoint.html

@@ -54,7 +54,12 @@
             </p>
           </span>
 
-          <edge-script-form edge-key="endpoint.EdgeKey" edge-id="endpoint.EdgeID"></edge-script-form>
+          <div class="col-sm-12 form-section-title"> Edge agent deployment script </div>
+          <edge-script-form
+            edge-info="{ key: endpoint.EdgeKey, id: endpoint.EdgeID }"
+            commands="state.edgeScriptCommands"
+            is-nomad-token-visible="state.showNomad"
+          ></edge-script-form>
 
           <span class="small text-muted">
             <div class="col-sm-12 form-section-title" style="margin-top: 25px"> Join token </div>

app/portainer/views/endpoints/edit/endpointController.js

@@ -8,6 +8,8 @@ import { getAMTInfo } from 'Portainer/hostmanagement/open-amt/open-amt.service';
 import { confirmAsync } from '@/portainer/services/modal.service/confirm';
 import { isEdgeEnvironment } from '@/portainer/environments/utils';
 
+import { commandsTabs } from '@/react/edge/components/EdgeScriptForm/scripts';
+
 angular.module('portainer.app').controller('EndpointController', EndpointController);
 
 /* @ngInject */
@@ -29,6 +31,7 @@ function EndpointController(
   $scope.onChangeCheckInInterval = onChangeCheckInInterval;
   $scope.setFieldValue = setFieldValue;
   $scope.onChangeTags = onChangeTags;
+  const isBE = process.env.PORTAINER_EDITION === 'BE';
 
   $scope.state = {
     uploadInProgress: false,
@@ -41,6 +44,11 @@ function EndpointController(
     allowCreate: Authentication.isAdmin(),
     allowSelfSignedCerts: true,
     showAMTInfo: false,
+    showNomad: isBE,
+    edgeScriptCommands: {
+      linux: _.compact([commandsTabs.k8sLinux, commandsTabs.swarmLinux, commandsTabs.standaloneLinux, isBE && commandsTabs.nomadLinux]),
+      win: [commandsTabs.swarmWindows, commandsTabs.standaloneWindow],
+    },
   };
 
   $scope.formValues = {