Skip to content

Commit

Permalink
Merge pull request #734 from jembi/CU-86c1754eu_Refresh-button-should…
Browse files Browse the repository at this point in the history 
…-be-secondary-outline-style

Cu 86c1754eu refresh button should be secondary outline style
  • Loading branch information
@drizzentic
drizzentic authored Feb 11, 2025
2 parents 9ea285a + c28607e commit 36e9070
Show file tree
Hide file tree
Showing 12 changed files with 1,207 additions and 583 deletions.
240 changes: 160 additions & 80 deletions packages/channels-app/src/screens/add.channel.screen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ import {
Step,
StepLabel,
Stepper,
Typography
Typography,
Card,
CardHeader,
CardContent,
CardActions
} from '@mui/material'
import {useMutation} from '@tanstack/react-query'
import React from 'react'
Expand Down Expand Up @@ -110,108 +114,184 @@ function AddChannelScreen() {
subtitle="Control client systems and their access roles. Add clients to enable their request routing and group them by roles for streamlined channel accesss managment."
breadcrumbs={[{label: 'Channels', href: '/#!/channels'}, {label: 'Add'}]}
>
<Grid
container
direction="column"
alignItems="center"
justifyContent="center"
>
<Grid container direction="column">
{/* Stepper Section */}
<Grid item xs={12}>
<Paper
style={{width: '680px', borderRadius: '15px', padding: '20px'}}
elevation={4}
>
<div style={{marginBottom: '10px'}}>
<Stepper activeStep={activeStep}>
<Box sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
}}>
<Box sx={{
width: '800px',
height: '56px',
background: '#FFFFFF',
boxShadow: '0px 1px 10px rgba(0, 0, 0, 0.12), 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.2)',
borderRadius: '16px 16px 0px 0px',
display: 'flex',
justifyContent: 'center',
alignItems: 'flex-start',
padding: 0,
}}>
<Stepper
activeStep={activeStep}
sx={{
width: '100%',
padding: '16px',
'& .MuiStepLabel-root .Mui-active': {
color: '#007F68',
},
'& .MuiStepLabel-root .Mui-completed': {
color: '#007F68',
},
'& .MuiStepConnector-line': {
borderColor: '#E0E0E0',
},
'& .MuiStepLabel-label': {
fontSize: '14px',
fontWeight: 500,
}
}}
>
{steps.map(label => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
</div>
<Divider />
<div style={{marginTop: '10px'}}>
</Box>
</Box>
</Grid>

{/* Main Card Section */}
<Grid item xs={12}>
<Box sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
}}>
<Card sx={{
width: '800px',
borderRadius: '0px 0px 8px 8px',
boxShadow: '0px 1px 10px rgba(0, 0, 0, 0.12), 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.2)',
}}>
{/* Dynamic Card Header based on active step */}
{activeStep === 0 && (
<BasicInfo
channel={channel}
onChange={({channel, isValid}) => {
setIsFormValid(isValid)
setChannel(channel)
}}
<CardHeader
title="Basic Info"
subheader="Describe some basic information about the channel and choose its overall type."
/>
)}
{activeStep === 1 && (
<RequestMatching
channel={channel}
onChange={({channel, isValid}) => {
setIsFormValid(isValid)
setChannel(channel)
}}
<CardHeader
title="Request Matching"
subheader="Set criteria for requests to be forwarded to this channel."
/>
)}
{activeStep === 2 && (
<ChannelRoutes
channel={channel}
onChange={({channel, isValid}) => {
setIsFormValid(isValid)
setChannel(channel)
}}
<CardHeader
title="Channel Routes"
subheader="Add or modify routes to this channel. Any requests that match this
channel will be forwarded to each route in the channel. One route can be
marked as a primary route. The response from the primary route will be
the one that is returned to the request sender."
/>
)}
</div>
<br />
<Divider
style={{
marginTop: '10px',
marginBottom: '10px',
width: 'calc(100% + 40px)', // Assuming the parent has 0.5px padding on both sides
marginLeft: '-21px'
}}
/>

<Divider />

{/* Dynamic Card Content based on active step */}
<CardContent>
{activeStep === 0 && (
<BasicInfo
channel={channel}
onChange={({channel, isValid}) => {
setIsFormValid(isValid)
setChannel(channel)
}}
/>
)}
{activeStep === 1 && (
<RequestMatching
channel={channel}
onChange={({channel, isValid}) => {
setIsFormValid(isValid)
setChannel(channel)
}}
/>
)}
{activeStep === 2 && (
<ChannelRoutes
channel={channel}
onChange={({channel, isValid}) => {
setIsFormValid(isValid)
setChannel(channel)
}}
/>
)}
</CardContent>

<Box style={{marginTop: '30px'}}>
{activeStep === 0 && (
<Button
variant="outlined"
color="primary"
href={`/#${Routes.MANAGE_CHANNELS}`}
>
CANCEL
</Button>
)}
{activeStep > 0 && (
<Button color="primary" variant="outlined" onClick={handleBack}>
BACK
</Button>
)}
<span style={{marginRight: '10px'}}></span>
{activeStep != steps.length - 1 && (
<Divider />

{/* Card Actions with Buttons */}
<CardActions sx={{ p: 2, justifyContent: 'flex-start' }}>
{activeStep === 0 ? (
<Button
variant="outlined"
sx={{
color: '#007F68',
borderColor: '#007F68',
'&:hover': {
borderColor: '#006D5A',
backgroundColor: 'rgba(0, 127, 104, 0.04)'
}
}}
href={`/#${Routes.MANAGE_CHANNELS}`}
>
CANCEL
</Button>
) : (
<Button
variant="outlined"
sx={{
color: '#007F68',
borderColor: '#007F68',
'&:hover': {
borderColor: '#006D5A',
backgroundColor: 'rgba(0, 127, 104, 0.04)'
}
}}
onClick={handleBack}
>
BACK
</Button>
)}
<span style={{marginRight: '10px'}}></span>
<Button
variant="contained"
color="primary"
onClick={handleNext}
disabled={mutation.isLoading || !isFormValid}
>
NEXT
</Button>
)}
{activeStep == steps.length - 1 && (
<Button
variant="contained"
color="primary"
sx={{
backgroundColor: '#007F68',
'&:hover': {
backgroundColor: '#006D5A'
},
'&.Mui-disabled': {
backgroundColor: 'rgba(0, 127, 104, 0.12)',
color: 'rgba(0, 127, 104, 0.38)'
}
}}
onClick={activeStep === steps.length - 1 ? handleAddChannel : handleNext}
disabled={
mutation.isLoading ||
!isFormValid ||
JSON.stringify(channel) === JSON.stringify(defaultChannel)
mutation.isLoading ||
!isFormValid ||
(activeStep === steps.length - 1 &&
JSON.stringify(channel) === JSON.stringify(defaultChannel))
}
onClick={handleAddChannel}
>
ADD CHANNEL
{activeStep === steps.length - 1 ? 'ADD CHANNEL' : 'NEXT'}
</Button>
)}
</Box>
</Paper>
</CardActions>
</Card>
</Box>
</Grid>
</Grid>
</BasePageTemplate>
Expand Down
Loading

0 comments on commit 36e9070

Please sign in to comment.