vlab name editing, names length

src/components/VirtualLab/create-entity-flows/project/overview.tsx

@@ -41,8 +41,8 @@ export default function Overview() {
         rules={[
           { required: true, message: 'Please enter project name' },
           {
-            max: 80,
-            message: 'Project name cannot exceed 80 characters!',
+            max: 60,
+            message: 'Project name cannot exceed 60 characters!',
           },
           {
             validator: async (_: any, name: string) => {

src/ui/molecules/more-less-text/index.tsx

@@ -13,6 +13,8 @@ type ExpandableTextProps = {
 
 const clampClassFor = (lines: number): string => {
   switch (lines) {
+    case 1:
+      return 'line-clamp-1';
     case 2:
       return 'line-clamp-2';
     case 3:

src/ui/segments/project/banner/banner.tsx

@@ -3,26 +3,36 @@
 import { CheckOutlined, CloseOutlined, EditOutlined, LoadingOutlined } from '@ant-design/icons';
 import { useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { useRef, useState, type ReactElement } from 'react';
+import { Form, Input, type FormProps } from 'antd';
+import { z } from 'zod';
 import delay from 'lodash/delay';
 import Image from 'next/image';
 import get from 'lodash/get';
 
 import { getProject, updateProject } from '@/api/virtual-lab-svc/queries/project';
 import { useUserPermissions } from '@/hooks/use-user-permissions';
 import { ExpandableText } from '@/ui/molecules/more-less-text';
+import { keyBuilder } from '@/ui/use-query-keys/workspace';
 import { useWorkspace } from '@/ui/hooks/use-workspace';
 import { Button } from '@/ui/molecules/button/index';
-import { keyBuilder } from '@/ui/use-query-keys/workspace';
 import { cn } from '@/utils/css-class';
 
 type TCardContent = {
   name: string;
   description: string;
 };
 
+const projectFormSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(600, 'Name must be less than 600 characters'),
+  description: z.string().min(1, 'Description is required'),
+});
+
+type ProjectFormValues = z.infer<typeof projectFormSchema>;
+
 export function ProjectCard(): ReactElement {
   const { virtualLabId, projectId } = useWorkspace();
   const queryClient = useQueryClient();
+  const [form] = Form.useForm<ProjectFormValues>();
 
   const queryKey = keyBuilder.getOne({ virtualLabId, projectId });
   const { data: result } = useSuspenseQuery({
@@ -32,7 +42,8 @@ export function ProjectCard(): ReactElement {
 
   const { isAdmin } = useUserPermissions({ virtualLabId, projectId });
   const [isEditing, setIsEditing] = useState(false);
-  const nameRef = useRef<HTMLTextAreaElement>(null);
+  const [isFormValid, setIsFormValid] = useState(false);
+  const nameRef = useRef<any>(null);
 
   const { mutateAsync, isPending, variables } = useMutation({
     mutationFn: (payload: TCardContent) =>
@@ -48,34 +59,48 @@ export function ProjectCard(): ReactElement {
   });
 
   const onCancel = (_: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    form.resetFields();
     setIsEditing(false);
+    setIsFormValid(false);
   };
 
   const handleEdit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
     setIsEditing(true);
+    setIsFormValid(true);
     delay(() => {
       nameRef.current?.focus();
     }, 200);
   };
 
-  const handleSave = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    const data = Object.fromEntries(formData.entries());
-    const newName = String(get(data, 'name', null));
-    const newDescription = String(get(data, 'description', null));
-    if (newName && newDescription) {
-      await mutateAsync({ name: newName, description: newDescription });
-    }
+  const handleSave: FormProps<ProjectFormValues>['onFinish'] = async (values) => {
+    await mutateAsync(values);
+    await queryClient.invalidateQueries({
+      queryKey: keyBuilder.listWorkspaceProjects({ virtualLabId }),
+    });
     setIsEditing(false);
   };
 
+  const handleFormChange = async () => {
+    try {
+      await form.validateFields({ dirty: true });
+      setIsFormValid(true);
+    } catch (error) {
+      const errors = get(error, 'errorFields', []);
+      setIsFormValid(errors.length === 0);
+    }
+  };
+
   return (
-    <form
+    <Form
+      form={form}
       name="project-form"
-      onSubmit={handleSave}
-      className="relative min-h-[18rem] w-full overflow-hidden rounded-2xl"
+      onFinish={handleSave}
+      onValuesChange={handleFormChange}
+      className={cn(
+        'relative min-h-[18rem] w-full overflow-hidden rounded-2xl',
+        '[&_.ant-form-item-explain-error]:text-sm!'
+      )}
       style={{
         background: 'linear-gradient(95.23deg, #0050B3 18.61%, #69C0FF 103.56%)',
       }}
@@ -86,11 +111,11 @@ export function ProjectCard(): ReactElement {
             <Button
               rounded
               size="md"
-              type="submit"
               variant="icon"
               aria-label="submit changes"
-              disabled={isPending}
-              className="transform bg-green-500/80 transition-all duration-200 hover:scale-105 hover:bg-green-500"
+              disabled={isPending || !isFormValid}
+              onClick={() => form.submit()}
+              className="transform bg-green-500/80 transition-all duration-200 hover:scale-105 hover:bg-green-500 disabled:opacity-50"
             >
               {isPending ? <LoadingOutlined spin /> : <CheckOutlined className="text-white" />}
             </Button>
@@ -101,7 +126,7 @@ export function ProjectCard(): ReactElement {
               variant="icon"
               aria-label="revert changes"
               onClick={onCancel}
-              className="transform bg-red-500/80 transition-all duration-200 hover:scale-105 hover:bg-red-500"
+              className="transform bg-red-500/80 transition-all duration-200 hover:scale-105 hover:bg-red-500 disabled:opacity-50"
             >
               <CloseOutlined className="text-white" />
             </Button>
@@ -139,42 +164,57 @@ export function ProjectCard(): ReactElement {
         <div className="h-full w-full p-6 md:w-[calc(100%-6px)] md:pt-20 lg:p-6 lg:md:w-[calc(var(--container-2xl)-14px)] xl:max-w-3xl">
           <div className="mb-2 lg:mb-6">
             {isEditing ? (
-              <textarea
-                id="project-name"
+              <Form.Item
                 name="name"
-                ref={nameRef}
-                defaultValue={result.data.project.name}
-                className={cn(
-                  'w-full resize-none rounded-lg border border-white/20 bg-white/10 p-3 text-lg font-bold text-white placeholder-white/60 backdrop-blur-sm transition-all duration-300',
-                  'min-h-auto placeholder:text-sm focus:bg-white/15 focus:ring-1 focus:ring-white/30 focus:outline-none lg:text-xl'
-                )}
-                placeholder="Enter title..."
-                rows={1}
-              />
+                rules={[
+                  { required: true, message: 'Name is required' },
+                  { max: 60, message: 'Name must be less than 60 characters' },
+                ]}
+                initialValue={result.data.project.name}
+              >
+                <Input.TextArea
+                  id="project-name"
+                  ref={nameRef}
+                  className={cn(
+                    'w-full resize-none rounded-lg border border-white/20 p-3 text-lg font-bold text-white placeholder-white/60 backdrop-blur-sm transition-all duration-300',
+                    'min-h-auto placeholder:text-sm hover:bg-transparent! focus:bg-white/15 focus:ring-1 focus:ring-white/30 focus:outline-none lg:text-xl',
+                    '[&.ant-input-outlined]:bg-transparent! [&.ant-input-outlined]:hover:bg-transparent!'
+                  )}
+                  placeholder="Enter title..."
+                  rows={1}
+                  autoSize
+                />
+              </Form.Item>
             ) : (
               <h1 className="text-xl leading-tight font-bold text-white transition-all duration-300 lg:text-2xl xl:text-3xl">
-                {isPending ? variables.name : result.data.project.name}
+                {isPending ? variables?.name : result.data.project.name}
               </h1>
             )}
           </div>
 
           <div>
             {isEditing ? (
-              <textarea
-                id="project-description"
+              <Form.Item
                 name="description"
-                defaultValue={result.data.project.description}
-                className={cn(
-                  'w-full resize-y rounded-lg border border-white/20 bg-white/10 p-2 text-base text-white/90 placeholder-white/60 backdrop-blur-sm',
-                  'transition-all duration-300 placeholder:text-sm focus:bg-white/15 focus:ring-1 focus:ring-white/30 focus:outline-none lg:text-lg'
-                )}
-                placeholder="Enter description..."
-                rows={4}
-              />
+                initialValue={result.data.project.description}
+                rules={[{ max: 600, message: 'Description must be less than 600 characters' }]}
+              >
+                <Input.TextArea
+                  id="project-description"
+                  className={cn(
+                    'w-full resize-y rounded-lg border border-white/20 p-2 text-base text-white/90 placeholder-white/60 backdrop-blur-sm',
+                    'transition-all duration-300 placeholder:text-sm focus:bg-white/15 focus:ring-1 focus:ring-white/30 focus:outline-none lg:text-lg',
+                    '[&.ant-input-outlined]:bg-transparent! [&.ant-input-outlined]:hover:bg-transparent!'
+                  )}
+                  placeholder="Enter description..."
+                  rows={4}
+                  autoSize={{ minRows: 4, maxRows: 10 }}
+                />
+              </Form.Item>
             ) : (
               <ExpandableText
                 id="project-description-text"
-                text={isPending ? variables.description : result.data.project.description}
+                text={isPending ? variables?.description : result.data.project.description}
                 collapsedLines={6}
                 className="text-justify text-base leading-6 text-white/90 transition-all duration-300 lg:text-lg"
               >
@@ -196,6 +236,6 @@ export function ProjectCard(): ReactElement {
           </div>
         </div>
       </div>
-    </form>
+    </Form>
   );
 }

src/ui/segments/project/create/form.tsx

@@ -111,8 +111,8 @@ export function CreationForm() {
             rules={[
               { required: true, message: 'Please enter project name' },
               {
-                max: 80,
-                message: 'Project name cannot exceed 80 characters!',
+                max: 60,
+                message: 'Project name cannot exceed 60 characters',
               },
               {
                 validator: async (_: any, name: string) => {
@@ -166,6 +166,12 @@ export function CreationForm() {
           <Form.Item
             label={<span className="font-semibold text-white">Description</span>}
             name="description"
+            rules={[
+              {
+                max: 600,
+                message: 'Project description cannot exceed 600 characters',
+              },
+            ]}
           >
             <Input.TextArea
               rows={4}

src/ui/segments/project/team/team.tsx

@@ -390,6 +390,8 @@ function AddMemberStep({ onBack, list, allowedOperation }: AddMemberStepProps) {
         placement: 'topRight',
         key: 'add-members-success',
       });
+      setSelectedMembers([]);
+      onBack();
     },
     onError: () => {
       notifyError({
@@ -485,6 +487,8 @@ function AddMemberStep({ onBack, list, allowedOperation }: AddMemberStepProps) {
         >
           <div className="secondary-scrollbar mx-auto h-full w-full max-w-3xl overflow-y-auto">
             <List
+              id="project-list-users"
+              data-testid="project-list-users"
               dataSource={filteredUsers}
               className="text-white"
               renderItem={(member, index) => {

src/ui/segments/virtual-lab-settings/index.tsx

@@ -21,12 +21,13 @@ import { Button } from '@/ui/molecules/button';
 import { cn } from '@/utils/css-class';
 
 import type { VirtualLab, VirtualLabListResponse } from '@/api/virtual-lab-svc/queries/types';
+import { ExpandableText } from '@/ui/molecules/more-less-text';
 
 const baseNameSchema = z
   .string()
   .trim()
-  .min(1, 'Name is required')
-  .max(100, 'Name must be less than 100 characters');
+  .min(1, 'Please enter a name for virtual lab')
+  .max(60, 'The name must be less than 100 characters');
 
 function buildAsyncNameSchema(currentName: string) {
   return baseNameSchema.superRefine(async (val: string, ctx: z.RefinementCtx) => {
@@ -236,8 +237,8 @@ function EditableName({
 
   if (isEditing) {
     return (
-      <div className="flex items-start gap-2">
-        <div className="flex flex-col gap-1">
+      <div className="flex w-full items-start gap-2">
+        <div className="flex w-full flex-col gap-1">
           <div className="relative">
             <input
               type="text"
@@ -305,10 +306,27 @@ function EditableName({
   }
 
   return (
-    <div className="group flex items-center gap-2">
-      <h2 className="text-3xl font-bold transition-all duration-200 select-none group-hover:text-white/90">
-        {currentName}
-      </h2>
+    <div className="group flex items-start gap-2">
+      <ExpandableText
+        id="project-description-text"
+        text={currentName}
+        collapsedLines={2}
+        className="text-3xl font-bold break-words hyphens-auto transition-all duration-200 select-none group-hover:text-white/90"
+      >
+        {({ isExpanded, toggle }) => (
+          <button
+            type="button"
+            onClick={toggle}
+            aria-controls="virtual-lab-less-more"
+            className={cn(
+              'text-white/90 underline decoration-white/40 underline-offset-4 transition-colors hover:text-white',
+              'text-sm'
+            )}
+          >
+            {isExpanded ? 'Show less' : 'Show more'}
+          </button>
+        )}
+      </ExpandableText>
       {isAdmin && (
         <Button
           type="button"
@@ -337,8 +355,8 @@ function Header({
   const virtualLabId = virtualLab?.id || '';
 
   return (
-    <div className="flex items-center justify-between py-4 text-white">
-      <div className="flex flex-col gap-0.5">
+    <div className="flex items-start justify-between gap-4 py-4 text-white">
+      <div className="flex w-2/3 flex-col gap-0.5">
         {virtualLabId && <EditableName initialName={name} virtualLabId={virtualLabId} />}
       </div>
       <div className="flex items-center justify-center gap-1.5">

src/ui/segments/virtual-lab-settings/sections/team.tsx

@@ -170,6 +170,9 @@ function InviteMemberStep({ onBack, virtualLabId }: InviteMemberStepProps) {
           placement: 'topRight',
           key: 'send-invites-success',
         });
+        // Reset form to single empty invite field after successful submission
+        setInviteList([{ email: '', role: 'member' }]);
+        onBack();
       }
     },
     onError: () => {
@@ -232,6 +235,8 @@ function InviteMemberStep({ onBack, virtualLabId }: InviteMemberStepProps) {
         >
           <div className="primary-scrollbar mx-auto h-full w-full max-w-3xl overflow-y-auto px-4">
             <List
+              id="virtual-lab-list-users"
+              data-testid="virtual-lab-list-users"
               dataSource={inviteList}
               className="text-white"
               renderItem={(invite, index) => (