Merge pull request #35 from Kumassy/feature/change_local_command_opti…

…onal Change local command optional
Kumassy · Aug 11, 2023 · cdb80bd · cdb80bd
2 parents cabb6d2 + 8e81e51
commit cdb80bd
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 77 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -105,6 +105,7 @@
  "custom": {
  "settings": {
  "label": "Settings",
+ "useLocalFeature": "Enter the command to start the game server",
  "command": "Server Startup Command",
  "port": "Port",
  "protocol": {

diff --git a/public/locales/ja/translation.json b/public/locales/ja/translation.json
@@ -105,6 +105,7 @@
  "custom": {
  "settings": {
  "label": "設定",
+ "useLocalFeature": "ゲームサーバーを起動するコマンドを入力する",
  "command": "サーバー起動コマンド",
  "port": "ポート",
  "protocol": {

diff --git a/src/forms/FormCustom.tsx b/src/forms/FormCustom.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { killChild, updateCommand, updateLocalPort, runChecksAndLaunchLocal, updateProtocol } from '../features/localSlice';
 import { useAppSelector, useAppDispatch } from '../app/hooks';
 
@@ -13,7 +13,7 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import AutoScroll from '@brianmcallister/react-auto-scroll';
-import { InputLabel, MenuItem, Select, SelectChangeEvent, Tooltip } from '@mui/material';
+import { Checkbox, Collapse, FormControlLabel, InputLabel, MenuItem, Select, SelectChangeEvent, Tooltip } from '@mui/material';
 import { Protocol } from '../common';
 import { useTranslation } from 'react-i18next';
 import { FormProps } from '../types';
@@ -29,8 +29,10 @@ export const FormCustom: React.FC<FormProps> = ({ handleBack, handleNext }) => {
  const { t } = useTranslation();
  const dispatch = useAppDispatch()
 
+ const [useLocalFeature, setUseLocalFeature] = useState(false);
+
  const isBackDisabled = localStatus === 'running'
- const isNextDisabled = localStatus !== 'running'
+ const isNextDisabled = (useLocalFeature && localStatus !== 'running')
  return (
  <React.Fragment>
  <Box
@@ -43,14 +45,6 @@ export const FormCustom: React.FC<FormProps> = ({ handleBack, handleNext }) => {
  {t('panel.startServer.steps.launchLocalServer.custom.settings.label')}
  </Typography>
 
- <TextField
- fullWidth
- id="local-server-command"
- label={t('panel.startServer.steps.launchLocalServer.custom.settings.command')}
- variant="outlined"
- onChange={e => dispatch(updateCommand(e.target.value))}
- value={command ? command : ''}
- />
  <TextField
  fullWidth
  id="local-port"
@@ -61,79 +55,104 @@ export const FormCustom: React.FC<FormProps> = ({ handleBack, handleNext }) => {
  value={localPort}
  />
 
- <InputLabel id="select-protocol-label">{t('panel.startServer.steps.launchLocalServer.custom.settings.protocol.label')}</InputLabel>
- <Select
- labelId="select-protocol-label"
- id="select-protocol"
- value={protocol}
- label={t('panel.startServer.steps.launchLocalServer.custom.settings.protocol.label')}
- onChange={(e: SelectChangeEvent<Protocol>) => dispatch(updateProtocol(e.target.value as Protocol))}
- >
- <MenuItem value={'tcp'}>{t('panel.startServer.steps.launchLocalServer.custom.settings.protocol.tcp')}</MenuItem>
- <MenuItem value={'udp'}>{t('panel.startServer.steps.launchLocalServer.custom.settings.protocol.udp')}</MenuItem>
- </Select>
+ <Box>
+ <InputLabel id="select-protocol-label">{t('panel.startServer.steps.launchLocalServer.custom.settings.protocol.label')}</InputLabel>
+ <Select
+ labelId="select-protocol-label"
+ id="select-protocol"
+ value={protocol}
+ label={t('panel.startServer.steps.launchLocalServer.custom.settings.protocol.label')}
+ onChange={(e: SelectChangeEvent<Protocol>) => dispatch(updateProtocol(e.target.value as Protocol))}
+ >
+ <MenuItem value={'tcp'}>{t('panel.startServer.steps.launchLocalServer.custom.settings.protocol.tcp')}</MenuItem>
+ <MenuItem value={'udp'}>{t('panel.startServer.steps.launchLocalServer.custom.settings.protocol.udp')}</MenuItem>
+ </Select>
+ </Box>
 
- <Grid container spacing={2} sx={{ mb: 2 }}>
- <Grid item xs={12}>
- <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
- {t('panel.startServer.steps.launchLocalServer.custom.tasks.label')}
- </Typography>
+ <FormControlLabel
+ control={
+ <Checkbox
+ checked={useLocalFeature}
+ onChange={() => setUseLocalFeature(!useLocalFeature)}
+ name="useLocalFeature"
+ />
+ }
+ label={t('panel.startServer.steps.launchLocalServer.custom.settings.useLocalFeature')}
+ />
 
- {checks.map(check => {
- return (
- <Accordion key={check.id}>
- <AccordionSummary
- expandIcon={<ExpandMoreIcon />}
- >
- <Typography>{t(`panel.startServer.checks.${check.label}`)} <ResultChip status={check.status} /></Typography>
- </AccordionSummary>
- <AccordionDetails>
- <Typography>
- {check.message}
- </Typography>
- </AccordionDetails>
- </Accordion>
- )
- })}
+ <Collapse in={useLocalFeature}>
+ <TextField
+ fullWidth
+ id="local-server-command"
+ label={t('panel.startServer.steps.launchLocalServer.custom.settings.command')}
+ variant="outlined"
+ onChange={e => dispatch(updateCommand(e.target.value))}
+ value={command ? command : ''}
+ />
+
+ <Grid container spacing={2} sx={{ mb: 2 }}>
+ <Grid item xs={12}>
+ <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
+ {t('panel.startServer.steps.launchLocalServer.custom.tasks.label')}
+ </Typography>
+
+ {checks.map(check => {
+ return (
+ <Accordion key={check.id}>
+ <AccordionSummary
+ expandIcon={<ExpandMoreIcon />}
+ >
+ <Typography>{t(`panel.startServer.checks.${check.label}`)} <ResultChip status={check.status} /></Typography>
+ </AccordionSummary>
+ <AccordionDetails>
+ <Typography>
+ {check.message}
+ </Typography>
+ </AccordionDetails>
+ </Accordion>
+ )
+ })}
 
- <Accordion>
- <AccordionSummary
- expandIcon={<ExpandMoreIcon />}
- >
- <Typography>{t('panel.startServer.steps.launchLocalServer.custom.tasks.start')} <ResultChip status={localStatus} /></Typography>
- </AccordionSummary>
- <AccordionDetails>
- <AutoScroll
- showOption={false}
- height={100}
+ <Accordion>
+ <AccordionSummary
+ expandIcon={<ExpandMoreIcon />}
  >
- {localMessages.map(msg => {
- return (
- <div key={msg.key}>
- {msg.message}
- </div>
- );
- })}
- </AutoScroll>
- </AccordionDetails>
- </Accordion>
+ <Typography>{t('panel.startServer.steps.launchLocalServer.custom.tasks.start')} <ResultChip status={localStatus} /></Typography>
+ </AccordionSummary>
+ <AccordionDetails>
+ <AutoScroll
+ showOption={false}
+ height={100}
+ >
+ {localMessages.map(msg => {
+ return (
+ <div key={msg.key}>
+ {msg.message}
+ </div>
+ );
+ })}
+ </AutoScroll>
+ </AccordionDetails>
+ </Accordion>
+ </Grid>
  </Grid>
- </Grid>
 
- <Grid
- container
- direction="column"
- justifyContent="center"
- alignItems="center"
- >
- <Grid item xs={12}>
- <OperationButton
- status={localStatus}
- launch={runChecksAndLaunchLocal}
- interrupt={killChild}
- />
+ <Grid
+ container
+ direction="column"
+ justifyContent="center"
+ alignItems="center"
+ >
+ <Grid item xs={12}>
+ <OperationButton
+ status={localStatus}
+ launch={runChecksAndLaunchLocal}
+ interrupt={killChild}
+ />
+ </Grid>
  </Grid>
- </Grid>
+ </Collapse>
+
  </Box>
  <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
  <Tooltip title={isBackDisabled ? t('panel.startServer.steps.launchLocalServer.custom.control.backDesc'): ""}>

diff --git a/test/specs/run_custom_nc.js b/test/specs/run_custom_nc.js
@@ -23,6 +23,10 @@ describe('Run iperf3', () => {
  ////
  // Fill out Custom form
  {
+
+ const useLocalFeature = await $('span*=Enter the command')
+ await useLocalFeature.click()
+
  const start = await $('button*=Start')
  await start.waitUntil(async () => await start.isEnabled(), {
  timeout: 5000,