Merge branch 'main' into custom-input-v2

Author: shivani170

src/components/CIPipelineN/YAMLScriptComponent.tsx

@@ -56,7 +56,7 @@ export function YAMLScriptComponent({
                         components={{
                             IndicatorSeparator: null,
                         }}
-                        menuPortalTarget={document.getElementById('visible-modal')}
+                        menuPosition="fixed"
                     />
                 )}
             </div>

src/components/app/details/appConfig/AppComposeRouter.tsx

@@ -59,7 +59,7 @@ export default function AppComposeRouter({
     isBaseConfigProtected,
     reloadEnvironments,
     configProtectionData,
-    filteredEnvIds
+    filteredEnvIds,
 }: AppComposeRouterProps) {
     const { path } = useRouteMatch()
     const renderJobViewRoutes = (): JSX.Element => {
@@ -205,7 +205,7 @@ export default function AppComposeRouter({
                     </Route>,
                     <Route
                         key={`${path}/${URLS.APP_ENV_OVERRIDE_CONFIG}`}
-                        path={`${path}/${URLS.APP_ENV_OVERRIDE_CONFIG}/:envId(\\d+)?/:name?`}
+                        path={`${path}/${URLS.APP_ENV_OVERRIDE_CONFIG}/:envId(\\d+)?`}
                         render={(props) => (
                             <EnvironmentOverride environments={environments} reloadEnvironments={reloadEnvironments} />
                         )}

src/components/app/details/appDetails/AppDetails.tsx

@@ -1442,7 +1442,7 @@ export function TimeRangeSelector({
                 options={options.map((time) => ({ label: time, value: time }))}
                 value={{ label: selectedRange, value: selectedRange }}
                 onChange={(selected) => selectRange(selected.value)}
-                menuPortalTarget={document.body}
+                menuPosition="fixed"
                 components={{ IndicatorSeparator: null, ValueContainer, Option }}
                 styles={{
                     ...multiSelectStyles,

src/components/app/details/cicdHistory/Sidebar.tsx

@@ -133,7 +133,7 @@ const Sidebar = React.memo(
                             DropdownIndicator,
                         }}
                         styles={FILTER_STYLE}
-                        menuPortalTarget={document.body}
+                        menuPosition="fixed"
                     />
                 </div>
 

src/components/cdPipeline/BuildCD.tsx

@@ -331,7 +331,7 @@ export default function BuildCD({
                     <div className="w-50 mr-8">
                         <div className="form__label dc__required-field">Environment</div>
                         <ReactSelect
-                            menuPortalTarget={isAdvanced ? null : document.getElementById('visible-modal')}
+                            menuPosition={isAdvanced ? null : "fixed"}
                             closeMenuOnScroll={true}
                             isDisabled={!!cdPipelineId}
                             classNamePrefix="cd-pipeline-environment-dropdown"
@@ -549,7 +549,7 @@ export default function BuildCD({
                 <p className="fs-14 fw-6 cn-9 mb-8 mt-16">Deployment Strategy</p>
                 <p className="fs-13 fw-5 cn-7 mb-8">Configure deployment preferences for this pipeline</p>
                 <ReactSelect
-                    menuPortalTarget={document.getElementById('visible-modal')}
+                    menuPosition="fixed"
                     closeMenuOnScroll={true}
                     classNamePrefix="deployment-strategy-dropdown"
                     isSearchable={false}

src/components/cdPipeline/CDPipeline.tsx

@@ -1208,7 +1208,7 @@ export default class CDPipeline extends Component<CDPipelineProps, CDPipelineSta
                 <div className="form__row">
                     <label className="form__label form__label--sentence dc__bold">Select Configmap and Secrets</label>
                     <ReactSelect
-                        menuPortalTarget={this.state.isAdvanced ? null : document.getElementById('visible-modal')}
+                        menuPosition={this.state.isAdvanced ? null : "fixed"}
                         closeMenuOnScroll={true}
                         classNamePrefix="select-config-secret-dropdown"
                         isMulti={true}
@@ -1483,7 +1483,7 @@ export default class CDPipeline extends Component<CDPipelineProps, CDPipelineSta
                     <div className="w-50 mr-8">
                         <div className="form__label dc__required-field">Environment</div>
                         <ReactSelect
-                            menuPortalTarget={this.state.isAdvanced ? null : document.getElementById('visible-modal')}
+                            menuPosition={this.state.isAdvanced ? null : "fixed"}
                             closeMenuOnScroll={true}
                             isDisabled={!!this.props.match.params.cdPipelineId}
                             classNamePrefix="cd-pipeline-environment-dropdown"
@@ -1761,7 +1761,7 @@ export default class CDPipeline extends Component<CDPipelineProps, CDPipelineSta
                         <p className="fs-14 fw-6 cn-9 mb-8 mt-20">Deployment Strategy</p>
                         <p className="fs-13 fw-5 cn-7 mb-8">Configure deployment preferences for this pipeline</p>
                         <ReactSelect
-                            menuPortalTarget={document.getElementById('visible-modal')}
+                            menuPosition="fixed"
                             closeMenuOnScroll={true}
                             classNamePrefix="deployment-strategy-dropdown"
                             isSearchable={false}

src/components/ciPipeline/SourceMaterials.tsx

@@ -161,7 +161,7 @@ export const SourceMaterials: React.FC<SourceMaterialsProps> = function (props)
                                             placeholder="Source Type"
                                             classNamePrefix={`select-build-pipeline-sourcetype-${index}`}
                                             isSearchable={false}
-                                            menuPortalTarget={document.getElementById('visible-modal')}
+                                            menuPosition="fixed"
                                             options={
                                                 !isMultiGit
                                                     ? props.ciPipelineSourceTypeOptions

src/components/cluster/UseNameListDropdown.tsx

@@ -25,7 +25,7 @@ export default function UserNameDropDownList({ clusterDetail, selectedUserNameOp
                 options={userNameOptions}
                 value={selectedUserNameOptions[clusterDetail.cluster_name]}
                 isSearchable={false}
-                menuPortalTarget={document.getElementById('visible-modal')}
+                menuPosition="fixed"
                 onChange={handleUserChange}
                 menuPlacement="auto"
                 components={{

src/components/security/SecurityPolicyEdit.tsx

@@ -371,7 +371,7 @@ export class SecurityPolicyEdit extends Component<FetchPolicyQueryParams, GetVul
                                         </td>
                                         <td className="security-policy__data-cell">
                                             <ReactSelect
-                                                menuPortalTarget={document.getElementById('root')}
+                                                menuPosition="fixed"
                                                 closeMenuOnScroll={true}
                                                 value={selectedValue}
                                                 onChange={(selected) => {