Skip to content

Commit d238cb1

Browse files
ngsanthoshngsanthosh
committed
Review changes of CodeRabbit
1 parent cdafc76 commit d238cb1

File tree

5 files changed

+175
-182
lines changed

5 files changed

+175
-182
lines changed

‎apps/console/src/layouts/app-layout.tsx‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -107,19 +107,27 @@ const AppLayout: FunctionComponent<Record<string, unknown>> = (): ReactElement =
107107
: (
108108
<Route
109109
path={ route.path }
110-
render={ (renderProps: RouteComponentProps) =>
111-
route.component
112-
? (
113-
<ErrorBoundary
114-
onChunkLoadError={ AppUtils.onChunkLoadError }
115-
handleError={ handleRouteChunkError }
116-
fallback={ brokenPageFallback }
117-
>
118-
<route.component { ...renderProps } />
119-
</ErrorBoundary>
120-
)
121-
: null
122-
}
110+
render={ (renderProps: RouteComponentProps) => {
111+
if (!route.component) {
112+
return null;
113+
}
114+
115+
const locationKey: string = renderProps.location.key
116+
?? `${ renderProps.location.pathname }::`
117+
+ `${ renderProps.location.search }::`
118+
+ `${ renderProps.location.hash }`;
119+
120+
return (
121+
<ErrorBoundary
122+
key={ locationKey }
123+
onChunkLoadError={ AppUtils.onChunkLoadError }
124+
handleError={ handleRouteChunkError }
125+
fallback={ brokenPageFallback }
126+
>
127+
<route.component { ...renderProps } />
128+
</ErrorBoundary>
129+
);
130+
} }
123131
key={ index }
124132
exact={ route.exact }
125133
/>

‎apps/console/src/layouts/dashboard-layout.tsx‎

Lines changed: 43 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,29 @@ const DashboardLayout: FunctionComponent<RouteComponentProps> = (
194194
setPreferences({ leftNavbarCollapsed: !leftNavbarCollapsed });
195195
};
196196

197+
const handleRouteChunkError = (_error: Error, _errorInfo: React.ErrorInfo): void => {
198+
sessionStorage.setItem("auth_callback_url_console", config.deployment.appHomePath);
199+
};
200+
201+
const brokenPageSubtitles: string[] = [
202+
t("console:common.placeholders.brokenPage.subtitles.0"),
203+
t("console:common.placeholders.brokenPage.subtitles.1")
204+
];
205+
206+
const brokenPageFallback: ReactNode = (
207+
<EmptyPlaceholder
208+
action={ (
209+
<LinkButton onClick={ () => CommonUtils.refreshPage() }>
210+
{ t("console:common.placeholders.brokenPage.action") }
211+
</LinkButton>
212+
) }
213+
image={ getEmptyPlaceholderIllustrations().brokenPage }
214+
imageSize="tiny"
215+
subtitle={ brokenPageSubtitles }
216+
title={ t("console:common.placeholders.brokenPage.title") }
217+
/>
218+
);
219+
197220
/**
198221
* Conditionally renders a route. If a route has defined a Redirect to
199222
* URL, it will be directed to the specified one. If the route is stated
@@ -216,46 +239,29 @@ const DashboardLayout: FunctionComponent<RouteComponentProps> = (
216239
) : (
217240
<Route
218241
path={ route.path }
219-
render={ (renderProps: RouteComponentProps): ReactNode =>
220-
route.component ? (
242+
render={ (renderProps: RouteComponentProps): ReactNode => {
243+
if (!route.component) {
244+
return null;
245+
}
246+
247+
const locationKey: string = renderProps.location.key
248+
?? [
249+
renderProps.location.pathname,
250+
renderProps.location.search,
251+
renderProps.location.hash
252+
].join("::");
253+
254+
return (
221255
<ErrorBoundary
256+
key={ locationKey }
222257
onChunkLoadError={ AppUtils.onChunkLoadError }
223-
handleError={ (_error: Error, _errorInfo: React.ErrorInfo) => {
224-
sessionStorage.setItem("auth_callback_url_console", config.deployment.appHomePath);
225-
} }
226-
fallback={
227-
(<EmptyPlaceholder
228-
action={
229-
(<LinkButton
230-
onClick={ () => CommonUtils.refreshPage() }
231-
>
232-
{ t(
233-
"console:common.placeholders.brokenPage.action"
234-
) }
235-
</LinkButton>)
236-
}
237-
image={
238-
getEmptyPlaceholderIllustrations().brokenPage
239-
}
240-
imageSize="tiny"
241-
subtitle={ [
242-
t(
243-
"console:common.placeholders.brokenPage.subtitles.0"
244-
),
245-
t(
246-
"console:common.placeholders.brokenPage.subtitles.1"
247-
)
248-
] }
249-
title={ t(
250-
"console:common.placeholders.brokenPage.title"
251-
) }
252-
/>)
253-
}
258+
handleError={ handleRouteChunkError }
259+
fallback={ brokenPageFallback }
254260
>
255261
<route.component { ...renderProps } />
256262
</ErrorBoundary>
257-
) : null
258-
}
263+
);
264+
} }
259265
key={ key }
260266
exact={ route.exact }
261267
/>
@@ -469,37 +475,8 @@ const DashboardLayout: FunctionComponent<RouteComponentProps> = (
469475
>
470476
<ErrorBoundary
471477
onChunkLoadError={ AppUtils.onChunkLoadError }
472-
handleError={ (_error: Error, _errorInfo: React.ErrorInfo) => {
473-
sessionStorage.setItem("auth_callback_url_console", config.deployment.appHomePath);
474-
} }
475-
fallback={
476-
(<EmptyPlaceholder
477-
action={
478-
(<LinkButton
479-
onClick={ () => CommonUtils.refreshPage() }
480-
>
481-
{ t(
482-
"console:common.placeholders.brokenPage.action"
483-
) }
484-
</LinkButton>)
485-
}
486-
image={
487-
getEmptyPlaceholderIllustrations().brokenPage
488-
}
489-
imageSize="tiny"
490-
subtitle={ [
491-
t(
492-
"console:common.placeholders.brokenPage.subtitles.0"
493-
),
494-
t(
495-
"console:common.placeholders.brokenPage.subtitles.1"
496-
)
497-
] }
498-
title={ t(
499-
"console:common.placeholders.brokenPage.title"
500-
) }
501-
/>)
502-
}
478+
handleError={ handleRouteChunkError }
479+
fallback={ brokenPageFallback }
503480
>
504481
<Suspense fallback={ <ContentLoader dimmer={ false } /> }>
505482
{

‎apps/console/src/layouts/default-layout.tsx‎

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,29 @@ export const DefaultLayout: FunctionComponent<DefaultLayoutPropsInterface> = ({
124124
* @param key - Index of the route.
125125
* @returns Resolved route to be rendered.
126126
*/
127+
const handleRouteChunkError = (_error: Error, _errorInfo: React.ErrorInfo): void => {
128+
sessionStorage.setItem("auth_callback_url_console", appHomePath);
129+
};
130+
131+
const brokenPageSubtitles: string[] = [
132+
t("console:common.placeholders.brokenPage.subtitles.0"),
133+
t("console:common.placeholders.brokenPage.subtitles.1")
134+
];
135+
136+
const brokenPageFallback: ReactNode = (
137+
<EmptyPlaceholder
138+
action={ (
139+
<LinkButton onClick={ () => CommonUtils.refreshPage() }>
140+
{ t("console:common.placeholders.brokenPage.action") }
141+
</LinkButton>
142+
) }
143+
image={ getEmptyPlaceholderIllustrations().brokenPage }
144+
imageSize="tiny"
145+
subtitle={ brokenPageSubtitles }
146+
title={ t("console:common.placeholders.brokenPage.title") }
147+
/>
148+
);
149+
127150
const renderRoute = (route: RouteInterface, key: number): ReactNode =>
128151
route.redirectTo ? (
129152
<Redirect key={ key } to={ route.redirectTo } />
@@ -137,34 +160,29 @@ export const DefaultLayout: FunctionComponent<DefaultLayoutPropsInterface> = ({
137160
) : (
138161
<Route
139162
path={ route.path }
140-
render={ (renderProps: RouteComponentProps): ReactNode =>
141-
route.component ? (
163+
render={ (renderProps: RouteComponentProps): ReactNode => {
164+
if (!route.component) {
165+
return null;
166+
}
167+
168+
const locationKey: string = renderProps.location.key
169+
?? [
170+
renderProps.location.pathname,
171+
renderProps.location.search,
172+
renderProps.location.hash
173+
].join("::");
174+
175+
return (
142176
<ErrorBoundary
177+
key={ locationKey }
143178
onChunkLoadError={ AppUtils.onChunkLoadError }
144-
handleError={ (_error: Error, _errorInfo: React.ErrorInfo) => {
145-
sessionStorage.setItem("auth_callback_url_console", appHomePath);
146-
} }
147-
fallback={
148-
(<EmptyPlaceholder
149-
action={
150-
(<LinkButton onClick={ () => CommonUtils.refreshPage() }>
151-
{ t("console:common.placeholders.brokenPage.action") }
152-
</LinkButton>)
153-
}
154-
image={ getEmptyPlaceholderIllustrations().brokenPage }
155-
imageSize="tiny"
156-
subtitle={ [
157-
t("console:common.placeholders.brokenPage.subtitles.0"),
158-
t("console:common.placeholders.brokenPage.subtitles.1")
159-
] }
160-
title={ t("console:common.placeholders.brokenPage.title") }
161-
/>)
162-
}
179+
handleError={ handleRouteChunkError }
180+
fallback={ brokenPageFallback }
163181
>
164182
<route.component { ...renderProps } />
165183
</ErrorBoundary>
166-
) : null
167-
}
184+
);
185+
} }
168186
key={ key }
169187
exact={ route.exact }
170188
/>
@@ -227,25 +245,8 @@ export const DefaultLayout: FunctionComponent<DefaultLayoutPropsInterface> = ({
227245
>
228246
<ErrorBoundary
229247
onChunkLoadError={ AppUtils.onChunkLoadError }
230-
handleError={ (_error: Error, _errorInfo: React.ErrorInfo) => {
231-
sessionStorage.setItem("auth_callback_url_console", appHomePath);
232-
} }
233-
fallback={
234-
(<EmptyPlaceholder
235-
action={
236-
(<LinkButton onClick={ () => CommonUtils.refreshPage() }>
237-
{ t("console:common.placeholders.brokenPage.action") }
238-
</LinkButton>)
239-
}
240-
image={ getEmptyPlaceholderIllustrations().brokenPage }
241-
imageSize="tiny"
242-
subtitle={ [
243-
t("console:common.placeholders.brokenPage.subtitles.0"),
244-
t("console:common.placeholders.brokenPage.subtitles.1")
245-
] }
246-
title={ t("console:common.placeholders.brokenPage.title") }
247-
/>)
248-
}
248+
handleError={ handleRouteChunkError }
249+
fallback={ brokenPageFallback }
249250
>
250251
<Suspense fallback={ <ContentLoader dimmer={ false } /> }>
251252
{ isMarketingConsentBannerEnabled && applicationConfig.marketingConsent.getBannerComponent() }

0 commit comments

Comments
 (0)