Merge pull request #121 from devtron-labs/fix/error-screen

fix: error screen

Author: randhir-devtron

.eslintignore

@@ -38,7 +38,6 @@ src/Common/DraggableWrapper/DraggableWrapper.tsx
 src/Common/Drawer/Drawer.tsx
 src/Common/EmptyState/GenericEmptyState.tsx
 src/Common/Error.tsx
-src/Common/ErrorScreenNotFound.tsx
 src/Common/Grid/Grid.tsx
 src/Common/Helper.tsx
 src/Common/Hooks/UseClickOutside/UseClickOutside.tsx

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.77",
+    "version": "0.0.78",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -65,7 +65,7 @@
         "@typeform/embed-react": "2.20.0",
         "react-toastify": "^8.2.0",
         "typescript": "^4.9.4",
-        "vite": "^4.4.5",
+        "vite": "^4.5.3",
         "vite-plugin-dts": "^3.5.1",
         "vite-plugin-lib-inject-css": "^1.2.0",
         "vite-plugin-svgr": "^2.4.0"

package.json

@@ -4,6 +4,7 @@ export const FALLBACK_REQUEST_TIMEOUT = 60000
 export const Host = window?.__ORCHESTRATOR_ROOT__ ?? '/orchestrator'
 
 export const DOCUMENTATION_HOME_PAGE = 'https://docs.devtron.ai'
