fix/artifact-copy-button-not-working (#171)

* fix: artifact copy button not working

- Added position: relative and z-index: 1 to Modal container to fix z-index stacking
- Added notification feedback when artifact code is copied to clipboard
- Added mock artifacts data for testing
- Added NotificationsProvider to test wrapper for notification support
- Added unit test for copy button functionality

* fix test

* fix eslint

---------

Co-authored-by: Yinglao Liu <yinglaol@netflix.com>

Author: liuyinglao

src/components/Modal/index.tsx

@@ -74,6 +74,8 @@ const ModalClickHandler = styled.div`
 
 const ModalContainer = styled.div`
   ${PopoverStyles}
+  position: relative;
+  z-index: 1;
   padding: 0.75rem 1rem 1rem 1rem;
   width: 80%;
   max-width: 80rem;

src/mocks/browser.js

@@ -399,6 +399,88 @@ export const worker = setupWorker(
     decorators: [],
     extensions: {},
   }),
+  stantardGetEndpoint('api/flows/:flowid/runs/:runid/steps/:stepid/tasks/:taskid/artifacts', [
+    {
+      flow_id: 'BasicFlow',
+      run_number: 1,
+      run_id: null,
+      step_name: 'start',
+      task_id: 520362,
+      task_name: null,
+      name: 'aggregated_table',
+      location: 's3://metaflow-bucket/BasicFlow/1/start/520362/aggregated_table',
+      ds_type: 's3',
+      sha: 'abc123def456',
+      type: 'string',
+      content_type: 'text/plain',
+      content: 'user.aggregated_data_20251209_180857_19',
+      attempt_id: 0,
+      user_name: 'santeri@outerbounds.co',
+      ts_epoch: 1739390575000,
+      tags: ['attempt_id:0'],
+      system_tags: ['user:santeri@outerbounds.co'],
+    },
+    {
+      flow_id: 'BasicFlow',
+      run_number: 1,
+      run_id: null,
+      step_name: 'start',
+      task_id: 520362,
+      task_name: null,
+      name: 'environment',
+      location: 's3://metaflow-bucket/BasicFlow/1/start/520362/environment',
+      ds_type: 's3',
+      sha: 'def789ghi012',
+      type: 'string',
+      content_type: 'text/plain',
+      content: 'prod',
+      attempt_id: 0,
+      user_name: 'santeri@outerbounds.co',
+      ts_epoch: 1739390575100,
+      tags: ['attempt_id:0'],
+      system_tags: ['user:santeri@outerbounds.co'],
+    },
+    {
+      flow_id: 'BasicFlow',
+      run_number: 1,
+      run_id: null,
+      step_name: 'start',
+      task_id: 520362,
+      task_name: null,
+      name: 'sample_rate',
+      location: 's3://metaflow-bucket/BasicFlow/1/start/520362/sample_rate',
+      ds_type: 's3',
+      sha: 'ghi345jkl678',
+      type: 'float',
+      content_type: 'application/json',
+      content: '0.3',
+      attempt_id: 0,
+      user_name: 'santeri@outerbounds.co',
+      ts_epoch: 1739390575200,
+      tags: ['attempt_id:0'],
+      system_tags: ['user:santeri@outerbounds.co'],
+    },
+    {
+      flow_id: 'BasicFlow',
+      run_number: 1,
+      run_id: null,
+      step_name: 'start',
+      task_id: 520362,
+      task_name: null,
+      name: 'log_level',
+      location: 'local://data/BasicFlow/1/start/520362/log_level',
+      ds_type: 'local',
+      sha: 'jkl901mno234',
+      type: 'string',
+      content_type: 'text/plain',
+      content: 'INFO',
+      attempt_id: 0,
+      user_name: 'santeri@outerbounds.co',
+      ts_epoch: 1739390575300,
+      tags: ['attempt_id:0'],
+      system_tags: ['user:santeri@outerbounds.co'],
+    },
+  ]),
   stantardGetEndpoint('api/flows/:flowid/runs/:runid/steps/:stepid/tasks/:taskid/metadata', [
     {
       id: 10926826,
@@ -480,7 +562,9 @@ export const worker = setupWorker(
     },
   ]),
   rawGetEndpoint('api/plugin', []),
-  rawGetEndpoint('api/features', {}),
+  rawGetEndpoint('api/features', {
+    FEATURE_ARTIFACT_TABLE: true,
+  }),
   stantardGetEndpoint('api/links', []),
   stantardGetEndpoint('api/notifications', []),
   stantardGetEndpoint('api/flows/autocomplete', ['BasicFlow', 'NewFlow']),

src/pages/Task/__tests__/ArtifactTable.test.cypress.tsx

@@ -74,4 +74,40 @@ describe('ArtifactTable', () => {
     gid('modal-container');
     gid('modal-content').contains("Task('LogTestFlow/968832/loglines/33632798', attempt=0)['FirstArtifact'].data");
   });
+
+  it('Should copy artifact code when copy button is clicked', () => {
+    // Stub document.execCommand to verify copy was called (used by copy-to-clipboard library)
+    cy.document().then((doc) => {
+      cy.stub(doc, 'execCommand').as('execCommand').returns(true);
+    });
+
+    mount(
+      <TestWrapper>
+        <ArtifactTable
+          artifacts={[createArtifact({ name: 'FirstArtifact', content: 'ImportantStuff' })]}
+          onOpenContentClick={cy.stub()}
+        />
+      </TestWrapper>,
+    );
+
+    // Open the modal
+    gid('select-field').eq(0).click();
+    cy.get('button').contains('Python').click();
+    gid('modal-container');
+
+    // Verify the code snippet is displayed in the modal
+    gid('modal-content').contains("Task('LogTestFlow/968832/loglines/33632798', attempt=0)['FirstArtifact'].data");
+
+    // Click the copy button in the modal header
+    gid('modal-container').find('button').click();
+
+    // Verify execCommand('copy') was called (copy-to-clipboard library uses this)
+    cy.get('@execCommand').should('have.been.calledWith', 'copy');
+
+    // Verify notification appears confirming copy was successful
+    cy.contains('Artifact content copied to clipboard').should('be.visible');
+
+    // Modal should close after clicking copy
+    gid('modal-container').should('not.exist');
+  });
 });

