change: [M3-8175] - Refactor KubeConfigDrawer to use CodeBlock and ad…

…d Codeblock story (#11019) ## Description 📝 Refactor KubeConfigDrawer component to use the CodeBlock component for UI consistency. I also moved CodeBlock to the components folder since it is pretty generic and added a story for it ## Changes 🔄 List any change relevant to the reviewer. - Refactor `KubeConfigDrawer` to use `CodeBlock` component and minor cleanup - Moved `CodeBlock` from `features` to `components` folder and decoupled it a bit from Linode Create - Added `CodeBlock` story ## How to test 🧪 ### Prerequisites ### Verification steps (How to verify changes) - Create a cluster pointing to dev API - Once the cluster is provisioned, go to the cluster's details page - Click on View under Kubeconfig - Confirm new UI and no regressions - Delete the cluster afterward - Run storybook locally and confirm CodeBlock story
linode · Oct 4, 2024 · 34d5d1f · 34d5d1f
1 parent 47585a9
commit 34d5d1f
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 55 deletions.
diff --git a/packages/manager/.changeset/pr-11019-changed-1727727502564.md b/packages/manager/.changeset/pr-11019-changed-1727727502564.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Use CodeBlock component in KubeConfigDrawer ([#11019](https://github.com/linode/manager/pull/11019))
diff --git a/packages/manager/.changeset/pr-11019-tech-stories-1727727527842.md b/packages/manager/.changeset/pr-11019-tech-stories-1727727527842.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Add CodeBlock story ([#11019](https://github.com/linode/manager/pull/11019))
diff --git a/packages/manager/src/components/CodeBlock/CodeBlock.stories.tsx b/packages/manager/src/components/CodeBlock/CodeBlock.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { CodeBlock } from './CodeBlock';
+
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof CodeBlock> = {
+  args: {
+    command: 'echo "Hello World"',
+    commandType: 'Test label',
+    language: 'bash',
+  },
+  component: CodeBlock,
+  decorators: [
+    (Story: StoryFn) => (
+      <div style={{ margin: '1em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  title: 'Components/CodeBlock',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CodeBlock>;
+
+export const Default: Story = {
+  render: (args) => <CodeBlock {...args} />,
+};
diff --git a/...renessModal/CodeBlock/CodeBlock.styles.ts → .../components/CodeBlock/CodeBlock.styles.ts b/...renessModal/CodeBlock/CodeBlock.styles.ts → .../components/CodeBlock/CodeBlock.styles.ts
diff --git a/...ApiAwarenessModal/CodeBlock/CodeBlock.tsx → ...er/src/components/CodeBlock/CodeBlock.tsx b/...ApiAwarenessModal/CodeBlock/CodeBlock.tsx → ...er/src/components/CodeBlock/CodeBlock.tsx
@@ -11,10 +11,17 @@ import {
   StyledHighlightedMarkdown,
 } from './CodeBlock.styles';
 
+import type { SupportedLanguage } from 'src/components/HighlightedMarkdown/HighlightedMarkdown';
+
 export interface CodeBlockProps {
+  /** The CodeBlock command to be displayed */
   command: string;
+  /** Label for analytics */
   commandType: string;
-  language: 'bash';
+  /** Function to optionally override the component's internal handling of the copy icon */
+  handleCopyIconClick?: () => void;
+  /** The command language */
+  language: SupportedLanguage;
   ldTrackingKey?: string;
 }
 
@@ -23,11 +30,17 @@ export const CodeBlock = (props: CodeBlockProps) => {
   const ldClient = useLDClient();
   const { isAkamaiAccount: isInternalAccount } = useIsAkamaiAccount();
 
-  const { command, commandType, language, ldTrackingKey } = props;
+  const {
+    command,
+    commandType,
+    handleCopyIconClick,
+    language,
+    ldTrackingKey,
+  } = props;
 
   const apicliButtonCopy = flags?.testdxtoolabexperiment;
 
-  const handleCopyIconClick = () => {
+  const _handleCopyIconClick = () => {
     sendApiAwarenessClickEvent('Copy Icon', commandType);
     if (ldTrackingKey && !isInternalAccount) {
       ldClient?.track(ldTrackingKey, {
@@ -43,7 +56,10 @@ export const CodeBlock = (props: CodeBlockProps) => {
         language={language}
         textOrMarkdown={'```\n' + command + '\n```'}
       />
-      <StyledCopyTooltip onClickCallback={handleCopyIconClick} text={command} />
+      <StyledCopyTooltip
+        onClickCallback={handleCopyIconClick ?? _handleCopyIconClick}
+        text={command}
+      />
     </StyledCommandDiv>
   );
 };
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDrawer.tsx
@@ -1,36 +1,15 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import Download from 'src/assets/icons/download.svg';
-import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import { Box } from 'src/components/Box';
+import { CodeBlock } from 'src/components/CodeBlock/CodeBlock';
 import { Drawer } from 'src/components/Drawer';
 import { DrawerContent } from 'src/components/DrawerContent';
-import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown';
 import { Typography } from 'src/components/Typography';
 import { useKubenetesKubeConfigQuery } from 'src/queries/kubernetes';
 import { downloadFile } from 'src/utilities/downloadFile';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  icon: {
-    color: '#3683dc',
-  },
-  iconLink: {
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    font: 'inherit',
-    marginRight: theme.spacing(1),
-    padding: 0,
-  },
-  tooltip: {
-    '& svg': {
-      color: '#3683dc',
-    },
-  },
-}));
-
 interface Props {
   closeDrawer: () => void;
   clusterId: number;
@@ -39,7 +18,6 @@ interface Props {
 }
 
 export const KubeConfigDrawer = (props: Props) => {
-  const { classes } = useStyles();
   const { closeDrawer, clusterId, clusterLabel, open } = props;
 
   const {
@@ -59,35 +37,47 @@ export const KubeConfigDrawer = (props: Props) => {
   }, [open]);
 
   return (
-    <Drawer onClose={closeDrawer} open={open} title={'View Kubeconfig'} wide>
+    <Drawer onClose={closeDrawer} open={open} title="View Kubeconfig" wide>
       <DrawerContent
         error={!!error}
         errorMessage={error?.[0].reason}
         loading={isLoading}
         title={clusterLabel}
       >
-        <Grid container spacing={2}>
-          <Grid>
-            <Typography variant="h3">{clusterLabel}</Typography>
-          </Grid>
-          <Grid>
-            <button
-              onClick={() =>
-                downloadFile(`${clusterLabel}-kubeconfig.yaml`, data ?? '')
-              }
-              className={classes.iconLink}
-              title="Download"
-            >
-              <Download className={classes.icon} />
-            </button>
-            <CopyTooltip className={classes.tooltip} text={data ?? ''} />
-          </Grid>
-        </Grid>
-        <HighlightedMarkdown
+        <Box display="flex">
+          <Typography mr={2} variant="h3">
+            {clusterLabel}
+          </Typography>
+          <StyledDownloadButton
+            onClick={() =>
+              downloadFile(`${clusterLabel}-kubeconfig.yaml`, data ?? '')
+            }
+            title="Download"
+          >
+            <Download />
+          </StyledDownloadButton>
+        </Box>
+        <CodeBlock
+          command={data ?? ''}
+          commandType="Kube Config Yaml"
+          handleCopyIconClick={() => null}
           language="yaml"
-          textOrMarkdown={'```\n' + data + '\n```'}
         />
       </DrawerContent>
     </Drawer>
   );
 };
+
+export const StyledDownloadButton = styled('button', {
+  label: 'StyledDownloadButton',
+})(({ theme }) => ({
+  '& svg': {
+    color: '#3683dc',
+  },
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  font: 'inherit',
+  marginRight: theme.spacing(1),
+  padding: 0,
+}));
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/CurlTabPanel.tsx b/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/CurlTabPanel.tsx
@@ -2,6 +2,7 @@ import { useTheme } from '@mui/material/styles';
 import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React, { useMemo } from 'react';
 
+import { CodeBlock } from 'src/components/CodeBlock/CodeBlock';
 import { Link } from 'src/components/Link';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { Typography } from 'src/components/Typography';
@@ -11,8 +12,6 @@ import { useIsAkamaiAccount } from 'src/hooks/useIsAkamaiAccount';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { generateCurlCommand } from 'src/utilities/codesnippets/generate-cURL';
 
-import { CodeBlock } from './CodeBlock/CodeBlock';
-
 import type { CreateLinodeRequest } from '@linode/api-v4/lib/linodes';
 
 export interface CurlTabPanelProps {

diff --git a/...ages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/IntegrationsTabPanel.tsx b/...ages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/IntegrationsTabPanel.tsx
@@ -1,13 +1,13 @@
 import React, { useMemo, useState } from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { CodeBlock } from 'src/components/CodeBlock/CodeBlock';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { Typography } from 'src/components/Typography';
 import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
 import { generateAnsibleConfig } from 'src/utilities/codesnippets/generate-ansibleConfig';
 import { generateTerraformConfig } from 'src/utilities/codesnippets/generate-terraformConfig';
 
-import { CodeBlock } from './CodeBlock/CodeBlock';
 import { AnsibleIntegrationResources } from './AnsibleIntegrationResources';
 import { TerraformIntegrationResources } from './TerraformIntegrationResources';
 

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/LinodeCLIPanel.tsx b/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/LinodeCLIPanel.tsx
@@ -1,6 +1,7 @@
 import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React, { useMemo } from 'react';
 
+import { CodeBlock } from 'src/components/CodeBlock/CodeBlock';
 import { Link } from 'src/components/Link';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { Typography } from 'src/components/Typography';
@@ -10,8 +11,6 @@ import { useIsAkamaiAccount } from 'src/hooks/useIsAkamaiAccount';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { generateCLICommand } from 'src/utilities/codesnippets/generate-cli';
 
-import { CodeBlock } from './CodeBlock/CodeBlock';
-
 import type { CreateLinodeRequest } from '@linode/api-v4/lib/linodes';
 
 export interface LinodeCLIPanelProps {

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/SDKTabPanel.tsx b/packages/manager/src/features/Linodes/LinodeCreate/ApiAwarenessModal/SDKTabPanel.tsx
@@ -1,13 +1,13 @@
 import React, { useMemo, useState } from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { CodeBlock } from 'src/components/CodeBlock/CodeBlock';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { Typography } from 'src/components/Typography';
 import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
 import { generateGoLinodeSnippet } from 'src/utilities/codesnippets/generate-goSDKSnippet';
 import { generatePythonLinodeSnippet } from 'src/utilities/codesnippets/generate-pythonSDKSnippet';
 
-import { CodeBlock } from './CodeBlock/CodeBlock';
 import { GoSDKResources } from './GoSDKResources';
 import { PythonSDKResources } from './PythonSDKResources';