feat(FR-244): session renaming in the session detail panel (#3034)

resolves #3035 (FR-244)

Enhances session name editing functionality with improved validation and user experience:
- Adds form-based editing interface with validation rules for session names
- Implements escape key to cancel editing
- Shows visual feedback during editing with a down-left corner icon
- Maintains consistent validation rules between initial creation and editing
- Enables editing session names directly in the session detail drawer
- Restricts editing to session owners and non-preparing states
- Prevents accidental drawer closure with keyboard shortcuts while editing

**Checklist:**
- [ ] Test case: Verify session name validation rules
- [ ] Test case: Check escape key cancels editing
- [ ] Test case: Confirm editing works in session detail drawer
- [ ] Test case: Verify only session owners can edit names
- [ ] Test case: Confirm editing is disabled during session preparation

react/src/components/ComputeSessionNodeItems/EditableSessionName.tsx

@@ -1,10 +1,14 @@
+import { useCurrentUserInfo } from '../../hooks/backendai';
+import { getSessionNameRules } from '../SessionNameFormItem';
 import { EditableSessionNameFragment$key } from './__generated__/EditableSessionNameFragment.graphql';
 import { EditableSessionNameMutation } from './__generated__/EditableSessionNameMutation.graphql';
-import { theme } from 'antd';
+import { theme, Form, Input } from 'antd';
 import Text, { TextProps } from 'antd/es/typography/Text';
 import Title, { TitleProps } from 'antd/es/typography/Title';
 import graphql from 'babel-plugin-relay/macro';
+import { CornerDownLeftIcon } from 'lucide-react';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useFragment, useMutation } from 'react-relay';
 
 type EditableSessionNameProps = {
@@ -17,21 +21,25 @@ type EditableSessionNameProps = {
 const EditableSessionName: React.FC<EditableSessionNameProps> = ({
   component: Component = Text,
   sessionFrgmt,
+  editable: editableOfProps,
   style,
   ...otherProps
 }) => {
   const session = useFragment(
     graphql`
       fragment EditableSessionNameFragment on ComputeSessionNode {
         id
+        row_id
         name
         priority
+        user_id
+        status
       }
     `,
     sessionFrgmt,
   );
   const [optimisticName, setOptimisticName] = useState(session.name);
-  const { token } = theme.useToken();
+  const [userInfo] = useCurrentUserInfo();
   const [commitEditMutation, isPendingEditMutation] =
     useMutation<EditableSessionNameMutation>(graphql`
       mutation EditableSessionNameMutation($input: ModifyComputeSessionInput!) {
@@ -43,41 +51,102 @@ const EditableSessionName: React.FC<EditableSessionNameProps> = ({
         }
       }
     `);
+
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const [isEditing, setIsEditing] = useState(false);
+
+  const isNotPreparingCategoryStatus = ![
+    'RESTARTING',
+    'PREPARING',
+    'PREPARED',
+    'CREATING',
+    'PULLING',
+  ].includes(session.status || '');
+
+  const isEditingAllowed =
+    editableOfProps &&
+    userInfo.uuid === session.user_id &&
+    isNotPreparingCategoryStatus;
+
   return (
-    session && (
-      <Component
-        editable={
-          isPendingEditMutation
-            ? undefined
-            : {
-                onChange: (newName) => {
-                  setOptimisticName(newName);
-                  commitEditMutation({
-                    variables: {
-                      input: {
-                        id: session.id,
-                        name: newName,
-                        // TODO: Setting the priority is not needed here. However, due to an API bug, we will keep it.
-                        priority: session.priority,
-                      },
-                    },
-                    onCompleted(response, errors) {},
-                    onError(error) {},
-                  });
+    <>
+      {(!isEditing || isPendingEditMutation) && (
+        <Component
+          editable={
+            isEditingAllowed && !isPendingEditMutation
+              ? {
+                  onStart: () => {
+                    setIsEditing(true);
+                  },
+                  triggerType: ['icon', 'text'],
+                }
+              : false
+          }
+          copyable
+          style={{
+            ...style,
+            color: isPendingEditMutation
+              ? token.colorTextTertiary
+              : style?.color,
+          }}
+          {...otherProps}
+        >
+          {isPendingEditMutation ? optimisticName : session.name}
+        </Component>
+      )}
+      {isEditing && !isPendingEditMutation && (
+        <Form
+          onFinish={(values) => {
+            setIsEditing(false);
+            setOptimisticName(values.sessionName);
+            commitEditMutation({
+              variables: {
+                input: {
+                  id: session.id,
+                  name: values.sessionName,
                 },
-                triggerType: ['icon', 'text'],
+              },
+              onCompleted(response, errors) {},
+              onError(error) {},
+            });
+          }}
+          initialValues={{
+            sessionName: session.name,
+          }}
+          style={{
+            flex: 1,
+          }}
+        >
+          <Form.Item
+            name="sessionName"
+            rules={getSessionNameRules(t)}
+            style={{
+              margin: 0,
+            }}
+          >
+            <Input
+              size="large"
+              suffix={
+                <CornerDownLeftIcon
+                  style={{
+                    fontSize: '0.8em',
+                    color: token.colorTextTertiary,
+                  }}
+                />
               }
-        }
-        copyable
-        style={{
-          ...style,
-          color: isPendingEditMutation ? token.colorTextTertiary : style?.color,
-        }}
-        {...otherProps}
-      >
-        {isPendingEditMutation ? optimisticName : session.name}
-      </Component>
-    )
+              autoFocus
+              onKeyDown={(e) => {
+                // when press escape key, cancel editing
+                if (e.key === 'Escape') {
+                  setIsEditing(false);
+                }
+              }}
+            />
+          </Form.Item>
+        </Form>
+      )}
+    </>
   );
 };
 

react/src/components/SessionDetailContent.tsx

@@ -139,16 +139,16 @@ const SessionDetailContent: React.FC<{
         style={{
           alignSelf: 'stretch',
         }}
+        gap={'sm'}
       >
         <EditableSessionName
           sessionFrgmt={session}
           component={Title}
           level={3}
           style={{
             margin: 0,
-            flex: 1,
           }}
-          editable={false}
+          editable
         />
         <Button.Group size="large">
           <SessionActionButtons sessionFrgmt={session} />

react/src/components/SessionDetailDrawer.tsx

@@ -26,6 +26,7 @@ const SessionDetailDrawer: React.FC<SessionDetailDrawerProps> = ({
     <Drawer
       title={t('session.SessionInfo')}
       width={800}
+      keyboard={false}
       {...drawerProps}
       open={!!sessionId}
       onClose={(e) => {

react/src/components/SessionNameFormItem.tsx

@@ -1,4 +1,5 @@
 import { Form, FormItemProps, Input } from 'antd';
+import { TFunction } from 'i18next';
 import _ from 'lodash';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,6 +9,41 @@ interface SessionNameFormItemProps extends FormItemProps {}
 export interface SessionNameFormItemValue {
   sessionName: string;
 }
+
+export const getSessionNameRules = (t: TFunction): FormItemProps['rules'] => [
+  {
+    min: 4,
+    message: t('session.validation.SessionNameTooShort'),
+  },
+  {
+    max: 64,
+    message: t('session.validation.SessionNameTooLong64'),
+  },
+  {
+    validator(f, value) {
+      if (_.isEmpty(value)) {
+        return Promise.resolve();
+      }
+      if (!/^\w/.test(value)) {
+        return Promise.reject(
+          t('session.validation.SessionNameShouldStartWith'),
+        );
+      }
+
+      if (!/^[\w.-]*$/.test(value)) {
+        return Promise.reject(
+          t('session.validation.SessionNameInvalidCharacter'),
+        );
+      }
+
+      if (!/\w$/.test(value) && value.length >= 4) {
+        return Promise.reject(t('session.validation.SessionNameShouldEndWith'));
+      }
+      return Promise.resolve();
+    },
+  },
+];
+
 const SessionNameFormItem: React.FC<SessionNameFormItemProps> = ({
   ...formItemProps
 }) => {
@@ -19,41 +55,7 @@ const SessionNameFormItem: React.FC<SessionNameFormItemProps> = ({
       name="sessionName"
       // Original rule : /^(?=.{4,64}$)\w[\w.-]*\w$/
       // https://github.com/lablup/backend.ai/blob/main/src/ai/backend/manager/api/session.py#L355-L356
-      rules={[
-        {
-          min: 4,
-          message: t('session.validation.SessionNameTooShort'),
-        },
-        {
-          max: 64,
-          message: t('session.validation.SessionNameTooLong64'),
-        },
-        {
-          validator(f, value) {
-            if (_.isEmpty(value)) {
-              return Promise.resolve();
-            }
-            if (!/^\w/.test(value)) {
-              return Promise.reject(
-                t('session.validation.SessionNameShouldStartWith'),
-              );
-            }
-
-            if (!/^[\w.-]*$/.test(value)) {
-              return Promise.reject(
-                t('session.validation.SessionNameInvalidCharacter'),
-              );
-            }
-
-            if (!/\w$/.test(value) && value.length >= 4) {
-              return Promise.reject(
-                t('session.validation.SessionNameShouldEndWith'),
-              );
-            }
-            return Promise.resolve();
-          },
-        },
-      ]}
+      rules={getSessionNameRules(t)}
       {...formItemProps}
     >
       <Input allowClear autoComplete="off" />

react/src/hooks/backendai.tsx

@@ -133,6 +133,7 @@ export const useResourceSlotsDetails = (resourceGroupName?: string) => {
 interface UserInfo {
   full_name: string;
   email: string;
+  uuid: string;
 }
 
 type mutationOptions<T> = {
@@ -146,6 +147,7 @@ export const useCurrentUserInfo = () => {
   const [userInfo, _setUserInfo] = useState<UserInfo>({
     full_name: baiClient.full_name,
     email: baiClient.email,
+    uuid: baiClient.user_uuid,
   });
 
   const getUsername = () => {

src/components/backend-ai-login.ts

@@ -1744,6 +1744,7 @@ export default class BackendAILogin extends BackendAIPage {
           'domain_name',
           'groups {name, id}',
           'need_password_change',
+          'uuid',
         ];
         const q = `query { user{ ${fields.join(' ')} } }`;
         const v = { uuid: this.user };
@@ -1783,6 +1784,7 @@ export default class BackendAILogin extends BackendAIPage {
         const role = response['user'].role;
         this.domain_name = response['user'].domain_name;
         globalThis.backendaiclient.email = this.email;
+        globalThis.backendaiclient.user_uuid = response['user'].uuid;
         globalThis.backendaiclient.full_name = response['user'].full_name;
         globalThis.backendaiclient.is_admin = false;
         globalThis.backendaiclient.is_superadmin = false;

src/lib/backend.ai-client-esm.ts

@@ -211,6 +211,11 @@ class Client {
   static ERR_SERVER: any;
   static ERR_UNKNOWN: any;
 
+  // Additional info related to current login user
+  public email: string;
+  public full_name: string;
+  public user_uuid: string;
+
   /**
    * The client API wrapper.
    *