Merge pull request #2677 from devtron-labs/feat/about-devtron

arunjaindev · web-flow · commit 17cc22c503c9 · 2025-05-01T15:52:04.000+05:30
feat: add about devtron dialog for oss
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.12.0-pre-2",
+        "@devtron-labs/devtron-fe-common-lib": "1.12.0-pre-3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissions.component.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissions.component.tsx
@@ -996,7 +996,6 @@ const AppPermissions = () => {
                               }
                             : [],
                     )}
-                    alignActiveBorderWithContainer
                 />
             </div>
             <div>
diff --git a/src/components/ApplicationGroup/AppGroupDetailsRoute.tsx b/src/components/ApplicationGroup/AppGroupDetailsRoute.tsx
@@ -685,7 +685,7 @@ export const EnvHeader = ({
             },
         ]
 
-        return <TabGroup tabs={tabs} hideTopPadding alignActiveBorderWithContainer />
+        return <TabGroup tabs={tabs} hideTopPadding />
     }
 
     const renderBreadcrumbs = () => {
diff --git a/src/components/ApplicationGroup/CreateAppGroup.tsx b/src/components/ApplicationGroup/CreateAppGroup.tsx
@@ -208,7 +208,7 @@ export default function CreateAppGroup({
         }
 
         return (
-            <div className='flexbox-col flex-grow-1'>
+            <div className="flexbox-col flex-grow-1">
                 <SearchBar
                     inputProps={{
                         placeholder: `Search ${filterParentTypeMsg}'s`,
@@ -218,7 +218,7 @@ export default function CreateAppGroup({
                     handleEnter={handleAppSearchEnterChange}
                     dataTestId="create-app-group"
                 />
-                <div className='flexbox-col flex-grow-1'>
+                <div className="flexbox-col flex-grow-1">
                     {filteredAuthList.length <= 0 && filteredUnAuthList.length <= 0
                         ? renderEmptyState()
                         : filteredAuthList.map((app) => {
@@ -271,7 +271,7 @@ export default function CreateAppGroup({
         }
 
         return (
-            <div className='flexbox-col flex-grow-1'>
+            <div className="flexbox-col flex-grow-1">
                 <SearchBar
                     inputProps={{
                         placeholder: `Search ${filterParentTypeMsg}'s`,
@@ -280,7 +280,7 @@ export default function CreateAppGroup({
                     initialSearchText={allAppSearchText}
                     handleEnter={handleAllAppSearchEnterChange}
                 />
-                <div className='flexbox-col flex-grow-1'>
+                <div className="flexbox-col flex-grow-1">
                     {filteredAllApps.length <= 0
                         ? renderEmptyState()
                         : filteredAllApps.map((app) => (
@@ -377,7 +377,7 @@ export default function CreateAppGroup({
                         }
                     />
                 </div>
-                <div className='flexbox-col flex-grow-1'>
+                <div className="flexbox-col flex-grow-1">
                     <div className="dc__border-bottom mb-8">
                         <TabGroup
                             tabs={[
@@ -395,7 +395,6 @@ export default function CreateAppGroup({
                                 ),
                             ]}
                             hideTopPadding
-                            alignActiveBorderWithContainer
                         />
                     </div>
                     {selectedTab === CreateGroupTabs.SELECTED_APPS || selectedTab === CreateGroupTabs.SELECTED_ENV
diff --git a/src/components/CIPipelineN/CIPipeline.tsx b/src/components/CIPipelineN/CIPipeline.tsx
@@ -826,7 +826,6 @@ export default function CIPipeline({
                                       ]
                             }
                             hideTopPadding
-                            alignActiveBorderWithContainer
                         />
                     </div>
                 )}
diff --git a/src/components/ClusterNodes/NodeDetails.tsx b/src/components/ClusterNodes/NodeDetails.tsx
@@ -238,7 +238,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
 
         return (
             <div className="pl-20 dc__border-bottom flex dc__gap-16">
-                <TabGroup tabs={tabs} alignActiveBorderWithContainer size={ComponentSizeType.medium} />
+                <TabGroup tabs={tabs} size={ComponentSizeType.medium} />
                 {nodeControls()}
             </div>
         )
@@ -395,7 +395,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
             <div>
                 <div className="dc__border-bottom dc__position-sticky dc__top-0 dc__zi-1 bg__primary">
                     <div className="en-2 bw-1 dc__top-radius-4 bg__primary dc__no-bottom-border px-20">
-                        <TabGroup tabs={tabs} alignActiveBorderWithContainer />
+                        <TabGroup tabs={tabs} />
                     </div>
                 </div>
                 <div className="en-2 bw-1 br-4 dc__no-top-radius dc__no-top-border bg__primary mb-20">
diff --git a/src/components/Jobs/JobDetails/JobDetails.tsx b/src/components/Jobs/JobDetails/JobDetails.tsx
@@ -211,7 +211,7 @@ const JobHeader = ({ jobName }: { jobName: string }) => {
             },
         ]
 
-        return <TabGroup tabs={tabs} hideTopPadding alignActiveBorderWithContainer />
+        return <TabGroup tabs={tabs} hideTopPadding />
     }
 
     const renderBreadcrumbs = () => {
diff --git a/src/components/app/details/AppHeader.tsx b/src/components/app/details/AppHeader.tsx
@@ -240,7 +240,7 @@ export const AppHeader = ({
             },
         ]
 
-        return <TabGroup tabs={tabs} hideTopPadding alignActiveBorderWithContainer />
+        return <TabGroup tabs={tabs} hideTopPadding />
     }
 
     const renderBreadcrumbs = () => (
diff --git a/src/components/app/details/cIDetails/CIDetails.tsx b/src/components/app/details/cIDetails/CIDetails.tsx
@@ -495,7 +495,6 @@ export const Details = ({
                                       ]
                                     : []),
                             ]}
-                            alignActiveBorderWithContainer
                         />
                     </div>
                 </>
diff --git a/src/components/app/list-new/AppList.tsx b/src/components/app/list-new/AppList.tsx
@@ -398,7 +398,7 @@ const AppList = ({ isArgoInstalled }: AppListPropType) => {
 
         return (
             <div className="app-tabs-wrapper px-20">
-                <TabGroup tabs={tabs} rightComponent={rightComponent} alignActiveBorderWithContainer />
+                <TabGroup tabs={tabs} rightComponent={rightComponent} />
             </div>
         )
     }
diff --git a/src/components/cdPipeline/CDPipeline.tsx b/src/components/cdPipeline/CDPipeline.tsx
@@ -1307,7 +1307,6 @@ export default function CDPipeline({
                                 getNavLink(`post-build`, BuildStageVariable.PostBuild),
                             ]}
                             hideTopPadding
-                            alignActiveBorderWithContainer
                         />
                     </div>
                 )}
@@ -1439,7 +1438,6 @@ export default function CDPipeline({
                                           },
                                       }]),
                             ]}
-                            alignActiveBorderWithContainer
                         />
                     </div>
                 )}
diff --git a/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx b/src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx
@@ -300,7 +300,6 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
                         },
                     }))}
                     hideTopPadding
-                    alignActiveBorderWithContainer={!isChildTab}
                     size={isChildTab ? ComponentSizeType.medium : ComponentSizeType.large}
                 />
             </div>
diff --git a/src/components/common/navigation/NavigationRoutes.tsx b/src/components/common/navigation/NavigationRoutes.tsx
@@ -41,6 +41,7 @@ import {
     LicenseInfoDialogType,
     DevtronLicenseInfo,
     useUserPreferences,
+    AboutDevtronDialog,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Route, Switch, useRouteMatch, useHistory, useLocation } from 'react-router-dom'
 import * as Sentry from '@sentry/browser'
@@ -350,7 +351,8 @@ export default function NavigationRoutes() {
                     result.canOnlyViewPermittedEnvOrgLevel ??
                     ENVIRONMENT_DATA_FALLBACK['canOnlyViewPermittedEnvOrgLevel'],
                 featureGitOpsFlags: parsedFeatureGitOpsFlags,
-                canFetchHelmAppStatus: result.canFetchHelmAppStatus ?? ENVIRONMENT_DATA_FALLBACK['canFetchHelmAppStatus'],
+                canFetchHelmAppStatus:
+                    result.canFetchHelmAppStatus ?? ENVIRONMENT_DATA_FALLBACK['canFetchHelmAppStatus'],
                 devtronManagedLicensingEnabled:
                     result.devtronManagedLicensingEnabled ??
                     ENVIRONMENT_DATA_FALLBACK['devtronManagedLicensingEnabled'],
@@ -438,6 +440,23 @@ export default function NavigationRoutes() {
 
     const showStackManager = !devtronManagedLicensingEnabled
 
+    const renderAboutDevtronDialog = () => {
+        if (!licenseInfoDialogType) {
+            return null
+        }
+        return licenseData && LicenseInfoDialog ? (
+            <LicenseInfoDialog
+                handleCloseLicenseInfoDialog={handleCloseLicenseInfoDialog}
+                initialDialogType={licenseInfoDialogType}
+            />
+        ) : (
+            <AboutDevtronDialog
+                handleCloseLicenseInfoDialog={handleCloseLicenseInfoDialog}
+                isFELibAvailable={!!LicenseInfoDialog}
+            />
+        )
+    }
+
     return (
         <MainContextProvider
             value={{
@@ -485,13 +504,7 @@ export default function NavigationRoutes() {
                         handleUpdateUserThemePreference={handleUpdateUserThemePreference}
                     />
                 )}
-                {licenseInfoDialogType && LicenseInfoDialog && (
-                    <LicenseInfoDialog
-                        handleCloseLicenseInfoDialog={handleCloseLicenseInfoDialog}
-                        currentVersion={currentServerInfo.serverInfo?.currentVersion}
-                        initialDialogType={licenseInfoDialogType}
-                    />
-                )}
+                {renderAboutDevtronDialog()}
                 {!_isOnboardingPage && (
                     <Navigation
                         currentServerInfo={currentServerInfo}
diff --git a/src/components/notifications/Notifications.tsx b/src/components/notifications/Notifications.tsx
@@ -60,7 +60,6 @@ export default class Notifications extends Component<NotificationsProps, {}> {
                                 },
                             },
                         ]}
-                        alignActiveBorderWithContainer
                     />
                 </div>
                 <ErrorBoundary>
diff --git a/src/components/security/Security.tsx b/src/components/security/Security.tsx
@@ -62,7 +62,6 @@ export class Security extends Component<SecurityProps> {
                     },
                 ]}
                 hideTopPadding
-                alignActiveBorderWithContainer
             />
         )
     }
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx
@@ -342,7 +342,6 @@ const EphemeralContainerDrawer = ({
                         },
                     ]}
                     hideTopPadding
-                    alignActiveBorderWithContainer
                 />
             </div>
         )
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetail.component.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetail.component.tsx
@@ -492,7 +492,7 @@ const NodeDetailComponent = ({
         <>
             <div className="w-100 pr-20 pl-20 bg__primary flex border__secondary--bottom dc__content-space h-32">
                 <div className="flex left">
-                    <TabGroup tabs={TAB_GROUP_CONFIG} size={ComponentSizeType.medium} alignActiveBorderWithContainer />
+                    <TabGroup tabs={TAB_GROUP_CONFIG} size={ComponentSizeType.medium} />
                     {selectedTabName === NodeDetailTab.TERMINAL && (
                         <>
                             <div className="ml-12 mr-5 tab-cell-border" />
diff --git a/src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx b/src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx
@@ -543,7 +543,6 @@ const NodeComponent = ({
                                         },
                                     ]}
                                     size={ComponentSizeType.xl}
-                                    alignActiveBorderWithContainer
                                 />
                             </div>
                         )}
diff --git a/src/components/v2/appDetails/k8Resource/nodeType/PodHeader.component.tsx b/src/components/v2/appDetails/k8Resource/nodeType/PodHeader.component.tsx
@@ -93,7 +93,7 @@ const PodHeaderComponent = ({ callBack }: { callBack: (isNewPod: boolean) => voi
 
     return (
         <div className="dc__border-bottom px-16">
-            <TabGroup tabs={tabs} size={ComponentSizeType.xl} alignActiveBorderWithContainer />
+            <TabGroup tabs={tabs} size={ComponentSizeType.xl} />
         </div>
     )
 }
diff --git a/src/components/v2/appDetails/sourceInfo/scaleWorkloads/ScaleWorkloadsModal.component.tsx b/src/components/v2/appDetails/sourceInfo/scaleWorkloads/ScaleWorkloadsModal.component.tsx
@@ -244,7 +244,6 @@ export default function ScaleWorkloadsModal({ appId, onClose, history }: ScaleWo
                             'data-testid': `scale-workloads-tab-${index}`,
                         },
                     }))}
