@digi-frontend/dgate-api-documentation 1.0.10 → 1.0.12

package/dist/src/components/InfoForm/InfoForm.js

@@ -1,2 +1,2 @@
-import{j as e}from"../../../_virtual/jsx-runtime.js";import{useState as i,useEffect as n}from"react";import{useFormikContext as o}from"../../../node_modules/formik/dist/formik.esm.js";import{d as t}from"../../../_virtual/index.js";import s from"./InfoForm.module.scss.js";import r from"../../constants/regex.js";import l from"../Tooltip/Tooltip.js";import a from"../../assets/icons/DeleteIcon.svg.js";import c from"../../assets/icons/EditIcon.svg.js";import d from"../../assets/icons/deleteOutlinedIcon.svg.js";import m from"../SVGLoader/SVGLoader.js";import p from"../dialog/index.js";import{tagsTableHeaders as u}from"../../constants/index.js";import v from"../table/tags-table.js";const x=({readOnly:x})=>{var h,g,j,D,f;const[b,C]=i([]),[N,k]=i(),[y,O]=i(""),{values:T,setFieldValue:A,errors:I}=o(),[B,w]=i({}),[_,E]=i({}),[L,S]=i(null),[z,V]=i(null),[F,P]=i(!1),[W,R]=i(!1);n((()=>{if(T&&T.components&&T.components.securitySchemes){const e=Object.keys(T.components.securitySchemes);e.length&&O(T.components.securitySchemes[e[0]].scheme)}}),[]),n((()=>{k(M(b))}),[b]),n((()=>{T.tags&&T.tags.length&&(k(M(T.tags)),C(T.tags))}),[]);const q=(e,i,n)=>{const o=b.map(((o,t)=>t===n?Object.assign(Object.assign({},o),{[e]:i}):o));C(o)},M=i=>i.map(((i,n)=>{var o,r,d,p,u,v,h,g,j,D;return{id:n,tagName:i.name,description:e.jsx("div",{className:s.paramDescContainer,children:e.jsx(l,{arrowWithBorder:!0,placement:"bottom-end",type:"function",trigger:"click",delay:[0,0],onCreate:e=>E((i=>Object.assign(Object.assign({},i),{[n]:e}))),content:e.jsxs("div",{className:s.editDescTooltipContent,children:[e.jsx("p",{className:s.editDescTooltipContent_header,children:"Description"}),e.jsx(t.TextArea,{placeholder:"Describe parameter...",value:i.description,disabled:x,onChange:e=>q("description",e,n)}),!x&&e.jsx(t.Button,{className:s.editDescTooltipContent_btn,variant:"outlined",size:"small",onClick:()=>{var e;A(`tags[${n}].description`,i.description),null===(e=_[n])||void 0===e||e.hide()},children:"Apply"})]}),children:x?e.jsxs(t.Button,{className:s.editDescBtn,variant:"link",color:"action",children:[i.description?i.description.substring(0,12):"-",i.description&&i.description.length>12?"...":""]}):e.jsx(t.Button,{className:s.editDescBtn,variant:"link",color:"action",endIcon:e.jsx(m,{src:c,width:"1.5rem",height:"1.5rem"}),children:x||i.description?"View Description":"Add Description"})})}),externalDocs:e.jsxs("div",{className:s.paramDescContainer,children:[e.jsx(l,{arrowWithBorder:!0,placement:"bottom-end",type:"function",trigger:"click",delay:[0,0],onCreate:e=>w((i=>Object.assign(Object.assign({},i),{[n]:e}))),content:e.jsxs("div",{className:s.editDescTooltipContent,children:[e.jsx("p",{className:s.editDescTooltipContent_header,children:"External Docs Description"}),e.jsx(t.TextArea,{placeholder:"Describe External Doc...",value:null===(o=i.externalDocs)||void 0===o?void 0:o.description,disabled:x,onChange:e=>q("externalDocs",Object.assign(Object.assign({},i.externalDocs),{description:e}),n)}),e.jsx("p",{className:s.editDescTooltipContent_header,children:"External Docs Link"}),e.jsx(t.TextArea,{placeholder:"External Docs Link...",value:null===(r=i.externalDocs)||void 0===r?void 0:r.url,disabled:x,onChange:e=>q("externalDocs",Object.assign(Object.assign({},i.externalDocs),{url:e}),n)}),!x&&e.jsx(t.Button,{className:s.editDescTooltipContent_btn,variant:"outlined",size:"small",onClick:()=>{var e;A(`tags[${n}].externalDocs`,{description:i.externalDocDesc,url:i.externalDocLink}),console.log({tags:T.tags}),null===(e=B[n])||void 0===e||e.hide()},children:"Apply"})]}),children:x?e.jsxs(t.Button,{className:s.editDescBtn,variant:"link",color:"action",onClick:()=>{var e;const n=document.createElement("a");n.href=null===(e=i.externalDocs)||void 0===e?void 0:e.url,n.click()},children:[(null===(d=null==i?void 0:i.externalDocs)||void 0===d?void 0:d.description)?null===(u=null===(p=null==i?void 0:i.externalDocs)||void 0===p?void 0:p.description)||void 0===u?void 0:u.substring(0,12):"-",(null===(v=null==i?void 0:i.externalDocs)||void 0===v?void 0:v.description)&&(null===(g=null===(h=null==i?void 0:i.externalDocs)||void 0===h?void 0:h.description)||void 0===g?void 0:g.length)>12?"...":""]}):e.jsxs(t.Button,{className:s.editDescBtn,variant:"link",color:"action",endIcon:e.jsx(m,{src:c,width:"1.5rem",height:"1.5rem"}),onClick:()=>{console.log("Move to url")},children:[x||i.externalDocs&&((null===(j=i.externalDocs)||void 0===j?void 0:j.url)||(null===(D=i.externalDocs)||void 0===D?void 0:D.description))?"View ":"Add "," ","External Docs Link"]})}),!x&&e.jsx("div",{className:s.paramDescContainer_separator}),!x&&e.jsx(t.Button,{className:s.deleteParamBtn,variant:"link",color:"error",endIcon:e.jsx(m,{src:a,width:"1.125rem",height:"1.125rem"}),onClick:()=>{return e=n,o=i.name,S(e),V(o),void P(!0);var e,o}})]})}}));return e.jsxs("form",{className:s.apiInfoForm,onSubmit:e=>e.preventDefault(),children:[e.jsx(t.Input,{size:"large",placeholder:"e.g. Payments",label:"API Name",required:!0,value:null===(h=null==T?void 0:T.info)||void 0===h?void 0:h.title,maxLength:25,onChange:e=>{A("info.title",e)},onClear:()=>{A("info.title","")},errorMsg:null===(g=null==I?void 0:I.info)||void 0===g?void 0:g.title,restrictedCharsRegex:r.basic}),e.jsxs("div",{className:s.apiDocRow,children:[e.jsx(t.Input,{size:"large",label:"API Authentication Type",required:!0,value:($=y,$?$.charAt(0).toUpperCase()+$.slice(1):""),disabled:!0}),e.jsx(t.Input,{size:"large",label:"Version",required:!0,value:null===(j=null==T?void 0:T.info)||void 0===j?void 0:j.version,disabled:!0})]}),e.jsx(t.TextArea,{size:"large",placeholder:"Enter a description of the API's functionality...",label:"Description",value:null===(D=null==T?void 0:T.info)||void 0===D?void 0:D.description,maxLength:120,onChange:e=>{A("info.description",e)},onClear:()=>{A("info.description","")},errorMessage:null===(f=null==I?void 0:I.info)||void 0===f?void 0:f.description,restrictedCharsRegex:r.restrictNone}),e.jsx("div",{className:s.paramsTable,children:e.jsx(v,{id:"paramter-table",data:N,headCells:u,isFormOpen:W,setIsFormOpen:R,saveNewRow:e=>{C([...b,e]),A("tags",[...T.tags,e])},readOnly:x})}),e.jsx(p,{status:"error",content:e.jsxs("p",{style:{textAlign:"center",fontWeight:400,fontSize:"1rem",lineHeight:"1.4375rem"},className:"delete-msg-container",children:["Are you sure you want to delete",e.jsx("span",{className:"plan-name",children:` Tag ${z} `}),"?"]}),onSubmit:{onClick:()=>{null!==L&&C((e=>e.filter(((e,i)=>i!==L)))),P(!1),S(null)},text:"Yes",color:"error",fullWidth:!0},onCancel:{text:"No",color:"normal",fullWidth:!0},onClose:()=>P(!1),open:F,icon:e.jsx(m,{src:d,width:"4.0625rem",height:"4.0625rem"})})]});var $};export{x as default};
+import{j as e}from"../../../_virtual/jsx-runtime.js";import{useState as i,useEffect as n}from"react";import{useFormikContext as t}from"../../../node_modules/formik/dist/formik.esm.js";import{d as o}from"../../../_virtual/index.js";import s from"./InfoForm.module.scss.js";import r from"../../constants/regex.js";import l from"../Tooltip/Tooltip.js";import a from"../../assets/icons/DeleteIcon.svg.js";import c from"../../assets/icons/EditIcon.svg.js";import d from"../../assets/icons/deleteOutlinedIcon.svg.js";import m from"../SVGLoader/SVGLoader.js";import p from"../dialog/index.js";import{tagsTableHeaders as u}from"../../constants/index.js";import v from"../table/tags-table.js";const x=({readOnly:x})=>{var h,g,j,D,f;const[b,C]=i([]),[N,k]=i(),[y,O]=i(""),[T,A]=i(""),[I,B]=i(""),{values:w,setFieldValue:_,errors:E}=t(),[S,z]=i({}),[L,V]=i({}),[F,P]=i(null),[W,R]=i(null),[q,M]=i(!1),[$,G]=i(!1);n((()=>{if(w&&w.components&&w.components.securitySchemes){const e=Object.keys(w.components.securitySchemes);e.length&&O(w.components.securitySchemes[e[0]].scheme)}}),[]),n((()=>{k(U(b))}),[b]),n((()=>{w.tags&&w.tags.length&&(k(U(w.tags)),C(w.tags))}),[]);const H=(e,i,n)=>{const t=b.map(((t,o)=>o===n?Object.assign(Object.assign({},t),{[e]:i}):t));C(t)},U=i=>i.map(((i,n)=>{var t,r,d,p,u,v,h,g,j,D;return{id:n,tagName:i.name,description:e.jsx("div",{className:s.paramDescContainer,children:e.jsx(l,{arrowWithBorder:!0,placement:"bottom-end",type:"function",trigger:"click",delay:[0,0],onCreate:e=>V((i=>Object.assign(Object.assign({},i),{[n]:e}))),content:e.jsxs("div",{className:s.editDescTooltipContent,children:[e.jsx("p",{className:s.editDescTooltipContent_header,children:"Description"}),e.jsx(o.TextArea,{placeholder:"Describe parameter...",value:i.description,disabled:x,onChange:e=>H("description",e,n)}),!x&&e.jsx(o.Button,{className:s.editDescTooltipContent_btn,variant:"outlined",size:"small",onClick:()=>{var e;_(`tags[${n}].description`,i.description),null===(e=L[n])||void 0===e||e.hide()},children:"Apply"})]}),children:x?e.jsxs(o.Button,{className:s.editDescBtn,variant:"link",color:"action",children:[i.description?i.description.substring(0,12):"-",i.description&&i.description.length>12?"...":""]}):e.jsx(o.Button,{className:s.editDescBtn,variant:"link",color:"action",endIcon:e.jsx(m,{src:c,width:"1.5rem",height:"1.5rem"}),children:x||i.description?"View Description":"Add Description"})})}),externalDocs:e.jsxs("div",{className:s.paramDescContainer,children:[e.jsx(l,{arrowWithBorder:!0,placement:"bottom-end",type:"function",trigger:"click",delay:[0,0],onCreate:e=>z((i=>Object.assign(Object.assign({},i),{[n]:e}))),content:e.jsxs("div",{className:s.editDescTooltipContent,children:[e.jsx("p",{className:s.editDescTooltipContent_header,children:"External Docs Description"}),e.jsx(o.TextArea,{placeholder:"Describe External Doc...",value:null===(t=i.externalDocs)||void 0===t?void 0:t.description,disabled:x,onChange:e=>{H("externalDocs",Object.assign(Object.assign({},i.externalDocs),{description:e}),n),A(e)}}),e.jsx("p",{className:s.editDescTooltipContent_header,children:"External Docs Link"}),e.jsx(o.TextArea,{placeholder:"External Docs Link...",value:null===(r=i.externalDocs)||void 0===r?void 0:r.url,disabled:x,onChange:e=>{H("externalDocs",Object.assign(Object.assign({},i.externalDocs),{url:e}),n),B(e)}}),!x&&e.jsx(o.Button,{className:s.editDescTooltipContent_btn,variant:"outlined",size:"small",onClick:()=>{var e;_(`tags[${n}].externalDocs`,{description:T,url:I}),A(""),B(""),null===(e=S[n])||void 0===e||e.hide()},children:"Apply"})]}),children:x?e.jsxs(o.Button,{className:s.editDescBtn,variant:"link",color:"action",onClick:()=>{var e;const n=document.createElement("a");n.href=null===(e=i.externalDocs)||void 0===e?void 0:e.url,n.click()},children:[(null===(d=null==i?void 0:i.externalDocs)||void 0===d?void 0:d.description)?null===(u=null===(p=null==i?void 0:i.externalDocs)||void 0===p?void 0:p.description)||void 0===u?void 0:u.substring(0,12):"-",(null===(v=null==i?void 0:i.externalDocs)||void 0===v?void 0:v.description)&&(null===(g=null===(h=null==i?void 0:i.externalDocs)||void 0===h?void 0:h.description)||void 0===g?void 0:g.length)>12?"...":""]}):e.jsxs(o.Button,{className:s.editDescBtn,variant:"link",color:"action",endIcon:e.jsx(m,{src:c,width:"1.5rem",height:"1.5rem"}),onClick:()=>{console.log("Move to url")},children:[x||i.externalDocs&&((null===(j=i.externalDocs)||void 0===j?void 0:j.url)||(null===(D=i.externalDocs)||void 0===D?void 0:D.description))?"View ":"Add "," ","External Docs Link"]})}),!x&&e.jsx("div",{className:s.paramDescContainer_separator}),!x&&e.jsx(o.Button,{className:s.deleteParamBtn,variant:"link",color:"error",endIcon:e.jsx(m,{src:a,width:"1.125rem",height:"1.125rem"}),onClick:()=>{return e=n,t=i.name,P(e),R(t),void M(!0);var e,t}})]})}}));return e.jsxs("form",{className:s.apiInfoForm,onSubmit:e=>e.preventDefault(),children:[e.jsx(o.Input,{size:"large",placeholder:"e.g. Payments",label:"API Name",required:!0,value:null===(h=null==w?void 0:w.info)||void 0===h?void 0:h.title,maxLength:25,onChange:e=>{_("info.title",e)},onClear:()=>{_("info.title","")},errorMsg:null===(g=null==E?void 0:E.info)||void 0===g?void 0:g.title,restrictedCharsRegex:r.basic}),e.jsxs("div",{className:s.apiDocRow,children:[e.jsx(o.Input,{size:"large",label:"API Authentication Type",required:!0,value:(Y=y,Y?Y.charAt(0).toUpperCase()+Y.slice(1):""),disabled:!0}),e.jsx(o.Input,{size:"large",label:"Version",required:!0,value:null===(j=null==w?void 0:w.info)||void 0===j?void 0:j.version,disabled:!0})]}),e.jsx(o.TextArea,{size:"large",placeholder:"Enter a description of the API's functionality...",label:"Description",value:null===(D=null==w?void 0:w.info)||void 0===D?void 0:D.description,maxLength:120,onChange:e=>{_("info.description",e)},onClear:()=>{_("info.description","")},errorMessage:null===(f=null==E?void 0:E.info)||void 0===f?void 0:f.description,restrictedCharsRegex:r.restrictNone}),e.jsx("div",{className:s.paramsTable,children:e.jsx(v,{id:"paramter-table",data:N,headCells:u,isFormOpen:$,setIsFormOpen:G,saveNewRow:e=>{C([...b,e]),_("tags",[...w.tags,e])},readOnly:x})}),e.jsx(p,{status:"error",content:e.jsxs("p",{style:{textAlign:"center",fontWeight:400,fontSize:"1rem",lineHeight:"1.4375rem"},className:"delete-msg-container",children:["Are you sure you want to delete",e.jsx("span",{className:"plan-name",children:` Tag ${W} `}),"?"]}),onSubmit:{onClick:()=>{null!==F&&C((e=>e.filter(((e,i)=>i!==F)))),M(!1),P(null)},text:"Yes",color:"error",fullWidth:!0},onCancel:{text:"No",color:"normal",fullWidth:!0},onClose:()=>M(!1),open:q,icon:e.jsx(m,{src:d,width:"4.0625rem",height:"4.0625rem"})})]});var Y};export{x as default};
 //# sourceMappingURL=InfoForm.js.map

