Skip to content

Commit

Permalink
Merge pull request #730 from jembi/CU-86c19vnb2_Polish-UI
Browse files Browse the repository at this point in the history 
feat: use accordion.
  • Loading branch information
@drizzentic
drizzentic authored Jan 29, 2025
2 parents c9ff101 + c1d72f3 commit 9ea285a
Show file tree
Hide file tree
Showing 7 changed files with 154 additions and 134 deletions.
2 changes: 1 addition & 1 deletion packages/base-components/BasePageTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export function BasePageTemplate({
variant="subtitle1"
gutterBottom
sx={{
color: alpha('#000', 0.6),
color: 'grey',
fontSmooth: 'never',
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale'
Expand Down
11 changes: 10 additions & 1 deletion packages/channels-app/src/screens/add.channel.screen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,15 @@ function AddChannelScreen() {
/>
)}
</div>
<br />
<Divider
style={{
marginTop: '10px',
marginBottom: '10px',
width: 'calc(100% + 40px)', // Assuming the parent has 0.5px padding on both sides
marginLeft: '-21px'
}}
/>

<Box style={{marginTop: '30px'}}>
{activeStep === 0 && (
Expand All @@ -172,7 +181,7 @@ function AddChannelScreen() {
</Button>
)}
{activeStep > 0 && (
<Button color="info" variant="contained" onClick={handleBack}>
<Button color="primary" variant="outlined" onClick={handleBack}>
BACK
</Button>
)}
Expand Down
11 changes: 10 additions & 1 deletion packages/channels-app/src/screens/edit.channel.screen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import TabContext from '@mui/lab/TabContext'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import {Box, Button, Grid, Paper, Typography} from '@mui/material'
import {Box, Button, Divider, Grid, Paper, Typography} from '@mui/material'
import Tab from '@mui/material/Tab'
import {useMutation} from '@tanstack/react-query'
import React from 'react'
Expand Down Expand Up @@ -114,6 +114,15 @@ function EditChannelScreen() {
</TabPanel>
</TabContext>

<Divider
style={{
marginTop: '10px',
marginBottom: '10px',
width: 'calc(100% + 1px)', // Assuming the parent has 0.5px padding on both sides
marginLeft: '-1px'
}}
/>

<Box style={{padding: '10px'}}>
<Button
variant="outlined"
Expand Down
234 changes: 116 additions & 118 deletions packages/channels-app/src/screens/steps/BasicInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
import ArrowDropUp from '@mui/icons-material/ArrowDropUp'
import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'
import {
Box,
Checkbox,
Divider,
FormControlLabel,
FormHelperText,
Grid,
IconButton,
Paper,
Radio,
RadioGroup,
Switch,
TextField,
Typography
} from '@mui/material'
import {makeStyles} from '@mui/styles'
import Accordion from '@mui/material/Accordion'
import AccordionDetails from '@mui/material/AccordionDetails'
import AccordionSummary from '@mui/material/AccordionSummary'
import React from 'react'
import {Channel, ChannelMethod, ChannelType} from '../../types'

Expand All @@ -37,8 +36,6 @@ export function BasicInfo(props: {
]
const [formTouched, setFormTouched] = React.useState(false)
const channelTypes: Array<ChannelType> = ['http', 'polling']
const [expandOptionalSettings, setExpandOptionalSettings] =
React.useState(false)

React.useEffect(() => {
props.onChange({
Expand All @@ -62,20 +59,19 @@ export function BasicInfo(props: {
}

return (
<Box>
<Box style={{position: 'relative'}}>
<Typography variant="h5">Basic Info</Typography>
<Typography variant="subtitle1">
<Typography sx={{color: 'grey'}} variant="subtitle1">
Describe some basic information about the channel and choose its overall
type.
</Typography>

<Divider
style={{
marginTop: '10px',
margin: '0px',
width: '100%',
marginBottom: '10px',
overflow: 'visible'
width: 'calc(100% + 44px)', // Assuming the parent has 22px padding on both sides
marginLeft: '-22px'
}}
/>
<br />
Expand Down Expand Up @@ -137,135 +133,137 @@ export function BasicInfo(props: {
/>
<br />

<Paper elevation={2} style={{borderRadius: '20px', padding: '12px'}}>
<Grid container>
<Grid item xs={11}>
<Typography variant="body1">Optional Settings</Typography>
</Grid>
<Grid item xs={1}>
<IconButton
onClick={() => setExpandOptionalSettings(!expandOptionalSettings)}
>
{expandOptionalSettings ? <ArrowDropUp /> : <ArrowDropDown />}
</IconButton>
</Grid>
</Grid>
<Grid container>
<Grid item xs={12}>
<Accordion sx={{borderRadius: '32px'}}>
<AccordionSummary expandIcon={<KeyboardArrowDown />}>
<Typography variant="body1">Optional Settings</Typography>
</AccordionSummary>

{expandOptionalSettings && (
<React.Fragment>
<Divider />
<Grid container spacing={2}>
<Grid item xs={8}>
<TextField
label="Channel Description"
variant="outlined"
fullWidth
margin="normal"
value={channel.description}
onChange={e =>
setChannel({...channel, description: e.target.value})
}
/>
<FormHelperText>
Help other users understand this channel
</FormHelperText>
</Grid>
<Grid item xs={12}>
<Typography variant="h6">Channel Type</Typography>
<Divider
style={{
marginTop: '5px',
marginBottom: '5px',
width: 'calc(100% + 2px)', // Assuming the parent has 1px padding on both sides
marginLeft: '-1px'
}}
/>

<Box style={{padding: '10px'}}>
<RadioGroup
defaultValue="http"
value={channel.type}
<AccordionDetails>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
label="Channel Description"
variant="outlined"
fullWidth
margin="normal"
value={channel.description}
onChange={e =>
setChannel({
...channel,
type: e.target.value as ChannelType
})
setChannel({...channel, description: e.target.value})
}
>
{channelTypes.map(type => (
<FormControlLabel
key={type}
value={type}
control={<Radio />}
label={type.toUpperCase()}
/>
))}
</RadioGroup>
</Box>
helperText={'Help other users understand the channel'}
/>
</Grid>
<Grid item xs={12}>
<Typography variant="h6">Channel Type</Typography>

<Grid item xs={5}>
{channel.type === 'polling' && (
<Box style={{padding: '10px'}}>
<RadioGroup
defaultValue="http"
value={channel.type}
onChange={e =>
setChannel({
...channel,
type: e.target.value as ChannelType
})
}
>
{channelTypes.map(type => (
<FormControlLabel
key={type}
value={type}
control={<Radio />}
label={type.toUpperCase()}
/>
))}
</RadioGroup>
</Box>

<Grid item xs={5}>
{channel.type === 'polling' && (
<TextField
label="Polling Schedule"
variant="outlined"
fullWidth
margin="normal"
type="string"
value={channel.pollingSchedule}
onChange={e =>
setChannel({
...channel,
pollingSchedule: e.target.value
})
}
error={
channel.type === 'polling' &&
channel.pollingSchedule === ''
}
helperText={
channel.type === 'polling' &&
channel.pollingSchedule === ''
? `Cron format: '*/10 * * * *'\nor Written format: '10 minutes'`
: undefined
}
/>
)}
<TextField
label="Polling Schedule"
label="Timeout ms"
variant="outlined"
fullWidth
margin="normal"
type="string"
value={channel.pollingSchedule}
type="number"
value={channel.timeout}
onChange={e =>
setChannel({
...channel,
pollingSchedule: e.target.value
timeout: Number(e.target.value)
})
}
error={
channel.type === 'polling' &&
channel.pollingSchedule === ''
Number.isSafeInteger(channel.timeout) &&
channel.timeout < 0
}
helperText={
channel.type === 'polling' &&
channel.pollingSchedule === ''
? `Cron format: '*/10 * * * *'\nor Written format: '10 minutes'`
Number.isSafeInteger(channel.timeout) &&
channel.timeout < 0
? 'Timeout cannot be negative'
: undefined
}
/>
)}
<TextField
label="Timeout ms"
variant="outlined"
fullWidth
margin="normal"
type="number"
value={channel.timeout}
onChange={e =>
setChannel({...channel, timeout: Number(e.target.value)})
}
error={
Number.isSafeInteger(channel.timeout) &&
channel.timeout < 0
}
helperText={
Number.isSafeInteger(channel.timeout) &&
channel.timeout < 0
? 'Timeout cannot be negative'
: undefined
}
/>
</Grid>
</Grid>

<Grid item xs={6}>
<FormControlLabel
control={
<Switch
checked={channel.status === 'enabled'}
onChange={e =>
setChannel({
...channel,
status: e.target.checked ? 'enabled' : 'disabled'
})
}
/>
}
label="Enable channel"
/>
<Grid item xs={6}>
<FormControlLabel
control={
<Switch
checked={channel.status === 'enabled'}
onChange={e =>
setChannel({
...channel,
status: e.target.checked ? 'enabled' : 'disabled'
})
}
/>
}
label="Enable channel"
/>
</Grid>
</Grid>
</Grid>
</Grid>
</React.Fragment>
)}
</Paper>
</AccordionDetails>
</Accordion>
</Grid>
</Grid>
</Box>
)
}
13 changes: 10 additions & 3 deletions packages/channels-app/src/screens/steps/RequestMatching.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,20 @@ export function RequestMatching(props: {
}, [channel])

return (
<Box>
<Box style={{position: 'relative'}}>
<Typography variant="h5">Request Matching</Typography>
<Typography variant="subtitle1">
<Typography variant="subtitle1" sx={{color: 'grey'}}>
Set criteria for requests to be forwarded to this channel.
</Typography>

<Divider style={{marginTop: '10px', marginBottom: '10px'}} />
<Divider
style={{
marginTop: '10px',
marginBottom: '10px',
width: 'calc(100% + 44px)', // Assuming the parent has 22px padding on both sides
marginLeft: '-22px'
}}
/>

<Grid container spacing={2}>
<Grid item xs={12}>
Expand Down
Loading

0 comments on commit 9ea285a

Please sign in to comment.