feat: [M3-8665] - add option to copy token in LKE details page. (lino…

…de#11179) * feat: [M3-8665] - add option to copy token in LKE details page. * Added changeset: option to copy token in LKE details page * Change the "Copy Token" button to use asynchronous functionality * remove extra styling * refactor: [M3-8665] - add option to copy token in LKE details page. * Change cypress test for LKE update spec
pmakode-akamai · Nov 11, 2024 · abbedaf · abbedaf
1 parent 5fc6839
commit abbedaf
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 3 deletions.
diff --git a/packages/manager/.changeset/pr-11179-added-1730201665174.md b/packages/manager/.changeset/pr-11179-added-1730201665174.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+option to copy token in LKE details page ([#11179](https://github.com/linode/manager/pull/11179))
diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts
@@ -730,7 +730,7 @@ describe('LKE cluster updates', () => {
       cy.wait(['@getCluster', '@getNodePools', '@getVersions']);
 
       // Click "Reset" button, proceed through confirmation dialog.
-      cy.findByText('Reset').should('be.visible').click();
+      cy.findByText('Reset').should('be.visible').click({ force: true });
       ui.dialog
         .findByTitle('Reset Cluster Kubeconfig?')
         .should('be.visible')

diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx
@@ -6,6 +6,7 @@ import { makeStyles } from 'tss-react/mui';
 import DetailsIcon from 'src/assets/icons/code-file.svg';
 import DownloadIcon from 'src/assets/icons/lke-download.svg';
 import ResetIcon from 'src/assets/icons/reset.svg';
+import CopyIcon from 'src/assets/icons/copy.svg';
 import { MaskableText } from 'src/components/MaskableText/MaskableText';
 import { Typography } from 'src/components/Typography';
 import {
@@ -14,8 +15,11 @@ import {
 } from 'src/queries/kubernetes';
 import { downloadFile } from 'src/utilities/downloadFile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
+import copy from 'copy-to-clipboard';
+import { CircleProgress } from 'src/components/CircleProgress';
 
 import type { Theme } from '@mui/material/styles';
+import { APIError } from '@linode/api-v4';
 
 interface Props {
   clusterId: number;
@@ -101,7 +105,30 @@ export const KubeConfigDisplay = (props: Props) => {
   const { enqueueSnackbar } = useSnackbar();
   const { classes, cx } = useStyles();
 
-  const { refetch } = useKubenetesKubeConfigQuery(clusterId);
+  const { isFetching, refetch: getKubeConfig } = useKubenetesKubeConfigQuery(
+    clusterId,
+    false
+  );
+
+  const onCopyToken = async () => {
+    try {
+      const { data } = await getKubeConfig();
+      const token = data && data.match(/token:\s*(\S+)/);
+      if (token && token[1]) {
+        copy(token[1]);
+      } else {
+        enqueueSnackbar({
+          message: 'Unable to find token within the Kubeconfig',
+          variant: 'error',
+        });
+      }
+    } catch (error) {
+      enqueueSnackbar({
+        message: (error as APIError[])[0].reason,
+        variant: 'error',
+      });
+    }
+  };
 
   const {
     data: endpoints,
@@ -111,7 +138,7 @@ export const KubeConfigDisplay = (props: Props) => {
 
   const downloadKubeConfig = async () => {
     try {
-      const { data } = await refetch();
+      const { data } = await getKubeConfig();
 
       if (data) {
         downloadFile(`${clusterLabel}-kubeconfig.yaml`, data);
@@ -168,6 +195,23 @@ export const KubeConfigDisplay = (props: Props) => {
             <DetailsIcon className={classes.kubeconfigIcons} />
             <Typography className={classes.kubeconfigFileText}>View</Typography>
           </Box>
+          <Box
+            className={classes.kubeconfigElement}
+            onClick={onCopyToken}
+            sx={{ marginLeft: isFetching ? 1.25 : 0 }}
+          >
+            {isFetching ? (
+              <CircleProgress noPadding={true} size="xs" />
+            ) : (
+              <CopyIcon className={classes.kubeconfigIcons} />
+            )}
+            <Box
+              className={classes.kubeconfigFileText}
+              sx={{ marginLeft: isFetching ? 1 : 0 }}
+            >
+              Copy Token
+            </Box>
+          </Box>
           <Box
             className={classes.kubeconfigElement}
             onClick={() => setResetKubeConfigDialogOpen(true)}