@devtron-labs/devtron-fe-common-lib 0.0.7-beta-2 → 0.0.7-beta-3

package/dist/Common/EmptyState/GenericEmptyState.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties, ReactNode } from 'react';
+import './emptyState.scss';
+interface GenericEmptyStateType {
+    title: ReactNode;
+    image?: any;
+    classname?: string;
+    subTitle?: ReactNode;
+    isButtonAvailable?: boolean;
+    styles?: CSSProperties;
+    heightToDeduct?: number;
+    imageType?: string;
+    renderButton?: () => JSX.Element;
+    imageClassName?: string;
+    children?: ReactNode;
+    noImage?: boolean;
+}
+declare function GenericEmptyState({ title, image, subTitle, isButtonAvailable, classname, styles, heightToDeduct, imageType, renderButton, imageClassName, children, noImage }: GenericEmptyStateType): JSX.Element;
+export default GenericEmptyState;

package/dist/Common/Error.d.ts

@@ -12,7 +12,6 @@ export declare class ErrorScreenManager extends Component<{
 export declare class ErrorScreenNotAuthorized extends Component<{
     subtitle?: React.ReactChild;
     title?: string;
-    subtitleClass?: string;
 }> {
     render(): JSX.Element;
 }

package/dist/Common/index.d.ts

@@ -25,3 +25,4 @@ export { default as InfoColourBar } from './InfoColorBar/InfoColourbar';
 export * from './Common.service';
 export * from './Checkbox';
 export { default as EmptyState } from './EmptyState/EmptyState';
+export { default as GenericEmptyState } from './EmptyState/GenericEmptyState';

package/dist/index.js

@@ -467,7 +467,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$3 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .title {\n  font-weight: 600;\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  width: 250px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 20px;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  width: 250px;\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
+var css_248z$3 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  width: 250px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 20px;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  width: 250px;\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
 styleInject(css_248z$3);
 
 var _g$2;
@@ -1948,12 +1948,27 @@ var notAuthorized = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.
 
 var notFound = "27bfa7a87d0b7039.png";
 
+var AppNotDeployed = "64232fbb58cec80f.png";
+
+var ImageType;
+(function (ImageType) {
+    ImageType["Large"] = "large";
+    ImageType["Medium"] = "medium";
+})(ImageType || (ImageType = {}));
+function GenericEmptyState(_a) {
+    var title = _a.title, image = _a.image, subTitle = _a.subTitle, isButtonAvailable = _a.isButtonAvailable, classname = _a.classname, styles = _a.styles, heightToDeduct = _a.heightToDeduct, imageType = _a.imageType, renderButton = _a.renderButton, imageClassName = _a.imageClassName, children = _a.children, noImage = _a.noImage;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex column empty-state ".concat(classname ? classname : ''), style: styles }, (heightToDeduct >= 0 && { style: __assign(__assign({}, styles), { height: "calc(100vh - ".concat(heightToDeduct, "px)") }) }), { children: [!noImage && jsxRuntime.jsx("img", { className: imageClassName ? imageClassName : '', src: image || AppNotDeployed, width: imageType === ImageType.Medium ? '200' : '250', height: imageType === ImageType.Medium ? '160' : '200', alt: "empty-state" }), jsxRuntime.jsx("h4", __assign({ className: "title fw-6 cn-9 mb-8" }, { children: title })), subTitle && jsxRuntime.jsx("p", __assign({ className: "subtitle" }, { children: subTitle })), isButtonAvailable && renderButton(), children] })));
+}
+
 function ErrorScreenNotFound() {
     var history = reactRouter.useHistory();
     var redirectToHome = function () {
         history.push('/app/list');
     };
-    return (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(EmptyState, { children: [jsxRuntime.jsx(EmptyState.Image, { children: jsxRuntime.jsx("img", { src: notFound, alt: "Not Found" }) }), jsxRuntime.jsx(EmptyState.Title, { children: jsxRuntime.jsx("h3", __assign({ className: "title" }, { children: ERROR_EMPTY_SCREEN.PAGE_NOT_FOUND })) }), jsxRuntime.jsx(EmptyState.Subtitle, { children: jsxRuntime.jsx("p", { children: ERROR_EMPTY_SCREEN.PAGE_NOT_EXIST }) }), jsxRuntime.jsx(EmptyState.Button, { children: jsxRuntime.jsx("button", __assign({ className: "flex cta h-32", onClick: redirectToHome }, { children: ERROR_EMPTY_SCREEN.TAKE_BACK_HOME })) })] }) }));
+    var renderGenerateButton = function () {
+        return (jsxRuntime.jsx("button", __assign({ className: "flex cta h-32", onClick: redirectToHome }, { children: ERROR_EMPTY_SCREEN.TAKE_BACK_HOME })));
+    };
+    return (jsxRuntime.jsx(GenericEmptyState, { image: notFound, title: ERROR_EMPTY_SCREEN.PAGE_NOT_FOUND, subTitle: ERROR_EMPTY_SCREEN.PAGE_NOT_EXIST, isButtonAvailable: true, renderButton: renderGenerateButton }));
 }
 
 var ErrorScreenManager = /** @class */ (function (_super) {
@@ -1968,7 +1983,7 @@ var ErrorScreenManager = /** @class */ (function (_super) {
             case 401:
                 return 'Unauthorized';
             case 403:
-                return jsxRuntime.jsx(ErrorScreenNotAuthorized, { subtitle: this.props.subtitle, subtitleClass: this.props.subtitleClass });
+                return (jsxRuntime.jsx(ErrorScreenNotAuthorized, { subtitle: this.props.subtitle }));
             case 404:
                 return jsxRuntime.jsx(ErrorScreenNotFound, {});
             case 500:
@@ -1994,7 +2009,7 @@ var ErrorScreenNotAuthorized = /** @class */ (function (_super) {
     }
     ErrorScreenNotAuthorized.prototype.render = function () {
         var _a, _b;
-        return (jsxRuntime.jsxs(EmptyState, __assign({ className: "dc__align-reload-center" }, { children: [jsxRuntime.jsx(EmptyState.Image, { children: jsxRuntime.jsx("img", { src: notAuthorized, alt: "Not Authorized" }) }), jsxRuntime.jsx(EmptyState.Title, { children: jsxRuntime.jsx("h3", __assign({ className: "title" }, { children: (_a = this.props.title) !== null && _a !== void 0 ? _a : ERROR_EMPTY_SCREEN.NOT_AUTHORIZED })) }), jsxRuntime.jsx(EmptyState.Subtitle, __assign({ className: this.props.subtitleClass }, { children: (_b = this.props.subtitle) !== null && _b !== void 0 ? _b : ERROR_EMPTY_SCREEN.ONLY_FOR_SUPERADMIN }))] })));
+        return (jsxRuntime.jsx(GenericEmptyState, { image: notAuthorized, title: (_a = this.props.title) !== null && _a !== void 0 ? _a : ERROR_EMPTY_SCREEN.NOT_AUTHORIZED, subTitle: (_b = this.props.subtitle) !== null && _b !== void 0 ? _b : ERROR_EMPTY_SCREEN.ONLY_FOR_SUPERADMIN }));
     };
     return ErrorScreenNotAuthorized;
 }(React.Component));
@@ -4075,7 +4090,21 @@ var Modal = function (_a) {
         }, id: "popup", className: "".concat(rootClassName, " popup ").concat(modal ? 'modal' : ''), style: __assign({}, style) }, { children: children })), document.getElementById('visible-modal'));
 };
 
