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
+
+ >
+ }
+ />
+