package/dist/src/components/InfoForm/InfoForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoForm.js","sources":["../../../../src/components/InfoForm/InfoForm.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\r\n// @ts-ignore\r\nimport { useFormikContext } from 'formik'\r\nimport { Button, Input, TextArea } from 'digitinary-ui'\r\nimport styles from './InfoForm.module.scss'\r\nimport regex from '../../constants/regex'\r\nimport { TransformedOpenApi } from '../../types/transformedOpenApi'\r\nimport Tooltip from '../../components/Tooltip/Tooltip'\r\nimport { DeleteIcon, deleteOutlinedIcon, EditIcon } from '../../assets/icons'\r\nimport SVGLoader from '../../components/SVGLoader/SVGLoader'\r\nimport CommonDialog from '../../components/dialog'\r\nimport { tagsTableHeaders } from '../../constants/index'\r\nimport TagsTable from '../../components/table/tags-table'\r\n\r\nconst InfoForm = ({ readOnly }: { readOnly?: boolean }) => {\r\n  const [tableData, setTableData] = useState([])\r\n  const [tableRecords, setTableRecords] = useState()\r\n  const [authType, setAuthType] = useState('')\r\n  const { values, setFieldValue, errors } = useFormikContext<TransformedOpenApi>()\r\n  const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})\r\n  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})\r\n  const [selectedTagIndex, setSelectedTagIndex] = useState<number | null>(null)\r\n  const [selectedTagName, setSelectedTagName] = useState<string | null>(null)\r\n  const [openDeleteDialog, setOpenDeleteDialog] = useState(false)\r\n  const [isFormOpen, setIsFormOpen] = useState(false)\r\n\r\n  useEffect(() => {\r\n    if (values && values.components && values.components.securitySchemes) {\r\n      const authenticatorKeys = Object.keys(values.components.securitySchemes)\r\n      if (authenticatorKeys.length) {\r\n        setAuthType(values.components.securitySchemes[authenticatorKeys[0]].scheme)\r\n      }\r\n    }\r\n  }, [])\r\n\r\n  useEffect(() => {\r\n    setTableRecords(generateTableData(tableData))\r\n  }, [tableData])\r\n\r\n  useEffect(() => {\r\n    if (values.tags && values.tags.length) {\r\n      setTableRecords(generateTableData(values.tags))\r\n      setTableData(values.tags)\r\n    }\r\n  }, [])\r\n\r\n  const confirmDeleteTag = () => {\r\n    if (selectedTagIndex !== null) {\r\n      setTableData((prev) => prev.filter((_, i) => i !== selectedTagIndex))\r\n    }\r\n    setOpenDeleteDialog(false)\r\n    setSelectedTagIndex(null)\r\n  }\r\n\r\n  const capitalize = (str) => {\r\n    if (!str) return ''\r\n    return str.charAt(0).toUpperCase() + str.slice(1)\r\n  }\r\n\r\n  const onTableChange = (key, value, index) => {\r\n    const newTableData = tableData.map((item, tIndex) => {\r\n      if (tIndex === index) {\r\n        return { ...item, [key]: value }\r\n      } else {\r\n        return item\r\n      }\r\n    })\r\n\r\n    setTableData(newTableData)\r\n  }\r\n\r\n  const saveNewRow = (tag) => {\r\n    setTableData([...tableData, tag])\r\n    setFieldValue(`tags`, [...values.tags, tag])\r\n  }\r\n\r\n  const handleDeleteClick = (id: number, name: string) => {\r\n    setSelectedTagIndex(id)\r\n    setSelectedTagName(name)\r\n\r\n    setOpenDeleteDialog(true)\r\n  }\r\n\r\n  const generateTableData = (items) => {\r\n    return items.map((item, index) => ({\r\n      id: index,\r\n      tagName: item.name,\r\n      description: (\r\n        <div className={styles.paramDescContainer}>\r\n          <Tooltip\r\n            arrowWithBorder\r\n            placement=\"bottom-end\"\r\n            type=\"function\"\r\n            trigger=\"click\"\r\n            delay={[0, 0]}\r\n            onCreate={(instance) =>\r\n              setTooltipRefs((prev) => ({\r\n                ...prev,\r\n                [index]: instance,\r\n              }))\r\n            }\r\n            content={\r\n              <div className={styles.editDescTooltipContent}>\r\n                <p className={styles.editDescTooltipContent_header}>Description</p>\r\n                <TextArea\r\n                  placeholder=\"Describe parameter...\"\r\n                  value={item.description}\r\n                  disabled={readOnly}\r\n                  onChange={(value) => onTableChange('description', value, index)}\r\n                />\r\n                {!readOnly && (\r\n                  <Button\r\n                    className={styles.editDescTooltipContent_btn}\r\n                    variant=\"outlined\"\r\n                    size=\"small\"\r\n                    onClick={() => {\r\n                      setFieldValue(`tags[${index}].description`, item.description)\r\n                      tooltipRefs[index]?.hide()\r\n                    }}\r\n                  >\r\n                    Apply\r\n                  </Button>\r\n                )}\r\n              </div>\r\n            }\r\n          >\r\n            {readOnly ? (\r\n              <Button className={styles.editDescBtn} variant=\"link\" color=\"action\">\r\n                {item.description ? item.description.substring(0, 12) : '-'}\r\n                {item.description && item.description.length > 12 ? '...' : ''}\r\n              </Button>\r\n            ) : (\r\n              <Button\r\n                className={styles.editDescBtn}\r\n                variant=\"link\"\r\n                color=\"action\"\r\n                endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n              >\r\n                {readOnly || item.description ? 'View Description' : 'Add Description'}\r\n              </Button>\r\n            )}\r\n          </Tooltip>\r\n        </div>\r\n      ),\r\n      externalDocs: (\r\n        <div className={styles.paramDescContainer}>\r\n          <Tooltip\r\n            arrowWithBorder\r\n            placement=\"bottom-end\"\r\n            type=\"function\"\r\n            trigger=\"click\"\r\n            delay={[0, 0]}\r\n            onCreate={(instance) =>\r\n              setExternalTooltipRefs((prev) => ({\r\n                ...prev,\r\n                [index]: instance,\r\n              }))\r\n            }\r\n            content={\r\n              <div className={styles.editDescTooltipContent}>\r\n                <p className={styles.editDescTooltipContent_header}>External Docs Description</p>\r\n                <TextArea\r\n                  placeholder=\"Describe External Doc...\"\r\n                  value={item.externalDocs?.description}\r\n                  disabled={readOnly}\r\n                  onChange={(value) =>\r\n                    onTableChange(\r\n                      'externalDocs',\r\n                      { ...item.externalDocs, description: value },\r\n                      index\r\n                    )\r\n                  }\r\n                />\r\n                <p className={styles.editDescTooltipContent_header}>External Docs Link</p>\r\n                <TextArea\r\n                  placeholder=\"External Docs Link...\"\r\n                  value={item.externalDocs?.url}\r\n                  disabled={readOnly}\r\n                  onChange={(value) =>\r\n                    onTableChange('externalDocs', { ...item.externalDocs, url: value }, index)\r\n                  }\r\n                />\r\n                {!readOnly && (\r\n                  <Button\r\n                    className={styles.editDescTooltipContent_btn}\r\n                    variant=\"outlined\"\r\n                    size=\"small\"\r\n                    onClick={() => {\r\n                      setFieldValue(`tags[${index}].externalDocs`, {\r\n                        description: item.externalDocDesc,\r\n                        url: item.externalDocLink,\r\n                      })\r\n                      console.log({ tags: values.tags })\r\n                      externalTooltipRefs[index]?.hide()\r\n                    }}\r\n                  >\r\n                    Apply\r\n                  </Button>\r\n                )}\r\n              </div>\r\n            }\r\n          >\r\n            {readOnly ? (\r\n              <Button\r\n                className={styles.editDescBtn}\r\n                variant=\"link\"\r\n                color=\"action\"\r\n                onClick={() => {\r\n                  const a = document.createElement('a')\r\n                  a.href = item.externalDocs?.url\r\n                  a.click()\r\n                }}\r\n              >\r\n                {item?.externalDocs?.description\r\n                  ? item?.externalDocs?.description?.substring(0, 12)\r\n                  : '-'}\r\n                {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12\r\n                  ? '...'\r\n                  : ''}\r\n              </Button>\r\n            ) : (\r\n              <Button\r\n                className={styles.editDescBtn}\r\n                variant=\"link\"\r\n                color=\"action\"\r\n                endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n                onClick={() => {\r\n                  console.log('Move to url')\r\n                }}\r\n              >\r\n                {readOnly ||\r\n                (item.externalDocs && (item.externalDocs?.url || item.externalDocs?.description))\r\n                  ? 'View '\r\n                  : 'Add '}{' '}\r\n                External Docs Link\r\n              </Button>\r\n            )}\r\n          </Tooltip>\r\n\r\n          {!readOnly && <div className={styles.paramDescContainer_separator}></div>}\r\n\r\n          {!readOnly && (\r\n            <Button\r\n              className={styles.deleteParamBtn}\r\n              variant=\"link\"\r\n              color=\"error\"\r\n              endIcon={<SVGLoader src={DeleteIcon} width=\"1.125rem\" height=\"1.125rem\" />}\r\n              onClick={() => handleDeleteClick(index, item.name)}\r\n            ></Button>\r\n          )}\r\n        </div>\r\n      ),\r\n    }))\r\n  }\r\n\r\n  return (\r\n    <form className={styles.apiInfoForm} onSubmit={(e) => e.preventDefault()}>\r\n      <Input\r\n        size=\"large\"\r\n        placeholder=\"e.g. Payments\"\r\n        label=\"API Name\"\r\n        required\r\n        value={values?.info?.title}\r\n        maxLength={25}\r\n        onChange={(value) => {\r\n          setFieldValue('info.title', value)\r\n        }}\r\n        onClear={() => {\r\n          setFieldValue('info.title', '')\r\n        }}\r\n        errorMsg={errors?.info?.title}\r\n        restrictedCharsRegex={regex.basic}\r\n      />\r\n      <div className={styles.apiDocRow}>\r\n        <Input\r\n          size=\"large\"\r\n          label=\"API Authentication Type\"\r\n          required\r\n          value={capitalize(authType)}\r\n          disabled\r\n        />\r\n        <Input size=\"large\" label=\"Version\" required value={values?.info?.version} disabled />\r\n      </div>\r\n      <TextArea\r\n        size=\"large\"\r\n        placeholder=\"Enter a description of the API's functionality...\"\r\n        label=\"Description\"\r\n        value={values?.info?.description}\r\n        maxLength={120}\r\n        onChange={(value: string) => {\r\n          setFieldValue('info.description', value)\r\n        }}\r\n        onClear={() => {\r\n          setFieldValue('info.description', '')\r\n        }}\r\n        errorMessage={errors?.info?.description}\r\n        restrictedCharsRegex={regex.restrictNone}\r\n      />\r\n      <div className={styles.paramsTable}>\r\n        <TagsTable\r\n          id=\"paramter-table\"\r\n          data={tableRecords}\r\n          headCells={tagsTableHeaders}\r\n          isFormOpen={isFormOpen}\r\n          setIsFormOpen={setIsFormOpen}\r\n          saveNewRow={saveNewRow}\r\n          readOnly={readOnly}\r\n        />\r\n      </div>\r\n      <CommonDialog\r\n        status=\"error\"\r\n        content={\r\n          <p\r\n            style={{\r\n              textAlign: 'center',\r\n              fontWeight: 400,\r\n              fontSize: '1rem',\r\n              lineHeight: '1.4375rem',\r\n            }}\r\n            className=\"delete-msg-container\"\r\n          >\r\n            Are you sure you want to delete\r\n            <span className=\"plan-name\">{` Tag ${selectedTagName} `}</span>?\r\n          </p>\r\n        }\r\n        onSubmit={{\r\n          onClick: confirmDeleteTag,\r\n          text: 'Yes',\r\n          color: 'error',\r\n          fullWidth: true,\r\n        }}\r\n        onCancel={{\r\n          text: 'No',\r\n          color: 'normal',\r\n          fullWidth: true,\r\n        }}\r\n        onClose={() => setOpenDeleteDialog(false)}\r\n        open={openDeleteDialog}\r\n        icon={<SVGLoader src={deleteOutlinedIcon} width=\"4.0625rem\" height=\"4.0625rem\" />}\r\n      />\r\n    </form>\r\n  )\r\n}\r\n\r\nexport default InfoForm\r\n"],"names":["InfoForm","readOnly","tableData","setTableData","useState","tableRecords","setTableRecords","authType","setAuthType","values","setFieldValue","errors","useFormikContext","externalTooltipRefs","setExternalTooltipRefs","tooltipRefs","setTooltipRefs","selectedTagIndex","setSelectedTagIndex","selectedTagName","setSelectedTagName","openDeleteDialog","setOpenDeleteDialog","isFormOpen","setIsFormOpen","useEffect","components","securitySchemes","authenticatorKeys","Object","keys","length","scheme","generateTableData","tags","onTableChange","key","value","index","newTableData","map","item","tIndex","assign","items","id","tagName","name","description","_jsx","className","styles","paramDescContainer","children","Tooltip","arrowWithBorder","placement","type","trigger","delay","onCreate","instance","prev","content","_jsxs","jsxs","editDescTooltipContent","editDescTooltipContent_header","TextArea","placeholder","disabled","onChange","Button","editDescTooltipContent_btn","variant","size","onClick","_a","hide","editDescBtn","color","substring","jsx","endIcon","SVGLoader","src","EditIcon","width","height","externalDocs","_b","url","externalDocDesc","externalDocLink","console","log","a","document","createElement","href","click","_c","_e","_d","_f","_h","_g","_j","_k","paramDescContainer_separator","deleteParamBtn","DeleteIcon","handleDeleteClick","apiInfoForm","onSubmit","e","preventDefault","Input","label","required","info","title","maxLength","onClear","errorMsg","restrictedCharsRegex","regex","basic","apiDocRow","str","charAt","toUpperCase","slice","version","errorMessage","restrictNone","paramsTable","TagsTable","data","headCells","tagsTableHeaders","saveNewRow","tag","CommonDialog","status","style","textAlign","fontWeight","fontSize","lineHeight","filter","_","i","text","fullWidth","onCancel","onClose","open","icon","deleteOutlinedIcon"],"mappings":"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"}
+{"version":3,"file":"InfoForm.js","sources":["../../../../src/components/InfoForm/InfoForm.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\r\n// @ts-ignore\r\nimport { useFormikContext } from 'formik'\r\nimport { Button, Input, TextArea } from 'digitinary-ui'\r\nimport styles from './InfoForm.module.scss'\r\nimport regex from '../../constants/regex'\r\nimport { TransformedOpenApi } from '../../types/transformedOpenApi'\r\nimport Tooltip from '../../components/Tooltip/Tooltip'\r\nimport { DeleteIcon, deleteOutlinedIcon, EditIcon } from '../../assets/icons'\r\nimport SVGLoader from '../../components/SVGLoader/SVGLoader'\r\nimport CommonDialog from '../../components/dialog'\r\nimport { tagsTableHeaders } from '../../constants/index'\r\nimport TagsTable from '../../components/table/tags-table'\r\n\r\nconst InfoForm = ({ readOnly }: { readOnly?: boolean }) => {\r\n  const [tableData, setTableData] = useState([])\r\n  const [tableRecords, setTableRecords] = useState()\r\n  const [authType, setAuthType] = useState('')\r\n  const [description, setDescription] = useState('')\r\n  const [url, setURL] = useState('')\r\n  const { values, setFieldValue, errors } = useFormikContext<TransformedOpenApi>()\r\n  const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})\r\n  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})\r\n  const [selectedTagIndex, setSelectedTagIndex] = useState<number | null>(null)\r\n  const [selectedTagName, setSelectedTagName] = useState<string | null>(null)\r\n  const [openDeleteDialog, setOpenDeleteDialog] = useState(false)\r\n  const [isFormOpen, setIsFormOpen] = useState(false)\r\n\r\n  useEffect(() => {\r\n    if (values && values.components && values.components.securitySchemes) {\r\n      const authenticatorKeys = Object.keys(values.components.securitySchemes)\r\n      if (authenticatorKeys.length) {\r\n        setAuthType(values.components.securitySchemes[authenticatorKeys[0]].scheme)\r\n      }\r\n    }\r\n  }, [])\r\n\r\n  useEffect(() => {\r\n    setTableRecords(generateTableData(tableData))\r\n  }, [tableData])\r\n\r\n  useEffect(() => {\r\n    if (values.tags && values.tags.length) {\r\n      setTableRecords(generateTableData(values.tags))\r\n      setTableData(values.tags)\r\n    }\r\n  }, [])\r\n\r\n  const confirmDeleteTag = () => {\r\n    if (selectedTagIndex !== null) {\r\n      setTableData((prev) => prev.filter((_, i) => i !== selectedTagIndex))\r\n    }\r\n    setOpenDeleteDialog(false)\r\n    setSelectedTagIndex(null)\r\n  }\r\n\r\n  const capitalize = (str) => {\r\n    if (!str) return ''\r\n    return str.charAt(0).toUpperCase() + str.slice(1)\r\n  }\r\n\r\n  const onTableChange = (key, value, index) => {\r\n    const newTableData = tableData.map((item, tIndex) => {\r\n      if (tIndex === index) {\r\n        return { ...item, [key]: value }\r\n      } else {\r\n        return item\r\n      }\r\n    })\r\n\r\n    setTableData(newTableData)\r\n  }\r\n\r\n  const saveNewRow = (tag) => {\r\n    setTableData([...tableData, tag])\r\n    setFieldValue(`tags`, [...values.tags, tag])\r\n  }\r\n\r\n  const handleDeleteClick = (id: number, name: string) => {\r\n    setSelectedTagIndex(id)\r\n    setSelectedTagName(name)\r\n\r\n    setOpenDeleteDialog(true)\r\n  }\r\n\r\n  const generateTableData = (items) => {\r\n    return items.map((item, index) => ({\r\n      id: index,\r\n      tagName: item.name,\r\n      description: (\r\n        <div className={styles.paramDescContainer}>\r\n          <Tooltip\r\n            arrowWithBorder\r\n            placement=\"bottom-end\"\r\n            type=\"function\"\r\n            trigger=\"click\"\r\n            delay={[0, 0]}\r\n            onCreate={(instance) =>\r\n              setTooltipRefs((prev) => ({\r\n                ...prev,\r\n                [index]: instance,\r\n              }))\r\n            }\r\n            content={\r\n              <div className={styles.editDescTooltipContent}>\r\n                <p className={styles.editDescTooltipContent_header}>Description</p>\r\n                <TextArea\r\n                  placeholder=\"Describe parameter...\"\r\n                  value={item.description}\r\n                  disabled={readOnly}\r\n                  onChange={(value) => onTableChange('description', value, index)}\r\n                />\r\n                {!readOnly && (\r\n                  <Button\r\n                    className={styles.editDescTooltipContent_btn}\r\n                    variant=\"outlined\"\r\n                    size=\"small\"\r\n                    onClick={() => {\r\n                      setFieldValue(`tags[${index}].description`, item.description)\r\n                      tooltipRefs[index]?.hide()\r\n                    }}\r\n                  >\r\n                    Apply\r\n                  </Button>\r\n                )}\r\n              </div>\r\n            }\r\n          >\r\n            {readOnly ? (\r\n              <Button className={styles.editDescBtn} variant=\"link\" color=\"action\">\r\n                {item.description ? item.description.substring(0, 12) : '-'}\r\n                {item.description && item.description.length > 12 ? '...' : ''}\r\n              </Button>\r\n            ) : (\r\n              <Button\r\n                className={styles.editDescBtn}\r\n                variant=\"link\"\r\n                color=\"action\"\r\n                endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n              >\r\n                {readOnly || item.description ? 'View Description' : 'Add Description'}\r\n              </Button>\r\n            )}\r\n          </Tooltip>\r\n        </div>\r\n      ),\r\n      externalDocs: (\r\n        <div className={styles.paramDescContainer}>\r\n          <Tooltip\r\n            arrowWithBorder\r\n            placement=\"bottom-end\"\r\n            type=\"function\"\r\n            trigger=\"click\"\r\n            delay={[0, 0]}\r\n            onCreate={(instance) =>\r\n              setExternalTooltipRefs((prev) => ({\r\n                ...prev,\r\n                [index]: instance,\r\n              }))\r\n            }\r\n            content={\r\n              <div className={styles.editDescTooltipContent}>\r\n                <p className={styles.editDescTooltipContent_header}>External Docs Description</p>\r\n                <TextArea\r\n                  placeholder=\"Describe External Doc...\"\r\n                  value={item.externalDocs?.description}\r\n                  disabled={readOnly}\r\n                  onChange={(value) => {\r\n                    onTableChange(\r\n                      'externalDocs',\r\n                      { ...item.externalDocs, description: value },\r\n                      index\r\n                    )\r\n                    setDescription(value)\r\n                  }}\r\n                />\r\n                <p className={styles.editDescTooltipContent_header}>External Docs Link</p>\r\n                <TextArea\r\n                  placeholder=\"External Docs Link...\"\r\n                  value={item.externalDocs?.url}\r\n                  disabled={readOnly}\r\n                  onChange={(value) => {\r\n                    onTableChange('externalDocs', { ...item.externalDocs, url: value }, index)\r\n                    setURL(value)\r\n                  }}\r\n                />\r\n                {!readOnly && (\r\n                  <Button\r\n                    className={styles.editDescTooltipContent_btn}\r\n                    variant=\"outlined\"\r\n                    size=\"small\"\r\n                    onClick={() => {\r\n                      setFieldValue(`tags[${index}].externalDocs`, {\r\n                        description: description,\r\n                        url: url,\r\n                      })\r\n                      setDescription('')\r\n                      setURL('')\r\n                      externalTooltipRefs[index]?.hide()\r\n                    }}\r\n                  >\r\n                    Apply\r\n                  </Button>\r\n                )}\r\n              </div>\r\n            }\r\n          >\r\n            {readOnly ? (\r\n              <Button\r\n                className={styles.editDescBtn}\r\n                variant=\"link\"\r\n                color=\"action\"\r\n                onClick={() => {\r\n                  const a = document.createElement('a')\r\n                  a.href = item.externalDocs?.url\r\n                  a.click()\r\n                }}\r\n              >\r\n                {item?.externalDocs?.description\r\n                  ? item?.externalDocs?.description?.substring(0, 12)\r\n                  : '-'}\r\n                {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12\r\n                  ? '...'\r\n                  : ''}\r\n              </Button>\r\n            ) : (\r\n              <Button\r\n                className={styles.editDescBtn}\r\n                variant=\"link\"\r\n                color=\"action\"\r\n                endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n                onClick={() => {\r\n                  console.log('Move to url')\r\n                }}\r\n              >\r\n                {readOnly ||\r\n                (item.externalDocs && (item.externalDocs?.url || item.externalDocs?.description))\r\n                  ? 'View '\r\n                  : 'Add '}{' '}\r\n                External Docs Link\r\n              </Button>\r\n            )}\r\n          </Tooltip>\r\n\r\n          {!readOnly && <div className={styles.paramDescContainer_separator}></div>}\r\n\r\n          {!readOnly && (\r\n            <Button\r\n              className={styles.deleteParamBtn}\r\n              variant=\"link\"\r\n              color=\"error\"\r\n              endIcon={<SVGLoader src={DeleteIcon} width=\"1.125rem\" height=\"1.125rem\" />}\r\n              onClick={() => handleDeleteClick(index, item.name)}\r\n            ></Button>\r\n          )}\r\n        </div>\r\n      ),\r\n    }))\r\n  }\r\n\r\n  return (\r\n    <form className={styles.apiInfoForm} onSubmit={(e) => e.preventDefault()}>\r\n      <Input\r\n        size=\"large\"\r\n        placeholder=\"e.g. Payments\"\r\n        label=\"API Name\"\r\n        required\r\n        value={values?.info?.title}\r\n        maxLength={25}\r\n        onChange={(value) => {\r\n          setFieldValue('info.title', value)\r\n        }}\r\n        onClear={() => {\r\n          setFieldValue('info.title', '')\r\n        }}\r\n        errorMsg={errors?.info?.title}\r\n        restrictedCharsRegex={regex.basic}\r\n      />\r\n      <div className={styles.apiDocRow}>\r\n        <Input\r\n          size=\"large\"\r\n          label=\"API Authentication Type\"\r\n          required\r\n          value={capitalize(authType)}\r\n          disabled\r\n        />\r\n        <Input size=\"large\" label=\"Version\" required value={values?.info?.version} disabled />\r\n      </div>\r\n      <TextArea\r\n        size=\"large\"\r\n        placeholder=\"Enter a description of the API's functionality...\"\r\n        label=\"Description\"\r\n        value={values?.info?.description}\r\n        maxLength={120}\r\n        onChange={(value: string) => {\r\n          setFieldValue('info.description', value)\r\n        }}\r\n        onClear={() => {\r\n          setFieldValue('info.description', '')\r\n        }}\r\n        errorMessage={errors?.info?.description}\r\n        restrictedCharsRegex={regex.restrictNone}\r\n      />\r\n      <div className={styles.paramsTable}>\r\n        <TagsTable\r\n          id=\"paramter-table\"\r\n          data={tableRecords}\r\n          headCells={tagsTableHeaders}\r\n          isFormOpen={isFormOpen}\r\n          setIsFormOpen={setIsFormOpen}\r\n          saveNewRow={saveNewRow}\r\n          readOnly={readOnly}\r\n        />\r\n      </div>\r\n      <CommonDialog\r\n        status=\"error\"\r\n        content={\r\n          <p\r\n            style={{\r\n              textAlign: 'center',\r\n              fontWeight: 400,\r\n              fontSize: '1rem',\r\n              lineHeight: '1.4375rem',\r\n            }}\r\n            className=\"delete-msg-container\"\r\n          >\r\n            Are you sure you want to delete\r\n            <span className=\"plan-name\">{` Tag ${selectedTagName} `}</span>?\r\n          </p>\r\n        }\r\n        onSubmit={{\r\n          onClick: confirmDeleteTag,\r\n          text: 'Yes',\r\n          color: 'error',\r\n          fullWidth: true,\r\n        }}\r\n        onCancel={{\r\n          text: 'No',\r\n          color: 'normal',\r\n          fullWidth: true,\r\n        }}\r\n        onClose={() => setOpenDeleteDialog(false)}\r\n        open={openDeleteDialog}\r\n        icon={<SVGLoader src={deleteOutlinedIcon} width=\"4.0625rem\" height=\"4.0625rem\" />}\r\n      />\r\n    </form>\r\n  )\r\n}\r\n\r\nexport default InfoForm\r\n"],"names":["InfoForm","readOnly","tableData","setTableData","useState","tableRecords","setTableRecords","authType","setAuthType","description","setDescription","url","setURL","values","setFieldValue","errors","useFormikContext","externalTooltipRefs","setExternalTooltipRefs","tooltipRefs","setTooltipRefs","selectedTagIndex","setSelectedTagIndex","selectedTagName","setSelectedTagName","openDeleteDialog","setOpenDeleteDialog","isFormOpen","setIsFormOpen","useEffect","components","securitySchemes","authenticatorKeys","Object","keys","length","scheme","generateTableData","tags","onTableChange","key","value","index","newTableData","map","item","tIndex","assign","items","id","tagName","name","_jsx","className","styles","paramDescContainer","children","Tooltip","arrowWithBorder","placement","type","trigger","delay","onCreate","instance","prev","content","_jsxs","jsxs","editDescTooltipContent","editDescTooltipContent_header","TextArea","placeholder","disabled","onChange","Button","editDescTooltipContent_btn","variant","size","onClick","_a","hide","editDescBtn","color","substring","jsx","endIcon","SVGLoader","src","EditIcon","width","height","externalDocs","_b","a","document","createElement","href","click","_c","_e","_d","_f","_h","_g","console","log","_j","_k","paramDescContainer_separator","deleteParamBtn","DeleteIcon","handleDeleteClick","apiInfoForm","onSubmit","e","preventDefault","Input","label","required","info","title","maxLength","onClear","errorMsg","restrictedCharsRegex","regex","basic","apiDocRow","str","charAt","toUpperCase","slice","version","errorMessage","restrictNone","paramsTable","TagsTable","data","headCells","tagsTableHeaders","saveNewRow","tag","CommonDialog","status","style","textAlign","fontWeight","fontSize","lineHeight","filter","_","i","text","fullWidth","onCancel","onClose","open","icon","deleteOutlinedIcon"],"mappings":"4qBAcA,MAAMA,EAAW,EAAGC,6BAClB,MAAOC,EAAWC,GAAgBC,EAAS,KACpCC,EAAcC,GAAmBF,KACjCG,EAAUC,GAAeJ,EAAS,KAClCK,EAAaC,GAAkBN,EAAS,KACxCO,EAAKC,GAAUR,EAAS,KACzBS,OAAEA,EAAMC,cAAEA,EAAaC,OAAEA,GAAWC,KACnCC,EAAqBC,GAA0Bd,EAAiC,CAAE,IAClFe,EAAaC,GAAkBhB,EAAiC,CAAE,IAClEiB,EAAkBC,GAAuBlB,EAAwB,OACjEmB,EAAiBC,GAAsBpB,EAAwB,OAC/DqB,EAAkBC,GAAuBtB,GAAS,IAClDuB,EAAYC,GAAiBxB,GAAS,GAE7CyB,GAAU,KACR,GAAIhB,GAAUA,EAAOiB,YAAcjB,EAAOiB,WAAWC,gBAAiB,CACpE,MAAMC,EAAoBC,OAAOC,KAAKrB,EAAOiB,WAAWC,iBACpDC,EAAkBG,QACpB3B,EAAYK,EAAOiB,WAAWC,gBAAgBC,EAAkB,IAAII,OAEvE,IACA,IAEHP,GAAU,KACRvB,EAAgB+B,EAAkBnC,GAAW,GAC5C,CAACA,IAEJ2B,GAAU,KACJhB,EAAOyB,MAAQzB,EAAOyB,KAAKH,SAC7B7B,EAAgB+B,EAAkBxB,EAAOyB,OACzCnC,EAAaU,EAAOyB,MACrB,GACA,IAEH,MAaMC,EAAgB,CAACC,EAAKC,EAAOC,KACjC,MAAMC,EAAezC,EAAU0C,KAAI,CAACC,EAAMC,IACpCA,IAAWJ,EACbT,OAAAc,OAAAd,OAAAc,OAAA,CAAA,EAAYF,GAAM,CAAAL,CAACA,GAAMC,IAElBI,IAIX1C,EAAawC,EAAa,EAetBN,EAAqBW,GAClBA,EAAMJ,KAAI,CAACC,EAAMH,6BAAU,MAAC,CACjCO,GAAIP,EACJQ,QAASL,EAAKM,KACd1C,YACE2C,EAAAA,IAAK,MAAA,CAAAC,UAAWC,EAAOC,mBACrBC,SAAAJ,EAAAA,IAACK,EAAO,CACNC,iBACA,EAAAC,UAAU,aACVC,KAAK,WACLC,QAAQ,QACRC,MAAO,CAAC,EAAG,GACXC,SAAWC,GACT5C,GAAgB6C,GAAShC,OAAAc,OAAAd,OAAAc,OAAA,CAAA,EACpBkB,GAAI,CACPvB,CAACA,GAAQsB,MAGbE,QACEC,EAAAC,KAAA,MAAA,CAAKf,UAAWC,EAAOe,uBACrBb,SAAA,CAAAJ,EAAAA,IAAA,IAAA,CAAGC,UAAWC,EAAOgB,8BAA6Bd,SAAA,gBAClDJ,MAACmB,EAAAA,SAAQ,CACPC,YAAY,wBACZ/B,MAAOI,EAAKpC,YACZgE,SAAUxE,EACVyE,SAAWjC,GAAUF,EAAc,cAAeE,EAAOC,MAEzDzC,GACAmD,EAAAA,IAACuB,EAAAA,OACC,CAAAtB,UAAWC,EAAOsB,2BAClBC,QAAQ,WACRC,KAAK,QACLC,QAAS,WACPjE,EAAc,QAAQ4B,iBAAsBG,EAAKpC,aAC7B,QAApBuE,EAAA7D,EAAYuB,UAAQ,IAAAsC,GAAAA,EAAAC,MAAM,EAIrBzB,SAAA,aAEPA,SAGPvD,EACCkE,EAAAA,KAACQ,EAAAA,OAAM,CAACtB,UAAWC,EAAO4B,YAAaL,QAAQ,OAAOM,MAAM,SAAQ3B,SAAA,CACjEX,EAAKpC,YAAcoC,EAAKpC,YAAY2E,UAAU,EAAG,IAAM,IACvDvC,EAAKpC,aAAeoC,EAAKpC,YAAY0B,OAAS,GAAK,MAAQ,MAG9DiB,EAACiC,IAAAV,EAAMA,OACL,CAAAtB,UAAWC,EAAO4B,YAClBL,QAAQ,OACRM,MAAM,SACNG,QAASlC,EAAAiC,IAACE,EAAS,CAACC,IAAKC,EAAUC,MAAM,SAASC,OAAO,WAExDnC,SAAAvD,GAAY4C,EAAKpC,YAAc,mBAAqB,wBAM/DmF,aACEzB,EAAKC,KAAA,MAAA,CAAAf,UAAWC,EAAOC,mBAAkBC,SAAA,CACvCJ,EAAAA,IAACK,GACCC,iBAAe,EACfC,UAAU,aACVC,KAAK,WACLC,QAAQ,QACRC,MAAO,CAAC,EAAG,GACXC,SAAWC,GACT9C,GAAwB+C,GACnBhC,OAAAc,OAAAd,OAAAc,OAAA,CAAA,EAAAkB,IACHvB,CAACA,GAAQsB,MAGbE,QACEC,EAAAA,KAAK,MAAA,CAAAd,UAAWC,EAAOe,uBACrBb,SAAA,CAAAJ,EAAAiC,IAAA,IAAA,CAAGhC,UAAWC,EAAOgB,8BAA4Dd,SAAA,8BACjFJ,MAACmB,EAAAA,SAAQ,CACPC,YAAY,2BACZ/B,cAAOuC,EAAAnC,EAAK+C,mCAAcnF,YAC1BgE,SAAUxE,EACVyE,SAAWjC,IACTF,EACE,eACKN,OAAAc,OAAAd,OAAAc,OAAA,CAAA,EAAAF,EAAK+C,cAAc,CAAAnF,YAAagC,IACrCC,GAEFhC,EAAe+B,EAAM,IAGzBW,EAAAA,IAAG,IAAA,CAAAC,UAAWC,EAAOgB,8BAA6Bd,SAAA,uBAClDJ,EAACiC,IAAAd,EAAQA,SACP,CAAAC,YAAY,wBACZ/B,MAAwB,UAAjBI,EAAK+C,oBAAY,IAAAC,OAAA,EAAAA,EAAElF,IAC1B8D,SAAUxE,EACVyE,SAAWjC,IACTF,EAAc,eAAqBN,OAAAc,OAAAd,OAAAc,OAAA,CAAA,EAAAF,EAAK+C,cAAc,CAAAjF,IAAK8B,IAASC,GACpE9B,EAAO6B,EAAM,KAGfxC,GACAmD,EAAAA,IAACuB,EAAAA,OAAM,CACLtB,UAAWC,EAAOsB,2BAClBC,QAAQ,WACRC,KAAK,QACLC,QAAS,WACPjE,EAAc,QAAQ4B,kBAAuB,CAC3CjC,YAAaA,EACbE,IAAKA,IAEPD,EAAe,IACfE,EAAO,IACqB,QAA5BoE,EAAA/D,EAAoByB,UAAQ,IAAAsC,GAAAA,EAAAC,MAAM,EAI7BzB,SAAA,aAEPA,SAGPvD,EACCkE,OAACQ,EAAAA,OAAM,CACLtB,UAAWC,EAAO4B,YAClBL,QAAQ,OACRM,MAAM,SACNJ,QAAS,WACP,MAAMe,EAAIC,SAASC,cAAc,KACjCF,EAAEG,KAA0B,QAAnBjB,EAAAnC,EAAK+C,oBAAc,IAAAZ,OAAA,EAAAA,EAAArE,IAC5BmF,EAAEI,OAAO,EACV1C,SAAA,EAEkB,QAAlB2C,EAAAtD,aAAI,EAAJA,EAAM+C,oBAAY,IAAAO,OAAA,EAAAA,EAAE1F,aACgB,QAAjC2F,EAAkB,QAAlBC,EAAAxD,eAAAA,EAAM+C,oBAAY,IAAAS,OAAA,EAAAA,EAAE5F,mBAAa,IAAA2F,OAAA,EAAAA,EAAAhB,UAAU,EAAG,IAC9C,aACHkB,EAAAzD,aAAA,EAAAA,EAAM+C,mCAAcnF,eAAgD,QAAjC8F,EAAoB,QAApBC,EAAA3D,aAAA,EAAAA,EAAM+C,oBAAc,IAAAY,OAAA,EAAAA,EAAA/F,mBAAa,IAAA8F,OAAA,EAAAA,EAAApE,QAAS,GAC1E,MACA,MAGNgC,EAACC,KAAAO,UACCtB,UAAWC,EAAO4B,YAClBL,QAAQ,OACRM,MAAM,SACNG,QAASlC,MAACmC,GAAUC,IAAKC,EAAUC,MAAM,SAASC,OAAO,WACzDZ,QAAS,KACP0B,QAAQC,IAAI,cAAc,YAG3BzG,GACA4C,EAAK+C,wBAAiBe,EAAA9D,EAAK+C,mCAAcjF,OAA0B,UAAnBkC,EAAK+C,oBAAc,IAAAgB,OAAA,EAAAA,EAAAnG,cAChE,QACA,OAAQ,+BAMhBR,GAAYmD,MAAA,MAAA,CAAKC,UAAWC,EAAOuD,gCAEnC5G,GACAmD,EAAAA,IAACuB,EAAMA,OACL,CAAAtB,UAAWC,EAAOwD,eAClBjC,QAAQ,OACRM,MAAM,QACNG,QAASlC,MAACmC,EAAU,CAAAC,IAAKuB,EAAYrB,MAAM,WAAWC,OAAO,aAC7DZ,QAAS,KAAMiC,OA9KA/D,EA8KkBP,EA9KNS,EA8KaN,EAAKM,KA7KvD7B,EAAoB2B,GACpBzB,EAAmB2B,QAEnBzB,GAAoB,GAJI,IAACuB,EAAYE,CA+KnB,OAIhB,IAGJ,OACEgB,EAAMC,KAAA,OAAA,CAAAf,UAAWC,EAAO2D,YAAaC,SAAWC,GAAMA,EAAEC,iBACtD5D,SAAA,CAAAJ,EAAAA,IAACiE,EAAKA,MAAA,CACJvC,KAAK,QACLN,YAAY,gBACZ8C,MAAM,WACNC,UAAQ,EACR9E,MAAqB,QAAduC,EAAAnE,aAAA,EAAAA,EAAQ2G,YAAM,IAAAxC,OAAA,EAAAA,EAAAyC,MACrBC,UAAW,GACXhD,SAAWjC,IACT3B,EAAc,aAAc2B,EAAM,EAEpCkF,QAAS,KACP7G,EAAc,aAAc,GAAG,EAEjC8G,SAAwB,QAAd/B,EAAA9E,aAAA,EAAAA,EAAQyG,YAAM,IAAA3B,OAAA,EAAAA,EAAA4B,MACxBI,qBAAsBC,EAAMC,QAE9B5D,OAAA,MAAA,CAAKd,UAAWC,EAAO0E,UAASxE,SAAA,CAC9BJ,MAACiE,EAAKA,MAAA,CACJvC,KAAK,QACLwC,MAAM,0BACNC,UAAQ,EACR9E,OAnOYwF,EAmOM1H,EAlOnB0H,EACEA,EAAIC,OAAO,GAAGC,cAAgBF,EAAIG,MAAM,GAD9B,IAmOX3D,UACA,IACFrB,EAACiC,IAAAgC,QAAM,CAAAvC,KAAK,QAAQwC,MAAM,UAAUC,UAAQ,EAAC9E,cAAO0D,EAAAtF,aAAA,EAAAA,EAAQ2G,2BAAMa,QAAS5D,UAAQ,OAErFrB,EAAAA,IAACmB,EAAQA,SACP,CAAAO,KAAK,QACLN,YAAY,oDACZ8C,MAAM,cACN7E,MAAqB,QAAd4D,EAAAxF,aAAA,EAAAA,EAAQ2G,YAAM,IAAAnB,OAAA,EAAAA,EAAA5F,YACrBiH,UAAW,IACXhD,SAAWjC,IACT3B,EAAc,mBAAoB2B,EAAM,EAE1CkF,QAAS,KACP7G,EAAc,mBAAoB,GAAG,EAEvCwH,aAA0B,QAAZlC,EAAArF,aAAA,EAAAA,EAAQyG,YAAI,IAAApB,OAAA,EAAAA,EAAE3F,YAC5BoH,qBAAsBC,EAAMS,eAE9BnF,EAAAA,IAAK,MAAA,CAAAC,UAAWC,EAAOkF,YAAWhF,SAChCJ,EAAAA,IAACqF,EAAS,CACRxF,GAAG,iBACHyF,KAAMrI,EACNsI,UAAWC,EACXjH,WAAYA,EACZC,cAAeA,EACfiH,WA7OYC,IAClB3I,EAAa,IAAID,EAAW4I,IAC5BhI,EAAc,OAAQ,IAAID,EAAOyB,KAAMwG,GAAK,EA4OtC7I,SAAUA,MAGdmD,MAAC2F,EAAY,CACXC,OAAO,QACP9E,QACEC,EAAAC,KAAA,IAAA,CACE6E,MAAO,CACLC,UAAW,SACXC,WAAY,IACZC,SAAU,OACVC,WAAY,aAEdhG,UAAU,uBAGVG,SAAA,CAAA,kCAAAJ,MAAA,OAAA,CAAMC,UAAU,YAAaG,SAAA,QAAQjC,OACnC,OAEN2F,SAAU,CACRnC,QA3RiB,KACE,OAArB1D,GACFlB,GAAc8D,GAASA,EAAKqF,QAAO,CAACC,EAAGC,IAAMA,IAAMnI,MAErDK,GAAoB,GACpBJ,EAAoB,KAAK,EAuRnBmI,KAAM,MACNtE,MAAO,QACPuE,WAAW,GAEbC,SAAU,CACRF,KAAM,KACNtE,MAAO,SACPuE,WAAW,GAEbE,QAAS,IAAMlI,GAAoB,GACnCmI,KAAMpI,EACNqI,KAAM1G,EAAAA,IAACmC,EAAS,CAACC,IAAKuE,EAAoBrE,MAAM,YAAYC,OAAO,mBA/RtD,IAACsC,CAkSnB"}

