fix: [M3-9063] - Display Kubernetes API endpoint for LKE-E cluster (l…

…inode#11485)

## 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`)

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))

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();
+    });
+  });
+});

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]
     );
   };