Merge branch 'main' into demo/resource-browser

Author: vivek-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.76-beta-2",
+    "version": "0.0.78-beta-1",
     "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`,
@@ -39,6 +40,7 @@ export const ROUTES = {
     INFRA_CONFIG_PROFILE: 'infra-config/profile',
     SECURITY_SCAN_EXECUTION_DETAILS: 'security/scan/executionDetail',
     NOTIFIER: 'notification',
+    APP_LIST: 'app/list',
     TELEMETRY_EVENT: 'telemetry/event',
     SERVER_INFO_API: 'server',
     ATTRIBUTES_USER: 'attributes/user',
@@ -59,22 +61,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 = {
@@ -410,8 +441,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/Icon/ic-help-outline.svg

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
-import { ReactComponent as Help } from '../../Assets/Icon/ic-help-outline.svg'
+import { ReactComponent as ICHelpOutline } from '../../Assets/Icon/ic-help-outline.svg'
 import { TippyCustomized } from '../TippyCustomized'
 import { TippyTheme } from '../Types'
 import { DOCUMENTATION } from '../Constants'
@@ -37,7 +37,7 @@ export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean
             <div className="flexbox cursor">
                 <InjectTag className="icon-dim-16 mt-2 mr-4" />
                 <span>Propagate tags</span>
-                <Help className="icon-dim-16 mt-2 ml-4" />
+                <ICHelpOutline className="icon-dim-16 mt-2 ml-4" />
             </div>
         </TippyCustomized>
     )

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropagateTagInfo from './PropagateTagInfo'
 import { ReactComponent as Add } from '../../Assets/Icon/ic-add.svg'
 import { DEFAULT_TAG_DATA } from '../Constants'

src/Assets/Img/ic-page-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>