diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 14a8227f7..cdf22dd2e 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -25,6 +25,7 @@ deps: cache: <<: *cache policy: push + interruptible: true danger: stage: test diff --git a/CHANGELOG.md b/CHANGELOG.md index f90d7c9ed..b17e16bf9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,6 +38,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Composer: move emoji button alongside other composer buttons, add numerical counter. - Birthdays: move today's birthdays out of notifications into right sidebar. - Performance: improve scrolling/navigation between feeds by using a virtual window library. +- Admin: reorganize UI into 3-column layout. +- Admin: include external link to frontend repo for the running commit. ### Removed - Theme: Halloween theme. diff --git a/app/soapbox/components/radio.tsx b/app/soapbox/components/radio.tsx new file mode 100644 index 000000000..ef204b06f --- /dev/null +++ b/app/soapbox/components/radio.tsx @@ -0,0 +1,43 @@ +import React from 'react'; + +import List, { ListItem } from './list'; + +interface IRadioGroup { + onChange: React.ChangeEventHandler + children: React.ReactElement<{ onChange: React.ChangeEventHandler }>[] +} + +const RadioGroup = ({ onChange, children }: IRadioGroup) => { + const childrenWithProps = React.Children.map(children, child => + React.cloneElement(child, { onChange }), + ); + + return {childrenWithProps}; +}; + +interface IRadioItem { + label: React.ReactNode, + hint?: React.ReactNode, + value: string, + checked: boolean, + onChange?: React.ChangeEventHandler, +} + +const RadioItem: React.FC = ({ label, hint, checked = false, onChange, value }) => { + return ( + + + + ); +}; + +export { + RadioGroup, + RadioItem, +}; \ No newline at end of file diff --git a/app/soapbox/features/admin/components/dashcounter.tsx b/app/soapbox/features/admin/components/dashcounter.tsx new file mode 100644 index 000000000..a42986535 --- /dev/null +++ b/app/soapbox/features/admin/components/dashcounter.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { FormattedNumber } from 'react-intl'; +import { Link } from 'react-router-dom'; + +import { Text } from 'soapbox/components/ui'; +import { isNumber } from 'soapbox/utils/numbers'; + +interface IDashCounter { + count: number | undefined + label: React.ReactNode + to?: string + percent?: boolean +} + +/** Displays a (potentially clickable) dashboard statistic. */ +const DashCounter: React.FC = ({ count, label, to = '#', percent = false }) => { + + if (!isNumber(count)) { + return null; + } + + return ( + + + + + + {label} + + + ); +}; + +interface IDashCounters { + children: React.ReactNode +} + +/** Wrapper container for dash counters. */ +const DashCounters: React.FC = ({ children }) => { + return ( +
+ {children} +
+ ); +}; + +export { + DashCounter, + DashCounters, +}; \ No newline at end of file diff --git a/app/soapbox/features/admin/components/registration-mode-picker.tsx b/app/soapbox/features/admin/components/registration-mode-picker.tsx index 2c830153a..eab7f2f94 100644 --- a/app/soapbox/features/admin/components/registration-mode-picker.tsx +++ b/app/soapbox/features/admin/components/registration-mode-picker.tsx @@ -3,12 +3,7 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; import { updateConfig } from 'soapbox/actions/admin'; import snackbar from 'soapbox/actions/snackbar'; -import { - SimpleForm, - FieldsGroup, - RadioGroup, - RadioItem, -} from 'soapbox/features/forms'; +import { RadioGroup, RadioItem } from 'soapbox/components/radio'; import { useAppDispatch, useInstance } from 'soapbox/hooks'; import type { Instance } from 'soapbox/types/entities'; @@ -54,33 +49,26 @@ const RegistrationModePicker: React.FC = () => { }; return ( - - - } - onChange={onChange} - > - } - hint={} - checked={mode === 'open'} - value='open' - /> - } - hint={} - checked={mode === 'approval'} - value='approval' - /> - } - hint={} - checked={mode === 'closed'} - value='closed' - /> - - - + + } + hint={} + checked={mode === 'open'} + value='open' + /> + } + hint={} + checked={mode === 'approval'} + value='approval' + /> + } + hint={} + checked={mode === 'closed'} + value='closed' + /> + ); }; diff --git a/app/soapbox/features/admin/components/unapproved-account.tsx b/app/soapbox/features/admin/components/unapproved-account.tsx index c1dae46fb..514fcb370 100644 --- a/app/soapbox/features/admin/components/unapproved-account.tsx +++ b/app/soapbox/features/admin/components/unapproved-account.tsx @@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl'; import { approveUsers } from 'soapbox/actions/admin'; import { rejectUserModal } from 'soapbox/actions/moderation'; import snackbar from 'soapbox/actions/snackbar'; -import IconButton from 'soapbox/components/icon-button'; +import { Stack, HStack, Text, IconButton } from 'soapbox/components/ui'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { makeGetAccount } from 'soapbox/selectors'; @@ -45,16 +45,31 @@ const UnapprovedAccount: React.FC = ({ accountId }) => { }; return ( -
-
-
@{account.get('acct')}
-
{adminAccount?.invite_request || ''}
-
-
- - -
-
+ + + + @{account.get('acct')} + + + {adminAccount?.invite_request || ''} + + + + + + + + ); }; diff --git a/app/soapbox/features/admin/moderation-log.tsx b/app/soapbox/features/admin/moderation-log.tsx index baf002eb4..324f1f202 100644 --- a/app/soapbox/features/admin/moderation-log.tsx +++ b/app/soapbox/features/admin/moderation-log.tsx @@ -3,8 +3,9 @@ import { defineMessages, FormattedDate, useIntl } from 'react-intl'; import { fetchModerationLog } from 'soapbox/actions/admin'; import ScrollableList from 'soapbox/components/scrollable-list'; -import { Column } from 'soapbox/components/ui'; +import { Column, Stack, Text } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; +import { AdminLog } from 'soapbox/types/entities'; const messages = defineMessages({ heading: { id: 'column.admin.moderation_log', defaultMessage: 'Moderation Log' }, @@ -18,6 +19,7 @@ const ModerationLog = () => { const items = useAppSelector((state) => { return state.admin_log.index.map((i) => state.admin_log.items.get(String(i))); }); + const hasMore = useAppSelector((state) => state.admin_log.total - state.admin_log.index.count() > 0); const [isLoading, setIsLoading] = useState(true); @@ -54,26 +56,38 @@ const ModerationLog = () => { emptyMessage={intl.formatMessage(messages.emptyMessage)} hasMore={hasMore} onLoadMore={handleLoadMore} + className='divide-y divide-solid divide-gray-200 dark:divide-gray-800' > - {items.map((item) => item && ( -
-
{item.message}
-
- -
-
+ {items.map(item => item && ( + ))} ); }; +interface ILogItem { + log: AdminLog +} + +const LogItem: React.FC = ({ log }) => { + return ( + + {log.message} + + + + + + ); +}; + export default ModerationLog; diff --git a/app/soapbox/features/admin/tabs/awaiting-approval.tsx b/app/soapbox/features/admin/tabs/awaiting-approval.tsx index 0a412f400..36a86b61a 100644 --- a/app/soapbox/features/admin/tabs/awaiting-approval.tsx +++ b/app/soapbox/features/admin/tabs/awaiting-approval.tsx @@ -33,9 +33,12 @@ const AwaitingApproval: React.FC = () => { showLoading={showLoading} scrollKey='awaiting-approval' emptyMessage={intl.formatMessage(messages.emptyMessage)} + className='divide-y divide-solid divide-gray-200 dark:divide-gray-800' > {accountIds.map(id => ( - +
+ +
))} ); diff --git a/app/soapbox/features/admin/tabs/dashboard.tsx b/app/soapbox/features/admin/tabs/dashboard.tsx index a43bd8d83..dd0f9f1bd 100644 --- a/app/soapbox/features/admin/tabs/dashboard.tsx +++ b/app/soapbox/features/admin/tabs/dashboard.tsx @@ -1,19 +1,21 @@ import React from 'react'; -import { FormattedMessage, FormattedNumber } from 'react-intl'; -import { Link } from 'react-router-dom'; +import { FormattedMessage } from 'react-intl'; +import { useHistory } from 'react-router-dom'; import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email-list'; -import { Text } from 'soapbox/components/ui'; +import List, { ListItem } from 'soapbox/components/list'; +import { CardTitle, Icon, IconButton, Stack } from 'soapbox/components/ui'; import { useAppDispatch, useOwnAccount, useFeatures, useInstance } from 'soapbox/hooks'; import sourceCode from 'soapbox/utils/code'; import { download } from 'soapbox/utils/download'; import { parseVersion } from 'soapbox/utils/features'; -import { isNumber } from 'soapbox/utils/numbers'; +import { DashCounter, DashCounters } from '../components/dashcounter'; import RegistrationModePicker from '../components/registration-mode-picker'; const Dashboard: React.FC = () => { const dispatch = useAppDispatch(); + const history = useHistory(); const instance = useInstance(); const features = useFeatures(); const account = useOwnAccount(); @@ -39,6 +41,9 @@ const Dashboard: React.FC = () => { e.preventDefault(); }; + const navigateToSoapboxConfig = () => history.push('/soapbox/config'); + const navigateToModerationLog = () => history.push('/soapbox/admin/log'); + const v = parseVersion(instance.version); const userCount = instance.stats.get('user_count'); @@ -46,87 +51,121 @@ const Dashboard: React.FC = () => { const domainCount = instance.stats.get('domain_count'); const mau = instance.pleroma.getIn(['stats', 'mau']) as number | undefined; - const retention = (userCount && mau) ? Math.round(mau / userCount * 100) : null; + const retention = (userCount && mau) ? Math.round(mau / userCount * 100) : undefined; if (!account) return null; return ( - <> -
- {isNumber(mau) && ( -
- - - - - - -
- )} - {isNumber(userCount) && ( - - - - - - - - - )} - {isNumber(retention) && ( -
- - {retention}% - - - - -
- )} - {isNumber(statusCount) && ( - - - - - - - - - )} - {isNumber(domainCount) && ( -
- - - - - - -
- )} -
+ + + } + /> + } + /> + } + percent + /> + } + /> + } + /> + - {account.admin && } - -
-
-

