From c9204dea8a3ab42308d0c93f58de2ba66ba081ce Mon Sep 17 00:00:00 2001
From: bilalesi <b_meddah@esi.dz>
Date: Thu, 18 Sep 2025 13:21:44 +0100
Subject: [PATCH 1/2] vlab name too long

---
 src/ui/molecules/more-less-text/index.tsx     |  2 ++
 src/ui/segments/project/team/team.tsx         |  2 ++
 .../segments/virtual-lab-settings/index.tsx   | 35 +++++++++++++++----
 .../virtual-lab-settings/sections/team.tsx    |  2 ++
 .../workspaces/space-switcher/item.tsx        | 13 ++++---
 5 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/ui/molecules/more-less-text/index.tsx b/src/ui/molecules/more-less-text/index.tsx
index 43cc3a47c..0da0ecc20 100644
--- a/src/ui/molecules/more-less-text/index.tsx
+++ b/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:
diff --git a/src/ui/segments/project/team/team.tsx b/src/ui/segments/project/team/team.tsx
index 1cb5a4ff2..107ae7534 100644
--- a/src/ui/segments/project/team/team.tsx
+++ b/src/ui/segments/project/team/team.tsx
@@ -485,6 +485,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) => {
diff --git a/src/ui/segments/virtual-lab-settings/index.tsx b/src/ui/segments/virtual-lab-settings/index.tsx
index ddc7c53f0..bd25ffc46 100644
--- a/src/ui/segments/virtual-lab-settings/index.tsx
+++ b/src/ui/segments/virtual-lab-settings/index.tsx
@@ -21,6 +21,7 @@ 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()
@@ -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,30 @@ 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">
+    <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>
+      {/* <h2 className="text-3xl font-bold transition-all duration-200 select-none group-hover:text-white/90">
         {currentName}
-      </h2>
+      </h2> */}
       {isAdmin && (
         <Button
           type="button"
@@ -337,8 +358,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">
diff --git a/src/ui/segments/virtual-lab-settings/sections/team.tsx b/src/ui/segments/virtual-lab-settings/sections/team.tsx
index 40455afdb..d5093407a 100644
--- a/src/ui/segments/virtual-lab-settings/sections/team.tsx
+++ b/src/ui/segments/virtual-lab-settings/sections/team.tsx
@@ -232,6 +232,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) => (
diff --git a/src/ui/segments/workspaces/space-switcher/item.tsx b/src/ui/segments/workspaces/space-switcher/item.tsx
index 8e6cb6817..e75dad24f 100644
--- a/src/ui/segments/workspaces/space-switcher/item.tsx
+++ b/src/ui/segments/workspaces/space-switcher/item.tsx
@@ -115,12 +115,15 @@ export function Item({
         onKeyDown={onVlabClick}
         onClick={onVlabClick}
       >
-        <div className="flex items-center justify-center gap-2">
-          <LabCompany className={cn('text-label size-4', { 'text-primary-3': lab.isMine })} />
+        <div className="flex min-w-0 flex-1 items-center gap-2 select-none">
+          <LabCompany
+            className={cn('text-label size-4! min-h-4 min-w-4', { 'text-primary-3': lab.isMine })}
+          />
           <h4
             className={cn('text-primary-9 text-md line-clamp-1 truncate font-bold', {
               'group-hover:text-primary-8! text-white!': lab.isMine,
             })}
+            title={lab.name}
           >
             {lab.name}
           </h4>
@@ -184,7 +187,7 @@ export function Item({
                     size="md"
                     variant="outline"
                     className={cn('w-full justify-start shadow-sm', {
-                      'text-primary-8 hover:text-primary-9 bg-gradient-to-br from-zinc-200 to-slate-50 font-bold':
+                      'text-primary-8 hover:text-primary-9 bg-white font-bold shadow-[16px_16px_30px_0px_#0000000F,-12px_-8px_32px_0px_#FFFFFF52]':
                         isActive,
                     })}
                     title={project.name}
@@ -196,7 +199,9 @@ export function Item({
                     }
                   >
                     {isActive && <div className="mr-2 h-3 w-3 rounded-full bg-current" />}
-                    <span className="line-clamp-1 truncate"> {project.name}</span>
+                    <span className="line-clamp-1 truncate" title={project.name}>
+                      {project.name}
+                    </span>
                     <RightOutlined
                       className={`ml-auto ${isActive ? 'text-neutral-2' : 'text-neutral-3'}`}
                     />

From 2b5d4568f1e0666149411f1aa840aa179a57aeff Mon Sep 17 00:00:00 2001
From: bilalesi <b_meddah@esi.dz>
Date: Fri, 19 Sep 2025 09:33:01 +0100
Subject: [PATCH 2/2] return back to member list after successful invite/add
 operation

order project in the space switcher by updated_at
---
 .../create-entity-flows/project/overview.tsx  |   4 +-
 src/ui/segments/project/banner/banner.tsx     | 124 ++++++++++++------
 src/ui/segments/project/create/form.tsx       |  10 +-
 src/ui/segments/project/team/team.tsx         |   2 +
 .../segments/virtual-lab-settings/index.tsx   |   7 +-
 .../virtual-lab-settings/sections/team.tsx    |   3 +
 .../workspaces/space-switcher/item.tsx        |  13 +-
 7 files changed, 107 insertions(+), 56 deletions(-)

diff --git a/src/components/VirtualLab/create-entity-flows/project/overview.tsx b/src/components/VirtualLab/create-entity-flows/project/overview.tsx
index 7c9e07a7a..27bcd1306 100644
--- a/src/components/VirtualLab/create-entity-flows/project/overview.tsx
+++ b/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) => {
diff --git a/src/ui/segments/project/banner/banner.tsx b/src/ui/segments/project/banner/banner.tsx
index 2e5efb1ea..23757c935 100644
--- a/src/ui/segments/project/banner/banner.tsx
+++ b/src/ui/segments/project/banner/banner.tsx
@@ -3,6 +3,8 @@
 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';
@@ -10,9 +12,9 @@ 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 = {
@@ -20,9 +22,17 @@ type TCardContent = {
   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>
   );
 }
diff --git a/src/ui/segments/project/create/form.tsx b/src/ui/segments/project/create/form.tsx
index a4f4701d5..7d5e33bc2 100644
--- a/src/ui/segments/project/create/form.tsx
+++ b/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}
diff --git a/src/ui/segments/project/team/team.tsx b/src/ui/segments/project/team/team.tsx
index 107ae7534..efcd11bc8 100644
--- a/src/ui/segments/project/team/team.tsx
+++ b/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({
diff --git a/src/ui/segments/virtual-lab-settings/index.tsx b/src/ui/segments/virtual-lab-settings/index.tsx
index bd25ffc46..2f1ef6f42 100644
--- a/src/ui/segments/virtual-lab-settings/index.tsx
+++ b/src/ui/segments/virtual-lab-settings/index.tsx
@@ -26,8 +26,8 @@ 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) => {
@@ -327,9 +327,6 @@ function EditableName({
           </button>
         )}
       </ExpandableText>
-      {/* <h2 className="text-3xl font-bold transition-all duration-200 select-none group-hover:text-white/90">
-        {currentName}
-      </h2> */}
       {isAdmin && (
         <Button
           type="button"
diff --git a/src/ui/segments/virtual-lab-settings/sections/team.tsx b/src/ui/segments/virtual-lab-settings/sections/team.tsx
index d5093407a..f8eb0681f 100644
--- a/src/ui/segments/virtual-lab-settings/sections/team.tsx
+++ b/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: () => {
diff --git a/src/ui/segments/workspaces/space-switcher/item.tsx b/src/ui/segments/workspaces/space-switcher/item.tsx
index e75dad24f..f3d7f0e4c 100644
--- a/src/ui/segments/workspaces/space-switcher/item.tsx
+++ b/src/ui/segments/workspaces/space-switcher/item.tsx
@@ -4,18 +4,19 @@ import { DownOutlined, LoadingOutlined, RightOutlined } from '@ant-design/icons'
 import { motion, AnimatePresence } from 'framer-motion';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
+import orderBy from 'lodash/orderBy';
 
+import { listProjects } from '@/api/virtual-lab-svc/queries/project';
+import { keyBuilder } from '@/ui/use-query-keys/workspace';
+import { LabCompany } from '@/components/icons/buttons';
 import {
   makeTriggerWorkspaceConfigurationClickEvent,
   WorkspaceActions,
 } from '@/ui/segments/workspaces/space-manager/event';
-import { listProjects } from '@/api/virtual-lab-svc/queries/project';
-import { keyBuilder } from '@/ui/use-query-keys/workspace';
 import { Button } from '@/ui/molecules/button';
 import { cn } from '@/utils/css-class';
 
 import type { Project, VirtualLab } from '@/api/virtual-lab-svc/queries/types';
-import { LabCompany } from '@/components/icons/buttons';
 
 type Props = {
   lab: VirtualLab & { isMine: boolean };
@@ -44,7 +45,7 @@ export function Item({
     queryFn: async () => await listProjects({ virtualLabId: lab.id! }),
     enabled: !!lab.id && (isOpen || tryingToExpand.has(lab.id)),
   });
-  const data = projects?.data?.results;
+  const data = orderBy(projects?.data?.results, ['updated_at'], ['desc']);
 
   // automatically move from trying to expanded when query succeeds
   useEffect(() => {
@@ -198,7 +199,9 @@ export function Item({
                       })
                     }
                   >
-                    {isActive && <div className="mr-2 h-3 w-3 rounded-full bg-current" />}
+                    {isActive && (
+                      <div className="mr-2 size-3 min-h-3 min-w-3 rounded-full bg-current" />
+                    )}
                     <span className="line-clamp-1 truncate" title={project.name}>
                       {project.name}
                     </span>