From c308bb37c1d3400da0cf686629fb644752af3f15 Mon Sep 17 00:00:00 2001
From: Hana Xu <115299789+hana-akamai@users.noreply.github.com>
Date: Wed, 8 Jan 2025 14:57:19 -0500
Subject: [PATCH] fix: [M3-9063] - Display Kubernetes API endpoint for LKE-E
 cluster (#11485)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description 📝
Due to the way that existing code was written, we were only returning Kubernetes API endpoints for clusters if the endpoint matched port 443 (e.g. `/linodelke\.net:443`). However, LKE-E endpoints use the `6443` port so nothing was returning

This PR adds a check to render the first available endpoint if port 443 is not available

## Changes  🔄

List any change(s) relevant to the reviewer.

- Render the first available endpoint if endpoint with port 443 is not available
- Added some unit tests

## How to test 🧪

### Prerequisites

(How to setup test environment)

- Ensure you have LKE-E customer tags (check project tracker)
- Have an LKE-E cluster created

### Reproduction steps

(How to reproduce the issue, if applicable)

- [ ] On another branch (e.g. `develop`), go to the details page of an LKE-E cluster
- [ ] The Kubernetes API endpoint displays `Your endpoint will be displayed here once it is available.`

### Verification steps

(How to verify changes)

- [ ] Checkout this PR or use the preview link, go to the details page of an LKE-E cluster
- [ ] The Kubernetes API endpoint displays the first endpoint available (should be something like `https://lke287706.us-ord.enterprise.linodelke.net:6443`)
---
 .../pr-11485-fixed-1736282505902.md           |  5 ++
 .../KubeConfigDisplay.test.tsx                | 65 +++++++++++++++++++
 .../KubeConfigDisplay.tsx                     | 10 +--
 3 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-11485-fixed-1736282505902.md
 create mode 100644 packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.test.tsx

diff --git a/packages/manager/.changeset/pr-11485-fixed-1736282505902.md b/packages/manager/.changeset/pr-11485-fixed-1736282505902.md
new file mode 100644
index 00000000000..cee3b0247d5
--- /dev/null
+++ b/packages/manager/.changeset/pr-11485-fixed-1736282505902.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Display Kubernetes API endpoint for LKE-E cluster ([#11485](https://github.com/linode/manager/pull/11485))
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.test.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.test.tsx
new file mode 100644
index 00000000000..27d362eb134
--- /dev/null
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.test.tsx
@@ -0,0 +1,65 @@
+import { waitFor } from '@testing-library/react';
+import * as React from 'react';
+
+import { kubeEndpointFactory } from 'src/factories/kubernetesCluster';
+import { makeResourcePage } from 'src/mocks/serverHandlers';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { KubeConfigDisplay } from './KubeConfigDisplay';
+
+const props = {
+  clusterId: 1,
+  clusterLabel: 'cluster-test',
+  handleOpenDrawer: vi.fn(),
+  isResettingKubeConfig: false,
+  setResetKubeConfigDialogOpen: vi.fn(),
+};
+
+describe('KubeConfigDisplay', () => {
+  it('should display the endpoint with port 443 if it exists', async () => {
+    const endpoints = [
+      kubeEndpointFactory.build({
+        endpoint: `https://test.linodelke.net:6443`,
+      }),
+      kubeEndpointFactory.build({
+        endpoint: `https://test.linodelke.net:443`,
+      }),
+    ];
+
+    server.use(
+      http.get('*/lke/clusters/*/api-endpoints', () => {
+        return HttpResponse.json(makeResourcePage(endpoints));
+      })
+    );
+
+    const { getByText } = renderWithTheme(<KubeConfigDisplay {...props} />);
+
+    await waitFor(() => {
+      expect(getByText('https://test.linodelke.net:443')).toBeVisible();
+    });
+  });
+
+  it('should display first endpoint if the endpoint with port 443 does not exist', async () => {
+    const endpoints = [
+      kubeEndpointFactory.build({
+        endpoint: `https://test.linodelke.net:6443`,
+      }),
+      kubeEndpointFactory.build({
+        endpoint: `https://test.linodelke.net:123`,
+      }),
+    ];
+
+    server.use(
+      http.get('*/lke/clusters/*/api-endpoints', () => {
+        return HttpResponse.json(makeResourcePage(endpoints));
+      })
+    );
+
+    const { getByText } = renderWithTheme(<KubeConfigDisplay {...props} />);
+
+    await waitFor(() => {
+      expect(getByText('https://test.linodelke.net:6443')).toBeVisible();
+    });
+  });
+});
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx
index e32c4f236a4..8997d663b03 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     pointerEvents: 'none',
   },
   kubeconfigElement: {
-    '&:first-child': {
+    '&:first-of-type': {
       borderLeft: 'none',
     },
     '&:hover': {
@@ -154,9 +154,11 @@ export const KubeConfigDisplay = (props: Props) => {
   };
 
   const getEndpointToDisplay = (endpoints: string[]) => {
-    // Per discussions with the API team and UX, we should display only the endpoint with port 443, so we are matching on that.
-    return endpoints.find((thisResponse) =>
-      thisResponse.match(/linodelke\.net:443$/i)
+    // We are returning the endpoint with port 443 to be the most user-friendly, but if it doesn't exist, return the first endpoint available
+    return (
+      endpoints.find((thisResponse) =>
+        thisResponse.match(/linodelke\.net:443$/i)
+      ) ?? endpoints[0]
     );
   };