@devtron-labs/devtron-fe-common-lib 0.0.13-beta-2 → 0.0.13-beta-4

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 +15 -17
  2. package/package.json +1 -1
  3. package/src/Common/ImageTags.tsx +18 -20
package/dist/index.js CHANGED
@@ -22780,7 +22780,7 @@ var ImageTagsContainer = function (_a) {
22780
22780
  lowercaseValue.length >= 128 ||
22781
22781
  lowercaseValue[0] == '.' ||
22782
22782
  lowercaseValue[0] == '-') {
22783
- setTagErrorMessage('tag name cannot be empty or exceed 128 characters or cannot start with . or -');
22783
+ setTagErrorMessage('Tag name cannot be empty or exceed 128 characters or cannot start with . or -');
22784
22784
  return false;
22785
22785
  }
22786
22786
  setTagErrorMessage('');
@@ -22798,9 +22798,7 @@ var ImageTagsContainer = function (_a) {
22798
22798
  };
22799
22799
  var handleTagCreate = function (newValue) {
22800
22800
  var lowercaseValue = newValue.toLowerCase().trim();
22801
- console.log("handleTagCreate,outside validation : ");
22802
22801
  if (validateTag(lowercaseValue)) {
22803
- console.log("handleTagCreate,inside validation : ");
22804
22802
  var newTag = {
22805
22803
  id: 0,
22806
22804
  tagName: lowercaseValue,
@@ -22809,11 +22807,14 @@ var ImageTagsContainer = function (_a) {
22809
22807
  artifactId: 0,
22810
22808
  duplicateTag: false,
22811
22809
  };
22812
- setCreateTags(__spreadArray(__spreadArray([], __read(createTags), false), [newTag], false));
22810
+ var newCreateTags = __spreadArray(__spreadArray([], __read(createTags), false), [newTag], false);
22811
+ setCreateTags(newCreateTags);
22813
22812
  setDisplayedTags(__spreadArray(__spreadArray([], __read(displayedTags), false), [newTag], false));
22814
22813
  setShowTagsWarning(true);
22815
22814
  setTextInput('');
22815
+ return newCreateTags;
22816
22816
  }
22817
+ return createTags;
22817
22818
  };
22818
22819
  var handleTagSoftDelete = function (index) {
22819
22820
  var updatedTags = __spreadArray([], __read(displayedTags), false);
@@ -22867,13 +22868,13 @@ var ImageTagsContainer = function (_a) {
22867
22868
  setDisplayedTags(displayList);
22868
22869
  });
22869
22870
  };
22870
- var handleSave = function () { return __awaiter(void 0, void 0, void 0, function () {
22871
+ var handleSave = function (tagsToBeCreated) { return __awaiter(void 0, void 0, void 0, function () {
22871
22872
  var payload;
22872
22873
  return __generator(this, function (_a) {
22873
22874
  if (tagErrorMessage)
22874
22875
  return [2 /*return*/];
22875
22876
  payload = {
22876
- createTags: createTags,
22877
+ createTags: tagsToBeCreated,
22877
22878
  softDeleteTags: softDeleteTags,
22878
22879
  imageComment: {
22879
22880
  id: 0,
@@ -22927,7 +22928,7 @@ var ImageTagsContainer = function (_a) {
22927
22928
  });
22928
22929
  }); };
22929
22930
  var renderInfoCard = function () {
22930
- 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, additionalContent: getBuildContextAdditionalContent() }, { children: jsxRuntime.jsx("div", __assign({ className: "icon-dim-16 fcn-5 ml-8 cursor" }, { children: jsxRuntime.jsx(SvgIcHelpOutline, {}) })) })));
22931
+ 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, additionalContent: getBuildContextAdditionalContent() }, { children: jsxRuntime.jsx("div", __assign({ className: "flex" }, { children: jsxRuntime.jsx(SvgIcHelpOutline, { className: "fcn-5 ml-8 cursor icon-dim-16" }) })) })));
22931
22932
  };
