feat: Handle 404 pages

src/components/ErrorContent/index.tsx

@@ -61,8 +61,31 @@ export const ErrorContent = ({
             </Stack>
           </Stack>
         );
+      case 404:
+        return (
+          <Stack
+            direction={orientation === 'horizontal' ? 'row' : 'column'}
+            spacing={1}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Icon icon={'tabler:error-404'} color="#A2A7B7" width={48} height={48} />
+            <Stack spacing={1} direction="row" alignItems="center">
+              <Typography component="span" fontSize={theme.typography.pxToRem(14)} color="#596D80">
+                Sorry. The requested resource was not found.
+              </Typography>
+              <Link
+                component={'button'}
+                onClick={handleOpen}
+                sx={{ fontSize: theme.typography.pxToRem(14) }}
+              >
+                More details
+              </Link>
+            </Stack>
+          </Stack>
+        );
       default:
-        return 'Not Found';
+        return 'Oops! Something went wrong. Please try again later.';
     }
   }, [error?.status, orientation, theme.typography]);
 

src/pages/cdpipeline-details/view.tsx

@@ -2,6 +2,8 @@ import { Router } from '@kinvolk/headlamp-plugin/lib';
 import { Grid, Typography, useTheme } from '@mui/material';
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { ErrorContent } from '../../components/ErrorContent';
+import { LoadingWrapper } from '../../components/LoadingWrapper';
 import { PageWrapper } from '../../components/PageWrapper';
 import { QuickLink } from '../../components/QuickLink';
 import { Section } from '../../components/Section';