package/dist/src/components/LivePreview/LivePreview.js

@@ -1,2 +1,2 @@
-import{j as e}from"../../../_virtual/jsx-runtime.js";import s from"./LivePreview.module.scss.js";import i from"../SimpleLabelValue/SimpleLabelValue.js";import o from"../Chips/Chips.js";import t from"../MethodAccordion/MethodAccordion.js";import{useFormikContext as a}from"../../../node_modules/formik/dist/formik.esm.js";import{methodColorMapping as l}from"../../constants/index.js";const r=({transformedData:r})=>{const{values:n}=a(),{info:m,components:d,tags:p}=n,{securitySchemes:c}=d,j=c&&"object"==typeof c&&Object.keys(c).length?Object.keys(c)[0]:null;return e.jsx("div",{children:e.jsx("div",{className:"row",children:e.jsxs("div",{className:"col-md-12",children:[e.jsx("p",{className:s.apiName,children:null==m?void 0:m.title}),e.jsx(i,{label:"API authentication type: ",value:j?c[j].scheme:"-"},"APIAuthenticationType"),e.jsx(i,{label:"Version: ",value:(null==m?void 0:m.version)||"-"},"version"),e.jsx(i,{label:"Description: ",value:(null==m?void 0:m.description)||"-"},"description"),e.jsx(i,{label:"Tags: ",value:p&&p.length?e.jsx(o,{className:s.tagsChips,items:p.map((e=>({id:e.name,label:e.name,disabled:!0})))}):"-"},"tags"),e.jsx(i,{label:"Endpoints "},"endpoints"),n.paths.map((i=>e.jsx("div",{className:s.methodsContainer,children:i.methods.sort(((e,s)=>l[e.type].order+l[s.type].order)).map(((s,o)=>e.jsx(t,{readOnly:!0,method:s,path:i.path})))})))]})})})};export{r as default};
+import{j as e}from"../../../_virtual/jsx-runtime.js";import{useState as t,useEffect as s}from"react";import o from"./LivePreview.module.scss.js";import i from"../SimpleLabelValue/SimpleLabelValue.js";import n from"../MethodAccordion/MethodAccordion.js";import{useFormikContext as l}from"../../../node_modules/formik/dist/formik.esm.js";import{tagsTableHeaders as a,methodColorMapping as r}from"../../constants/index.js";import c from"../table/tags-table.js";import{d}from"../../../_virtual/index.js";import m from"../Tooltip/Tooltip.js";const p=({transformedData:p})=>{const[u,v]=t(),[x,j]=t({}),[h,g]=t([]),[D,b]=t({}),{values:f}=l(),{info:N,components:C,tags:k}=f,{securitySchemes:y}=C,T=y&&"object"==typeof y&&Object.keys(y).length?Object.keys(y)[0]:null;s((()=>{console.log({updated:f.tags}),f.tags&&f.tags.length&&(v(O(f.tags,!0)),g(f.tags))}),[f.tags]);const O=(t,s)=>t.map(((t,i)=>{var n,l,a,r,c,p,u,v;return{id:i,tagName:t.name,description:e.jsx("div",{className:o.paramDescContainer,children:e.jsx(m,{arrowWithBorder:!0,placement:"bottom-end",type:"function",trigger:"click",delay:[0,0],onCreate:e=>j((t=>Object.assign(Object.assign({},t),{[i]:e}))),content:e.jsxs("div",{className:o.editDescTooltipContent,children:[e.jsx("p",{className:o.editDescTooltipContent_header,children:"Description"}),e.jsx(d.TextArea,{placeholder:"Describe parameter...",value:t.description,disabled:s,onChange:e=>null})]}),children:e.jsxs(d.Button,{className:o.editDescBtn,variant:"link",color:"action",children:[t.description?t.description.substring(0,12):"-",t.description&&t.description.length>12?"...":""]})})}),externalDocs:e.jsxs("div",{className:o.paramDescContainer,children:[e.jsx(m,{arrowWithBorder:!0,placement:"bottom-end",type:"function",trigger:"click",delay:[0,0],onCreate:e=>b((t=>Object.assign(Object.assign({},t),{[i]:e}))),content:e.jsxs("div",{className:o.editDescTooltipContent,children:[e.jsx("p",{className:o.editDescTooltipContent_header,children:"External Docs Description"}),e.jsx(d.TextArea,{placeholder:"Describe External Doc...",value:null===(n=t.externalDocs)||void 0===n?void 0:n.description,disabled:s,onChange:e=>null}),e.jsx("p",{className:o.editDescTooltipContent_header,children:"External Docs Link"}),e.jsx(d.TextArea,{placeholder:"External Docs Link...",value:null===(l=t.externalDocs)||void 0===l?void 0:l.url,disabled:s,onChange:e=>null})]}),children:e.jsxs(d.Button,{className:o.editDescBtn,variant:"link",color:"action",onClick:()=>{var e;const s=document.createElement("a");s.href=null===(e=t.externalDocs)||void 0===e?void 0:e.url,s.click()},children:[(null===(a=null==t?void 0:t.externalDocs)||void 0===a?void 0:a.description)?null===(c=null===(r=null==t?void 0:t.externalDocs)||void 0===r?void 0:r.description)||void 0===c?void 0:c.substring(0,12):"-",(null===(p=null==t?void 0:t.externalDocs)||void 0===p?void 0:p.description)&&(null===(v=null===(u=null==t?void 0:t.externalDocs)||void 0===u?void 0:u.description)||void 0===v?void 0:v.length)>12?"...":""]})}),!s&&e.jsx("div",{className:o.paramDescContainer_separator}),!s&&e.jsx(d.Button,{className:o.deleteParamBtn,variant:"link",color:"error",onClick:()=>null})]})}}));return e.jsx("div",{children:e.jsx("div",{className:"row",children:e.jsxs("div",{className:"col-md-12",children:[e.jsx("p",{className:o.apiName,children:null==N?void 0:N.title}),e.jsx(i,{label:"API authentication type: ",value:T?y[T].scheme:"-"},"APIAuthenticationType"),e.jsx(i,{label:"Version: ",value:(null==N?void 0:N.version)||"-"},"version"),e.jsx(i,{label:"Description: ",value:(null==N?void 0:N.description)||"-"},"description"),e.jsx(i,{label:"Tags: "},"tags"),e.jsx(c,{id:"tags-table",data:u,headCells:a,isFormOpen:!1,setIsFormOpen:()=>null,saveNewRow:()=>null,readOnly:!0}),e.jsx(i,{label:"Endpoints "},"endpoints"),f.paths.map((t=>e.jsx("div",{className:o.methodsContainer,children:t.methods.sort(((e,t)=>r[e.type].order+r[t.type].order)).map(((s,o)=>e.jsx(n,{readOnly:!0,method:s,path:t.path})))})))]})})})};export{p as default};
 //# sourceMappingURL=LivePreview.js.map