22932
22933
  var getBuildContextAdditionalContent = function () {
22933
22934
  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." })] }))] })));
@@ -22942,8 +22943,6 @@ var ImageTagsContainer = function (_a) {
22942
22943
  }
22943
22944
  };
22944
22945
  var setInputValue = function (e) {
22945
- console.log("setInputValue: ");
22946
- console.log(e.target.value);
22947
22946
  e.target.value && validateTag(e.target.value);
22948
22947
  setTextInput(e.target.value);
22949
22948
  };
@@ -22954,14 +22953,13 @@ var ImageTagsContainer = function (_a) {
22954
22953
  }
22955
22954
  };
22956
22955
  var onClickSave = function () {
22957
- console.log("onClickSave: ");
22958
- console.log(textInput);
22956
+ var tagsToBeCreated = createTags;
22959
22957
  if (textInput.trim()) {
22960
- handleTagCreate(textInput);
22958
+ tagsToBeCreated = handleTagCreate(textInput);
22961
22959
  }
22962
- handleSave();
22960
+ handleSave(tagsToBeCreated);
22963
22961
  };
22964
- return (jsxRuntime.jsx("div", __assign({ className: "mt-8" }, { children: isEditing && tagsEditable ? (jsxRuntime.jsxs("div", __assign({ className: "bcn-0 dc__border-top-n1 " }, { children: [jsxRuntime.jsxs("div", __assign({ className: "cn-7 mt-12 flex left" }, { children: [jsxRuntime.jsx("span", { children: "Release tags (eg. v1.0)" }), jsxRuntime.jsx("div", __assign({ className: "flex row ml-0" }, { children: renderInfoCard() }))] })), jsxRuntime.jsxs("div", __assign({ className: "mt-6 dc__position-rel-imp", "data-testid": "add-tag-text-area" }, { children: [jsxRuntime.jsx("input", { className: "form__input", value: textInput, onChange: setInputValue, placeholder: "Type a tag and press enter", onKeyDown: handleKeydown, onBlur: setInputValue, ref: creatableRef }), textInput.length > 0 && (jsxRuntime.jsxs("div", __assign({ onClick: enterTagCreate, className: "dc__position-abs bcn-0 flex cursor pt-2 pb-2 pr-4 pl-4 br-2 cn-7 dc__border dc__border-bottom-2", style: {
22962
+ return (jsxRuntime.jsx("div", __assign({ className: "mt-8" }, { children: isEditing && tagsEditable ? (jsxRuntime.jsxs("div", __assign({ className: "bcn-0 dc__border-top-n1 " }, { children: [jsxRuntime.jsxs("div", __assign({ className: "cn-7 mt-12 flex left" }, { children: [jsxRuntime.jsx("div", { children: "Release tags (eg. v1.0)" }), renderInfoCard()] })), jsxRuntime.jsxs("div", __assign({ className: "mt-6 dc__position-rel-imp", "data-testid": "add-tag-text-area" }, { children: [jsxRuntime.jsx("input", { className: "form__input", value: textInput, onChange: setInputValue, placeholder: "Type a tag and press enter", onKeyDown: handleKeydown, onBlur: setInputValue, ref: creatableRef }), textInput.length > 0 && (jsxRuntime.jsxs("div", __assign({ onClick: enterTagCreate, className: "dc__position-abs bcn-0 flex cursor pt-2 pb-2 pr-4 pl-4 br-2 cn-7 dc__border dc__border-bottom-2", style: {
22965
22963
  top: '50%',
22966
22964
  fontFamily: 'monospace',
22967
22965
  right: '8px',
@@ -22978,13 +22976,13 @@ var ImageTagsContainer = function (_a) {
22978
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) {
22979
22977
  stopPropagation(e);
22980
22978
  onClickSave();
22981
- } }, { children: "Save" }))] }))] }))) : (jsxRuntime.jsxs("div", __assign({ className: "top br-4 bcn-0 image-tags-container flexbox" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10", "data-testid": "image-tags-container-hover" }, { children: jsxRuntime.jsxs("div", __assign({ className: 'w-100' }, { children: [initialDescription && jsxRuntime.jsx("div", __assign({ className: "mb-6 fs-13 dc__word-break-all" }, { children: initialDescription })), jsxRuntime.jsx("div", __assign({ className: "flex-wrap flex left" }, { children: initialTags === null || initialTags === void 0 ? void 0 : initialTags.map(function (tag, index) { return (jsxRuntime.jsx(ImageTagButton, { text: tag === null || tag === void 0 ? void 0 : tag.tagName, isSoftDeleted: tag === null || tag === void 0 ? void 0 : tag.deleted, isEditing: isEditing, onSoftDeleteClick: function (e) {
22979
+ } }, { children: "Save" }))] }))] }))) : (jsxRuntime.jsxs("div", __assign({ className: "top br-4 bcn-0 image-tags-container flexbox" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10", "data-testid": "image-tags-container-hover" }, { children: jsxRuntime.jsxs("div", __assign({ className: 'w-100' }, { children: [initialDescription && jsxRuntime.jsx("div", __assign({ className: "mb-6 fs-13 lh-20 dc__word-break-all" }, { children: initialDescription })), jsxRuntime.jsx("div", __assign({ className: "flex-wrap flex left" }, { children: initialTags === null || initialTags === void 0 ? void 0 : initialTags.map(function (tag, index) { return (jsxRuntime.jsx(ImageTagButton, { text: tag === null || tag === void 0 ? void 0 : tag.tagName, isSoftDeleted: tag === null || tag === void 0 ? void 0 : tag.deleted, isEditing: isEditing, onSoftDeleteClick: function (e) {
22982
22980
  stopPropagation(e);
22983
22981
  handleTagSoftDelete(index);
22984
22982
  }, onHardDeleteClick: function (e) {
22985
22983
  stopPropagation(e);
22986
22984
  handleTagHardDelete(index);
22987
- }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag, hideHardDelete: hideHardDelete }, tag === null || tag === void 0 ? void 0 : tag.id)); }) }))] })) })), jsxRuntime.jsx("div", __assign({ className: "mt-8 mr-6 icon-dim-16" }, { children: tagsEditable && (jsxRuntime.jsx(SvgIcPencil, { className: "icon-dim-16 image-tags-container-edit__icon cursor", "data-testid": "edit-tags-icon", onClick: function (e) {
22985
+ }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag, hideHardDelete: hideHardDelete }, tag === null || tag === void 0 ? void 0 : tag.id)); }) }))] })) })), jsxRuntime.jsx("div", __assign({ className: "mt-8 mr-10 icon-dim-16" }, { children: tagsEditable && (jsxRuntime.jsx(SvgIcPencil, { className: "icon-dim-16 image-tags-container-edit__icon cursor", "data-testid": "edit-tags-icon", onClick: function (e) {
22988
22986
  stopPropagation(e);
22989
22987
  handleEditClick();
22990
22988
  } })) }))] }))) })));
