[FIX] Setup Wizard inputs and Admin Settings (#16147)
Tasso Evangelista
5 years ago
committed by
Diego Sampaio
parent
cc9a6fa96d
commit
c2ed1e325a
@ -1,92 +1,87 @@ |
||||
import { Accordion, Button, Paragraph, Skeleton } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
import styled from 'styled-components'; |
||||
import { Accordion, Box, Button, ButtonGroup, Paragraph, Skeleton } from '@rocket.chat/fuselage'; |
||||
import React, { useMemo } from 'react'; |
||||
|
||||
import { Header } from '../../header/Header'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { Section } from './Section'; |
||||
import { Page } from '../../basic/Page'; |
||||
|
||||
const Wrapper = styled.div` |
||||
margin: 0 auto; |
||||
width: 100%; |
||||
max-width: 590px; |
||||
`;
|
||||
|
||||
export function GroupPage({ children, group, headerButtons }) { |
||||
export function GroupPage({ children, headerButtons, save, cancel, _id, i18nLabel, i18nDescription, changed }) { |
||||
const t = useTranslation(); |
||||
|
||||
const handleSubmit = (event) => { |
||||
event.preventDefault(); |
||||
group.save(); |
||||
save(); |
||||
}; |
||||
|
||||
const handleCancelClick = (event) => { |
||||
event.preventDefault(); |
||||
group.cancel(); |
||||
cancel(); |
||||
}; |
||||
|
||||
const handleSaveClick = (event) => { |
||||
event.preventDefault(); |
||||
group.save(); |
||||
save(); |
||||
}; |
||||
|
||||
if (!group) { |
||||
return <section className='page-container page-static page-settings'> |
||||
<Header /> |
||||
<div className='content' /> |
||||
</section>; |
||||
if (!_id) { |
||||
return <Page> |
||||
<Page.Header /> |
||||
<Page.Content /> |
||||
</Page>; |
||||
} |
||||
|
||||
return <form action='#' className='page-container' method='post' onSubmit={handleSubmit}> |
||||
<Header rawSectionName={t(group.i18nLabel)}> |
||||
<Header.ButtonSection> |
||||
{group.changed && <Button danger primary type='reset' onClick={handleCancelClick}>{t('Cancel')}</Button>} |
||||
return <Page is='form' action='#' method='post' onSubmit={handleSubmit}> |
||||
<Page.Header title={t(i18nLabel)}> |
||||
<ButtonGroup> |
||||
{changed && <Button danger primary type='reset' onClick={handleCancelClick}>{t('Cancel')}</Button>} |
||||
<Button |
||||
children={t('Save_changes')} |
||||
className='save' |
||||
disabled={!group.changed} |
||||
disabled={!changed} |
||||
primary |
||||
type='submit' |
||||
onClick={handleSaveClick} |
||||
/> |
||||
{headerButtons} |
||||
</Header.ButtonSection> |
||||
</Header> |
||||
</ButtonGroup> |
||||
</Page.Header> |
||||
|
||||
<div className='content'> |
||||
<Wrapper> |
||||
{t.has(group.i18nDescription) && <Paragraph hintColor>{t(group.i18nDescription)}</Paragraph>} |
||||
<Page.Content> |
||||
<Box style={useMemo(() => ({ margin: '0 auto', width: '100%', maxWidth: '590px' }), [])}> |
||||
{t.has(i18nDescription) && <Paragraph hintColor>{t(i18nDescription)}</Paragraph>} |
||||
|
||||
<Accordion className='page-settings'> |
||||
{children} |
||||
</Accordion> |
||||
</Wrapper> |
||||
</div> |
||||
</form>; |
||||
</Box> |
||||
</Page.Content> |
||||
</Page>; |
||||
} |
||||
|
||||
GroupPage.Skeleton = function GroupPageSkeleton() { |
||||
export function GroupPageSkeleton() { |
||||
const t = useTranslation(); |
||||
|
||||
return <div className='page-container'> |
||||
<Header rawSectionName={<Skeleton style={{ width: '20rem' }}/>}> |
||||
<Header.ButtonSection> |
||||
return <Page> |
||||
<Page.Header title={<Skeleton style={{ width: '20rem' }}/>}> |
||||
<ButtonGroup> |
||||
<Button |
||||
children={t('Save_changes')} |
||||
disabled |
||||
primary |
||||
/> |
||||
</Header.ButtonSection> |
||||
</Header> |
||||
</ButtonGroup> |
||||
</Page.Header> |
||||
|
||||
<div className='content'> |
||||
<Wrapper> |
||||
<Page.Content> |
||||
<Box style={useMemo(() => ({ margin: '0 auto', width: '100%', maxWidth: '590px' }), [])}> |
||||
<Paragraph.Skeleton /> |
||||
|
||||
<Accordion className='page-settings'> |
||||
<Section.Skeleton /> |
||||
</Accordion> |
||||
</Wrapper> |
||||
</div> |
||||
</div>; |
||||
}; |
||||
</Box> |
||||
</Page.Content> |
||||
</Page>; |
||||
} |
||||
|
||||
GroupPage.Skeleton = GroupPageSkeleton; |
||||
|
||||
@ -1,13 +1,15 @@ |
||||
import { Paragraph } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { Page } from '../../basic/Page'; |
||||
|
||||
export function NotAuthorizedPage() { |
||||
const t = useTranslation(); |
||||
|
||||
return <section className='page-container page-static page-settings'> |
||||
<div className='content'> |
||||
<p>{t('You_are_not_authorized_to_view_this_page')}</p> |
||||
</div> |
||||
</section>; |
||||
return <Page> |
||||
<Page.Content> |
||||
<Paragraph>{t('You_are_not_authorized_to_view_this_page')}</Paragraph> |
||||
</Page.Content> |
||||
</Page>; |
||||
} |
||||
|
||||
@ -1,27 +1,20 @@ |
||||
import { Button, Icon } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
import styled from 'styled-components'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
|
||||
// TODO: get rid of it
|
||||
const StyledResetSettingButton = styled(Button)` |
||||
padding-block: 0 !important; |
||||
padding-top: 0 !important; |
||||
padding-bottom: 0 !important; |
||||
`;
|
||||
|
||||
export function ResetSettingButton(props) { |
||||
const t = useTranslation(); |
||||
|
||||
return <StyledResetSettingButton |
||||
return <Button |
||||
aria-label={t('Reset')} |
||||
danger |
||||
ghost |
||||
small |
||||
title={t('Reset')} |
||||
style={{ padding: 0 }} |
||||
{...props} |
||||
> |
||||
<Icon name='undo' /> |
||||
</StyledResetSettingButton>; |
||||
</Button>; |
||||
} |
||||
|
||||
@ -0,0 +1,97 @@ |
||||
import { FieldGroup } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { Setting } from './Setting'; |
||||
import { SettingsState } from './SettingsState'; |
||||
|
||||
export default { |
||||
title: 'admin/settings/Setting', |
||||
component: Setting, |
||||
decorators: [ |
||||
(storyFn) => <SettingsState> |
||||
<div className='rc-old'> |
||||
<div className='page-settings'> |
||||
{storyFn()} |
||||
</div> |
||||
</div> |
||||
</SettingsState>, |
||||
], |
||||
}; |
||||
|
||||
export const _default = () => |
||||
<Setting.Memoized |
||||
_id='setting-id' |
||||
label='Label' |
||||
hint='Hint' |
||||
/>; |
||||
|
||||
export const withCallout = () => |
||||
<Setting.Memoized |
||||
_id='setting-id' |
||||
label='Label' |
||||
hint='Hint' |
||||
callout='Callout text' |
||||
/>; |
||||
|
||||
export const types = () => |
||||
<FieldGroup> |
||||
<Setting.Memoized |
||||
_id='setting-id-1' |
||||
label='Label' |
||||
type='action' |
||||
actionText='Action text' |
||||
/> |
||||
<Setting.Memoized |
||||
_id='setting-id-2' |
||||
label='Label' |
||||
type='asset' |
||||
/> |
||||
<Setting.Memoized |
||||
_id='setting-id-3' |
||||
label='Label' |
||||
type='boolean' |
||||
/> |
||||
<Setting.Memoized |
||||
_id='setting-id-4' |
||||
label='Label' |
||||
type='code' |
||||
/> |
||||
<Setting.Memoized |
||||
_id='setting-id-5' |
||||
label='Label' |
||||
type='font' |
||||
/> |
||||
<Setting.Memoized |
||||
_id='setting-id-6' |
||||
label='Label' |
||||
type='int' |
||||
/> |
||||
<Setting.Memoized |
||||
_id='setting-id-7' |
||||
label='Label' |
||||
type='language' |
||||
/> |
||||
<Setting.Memoized |
||||
_id='setting-id-8' |
||||
label='Label' |
||||
type='password' |
||||
/> |
||||
<Setting.Memoized |
||||
_id='setting-id-9' |
||||
label='Label' |
||||
type='relativeUrl' |
||||
/> |
||||
<Setting.Memoized |
||||
_id='setting-id-10' |
||||
label='Label' |
||||
type='select' |
||||
/> |
||||
<Setting.Memoized |
||||
_id='setting-id-11' |
||||
label='Label' |
||||
type='string' |
||||
/> |
||||
</FieldGroup>; |
||||
|
||||
export const skeleton = () => |
||||
<Setting.Skeleton />; |
||||
@ -0,0 +1,35 @@ |
||||
import { Box, Flex, Margins, Scrollable } from '@rocket.chat/fuselage'; |
||||
import React, { useMemo } from 'react'; |
||||
|
||||
import { BurgerMenuButton } from './BurgerMenuButton'; |
||||
|
||||
export function Page(props) { |
||||
return <Flex.Container direction='column'> |
||||
<Box is='section' style={useMemo(() => ({ height: '100vh' }), [])} {...props} /> |
||||
</Flex.Container>; |
||||
} |
||||
|
||||
export function PageHeader({ children, title, ...props }) { |
||||
return <Margins all='x16'> |
||||
<Flex.Container wrap='nowrap' alignItems='center'> |
||||
<Box style={{ minHeight: '2.75rem' }} {...props}> |
||||
<Margins inlineEnd='x8'> |
||||
<BurgerMenuButton /> |
||||
</Margins> |
||||
<Flex.Item grow='1'> |
||||
<Box is='h1' textStyle='h1' textColor='default'>{title}</Box> |
||||
</Flex.Item> |
||||
{children} |
||||
</Box> |
||||
</Flex.Container> |
||||
</Margins>; |
||||
} |
||||
|
||||
export function PageContent(props) { |
||||
return <Scrollable> |
||||
<Box style={useMemo(() => ({ padding: '1rem' }), [])} {...props} /> |
||||
</Scrollable>; |
||||
} |
||||
|
||||
Page.Header = PageHeader; |
||||
Page.Content = PageContent; |
||||
@ -0,0 +1,36 @@ |
||||
import { Button, ButtonGroup, Margins, Tile } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { Page } from './Page'; |
||||
|
||||
export default { |
||||
title: 'basic/Page', |
||||
component: Page, |
||||
decorators: [ |
||||
(fn) => <div className='rc-old'>{fn()}</div>, |
||||
], |
||||
}; |
||||
|
||||
export const _default = () => |
||||
<Page> |
||||
<Page.Header title='Header' /> |
||||
<Page.Content> |
||||
<Margins block='x16'> |
||||
{Array.from({ length: 60 }, (_, i) => <Tile key={i} children='Content slice' />)} |
||||
</Margins> |
||||
</Page.Content> |
||||
</Page>; |
||||
|
||||
export const withButtonsAtTheHeader = () => |
||||
<Page> |
||||
<Page.Header title='Header'> |
||||
<ButtonGroup> |
||||
<Button primary type='button'>Hooray!</Button> |
||||
</ButtonGroup> |
||||
</Page.Header> |
||||
<Page.Content> |
||||
<Margins block='x16'> |
||||
{Array.from({ length: 60 }, (_, i) => <Tile key={i} children='Content slice' />)} |
||||
</Margins> |
||||
</Page.Content> |
||||
</Page>; |
||||
@ -1,35 +0,0 @@ |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { BurgerMenuButton } from './BurgerMenuButton'; |
||||
|
||||
export function Header({ |
||||
children, |
||||
hideHelp, |
||||
rawSectionName, |
||||
sectionName, |
||||
}) { |
||||
const t = useTranslation(); |
||||
return <header className='rc-header'> |
||||
<div className='rc-header__wrap'> |
||||
<div className='rc-header__block rc-header--burger'> |
||||
<BurgerMenuButton /> |
||||
</div> |
||||
|
||||
<span className='rc-header__block'> |
||||
<Box is='h1' textStyle='h1' textColor='default'> |
||||
{rawSectionName || t(sectionName)} |
||||
</Box> |
||||
</span> |
||||
|
||||
{children} |
||||
|
||||
{!hideHelp && <div className='rc-header__section-help' />} |
||||
</div> |
||||
</header>; |
||||
} |
||||
|
||||
Header.ActionBlock = (props) => <div className='rc-header__block rc-header__block-action' {...props} />; |
||||
|
||||
Header.ButtonSection = (props) => <div className='rc-header__section-button' {...props} />; |
||||
@ -1,32 +0,0 @@ |
||||
import { boolean, text } from '@storybook/addon-knobs/react'; |
||||
import React from 'react'; |
||||
|
||||
import { Button } from '../basic/Button'; |
||||
import { Header } from './Header'; |
||||
|
||||
export default { |
||||
title: 'header/Header', |
||||
component: Header, |
||||
}; |
||||
|
||||
export const _default = () => |
||||
<Header |
||||
hideHelp={boolean('hideHelp')} |
||||
rawSectionName={text('rawSectionName')} |
||||
sectionName={text('sectionName')} |
||||
/>; |
||||
|
||||
export const withRawSectionName = () => |
||||
<Header rawSectionName='Welcome to Rocket.Chat' />; |
||||
|
||||
export const withSectionName = () => |
||||
<Header sectionName='Accounts_Enrollment_Email_Subject_Default' />; |
||||
|
||||
export const withButton = () => |
||||
<Header rawSectionName='Welcome to Rocket.Chat' hideHelp> |
||||
<Header.ActionBlock> |
||||
<Button primary type='button'> |
||||
Hooray! |
||||
</Button> |
||||
</Header.ActionBlock> |
||||
</Header>; |
||||
Loading…
Reference in new issue