From 6f5b60d44d0108ea0af9f43434bfdda97c619cb2 Mon Sep 17 00:00:00 2001 From: Jong Eun Lee Date: Mon, 9 Sep 2024 11:31:09 +0800 Subject: [PATCH] fix: validtion error --- react/src/BAICard.tsx | 2 +- .../src/components/SessionOwnerSetterCard.tsx | 162 +++++++++--------- react/src/pages/SessionLauncherPage.tsx | 41 +---- 3 files changed, 83 insertions(+), 122 deletions(-) diff --git a/react/src/BAICard.tsx b/react/src/BAICard.tsx index e5d56b5d62..fb2b484714 100644 --- a/react/src/BAICard.tsx +++ b/react/src/BAICard.tsx @@ -3,7 +3,7 @@ import { Button, Card, CardProps, theme } from 'antd'; import _ from 'lodash'; import React, { ReactNode } from 'react'; -interface BAICardProps extends CardProps { +export interface BAICardProps extends CardProps { status?: 'success' | 'error' | 'warning' | 'default'; extraButtonTitle?: string | ReactNode; onClickExtraButton?: () => void; diff --git a/react/src/components/SessionOwnerSetterCard.tsx b/react/src/components/SessionOwnerSetterCard.tsx index 12c11a3b11..a59132410c 100644 --- a/react/src/components/SessionOwnerSetterCard.tsx +++ b/react/src/components/SessionOwnerSetterCard.tsx @@ -1,16 +1,16 @@ -import { useCurrentDomainValue, useSuspendedBackendaiClient } from '../hooks'; +import BAICard, { BAICardProps } from '../BAICard'; +import { useCurrentDomainValue } from '../hooks'; +import { useCurrentUserRole } from '../hooks/backendai'; import { useTanQuery } from '../hooks/reactQueryAlias'; import BAISelect from './BAISelect'; import Flex from './Flex'; import ResourceGroupSelect from './ResourceGroupSelect'; -import { - SessionOwnerSetterCardQuery, - SessionOwnerSetterCardQuery$data, -} from './__generated__/SessionOwnerSetterCardQuery.graphql'; +import { SessionOwnerSetterCardQuery } from './__generated__/SessionOwnerSetterCardQuery.graphql'; import { Button, Card, Col, + Descriptions, Form, Input, Row, @@ -21,8 +21,8 @@ import { import { CardProps } from 'antd/lib'; import graphql from 'babel-plugin-relay/macro'; import _ from 'lodash'; -import { BanIcon, CheckIcon } from 'lucide-react'; -import React, { startTransition, Suspense, useEffect, useState } from 'react'; +import { CheckIcon } from 'lucide-react'; +import React, { Suspense, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { fetchQuery, useRelayEnvironment } from 'react-relay'; @@ -37,7 +37,6 @@ const SessionOwnerSetterCard: React.FC = (props) => { const relayEvn = useRelayEnvironment(); const domainName = useCurrentDomainValue(); - // const baiClient = useSuspendedBackendaiClient(); const { data, isFetching } = useTanQuery({ queryKey: ['SessionOwnerSetterCard', 'ownerInfo', fetchingEmail], queryFn: () => { @@ -68,70 +67,9 @@ const SessionOwnerSetterCard: React.FC = (props) => { enabled: !!fetchingEmail, }); - console.log('###', data); const ownerKeypairs = data?.keypairs; const owner = data?.user; - // const handleFetchOwnerInfo = async () => { - // const email = form.getFieldValue(['owner', 'email']); - // if (email) { - // const query = graphql` - // query SessionOwnerSetterCardQuery( - // $email: String! - // $domainName: String! - // ) { - // keypairs(email: $email) { - // access_key - // } - // user(domain_name: $domainName, email: $email) { - // groups { - // name - // id - // } - // } - // } - // `; - // try { - // const data = await fetchQuery( - // relayEvn, - // query, - // { email, domainName }, - // ).toPromise(); - // setOwnerInfo(data); - // // console.log('Fetched owner info:', data); - // } catch (error) { - // // console.error('Error fetching owner info:', error); - // } - // } - // }; - - // const handleFetchOwnerInfo = async () => { - // if(fetchingEmail){ - // const query = graphql` - // query SessionOwnerSetterCardQuery($email: String!) { - - // } - // ` - // } - // } - - // console.log(data?.keypairs); - // useEffect(() => { - // if ( - // data?.keypairs && - // !_.find( - // data.keypairs, - // (k) => form.getFieldValue(['owner', 'accesskey']) === k.access_key, - // ) - // ) { - // form.setFieldsValue({ - // owner: { - // accesskey: data.keypairs[0].access_key, - // }, - // }); - // } - // }, [data?.keypairs]); - const nonExistentOwner = !isFetching && fetchingEmail && !owner; return ( = (props) => { }; })} autoSelectOption - disabled={_.isEmpty(fetchingEmail)} + disabled={_.isEmpty(fetchingEmail) || isFetching} // defaultActiveFirstOption /> @@ -251,7 +189,7 @@ const SessionOwnerSetterCard: React.FC = (props) => { }; })} autoSelectOption - disabled={_.isEmpty(fetchingEmail)} + disabled={_.isEmpty(fetchingEmail) || isFetching} /> @@ -259,27 +197,42 @@ const SessionOwnerSetterCard: React.FC = (props) => { {({ getFieldValue }) => { return ( - + )} - - + + ); }} @@ -293,4 +246,47 @@ const SessionOwnerSetterCard: React.FC = (props) => { ); }; +export const SessionOwnerSetterPreviewCard: React.FC = ( + props, +) => { + const { t } = useTranslation(); + const form = Form.useFormInstance(); + const isActive = Form.useWatch(['owner', 'enabled'], form); + const currentUserRole = useCurrentUserRole(); + return ( + (currentUserRole === 'admin' || currentUserRole === 'superadmin') && + isActive && ( + 0 || + form.getFieldError(['owner', 'accesskey']).length > 0 || + form.getFieldError(['owner', 'group']).length > 0 || + form.getFieldError(['owner', 'scaling-group']).length > 0 + ? 'error' + : undefined + } + extraButtonTitle={t('button.Edit')} + {...props} + > + + + {form.getFieldValue(['owner', 'email'])} + + + {form.getFieldValue(['owner', 'accesskey'])} + + + {form.getFieldValue(['owner', 'group'])} + + + {form.getFieldValue(['owner', 'scaling-group'])} + + + + ) + ); +}; + export default SessionOwnerSetterCard; diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx index ade1b9e19f..88b462ae2e 100644 --- a/react/src/pages/SessionLauncherPage.tsx +++ b/react/src/pages/SessionLauncherPage.tsx @@ -27,6 +27,7 @@ import SessionNameFormItem, { SessionNameFormItemValue, } from '../components/SessionNameFormItem'; import SessionOwnerSetterCard from '../components/SessionOwnerSetterCard'; +import { SessionOwnerSetterPreviewCard } from '../components/SessionOwnerSetterCard'; import SourceCodeViewer from '../components/SourceCodeViewer'; import VFolderTableFormItem, { VFolderTableFormValues, @@ -1208,50 +1209,14 @@ const SessionLauncherPage = () => { )} - {console.log(form.getFieldsError([['owner']]))} - 0 || - form.getFieldError(['owner', 'accesskey']).length > 0 || - form.getFieldError(['owner', 'group']).length > 0 || - form.getFieldError(['owner', 'scaling-group']).length > - 0 - ? 'error' - : undefined - } - extraButtonTitle={t('button.Edit')} + { setCurrentStep( // @ts-ignore steps.findIndex((v) => v.key === 'sessionType'), ); }} - > - - - {form.getFieldValue(['owner', 'email'])} - - - {form.getFieldValue(['owner', 'accesskey'])} - - - {form.getFieldValue(['owner', 'group'])} - - - {form.getFieldValue(['owner', 'scaling-group'])} - - - + />