@devtron-labs/devtron-fe-common-lib 0.0.10-beta-8 → 0.0.10-beta-9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +13 -8
  2. package/package.json +1 -1
  3. package/src/Common/ImageTags.tsx +42 -26
package/dist/index.js CHANGED
@@ -22830,7 +22830,9 @@ var ImageTagsContainer = function (_a) {
22830
22830
  };
22831
22831
  var handleDescriptionChange = function (e) {
22832
22832
  var description = e.target.value;
22833
- (description === null || description === void 0 ? void 0 : description.length) > 500 ? setDescriptionValidationMessage('comment length cannot exceed 500 characters') : setDescriptionValidationMessage('');
22833
+ (description === null || description === void 0 ? void 0 : description.length) > 500
22834
+ ? setDescriptionValidationMessage('comment length cannot exceed 500 characters')
22835
+ : setDescriptionValidationMessage('');
22834
22836
  setNewDescription(description);
22835
22837
  };
22836
22838
  var handleCancel = function () {
@@ -22845,8 +22847,11 @@ var ImageTagsContainer = function (_a) {
22845
22847
  };
22846
22848
  var handleTagCreate = function (newValue) {
22847
22849
  var lowercaseValue = newValue.toLowerCase().trim();
22848
- if (lowercaseValue.length == 0 || lowercaseValue.length >= 128 || lowercaseValue[0] == '.' || lowercaseValue[0] == '-') {
22849
- setTagErrorMessage("tag name cannot be empty or exceed 128 characters or cannot start with . or -");
22850
+ if (lowercaseValue.length == 0 ||
22851
+ lowercaseValue.length >= 128 ||
22852
+ lowercaseValue[0] == '.' ||
22853
+ lowercaseValue[0] == '-') {
22854
+ setTagErrorMessage('tag name cannot be empty or exceed 128 characters or cannot start with . or -');
22850
22855
  return;
22851
22856
  }
22852
22857
  setTagErrorMessage('');
@@ -22857,7 +22862,7 @@ var ImageTagsContainer = function (_a) {
22857
22862
  isTagExistsInDisplayedTags = true;
22858
22863
  }
22859
22864
  if (isTagExistsInExistingTags || isTagExistsInDisplayedTags || lowercaseValue === 'latest') {
22860
- setTagErrorMessage("This tag ".concat(lowercaseValue, " is already applied on same/another image in this application"));
22865
+ setTagErrorMessage('This tag is already being used in this application');
22861
22866
  return;
22862
22867
  }
22863
22868
  var newTag = {
@@ -22950,10 +22955,10 @@ var ImageTagsContainer = function (_a) {
22950
22955
  });
22951
22956
  }); };
22952
22957
  var renderInfoCard = function () {
22953
- return (jsxRuntime.jsx(TippyCustomized, __assign({ theme: exports.TippyTheme.white, className: "w-300 h-250 fcv-5 dc__overflow-scroll", placement: "right", Icon: SvgIcHelp, heading: "Release tags", infoText: "Release tags allow you to tag container images with readable and relatable tags eg. v1.0.", showCloseButton: true, trigger: "click", interactive: true, documentationLinkText: "View Documentation", additionalContent: getBuildContextAdditionalContent() }, { children: jsxRuntime.jsx("div", __assign({ className: "icon-dim-16 fcn-5 ml-8 cursor" }, { children: jsxRuntime.jsx(SvgIcHelpOutline, {}) })) })));
22958
+ return (jsxRuntime.jsx(TippyCustomized, __assign({ theme: exports.TippyTheme.white, className: "w-300 fcv-5", placement: "right", Icon: SvgIcHelp, heading: "Release tags", showCloseButton: true, trigger: "click", interactive: true, documentationLinkText: "View Documentation", additionalContent: getBuildContextAdditionalContent() }, { children: jsxRuntime.jsx("div", __assign({ className: "icon-dim-16 fcn-5 ml-8 cursor" }, { children: jsxRuntime.jsx(SvgIcHelpOutline, {}) })) })));
22954
22959
  };
