Ver código fonte

[ui-sb] show the success icon for 2 sec when copying path (#4134)

Ram Prasad Agarwal 6 meses atrás
pai
commit
2265125073

+ 40 - 8
desktop/core/src/desktop/js/reactComponents/PathBrowser/PathBrowser.test.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
+import { act } from 'react-dom/test-utils';
 
 import PathBrowser from './PathBrowser';
 
@@ -67,7 +68,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           filePath={mockFilePath}
           onFilepathChange={onFilepathChangeMock}
-          separator={'/'}
+          separator="/"
           showIcon
         />
       );
@@ -79,7 +80,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockLongFilePath}
-          separator={'/'}
+          separator="/"
           showIcon
         />
       );
@@ -92,7 +93,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockLongFilePath}
-          separator={'/'}
+          separator="/"
           showIcon
         />
       );
@@ -109,7 +110,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockFilePath}
-          separator={'/'}
+          separator="/"
           showIcon={false}
         />
       );
@@ -124,7 +125,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockFilePath}
-          separator={'/'}
+          separator="/"
           showIcon
         />
       );
@@ -137,7 +138,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockFilePath}
-          separator={'/'}
+          separator="/"
           showIcon={false}
         />
       );
@@ -152,7 +153,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockFilePath}
-          separator={'/'}
+          separator="/"
           showIcon
         />
       );
@@ -165,7 +166,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockFilePath}
-          separator={'/'}
+          separator="/"
           showIcon
         />
       );
@@ -177,4 +178,35 @@ describe('Pathbrowser', () => {
       expect(input).not.toBeNull();
     });
   });
+
+  describe('Pathbrowser Copy Path Button', () => {
+    it('should show green tick icon for 2 seconds after copying path', async () => {
+      const user = userEvent.setup();
+      render(
+        <PathBrowser
+          onFilepathChange={onFilepathChangeMock}
+          filePath={mockFilePath}
+          separator="/"
+          showIcon
+        />
+      );
+
+      const copyPathButton = screen.getByRole('button', { name: 'Copy Path' });
+      expect(copyPathButton).toBeInTheDocument();
+      expect(screen.queryByTestId('hue-path-browser__status-success-icon')).not.toBeInTheDocument();
+      expect(screen.getByTestId('hue-path-browser__path-copy-icon')).toBeInTheDocument();
+
+      await user.click(copyPathButton);
+
+      expect(screen.getByTitle('Copied!')).toBeInTheDocument();
+
+      expect(screen.getByTestId('hue-path-browser__status-success-icon')).toBeInTheDocument();
+      expect(screen.queryByTestId('hue-path-browser__path-copy-icon')).not.toBeInTheDocument();
+
+      // Wait for 2 seconds and check if the green tick icon disappears
+      await act(() => new Promise(resolve => setTimeout(resolve, 2000)));
+      expect(screen.queryByTestId('hue-path-browser__status-success-icon')).not.toBeInTheDocument();
+      expect(screen.getByTestId('hue-path-browser__path-copy-icon')).toBeInTheDocument();
+    });
+  });
 });

+ 17 - 3
desktop/core/src/desktop/js/reactComponents/PathBrowser/PathBrowser.tsx

@@ -23,6 +23,7 @@ import HdfsIcon from '../../components/icons/HdfsIcon';
 import S3Icon from '../../components/icons/S3Icon';
 import AdlsIcon from '../../components/icons/AdlsIcon';
 import EditIcon from '@cloudera/cuix-core/icons/react/EditIcon';
+import StatusSuccessTableIcon from '@cloudera/cuix-core/icons/react/StatusSuccessTableIcon';
 import CopyPathIcon from '@cloudera/cuix-core/icons/react/CopyClipboardIcon';
 
 import Breadcrumb from './Breadcrumb/Breadcrumb';
@@ -52,6 +53,7 @@ const PathBrowser = ({
   testId
 }: PathBrowserProps): JSX.Element => {
   const [isEditMode, setIsEditMode] = useState(false);
+  const [copied, setCopied] = useState(false);
 
   const icons = {
     hdfs: <HdfsIcon />,
@@ -94,6 +96,12 @@ const PathBrowser = ({
     return menu;
   };
 
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(filePath);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   if (breadcrumbs) {
     if (isEditMode) {
       return (
@@ -208,10 +216,16 @@ const PathBrowser = ({
           icon={<EditIcon />}
         />
         <BorderlessButton
-          onClick={() => navigator.clipboard.writeText(filePath)}
+          onClick={handleCopy}
           className="hue-path-browser__copy-path-btn"
-          title={'Copy Path'}
-          icon={<CopyPathIcon />}
+          title={copied ? 'Copied!' : 'Copy Path'}
+          icon={
+            copied ? (
+              <StatusSuccessTableIcon data-testid="hue-path-browser__status-success-icon" />
+            ) : (
+              <CopyPathIcon data-testid="hue-path-browser__path-copy-icon" />
+            )
+          }
         />
       </div>
     );