@devtron-labs/devtron-fe-common-lib 0.0.13 → 0.0.14

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 (5) hide show
  1. package/dist/Common/Types.d.ts +1 -0
  2. package/dist/index.js +15 -11
  3. package/package.json +1 -1
  4. package/src/Common/ImageTags.tsx +19 -14
  5. package/src/Common/Types.ts +1 -0
package/dist/Common/Types.d.ts CHANGED
@@ -306,5 +306,6 @@ export interface CDMaterialResponseType {
306
306
  requestedUserId: number;
307
307
  tagsEditable: boolean;
308
308
  appReleaseTagNames: string[];
309
+ hideImageTaggingHardDelete: boolean;
309
310
  }
310
311
  export {};
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('');
@@ -22807,11 +22807,14 @@ var ImageTagsContainer = function (_a) {
22807
22807
  artifactId: 0,
22808
22808
  duplicateTag: false,
22809
22809
  };
22810
- setCreateTags(__spreadArray(__spreadArray([], __read(createTags), false), [newTag], false));
22810
+ var newCreateTags = __spreadArray(__spreadArray([], __read(createTags), false), [newTag], false);
22811
+ setCreateTags(newCreateTags);
22811
22812
  setDisplayedTags(__spreadArray(__spreadArray([], __read(displayedTags), false), [newTag], false));
22812
22813
  setShowTagsWarning(true);
22813
22814
  setTextInput('');
22815
+ return newCreateTags;
22814
22816
  }
22817
+ return createTags;
22815
22818
  };
22816
22819
  var handleTagSoftDelete = function (index) {
22817
22820
  var updatedTags = __spreadArray([], __read(displayedTags), false);
@@ -22865,13 +22868,13 @@ var ImageTagsContainer = function (_a) {
22865
22868
  setDisplayedTags(displayList);
22866
22869
  });
22867
22870
  };
22868
- 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 () {
22869
22872
  var payload;
22870
22873
  return __generator(this, function (_a) {
22871
22874
  if (tagErrorMessage)
22872
22875
  return [2 /*return*/];
22873
22876
  payload = {
22874
- createTags: createTags,
22877
+ createTags: tagsToBeCreated,
22875
22878
  softDeleteTags: softDeleteTags,
22876
22879
  imageComment: {
22877
22880
  id: 0,
@@ -22925,7 +22928,7 @@ var ImageTagsContainer = function (_a) {
22925
22928
  });
22926
22929
  }); };
22927
22930
  var renderInfoCard = function () {
22928
- 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" }) })) })));
22929
22932
  };
22930
22933
  var getBuildContextAdditionalContent = function () {
22931
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." })] }))] })));
@@ -22950,12 +22953,13 @@ var ImageTagsContainer = function (_a) {
22950
22953
  }
22951
22954
  };
22952
22955
  var onClickSave = function () {
22956
+ var tagsToBeCreated = createTags;
22953
22957
  if (textInput.trim()) {
22954
- handleTagCreate(textInput);
22958
+ tagsToBeCreated = handleTagCreate(textInput);
22955
22959
  }
22956
- handleSave();
22960
+ handleSave(tagsToBeCreated);
22957
22961
  };
22958
- 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, 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: {
22959
22963
  top: '50%',
22960
22964
  fontFamily: 'monospace',
22961
22965
  right: '8px',
@@ -22972,13 +22976,13 @@ var ImageTagsContainer = function (_a) {
22972
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) {
22973
22977
  stopPropagation(e);
22974
22978
  onClickSave();
22975
- } }, { 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) {
22976
22980
  stopPropagation(e);
22977
22981
  handleTagSoftDelete(index);
22978
22982
  }, onHardDeleteClick: function (e) {
22979
22983
  stopPropagation(e);
22980
22984
  handleTagHardDelete(index);
22981
- }, 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) {
22982
22986
  stopPropagation(e);
22983
22987
  handleEditClick();
22984
22988
  } })) }))] }))) })));
@@ -22999,7 +23003,7 @@ var ImageTagButton = function (_a) {
22999
23003
  return 'cn-9';
23000
23004
  }
23001
23005
  };
23002
- 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 }) })) }))] })));
23003
23007
  };
