Merge pull request #699 from jembi/CI_86c0fbyky-channels-styling-updates

chore: add channel updates.
jembi · Oct 15, 2024 · feb6c37 · feb6c37
2 parents d1134dc + 221842e
commit feb6c37
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 86 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "scripts": {
     "start": "npx lerna run start",
     "build": "npx lerna run build",
+    "dev": "npx lerna run start --concurrency=$(ls ./packages | wc -l)",
     "test": "npx lerna run test",
     "build:prod": "npx lerna run build -- --prod"
   },

diff --git a/packages/channels-app/src/components/helpers/custom.toolbar.tsx b/packages/channels-app/src/components/helpers/custom.toolbar.tsx
@@ -1,4 +1,3 @@
-import {makeStyles} from '@mui/styles'
 import {
   GridToolbarColumnsButton,
   GridToolbarDensitySelector,
@@ -20,7 +19,7 @@ export function CustomToolbar() {
         <GridToolbarFilterButton />
         <GridToolbarDensitySelector />
       </div>
-      <GridToolbarQuickFilter />
+      <GridToolbarQuickFilter variant="outlined" />
     </div>
   )
 }
diff --git a/packages/channels-app/src/screens/add.channel.screen.tsx b/packages/channels-app/src/screens/add.channel.screen.tsx
@@ -104,11 +104,8 @@ function AddChannelScreen() {
   }
 
   return (
-    <Box
-      padding={3}
-      sx={{backgroundColor: '#F1F1F1'}}
-    >
-      <header style={{marginBottom: '40px'}}>
+    <Box padding={3} sx={{backgroundColor: '#F1F1F1'}}>
+      <header style={{marginBottom: '24px'}}>
         <Typography variant="h4" gutterBottom fontWeight={400}>
           Add Channel
         </Typography>

diff --git a/packages/channels-app/src/screens/edit.channel.screen.tsx b/packages/channels-app/src/screens/edit.channel.screen.tsx
@@ -61,11 +61,8 @@ function EditChannelScreen() {
   }
 
   return (
-    <Box
-      padding={1}
-      sx={{backgroundColor: '#F1F1F1',  }}
-    >
-      <header style={{marginBottom: '40px'}}>
+    <Box padding={1} sx={{backgroundColor: '#F1F1F1'}}>
+      <header style={{marginBottom: '24px'}}>
         <Typography variant="h4" gutterBottom fontWeight={400}>
           Edit Channel
         </Typography>

diff --git a/packages/channels-app/src/screens/manage.channels.screen.tsx b/packages/channels-app/src/screens/manage.channels.screen.tsx
@@ -27,7 +27,7 @@ import {useAlert} from '../contexts/alert.context'
 import {useBasicBackdrop} from '../contexts/backdrop.context'
 import {useConfirmation} from '../contexts/confirmation.context'
 import {getChannels, modifyChannel} from '../services/api'
-import {Channel} from '../types'
+import {Channel, ChannelStatus} from '../types'
 
 const useStyles = makeStyles(_theme => ({
   actionsIcon: {
@@ -140,18 +140,27 @@ const ManageChannelsScreen: React.FC = () => {
       field: 'status',
       headerName: 'Status',
       flex: 0.5,
-      renderCell: params => (
-        <Chip
-          label={params.value}
-          color={params.value === 'enabled' ? 'success' : 'error'}
-        />
-      )
+      renderCell: params => {
+        const status = params.value as ChannelStatus
+
+        return (
+          <Typography
+            pt={3}
+            fontSize={14}
+            sx={{color: status === 'enabled' ? 'green' : 'red'}}
+          >
+            {status[0].toUpperCase() + status.slice(1)}
+          </Typography>
+        )
+      }
     },
     {field: 'priority', headerName: 'Priority', flex: 0.5},
     {field: 'allow', headerName: 'Access', flex: 1},
     {
       field: 'actions',
       headerName: 'Actions',
+      align: 'right',
+      headerAlign: 'right',
       flex: 0.5,
       sortable: false,
       renderCell: params => (
@@ -208,10 +217,7 @@ const ManageChannelsScreen: React.FC = () => {
   }
 
   return (
-    <Box
-      padding={3}
-      sx={{backgroundColor: '#F1F1F1'}}
-    >
+    <Box padding={3} sx={{backgroundColor: '#F1F1F1'}}>
       <Typography variant="h4" gutterBottom>
         Manage Channels
       </Typography>
@@ -223,36 +229,47 @@ const ManageChannelsScreen: React.FC = () => {
             <a href="">How do channels work?</a>
           </Typography>
         </Grid>
-        <Grid item xs={1}>
-          <Button
-            variant="contained"
-            color="primary"
-            startIcon={<AddIcon />}
-            href="/#!/channels/create-channel"
-          >
-            Add
-          </Button>
+        <Grid container justifyContent="flex-end">
+          <Grid item>
+            <Button
+              variant="contained"
+              color="primary"
+              startIcon={<AddIcon />}
+              href="/#!/channels/create-channel"
+            >
+              Add
+            </Button>
+          </Grid>
         </Grid>
       </Grid>
 
       <Divider sx={{marginTop: '10px', marginBottom: '30px'}} />
 
-      <Paper elevation={4} className={classes.tableContainer}>
+      <Paper
+        elevation={4}
+        sx={{paddingX: '25px'}}
+        className={classes.tableContainer}
+      >
         <DataGrid
           disableRowSelectionOnClick
           disableDensitySelector
           density="comfortable"
+          disableMultipleRowSelection
           loading={isLoading || mutation.isLoading}
           rows={rows ?? []}
           columns={columns}
           disableColumnMenu
           slots={{toolbar: CustomToolbar}}
-          slotProps={{
-            toolbar: {
-              showQuickFilter: true
+          pagination
+          sx={{
+            border: 'none',
+            '& .MuiDataGrid-cell': {
+              borderBottom: 'none'
+            },
+            '& .MuiDataGrid-columnHeaders': {
+              borderBottom: 'none'
             }
           }}
-          pagination
         />
       </Paper>
     </Box>

diff --git a/packages/channels-app/src/screens/steps/BasicInfo.tsx b/packages/channels-app/src/screens/steps/BasicInfo.tsx
@@ -34,6 +34,7 @@ export function BasicInfo(props: {
     'PATCH',
     'OPTIONS'
   ]
+  const [formTouched, setFormTouched] = React.useState(false)
   const channelTypes: Array<ChannelType> = ['http', 'tcp', 'tls', 'polling']
   const [expandOptionalSettings, setExpandOptionalSettings] =
     React.useState(false)
@@ -86,10 +87,13 @@ export function BasicInfo(props: {
             fullWidth
             margin="normal"
             value={channel.name}
-            onChange={e => setChannel({...channel, name: e.target.value})}
-            error={channel.name.trim() === ''}
+            onChange={e => {
+              setFormTouched(true)
+              setChannel({...channel, name: e.target.value})
+            }}
+            error={channel.name.trim() === '' && formTouched}
             helperText={
-              channel.name.trim() === ''
+              channel.name.trim() === '' && formTouched
                 ? 'Channel Name cannot be empty'
                 : undefined
             }

diff --git a/packages/channels-app/src/screens/steps/RequestMatching.tsx b/packages/channels-app/src/screens/steps/RequestMatching.tsx
@@ -29,7 +29,7 @@ export function RequestMatching(props: {
   channel: Channel
   onChange: (event: {channel: Channel; isValid: boolean}) => unknown
 }) {
-  const navigate = useNavigate()
+  const [formTouched, setFormTouched] = React.useState(false)
   const [channel, setChannel] = React.useState(props.channel)
   const [expandOptionalSettings, setExpandOptionalSettings] =
     React.useState(false)
@@ -77,10 +77,13 @@ export function RequestMatching(props: {
                     .replace(/\$$/, '')
                 : channel.urlPattern
             }
-            onChange={e => setChannel({...channel, urlPattern: e.target.value})}
-            error={channel.urlPattern.trim() === ''}
+            onChange={e => {
+              setFormTouched(true)
+              setChannel({...channel, urlPattern: e.target.value})
+            }}
+            error={channel.urlPattern.trim() === '' && formTouched}
             helperText={
-              channel.urlPattern.trim() === ''
+              formTouched && channel.urlPattern.trim() === ''
                 ? 'URL patterns cannot be empty'
                 : undefined
             }

diff --git a/packages/channels-app/src/screens/steps/routes/ChannelRoute.tsx b/packages/channels-app/src/screens/steps/routes/ChannelRoute.tsx
@@ -25,6 +25,7 @@ export function ChannelRoute(props: {
   onCancel?: () => unknown
 }) {
   const isEditMode = !!props.route
+  const [isFormTouched, setFormIsTouched] = React.useState(false)
   const isCreateMode = !isEditMode
   const [route, setRoute] = React.useState(
     structuredClone(props.route ?? defaultRoute)
@@ -44,10 +45,13 @@ export function ChannelRoute(props: {
             fullWidth
             margin="normal"
             value={route.name}
-            onChange={e => setRoute({...route, name: e.target.value})}
-            error={route.name.trim() === ''}
+            onChange={e => {
+              setFormIsTouched(true)
+              setRoute({...route, name: e.target.value})
+            }}
+            error={route.name.trim() === '' && isFormTouched}
             helperText={
-              route.name.trim() === ''
+              route.name.trim() === '' && isFormTouched
                 ? 'Route Name cannot be empty'
                 : undefined
             }