-var close = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%20%3Cdefs%3E%20%20%20%20%20%20%20%20%3Cpath%20id%3D%22a%22%20class%3D%22stroke-color%22%20d%3D%22M18.295%205.705a.997.997%200%200%200-1.41%200L12%2010.59%207.115%205.705a.997.997%200%201%200-1.41%201.41L10.59%2012l-4.885%204.885a.997.997%200%201%200%201.41%201.41L12%2013.41l4.885%204.885a.997.997%200%200%200%201.41-1.41L13.41%2012l4.885-4.885a.997.997%200%200%200%200-1.41z%22%2F%3E%20%20%20%20%3C%2Fdefs%3E%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22%22%2F%3E%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22%23999%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
+var _path$5;
+function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+var SvgIcCross = function SvgIcCross(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M19.28 5.78a.75.75 0 0 0-1.06-1.06l1.06 1.06ZM4.72 18.22a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm13.5 1.06a.75.75 0 1 0 1.06-1.06l-1.06 1.06ZM5.78 4.72a.75.75 0 0 0-1.06 1.06l1.06-1.06Zm12.44 0-6.75 6.75 1.06 1.06 6.75-6.75-1.06-1.06Zm-6.75 6.75-6.75 6.75 1.06 1.06 6.75-6.75-1.06-1.06Zm7.81 6.75-6.75-6.75-1.06 1.06 6.75 6.75 1.06-1.06Zm-6.75-6.75L5.78 4.72 4.72 5.78l6.75 6.75 1.06-1.06Z",
+    fill: "#596168"
+  })));
+};
+var close = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19.2803%205.78033C19.5732%205.48744%2019.5732%205.01256%2019.2803%204.71967C18.9874%204.42678%2018.5126%204.42678%2018.2197%204.71967L19.2803%205.78033ZM4.71967%2018.2197C4.42678%2018.5126%204.42678%2018.9874%204.71967%2019.2803C5.01256%2019.5732%205.48744%2019.5732%205.78033%2019.2803L4.71967%2018.2197ZM18.2197%2019.2803C18.5126%2019.5732%2018.9874%2019.5732%2019.2803%2019.2803C19.5732%2018.9874%2019.5732%2018.5126%2019.2803%2018.2197L18.2197%2019.2803ZM5.78033%204.71967C5.48744%204.42678%205.01256%204.42678%204.71967%204.71967C4.42678%205.01256%204.42678%205.48744%204.71967%205.78033L5.78033%204.71967ZM18.2197%204.71967L11.4697%2011.4697L12.5303%2012.5303L19.2803%205.78033L18.2197%204.71967ZM11.4697%2011.4697L4.71967%2018.2197L5.78033%2019.2803L12.5303%2012.5303L11.4697%2011.4697ZM19.2803%2018.2197L12.5303%2011.4697L11.4697%2012.5303L18.2197%2019.2803L19.2803%2018.2197ZM12.5303%2011.4697L5.78033%204.71967L4.71967%205.78033L11.4697%2012.5303L12.5303%2011.4697Z%22%20fill%3D%22%23596168%22%2F%3E%3C%2Fsvg%3E";
 
 var OpaqueModal = /** @class */ (function (_super) {
     __extends(OpaqueModal, _super);
@@ -8369,21 +8398,6 @@ var index$1 = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 
 var Tippy = index$1;
 
-var _path$5;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
-var SvgIcCross = function SvgIcCross(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M19.28 5.78a.75.75 0 0 0-1.06-1.06l1.06 1.06ZM4.72 18.22a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm13.5 1.06a.75.75 0 1 0 1.06-1.06l-1.06 1.06ZM5.78 4.72a.75.75 0 0 0-1.06 1.06l1.06-1.06Zm12.44 0-6.75 6.75 1.06 1.06 6.75-6.75-1.06-1.06Zm-6.75 6.75-6.75 6.75 1.06 1.06 6.75-6.75-1.06-1.06Zm7.81 6.75-6.75-6.75-1.06 1.06 6.75 6.75 1.06-1.06Zm-6.75-6.75L5.78 4.72 4.72 5.78l6.75 6.75 1.06-1.06Z",
-    fill: "#596168"
-  })));
-};
-
 var css_248z$1 = ".tippy-box[data-animation=shift-toward-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=top][data-state=hidden]{transform:translateY(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=bottom][data-state=hidden]{transform:translateY(5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=left][data-state=hidden]{transform:translateX(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=right][data-state=hidden]{transform:translateX(5px)}";
 styleInject(css_248z$1);
 