23004
23008
  var AddImageButton = function (_a) {
23005
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",
3
+ "version": "0.0.14",
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,7 +130,7 @@ 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
135
  if(validateTag(lowercaseValue)) {
136
136
  const newTag: ReleaseTag = {
@@ -141,11 +141,14 @@ export const ImageTagsContainer = ({
141
141
  artifactId: 0,
142
142
  duplicateTag: false,
143
143
  }
144
- setCreateTags([...createTags, newTag])
144
+ const newCreateTags = [...createTags, newTag]
145
+ setCreateTags(newCreateTags)
145
146
  setDisplayedTags([...displayedTags, newTag])
146
147
  setShowTagsWarning(true)
147
148
  setTextInput('')
149
+ return newCreateTags
148
150
  }
151
+ return createTags
149
152
  }
150
153
 
151
154
  const handleTagSoftDelete = (index) => {
@@ -208,11 +211,11 @@ export const ImageTagsContainer = ({
208
211
  })
209
212
  }
210
213
 
211
- const handleSave = async () => {
214
+ const handleSave = async (tagsToBeCreated: ReleaseTag[]) => {
212
215
  if (tagErrorMessage) return
213
216
 
214
217
  const payload = {
215
- createTags: createTags,
218
+ createTags: tagsToBeCreated,
216
219
  softDeleteTags: softDeleteTags,
217
220
  imageComment: {
218
221
  id: 0,
@@ -274,8 +277,8 @@ export const ImageTagsContainer = ({
274
277
  interactive={true}
275
278
  additionalContent={getBuildContextAdditionalContent()}
276
279
  >
277
- <div className="icon-dim-16 fcn-5 ml-8 cursor">
278
- <Question />
280
+ <div className="flex">
281
+ <Question className="fcn-5 ml-8 cursor icon-dim-16"/>
279
282
  </div>
280
283
  </TippyCustomized>
281
284
  )
@@ -332,10 +335,11 @@ export const ImageTagsContainer = ({
332
335
  }
333
336
 
334
337
  const onClickSave = () => {
338
+ let tagsToBeCreated = createTags
335
339
  if (textInput.trim()) {
336
- handleTagCreate(textInput)
340
+ tagsToBeCreated = handleTagCreate(textInput)
337
341
  }
338
- handleSave()
342
+ handleSave(tagsToBeCreated)
339
343
  }
340
344
 
341
345
  return (
@@ -343,8 +347,8 @@ export const ImageTagsContainer = ({
343
347
  {isEditing && tagsEditable ? (
344
348
  <div className="bcn-0 dc__border-top-n1 ">
345
349
  <div className="cn-7 mt-12 flex left">
346
- <span>Release tags (eg. v1.0)</span>
347
- <div className="flex row ml-0">{renderInfoCard()}</div>
350
+ <div>Release tags (eg. v1.0)</div>
351
+ {renderInfoCard()}
348
352
  </div>
349
353
  <div className="mt-6 dc__position-rel-imp" data-testid="add-tag-text-area">
350
354
  <input
@@ -353,6 +357,7 @@ export const ImageTagsContainer = ({
353
357
  onChange={setInputValue}
354
358
  placeholder="Type a tag and press enter"
355
359
  onKeyDown={handleKeydown}
360
+ onBlur={setInputValue}
356
361
  ref={creatableRef}
357
362
  />
358
363
  {textInput.length > 0 && (
@@ -456,7 +461,7 @@ export const ImageTagsContainer = ({
456
461
  data-testid="image-tags-container-hover"
457
462
  >
458
463
  <div className='w-100'>
459
- {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>}
460
465
  <div className="flex-wrap flex left">
461
466
  {initialTags?.map((tag, index) => (
462
467
  <ImageTagButton
@@ -482,7 +487,7 @@ export const ImageTagsContainer = ({
482
487
  </div>
483
488
  </div>
484
489
  </div>
485
- <div className="mt-8 mr-6 icon-dim-16">
490
+ <div className="mt-8 mr-10 icon-dim-16">
486
491
  {tagsEditable && (
487
492
  <EditIcon
488
493
  className="icon-dim-16 image-tags-container-edit__icon cursor"
@@ -547,7 +552,7 @@ export const ImageTagButton = ({
547
552
  }`}
548
553
  >
549
554
  <IconComponent
550
- className={`icon-dim-12 cursor${isSoftDeleted ? 'scn-6' : 'fcn-6'} `}
555
+ className={`icon-dim-12 cursor ${isSoftDeleted ? 'scn-6' : 'fcn-6'} `}
551
556
  data-testid={`${text}-tag-soft-delete`}
552
557
  onClick={onSoftDeleteClick}
553
558
  />
package/src/Common/Types.ts CHANGED
@@ -335,6 +335,7 @@ export interface CDMaterialResponseType {
335
335
  requestedUserId: number
336
336
  tagsEditable: boolean
337
337
  appReleaseTagNames: string[]
338
+ hideImageTaggingHardDelete: boolean
338
339
  }
339
340
 
340
341