-                    alignActiveBorderWithContainer
                 />
             </div>
         )
diff --git a/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx b/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx
@@ -403,7 +403,6 @@ const ChartDeploymentHistory = ({
                             'data-testid': `nav-bar-option-${index}`,
                         },
                     }))}
-                    alignActiveBorderWithContainer
                 />
             </div>
         )
diff --git a/src/components/v2/devtronStackManager/AboutDevtronView.tsx b/src/components/v2/devtronStackManager/AboutDevtronView.tsx
@@ -68,7 +68,6 @@ const AboutDevtronView = ({
                             onClick: () => handleTabChange(index),
                         },
                     }))}
-                    alignActiveBorderWithContainer
                 />
             </div>
         )
diff --git a/src/components/v2/headers/AppHeader.component.tsx b/src/components/v2/headers/AppHeader.component.tsx
@@ -117,7 +117,6 @@ const AppHeaderComponent = () => {
                     },
                 ]}
                 hideTopPadding
-                alignActiveBorderWithContainer
             />
         )
     }
diff --git a/src/components/v2/headers/ChartHeader.component.tsx b/src/components/v2/headers/ChartHeader.component.tsx
@@ -114,7 +114,7 @@ const ChartHeaderComponent = ({ errorResponseCode }: ChartHeaderComponentType) =
             )
         }
 