@@ -16373,6 +16387,7 @@ exports.EmptyState = EmptyState;
 exports.ErrorScreenManager = ErrorScreenManager;
 exports.ErrorScreenNotAuthorized = ErrorScreenNotAuthorized;
 exports.ForceDeleteDialog = ForceDeleteDialog;
+exports.GenericEmptyState = GenericEmptyState;
 exports.Host = Host;
 exports.InfoColourBar = InfoColourBar;
 exports.Modal = Modal;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.7-beta-2",
+    "version": "0.0.7-beta-3",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/Dialogs/DialogForm.tsx

@@ -1,6 +1,6 @@
 import React, { Component, createContext } from 'react';
 import { VisibleModal } from '../Modals/VisibleModal';
-import close from '../../Assets/Icon/ic-close.svg';
+import close from '../../Assets/Icon/ic-cross.svg';
 import { Progressing } from '../Progressing'
 //TODO: may not need context
 const DialogFormContext = createContext({ title: '', isLoading: false, close: (event) => {}, onSave: (event) => {} });

package/src/Common/EmptyState/GenericEmptyState.tsx

@@ -0,0 +1,59 @@
+import React, { CSSProperties, ReactNode } from 'react'
+import './emptyState.scss'
+import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
+
+interface GenericEmptyStateType {
+    title: ReactNode
+    image?
+    classname?: string
+    subTitle?: ReactNode
+    isButtonAvailable?: boolean
+    styles?: CSSProperties
+    heightToDeduct?: number
+    imageType?: string
+    renderButton?: () => JSX.Element
+    imageClassName?: string
+    children?: ReactNode
+    noImage?: boolean
+}
+
+enum ImageType {
+    Large = 'large',
+    Medium = 'medium',
+}
+
+function GenericEmptyState({
+    title,
+    image,
+    subTitle,
+    isButtonAvailable,
+    classname,
+    styles,
+    heightToDeduct,
+    imageType,
+    renderButton,
+    imageClassName,
+    children,
+    noImage
+}: GenericEmptyStateType): JSX.Element {
+    return (
+        <div
+            className={`flex column empty-state ${classname ? classname : ''}`}
+            style={styles}
+            {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
+        >
+            {!noImage && <img className={imageClassName ? imageClassName : ''}
+                src={image || AppNotDeployed}
+                width={imageType === ImageType.Medium ? '200' : '250'}
+                height={imageType === ImageType.Medium ? '160' : '200'}
+                alt="empty-state"
+            />}
+            <h4 className="title fw-6 cn-9 mb-8">{title}</h4>
+            {subTitle && <p className="subtitle">{subTitle}</p>}
+            {isButtonAvailable && renderButton()}
+              {children}
+        </div>
+    )
+}
+
+export default GenericEmptyState

package/src/Common/EmptyState/emptyState.scss

@@ -19,9 +19,6 @@
     h6 {
         color: var(--N900);
     }
-    .title {
-        font-weight: 600;
-    }
     .subtitle {
         font-size: 13px;
         width: 250px;
@@ -68,16 +65,8 @@
         color: var(--N900);
     }
     .button__icon {
-        width:16px;
-        height:16px;
+        width: 16px;
+        height: 16px;
         margin-left: 8px;
     }
-    //TODO: use name
-    // .subtitle a {
-    //     color: inherit;
-    // }
-    // .subtitle a:focus,
-    // .subtitle a:hover {
-    //     color: inherit;
-    // }
 }