-
    -
  • {sourceCode.displayName} {sourceCode.version}
    • -
  • {v.software + (v.build ? `+${v.build}` : '')} {v.version}
    • -
-
- {features.emailList && account.admin && ( - + + {account.admin && ( + } + /> )} -
- + + } + /> + + + {account.admin && ( + <> + } + /> + + + + )} + + } + /> + + + }> + + {sourceCode.displayName} {sourceCode.version} + + + + + + }> + {v.software + (v.build ? `+${v.build}` : '')} {v.version} + + + + {(features.emailList && account.admin) && ( + <> + } + /> + + + + + + + + + + + + + + + + )} + ); }; diff --git a/app/soapbox/features/forms/index.tsx b/app/soapbox/features/forms/index.tsx index b4b13a503..5d853e581 100644 --- a/app/soapbox/features/forms/index.tsx +++ b/app/soapbox/features/forms/index.tsx @@ -1,8 +1,8 @@ import classNames from 'clsx'; -import React, { useState, useRef } from 'react'; +import React, { useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; -import { Text, Select } from '../../components/ui'; +import { Select } from '../../components/ui'; interface IInputContainer { label?: React.ReactNode, @@ -175,52 +175,6 @@ export const Checkbox: React.FC = (props) => ( ); -interface IRadioGroup { - label?: React.ReactNode, - onChange?: React.ChangeEventHandler, -} - -export const RadioGroup: React.FC = (props) => { - const { label, children, onChange } = props; - - const childrenWithProps = React.Children.map(children, child => - // @ts-ignore - React.cloneElement(child, { onChange }), - ); - - return ( -
-
- -
    {childrenWithProps}
-
-
- ); -}; - -interface IRadioItem { - label?: React.ReactNode, - hint?: React.ReactNode, - value: string, - checked: boolean, - onChange?: React.ChangeEventHandler, -} - -export const RadioItem: React.FC = (props) => { - const { current: id } = useRef(uuidv4()); - const { label, hint, checked = false, ...rest } = props; - - return ( -
  • - -
    • - ); -}; - interface ISelectDropdown { label?: React.ReactNode, hint?: React.ReactNode, diff --git a/app/soapbox/reducers/admin-log.ts b/app/soapbox/reducers/admin-log.ts index fc02a1c5c..2dc1e92c4 100644 --- a/app/soapbox/reducers/admin-log.ts +++ b/app/soapbox/reducers/admin-log.ts @@ -8,7 +8,7 @@ import { ADMIN_LOG_FETCH_SUCCESS } from 'soapbox/actions/admin'; import type { AnyAction } from 'redux'; -const LogEntryRecord = ImmutableRecord({ +export const LogEntryRecord = ImmutableRecord({ data: ImmutableMap(), id: 0, message: '', diff --git a/app/soapbox/types/entities.ts b/app/soapbox/types/entities.ts index 70b51857d..0670d4fce 100644 --- a/app/soapbox/types/entities.ts +++ b/app/soapbox/types/entities.ts @@ -24,10 +24,12 @@ import { StatusRecord, TagRecord, } from 'soapbox/normalizers'; +import { LogEntryRecord } from 'soapbox/reducers/admin-log'; import type { Record as ImmutableRecord } from 'immutable'; type AdminAccount = ReturnType; +type AdminLog = ReturnType; type AdminReport = ReturnType; type Announcement = ReturnType; type AnnouncementReaction = ReturnType; @@ -68,6 +70,7 @@ type EmbeddedEntity = null | string | ReturnType new URL(url).pathname.substring(1); const trimHash = hash => hash.substring(0, 7); @@ -10,14 +12,12 @@ const tryGit = cmd => { try { return String(execSync(cmd)); } catch (e) { - return null; + return undefined; } }; const version = pkg => { // Try to discern from GitLab CI first - const { CI_COMMIT_TAG, CI_COMMIT_REF_NAME, CI_COMMIT_SHA } = process.env; - if (CI_COMMIT_TAG === `v${pkg.version}` || CI_COMMIT_REF_NAME === 'stable') { return pkg.version; } @@ -43,4 +43,5 @@ module.exports = { repository: shortRepoName(pkg.repository.url), version: version(pkg), homepage: pkg.homepage, + ref: CI_COMMIT_TAG || CI_COMMIT_SHA || tryGit('git rev-parse HEAD'), }; diff --git a/app/styles/application.scss b/app/styles/application.scss index ff2bf20de..e64ccc15e 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -50,7 +50,6 @@ @import 'components/profile-hover-card'; @import 'components/filters'; @import 'components/snackbar'; -@import 'components/admin'; @import 'components/backups'; @import 'components/crypto-donate'; @import 'components/aliases'; diff --git a/app/styles/components/admin.scss b/app/styles/components/admin.scss deleted file mode 100644 index bba02ffe8..000000000 --- a/app/styles/components/admin.scss +++ /dev/null @@ -1,67 +0,0 @@ -.dashcounters { - @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 mb-4; -} - -.dashcounter { - @apply bg-gray-200 dark:bg-gray-800 p-4 rounded flex flex-col items-center space-y-2 hover:-translate-y-1 transition-transform cursor-pointer; -} - -.dashwidgets { - display: flex; - flex-wrap: wrap; - margin: 0 -5px; - padding: 0 20px 20px 20px; -} - -.dashwidget { - flex: 1; - margin-bottom: 20px; - padding: 0 5px; - - h4 { - text-transform: uppercase; - font-size: 13px; - font-weight: 700; - color: hsla(var(--primary-text-color_hsl), 0.6); - padding-bottom: 8px; - margin-bottom: 8px; - border-bottom: 1px solid var(--accent-color--med); - } - - a { - color: var(--brand-color); - } -} - -.unapproved-account { - padding: 15px 20px; - font-size: 14px; - display: flex; - - &__nickname { - font-weight: bold; - } - - &__actions { - margin-left: auto; - display: flex; - flex-wrap: nowrap; - column-gap: 10px; - padding-left: 20px; - - .svg-icon { - height: 24px; - width: 24px; - } - } -} - -.logentry { - padding: 15px; - - &__timestamp { - color: var(--primary-text-color--faint); - font-size: 13px; - text-align: right; - } -}