+export const DISCORD_LINK = 'https://discord.devtron.ai/'
 export const DOCUMENTATION = {
     APP_TAGS: `${DOCUMENTATION_HOME_PAGE}/v/v0.6/usage/applications/create-application#tags`,
     APP_OVERVIEW_TAGS: `${DOCUMENTATION_HOME_PAGE}/v/v0.6/usage/applications/overview#manage-tags`,
@@ -36,6 +37,7 @@ export const ROUTES = {
     CD_MATERIAL_GET: 'app/cd-pipeline',
     DEPLOYMENT_TEMPLATE_LIST: 'app/template/list',
     INFRA_CONFIG_PROFILE: 'infra-config/profile',
+    APP_LIST: 'app/list',
     TELEMETRY_EVENT: 'telemetry/event',
     SERVER_INFO_API: 'server',
     ATTRIBUTES_USER: 'attributes/user',
@@ -56,22 +58,51 @@ export const DEFAULT_TAG_DATA = {
     isSuggested: true,
 }
 
+export enum ERROR_STATUS_CODE {
+    BAD_REQUEST = 400,
+    UNAUTHORIZED = 401,
+    PERMISSION_DENIED = 403,
+    NOT_FOUND = 404,
+    EXPECTATION_FAILED = 417,
+    INTERNAL_SERVER_ERROR = 500,
+    BAD_GATEWAY = 502,
+    SERVICE_TEMPORARY_UNAVAILABLE = 503,
+}
+
 export const TOAST_ACCESS_DENIED = {
     TITLE: 'Access denied',
     SUBTITLE: 'You do not have required access to perform this action',
 }
 
 // Empty state messgaes
 export const ERROR_EMPTY_SCREEN = {
-    PAGE_NOT_FOUND: 'We could not find this page',
-    PAGE_NOT_EXIST: 'This page doesn’t exist or was removed. We suggest you go back to home',
-    TAKE_BACK_HOME: 'Take me home',
+    PAGE_NOT_FOUND: 'Not found',
+    PAGE_NOT_EXIST: 'Error 404: The requested resource could not be found. Please check the URL and try again.',
+    TAKE_BACK_HOME: 'Go back home',
+    REPORT_ISSUE: 'Report issue',
     ONLY_FOR_SUPERADMIN: 'Information on this page is available only to superadmin users.',
     NOT_AUTHORIZED: 'Not authorized',
-    UNAUTHORIZED: 'unauthorized',
-    FORBIDDEN: 'forbidden',
     REQUIRED_MANAGER_ACCESS:
         'Looks like you don’t have access to information on this page. Please contact your manager to request access.',
+    BAD_REQUEST: 'Bad request',
+    BAD_REQUEST_MESSAGE:
+        'Error 400: The request could not be understood by the server due to malformed syntax. Please check your request and try again.',
+    TRY_AGAIN: 'Try again',
+    UNAUTHORIZED: 'Unauthorized',
+    UNAUTHORIZED_MESSAGE:
+        'Error 401: You are not authorized to access this resource. Please contact your administrator for assistance.',
+    FORBIDDEN: 'Forbidden',
+    FORBIDDEN_MESSAGE:
+        'Error 403: You are not authorized to access this resource. Please contact your administrator for assistance.',
+    INTERNAL_SERVER_ERROR: 'Internal server error',
+    INTERNAL_SERVER_ERROR_MESSAGE:
+        'Error 500: The server encountered an unexpected condition that prevented it from fulfilling the request. Please try again later.',
+    BAD_GATEWAY: 'Bad gateway',
+    BAD_GATEWAY_MESSAGE:
+        'Error 500: The server received an invalid response from an upstream server. Please try again later.',
+    SERVICE_TEMPORARY_UNAVAILABLE: 'Service temporary unavailable',
+    SERVICE_TEMPORARY_UNAVAILABLE_MESSAGE:
+        'Error 503: The server is currently unable to handle the request due to a temporary overload or maintenance. Please try again later.',
 }
 export const TOKEN_COOKIE_NAME = 'argocd.token'
 export const TriggerTypeMap = {
@@ -402,8 +433,6 @@ export enum SERVER_MODE {
     FULL = 'FULL',
 }
 
-export const DISCORD_LINK = 'https://discord.devtron.ai/'
-
 export const POSTHOG_EVENT_ONBOARDING = {
     PREVIEW: 'Preview',
     DEPLOY_CUSTOM_APP_CI_CD: 'Deploy custom app using CI/CD pipelines',

src/Assets/Img/ic-not-found.svg

@@ -1,4 +1,3 @@
-import React from 'react'
 import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
 import { GenericEmptyStateType, ImageType } from '../Types'
 
@@ -63,12 +62,18 @@ const GenericEmptyState = ({
                 />
             )}
             <div
-                className={`flex column dc__gap-10 dc__mxw-300 ${
+                className={`flex column dc__gap-20 dc__mxw-300 ${
                     isRowLayout ? 'dc__align-start' : ''
                 } ${contentClassName}`}
             >
-                <h4 className="title fw-6 cn-9 mt-0 mb-0 lh-1-5">{title}</h4>
-                {subTitle && <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>{subTitle}</p>}
+                <div className="flex column dc__gap-8">
+                    <h4 className="title fw-6 cn-9 mt-0 mb-0 lh-24">{title}</h4>
+                    {subTitle && (
+                        <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>
+                            {subTitle}
+                        </p>
+                    )}
+                </div>
                 {isButtonAvailable && renderButton()}
                 {children}
             </div>

src/Assets/Img/ic-page-not-found.svg

@@ -23,7 +23,7 @@
         font-size: 13px;
         font-weight: 400;
         text-align: center;
-        line-height: 1.5;
+        line-height: 20px;
         margin-bottom: 6px;
 
         &--text-start {

src/Common/Constants.ts

@@ -0,0 +1,63 @@
+import { useHistory } from 'react-router'
+import { ERROR_STATUS_CODE, ERROR_EMPTY_SCREEN, ROUTES } from './Constants'
+import GenericEmptyState from './EmptyState/GenericEmptyState'
+import { ErrorPageType } from './Types'
+import { noop, refresh, reportIssue } from './Helper'
+
+const ErrorPage = ({ code, image, title, subTitle, imageType, heightToDeduct }: ErrorPageType) => {
+    const { push } = useHistory()
+    const redirectToHome = () => {
+        push(`/${ROUTES.APP_LIST}`)
+    }
+
+    const getErrorPageProps = (
+        statusCode: ERROR_STATUS_CODE,
+    ): { onClick: () => void; renderButtonText: string; isButtonAvailable: boolean } => {
+        switch (statusCode) {
+            case ERROR_STATUS_CODE.NOT_FOUND:
+                return {
+                    onClick: redirectToHome,
+                    renderButtonText: ERROR_EMPTY_SCREEN.TAKE_BACK_HOME,
+                    isButtonAvailable: true,
+                }
+            case ERROR_STATUS_CODE.INTERNAL_SERVER_ERROR:
+                return {
+                    onClick: reportIssue,
+                    renderButtonText: ERROR_EMPTY_SCREEN.REPORT_ISSUE,
+                    isButtonAvailable: true,
+                }
+            case ERROR_STATUS_CODE.BAD_REQUEST:
+            case ERROR_STATUS_CODE.BAD_GATEWAY:
+            case ERROR_STATUS_CODE.SERVICE_TEMPORARY_UNAVAILABLE:
+                return { onClick: refresh, renderButtonText: ERROR_EMPTY_SCREEN.TRY_AGAIN, isButtonAvailable: true }
+            default:
+                return { onClick: noop, renderButtonText: '', isButtonAvailable: false }
+        }
+    }
+
+    const {
+        onClick,
+        renderButtonText,
+        isButtonAvailable,
+    }: { onClick: () => void; renderButtonText: string; isButtonAvailable: boolean } = getErrorPageProps(code)
+
+    const renderGenerateButton = () => (
+        <button type="button" className="flex cta h-36" onClick={onClick} data-testid="empty-screen-take-me-home">
+            {renderButtonText}
+        </button>
+    )
+
+    return (
+        <GenericEmptyState
+            image={image}
+            title={title}
+            subTitle={subTitle}
+            isButtonAvailable={isButtonAvailable}
+            renderButton={renderGenerateButton}
+            imageType={imageType}
+            heightToDeduct={heightToDeduct}
+        />
+    )
+}
+
+export default ErrorPage