Skip to content
This repository was archived by the owner on Jun 19, 2025. It is now read-only.

Commit 7e86dba

Browse files
safeamiiirsafeamiiir
authored
fix(extension): clean up styles for extensions modal and extensions description as MD file (#191)
fix(extension): clean up styles for extensions modal
1 parent 531eeaf commit 7e86dba

File tree

4 files changed

+173
-143
lines changed

4 files changed

+173
-143
lines changed

‎aqueductcore/frontend/src/components/atoms/LinkRenderer/index.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
function LinkRenderer(props: React.ComponentProps<"a">) {
2+
return (
3+
<a href={props.href} target="_blank" rel="noreferrer">
4+
{props.children}
5+
</a>
6+
);
7+
}
8+
export default LinkRenderer

‎aqueductcore/frontend/src/components/molecules/ActionForm/index.tsx‎

Lines changed: 96 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { FileField } from "components/atoms/FileField";
1616
import { TextInputField } from "components/atoms/TextInputField";
1717

1818
const Container = styled(Box)`
19-
height: 551px;
2019
padding: 0 ${(props) => props.theme.spacing(1)};
2120
overflow-y: auto;
2221
`;
@@ -55,104 +54,102 @@ function ActionForm({
5554
}
5655

5756
return (
58-
<>
59-
<Container>
60-
<Box sx={{ pt: 1.5, pb: 2 }}>
61-
{selectedAction?.parameters.map(parameterInfo => (
62-
<Box key={parameterInfo.name}>
63-
{parameterInfo.dataType == ExtensionParameterDataTypes.STR && <>
64-
<TextInputField
65-
title={parameterInfo?.displayName || ""}
66-
description={parameterInfo?.description || ""}
67-
field={parameterInfo.name}
68-
textFieldProps={{
69-
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
70-
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: e.target.value }]))
71-
}}
72-
/>
73-
</>}
74-
{parameterInfo.dataType == ExtensionParameterDataTypes.INT && <>
75-
<IntegerField
76-
title={parameterInfo?.displayName || ""}
77-
description={parameterInfo?.description || ""}
78-
field={parameterInfo.name}
79-
integerFieldProps={{
80-
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
81-
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: e.target.value }]))
82-
}}
83-
/>
84-
</>}
85-
{parameterInfo.dataType == ExtensionParameterDataTypes.FLOAT && <>
86-
<FloatField
87-
title={parameterInfo?.displayName || ""}
88-
description={parameterInfo?.description || ""}
89-
field={parameterInfo.name}
90-
floatFieldProps={{
91-
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
92-
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: e.target.value }]))
93-
}}
94-
/>
95-
</>}
96-
{parameterInfo.dataType == ExtensionParameterDataTypes.EXPERIMENT && apolloCache?.experiment && <>
97-
<ExperimentField
98-
title={parameterInfo?.displayName || ""}
99-
description={parameterInfo?.description || ""}
100-
field={parameterInfo.name}
101-
experiment_title={apolloCache.experiment.title}
102-
experiment_id={apolloCache.experiment.eid}
103-
/>
104-
</>}
105-
{parameterInfo.dataType == ExtensionParameterDataTypes.TEXTAREA && <>
106-
<TextAreaField
107-
title={parameterInfo?.displayName || ""}
108-
description={parameterInfo?.description || ""}
109-
field={parameterInfo.name}
110-
textareaFieldProps={{
111-
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
112-
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: e.target.value }]))
113-
}}
114-
/>
115-
</>}
116-
{parameterInfo.dataType == ExtensionParameterDataTypes.BOOL && <>
117-
<CheckboxField
118-
title={parameterInfo?.displayName || ""}
119-
description={parameterInfo?.description || ""}
120-
field={parameterInfo.name}
121-
checkboxFieldProps={{
122-
checked: handleBooleanValue(inputParams.find((item) => item.name === parameterInfo.name)?.value ?? ''),
123-
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: String(e.target.checked) }]))
124-
}}
125-
/>
126-
</>}
127-
{parameterInfo.dataType == ExtensionParameterDataTypes.SELECT && <>
128-
<SelectField
129-
title={parameterInfo?.displayName || ""}
130-
description={parameterInfo?.description || ""}
131-
field={parameterInfo.name}
132-
options={parameterInfo.options || []}
133-
selectFieldProps={{
134-
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
135-
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: String(e.target.value) }]))
136-
}}
137-
/>
138-
</>}
139-
{parameterInfo.dataType == ExtensionParameterDataTypes.FILE && <>
140-
<FileField
141-
title={parameterInfo?.displayName || ""}
142-
description={parameterInfo?.description || ""}
143-
field={parameterInfo.name}
144-
experimentIdentifier={experimentIdentifier || ""}
145-
fileFieldProps={{
146-
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
147-
onChange: ((_, value) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: value }]))
148-
}}
149-
/>
150-
</>}
151-
</Box>
152-
))}
153-
</Box>
154-
</Container>
155-
</>
57+
<Container>
58+
<Box sx={{ pt: 1.5, pb: 2 }}>
59+
{selectedAction?.parameters.map(parameterInfo => (
60+
<Box key={parameterInfo.name}>
61+
{parameterInfo.dataType == ExtensionParameterDataTypes.STR && <>
62+
<TextInputField
63+
title={parameterInfo?.displayName || ""}
64+
description={parameterInfo?.description || ""}
65+
field={parameterInfo.name}
66+
textFieldProps={{
67+
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
68+
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: e.target.value }]))
69+
}}
70+
/>
71+
</>}
72+
{parameterInfo.dataType == ExtensionParameterDataTypes.INT && <>
73+
<IntegerField
74+
title={parameterInfo?.displayName || ""}
75+
description={parameterInfo?.description || ""}
76+
field={parameterInfo.name}
77+
integerFieldProps={{
78+
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
79+
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: e.target.value }]))
80+
}}
81+
/>
82+
</>}
83+
{parameterInfo.dataType == ExtensionParameterDataTypes.FLOAT && <>
84+
<FloatField
85+
title={parameterInfo?.displayName || ""}
86+
description={parameterInfo?.description || ""}
87+
field={parameterInfo.name}
88+
floatFieldProps={{
89+
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
90+
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: e.target.value }]))
91+
}}
92+
/>
93+
</>}
94+
{parameterInfo.dataType == ExtensionParameterDataTypes.EXPERIMENT && apolloCache?.experiment && <>
95+
<ExperimentField
96+
title={parameterInfo?.displayName || ""}
97+
description={parameterInfo?.description || ""}
98+
field={parameterInfo.name}
99+
experiment_title={apolloCache.experiment.title}
100+
experiment_id={apolloCache.experiment.eid}
101+
/>
102+
</>}
103+
{parameterInfo.dataType == ExtensionParameterDataTypes.TEXTAREA && <>
104+
<TextAreaField
105+
title={parameterInfo?.displayName || ""}
106+
description={parameterInfo?.description || ""}
107+
field={parameterInfo.name}
108+
textareaFieldProps={{
109+
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
110+
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: e.target.value }]))
111+
}}
112+
/>
113+
</>}
114+
{parameterInfo.dataType == ExtensionParameterDataTypes.BOOL && <>
115+
<CheckboxField
116+
title={parameterInfo?.displayName || ""}
117+
description={parameterInfo?.description || ""}
118+
field={parameterInfo.name}
119+
checkboxFieldProps={{
120+
checked: handleBooleanValue(inputParams.find((item) => item.name === parameterInfo.name)?.value ?? ''),
121+
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: String(e.target.checked) }]))
122+
}}
123+
/>
124+
</>}
125+
{parameterInfo.dataType == ExtensionParameterDataTypes.SELECT && <>
126+
<SelectField
127+
title={parameterInfo?.displayName || ""}
128+
description={parameterInfo?.description || ""}
129+
field={parameterInfo.name}
130+
options={parameterInfo.options || []}
131+
selectFieldProps={{
132+
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
133+
onChange: ((e) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: String(e.target.value) }]))
134+
}}
135+
/>
136+
</>}
137+
{parameterInfo.dataType == ExtensionParameterDataTypes.FILE && <>
138+
<FileField
139+
title={parameterInfo?.displayName || ""}
140+
description={parameterInfo?.description || ""}
141+
field={parameterInfo.name}
142+
experimentIdentifier={experimentIdentifier || ""}
143+
fileFieldProps={{
144+
value: inputParams.find((item) => item.name === parameterInfo.name)?.value ?? '',
145+
onChange: ((_, value) => setInputParams([...inputParams.filter(param => param.name !== parameterInfo.name), { name: parameterInfo.name, value: value }]))
146+
}}
147+
/>
148+
</>}
149+
</Box>
150+
))}
151+
</Box>
152+
</Container>
156153
);
157154
}
158155

