From ce5a4c3cc77b0d6bd949e81ce078f0e8e6a87dc9 Mon Sep 17 00:00:00 2001 From: Kirill Chernikov <72095428+Zabilsya@users.noreply.github.com> Date: Fri, 8 Nov 2024 17:01:16 +0600 Subject: [PATCH] [DOP-20067] run list and run detail (#41) * [DOP-20067] run list and run detail * [DOP-20067] move RunStatus enum from types to constants --------- Co-authored-by: Zabilsya --- src/app/config/router/instance.tsx | 5 ++ src/entities/group/api/groupService.ts | 5 +- src/entities/run/api/constants.ts | 8 +++ src/entities/run/api/hooks/index.ts | 1 + src/entities/run/api/hooks/useGetRun/index.ts | 13 +++++ src/entities/run/api/index.ts | 5 ++ src/entities/run/api/keys/index.ts | 4 ++ src/entities/run/api/runService.ts | 14 +++++ src/entities/run/api/types.ts | 20 ++++++++ src/entities/run/index.ts | 2 + src/entities/run/ui/RunStatusBadge/index.tsx | 11 ++++ src/entities/run/ui/RunStatusBadge/types.ts | 5 ++ .../utils/getRunStatusColor/index.ts | 18 +++++++ .../run/ui/RunStatusBadge/utils/index.ts | 1 + src/entities/run/ui/index.ts | 1 + src/features/group/CreateGroup/index.tsx | 6 +-- src/features/group/UpdateGroup/index.tsx | 8 +-- src/features/run/RunDetailInfo/index.tsx | 44 ++++++++++++++++ src/features/run/RunDetailInfo/types.ts | 8 +++ src/features/run/RunList/constants.tsx | 49 ++++++++++++++++++ src/features/run/RunList/index.tsx | 23 +++++++++ src/features/run/RunList/types.ts | 3 ++ src/features/run/index.ts | 2 + .../transfer/TransferDetailInfo/index.tsx | 2 +- .../connection/ConnectionDetailPage/index.tsx | 2 +- src/pages/group/GroupDetailPage/index.tsx | 2 +- src/pages/queue/QueueDetailPage/index.tsx | 2 +- src/pages/run/RunDetailPage/index.tsx | 51 +++++++++++++++++++ .../run/RunDetailPage/styles.module.less | 11 ++++ src/pages/run/index.ts | 1 + .../transfer/TransferDetailPage/index.tsx | 26 ++++++---- .../TransferDetailPage/styles.module.less | 5 ++ src/pages/user/UserDetailPage/index.tsx | 2 +- .../components/CreateRunModal/index.tsx | 14 +++++ .../components/CreateRunModal/types.ts | 7 +++ .../CreateRunButton/components/index.ts | 1 + .../components/CreateRunButton/index.tsx | 29 +++++++++++ .../CreateRunButton/styles.module.less | 3 ++ .../components/CreateRunButton/types.ts | 4 ++ .../run/TransferRuns/components/index.ts | 1 + src/widgets/run/TransferRuns/index.tsx | 27 ++++++++++ .../run/TransferRuns/styles.module.less | 9 ++++ src/widgets/run/TransferRuns/types.ts | 7 +++ src/widgets/run/index.ts | 1 + 44 files changed, 439 insertions(+), 24 deletions(-) create mode 100644 src/entities/run/api/constants.ts create mode 100644 src/entities/run/api/hooks/index.ts create mode 100644 src/entities/run/api/hooks/useGetRun/index.ts create mode 100644 src/entities/run/api/index.ts create mode 100644 src/entities/run/api/keys/index.ts create mode 100644 src/entities/run/api/runService.ts create mode 100644 src/entities/run/api/types.ts create mode 100644 src/entities/run/index.ts create mode 100644 src/entities/run/ui/RunStatusBadge/index.tsx create mode 100644 src/entities/run/ui/RunStatusBadge/types.ts create mode 100644 src/entities/run/ui/RunStatusBadge/utils/getRunStatusColor/index.ts create mode 100644 src/entities/run/ui/RunStatusBadge/utils/index.ts create mode 100644 src/entities/run/ui/index.ts create mode 100644 src/features/run/RunDetailInfo/index.tsx create mode 100644 src/features/run/RunDetailInfo/types.ts create mode 100644 src/features/run/RunList/constants.tsx create mode 100644 src/features/run/RunList/index.tsx create mode 100644 src/features/run/RunList/types.ts create mode 100644 src/features/run/index.ts create mode 100644 src/pages/run/RunDetailPage/index.tsx create mode 100644 src/pages/run/RunDetailPage/styles.module.less create mode 100644 src/pages/run/index.ts create mode 100644 src/pages/transfer/TransferDetailPage/styles.module.less create mode 100644 src/widgets/run/TransferRuns/components/CreateRunButton/components/CreateRunModal/index.tsx create mode 100644 src/widgets/run/TransferRuns/components/CreateRunButton/components/CreateRunModal/types.ts create mode 100644 src/widgets/run/TransferRuns/components/CreateRunButton/components/index.ts create mode 100644 src/widgets/run/TransferRuns/components/CreateRunButton/index.tsx create mode 100644 src/widgets/run/TransferRuns/components/CreateRunButton/styles.module.less create mode 100644 src/widgets/run/TransferRuns/components/CreateRunButton/types.ts create mode 100644 src/widgets/run/TransferRuns/components/index.ts create mode 100644 src/widgets/run/TransferRuns/index.tsx create mode 100644 src/widgets/run/TransferRuns/styles.module.less create mode 100644 src/widgets/run/TransferRuns/types.ts create mode 100644 src/widgets/run/index.ts diff --git a/src/app/config/router/instance.tsx b/src/app/config/router/instance.tsx index e38b1f77..389e8274 100644 --- a/src/app/config/router/instance.tsx +++ b/src/app/config/router/instance.tsx @@ -8,6 +8,7 @@ import { AuthProvider } from '@entities/auth'; import { CreateQueuePage, QueueDetailPage, QueueListPage, UpdateQueuePage } from '@pages/queue'; import { ConnectionDetailPage, ConnectionListPage } from '@pages/connection'; import { TransferDetailPage, TransferListPage } from '@pages/transfer'; +import { RunDetailPage } from '@pages/run'; import { ErrorBoundary, NotFoundError } from '../errorBoundary'; @@ -95,6 +96,10 @@ export const router = createBrowserRouter([ path: '/transfers/:id', element: , }, + { + path: '/transfers/runs/:id', + element: , + }, ], }, { diff --git a/src/entities/group/api/groupService.ts b/src/entities/group/api/groupService.ts index 7acedf6e..b3431593 100644 --- a/src/entities/group/api/groupService.ts +++ b/src/entities/group/api/groupService.ts @@ -9,6 +9,7 @@ import { GetGroupsRequest, GetGroupUsersRequest, Group, + GroupData, GroupUser, UpdateGroupRequest, UpdateGroupUserRequest, @@ -23,11 +24,11 @@ export const groupService = { return axiosInstance.get(`groups/${id}`); }, - createGroup: (data: CreateGroupRequest): Promise => { + createGroup: (data: CreateGroupRequest): Promise => { return axiosInstance.post(`groups`, data); }, - updateGroup: ({ id, ...data }: UpdateGroupRequest): Promise => { + updateGroup: ({ id, ...data }: UpdateGroupRequest): Promise => { return axiosInstance.patch(`groups/${id}`, data); }, diff --git a/src/entities/run/api/constants.ts b/src/entities/run/api/constants.ts new file mode 100644 index 00000000..e4819c28 --- /dev/null +++ b/src/entities/run/api/constants.ts @@ -0,0 +1,8 @@ +export enum RunStatus { + CREATED = 'CREATED', + STARTED = 'STARTED', + FAILED = 'FAILED', + SEND_STOP_SIGNAL = 'SEND STOP SIGNAL', + STOPPED = 'STOPPED', + FINISHED = 'FINISHED', +} diff --git a/src/entities/run/api/hooks/index.ts b/src/entities/run/api/hooks/index.ts new file mode 100644 index 00000000..5f209060 --- /dev/null +++ b/src/entities/run/api/hooks/index.ts @@ -0,0 +1 @@ +export * from './useGetRun'; diff --git a/src/entities/run/api/hooks/useGetRun/index.ts b/src/entities/run/api/hooks/useGetRun/index.ts new file mode 100644 index 00000000..3846a5ef --- /dev/null +++ b/src/entities/run/api/hooks/useGetRun/index.ts @@ -0,0 +1,13 @@ +import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query'; + +import { GetRunRequest, Run } from '../../types'; +import { RunQueryKey } from '../../keys'; +import { runService } from '../../runService'; + +/** Hook for getting run info from backend */ +export const useGetRun = ({ id }: GetRunRequest): UseSuspenseQueryResult => { + return useSuspenseQuery({ + queryKey: [RunQueryKey.GET_RUN, id], + queryFn: () => runService.getRun({ id }), + }); +}; diff --git a/src/entities/run/api/index.ts b/src/entities/run/api/index.ts new file mode 100644 index 00000000..8e7d2997 --- /dev/null +++ b/src/entities/run/api/index.ts @@ -0,0 +1,5 @@ +export * from './runService'; +export * from './types'; +export * from './keys'; +export * from './hooks'; +export * from './constants'; diff --git a/src/entities/run/api/keys/index.ts b/src/entities/run/api/keys/index.ts new file mode 100644 index 00000000..0aed69e6 --- /dev/null +++ b/src/entities/run/api/keys/index.ts @@ -0,0 +1,4 @@ +export const RunQueryKey = { + GET_RUNS: 'GET_RUNS', + GET_RUN: 'GET_RUN', +} as const; diff --git a/src/entities/run/api/runService.ts b/src/entities/run/api/runService.ts new file mode 100644 index 00000000..f7f5220a --- /dev/null +++ b/src/entities/run/api/runService.ts @@ -0,0 +1,14 @@ +import { axiosInstance } from '@shared/config'; +import { PaginationResponse } from '@shared/types'; + +import { GetRunRequest, Run, GetRunsRequest } from './types'; + +export const runService = { + getRuns: (params: GetRunsRequest): Promise> => { + return axiosInstance.get('runs', { params }); + }, + + getRun: ({ id }: GetRunRequest): Promise => { + return axiosInstance.get(`runs/${id}`); + }, +}; diff --git a/src/entities/run/api/types.ts b/src/entities/run/api/types.ts new file mode 100644 index 00000000..a138ad9d --- /dev/null +++ b/src/entities/run/api/types.ts @@ -0,0 +1,20 @@ +import { PaginationRequest } from '@shared/types'; + +import { RunStatus } from './constants'; + +export interface Run { + id: number; + transfer_id: number; + started_at: string | null; + ended_at: string | null; + status: keyof typeof RunStatus; + log_url: string | null; +} + +export interface GetRunsRequest extends PaginationRequest { + transfer_id: number; +} + +export interface GetRunRequest { + id: number; +} diff --git a/src/entities/run/index.ts b/src/entities/run/index.ts new file mode 100644 index 00000000..1a554c55 --- /dev/null +++ b/src/entities/run/index.ts @@ -0,0 +1,2 @@ +export * from './api'; +export * from './ui'; diff --git a/src/entities/run/ui/RunStatusBadge/index.tsx b/src/entities/run/ui/RunStatusBadge/index.tsx new file mode 100644 index 00000000..6791ef7a --- /dev/null +++ b/src/entities/run/ui/RunStatusBadge/index.tsx @@ -0,0 +1,11 @@ +import React, { memo } from 'react'; +import { Badge } from 'antd'; +import { RunStatus } from '@entities/run'; + +import { RunStatusBadgeProps } from './types'; +import { getRunStatusColor } from './utils'; + +export const RunStatusBadge = memo(({ status }: RunStatusBadgeProps) => { + const statusText = RunStatus[status]; + return ; +}); diff --git a/src/entities/run/ui/RunStatusBadge/types.ts b/src/entities/run/ui/RunStatusBadge/types.ts new file mode 100644 index 00000000..bb0d6432 --- /dev/null +++ b/src/entities/run/ui/RunStatusBadge/types.ts @@ -0,0 +1,5 @@ +import { RunStatus } from '../../api'; + +export interface RunStatusBadgeProps { + status: keyof typeof RunStatus; +} diff --git a/src/entities/run/ui/RunStatusBadge/utils/getRunStatusColor/index.ts b/src/entities/run/ui/RunStatusBadge/utils/getRunStatusColor/index.ts new file mode 100644 index 00000000..8f154bd4 --- /dev/null +++ b/src/entities/run/ui/RunStatusBadge/utils/getRunStatusColor/index.ts @@ -0,0 +1,18 @@ +import { RunStatus } from '@entities/run'; +import { BadgeProps } from 'antd'; + +/** Util for getting value of prop "status" for run status badge */ +export const getRunStatusColor = (status: RunStatus): BadgeProps['status'] => { + switch (status) { + case RunStatus.CREATED: + case RunStatus.STARTED: + return 'default'; + case RunStatus.FAILED: + return 'error'; + case RunStatus.SEND_STOP_SIGNAL: + case RunStatus.STOPPED: + return 'warning'; + case RunStatus.FINISHED: + return 'success'; + } +}; diff --git a/src/entities/run/ui/RunStatusBadge/utils/index.ts b/src/entities/run/ui/RunStatusBadge/utils/index.ts new file mode 100644 index 00000000..1ab3895a --- /dev/null +++ b/src/entities/run/ui/RunStatusBadge/utils/index.ts @@ -0,0 +1 @@ +export * from './getRunStatusColor'; diff --git a/src/entities/run/ui/index.ts b/src/entities/run/ui/index.ts new file mode 100644 index 00000000..f74d6511 --- /dev/null +++ b/src/entities/run/ui/index.ts @@ -0,0 +1 @@ +export * from './RunStatusBadge'; diff --git a/src/features/group/CreateGroup/index.tsx b/src/features/group/CreateGroup/index.tsx index 18cb097a..4825ba96 100644 --- a/src/features/group/CreateGroup/index.tsx +++ b/src/features/group/CreateGroup/index.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { ControlButtons, ManagedForm } from '@shared/ui'; -import { Group, GroupQueryKey, groupService } from '@entities/group'; +import { GroupData, GroupQueryKey, groupService } from '@entities/group'; import { Form, Input } from 'antd'; import { useNavigate } from 'react-router-dom'; export const CreateGroup = () => { const navigate = useNavigate(); - const onSuccess = (response: Group) => { - navigate(`/groups/${response.data.id}`); + const onSuccess = (response: GroupData) => { + navigate(`/groups/${response.id}`); }; const onCancel = () => { diff --git a/src/features/group/UpdateGroup/index.tsx b/src/features/group/UpdateGroup/index.tsx index df4ad6fe..b2436ddc 100644 --- a/src/features/group/UpdateGroup/index.tsx +++ b/src/features/group/UpdateGroup/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { ControlButtons, ManagedForm, ManagedSelect } from '@shared/ui'; -import { Group, GroupQueryKey, groupService } from '@entities/group'; +import { GroupData, GroupQueryKey, groupService } from '@entities/group'; import { Form, Input } from 'antd'; import { useNavigate } from 'react-router-dom'; import { UserQueryKey, userService } from '@entities/user'; @@ -15,8 +15,8 @@ export const UpdateGroup = ({ group }: UpdateGroupProps) => { return groupService.updateGroup({ ...values, id: group.id }); }; - const onSuccess = (response: Group) => { - navigate(`/groups/${response.data.id}`); + const onSuccess = (response: GroupData) => { + navigate(`/groups/${response.id}`); }; const onCancel = () => { @@ -24,7 +24,7 @@ export const UpdateGroup = ({ group }: UpdateGroupProps) => { }; return ( - + mutationFunction={handleUpdateGroup} initialValues={getUpdateGroupInitialValues(group)} onSuccess={onSuccess} diff --git a/src/features/run/RunDetailInfo/index.tsx b/src/features/run/RunDetailInfo/index.tsx new file mode 100644 index 00000000..ad196052 --- /dev/null +++ b/src/features/run/RunDetailInfo/index.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { Descriptions } from 'antd'; +import { Link } from 'react-router-dom'; +import { RunStatusBadge } from '@entities/run'; +import { Typography } from 'antd'; + +const { Text } = Typography; + +import { RunDetailInfoProps } from './types'; + +export const RunDetailInfo = ({ run, transfer, ...props }: RunDetailInfoProps) => { + return ( + + + {run.id} + + + + + + {/* //TODO: [DOP-20067] Rewrite on dayjs when "started_at" field will have not null value */} + {run.started_at || ''} + + + {/* //TODO: [DOP-20067] Rewrite on dayjs when "ended_at" field will have not null value */} + {run.ended_at || ''} + + + {run.log_url ? ( + + + {run.log_url} + + + ) : ( + '' + )} + + + {transfer.name} + + + ); +}; diff --git a/src/features/run/RunDetailInfo/types.ts b/src/features/run/RunDetailInfo/types.ts new file mode 100644 index 00000000..743ad59a --- /dev/null +++ b/src/features/run/RunDetailInfo/types.ts @@ -0,0 +1,8 @@ +import { Run } from '@entities/run'; +import { Transfer } from '@entities/transfer'; +import { DescriptionsProps } from 'antd'; + +export interface RunDetailInfoProps extends DescriptionsProps { + run: Run; + transfer: Transfer; +} diff --git a/src/features/run/RunList/constants.tsx b/src/features/run/RunList/constants.tsx new file mode 100644 index 00000000..5f67ecd7 --- /dev/null +++ b/src/features/run/RunList/constants.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { PaginationResponse } from '@shared/types'; +import { TableColumns } from '@shared/ui'; +import { Run, RunStatusBadge } from '@entities/run'; +import { Typography } from 'antd'; +import { Link } from 'react-router-dom'; + +const { Text } = Typography; + +export const RUN_LIST_COLUMNS: TableColumns> = [ + { + title: 'Id', + dataIndex: 'id', + render: (id, record) => {id}, + width: 150, + }, + { + title: 'Status', + dataIndex: 'status', + render: (value, record) => , + width: 150, + }, + { + title: 'Started at', + dataIndex: 'started_at', + //TODO: [DOP-20067] Rewrite on dayjs when "started_at" field will have not null value + width: 150, + }, + { + title: 'Ended at', + dataIndex: 'ended_at', + //TODO: [DOP-20067] Rewrite on dayjs when "ended_at" field will have not null value + width: 150, + }, + { + title: 'Log url', + dataIndex: 'log_url', + render: (value, record) => + record.log_url ? ( + + + {record.log_url} + + + ) : ( + '' + ), + }, +]; diff --git a/src/features/run/RunList/index.tsx b/src/features/run/RunList/index.tsx new file mode 100644 index 00000000..f3e62736 --- /dev/null +++ b/src/features/run/RunList/index.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { ManagedTable } from '@shared/ui'; +import { PaginationRequest } from '@shared/types'; +import { RunQueryKey, runService } from '@entities/run'; + +import { RUN_LIST_COLUMNS } from './constants'; +import { RunListProps } from './types'; + +export const RunList = ({ transferId }: RunListProps) => { + const handleGetRuns = (params: PaginationRequest) => { + return runService.getRuns({ ...params, transfer_id: transferId }); + }; + + return ( + + ); +}; diff --git a/src/features/run/RunList/types.ts b/src/features/run/RunList/types.ts new file mode 100644 index 00000000..a94de52b --- /dev/null +++ b/src/features/run/RunList/types.ts @@ -0,0 +1,3 @@ +export interface RunListProps { + transferId: number; +} diff --git a/src/features/run/index.ts b/src/features/run/index.ts new file mode 100644 index 00000000..f211f80d --- /dev/null +++ b/src/features/run/index.ts @@ -0,0 +1,2 @@ +export * from './RunList'; +export * from './RunDetailInfo'; diff --git a/src/features/transfer/TransferDetailInfo/index.tsx b/src/features/transfer/TransferDetailInfo/index.tsx index b4b167db..24aa9b90 100644 --- a/src/features/transfer/TransferDetailInfo/index.tsx +++ b/src/features/transfer/TransferDetailInfo/index.tsx @@ -35,7 +35,7 @@ export const TransferDetailInfo = ({ {connectionTarget.name} - + {queue.name} diff --git a/src/pages/connection/ConnectionDetailPage/index.tsx b/src/pages/connection/ConnectionDetailPage/index.tsx index 8a13b9e2..c16d4d2a 100644 --- a/src/pages/connection/ConnectionDetailPage/index.tsx +++ b/src/pages/connection/ConnectionDetailPage/index.tsx @@ -20,7 +20,7 @@ export const ConnectionDetailPage = () => { return ( - {connection.name} + Connection: {connection.name} ); diff --git a/src/pages/group/GroupDetailPage/index.tsx b/src/pages/group/GroupDetailPage/index.tsx index 065e0e44..1a5dfe35 100644 --- a/src/pages/group/GroupDetailPage/index.tsx +++ b/src/pages/group/GroupDetailPage/index.tsx @@ -25,7 +25,7 @@ export const GroupDetailPage = () => { return (
- {group.data.name} + Group: {group.data.name} { return ( - {queue.name} + Queue: {queue.name} ); diff --git a/src/pages/run/RunDetailPage/index.tsx b/src/pages/run/RunDetailPage/index.tsx new file mode 100644 index 00000000..5453bcbf --- /dev/null +++ b/src/pages/run/RunDetailPage/index.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { PageDetailParams } from '@shared/types'; +import { PageContentWrapper } from '@shared/ui'; +import { Typography } from 'antd'; +import { useParams } from 'react-router-dom'; +import { useGetGroup } from '@entities/group'; +import { useGetRun } from '@entities/run'; +import { useGetQueue } from '@entities/queue'; +import { TransferDetailInfo } from '@features/transfer'; +import { ConnectionDetailInfo } from '@features/connection'; +import { useGetConnection } from '@entities/connection'; +import { useGetTransfer } from '@entities/transfer'; +import { RunDetailInfo } from '@features/run'; + +import classes from './styles.module.less'; + +const { Title } = Typography; + +export const RunDetailPage = () => { + const params = useParams(); + const { data: run } = useGetRun({ id: Number(params.id) }); + const { data: transfer } = useGetTransfer({ id: run.transfer_id }); + const { data: group } = useGetGroup({ id: transfer.group_id }); + const { data: connectionSource } = useGetConnection({ id: transfer.source_connection_id }); + const { data: connectionTarget } = useGetConnection({ id: transfer.target_connection_id }); + const { data: queue } = useGetQueue({ id: transfer.queue_id }); + + if (!run || !transfer || !group || !connectionSource || !connectionTarget || !queue) { + return null; + } + + return ( +
+ + Run: #{run.id} +
+ + + + +
+ +
+ ); +}; diff --git a/src/pages/run/RunDetailPage/styles.module.less b/src/pages/run/RunDetailPage/styles.module.less new file mode 100644 index 00000000..18a46464 --- /dev/null +++ b/src/pages/run/RunDetailPage/styles.module.less @@ -0,0 +1,11 @@ +.root { + display: flex; + flex-direction: column; + gap: 60px; + + .extra { + display: flex; + flex-direction: column; + gap: 32px; + } +} diff --git a/src/pages/run/index.ts b/src/pages/run/index.ts new file mode 100644 index 00000000..58a0fd94 --- /dev/null +++ b/src/pages/run/index.ts @@ -0,0 +1 @@ +export * from './RunDetailPage'; diff --git a/src/pages/transfer/TransferDetailPage/index.tsx b/src/pages/transfer/TransferDetailPage/index.tsx index 30ebaaaf..526205f0 100644 --- a/src/pages/transfer/TransferDetailPage/index.tsx +++ b/src/pages/transfer/TransferDetailPage/index.tsx @@ -8,6 +8,9 @@ import { useGetTransfer } from '@entities/transfer'; import { TransferDetail } from '@widgets/transfer'; import { useGetConnection } from '@entities/connection'; import { useGetQueue } from '@entities/queue'; +import { TransferRuns } from '@widgets/run'; + +import classes from './styles.module.less'; const { Title } = Typography; @@ -24,15 +27,18 @@ export const TransferDetailPage = () => { } return ( - - {transfer.name} - - +
+ + Transfer: {transfer.name} + + + +
); }; diff --git a/src/pages/transfer/TransferDetailPage/styles.module.less b/src/pages/transfer/TransferDetailPage/styles.module.less new file mode 100644 index 00000000..a03274eb --- /dev/null +++ b/src/pages/transfer/TransferDetailPage/styles.module.less @@ -0,0 +1,5 @@ +.root { + display: flex; + flex-direction: column; + gap: 60px; +} diff --git a/src/pages/user/UserDetailPage/index.tsx b/src/pages/user/UserDetailPage/index.tsx index 762d3bfc..900b75f9 100644 --- a/src/pages/user/UserDetailPage/index.tsx +++ b/src/pages/user/UserDetailPage/index.tsx @@ -17,7 +17,7 @@ export const UserDetailPage = () => { return ( - {user.username} + User: {user.username} ); diff --git a/src/widgets/run/TransferRuns/components/CreateRunButton/components/CreateRunModal/index.tsx b/src/widgets/run/TransferRuns/components/CreateRunButton/components/CreateRunModal/index.tsx new file mode 100644 index 00000000..45be59d8 --- /dev/null +++ b/src/widgets/run/TransferRuns/components/CreateRunButton/components/CreateRunModal/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { DEFAULT_MODAL_WIDTH } from '@shared/constants'; +import { ModalWrapper } from '@shared/ui'; + +import { CreateRunModalProps } from './types'; + +export const CreateRunModal = ({ transferId, transferName, onClose, ...props }: CreateRunModalProps) => { + return ( + + {/* //TODO: [DOP-20067] add create run modal */} + {/* */} + + ); +}; diff --git a/src/widgets/run/TransferRuns/components/CreateRunButton/components/CreateRunModal/types.ts b/src/widgets/run/TransferRuns/components/CreateRunButton/components/CreateRunModal/types.ts new file mode 100644 index 00000000..8f91d3a6 --- /dev/null +++ b/src/widgets/run/TransferRuns/components/CreateRunButton/components/CreateRunModal/types.ts @@ -0,0 +1,7 @@ +import { ModalProps } from 'antd'; + +export interface CreateRunModalProps extends ModalProps { + transferId: number; + transferName: string; + onClose: () => void; +} diff --git a/src/widgets/run/TransferRuns/components/CreateRunButton/components/index.ts b/src/widgets/run/TransferRuns/components/CreateRunButton/components/index.ts new file mode 100644 index 00000000..def83d02 --- /dev/null +++ b/src/widgets/run/TransferRuns/components/CreateRunButton/components/index.ts @@ -0,0 +1 @@ +export * from './CreateRunModal'; diff --git a/src/widgets/run/TransferRuns/components/CreateRunButton/index.tsx b/src/widgets/run/TransferRuns/components/CreateRunButton/index.tsx new file mode 100644 index 00000000..f815eb25 --- /dev/null +++ b/src/widgets/run/TransferRuns/components/CreateRunButton/index.tsx @@ -0,0 +1,29 @@ +import React, { memo } from 'react'; +import { Button } from 'antd'; +import { useModalState } from '@shared/hooks'; + +import { CreateRunModal } from './components'; +import classes from './styles.module.less'; +import { CreateRunButtonProps } from './types'; + +export const CreateRunButton = memo(({ transferId, transferName }: CreateRunButtonProps) => { + const { + isOpened: isOpenedCreateRunModal, + handleOpen: handleOpenCreateRunModal, + handleClose: handleCloseCreateRunModal, + } = useModalState(); + + return ( + <> + + + + ); +}); diff --git a/src/widgets/run/TransferRuns/components/CreateRunButton/styles.module.less b/src/widgets/run/TransferRuns/components/CreateRunButton/styles.module.less new file mode 100644 index 00000000..5a56e889 --- /dev/null +++ b/src/widgets/run/TransferRuns/components/CreateRunButton/styles.module.less @@ -0,0 +1,3 @@ +.button { + align-self: flex-end; +} diff --git a/src/widgets/run/TransferRuns/components/CreateRunButton/types.ts b/src/widgets/run/TransferRuns/components/CreateRunButton/types.ts new file mode 100644 index 00000000..d86d99f6 --- /dev/null +++ b/src/widgets/run/TransferRuns/components/CreateRunButton/types.ts @@ -0,0 +1,4 @@ +export interface CreateRunButtonProps { + transferId: number; + transferName: string; +} diff --git a/src/widgets/run/TransferRuns/components/index.ts b/src/widgets/run/TransferRuns/components/index.ts new file mode 100644 index 00000000..9339d483 --- /dev/null +++ b/src/widgets/run/TransferRuns/components/index.ts @@ -0,0 +1 @@ +export * from './CreateRunButton'; diff --git a/src/widgets/run/TransferRuns/index.tsx b/src/widgets/run/TransferRuns/index.tsx new file mode 100644 index 00000000..4670dedf --- /dev/null +++ b/src/widgets/run/TransferRuns/index.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { AccessWrapper, PageContentWrapper } from '@shared/ui'; +import { Typography } from 'antd'; +import { UserRole } from '@shared/types'; +import { RunList } from '@features/run'; + +import { TransferRunsProps } from './types'; +import { CreateRunButton } from './components'; +import classes from './styles.module.less'; + +const { Text } = Typography; + +export const TransferRuns = ({ group, transferId, transferName }: TransferRunsProps) => { + return ( + +
+ + Transfer runs + + + + +
+ + + ); +}; diff --git a/src/widgets/run/TransferRuns/styles.module.less b/src/widgets/run/TransferRuns/styles.module.less new file mode 100644 index 00000000..8f6c9091 --- /dev/null +++ b/src/widgets/run/TransferRuns/styles.module.less @@ -0,0 +1,9 @@ +.header { + display: flex; + justify-content: space-between; + align-items: center; + + .subtitle { + font-size: 16px; + } +} diff --git a/src/widgets/run/TransferRuns/types.ts b/src/widgets/run/TransferRuns/types.ts new file mode 100644 index 00000000..e7270628 --- /dev/null +++ b/src/widgets/run/TransferRuns/types.ts @@ -0,0 +1,7 @@ +import { Group } from '@entities/group'; + +export interface TransferRunsProps { + group: Group; + transferId: number; + transferName: string; +} diff --git a/src/widgets/run/index.ts b/src/widgets/run/index.ts new file mode 100644 index 00000000..e12e170d --- /dev/null +++ b/src/widgets/run/index.ts @@ -0,0 +1 @@ +export * from './TransferRuns';