-        return <TabGroup tabs={tabs} hideTopPadding alignActiveBorderWithContainer />
+        return <TabGroup tabs={tabs} hideTopPadding />
     }
 
     return (
diff --git a/src/components/v2/headers/EAHeader.component.tsx b/src/components/v2/headers/EAHeader.component.tsx
@@ -90,7 +90,7 @@ const EAHeaderComponent = ({ title, redirectURL, showAppDetailsOnly = false }: E
             )
         }
 
-        return <TabGroup tabs={tabs} hideTopPadding alignActiveBorderWithContainer />
+        return <TabGroup tabs={tabs} hideTopPadding />
     }
 
     return (
diff --git a/yarn.lock b/yarn.lock
@@ -1126,10 +1126,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/devtron-fe-common-lib@1.12.0-pre-2":
-  version "1.12.0-pre-2"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.12.0-pre-2.tgz#265672237d11192fda588140695f00b28a2f55b4"
-  integrity sha512-lbHkJZbY/xBKpXarYYJGzw2aARSN4E3PYBTV8tPKTAngfO1vmpW01WT46XsVdY1bFB+2JL4X9knBSBNdzXR5Lw==
+"@devtron-labs/devtron-fe-common-lib@1.12.0-pre-3":
+  version "1.12.0-pre-3"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.12.0-pre-3.tgz#fa0f4eca5046ec6eea30ce0056892d8196fdf940"
+  integrity sha512-WTnHPpUPVk+0C9NV4qQNY84UefGLR+/wwzYasWIdSixa838/8Grsjsw/qw7bmdi/mXjMgme6wYwjhZ9qL709dQ==
   dependencies:
     "@codemirror/lang-json" "6.0.1"
     "@codemirror/lang-yaml" "6.1.2"

Original file line number	Diff line number	Diff line change
`@@ -996,7 +996,6 @@ const AppPermissions = () => {`
`996`	`996`	`}`
`997`	`997`	`: [],`
`998`	`998`	`)}`
`999`		`- alignActiveBorderWithContainer`
`1000`	`999`	`/>`
`1001`	`1000`	`</div>`
`1002`	`1001`	`<div>`
Original file line number	Diff line number	Diff line change
`@@ -685,7 +685,7 @@ export const EnvHeader = ({`
`685`	`685`	`},`
`686`	`686`	`]`
`687`	`687`
`688`		`- return <TabGroup tabs={tabs} hideTopPadding alignActiveBorderWithContainer />`
	`688`	`+ return <TabGroup tabs={tabs} hideTopPadding />`
`689`	`689`	`}`
`690`	`690`
`691`	`691`	`const renderBreadcrumbs = () => {`
Original file line number	Diff line number	Diff line change
`@@ -826,7 +826,6 @@ export default function CIPipeline({`
`826`	`826`	`]`
`827`	`827`	`}`
`828`	`828`	`hideTopPadding`
`829`		`- alignActiveBorderWithContainer`
`830`	`829`	`/>`
`831`	`830`	`</div>`
`832`	`831`	`)}`
Original file line number	Diff line number	Diff line change
`@@ -211,7 +211,7 @@ const JobHeader = ({ jobName }: { jobName: string }) => {`
`211`	`211`	`},`
`212`	`212`	`]`
`213`	`213`
`214`		`- return <TabGroup tabs={tabs} hideTopPadding alignActiveBorderWithContainer />`
	`214`	`+ return <TabGroup tabs={tabs} hideTopPadding />`
`215`	`215`	`}`
`216`	`216`
`217`	`217`	`const renderBreadcrumbs = () => {`
Original file line number	Diff line number	Diff line change
`@@ -240,7 +240,7 @@ export const AppHeader = ({`
`240`	`240`	`},`
`241`	`241`	`]`
`242`	`242`
`243`		`- return <TabGroup tabs={tabs} hideTopPadding alignActiveBorderWithContainer />`
	`243`	`+ return <TabGroup tabs={tabs} hideTopPadding />`
`244`	`244`	`}`
`245`	`245`
`246`	`246`	`const renderBreadcrumbs = () => (`
Original file line number	Diff line number	Diff line change
`@@ -495,7 +495,6 @@ export const Details = ({`
`495`	`495`	`]`
`496`	`496`	`: []),`
`497`	`497`	`]}`
`498`		`- alignActiveBorderWithContainer`
`499`	`498`	`/>`
`500`	`499`	`</div>`
`501`	`500`	`</>`
Original file line number	Diff line number	Diff line change
`@@ -398,7 +398,7 @@ const AppList = ({ isArgoInstalled }: AppListPropType) => {`
`398`	`398`
`399`	`399`	`return (`
`400`	`400`	`<div className="app-tabs-wrapper px-20">`
`401`		`- <TabGroup tabs={tabs} rightComponent={rightComponent} alignActiveBorderWithContainer />`
	`401`	`+ <TabGroup tabs={tabs} rightComponent={rightComponent} />`
`402`	`402`	`</div>`
`403`	`403`	`)`
`404`	`404`	`}`