Merge pull request #2188 from devtron-labs/fix/kubecon-ephemeral-fix

fix: Ephemeral delete icon missing in the dropdown

.eslintignore

@@ -404,7 +404,7 @@ src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/__tes
 src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/constants.ts
 src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.type.ts
 src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.api.ts
-src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.ts
+src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.tsx
 src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx
 src/components/v2/appDetails/k8Resource/nodeType/NodeDelete.component.tsx
 src/components/v2/appDetails/k8Resource/nodeType/NodeTree.component.tsx

src/components/v2/appDetails/k8Resource/k8resources.scss

@@ -47,3 +47,12 @@
         grid-template-columns: 1fr 1fr 20px;
     }
 }
+
+.ephemeral-delete-button .dc__hover-color-r500 {
+    &--fill:hover {
+        path {
+            fill: var(--R500);
+        }
+    }
+
+}

src/components/v2/appDetails/k8Resource/nodeDetail/DeleteEphemeralButton.tsx

@@ -0,0 +1,75 @@
+import { ToastManager, ToastVariantType, showError, IndexStore } from '@devtron-labs/devtron-fe-common-lib'
+import { ReactComponent as Close } from '@Icons/ic-cross.svg'
+import { useParams } from 'react-router-dom'
+import { deleteEphemeralUrl } from './nodeDetail.api'
+import { DeleteEphemeralButtonType, ParamsType, ResponsePayload } from './nodeDetail.type'
+import '../k8resources.scss'
+
+export const DeleteEphemeralButton = ({
+    containerName,
+    isResourceBrowserView,
+    selectedNamespace,
+    selectedClusterId,
+    selectedPodName,
+    switchSelectedContainer,
+    setContainers,
+    containers,
+    isExternal,
+}: DeleteEphemeralButtonType) => {
+    const params = useParams<ParamsType>()
+    const { clusterId, environmentId, namespace, appName, appId, appType, fluxTemplateType } =
+        IndexStore.getAppDetails()
+
+    const getPayload = () => {
+        const payload: ResponsePayload = {
+            namespace: selectedNamespace,
+            clusterId: selectedClusterId,
+            podName: selectedPodName,
+            basicData: {
+                containerName,
+            },
+        }
+        return payload
+    }
+
+    const deleteEphemeralContainer = async () => {
+        try {
+            const { result } = await deleteEphemeralUrl({
+                requestData: getPayload(),
+                clusterId,
+                environmentId,
+                namespace,
+                appName,
+                appId,
+                appType,
+                fluxTemplateType,
+                isResourceBrowserView,
+                params,
+            })
+
+            const updatedContainers = containers.filter((con) => con.name !== result) || []
+            switchSelectedContainer(updatedContainers[0].name || '')
+            setContainers(updatedContainers)
+            ToastManager.showToast({
+                variant: ToastVariantType.success,
+                description: 'Deleted successfully',
+            })
+        } catch (error) {
+            showError(error)
+        }
+    }
+
+    return (
+        // Not using button component from devtron-fe-common-lib due to icon size visibility issue
+        <button
+            onClick={deleteEphemeralContainer}
+            type="button"
+            aria-label="delete-button"
+            className="ephemeral-delete-button dc__unset-button-styles"
+            disabled={!!isExternal}
+            data-testid="ephemeral-delete-button"
+        >
+            <Close className="icon-dim-16 dc__hover-color-r500--fill" />
+        </button>
+    )
+}

src/components/v2/appDetails/k8Resource/nodeDetail/EphemeralContainerDrawer.tsx