package/dist/src/components/LivePreview/LivePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"LivePreview.js","sources":["../../../../src/components/LivePreview/LivePreview.tsx"],"sourcesContent":["import React from 'react'\r\nimport styles from './LivePreview.module.scss'\r\nimport SimpleLabelValue from '../../components/SimpleLabelValue'\r\nimport Chips from '../../components/Chips/Chips'\r\nimport MethodsAccordion from '../../components/MethodAccordion/MethodAccordion'\r\nimport { TransformedOpenApi } from '../../types/transformedOpenApi'\r\nimport { useFormikContext } from 'formik'\r\nimport { methodColorMapping } from '../../constants/index'\r\n\r\ninterface LivePreviewProps {\r\n  transformedData?: TransformedOpenApi\r\n}\r\n\r\nconst LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {\r\n  const { values } = useFormikContext<TransformedOpenApi>()\r\n  const { info, components, tags } = values\r\n  const { securitySchemes } = components\r\n  const securityKey =\r\n    securitySchemes && typeof securitySchemes == 'object' && Object.keys(securitySchemes).length\r\n      ? Object.keys(securitySchemes)[0]\r\n      : null\r\n  return (\r\n    <div>\r\n      <div className=\"row\">\r\n        <div className=\"col-md-12\">\r\n          <p className={styles.apiName}>{info?.title}</p>\r\n          <SimpleLabelValue\r\n            key={'APIAuthenticationType'}\r\n            label={'API authentication type: '}\r\n            value={!!securityKey ? securitySchemes[securityKey].scheme : '-'}\r\n          />\r\n          <SimpleLabelValue key={'version'} label={'Version: '} value={info?.version || '-'} />\r\n          <SimpleLabelValue\r\n            key={'description'}\r\n            label={'Description: '}\r\n            value={info?.description || '-'}\r\n          />\r\n\r\n          <SimpleLabelValue\r\n            key={'tags'}\r\n            label={'Tags: '}\r\n            value={\r\n              tags && tags.length ? (\r\n                <Chips\r\n                  className={styles.tagsChips}\r\n                  items={tags.map((t) => ({\r\n                    id: t.name,\r\n                    label: t.name,\r\n                    disabled: true,\r\n                  }))}\r\n                />\r\n              ) : (\r\n                '-'\r\n              )\r\n            }\r\n          />\r\n\r\n          <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />\r\n          {values.paths.map((path) => (\r\n            <div className={styles.methodsContainer}>\r\n              {path.methods\r\n                .sort((a, b) => methodColorMapping[a.type].order + methodColorMapping[b.type].order)\r\n                .map((method, methodIndex) => (\r\n                  <MethodsAccordion readOnly method={method} path={path.path} />\r\n                ))}\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default LivePreview\r\n"],"names":["LivePreview","transformedData","values","useFormikContext","info","components","tags","securitySchemes","securityKey","Object","keys","length","_jsx","children","jsx","className","_jsxs","styles","apiName","title","SimpleLabelValue","label","value","scheme","version","description","Chips","tagsChips","items","map","t","id","name","disabled","paths","path","methodsContainer","methods","sort","a","b","methodColorMapping","type","order","method","methodIndex","MethodsAccordion","readOnly"],"mappings":"+XAaA,MAAMA,EAA0C,EAAGC,sBACjD,MAAMC,OAAEA,GAAWC,KACbC,KAAEA,EAAIC,WAAEA,EAAUC,KAAEA,GAASJ,GAC7BK,gBAAEA,GAAoBF,EACtBG,EACJD,GAA6C,iBAAnBA,GAA+BE,OAAOC,KAAKH,GAAiBI,OAClFF,OAAOC,KAAKH,GAAiB,GAC7B,KACN,OACEK,MAAA,MAAA,CAAAC,SACED,EAAKE,IAAA,MAAA,CAAAC,UAAU,MAAKF,SAClBG,OAAK,MAAA,CAAAD,UAAU,YACbF,SAAA,CAAAD,MAAA,IAAA,CAAGG,UAAWE,EAAOC,QAAUL,SAAAT,eAAAA,EAAMe,QACrCP,MAACQ,EAAgB,CAEfC,MAAO,4BACPC,MAASd,EAAcD,EAAgBC,GAAae,OAAS,KAFxD,yBAIPX,MAACQ,EAAiC,CAAAC,MAAO,YAAaC,OAAOlB,aAAA,EAAAA,EAAMoB,UAAW,KAAvD,WACvBZ,MAACQ,EAAgB,CAEfC,MAAO,gBACPC,OAAOlB,aAAI,EAAJA,EAAMqB,cAAe,KAFvB,eAKPb,MAACQ,EAAgB,CAEfC,MAAO,SACPC,MACEhB,GAAQA,EAAKK,OACXC,MAACc,EAAK,CACJX,UAAWE,EAAOU,UAClBC,MAAOtB,EAAKuB,KAAKC,IAAO,CACtBC,GAAID,EAAEE,KACNX,MAAOS,EAAEE,KACTC,UAAU,aATb,QAkBPrB,MAACQ,EAAgB,CAAmBC,MAAO,cAApB,aACtBnB,EAAOgC,MAAML,KAAKM,GACjBvB,EAAAA,IAAK,MAAA,CAAAG,UAAWE,EAAOmB,iBACpBvB,SAAAsB,EAAKE,QACHC,MAAK,CAACC,EAAGC,IAAMC,EAAmBF,EAAEG,MAAMC,MAAQF,EAAmBD,EAAEE,MAAMC,QAC7Ed,KAAI,CAACe,EAAQC,IACZjC,EAACE,IAAAgC,EAAiB,CAAAC,YAASH,OAAQA,EAAQT,KAAMA,EAAKA,mBAOrE"}
+{"version":3,"file":"LivePreview.js","sources":["../../../../src/components/LivePreview/LivePreview.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\r\nimport styles from './LivePreview.module.scss'\r\nimport SimpleLabelValue from '../../components/SimpleLabelValue'\r\n\r\nimport MethodsAccordion from '../../components/MethodAccordion/MethodAccordion'\r\nimport { TransformedOpenApi } from '../../types/transformedOpenApi'\r\nimport { useFormikContext } from 'formik'\r\nimport { methodColorMapping, tagsTableHeaders } from '../../constants/index'\r\nimport TagsTable from '../table/tags-table'\r\nimport { Button, TextArea } from 'digitinary-ui'\r\nimport Tooltip from '../../components/Tooltip/Tooltip'\r\nimport { DeleteIcon, deleteOutlinedIcon, EditIcon } from '../../assets/icons'\r\n\r\ninterface LivePreviewProps {\r\n  transformedData?: TransformedOpenApi\r\n}\r\n\r\nconst LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {\r\n  const [tableRecords, setTableRecords] = useState()\r\n  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})\r\n  const [tableData, setTableData] = useState([])\r\n  const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})\r\n  const { values } = useFormikContext<TransformedOpenApi>()\r\n  const { info, components, tags } = values\r\n  const { securitySchemes } = components\r\n  const securityKey =\r\n    securitySchemes && typeof securitySchemes == 'object' && Object.keys(securitySchemes).length\r\n      ? Object.keys(securitySchemes)[0]\r\n      : null\r\n\r\n  useEffect(() => {\r\n    console.log({updated: values.tags})\r\n    if (values.tags && values.tags.length) {\r\n      setTableRecords(generateTableData(values.tags, true))\r\n      setTableData(values.tags)\r\n    }\r\n  }, [values.tags])\r\n\r\n  const generateTableData = (items, readOnly) => {\r\n    return items.map((item, index) => ({\r\n      id: index,\r\n      tagName: item.name,\r\n      description: (\r\n        <div className={styles.paramDescContainer}>\r\n          <Tooltip\r\n            arrowWithBorder\r\n            placement=\"bottom-end\"\r\n            type=\"function\"\r\n            trigger=\"click\"\r\n            delay={[0, 0]}\r\n            onCreate={(instance) =>\r\n              setTooltipRefs((prev) => ({\r\n                ...prev,\r\n                [index]: instance,\r\n              }))\r\n            }\r\n            content={\r\n              <div className={styles.editDescTooltipContent}>\r\n                <p className={styles.editDescTooltipContent_header}>Description</p>\r\n                <TextArea\r\n                  placeholder=\"Describe parameter...\"\r\n                  value={item.description}\r\n                  disabled={readOnly}\r\n                  onChange={(value) => null}\r\n                />\r\n              </div>\r\n            }\r\n          >\r\n            <Button className={styles.editDescBtn} variant=\"link\" color=\"action\">\r\n              {item.description ? item.description.substring(0, 12) : '-'}\r\n              {item.description && item.description.length > 12 ? '...' : ''}\r\n            </Button>\r\n          </Tooltip>\r\n        </div>\r\n      ),\r\n      externalDocs: (\r\n        <div className={styles.paramDescContainer}>\r\n          <Tooltip\r\n            arrowWithBorder\r\n            placement=\"bottom-end\"\r\n            type=\"function\"\r\n            trigger=\"click\"\r\n            delay={[0, 0]}\r\n            onCreate={(instance) =>\r\n              setExternalTooltipRefs((prev) => ({\r\n                ...prev,\r\n                [index]: instance,\r\n              }))\r\n            }\r\n            content={\r\n              <div className={styles.editDescTooltipContent}>\r\n                <p className={styles.editDescTooltipContent_header}>External Docs Description</p>\r\n                <TextArea\r\n                  placeholder=\"Describe External Doc...\"\r\n                  value={item.externalDocs?.description}\r\n                  disabled={readOnly}\r\n                  onChange={(value) => null}\r\n                />\r\n                <p className={styles.editDescTooltipContent_header}>External Docs Link</p>\r\n                <TextArea\r\n                  placeholder=\"External Docs Link...\"\r\n                  value={item.externalDocs?.url}\r\n                  disabled={readOnly}\r\n                  onChange={(value) => null}\r\n                />\r\n              </div>\r\n            }\r\n          >\r\n            <Button\r\n              className={styles.editDescBtn}\r\n              variant=\"link\"\r\n              color=\"action\"\r\n              onClick={() => {\r\n                const a = document.createElement('a')\r\n                a.href = item.externalDocs?.url\r\n                a.click()\r\n              }}\r\n            >\r\n              {item?.externalDocs?.description\r\n                ? item?.externalDocs?.description?.substring(0, 12)\r\n                : '-'}\r\n              {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12\r\n                ? '...'\r\n                : ''}\r\n            </Button>\r\n          </Tooltip>\r\n\r\n          {!readOnly && <div className={styles.paramDescContainer_separator}></div>}\r\n\r\n          {!readOnly && (\r\n            <Button\r\n              className={styles.deleteParamBtn}\r\n              variant=\"link\"\r\n              color=\"error\"\r\n              onClick={() => null}\r\n            ></Button>\r\n          )}\r\n        </div>\r\n      ),\r\n    }))\r\n  }\r\n  return (\r\n    <div>\r\n      <div className=\"row\">\r\n        <div className=\"col-md-12\">\r\n          <p className={styles.apiName}>{info?.title}</p>\r\n          <SimpleLabelValue\r\n            key={'APIAuthenticationType'}\r\n            label={'API authentication type: '}\r\n            value={!!securityKey ? securitySchemes[securityKey].scheme : '-'}\r\n          />\r\n          <SimpleLabelValue key={'version'} label={'Version: '} value={info?.version || '-'} />\r\n          <SimpleLabelValue\r\n            key={'description'}\r\n            label={'Description: '}\r\n            value={info?.description || '-'}\r\n          />\r\n\r\n          <SimpleLabelValue\r\n            key={'tags'}\r\n            label={'Tags: '}\r\n          />\r\n          <TagsTable\r\n          id=\"tags-table\"\r\n            data={tableRecords}\r\n            headCells={tagsTableHeaders}\r\n            isFormOpen={false}\r\n            setIsFormOpen={() => null}\r\n            saveNewRow={() => null}\r\n            readOnly={true}\r\n          />\r\n\r\n          <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />\r\n          {values.paths.map((path) => (\r\n            <div className={styles.methodsContainer}>\r\n              {path.methods\r\n                .sort((a, b) => methodColorMapping[a.type].order + methodColorMapping[b.type].order)\r\n                .map((method, methodIndex) => (\r\n                  <MethodsAccordion readOnly method={method} path={path.path} />\r\n                ))}\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default LivePreview\r\n"],"names":["LivePreview","transformedData","tableRecords","setTableRecords","useState","tooltipRefs","setTooltipRefs","tableData","setTableData","externalTooltipRefs","setExternalTooltipRefs","values","useFormikContext","info","components","tags","securitySchemes","securityKey","Object","keys","length","useEffect","console","log","updated","generateTableData","items","readOnly","map","item","index","id","tagName","name","description","_jsx","jsx","className","styles","paramDescContainer","children","Tooltip","arrowWithBorder","placement","type","trigger","delay","onCreate","instance","prev","assign","content","_jsxs","editDescTooltipContent","editDescTooltipContent_header","TextArea","placeholder","value","disabled","onChange","Button","editDescBtn","variant","color","substring","externalDocs","_a","_b","url","onClick","a","document","createElement","href","click","_c","_e","_d","_f","_h","_g","paramDescContainer_separator","deleteParamBtn","jsxs","apiName","title","SimpleLabelValue","label","scheme","version","TagsTable","data","headCells","tagsTableHeaders","isFormOpen","setIsFormOpen","saveNewRow","paths","path","methodsContainer","methods","sort","b","methodColorMapping","order","method","methodIndex","MethodsAccordion"],"mappings":"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"}

