feat: Replace all overflow-scroll to overflow-auto

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.4.9",
+        "@devtron-labs/devtron-fe-common-lib": "1.4.9-beta-1",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.tsx

@@ -500,7 +500,7 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
             <>
                 <div className={`app-compose ${getAdditionalParentClass()}`}>
                     <div
-                        className={`app-compose__nav ${getAppComposeClasses()} flex column left top dc__overflow-scroll`}
+                        className={`app-compose__nav ${getAppComposeClasses()} flex column left top dc__overflow-auto`}
                     >
                         <AppNavigation />
                     </div>

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigDryRun.tsx

@@ -91,7 +91,7 @@ const ConfigDryRun = ({
     }
 
     return (
-        <div className={`dc__overflow-scroll ${showManifest ? 'dc__grid-half h-100' : 'flexbox-col w-100 h-100'}`}>
+        <div className={`dc__overflow-auto ${showManifest ? 'dc__grid-half h-100' : 'flexbox-col w-100 h-100'}`}>
             <div className="flexbox-col">
                 <div className="py-6 px-12 flexbox dc__content-space dc__border-bottom-n1">
                     <div className="flexbox dc__gap-8 dc__align-items-center">

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DTChartSelector.tsx

@@ -115,7 +115,7 @@ const ChartSelectorDropdown = ({
                     />
                 </div>
             </PopupMenu.Button>
-            <PopupMenu.Body rootClassName="dc__overflow-scroll mxh-350 w-400 dc__border br-4">
+            <PopupMenu.Body rootClassName="dc__overflow-auto mxh-350 w-400 dc__border br-4">
                 <>
                     {customCharts.length > 0 && (
                         <div

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx

@@ -1497,7 +1497,7 @@ const DeploymentTemplate = ({
     const renderEditorComponent = () => {
         if (isResolvingVariables || isLoadingChangedChartDetails || !!isLoadingMergedTemplate) {
             return (
-                <div className="flex h-100 flex-grow-1 dc__overflow-scroll">
+                <div className="flex h-100 flex-grow-1 dc__overflow-auto">
                     <Progressing pageLoader />
                 </div>
             )
@@ -1527,7 +1527,7 @@ const DeploymentTemplate = ({
         if (isCompareView) {
             return (
                 <CompareConfigView
-                    className="flex-grow-1 dc__overflow-scroll"
+                    className="flex-grow-1 dc__overflow-auto"
                     compareFromSelectedOptionValue={compareFromSelectedOptionValue}
                     handleCompareFromOptionSelection={handleCompareFromOptionSelection}
                     isApprovalView={isApprovalView}
@@ -1693,7 +1693,7 @@ const DeploymentTemplate = ({
     }
 
     const renderValuesView = () => (
-        <div className="flexbox-col flex-grow-1 dc__overflow-scroll">
+        <div className="flexbox-col flex-grow-1 dc__overflow-auto">
             {window._env_.ENABLE_SCOPED_VARIABLES && (
                 <div className="app-config-variable-widget-position">
                     <FloatingVariablesSuggestions
@@ -1827,7 +1827,7 @@ const DeploymentTemplate = ({
         }
 
         return (
-            <div className="dc__border br-4 m-8 flexbox-col dc__content-space flex-grow-1 dc__overflow-scroll bg__primary">
+            <div className="dc__border br-4 m-8 flexbox-col dc__content-space flex-grow-1 dc__overflow-auto bg__primary">
                 {renderBody()}
 
                 {showDeleteOverrideDialog && (

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplateForm.tsx

@@ -87,19 +87,19 @@ const DeploymentTemplateForm = ({
     }
 
     return (
-        <div className={`dc__overflow-scroll flex-grow-1 ${showReadMe ? 'dc__grid-half' : 'flexbox-col'}`}>
+        <div className={`dc__overflow-auto flex-grow-1 ${showReadMe ? 'dc__grid-half' : 'flexbox-col'}`}>
             {showReadMe && (
-                <div className="flexbox-col dc__border-right dc__overflow-scroll">
+                <div className="flexbox-col dc__border-right dc__overflow-auto">
                     <div className="flexbox dc__gap-8 bg__primary px-12 py-6 dc__border-bottom-n1 flex left py-6">
                         <ICBookOpen className="icon-dim-16 dc__no-shrink scn-9" />
                         <span className="fs-12 fw-6 cn-9 lh-20">{`Readme ${selectedChart ? `(v${selectedChart.version})` : ''}`}</span>
                     </div>
 
-                    <MarkDown markdown={readMe} className="dc__overflow-scroll" />
+                    <MarkDown markdown={readMe} className="dc__overflow-auto" />
                 </div>
             )}
 
-            <div className="flexbox-col dc__overflow-scroll flex-grow-1">
+            <div className="flexbox-col dc__overflow-auto flex-grow-1">
                 <CodeEditor
                     value={editedDocument}
                     schemaURI={getEditorSchemaURIFromChartNameAndVersion(selectedChart?.name, selectedChart?.version)}

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/GUIView/GUIView.component.tsx

@@ -189,7 +189,7 @@ const GUIView = ({
         }
 
         return (
-            <div className="dc__overflow-scroll">
+            <div className="dc__overflow-auto">
                 <RJSFForm
                     schema={state.guiSchema}
                     className={!modelRef.current ? 'dc__mxw-960' : ''}

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/NoOverrideEmptyState.tsx

@@ -48,7 +48,7 @@ const NoOverrideEmptyState = ({
     handleCreateOverride,
     handleViewInheritedConfig,
 }: NoOverrideEmptyStateProps) => (
-    <div className="no-override-empty-state-container flexbox-col flex-grow-1 dc__overflow-scroll">
+    <div className="no-override-empty-state-container flexbox-col flex-grow-1 dc__overflow-auto">
         <GenericEmptyState
             image={cmCsEmptyState}
             title={getNoOverrideEmptyStateTitle({ componentType, environmentName, configName })}

src/Pages/GlobalConfigurations/Authorization/APITokens/APITokenList.tsx

@@ -88,7 +88,7 @@ const APITokenList = ({ tokenList, renderSearchToken, reload }: APITokenListType
                     <div>Expires on</div>
                     <div />
                 </div>
-                <div className="dc__overflow-scroll api__list__height dc__position-rel">
+                <div className="dc__overflow-auto api__list__height dc__position-rel">
                     {!tokenList || tokenList.length === 0
                         ? noMatchingResults()
                         : tokenList.map((list, index) => (

src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sPermissionModal.tsx

@@ -159,7 +159,7 @@ const K8sPermissionModal = ({
                         <Close />
                     </span>
                 </div>
-                <div className="p-20 fs-13 dc__overflow-scroll flexbox-col flex-grow-1 bg__tertiary">
+                <div className="p-20 fs-13 dc__overflow-auto flexbox-col flex-grow-1 bg__tertiary">
                     {!selectedPermissionAction && (
                         <div className="flex left fs-13 fw-6">
                             <span className="flex cb-5 cursor dc__gap-12" onClick={addNewPermissionCard}>

src/Pages/GlobalConfigurations/BuildInfra/ProfileForm.tsx

@@ -65,7 +65,7 @@ const ProfileForm: FunctionComponent = () => {
             onKeyDown={handleKeyDown}
             onSubmit={handleSubmit}
         >
-            <div className="flexbox-col dc__gap-24 pt pr pb pl h-100 dc__overflow-scroll">
+            <div className="flexbox-col dc__gap-24 pt pr pb pl h-100 dc__overflow-auto">
                 <BuildInfraDescriptor breadCrumbs={breadcrumbs} />
 
                 <APIResponseHandler

src/Pages/GlobalConfigurations/DeploymentCharts/List/DeploymentChartsList.component.tsx

@@ -117,7 +117,7 @@ const DeploymentChartsList = () => {
                         <span>Version</span>
                         <span>Description</span>
                     </div>
-                    <div className="h-100 dc__overflow-scroll">
+                    <div className="h-100 dc__overflow-auto">
                         {chartList.map((chartData) => (
                             <div
                                 key={`custom-chart_${chartData.name}`}

src/Pages/GlobalConfigurations/DeploymentCharts/List/DownloadChartButton.tsx

@@ -61,7 +61,7 @@ const DownloadChartButton = ({ name, versions }: DownloadChartButtonProps) => {
                     >
                         Select Version
                     </div>
-                    <div className="mb-4 mxh-140 dc__overflow-scroll">
+                    <div className="mb-4 mxh-140 dc__overflow-auto">
                         {versions.map((versionsList) => (
                             <button
                                 type="button"

src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx

@@ -232,7 +232,7 @@ export const ConfigMapSecretDryRun = ({
                     reload: reloadConfigMapSecretManifest,
                 }}
             >
-                <div className="flex-grow-1 dc__overflow-scroll">
+                <div className="flex-grow-1 dc__overflow-auto">
                     <CodeEditor value={configMapSecretManifest?.manifest} height="100%" mode={MODES.YAML} readOnly />
                 </div>
             </APIResponseHandler>

src/Pages/Shared/LinkedCIDetailsModal/LinkedCIDetailsModal.tsx

@@ -156,7 +156,7 @@ const LinkedCIDetailsModal = ({ handleClose, workflows }: LinkedCIDetailModalPro
 
     return (
         <div className="bg__primary h-100 flexbox-col show-shimmer-loading">
-            <div className="flexbox-col flex-grow-1 dc__overflow-scroll">
+            <div className="flexbox-col flex-grow-1 dc__overflow-auto">
                 <div className="dc__position-sticky dc__top-0 bg__primary dc__zi-20">
                     <div className="flex flex-justify dc__border-bottom pt-10 pr-20 pb-10 pl-20">
                         <h2 className="fs-16 fw-6 lh-24 m-0 dc__ellipsis-right">{ciPipelineName}</h2>

src/components/ApplicationGroup/Details/EnvCDDetails/EnvCDDetails.tsx

@@ -312,7 +312,7 @@ export default function EnvCDDetails({ filteredAppIds }: AppGroupDetailDefaultTy
                 </div>
             )}
             <div className="ci-details__body">
-                <div className="flexbox-col flex-grow-1 dc__overflow-scroll h-100" ref={scrollableRef}>
+                <div className="flexbox-col flex-grow-1 dc__overflow-auto h-100" ref={scrollableRef}>
                     {renderDetail()}
                 </div>
                 <LogResizeButton fullScreenView={fullScreenView} setFullScreenView={setFullScreenView} />

src/components/ApplicationGroup/Details/EnvCIDetails/EnvCIDetails.tsx

@@ -293,7 +293,7 @@ export default function EnvCIDetails({ filteredAppIds }: AppGroupDetailDefaultTy
                 </div>
             )}
             <div className="ci-details__body">
-                <div className="flexbox-col flex-grow-1 dc__overflow-scroll" ref={scrollableParentRef}>
+                <div className="flexbox-col flex-grow-1 dc__overflow-auto" ref={scrollableParentRef}>
                     {!pipelineId ? (
                         <EmptyView
                             title="No application selected"

src/components/ApplicationGroup/Details/EnvironmentOverview/__test__/EnvironmentOverview.test.tsx

@@ -64,7 +64,7 @@ describe('EnvironmentOverview', () => {
         expect(component.getByText('devtron-ns')).toBeInTheDocument()
         expect(component.getByText('default_cluster')).toBeInTheDocument()
         //right side component
-        const rightInfoComponent = component.container.querySelector('.dc__overflow-scroll')
+        const rightInfoComponent = component.container.querySelector('.dc__overflow-auto')
         expect(rightInfoComponent).toBeInTheDocument()
         const infoRightRowComponent = rightInfoComponent.querySelector('.app-deployments-info-body')
         expect(infoRightRowComponent).toBeInTheDocument()

src/components/ApplicationGroup/List/EnvironmentListView.tsx

@@ -134,7 +134,7 @@ const EnvironmentsListView = ({
         !filteredEnvList.length ? (
             <LoadingShimmerList />
         ) : (
-            <div className="dc__overflow-scroll">
+            <div className="dc__overflow-auto">
                 {filteredEnvList?.map((envData) => (
                     <div
                         key={envData.id}

src/components/ApplicationGroup/List/EnvironmentsList.tsx

@@ -104,7 +104,7 @@ const EnvironmentsList = ({ isSuperAdmin }: AppGroupAdminType) => {
     )
 
     return (
-        <div className="flexbox-col h-100 dc__overflow-scroll">
+        <div className="flexbox-col h-100 dc__overflow-auto">
             <PageHeader headerName="Application Groups" showAnnouncementHeader />
             <div className="env-list bg__primary">
                 <div className="flex dc__content-space pl-20 pr-20 pt-16 pb-16" data-testid="search-env-and-cluster">

src/components/ApplicationGroup/List/__tests__/EnvironmentListView.test.tsx

@@ -33,7 +33,7 @@ describe('EnvironmentList', () => {
         const appGroupLoaderContainer = container.querySelector('.flex.dc__border-top-n1')
         expect(appGroupLoaderContainer).toBeInTheDocument()
 
-        const appGroupListContainer = container.querySelector('.dc__overflow-scroll')
+        const appGroupListContainer = container.querySelector('.dc__overflow-auto')
         expect(appGroupListContainer).not.toBeInTheDocument()
     })
 
@@ -47,7 +47,7 @@ describe('EnvironmentList', () => {
         })
 
         expect(component.container).toBeInTheDocument()
-        const appGroupListContainer = component.container.querySelector('.dc__overflow-scroll')
+        const appGroupListContainer = component.container.querySelector('.dc__overflow-auto')
         expect(appGroupListContainer).toBeInTheDocument()
         expect(component.getAllByText('a')[0]).toBeInTheDocument()
         expect(component.getByText('shubham')).toBeInTheDocument()

src/components/CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx

@@ -146,7 +146,7 @@ const CreatePluginFormContent = ({
     }
 
     const renderExistingPluginVersionList = () => (
-        <div className="flexbox-col dc__gap-4 p-12 mxh-350 dc__overflow-scroll">
+        <div className="flexbox-col dc__gap-4 p-12 mxh-350 dc__overflow-auto">
             {selectedPluginVersions.map((version) => (
                 <div className="flexbox dc__align-items-center dc__gap-4" key={version}>
                     <ICTag className="icon-dim-16 dc__no-shrink" />
@@ -191,7 +191,7 @@ const CreatePluginFormContent = ({
     const showPluginDetailFields = currentTab !== CreatePluginFormViewType.EXISTING_PLUGIN || !!name
 
     return (
-        <div className="flexbox-col flex-grow-1 dc__overflow-scroll p-20 dc__gap-16">
+        <div className="flexbox-col flex-grow-1 dc__overflow-auto p-20 dc__gap-16">
             <StyledRadioGroup
                 className="gui-yaml-switch dc__no-shrink dc__content-start"
                 onChange={handleTabChange}

src/components/CIPipelineN/CreatePluginModal/CreatePluginModal.component.tsx

@@ -401,7 +401,7 @@ const CreatePluginModal = ({ handleClose }: CreatePluginModalProps) => {
                 className="bg__primary dc__position-fixed dc__right-0 dc__top-0 h-100 flexbox-col dc__content-space w-800"
                 onClick={stopPropagation}
             >
-                <div className="flexbox-col flex-grow-1 dc__overflow-scroll">
+                <div className="flexbox-col flex-grow-1 dc__overflow-auto">
                     <div className="py-12 px-20 flexbox dc__content-space dc__border-bottom">
                         <h2 className="m-0 cn-9 fs-16 fw-6 lh-24">Save as plugin</h2>
 

src/components/CIPipelineN/PreBuild.tsx

@@ -144,7 +144,7 @@ export const PreBuild: React.FC<PreBuildType> = ({ isJobView }) => {
 
     function renderPluginList(): JSX.Element {
         return (
-            <div className="px-20 pb-20 dc__overflow-scroll flexbox-col">
+            <div className="px-20 pb-20 dc__overflow-auto flexbox-col">
                 <div className="cn-9 fw-6 fs-14 pb-10 pt-20">What do you want this task to do?</div>
                 <div onClick={() => setPluginType(PluginType.INLINE, 0)}>
                     <CustomScriptCard />
@@ -203,7 +203,7 @@ export const PreBuild: React.FC<PreBuildType> = ({ isJobView }) => {
         }
 
         return (
-            <div className="flexbox-col flex-grow-1 dc__overflow-scroll">
+            <div className="flexbox-col flex-grow-1 dc__overflow-auto">
                 <TaskDetailComponent />
             </div>
         )

src/components/CIPipelineN/TaskDetailComponent.tsx

@@ -201,7 +201,7 @@ export const TaskDetailComponent = () => {
         <>
             <PluginDetailHeader handlePluginVersionChange={handlePluginVersionChange} />
 
-            <div className="p-20 dc__overflow-scroll">
+            <div className="p-20 dc__overflow-auto">
                 <div>
                     <div className="row-container mb-12">
                         <div className="fw-6 fs-13 lh-32 cn-7 dc__required-field">Task name</div>

src/components/ClusterNodes/ClusterOverview.tsx

@@ -327,7 +327,7 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
                 {/* Commented to be used in future */}
                 {/* {cardDetailsInBar()} */}
                 <div className="dc__grid-row-one-half dc__gap-16 pb-16">
-                    <div className="flexbox dc__gap-12 dc__content-space dc__overflow-scroll bg__primary br-4 en-2 bw-1 pt-16 pl-16 pb-16 pr-16">
+                    <div className="flexbox dc__gap-12 dc__content-space dc__overflow-auto bg__primary br-4 en-2 bw-1 pt-16 pl-16 pb-16 pr-16">
                         <div>
                             <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">CPU Usage</div>
                             <div className="dc__align-left fs-24 fw-4 cn-9">
@@ -354,7 +354,7 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
                         </div>
                     </div>
 
-                    <div className="flexbox dc__gap-12 dc__content-space dc__overflow-scroll bg__primary br-4 en-2 bw-1 pt-16 pl-16 pb-16 pr-16">
+                    <div className="flexbox dc__gap-12 dc__content-space dc__overflow-auto bg__primary br-4 en-2 bw-1 pt-16 pl-16 pb-16 pr-16">
                         <div>
                             <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">Memory Usage</div>
                             <div className="dc__align-left fs-24 fw-4 cn-9">
@@ -527,7 +527,7 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
     const renderClusterSummary = (): JSX.Element => {
         return (
             <div
-                className={`dc__border-left resource-details-container bg__primary dc__overflow-scroll ${
+                className={`dc__border-left resource-details-container bg__primary dc__overflow-auto ${
                     errorStatusCode || errorCode ? 'flex' : ''
                 }`}
             >

src/components/ClusterNodes/ClusterTerminal.tsx

@@ -700,7 +700,7 @@ node-details-full-screen
                 {connectTerminal && terminalView}
             </div>
             {selectedTabIndex === 1 && (
-                <div className="h-100 dc__overflow-scroll">
+                <div className="h-100 dc__overflow-auto">
                     <ClusterEvents terminalAccessId={terminalAccessIdRef.current} reconnectStart={reconnectStart} />
                 </div>
             )}

src/components/ResourceBrowser/ResourceList/BaseResourceList.tsx

@@ -575,7 +575,7 @@ const BaseResourceListContent = ({
                             'scrollable-resource-list',
                             showPaginatedView,
                             showStaleDataWarning,
-                        )} dc__overflow-scroll`}
+                        )} dc__overflow-auto`}
                     >
                         <div
                             className="scrollable-resource-list__row no-hover-bg h-36 fw-6 cn-7 fs-12 dc__gap-16 dc__zi-2 dc__position-sticky dc__border-bottom dc__uppercase bg__primary dc__top-0"

src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfo.tsx

@@ -87,7 +87,7 @@ const ClusterUpgradeCompatibilityInfo = ({
 
     return (
         <div className="resource-browser">
-            <div className="dc__overflow-scroll p-8">
+            <div className="dc__overflow-auto p-8">
                 <CollapsibleList tabType="navLink" config={sidebarConfig} onCollapseBtnClick={onCollapseBtnClick} />
             </div>
             <BaseResourceList

src/components/ResourceBrowser/ResourceList/EventList.tsx

@@ -33,7 +33,7 @@ export const EventList = ({
     searchText,
     setWidgetEventDetails,
 }: EventListType) => (
-    <div className="dc__overflow-scroll">
+    <div className="dc__overflow-auto">
         <div
             className={`event-list-row${ExplainEventButton ? '__explain' : ''} dc__zi-1 dc__min-width-fit-content dc__position-sticky bg__primary dc__top-0 fw-6 cn-7 fs-13 dc__border-bottom px-20 py-8 dc__uppercase h-36`}
         >

src/components/app/details/AboutTagEditModal.tsx

@@ -132,7 +132,7 @@ export default function AboutTagEditModal({
         return (
             <>
                 <div
-                    className="cn-7 p-20 dc__overflow-scroll"
+                    className="cn-7 p-20 dc__overflow-auto"
                     data-testid="tag-input-form"
                     style={{ height: 'calc(100vh - 122px)' }}
                 >