gitea/rebased
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge: Fix req-error, sidebar-close-button, undefined-bug, chats-query, mediamodal.

Browse source
This commit is contained in:
Ryle 2022-12-29 22:04:55 +00:00
parent 63e0b9bb87 2495dd2b9e
commit 94992a61fa
No known key found for this signature in database
GPG key ID: FAE00B2FEBA78538
16 changed files with 242 additions and 224 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.gitlab-ci.yml
View file

@ -168,4 +168,7 @@ docker:
only:
refs:
- develop
interruptible: true
interruptible: true
include:
- template: Jobs/Dependency-Scanning.gitlab-ci.yml

8
.gitlab/merge_request_templates/BeforeAndAfter.md Normal file
View file

@ -0,0 +1,8 @@
## Summary
<!-- Describe your changes in detail -->
## Screenshots (if appropriate):
| Before | After |
| ------ | ----- |
| | |

2
CHANGELOG.md
View file

@ -7,11 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
### Added
- Compatibility: rudimentary support for Takahē.
### Changed
### Fixed
- Layout: use accent color for "floating action button" (mobile compose button).
- ServiceWorker: don't serve favicon, robots.txt, and others from ServiceWorker.
## [3.0.0] - 2022-12-25

1
app/soapbox/api/index.ts
View file

@ -62,7 +62,6 @@ export const baseClient = (accessToken?: string | null, baseURL: string = ''): A
headers: Object.assign(accessToken ? {
'Authorization': `Bearer ${accessToken}`,
} : {}),
transformResponse: [maybeParseJSON],
});
};

3
app/soapbox/components/autosuggest-account-input.tsx
View file

@ -53,8 +53,7 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
setAccountIds(ImmutableOrderedSet(accountIds));
})
.catch(noOp);
}, 900, { leading: true, trailing: true }), [limit]);
}, 900, { leading: false, trailing: true }), [limit]);
const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
refreshCancelToken();

382
app/soapbox/components/sidebar-menu.tsx
View file

