@devtron-labs/devtron-fe-common-lib 0.0.7-beta-12 → 0.0.7-beta-14

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

@@ -28,6 +28,7 @@ export interface TagLabelSelectType {
     tabIndex?: number;
     selectedProjectId?: number;
     suggestedTagsOptions?: SuggestedTagOptionType[];
+    reloadProjectTags?: boolean;
 }
 export interface TagDetailType {
     index: number;

package/dist/index.js

@@ -8590,8 +8590,8 @@ function ResizableTagTextArea(_a) {
     var reInitHeight = function () {
         if (document.activeElement !== refVar.current)
             return;
-        refVar.current.style.height = 'auto';
-        dependentRef.current.style.height = 'auto';
+        refVar.current.style.height = minHeight + 'px';
+        dependentRef.current.style.height = minHeight + 'px';
         var nextHeight = refVar.current.scrollHeight;
         if (nextHeight < dependentRef.current.scrollHeight) {
             nextHeight = dependentRef.current.scrollHeight;
@@ -8607,8 +8607,8 @@ function ResizableTagTextArea(_a) {
     };
     useThrottledEffect(reInitHeight, 500, [text]);
     var handleOnBlur = function (event) {
-        refVar.current.style.height = 'auto';
-        dependentRef.current.style.height = 'auto';
+        refVar.current.style.height = minHeight + 'px';
+        dependentRef.current.style.height = minHeight + 'px';
         onBlur && onBlur(event);
     };
     var handleOnFocus = function (event) {
@@ -8684,7 +8684,7 @@ var TagLabelValueSelector = function (_a) {
         return (jsxRuntime.jsx("div", __assign({ "data-key": tag.label, "data-propagate": tag.propagate, 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)));
     };
     var optionWithTippy = function (tag, index) {
-        return (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: false, placement: "bottom", content: jsxRuntime.jsxs("div", __assign({ className: "pt-6 pr-10 pb-6 pl-10" }, { children: [jsxRuntime.jsx("div", __assign({ className: "mb-10 fs-12 fw-6 cn-0" }, { children: tag.label })), jsxRuntime.jsx("div", __assign({ className: "fs-12 fw-4 cn-0" }, { children: tag.description }))] })) }, { children: option(tag, index) })));
+        return (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: false, placement: "right", content: jsxRuntime.jsxs("div", __assign({ className: "pt-6 pr-10 pb-6 pl-10" }, { children: [jsxRuntime.jsx("div", __assign({ className: "mb-10 fs-12 fw-6 cn-0 dc__break-word" }, { children: tag.label })), jsxRuntime.jsx("div", __assign({ className: "fs-12 fw-4 cn-0 dc__break-word" }, { children: tag.description }))] })) }, { children: option(tag, index) })));
     };
     var renderSuggestions = function () {
         if (tagOptions === null || tagOptions === void 0 ? void 0 : tagOptions.length) {
@@ -16312,7 +16312,7 @@ var MultiValueChipContainer = function (_a) {
     var isValidEmail = validator ? validator(value) : true;
     if (isAllSelected && value !== '*')
         return null;
-    return (jsxRuntime.jsxs(components.MultiValueContainer, __assign({}, { data: data, innerProps: innerProps, selectProps: selectProps }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex fs-12 pl-4 pr-4" }, { children: [!isValidEmail && jsxRuntime.jsx(SvgIcErrorMedium, { className: "mr-4 icon-dim-16" }), jsxRuntime.jsx("div", __assign({ className: "".concat(isValidEmail ? 'cn-9' : 'cr-5') }, { children: label }))] })), children[1]] })));
+    return (jsxRuntime.jsxs(components.MultiValueContainer, __assign({}, { data: data, innerProps: innerProps, selectProps: selectProps }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex left fs-12 pl-4 pr-4 dc__ellipsis-right" }, { children: [!isValidEmail && jsxRuntime.jsx(SvgIcErrorMedium, { className: "mr-4 icon-dim-16" }), jsxRuntime.jsx("div", __assign({ className: "dc__ellipsis-right ".concat(isValidEmail ? 'cn-9' : 'cr-5') }, { children: label }))] })), children[1]] })));
 };
 var multiSelectStyles = {
     control: function (base, state) { return (__assign(__assign({}, base), { cursor: state.isDisabled ? 'not-allowed' : 'normal', border: state.isFocused ? '1px solid #06c' : '1px solid #d6dbdf', boxShadow: 'none' })); },
@@ -16344,7 +16344,7 @@ function InfoColourBar(_a) {
         }
         return (linkOnClick && (jsxRuntime.jsx("div", __assign({ onClick: linkOnClick, className: "cursor dc__link dc__underline-onhover" }, { children: linkText }))));
     };
-    return (jsxRuntime.jsx("div", __assign({ className: "info-bar-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "".concat(classname, " info_text flex dc__content-space pt-8 pb-8 pl-16 pr-16 br-4 top fs-13 fw-4"), style: styles }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex top ".concat(typeof renderActionButton === 'function' ? 'mr-5' : '') }, { children: [jsxRuntime.jsx("div", __assign({ className: "icon-dim-".concat(iconSize !== null && iconSize !== void 0 ? iconSize : '20', " mr-10") }, { children: jsxRuntime.jsx(Icon, { className: "icon-dim-".concat(iconSize !== null && iconSize !== void 0 ? iconSize : '20', " ").concat(iconClass || '', " mr-8") }) })), jsxRuntime.jsxs("div", __assign({ className: "info-bar-message-wrapper ".concat(linkClass || '') }, { children: [jsxRuntime.jsx("span", __assign({ className: linkText && redirectLink ? 'mr-5' : '' }, { children: message })), renderLink()] }))] })), typeof renderActionButton === 'function' && renderActionButton()] })) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "info-bar-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "".concat(classname, " info_text flex dc__content-space pt-8 pb-8 pl-12 pr-12 br-4 top fs-13 fw-4"), style: styles }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex top ".concat(typeof renderActionButton === 'function' ? 'mr-5' : '') }, { children: [jsxRuntime.jsx("div", __assign({ className: "icon-dim-".concat(iconSize !== null && iconSize !== void 0 ? iconSize : '20', " mr-10") }, { children: jsxRuntime.jsx(Icon, { className: "icon-dim-".concat(iconSize !== null && iconSize !== void 0 ? iconSize : '20', " ").concat(iconClass || '', " mr-8") }) })), jsxRuntime.jsxs("div", __assign({ className: "info-bar-message-wrapper ".concat(linkClass || '') }, { children: [jsxRuntime.jsx("span", __assign({ className: linkText && redirectLink ? 'mr-5' : '' }, { children: message })), renderLink()] }))] })), typeof renderActionButton === 'function' && renderActionButton()] })) })));
 }
 
 var getTeamListMin = function () {

package/package.json

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

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -28,8 +28,8 @@ export function ResizableTagTextArea({
 
     const reInitHeight = () => {
         if (document.activeElement !== refVar.current) return
-        refVar.current.style.height = 'auto'
-        dependentRef.current.style.height = 'auto'
+        refVar.current.style.height = minHeight+ 'px'
+        dependentRef.current.style.height = minHeight+ 'px'
         let nextHeight = refVar.current.scrollHeight
         if (nextHeight < dependentRef.current.scrollHeight) {
             nextHeight = dependentRef.current.scrollHeight
@@ -47,8 +47,8 @@ export function ResizableTagTextArea({
     useThrottledEffect(reInitHeight, 500, [text])
 
     const handleOnBlur = (event) => {
-        refVar.current.style.height = 'auto'
-        dependentRef.current.style.height = 'auto'
+        refVar.current.style.height = minHeight+ 'px'
+        dependentRef.current.style.height = minHeight+ 'px'
         onBlur && onBlur(event)
     }
 

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -124,13 +124,13 @@ export const TagLabelValueSelector = ({
             <Tippy
                 className="default-tt"
                 arrow={false}
-                placement="bottom"
+                placement="right"
                 content={
                     <div className="pt-6 pr-10 pb-6 pl-10">
-                        <div className="mb-10 fs-12 fw-6 cn-0">
+                        <div className="mb-10 fs-12 fw-6 cn-0 dc__break-word">
                             {tag.label}
                         </div>
-                        <div className="fs-12 fw-4 cn-0">
+                        <div className="fs-12 fw-4 cn-0 dc__break-word">
                             {tag.description}
                         </div>
                     </div>

package/src/Common/CustomTagSelector/Types.ts

@@ -29,6 +29,7 @@ export interface TagLabelSelectType {
     tabIndex?: number
     selectedProjectId?: number
     suggestedTagsOptions?: SuggestedTagOptionType[]
+    reloadProjectTags?: boolean
 }
 
 export interface TagDetailType {

package/src/Common/InfoColorBar/InfoColourbar.tsx

@@ -57,7 +57,7 @@ function InfoColourBar({
     return (
         <div className="info-bar-container">
             <div
-                className={`${classname} info_text flex dc__content-space pt-8 pb-8 pl-16 pr-16 br-4 top fs-13 fw-4`}
+                className={`${classname} info_text flex dc__content-space pt-8 pb-8 pl-12 pr-12 br-4 top fs-13 fw-4`}
                 style={styles}
             >
                 <div className={`flex top ${typeof renderActionButton === 'function' ? 'mr-5' : ''}`}>

package/src/Common/MultiSelectCustomization.tsx

@@ -87,9 +87,9 @@ export const MultiValueChipContainer = ({ validator, isAllSelected = false, ...p
 
     return (
         <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
-            <div className={`flex fs-12 pl-4 pr-4`}>
+            <div className="flex left fs-12 pl-4 pr-4 dc__ellipsis-right">
                 {!isValidEmail && <RedWarning className="mr-4 icon-dim-16" />}
-                <div className={`${isValidEmail ? 'cn-9' : 'cr-5'}`}>{label}</div>
+                <div className={`dc__ellipsis-right ${isValidEmail ? 'cn-9' : 'cr-5'}`}>{label}</div>
             </div>
             {children[1]}
         </components.MultiValueContainer>