@devtron-labs/devtron-fe-common-lib 0.0.6-beta-25 → 0.0.7-beta-1

package/dist/Common/Constants.d.ts

@@ -24,6 +24,7 @@ export declare const DEFAULT_TAG_DATA: {
     propagate: boolean;
     isInvalidKey: boolean;
     isInvalidValue: boolean;
+    isSuggested: boolean;
 };
 export declare const TOAST_ACCESS_DENIED: {
     TITLE: string;
@@ -33,4 +34,9 @@ export declare const ERROR_EMPTY_SCREEN: {
     PAGE_NOT_FOUND: string;
     PAGE_NOT_EXIST: string;
     TAKE_BACK_HOME: string;
+    ONLY_FOR_SUPERADMIN: string;
+    NOT_AUTHORIZED: string;
+    UNAUTHORIZED: string;
+    FORBIDDEN: string;
+    REQUIRED_MANAGER_ACCESS: string;
 };

package/dist/Common/CustomTagSelector/ResizableTagTextArea.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { ResizableTagTextAreaProps } from '../Types';
+import { ResizableTagTextAreaProps } from './Types';
 export declare function ResizableTagTextArea({ className, minHeight, maxHeight, value, onChange, onBlur, onFocus, placeholder, tabIndex, refVar, dependentRef, }: ResizableTagTextAreaProps): JSX.Element;

package/dist/Common/CustomTagSelector/TagDetails.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { TagDetailType } from '../Types';
-export default function TagDetails({ index, tagData, setTagData, removeTag, tabIndex, suggestedTagsOptions, }: TagDetailType): JSX.Element;
+import { TagDetailType } from './Types';
+export declare const TagDetails: ({ index, tagData, setTagData, removeTag, tabIndex, suggestedTagsOptions, }: TagDetailType) => JSX.Element;

package/dist/Common/CustomTagSelector/TagLabelSelect.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { TagLabelSelectType } from '../Types';
-export declare const TagLabelSelect: ({ isCreateApp, labelTags, setLabelTags, tabIndex, suggestedTagsOptions, }: TagLabelSelectType) => JSX.Element;
+import { TagLabelSelectType } from './Types';
+export declare const TagLabelSelect: ({ isCreateApp, labelTags, setLabelTags, tabIndex }: TagLabelSelectType) => JSX.Element;

package/dist/Common/CustomTagSelector/TagLabelValueSelector.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { TagLabelValueSelectorType } from '../Types';
+import { TagLabelValueSelectorType } from './Types';
 export declare const TagLabelValueSelector: ({ selectedTagIndex, tagData, setTagData, tagOptions, isRequired, tagInputType, placeholder, tabIndex, refVar, dependentRef, }: TagLabelValueSelectorType) => JSX.Element;

package/dist/Common/CustomTagSelector/Types.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { KEY_VALUE } from '../Constants';
+import { OptionType } from '../Types';
+export interface TagType {
+    id?: number;
+    key: string;
+    value?: string;
+    description?: string;
+    propagate: boolean;
+    mandatoryProjectIdsCsv?: string;
+    isInvalidKey?: boolean;
+    isInvalidValue?: boolean;
+    isSuggested?: boolean;
+}
+export interface TagErrorType {
+    isValid: boolean;
+    messages: string[];
+}
+export interface TagLabelSelectType {
+    isCreateApp?: boolean;
+    labelTags: TagType[];
+    setLabelTags: (tagList: TagType[]) => void;
+    tabIndex?: number;
+    selectedProjectId?: number;
+    suggestedTagsOptions?: OptionType[];
+}
+export interface TagDetailType {
+    index: number;
+    tagData: TagType;
+    setTagData: (index: number, tagData: TagType) => void;
+    removeTag?: (index: number) => void;
+    tabIndex?: number;
+    suggestedTagsOptions?: OptionType[];
+}
+export interface TagLabelValueSelectorType {
+    selectedTagIndex: number;
+    tagData: TagType;
+    setTagData: (index: number, tagData: TagType) => void;
+    tagOptions?: OptionType[];
+    isRequired?: boolean;
+    tagInputType?: KEY_VALUE;
+    placeholder?: string;
+    tabIndex?: number;
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
+}
+export interface ResizableTagTextAreaProps {
+    className?: string;
+    minHeight?: number;
+    maxHeight?: number;
+    value?: string;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    placeholder?: string;
+    tabIndex?: number;
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
+}

package/dist/Common/CustomTagSelector/index.d.ts

@@ -1,3 +1,6 @@
+export { default as PropagateTagInfo } from './PropagateTagInfo';
+export * from './TagDetails';
 export * from './TagLabelSelect';
 export * from './TagLabelValueSelector';
 export * from './ResizableTagTextArea';
+export * from './Types';

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import './emptyState.scss';
-declare function EmptyState({ children }: {
+declare function EmptyState({ children, className }: {
     children: any;
+    className?: string;
 }): JSX.Element;
 declare namespace EmptyState {
     var Image: ({ children }: {

package/dist/Common/Error.d.ts

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

package/dist/Common/Types.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import { KEY_VALUE } from './Constants';
 export interface ResponseType {
     code: number;
     status: string;
@@ -19,61 +17,6 @@ export declare enum TippyTheme {
     black = "black",
     white = "white"
 }
-export interface TagType {
-    id?: number;
-    key: string;
-    value?: string;
-    description?: string;
-    propagate: boolean;
-    mandatoryProjectIdsCsv?: string;
-    isInvalidKey?: boolean;
-    isInvalidValue?: boolean;
-}
-export interface TagErrorType {
-    isValid: boolean;
-    messages: string[];
-}
-export interface TagLabelSelectType {
-    isCreateApp?: boolean;
-    labelTags: TagType[];
-    setLabelTags: (tagList: TagType[]) => void;
-    tabIndex?: number;
-    selectedProjectId?: number;
-    suggestedTagsOptions?: OptionType[];
-}
-export interface TagDetailType {
-    index: number;
-    tagData: TagType;
-    setTagData: (index: number, tagData: TagType) => void;
-    removeTag?: (index: number) => void;
-    tabIndex?: number;
-    suggestedTagsOptions?: OptionType[];
-}
-export interface TagLabelValueSelectorType {
-    selectedTagIndex: number;
-    tagData: TagType;
-    setTagData: (index: number, tagData: TagType) => void;
-    tagOptions?: OptionType[];
-    isRequired?: boolean;
-    tagInputType?: KEY_VALUE;
-    placeholder?: string;
-    tabIndex?: number;
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
-}
-export interface ResizableTagTextAreaProps {
-    className?: string;
-    minHeight?: number;
-    maxHeight?: number;
-    value?: string;
-    onChange?: (e: any) => void;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    placeholder?: string;
-    tabIndex?: number;
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
-}
 export interface TeamList extends ResponseType {
     result: Teams[];
 }

package/dist/index.js

@@ -7,20 +7,20 @@ var reactRouter = require('react-router');
 var reactRouterDom = require('react-router-dom');
 
 function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
+    }
+    n.default = e;
+    return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
@@ -46,7 +46,14 @@ exports.KEY_VALUE = void 0;
     KEY_VALUE["KEY"] = "key";
     KEY_VALUE["VALUE"] = "value";
 })(exports.KEY_VALUE || (exports.KEY_VALUE = {}));
-var DEFAULT_TAG_DATA = { key: '', value: '', propagate: false, isInvalidKey: false, isInvalidValue: false };
+var DEFAULT_TAG_DATA = {
+    key: '',
+    value: '',
+    propagate: false,
+    isInvalidKey: false,
+    isInvalidValue: false,
+    isSuggested: true,
+};
 var TOAST_ACCESS_DENIED = {
     TITLE: 'Access denied',
     SUBTITLE: 'You do not have required access to perform this action',
@@ -56,6 +63,11 @@ var 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',
+    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.',
 };
 
 /******************************************************************************
@@ -459,9 +471,9 @@ var css_248z$3 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  heig
 styleInject(css_248z$3);
 
 var _g$2;
-function _extends$b() { _extends$b = 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$b.apply(this, arguments); }
+function _extends$a() { _extends$a = 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$a.apply(this, arguments); }
 var SvgIcProgressing = function SvgIcProgressing(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "1em",
@@ -483,8 +495,8 @@ var SvgIcProgressing = function SvgIcProgressing(props) {
 };
 
 function EmptyState(_a) {
-    var children = _a.children;
-    return (jsxRuntime.jsx("div", __assign({ className: "flex column empty-state", style: { width: '100%', height: '100%' } }, { children: children })));
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
+    return (jsxRuntime.jsx("div", __assign({ className: "flex column empty-state ".concat(className), "w-100": true, "h-100": true }, { children: children })));
 }
 function Image(_a) {
     var children = _a.children;
@@ -496,7 +508,7 @@ function Title(_a) {
 }
 function Subtitle(_a) {
     var children = _a.children, className = _a.className;
-    return jsxRuntime.jsx("p", __assign({ className: "subtitle ".concat(className) }, { children: children }));
+    return jsxRuntime.jsx("p", __assign({ className: "subtitle ".concat(className || '') }, { children: children }));
 }
 function Button$1(_a) {
     var children = _a.children;
@@ -513,8 +525,8 @@ EmptyState.Loading = Loading;
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-function _extends$a() {
-  _extends$a = Object.assign || function (target) {
+function _extends$9() {
+  _extends$9 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -528,7 +540,7 @@ function _extends$a() {
     return target;
   };
 
-  return _extends$a.apply(this, arguments);
+  return _extends$9.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$2(source, excluded) {
@@ -1254,7 +1266,7 @@ function ProgressBar(_ref) {
       isIn = _ref.isIn,
       theme = _ref.theme;
 
-  var style = _extends$a({}, userStyle, {
+  var style = _extends$9({}, userStyle, {
     animationDuration: delay + "ms",
     animationPlayState: isRunning ? 'running' : 'paused',
     opacity: hide ? 0 : 1
@@ -1531,9 +1543,9 @@ var ToastContainer = function ToastContainer(props) {
     ,
     id: containerId
   }, getToastToRender(function (position, toastList) {
-    var containerStyle = !toastList.length ? _extends$a({}, style, {
+    var containerStyle = !toastList.length ? _extends$9({}, style, {
       pointerEvents: 'none'
-    }) : _extends$a({}, style);
+    }) : _extends$9({}, style);
     return React.createElement("div", {
       className: getClassName(position),
       style: containerStyle,
@@ -1640,7 +1652,7 @@ function dispatchToast(content, options) {
 
 
 function mergeOptions(type, options) {
-  return _extends$a({}, options, {
+  return _extends$9({}, options, {
     type: options && options.type || type,
     toastId: getToastId(options)
   });
@@ -1657,7 +1669,7 @@ function toast(content, options) {
 }
 
 toast.loading = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$a({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$9({
     isLoading: true,
     autoClose: false,
     closeOnClick: false,
@@ -1673,7 +1685,7 @@ function handlePromise(promise, _ref2, options) {
   var id;
 
   if (pending) {
-    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$a({}, options, pending));
+    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$9({}, options, pending));
   }
 
   var resetParams = {
@@ -1692,7 +1704,7 @@ function handlePromise(promise, _ref2, options) {
       return;
     }
 
-    var baseParams = _extends$a({
+    var baseParams = _extends$9({
       type: type
     }, resetParams, options, {
       data: result
@@ -1703,10 +1715,10 @@ function handlePromise(promise, _ref2, options) {
     } : input; // if the id is set we know that it's an update
 
     if (id) {
-      toast.update(id, _extends$a({}, baseParams, params));
+      toast.update(id, _extends$9({}, baseParams, params));
     } else {
       // using toast.promise without loading
-      toast(params.render, _extends$a({}, baseParams, params));
+      toast(params.render, _extends$9({}, baseParams, params));
     }
 
     return result;
@@ -1730,7 +1742,7 @@ toast.warning = /*#__PURE__*/createToastByType(TYPE.WARNING);
 toast.warn = toast.warning;
 
 toast.dark = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$a({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$9({
     theme: 'dark'
   }, options)));
 };
@@ -1787,7 +1799,7 @@ toast.update = function (toastId, options) {
       var oldOptions = toast.props,
           oldContent = toast.content;
 
-      var nextOptions = _extends$a({}, oldOptions, options, {
+      var nextOptions = _extends$9({}, oldOptions, options, {
         toastId: options.toastId || toastId,
         updateId: generateToastId()
       });
@@ -1956,7 +1968,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, subtitleClass: this.props.subtitleClass });
             case 404:
                 return jsxRuntime.jsx(ErrorScreenNotFound, {});
             case 500:
@@ -1981,9 +1993,8 @@ var ErrorScreenNotAuthorized = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     ErrorScreenNotAuthorized.prototype.render = function () {
-        return (jsxRuntime.jsxs(EmptyState, { 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: "Not authorized" })) }), jsxRuntime.jsx(EmptyState.Subtitle, __assign({ className: this.props.subtitleClass }, { children: this.props.subtitle
-                        ? this.props.subtitle
-                        : "Looks like you don't have access to information on this page. Please contact your manager to request access." }))] }));
+        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 ErrorScreenNotAuthorized;
 }(React.Component));