‎aqueductcore/frontend/src/components/molecules/ExtensionActions/index.tsx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import { Box, FormControl, FormControlLabel, Grid, Radio, RadioGroup, Typography, styled } from "@mui/material"
2+
import Markdown from "react-markdown";
23
import { useEffect } from "react";
34

45
import { ExtensionActionType, ExtensionType } from "types/globalTypes";
6+
import LinkRenderer from "components/atoms/LinkRenderer";
7+
8+
const Container = styled(Box)`
9+
height: inherit;
10+
padding: ${(props) => props.theme.spacing(2.5)} ${(props) => props.theme.spacing(3)};
11+
overflow-y: auto;
12+
`;
513

614
const ExtensionActionBox = styled(Box)`
715
width: 100%;
@@ -18,15 +26,18 @@ const HiddenRadio = styled(Radio)`
1826
`;
1927

2028
const ActionHeader = styled(Grid, { shouldForwardProp: (prop) => prop !== "$isselected" }) <{ $isselected: boolean }>`
21-
padding: 0 ${(props) => props.theme.spacing(1.5)};
29+
padding: ${(props) => props.theme.spacing(1)};
30+
display: flex;
31+
justify-content: space-between;
32+
align-items: center;
2233
background-color: ${({ theme, $isselected }) => $isselected ? theme.palette.primary.main : theme.palette.background.default};
2334
border-bottom: 1px solid ${({ theme }) => theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[300]};
2435
border-radius: ${(props) => props.theme.spacing(0.5)} ${(props) => props.theme.spacing(0.5)} 0 0;
25-
&:after{clear: both;display: block;content: '';}
2636
`;
2737

2838
const ActionsFormControl = styled(FormControl)`
2939
width: 100%;
40+
overflow-y: auto;
3041
.MuiFormControlLabel-root {
3142
width: 100%;
3243
display: block;
@@ -38,7 +49,6 @@ const ActionsFormControl = styled(FormControl)`
3849
const ActionName = styled(Typography)`
3950
font-size: 0.9rem;
4051
font-weight: bold;
41-
line-height: 2.37rem;
4252
float: left;
4353
`;
4454

@@ -47,8 +57,9 @@ const ActionCheckbox = styled(Box)`
4757
line-height: 2.37rem;
4858
`;
4959

50-
const ActionDescription = styled(Typography)`
60+
const ActionDescription = styled(Box)`
5161
font-size: 0.8rem;
62+
overflow-wrap: break-word;
5263
padding: ${(props) => props.theme.spacing(0.75)} ${(props) => props.theme.spacing(1.5)};
5364
background-color: ${(props) =>
5465
props.theme.palette.mode === "dark"
@@ -81,7 +92,7 @@ function ExtensionActions({
8192
}, [])
8293

8394
return (
84-
<>
95+
<Container>
8596
<ExtensionDescription>{extension?.description}</ExtensionDescription>
8697
<ActionsFormControl>
8798
<RadioGroup
@@ -107,15 +118,17 @@ function ExtensionActions({
107118
</ActionCheckbox>
108119
</ActionHeader>
109120
<ActionDescription>
110-
{ActionInfo.description}
121+
<Markdown components={{ a: LinkRenderer }} >
122+
{ActionInfo.description}
123+
</Markdown>
111124
</ActionDescription>
112125
</ExtensionActionBox>
113126
}
114127
/>
115128
))}
116129
</RadioGroup>
117130
</ActionsFormControl>
118-
</>
131+
</Container>
119132
);
120133
}
121134

0 commit comments

Comments
 (0)