package/dist/src/components/table/tags-table.js

@@ -1,2 +1,2 @@
-import{j as e}from"../../../_virtual/jsx-runtime.js";import{useState as i}from"react";import t from"../InfoForm/InfoForm.module.scss.js";import{d as s}from"../../../_virtual/index.js";import a from"../Tooltip/Tooltip.js";import n from"../SVGLoader/SVGLoader.js";import l from"../../assets/icons/DeleteIcon.svg.js";import o from"../../assets/icons/EditIcon.svg.js";import r from"../../assets/icons/AddRow.svg.js";import d from"../MethodAccordion/MethodAccordion.module.scss.js";import{useFormik as c}from"../../../node_modules/formik/dist/formik.esm.js";import{object as m,string as h}from"../../../node_modules/yup/index.esm.js";const p=({id:p,headCells:x,data:u,isFormOpen:j,setIsFormOpen:v,saveNewRow:D,readOnly:N})=>{var b,C,g,T,f,w;const[k,B]=i(""),[_,y]=i(""),[E,I]=i(""),[A,L]=i(null),[O,S]=i(null),{values:W,errors:F,setFieldValue:R,isValid:V,submitForm:P,resetForm:z}=c({initialValues:{name:"",description:"",externalDocs:{url:"",description:""}},validationSchema:m().shape({name:h().required("Tag name is required"),description:h().optional(),externalDocs:m().optional()}),onSubmit:e=>{B(""),y(""),I(""),z(),v(!1),D(e)}});return e.jsx("div",{className:"tableSectionContainer",children:e.jsx("div",{className:"tableContainer",children:e.jsxs("table",{id:p||"",className:"table borderRadiusTop borderRadiusBottom",children:[e.jsx("thead",{className:"tableHead",children:e.jsx("tr",{children:null==x?void 0:x.map((i=>e.jsx("th",{className:`tableHeadCell ${i.classes||""}`,style:{width:i.width,minWidth:i.minWidth},children:e.jsx("div",{className:"headContainer","data-id":`${"string"==typeof i.label?i.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g,"_"):"UNKNOWN_LABEL"}_COLUMN`,children:i.label})},i.id)))})}),e.jsxs("tbody",{className:"tableBody","data-id":"TABLE_BODY",children:[null==u?void 0:u.map(((i,t)=>e.jsx("tr",{"data-i":t,className:"row",children:null==x?void 0:x.map((t=>{const s="_"!==i[t.id]&&e.jsx("div",{"data-id":"TEXT_DESCRIPTION",className:"tableData",style:{width:t.width,minWidth:t.minWidth},children:i[t.id]});return e.jsx("td",{style:{width:t.width,minWidth:t.minWidth},children:s},t.id)}))},t))),j?e.jsxs("tr",{"data-i":"",className:"row",children:[e.jsx("td",{children:e.jsx("div",{"data-id":"TEXT_DESCRIPTION",className:"tableData",children:e.jsx(s.Input,{placeholder:"Tag name",size:"large",type:"text",onChange:e=>{R("name",e)},value:W.name,disabled:N})})},"tag name"),e.jsx("td",{children:e.jsxs("div",{"data-id":"TEXT_DESCRIPTION",className:"tableData",children:[e.jsx("div",{className:d.paramDescContainer,children:e.jsx(a,{arrowWithBorder:!0,placement:"bottom-end",type:"function",trigger:"click",delay:[0,0],onCreate:e=>L(e),content:e.jsxs("div",{className:t.editDescTooltipContent,children:[e.jsx("p",{className:t.editDescTooltipContent_header,children:"Description"}),e.jsx(s.TextArea,{value:k||W.description,onChange:e=>{B(e)},disabled:N,placeholder:"Describe Tag..."}),!N&&e.jsx(s.Button,{className:t.editDescTooltipContent_btn,variant:"outlined",size:"small",onClick:()=>{R("description",k),null==A||A.hide()},children:"Apply"})]}),children:e.jsxs(s.Button,{className:t.editDescBtn,style:{paddingLeft:0},variant:"link",color:"action",endIcon:e.jsx(n,{src:o,width:"1.5rem",height:"1.5rem"}),children:[N?"View ":"Add "," Description"]})})})," "]})},"tagDescRequired"),e.jsx("td",{children:e.jsx("div",{className:"tableData",children:e.jsxs("div",{className:t.paramDescContainer,children:[e.jsx(a,{arrowWithBorder:!0,placement:"bottom-end",type:"function",trigger:"click",delay:[0,0],onCreate:e=>S(e),content:e.jsxs("div",{className:t.editDescTooltipContent,children:[e.jsx("p",{className:t.editDescTooltipContent_header,children:"External Docs Description"}),e.jsx(s.TextArea,{placeholder:"Describe External Doc...",value:_||W.externalDocs.description,disabled:N,onChange:e=>y(e)}),e.jsx("p",{className:t.editDescTooltipContent_header,children:"External Docs Link"}),e.jsx(s.TextArea,{placeholder:"External Docs Link...",value:E||W.externalDocs.url,disabled:N,onChange:e=>I(e)}),!N&&e.jsx(s.Button,{className:t.editDescTooltipContent_btn,variant:"outlined",size:"small",onClick:()=>{R("externalDocs",{description:_,url:E}),y(""),I(""),null==O||O.hide()},children:"Apply"})]}),children:N?e.jsxs(s.Button,{className:t.editDescBtn,variant:"link",color:"action",onClick:()=>{var e;const i=document.createElement("a");i.href=null===(e=W.externalDocs)||void 0===e?void 0:e.url,i.click()},children:[(null===(b=null==W?void 0:W.externalDocs)||void 0===b?void 0:b.description)?null===(g=null===(C=null==W?void 0:W.externalDocs)||void 0===C?void 0:C.description)||void 0===g?void 0:g.substring(0,12):"-",(null===(T=null==W?void 0:W.externalDocs)||void 0===T?void 0:T.description)&&(null===(w=null===(f=null==W?void 0:W.externalDocs)||void 0===f?void 0:f.description)||void 0===w?void 0:w.length)>12?"...":""]}):e.jsxs(s.Button,{className:t.editDescBtn,variant:"link",color:"action",endIcon:e.jsx(n,{src:o,width:"1.5rem",height:"1.5rem"}),children:[N?"View ":"Add "," External Docs Link"]})}),e.jsx("div",{className:t.paramDescContainer_separator}),!N&&e.jsx(s.Button,{className:t.deleteParamBtn,variant:"link",color:"error",endIcon:e.jsx(n,{src:l,width:"1.125rem",height:"1.125rem"}),onClick:()=>{z(),B(""),v(!1)}}),!N&&e.jsx(s.Button,{className:t.deleteParamBtn,variant:"link",color:"success",disabled:!V,endIcon:e.jsx(n,{src:r,width:"0.125rem",height:"0.125rem"}),onClick:()=>{B(""),P()}})]})})},"tagExternal")]},""):e.jsx(e.Fragment,{children:!N&&e.jsx("tr",{"data-i":"addNew",className:"row",children:e.jsx("td",{colSpan:5,children:e.jsx(s.Button,{variant:"link",color:"primary",onClick:()=>{v((e=>!e))},children:"+ Add Tag"})})},"addNew")})]})]})})})};export{p as default};
+import{j as e}from"../../../_virtual/jsx-runtime.js";import{useState as i}from"react";import t from"../InfoForm/InfoForm.module.scss.js";import{d as a}from"../../../_virtual/index.js";import s from"../Tooltip/Tooltip.js";import n from"../SVGLoader/SVGLoader.js";import l from"../../assets/icons/DeleteIcon.svg.js";import o from"../../assets/icons/EditIcon.svg.js";import r from"../../assets/icons/AddRow.svg.js";import d from"../MethodAccordion/MethodAccordion.module.scss.js";import{useFormik as c}from"../../../node_modules/formik/dist/formik.esm.js";import{object as m,string as h}from"../../../node_modules/yup/index.esm.js";const p=({id:p,headCells:x,data:u,isFormOpen:j,setIsFormOpen:v,saveNewRow:D,readOnly:N})=>{var b,C,g,T,f,w;const[k,B]=i(""),[_,y]=i(""),[E,I]=i(""),[A,L]=i(null),[O,S]=i(null),{values:W,errors:F,setFieldValue:R,isValid:V,submitForm:P,resetForm:z}=c({initialValues:{name:"",description:"",externalDocs:{url:"",description:""}},validationSchema:m().shape({name:h().required("Tag name is required"),description:h().optional(),externalDocs:m().optional()}),onSubmit:e=>{B(""),y(""),I(""),z(),v(!1),D(e)}});return e.jsx("div",{className:"tableSectionContainer",children:e.jsx("div",{className:"tableContainer",children:e.jsxs("table",{id:p||"",className:"table borderRadiusTop borderRadiusBottom",children:[e.jsx("thead",{className:"tableHead",children:e.jsx("tr",{children:null==x?void 0:x.map((i=>e.jsx("th",{className:`tableHeadCell ${i.classes||""}`,style:{width:i.width,minWidth:i.minWidth},children:e.jsx("div",{className:"headContainer","data-id":`${"string"==typeof i.label?i.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g,"_"):"UNKNOWN_LABEL"}_COLUMN`,children:i.label})},i.id)))})}),e.jsxs("tbody",{className:"tableBody","data-id":"TABLE_BODY",children:[null==u?void 0:u.map(((i,t)=>e.jsx("tr",{"data-i":t,className:"row",children:null==x?void 0:x.map((t=>{const a="_"!==i[t.id]&&e.jsx("div",{"data-id":"TEXT_DESCRIPTION",className:"tableData",style:{width:t.width,minWidth:t.minWidth},children:i[t.id]});return e.jsx("td",{style:{width:t.width,minWidth:t.minWidth},children:a},t.id)}))},t))),j?e.jsxs("tr",{"data-i":"",className:"row",children:[e.jsx("td",{children:e.jsx("div",{"data-id":"TEXT_DESCRIPTION",className:"tableData",children:e.jsx(a.Input,{placeholder:"Tag name",size:"large",type:"text",onChange:e=>{R("name",e)},value:W.name,disabled:N})})},"tag name"),e.jsx("td",{children:e.jsxs("div",{"data-id":"TEXT_DESCRIPTION",className:"tableData",children:[e.jsx("div",{className:d.paramDescContainer,children:e.jsx(s,{arrowWithBorder:!0,placement:"bottom-end",type:"function",trigger:"click",delay:[0,0],onCreate:e=>L(e),content:e.jsxs("div",{className:t.editDescTooltipContent,children:[e.jsx("p",{className:t.editDescTooltipContent_header,children:"Description"}),e.jsx(a.TextArea,{value:k||W.description,onChange:e=>{B(e)},disabled:N,placeholder:"Describe Tag..."}),!N&&e.jsx(a.Button,{className:t.editDescTooltipContent_btn,variant:"outlined",size:"small",onClick:()=>{R("description",k),null==A||A.hide()},children:"Apply"})]}),children:e.jsxs(a.Button,{className:t.editDescBtn,style:{paddingLeft:0},variant:"link",color:"action",endIcon:e.jsx(n,{src:o,width:"1.5rem",height:"1.5rem"}),children:[N?"View ":"Add "," Description"]})})})," "]})},"tagDescRequired"),e.jsx("td",{children:e.jsx("div",{className:"tableData",children:e.jsxs("div",{className:t.paramDescContainer,children:[e.jsx(s,{arrowWithBorder:!0,placement:"bottom-end",type:"function",trigger:"click",delay:[0,0],onCreate:e=>S(e),content:e.jsxs("div",{className:t.editDescTooltipContent,children:[e.jsx("p",{className:t.editDescTooltipContent_header,children:"External Docs Description"}),e.jsx(a.TextArea,{placeholder:"Describe External Doc...",value:_||W.externalDocs.description,disabled:N,onChange:e=>y(e)}),e.jsx("p",{className:t.editDescTooltipContent_header,children:"External Docs Link"}),e.jsx(a.TextArea,{placeholder:"External Docs Link...",value:E||W.externalDocs.url,disabled:N,onChange:e=>I(e)}),!N&&e.jsx(a.Button,{className:t.editDescTooltipContent_btn,variant:"outlined",size:"small",onClick:()=>{R("externalDocs",{description:_,url:E}),y(""),I(""),null==O||O.hide()},children:"Apply"})]}),children:N?e.jsxs(a.Button,{className:t.editDescBtn,variant:"link",color:"action",onClick:()=>{var e;const i=document.createElement("a");i.href=null===(e=W.externalDocs)||void 0===e?void 0:e.url,i.target="_blank",i.click()},children:[(null===(b=null==W?void 0:W.externalDocs)||void 0===b?void 0:b.description)?null===(g=null===(C=null==W?void 0:W.externalDocs)||void 0===C?void 0:C.description)||void 0===g?void 0:g.substring(0,12):"-",(null===(T=null==W?void 0:W.externalDocs)||void 0===T?void 0:T.description)&&(null===(w=null===(f=null==W?void 0:W.externalDocs)||void 0===f?void 0:f.description)||void 0===w?void 0:w.length)>12?"...":""]}):e.jsxs(a.Button,{className:t.editDescBtn,variant:"link",color:"action",endIcon:e.jsx(n,{src:o,width:"1.5rem",height:"1.5rem"}),children:[N?"View ":"Add "," External Docs Link"]})}),e.jsx("div",{className:t.paramDescContainer_separator}),!N&&e.jsx(a.Button,{className:t.deleteParamBtn,variant:"link",color:"error",endIcon:e.jsx(n,{src:l,width:"1.125rem",height:"1.125rem"}),onClick:()=>{z(),B(""),v(!1)}}),!N&&e.jsx(a.Button,{className:t.deleteParamBtn,variant:"link",color:"success",disabled:!V,endIcon:e.jsx(n,{src:r,width:"0.125rem",height:"0.125rem"}),onClick:()=>{B(""),P()}})]})})},"tagExternal")]},""):e.jsx(e.Fragment,{children:!N&&e.jsx("tr",{"data-i":"addNew",className:"row",children:e.jsx("td",{colSpan:5,children:e.jsx(a.Button,{variant:"link",color:"primary",onClick:()=>{v((e=>!e))},children:"+ Add Tag"})})},"addNew")})]})]})})})};export{p as default};
 //# sourceMappingURL=tags-table.js.map