@@ -23005,7 +23003,7 @@ var ImageTagButton = function (_a) {
23005
23003
  return 'cn-9';
23006
23004
  }
23007
23005
  };
23008
- return (jsxRuntime.jsxs("div", __assign({ className: "br-4 en-2 bw-1 mr-8 bcn-0 mb-4 pt-2 pr-8 pb-2 pl-8 tag-class dc__word-break-all flex ".concat(isEditing ? 'icon-hover' : '', " ").concat(tabColor()) }, { children: [duplicateTag ? (jsxRuntime.jsx(SvgIcErrorExclamation, { className: "icon-dim-12 mr-4" })) : (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag' }, { children: jsxRuntime.jsx("div", __assign({ className: "action-icon mr-4 lh-16 pt-3 ".concat(isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted) ? 'show-icon' : '') }, { children: jsxRuntime.jsx(IconComponent, { className: "icon-dim-12 cursor".concat(isSoftDeleted ? 'scn-6' : 'fcn-6', " "), "data-testid": "".concat(text, "-tag-soft-delete"), onClick: onSoftDeleteClick }) })) }))), text, jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: "Remove tag" }, { children: jsxRuntime.jsx("div", __assign({ className: "action-icon ml-4 lh-16 pt-3 ".concat(canTagBeHardDelete ? 'show-icon' : '') }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-12 fcn-6 cursor", "data-testid": "".concat(text, "-tag-hard-delete"), onClick: onHardDeleteClick }) })) }))] })));
23006
+ return (jsxRuntime.jsxs("div", __assign({ className: "br-4 en-2 bw-1 mr-8 bcn-0 mb-4 pt-2 pr-8 pb-2 pl-8 tag-class dc__word-break-all flex ".concat(isEditing ? 'icon-hover' : '', " ").concat(tabColor()) }, { children: [duplicateTag ? (jsxRuntime.jsx(SvgIcErrorExclamation, { className: "icon-dim-12 mr-4" })) : (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag' }, { children: jsxRuntime.jsx("div", __assign({ className: "action-icon mr-4 lh-16 pt-3 ".concat(isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted) ? 'show-icon' : '') }, { children: jsxRuntime.jsx(IconComponent, { className: "icon-dim-12 cursor ".concat(isSoftDeleted ? 'scn-6' : 'fcn-6', " "), "data-testid": "".concat(text, "-tag-soft-delete"), onClick: onSoftDeleteClick }) })) }))), text, jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: "Remove tag" }, { children: jsxRuntime.jsx("div", __assign({ className: "action-icon ml-4 lh-16 pt-3 ".concat(canTagBeHardDelete ? 'show-icon' : '') }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-12 fcn-6 cursor", "data-testid": "".concat(text, "-tag-hard-delete"), onClick: onHardDeleteClick }) })) }))] })));
23009
23007
  };
23010
23008
  var AddImageButton = function (_a) {
23011
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.13-beta-2",
3
+ "version": "0.0.13-beta-4",
4
4
  "description": "Supporting common component library",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/Common/ImageTags.tsx CHANGED
@@ -114,7 +114,7 @@ export const ImageTagsContainer = ({
114
114
  lowercaseValue[0] == '.' ||
115
115
  lowercaseValue[0] == '-'
116
116
  ) {
117
- setTagErrorMessage('tag name cannot be empty or exceed 128 characters or cannot start with . or -')
117
+ setTagErrorMessage('Tag name cannot be empty or exceed 128 characters or cannot start with . or -')
118
118
  return false
119
119
  }
120
120
  setTagErrorMessage('')
@@ -130,11 +130,9 @@ export const ImageTagsContainer = ({
130
130
  return true
131
131
  }
132
132
 
133
- const handleTagCreate = (newValue) => {
133
+ const handleTagCreate = (newValue) : ReleaseTag[] => {
134
134
  const lowercaseValue = newValue.toLowerCase().trim()
135
- console.log("handleTagCreate,outside validation : ")
136
135
  if(validateTag(lowercaseValue)) {
137
- console.log("handleTagCreate,inside validation : ")
138
136
  const newTag: ReleaseTag = {
139
137
  id: 0,
140
138
  tagName: lowercaseValue,
@@ -143,11 +141,14 @@ export const ImageTagsContainer = ({
143
141
  artifactId: 0,
144
142
  duplicateTag: false,
145
143
  }
146
- setCreateTags([...createTags, newTag])
144
+ const newCreateTags = [...createTags, newTag]
145
+ setCreateTags(newCreateTags)
147
146
  setDisplayedTags([...displayedTags, newTag])
148
147
  setShowTagsWarning(true)
149
148
  setTextInput('')
149
+ return newCreateTags
150
150
  }
151
+ return createTags
151
152
  }
152
153
 
153
154
  const handleTagSoftDelete = (index) => {
@@ -210,11 +211,11 @@ export const ImageTagsContainer = ({
210
211
  })
211
212
  }
212
213
 
213
- const handleSave = async () => {
214
+ const handleSave = async (tagsToBeCreated: ReleaseTag[]) => {
214
215
  if (tagErrorMessage) return
215
216
 
216
217
  const payload = {
217
- createTags: createTags,
218
+ createTags: tagsToBeCreated,
218
219
  softDeleteTags: softDeleteTags,
219
220
  imageComment: {
220
221
  id: 0,
@@ -276,8 +277,8 @@ export const ImageTagsContainer = ({
276
277
  interactive={true}
277
278
  additionalContent={getBuildContextAdditionalContent()}
278
279
  >
279
- <div className="icon-dim-16 fcn-5 ml-8 cursor">
280
- <Question />
280
+ <div className="flex">
281
+ <Question className="fcn-5 ml-8 cursor icon-dim-16"/>
281
282
  </div>
282
283
  </TippyCustomized>
283
284
  )
@@ -322,8 +323,6 @@ export const ImageTagsContainer = ({
322
323
  }
323
324
 
324
325
  const setInputValue = (e) => {
325
- console.log("setInputValue: ")
326
- console.log(e.target.value)
327
326
  e.target.value && validateTag(e.target.value)
328
327
  setTextInput(e.target.value)
329
328
  }
@@ -336,12 +335,11 @@ export const ImageTagsContainer = ({
336
335
  }
337
336
 
338
337
  const onClickSave = () => {
339
- console.log("onClickSave: ")
340
- console.log(textInput)
338
+ let tagsToBeCreated = createTags
341
339
  if (textInput.trim()) {
342
- handleTagCreate(textInput)
340
+ tagsToBeCreated = handleTagCreate(textInput)
343
341
  }
344
- handleSave()
342
+ handleSave(tagsToBeCreated)
345
343
  }
346
344
 
347
345
  return (
@@ -349,8 +347,8 @@ export const ImageTagsContainer = ({
349
347
  {isEditing && tagsEditable ? (
350
348
  <div className="bcn-0 dc__border-top-n1 ">
351
349
  <div className="cn-7 mt-12 flex left">
352
- <span>Release tags (eg. v1.0)</span>
353
- <div className="flex row ml-0">{renderInfoCard()}</div>
350
+ <div>Release tags (eg. v1.0)</div>
351
+ {renderInfoCard()}
354
352
  </div>
355
353
  <div className="mt-6 dc__position-rel-imp" data-testid="add-tag-text-area">
356
354
  <input
@@ -463,7 +461,7 @@ export const ImageTagsContainer = ({
463
461
  data-testid="image-tags-container-hover"
464
462
  >
465
463
  <div className='w-100'>
466
- {initialDescription && <div className="mb-6 fs-13 dc__word-break-all">{initialDescription}</div>}
464
+ {initialDescription && <div className="mb-6 fs-13 lh-20 dc__word-break-all">{initialDescription}</div>}
467
465
  <div className="flex-wrap flex left">
468
466
  {initialTags?.map((tag, index) => (
469
467
  <ImageTagButton
@@ -489,7 +487,7 @@ export const ImageTagsContainer = ({
489
487
  </div>
490
488
  </div>
491
489
  </div>
492
- <div className="mt-8 mr-6 icon-dim-16">
490
+ <div className="mt-8 mr-10 icon-dim-16">
493
491
  {tagsEditable && (
494
492
  <EditIcon
495
493
  className="icon-dim-16 image-tags-container-edit__icon cursor"
@@ -554,7 +552,7 @@ export const ImageTagButton = ({
554
552
  }`}
555
553
  >
556
554
  <IconComponent
557
- className={`icon-dim-12 cursor${isSoftDeleted ? 'scn-6' : 'fcn-6'} `}
555
+ className={`icon-dim-12 cursor ${isSoftDeleted ? 'scn-6' : 'fcn-6'} `}
558
556
  data-testid={`${text}-tag-soft-delete`}
559
557
  onClick={onSoftDeleteClick}
560
558
  />