feat: add copy button for full image name in session launcher and env…

…ironments page
lablup · Sep 19, 2024 · 054f20d · 054f20d
1 parent c1270fc
commit 054f20d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git 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
@@ -11,6 +11,7 @@ import {
   ImageListQuery,
   ImageListQuery$data,
 } from './__generated__/ImageListQuery.graphql';
+import CopyButton from './lablupTalkativotUI/CopyButton';
 import {
   AppstoreOutlined,
   ReloadOutlined,
@@ -292,6 +293,13 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             e.stopPropagation();
           }}
         >
+          <CopyButton
+            type="text"
+            style={{ color: token.colorPrimary }}
+            copyable={{
+              text: getImageFullName(row) || '',
+            }}
+          ></CopyButton>
           <Button
             type="text"
             icon={