src/pages/Task/components/ArtifactTable.tsx

@@ -9,6 +9,7 @@ import GenericError from '@components/GenericError';
 import Icon from '@components/Icon';
 import InformationRow from '@components/InformationRow';
 import Modal from '@components/Modal';
+import { NotificationType, useNotifications } from '@components/Notifications';
 import PropertyTable, { PropertyTableColumns } from '@components/PropertyTable';
 import { ItemRow } from '@components/Structure';
 import { valueToRenderableType } from '@components/TitledRow';
@@ -156,28 +157,37 @@ const LocationRenderTitle = styled.div`
 // Highlight link renderer
 //
 
-const LinkPopup: React.FC<{ link: PopupLink | null; onClose: () => void }> = ({ link, onClose }) => (
-  <Modal
-    show={!!link}
-    onClose={onClose}
-    title={`${link?.artifact.name} - ${link?.variant}`}
-    actionbar={
-      <Button
-        iconOnly
-        onClick={() => {
-          if (link) {
-            copy(makeArtifactCode(link));
-          }
-          onClose();
-        }}
-      >
-        <Icon name="copy" />
-      </Button>
-    }
-  >
-    <CodeBlock>{link && makeArtifactCode(link)}</CodeBlock>
-  </Modal>
-);
+const LinkPopup: React.FC<{ link: PopupLink | null; onClose: () => void }> = ({ link, onClose }) => {
+  const { addNotification } = useNotifications();
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      show={!!link}
+      onClose={onClose}
+      title={`${link?.artifact.name} - ${link?.variant}`}
+      actionbar={
+        <Button
+          iconOnly
+          onClick={() => {
+            if (link) {
+              copy(makeArtifactCode(link));
+              addNotification({
+                type: NotificationType.Info,
+                message: t('task.artifact-copied'),
+              });
+            }
+            onClose();
+          }}
+        >
+          <Icon name="copy" />
+        </Button>
+      }
+    >
+      <CodeBlock>{link && makeArtifactCode(link)}</CodeBlock>
+    </Modal>
+  );
+};
 
 // Keeping code snippet in object for now since we might to add separate snippets for different situations.
 const codeByType = {

src/utils/testing.tsx

@@ -1,10 +1,26 @@
 import React, { ReactNode } from 'react';
 import { MemoryRouter, Route } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
+import { Notifications, NotificationsProvider } from '@components/Notifications';
+import { PluginsContext } from '@components/Plugins/PluginManager';
 import GlobalStyle from '../GlobalStyle';
 import '../theme/font/roboto.css';
 import './i18n';
 
+// Mock PluginsContext for testing - provides stub functions for plugin communication
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+const mockPluginsContextValue = {
+  plugins: [],
+  getPluginsBySlot: () => [],
+  register: noop,
+  subscribeToDatastore: noop,
+  unsubscribeFromDatastore: noop,
+  subscribeToEvent: noop,
+  unsubscribeFromEvent: noop,
+  callEvent: noop,
+};
+
 /**
  * Wrapper for testing component that depends on theming and routing. Also accepts route as param if
  * component depends on certain routes.
@@ -14,7 +30,14 @@ const TestWrapper: React.FC<{ children: ReactNode; route?: string }> = ({ childr
     <>
       <GlobalStyle />
       <MemoryRouter initialEntries={[route]}>
-        <QueryParamProvider ReactRouterRoute={Route}>{children}</QueryParamProvider>
+        <QueryParamProvider ReactRouterRoute={Route}>
+          <PluginsContext.Provider value={mockPluginsContextValue as never}>
+            <NotificationsProvider>
+              {children}
+              <Notifications />
+            </NotificationsProvider>
+          </PluginsContext.Provider>
+        </QueryParamProvider>
       </MemoryRouter>
     </>
   );