@ -136,216 +136,232 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
return (
<div
className={classNames('sidebar-menu__root', {
'sidebar-menu__root--visible': sidebarOpen,
})}
aria-expanded={sidebarOpen}
className={
classNames({
'z-[1000]': sidebarOpen,
hidden: !sidebarOpen,
})
}
>
<div
className={classNames({
'fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90 z-1000': true,
'hidden': !sidebarOpen,
})}
className='fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90'
role='button'
onClick={handleClose}
>
<IconButton
title={intl.formatMessage(messages.close)}
onClick={handleClose}
src={require('@tabler/icons/x.svg')}
ref={closeButtonRef}
iconClassName='h-6 w-6'
className='fixed top-5 right-5 text-gray-600 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
/>
</div>
/>
<div className='sidebar-menu'>
<div className='relative overflow-y-scroll overflow-auto h-full w-full'>
<div className='p-4'>
<Stack space={4}>
<Link to={`/@${account.acct}`} onClick={onClose}>
<Account account={account} showProfileHoverCard={false} withLinkToProfile={false} />
</Link>
<ProfileStats
account={account}
onClickHandler={handleClose}
/>
<div className='fixed inset-0 z-[1000] flex'>
<div
className={
classNames({
'flex flex-col flex-1 bg-white dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs': true,
'!translate-x-0': sidebarOpen,
})
}
>
<IconButton
title={intl.formatMessage(messages.close)}
onClick={handleClose}
src={require('@tabler/icons/x.svg')}
ref={closeButtonRef}
iconClassName='h-6 w-6'
className='absolute top-0 right-0 -mr-11 mt-2 text-gray-600 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
/>
<div className='relative overflow-y-scroll overflow-auto h-full w-full'>
<div className='p-4'>
<Stack space={4}>
<Divider />
<Link to={`/@${account.acct}`} onClick={onClose}>
<Account account={account} showProfileHoverCard={false} withLinkToProfile={false} />
</Link>
<SidebarLink
to={`/@${account.acct}`}
icon={require('@tabler/icons/user.svg')}
text={intl.formatMessage(messages.profile)}
onClick={onClose}
<ProfileStats
account={account}
onClickHandler={handleClose}
/>
{(account.locked || followRequestsCount > 0) && (
<SidebarLink
to='/follow_requests'
icon={require('@tabler/icons/user-plus.svg')}
text={intl.formatMessage(messages.followRequests)}
onClick={onClose}
/>
)}
{features.bookmarks && (
<SidebarLink
to='/bookmarks'
icon={require('@tabler/icons/bookmark.svg')}
text={intl.formatMessage(messages.bookmarks)}
onClick={onClose}
/>
)}
{features.lists && (
<SidebarLink
to='/lists'
icon={require('@tabler/icons/list.svg')}
text={intl.formatMessage(messages.lists)}
onClick={onClose}
/>
)}
{features.events && (
<SidebarLink
to='/events'
icon={require('@tabler/icons/calendar-event.svg')}
text={intl.formatMessage(messages.events)}
onClick={onClose}
/>
)}
{settings.get('isDeveloper') && (
<SidebarLink
to='/developers'
icon={require('@tabler/icons/code.svg')}
text={intl.formatMessage(messages.developers)}
onClick={onClose}
/>
)}
{features.publicTimeline && <>
<Stack space={4}>
<Divider />
<SidebarLink
to='/timeline/local'
icon={features.federating ? require('@tabler/icons/affiliate.svg') : require('@tabler/icons/world.svg')}
text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
to={`/@${account.acct}`}
icon={require('@tabler/icons/user.svg')}
text={intl.formatMessage(messages.profile)}
onClick={onClose}
/>
{features.federating && (
{(account.locked || followRequestsCount > 0) && (
<SidebarLink
to='/timeline/fediverse'
icon={require('@tabler/icons/topology-star-ring-3.svg')}
text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
to='/follow_requests'
icon={require('@tabler/icons/user-plus.svg')}
text={intl.formatMessage(messages.followRequests)}
onClick={onClose}
/>
)}
</>}
<Divider />
<SidebarLink
to='/blocks'
icon={require('@tabler/icons/ban.svg')}
text={intl.formatMessage(messages.blocks)}
onClick={onClose}
/>
<SidebarLink
to='/mutes'
icon={require('@tabler/icons/circle-x.svg')}
text={intl.formatMessage(messages.mutes)}
onClick={onClose}
/>
{features.filters && (
<SidebarLink
to='/filters'
icon={require('@tabler/icons/filter.svg')}
text={intl.formatMessage(messages.filters)}
onClick={onClose}
/>
)}
<SidebarLink
to='/domain_blocks'
icon={require('@tabler/icons/circle-off.svg')}
text={intl.formatMessage(messages.domain_blocks)}
onClick={onClose}
/>
<SidebarLink
to='/settings/preferences'
icon={require('@tabler/icons/settings.svg')}
text={intl.formatMessage(messages.preferences)}
onClick={onClose}
/>
{account.admin && (
<SidebarLink
to='/soapbox/config'
icon={require('@tabler/icons/components.svg')}
text={intl.formatMessage(messages.soapboxConfig)}
onClick={onClose}
/>
)}
{features.import && (
<SidebarLink
to='/settings/import'
icon={require('@tabler/icons/cloud-upload.svg')}
text={intl.formatMessage(messages.importData)}
onClick={onClose}
/>
)}
<Divider />
<SidebarLink
to='/logout'
icon={require('@tabler/icons/logout.svg')}
text={intl.formatMessage(messages.logout)}
onClick={onClickLogOut}
/>
<Divider />
<Stack space={4}>
<button type='button' onClick={handleSwitcherClick} className='py-1'>
<HStack alignItems='center' justifyContent='between'>
<Text tag='span'>
<FormattedMessage id='profile_dropdown.switch_account' defaultMessage='Switch accounts' />
</Text>
<Icon
src={require('@tabler/icons/chevron-down.svg')}
className={classNames('w-4 h-4 text-gray-900 dark:text-gray-100 transition-transform', {
'rotate-180': switcher,
})}
/>
</HStack>
</button>
{switcher && (
<div className='border-t-2 border-gray-100 dark:border-gray-800 border-solid'>
{otherAccounts.map(account => renderAccount(account))}
<NavLink className='flex items-center py-2 space-x-1' to='/login/add' onClick={handleClose}>
<Icon className='text-primary-500 w-4 h-4' src={require('@tabler/icons/plus.svg')} />
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
</NavLink>
</div>
{features.bookmarks && (
<SidebarLink
to='/bookmarks'
icon={require('@tabler/icons/bookmark.svg')}
text={intl.formatMessage(messages.bookmarks)}
onClick={onClose}
/>
)}
{features.lists && (
<SidebarLink
to='/lists'
icon={require('@tabler/icons/list.svg')}
text={intl.formatMessage(messages.lists)}
onClick={onClose}
/>
)}
{features.events && (
<SidebarLink
to='/events'
icon={require('@tabler/icons/calendar-event.svg')}
text={intl.formatMessage(messages.events)}
onClick={onClose}
/>
)}
{settings.get('isDeveloper') && (
<SidebarLink
to='/developers'
icon={require('@tabler/icons/code.svg')}
text={intl.formatMessage(messages.developers)}
onClick={onClose}
/>
)}
{features.publicTimeline && <>
<Divider />
<SidebarLink
to='/timeline/local'
icon={features.federating ? require('@tabler/icons/affiliate.svg') : require('@tabler/icons/world.svg')}
text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
onClick={onClose}
/>
{features.federating && (
<SidebarLink
to='/timeline/fediverse'
icon={require('@tabler/icons/topology-star-ring-3.svg')}
text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
onClick={onClose}
/>
)}
</>}
<Divider />
<SidebarLink
to='/blocks'
icon={require('@tabler/icons/ban.svg')}
text={intl.formatMessage(messages.blocks)}
onClick={onClose}
/>
<SidebarLink
to='/mutes'
icon={require('@tabler/icons/circle-x.svg')}
text={intl.formatMessage(messages.mutes)}
onClick={onClose}
/>
{features.filters && (
<SidebarLink
to='/filters'
icon={require('@tabler/icons/filter.svg')}
text={intl.formatMessage(messages.filters)}
onClick={onClose}
/>
)}
<SidebarLink
to='/domain_blocks'
icon={require('@tabler/icons/circle-off.svg')}
text={intl.formatMessage(messages.domain_blocks)}
onClick={onClose}
/>
<SidebarLink
to='/settings/preferences'
icon={require('@tabler/icons/settings.svg')}
text={intl.formatMessage(messages.preferences)}
onClick={onClose}
/>
{account.admin && (
<SidebarLink
to='/soapbox/config'
icon={require('@tabler/icons/components.svg')}
text={intl.formatMessage(messages.soapboxConfig)}
onClick={onClose}
/>
)}
{features.import && (
<SidebarLink
to='/settings/import'
icon={require('@tabler/icons/cloud-upload.svg')}
text={intl.formatMessage(messages.importData)}
onClick={onClose}
/>
)}
<Divider />
<SidebarLink
to='/logout'
icon={require('@tabler/icons/logout.svg')}
text={intl.formatMessage(messages.logout)}
onClick={onClickLogOut}
/>
<Divider />
<Stack space={4}>
<button type='button' onClick={handleSwitcherClick} className='py-1'>
<HStack alignItems='center' justifyContent='between'>
<Text tag='span'>
<FormattedMessage id='profile_dropdown.switch_account' defaultMessage='Switch accounts' />
</Text>
<Icon
src={require('@tabler/icons/chevron-down.svg')}
className={classNames('w-4 h-4 text-gray-900 dark:text-gray-100 transition-transform', {
'rotate-180': switcher,
})}
/>
</HStack>
</button>
{switcher && (
<div className='border-t-2 border-gray-100 dark:border-gray-800 border-solid'>
{otherAccounts.map(account => renderAccount(account))}
<NavLink className='flex items-center py-2 space-x-1' to='/login/add' onClick={handleClose}>
<Icon className='text-primary-500 w-4 h-4' src={require('@tabler/icons/plus.svg')} />
<Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
</NavLink>
</div>
)}
</Stack>
</Stack>
</Stack>
</Stack>
</div>
</div>
</div>
{/* Dummy element to keep Close Icon visible */}
<div
aria-hidden
className='w-14 flex-shrink-0'
onClick={handleClose}
/>
</div>
</div>
);

2
app/soapbox/features/account-gallery/index.tsx
View file

@ -95,7 +95,7 @@ const AccountGallery = () => {
const media = (attachment.status as Status).media_attachments;
const index = media.findIndex((x) => x.id === attachment.id);
dispatch(openModal('MEDIA', { media, index, status: attachment.status, account: attachment.account }));
dispatch(openModal('MEDIA', { media, index, status: attachment.status }));
}
};

11
app/soapbox/features/chats/components/chat-pane/__tests__/chat-pane.test.tsx
View file

@ -5,7 +5,7 @@ import { __stub } from 'soapbox/api';
import { ChatContext } from 'soapbox/contexts/chat-context';
import { StatProvider } from 'soapbox/contexts/stat-context';
import chats from 'soapbox/jest/fixtures/chats.json';
import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
import { mockStore, render, rootState, screen, waitFor } from 'soapbox/jest/test-helpers';
import ChatPane from '../chat-pane';
@ -23,7 +23,12 @@ const renderComponentWithChatContext = (store = {}) => render(
describe('<ChatPane />', () => {
describe('when there are no chats', () => {
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
const state = rootState.setIn(['instance', 'version'], '2.7.2 (compatible; Pleroma 2.2.0)');
store = mockStore(state);
__stub((mock) => {
mock.onGet('/api/v1/pleroma/chats').reply(200, [], {
link: null,
@ -32,7 +37,7 @@ describe('<ChatPane />', () => {
});
it('renders the blankslate', async () => {
renderComponentWithChatContext();
renderComponentWithChatContext(store);
await waitFor(() => {
expect(screen.getByTestId('chat-pane-blankslate')).toBeInTheDocument();
@ -57,4 +62,4 @@ describe('<ChatPane />', () => {
});
});
});
});
});

8
app/soapbox/features/compose/components/__tests__/search.test.tsx
View file

@ -3,7 +3,7 @@ import React from 'react';
import { __stub } from 'soapbox/api';
import { render, screen } from '../../../../jest/test-helpers';
import { render, screen, waitFor } from '../../../../jest/test-helpers';
import Search from '../search';
describe('<Search />', () => {
@ -22,7 +22,9 @@ describe('<Search />', () => {
await user.type(screen.getByLabelText('Search'), '@jus');
expect(screen.getByLabelText('Search')).toHaveValue('@jus');
expect(screen.getByTestId('account')).toBeInTheDocument();
await waitFor(() => {
expect(screen.getByLabelText('Search')).toHaveValue('@jus');
expect(screen.getByTestId('account')).toBeInTheDocument();
});
});
});

10
app/soapbox/features/ui/components/modals/media-modal.tsx
View file

@ -13,7 +13,7 @@ import Video from 'soapbox/features/video';
import ImageLoader from '../image-loader';
import type { List as ImmutableList } from 'immutable';
import type { Account, Attachment, Status } from 'soapbox/types/entities';
import type { Attachment, Status } from 'soapbox/types/entities';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
@ -24,7 +24,6 @@ const messages = defineMessages({
interface IMediaModal {
media: ImmutableList<Attachment>,
status?: Status,
account: Account,
index: number,
time?: number,
onClose: () => void,
@ -34,7 +33,6 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
const {
media,
status,
account,
onClose,
time = 0,
} = props;
@ -94,9 +92,9 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
};
const handleStatusClick: React.MouseEventHandler = e => {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
if (status && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
e.preventDefault();
history.push(`/@${account.acct}/posts/${status?.id}`);
history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status?.id}`);
onClose();
}
};
@ -170,7 +168,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
const width = (attachment.meta.getIn(['original', 'width']) || undefined) as number | undefined;
const height = (attachment.meta.getIn(['original', 'height']) || undefined) as number | undefined;
const link = (status && account && (
const link = (status && (
<a href={status.url} onClick={handleStatusClick}>
<FormattedMessage id='lightbox.view_context' defaultMessage='View context' />
</a>

2
app/soapbox/features/ui/components/profile-media-panel.tsx
View file

@ -31,7 +31,7 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
const media = attachment.getIn(['status', 'media_attachments']) as ImmutableList<Attachment>;
const index = media.findIndex(x => x.id === attachment.id);
dispatch(openModal('MEDIA', { media, index, status: attachment.status, account: attachment.account }));
dispatch(openModal('MEDIA', { media, index, status: attachment.status }));
}
};

5
app/soapbox/queries/__tests__/chats.test.ts
View file

@ -178,7 +178,8 @@ describe('useChats', () => {
describe('with a successful request', () => {
beforeEach(() => {
store = mockStore(rootState);
const state = rootState.setIn(['instance', 'version'], '2.7.2 (compatible; Pleroma 2.2.0)');
store = mockStore(state);
__stub((mock) => {
mock.onGet('/api/v1/pleroma/chats')
@ -378,4 +379,4 @@ describe('useChatActions', () => {
expect((nextQueryData as any).message_expiration).toBe(1200);
});
});
});
});

1
app/soapbox/queries/chats.ts
View file

@ -157,6 +157,7 @@ const useChats = (search?: string) => {
const queryInfo = useInfiniteQuery(ChatKeys.chatSearch(search), ({ pageParam }) => getChats(pageParam), {
keepPreviousData: true,
enabled: features.chats,
getNextPageParam: (config) => {
if (config.hasMore) {
return { link: config.link };

1
app/styles/application.scss
View file

@ -34,7 +34,6 @@
@import 'components/modal';
@import 'components/account-header';
@import 'components/compose-form';
@import 'components/sidebar-menu';
@import 'components/emoji-reacts';
@import 'components/status';
@import 'components/reply-mentions';

17
app/styles/components/sidebar-menu.scss
View file

@ -1,17 +0,0 @@
.sidebar-menu {
@apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-primary-900 transition-all ease-linear -translate-x-80 rtl:translate-x-80 z-1000;
@media (max-width: 400px) {
@apply w-[90vw] -translate-x-[90vw] rtl:translate-x-[90vw];
}
hr {
@apply border-gray-200 dark:border-gray-700;
}
}
.sidebar-menu__root--visible {
.sidebar-menu {
transform: translateX(0);
}
}

8
renovate.json
View file

@ -1,7 +1,9 @@
{
"extends": [
"config:base",
":preserveSemverRanges",
":githubComToken(fJRNKBmV/ypoAx23PI8I+uTGJ22iSA6DERwiz1WGtXHC/imZV0mOyLfNOfVznOq3QbU9FTbuilgq3XfRQzRVMXx2eTe3ZkzzdH3loqfr2m/mt+9/PQygfkcAOJCQ4BE5Mlhfzxt9miBeG9jvm546oBXNjP39W+j4cdOnppBSMrhh2iofEOjXR41GCPDxCcdnr7RGDtWUCtrIYGyoJm2ypUrkRTUFexVAJy8Q7knX2ACZfzP9j+Uol22SEsU/WRZkvIEp60TqPlgvCFld7LECk2BYnDz9qTcSKF1GhfAsgGleSog9Tyfxow+rH1tB4cMxI5qZP0DTmAf+8fNYSgiKDA==)"
]
":preserveSemverRanges"
],
"lockFileMaintenance": {
"enabled": true
}
}