Skip to content

Commit

Permalink
enable remote run section collapse, improve css and make template pre…
Browse files Browse the repository at this point in the history 
…view readOnly
  • Loading branch information
@MFA-X-AI
MFA-X-AI committed Sep 4, 2024
1 parent fb22c59 commit 03cdc5e
Show file tree
Hide file tree
Showing 2 changed files with 180 additions and 102 deletions.
266 changes: 171 additions & 95 deletions src/dialog/RemoteRunDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ export const RemoteRunDialog: React.FC<RemoteRunDialogProps> = ({
const [command, setCommand] = useState("");
const [placeholders, setPlaceholders] = useState<string[]>([]);
const [formattedCommand, setFormattedCommand] = useState("");
const [sectionsCollapsed, setSectionsCollapsed] = useState({
runType: false,
runConfig: false,
commandTemplate: false,
arguments: false,
placeholders: false,
finalCommand: false
});

useEffect(() => {
if (remoteRunTypes.length > 0) {
Expand Down Expand Up @@ -129,115 +137,183 @@ export const RemoteRunDialog: React.FC<RemoteRunDialogProps> = ({
setInputValues(newInputValues);
};

const toggleSection = (section: string) => {
setSectionsCollapsed(prev => ({
...prev,
[section]: !prev[section]
}));
};


const renderCollapsibleSection = (title: string, content: React.ReactNode, section: string) => (
<div style={styles.collapsibleSection}>
<h3
onClick={() => toggleSection(section)}
style={styles.sectionHeader}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = styles.sectionHeaderHover.backgroundColor;
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = styles.sectionHeader.backgroundColor;
}}
>
{title} {sectionsCollapsed[section] ? '▼' : '▲'}
</h3>
{!sectionsCollapsed[section] && <div style={styles.sectionContent}>{content}</div>}
</div>
);


const hasArguments = childStringNodes.length > 0 || childBoolNodes.length > 0 ||
childIntNodes.length > 0 || childFloatNodes.length > 0;

return (
<form>
<h2>Remote Run</h2>
<div>
<h3>Available Run Type:</h3>
<HTMLSelect
onChange={(e) => handleTypeChange(e)}
value={remoteRunType}
aria-label={'Available Run Types'}
title={'Select the run type'}
name='remoteRunType'
>
{remoteRunTypes.map((type, i) => (
<option id={type.id} key={`index-type-${i}`} value={type.run_type}>
{type.run_type}
</option>
))}
</HTMLSelect>
</div>
<div>
<h3>Available Run Config:</h3>
<HTMLSelect
onChange={(e) => handleConfigChange(e)}
value={remoteRunConfig}
aria-label={'Run Configuration'}
title={'Select which config to run'}
name='remoteRunConfig'
>
<option value="-">-</option>
{remoteRunConfigs.map((c, i) => (
c.run_type === remoteRunType && (
<option id={c.id} key={`index-config-${i}`} value={c.run_config_name}>
{c.run_config_name}

{renderCollapsibleSection("Available Run Type", (
<div style={styles.select}>
<HTMLSelect
onChange={(e) => handleTypeChange(e)}
value={remoteRunType}
aria-label={'Available Run Types'}
title={'Select the run type'}
name='remoteRunType'
>
{remoteRunTypes.map((type, i) => (
<option id={type.id} key={`index-type-${i}`} value={type.run_type}>
{type.run_type}
</option>
)
))}
</HTMLSelect>
</div>
<div>
<h3>Command Template:</h3>
))}
</HTMLSelect>
</div>
), "runType")}

{renderCollapsibleSection("Available Run Config", (
<div style={styles.select}>
<HTMLSelect
onChange={(e) => handleConfigChange(e)}
value={remoteRunConfig}
aria-label={'Run Configuration'}
title={'Select which config to run'}
name='remoteRunConfig'
>
<option value="-">-</option>
{remoteRunConfigs.map((c, i) => (
c.run_type === remoteRunType && (
<option id={c.id} key={`index-config-${i}`} value={c.run_config_name}>
{c.run_config_name}
</option>
)
))}
</HTMLSelect>
</div>
), "runConfig")}

{renderCollapsibleSection("Command Template", (
<TextAreaInput
name="commandTemplate"
title=""
oldValue={command}
onChange={() => {}}
readOnly={true}
/>
</div>

{hasArguments && <h3>Arguments:</h3>}
{childStringNodes.map((name, index) => (
<StringInput
key={`string-${index}`}
name={name}
title={name}
oldValue={inputValues[name] || ""}
onChange={(value) => handleInputChange(name, value)}
/>
))}
{childBoolNodes.map((name, index) => (
<BooleanInput
key={`bool-${index}`}
name={name}
title={name}
oldValue={checkedState[name] ? "true" : "false"}
onChange={(value) => handleChecked(name, value)}
/>
))}
{childIntNodes.map((name, index) => (
<NumberInput
key={`int-${index}`}
name={name}
title={name}
oldValue={inputValues[name] || "0"}
type="int"
onChange={(value) => handleInputChange(name, value)}
/>
))}
{childFloatNodes.map((name, index) => (
<NumberInput
key={`float-${index}`}
name={name}
title={name}
oldValue={inputValues[name] || "0.00"}
type="float"
onChange={(value) => handleInputChange(name, value)}
/>
))}

{placeholders.length > 0 && <h3>Placeholders:</h3>}
{placeholders.map((name, index) => (
<StringInput
key={`placeholder-${index}`}
name={name}
title={name}
oldValue={inputValues[name] || ""}
onChange={(value) => handleInputChange(name, value)}
), "commandTemplate")}

{hasArguments && renderCollapsibleSection("Arguments", (
<>
{childStringNodes.map((name, index) => (
<StringInput
key={`string-${index}`}
name={name}
title={name}
oldValue={inputValues[name] || ""}
onChange={(value) => handleInputChange(name, value)}
/>
))}
{childBoolNodes.map((name, index) => (
<BooleanInput
key={`bool-${index}`}
name={name}
title={name}
oldValue={checkedState[name] ? "true" : "false"}
onChange={(value) => handleChecked(name, value)}
/>
))}
{childIntNodes.map((name, index) => (
<NumberInput
key={`int-${index}`}
name={name}
title={name}
oldValue={inputValues[name] || "0"}
type="int"
onChange={(value) => handleInputChange(name, value)}
/>
))}
{childFloatNodes.map((name, index) => (
<NumberInput
key={`float-${index}`}
name={name}
title={name}
oldValue={inputValues[name] || "0.00"}
type="float"
onChange={(value) => handleInputChange(name, value)}
/>
))}
</>
), "arguments")}

{placeholders.length > 0 && renderCollapsibleSection("Placeholders", (
<>
{placeholders.map((name, index) => (
<StringInput
key={`placeholder-${index}`}
name={name}
title={name}
oldValue={inputValues[name] || ""}
onChange={(value) => handleInputChange(name, value)}
/>
))}
</>
), "placeholders")}

{renderCollapsibleSection("Final Command", (
<TextAreaInput
name="formattedCommand"
title=""
oldValue={formattedCommand}
onChange={() => {}}
/>
))}

<h3>Final Command:</h3>
<TextAreaInput
name="formattedCommand"
title=""
oldValue={formattedCommand}
onChange={() => {}}
/>
), "finalCommand")}
</form>
);
};


const styles = {

select: {
width: '100%',
height: 'auto',
},

collapsibleSection: {
marginBottom: '10px',
},
sectionHeader: {
backgroundColor: '#f0f0f0',
padding: '10px',
marginBottom: '0',
borderBottom: '1px solid #ddd',
cursor: 'pointer',
userSelect: 'none' as const,
},
sectionHeaderHover: {
backgroundColor: '#e0e0e0',
},
sectionContent: {
padding: '10px',
border: '1px solid #ddd',
borderTop: 'none',
},
};
16 changes: 9 additions & 7 deletions src/dialog/RunDialogComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ interface StringInputProps {
export const StringInput: React.FC<StringInputProps> = ({ title, name, oldValue, onChange }) => {
return (
<div>
<h3>{title}</h3>
<h4>{title}</h4>
<input
name={name}
style={{ width: 350 }}
style={{ width: 400 }}
defaultValue={oldValue}
onChange={(e) => onChange(e.target.value)}
/>
Expand All @@ -42,7 +42,7 @@ export const BooleanInput: React.FC<BooleanInputProps> = ({ title, name, oldValu

return (
<div>
<h3>{title}</h3>
<h4>{title}</h4>
<Switch
checked={checked}
name={name}
Expand Down Expand Up @@ -72,7 +72,7 @@ interface NumberInputProps {
export const NumberInput: React.FC<NumberInputProps> = ({ title, name, oldValue, type, onChange }) => {
return (
<div>
<h3>{title}</h3>
<h4>{title}</h4>
<NumericInput
className="form-control"
name={name}
Expand All @@ -83,7 +83,7 @@ export const NumberInput: React.FC<NumberInputProps> = ({ title, name, oldValue,
precision={type === 'float' ? 2 : 0}
mobile={true}
onChange={(valueAsNumber, valueAsString) => onChange(valueAsString)}
style={{ input: { width: 350 } }}
style={{ input: { width: 400 } }}
/>
</div>
);
Expand All @@ -94,18 +94,20 @@ interface TextAreaInputProps {
name: string;
oldValue: string;
onChange: (value: string) => void;
readOnly?: boolean;
}

export const TextAreaInput: React.FC<TextAreaInputProps> = ({ title, name, oldValue, onChange }) => {
export const TextAreaInput: React.FC<TextAreaInputProps> = ({ title, name, oldValue, onChange, readOnly = false }) => {
return (
<div>
<h3>{title}</h3>
<h4>{title}</h4>
<TextareaAutosize
name={name}
defaultValue={oldValue}
minRows={5}
style={{ width: 400, fontSize: 12 }}
onChange={(e) => onChange(e.target.value)}
readOnly={readOnly}
/>
</div>
);
Expand Down

0 comments on commit 03cdc5e

Please sign in to comment.