package/dist/src/components/table/tags-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags-table.js","sources":["../../../../src/components/table/tags-table.tsx"],"sourcesContent":["import { useState } from 'react'\r\nimport './style.scss'\r\nimport _styles from '../InfoForm/InfoForm.module.scss'\r\nimport { Button, Input, TextArea } from 'digitinary-ui'\r\nimport Tooltip from '../Tooltip/Tooltip'\r\nimport SVGLoader from '../SVGLoader/SVGLoader'\r\nimport { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'\r\nimport styles from '../MethodAccordion/MethodAccordion.module.scss'\r\nimport { useFormik } from 'formik'\r\nimport * as yup from 'yup'\r\n\r\nconst TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow, readOnly }) => {\r\n  const [text, setText] = useState('')\r\n  const [externalDesc, setExternalDesc] = useState('')\r\n  const [externalUrl, setExternalUrl] = useState('')\r\n  const [tooltipRef, setTooltipRef] = useState(null)\r\n  const [externalTooltipRefs, setExternalTooltipRefs] = useState(null)\r\n  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({\r\n    initialValues: {\r\n      name: '',\r\n      description: '',\r\n      externalDocs: {\r\n        url: '',\r\n        description: '',\r\n      },\r\n    },\r\n    validationSchema: yup.object().shape({\r\n      name: yup.string().required('Tag name is required'),\r\n      description: yup.string().optional(),\r\n      externalDocs: yup.object().optional(),\r\n    }),\r\n    onSubmit: (values) => {\r\n      setText('')\r\n      setExternalDesc('')\r\n      setExternalUrl('')\r\n      resetForm()\r\n      setIsFormOpen(false)\r\n      saveNewRow(values)\r\n    },\r\n  })\r\n  return (\r\n    <div className=\"tableSectionContainer\">\r\n      <div className=\"tableContainer\">\r\n        <table id={id || ''} className={`table borderRadiusTop borderRadiusBottom`}>\r\n          <thead className=\"tableHead\">\r\n            <tr>\r\n              {headCells?.map((headCell) => (\r\n                <th\r\n                  key={headCell.id}\r\n                  className={`tableHeadCell ${headCell.classes || ''}`}\r\n                  style={{ width: headCell.width, minWidth: headCell.minWidth }}\r\n                >\r\n                  <div\r\n                    className=\"headContainer\"\r\n                    data-id={`${\r\n                      typeof headCell.label === 'string'\r\n                        ? headCell.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g, '_')\r\n                        : 'UNKNOWN_LABEL'\r\n                    }_COLUMN`}\r\n                  >\r\n                    {headCell.label}\r\n                  </div>\r\n                </th>\r\n              ))}\r\n            </tr>\r\n          </thead>\r\n          <tbody className=\"tableBody\" data-id=\"TABLE_BODY\">\r\n            {data?.map((row, rowIndex) => {\r\n              return (\r\n                <tr key={rowIndex} data-i={rowIndex} className={`row`}>\r\n                  {headCells?.map((headCell) => {\r\n                    const cellContent = row[headCell.id] !== '_' && (\r\n                      <div\r\n                        data-id=\"TEXT_DESCRIPTION\"\r\n                        className=\"tableData\"\r\n                        style={{\r\n                          width: headCell.width,\r\n                          minWidth: headCell.minWidth,\r\n                        }}\r\n                      >\r\n                        {row[headCell.id]}\r\n                      </div>\r\n                    )\r\n\r\n                    return (\r\n                      <td\r\n                        key={headCell.id}\r\n                        style={{\r\n                          width: headCell.width,\r\n                          minWidth: headCell.minWidth,\r\n                        }}\r\n                      >\r\n                        {cellContent}\r\n                      </td>\r\n                    )\r\n                  })}\r\n                </tr>\r\n              )\r\n            })}\r\n            {isFormOpen ? (\r\n              <tr key={''} data-i={''} className={`row`}>\r\n                <td key={'tag name'}>\r\n                  <div data-id=\"TEXT_DESCRIPTION\" className=\"tableData\">\r\n                    <Input\r\n                      placeholder=\"Tag name\"\r\n                      size=\"large\"\r\n                      type=\"text\"\r\n                      onChange={(value) => {\r\n                        setFieldValue('name', value)\r\n                      }} // Pass the value directly\r\n                      value={values.name} // Bind value to the state\r\n                      disabled={readOnly}\r\n                    />\r\n                  </div>\r\n                </td>\r\n\r\n                <td key={'tagDescRequired'}>\r\n                  <div data-id=\"TEXT_DESCRIPTION\" className=\"tableData\">\r\n                    <div className={styles.paramDescContainer}>\r\n                      <Tooltip\r\n                        arrowWithBorder\r\n                        placement=\"bottom-end\"\r\n                        type=\"function\"\r\n                        trigger=\"click\"\r\n                        delay={[0, 0]}\r\n                        onCreate={(instance) => setTooltipRef(instance)}\r\n                        content={\r\n                          <div className={_styles.editDescTooltipContent}>\r\n                            <p className={_styles.editDescTooltipContent_header}>Description</p>\r\n                            <TextArea\r\n                              value={text || values.description}\r\n                              onChange={(value) => {\r\n                                setText(value)\r\n                              }}\r\n                              disabled={readOnly}\r\n                              placeholder=\"Describe Tag...\"\r\n                            />\r\n                            {!readOnly && (\r\n                              <Button\r\n                                className={_styles.editDescTooltipContent_btn}\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                onClick={() => {\r\n                                  setFieldValue('description', text)\r\n                                  tooltipRef?.hide()\r\n                                }}\r\n                              >\r\n                                Apply\r\n                              </Button>\r\n                            )}\r\n                          </div>\r\n                        }\r\n                      >\r\n                        <Button\r\n                          className={_styles.editDescBtn}\r\n                          style={{ paddingLeft: 0 }}\r\n                          variant=\"link\"\r\n                          color=\"action\"\r\n                          endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n                        >\r\n                          {readOnly ? 'View ' : 'Add '} Description\r\n                        </Button>\r\n                      </Tooltip>\r\n                    </div>{' '}\r\n                  </div>\r\n                </td>\r\n                <td key={'tagExternal'}>\r\n                  <div className=\"tableData\">\r\n                    <div className={_styles.paramDescContainer}>\r\n                      <Tooltip\r\n                        arrowWithBorder\r\n                        placement=\"bottom-end\"\r\n                        type=\"function\"\r\n                        trigger=\"click\"\r\n                        delay={[0, 0]}\r\n                        onCreate={(instance) => setExternalTooltipRefs(instance)}\r\n                        content={\r\n                          <div className={_styles.editDescTooltipContent}>\r\n                            <p className={_styles.editDescTooltipContent_header}>\r\n                              External Docs Description\r\n                            </p>\r\n                            <TextArea\r\n                              placeholder=\"Describe External Doc...\"\r\n                              value={externalDesc || values.externalDocs.description}\r\n                              disabled={readOnly}\r\n                              onChange={(value) => setExternalDesc(value)}\r\n                            />\r\n                            <p className={_styles.editDescTooltipContent_header}>\r\n                              External Docs Link\r\n                            </p>\r\n                            <TextArea\r\n                              placeholder=\"External Docs Link...\"\r\n                              value={externalUrl || values.externalDocs.url}\r\n                              disabled={readOnly}\r\n                              onChange={(value) => setExternalUrl(value)}\r\n                            />\r\n                            {!readOnly && (\r\n                              <Button\r\n                                className={_styles.editDescTooltipContent_btn}\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                onClick={() => {\r\n                                  setFieldValue(`externalDocs`, {\r\n                                    description: externalDesc,\r\n                                    url: externalUrl,\r\n                                  })\r\n                                  setExternalDesc('')\r\n                                  setExternalUrl('')\r\n                                  externalTooltipRefs?.hide()\r\n                                }}\r\n                              >\r\n                                Apply\r\n                              </Button>\r\n                            )}\r\n                          </div>\r\n                        }\r\n                      >\r\n                        {readOnly ? (\r\n                          <Button\r\n                            className={_styles.editDescBtn}\r\n                            variant=\"link\"\r\n                            color=\"action\"\r\n                            onClick={() => {\r\n                              const a = document.createElement('a')\r\n                              a.href = values.externalDocs?.url\r\n                              a.click()\r\n                            }}\r\n                          >\r\n                            {values?.externalDocs?.description\r\n                              ? values?.externalDocs?.description?.substring(0, 12)\r\n                              : '-'}\r\n                            {values?.externalDocs?.description &&\r\n                            values?.externalDocs?.description?.length > 12\r\n                              ? '...'\r\n                              : ''}\r\n                          </Button>\r\n                        ) : (\r\n                          <Button\r\n                            className={_styles.editDescBtn}\r\n                            variant=\"link\"\r\n                            color=\"action\"\r\n                            endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n                          >\r\n                            {readOnly ? 'View ' : 'Add '} External Docs Link\r\n                          </Button>\r\n                        )}\r\n                      </Tooltip>\r\n                      <div className={_styles.paramDescContainer_separator}></div>\r\n                      {!readOnly && (\r\n                        <Button\r\n                          className={_styles.deleteParamBtn}\r\n                          variant=\"link\"\r\n                          color=\"error\"\r\n                          endIcon={\r\n                            <SVGLoader src={DeleteIcon} width=\"1.125rem\" height=\"1.125rem\" />\r\n                          }\r\n                          onClick={() => {\r\n                            resetForm()\r\n                            setText('')\r\n                            setIsFormOpen(false)\r\n                          }} // Correctly delete the new row\r\n                        />\r\n                      )}\r\n\r\n                      {!readOnly && (\r\n                        <Button\r\n                          className={_styles.deleteParamBtn}\r\n                          variant=\"link\"\r\n                          color=\"success\"\r\n                          disabled={!isValid}\r\n                          endIcon={<SVGLoader src={AddRow} width=\"0.125rem\" height=\"0.125rem\" />}\r\n                          onClick={() => {\r\n                            setText('')\r\n                            submitForm()\r\n                          }} // Save the new row when clicked\r\n                        />\r\n                      )}\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            ) : (\r\n              <>\r\n                {!readOnly && (\r\n                  <tr key={'addNew'} data-i={'addNew'} className={`row`}>\r\n                    <td colSpan={5}>\r\n                      <Button\r\n                        variant=\"link\"\r\n                        color=\"primary\"\r\n                        onClick={() => {\r\n                          setIsFormOpen((prev) => !prev)\r\n                        }}\r\n                      >\r\n                        + Add Tag\r\n                      </Button>\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n              </>\r\n            )}\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default TagsTable\r\n"],"names":["TagsTable","id","headCells","data","isFormOpen","setIsFormOpen","saveNewRow","readOnly","text","setText","useState","externalDesc","setExternalDesc","externalUrl","setExternalUrl","tooltipRef","setTooltipRef","externalTooltipRefs","setExternalTooltipRefs","values","errors","setFieldValue","isValid","submitForm","resetForm","useFormik","initialValues","name","description","externalDocs","url","validationSchema","yup.object","shape","yup.string","required","optional","onSubmit","_jsx","className","_jsxs","jsxs","children","map","headCell","classes","style","width","minWidth","jsx","label","toUpperCase","replace","row","rowIndex","cellContent","Input","placeholder","size","type","onChange","value","disabled","styles","paramDescContainer","Tooltip","arrowWithBorder","placement","trigger","delay","onCreate","instance","content","_styles","editDescTooltipContent","editDescTooltipContent_header","TextArea","Button","editDescTooltipContent_btn","variant","onClick","hide","editDescBtn","paddingLeft","color","endIcon","SVGLoader","src","EditIcon","height","a","document","createElement","href","_a","click","_c","_b","substring","_d","_f","_e","length","paramDescContainer_separator","deleteParamBtn","DeleteIcon","AddRow","_Fragment","Fragment","colSpan","prev"],"mappings":"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"}
+{"version":3,"file":"tags-table.js","sources":["../../../../src/components/table/tags-table.tsx"],"sourcesContent":["import { useState } from 'react'\r\nimport './style.scss'\r\nimport _styles from '../InfoForm/InfoForm.module.scss'\r\nimport { Button, Input, TextArea } from 'digitinary-ui'\r\nimport Tooltip from '../Tooltip/Tooltip'\r\nimport SVGLoader from '../SVGLoader/SVGLoader'\r\nimport { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'\r\nimport styles from '../MethodAccordion/MethodAccordion.module.scss'\r\nimport { useFormik } from 'formik'\r\nimport * as yup from 'yup'\r\n\r\nconst TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow, readOnly }) => {\r\n  const [text, setText] = useState('')\r\n  const [externalDesc, setExternalDesc] = useState('')\r\n  const [externalUrl, setExternalUrl] = useState('')\r\n  const [tooltipRef, setTooltipRef] = useState(null)\r\n  const [externalTooltipRefs, setExternalTooltipRefs] = useState(null)\r\n  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({\r\n    initialValues: {\r\n      name: '',\r\n      description: '',\r\n      externalDocs: {\r\n        url: '',\r\n        description: '',\r\n      },\r\n    },\r\n    validationSchema: yup.object().shape({\r\n      name: yup.string().required('Tag name is required'),\r\n      description: yup.string().optional(),\r\n      externalDocs: yup.object().optional(),\r\n    }),\r\n    onSubmit: (values) => {\r\n      setText('')\r\n      setExternalDesc('')\r\n      setExternalUrl('')\r\n      resetForm()\r\n      setIsFormOpen(false)\r\n      saveNewRow(values)\r\n    },\r\n  })\r\n  return (\r\n    <div className=\"tableSectionContainer\">\r\n      <div className=\"tableContainer\">\r\n        <table id={id || ''} className={`table borderRadiusTop borderRadiusBottom`}>\r\n          <thead className=\"tableHead\">\r\n            <tr>\r\n              {headCells?.map((headCell) => (\r\n                <th\r\n                  key={headCell.id}\r\n                  className={`tableHeadCell ${headCell.classes || ''}`}\r\n                  style={{ width: headCell.width, minWidth: headCell.minWidth }}\r\n                >\r\n                  <div\r\n                    className=\"headContainer\"\r\n                    data-id={`${\r\n                      typeof headCell.label === 'string'\r\n                        ? headCell.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g, '_')\r\n                        : 'UNKNOWN_LABEL'\r\n                    }_COLUMN`}\r\n                  >\r\n                    {headCell.label}\r\n                  </div>\r\n                </th>\r\n              ))}\r\n            </tr>\r\n          </thead>\r\n          <tbody className=\"tableBody\" data-id=\"TABLE_BODY\">\r\n            {data?.map((row, rowIndex) => {\r\n              return (\r\n                <tr key={rowIndex} data-i={rowIndex} className={`row`}>\r\n                  {headCells?.map((headCell) => {\r\n                    const cellContent = row[headCell.id] !== '_' && (\r\n                      <div\r\n                        data-id=\"TEXT_DESCRIPTION\"\r\n                        className=\"tableData\"\r\n                        style={{\r\n                          width: headCell.width,\r\n                          minWidth: headCell.minWidth,\r\n                        }}\r\n                      >\r\n                        {row[headCell.id]}\r\n                      </div>\r\n                    )\r\n\r\n                    return (\r\n                      <td\r\n                        key={headCell.id}\r\n                        style={{\r\n                          width: headCell.width,\r\n                          minWidth: headCell.minWidth,\r\n                        }}\r\n                      >\r\n                        {cellContent}\r\n                      </td>\r\n                    )\r\n                  })}\r\n                </tr>\r\n              )\r\n            })}\r\n            {isFormOpen ? (\r\n              <tr key={''} data-i={''} className={`row`}>\r\n                <td key={'tag name'}>\r\n                  <div data-id=\"TEXT_DESCRIPTION\" className=\"tableData\">\r\n                    <Input\r\n                      placeholder=\"Tag name\"\r\n                      size=\"large\"\r\n                      type=\"text\"\r\n                      onChange={(value) => {\r\n                        setFieldValue('name', value)\r\n                      }} // Pass the value directly\r\n                      value={values.name} // Bind value to the state\r\n                      disabled={readOnly}\r\n                    />\r\n                  </div>\r\n                </td>\r\n\r\n                <td key={'tagDescRequired'}>\r\n                  <div data-id=\"TEXT_DESCRIPTION\" className=\"tableData\">\r\n                    <div className={styles.paramDescContainer}>\r\n                      <Tooltip\r\n                        arrowWithBorder\r\n                        placement=\"bottom-end\"\r\n                        type=\"function\"\r\n                        trigger=\"click\"\r\n                        delay={[0, 0]}\r\n                        onCreate={(instance) => setTooltipRef(instance)}\r\n                        content={\r\n                          <div className={_styles.editDescTooltipContent}>\r\n                            <p className={_styles.editDescTooltipContent_header}>Description</p>\r\n                            <TextArea\r\n                              value={text || values.description}\r\n                              onChange={(value) => {\r\n                                setText(value)\r\n                              }}\r\n                              disabled={readOnly}\r\n                              placeholder=\"Describe Tag...\"\r\n                            />\r\n                            {!readOnly && (\r\n                              <Button\r\n                                className={_styles.editDescTooltipContent_btn}\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                onClick={() => {\r\n                                  setFieldValue('description', text)\r\n                                  tooltipRef?.hide()\r\n                                }}\r\n                              >\r\n                                Apply\r\n                              </Button>\r\n                            )}\r\n                          </div>\r\n                        }\r\n                      >\r\n                        <Button\r\n                          className={_styles.editDescBtn}\r\n                          style={{ paddingLeft: 0 }}\r\n                          variant=\"link\"\r\n                          color=\"action\"\r\n                          endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n                        >\r\n                          {readOnly ? 'View ' : 'Add '} Description\r\n                        </Button>\r\n                      </Tooltip>\r\n                    </div>{' '}\r\n                  </div>\r\n                </td>\r\n                <td key={'tagExternal'}>\r\n                  <div className=\"tableData\">\r\n                    <div className={_styles.paramDescContainer}>\r\n                      <Tooltip\r\n                        arrowWithBorder\r\n                        placement=\"bottom-end\"\r\n                        type=\"function\"\r\n                        trigger=\"click\"\r\n                        delay={[0, 0]}\r\n                        onCreate={(instance) => setExternalTooltipRefs(instance)}\r\n                        content={\r\n                          <div className={_styles.editDescTooltipContent}>\r\n                            <p className={_styles.editDescTooltipContent_header}>\r\n                              External Docs Description\r\n                            </p>\r\n                            <TextArea\r\n                              placeholder=\"Describe External Doc...\"\r\n                              value={externalDesc || values.externalDocs.description}\r\n                              disabled={readOnly}\r\n                              onChange={(value) => setExternalDesc(value)}\r\n                            />\r\n                            <p className={_styles.editDescTooltipContent_header}>\r\n                              External Docs Link\r\n                            </p>\r\n                            <TextArea\r\n                              placeholder=\"External Docs Link...\"\r\n                              value={externalUrl || values.externalDocs.url}\r\n                              disabled={readOnly}\r\n                              onChange={(value) => setExternalUrl(value)}\r\n                            />\r\n                            {!readOnly && (\r\n                              <Button\r\n                                className={_styles.editDescTooltipContent_btn}\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                onClick={() => {\r\n                                  setFieldValue(`externalDocs`, {\r\n                                    description: externalDesc,\r\n                                    url: externalUrl,\r\n                                  })\r\n                                  setExternalDesc('')\r\n                                  setExternalUrl('')\r\n                                  externalTooltipRefs?.hide()\r\n                                }}\r\n                              >\r\n                                Apply\r\n                              </Button>\r\n                            )}\r\n                          </div>\r\n                        }\r\n                      >\r\n                        {readOnly ? (\r\n                          <Button\r\n                            className={_styles.editDescBtn}\r\n                            variant=\"link\"\r\n                            color=\"action\"\r\n                            onClick={() => {\r\n                              const a = document.createElement('a')\r\n                              a.href = values.externalDocs?.url\r\n                              a.target = '_blank'\r\n                              a.click()\r\n                            }}\r\n                          >\r\n                            {values?.externalDocs?.description\r\n                              ? values?.externalDocs?.description?.substring(0, 12)\r\n                              : '-'}\r\n                            {values?.externalDocs?.description &&\r\n                            values?.externalDocs?.description?.length > 12\r\n                              ? '...'\r\n                              : ''}\r\n                          </Button>\r\n                        ) : (\r\n                          <Button\r\n                            className={_styles.editDescBtn}\r\n                            variant=\"link\"\r\n                            color=\"action\"\r\n                            endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n                          >\r\n                            {readOnly ? 'View ' : 'Add '} External Docs Link\r\n                          </Button>\r\n                        )}\r\n                      </Tooltip>\r\n                      <div className={_styles.paramDescContainer_separator}></div>\r\n                      {!readOnly && (\r\n                        <Button\r\n                          className={_styles.deleteParamBtn}\r\n                          variant=\"link\"\r\n                          color=\"error\"\r\n                          endIcon={\r\n                            <SVGLoader src={DeleteIcon} width=\"1.125rem\" height=\"1.125rem\" />\r\n                          }\r\n                          onClick={() => {\r\n                            resetForm()\r\n                            setText('')\r\n                            setIsFormOpen(false)\r\n                          }} // Correctly delete the new row\r\n                        />\r\n                      )}\r\n\r\n                      {!readOnly && (\r\n                        <Button\r\n                          className={_styles.deleteParamBtn}\r\n                          variant=\"link\"\r\n                          color=\"success\"\r\n                          disabled={!isValid}\r\n                          endIcon={<SVGLoader src={AddRow} width=\"0.125rem\" height=\"0.125rem\" />}\r\n                          onClick={() => {\r\n                            setText('')\r\n                            submitForm()\r\n                          }} // Save the new row when clicked\r\n                        />\r\n                      )}\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            ) : (\r\n              <>\r\n                {!readOnly && (\r\n                  <tr key={'addNew'} data-i={'addNew'} className={`row`}>\r\n                    <td colSpan={5}>\r\n                      <Button\r\n                        variant=\"link\"\r\n                        color=\"primary\"\r\n                        onClick={() => {\r\n                          setIsFormOpen((prev) => !prev)\r\n                        }}\r\n                      >\r\n                        + Add Tag\r\n                      </Button>\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n              </>\r\n            )}\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default TagsTable\r\n"],"names":["TagsTable","id","headCells","data","isFormOpen","setIsFormOpen","saveNewRow","readOnly","text","setText","useState","externalDesc","setExternalDesc","externalUrl","setExternalUrl","tooltipRef","setTooltipRef","externalTooltipRefs","setExternalTooltipRefs","values","errors","setFieldValue","isValid","submitForm","resetForm","useFormik","initialValues","name","description","externalDocs","url","validationSchema","yup.object","shape","yup.string","required","optional","onSubmit","_jsx","className","_jsxs","jsxs","children","map","headCell","classes","style","width","minWidth","jsx","label","toUpperCase","replace","row","rowIndex","cellContent","Input","placeholder","size","type","onChange","value","disabled","styles","paramDescContainer","Tooltip","arrowWithBorder","placement","trigger","delay","onCreate","instance","content","_styles","editDescTooltipContent","editDescTooltipContent_header","TextArea","Button","editDescTooltipContent_btn","variant","onClick","hide","editDescBtn","paddingLeft","color","endIcon","SVGLoader","src","EditIcon","height","a","document","createElement","href","_a","target","click","_c","_b","substring","_d","_f","_e","length","paramDescContainer_separator","deleteParamBtn","DeleteIcon","AddRow","_Fragment","Fragment","colSpan","prev"],"mappings":"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"}

package/dist/styles.css

@@ -1,4 +1,117 @@
-.methodAccordion {
+.containerTitleDrawer {
+  height: 64px;
+  min-height: 64px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f1f2f6;
+  padding: 0 30px 0 30px;
+  width: 100%;
+}
+.containerTitleDrawer span {
+  color: #12131a;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  letter-spacing: 0em;
+}
+.containerTitleDrawer svg path {
+  stroke: #000 !important;
+}
+.containerTitleDrawer .closeIcon {
+  cursor: pointer;
+}.tooltip-custom-wrapper {
+  display: flex;
+}
+
+.tippy-box {
+  background-color: #202f5b;
+  font-size: 0.875rem;
+  border-radius: 0.3125rem;
+  width: max-content;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  position: relative;
+  border: 1px solid #d8dae5;
+}
+.tippy-box.function .tippy-content {
+  background-color: #fff !important;
+  color: #000 !important;
+}
+.tippy-box[data-placement] > .tippy-arrow:before {
+  color: #fff !important;
+}
+.tippy-box.info .tippy-arrow {
+  color: #202f5b;
+}
+.tippy-box.success {
+  border-radius: 1.875rem;
+  background-color: #3aaa35;
+  padding-inline: 0.625rem;
+}
+.tippy-box .tippy-content {
+  text-align: justify;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding: 0.625rem;
+}
+.tippy-box .tippy-arrow {
+  position: relative;
+  width: 1rem;
+  height: 1rem;
+}
+.tippy-box[data-placement^=top] .tippy-arrow:before {
+  bottom: -0.4375rem;
+  border-width: 0.5rem 0.5rem 0 !important;
+}
+.tippy-box[data-placement^=right] .tippy-arrow:before {
+  left: -0.4375rem;
+  border-width: 0.5rem 0.5rem 0.5rem 0 !important;
+}
+.tippy-box[data-placement^=bottom] .tippy-arrow:before {
+  top: -0.4375rem;
+  border-width: 0 0.5rem 0.5rem !important;
+}
+.tippy-box[data-placement^=left] .tippy-arrow:before {
+  right: -0.4375rem;
+  border-width: 0.5rem 0 0.5rem 0.5rem !important;
+}
+.tippy-box[data-placement^=bottom-start] .tippy-arrow {
+  transform: translate(0.937rem, 0) !important;
+}
+.tippy-box[data-placement^=bottom-end] .tippy-arrow {
+  margin-left: calc(100% - 1.937rem);
+  transform: translate(0, 0) !important;
+}
+.tippy-box[data-placement^=top-start] .tippy-arrow {
+  transform: translate(0.937rem, 0) !important;
+}
+.tippy-box[data-placement^=top-end] .tippy-arrow {
+  transform: translate(0.937rem, 0) !important;
+}
+.tippy-box.arrow-with-border {
+  border: 1px solid #d8dae5;
+}
+.tippy-box.arrow-with-border[data-placement] .tippy-arrow {
+  top: 1px;
+  background-color: white;
+  z-index: 9999;
+  height: 1px;
+}
+.tippy-box.arrow-with-border[data-placement] .tippy-arrow:before {
+  width: 1rem;
+  height: 1rem;
+  background-color: white;
+  transform: rotate(45deg);
+  border: none;
+  border-left: 1px solid #d8dae5 !important;
+  border-top: 1px solid #d8dae5 !important;
+  z-index: 20000000000;
+  top: -0.6rem;
+  transform-origin: center !important;
+}.methodAccordion {
   border: none !important;
   box-shadow: none !important;
   margin-bottom: 0 !important;
@@ -262,121 +375,6 @@
 }
 .methodAccordion.readOnly .methodSummaryContainer .methodExpandArrowContainer {
   background-color: #ebecf2;
-}p.apiName {
-  font-size: 40px;
-  line-height: 30px;
-  font-weight: 500;
-}.json-editor-container {
-  overflow: hidden;
-  border-bottom-right-radius: 0.3125rem;
-  border-bottom-left-radius: 0.3125rem;
-}
-.json-editor-container .json-editor-label {
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.25rem;
-  margin-bottom: 0.3125rem;
-}
-.json-editor-container .json-editor {
-  display: flex;
-  flex-direction: column;
-  background-color: #142452;
-  width: 100%;
-  outline: 1px solid transparent;
-  position: relative;
-  overflow: hidden;
-}
-.json-editor-container .json-editor .actions-container {
-  width: 100%;
-  height: 5rem;
-  padding: 1.25rem;
-  border-radius: 0 0 0.3125rem 0.3125rem;
-  background: #101e47;
-  display: flex;
-  flex-direction: row;
-  gap: 1.25rem;
-  align-items: center;
-}
-.json-editor-container .json-editor .actions-container .validate {
-  color: #fff;
-  text-align: center;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 1.25rem;
-  width: 8.75rem;
-  padding: 0.625rem 2.25rem;
-  background-color: rgba(240, 248, 255, 0);
-  border-radius: 0.3125rem;
-  border: 0.0625rem solid #4d75d8;
-  cursor: pointer;
-}
-.json-editor-container .json-editor .actions-container .validate:disabled {
-  color: #babdcc;
-  border-color: #a2a5b6;
-}
-.json-editor-container .json-editor .actions-container .beautify {
-  color: #fff;
-  text-align: center;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 1.25rem;
-  width: 8.75rem;
-  padding: 0.625rem 2.25rem;
-  background-color: rgba(240, 248, 255, 0);
-  border-radius: 0.3125rem;
-  border: 1px solid #babdcc;
-  cursor: pointer;
-}
-.json-editor-container .json-editor .actions-container .beautify:disabled {
-  color: #a2a5b6;
-  border-color: #a2a5b6;
-}
-.json-editor-container .json-editor textarea {
-  width: 100%;
-  padding: 1.25rem;
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.25rem;
-  color: white;
-  height: 25rem;
-  background-color: #142452;
-  border: none;
-  resize: none;
-}
-.json-editor-container .json-editor textarea:focus, .json-editor-container .json-editor textarea:focus-within, .json-editor-container .json-editor textarea:focus-visible .json-editor-container .json-editor textarea:active {
-  outline: none;
-  border: none;
-}
-.json-editor-container .json-editor textarea::-webkit-scrollbar {
-  width: 0.5rem;
-}
-.json-editor-container .json-editor textarea::-webkit-scrollbar-track {
-  background-color: #828699;
-  border: none;
-  border-color: transparent;
-  border-top-left-radius: 0;
-}
-.json-editor-container .json-editor textarea::-webkit-scrollbar-thumb {
-  background-color: #d8dae5;
-  border: none;
-  border-color: transparent;
-  border-radius: 0;
-}
-.json-editor-container .json-editor.invalid {
-  outline: 1px solid #ce2828 !important;
-}
-.json-editor-container .error-message {
-  color: #ce2828;
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-  margin-top: 0.625rem;
-}
-.json-editor-container.disabled .json-editor textarea {
-  background-color: white;
-  color: #12131a;
 }.apiInfoForm {
   display: grid;
   padding: 1.25rem 1.875rem;
@@ -467,29 +465,6 @@
   content: "*";
   color: red;
   transform: translateX(0.125rem);
-}.containerTitleDrawer {
-  height: 64px;
-  min-height: 64px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #f1f2f6;
-  padding: 0 30px 0 30px;
-  width: 100%;
-}
-.containerTitleDrawer span {
-  color: #12131a;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 25px;
-  letter-spacing: 0em;
-}
-.containerTitleDrawer svg path {
-  stroke: #000 !important;
-}
-.containerTitleDrawer .closeIcon {
-  cursor: pointer;
 }:root {
   --white: #fff;
   --Gray-5: #f1f2f6;
@@ -719,121 +694,10 @@
 .tableSectionContainer .descArrow path,
 .tableSectionContainer .defaultSortArrow path {
   fill: var(--Gray-50);
-}.chips-container {
-  width: 100%;
-}
-.chips-container .overflow-dropdown-div {
-  max-height: 4.25rem;
-  overflow: hidden;
-}
-.chips-container .overflow-dropdown-div .dropdown-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.625rem;
-  margin-top: 0.625rem;
-}
-.chips-container .overflow-dropdown-div .dropdown-list .chip {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #ebecf2;
-  border-radius: 3.125rem;
-  width: max-content;
-  height: 1.5rem;
-  overflow: hidden;
-  transition: all 0.4s ease-in-out;
-  padding-right: 0.9375rem;
-  cursor: default;
-}
-.chips-container .overflow-dropdown-div .dropdown-list .chip:not(.disabled):hover {
-  background: #d8dae5;
-}
-.chips-container .overflow-dropdown-div .dropdown-list .chip:not(.disabled):active {
-  background: #696c80;
-  color: #fff;
-}
-.chips-container .overflow-dropdown-div .dropdown-list .chip:not(.disabled):active .chip-close-icon path {
-  stroke: #fff;
-}
-.chips-container .overflow-dropdown-div .dropdown-list .chip:not(.disabled) .chip-close-icon {
-  cursor: pointer;
-}
-.chips-container .overflow-dropdown-div .dropdown-list .chip.clickable {
-  cursor: pointer;
-}
-.chips-container .overflow-dropdown-div .dropdown-list .chip .chip-text {
-  display: flex;
-  align-items: center;
-  font-size: 0.95rem;
-  height: 100%;
-  padding-left: 0.9375rem;
-  margin-top: -0.125rem;
-}
-.chips-container .overflow-dropdown-div .dropdown-list .chip .chip-close-icon {
-  display: block;
-  height: 0.75rem;
-  width: 0.75rem;
-  margin-block: auto;
-  margin-left: 0.625rem;
-}
-.chips-container .overflow-dropdown-div .dropdown-list .chip .chip-close-icon path {
-  stroke: #12131a;
-}
-.chips-container .dropdown-max-height {
-  max-height: -moz-fit-content;
-  max-height: fit-content !important;
-}
-.chips-container .dropdown-overflow {
-  overflow: visible !important;
-}
-.chips-container .show-btn {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-  width: auto;
-  height: 1.25rem;
-  cursor: pointer;
-  border: none;
-  margin-top: 0.625rem;
-  color: #9a9eb2;
-  background-color: transparent;
-}
-.chips-container .show-btn .show-btn-text-container {
-  flex: 1 1 auto;
-}
-.chips-container .show-btn .show-btn-text-container .show-btn-text {
-  font-size: 0.75rem;
-  text-decoration-line: underline;
-}
-.chips-container .show-btn .show-btn-icon-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 1.25rem;
-  width: 1.25rem;
-  margin-top: 0.1875rem;
-  margin-left: 0.125rem;
-}
-.chips-container .show-btn .show-btn-icon-container .show-btn-icon {
-  height: 1.25rem;
-  width: 1.25rem;
-}
-.chips-container .show-btn .show-btn-icon-container .show-btn-icon path {
-  fill: #9a9eb2;
-}
-.chips-container .show-btn:hover {
-  color: #7c9bea;
-}
-.chips-container .show-btn:hover .show-btn-icon-container .show-btn-icon path {
-  fill: #7c9bea;
-}
-.chips-container .show-btn:active {
-  color: #2c4fa4;
-}
-.chips-container .show-btn:active .show-btn-icon-container .show-btn-icon path {
-  fill: #2c4fa4;
+}p.apiName {
+  font-size: 40px;
+  line-height: 30px;
+  font-weight: 500;
 }#common-dialog.dialog-content-wrapper {
   overflow: visible !important;
   max-height: 100%;
@@ -1016,94 +880,115 @@
 }
 .drawerItemContainer .color-red {
   color: var(--color-error);
-}.tooltip-custom-wrapper {
-  display: flex;
+}.json-editor-container {
+  overflow: hidden;
+  border-bottom-right-radius: 0.3125rem;
+  border-bottom-left-radius: 0.3125rem;
 }
