Merge pull request #2863 from devtron-labs/fix/focus-trap-misc

chore: focus trap and misc fixes

Author: arunjaindev

package.json

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

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.components.tsx

@@ -26,6 +26,7 @@ import { importComponentFromFELibrary } from '@Components/common'
 import { URLS } from '@Config/routes'
 
 import {
+    Cluster,
     ClusterEnvTabs,
     ClusterListFields,
     ClusterRowData,
@@ -257,7 +258,7 @@ export const AddEnvironment = ({
     handleClose,
 }: {
     reloadEnvironments: () => void
-    handleClose
+    handleClose: () => void
 }) => {
     const { clusterId } = useParams<{ clusterId?: string }>()
 
@@ -271,6 +272,29 @@ export const AddEnvironment = ({
     )
 }
 
+export const AddEnvironmentFromClusterName = ({
+    reloadEnvironments,
+    handleClose,
+    clusterList,
+}: {
+    clusterList: Cluster[]
+    reloadEnvironments: () => void
+    handleClose: () => void
+}) => {
+    const { clusterName } = useParams<{ clusterName?: string }>()
+
+    const clusterId = clusterList.find((c) => c.clusterName === clusterName)?.clusterId
+
+    return (
+        <ClusterEnvironmentDrawer
+            drawerType="addEnv"
+            reload={reloadEnvironments}
+            clusterId={clusterId}
+            hideClusterDrawer={handleClose}
+        />
+    )
+}
+
 export const EditCluster = ({ clusterList, reloadClusterList, handleClose }: EditDeleteClusterProps) => {
     const { clusterId } = useParams<{ clusterId: string }>()
     const cluster = clusterList.find((c) => c.clusterId === +clusterId)

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.tsx

@@ -69,6 +69,7 @@ import {
 import { parseClusterEnvSearchParams } from './cluster.util'
 import {
     AddEnvironment,
+    AddEnvironmentFromClusterName,
     ClusterEnvLoader,
     ClusterListCellComponent,
     DeleteCluster,
@@ -453,6 +454,16 @@ const ClusterList = () => {
                 <Route path={`${URLS.GLOBAL_CONFIG_CLUSTER}${URLS.CREATE_ENVIRONMENT}/:clusterId?`}>
                     <AddEnvironment reloadEnvironments={reloadEnvironments} handleClose={handleRedirectToClusterList} />
                 </Route>
+                {/* Below route is to maintain backward compatibility and redirection from various places in dashboard */}
+                {clusterListResult && (
+                    <Route path={`${URLS.GLOBAL_CONFIG_CLUSTER}/:clusterName${URLS.CREATE_ENVIRONMENT}`}>
+                        <AddEnvironmentFromClusterName
+                            clusterList={clusterListResult ?? []}
+                            reloadEnvironments={reloadEnvironments}
+                            handleClose={handleRedirectToClusterList}
+                        />
+                    </Route>
+                )}
                 {PodSpreadModal && (
                     <Route
                         path={`${URLS.GLOBAL_CONFIG_CLUSTER}/${URLS.POD_SPREAD}/:clusterId`}

src/Pages/GlobalConfigurations/ClustersAndEnvironments/EnvironmentList.tsx

@@ -276,7 +276,7 @@ const ClustersEnvironmentsList = ({
         <>
             {/* Cluster metadata */}
             <div
-                className="px-20 py-6 bg__secondary dc__grid dc__align-items-center cluster-metadata-header dc__gap-16 dc__content-start fs-12 lh-20 cn-7 dc__position-sticky"
+                className="dc__zi-1 px-20 py-6 bg__secondary dc__grid dc__align-items-center cluster-metadata-header dc__gap-16 dc__content-start fs-12 lh-20 cn-7 dc__position-sticky"
                 style={{ top: '37px' }}
             >
                 <ClusterIconWithStatus clusterStatus={status} isVirtualCluster={isVirtualCluster} />
@@ -394,7 +394,7 @@ const EnvironmentList = ({
     return (
         <>
             <div
-                className={`border__secondary--bottom bg__primary px-20 py-10 dc__grid environment-row ${isFELibAvailable ? 'with-category' : ''} dc__align-items-center dc__position-sticky dc__top-0`}
+                className={`border__secondary--bottom bg__primary px-20 py-10 dc__grid environment-row dc__zi-1 ${isFELibAvailable ? 'with-category' : ''} dc__align-items-center dc__position-sticky dc__top-0`}
             >
                 {/* Empty div for icon */}
                 <div />

src/components/common/ExportToCsv/ExportToCsv.tsx

@@ -19,6 +19,7 @@ import { CSVLink } from 'react-csv'
 import moment from 'moment'
 
 import {
+    ALLOW_ACTION_OUTSIDE_FOCUS_TRAP,
     Button,
     ButtonStyleType,
     ButtonVariantType,
@@ -271,6 +272,7 @@ const ExportToCsv = <ConfigValueType extends string = string>({
                 filename={`${fileName}_${moment().format(Moment12HourExportFormat)}.csv`}
                 headers={CSV_HEADERS[fileName] || []}
                 data={dataToExport || []}
+                className={ALLOW_ACTION_OUTSIDE_FOCUS_TRAP}
             />
             {!hideExportResultModal && (showExportingModal || isConfigurationAvailable) && (
                 <VisibleModal className="export-to-csv-modal" data-testid="export-to-csv-modal">

src/components/login/LoginForm.tsx

@@ -152,7 +152,7 @@ export const LoginForm = ({ loginList }: LoginFormType) => {
                     </div>
                 </div>
             </div>
-            <div className="flexbox-col dc__gap-12">
+            <div className="flexbox-col dc__align-items-center dc__gap-12">
                 <Button
                     disabled={loading || !form.password}
                     isLoading={loading}

yarn.lock

@@ -1722,9 +1722,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.18.1-pre-5":
-  version: 1.18.1-pre-5
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.18.1-pre-5"
+"@devtron-labs/devtron-fe-common-lib@npm:1.18.1-pre-7":
+  version: 1.18.1-pre-7
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.18.1-pre-7"
   dependencies:
     "@codemirror/autocomplete": "npm:6.18.6"
     "@codemirror/lang-json": "npm:6.0.1"
@@ -1774,7 +1774,7 @@ __metadata:
     react-select: 5.8.0
     rxjs: ^7.8.1
     yaml: ^2.4.1
-  checksum: 10c0/19e424e01f39f857ac2ef5b8eea4bc368ffdd0dd9caf5a77b95968f0b9923a7cca9f9649746822c260d1493fd02834f029410113ca9805a7fc1a235bbad9d0a5
+  checksum: 10c0/e1c09afd682b656be36c9170ab914e38009b58f204e74ad96468deb5ba46d5546c2e56b08bf25fa8f42e9b32d88adc04db234b376bee18e11f74d7d414ac46e1
   languageName: node
   linkType: hard
 
@@ -5721,7 +5721,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dashboard@workspace:."
   dependencies:
-    "@devtron-labs/devtron-fe-common-lib": "npm:1.18.1-pre-5"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.18.1-pre-7"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"