@@ -3879,7 +3890,8 @@ function showError(serverError, showToastOnUnknownError, hideAccessError) {
     if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
         serverError.errors.map(function (_a) {
             var userMessage = _a.userMessage, internalMessage = _a.internalMessage;
-            if (serverError.code === 403 && userMessage === 'unauthorized') {
+            if (serverError.code === 403 &&
+                (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)) {
                 if (!hideAccessError) {
                     toastAccessDenied();
                 }
@@ -4063,25 +4075,6 @@ var Modal = function (_a) {
         }, id: "popup", className: "".concat(rootClassName, " popup ").concat(modal ? 'modal' : ''), style: __assign({}, style) }, { children: children })), document.getElementById('visible-modal'));
 };
 
-var _defs, _use;
-function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
-var SvgIcClose = function SvgIcClose(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24"
-  }, props), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
-    id: "ic-close_svg__a",
-    className: "ic-close_svg__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"
-  }))), _use || (_use = /*#__PURE__*/React__namespace.createElement("use", {
-    fill: "#999",
-    xlinkHref: "#ic-close_svg__a",
-    fillRule: "evenodd"
-  })));
-};
 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 OpaqueModal = /** @class */ (function (_super) {
@@ -8480,21 +8473,6 @@ function PropagateTagInfo(_a) {
     return (jsxRuntime.jsx(TippyCustomized, __assign({ theme: exports.TippyTheme.white, className: "w-300", placement: "top", Icon: SvgInjectTag, heading: 'Propagate tags to K8s resources', infoText: "", additionalContent: additionalInfo(), showCloseButton: true, trigger: "click", interactive: true, documentationLink: isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS, documentationLinkText: "View Documentation" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flexbox cursor" }, { children: [jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-16 mt-2 mr-4" }), jsxRuntime.jsx("span", { children: "Propagate tags" }), jsxRuntime.jsx(SvgIcHelpOutline, { className: "icon-dim-16 mt-2 ml-4" })] })) })));
 }
 
