Skip to content

Commit d652544

Browse files
mortada-codesmortada-codes
committed
fix: error modal
1 parent 34961bd commit d652544

File tree

13 files changed

+251
-202
lines changed

13 files changed

+251
-202
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import styled from 'styled-components';
66
import 'swagger-ui-react/swagger-ui.css';
77

88
import {NotificationBox} from '@components';
9+
import {ErrorAlertModal} from '@components/ErrorAlertModal';
910

1011
import Router from './routes';
1112

@@ -24,6 +25,7 @@ const App = () => {
2425
</Suspense>
2526
</AppContainer>
2627
<NotificationBox />
28+
<ErrorAlertModal />
2729
</>
2830
);
2931
};

‎src/components/AddEnvoyFleetModal/AddEnvoyFleetModal.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import {useEffect} from 'react';
21
import {useDispatch} from 'react-redux';
32

43
import {Button, Form, Input, Radio, Select, Space, Typography} from 'antd';
@@ -12,8 +11,6 @@ import {closeEnvoyFleetModalModal} from '@redux/reducers/ui';
1211
import {useCreateFleetMutation, useGetNamespacesQuery, useGetServicesQuery} from '@redux/services/enhancedApi';
1312
import {GetServiceApiResponse} from '@redux/services/kuskApi';
1413

15-
import {renderErrorModal} from '@components/AntdCustom';
16-
1714
import * as S from './styled';
1815

