From ea37a3110670e507c1a33c0793b6cef1b5ff1215 Mon Sep 17 00:00:00 2001
From: Yash Rajpal <58601732+yash-rajpal@users.noreply.github.com>
Date: Wed, 27 Mar 2024 23:08:27 +0530
Subject: [PATCH] feat(fuselage): Disable CodeSnippet button prop (#1338)

Co-authored-by: Douglas Fabris <devfabris@gmail.com>
---
 .changeset/big-rockets-approve.md                         | 5 +++++
 .../src/components/CodeSnippet/CodeSnippet.spec.tsx       | 8 +++++++-
 .../src/components/CodeSnippet/CodeSnippet.stories.tsx    | 8 ++++++++
 .../fuselage/src/components/CodeSnippet/CodeSnippet.tsx   | 4 +++-
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/big-rockets-approve.md

diff --git a/.changeset/big-rockets-approve.md b/.changeset/big-rockets-approve.md
new file mode 100644
index 0000000000..e5214604be
--- /dev/null
+++ b/.changeset/big-rockets-approve.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+Accept disable button prop on CodeSnippet component
diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx
index 536bd7aa05..a7326793fb 100644
--- a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx
+++ b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import * as stories from './CodeSnippet.stories';
 
-const { Default, CopyButton, CustomButtonName, LoadingCode } =
+const { Default, CopyButton, CustomButtonName, LoadingCode, DisabledButton } =
   composeStories(stories);
 
 describe('[CodeSnippet Component]', () => {
@@ -44,4 +44,10 @@ describe('[CodeSnippet Component]', () => {
     const { container } = render(<LoadingCode />);
     expect(container.querySelector('.rcx-skeleton')).toBeInTheDocument();
   });
+
+  it('should should render a disabled button, when buttonDisabled prop is passed', () => {
+    render(<DisabledButton />);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+  });
 });
diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.stories.tsx b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.stories.tsx
index 325b0bf0ea..5aa43315a7 100644
--- a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.stories.tsx
+++ b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.stories.tsx
@@ -60,3 +60,11 @@ LoadingCode.args = {
   children: '',
   onClick: action('click'),
 };
+
+export const DisabledButton = Template.bind({});
+DisabledButton.args = {
+  children: 'curl -L https://go.rocket.chat/i/docker-compose.yml -O',
+  onClick: action('click'),
+  buttonText: 'Disabled Button',
+  buttonDisabled: true,
+};
diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx
index 8b6d077b22..69582e5c9b 100644
--- a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx
+++ b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.tsx
@@ -8,6 +8,7 @@ import { Skeleton } from '../Skeleton';
 type CodeSnippetProps = ComponentProps<typeof Box> & {
   children: string;
   buttonText?: string;
+  buttonDisabled?: boolean;
   onClick?: () => void;
 };
 
@@ -15,6 +16,7 @@ const CodeSnippet = ({
   children,
   onClick,
   buttonText = 'Copy',
+  buttonDisabled = false,
   ...props
 }: CodeSnippetProps): ReactElement<CodeSnippetProps> => {
   if (!children) {
@@ -32,7 +34,7 @@ const CodeSnippet = ({
       </Box>
       {onClick && children && (
         <Box>
-          <Button small primary onClick={onClick}>
+          <Button small primary onClick={onClick} disabled={buttonDisabled}>
             {buttonText}
           </Button>
         </Box>