add skeleton and plans from santry

openbraininstitute · Feb 26, 2025 · d579ba1 · d579ba1
1 parent bde5cd9
commit d579ba1
Show file tree

Hide file tree

Showing 17 changed files with 328 additions and 382 deletions.
diff --git a/src/app/app/virtual-lab/(home)/page.tsx b/src/app/app/virtual-lab/(home)/page.tsx
@@ -16,7 +16,7 @@ export default async function Page() {
 
   try {
     const labs = await getVirtualLabsOfUser();
-    if (!labs.data.total) redirectUrl = '/app/virtual-lab/lab/create';
+    if (!labs.data.total) redirectUrl = '/app/virtual-lab/lab/create?t=f';
     else node = <LabsListing virtualLabs={labs.data.results} />;
   } catch (error) {
     throw new Error((error as { message: string }).message);

diff --git a/src/components/VirtualLab/create-entity-flows/common/member-form.tsx b/src/components/VirtualLab/create-entity-flows/common/member-form.tsx
@@ -43,15 +43,7 @@ export default function Content({ ListCompo, cls }: Props) {
           <div className="my-10 h-px bg-gray-100" />
         </>
       )}
-      <Form.List
-        name="include_members"
-        initialValue={[
-          {
-            email: '',
-            role: 'member',
-          },
-        ]}
-      >
+      <Form.List name="include_members">
         {(fields, { add, remove }) => (
           <>
             <div

diff --git a/src/components/VirtualLab/create-entity-flows/common/step-menu.tsx b/src/components/VirtualLab/create-entity-flows/common/step-menu.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Fragment } from 'react';
 import { useAtomValue } from 'jotai';
 import { atomWithReset } from 'jotai/utils';
 
@@ -32,8 +33,8 @@ export default function BasicStepMenu<T>({ steps, title, flowAtom }: StepMenuPro
         <Breadcrumb>
           <BreadcrumbList className="gap-4">
             {steps.map((step, index) => (
-              <>
-                <BreadcrumbItem key={step.id}>
+              <Fragment key={step.id}>
+                <BreadcrumbItem>
                   <button
                     type="button"
                     aria-label={step.label}
@@ -48,7 +49,7 @@ export default function BasicStepMenu<T>({ steps, title, flowAtom }: StepMenuPro
                 {index < steps.length - 1 && (
                   <BreadcrumbSeparator key={`sep-${step.id}`} className="text-primary-5" />
                 )}
-              </>
+              </Fragment>
             ))}
           </BreadcrumbList>
         </Breadcrumb>

diff --git a/src/components/VirtualLab/create-entity-flows/invite/index.tsx b/src/components/VirtualLab/create-entity-flows/invite/index.tsx
@@ -143,6 +143,14 @@ export default function InviteModal({ isOpen, onClose, type, title, context }: P
           validateTrigger={['onChange']}
           onValuesChange={onValuesChange}
           disabled={pending}
+          initialValues={{
+            include_members: [
+              {
+                email: '',
+                role: 'member',
+              },
+            ],
+          }}
         >
           <MemberList cls={{ listContainer: '!max-h-[400px] !px-0' }} />
           <div className="mt-auto flex items-end justify-end gap-3">
@@ -157,7 +165,7 @@ export default function InviteModal({ isOpen, onClose, type, title, context }: P
               Cancel
             </Button>
             <Button
-              key="create-vlab-btn"
+              key="invite-btn"
               className="h-14 rounded-none border-primary-8 bg-primary-8 px-10 text-white hover:!text-white"
               type="default"
               size="large"

diff --git a/src/components/VirtualLab/create-entity-flows/project/footer.tsx b/src/components/VirtualLab/create-entity-flows/project/footer.tsx
@@ -36,7 +36,7 @@ export default function Footer({
     <div className="mt-auto w-full">
       <div className="flex items-end justify-end gap-3">
         <Button
-          key="cancel-information-btn"
+          key="cancel-btn"
           className={classNames(
             'h-14 rounded-none bg-white px-6 text-primary-8',
             'hover:!border hover:border-primary-8 hover:!bg-white hover:font-bold hover:!text-primary-8'
@@ -50,7 +50,7 @@ export default function Footer({
         </Button>
         {step !== steps.at(0)?.id && (
           <Button
-            key="back-to-information-btn"
+            key="back-to-btn"
             className={classNames(
               'h-14 rounded-none bg-white px-6 text-primary-8',
               'hover:!border hover:border-primary-8 hover:!bg-white hover:font-bold hover:!text-primary-8'
@@ -65,7 +65,7 @@ export default function Footer({
         )}
         {step !== steps.at(-1)?.id && (
           <Button
-            key="next-to-members-btn"
+            key="next-to-btn"
             className={classNames(
               'h-14 rounded-none border border-primary-8 bg-white px-14 text-primary-8',
               'hover:!border hover:!border-primary-5 hover:font-bold hover:shadow-sm',

diff --git a/src/components/VirtualLab/create-entity-flows/project/form.tsx b/src/components/VirtualLab/create-entity-flows/project/form.tsx
@@ -103,7 +103,12 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {
     startTransition(async () => {
       try {
         const id = virtualLabId ?? values.virtual_lab_id;
-        const result = await createProject(id, values);
+        const formValues = {
+          ...values,
+          include_members:
+            values.include_members?.map((o) => ({ email: o.email, role: o.role })) ?? null,
+        };
+        const result = await createProject(id, formValues);
         if (result && result.data) {
           notify.success(
             `Your Project ${values.name} has been created successfully and is now ready to use.`,
@@ -144,30 +149,31 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {
         onValuesChange={onValuesChange}
         disabled={pending}
       >
-        <motion.div
-          key={step}
-          custom={slideDirection}
-          variants={{
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-          }}
-          initial="enter"
-          animate="center"
-          exit="exit"
-          transition={{
-            duration: 0.3,
-            type: 'tween',
-            ease: 'easeInOut',
-          }}
-          className="relative flex h-full flex-grow flex-col"
-        >
-          {virtualLabId && (
-            <Form.Item hidden name="virtual_lab_id">
-              <input name="virtual_lab_id" type="text" value={virtualLabId} hidden />
-            </Form.Item>
-          )}
-          <AnimatePresence initial={false} custom={slideDirection} mode="wait">
+        <AnimatePresence initial={false} custom={slideDirection} mode="wait">
+          <motion.div
+            key={step}
+            custom={slideDirection}
+            variants={{
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+            }}
+            initial="enter"
+            animate="center"
+            exit="exit"
+            transition={{
+              duration: 0.3,
+              type: 'tween',
+              ease: 'easeInOut',
+            }}
+            className="relative flex h-full flex-grow flex-col"
+          >
+            {virtualLabId && (
+              <Form.Item hidden name="virtual_lab_id">
+                <input name="virtual_lab_id" type="text" value={virtualLabId} hidden />
+              </Form.Item>
+            )}
+
             <div className={step !== 'virtual-lab' ? 'hidden' : ''}>
               <VirtualLabsList />
             </div>
@@ -180,8 +186,8 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {
                 cls={{ listContainer: 'max-h-[calc(100vh-500px)] mb-5 secondary-scrollbar' }}
               />
             </div>
-          </AnimatePresence>
-        </motion.div>
+          </motion.div>
+        </AnimatePresence>
         <div className="mx-auto mt-auto w-full max-w-5xl px-4 lg:max-w-full">
           <div className="py-4">
             <Footer

diff --git a/src/components/VirtualLab/create-entity-flows/virtual-lab/footer.tsx b/src/components/VirtualLab/create-entity-flows/virtual-lab/footer.tsx
@@ -30,7 +30,7 @@ export default function Footer({
     <div className="mt-auto w-full">
       <div className="flex items-end justify-end gap-3">
         <Button
-          key="cancel-information-btn"
+          key="cancel-btn"
           className={classNames(
             'h-14 rounded-none bg-white px-6 text-primary-8',
             'hover:!border hover:border-primary-8 hover:!bg-white hover:font-bold hover:!text-primary-8'
@@ -44,7 +44,7 @@ export default function Footer({
         </Button>
         {step !== virtualLabFlowSteps.at(0)?.id && (
           <Button
-            key="back-to-information-btn"
+            key="back-to-btn"
             className={classNames(
               'h-14 rounded-none bg-white px-6 text-primary-8',
               'hover:!border hover:border-primary-8 hover:!bg-white hover:font-bold hover:!text-primary-8'
@@ -59,7 +59,7 @@ export default function Footer({
         )}
         {step !== virtualLabFlowSteps.at(-1)?.id && (
           <Button
-            key="next-to-members-btn"
+            key="next-to-btn"
             className={classNames(
               'h-14 rounded-none border border-primary-8 bg-white px-14 text-primary-8',
               'hover:!border hover:!border-primary-5 hover:font-bold hover:shadow-sm',
@@ -77,7 +77,7 @@ export default function Footer({
         )}
         {step === virtualLabFlowSteps.at(-1)?.id && (
           <Button
-            key="create-project-btn"
+            key="create-vlab-btn"
             className={classNames(
               'h-14 rounded-none border border-white bg-primary-9 px-14 text-white',
               'hover:!border hover:!border-primary-8 hover:bg-primary-8 hover:font-bold hover:!text-white hover:shadow-sm',

diff --git a/src/components/VirtualLab/create-entity-flows/virtual-lab/form.tsx b/src/components/VirtualLab/create-entity-flows/virtual-lab/form.tsx
@@ -3,7 +3,7 @@
 import { useState, useTransition } from 'react';
 import { ConfigProvider, Form } from 'antd';
 import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { motion, AnimatePresence } from 'framer-motion';
 
 import MemberList from '@/components/VirtualLab/create-entity-flows/common/member-form';
@@ -53,17 +53,19 @@ function Members() {
 export default function CreationForm({ step, onCancel, onStepChange }: Props) {
   const notify = useNotification();
   const { push: navigate } = useRouter();
+  const { data } = useSession();
+  const params = useSearchParams();
 
   const [form] = Form.useForm<VirtualLabPayload>();
   const [isFormValid, setIsFormValid] = useState(false);
   const [pending, startTransition] = useTransition();
-
   const [slideDirection, setSlideDirection] = useState<'right' | 'left'>('right');
   const fields = Form.useWatch<Omit<VirtualLabPayload, 'include_members'>>([], form);
 
-  const disableNextPlans = Boolean(!(isFormValid && fields.email_status === 'verified'));
+  const disableNextPlans = Boolean(!(isFormValid && fields?.email_status === 'verified'));
   const disableNextMembers = !fields?.plan_id;
   const allowAskCode = Boolean(isFormValid && fields.email_status !== 'verified');
+  const firstLogin = params.get('t') === 'f';
 
   const onNextStep = () => {
     setSlideDirection('left');
@@ -83,7 +85,11 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {
 
   const resetForm = () => form.resetFields();
 
-  const onSelectPlan = (id: string) => form.setFieldValue('plan_id', id);
+  const onSelectPlan = (id: string) => {
+    form.setFieldValue('plan_id', id);
+    if (typeof window !== 'undefined')
+      window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+  };
 
   const onValuesChange = () => {
     form
@@ -103,7 +109,12 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {
   const onFormSubmit = async (values: VirtualLabPayload) => {
     startTransition(async () => {
       try {
-        const result = await createVirtualLab(values);
+        const formValues = {
+          ...values,
+          include_members:
+            values.include_members?.map((o) => ({ email: o.email, role: o.role })) ?? null,
+        };
+        const result = await createVirtualLab(formValues);
         if (result && result.data) {
           notify.success(
             'Your Virtual Lab has been created successfully and is now ready to use.',
@@ -139,7 +150,7 @@ export default function CreationForm({ step, onCancel, onStepChange }: Props) {
         requiredMark={false}
         validateTrigger={['onChange']}
         initialValues={{
-          name: '',
+          name: firstLogin ? `${data?.user.name}'s virtual lab` : undefined,
           description: '',
           entity: null,
           include_members: [],

diff --git a/src/components/VirtualLab/create-entity-flows/virtual-lab/overview.tsx b/src/components/VirtualLab/create-entity-flows/virtual-lab/overview.tsx
@@ -30,7 +30,7 @@ export default function Overview({ allowAskCode }: Props) {
   return (
     <div className="mx-auto h-full w-full max-w-5xl flex-grow bg-white p-12">
       <Form.Item
-        validateDebounce={500}
+        validateDebounce={800}
         label={<span className="font-semibold text-primary-8">Virtual Lab&#39;s Name</span>}
         name="name"
         className="w-full flex-1"