fix: minor ux improvements

Author: dennisvankekem

src/components/Catalogs.tsx

@@ -5,6 +5,7 @@ import { makeStyles } from 'tss-react/mui'
 import { useCreateWorkloadCatalogMutation } from 'redux/otomiApi'
 import { useSession } from 'providers/Session'
 import { useHistory } from 'react-router-dom'
+import { useSnackbar } from 'notistack'
 import CatalogCard from './CatalogCard'
 import TableToolbar from './TableToolbar'
 import CatalogAddChartCard from './CatalogAddChartCard'
@@ -75,6 +76,7 @@ export default function ({ teamId, catalogs }: Props): React.ReactElement {
   const { user } = useSession()
   const { isPlatformAdmin } = user
 
+  const { enqueueSnackbar } = useSnackbar()
   const [createWorkloadCatalog] = useCreateWorkloadCatalogMutation()
 
   useEffect(() => {
@@ -87,7 +89,7 @@ export default function ({ teamId, catalogs }: Props): React.ReactElement {
     setFilteredCatalog(filtered)
   }
 
-  const addChart = (values: NewChartValues) => {
+  const addChart = async (values: NewChartValues) => {
     let finalUrl = ''
 
     try {
@@ -106,11 +108,21 @@ export default function ({ teamId, catalogs }: Props): React.ReactElement {
 
     const payload: NewChartPayload = { ...values, teamId, userSub: user.sub, url: finalUrl }
     console.log('halo add chart no mem leaks', payload)
-    createWorkloadCatalog({ body: payload }).then((res) => {
-      console.log(res)
-      setOpenNewChartModal(false)
-      history.go(0)
-    })
+    try {
+      const result = await createWorkloadCatalog({ body: payload }).unwrap()
+      if (result) {
+        enqueueSnackbar('Chart successfully added', { variant: 'success' })
+        setOpenNewChartModal(false)
+        // Refresh catalog:
+        // await getWorkloadCatalog()
+      } else {
+        enqueueSnackbar('Error adding chart', { variant: 'error' })
+        setOpenNewChartModal(false)
+      }
+    } catch (error) {
+      console.error('Error adding chart:', error)
+      enqueueSnackbar('Error adding chart', { variant: 'error' })
+    }
   }
 
   return (

src/components/Markdown.tsx

@@ -23,7 +23,13 @@ const Header1 = createMDComp('h1', { ...headerStyle })
 const Header2 = createMDComp('h2', { ...headerStyle })
 const Header3 = createMDComp('h3', { ...mb })
 const Paragraph = createMDComp('p', { ...mb, ...lh })
-const Code = createMDComp('code', { borderRadius: '6px', padding: '1.5px 4px', backgroundColor: '#6e768164' })
+const UrlLink = createMDComp('a', { color: '#1CCAFF' })
+const Code = createMDComp('code', {
+  borderRadius: '6px',
+  padding: '1.5px 4px',
+  backgroundColor: '#6e768164',
+  textWrap: 'pretty',
+})
 const Pre = createMDComp('pre', {
   ...mb,
   backgroundColor: '#6e768164',
@@ -64,6 +70,9 @@ export default function Markdown({ readme, sx }: Props) {
             p: {
               component: Paragraph,
             },
+            a: {
+              component: UrlLink,
+            },
             code: {
               component: Code,
             },

src/components/NewChartModal.tsx

@@ -104,6 +104,9 @@ export default function NewChartModal({
   const [revision, setRevision] = useState('')
   const [allowTeams, setAllowTeams] = useState(true)
 
+  // Determines whether the GitHub URL is valid (i.e. a non-empty string that ends with "chart.yaml")
+  const isValidGithubChartUrl = githubUrl.trim() !== '' && githubUrl.toLowerCase().endsWith('chart.yaml')
+
   const getChart = async () => {
     if (!githubUrl) {
       console.error('No URL provided')
@@ -164,6 +167,16 @@ export default function NewChartModal({
     }
   }
 
+  // Common sx style to grey out disabled inputs.
+  const disabledSx = {
+    '& .MuiInputBase-root.Mui-disabled': {
+      backgroundColor: '#58585833',
+    },
+    '& .MuiFormLabel-root.MuiInputLabel-root.Mui-disabled': {
+      color: '#6b6b6b !important',
+    },
+  }
+
   return (
     <Modal open={open} onClose={handleClose}>
       <ModalBox>
@@ -177,6 +190,10 @@ export default function NewChartModal({
         )}
         <ModalContent>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            {/* Helper text */}
+            <Typography variant='body2' color='textSecondary'>
+              Please provide a valid GitHub URL pointing to a Chart.yaml file. The URL must end with chart.yaml.
+            </Typography>
             {/* Display the chart icon as a non-interactive image.
                 If chartIcon is not set, show a default placeholder image. */}
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
@@ -202,12 +219,39 @@ export default function NewChartModal({
                 Test connection
               </Button>
             </Box>
-
-            {/* Editable fields for the fetched chart data */}
-            <TextField label='Chart Name' value={chartName} onChange={(e) => setChartName(e.target.value)} fullWidth />
-            <TextField label='Icon URL' value={chartIcon} onChange={(e) => setChartIcon(e.target.value)} fullWidth />
-            <TextField label='Chart Path' value={chartPath} onChange={(e) => setChartPath(e.target.value)} fullWidth />
-            <TextField label='Revision' value={revision} onChange={(e) => setRevision(e.target.value)} fullWidth />
+            {/* Editable fields for the fetched chart data. They remain disabled until a valid URL is provided. */}
+            <TextField
+              label='Chart Name'
+              value={chartName}
+              onChange={(e) => setChartName(e.target.value)}
+              fullWidth
+              disabled={!isValidGithubChartUrl}
+              sx={disabledSx}
+            />
+            <TextField
+              label='Icon URL'
+              value={chartIcon}
+              onChange={(e) => setChartIcon(e.target.value)}
+              fullWidth
+              disabled={!isValidGithubChartUrl}
+              sx={disabledSx}
+            />
+            <TextField
+              label='Chart Path'
+              value={chartPath}
+              onChange={(e) => setChartPath(e.target.value)}
+              fullWidth
+              disabled={!isValidGithubChartUrl}
+              sx={disabledSx}
+            />
+            <TextField
+              label='Revision'
+              value={revision}
+              onChange={(e) => setRevision(e.target.value)}
+              fullWidth
+              disabled={!isValidGithubChartUrl}
+              sx={disabledSx}
+            />
             {/* New checkbox: Allow teams to use this chart */}
             <FormControlLabel
               control={