package/src/Common/Error.tsx

@@ -4,6 +4,7 @@ import notAuthorized from '../Assets/Img/ic-not-authorized.svg'
 import Reload from './Reload'
 import ErrorScreenNotFound from './ErrorScreenNotFound'
 import { ERROR_EMPTY_SCREEN } from './Constants'
+import GenericEmptyState from './EmptyState/GenericEmptyState'
 
 export class ErrorScreenManager extends Component<{
     code?: number
@@ -19,7 +20,9 @@ export class ErrorScreenManager extends Component<{
             case 401:
                 return 'Unauthorized'
             case 403:
-                return <ErrorScreenNotAuthorized subtitle={this.props.subtitle} subtitleClass={this.props.subtitleClass}/>
+                return (
+                    <ErrorScreenNotAuthorized subtitle={this.props.subtitle} />
+                )
             case 404:
                 return <ErrorScreenNotFound />
             case 500:
@@ -45,21 +48,14 @@ export class ErrorScreenManager extends Component<{
 export class ErrorScreenNotAuthorized extends Component<{
     subtitle?: React.ReactChild
     title?: string
-    subtitleClass?: string
 }> {
     render() {
         return (
-            <EmptyState className="dc__align-reload-center">
-                <EmptyState.Image>
-                    <img src={notAuthorized} alt="Not Authorized" />
-                </EmptyState.Image>
-                <EmptyState.Title>
-                    <h3 className="title">{this.props.title ?? ERROR_EMPTY_SCREEN.NOT_AUTHORIZED}</h3>
-                </EmptyState.Title>
-                <EmptyState.Subtitle className={this.props.subtitleClass}>
-                    {this.props.subtitle ?? ERROR_EMPTY_SCREEN.ONLY_FOR_SUPERADMIN}
-                </EmptyState.Subtitle>
-            </EmptyState>
+            <GenericEmptyState
+                image={notAuthorized}
+                title={this.props.title ?? ERROR_EMPTY_SCREEN.NOT_AUTHORIZED}
+                subTitle={this.props.subtitle ?? ERROR_EMPTY_SCREEN.ONLY_FOR_SUPERADMIN}
+            />
         )
     }
-}
+}

package/src/Common/ErrorScreenNotFound.tsx

@@ -1,38 +1,31 @@
 import React from 'react'
 import notFound from '../Assets/Img/ic-empty-error@2x.png'
 import { useHistory } from 'react-router'
-import EmptyState from './EmptyState/EmptyState'
 import { ERROR_EMPTY_SCREEN } from './Constants'
+import GenericEmptyState from './EmptyState/GenericEmptyState'
 
 function ErrorScreenNotFound() {
-  const history = useHistory()
+    const history = useHistory()
+    const redirectToHome = () => {
+        history.push('/app/list')
+    }
+    const renderGenerateButton = () => {
+        return (
+            <button className="flex cta h-32" onClick={redirectToHome}>
+                {ERROR_EMPTY_SCREEN.TAKE_BACK_HOME}
+            </button>
+        )
+    }
 
-  const redirectToHome = () => {
-    history.push('/app/list')
-  }
-
-  return (
-    <div>
-         <EmptyState>
-              <EmptyState.Image>
-                  <img src={notFound} alt="Not Found" />
-              </EmptyState.Image>
-              <EmptyState.Title>
-                  <h3 className="title">{ERROR_EMPTY_SCREEN.PAGE_NOT_FOUND}</h3>
-              </EmptyState.Title>
-              <EmptyState.Subtitle >
-                   <p>{ERROR_EMPTY_SCREEN.PAGE_NOT_EXIST}</p>
-              </EmptyState.Subtitle>
-              <EmptyState.Button>
-                        <button className="flex cta h-32"
-                        onClick={redirectToHome}
-                        >
-                            {ERROR_EMPTY_SCREEN.TAKE_BACK_HOME}
-                        </button>
-                    </EmptyState.Button>
-          </EmptyState>
-    </div>
-  )
+    return (
+        <GenericEmptyState
+            image={notFound}
+            title={ERROR_EMPTY_SCREEN.PAGE_NOT_FOUND}
+            subTitle={ERROR_EMPTY_SCREEN.PAGE_NOT_EXIST}
+            isButtonAvailable={true}
+            renderButton={renderGenerateButton}
+        />
+    )
 }
 
-export default ErrorScreenNotFound
+export default ErrorScreenNotFound

package/src/Common/Modals/OpaqueModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom';
-import closeIcon from '../../Assets/Icon/ic-close.svg'
+import closeIcon from '../../Assets/Icon/ic-cross.svg'
 
 export interface OpaqueModalProps {
     className?: string;

package/src/Common/index.ts

@@ -25,3 +25,5 @@ export { default as InfoColourBar } from './InfoColorBar/InfoColourbar'
 export * from './Common.service'
 export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
+export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
+

package/src/Assets/Icon/ic-close.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
-    <defs>
-        <path id="a" class="stroke-color" d="M18.295 5.705a.997.997 0 0 0-1.41 0L12 10.59 7.115 5.705a.997.997 0 1 0-1.41 1.41L10.59 12l-4.885 4.885a.997.997 0 1 0 1.41 1.41L12 13.41l4.885 4.885a.997.997 0 0 0 1.41-1.41L13.41 12l4.885-4.885a.997.997 0 0 0 0-1.41z"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <path d=""/>
-        <use fill="#999" xlink:href="#a"/>
-    </g>
-</svg>