Merge pull request #2728 from devtron-labs/feat/react-query-setup

feat: integrate QueryClientProvider

Author: RohitRaj011

.eslintignore

@@ -370,7 +370,6 @@ src/components/workflowEditor/workflowEditor.tsx
 src/config/constants.ts
 src/config/routes.ts
 src/config/utils.ts
-src/index.tsx
 src/services/fetchWithFullRoute.ts
 src/services/service.ts
 src/services/service.types.ts

.eslintrc.js

@@ -18,7 +18,7 @@ const tsconfigPath = require('./tsconfig.json')
 
 module.exports = {
     parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint', 'react', 'prettier', 'import', 'simple-import-sort'],
+    plugins: ['@typescript-eslint', 'react', 'prettier', 'import', 'simple-import-sort', '@tanstack/query'],
     env: {
         browser: true,
         es2021: true,
@@ -42,6 +42,7 @@ module.exports = {
         'airbnb',
         'airbnb/hooks',
         'prettier',
+        'plugin:@tanstack/query/recommended',
     ],
     rules: {
         'prettier/prettier': ['error'],
@@ -126,9 +127,9 @@ module.exports = {
                     // Side effect imports.
                     ['^\\u0000'],
                     // Put same-folder imports, `..` and `.` last. Other relative imports.
-                    ['^\\.\\.(?!/?$)', '^\\.\\./?$', '^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$',],
+                    ['^\\.\\.(?!/?$)', '^\\.\\./?$', '^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
                     // Style imports.
-                    [ '^.+\\.?(css|scss)$'],
+                    ['^.+\\.?(css|scss)$'],
                 ],
             },
         ],

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.17.0-pre-15",
+        "@devtron-labs/devtron-fe-common-lib": "1.18.0-pre-0",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -70,12 +70,14 @@
     "devDependencies": {
         "@playwright/test": "^1.32.1",
         "@sentry/cli": "^2.2.0",
+        "@tanstack/eslint-plugin-query": "<5",
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.4",
         "@types/jest": "^27.4.1",
         "@types/node": "20.11.0",
         "@types/react": "17.0.39",
         "@types/react-csv": "^1.1.3",
+        "@types/react-dates": "^21.8.6",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-transition-group": "^4.4.4",

src/components/ClusterNodes/ClusterTerminal.tsx

@@ -15,7 +15,7 @@
  */
 
 import { useEffect, useRef, useState } from 'react'
-import { useHistory, useLocation, useParams } from 'react-router-dom'
+import { generatePath, useHistory, useLocation } from 'react-router-dom'
 
 import {
     Checkbox,
@@ -27,6 +27,7 @@ import {
     NodeTaintType,
     noop,
     OptionType,
+    RESOURCE_BROWSER_ROUTES,
     ResponseType,
     SelectPickerOptionType,
     ServerErrors,
@@ -35,12 +36,11 @@ import {
     TabProps,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { K8sResourceListURLParams } from '@Components/ResourceBrowser/ResourceList/types'
+import { ResourceBrowserTabsId } from '@Components/ResourceBrowser/Constants'
 import { getClusterTerminalParamsData } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.util'
 
 import { BUSYBOX_LINK, DEFAULT_CONTAINER_NAME, NETSHOOT_LINK, shellTypes } from '../../config/constants'
 import { clusterImageDescription, convertToOptionsList } from '../common'
-import { AppDetailsTabs } from '../v2/appDetails/appDetails.store'
 import {
     EditModeType,
     TERMINAL_STATUS,
@@ -84,11 +84,15 @@ const ClusterTerminal = ({
     clusterImageList,
     namespaceList = [],
     taints,
-    updateTerminalTabUrl,
+    updateTabUrl,
 }: ClusterTerminalType) => {
-    const { kind } = useParams<K8sResourceListURLParams>()
     const { replace } = useHistory()
     const location = useLocation()
+    const isAdminTerminalVisible =
+        location.pathname ===
+        generatePath(RESOURCE_BROWSER_ROUTES.TERMINAL, {
+            clusterId,
+        })
     const queryParams = new URLSearchParams(location.search)
     const terminalAccessIdRef = useRef()
     const clusterShellTypes = shellTypes.filter((types) => types.label === 'sh' || types.label === 'bash')
@@ -157,7 +161,7 @@ const ClusterTerminal = ({
     }
 
     useEffect(() => {
-        if (kind !== 'terminal' || queryParamsData.selectedNode.value === selectedNodeName.value || !update) {
+        if (!isAdminTerminalVisible || queryParamsData.selectedNode.value === selectedNodeName.value || !update) {
             return
         }
         /* NOTE: update selectedNodeName */
@@ -182,8 +186,11 @@ const ClusterTerminal = ({
         queryParams.set('namespace', selectedNamespace.value)
         queryParams.set('shell', selectedTerminalType.value)
         queryParams.set('node', selectedNodeName.value)
-        updateTerminalTabUrl(queryParams.toString())
-        if (kind === AppDetailsTabs.terminal) {
+        updateTabUrl({
+            id: ResourceBrowserTabsId.terminal,
+            url: `${generatePath(RESOURCE_BROWSER_ROUTES.TERMINAL, { clusterId })}?${queryParams.toString()}`,
+        })
+        if (isAdminTerminalVisible) {
             replace({ search: queryParams.toString() })
         }
     }, [selectedNodeName.value, selectedNamespace.value, selectedImage.value, selectedTerminalType.value])
@@ -1031,7 +1038,7 @@ const ClusterTerminal = ({
                 renderConnectionStrip: renderStripMessage(),
                 setSocketConnection,
                 socketConnection,
-                isTerminalTab: selectedTabIndex === 0 && kind === 'terminal',
+                isTerminalTab: selectedTabIndex === 0 && isAdminTerminalVisible,
                 sessionId,
                 registerLinkMatcher: renderRegisterLinkMatcher,
             },

src/components/ClusterNodes/types.ts

@@ -155,7 +155,7 @@ export interface ClusterTerminalType {
     namespaceList: string[]
     nodeGroups: SelectGroupType[]
     taints: Map<string, NodeTaintType[]>
-    updateTerminalTabUrl: (queryParams: string) => void
+    updateTabUrl: UseTabsReturnType['updateTabUrl']
 }
 
 export const TEXT_COLOR_CLASS = {

src/components/ResourceBrowser/PageHeader.buttons.tsx

@@ -47,9 +47,9 @@ export const CreateResourceButton: React.FC<CreateResourceButtonType> = ({ clust
         })
     }
 
-    const handleModalClose = () => {
+    const handleModalClose = (shouldUpdate: boolean) => {
         setShowModal(false)
-        closeModal(true)
+        closeModal(shouldUpdate)
     }
 
     return (

src/components/ResourceBrowser/ResourceList/AdminTerminal.tsx

@@ -27,7 +27,7 @@ import ClusterTerminal from '../../ClusterNodes/ClusterTerminal'
 import { createGroupSelectList, filterImageList } from '../../common'
 import { AdminTerminalProps, ClusterDetailBaseParams } from '../Types'
 
-const AdminTerminal: React.FC<AdminTerminalProps> = ({ updateTerminalTabUrl }: AdminTerminalProps) => {
+const AdminTerminal: React.FC<AdminTerminalProps> = ({ updateTabUrl }: AdminTerminalProps) => {
     const { clusterId } = useParams<ClusterDetailBaseParams>()
 
     const [loading, data, error] = useAsync(
@@ -72,7 +72,7 @@ const AdminTerminal: React.FC<AdminTerminalProps> = ({ updateTerminalTabUrl }: A
             taints={details.taints}
             clusterImageList={details.clusterImageList}
             namespaceList={details.namespaceList}
-            updateTerminalTabUrl={updateTerminalTabUrl}
+            updateTabUrl={updateTabUrl}
         />
     )
 }

src/components/ResourceBrowser/ResourceList/AdminTerminalDummy.tsx

@@ -46,12 +46,13 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
     const [loader, setLoader] = useState(false)
     const [resourceYAML, setResourceYAML] = useState('')
     const [resourceResponse, setResourceResponse] = useState<CreateResourceDTO[]>(null)
+    const [needsUpdate, setNeedsUpdate] = useState(false)
 
     const onClose = (): void => {
         if (loader) {
             return
         }
-        closePopup(true)
+        closePopup(needsUpdate)
     }
 
     useEffect(() => {
@@ -85,6 +86,7 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
             if (result) {
                 setResourceResponse(result)
                 toggleCodeEditorView(false)
+                setNeedsUpdate(true)
             }
         } catch (err) {
             showError(err)
@@ -96,7 +98,7 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
     const renderFooter = (): JSX.Element => {
         if (showCodeEditorView) {
             return (
-                <div className="dc__border-top flex right p-16">
+                <div className="dc__border-top flex right p-16 dc__gap-8">
                     <Button
                         dataTestId="cancel-create-resource"
                         text={CREATE_RESOURCE_MODAL_MESSAGING.actionButtonText.cancel}

src/components/ResourceBrowser/ResourceList/CreateResource.tsx

@@ -61,5 +61,7 @@ export const DynamicTabComponentWrapper = ({
         updateTabUrl({ id: tabId, url: `${pathname}${search}` })
     }, [pathname, search])
 
-    return cloneElement(children, { ...children.props, key: getTabById(tabId)?.componentKey }) as ReactElement
+    return children
+        ? (cloneElement(children, { ...children.props, key: getTabById(tabId)?.componentKey }) as ReactElement)
+        : null
 }