22955
22960
  var getBuildContextAdditionalContent = function () {
22956
- return (jsxRuntime.jsx("div", __assign({ className: "p-12 fs-13" }, { children: jsxRuntime.jsxs("ul", { children: [jsxRuntime.jsx("li", { children: "A release tag can only be added if a workflow has CD pipelines deploying to Production environments." }), jsxRuntime.jsx("li", { children: "Multiple tags can be added to an image." }), jsxRuntime.jsx("li", { children: "Multiple images in an application cannot have the same tag." }), jsxRuntime.jsx("li", { children: "Tags cannot be deleted once saved. Although, you can soft delete a tag if an unwanted tag has been added." })] }) })));
22961
+ return (jsxRuntime.jsxs("div", __assign({ className: "h-250 fs-13 dc__overflow-scroll p-12" }, { children: [jsxRuntime.jsx("div", { children: "Release tags allow you to tag container images with readable and relatable tags eg. v1.0." }), jsxRuntime.jsxs("ul", __assign({ className: 'pl-20 mt-8' }, { children: [jsxRuntime.jsx("li", { children: "A release tag can only be added if a workflow has CD pipelines deploying to Production environments." }), jsxRuntime.jsx("li", { children: "Multiple tags can be added to an image." }), jsxRuntime.jsx("li", { children: "Multiple images in an application cannot have the same tag." }), jsxRuntime.jsx("li", { children: "Tags cannot be deleted once saved. Although, you can soft delete a tag if an unwanted tag has been added." })] }))] })));
22957
22962
  };
22958
22963
  var creatableRef = React.useRef(null);
22959
22964
  if (newDescription === '' && displayedTags.length === 0 && !isEditing) {
@@ -22965,7 +22970,7 @@ var ImageTagsContainer = function (_a) {
22965
22970
  }, onHardDeleteClick: function (e) {
22966
22971
  stopPropagation(e);
22967
22972
  handleTagHardDelete(index);
22968
- }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin }, tag.id)); }) })), showTagsWarning && (jsxRuntime.jsxs("div", __assign({ className: "cn-7 mb-8 flex left" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon--info icon-dim-16 mr-2" }), "Tags cannot be edited/removed later"] }))), jsxRuntime.jsx("div", __assign({ className: "cn-7 mt-12" }, { children: "Comment" })), jsxRuntime.jsx("div", __assign({ className: "flex left flex-wrap dc__gap-8 w-100 mt-6", "data-testid": "add-image-comment-text-area" }, { children: jsxRuntime.jsx("textarea", { value: newDescription, onChange: handleDescriptionChange, className: "flex left flex-wrap dc__gap-8 dc__description-textarea", style: { height: '90px !important' } }) })), (descriptionValidationMessage !== '') && (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), jsxRuntime.jsx("div", __assign({ className: "form__error" }, { children: descriptionValidationMessage }))] }))), jsxRuntime.jsxs("div", __assign({ className: "w-100 flex right mt-12" }, { children: [jsxRuntime.jsx("button", __assign({ className: "cta flex cancel h-32 lh-32-imp", type: "button", onClick: function (e) {
22973
+ }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin }, tag.id)); }) })), showTagsWarning && (jsxRuntime.jsxs("div", __assign({ className: "cn-7 mb-8 flex left" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon--info icon-dim-16 mr-2" }), "Tags cannot be edited/removed later"] }))), jsxRuntime.jsx("div", __assign({ className: "cn-7 mt-12" }, { children: "Comment" })), jsxRuntime.jsx("div", __assign({ className: "flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12", "data-testid": "add-image-comment-text-area" }, { children: jsxRuntime.jsx("textarea", { value: newDescription, onChange: handleDescriptionChange, className: "flex left flex-wrap dc__gap-8 dc__description-textarea", style: { height: '90px !important' } }) })), descriptionValidationMessage !== '' && (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), jsxRuntime.jsx("div", __assign({ className: "form__error" }, { children: descriptionValidationMessage }))] }))), jsxRuntime.jsxs("div", __assign({ className: "w-100 flex right mt-12" }, { children: [jsxRuntime.jsx("button", __assign({ className: "cta flex cancel h-32 lh-32-imp", type: "button", onClick: function (e) {
22969
22974
  stopPropagation(e);
22970
22975
  handleCancel();
22971
22976
  } }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ className: "cta flex h-32 lh-32-imp ml-12", "data-testid": "save-tags-button", type: "button", onClick: function (e) {
@@ -22998,7 +23003,7 @@ var ImageTagButton = function (_a) {
22998
23003
  };
22999
23004
  var isInSoftDeleteTags = isSoftDeleted && softDeleteTags.some(function (tag) { return tag.tagName === text; });
23000
23005
  var canTagBeHardDelete = tagId === 0 || isSuperAdmin;
23001
- return (jsxRuntime.jsx("div", __assign({ className: "br-4 en-2 bw-1 dc__w-fit-content dc__word-wrap-anywhere mr-8 bcn-0 flex h-24 ".concat(isSoftDeleted ? 'cy-7 bcy-1 dc__strike-through ey-2' : ''), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex pt-2 pl-8 pr-8 pb-2" }, { children: [isHovered && isEditing && (isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted)) && (jsxRuntime.jsx(IconComponent, { className: "icon-dim-12 mr-4 cursor ".concat(isSoftDeleted ? 'scn-6' : 'fcn-6'), "data-testid": "".concat(text, "-tag-soft-delete"), onClick: onSoftDeleteClick })), text, isHovered && isEditing && canTagBeHardDelete && (jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-12 ml-4 fcn-6 cn-5 cursor", "data-testid": "".concat(text, "-tag-hard-delete"), onClick: onHardDeleteClick }))] })) })));
23006
+ return (jsxRuntime.jsx("div", __assign({ className: "br-4 en-2 bw-1 dc__w-fit-content dc__word-wrap-anywhere mr-8 bcn-0 flex h-24 ".concat(isSoftDeleted ? 'cy-7 bcy-1 dc__strike-through ey-2' : ''), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex pt-2 pl-8 pr-8 pb-2" }, { children: [isHovered && isEditing && (isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted)) && (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag' }, { children: jsxRuntime.jsx(IconComponent, { className: "icon-dim-12 mr-4 cursor ".concat(isSoftDeleted ? 'scn-6' : 'fcn-6'), "data-testid": "".concat(text, "-tag-soft-delete"), onClick: onSoftDeleteClick }) }))), text, isHovered && isEditing && canTagBeHardDelete && (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: "Remove tag" }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-12 ml-4 fcn-6 cn-5 cursor", "data-testid": "".concat(text, "-tag-hard-delete"), onClick: onHardDeleteClick }) })))] })) })));
23002
23007
  };
