Refactor NewDeviceModal to streamline control node logic

Removed unused state and props related to control node connection. Introduced `ProFormText` to capture control node URL directly in the form. Simplified related components and updated logic to improve code clarity and maintainability.
SquirrelCorporation · Feb 4, 2025 · 47da4a5 · 47da4a5
1 parent 6082663
commit 47da4a5
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 71 deletions.
diff --git a/client/src/components/NewDeviceModal/NewDeviceModal.tsx b/client/src/components/NewDeviceModal/NewDeviceModal.tsx
@@ -5,6 +5,7 @@ import { Button, Col, Modal, Row, Alert, Typography, Tag, Grid } from 'antd';
 import {
   ProFormDependency,
   ProFormInstance,
+  ProFormText,
   StepsForm,
 } from '@ant-design/pro-components';
 import { motion } from 'framer-motion';
@@ -42,8 +43,6 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
   const [dockerConnectionStatus, setDockerConnectionStatus] = useState();
   const [dockerConnectionErrorMessage, setDockerConnectionErrorMessage] =
     useState();
-  const [controlNodeConnectionString, setControlNodeConnectionString] =
-    useState({});
   const screens = useBreakpoint();
 
   const handleCancel = () => {
@@ -84,7 +83,6 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
     if (step === 0) {
       const formValues = form?.getFieldsValue(true);
       setSshConnection(formValues);
-      setControlNodeConnectionString(form?.getFieldsValue());
       setDockerConnectionStatus(undefined);
       setDockerConnectionErrorMessage(undefined);
       setExecId(undefined);
@@ -175,7 +173,6 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
                     onClick={() => {
                       if (step === 1) setSshConnection({});
                       if (step === 2) {
-                        setControlNodeConnectionString({});
                         setDockerConnectionStatus(undefined);
                         setDockerConnectionErrorMessage(undefined);
                         setExecId(undefined);
@@ -255,39 +252,56 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
                     case SsmAgent.InstallMethods.NODE:
                     case SsmAgent.InstallMethods.NODE_ENHANCED_PLAYBOOK:
                       return (
-                        <Alert
-                          style={{
-                            marginBottom: 10,
-                          }}
-                          type={'info'}
-                          showIcon
-                          message={
-                            <>
-                              <Typography.Text>
-                                SSM will install, if needed:{' '}
-                                <Tag>Node (NVM)</Tag>
-                                <Tag>NPM</Tag>
-                                <Tag>PM2</Tag>
-                              </Typography.Text>
-                            </>
-                          }
-                        />
+                        <>
+                          <ProFormText
+                            name={'controlNodeURL'}
+                            label={'Control Node URL'}
+                            tooltip={'The URL of the this server.'}
+                            initialValue={`http://${document.location.hostname}:8000`}
+                          />
+                          <Alert
+                            style={{
+                              marginBottom: 10,
+                            }}
+                            type={'info'}
+                            showIcon
+                            message={
+                              <>
+                                <Typography.Text>
+                                  SSM will install, if needed:{' '}
+                                  <Tag>Node (NVM)</Tag>
+                                  <Tag>NPM</Tag>
+                                  <Tag>PM2</Tag>
+                                </Typography.Text>
+                              </>
+                            }
+                          />
+                        </>
                       );
                     case SsmAgent.InstallMethods.DOCKER:
                       return (
-                        <Alert
-                          style={{
-                            marginBottom: 10,
-                          }}
-                          type={'info'}
-                          showIcon
-                          message={
-                            <Typography.Text>
-                              SSM will install, if needed: <Tag>Docker</Tag>
-                              <Tag>Docker Compose</Tag>
-                            </Typography.Text>
-                          }
-                        />
+                        <>
+                          {' '}
+                          <ProFormText
+                            name={'controlNodeURL'}
+                            label={'Control Node URL'}
+                            tooltip={'The URL of the this server.'}
+                            initialValue={`http://${document.location.hostname}:8000`}
+                          />
+                          <Alert
+                            style={{
+                              marginBottom: 10,
+                            }}
+                            type={'info'}
+                            showIcon
+                            message={
+                              <Typography.Text>
+                                SSM will install, if needed: <Tag>Docker</Tag>
+                                <Tag>Docker Compose</Tag>
+                              </Typography.Text>
+                            }
+                          />
+                        </>
                       );
                     default:
                       return null;
@@ -300,10 +314,7 @@ const NewDeviceModal: React.FC<NewDeviceModalProps> = (props) => {
               title="Confirm"
               style={{ maxWidth: screens.xs ? '80%' : '100%' }}
             >
-              <SummaryCard
-                sshConnection={sshConnection}
-                controlNodeConnectionString={controlNodeConnectionString}
-              />
+              <SummaryCard sshConnection={sshConnection} />
             </StepsForm.StepForm>
           </StepsForm>
         </Col>

diff --git a/client/src/components/NewDeviceModal/SummaryCard.tsx b/client/src/components/NewDeviceModal/SummaryCard.tsx
@@ -5,13 +5,9 @@ import { Flex } from 'antd';
 
 interface SummaryCardProps {
   sshConnection: { [key: string]: any };
-  controlNodeConnectionString: { [key: string]: any };
 }
 
-const SummaryCard: React.FC<SummaryCardProps> = ({
-  sshConnection,
-  controlNodeConnectionString,
-}) => (
+const SummaryCard: React.FC<SummaryCardProps> = ({ sshConnection }) => (
   <Card
     type="inner"
     title={
@@ -53,18 +49,6 @@ const SummaryCard: React.FC<SummaryCardProps> = ({
           </Col>
         </Row>
       ))}
-      {Object.keys(controlNodeConnectionString).map((e) => (
-        <Row key={e} style={{ marginTop: 10 }}>
-          <Col
-            style={{ marginTop: 'auto', marginBottom: 'auto', width: '150px' }}
-          >
-            <Typography>{e} :</Typography>
-          </Col>
-          <Col flex="auto">
-            <Input value={controlNodeConnectionString[e]} disabled />
-          </Col>
-        </Row>
-      ))}
     </Flex>
   </Card>
 );

diff --git a/client/src/components/NewDeviceModal/SwitchConnexionMethod.tsx b/client/src/components/NewDeviceModal/SwitchConnexionMethod.tsx
@@ -1,4 +1,3 @@
-import { SwapOutlined, SwitcherOutlined } from '@ant-design/icons';
 import { Alert, Button, Space, Typography } from 'antd';
 import React from 'react';
 

diff --git a/client/src/components/NoDevice/NoDeviceModal.tsx b/client/src/components/NoDevice/NoDeviceModal.tsx
@@ -33,12 +33,14 @@ const NoDeviceModal = () => {
     target: API.DeviceItem,
     installMethod: SsmAgent.InstallMethods,
   ) => {
-    setTerminal({
-      target: [target],
-      isOpen: true,
-      quickRef: 'installAgent',
-      extraVars: [{ extraVar: '_ssm_installMethod', value: installMethod }],
-    });
+    if (installMethod !== SsmAgent.InstallMethods.LESS) {
+      setTerminal({
+        target: [target],
+        isOpen: true,
+        quickRef: 'installAgent',
+        extraVars: [{ extraVar: '_ssm_installMethod', value: installMethod }],
+      });
+    }
   };
 
   const handleOk = () => {

diff --git a/server/src/ansible/00000000-0000-0000-0000-000000000000/agent/_checkDeviceBeforeAdd.json b/server/src/ansible/00000000-0000-0000-0000-000000000000/agent/_checkDeviceBeforeAdd.json
@@ -1,12 +1,4 @@
 {
   "playableInBatch": false,
-  "uniqueQuickRef": "checkDeviceBeforeAdd",
-  "extraVars": [
-    {
-      "extraVar": "_ssm_masterNodeUrl",
-      "required": true,
-      "type": "SHARED",
-      "deletable": false
-    }
-  ]
+  "uniqueQuickRef": "checkDeviceBeforeAdd"
 }