@devtron-labs/devtron-fe-common-lib 0.0.13-beta-3 → 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 +6 -6
  2. package/package.json +1 -1
  3. package/src/Common/ImageTags.tsx +8 -8
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('');
@@ -22928,7 +22928,7 @@ var ImageTagsContainer = function (_a) {
22928
22928
  });
22929
22929
  }); };
22930
22930
  var renderInfoCard = function () {
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: "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" }) })) })));
22932
22932
  };
22933
22933
  var getBuildContextAdditionalContent = function () {
22934
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." })] }))] })));
@@ -22959,7 +22959,7 @@ var ImageTagsContainer = function (_a) {
22959
22959
  }
22960
22960
  handleSave(tagsToBeCreated);
22961
22961
  };
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("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: {
22963
22963
  top: '50%',
22964
22964
  fontFamily: 'monospace',
22965
22965
  right: '8px',
@@ -22976,13 +22976,13 @@ var ImageTagsContainer = function (_a) {
22976
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) {
22977
22977
  stopPropagation(e);
22978
22978
  onClickSave();
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 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) {
22980
22980
  stopPropagation(e);
22981
22981
  handleTagSoftDelete(index);
22982
22982
  }, onHardDeleteClick: function (e) {
22983
22983
  stopPropagation(e);
22984
22984
  handleTagHardDelete(index);
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-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) {
22986
22986
  stopPropagation(e);
22987
22987
  handleEditClick();
22988
22988
  } })) }))] }))) })));
@@ -23003,7 +23003,7 @@ var ImageTagButton = function (_a) {
23003
23003
  return 'cn-9';
23004
23004
  }
23005
23005
  };
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 }) })) }))] })));
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 }) })) }))] })));
23007
23007
  };
23008
23008
  var AddImageButton = function (_a) {
23009
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-3",
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('')
@@ -277,8 +277,8 @@ export const ImageTagsContainer = ({
277
277
  interactive={true}
278
278
  additionalContent={getBuildContextAdditionalContent()}
279
279
  >
280
- <div className="icon-dim-16 fcn-5 ml-8 cursor">
281
- <Question />
280
+ <div className="flex">
281
+ <Question className="fcn-5 ml-8 cursor icon-dim-16"/>
282
282
  </div>
283
283
  </TippyCustomized>
284
284
  )
@@ -347,8 +347,8 @@ export const ImageTagsContainer = ({
347
347
  {isEditing && tagsEditable ? (
348
348
  <div className="bcn-0 dc__border-top-n1 ">
349
349
  <div className="cn-7 mt-12 flex left">
350
- <span>Release tags (eg. v1.0)</span>
351
- <div className="flex row ml-0">{renderInfoCard()}</div>
350
+ <div>Release tags (eg. v1.0)</div>
351
+ {renderInfoCard()}
352
352
  </div>
353
353
  <div className="mt-6 dc__position-rel-imp" data-testid="add-tag-text-area">
354
354
  <input
@@ -461,7 +461,7 @@ export const ImageTagsContainer = ({
461
461
  data-testid="image-tags-container-hover"
462
462
  >
463
463
  <div className='w-100'>
464
- {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>}
465
465
  <div className="flex-wrap flex left">
466
466
  {initialTags?.map((tag, index) => (
467
467
  <ImageTagButton
@@ -487,7 +487,7 @@ export const ImageTagsContainer = ({
487
487
  </div>
488
488
  </div>
489
489
  </div>
490
- <div className="mt-8 mr-6 icon-dim-16">
490
+ <div className="mt-8 mr-10 icon-dim-16">
491
491
  {tagsEditable && (
492
492
  <EditIcon
493
493
  className="icon-dim-16 image-tags-container-edit__icon cursor"
@@ -552,7 +552,7 @@ export const ImageTagButton = ({
552
552
  }`}
553
553
  >
554
554
  <IconComponent
555
- className={`icon-dim-12 cursor${isSoftDeleted ? 'scn-6' : 'fcn-6'} `}
555
+ className={`icon-dim-12 cursor ${isSoftDeleted ? 'scn-6' : 'fcn-6'} `}
556
556
  data-testid={`${text}-tag-soft-delete`}
557
557
  onClick={onSoftDeleteClick}
558
558
  />