Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +01:00
Code Issues Projects Releases Wiki Activity

Fix: icon rendering issue in ApplicationList and add help to app update (#5730)

Browse Source 
- Fixed app icon rendering
- Added tooltip with link to MUI
This commit is contained in:
Tymoteusz Czech 2023-12-27 18:35:08 +01:00 committed by GitHub
parent 9683dda8ec
commit eeb2b2115e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
View File

@ -94,6 +94,7 @@ export const ApplicationEdit = () => {
} else if (!application) {
return <p>Application ({appName}) not found</p>;
}
return (
<>
<PageContent>

2
frontend/src/component/application/ApplicationList/ApplicationList.tsx
View File

@ -60,7 +60,7 @@ export const ApplicationList = () => {
<IconCell
icon={
<Avatar>
<Icon>{icon}</Icon>
<Icon>{icon || 'apps'}</Icon>
</Avatar>
}
/>

47
frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx
View File

@ -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 (
<Grid container style={{ marginTop: '1rem' }}>
<Grid item sm={12} xs={12} className={themeStyles.contentSpacingY}>
<Grid item>
<GeneralSelect
name='iconSelect'
id='selectIcon'
label='Icon'
options={icons.map((v) => ({ key: v, label: v }))}
value={icon || 'apps'}
onChange={(key) => onChange('icon', key)}
/>
<StyledSelectContainer>
<GeneralSelect
name='iconSelect'
id='selectIcon'
label='Icon'
options={options}
value={icon || 'apps'}
onChange={(key) => onChange('icon', key)}
/>
<HelpIcon
htmlTooltip
tooltip={
<>
<p>Unleash is using Material Icons</p>
<br />
<a
href='https://mui.com/material-ui/material-icons/'
target='_blank'
rel='noreferrer'
>
Preview icons on MUI.com
</a>
</>
}
/>
</StyledSelectContainer>
</Grid>
<Grid item>
<TextField