1916
interface FleetForm {
@@ -33,38 +30,41 @@ const AddEnvoyFleetModal = () => {
3330
const {data: namespaces} = useGetNamespacesQuery();
3431
const {data: services} = useGetServicesQuery({});
3532

36-
const [createFleet, {isLoading: isLoadingNewFleet, isError, error, reset, isUninitialized}] =
37-
useCreateFleetMutation();
33+
const [createFleet, {isLoading: isLoadingNewFleet, isError, reset}] = useCreateFleetMutation();
3834

39-
useEffect(() => {
40-
if (!isUninitialized && isError && error?.message) {
41-
renderErrorModal({title: 'Unable to create Deployment', error: error?.message});
42-
}
43-
// eslint-disable-next-line react-hooks/exhaustive-deps
44-
}, [isError, isUninitialized]);
4535
const onBackHandler = () => {
4636
dispatch(closeEnvoyFleetModalModal());
4737
};
4838

4939
const onSubmitHandler = async () => {
50-
await form.validateFields();
51-
const {fleetInfo, portsInfo} = await form.getFieldsValue(true);
52-
form.submit();
53-
const portsList = portsInfo.ports.map((p: any) => ({
54-
port: Number(p.port),
55-
name: 'fleet',
56-
targetPort: 'http',
57-
}));
58-
59-
await createFleet({serviceItem: {...fleetInfo, ports: portsList, status: 'available'}}).unwrap();
60-
dispatch(closeEnvoyFleetModalModal());
61-
dispatch(
62-
setAlert({
63-
title: 'The Envoy fleet deployed successfully',
64-
description: `${fleetInfo.name} was deployed successfully in ${fleetInfo.namespace} namespace`,
65-
type: AlertEnum.Success,
66-
})
67-
);
40+
try {
41+
await form.validateFields();
42+
const {fleetInfo, portsInfo} = await form.getFieldsValue(true);
43+
form.submit();
44+
const portsList = portsInfo.ports.map((p: any) => ({
45+
port: Number(p.port),
46+
name: 'fleet',
47+
targetPort: 'http',
48+
}));
49+
50+
await createFleet({serviceItem: {...fleetInfo, ports: portsList, status: 'available'}}).unwrap();
51+
dispatch(closeEnvoyFleetModalModal());
52+
dispatch(
53+
setAlert({
54+
title: 'The Envoy fleet deployed successfully',
55+
description: `${fleetInfo.name} was deployed successfully in ${fleetInfo.namespace} namespace`,
56+
type: AlertEnum.Success,
57+
})
58+
);
59+
} catch (e: any) {
60+
dispatch(
61+
setAlert({
62+
title: 'Unable to create deployment',
63+
description: e?.message,
64+
type: AlertEnum.Error,
65+
})
66+
);
67+
}
6868
};
6969

7070
return (

‎src/components/AddStaticRouteModal/AddStaticRouteModal.tsx‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {useEffect, useState} from 'react';
1+
import {useState} from 'react';
22
import {useDispatch} from 'react-redux';
33
import {useNavigate} from 'react-router-dom';
44

@@ -15,7 +15,6 @@ import {setAlert} from '@redux/reducers/alert';
1515
import {closeStaticRouteModal} from '@redux/reducers/ui';
1616
import {useCreateStaticRouteMutation} from '@redux/services/enhancedApi';
1717

18-
import {renderErrorModal} from '@components/AntdCustom';
1918
import {TargetForm} from '@components/TargetForm';
2019

2120
import PathForm from './PathForm';
@@ -27,66 +26,69 @@ const AddStaticRouteModal = () => {
2726
const navigate = useNavigate();
2827
const dispatch = useDispatch();
2928
const [form] = Form.useForm();
30-
const [createStaticRoute, {error, isError, reset, isUninitialized}] = useCreateStaticRouteMutation();
29+
const [createStaticRoute, {isError, reset}] = useCreateStaticRouteMutation();
3130
const [currentStep, setCurrentStep] = useState(0);
3231
const step = currentStep === 0 ? 'routeInfo' : currentStep === 1 ? 'pathInfo' : 'targetInfo';
3332

3433
const okText = currentStep === 0 ? 'Add path' : currentStep === 1 ? 'Add target' : 'Create static route';
3534

36-
useEffect(() => {
37-
if (!isUninitialized && isError && error?.message) {
38-
renderErrorModal({title: 'Unable to deploy static route', error: error?.message});
39-
}
40-
// eslint-disable-next-line react-hooks/exhaustive-deps
41-
}, [isError, isUninitialized]);
42-
4335
const onSubmitHandler = async () => {
44-
await form.validateFields();
45-
if (step !== 'targetInfo') {
46-
setCurrentStep(currentStep + 1);
47-
return;
48-
}
49-
const {name, namespace, deployment, path, methods, upstream, redirect} = await form.getFieldsValue(true);
50-
51-
const newStaticRouteDefinition: StaticRoute = {
52-
apiVersion: 'gateway.kusk.io/v1alpha1',
53-
kind: 'StaticRoute',
54-
metadata: {
55-
name,
56-
},
57-
spec: {
58-
fleet: {
59-
name: deployment.split(',')[1],
60-
namespace: deployment.split(',')[0],
36+
try {
37+
await form.validateFields();
38+
if (step !== 'targetInfo') {
39+
setCurrentStep(currentStep + 1);
40+
return;
41+
}
42+
const {name, namespace, deployment, path, methods, upstream, redirect} = await form.getFieldsValue(true);
43+
44+
const newStaticRouteDefinition: StaticRoute = {
45+
apiVersion: 'gateway.kusk.io/v1alpha1',
46+
kind: 'StaticRoute',
47+
metadata: {
48+
name,
6149
},
62-
hosts: [],
63-
paths: {
64-
[path]: methods.reduce((acc: any, item: any) => {
65-
acc[item] = redirect ? {redirect} : {route: {upstream}};
66-
return acc;
67-
}, {}),
50+
spec: {
51+
fleet: {
52+
name: deployment.split(',')[1],
53+
namespace: deployment.split(',')[0],
54+
},
55+
hosts: [],
56+
paths: {
57+
[path]: methods.reduce((acc: any, item: any) => {
58+
acc[item] = redirect ? {redirect} : {route: {upstream}};
59+
return acc;
60+
}, {}),
61+
},
6862
},
69-
},
70-
};
71-
72-
const result = await createStaticRoute({
73-
body: {
74-
name,
75-
namespace,
76-
envoyFleetNamespace: deployment.split(',')[0],
77-
envoyFleetName: deployment.split(',')[1],
78-
openapi: YAML.stringify(newStaticRouteDefinition),
79-
},
80-
}).unwrap();
81-
dispatch(
82-
setAlert({
83-
title: 'Static route deployed successfully',
84-
description: `${name} was deployed successfully in ${namespace} namespace`,
85-
type: AlertEnum.Success,
86-
})
87-
);
88-
dispatch(closeStaticRouteModal());
89-
navigate(`${AppRoutes.STATIC_ROUTE}/${result.namespace}/${result.name}`);
63+
};
64+
65+
const result = await createStaticRoute({
66+
body: {
67+
name,
68+
namespace,
69+
envoyFleetNamespace: deployment.split(',')[0],
70+
envoyFleetName: deployment.split(',')[1],
71+
openapi: YAML.stringify(newStaticRouteDefinition),
72+
},
73+
}).unwrap();
74+
dispatch(
75+
setAlert({
76+
title: 'Static route deployed successfully',
77+
description: `${name} was deployed successfully in ${namespace} namespace`,
78+
type: AlertEnum.Success,
79+
})
80+
);
81+
dispatch(closeStaticRouteModal());
82+
navigate(`${AppRoutes.STATIC_ROUTE}/${result.namespace}/${result.name}`);
83+
} catch (e: any) {
84+
dispatch(
85+
setAlert({
86+
title: 'Unable to deploy Static Route',
87+
description: e?.message,
88+
type: AlertEnum.Error,
89+
})
90+
);
91+
}
9092
};
9193

9294
const onBackHandler = () => {

‎src/components/AntdCustom/index.tsx‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {ReactNode} from 'react';
22

3-
import {Modal, Menu as RawMenu, Tag, Typography} from 'antd';
3+
import {Menu as RawMenu, Tag, Typography} from 'antd';
44

55
import {
66
CloseOutlined as RawCloseOutlined,
@@ -187,25 +187,3 @@ export const Divider = styled.div`
187187
background-color: #f0f0f0;
188188
}
189189
`;
190-
191-
export const renderErrorModal = ({title, error}: {title: string; error: string}) => {
192-
return Modal.error({
193-
type: 'error',
194-
title,
195-
content: (
196-
<div>
197-
<Typography.Text>{error}</Typography.Text>
198-
<br />
199-
<br />
200-
<Typography.Text>
201-
If the issue persists or should you need help, please contact us on&nbsp;
202-
<Typography.Link href="https://discord.com/channels/884464549347074049/913784299273211905" target="_blank">
203-
Discord.
204-
</Typography.Link>
205-
</Typography.Text>
206-
</div>
207-
),
208-
okText: 'Got it!',
209-
cancelText: null,
210-
});
211-
};

‎src/components/ApiDetails/ApiSettings/Settings/General.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ const GeneralSettings = () => {
4343
type: AlertEnum.Success,
4444
})
4545
);
46-
} catch (e) {
46+
} catch (e: any) {
4747
dispatch(
4848
setAlert({
49-
title: 'Deleting API was failed',
50-
description: `Something went wrong!`,
49+
title: 'Unable to delete API',
50+
description: e?.message,
5151
type: AlertEnum.Error,
5252
})
5353
);

‎src/components/ApiPublishModal/CanvasApiModal.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import {closeApiPublishModal, closeCanvasApiModal} from '@redux/reducers/ui';
2020
import {useDeployApiMutation, useGetApisQuery, useGetNamespacesQuery} from '@redux/services/enhancedApi';
2121
import {ApiItem} from '@redux/services/kuskApi';
2222

23-
import {renderErrorModal} from '@components/AntdCustom';
2423
import {FleetDropdown} from '@components/FormComponents';
2524

2625
import {checkDuplicateAPI, formatApiName} from '@utils/api';
@@ -35,7 +34,7 @@ const CanvasApiModal = () => {
3534
const openapiField = Form.useWatch('openapi', form);
3635
const {data: apis} = useGetApisQuery({});
3736
const {data: namespaces} = useGetNamespacesQuery();
38-
const [deployAPI, {isError, error, isUninitialized}] = useDeployApiMutation();
37+
const [deployAPI] = useDeployApiMutation();
3938

4039
useEffect(() => {
4140
if (apiCanvasType === 'template') {
@@ -53,13 +52,6 @@ const CanvasApiModal = () => {
5352
// eslint-disable-next-line react-hooks/exhaustive-deps
5453
}, [openapiField]);
5554

56-
useEffect(() => {
57-
if (!isUninitialized && isError && error?.message) {
58-
renderErrorModal({title: 'Unable to deploy API', error: error?.message});
59-
}
60-
// eslint-disable-next-line react-hooks/exhaustive-deps
61-
}, [isError, isUninitialized]);
62-
6355
const onBackHandler = () => {
6456
dispatch(closeCanvasApiModal());
6557
};
@@ -103,7 +95,15 @@ const CanvasApiModal = () => {
10395
dispatch(selectApi(apiData));
10496
navigate(`${AppRoutes.API}/${apiData.namespace}/${apiData.name}`);
10597
})
106-
.catch(() => {});
98+
.catch(error => {
99+
dispatch(
100+
setAlert({
101+
title: 'Unable to deploy API',
102+
description: error?.message,
103+
type: AlertEnum.Error,
104+
})
105+
);
106+
});
107107
};
108108

109109
return (

‎src/components/ApiPublishModal/FileApiModal.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import {useEffect} from 'react';
21
import {useDispatch} from 'react-redux';
32
import {useNavigate} from 'react-router-dom';
43

@@ -19,7 +18,6 @@ import {closeApiPublishModal, closeFileApiModal} from '@redux/reducers/ui';
1918
import {useDeployApiMutation, useGetApisQuery, useGetNamespacesQuery} from '@redux/services/enhancedApi';
2019
import {ApiItem} from '@redux/services/kuskApi';
2120

22-
import {renderErrorModal} from '@components/AntdCustom';
2321
import {FilePicker, FleetDropdown} from '@components/FormComponents';
2422

2523
import {checkDuplicateAPI, formatApiName} from '@utils/api';
@@ -31,14 +29,7 @@ const FileApiModal = () => {
3129
const type = Form.useWatch('type', form);
3230
const {data: apis} = useGetApisQuery({});
3331
const {data: namespaces} = useGetNamespacesQuery();
34-
const [deployAPI, {isError, error, isUninitialized}] = useDeployApiMutation();
35-
36-
useEffect(() => {
37-
if (!isUninitialized && isError && error?.message) {
38-
renderErrorModal({title: 'Unable to deploy API', error: error?.message});
39-
}
40-
// eslint-disable-next-line react-hooks/exhaustive-deps
41-
}, [isError, isUninitialized]);
32+
const [deployAPI] = useDeployApiMutation();
4233

4334
const onBackHandler = () => {
4435
dispatch(closeFileApiModal());
@@ -84,6 +75,15 @@ const FileApiModal = () => {
8475
);
8576
dispatch(selectApi(apiData));
8677
navigate(`${AppRoutes.API}/${apiData.namespace}/${apiData.name}`);
78+
})
79+
.catch((error: any) => {
80+
dispatch(
81+
setAlert({
82+
title: 'Unable to deploy API',
83+
description: error?.message,
84+
type: AlertEnum.Error,
85+
})
86+
);
8787
});
8888
};
8989

‎src/components/Apis/ApisList/ApisListTable.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ const ApisListTable: React.FC<IProps> = props => {
5555
type: AlertEnum.Success,
5656
})
5757
);
58-
} catch (e) {
58+
} catch (e: any) {
5959
dispatch(
6060
setAlert({
61-
title: 'Deleting API was failed',
62-
description: `Something went wrong!`,
61+
title: 'Unable to delete API',
62+
description: e?.message,
6363
type: AlertEnum.Error,
6464
})
6565
);

0 commit comments

Comments
 (0)