Merge branch 'develop' of https://github.com/devtron-labs/devtron-fe-common-lib into fix/app-details-manifest-layout

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.14.1-pre-3",
+    "version": "1.14.1-pre-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -122,7 +122,6 @@
         "qrcode.react": "^4.2.0",
         "react-canvas-confetti": "^2.0.7",
         "react-dates": "^21.8.0",
-        "react-diff-viewer-continued": "^3.4.0",
         "react-draggable": "^4.4.5",
         "react-international-phone": "^4.5.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",

package.json

@@ -47,6 +47,7 @@ export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean
             interactive
             documentationLink={isCreateApp ? "APP_TAGS" : "APP_OVERVIEW_TAGS"}
             documentationLinkText="View Documentation"
+            openInNewTab
         >
             <div className="flexbox cursor">
                 <InjectTag className="icon-dim-16 mt-2 mr-4" />

src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -89,7 +89,9 @@ export const ResizableTagTextArea = ({
     }
 
     useEffect(() => {
-        reInitHeight()
+        setTimeout(() => {
+            reInitHeight()
+        }, 100)
     }, [])
 
     useThrottledEffect(reInitHeight, 500, [value])

src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -23,7 +23,7 @@ import 'tippy.js/animations/shift-toward-subtle.css'
 import 'tippy.js/animations/shift-toward.css'
 import { TippyCustomizedProps, TippyTheme } from './Types'
 import { not, stopPropagation } from './Helper'
-import { DocLink } from '../Shared/DocLink'
+import { DocLink } from '@Shared/Components'
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
@@ -79,8 +79,8 @@ export const TippyCustomized = <T extends boolean = false>(props: TippyCustomize
             additionalContent,
             documentationLink,
             documentationLinkText,
-            isEnterprise,
             isExternalLink,
+            openInNewTab,
         } = props
         return (
             <>
@@ -164,9 +164,9 @@ export const TippyCustomized = <T extends boolean = false>(props: TippyCustomize
                             dataTestId="learn-more-about-tippy-link"
                             showExternalIcon
                             onClick={closeTippy}
-                            isEnterprise={isEnterprise}
                             isExternalLink={isExternalLink}
                             docLinkKey={documentationLink}
+                            openInNewTab={openInNewTab}
                         />
                     </div>
                 )}

src/Common/TippyCustomized.tsx

@@ -28,12 +28,12 @@ import {
     ButtonProps,
     ComponentLayoutType,
     StatusType,
+    DocLinkProps,
 } from '../Shared'
 import {
     ACTION_STATE,
     DEPLOYMENT_WINDOW_TYPE,
     DockerConfigOverrideType,
-    DOCUMENTATION,
     RefVariableType,
     SortingOrder,
     TaskErrorObj,
@@ -120,10 +120,9 @@ export interface CheckboxProps {
     children?: ReactNode
 }
 
-export type TippyWithBaseDocLinkTypes<T extends boolean> = {
-    isExternalLink?: T
-    isEnterprise?: boolean
-    documentationLink?: T extends true ? string : keyof typeof DOCUMENTATION
+export interface TippyWithBaseDocLinkTypes<T extends boolean>
+    extends Pick<DocLinkProps<T>, 'isExternalLink' | 'openInNewTab'> {
+    documentationLink?: DocLinkProps<T>['docLinkKey']
 }
 
 export type TippyCustomizedProps<T extends boolean> = Pick<TippyProps, 'appendTo'> &
@@ -169,8 +168,8 @@ export interface InfoIconTippyProps<T extends boolean = false>
         | 'Icon'
         | 'headingInfo'
         | 'documentationLink'
-        | 'isEnterprise'
         | 'isExternalLink'
+        | 'openInNewTab'
     > {
     dataTestid?: string
     children?: TippyCustomizedProps<T>['children']

src/Common/Types.ts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-export * from '../Shared/DocLink'
 export * from './AddCDButton'
 export * from './API'
 export { BreadCrumb, useBreadcrumb } from './BreadCrumb/BreadCrumb'

src/Common/index.ts

@@ -5,14 +5,12 @@ import { EULA_LINK, PRIVACY_POLICY_LINK, TERMS_OF_USE_LINK } from '@Shared/const
 import { useMainContext } from '@Shared/Providers'
 
 import { Button, ButtonComponentType, ButtonStyleType, ButtonVariantType } from '../Button'
-import { InstallationType } from '../Header/types'
 import { Icon } from '../Icon'
 
 const AboutDevtronBody = ({ isFELibAvailable }: { isFELibAvailable: boolean }) => {
-    const { currentServerInfo } = useMainContext()
+    const { currentServerInfo, isEnterprise } = useMainContext()
 
     const currentVersion = currentServerInfo?.serverInfo?.currentVersion
-    const isEnterprise = currentServerInfo?.serverInfo?.installationType === InstallationType.ENTERPRISE
 
     const isVersionCompatible = isFELibAvailable === isEnterprise
 

src/Shared/Components/AboutDevtron/AboutDevtronBody.tsx

@@ -24,12 +24,12 @@ import folder from '@Icons/ic-folder.svg'
 import { ReactComponent as ICHelpOutline } from '@Icons/ic-help.svg'
 import { ReactComponent as MechanicalOperation } from '@Icons/ic-mechanical-operation.svg'
 import noartifact from '@Images/no-artifact.webp'
-import { DocLink } from '@Shared/DocLink'
 import { getIsApprovalPolicyConfigured } from '@Shared/Helpers'
 import { useDownload } from '@Shared/Hooks'
 
 import { ClipboardButton, extractImage, GenericEmptyState, ImageTagsContainer, useGetUserRoles } from '../../../Common'
 import { EMPTY_STATE_STATUS } from '../../constants'
+import { DocLink } from '../DocLink'
 import { TargetPlatformBadgeList } from '../TargetPlatforms'
 import { TERMINAL_STATUS_MAP } from './constants'
 import { ArtifactType, CIListItemType } from './types'

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -19,8 +19,6 @@ import { useParams } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
 
 import { CodeEditor } from '@Shared/Components/CodeEditor'
-import { renderDiffViewNoDifferenceState } from '@Shared/Components/DeploymentConfigDiff'
-import { DiffViewer } from '@Shared/Components/DiffViewer'
 
 import { ReactComponent as Info } from '../../../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as ViewVariablesIcon } from '../../../../Assets/Icon/ic-view-variable-toggle.svg'
@@ -71,10 +69,14 @@ const DeploymentHistoryDiffView = ({
 
     const renderDeploymentDiffViaCodeEditor = () =>
         previousConfigAvailable ? (
-            <DiffViewer
-                oldValue={editorValuesLHS}
-                newValue={editorValuesRHS}
-                codeFoldMessageRenderer={renderDiffViewNoDifferenceState(editorValuesLHS, editorValuesRHS)}
+            <CodeEditor
+                height="100%"
+                originalValue={editorValuesLHS}
+                modifiedValue={editorValuesRHS}
+                mode={MODES.YAML}
+                noParsing
+                diffView
+                collapseUnchangedDiffView
             />
         ) : (
             <CodeEditor