Merge branch 'master' into add-copy-button

Co-authored-by: uladzimirdev <125459446+uladzimirdev@users.noreply.github.com>

frontend/src/metabase/query_builder/components/dataref/FieldList.tsx

@@ -1,5 +1,6 @@
 import { msgid, ngettext } from "ttag";
 
+import { CopyButton } from "metabase/common/components/CopyButton";
 import {
   HoverParent,
   TableColumnInfoIcon,
@@ -55,6 +56,10 @@ export const FieldList = ({ fields, onFieldClick }: FieldListProps) => (
               />
               <NodeListItemName>{field.name}</NodeListItemName>
             </NodeListItemLink>
+            <CopyButton
+              value={field.name}
+              className={S.fieldCopyButton}
+            />
           </HoverParent>
         );
       })}

frontend/src/metabase/query_builder/components/dataref/FieldList.unit.spec.tsx

@@ -1,5 +1,5 @@
 import { createMockMetadata } from "__support__/metadata";
-import { renderWithProviders, screen } from "__support__/ui";
+import { getIcon, renderWithProviders, screen } from "__support__/ui";
 import { createSampleDatabase } from "metabase-types/api/mocks/presets";
 
 import { FieldList } from "./FieldList";
@@ -13,6 +13,7 @@ const metadata = createMockMetadata({
 function setup() {
   const fields = [Object.values(metadata.fields)[0]];
   renderWithProviders(<FieldList fields={fields} onFieldClick={jest.fn()} />);
+  return { fields };
 }
 
 describe("FieldList", () => {
@@ -20,4 +21,10 @@ describe("FieldList", () => {
     setup();
     expect(screen.getByLabelText("More info")).toBeInTheDocument();
   });
+
+  it("should render a copy button for each column", () => {
+    setup();
+    expect(screen.getByTestId("copy-button")).toBeInTheDocument();
+    expect(getIcon("copy")).toBeInTheDocument();
+  });
 });

frontend/src/metabase/query_builder/components/dataref/NodeList.module.css

@@ -37,13 +37,29 @@
 }
 
 .NodeListItem {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
   .NodeListItemLink {
     padding-top: 0;
     padding-bottom: 0;
     padding-right: 0;
+    flex: 1;
   }
 }
 
+.fieldCopyButton {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  margin-right: 0.5rem;
+}
+
+.NodeListItem:hover .fieldCopyButton {
+  opacity: 1;
+  cursor: pointer;
+}
+
 .NodeListItemId {
   color: var(--mb-color-text-medium);
 }