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