diff --git a/frontend/src/component/application/Application.tsx b/frontend/src/component/application/Application.tsx index 2d9c24d63c..f531b74a1f 100644 --- a/frontend/src/component/application/Application.tsx +++ b/frontend/src/component/application/Application.tsx @@ -78,7 +78,7 @@ export const Application = () => { const { setToastData, setToastApiError } = useToast(); const { pathname } = useLocation(); - const basePath = `/applications/${name}`; + const basePath = `/applications/${encodeURIComponent(name)}`; const [showDialog, setShowDialog] = useState(false); diff --git a/frontend/src/component/application/ApplicationList/PaginatedApplicationList.tsx b/frontend/src/component/application/ApplicationList/PaginatedApplicationList.tsx index 3cad383249..51bf588448 100644 --- a/frontend/src/component/application/ApplicationList/PaginatedApplicationList.tsx +++ b/frontend/src/component/application/ApplicationList/PaginatedApplicationList.tsx @@ -109,7 +109,7 @@ export const PaginatedApplicationList = () => { }: any) => ( ), diff --git a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx deleted file mode 100644 index 62c5779488..0000000000 --- a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { type 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'; -import useApplicationsApi from 'hooks/api/actions/useApplicationsApi/useApplicationsApi'; -import useToast from 'hooks/useToast'; -import type { 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; - const { refetchApplication } = useApplication(appName); - const [localUrl, setLocalUrl] = useState(url || ''); - const [localDescription, setLocalDescription] = useState(description || ''); - const { setToastData, setToastApiError } = useToast(); - const { classes: themeStyles } = useThemeStyles(); - - const onChange = async ( - field: string, - value: string, - event?: ChangeEvent, - ) => { - event?.preventDefault(); - try { - await storeApplicationMetaData(appName, field, value); - refetchApplication(); - setToastData({ - type: 'success', - text: 'Updated Successfully', - }); - } catch (error: unknown) { - setToastApiError(formatUnknownError(error)); - } - }; - - const options = useMemo(() => icons.map((v) => ({ key: v, label: v })), []); - - return ( - - - - - onChange('icon', key)} - /> - -

Unleash is using Material Icons

-
- - Preview icons on MUI.com - - - } - /> - - - - setLocalUrl(e.target.value)} - label='Application URL' - placeholder='https://example.com' - type='url' - variant='outlined' - size='small' - onBlur={(e) => onChange('url', localUrl, e)} - /> - - - setLocalDescription(e.target.value)} - onBlur={(e) => - onChange('description', localDescription, e) - } - /> - - - - ); -}; diff --git a/frontend/src/component/project/ProjectApplications/ProjectApplications.tsx b/frontend/src/component/project/ProjectApplications/ProjectApplications.tsx index ec880e82cf..b2b12025c8 100644 --- a/frontend/src/component/project/ProjectApplications/ProjectApplications.tsx +++ b/frontend/src/component/project/ProjectApplications/ProjectApplications.tsx @@ -99,7 +99,9 @@ export const ProjectApplications = () => { title={row.original.name} onClick={() => { trackProjectApplicationClick(); - navigate(`/applications/${row.original.name}`); + navigate( + `/applications/${encodeURIComponent(row.original.name)}`, + ); }} /> ), diff --git a/frontend/src/hooks/api/actions/useApplicationsApi/useApplicationsApi.ts b/frontend/src/hooks/api/actions/useApplicationsApi/useApplicationsApi.ts index a00c075248..41ba3ba52e 100644 --- a/frontend/src/hooks/api/actions/useApplicationsApi/useApplicationsApi.ts +++ b/frontend/src/hooks/api/actions/useApplicationsApi/useApplicationsApi.ts @@ -7,22 +7,6 @@ const useApplicationsApi = () => { const URI = 'api/admin/metrics/applications'; - const storeApplicationMetaData = async ( - appName: string, - key: string, - value: string, - ) => { - const data: { [key: string]: any } = {}; - data[key] = value; - const path = `${URI}/${appName}`; - const req = createRequest(path, { - method: 'POST', - body: JSON.stringify(data), - }); - - return makeRequest(req.caller, req.id); - }; - const deleteApplication = async (appName: string) => { const path = `${URI}/${encodeURIComponent(appName)}`; const req = createRequest(path, { method: 'DELETE' }); @@ -31,7 +15,6 @@ const useApplicationsApi = () => { }; return { - storeApplicationMetaData, deleteApplication, errors, loading, diff --git a/frontend/src/hooks/api/getters/useApplication/useApplication.ts b/frontend/src/hooks/api/getters/useApplication/useApplication.ts index 17e52ec7ae..c819a05675 100644 --- a/frontend/src/hooks/api/getters/useApplication/useApplication.ts +++ b/frontend/src/hooks/api/getters/useApplication/useApplication.ts @@ -16,7 +16,8 @@ const useApplication = ( name: string, options: SWRConfiguration = {}, ): IUseApplicationOutput => { - const path = formatApiPath(`api/admin/metrics/applications/${name}`); + const encodedName = encodeURIComponent(name); + const path = formatApiPath(`api/admin/metrics/applications/${encodedName}`); const fetcher = async () => { return fetch(path, { @@ -26,7 +27,7 @@ const useApplication = ( .then((res) => res.json()); }; - const APPLICATION_CACHE_KEY = `api/admin/metrics/applications/${name}`; + const APPLICATION_CACHE_KEY = `api/admin/metrics/applications/${encodedName}`; const { data, error } = useSWR(APPLICATION_CACHE_KEY, fetcher, { ...options, @@ -44,7 +45,7 @@ const useApplication = ( return { application: data || { - appName: name, + appName: encodedName, color: '', createdAt: '2022-02-02T21:04:00.268Z', description: '', diff --git a/frontend/src/hooks/api/getters/useApplicationOverview/useApplicationOverview.ts b/frontend/src/hooks/api/getters/useApplicationOverview/useApplicationOverview.ts index 98a9b50ca5..d876f8a880 100644 --- a/frontend/src/hooks/api/getters/useApplicationOverview/useApplicationOverview.ts +++ b/frontend/src/hooks/api/getters/useApplicationOverview/useApplicationOverview.ts @@ -15,8 +15,9 @@ export const useApplicationOverview = ( application: string, options: SWRConfiguration = {}, ) => { + const encodedApplication = encodeURIComponent(application); const path = formatApiPath( - `api/admin/metrics/applications/${application}/overview`, + `api/admin/metrics/applications/${encodedApplication}/overview`, ); const { data, error } = useSWR( path, diff --git a/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts b/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts index 5c91c1fdd8..c3793e2a4a 100644 --- a/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts +++ b/frontend/src/hooks/api/getters/useConnectedInstances/useConnectedInstances.ts @@ -17,8 +17,9 @@ export const useConnectedInstances = ( environment?: string, options: SWRConfiguration = {}, ) => { + const encodedApplication = encodeURIComponent(application); const path = formatApiPath( - `api/admin/metrics/instances/${application}/environment/${environment}`, + `api/admin/metrics/instances/${encodedApplication}/environment/${environment}`, ); const { data, error } = useConditionalSWR( Boolean(environment),