-var _path$2;
-function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
-var SvgIcAdd = function SvgIcAdd(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
-    className: "ic-add_svg__fill-color",
-    fill: "#999",
-    d: "M18 13h-5v5a1 1 0 0 1-2 0v-5H6a1 1 0 0 1 0-2h5V6a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"
-  })));
-};
-
 var validateTagValue = function (value) {
     var errorList = [];
     if (value.length > 63) {
@@ -8555,15 +8533,15 @@ var ValidationRules = /** @class */ (function () {
     return ValidationRules;
 }());
 
-var _path$1;
-function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
+var _path$2;
+function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
 var SvgIcInfoOutlined = function SvgIcInfoOutlined(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 1.667c4.6 0 8.333 3.733 8.333 8.333S14.6 18.333 10 18.333 1.667 14.6 1.667 10 5.4 1.667 10 1.667zm0 1.666A6.67 6.67 0 0 0 3.333 10 6.67 6.67 0 0 0 10 16.667 6.67 6.67 0 0 0 16.667 10 6.67 6.67 0 0 0 10 3.333zm0 5.834c.46 0 .833.373.833.833v3.333a.834.834 0 1 1-1.666 0V10c0-.46.373-.833.833-.833zm0-3.334A.833.833 0 1 1 10 7.5a.833.833 0 0 1 0-1.667z",
     fill: "#06C",
     fillRule: "evenodd"
@@ -8636,7 +8614,7 @@ var TagLabelValueSelector = function (_a) {
                     ? !validationRules.propagateTagKey(selectedValue).isValid
                     : _tagData.value !== '';
             }
-            else if (selectedValue) {
+            else if (selectedValue || isRequired) {
                 _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid;
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey;
             }
@@ -8675,7 +8653,7 @@ var TagLabelValueSelector = function (_a) {
         if (tagOptions === null || tagOptions === void 0 ? void 0 : tagOptions.length) {
             var filteredTags = tagOptions.filter(function (tag) { return tag.value.indexOf(selectedValue) >= 0; });
             if (filteredTags.length) {
-                return (jsxRuntime.jsx("div", __assign({ className: "p-8" }, { children: filteredTags.map(function (tag, index) { return (jsxRuntime.jsx("div", __assign({ "data-key": tag.label, className: "cursor", onClick: onSelectValue }, { children: tag.label }), "".concat(tag.value, "-").concat(index))); }) })));
+                return (jsxRuntime.jsx("div", { children: filteredTags.map(function (tag, index) { return (jsxRuntime.jsx("div", __assign({ "data-key": tag.label, className: "dc__hover-n50 lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor", onClick: onSelectValue }, { children: tag.label }), "".concat(tag.value, "-").concat(index))); }) }));
             }
         }
         return renderValidationsSuggestions();
@@ -8687,7 +8665,7 @@ var TagLabelValueSelector = function (_a) {
                         : ''), value: selectedValue, onChange: handleInputChange, onBlur: handleOnBlur, onFocus: handleOnFocus, placeholder: placeholder, tabIndex: tabIndex, refVar: refVar, dependentRef: dependentRef }) })), jsxRuntime.jsx(PopupMenu.Body, __assign({ rootClassName: "tag-".concat(selectedTagIndex, "-class"), autoWidth: true, preventWheelDisable: true }, { children: activeElement === "tag-".concat(tagInputType, "-").concat(selectedTagIndex) && renderSuggestions() }))] })));
 };
 
