fix(wizard) EE-2053 Add Docker Standalone option to agent install instructions (#7589)

app/react/components/Stepper/Stepper.module.css

@@ -4,7 +4,7 @@
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
-  margin-left: 10px;
+  margin-left: 50px;
 }
 .step-wrapper {
   position: relative;

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

@@ -12,7 +12,11 @@ interface Props {
   createEdgeDevice?: boolean;
 }
 
-const hasEdge: EnvironmentSelectorValue[] = ['docker', 'kubernetes'];
+const hasEdge: EnvironmentSelectorValue[] = [
+  'dockerStandalone',
+  'dockerSwarm',
+  'kubernetes',
+];
 
 export function EnvironmentSelector({
   value,

app/react/portainer/environments/wizard/EnvironmentTypeSelectView/environment-types.ts

@@ -4,11 +4,17 @@ import KaaSIcon from './kaas-icon.svg?c';
 
 export const environmentTypes = [
   {
-    id: 'docker',
+    id: 'dockerStandalone',
-    title: 'Docker',
+    title: 'Docker Standalone',
     icon: 'fab fa-docker',
-    description:
+    description: 'Connect to Docker Standalone via URL/IP, API or Socket',
-      'Connect to Docker Standalone / Swarm via URL/IP, API or Socket',
+    featureId: undefined,
+  },
+  {
+    id: 'dockerSwarm',
+    title: 'Docker Swarm',
+    icon: 'fab fa-docker',
+    description: 'Connect to Docker Swarm via URL/IP, API or Socket',
     featureId: undefined,
   },
   {

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

@@ -57,6 +57,8 @@ export function EnvironmentCreationView() {
     isLastStep,
   } = useStepper(steps, handleFinish);
 
+  const isDockerStandalone = currentStep.id === 'dockerStandalone';
+
   return (
     <>
       <PageHeader
@@ -75,7 +77,10 @@ export function EnvironmentCreationView() {
                 title={`Connect to your ${currentStep.title}
                     environment`}
               >
-                <Component onCreate={handleCreateEnvironment} />
+                <Component
+                  onCreate={handleCreateEnvironment}
+                  isDockerStandalone={isDockerStandalone}
+                />
 
                 <div
                   className={clsx(
@@ -178,7 +183,8 @@ function useStepper(
 
   function getComponent(id: EnvironmentSelectorValue) {
     switch (id) {
-      case 'docker':
+      case 'dockerStandalone':
+      case 'dockerSwarm':
         return WizardDocker;
       case 'aci':
         return WizardAzure;

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

@@ -6,12 +6,13 @@ import { DeploymentScripts } from './DeploymentScripts';
 
 interface Props {
   onCreate(environment: Environment): void;
+  isDockerStandalone?: boolean;
 }
 
-export function AgentTab({ onCreate }: Props) {
+export function AgentTab({ onCreate, isDockerStandalone }: Props) {
   return (
     <>
-      <DeploymentScripts />
+      <DeploymentScripts isDockerStandalone={isDockerStandalone} />
 
       <div className="mt-5">
         <AgentForm onCreate={onCreate} />

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

@@ -6,20 +6,40 @@ import { CopyButton } from '@@/buttons/CopyButton';
 import { Code } from '@@/Code';
 import { NavTabs } from '@@/NavTabs';
 
-const deployments = [
+const deploymentsStandalone = [
   {
     id: 'linux',
-    label: 'Linux',
+    label: 'Linux & Windows WSL',
-    command: linuxCommand,
+    command: linuxStandaloneCommand,
   },
   {
     id: 'win',
-    label: 'Windows',
+    label: 'Windows WCS',
-    command: winCommand,
+    command: winStandaloneCommand,
   },
 ];
 
-export function DeploymentScripts() {
+const deploymentsSwarm = [
+  {
+    id: 'linux',
+    label: 'Linux & Windows WSL',
+    command: linuxSwarmCommand,
+  },
+  {
+    id: 'win',
+    label: 'Windows WCS',
+    command: winSwarmCommand,
+  },
+];
+
+interface Props {
+  isDockerStandalone?: boolean;
+}
+
+export function DeploymentScripts({ isDockerStandalone }: Props) {
+  const deployments = isDockerStandalone
+    ? deploymentsStandalone
+    : deploymentsSwarm;
   const [deployType, setDeployType] = useState(deployments[0].id);
 
   const agentDetailsQuery = useAgentDetails();
@@ -56,9 +76,6 @@ interface DeployCodeProps {
 function DeployCode({ code }: DeployCodeProps) {
   return (
     <>
-      <span className="text-muted small">
-        CLI script for installing agent on your environment with Docker Swarm:
-      </span>
       <div className="code-script">
         <Code>{code}</Code>
       </div>
@@ -67,7 +84,21 @@ function DeployCode({ code }: DeployCodeProps) {
   );
 }
 
-function linuxCommand(agentVersion: string, agentSecret: string) {
+function linuxStandaloneCommand(agentVersion: string, agentSecret: string) {
+  const secret =
+    agentSecret === '' ? '' : `\\\n  -e AGENT_SECRET=${agentSecret} `;
+
+  return `docker run -d \\
+  -p 9001:9001 ${secret}\\
+  --name portainer_agent \\
+  --restart=always \\
+  -v /var/run/docker.sock:/var/run/docker.sock \\
+  -v /var/lib/docker/volumes:/var/lib/docker/volumes \\
+  portainer/agent:${agentVersion}
+`;
+}
+
+function linuxSwarmCommand(agentVersion: string, agentSecret: string) {
   const secret =
     agentSecret === '' ? '' : `\\\n  -e AGENT_SECRET=${agentSecret} `;
 
@@ -87,7 +118,22 @@ docker service create \\
 `;
 }
 
-function winCommand(agentVersion: string, agentSecret: string) {
+function winStandaloneCommand(agentVersion: string, agentSecret: string) {
+  const secret =
+    agentSecret === '' ? '' : `\\\n  -e AGENT_SECRET=${agentSecret} `;
+
+  return `docker run -d \\
+  -p 9001:9001 ${secret}\\
+  --name portainer_agent \\
+  --restart=always \\
+  -v C:\\:C:\\host \\
+  -v C:\\ProgramData\\docker\\volumes:C:\\ProgramData\\docker\\volumes \\
+  -v \\\\.\\pipe\\docker_engine:\\\\.\\pipe\\docker_engine \\
+  portainer/agent:${agentVersion}
+`;
+}
+
+function winSwarmCommand(agentVersion: string, agentSecret: string) {
   const secret =
     agentSecret === '' ? '' : `\\\n  -e AGENT_SECRET=${agentSecret} `;
 

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

@@ -15,6 +15,7 @@ import { SocketTab } from './SocketTab';
 
 interface Props {
   onCreate(environment: Environment, analytics: AnalyticsStateKey): void;
+  isDockerStandalone?: boolean;
 }
 
 const defaultOptions: BoxSelectorOption<
@@ -51,7 +52,7 @@ const defaultOptions: BoxSelectorOption<
   },
 ];
 
-export function WizardDocker({ onCreate }: Props) {
+export function WizardDocker({ onCreate, isDockerStandalone }: Props) {
   const options = useFilterEdgeOptionsIfNeeded(defaultOptions, 'edgeAgent');
 
   const [creationType, setCreationType] = useState(options[0].value);
@@ -77,6 +78,7 @@ export function WizardDocker({ onCreate }: Props) {
         return (
           <AgentTab
             onCreate={(environment) => onCreate(environment, 'dockerAgent')}
+            isDockerStandalone={isDockerStandalone}
           />
         );
       case 'api':