[IMPROVE] Administration Pages root rewritten (#17209)
Tasso Evangelista
5 years ago
committed by
GitHub
parent
7a46c7d122
commit
5f9a14336f
@ -0,0 +1,16 @@ |
||||
import React, { lazy, useMemo, Suspense } from 'react'; |
||||
|
||||
import { useAdminSideNav } from '../hooks/useAdminSideNav'; |
||||
import PageSkeleton from './PageSkeleton'; |
||||
|
||||
function AdministrationRouter({ lazyRouteComponent }) { |
||||
useAdminSideNav(); |
||||
|
||||
const LazyRouteComponent = useMemo(() => lazy(lazyRouteComponent), [lazyRouteComponent]); |
||||
|
||||
return <Suspense fallback={<PageSkeleton />}> |
||||
<LazyRouteComponent /> |
||||
</Suspense>; |
||||
} |
||||
|
||||
export default AdministrationRouter; |
||||
@ -0,0 +1,30 @@ |
||||
import { Box, Button, ButtonGroup, Skeleton } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { Page } from '../../../../client/components/basic/Page'; |
||||
|
||||
function PageSkeleton() { |
||||
return <Page> |
||||
<Page.Header title={<Skeleton width='20rem' />}> |
||||
<ButtonGroup> |
||||
<Button |
||||
children={<Skeleton width='5rem' />} |
||||
disabled |
||||
primary |
||||
/> |
||||
</ButtonGroup> |
||||
</Page.Header> |
||||
|
||||
<Page.Content> |
||||
<Box mb='0' mi='auto' width='full' maxWidth='590px'> |
||||
<Box is='p' textColor='hint' textStyle='p1'> |
||||
<Skeleton /> |
||||
<Skeleton /> |
||||
<Skeleton width='75%' /> |
||||
</Box> |
||||
</Box> |
||||
</Page.Content> |
||||
</Page>; |
||||
} |
||||
|
||||
export default PageSkeleton; |
||||
@ -1,7 +1,7 @@ |
||||
import { Subtitle } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
import { DescriptionList } from './DescriptionList'; |
||||
import { formatDate } from './formatters'; |
||||
|
||||
@ -1,6 +1,6 @@ |
||||
import React from 'react'; |
||||
|
||||
import { dummyDate } from '../../../../.storybook/helpers'; |
||||
import { dummyDate } from '../../../../../.storybook/helpers'; |
||||
import { BuildEnvironmentSection } from './BuildEnvironmentSection'; |
||||
|
||||
export default { |
||||
@ -1,7 +1,7 @@ |
||||
import { Subtitle } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
import { DescriptionList } from './DescriptionList'; |
||||
|
||||
export function CommitSection({ info }) { |
||||
@ -1,7 +1,7 @@ |
||||
import React from 'react'; |
||||
|
||||
import { DescriptionList } from './DescriptionList'; |
||||
import { Page } from '../../basic/Page'; |
||||
import { Page } from '../../../../../client/components/basic/Page'; |
||||
|
||||
export default { |
||||
title: 'admin/info/DescriptionList', |
||||
@ -1,9 +1,9 @@ |
||||
import { Button, ButtonGroup, Callout, Icon, Margins } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { Link } from '../../basic/Link'; |
||||
import { Page } from '../../basic/Page'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { Link } from '../../../../../client/components/basic/Link'; |
||||
import { Page } from '../../../../../client/components/basic/Page'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
import { RocketChatSection } from './RocketChatSection'; |
||||
import { CommitSection } from './CommitSection'; |
||||
import { RuntimeEnvironmentSection } from './RuntimeEnvironmentSection'; |
||||
@ -1,14 +1,11 @@ |
||||
import React, { useState, useEffect } from 'react'; |
||||
|
||||
import { usePermission } from '../../../contexts/AuthorizationContext'; |
||||
import { useMethod, useServerInformation, useEndpoint } from '../../../contexts/ServerContext'; |
||||
import { useAdminSideNav } from '../../../hooks/useAdminSideNav'; |
||||
import { usePermission } from '../../../../../client/contexts/AuthorizationContext'; |
||||
import { useMethod, useServerInformation, useEndpoint } from '../../../../../client/contexts/ServerContext'; |
||||
import { downloadJsonAsAFile } from '../../../../../client/helpers/download'; |
||||
import { InformationPage } from './InformationPage'; |
||||
import { downloadJsonAsAFile } from '../../../helpers/download'; |
||||
|
||||
export function InformationRoute() { |
||||
useAdminSideNav(); |
||||
|
||||
const canViewStatistics = usePermission('view-statistics'); |
||||
|
||||
const [isLoading, setLoading] = useState(true); |
||||
@ -1,7 +1,7 @@ |
||||
import { Subtitle } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
import { DescriptionList } from './DescriptionList'; |
||||
import { formatDate } from './formatters'; |
||||
|
||||
@ -1,6 +1,6 @@ |
||||
import React from 'react'; |
||||
|
||||
import { dummyDate } from '../../../../.storybook/helpers'; |
||||
import { dummyDate } from '../../../../../.storybook/helpers'; |
||||
import { InstancesSection } from './InstancesSection'; |
||||
|
||||
export default { |
||||
@ -1,7 +1,7 @@ |
||||
import { Skeleton, Subtitle } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
import { formatDate, formatHumanReadableTime } from './formatters'; |
||||
import { DescriptionList } from './DescriptionList'; |
||||
|
||||
@ -1,6 +1,6 @@ |
||||
import React from 'react'; |
||||
|
||||
import { dummyDate } from '../../../../.storybook/helpers'; |
||||
import { dummyDate } from '../../../../../.storybook/helpers'; |
||||
import { RocketChatSection } from './RocketChatSection'; |
||||
|
||||
export default { |
||||
@ -1,7 +1,7 @@ |
||||
import { Skeleton, Subtitle } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
import { DescriptionList } from './DescriptionList'; |
||||
import { formatMemorySize, formatHumanReadableTime, formatCPULoad } from './formatters'; |
||||
|
||||
@ -1,7 +1,7 @@ |
||||
import { Subtitle, Skeleton } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
import { DescriptionList } from './DescriptionList'; |
||||
import { formatMemorySize } from './formatters'; |
||||
|
||||
@ -1,9 +1,9 @@ |
||||
import { Accordion, Box, Button, ButtonGroup, Skeleton } from '@rocket.chat/fuselage'; |
||||
import React, { useMemo } from 'react'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
import { Section } from './Section'; |
||||
import { Page } from '../../basic/Page'; |
||||
import { Page } from '../../../../../client/components/basic/Page'; |
||||
|
||||
export function GroupPage({ children, headerButtons, save, cancel, _id, i18nLabel, i18nDescription, changed }) { |
||||
const t = useTranslation(); |
||||
@ -1,8 +1,8 @@ |
||||
import { Box } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { Page } from '../../basic/Page'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
import { Page } from '../../../../../client/components/basic/Page'; |
||||
|
||||
export function NotAuthorizedPage() { |
||||
const t = useTranslation(); |
||||
@ -1,7 +1,7 @@ |
||||
import { Button, Icon } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
|
||||
export function ResetSettingButton(props) { |
||||
const t = useTranslation(); |
||||
@ -1,7 +1,7 @@ |
||||
import { Accordion, Box, Button, FieldGroup, Skeleton } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
import { Setting } from './Setting'; |
||||
import { useSection, useSectionChangedState } from './SettingsState'; |
||||
|
||||
@ -1,9 +1,9 @@ |
||||
import { Callout, Field, Flex, InputBox, Margins, Skeleton } from '@rocket.chat/fuselage'; |
||||
import React, { memo, useEffect, useMemo, useState, useCallback } from 'react'; |
||||
|
||||
import { MarkdownText } from '../../basic/MarkdownText'; |
||||
import { RawText } from '../../basic/RawText'; |
||||
import { useTranslation } from '../../../contexts/TranslationContext'; |
||||
import { MarkdownText } from '../../../../../client/components/basic/MarkdownText'; |
||||
import { RawText } from '../../../../../client/components/basic/RawText'; |
||||
import { useTranslation } from '../../../../../client/contexts/TranslationContext'; |
||||
import { GenericSettingInput } from './inputs/GenericSettingInput'; |
||||
import { BooleanSettingInput } from './inputs/BooleanSettingInput'; |
||||
import { StringSettingInput } from './inputs/StringSettingInput'; |
||||
@ -1,15 +1,12 @@ |
||||
import React from 'react'; |
||||
|
||||
import { useAtLeastOnePermission } from '../../../contexts/AuthorizationContext'; |
||||
import { useAdminSideNav } from '../../../hooks/useAdminSideNav'; |
||||
import { useAtLeastOnePermission } from '../../../../../client/contexts/AuthorizationContext'; |
||||
import { useRouteParameter } from '../../../../../client/contexts/RouterContext'; |
||||
import { GroupSelector } from './GroupSelector'; |
||||
import { NotAuthorizedPage } from './NotAuthorizedPage'; |
||||
import { SettingsState } from './SettingsState'; |
||||
import { useRouteParameter } from '../../../contexts/RouterContext'; |
||||
|
||||
export function SettingsRoute() { |
||||
useAdminSideNav(); |
||||
|
||||
const hasPermission = useAtLeastOnePermission([ |
||||
'view-privileged-setting', |
||||
'edit-privileged-setting', |
||||
@ -1,9 +1,9 @@ |
||||
import { Button } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useMethod } from '../../../../contexts/ServerContext'; |
||||
import { useToastMessageDispatch } from '../../../../contexts/ToastMessagesContext'; |
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
import { useMethod } from '../../../../../../client/contexts/ServerContext'; |
||||
import { useToastMessageDispatch } from '../../../../../../client/contexts/ToastMessagesContext'; |
||||
import { useTranslation } from '../../../../../../client/contexts/TranslationContext'; |
||||
import { GroupPage } from '../GroupPage'; |
||||
import { Section } from '../Section'; |
||||
|
||||
@ -1,9 +1,9 @@ |
||||
import { Button, Field } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useMethod } from '../../../../contexts/ServerContext'; |
||||
import { useToastMessageDispatch } from '../../../../contexts/ToastMessagesContext'; |
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
import { useMethod } from '../../../../../../client/contexts/ServerContext'; |
||||
import { useToastMessageDispatch } from '../../../../../../client/contexts/ToastMessagesContext'; |
||||
import { useTranslation } from '../../../../../../client/contexts/TranslationContext'; |
||||
|
||||
export function ActionSettingInput({ |
||||
_id, |
||||
@ -1,7 +1,7 @@ |
||||
import { Box, Field, Flex, Select } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useLanguages } from '../../../../contexts/TranslationContext'; |
||||
import { useLanguages } from '../../../../../../client/contexts/TranslationContext'; |
||||
import { ResetSettingButton } from '../ResetSettingButton'; |
||||
|
||||
export function LanguageSettingInput({ |
||||
@ -1,7 +1,7 @@ |
||||
import { Field, Flex, Box, MultiSelectFiltered, MultiSelect } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useTranslation } from '../../../../contexts/TranslationContext'; |
||||
import { useTranslation } from '../../../../../../client/contexts/TranslationContext'; |
||||
import { ResetSettingButton } from '../ResetSettingButton'; |
||||
|
||||
export function MultiSelectSettingInput({ |
||||
@ -1,7 +1,7 @@ |
||||
import { Box, Field, Flex, UrlInput } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import { useAbsoluteUrl } from '../../../../contexts/ServerContext'; |
||||
import { useAbsoluteUrl } from '../../../../../../client/contexts/ServerContext'; |
||||
import { ResetSettingButton } from '../ResetSettingButton'; |
||||
|
||||
export function RelativeUrlSettingInput({ |
||||
@ -1,6 +1,6 @@ |
||||
import { useEffect } from 'react'; |
||||
|
||||
import { SideNav } from '../../app/ui-utils/client/lib/SideNav'; |
||||
import { SideNav } from '../../../ui-utils/client/lib/SideNav'; |
||||
|
||||
export const useAdminSideNav = () => { |
||||
useEffect(() => { |
||||
@ -1,3 +1,5 @@ |
||||
import './adminFlex.html'; |
||||
import './adminFlex'; |
||||
import './routes'; |
||||
|
||||
export { registerAdminRoute } from './routes'; |
||||
export { registerAdminSidebarItem } from './sidebarItems'; |
||||
|
||||
@ -1,19 +1,62 @@ |
||||
import { FlowRouter } from 'meteor/kadira:flow-router'; |
||||
import { BlazeLayout } from 'meteor/kadira:blaze-layout'; |
||||
import { Meteor } from 'meteor/meteor'; |
||||
|
||||
FlowRouter.route('/admin/users', { |
||||
import { renderRouteComponent } from '../../../client/reactAdapters'; |
||||
|
||||
const routeGroup = FlowRouter.group({ |
||||
name: 'admin', |
||||
prefix: '/admin', |
||||
}); |
||||
|
||||
export const registerAdminRoute = (path, { lazyRouteComponent, action, ...options } = {}) => { |
||||
routeGroup.route(path, { |
||||
...options, |
||||
action: (params, queryParams) => { |
||||
if (action) { |
||||
action(params, queryParams); |
||||
return; |
||||
} |
||||
|
||||
renderRouteComponent(() => import('./components/AdministrationRouter'), { |
||||
template: 'main', |
||||
region: 'center', |
||||
propsFn: () => ({ lazyRouteComponent, ...options, params, queryParams }), |
||||
}); |
||||
}, |
||||
}); |
||||
}; |
||||
|
||||
registerAdminRoute('/', { |
||||
triggersEnter: [(context, redirect) => { |
||||
redirect('admin-info'); |
||||
}], |
||||
}); |
||||
|
||||
registerAdminRoute('/info', { |
||||
name: 'admin-info', |
||||
lazyRouteComponent: () => import('./components/info/InformationRoute'), |
||||
}); |
||||
|
||||
registerAdminRoute('/users', { |
||||
name: 'admin-users', |
||||
async action() { |
||||
action: async () => { |
||||
await import('./users/views'); |
||||
BlazeLayout.render('main', { center: 'adminUsers' }); |
||||
}, |
||||
}); |
||||
|
||||
|
||||
FlowRouter.route('/admin/rooms', { |
||||
registerAdminRoute('/rooms', { |
||||
name: 'admin-rooms', |
||||
async action() { |
||||
action: async () => { |
||||
await import('./rooms/views'); |
||||
BlazeLayout.render('main', { center: 'adminRooms' }); |
||||
}, |
||||
}); |
||||
|
||||
Meteor.startup(() => { |
||||
registerAdminRoute('/:group+', { |
||||
name: 'admin', |
||||
lazyRouteComponent: () => import('./components/settings/SettingsRoute'), |
||||
}); |
||||
}); |
||||
|
||||
@ -0,0 +1,10 @@ |
||||
import { ReactiveVar } from 'meteor/reactive-var'; |
||||
import { Tracker } from 'meteor/tracker'; |
||||
|
||||
const items = new ReactiveVar([]); |
||||
|
||||
export const registerAdminSidebarItem = (itemOptions) => { |
||||
Tracker.nonreactive(() => items.set([...items.get(), itemOptions])); |
||||
}; |
||||
|
||||
export const getSidebarItems = () => items.get().filter((option) => !option.permissionGranted || option.permissionGranted()); |
||||
@ -1,25 +0,0 @@ |
||||
import { ReactiveVar } from 'meteor/reactive-var'; |
||||
import { Tracker } from 'meteor/tracker'; |
||||
import _ from 'underscore'; |
||||
|
||||
export const AdminBox = new class { |
||||
constructor() { |
||||
this.options = new ReactiveVar([]); |
||||
} |
||||
|
||||
addOption(option) { |
||||
return Tracker.nonreactive(() => { |
||||
const actual = this.options.get(); |
||||
actual.push(option); |
||||
return this.options.set(actual); |
||||
}); |
||||
} |
||||
|
||||
getOptions() { |
||||
return _.filter(this.options.get(), function(option) { |
||||
if ((option.permissionGranted == null) || option.permissionGranted()) { |
||||
return true; |
||||
} |
||||
}); |
||||
} |
||||
}(); |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue