diff --git a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx index 51f1770b79..cab7262337 100644 --- a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx +++ b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx @@ -94,6 +94,7 @@ export const ApplicationEdit = () => { } else if (!application) { return

Application ({appName}) not found

; } + return ( <> diff --git a/frontend/src/component/application/ApplicationList/ApplicationList.tsx b/frontend/src/component/application/ApplicationList/ApplicationList.tsx index b45a5cba8a..35c0562234 100644 --- a/frontend/src/component/application/ApplicationList/ApplicationList.tsx +++ b/frontend/src/component/application/ApplicationList/ApplicationList.tsx @@ -60,7 +60,7 @@ export const ApplicationList = () => { - {icon} + {icon || 'apps'} } /> diff --git a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx index 7ae1ed40d7..d8f2527fd1 100644 --- a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx +++ b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx @@ -1,5 +1,5 @@ -import { ChangeEvent, useState } from 'react'; -import { Grid, TextField } from '@mui/material'; +import { ChangeEvent, useMemo, useState } from 'react'; +import { Grid, TextField, styled } from '@mui/material'; import { useThemeStyles } from 'themes/themeStyles'; import icons from 'component/application/iconNames'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; @@ -8,11 +8,18 @@ import useToast from 'hooks/useToast'; import { IApplication } from 'interfaces/application'; import useApplication from 'hooks/api/getters/useApplication/useApplication'; import { formatUnknownError } from 'utils/formatUnknownError'; +import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; interface IApplicationUpdateProps { application: IApplication; } +const StyledSelectContainer = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1), +})); + export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => { const { storeApplicationMetaData } = useApplicationsApi(); const { appName, icon, url, description } = application; @@ -41,18 +48,38 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => { } }; + const options = useMemo(() => icons.map((v) => ({ key: v, label: v })), []); + return ( - ({ key: v, label: v }))} - value={icon || 'apps'} - onChange={(key) => onChange('icon', key)} - /> + + onChange('icon', key)} + /> + +

Unleash is using Material Icons

+
+ + Preview icons on MUI.com + + + } + /> +