@@ -74,6 +74,7 @@ const EphemeralContainerDrawer = ({
     switchSelectedContainer,
     onClickShowLaunchEphemeral,
     selectedNamespaceByClickingPod,
+    handleSuccess
 }: EphemeralContainerDrawerType) => {
     const [switchManifest, setSwitchManifest] = useState<string>(SwitchItemValues.Configuration)
     const [loader, setLoader] = useState<boolean>(false)
@@ -500,6 +501,7 @@ const EphemeralContainerDrawer = ({
                 setResourceContainers(_containers)
                 setShowEphemeralContainerDrawer(false)
                 switchSelectedContainer(containerName)
+                handleSuccess()
             })
             .catch((err) => {
                 showError(err)

src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetail.component.tsx

@@ -252,9 +252,9 @@ const NodeDetailComponent = ({
                 }
             }
 
-            if (result?.ephemeralContainers) {
+            if (result?.manifestResponse.ephemeralContainers) {
                 _resourceContainers.push(
-                    ...result.ephemeralContainers.map((_container) => ({
+                    ...result.manifestResponse.ephemeralContainers.map((_container) => ({
                         name: _container.name,
                         isInitContainer: false,
                         isEphemeralContainer: true,
@@ -647,6 +647,7 @@ const NodeDetailComponent = ({
                     setContainers={setContainers}
                     switchSelectedContainer={switchSelectedContainer}
                     selectedNamespaceByClickingPod={selectedResource?.namespace}
+                    handleSuccess={getContainersFromManifest}
                 />
             )}
             {isResourceBrowserView && showDeleteDialog && (
@@ -657,7 +658,7 @@ const NodeDetailComponent = ({
                         gvk: {
                             Group: selectedResource.group,
                             Version: selectedResource.version,
-                            Kind: selectedResource.kind as Nodes,
+                            Kind: selectedResource.kind as NodeType,
                         },
                         namespaced: false,
                     }}

src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Terminal.component.tsx

@@ -16,18 +16,13 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { useParams, useRouteMatch } from 'react-router-dom'
-import { get, showError, stopPropagation, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
-import { components } from 'react-select'
-import Tippy from '@tippyjs/react'
-import { NodeDetailTab, ResponsePayload } from '../nodeDetail.type'
+import { get, showError } from '@devtron-labs/devtron-fe-common-lib'
+import { NodeDetailTab } from '../nodeDetail.type'
 import IndexStore from '../../../index.store'
 import MessageUI from '../../../../common/message.ui'
-import { getCustomOptionSelectionStyle } from '../../../../common/ReactSelect.utils'
 import {
     getK8sResourcePayloadAppType,
-    getContainerSelectStyles,
     getGroupedContainerOptions,
-    getShellSelectStyles,
 } from '../nodeDetail.util'
 import { shellTypes } from '../../../../../../config/constants'
 import { OptionType } from '../../../../../app/types'
@@ -38,7 +33,6 @@ import { TerminalSelectionListDataType } from './terminal/terminal.type'
 import { SocketConnectionType } from '../../../../../ClusterNodes/constants'
 import { TerminalWrapperType } from './terminal/constants'
 import { getAppId, generateDevtronAppIdentiferForK8sRequest, deleteEphemeralUrl } from '../nodeDetail.api'
-import { ReactComponent as Cross } from '../../../../../../assets/icons/ic-cross.svg'
 
 let clusterTimeOut
 
@@ -81,89 +75,6 @@ const TerminalComponent = ({
         (nd) => nd.name === params.podName || nd.name === params.podName,
     )?.namespace
 
-    function Option(props) {
-        const { selectProps, data, style } = props
-        const getPayload = (containerName: string) => {
-            const payload: ResponsePayload = {
-                namespace: isResourceBrowserView ? selectedResource.namespace : selectedNamespace,
-                clusterId: isResourceBrowserView ? Number(params.clusterId) : appDetails.clusterId,
-                podName: isResourceBrowserView ? params.node : params.podName,
-                basicData: {
-                    containerName,
-                },
-            }
-            return payload
-        }
-
-        const deleteEphemeralContainer = (containerName: string) => {
-            deleteEphemeralUrl({
-                requestData: getPayload(containerName),
-                clusterId: appDetails.clusterId,
-                environmentId: appDetails.environmentId,
-                namespace: appDetails.namespace,
-                appName: appDetails.appName,
-                appId: appDetails.appId,
-                appType: appDetails.appType,
-                fluxTemplateType: appDetails.fluxTemplateType,
-                isResourceBrowserView,
-                params,
-            })
-                .then((response: any) => {
-                    const _containers: Options[] = []
-                    const containerName = response.result
-                    containers?.forEach((con) => {
-                        if (containerName !== con.name) {
-                            _containers.push(con)
-                        }
-                    })
-                    switchSelectedContainer(containers?.[0]?.name || '')
-                    setContainers(_containers)
-                    ToastManager.showToast({
-                        variant: ToastVariantType.success,
-                        description: 'Deleted successfully',
-                    })
-                })
-                .catch((error) => {
-                    showError(error)
-                })
-        }
-
-        selectProps.styles.option = getCustomOptionSelectionStyle(style)
-        const getOption = () => {
-            return (
-                <div onClick={stopPropagation}>
-                    <components.Option {...props}>
-                        <div className={` ${data.isEphemeralContainer ? 'flex dc__content-space' : ''}`}>
-                            {data.isEphemeralContainer && (
-                                <Tippy
-                                    className="default-white"
-                                    arrow={false}
-                                    placement="bottom"
-                                    content={`${data.isExternal ? 'Externally created ephemeral containers cannot be removed' : 'Remove container'}`}
-                                >
-                                    <div className="flex">
-                                        <Cross
-                                            className={`icon-dim-16 ${data.isExternal ? 'cursor-not-allowed dc__opacity-0_5' : 'cursor'} ${props.isFocused && !data.isExternal ? 'scr-5' : ''}`}
-                                            onClick={(selected) => {
-                                                stopPropagation(selected)
-                                                if (!data.isExternal) {
-                                                    deleteEphemeralContainer(props.label)
-                                                }
-                                            }}
-                                        />
-                                    </div>
-                                </Tippy>
-                            )}
-                            {props.label}
-                        </div>
-                    </components.Option>
-                </div>
-            )
-        }
-
-        return getOption()
-    }
-
     const generateSessionURL = () => {
         const appId =
             appDetails.appType == AppType.DEVTRON_APP
@@ -303,7 +214,17 @@ const TerminalComponent = ({
                 classNamePrefix: 'containers-select',
                 title: 'Container',
                 placeholder: 'Select container',
-                options: getGroupedContainerOptions(containers, true),
+                options: getGroupedContainerOptions(
+                    containers,
+                    true,
+                    isResourceBrowserView,
+                    setContainers,
+                    isResourceBrowserView ? selectedResource.namespace : selectedNamespace,
+                    isResourceBrowserView ? Number(params.clusterId) : appDetails.clusterId,
+                    isResourceBrowserView ? params.node : params.podName,
+                    switchSelectedContainer,
+                    params,
+                ),
                 value: selectedContainerName,
                 onChange: handleContainerChange,
             },
@@ -316,11 +237,6 @@ const TerminalComponent = ({
                 defaultValue: shellTypes[0],
                 onChange: handleShellChange,
                 value: selectedTerminalType,
-                styles: getShellSelectStyles(),
-                components: {
-                    IndicatorSeparator: null,
-                    Option,
-                },
             },
             {
                 type: TerminalWrapperType.DOWNLOAD_FILE_FOLDER,

src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.utils.tsx

@@ -94,6 +94,7 @@ const reactSelect = (selectData: ReactSelectType) => {
                 value={selectData.value}
                 onChange={selectData.onChange}
                 variant={SelectPickerVariantType.BORDER_LESS}
+                showSelectedOptionIcon={false}
             />
         </>
     )

src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.type.ts

@@ -15,7 +15,7 @@
  */
 
 import React from 'react'
-import { OptionType } from '@devtron-labs/devtron-fe-common-lib'
+import { OptionType, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
 import { AppDetails, Options, OptionsBase, SelectedResourceType } from '../../appDetails.type'
 import { CUSTOM_LOGS_FILTER, MANIFEST_KEY_FIELDS } from '../../../../../config'
 import { CustomLogFilterOptionsType, SelectedCustomLogFilterType } from './NodeDetailTabs/node.type'
@@ -70,6 +70,7 @@ export interface EphemeralContainerDrawerType {
     switchSelectedContainer: (string) => void
     onClickShowLaunchEphemeral: () => void
     selectedNamespaceByClickingPod?: string
+    handleSuccess: () => void
 }
 
 export interface ResponsePayload {
@@ -148,3 +149,19 @@ export interface GetResourceRequestPayloadParamsType {
     selectedResource?: SelectedResourceType
     updatedManifest?: string
 }
+export interface EphemeralContainerOptionsType extends SelectPickerOptionType {
+    isExternal: boolean
+    isEphemeralContainer: boolean
+}
+
+export interface DeleteEphemeralButtonType {
+    containerName: string
+    isResourceBrowserView: boolean
+    selectedNamespace: string
+    selectedClusterId: number
+    selectedPodName: string
+    switchSelectedContainer: (string) => void
+    setContainers: React.Dispatch<React.SetStateAction<Options[]>>
+    containers: Options[]
+    isExternal: boolean
+}