diff --git a/src/app/layouts/PrivateLayout/index.tsx b/src/app/layouts/PrivateLayout/index.tsx index 713226b8..76ec3af6 100644 --- a/src/app/layouts/PrivateLayout/index.tsx +++ b/src/app/layouts/PrivateLayout/index.tsx @@ -3,12 +3,19 @@ import { Layout } from 'antd'; import { Outlet } from 'react-router-dom'; import { Header, Sidebar } from '@widgets/layout'; import { SpinOverlay } from '@shared/ui'; +import { useSelectedGroup } from '@entities/group'; import classes from './styles.module.less'; const { Content } = Layout; export const PrivateLayout = () => { + const { isLoading } = useSelectedGroup(); + + if (isLoading) { + return ; + } + return (
diff --git a/src/app/styles/antd.less b/src/app/styles/antd.less index 17bc83e0..cc864eb0 100644 --- a/src/app/styles/antd.less +++ b/src/app/styles/antd.less @@ -22,7 +22,8 @@ font-weight: 700; } -.ant-table-cell { +.ant-table-cell, +.ant-form-item-explain-error { word-break: break-word; } @@ -33,3 +34,9 @@ justify-content: center; align-items: center; } + +.ant-menu { + position: sticky; + top: 0; + height: auto; +} diff --git a/src/app/styles/variables.less b/src/app/styles/variables.less index aaee1d75..5dfa2682 100644 --- a/src/app/styles/variables.less +++ b/src/app/styles/variables.less @@ -1,5 +1,7 @@ @border-radius-base: 8px; +@layout-sider-background: @white; + @menu-item-font-size: 16px; @menu-inline-toplevel-item-height: 48px; @@ -12,3 +14,9 @@ @descriptions-title-margin-bottom: 16px; @modal-header-title-font-size: 18px; + +@typography-title-margin-bottom: 0; + +@input-bg: #f1f3f5; +@select-background: #f1f3f5; +@picker-bg: #f1f3f5; diff --git a/src/entities/connection/ui/ConnectionTypeForm/index.tsx b/src/entities/connection/ui/ConnectionTypeForm/index.tsx index 88123533..0475f12f 100644 --- a/src/entities/connection/ui/ConnectionTypeForm/index.tsx +++ b/src/entities/connection/ui/ConnectionTypeForm/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Form, Select } from 'antd'; import { CONNECTION_TYPE_SELECT_OPTIONS } from '@entities/connection'; +import { Fieldset } from '@shared/ui'; import { ConnectionTypeFormProps } from './types'; import { CONNECTION_TYPE_COMPONENT, SensitiveFieldsContext } from './constants'; @@ -10,7 +11,7 @@ export const ConnectionTypeForm = ({ initialType, isRequiredSensitiveFields = tr const { selectedConnectionType, handleSelectConnectionType } = useSelectConnectionType({ initialType }); return ( - <> +
- - - - +
+ + + + + + + +
diff --git a/src/features/connection/UpdateConnection/index.tsx b/src/features/connection/UpdateConnection/index.tsx index e6f444ba..9cbab9e0 100644 --- a/src/features/connection/UpdateConnection/index.tsx +++ b/src/features/connection/UpdateConnection/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ControlButtons, FormCurrentGroupDescription, ManagedForm } from '@shared/ui'; +import { ControlButtons, Fieldset, FormCurrentGroupDescription, ManagedForm } from '@shared/ui'; import { Form, Input } from 'antd'; import { useNavigate } from 'react-router-dom'; import { Connection, ConnectionQueryKey, connectionService, ConnectionTypeForm } from '@entities/connection'; @@ -33,15 +33,17 @@ export const UpdateConnection = ({ connection, group }: UpdateConnectionProps) = [{ queryKey: [ConnectionQueryKey.GET_CONNECTION, connectionId] }], ]} > - +
+ - - - + + + - - - + + + +
diff --git a/src/features/group/CreateGroup/index.tsx b/src/features/group/CreateGroup/index.tsx index cc121670..e553c9ff 100644 --- a/src/features/group/CreateGroup/index.tsx +++ b/src/features/group/CreateGroup/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ControlButtons, ManagedForm } from '@shared/ui'; +import { ControlButtons, Fieldset, ManagedForm } from '@shared/ui'; import { GroupData, GroupQueryKey, groupService } from '@entities/group'; import { Form, Input } from 'antd'; import { useNavigate } from 'react-router-dom'; @@ -22,13 +22,15 @@ export const CreateGroup = () => { successMessage="Group was created successfully" keysInvalidateQueries={[[{ queryKey: [GroupQueryKey.GET_GROUPS] }]]} > - - - +
+ + + - - - + + + +
diff --git a/src/features/group/UpdateGroup/index.tsx b/src/features/group/UpdateGroup/index.tsx index a1847a54..38ea45ee 100644 --- a/src/features/group/UpdateGroup/index.tsx +++ b/src/features/group/UpdateGroup/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ControlButtons, ManagedForm, ManagedSelect } from '@shared/ui'; +import { ControlButtons, Fieldset, ManagedForm, ManagedSelect } from '@shared/ui'; import { GroupData, GroupQueryKey, groupService } from '@entities/group'; import { Form, Input } from 'antd'; import { useNavigate } from 'react-router-dom'; @@ -34,27 +34,29 @@ export const UpdateGroup = ({ group }: UpdateGroupProps) => { [{ queryKey: [GroupQueryKey.GET_GROUP, group.id] }], ]} > - - - - - - - - - - user.id} - renderOptionLabel={(user) => user.username} - detailQueryKey={[UserQueryKey.GET_USER]} - detailQueryFunction={(value) => userService.getUser({ id: value })} - //TODO: [DOP-20030] Need to delete prop "disabled" when the backend leaves the user with access to the group, even after changing the owner - disabled - /> - +
+ + + + + + + + + + user.id} + renderOptionLabel={(user) => user.username} + detailQueryKey={[UserQueryKey.GET_USER]} + detailQueryFunction={(value) => userService.getUser({ id: value })} + //TODO: [DOP-20030] Need to delete prop "disabled" when the backend leaves the user with access to the group, even after changing the owner + disabled + /> + +
diff --git a/src/features/queue/CreateQueue/index.tsx b/src/features/queue/CreateQueue/index.tsx index 9991f971..dce72e9c 100644 --- a/src/features/queue/CreateQueue/index.tsx +++ b/src/features/queue/CreateQueue/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ControlButtons, FormCurrentGroupDescription, ManagedForm } from '@shared/ui'; +import { ControlButtons, Fieldset, FormCurrentGroupDescription, ManagedForm } from '@shared/ui'; import { Form, Input } from 'antd'; import { useNavigate } from 'react-router-dom'; import { Queue, QUEUE_NAME_REGEXP, QueueQueryKey, queueService } from '@entities/queue'; @@ -28,15 +28,15 @@ export const CreateQueue = ({ group }: CreateQueueProps) => { successMessage="Queue was created successfully" keysInvalidateQueries={[[{ queryKey: [QueueQueryKey.GET_QUEUES, group.id] }]]} > - - - - - - - - - +
+ + + + + + + +
diff --git a/src/features/queue/UpdateQueue/index.tsx b/src/features/queue/UpdateQueue/index.tsx index 9467e0d7..b31b9463 100644 --- a/src/features/queue/UpdateQueue/index.tsx +++ b/src/features/queue/UpdateQueue/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ControlButtons, FormCurrentGroupDescription, ManagedForm } from '@shared/ui'; +import { ControlButtons, Fieldset, FormCurrentGroupDescription, ManagedForm } from '@shared/ui'; import { Form, Input } from 'antd'; import { useNavigate } from 'react-router-dom'; import { Queue, QUEUE_NAME_REGEXP, QueueQueryKey, queueService } from '@entities/queue'; @@ -33,15 +33,17 @@ export const UpdateQueue = ({ queue, group }: UpdateQueueProps) => { [{ queryKey: [QueueQueryKey.GET_QUEUE, queue.id] }], ]} > - +
+ - - - + + + - - - + + + +
diff --git a/src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx b/src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx index ce6eb82e..8bf5217a 100644 --- a/src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx +++ b/src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ConnectionQueryKey, connectionService } from '@entities/connection'; -import { ManagedSelect } from '@shared/ui'; -import { Divider, Form, Input } from 'antd'; +import { Fieldset, ManagedSelect } from '@shared/ui'; +import { Form, Input } from 'antd'; import { useSelectConnectionType } from '../../hooks'; @@ -15,9 +15,8 @@ export const SourceParams = ({ groupId, initialSourceConnectionType }: SourcePar }); return ( - <> - Source params - +
+ {TRANSFER_SOURCE_CONNECTION_TYPE_COMPONENT[selectedConnectionType!]} - +
); }; diff --git a/src/features/transfer/MutateTransferForm/components/TargetParams/TargetParams.tsx b/src/features/transfer/MutateTransferForm/components/TargetParams/TargetParams.tsx index 81e1f2bc..77f5ae85 100644 --- a/src/features/transfer/MutateTransferForm/components/TargetParams/TargetParams.tsx +++ b/src/features/transfer/MutateTransferForm/components/TargetParams/TargetParams.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ConnectionQueryKey, connectionService } from '@entities/connection'; -import { ManagedSelect } from '@shared/ui'; -import { Divider, Form, Input } from 'antd'; +import { Fieldset, ManagedSelect } from '@shared/ui'; +import { Form, Input } from 'antd'; import { useSelectConnectionType } from '../../hooks'; @@ -15,9 +15,8 @@ export const TargetParams = ({ groupId, initialTargetConnectionType }: TargetPar }); return ( - <> - Target params - +
+ {TRANSFER_TARGET_CONNECTION_TYPE_COMPONENT[selectedConnectionType!]} - +
); }; diff --git a/src/features/transfer/MutateTransferForm/components/TransferSchedule/index.tsx b/src/features/transfer/MutateTransferForm/components/TransferSchedule/index.tsx index 54013a70..05536c68 100644 --- a/src/features/transfer/MutateTransferForm/components/TransferSchedule/index.tsx +++ b/src/features/transfer/MutateTransferForm/components/TransferSchedule/index.tsx @@ -1,7 +1,9 @@ -import { CronSelect } from '@shared/ui'; +import { CronSelect, Fieldset } from '@shared/ui'; import { Form, Switch } from 'antd'; import React, { useState } from 'react'; +import classes from './styles.module.less'; + export const TransferSchedule = () => { const formInstance = Form.useFormInstance(); const [isScheduled, setScheduled] = useState(() => formInstance.getFieldValue('is_scheduled')); @@ -11,15 +13,18 @@ export const TransferSchedule = () => { }; return ( - <> - - - - {isScheduled && ( - - +
+ - )} - + } + hasShowContent={isScheduled} + > + + + +
); }; diff --git a/src/features/transfer/MutateTransferForm/components/TransferSchedule/styles.module.less b/src/features/transfer/MutateTransferForm/components/TransferSchedule/styles.module.less new file mode 100644 index 00000000..20616c89 --- /dev/null +++ b/src/features/transfer/MutateTransferForm/components/TransferSchedule/styles.module.less @@ -0,0 +1,3 @@ +.switch { + margin-bottom: 0 !important; +} diff --git a/src/features/transfer/MutateTransferForm/index.tsx b/src/features/transfer/MutateTransferForm/index.tsx index 15599be3..eaff8a14 100644 --- a/src/features/transfer/MutateTransferForm/index.tsx +++ b/src/features/transfer/MutateTransferForm/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { QueueQueryKey, queueService } from '@entities/queue'; import { TRANSFER_STRATEGY_PARAMS_SELECT_OPTIONS } from '@entities/transfer'; -import { ControlButtons, FormCurrentGroupDescription, ManagedSelect } from '@shared/ui'; +import { ControlButtons, Fieldset, FormCurrentGroupDescription, ManagedSelect } from '@shared/ui'; import { Form, Input, Select } from 'antd'; import { MutateTransferFormProps } from './types'; @@ -15,36 +15,38 @@ export const MutateTransferForm = ({ }: MutateTransferFormProps) => { return ( <> - - - - - - - +
+ + + + + + + - - queueService.getQueues({ group_id: group.id, ...params })} - renderOptionValue={(queue) => queue.id} - renderOptionLabel={(queue) => queue.name} - detailQueryKey={[QueueQueryKey.GET_QUEUE]} - detailQueryFunction={(value) => queueService.getQueue({ id: value })} - placeholder="Select queue" - /> - + + queueService.getQueues({ group_id: group.id, ...params })} + renderOptionValue={(queue) => queue.id} + renderOptionLabel={(queue) => queue.name} + detailQueryKey={[QueueQueryKey.GET_QUEUE]} + detailQueryFunction={(value) => queueService.getQueue({ id: value })} + placeholder="Select queue" + /> + - - + +
+ + ); diff --git a/src/pages/connection/ConnectionDetailPage/index.tsx b/src/pages/connection/ConnectionDetailPage/index.tsx index c16d4d2a..8a614846 100644 --- a/src/pages/connection/ConnectionDetailPage/index.tsx +++ b/src/pages/connection/ConnectionDetailPage/index.tsx @@ -14,12 +14,8 @@ export const ConnectionDetailPage = () => { const { data: connection } = useGetConnection({ id: Number(params.id) }); const { data: group } = useGetGroup({ id: connection.group_id }); - if (!connection || !group) { - return null; - } - return ( - + Connection: {connection.name} diff --git a/src/pages/connection/CreateConnectionPage/index.tsx b/src/pages/connection/CreateConnectionPage/index.tsx index ec6601a6..82b63cec 100644 --- a/src/pages/connection/CreateConnectionPage/index.tsx +++ b/src/pages/connection/CreateConnectionPage/index.tsx @@ -8,7 +8,7 @@ const { Title } = Typography; export const CreateConnectionPage = () => { return ( - + Create Connection diff --git a/src/pages/connection/UpdateConnectionPage/index.tsx b/src/pages/connection/UpdateConnectionPage/index.tsx index 5b763a65..20cd84a3 100644 --- a/src/pages/connection/UpdateConnectionPage/index.tsx +++ b/src/pages/connection/UpdateConnectionPage/index.tsx @@ -16,16 +16,12 @@ export const UpdateConnectionPage = () => { const { data: connection } = useGetConnection({ id: Number(params.id) }); const { data: group } = useGetGroup({ id: connection.group_id }); - if (!connection || !group) { - return null; - } - if (!hasAccessByUserRole(UserRole.Maintainer, group.role)) { throw new AccessError(); } return ( - + Update Connection diff --git a/src/pages/group/CreateGroupPage/index.tsx b/src/pages/group/CreateGroupPage/index.tsx index efd95c08..d1722348 100644 --- a/src/pages/group/CreateGroupPage/index.tsx +++ b/src/pages/group/CreateGroupPage/index.tsx @@ -7,7 +7,7 @@ const { Title } = Typography; export const CreateGroupPage = () => { return ( - + Create Group diff --git a/src/pages/group/GroupDetailPage/index.tsx b/src/pages/group/GroupDetailPage/index.tsx index 1a5dfe35..b57cf940 100644 --- a/src/pages/group/GroupDetailPage/index.tsx +++ b/src/pages/group/GroupDetailPage/index.tsx @@ -18,13 +18,9 @@ export const GroupDetailPage = () => { const { data: group } = useGetGroup({ id: Number(params.id) }); const { data: owner } = useGetUser({ id: group.data.owner_id }); - if (!group || !owner) { - return null; - } - return (
- + Group: {group.data.name} { const params = useParams(); const { data: group } = useGetGroup({ id: Number(params.id) }); - if (!group) { - return null; - } - if (!hasAccessByUserRole(UserRole.Owner, group.role)) { throw new AccessError(); } return ( - + Update Group diff --git a/src/pages/queue/CreateQueuePage/components/CreateQueuePageContent/index.tsx b/src/pages/queue/CreateQueuePage/components/CreateQueuePageContent/index.tsx new file mode 100644 index 00000000..6f590129 --- /dev/null +++ b/src/pages/queue/CreateQueuePage/components/CreateQueuePageContent/index.tsx @@ -0,0 +1,17 @@ +import { GroupWarningAlert, useSelectedGroup } from '@entities/group'; +import { CreateQueue } from '@features/queue'; +import { UserRole } from '@shared/types'; +import { hasAccessByUserRole } from '@shared/utils'; +import React from 'react'; + +export const CreateQueuePageContent = () => { + const { group } = useSelectedGroup(); + + if (!group?.data.id) { + return ; + } + if (!hasAccessByUserRole(UserRole.Maintainer, group.role)) { + return ; + } + return ; +}; diff --git a/src/pages/queue/CreateQueuePage/components/index.ts b/src/pages/queue/CreateQueuePage/components/index.ts new file mode 100644 index 00000000..9a9b6715 --- /dev/null +++ b/src/pages/queue/CreateQueuePage/components/index.ts @@ -0,0 +1 @@ +export * from './CreateQueuePageContent'; diff --git a/src/pages/queue/CreateQueuePage/index.tsx b/src/pages/queue/CreateQueuePage/index.tsx index 6b7d77f1..9fc64418 100644 --- a/src/pages/queue/CreateQueuePage/index.tsx +++ b/src/pages/queue/CreateQueuePage/index.tsx @@ -1,30 +1,16 @@ import React from 'react'; import { Typography } from 'antd'; import { PageContentWrapper } from '@shared/ui'; -import { GroupWarningAlert, useSelectedGroup } from '@entities/group'; -import { CreateQueue } from '@features/queue'; -import { hasAccessByUserRole } from '@shared/utils'; -import { UserRole } from '@shared/types'; + +import { CreateQueuePageContent } from './components'; const { Title } = Typography; export const CreateQueuePage = () => { - const { group } = useSelectedGroup(); - - const renderContent = () => { - if (!group?.data.id) { - return ; - } - if (!hasAccessByUserRole(UserRole.Maintainer, group.role)) { - return ; - } - return ; - }; - return ( - + Create Queue - {renderContent()} + ); }; diff --git a/src/pages/queue/QueueDetailPage/index.tsx b/src/pages/queue/QueueDetailPage/index.tsx index 7692d997..20eaaa17 100644 --- a/src/pages/queue/QueueDetailPage/index.tsx +++ b/src/pages/queue/QueueDetailPage/index.tsx @@ -14,12 +14,8 @@ export const QueueDetailPage = () => { const { data: queue } = useGetQueue({ id: Number(params.id) }); const { data: group } = useGetGroup({ id: queue.group_id }); - if (!queue || !group) { - return null; - } - return ( - + Queue: {queue.name} diff --git a/src/pages/queue/UpdateQueuePage/index.tsx b/src/pages/queue/UpdateQueuePage/index.tsx index 68985942..f8d166be 100644 --- a/src/pages/queue/UpdateQueuePage/index.tsx +++ b/src/pages/queue/UpdateQueuePage/index.tsx @@ -16,16 +16,12 @@ export const UpdateQueuePage = () => { const { data: queue } = useGetQueue({ id: Number(params.id) }); const { data: group } = useGetGroup({ id: queue.group_id }); - if (!queue || !group) { - return null; - } - if (!hasAccessByUserRole(UserRole.Maintainer, group.role)) { throw new AccessError(); } return ( - + Update Queue diff --git a/src/pages/run/RunDetailPage/index.tsx b/src/pages/run/RunDetailPage/index.tsx index 5453bcbf..055f10e3 100644 --- a/src/pages/run/RunDetailPage/index.tsx +++ b/src/pages/run/RunDetailPage/index.tsx @@ -25,10 +25,6 @@ export const RunDetailPage = () => { 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 (
diff --git a/src/pages/transfer/CreateTransferPage/index.tsx b/src/pages/transfer/CreateTransferPage/index.tsx index 882226b2..9ecb2fea 100644 --- a/src/pages/transfer/CreateTransferPage/index.tsx +++ b/src/pages/transfer/CreateTransferPage/index.tsx @@ -8,7 +8,7 @@ const { Title } = Typography; export const CreateTransferPage = () => { return ( - + Create Transfer diff --git a/src/pages/transfer/TransferDetailPage/index.tsx b/src/pages/transfer/TransferDetailPage/index.tsx index 526205f0..1eb05d2a 100644 --- a/src/pages/transfer/TransferDetailPage/index.tsx +++ b/src/pages/transfer/TransferDetailPage/index.tsx @@ -22,13 +22,9 @@ export const TransferDetailPage = () => { const { data: connectionTarget } = useGetConnection({ id: transfer.target_connection_id }); const { data: queue } = useGetQueue({ id: transfer.queue_id }); - if (!transfer || !group || !connectionSource || !connectionTarget || !queue) { - return null; - } - return (
- + Transfer: {transfer.name} { const { data: transfer } = useGetTransfer({ id: Number(params.id) }); const { data: group } = useGetGroup({ id: transfer.group_id }); - if (!transfer || !group) { - return null; - } - if (!hasAccessByUserRole(UserRole.Maintainer, group.role)) { throw new AccessError(); } return ( - + Update Transfer diff --git a/src/shared/ui/ControlButtons/index.tsx b/src/shared/ui/ControlButtons/index.tsx index 162d90d0..efad11fa 100644 --- a/src/shared/ui/ControlButtons/index.tsx +++ b/src/shared/ui/ControlButtons/index.tsx @@ -17,11 +17,18 @@ export const ControlButtons = ({
{!isCancelButtonHidden && ( - )} -
diff --git a/src/shared/ui/ControlButtons/styles.module.less b/src/shared/ui/ControlButtons/styles.module.less index 498c8d52..450bfe10 100644 --- a/src/shared/ui/ControlButtons/styles.module.less +++ b/src/shared/ui/ControlButtons/styles.module.less @@ -6,5 +6,9 @@ align-items: center; justify-content: space-between; gap: 24px; + + .button { + width: 120px; + } } } diff --git a/src/shared/ui/Fieldset/index.tsx b/src/shared/ui/Fieldset/index.tsx new file mode 100644 index 00000000..06449638 --- /dev/null +++ b/src/shared/ui/Fieldset/index.tsx @@ -0,0 +1,19 @@ +import React, { PropsWithChildren } from 'react'; +import { Typography } from 'antd'; + +import { FieldsetProps } from './types'; +import classes from './styles.module.less'; + +const { Title } = Typography; + +export const Fieldset = ({ title, children, headerSlot, hasShowContent = true }: PropsWithChildren) => { + return ( +
+
+ {title} + {headerSlot} +
+ {hasShowContent &&
{children}
} +
+ ); +}; diff --git a/src/shared/ui/Fieldset/styles.module.less b/src/shared/ui/Fieldset/styles.module.less new file mode 100644 index 00000000..232dc38e --- /dev/null +++ b/src/shared/ui/Fieldset/styles.module.less @@ -0,0 +1,18 @@ +.root { + background-color: @white; + border-radius: 16px; + box-shadow: @box-shadow-base; + margin-bottom: 32px; + + .header { + display: flex; + align-items: center; + gap: 24px; + padding: 20px; + } + + .content { + padding: 20px 20px 10px 20px; + border-top: 1px solid @border-color-base; + } +} diff --git a/src/shared/ui/Fieldset/types.ts b/src/shared/ui/Fieldset/types.ts new file mode 100644 index 00000000..7d636d7e --- /dev/null +++ b/src/shared/ui/Fieldset/types.ts @@ -0,0 +1,7 @@ +import { ReactNode } from 'react'; + +export interface FieldsetProps { + title: string; + hasShowContent?: boolean; + headerSlot?: ReactNode; +} diff --git a/src/shared/ui/PageContentWrapper/index.tsx b/src/shared/ui/PageContentWrapper/index.tsx index 7780c8c3..34722bee 100644 --- a/src/shared/ui/PageContentWrapper/index.tsx +++ b/src/shared/ui/PageContentWrapper/index.tsx @@ -3,10 +3,12 @@ import React, { memo, PropsWithChildren } from 'react'; import { PageContentWrapperProps } from './types'; import classes from './styles.module.less'; -export const PageContentWrapper = memo(({ width = 'medium', children }: PropsWithChildren) => { - return ( -
- {children} -
- ); -}); +export const PageContentWrapper = memo( + ({ width = 'medium', gap = 'medium', children }: PropsWithChildren) => { + return ( +
+ {children} +
+ ); + }, +); diff --git a/src/shared/ui/PageContentWrapper/styles.module.less b/src/shared/ui/PageContentWrapper/styles.module.less index c1ad22f2..4e669d3e 100644 --- a/src/shared/ui/PageContentWrapper/styles.module.less +++ b/src/shared/ui/PageContentWrapper/styles.module.less @@ -1,18 +1,21 @@ .root { display: flex; flex-direction: column; - gap: 16px; max-width: 100%; - &[data-width='small'] { - width: 500px; - } - &[data-width='medium'] { - width: 1000px; + width: 1100px; } &[data-width='large'] { width: 100%; } + + &[data-gap='medium'] { + gap: 16px; + } + + &[data-gap='large'] { + gap: 32px; + } } diff --git a/src/shared/ui/PageContentWrapper/types.ts b/src/shared/ui/PageContentWrapper/types.ts index 1b63aa74..297e7075 100644 --- a/src/shared/ui/PageContentWrapper/types.ts +++ b/src/shared/ui/PageContentWrapper/types.ts @@ -1,3 +1,4 @@ export interface PageContentWrapperProps { - width?: 'large' | 'medium' | 'small'; + width?: 'large' | 'medium'; + gap?: 'large' | 'medium'; } diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts index 9a7fb012..21d13c83 100644 --- a/src/shared/ui/index.ts +++ b/src/shared/ui/index.ts @@ -12,3 +12,4 @@ export * from './TimePicker'; export * from './Calendar'; export * from './CronSelect'; export * from './Canvas'; +export * from './Fieldset';