-
-.tippy-box {
-  background-color: #202f5b;
+.json-editor-container .json-editor-label {
   font-size: 0.875rem;
-  border-radius: 0.3125rem;
-  width: max-content;
-  max-width: 100%;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  position: relative;
-  border: 1px solid #d8dae5;
-}
-.tippy-box.function .tippy-content {
-  background-color: #fff !important;
-  color: #000 !important;
-}
-.tippy-box[data-placement] > .tippy-arrow:before {
-  color: #fff !important;
+  font-weight: 600;
+  line-height: 1.25rem;
+  margin-bottom: 0.3125rem;
 }
-.tippy-box.info .tippy-arrow {
-  color: #202f5b;
+.json-editor-container .json-editor {
+  display: flex;
+  flex-direction: column;
+  background-color: #142452;
+  width: 100%;
+  outline: 1px solid transparent;
+  position: relative;
+  overflow: hidden;
 }
-.tippy-box.success {
-  border-radius: 1.875rem;
-  background-color: #3aaa35;
-  padding-inline: 0.625rem;
+.json-editor-container .json-editor .actions-container {
+  width: 100%;
+  height: 5rem;
+  padding: 1.25rem;
+  border-radius: 0 0 0.3125rem 0.3125rem;
+  background: #101e47;
+  display: flex;
+  flex-direction: row;
+  gap: 1.25rem;
+  align-items: center;
 }
-.tippy-box .tippy-content {
-  text-align: justify;
-  font-size: 0.875rem;
+.json-editor-container .json-editor .actions-container .validate {
+  color: #fff;
+  text-align: center;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
   line-height: 1.25rem;
-  padding: 0.625rem;
-}
-.tippy-box .tippy-arrow {
-  position: relative;
-  width: 1rem;
-  height: 1rem;
+  width: 8.75rem;
+  padding: 0.625rem 2.25rem;
+  background-color: rgba(240, 248, 255, 0);
+  border-radius: 0.3125rem;
+  border: 0.0625rem solid #4d75d8;
+  cursor: pointer;
 }
-.tippy-box[data-placement^=top] .tippy-arrow:before {
-  bottom: -0.4375rem;
-  border-width: 0.5rem 0.5rem 0 !important;
+.json-editor-container .json-editor .actions-container .validate:disabled {
+  color: #babdcc;
+  border-color: #a2a5b6;
 }
-.tippy-box[data-placement^=right] .tippy-arrow:before {
-  left: -0.4375rem;
-  border-width: 0.5rem 0.5rem 0.5rem 0 !important;
+.json-editor-container .json-editor .actions-container .beautify {
+  color: #fff;
+  text-align: center;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.25rem;
+  width: 8.75rem;
+  padding: 0.625rem 2.25rem;
+  background-color: rgba(240, 248, 255, 0);
+  border-radius: 0.3125rem;
+  border: 1px solid #babdcc;
+  cursor: pointer;
 }
-.tippy-box[data-placement^=bottom] .tippy-arrow:before {
-  top: -0.4375rem;
-  border-width: 0 0.5rem 0.5rem !important;
+.json-editor-container .json-editor .actions-container .beautify:disabled {
+  color: #a2a5b6;
+  border-color: #a2a5b6;
 }
-.tippy-box[data-placement^=left] .tippy-arrow:before {
-  right: -0.4375rem;
-  border-width: 0.5rem 0 0.5rem 0.5rem !important;
+.json-editor-container .json-editor textarea {
+  width: 100%;
+  padding: 1.25rem;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: white;
+  height: 25rem;
+  background-color: #142452;
+  border: none;
+  resize: none;
 }
-.tippy-box[data-placement^=bottom-start] .tippy-arrow {
-  transform: translate(0.937rem, 0) !important;
+.json-editor-container .json-editor textarea:focus, .json-editor-container .json-editor textarea:focus-within, .json-editor-container .json-editor textarea:focus-visible .json-editor-container .json-editor textarea:active {
+  outline: none;
+  border: none;
 }
-.tippy-box[data-placement^=bottom-end] .tippy-arrow {
-  margin-left: calc(100% - 1.937rem);
-  transform: translate(0, 0) !important;
+.json-editor-container .json-editor textarea::-webkit-scrollbar {
+  width: 0.5rem;
 }
-.tippy-box[data-placement^=top-start] .tippy-arrow {
-  transform: translate(0.937rem, 0) !important;
+.json-editor-container .json-editor textarea::-webkit-scrollbar-track {
+  background-color: #828699;
+  border: none;
+  border-color: transparent;
+  border-top-left-radius: 0;
 }
-.tippy-box[data-placement^=top-end] .tippy-arrow {
-  transform: translate(0.937rem, 0) !important;
+.json-editor-container .json-editor textarea::-webkit-scrollbar-thumb {
+  background-color: #d8dae5;
+  border: none;
+  border-color: transparent;
+  border-radius: 0;
 }
-.tippy-box.arrow-with-border {
-  border: 1px solid #d8dae5;
+.json-editor-container .json-editor.invalid {
+  outline: 1px solid #ce2828 !important;
 }
-.tippy-box.arrow-with-border[data-placement] .tippy-arrow {
-  top: 1px;
-  background-color: white;
-  z-index: 9999;
-  height: 1px;
+.json-editor-container .error-message {
+  color: #ce2828;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  margin-top: 0.625rem;
 }
-.tippy-box.arrow-with-border[data-placement] .tippy-arrow:before {
-  width: 1rem;
-  height: 1rem;
+.json-editor-container.disabled .json-editor textarea {
   background-color: white;
-  transform: rotate(45deg);
-  border: none;
-  border-left: 1px solid #d8dae5 !important;
-  border-top: 1px solid #d8dae5 !important;
-  z-index: 20000000000;
-  top: -0.6rem;
-  transform-origin: center !important;
+  color: #12131a;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/InfoForm/InfoForm.tsx

@@ -16,6 +16,8 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
   const [tableData, setTableData] = useState([])
   const [tableRecords, setTableRecords] = useState()
   const [authType, setAuthType] = useState('')
+  const [description, setDescription] = useState('')
+  const [url, setURL] = useState('')
   const { values, setFieldValue, errors } = useFormikContext<TransformedOpenApi>()
   const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})
   const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
@@ -163,22 +165,24 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                   placeholder="Describe External Doc..."
                   value={item.externalDocs?.description}
                   disabled={readOnly}
-                  onChange={(value) =>
+                  onChange={(value) => {
                     onTableChange(
                       'externalDocs',
                       { ...item.externalDocs, description: value },
                       index
                     )
-                  }
+                    setDescription(value)
+                  }}
                 />
                 <p className={styles.editDescTooltipContent_header}>External Docs Link</p>
                 <TextArea
                   placeholder="External Docs Link..."
                   value={item.externalDocs?.url}
                   disabled={readOnly}
-                  onChange={(value) =>
+                  onChange={(value) => {
                     onTableChange('externalDocs', { ...item.externalDocs, url: value }, index)
-                  }
+                    setURL(value)
+                  }}
                 />
                 {!readOnly && (
                   <Button
@@ -187,10 +191,11 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                     size="small"
                     onClick={() => {
                       setFieldValue(`tags[${index}].externalDocs`, {
-                        description: item.externalDocDesc,
-                        url: item.externalDocLink,
+                        description: description,
+                        url: url,
                       })
-                      console.log({ tags: values.tags })
+                      setDescription('')
+                      setURL('')
                       externalTooltipRefs[index]?.hide()
                     }}
                   >

package/src/components/LivePreview/LivePreview.tsx

@@ -1,17 +1,25 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './LivePreview.module.scss'
 import SimpleLabelValue from '../../components/SimpleLabelValue'
-import Chips from '../../components/Chips/Chips'
+
 import MethodsAccordion from '../../components/MethodAccordion/MethodAccordion'
 import { TransformedOpenApi } from '../../types/transformedOpenApi'
 import { useFormikContext } from 'formik'
-import { methodColorMapping } from '../../constants/index'
+import { methodColorMapping, tagsTableHeaders } from '../../constants/index'
+import TagsTable from '../table/tags-table'
+import { Button, TextArea } from 'digitinary-ui'
+import Tooltip from '../../components/Tooltip/Tooltip'
+import { DeleteIcon, deleteOutlinedIcon, EditIcon } from '../../assets/icons'
 
 interface LivePreviewProps {
   transformedData?: TransformedOpenApi
 }
 
 const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
+  const [tableRecords, setTableRecords] = useState()
+  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
+  const [tableData, setTableData] = useState([])
+  const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})
   const { values } = useFormikContext<TransformedOpenApi>()
   const { info, components, tags } = values
   const { securitySchemes } = components
@@ -19,6 +27,118 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
     securitySchemes && typeof securitySchemes == 'object' && Object.keys(securitySchemes).length
       ? Object.keys(securitySchemes)[0]
       : null
+
+  useEffect(() => {
+    console.log({updated: values.tags})
+    if (values.tags && values.tags.length) {
+      setTableRecords(generateTableData(values.tags, true))
+      setTableData(values.tags)
+    }
+  }, [values.tags])
+
+  const generateTableData = (items, readOnly) => {
+    return items.map((item, index) => ({
+      id: index,
+      tagName: item.name,
+      description: (
+        <div className={styles.paramDescContainer}>
+          <Tooltip
+            arrowWithBorder
+            placement="bottom-end"
+            type="function"
+            trigger="click"
+            delay={[0, 0]}
+            onCreate={(instance) =>
+              setTooltipRefs((prev) => ({
+                ...prev,
+                [index]: instance,
+              }))
+            }
+            content={
+              <div className={styles.editDescTooltipContent}>
+                <p className={styles.editDescTooltipContent_header}>Description</p>
+                <TextArea
+                  placeholder="Describe parameter..."
+                  value={item.description}
+                  disabled={readOnly}
+                  onChange={(value) => null}
+                />
+              </div>
+            }
+          >
+            <Button className={styles.editDescBtn} variant="link" color="action">
+              {item.description ? item.description.substring(0, 12) : '-'}
+              {item.description && item.description.length > 12 ? '...' : ''}
+            </Button>
+          </Tooltip>
+        </div>
+      ),
+      externalDocs: (
+        <div className={styles.paramDescContainer}>
+          <Tooltip
+            arrowWithBorder
+            placement="bottom-end"
+            type="function"
+            trigger="click"
+            delay={[0, 0]}
+            onCreate={(instance) =>
+              setExternalTooltipRefs((prev) => ({
+                ...prev,
+                [index]: instance,
+              }))
+            }
+            content={
+              <div className={styles.editDescTooltipContent}>
+                <p className={styles.editDescTooltipContent_header}>External Docs Description</p>
+                <TextArea
+                  placeholder="Describe External Doc..."
+                  value={item.externalDocs?.description}
+                  disabled={readOnly}
+                  onChange={(value) => null}
+                />
+                <p className={styles.editDescTooltipContent_header}>External Docs Link</p>
+                <TextArea
+                  placeholder="External Docs Link..."
+                  value={item.externalDocs?.url}
+                  disabled={readOnly}
+                  onChange={(value) => null}
+                />
+              </div>
+            }
+          >
+            <Button
+              className={styles.editDescBtn}
+              variant="link"
+              color="action"
+              onClick={() => {
+                const a = document.createElement('a')
+                a.href = item.externalDocs?.url
+                a.click()
+              }}
+            >
+              {item?.externalDocs?.description
+                ? item?.externalDocs?.description?.substring(0, 12)
+                : '-'}
+              {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12
+                ? '...'
+                : ''}
+            </Button>
+          </Tooltip>
+
+          {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
+
+          {!readOnly && (
+            <Button
+              className={styles.deleteParamBtn}
+              variant="link"
+              color="error"
+              onClick={() => null}
+            ></Button>
+          )}
+        </div>
+      ),
+    }))
+  }
   return (
     <div>
       <div className="row">
@@ -39,20 +159,15 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
           <SimpleLabelValue
             key={'tags'}
             label={'Tags: '}
-            value={
-              tags && tags.length ? (
-                <Chips
-                  className={styles.tagsChips}
-                  items={tags.map((t) => ({
-                    id: t.name,
-                    label: t.name,
-                    disabled: true,
-                  }))}
-                />
-              ) : (
-                '-'
-              )
-            }
+          />
+          <TagsTable
+          id="tags-table"
+            data={tableRecords}
+            headCells={tagsTableHeaders}
+            isFormOpen={false}
+            setIsFormOpen={() => null}
+            saveNewRow={() => null}
+            readOnly={true}
           />
 
           <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />

package/src/components/table/tags-table.tsx

@@ -223,6 +223,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                             onClick={() => {
                               const a = document.createElement('a')
                               a.href = values.externalDocs?.url
+                              a.target = '_blank'
                               a.click()
                             }}
                           >