@@ -29,6 +31,27 @@ export const PageView = () => {
   const { data: QuickLinksURLS } = useQuickLinksURLsQuery(namespace);
   const permissions = useTypedPermissions();
 
+  const resourceIsLoaded = !CDPipeline.isLoading && !CDPipeline.error;
+
+  const renderPageContent = React.useCallback(() => {
+    if (CDPipeline.error) {
+      return <ErrorContent error={CDPipeline.error} />;
+    }
+
+    return (
+      <LoadingWrapper isLoading={CDPipeline.isLoading}>
+        <Grid container spacing={3}>
+          <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <StageListFilter />
+          </Grid>
+          <Grid item xs={12} sx={{ pr: '2px' }}>
+            <StageList />
+          </Grid>
+        </Grid>
+      </LoadingWrapper>
+    );
+  }, [CDPipeline.error, CDPipeline.isLoading]);
+
   return (
     <PageWrapper
       breadcrumbs={[
@@ -61,7 +84,7 @@ export const PageView = () => {
               isTextButton
             />
           </Grid>
-          {!CDPipeline.isLoading && (
+          {resourceIsLoaded && (
             <>
               <Grid item>
                 <CDPipelineActionsMenu
@@ -82,14 +105,7 @@ export const PageView = () => {
         title={<Typography fontSize={theme.typography.pxToRem(48)}>{name}</Typography>}
         description={`Defines the sequence and logic for promoting artifacts through various environments. It maps out an artifact's progression path from development to production.`}
       >
-        <Grid container spacing={3}>
-          <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <StageListFilter />
-          </Grid>
-          <Grid item xs={12} sx={{ pr: '2px' }}>
-            <StageList />
-          </Grid>
-        </Grid>
+        {renderPageContent()}
       </Section>
     </PageWrapper>
   );

src/pages/component-details/view.tsx

@@ -2,6 +2,8 @@ import { Router } from '@kinvolk/headlamp-plugin/lib';
 import { Stack } from '@mui/material';
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { ErrorContent } from '../../components/ErrorContent';
+import { LoadingWrapper } from '../../components/LoadingWrapper';
 import { PageWrapper } from '../../components/PageWrapper';
 import { QuickLink } from '../../components/QuickLink';
 import { Section } from '../../components/Section';
@@ -37,6 +39,21 @@ export const PageView = () => {
 
   const { activeTab, handleChangeTab } = useTabsContext();
 
+  const resourceIsLoaded = !component.isLoading && !component.error;
+
+  const renderPageContent = React.useCallback(() => {
+    if (component.error) {
+      return <ErrorContent error={component.error} />;
+    }
+
+    return (
+      <LoadingWrapper isLoading={component.isLoading}>
+        <Resources />
+        <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
+      </LoadingWrapper>
+    );
+  }, [activeTab, component.error, component.isLoading, handleChangeTab, tabs]);
+
   return (
     <PageWrapper
       breadcrumbs={[
@@ -52,7 +69,7 @@ export const PageView = () => {
       ]}
       headerSlot={
         <>
-          {!!component.data && (
+          {resourceIsLoaded && (
             <div style={{ marginLeft: 'auto' }}>
               <Stack spacing={2} direction="row" alignItems="center">
                 <QuickLink
@@ -103,8 +120,7 @@ export const PageView = () => {
         title={name}
         description={'Review your codebases, monitor their status, and execute build pipelines.'}
       >
-        <Resources />
-        <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
+        {renderPageContent()}
       </Section>
     </PageWrapper>
   );

src/pages/pipeline-details/view.tsx

@@ -1,6 +1,7 @@
 import { Router } from '@kinvolk/headlamp-plugin/lib';
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { ErrorContent } from '../../components/ErrorContent';
 import { LoadingWrapper } from '../../components/LoadingWrapper';
 import { PageWrapper } from '../../components/PageWrapper';
 import { Section } from '../../components/Section';
@@ -30,6 +31,28 @@ export const PageView = () => {
   const tabs = useTabs();
   const { activeTab, handleChangeTab } = useTabsContext();
 
+  const resourceIsLoaded =
+    !pipelineRun.isLoading && !pipelineRunDataIsLoading && !pipelineRun.error;
+
+  const renderPageContent = React.useCallback(() => {
+    if (pipelineRun.error) {
+      return <ErrorContent error={pipelineRun.error} />;
+    }
+
+    return (
+      <LoadingWrapper isLoading={pipelineRun.isLoading || pipelineRunDataIsLoading}>
+        <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
+      </LoadingWrapper>
+    );
+  }, [
+    pipelineRun.error,
+    pipelineRun.isLoading,
+    pipelineRunDataIsLoading,
+    tabs,
+    activeTab,
+    handleChangeTab,
+  ]);
+
   return (
     <PageWrapper
       breadcrumbs={[
@@ -45,7 +68,7 @@ export const PageView = () => {
       ]}
       headerSlot={
         <div>
-          {!pipelineRun.isLoading && (
+          {resourceIsLoaded && (
             <PipelineRunActionsMenu
               data={{
                 pipelineRun: pipelineRun.data,
@@ -58,11 +81,7 @@ export const PageView = () => {
         </div>
       }
     >
-      <Section title={name}>
-        <LoadingWrapper isLoading={pipelineRunDataIsLoading}>
-          <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
-        </LoadingWrapper>
-      </Section>
+      <Section title={name}>{renderPageContent()}</Section>
     </PageWrapper>
   );
 };

src/pages/stage-details/view.tsx

@@ -1,7 +1,9 @@
 import { Router } from '@kinvolk/headlamp-plugin/lib';
-import { Box, CircularProgress, Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { ErrorContent } from '../../components/ErrorContent';
+import { LoadingWrapper } from '../../components/LoadingWrapper';
 import { PageWrapper } from '../../components/PageWrapper';
 import { QuickLink } from '../../components/QuickLink';
 import { Section } from '../../components/Section';
@@ -28,7 +30,7 @@ export const PageView = () => {
 
   const { CDPipeline, stages, QuickLinks, QuickLinksURLs } = useDataContext();
   const {
-    stage: { data: stage, isLoading: isStageLoading },
+    stage: { data: stage, isLoading: isStageLoading, error: stageError },
   } = useDynamicDataContext();
 
   const grafanaQuickLink =
@@ -53,6 +55,20 @@ export const PageView = () => {
 
   const { activeTab, handleChangeTab } = useTabsContext();
 
+  const resourceIsLoaded = !isStageLoading && !stageError;
+
+  const renderPageContent = React.useCallback(() => {
+    if (stageError) {
+      return <ErrorContent error={stageError} />;
+    }
+
+    return (
+      <LoadingWrapper isLoading={isStageLoading}>
+        <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
+      </LoadingWrapper>
+    );
+  }, [activeTab, handleChangeTab, isStageLoading, stageError, tabs]);
+
   return (
     <PageWrapper
       breadcrumbs={[
@@ -73,7 +89,7 @@ export const PageView = () => {
       ]}
       headerSlot={
         !isDataLoading &&
-        !isStageLoading && (
+        resourceIsLoaded && (
           <Stack direction="row" alignItems="center" spacing={1}>
             <QuickLink
               name={{
@@ -139,13 +155,7 @@ export const PageView = () => {
           'Manage, deploy, test, and troubleshoot your applications across distinct Environments.'
         }
       >
-        {!isStageLoading ? (
-          <Box sx={{ mt: (t) => t.typography.pxToRem(20) }}>
-            <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
-          </Box>
-        ) : (
-          <CircularProgress style={{ display: 'block', margin: '0 auto' }} />
-        )}
+        {renderPageContent()}
       </Section>
     </PageWrapper>
   );