From 0dc36603521e82dce1f7d7c12c0e7d5af7bd7ef1 Mon Sep 17 00:00:00 2001
From: ironAiken2 <51399982+ironAiken2@users.noreply.github.com>
Date: Fri, 27 Sep 2024 04:26:38 +0000
Subject: [PATCH] feat: add copy button for full image name in session launcher
 and environments page (#2708)

### This PR resolves [giftbox#726](https://github.com/lablup/giftbox/issues/726) issue.

This PR enhances the user experience by adding copy functionality for image names in multiple components:

1. In `ImageEnvironmentSelectFormItems.tsx`:
   - Added a copyable text for the environment/version label, allowing users to easily copy the full image name.

2. In `ImageList.tsx`:
   - Introduced a new copy button in the image list, enabling users to copy the full image name with a single click.

3. Updated `CopyButton.tsx`:
   - Added a `defaultIcon` prop to allow customization of the default icon displayed before copying.

These changes make it more convenient for users to copy and use image names across the application.

|Environments|Session Laucner|
|---|---|
|![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lSyr8xXz1wdXALkJKzVx/8359f664-56bf-49ce-9562-f81a05f3452c.png)|![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lSyr8xXz1wdXALkJKzVx/f114a788-eaef-41f0-9fb8-0ecbfc1c5129.png)|

**Checklist:**

- [ ] Documentation
- [ ] Test case(s) to demonstrate the difference of before/after
---
 .../ImageEnvironmentSelectFormItems.tsx       | 26 ++++++++++++++++---
 react/src/components/ImageList.tsx            | 10 +++++++
 .../lablupTalkativotUI/CopyButton.tsx         | 14 ++++++++--
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/react/src/components/ImageEnvironmentSelectFormItems.tsx b/react/src/components/ImageEnvironmentSelectFormItems.tsx
index 5261a8649f..b32f3ebc47 100644
--- a/react/src/components/ImageEnvironmentSelectFormItems.tsx
+++ b/react/src/components/ImageEnvironmentSelectFormItems.tsx
@@ -14,7 +14,16 @@ import {
   ImageEnvironmentSelectFormItemsQuery,
   ImageEnvironmentSelectFormItemsQuery$data,
 } from './__generated__/ImageEnvironmentSelectFormItemsQuery.graphql';
-import { Divider, Form, Input, RefSelectProps, Select, Tag, theme } from 'antd';
+import {
+  Divider,
+  Form,
+  Input,
+  RefSelectProps,
+  Select,
+  Tag,
+  theme,
+  Typography,
+} from 'antd';
 import graphql from 'babel-plugin-relay/macro';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -327,9 +336,18 @@ const ImageEnvironmentSelectFormItems: React.FC<
       <Form.Item
         className="image-environment-select-form-item"
         name={['environments', 'environment']}
-        label={`${t('session.launcher.Environments')} / ${t(
-          'session.launcher.Version',
-        )}`}
+        label={
+          <Typography.Text
+            copyable={{
+              text: getImageFullName(
+                form.getFieldValue(['environments', 'image']),
+              ),
+            }}
+          >
+            {t('session.launcher.Environments')} /
+            {t('session.launcher.Version')}
+          </Typography.Text>
+        }
         rules={[{ required: _.isEmpty(environments?.manual) }]}
         style={{ marginBottom: 10 }}
       >
diff --git a/react/src/components/ImageList.tsx b/react/src/components/ImageList.tsx
index 84f1261f3b..49512b942a 100644
--- a/react/src/components/ImageList.tsx
+++ b/react/src/components/ImageList.tsx
@@ -11,8 +11,10 @@ import {
   ImageListQuery,
   ImageListQuery$data,
 } from './__generated__/ImageListQuery.graphql';
+import CopyButton from './lablupTalkativotUI/CopyButton';
 import {
   AppstoreOutlined,
+  CopyOutlined,
   ReloadOutlined,
   SearchOutlined,
   SettingOutlined,
@@ -292,6 +294,14 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             e.stopPropagation();
           }}
         >
+          <CopyButton
+            type="text"
+            defaultIcon={<CopyOutlined />}
+            style={{ color: token.colorPrimary }}
+            copyable={{
+              text: getImageFullName(row) || '',
+            }}
+          ></CopyButton>
           <Button
             type="text"
             icon={
diff --git a/react/src/components/lablupTalkativotUI/CopyButton.tsx b/react/src/components/lablupTalkativotUI/CopyButton.tsx
index d16c6a1b19..49e5645a51 100644
--- a/react/src/components/lablupTalkativotUI/CopyButton.tsx
+++ b/react/src/components/lablupTalkativotUI/CopyButton.tsx
@@ -8,8 +8,13 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 interface CopyButtonProps extends ButtonProps {
   copyable?: Omit<CopyConfig, 'text'> & { text: string };
+  defaultIcon?: React.ReactNode;
 }
-const CopyButton: React.FC<CopyButtonProps> = ({ copyable, ...props }) => {
+const CopyButton: React.FC<CopyButtonProps> = ({
+  copyable,
+  defaultIcon,
+  ...props
+}) => {
   const [isCopied, setIsCopied] = useState(false);
 
   const handleCopy = async () => {
@@ -31,7 +36,12 @@ const CopyButton: React.FC<CopyButtonProps> = ({ copyable, ...props }) => {
       open={isCopied ? true : undefined}
     >
       <CopyToClipboard text={copyable?.text || ''} onCopy={handleCopy}>
-        <Button icon={isCopied ? <CheckIcon /> : <CopyIcon />} {...props} />
+        <Button
+          icon={
+            isCopied ? <CheckIcon /> : defaultIcon ? defaultIcon : <CopyIcon />
+          }
+          {...props}
+        />
       </CopyToClipboard>
     </Tooltip>
   );