Skip to content

Commit

Permalink
fix: validtion error
Browse files Browse the repository at this point in the history
  • Loading branch information
@yomybaby
yomybaby committed Oct 2, 2024
1 parent e24d78b commit 6f5b60d
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 122 deletions.
2 changes: 1 addition & 1 deletion react/src/BAICard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
162 changes: 79 additions & 83 deletions react/src/components/SessionOwnerSetterCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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';

Expand All @@ -37,7 +37,6 @@ const SessionOwnerSetterCard: React.FC<CardProps> = (props) => {
const relayEvn = useRelayEnvironment();
const domainName = useCurrentDomainValue();

// const baiClient = useSuspendedBackendaiClient();
const { data, isFetching } = useTanQuery({
queryKey: ['SessionOwnerSetterCard', 'ownerInfo', fetchingEmail],
queryFn: () => {
Expand Down Expand Up @@ -68,70 +67,9 @@ const SessionOwnerSetterCard: React.FC<CardProps> = (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<SessionOwnerSetterCardQuery>(
// 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 (
<Card
Expand Down Expand Up @@ -228,7 +166,7 @@ const SessionOwnerSetterCard: React.FC<CardProps> = (props) => {
};
})}
autoSelectOption
disabled={_.isEmpty(fetchingEmail)}
disabled={_.isEmpty(fetchingEmail) || isFetching}
// defaultActiveFirstOption
/>
</Form.Item>
Expand All @@ -251,35 +189,50 @@ const SessionOwnerSetterCard: React.FC<CardProps> = (props) => {
};
})}
autoSelectOption
disabled={_.isEmpty(fetchingEmail)}
disabled={_.isEmpty(fetchingEmail) || isFetching}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item dependencies={[['owner', 'group']]} noStyle>
{({ getFieldValue }) => {
return (
<Form.Item
name={['owner', 'scaling-group']}
label={t('session.launcher.OwnerResourceGroup')}
rules={[
{
required: getFieldValue(['owner', 'enabled']),
},
]}
<Suspense
fallback={
<Form.Item
label={t('session.launcher.OwnerResourceGroup')}
rules={[
{
required: getFieldValue(['owner', 'enabled']),
},
]}
>
<Select loading />
</Form.Item>
}
>
<Suspense fallback={<Select loading />}>
<Form.Item
name={['owner', 'scaling-group']}
label={t('session.launcher.OwnerResourceGroup')}
rules={[
{
required: getFieldValue(['owner', 'enabled']),
},
]}
>
{getFieldValue(['owner', 'group']) ? (
<ResourceGroupSelect
projectName={getFieldValue(['owner', 'group'])}
disabled={_.isEmpty(fetchingEmail)}
disabled={
_.isEmpty(fetchingEmail) || isFetching
}
autoSelectDefault
/>
) : (
<Select disabled />
)}
</Suspense>
</Form.Item>
</Form.Item>
</Suspense>
);
}}
</Form.Item>
Expand All @@ -293,4 +246,47 @@ const SessionOwnerSetterCard: React.FC<CardProps> = (props) => {
);
};

export const SessionOwnerSetterPreviewCard: React.FC<BAICardProps> = (
props,
) => {
const { t } = useTranslation();
const form = Form.useFormInstance();
const isActive = Form.useWatch(['owner', 'enabled'], form);
const currentUserRole = useCurrentUserRole();
return (
(currentUserRole === 'admin' || currentUserRole === 'superadmin') &&
isActive && (
<BAICard
title={t('session.launcher.SetSessionOwner')}
size="small"
status={
form.getFieldError(['owner', 'email']).length > 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}
>
<Descriptions size="small" column={1}>
<Descriptions.Item label={t('session.launcher.OwnerEmail')}>
{form.getFieldValue(['owner', 'email'])}
</Descriptions.Item>
<Descriptions.Item label={t('session.launcher.OwnerAccessKey')}>
{form.getFieldValue(['owner', 'accesskey'])}
</Descriptions.Item>
<Descriptions.Item label={t('session.launcher.OwnerGroup')}>
{form.getFieldValue(['owner', 'group'])}
</Descriptions.Item>
<Descriptions.Item label={t('session.launcher.OwnerResourceGroup')}>
{form.getFieldValue(['owner', 'scaling-group'])}
</Descriptions.Item>
</Descriptions>
</BAICard>
)
);
};

export default SessionOwnerSetterCard;
41 changes: 3 additions & 38 deletions react/src/pages/SessionLauncherPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -1208,50 +1209,14 @@ const SessionLauncherPage = () => {
)}
</Descriptions>
</BAICard>
{console.log(form.getFieldsError([['owner']]))}
<BAICard
title={t('session.launcher.SetSessionOwner')}
size="small"
status={
form.getFieldError(['owner', 'email']).length > 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')}
<SessionOwnerSetterPreviewCard
onClickExtraButton={() => {
setCurrentStep(
// @ts-ignore
steps.findIndex((v) => v.key === 'sessionType'),
);
}}
>
<Descriptions size="small" column={1}>
<Descriptions.Item
label={t('session.launcher.OwnerEmail')}
>
{form.getFieldValue(['owner', 'email'])}
</Descriptions.Item>
<Descriptions.Item
label={t('session.launcher.OwnerAccessKey')}
>
{form.getFieldValue(['owner', 'accesskey'])}
</Descriptions.Item>
<Descriptions.Item
label={t('session.launcher.OwnerGroup')}
>
{form.getFieldValue(['owner', 'group'])}
</Descriptions.Item>
<Descriptions.Item
label={t('session.launcher.OwnerResourceGroup')}
>
{form.getFieldValue(['owner', 'scaling-group'])}
</Descriptions.Item>
</Descriptions>
</BAICard>
/>
<BAICard
title={t('session.launcher.Environments')}
size="small"
Expand Down

0 comments on commit 6f5b60d

Please sign in to comment.