-function TagDetails(_a) {
+var TagDetails = function (_a) {
     var index = _a.index, tagData = _a.tagData, setTagData = _a.setTagData, removeTag = _a.removeTag, _b = _a.tabIndex, tabIndex = _b === void 0 ? 1 : _b, suggestedTagsOptions = _a.suggestedTagsOptions;
     var keyRef = React.useRef(null);
     var valueRef = React.useRef(null);
@@ -8700,11 +8678,26 @@ function TagDetails(_a) {
         _tagData.propagate = !_tagData.propagate;
         setTagData(index, _tagData);
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ".concat(tagData.propagate ? 'bcn-7' : ''), onClick: propagateTagToResource }, { children: jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-20 mt-4 ".concat(tagData.propagate ? 'scn-0' : '') }) })), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.KEY, placeholder: "Enter key", tabIndex: tabIndex - 1, refVar: keyRef, dependentRef: valueRef, tagOptions: suggestedTagsOptions }), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.VALUE, placeholder: "Enter value", tabIndex: tabIndex, refVar: valueRef, dependentRef: keyRef }), jsxRuntime.jsx("div", __assign({ className: "dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top", onClick: deleteTag }, { children: jsxRuntime.jsx(SvgIcClose, { className: "icon-dim-20 mt-4" }) }))] })));
-}
+    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ".concat(tagData.propagate ? 'bcn-7' : ''), onClick: propagateTagToResource }, { children: jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-20 mt-4 ".concat(tagData.propagate ? 'scn-0' : '') }) })), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.KEY, placeholder: "Enter key", tabIndex: tabIndex - 1, refVar: keyRef, dependentRef: valueRef, tagOptions: suggestedTagsOptions }), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.VALUE, placeholder: "Enter value", tabIndex: tabIndex, refVar: valueRef, dependentRef: keyRef }), jsxRuntime.jsx("div", __assign({ className: "dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top", onClick: deleteTag }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-20 mt-4" }) }))] })));
+};
+
+var _path$1;
+function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
+var SvgIcAdd = function SvgIcAdd(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "ic-add_svg__fill-color",
+    fill: "#999",
+    d: "M18 13h-5v5a1 1 0 0 1-2 0v-5H6a1 1 0 0 1 0-2h5V6a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"
+  })));
+};
 
 var TagLabelSelect = function (_a) {
-    var isCreateApp = _a.isCreateApp, labelTags = _a.labelTags, setLabelTags = _a.setLabelTags, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b, suggestedTagsOptions = _a.suggestedTagsOptions;
+    var isCreateApp = _a.isCreateApp, labelTags = _a.labelTags, setLabelTags = _a.setLabelTags, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b;
     var setTagData = function (index, tagValue) {
         var _tags = __spreadArray([], __read(labelTags), false);
         _tags[index] = tagValue;
@@ -8720,7 +8713,7 @@ var TagLabelSelect = function (_a) {
         _tags.splice(index, 1);
         setLabelTags(_tags);
     };
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", __assign({ className: "flexbox dc__content-space mb-8" }, { children: [jsxRuntime.jsx("span", { children: "Tags" }), jsxRuntime.jsx(PropagateTagInfo, { isCreateApp: isCreateApp })] })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", __assign({ className: "dc_width-max-content cb-5 fw-6 fs-13 flexbox mr-20 mb-8 cursor", onClick: addNewTag }, { children: [jsxRuntime.jsx(SvgIcAdd, { className: "icon-dim-20 fcb-5" }), " Add tag"] })), jsxRuntime.jsx("div", __assign({ className: "mb-8" }, { children: labelTags === null || labelTags === void 0 ? void 0 : labelTags.map(function (tagData, index) { return (jsxRuntime.jsx(TagDetails, { index: index, tagData: tagData, setTagData: setTagData, removeTag: removeTag, tabIndex: tabIndex + (index + 2), suggestedTagsOptions: suggestedTagsOptions }, "tag-".concat(index))); }) }))] })] }));
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", __assign({ className: "flexbox dc__content-space mb-8" }, { children: [jsxRuntime.jsx("span", { children: "Tags" }), jsxRuntime.jsx(PropagateTagInfo, { isCreateApp: isCreateApp })] })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", __assign({ className: "dc_width-max-content cb-5 fw-6 fs-13 flexbox mr-20 mb-8 cursor", onClick: addNewTag }, { children: [jsxRuntime.jsx(SvgIcAdd, { className: "icon-dim-20 fcb-5" }), " Add tag"] })), jsxRuntime.jsx("div", __assign({ className: "mb-8" }, { children: labelTags === null || labelTags === void 0 ? void 0 : labelTags.map(function (tagData, index) { return (jsxRuntime.jsx(TagDetails, { index: index, tagData: tagData, setTagData: setTagData, removeTag: removeTag, tabIndex: tabIndex + (index + 2) }, "tag-".concat(index))); }) }))] })] }));
 };
 
 function ConfirmationDialog(_a) {
@@ -16391,6 +16384,7 @@ exports.Option = Option;
 exports.PATTERNS = PATTERNS;
 exports.PopupMenu = PopupMenu;
 exports.Progressing = Progressing;
+exports.PropagateTagInfo = PropagateTagInfo;
 exports.ROUTES = ROUTES;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
@@ -16400,6 +16394,7 @@ exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;
 exports.SingleSelectOption = SingleSelectOption;
 exports.TOAST_ACCESS_DENIED = TOAST_ACCESS_DENIED;
+exports.TagDetails = TagDetails;
 exports.TagLabelSelect = TagLabelSelect;
 exports.TagLabelValueSelector = TagLabelValueSelector;
 exports.TippyCustomized = TippyCustomized;

package/package.json

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

package/src/Common/Constants.ts

@@ -8,31 +8,44 @@ export const DOCUMENTATION = {
 }
 
 export const PATTERNS = {
-  KUBERNETES_KEY_PREFIX: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
-  KUBERNETES_KEY_NAME: /^(([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9])$/,
-  START_END_ALPHANUMERIC: /^([Az09].*[A-Za-z0-9])$|[A-Za-z0-9]$/,
-  ALPHANUMERIC_WITH_SPECIAL_CHAR: /^[A-Za-z0-9._-]+$/, // allow alphanumeric,(.) ,(-),(_)
+    KUBERNETES_KEY_PREFIX: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
+    KUBERNETES_KEY_NAME: /^(([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9])$/,
+    START_END_ALPHANUMERIC: /^([Az09].*[A-Za-z0-9])$|[A-Za-z0-9]$/,
+    ALPHANUMERIC_WITH_SPECIAL_CHAR: /^[A-Za-z0-9._-]+$/, // allow alphanumeric,(.) ,(-),(_)
 }
 
 export const ROUTES = {
-  PROJECT_LIST_MIN: 'team/autocomplete',
+    PROJECT_LIST_MIN: 'team/autocomplete',
 }
 
 export enum KEY_VALUE {
-  KEY= 'key',
-  VALUE= 'value'
+    KEY = 'key',
+    VALUE = 'value',
 }
 
-export const DEFAULT_TAG_DATA = { key: '', value: '', propagate: false, isInvalidKey: false, isInvalidValue: false }
+export const DEFAULT_TAG_DATA = {
+    key: '',
+    value: '',
+    propagate: false,
+    isInvalidKey: false,
+    isInvalidValue: false,
+    isSuggested: true,
+}
 
 export const TOAST_ACCESS_DENIED = {
-  TITLE: 'Access denied',
-  SUBTITLE: 'You do not have required access to perform this action',
+    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: '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',
+    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.',
+}

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useThrottledEffect } from '../Helper'
-import { ResizableTagTextAreaProps } from '../Types'
+import { ResizableTagTextAreaProps } from './Types'
 
 export function ResizableTagTextArea({
     className,

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -1,19 +1,19 @@
 import React, { useRef } from 'react'
-import { ReactComponent as DeleteCross } from '../../Assets/Icon/ic-close.svg'
+import { ReactComponent as DeleteCross } from '../../Assets/Icon/ic-cross.svg'
 import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
-import { TagDetailType } from '../Types'
 import { TagLabelValueSelector } from './TagLabelValueSelector'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
+import { TagDetailType } from './Types'
 
-export default function TagDetails({
+export const TagDetails = ({
     index,
     tagData,
     setTagData,
     removeTag,
     tabIndex = 1,
     suggestedTagsOptions,
-}: TagDetailType) {
+}: TagDetailType) => {
     const keyRef = useRef(null)
     const valueRef = useRef(null)
 

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -1,16 +1,15 @@
 import React from 'react'
 import PropagateTagInfo from './PropagateTagInfo'
 import { ReactComponent as Add } from '../../Assets/Icon/ic-add.svg'
-import TagDetails from './TagDetails'
-import { TagLabelSelectType } from '../Types'
 import { DEFAULT_TAG_DATA } from '../Constants'
+import { TagLabelSelectType } from './Types'
+import { TagDetails } from './TagDetails'
 
 export const TagLabelSelect = ({
     isCreateApp,
     labelTags,
     setLabelTags,
-    tabIndex = 0,
-    suggestedTagsOptions,
+    tabIndex = 0
 }: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
@@ -49,7 +48,6 @@ export const TagLabelSelect = ({
                             setTagData={setTagData}
                             removeTag={removeTag}
                             tabIndex={tabIndex + (index + 2)}
-                            suggestedTagsOptions={suggestedTagsOptions}
                         />
                     ))}
                 </div>

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import { TagLabelValueSelectorType } from '../Types'
 import PopupMenu from '../PopupMenu'
 import { ValidationRules } from './ValidationRules'
 import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-cross.svg'
@@ -7,6 +6,7 @@ import { ReactComponent as Info } from '../../Assets/Icon/ic-info-outlined.svg'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
 import { ResizableTagTextArea } from './ResizableTagTextArea'
+import { TagLabelValueSelectorType } from './Types'
 
 export const TagLabelValueSelector = ({
     selectedTagIndex,
@@ -46,7 +46,7 @@ export const TagLabelValueSelector = ({
                 _tagData.isInvalidKey = selectedValue
                     ? !validationRules.propagateTagKey(selectedValue).isValid
                     : _tagData.value !== ''
-            } else if (selectedValue) {
+            } else if (selectedValue || isRequired) {
                 _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
             } else {
@@ -107,12 +107,12 @@ export const TagLabelValueSelector = ({
             const filteredTags = tagOptions.filter((tag) => tag.value.indexOf(selectedValue) >= 0)
             if (filteredTags.length) {
                 return (
-                    <div className="p-8">
+                    <div>
                         {filteredTags.map((tag, index) => (
                             <div
                                 key={`${tag.value}-${index}`}
                                 data-key={tag.label}
-                                className="cursor"
+                                className="dc__hover-n50 lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor"
                                 onClick={onSelectValue}
                             >
                                 {tag.label}

package/src/Common/CustomTagSelector/Types.ts

@@ -0,0 +1,63 @@
+import { KEY_VALUE } from '../Constants'
+import { OptionType } from '../Types'
+
+export interface TagType {
+    id?: number
+    key: string
+    value?: string
+    description?: string
+    propagate: boolean
+    mandatoryProjectIdsCsv?: string
+    isInvalidKey?: boolean
+    isInvalidValue?: boolean
+    isSuggested?: boolean
+}
+
+export interface TagErrorType {
+    isValid: boolean
+    messages: string[]
+}
+export interface TagLabelSelectType {
+    isCreateApp?: boolean
+    labelTags: TagType[]
+    setLabelTags: (tagList: TagType[]) => void
+    tabIndex?: number
+    selectedProjectId?: number
+    suggestedTagsOptions?: OptionType[]
+}
+
+export interface TagDetailType {
+    index: number
+    tagData: TagType
+    setTagData: (index: number, tagData: TagType) => void
+    removeTag?: (index: number) => void
+    tabIndex?: number
+    suggestedTagsOptions?: OptionType[]
+}
+
+export interface TagLabelValueSelectorType {
+    selectedTagIndex: number
+    tagData: TagType
+    setTagData: (index: number, tagData: TagType) => void
+    tagOptions?: OptionType[]
+    isRequired?: boolean
+    tagInputType?: KEY_VALUE
+    placeholder?: string
+    tabIndex?: number
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+}
+
+export interface ResizableTagTextAreaProps {
+    className?: string
+    minHeight?: number
+    maxHeight?: number
+    value?: string
+    onChange?: (e) => void
+    onBlur?: (e) => void
+    onFocus?: (e) => void
+    placeholder?: string
+    tabIndex?: number
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+}

package/src/Common/CustomTagSelector/index.ts

@@ -1,3 +1,6 @@
+export {default as PropagateTagInfo} from './PropagateTagInfo'
+export * from './TagDetails'
 export * from './TagLabelSelect'
 export * from './TagLabelValueSelector'
-export * from './ResizableTagTextArea'
+export * from './ResizableTagTextArea'
+export * from './Types'

package/src/Common/EmptyState/EmptyState.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import './emptyState.scss';
 import { ReactComponent as Progressing } from '../../Assets/Icon/ic-progressing.svg';
 
-function EmptyState({ children }) {
+function EmptyState({ children, className = '' }) {
     return (
-        <div className="flex column empty-state" style={{ width: '100%', height: '100%' }}>
+        <div className={`flex column empty-state ${className}`} w-100 h-100>
             {children}
         </div>
     )
@@ -18,8 +18,8 @@ function Title({ children }) {
     return children
 }
 
-function Subtitle({ children, className }:{children: any, className?: string}) {
-    return <p className={`subtitle ${className}`}>{children}</p>
+function Subtitle({ children, className }: { children: any; className?: string }) {
+    return <p className={`subtitle ${className || ''}`}>{children}</p>
 }
 
 function Button({ children }) {

package/src/Common/Error.tsx

@@ -3,6 +3,7 @@ import EmptyState from './EmptyState/EmptyState'
 import notAuthorized from '../Assets/Img/ic-not-authorized.svg'
 import Reload from './Reload'
 import ErrorScreenNotFound from './ErrorScreenNotFound'
+import { ERROR_EMPTY_SCREEN } from './Constants'
 
 export class ErrorScreenManager extends Component<{
     code?: number
@@ -18,9 +19,7 @@ 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} subtitleClass={this.props.subtitleClass}/>
             case 404:
                 return <ErrorScreenNotFound />
             case 500:
@@ -43,22 +42,24 @@ export class ErrorScreenManager extends Component<{
     }
 }
 
-export class ErrorScreenNotAuthorized extends Component<{ subtitle: React.ReactChild; subtitleClass?: string }> {
+export class ErrorScreenNotAuthorized extends Component<{
+    subtitle?: React.ReactChild
+    title?: string
+    subtitleClass?: string
+}> {
     render() {
         return (
-            <EmptyState>
+            <EmptyState className="dc__align-reload-center">
                 <EmptyState.Image>
                     <img src={notAuthorized} alt="Not Authorized" />
                 </EmptyState.Image>
                 <EmptyState.Title>
-                    <h3 className="title">Not authorized</h3>
+                    <h3 className="title">{this.props.title ?? ERROR_EMPTY_SCREEN.NOT_AUTHORIZED}</h3>
                 </EmptyState.Title>
                 <EmptyState.Subtitle className={this.props.subtitleClass}>
-                    {this.props.subtitle
-                        ? this.props.subtitle
-                        : "Looks like you don't have access to information on this page. Please contact your manager to request access."}
+                    {this.props.subtitle ?? ERROR_EMPTY_SCREEN.ONLY_FOR_SUPERADMIN}
                 </EmptyState.Subtitle>
             </EmptyState>
         )
     }
-}
+}

package/src/Common/Helper.tsx

@@ -3,31 +3,35 @@ import { toast } from 'react-toastify'
 import * as Sentry from '@sentry/browser'
 import { toastAccessDenied } from './ToastBody'
 import { useEffect, useRef } from 'react'
+import { ERROR_EMPTY_SCREEN } from './Constants'
 
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
-    if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
-        serverError.errors.map(({ userMessage, internalMessage }) => {
-            if (serverError.code === 403 && userMessage === 'unauthorized') {
-                if (!hideAccessError) {
-                    toastAccessDenied()
-                }
-            } else {
-                toast.error(userMessage || internalMessage)
-            }
-        })
-    } else {
-        if (serverError.code !== 403 && serverError.code !== 408) {
-            Sentry.captureException(serverError)
-        }
+  if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
+      serverError.errors.map(({ userMessage, internalMessage }) => {
+          if (
+              serverError.code === 403 &&
+              (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
+          ) {
+              if (!hideAccessError) {
+                  toastAccessDenied()
+              }
+          } else {
+              toast.error(userMessage || internalMessage)
+          }
+      })
+  } else {
+      if (serverError.code !== 403 && serverError.code !== 408) {
+          Sentry.captureException(serverError)
+      }
 
-        if (showToastOnUnknownError) {
-            if (serverError.message) {
-                toast.error(serverError.message)
-            } else {
-                toast.error('Some Error Occurred')
-            }
-        }
-    }
+      if (showToastOnUnknownError) {
+          if (serverError.message) {
+              toast.error(serverError.message)
+          } else {
+              toast.error('Some Error Occurred')
+          }
+      }
+  }
 }
 
 interface ConditionalWrapper<T> {

package/src/Common/Types.ts

@@ -1,5 +1,3 @@
-import { KEY_VALUE } from './Constants'
-
 export interface ResponseType {
     code: number
     status: string
@@ -22,67 +20,6 @@ export enum TippyTheme {
     black = 'black',
     white = 'white',
 }
-
-export interface TagType {
-    id?: number
-    key: string
-    value?: string
-    description?: string
-    propagate: boolean
-    mandatoryProjectIdsCsv?: string
-    isInvalidKey?: boolean
-    isInvalidValue?: boolean
-}
-
-export interface TagErrorType {
-    isValid: boolean
-    messages: string[]
-}
-export interface TagLabelSelectType {
-    isCreateApp?: boolean
-    labelTags: TagType[]
-    setLabelTags: (tagList: TagType[]) => void
-    tabIndex?: number
-    selectedProjectId?: number
-    suggestedTagsOptions?: OptionType[]
-}
-
-export interface TagDetailType {
-    index: number
-    tagData: TagType
-    setTagData: (index: number, tagData: TagType) => void
-    removeTag?: (index: number) => void
-    tabIndex?: number
-    suggestedTagsOptions?: OptionType[]
-}
-
-export interface TagLabelValueSelectorType {
-    selectedTagIndex: number
-    tagData: TagType
-    setTagData: (index: number, tagData: TagType) => void
-    tagOptions?: OptionType[]
-    isRequired?: boolean
-    tagInputType?: KEY_VALUE
-    placeholder?: string
-    tabIndex?: number
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
-}
-
-export interface ResizableTagTextAreaProps {
-    className?: string
-    minHeight?: number
-    maxHeight?: number
-    value?: string
-    onChange?: (e) => void
-    onBlur?: (e) => void
-    onFocus?: (e) => void
-    placeholder?: string
-    tabIndex?: number
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
-}
-
 export interface TeamList extends ResponseType {
     result: Teams[]
 }