23003
23008
  var AddImageButton = function (_a) {
23004
23009
  var handleEditClick = _a.handleEditClick;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devtron-labs/devtron-fe-common-lib",
3
- "version": "0.0.10-beta-8",
3
+ "version": "0.0.10-beta-9",
4
4
  "description": "Supporting common component library",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/Common/ImageTags.tsx CHANGED
@@ -15,6 +15,7 @@ import { ImageButtonType, ImageTaggingContainerType, ReleaseTag, TippyTheme } fr
15
15
  import { showError, stopPropagation } from './Helper'
16
16
  import { TippyCustomized } from './TippyCustomized'
17
17
  import { setImageTags, getUserRole } from './Common.service'
18
+ import Tippy from '@tippyjs/react'
18
19
 
19
20
  export const ImageTagsContainer = ({
20
21
  ciPipelineId,
@@ -47,11 +48,11 @@ export const ImageTagsContainer = ({
47
48
 
48
49
  useEffect(() => {
49
50
  reInitState()
50
- }, [imageReleaseTags,imageComment,tagsEditable])
51
+ }, [imageReleaseTags, imageComment, tagsEditable])
51
52
 
52
53
  useEffect(() => {
53
54
  setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
54
- },[appReleaseTagNames])
55
+ }, [appReleaseTagNames])
55
56
 
56
57
  async function initialise() {
57
58
  try {
@@ -91,7 +92,9 @@ export const ImageTagsContainer = ({
91
92
 
92
93
  const handleDescriptionChange = (e) => {
93
94
  const description = e.target.value
94
- description?.length > 500 ? setDescriptionValidationMessage('comment length cannot exceed 500 characters') : setDescriptionValidationMessage('')
95
+ description?.length > 500
96
+ ? setDescriptionValidationMessage('comment length cannot exceed 500 characters')
97
+ : setDescriptionValidationMessage('')
95
98
  setNewDescription(description)
96
99
  }
97
100
 
@@ -108,8 +111,13 @@ export const ImageTagsContainer = ({
108
111
 
109
112
  const handleTagCreate = (newValue) => {
110
113
  const lowercaseValue = newValue.toLowerCase().trim()
111
- if(lowercaseValue.length == 0 || lowercaseValue.length >= 128 || lowercaseValue[0] == '.' || lowercaseValue[0] == '-') {
112
- setTagErrorMessage("tag name cannot be empty or exceed 128 characters or cannot start with . or -")
114
+ if (
115
+ lowercaseValue.length == 0 ||
116
+ lowercaseValue.length >= 128 ||
117
+ lowercaseValue[0] == '.' ||
118
+ lowercaseValue[0] == '-'
119
+ ) {
120
+ setTagErrorMessage('tag name cannot be empty or exceed 128 characters or cannot start with . or -')
113
121
  return
114
122
  }
115
123
  setTagErrorMessage('')
@@ -119,7 +127,9 @@ export const ImageTagsContainer = ({
119
127
  if (displayedTags[i].tagName.toLowerCase() === lowercaseValue) isTagExistsInDisplayedTags = true
120
128
  }
121
129
  if (isTagExistsInExistingTags || isTagExistsInDisplayedTags || lowercaseValue === 'latest') {
122
- setTagErrorMessage(`This tag ${lowercaseValue} is already applied on same/another image in this application`)
130
+ setTagErrorMessage(
131
+ 'This tag is already being used in this application',
132
+ )
123
133
  return
124
134
  }
125
135
  const newTag: ReleaseTag = {
@@ -213,16 +223,14 @@ export const ImageTagsContainer = ({
213
223
  })
214
224
  }
215
225
 
216
-
217
226
  const renderInfoCard = (): JSX.Element => {
218
227
  return (
219
228
  <TippyCustomized
220
229
  theme={TippyTheme.white}
221
- className="w-300 h-250 fcv-5 dc__overflow-scroll"
230
+ className="w-300 fcv-5"
222
231
  placement="right"
223
232
  Icon={QuestionFilled}
224
233
  heading="Release tags"
225
- infoText="Release tags allow you to tag container images with readable and relatable tags eg. v1.0."
226
234
  showCloseButton={true}
227
235
  trigger="click"
228
236
  interactive={true}
@@ -238,8 +246,9 @@ export const ImageTagsContainer = ({
238
246
 
239
247
  const getBuildContextAdditionalContent = () => {
240
248
  return (
241
- <div className="p-12 fs-13">
242
- <ul>
249
+ <div className="h-250 fs-13 dc__overflow-scroll p-12">
250
+ <div>Release tags allow you to tag container images with readable and relatable tags eg. v1.0.</div>
251
+ <ul className='pl-20 mt-8'>
243
252
  <li>
244
253
  A release tag can only be added if a workflow has CD pipelines deploying to Production
245
254
  environments.
@@ -318,10 +327,7 @@ export const ImageTagsContainer = ({
318
327
  </div>
319
328
  )}
320
329
  <div className="cn-7 mt-12">Comment</div>
321
- <div
322
- className="flex left flex-wrap dc__gap-8 w-100 mt-6"
323
- data-testid="add-image-comment-text-area"
324
- >
330
+ <div className="flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12" data-testid="add-image-comment-text-area">
325
331
  <textarea
326
332
  value={newDescription}
327
333
  onChange={handleDescriptionChange}
@@ -329,7 +335,8 @@ export const ImageTagsContainer = ({
329
335
  style={{ height: '90px !important' }}
330
336
  />
331
337
  </div>
332
- { (descriptionValidationMessage !== '') && (<div className="flex left">
338
+ {descriptionValidationMessage !== '' && (
339
+ <div className="flex left">
333
340
  <Error className="form__icon form__icon--error" />
334
341
  <div className="form__error">{descriptionValidationMessage}</div>
335
342
  </div>
@@ -444,19 +451,28 @@ export const ImageTagButton = ({
444
451
  >
445
452
  <div className="flex pt-2 pl-8 pr-8 pb-2">
446
453
  {isHovered && isEditing && (isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted)) && (
447
- <IconComponent
448
- className={`icon-dim-12 mr-4 cursor ${isSoftDeleted ? 'scn-6' : 'fcn-6'}`}
449
- data-testid={`${text}-tag-soft-delete`}
450
- onClick={onSoftDeleteClick}
451
- />
454
+ <Tippy
455
+ className="default-tt"
456
+ arrow={true}
457
+ placement="top"
458
+ content={isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag'}
459
+ >
460
+ <IconComponent
461
+ className={`icon-dim-12 mr-4 cursor ${isSoftDeleted ? 'scn-6' : 'fcn-6'}`}
462
+ data-testid={`${text}-tag-soft-delete`}
463
+ onClick={onSoftDeleteClick}
464
+ />
465
+ </Tippy>
452
466
  )}
453
467
  {text}
454
468
  {isHovered && isEditing && canTagBeHardDelete && (
455
- <Close
456
- className="icon-dim-12 ml-4 fcn-6 cn-5 cursor"
457
- data-testid={`${text}-tag-hard-delete`}
458
- onClick={onHardDeleteClick}
459
- />
469
+ <Tippy className="default-tt" arrow={true} placement="top" content="Remove tag">
470
+ <Close
471
+ className="icon-dim-12 ml-4 fcn-6 cn-5 cursor"
472
+ data-testid={`${text}-tag-hard-delete`}
473
+ onClick={onHardDeleteClick}
474
+ />
475
+ </Tippy>
460
476
  )}
461
477
  </div>
462
478
  </div>