Merge pull request #726 from jembi/fix/CU-86c0h813z-channels_action_menu

fix: set font weight to bold.
jembi · Jan 29, 2025 · c9ff101 · c9ff101
2 parents c0dc9ad + 848d7d2
commit c9ff101
Show file tree

Hide file tree

Showing 27 changed files with 1,365 additions and 1,263 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/channels-app/src/screens/steps/BasicInfo.tsx b/packages/channels-app/src/screens/steps/BasicInfo.tsx
@@ -5,6 +5,7 @@ import {
   Checkbox,
   Divider,
   FormControlLabel,
+  FormHelperText,
   Grid,
   IconButton,
   Paper,
@@ -98,6 +99,7 @@ export function BasicInfo(props: {
                 : 'Choose a short but descriptive name.'
             }
           />
+          <FormHelperText>Choose a short but descriptive name</FormHelperText>
         </Grid>
 
         <Grid item xs={12}>
@@ -164,6 +166,9 @@ export function BasicInfo(props: {
                     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>

diff --git a/packages/channels-app/src/screens/steps/RequestMatching.tsx b/packages/channels-app/src/screens/steps/RequestMatching.tsx
@@ -5,6 +5,7 @@ import {
   Checkbox,
   Divider,
   FormControlLabel,
+  FormHelperText,
   FormLabel,
   Grid,
   IconButton,
@@ -102,6 +103,9 @@ export function RequestMatching(props: {
                 : undefined
             }
           />
+          <FormHelperText>
+            Which URL patterns will match this channel?
+          </FormHelperText>
         </Grid>
 
         <Grid item xs={12}>
@@ -173,6 +177,11 @@ export function RequestMatching(props: {
                     setChannel({...channel, priority: Number(e.target.value)})
                   }
                 />
+                <FormHelperText>
+                  Transactions matched to multiple channels go to the highest
+                  channel. Priority 1 is highest; higher numbers are lower
+                  priority.
+                </FormHelperText>
               </Grid>
               <Grid item xs={12} style={{marginBottom: '20px'}}>
                 <Typography variant="h6">

diff --git a/packages/channels-app/src/screens/steps/routes/ChannelRoute.tsx b/packages/channels-app/src/screens/steps/routes/ChannelRoute.tsx
@@ -1,17 +1,16 @@
 import {
   Box,
   Button,
+  Checkbox,
   Divider,
   FormControlLabel,
   FormHelperText,
   Grid,
   Radio,
   RadioGroup,
-  Switch,
   TextField,
   Typography
 } from '@mui/material'
-import {makeStyles} from '@mui/styles'
 import React from 'react'
 import {ChannelRoute as ChannelRouteDef, ChannelRouteType} from '../../../types'
 
@@ -45,7 +44,9 @@ export function ChannelRoute(props: {
 
       <Grid spacing={1} container sx={{pt: '10px'}}>
         <Grid item xs={12}>
-          <Typography variant="h6">Essential Details</Typography>
+          <Typography sx={{fontWeight: 'bold'}} variant="h6">
+            Essential Details
+          </Typography>
         </Grid>
 
         <Grid item xs={12}>
@@ -54,6 +55,7 @@ export function ChannelRoute(props: {
             variant="outlined"
             fullWidth
             margin="normal"
+            size="small"
             value={route.name}
             onChange={e => {
               setFormIsTouched(true)
@@ -77,6 +79,7 @@ export function ChannelRoute(props: {
                     label="Host"
                     variant="outlined"
                     fullWidth
+                    size="small"
                     margin="normal"
                     value={route.host}
                     onChange={e => setRoute({...route, host: e.target.value})}
@@ -87,6 +90,7 @@ export function ChannelRoute(props: {
                     label="Port"
                     variant="outlined"
                     fullWidth
+                    size="small"
                     type="number"
                     margin="normal"
                     value={route.port}
@@ -105,6 +109,7 @@ export function ChannelRoute(props: {
                     label="Route Path"
                     variant="outlined"
                     fullWidth
+                    size="small"
                     margin="normal"
                     value={route.path}
                     onChange={e => setRoute({...route, path: e.target.value})}
@@ -115,6 +120,7 @@ export function ChannelRoute(props: {
                     label="Route Path Transform"
                     variant="outlined"
                     fullWidth
+                    size="small"
                     margin="normal"
                     value={route.pathTransform}
                     onChange={e =>
@@ -132,6 +138,7 @@ export function ChannelRoute(props: {
                     label="Basic Authentication Username"
                     variant="outlined"
                     fullWidth
+                    size="small"
                     margin="normal"
                     value={route.username}
                     onChange={e =>
@@ -146,6 +153,7 @@ export function ChannelRoute(props: {
                     fullWidth
                     type="password"
                     margin="normal"
+                    size="small"
                     value={route.password}
                     onChange={e =>
                       setRoute({...route, password: e.target.value})
@@ -166,6 +174,7 @@ export function ChannelRoute(props: {
                     label="Client ID"
                     variant="outlined"
                     fullWidth
+                    size="small"
                     margin="normal"
                     value={route.kafkaClientId}
                     onChange={e =>
@@ -178,6 +187,7 @@ export function ChannelRoute(props: {
                     label="Topic Name"
                     variant="outlined"
                     fullWidth
+                    size="small"
                     margin="normal"
                     value={route.kafkaTopic}
                     onChange={e =>
@@ -193,7 +203,7 @@ export function ChannelRoute(props: {
         <Grid item xs={12}>
           <FormControlLabel
             control={
-              <Switch
+              <Checkbox
                 checked={route.status === 'enabled'}
                 onChange={e =>
                   setRoute({
@@ -205,13 +215,12 @@ export function ChannelRoute(props: {
             }
             label="Enable Route"
           />
-          <FormHelperText style={{marginLeft: '45px'}}>
-            Toggle on to enable this route.
-          </FormHelperText>
         </Grid>
 
         <Grid item xs={12}>
-          <Typography variant="h6">Route Type</Typography>
+          <Typography sx={{fontWeight: 'bold'}} variant="h6">
+            Route Type
+          </Typography>
           <RadioGroup
             style={{paddingLeft: '10px'}}
             defaultValue="http"
@@ -230,7 +239,9 @@ export function ChannelRoute(props: {
       </Grid>
 
       <Grid item xs={12}>
-        <Typography variant="h6">Settings</Typography>
+        <Typography sx={{fontWeight: 'bold'}} variant="h6">
+          Settings
+        </Typography>
         <FormHelperText>Choose all that apply.</FormHelperText>
       </Grid>
 
@@ -239,7 +250,7 @@ export function ChannelRoute(props: {
           <Grid item xs={12}>
             <FormControlLabel
               control={
-                <Switch
+                <Checkbox
                   checked={route.primary}
                   onChange={e =>
                     setRoute({...route, primary: e.target.checked})
@@ -248,14 +259,11 @@ export function ChannelRoute(props: {
               }
               label="Primary Route?"
             />
-            <FormHelperText style={{marginLeft: '45px'}}>
-              Toggle on if this is the primary route.
-            </FormHelperText>
           </Grid>
           <Grid item xs={12}>
             <FormControlLabel
               control={
-                <Switch
+                <Checkbox
                   checked={route.waitPrimaryResponse}
                   onChange={e =>
                     setRoute({...route, waitPrimaryResponse: e.target.checked})
@@ -264,33 +272,26 @@ export function ChannelRoute(props: {
               }
               label="Wait for Primary Response?"
             />
-            <FormHelperText style={{marginLeft: '45px'}}>
-              Toggle on to wait for the response from the primary route before
-              proceeding.
-            </FormHelperText>
           </Grid>
         </React.Fragment>
       )}
 
       <Grid item xs={12}>
         <FormControlLabel
           control={
-            <Switch
+            <Checkbox
               checked={route.secured}
               onChange={e => setRoute({...route, secured: e.target.checked})}
             />
           }
           label="Secured Route?"
         />
-        <FormHelperText style={{marginLeft: '45px'}}>
-          Toggle on if the route is secured. Uses default certificate authority.
-        </FormHelperText>
       </Grid>
 
       <Grid item xs={12}>
         <FormControlLabel
           control={
-            <Switch
+            <Checkbox
               checked={route.forwardAuthHeader}
               onChange={e =>
                 setRoute({
@@ -302,9 +303,6 @@ export function ChannelRoute(props: {
           }
           label="Forward Auth Header?"
         />
-        <FormHelperText style={{marginLeft: '45px'}}>
-          Toggle on to foward the existing authorization header
-        </FormHelperText>
       </Grid>
 
       <Divider sx={{pt: '10px'}} />