moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into feed-suggestions

This commit is contained in:
Alex Gleason 2022-07-09 15:02:45 -05:00
parent cfcfb8e671 7d953b906f
commit 3874d1d9ef
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
197 changed files with 1571 additions and 1468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/soapbox/actions/__tests__/account-notes.test.ts
View File

@ -1,18 +1,20 @@
import { Map as ImmutableMap } from 'immutable';
import { __stub } from 'soapbox/api';
import { mockStore } from 'soapbox/jest/test-helpers';
import rootReducer from 'soapbox/reducers';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { ReducerRecord, EditRecord } from 'soapbox/reducers/account_notes';
import { normalizeAccount } from '../../normalizers';
import { normalizeAccount, normalizeRelationship } from '../../normalizers';
import { changeAccountNoteComment, initAccountNoteModal, submitAccountNote } from '../account-notes';
import type { Account } from 'soapbox/types/entities';
describe('submitAccountNote()', () => {
let store;
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('account_notes', { edit: { account: 1, comment: 'hello' } });
const state = rootState
.set('account_notes', ReducerRecord({ edit: EditRecord({ account: '1', comment: 'hello' }) }));
store = mockStore(state);
});
@ -60,11 +62,11 @@ describe('submitAccountNote()', () => {
});
describe('initAccountNoteModal()', () => {
let store;
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('relationships', ImmutableMap({ 1: { note: 'hello' } }));
const state = rootState
.set('relationships', ImmutableMap({ '1': normalizeRelationship({ note: 'hello' }) }));
store = mockStore(state);
});
@ -75,7 +77,7 @@ describe('initAccountNoteModal()', () => {
display_name: 'Justin L',
avatar: 'test.jpg',
verified: true,
});
}) as Account;
const expectedActions = [
{ type: 'ACCOUNT_NOTE_INIT_MODAL', account, comment: 'hello' },
{ type: 'MODAL_OPEN', modalType: 'ACCOUNT_NOTE' },
@ -88,10 +90,10 @@ describe('initAccountNoteModal()', () => {
});
describe('changeAccountNoteComment()', () => {
let store;
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
const state = rootReducer(undefined, {});
const state = rootState;
store = mockStore(state);
});

184
app/soapbox/actions/__tests__/accounts.test.ts
View File

@ -1,10 +1,10 @@
import { Map as ImmutableMap } from 'immutable';
import { __stub } from 'soapbox/api';
import { mockStore } from 'soapbox/jest/test-helpers';
import rootReducer from 'soapbox/reducers';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { ListRecord, ReducerRecord } from 'soapbox/reducers/user_lists';
import { normalizeAccount } from '../../normalizers';
import { normalizeAccount, normalizeInstance, normalizeRelationship } from '../../normalizers';
import {
authorizeFollowRequest,
blockAccount,
@ -28,7 +28,7 @@ import {
unsubscribeAccount,
} from '../accounts';
let store;
let store: ReturnType<typeof mockStore>;
describe('createAccount()', () => {
const params = {
@ -37,7 +37,7 @@ describe('createAccount()', () => {
describe('with a successful API request', () => {
beforeEach(() => {
const state = rootReducer(undefined, {});
const state = rootState;
store = mockStore(state);
__stub((mock) => {
@ -74,10 +74,10 @@ describe('fetchAccount()', () => {
avatar: 'test.jpg',
});
const state = rootReducer(undefined, {})
const state = rootState
.set('accounts', ImmutableMap({
[id]: account,
}));
}) as any);
store = mockStore(state);
@ -98,7 +98,7 @@ describe('fetchAccount()', () => {
const account = require('soapbox/__fixtures__/pleroma-account.json');
beforeEach(() => {
const state = rootReducer(undefined, {});
const state = rootState;
store = mockStore(state);
__stub((mock) => {
@ -125,7 +125,7 @@ describe('fetchAccount()', () => {
describe('with an unsuccessful API request', () => {
beforeEach(() => {
const state = rootReducer(undefined, {});
const state = rootState;
store = mockStore(state);
__stub((mock) => {
@ -155,7 +155,7 @@ describe('fetchAccount()', () => {
describe('fetchAccountByUsername()', () => {
const id = '123';
const username = 'tiger';
let state, account;
let state, account: any;
beforeEach(() => {
account = normalizeAccount({
@ -166,7 +166,7 @@ describe('fetchAccountByUsername()', () => {
birthday: undefined,
});
state = rootReducer(undefined, {})
state = rootState
.set('accounts', ImmutableMap({
[id]: account,
}));
@ -180,15 +180,15 @@ describe('fetchAccountByUsername()', () => {
describe('when "accountByUsername" feature is enabled', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('instance', {
const state = rootState
.set('instance', normalizeInstance({
version: '2.7.2 (compatible; Pleroma 2.4.52-1337-g4779199e.gleasonator+soapbox)',
pleroma: ImmutableMap({
metadata: ImmutableMap({
features: [],
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
@ -243,15 +243,15 @@ describe('fetchAccountByUsername()', () => {
describe('when "accountLookup" feature is enabled', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('instance', {
const state = rootState
.set('instance', normalizeInstance({
version: '3.4.1 (compatible; TruthSocial 1.0.0)',
pleroma: ImmutableMap({
metadata: ImmutableMap({
features: [],
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
@ -308,7 +308,7 @@ describe('fetchAccountByUsername()', () => {
describe('when using the accountSearch function', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -373,12 +373,12 @@ describe('fetchAccountByUsername()', () => {
describe('followAccount()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
it('should do nothing', async() => {
await store.dispatch(followAccount(1));
await store.dispatch(followAccount('1'));
const actions = store.getActions();
expect(actions).toEqual([]);
@ -386,10 +386,10 @@ describe('followAccount()', () => {
});
describe('when logged in', () => {
const id = 1;
const id = '1';
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -460,12 +460,12 @@ describe('followAccount()', () => {
describe('unfollowAccount()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
it('should do nothing', async() => {
await store.dispatch(unfollowAccount(1));
await store.dispatch(unfollowAccount('1'));
const actions = store.getActions();
expect(actions).toEqual([]);
@ -473,10 +473,10 @@ describe('unfollowAccount()', () => {
});
describe('when logged in', () => {
const id = 1;
const id = '1';
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -489,7 +489,7 @@ describe('unfollowAccount()', () => {
it('should dispatch the correct actions', async() => {
const expectedActions = [
{ type: 'ACCOUNT_UNFOLLOW_REQUEST', id: 1, skipLoading: true },
{ type: 'ACCOUNT_UNFOLLOW_REQUEST', id: '1', skipLoading: true },
{
type: 'ACCOUNT_UNFOLLOW_SUCCESS',
relationship: { success: true },
@ -534,11 +534,11 @@ describe('unfollowAccount()', () => {
});
describe('blockAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -552,7 +552,7 @@ describe('blockAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -601,11 +601,11 @@ describe('blockAccount()', () => {
});
describe('unblockAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -619,7 +619,7 @@ describe('unblockAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -667,11 +667,11 @@ describe('unblockAccount()', () => {
});
describe('muteAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -685,7 +685,7 @@ describe('muteAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -734,11 +734,11 @@ describe('muteAccount()', () => {
});
describe('unmuteAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -752,7 +752,7 @@ describe('unmuteAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -800,11 +800,11 @@ describe('unmuteAccount()', () => {
});
describe('subscribeAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -818,7 +818,7 @@ describe('subscribeAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -866,11 +866,11 @@ describe('subscribeAccount()', () => {
});
describe('unsubscribeAccount()', () => {
const id = 1;
const id = '1';
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -884,7 +884,7 @@ describe('unsubscribeAccount()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -936,7 +936,7 @@ describe('removeFromFollowers()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -950,7 +950,7 @@ describe('removeFromFollowers()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -1002,7 +1002,7 @@ describe('fetchFollowers()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -1059,7 +1059,7 @@ describe('expandFollowers()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1073,28 +1073,28 @@ describe('expandFollowers()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
const state = rootState
.set('user_lists', ReducerRecord({
followers: ImmutableMap({
[id]: {
[id]: ListRecord({
next: 'next_url',
},
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
describe('when the url is null', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
const state = rootState
.set('user_lists', ReducerRecord({
followers: ImmutableMap({
[id]: {
[id]: ListRecord({
next: null,
},
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
@ -1160,7 +1160,7 @@ describe('fetchFollowing()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});
@ -1217,7 +1217,7 @@ describe('expandFollowing()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1231,28 +1231,28 @@ describe('expandFollowing()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
const state = rootState
.set('user_lists', ReducerRecord({
following: ImmutableMap({
[id]: {
[id]: ListRecord({
next: 'next_url',
},
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
describe('when the url is null', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
const state = rootState
.set('user_lists', ReducerRecord({
following: ImmutableMap({
[id]: {
[id]: ListRecord({
next: null,
},
}),
}),
})
}))
.set('me', '123');
store = mockStore(state);
});
@ -1318,7 +1318,7 @@ describe('fetchRelationships()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1332,15 +1332,15 @@ describe('fetchRelationships()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '123');
store = mockStore(state);
});
describe('without newAccountIds', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('relationships', ImmutableMap({ [id]: {} }))
const state = rootState
.set('relationships', ImmutableMap({ [id]: normalizeRelationship({}) }))
.set('me', '123');
store = mockStore(state);
});
@ -1355,7 +1355,7 @@ describe('fetchRelationships()', () => {
describe('with a successful API request', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('relationships', ImmutableMap({}))
.set('me', '123');
store = mockStore(state);
@ -1409,7 +1409,7 @@ describe('fetchRelationships()', () => {
describe('fetchFollowRequests()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1423,14 +1423,14 @@ describe('fetchFollowRequests()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '123');
store = mockStore(state);
});
describe('with a successful API request', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('relationships', ImmutableMap({}))
.set('me', '123');
store = mockStore(state);
@ -1483,7 +1483,7 @@ describe('fetchFollowRequests()', () => {
describe('expandFollowRequests()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1497,24 +1497,24 @@ describe('expandFollowRequests()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
follow_requests: {
const state = rootState
.set('user_lists', ReducerRecord({
follow_requests: ListRecord({
next: 'next_url',
},
})
}),
}))
.set('me', '123');
store = mockStore(state);
});
describe('when the url is null', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
.set('user_lists', {
follow_requests: {
const state = rootState
.set('user_lists', ReducerRecord({
follow_requests: ListRecord({
next: null,
},
})
}),
}))
.set('me', '123');
store = mockStore(state);
});
@ -1579,7 +1579,7 @@ describe('authorizeFollowRequest()', () => {
describe('when logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -1593,7 +1593,7 @@ describe('authorizeFollowRequest()', () => {
describe('when logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '123');
const state = rootState.set('me', '123');
store = mockStore(state);
});

17
app/soapbox/actions/__tests__/alerts.test.ts
View File

@ -1,11 +1,10 @@
import { AxiosError } from 'axios';
import { mockStore } from 'soapbox/jest/test-helpers';
import rootReducer from 'soapbox/reducers';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { dismissAlert, showAlert, showAlertForError } from '../alerts';
const buildError = (message: string, status: number) => new AxiosError<any>(message, String(status), null, null, {
const buildError = (message: string, status: number) => new AxiosError<any>(message, String(status), undefined, null, {
data: {
error: message,
},
@ -15,10 +14,10 @@ const buildError = (message: string, status: number) => new AxiosError<any>(mess
config: {},
});
let store;
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
const state = rootReducer(undefined, {});
const state = rootState;
store = mockStore(state);
});
@ -28,7 +27,7 @@ describe('dismissAlert()', () => {
const expectedActions = [
{ type: 'ALERT_DISMISS', alert },
];
await store.dispatch(dismissAlert(alert));
await store.dispatch(dismissAlert(alert as any));
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
@ -70,11 +69,10 @@ describe('showAlert()', () => {
it('dispatches the proper actions', async() => {
const error = buildError('', 404);
const expectedActions = [];
await store.dispatch(showAlertForError(error));
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
expect(actions).toEqual([]);
});
});
@ -82,11 +80,10 @@ describe('showAlert()', () => {
it('dispatches the proper actions', async() => {
const error = buildError('', 410);
const expectedActions = [];
await store.dispatch(showAlertForError(error));
const actions = store.getActions();
expect(actions).toEqual(expectedActions);
expect(actions).toEqual([]);
});
});

26
app/soapbox/actions/__tests__/blocks.test.ts
View File

@ -1,8 +1,6 @@
import { Record as ImmutableRecord } from 'immutable';
import { __stub } from 'soapbox/api';
import { mockStore } from 'soapbox/jest/test-helpers';
import rootReducer from 'soapbox/reducers';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { ListRecord, ReducerRecord as UserListsRecord } from 'soapbox/reducers/user_lists';
import { expandBlocks, fetchBlocks } from '../blocks';
@ -14,11 +12,11 @@ const account = {
};
describe('fetchBlocks()', () => {
let store;
let store: ReturnType<typeof mockStore>;
describe('if logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -32,7 +30,7 @@ describe('fetchBlocks()', () => {
describe('if logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '1234');
const state = rootState.set('me', '1234');
store = mockStore(state);
});
@ -87,11 +85,11 @@ describe('fetchBlocks()', () => {
});
describe('expandBlocks()', () => {
let store;
let store: ReturnType<typeof mockStore>;
describe('if logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -105,15 +103,15 @@ describe('expandBlocks()', () => {
describe('if logged in', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', '1234');
const state = rootState.set('me', '1234');
store = mockStore(state);
});
describe('without a url', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '1234')
.set('user_lists', ImmutableRecord({ blocks: { next: null } })());
.set('user_lists', UserListsRecord({ blocks: ListRecord({ next: null }) }));
store = mockStore(state);
});
@ -127,9 +125,9 @@ describe('expandBlocks()', () => {
describe('with a url', () => {
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '1234')
.set('user_lists', ImmutableRecord({ blocks: { next: 'example' } })());
.set('user_lists', UserListsRecord({ blocks: ListRecord({ next: 'example' }) }));
store = mockStore(state);
});

4
app/soapbox/actions/__tests__/carousels.test.ts
View File

@ -4,14 +4,14 @@ import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { fetchCarouselAvatars } from '../carousels';
describe('fetchCarouselAvatars()', () => {
let store;
let store: ReturnType<typeof mockStore>;
beforeEach(() => {
store = mockStore(rootState);
});
describe('with a successful API request', () => {
let avatars;
let avatars: Record<string, any>[];
beforeEach(() => {
avatars = [

43
app/soapbox/actions/__tests__/compose.test.ts
View File

@ -1,28 +1,29 @@
import { fromJS } from 'immutable';
import { Map as ImmutableMap } from 'immutable';
import { mockStore } from 'soapbox/jest/test-helpers';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { InstanceRecord } from 'soapbox/normalizers';
import rootReducer from 'soapbox/reducers';
import { uploadCompose } from '../compose';
import type { IntlShape } from 'react-intl';
describe('uploadCompose()', () => {
describe('with images', () => {
let files, store;
let files: FileList, store: ReturnType<typeof mockStore>;
beforeEach(() => {
const instance = InstanceRecord({
configuration: fromJS({
statuses: {
configuration: ImmutableMap({
statuses: ImmutableMap({
max_media_attachments: 4,
},
media_attachments: {
}),
media_attachments: ImmutableMap({
image_size_limit: 10,
},
}),
}),
});
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '1234')
.set('instance', instance);
@ -32,13 +33,13 @@ describe('uploadCompose()', () => {
name: 'Image',
size: 15,
type: 'image/png',
}];
}] as unknown as FileList;
});
it('creates an alert if exceeds max size', async() => {
const mockIntl = {
formatMessage: jest.fn().mockReturnValue('Image exceeds the current file size limit (10 Bytes)'),
};
} as unknown as IntlShape;
const expectedActions = [
{ type: 'COMPOSE_UPLOAD_REQUEST', skipLoading: true },
@ -60,21 +61,21 @@ describe('uploadCompose()', () => {
});
describe('with videos', () => {
let files, store;
let files: FileList, store: ReturnType<typeof mockStore>;
beforeEach(() => {
const instance = InstanceRecord({
configuration: fromJS({
statuses: {
configuration: ImmutableMap({
statuses: ImmutableMap({
max_media_attachments: 4,
},
media_attachments: {
}),
media_attachments: ImmutableMap({
video_size_limit: 10,
},
}),
}),
});
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '1234')
.set('instance', instance);
@ -84,13 +85,13 @@ describe('uploadCompose()', () => {
name: 'Video',
size: 15,
type: 'video/mp4',
}];
}] as unknown as FileList;
});
it('creates an alert if exceeds max size', async() => {
const mockIntl = {
formatMessage: jest.fn().mockReturnValue('Video exceeds the current file size limit (10 Bytes)'),
};
} as unknown as IntlShape;
const expectedActions = [
{ type: 'COMPOSE_UPLOAD_REQUEST', skipLoading: true },

13
app/soapbox/actions/__tests__/onboarding.test.ts
View File

@ -1,5 +1,4 @@
import { mockStore, mockWindowProperty } from 'soapbox/jest/test-helpers';
import rootReducer from 'soapbox/reducers';
import { mockStore, mockWindowProperty, rootState } from 'soapbox/jest/test-helpers';
import { checkOnboardingStatus, startOnboarding, endOnboarding } from '../onboarding';
@ -17,7 +16,7 @@ describe('checkOnboarding()', () => {
it('does nothing if localStorage item is not set', async() => {
mockGetItem = jest.fn().mockReturnValue(null);
const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
const store = mockStore(state);
await store.dispatch(checkOnboardingStatus());
@ -30,7 +29,7 @@ describe('checkOnboarding()', () => {
it('does nothing if localStorage item is invalid', async() => {
mockGetItem = jest.fn().mockReturnValue('invalid');
const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
const store = mockStore(state);
await store.dispatch(checkOnboardingStatus());
@ -43,7 +42,7 @@ describe('checkOnboarding()', () => {
it('dispatches the correct action', async() => {
mockGetItem = jest.fn().mockReturnValue('1');
const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
const store = mockStore(state);
await store.dispatch(checkOnboardingStatus());
@ -66,7 +65,7 @@ describe('startOnboarding()', () => {
});
it('dispatches the correct action', async() => {
const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
const store = mockStore(state);
await store.dispatch(startOnboarding());
@ -89,7 +88,7 @@ describe('endOnboarding()', () => {
});
it('dispatches the correct action', async() => {
const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
const store = mockStore(state);
await store.dispatch(endOnboarding());

13
app/soapbox/actions/__tests__/statuses.test.ts
View File

@ -4,7 +4,6 @@ import { STATUSES_IMPORT } from 'soapbox/actions/importer';
import { __stub } from 'soapbox/api';
import { mockStore, rootState } from 'soapbox/jest/test-helpers';
import { normalizeStatus } from 'soapbox/normalizers/status';
import rootReducer from 'soapbox/reducers';
import { deleteStatus, fetchContext } from '../statuses';
@ -19,7 +18,7 @@ describe('fetchContext()', () => {
const store = mockStore(rootState);
store.dispatch(fetchContext('017ed505-5926-392f-256a-f86d5075df70')).then(context => {
store.dispatch(fetchContext('017ed505-5926-392f-256a-f86d5075df70')).then(() => {
const actions = store.getActions();
expect(actions[3].type).toEqual(STATUSES_IMPORT);
@ -31,11 +30,11 @@ describe('fetchContext()', () => {
});
describe('deleteStatus()', () => {
let store;
let store: ReturnType<typeof mockStore>;
describe('if logged out', () => {
beforeEach(() => {
const state = rootReducer(undefined, {}).set('me', null);
const state = rootState.set('me', null);
store = mockStore(state);
});
@ -54,16 +53,16 @@ describe('deleteStatus()', () => {
});
beforeEach(() => {
const state = rootReducer(undefined, {})
const state = rootState
.set('me', '1234')
.set('statuses', fromJS({
[statusId]: cachedStatus,
}));
}) as any);
store = mockStore(state);
});
describe('with a successful API request', () => {
let status;
let status: any;
beforeEach(() => {
status = require('soapbox/__fixtures__/pleroma-status-deleted.json');

12
app/soapbox/actions/auth.ts
View File

@ -180,8 +180,8 @@ export const verifyCredentials = (token: string, accountUrl?: string) => {
return account;
} else {
if (getState().me === null) dispatch(fetchMeFail(error));
dispatch({ type: VERIFY_CREDENTIALS_FAIL, token, error, skipAlert: true });
return error;
dispatch({ type: VERIFY_CREDENTIALS_FAIL, token, error });
throw error;
}
});
};
@ -214,14 +214,6 @@ export const logIn = (username: string, password: string) =>
if ((error.response?.data as any).error === 'mfa_required') {
// If MFA is required, throw the error and handle it in the component.
throw error;
} else if ((error.response?.data as any).error === 'invalid_grant') {
// Mastodon returns this user-unfriendly error as a catch-all
// for everything from "bad request" to "wrong password".
// Assume our code is correct and it's a wrong password.
dispatch(snackbar.error(messages.invalidCredentials));
} else if ((error.response?.data as any).error) {
// If the backend returns an error, display it.
dispatch(snackbar.error((error.response?.data as any).error));
} else {
// Return "wrong password" message.
dispatch(snackbar.error(messages.invalidCredentials));

10
app/soapbox/actions/moderation.tsx
View File

@ -44,7 +44,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
const name = state.accounts.get(accountId)!.username;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/user-off.svg'),
icon: require('@tabler/icons/user-off.svg'),
heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
message: intl.formatMessage(messages.deactivateUserPrompt, { acct }),
confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
@ -83,7 +83,7 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/user-minus.svg'),
icon: require('@tabler/icons/user-minus.svg'),
heading: intl.formatMessage(messages.deleteUserHeading, { acct }),
message,
confirm,
@ -106,7 +106,7 @@ const rejectUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
const name = state.accounts.get(accountId)!.username;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/user-off.svg'),
icon: require('@tabler/icons/user-off.svg'),
heading: intl.formatMessage(messages.rejectUserHeading, { acct }),
message: intl.formatMessage(messages.rejectUserPrompt, { acct }),
confirm: intl.formatMessage(messages.rejectUserConfirm, { name }),
@ -127,7 +127,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
const acct = state.accounts.get(accountId)!.acct;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/alert-triangle.svg'),
icon: require('@tabler/icons/alert-triangle.svg'),
heading: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveHeading : messages.markStatusNotSensitiveHeading),
message: intl.formatMessage(sensitive === false ? messages.markStatusSensitivePrompt : messages.markStatusNotSensitivePrompt, { acct }),
confirm: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveConfirm : messages.markStatusNotSensitiveConfirm),
@ -148,7 +148,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
const acct = state.accounts.get(accountId)!.acct;
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
heading: intl.formatMessage(messages.deleteStatusHeading),
message: intl.formatMessage(messages.deleteStatusPrompt, { acct }),
confirm: intl.formatMessage(messages.deleteStatusConfirm),

14
app/soapbox/components/__tests__/account.test.tsx
View File

@ -5,6 +5,8 @@ import { render, screen } from '../../jest/test-helpers';
import { normalizeAccount } from '../../normalizers';
import Account from '../account';
import type { ReducerAccount } from 'soapbox/reducers/accounts';
describe('<Account />', () => {
it('renders account name and username', () => {
const account = normalizeAccount({
@ -12,7 +14,7 @@ describe('<Account />', () => {
acct: 'justin-username',
display_name: 'Justin L',
avatar: 'test.jpg',
});
}) as ReducerAccount;
const store = {
accounts: ImmutableMap({
@ -20,7 +22,7 @@ describe('<Account />', () => {
}),
};
render(<Account account={account} />, null, store);
render(<Account account={account} />, undefined, store);
expect(screen.getByTestId('account')).toHaveTextContent('Justin L');
expect(screen.getByTestId('account')).toHaveTextContent(/justin-username/i);
});
@ -33,7 +35,7 @@ describe('<Account />', () => {
display_name: 'Justin L',
avatar: 'test.jpg',
verified: true,
});
}) as ReducerAccount;
const store = {
accounts: ImmutableMap({
@ -41,7 +43,7 @@ describe('<Account />', () => {
}),
};
render(<Account account={account} />, null, store);
render(<Account account={account} />, undefined, store);
expect(screen.getByTestId('verified-badge')).toBeInTheDocument();
});
@ -52,7 +54,7 @@ describe('<Account />', () => {
display_name: 'Justin L',
avatar: 'test.jpg',
verified: false,
});
}) as ReducerAccount;
const store = {
accounts: ImmutableMap({
@ -60,7 +62,7 @@ describe('<Account />', () => {
}),
};
render(<Account account={account} />, null, store);
render(<Account account={account} />, undefined, store);
expect(screen.queryAllByTestId('verified-badge')).toHaveLength(0);
});
});

4
app/soapbox/components/__tests__/avatar.test.tsx
View File

@ -5,6 +5,8 @@ import { normalizeAccount } from 'soapbox/normalizers';
import { render, screen } from '../../jest/test-helpers';
import Avatar from '../avatar';
import type { ReducerAccount } from 'soapbox/reducers/accounts';
describe('<Avatar />', () => {
const account = normalizeAccount({
username: 'alice',
@ -12,7 +14,7 @@ describe('<Avatar />', () => {
display_name: 'Alice',
avatar: '/animated/alice.gif',
avatar_static: '/static/alice.jpg',
});
}) as ReducerAccount;
const size = 100;

13
app/soapbox/components/__tests__/avatar_overlay.test.tsx
View File

@ -1,25 +1,28 @@
import { fromJS } from 'immutable';
import React from 'react';
import { normalizeAccount } from 'soapbox/normalizers';
import { render, screen } from '../../jest/test-helpers';
import AvatarOverlay from '../avatar_overlay';
import type { ReducerAccount } from 'soapbox/reducers/accounts';
describe('<AvatarOverlay', () => {
const account = fromJS({
const account = normalizeAccount({
username: 'alice',
acct: 'alice',
display_name: 'Alice',
avatar: '/animated/alice.gif',
avatar_static: '/static/alice.jpg',
});
}) as ReducerAccount;
const friend = fromJS({
const friend = normalizeAccount({
username: 'eve',
acct: 'eve@blackhat.lair',
display_name: 'Evelyn',
avatar: '/animated/eve.gif',
avatar_static: '/static/eve.jpg',
});
}) as ReducerAccount;
it('renders a overlay avatar', () => {
render(<AvatarOverlay account={account} friend={friend} />);

4
app/soapbox/components/__tests__/display_name.test.tsx
View File

@ -5,9 +5,11 @@ import { normalizeAccount } from 'soapbox/normalizers';
import { render, screen } from '../../jest/test-helpers';
import DisplayName from '../display-name';
import type { ReducerAccount } from 'soapbox/reducers/accounts';
describe('<DisplayName />', () => {
it('renders display name + account name', () => {
const account = normalizeAccount({ acct: 'bar@baz' });
const account = normalizeAccount({ acct: 'bar@baz' }) as ReducerAccount;
render(<DisplayName account={account} />);
expect(screen.getByTestId('display-name')).toHaveTextContent('bar@baz');

1
app/soapbox/components/__tests__/emoji_selector.test.tsx
View File

@ -6,6 +6,7 @@ import EmojiSelector from '../emoji_selector';
describe('<EmojiSelector />', () => {
it('renders correctly', () => {
const children = <EmojiSelector />;
// @ts-ignore
children.__proto__.addEventListener = () => {};
render(children);

8
app/soapbox/components/__tests__/quoted-status.test.tsx
View File

@ -4,6 +4,8 @@ import { render, screen, rootState } from '../../jest/test-helpers';
import { normalizeStatus, normalizeAccount } from '../../normalizers';
import QuotedStatus from '../quoted-status';
import type { ReducerStatus } from 'soapbox/reducers/statuses';
describe('<QuotedStatus />', () => {
it('renders content', () => {
const account = normalizeAccount({
@ -16,11 +18,11 @@ describe('<QuotedStatus />', () => {
account,
content: 'hello world',
contentHtml: 'hello world',
});
}) as ReducerStatus;
const state = rootState.setIn(['accounts', '1', account]);
const state = rootState.setIn(['accounts', '1'], account);
render(<QuotedStatus status={status} />, null, state);
render(<QuotedStatus status={status} />, undefined, state);
screen.getByText(/hello world/i);
expect(screen.getByTestId('quoted-status')).toHaveTextContent(/hello world/i);
});

4
app/soapbox/components/__tests__/scroll-top-button.test.tsx
View File

@ -28,7 +28,7 @@ describe('<ScrollTopButton />', () => {
message={messages.queue}
/>,
);
expect(screen.getByText('Click to see 1 new post', { hidden: true })).toBeInTheDocument();
expect(screen.getByText('Click to see 1 new post')).toBeInTheDocument();
render(
<ScrollTopButton
@ -38,6 +38,6 @@ describe('<ScrollTopButton />', () => {
message={messages.queue}
/>,
);
expect(screen.getByText('Click to see 9999999 new posts', { hidden: true })).toBeInTheDocument();
expect(screen.getByText('Click to see 9999999 new posts')).toBeInTheDocument();
});
});

2
app/soapbox/components/account.tsx
View File

@ -232,7 +232,7 @@ const Account = ({
<>
<Text tag='span' theme='muted' size='sm'>&middot;</Text>
<Icon className='h-5 w-5 stroke-[1.35]' src={require('@tabler/icons/icons/pencil.svg')} />
<Icon className='h-5 w-5 stroke-[1.35]' src={require('@tabler/icons/pencil.svg')} />
</>
) : null}
</HStack>

4
app/soapbox/components/account_search.tsx
View File

@ -70,8 +70,8 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
/>
</label>
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
<Icon src={require('@tabler/icons/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
<Icon src={require('@tabler/icons/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
<Icon src={require('@tabler/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
<Icon src={require('@tabler/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
</div>
</div>
);

8
app/soapbox/components/birthday_input.tsx
View File

@ -70,7 +70,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
<div className='flex items-center justify-between'>
<IconButton
className='datepicker__button'
src={require('@tabler/icons/icons/chevron-left.svg')}
src={require('@tabler/icons/chevron-left.svg')}
onClick={decreaseMonth}
disabled={prevMonthButtonDisabled}
aria-label={intl.formatMessage(messages.previousMonth)}
@ -79,7 +79,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
{intl.formatDate(date, { month: 'long' })}
<IconButton
className='datepicker__button'
src={require('@tabler/icons/icons/chevron-right.svg')}
src={require('@tabler/icons/chevron-right.svg')}
onClick={increaseMonth}
disabled={nextMonthButtonDisabled}
aria-label={intl.formatMessage(messages.nextMonth)}
@ -89,7 +89,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
<div className='flex items-center justify-between'>
<IconButton
className='datepicker__button'
src={require('@tabler/icons/icons/chevron-left.svg')}
src={require('@tabler/icons/chevron-left.svg')}
onClick={decreaseYear}
disabled={prevYearButtonDisabled}
aria-label={intl.formatMessage(messages.previousYear)}
@ -98,7 +98,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
{intl.formatDate(date, { year: 'numeric' })}
<IconButton
className='datepicker__button'
src={require('@tabler/icons/icons/chevron-right.svg')}
src={require('@tabler/icons/chevron-right.svg')}
onClick={increaseYear}
disabled={nextYearButtonDisabled}
aria-label={intl.formatMessage(messages.nextYear)}

2
app/soapbox/components/display-name.tsx
View File

@ -22,7 +22,7 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = fal
const joinedAt = createdAt ? (
<div className='account__joined-at'>
<Icon src={require('@tabler/icons/icons/clock.svg')} />
<Icon src={require('@tabler/icons/clock.svg')} />
<RelativeTimestamp timestamp={createdAt} />
</div>
) : null;

4
app/soapbox/components/domain.tsx
View File

@ -21,7 +21,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
// const onBlockDomain = () => {
// dispatch(openModal('CONFIRM', {
// icon: require('@tabler/icons/icons/ban.svg'),
// icon: require('@tabler/icons/ban.svg'),
// heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
// message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />,
// confirm: intl.formatMessage(messages.blockDomainConfirm),
@ -41,7 +41,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
</span>
<div className='domain__buttons'>
<IconButton active src={require('@tabler/icons/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
<IconButton active src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
</div>
</div>
</div>

2
app/soapbox/components/dropdown_menu.tsx
View File

@ -366,7 +366,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
}
render() {
const { src = require('@tabler/icons/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
const open = this.state.id === openDropdownId;
return (

2
app/soapbox/components/error_boundary.tsx
View File

@ -120,7 +120,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
{logo ? (
<img className='h-12' src={logo} alt={siteTitle} />
) : (
<SvgIcon className='h-12 w-12' src={require('@tabler/icons/icons/home.svg')} alt={siteTitle} />
<SvgIcon className='h-12 w-12' src={require('@tabler/icons/home.svg')} alt={siteTitle} />
)}
</a>
</div>

2
app/soapbox/components/list.tsx
View File

@ -54,7 +54,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
<div className='flex flex-row items-center text-gray-500 dark:text-gray-400'>
{children}
<Icon src={require('@tabler/icons/icons/chevron-right.svg')} className='ml-1' />
<Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1' />
</div>
) : renderChildren()}
</Comp>

6
app/soapbox/components/media_gallery.js
View File

@ -149,7 +149,7 @@ class Item extends React.PureComponent {
const attachmentIcon = (
<Icon
className='h-16 w-16 text-gray-800 dark:text-gray-200'
src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/icons/paperclip.svg')}
src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/paperclip.svg')}
/>
);
@ -602,7 +602,7 @@ class MediaGallery extends React.PureComponent {
(visible || compact) ? (
<Button
text={intl.formatMessage(messages.toggle_visible)}
icon={visible ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
icon={visible ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
onClick={this.handleOpen}
theme='transparent'
size='sm'
@ -617,7 +617,7 @@ class MediaGallery extends React.PureComponent {
</Text>
</div>
<Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/icons/eye.svg')}>
<Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/eye.svg')}>
<FormattedMessage id='status.sensitive_warning.action' defaultMessage='Show content' />
</Button>
</div>

2
app/soapbox/components/modal_root.js
View File

@ -78,7 +78,7 @@ class ModalRoot extends React.PureComponent {
if (hasComposeContent && type === 'COMPOSE') {
onOpenModal('CONFIRM', {
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
heading: isEditing ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' /> : <FormattedMessage id='confirmations.delete.heading' defaultMessage='Delete post' />,
message: isEditing ? <FormattedMessage id='confirmations.cancel_editing.message' defaultMessage='Are you sure you want to cancel editing this post? All changes will be lost.' /> : <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this post?' />,
confirm: intl.formatMessage(messages.confirm),

4
app/soapbox/components/polls/__tests__/poll-footer.test.tsx
View File

@ -6,7 +6,7 @@ import { Provider } from 'react-redux';
import { __stub } from 'soapbox/api';
import { normalizePoll } from 'soapbox/normalizers/poll';
import { mockStore, render, rootReducer, screen } from '../../../jest/test-helpers';
import { mockStore, render, screen, rootState } from '../../../jest/test-helpers';
import PollFooter from '../poll-footer';
let poll = normalizePoll({
@ -36,7 +36,7 @@ describe('<PollFooter />', () => {
});
const user = userEvent.setup();
const store = mockStore(rootReducer(undefined, {}));
const store = mockStore(rootState);
render(
<Provider store={store}>
<IntlProvider locale='en'>

4
app/soapbox/components/polls/poll-option.tsx
View File

@ -85,7 +85,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
aria-label={option.title}
>
{active && (
<Icon src={require('@tabler/icons/icons/check.svg')} className='text-white dark:text-primary-900 w-4 h-4' />
<Icon src={require('@tabler/icons/check.svg')} className='text-white dark:text-primary-900 w-4 h-4' />
)}
</span>
</div>
@ -138,7 +138,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
<HStack space={2} alignItems='center' className='relative'>
{voted ? (
<Icon
src={require('@tabler/icons/icons/circle-check.svg')}
src={require('@tabler/icons/circle-check.svg')}
alt={intl.formatMessage(messages.voted)}
className='text-primary-600 dark:text-primary-800 dark:fill-white w-4 h-4'
/>

2
app/soapbox/components/quoted-status.tsx
View File

@ -116,7 +116,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
if (onCancel) {
actions = {
onActionClick: handleClose,
actionIcon: require('@tabler/icons/icons/x.svg'),
actionIcon: require('@tabler/icons/x.svg'),
actionAlignment: 'top',
actionTitle: intl.formatMessage(messages.cancel),
};

2
app/soapbox/components/scroll-top-button.tsx
View File

@ -84,7 +84,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
return (
<div className={classes}>
<a className='flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer whitespace-nowrap' onClick={handleClick}>
<Icon src={require('@tabler/icons/icons/arrow-bar-to-up.svg')} />
<Icon src={require('@tabler/icons/arrow-bar-to-up.svg')} />
{(count > 0) && (
<Text theme='inherit' size='sm'>

28
app/soapbox/components/sidebar-navigation.tsx
View File

@ -31,7 +31,7 @@ const SidebarNavigation = () => {
menu.push({
to: '/follow_requests',
text: <FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' />,
icon: require('@tabler/icons/icons/user-plus.svg'),
icon: require('@tabler/icons/user-plus.svg'),
count: followRequestsCount,
});
}
@ -40,7 +40,7 @@ const SidebarNavigation = () => {
menu.push({
to: '/bookmarks',
text: <FormattedMessage id='column.bookmarks' defaultMessage='Bookmarks' />,
icon: require('@tabler/icons/icons/bookmark.svg'),
icon: require('@tabler/icons/bookmark.svg'),
});
}
@ -48,14 +48,14 @@ const SidebarNavigation = () => {
menu.push({
to: '/lists',
text: <FormattedMessage id='column.lists' defaultMessage='Lists' />,
icon: require('@tabler/icons/icons/list.svg'),
icon: require('@tabler/icons/list.svg'),
});
}
if (settings.get('isDeveloper')) {
menu.push({
to: '/developers',
icon: require('@tabler/icons/icons/code.svg'),
icon: require('@tabler/icons/code.svg'),
text: <FormattedMessage id='navigation.developers' defaultMessage='Developers' />,
});
}
@ -63,7 +63,7 @@ const SidebarNavigation = () => {
if (account.staff) {
menu.push({
to: '/soapbox/admin',
icon: require('@tabler/icons/icons/dashboard.svg'),
icon: require('@tabler/icons/dashboard.svg'),
text: <FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />,
count: dashboardCount,
});
@ -77,7 +77,7 @@ const SidebarNavigation = () => {
if (features.publicTimeline) {
menu.push({
to: '/timeline/local',
icon: features.federating ? require('@tabler/icons/icons/users.svg') : require('@tabler/icons/icons/world.svg'),
icon: features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg'),
text: features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />,
});
}
@ -101,7 +101,7 @@ const SidebarNavigation = () => {
return (
<SidebarNavigationLink
to='/chats'
icon={require('@tabler/icons/icons/messages.svg')}
icon={require('@tabler/icons/messages.svg')}
count={chatsCount}
text={<FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />}
/>
@ -112,7 +112,7 @@ const SidebarNavigation = () => {
return (
<SidebarNavigationLink
to='/messages'
icon={require('@tabler/icons/icons/mail.svg')}
icon={require('@tabler/icons/mail.svg')}
text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
/>
);
@ -126,13 +126,13 @@ const SidebarNavigation = () => {
<div className='flex flex-col space-y-2'>
<SidebarNavigationLink
to='/'
icon={require('@tabler/icons/icons/home.svg')}
icon={require('@tabler/icons/home.svg')}
text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
/>
<SidebarNavigationLink
to='/search'
icon={require('@tabler/icons/icons/search.svg')}
icon={require('@tabler/icons/search.svg')}
text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />}
/>
@ -140,7 +140,7 @@ const SidebarNavigation = () => {
<>
<SidebarNavigationLink
to='/notifications'
icon={require('@tabler/icons/icons/bell.svg')}
icon={require('@tabler/icons/bell.svg')}
count={notificationCount}
text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
/>
@ -149,13 +149,13 @@ const SidebarNavigation = () => {
<SidebarNavigationLink
to={`/@${account.acct}`}
icon={require('@tabler/icons/icons/user.svg')}
icon={require('@tabler/icons/user.svg')}
text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
/>
<SidebarNavigationLink
to='/settings'
icon={require('@tabler/icons/icons/settings.svg')}
icon={require('@tabler/icons/settings.svg')}
text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
/>
</>
@ -164,7 +164,7 @@ const SidebarNavigation = () => {
{menu.length > 0 && (
<DropdownMenu items={menu}>
<SidebarNavigationLink
icon={require('@tabler/icons/icons/dots-circle-horizontal.svg')}
icon={require('@tabler/icons/dots-circle-horizontal.svg')}
count={dashboardCount}
text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
/>

32
app/soapbox/components/sidebar_menu.tsx
View File

@ -158,7 +158,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<IconButton
title='close'
onClick={handleClose}
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
ref={closeButtonRef}
className='text-gray-400 hover:text-gray-600'
/>
@ -177,7 +177,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
</Text>
<Icon
src={require('@tabler/icons/icons/chevron-down.svg')}
src={require('@tabler/icons/chevron-down.svg')}
className={classNames('text-black dark:text-white transition-transform', {
'rotate-180': switcher,
})}
@ -190,7 +190,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{otherAccounts.map(account => renderAccount(account))}
<NavLink className='flex py-2 space-x-1' to='/login/add' onClick={handleClose}>
<Icon className='dark:text-white' src={require('@tabler/icons/icons/plus.svg')} />
<Icon className='dark:text-white' src={require('@tabler/icons/plus.svg')} />
<Text>{intl.formatMessage(messages.addAccount)}</Text>
</NavLink>
</div>
@ -208,7 +208,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to={`/@${account.acct}`}
icon={require('@tabler/icons/icons/user.svg')}
icon={require('@tabler/icons/user.svg')}
text={intl.formatMessage(messages.profile)}
onClick={onClose}
/>
@ -216,7 +216,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.bookmarks && (
<SidebarLink
to='/bookmarks'
icon={require('@tabler/icons/icons/bookmark.svg')}
icon={require('@tabler/icons/bookmark.svg')}
text={intl.formatMessage(messages.bookmarks)}
onClick={onClose}
/>
@ -225,7 +225,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.lists && (
<SidebarLink
to='/lists'
icon={require('@tabler/icons/icons/list.svg')}
icon={require('@tabler/icons/list.svg')}
text={intl.formatMessage(messages.lists)}
onClick={onClose}
/>
@ -234,7 +234,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{settings.get('isDeveloper') && (
<SidebarLink
to='/developers'
icon={require('@tabler/icons/icons/code.svg')}
icon={require('@tabler/icons/code.svg')}
text={intl.formatMessage(messages.developers)}
onClick={onClose}
/>
@ -245,7 +245,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to='/timeline/local'
icon={features.federating ? require('@tabler/icons/icons/users.svg') : require('@tabler/icons/icons/world.svg')}
icon={features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg')}
text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
onClick={onClose}
/>
@ -264,21 +264,21 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to='/blocks'
icon={require('@tabler/icons/icons/ban.svg')}
icon={require('@tabler/icons/ban.svg')}
text={intl.formatMessage(messages.blocks)}
onClick={onClose}
/>
<SidebarLink
to='/mutes'
icon={require('@tabler/icons/icons/circle-x.svg')}
icon={require('@tabler/icons/circle-x.svg')}
text={intl.formatMessage(messages.mutes)}
onClick={onClose}
/>
<SidebarLink
to='/settings/preferences'
icon={require('@tabler/icons/icons/settings.svg')}
icon={require('@tabler/icons/settings.svg')}
text={intl.formatMessage(messages.preferences)}
onClick={onClose}
/>
@ -286,7 +286,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.federating && (
<SidebarLink
to='/domain_blocks'
icon={require('@tabler/icons/icons/ban.svg')}
icon={require('@tabler/icons/ban.svg')}
text={intl.formatMessage(messages.domainBlocks)}
onClick={onClose}
/>
@ -295,7 +295,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.filters && (
<SidebarLink
to='/filters'
icon={require('@tabler/icons/icons/filter.svg')}
icon={require('@tabler/icons/filter.svg')}
text={intl.formatMessage(messages.filters)}
onClick={onClose}
/>
@ -304,7 +304,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{account.admin && (
<SidebarLink
to='/soapbox/config'
icon={require('@tabler/icons/icons/settings.svg')}
icon={require('@tabler/icons/settings.svg')}
text={intl.formatMessage(messages.soapboxConfig)}
onClick={onClose}
/>
@ -313,7 +313,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{features.import && (
<SidebarLink
to='/settings/import'
icon={require('@tabler/icons/icons/cloud-upload.svg')}
icon={require('@tabler/icons/cloud-upload.svg')}
text={intl.formatMessage(messages.importData)}
onClick={onClose}
/>
@ -323,7 +323,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<SidebarLink
to='/logout'
icon={require('@tabler/icons/icons/logout.svg')}
icon={require('@tabler/icons/logout.svg')}
text={intl.formatMessage(messages.logout)}
onClick={onClickLogOut}
/>

38
app/soapbox/components/status-action-button.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'classnames';
import React from 'react';
import { Text, Icon } from 'soapbox/components/ui';
import { Text, Icon, Emoji } from 'soapbox/components/ui';
import { shortNumberFormat } from 'soapbox/utils/numbers';
const COLORS = {
@ -15,7 +15,7 @@ interface IStatusActionCounter {
count: number,
}
/** Action button numerical counter, eg "5" likes */
/** Action button numerical counter, eg "5" likes. */
const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
return (
<Text size='xs' weight='semibold' theme='inherit'>
@ -31,10 +31,11 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
active?: boolean,
color?: Color,
filled?: boolean,
emoji?: string,
}
const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
const { icon, className, iconClassName, active, color, filled = false, count = 0, ...filteredProps } = props;
const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, ...filteredProps } = props;
return (
<button
@ -46,22 +47,29 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
'bg-white dark:bg-transparent',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
{
'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && color === COLORS.accent,
'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && color === COLORS.success,
'text-black dark:text-white': active && emoji,
'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
},
className,
)}
{...filteredProps}
>
<Icon
src={icon}
className={classNames(
{
'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
},
iconClassName,
)}
/>
{emoji ? (
<span className='block w-6 h-6 flex items-center justify-center'>
<Emoji className='w-full h-full p-0.5' emoji={emoji} />
</span>
) : (
<Icon
src={icon}
className={classNames(
{
'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
},
iconClassName,
)}
/>
)}
{(count || null) && (
<StatusActionCounter count={count} />

8
app/soapbox/components/status.tsx
View File

@ -84,8 +84,6 @@ interface IStatus extends RouteComponentProps {
onMoveDown: (statusId: string, featured?: boolean) => void,
getScrollPosition?: () => ScrollPosition | undefined,
updateScrollBottom?: (bottom: number) => void,
cacheMediaWidth: () => void,
cachedMediaWidth: number,
group: ImmutableMap<string, any>,
displayMedia: string,
allowedEmoji: ImmutableList<string>,
@ -346,7 +344,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
prepend = (
<div className='pt-4 px-4'>
<HStack alignItems='center' space={1}>
<Icon src={require('@tabler/icons/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
<Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
<Text size='sm' theme='muted' weight='medium'>
<FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
@ -365,7 +363,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
onClick={(event) => event.stopPropagation()}
className='hidden sm:flex items-center text-gray-500 text-xs font-medium space-x-1 hover:underline'
>
<Icon src={require('@tabler/icons/icons/repeat.svg')} className='text-green-600' />
<Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
<HStack alignItems='center'>
<FormattedMessage
@ -388,7 +386,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
onClick={(event) => event.stopPropagation()}
className='flex items-center text-gray-500 text-xs font-medium space-x-1 hover:underline'
>
<Icon src={require('@tabler/icons/icons/repeat.svg')} className='text-green-600' />
<Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
<span>
<FormattedMessage

69
app/soapbox/components/status_action_bar.tsx
View File

@ -377,21 +377,21 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(messages.open),
action: this.handleOpen,
icon: require('@tabler/icons/icons/arrows-vertical.svg'),
icon: require('@tabler/icons/arrows-vertical.svg'),
});
if (publicStatus) {
menu.push({
text: intl.formatMessage(messages.copy),
action: this.handleCopy,
icon: require('@tabler/icons/icons/link.svg'),
icon: require('@tabler/icons/link.svg'),
});
if (features.embeds) {
menu.push({
text: intl.formatMessage(messages.embed),
action: this.handleEmbed,
icon: require('@tabler/icons/icons/share.svg'),
icon: require('@tabler/icons/share.svg'),
});
}
}
@ -404,7 +404,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
action: this.handleBookmarkClick,
icon: require(status.bookmarked ? '@tabler/icons/icons/bookmark-off.svg' : '@tabler/icons/icons/bookmark.svg'),
icon: status.bookmarked ? require('@tabler/icons/bookmark-off.svg') : require('@tabler/icons/bookmark.svg'),
});
}
@ -414,7 +414,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
action: this.handleConversationMuteClick,
icon: require(mutingConversation ? '@tabler/icons/icons/bell.svg' : '@tabler/icons/icons/bell-off.svg'),
icon: mutingConversation ? require('@tabler/icons/bell.svg') : require('@tabler/icons/bell-off.svg'),
});
menu.push(null);
}
@ -424,14 +424,14 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
action: this.handlePinClick,
icon: require(mutingConversation ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
icon: mutingConversation ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'),
});
} else {
if (status.visibility === 'private') {
menu.push({
text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
action: this.handleReblogClick,
icon: require('@tabler/icons/icons/repeat.svg'),
icon: require('@tabler/icons/repeat.svg'),
});
}
}
@ -439,20 +439,20 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(messages.delete),
action: this.handleDeleteClick,
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
destructive: true,
});
if (features.editStatuses) {
menu.push({
text: intl.formatMessage(messages.edit),
action: this.handleEditClick,
icon: require('@tabler/icons/icons/edit.svg'),
icon: require('@tabler/icons/edit.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.redraft),
action: this.handleRedraftClick,
icon: require('@tabler/icons/icons/edit.svg'),
icon: require('@tabler/icons/edit.svg'),
destructive: true,
});
}
@ -460,20 +460,20 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(messages.mention, { name: username }),
action: this.handleMentionClick,
icon: require('@tabler/icons/icons/at.svg'),
icon: require('@tabler/icons/at.svg'),
});
// if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
// menu.push({
// text: intl.formatMessage(messages.chat, { name: username }),
// action: this.handleChatClick,
// icon: require('@tabler/icons/icons/messages.svg'),
// icon: require('@tabler/icons/messages.svg'),
// });
// } else {
// menu.push({
// text: intl.formatMessage(messages.direct, { name: username }),
// action: this.handleDirectClick,
// icon: require('@tabler/icons/icons/mail.svg'),
// icon: require('@tabler/icons/mail.svg'),
// });
// }
@ -481,17 +481,17 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(messages.mute, { name: username }),
action: this.handleMuteClick,
icon: require('@tabler/icons/icons/circle-x.svg'),
icon: require('@tabler/icons/circle-x.svg'),
});
menu.push({
text: intl.formatMessage(messages.block, { name: username }),
action: this.handleBlockClick,
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
menu.push({
text: intl.formatMessage(messages.report, { name: username }),
action: this.handleReport,
icon: require('@tabler/icons/icons/flag.svg'),
icon: require('@tabler/icons/flag.svg'),
});
}
@ -502,13 +502,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(messages.admin_account, { name: username }),
href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
icon: require('@tabler/icons/icons/gavel.svg'),
icon: require('@tabler/icons/gavel.svg'),
action: (event) => event.stopPropagation(),
});
menu.push({
text: intl.formatMessage(messages.admin_status),
href: `/pleroma/admin/#/statuses/${status.id}/`,
icon: require('@tabler/icons/icons/pencil.svg'),
icon: require('@tabler/icons/pencil.svg'),
action: (event) => event.stopPropagation(),
});
}
@ -516,25 +516,25 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
menu.push({
text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
action: this.handleToggleStatusSensitivity,
icon: require('@tabler/icons/icons/alert-triangle.svg'),
icon: require('@tabler/icons/alert-triangle.svg'),
});
if (!ownAccount) {
menu.push({
text: intl.formatMessage(messages.deactivateUser, { name: username }),
action: this.handleDeactivateUser,
icon: require('@tabler/icons/icons/user-off.svg'),
icon: require('@tabler/icons/user-off.svg'),
});
menu.push({
text: intl.formatMessage(messages.deleteUser, { name: username }),
action: this.handleDeleteUser,
icon: require('@tabler/icons/icons/user-minus.svg'),
icon: require('@tabler/icons/user-minus.svg'),
destructive: true,
});
menu.push({
text: intl.formatMessage(messages.deleteStatus),
action: this.handleDeleteStatus,
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
destructive: true,
});
}
@ -545,13 +545,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
// menu.push({
// text: intl.formatMessage(messages.group_remove_account),
// action: this.handleGroupRemoveAccount,
// icon: require('@tabler/icons/icons/user-x.svg'),
// icon: require('@tabler/icons/user-x.svg'),
// destructive: true,
// });
// menu.push({
// text: intl.formatMessage(messages.group_remove_post),
// action: this.handleGroupRemovePost,
// icon: require('@tabler/icons/icons/trash.svg'),
// icon: require('@tabler/icons/trash.svg'),
// destructive: true,
// });
// }
@ -601,23 +601,23 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiReact || ''] || messages.favourite);
const menu = this._makeMenu(publicStatus);
let reblogIcon = require('@tabler/icons/icons/repeat.svg');
let reblogIcon = require('@tabler/icons/repeat.svg');
let replyTitle;
if (status.visibility === 'direct') {
reblogIcon = require('@tabler/icons/icons/mail.svg');
reblogIcon = require('@tabler/icons/mail.svg');
} else if (status.visibility === 'private') {
reblogIcon = require('@tabler/icons/icons/lock.svg');
reblogIcon = require('@tabler/icons/lock.svg');
}
const reblogMenu = [{
text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
action: this.handleReblogClick,
icon: require('@tabler/icons/icons/repeat.svg'),
icon: require('@tabler/icons/repeat.svg'),
}, {
text: intl.formatMessage(messages.quotePost),
action: this.handleQuoteClick,
icon: require('@tabler/icons/icons/quote.svg'),
icon: require('@tabler/icons/quote.svg'),
}];
const reblogButton = (
@ -644,7 +644,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
<div className='pt-4 flex flex-row space-x-2'>
<StatusActionButton
title={replyTitle}
icon={require('@tabler/icons/icons/message-circle-2.svg')}
icon={require('@tabler/icons/message-circle-2.svg')}
onClick={this.handleReplyClick}
count={replyCount}
/>
@ -665,17 +665,18 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
<EmojiButtonWrapper statusId={status.id}>
<StatusActionButton
title={meEmojiTitle}
icon={require('@tabler/icons/icons/heart.svg')}
icon={require('@tabler/icons/heart.svg')}
filled
color='accent'
active={Boolean(meEmojiReact)}
count={emojiReactCount}
emoji={meEmojiReact}
/>
</EmojiButtonWrapper>
) : (
<StatusActionButton
title={intl.formatMessage(messages.favourite)}
icon={require('@tabler/icons/icons/heart.svg')}
icon={require('@tabler/icons/heart.svg')}
color='accent'
filled
onClick={this.handleFavouriteClick}
@ -687,7 +688,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
{canShare && (
<StatusActionButton
title={intl.formatMessage(messages.share)}
icon={require('@tabler/icons/icons/upload.svg')}
icon={require('@tabler/icons/upload.svg')}
onClick={this.handleShareClick}
/>
)}
@ -695,7 +696,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
<DropdownMenuContainer items={menu} status={status}>
<StatusActionButton
title={intl.formatMessage(messages.more)}
icon={require('@tabler/icons/icons/dots.svg')}
icon={require('@tabler/icons/dots.svg')}
/>
</DropdownMenuContainer>
</div>

12
app/soapbox/components/thumb_navigation.tsx
View File

@ -17,7 +17,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
if (features.chats) {
return (
<ThumbNavigationLink
src={require('@tabler/icons/icons/messages.svg')}
src={require('@tabler/icons/messages.svg')}
text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
to='/chats'
exact
@ -29,7 +29,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
if (features.directTimeline || features.conversations) {
return (
<ThumbNavigationLink
src={require('@tabler/icons/icons/mail.svg')}
src={require('@tabler/icons/mail.svg')}
text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
to='/messages'
paths={['/messages', '/conversations']}
@ -43,14 +43,14 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
return (
<div className='thumb-navigation'>
<ThumbNavigationLink
src={require('@tabler/icons/icons/home.svg')}
src={require('@tabler/icons/home.svg')}
text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
to='/'
exact
/>
<ThumbNavigationLink
src={require('@tabler/icons/icons/search.svg')}
src={require('@tabler/icons/search.svg')}
text={<FormattedMessage id='navigation.search' defaultMessage='Search' />}
to='/search'
exact
@ -58,7 +58,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
{account && (
<ThumbNavigationLink
src={require('@tabler/icons/icons/bell.svg')}
src={require('@tabler/icons/bell.svg')}
text={<FormattedMessage id='navigation.notifications' defaultMessage='Alerts' />}
to='/notifications'
exact
@ -70,7 +70,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
{(account && account.staff) && (
<ThumbNavigationLink
src={require('@tabler/icons/icons/dashboard.svg')}
src={require('@tabler/icons/dashboard.svg')}
text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
to='/soapbox/admin'
count={dashboardCount}

2
app/soapbox/components/ui/card/card.tsx
View File

@ -64,7 +64,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
return (
<Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
<SvgIcon src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
<SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6' />
<span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
</Comp>
);

2
app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx
View File

@ -30,7 +30,7 @@ describe('<Datepicker />', () => {
);
let daySelect: HTMLElement;
daySelect = document.querySelector('[data-testid="datepicker-day"]');
daySelect = document.querySelector('[data-testid="datepicker-day"]') as HTMLElement;
expect(queryAllByRole(daySelect, 'option')).toHaveLength(29);
await userEvent.selectOptions(

1
app/soapbox/components/ui/icon-button/icon-button.tsx
View File

@ -25,6 +25,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
type='button'
className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
'bg-white dark:bg-transparent': !transparent,
'opacity-50': filteredProps.disabled,
}, className)}
{...filteredProps}
data-testid='icon-button'

2
app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx
View File

@ -5,7 +5,7 @@ import SvgIcon from '../svg-icon';
describe('<SvgIcon />', () => {
it('renders loading element with default size', () => {
render(<SvgIcon className='text-primary-500' src={require('@tabler/icons/icons/code.svg')} />);
render(<SvgIcon className='text-primary-500' src={require('@tabler/icons/code.svg')} />);
const svg = screen.getByTestId('svg-icon-loader');
expect(svg.getAttribute('width')).toBe('24');

2
app/soapbox/components/ui/input/input.tsx
View File

@ -88,7 +88,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
className='text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 h-full px-2 focus:ring-primary-500 focus:ring-2'
>
<SvgIcon
src={revealed ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
className='h-4 w-4'
/>
</button>

2
app/soapbox/components/ui/modal/modal.tsx
View File

@ -59,7 +59,7 @@ const Modal: React.FC<IModal> = ({
cancelAction,
cancelText,
children,
closeIcon = require('@tabler/icons/icons/x.svg'),
closeIcon = require('@tabler/icons/x.svg'),
closePosition = 'right',
confirmationAction,
confirmationDisabled,

4
app/soapbox/components/ui/streamfield/streamfield.tsx
View File

@ -74,7 +74,7 @@ const Streamfield: React.FC<IStreamfield> = ({
<IconButton
iconClassName='w-4 h-4'
className='bg-transparent text-gray-400 hover:text-gray-600'
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
onClick={() => onRemoveItem(i)}
title={intl.formatMessage(messages.remove)}
/>
@ -86,7 +86,7 @@ const Streamfield: React.FC<IStreamfield> = ({
{onAddItem && (
<Button
icon={require('@tabler/icons/icons/plus.svg')}
icon={require('@tabler/icons/plus.svg')}
onClick={onAddItem}
disabled={values.length >= maxItems}
theme='ghost'

4
app/soapbox/components/ui/tooltip/tooltip.css
View File

@ -6,3 +6,7 @@
@apply pointer-events-none absolute px-2.5 py-1.5 rounded shadow whitespace-nowrap text-xs font-medium bg-gray-800 text-white;
z-index: 100;
}
[data-reach-tooltip-arrow] {
@apply absolute z-50 w-0 h-0 border-l-8 border-solid border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800;
}

49
app/soapbox/components/ui/tooltip/tooltip.tsx
View File

@ -1,4 +1,5 @@
import { default as ReachTooltip } from '@reach/tooltip';
import Portal from '@reach/portal';
import { TooltipPopup, useTooltip } from '@reach/tooltip';
import React from 'react';
import './tooltip.css';
@ -8,15 +9,55 @@ interface ITooltip {
text: string,
}
const centered = (triggerRect: any, tooltipRect: any) => {
const triggerCenter = triggerRect.left + triggerRect.width / 2;
const left = triggerCenter - tooltipRect.width / 2;
const maxLeft = window.innerWidth - tooltipRect.width - 2;
return {
left: Math.min(Math.max(2, left), maxLeft) + window.scrollX,
top: triggerRect.bottom + 8 + window.scrollY,
};
};
/** Hoverable tooltip element. */
const Tooltip: React.FC<ITooltip> = ({
children,
text,
}) => {
// get the props from useTooltip
const [trigger, tooltip] = useTooltip();
// destructure off what we need to position the triangle
const { isVisible, triggerRect } = tooltip;
return (
<ReachTooltip label={text}>
{children}
</ReachTooltip>
<React.Fragment>
{React.cloneElement(children as any, trigger)}
{isVisible && (
// The Triangle. We position it relative to the trigger, not the popup
// so that collisions don't have a triangle pointing off to nowhere.
// Using a Portal may seem a little extreme, but we can keep the
// positioning logic simpler here instead of needing to consider
// the popup's position relative to the trigger and collisions
<Portal>
<div
data-reach-tooltip-arrow='true'
style={{
left:
triggerRect && triggerRect.left - 10 + triggerRect.width / 2 as any,
top: triggerRect && triggerRect.bottom + window.scrollY as any,
}}
/>
</Portal>
)}
<TooltipPopup
{...tooltip}
label={text}
aria-label={text}
position={centered}
/>
</React.Fragment>
);
};

2
app/soapbox/components/ui/widget/widget.tsx
View File

@ -36,7 +36,7 @@ const Widget: React.FC<IWidget> = ({
title,
children,
onActionClick,
actionIcon = require('@tabler/icons/icons/arrow-right.svg'),
actionIcon = require('@tabler/icons/arrow-right.svg'),
actionTitle,
action,
}): JSX.Element => {

2
app/soapbox/components/upload-progress.tsx
View File

@ -15,7 +15,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
return (
<HStack alignItems='center' space={2}>
<Icon
src={require('@tabler/icons/icons/cloud-upload.svg')}
src={require('@tabler/icons/cloud-upload.svg')}
className='w-7 h-7 text-gray-500'
/>

2
app/soapbox/components/validation-checkmark.tsx
View File

@ -12,7 +12,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
return (
<HStack alignItems='center' space={2} data-testid='validation-checkmark'>
<Icon
src={isValid ? require('@tabler/icons/icons/check.svg') : require('@tabler/icons/icons/point.svg')}
src={isValid ? require('@tabler/icons/check.svg') : require('@tabler/icons/point.svg')}
className={classNames({
'w-4 h-4': true,
'text-gray-400 fill-gray-400': !isValid,

2
app/soapbox/containers/account_container.js
View File

@ -38,7 +38,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
if (account.relationship?.following || account.relationship?.requested) {
if (unfollowModal) {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/minus.svg'),
icon: require('@tabler/icons/minus.svg'),
heading: <FormattedMessage id='confirmations.unfollow.heading' defaultMessage='Unfollow {name}' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.unfollowConfirm),

4
app/soapbox/containers/status_container.js
View File

@ -163,7 +163,7 @@ const mapDispatchToProps = (dispatch, { intl }) => {
dispatch(deleteStatus(status.get('id'), withRedraft));
} else {
dispatch(openModal('CONFIRM', {
icon: withRedraft ? require('@tabler/icons/icons/edit.svg') : require('@tabler/icons/icons/trash.svg'),
icon: withRedraft ? require('@tabler/icons/edit.svg') : require('@tabler/icons/trash.svg'),
heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
@ -204,7 +204,7 @@ const mapDispatchToProps = (dispatch, { intl }) => {
onBlock(status) {
const account = status.get('account');
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm),

82
app/soapbox/features/account/components/header.js
View File

@ -175,7 +175,7 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.share, { name: account.get('username') }),
action: this.handleShare,
icon: require('@tabler/icons/icons/upload.svg'),
icon: require('@tabler/icons/upload.svg'),
});
menu.push(null);
}
@ -184,53 +184,53 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.edit_profile),
to: '/settings/profile',
icon: require('@tabler/icons/icons/user.svg'),
icon: require('@tabler/icons/user.svg'),
});
menu.push({
text: intl.formatMessage(messages.preferences),
to: '/settings',
icon: require('@tabler/icons/icons/settings.svg'),
icon: require('@tabler/icons/settings.svg'),
});
// menu.push(null);
// menu.push({
// text: intl.formatMessage(messages.follow_requests),
// to: '/follow_requests',
// icon: require('@tabler/icons/icons/user-plus.svg'),
// icon: require('@tabler/icons/user-plus.svg'),
// });
menu.push(null);
menu.push({
text: intl.formatMessage(messages.mutes),
to: '/mutes',
icon: require('@tabler/icons/icons/circle-x.svg'),
icon: require('@tabler/icons/circle-x.svg'),
});
menu.push({
text: intl.formatMessage(messages.blocks),
to: '/blocks',
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
// menu.push({
// text: intl.formatMessage(messages.domain_blocks),
// to: '/domain_blocks',
// icon: require('@tabler/icons/icons/ban.svg'),
// icon: require('@tabler/icons/ban.svg'),
// });
} else {
menu.push({
text: intl.formatMessage(messages.mention, { name: account.get('username') }),
action: this.props.onMention,
icon: require('@tabler/icons/icons/at.svg'),
icon: require('@tabler/icons/at.svg'),
});
// if (account.getIn(['pleroma', 'accepts_chat_messages'], false) === true) {
// menu.push({
// text: intl.formatMessage(messages.chat, { name: account.get('username') }),
// action: this.props.onChat,
// icon: require('@tabler/icons/icons/messages.svg'),
// icon: require('@tabler/icons/messages.svg'),
// });
// } else {
// menu.push({
// text: intl.formatMessage(messages.direct, { name: account.get('username') }),
// action: this.props.onDirect,
// icon: require('@tabler/icons/icons/mail.svg'),
// icon: require('@tabler/icons/mail.svg'),
// });
// }
@ -239,13 +239,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }),
action: this.props.onReblogToggle,
icon: require('@tabler/icons/icons/repeat.svg'),
icon: require('@tabler/icons/repeat.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.showReblogs, { name: account.get('username') }),
action: this.props.onReblogToggle,
icon: require('@tabler/icons/icons/repeat.svg'),
icon: require('@tabler/icons/repeat.svg'),
});
}
@ -253,7 +253,7 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.add_or_remove_from_list),
action: this.props.onAddToList,
icon: require('@tabler/icons/icons/list.svg'),
icon: require('@tabler/icons/list.svg'),
});
}
@ -263,7 +263,7 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.add_or_remove_from_list),
action: this.props.onAddToList,
icon: require('@tabler/icons/icons/list.svg'),
icon: require('@tabler/icons/list.svg'),
});
}
@ -271,7 +271,7 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.removeFromFollowers),
action: this.props.onRemoveFromFollowers,
icon: require('@tabler/icons/icons/user-x.svg'),
icon: require('@tabler/icons/user-x.svg'),
});
}
@ -279,13 +279,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.unmute, { name: account.get('username') }),
action: this.props.onMute,
icon: require('@tabler/icons/icons/circle-x.svg'),
icon: require('@tabler/icons/circle-x.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.mute, { name: account.get('username') }),
action: this.props.onMute,
icon: require('@tabler/icons/icons/circle-x.svg'),
icon: require('@tabler/icons/circle-x.svg'),
});
}
@ -293,20 +293,20 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.unblock, { name: account.get('username') }),
action: this.props.onBlock,
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.block, { name: account.get('username') }),
action: this.props.onBlock,
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
}
menu.push({
text: intl.formatMessage(messages.report, { name: account.get('username') }),
action: this.props.onReport,
icon: require('@tabler/icons/icons/flag.svg'),
icon: require('@tabler/icons/flag.svg'),
});
}
@ -319,13 +319,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.unblockDomain, { domain }),
action: this.props.onUnblockDomain,
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.blockDomain, { domain }),
action: this.props.onBlockDomain,
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
});
}
}
@ -338,7 +338,7 @@ class Header extends ImmutablePureComponent {
text: intl.formatMessage(messages.admin_account, { name: account.get('username') }),
to: `/pleroma/admin/#/users/${account.id}/`,
newTab: true,
icon: require('@tabler/icons/icons/gavel.svg'),
icon: require('@tabler/icons/gavel.svg'),
});
}
@ -347,34 +347,34 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.demoteToModerator, { name: account.get('username') }),
action: this.props.onPromoteToModerator,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
icon: require('@tabler/icons/arrow-up-circle.svg'),
});
menu.push({
text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }),
action: this.props.onDemoteToUser,
icon: require('@tabler/icons/icons/arrow-down-circle.svg'),
icon: require('@tabler/icons/arrow-down-circle.svg'),
});
} else if (account.moderator) {
menu.push({
text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }),
action: this.props.onPromoteToAdmin,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
icon: require('@tabler/icons/arrow-up-circle.svg'),
});
menu.push({
text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }),
action: this.props.onDemoteToUser,
icon: require('@tabler/icons/icons/arrow-down-circle.svg'),
icon: require('@tabler/icons/arrow-down-circle.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }),
action: this.props.onPromoteToAdmin,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
icon: require('@tabler/icons/arrow-up-circle.svg'),
});
menu.push({
text: intl.formatMessage(messages.promoteToModerator, { name: account.get('username') }),
action: this.props.onPromoteToModerator,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
icon: require('@tabler/icons/arrow-up-circle.svg'),
});
}
}
@ -383,13 +383,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.unverifyUser, { name: account.username }),
action: this.props.onUnverifyUser,
icon: require('@tabler/icons/icons/check.svg'),
icon: require('@tabler/icons/check.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.verifyUser, { name: account.username }),
action: this.props.onVerifyUser,
icon: require('@tabler/icons/icons/check.svg'),
icon: require('@tabler/icons/check.svg'),
});
}
@ -397,13 +397,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.removeDonor, { name: account.username }),
action: this.props.onRemoveDonor,
icon: require('@tabler/icons/icons/coin.svg'),
icon: require('@tabler/icons/coin.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.setDonor, { name: account.username }),
action: this.props.onSetDonor,
icon: require('@tabler/icons/icons/coin.svg'),
icon: require('@tabler/icons/coin.svg'),
});
}
@ -412,13 +412,13 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.unsuggestUser, { name: account.get('username') }),
action: this.props.onUnsuggestUser,
icon: require('@tabler/icons/icons/user-x.svg'),
icon: require('@tabler/icons/user-x.svg'),
});
} else {
menu.push({
text: intl.formatMessage(messages.suggestUser, { name: account.get('username') }),
action: this.props.onSuggestUser,
icon: require('@tabler/icons/icons/user-check.svg'),
icon: require('@tabler/icons/user-check.svg'),
});
}
}
@ -427,11 +427,11 @@ class Header extends ImmutablePureComponent {
menu.push({
text: intl.formatMessage(messages.deactivateUser, { name: account.get('username') }),
action: this.props.onDeactivateUser,
icon: require('@tabler/icons/icons/user-off.svg'),
icon: require('@tabler/icons/user-off.svg'),
});
menu.push({
text: intl.formatMessage(messages.deleteUser, { name: account.get('username') }),
icon: require('@tabler/icons/icons/user-minus.svg'),
icon: require('@tabler/icons/user-minus.svg'),
});
}
}
@ -497,7 +497,7 @@ class Header extends ImmutablePureComponent {
if (canChat) {
return (
<IconButton
src={require('@tabler/icons/icons/messages.svg')}
src={require('@tabler/icons/messages.svg')}
onClick={this.props.onChat}
title={intl.formatMessage(messages.chat, { name: account.get('username') })}
/>
@ -505,7 +505,7 @@ class Header extends ImmutablePureComponent {
} else {
return (
<IconButton
src={require('@tabler/icons/icons/mail.svg')}
src={require('@tabler/icons/mail.svg')}
onClick={this.props.onDirect}
title={intl.formatMessage(messages.direct, { name: account.get('username') })}
className='text-primary-700 bg-primary-100 hover:bg-primary-200 p-2'
@ -525,7 +525,7 @@ class Header extends ImmutablePureComponent {
return (
<IconButton
src={require('@tabler/icons/icons/upload.svg')}
src={require('@tabler/icons/upload.svg')}
onClick={this.handleShare}
title={intl.formatMessage(messages.share, { name: account.get('username') })}
className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
@ -602,7 +602,7 @@ class Header extends ImmutablePureComponent {
<Menu>
<MenuButton
as={IconButton}
src={require('@tabler/icons/icons/dots.svg')}
src={require('@tabler/icons/dots.svg')}
className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
iconClassName='w-5 h-5'
/>

2
app/soapbox/features/account_timeline/components/column_settings.js
View File

@ -31,7 +31,7 @@ class ColumnSettings extends React.PureComponent {
<FormattedMessage id='account.column_settings.title' defaultMessage='Account timeline settings' />
</h1>
<div className='column-settings__close'>
<IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
<IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
</div>
</div>

4
app/soapbox/features/account_timeline/containers/header_container.js
View File

@ -96,7 +96,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch(unblockAccount(account.get('id')));
} else {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm),
@ -164,7 +164,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onBlockDomain(domain) {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/ban.svg'),
icon: require('@tabler/icons/ban.svg'),
heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications.' values={{ domain: <strong>{domain}</strong> }} />,
confirm: intl.formatMessage(messages.blockDomainConfirm),

6
app/soapbox/features/admin/components/report.tsx
View File

@ -40,11 +40,11 @@ const Report: React.FC<IReport> = ({ report }) => {
return [{
text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username as string }),
action: handleDeactivateUser,
icon: require('@tabler/icons/icons/user-off.svg'),
icon: require('@tabler/icons/user-off.svg'),
}, {
text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username as string }),
action: handleDeleteUser,
icon: require('@tabler/icons/icons/user-minus.svg'),
icon: require('@tabler/icons/user-minus.svg'),
}];
};
@ -124,7 +124,7 @@ const Report: React.FC<IReport> = ({ report }) => {
<FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
</Button>
<DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
<DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
</HStack>
</div>
);

6
app/soapbox/features/admin/components/report_status.tsx
View File

@ -40,11 +40,11 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
return [{
text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }),
to: `/@${acct}/posts/${status.id}`,
icon: require('@tabler/icons/icons/pencil.svg'),
icon: require('@tabler/icons/pencil.svg'),
}, {
text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }),
action: handleDeleteStatus,
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
destructive: true,
}];
};
@ -123,7 +123,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
<div className='admin-report__status-actions'>
<DropdownMenu
items={menu}
src={require('@tabler/icons/icons/dots-vertical.svg')}
src={require('@tabler/icons/dots-vertical.svg')}
/>
</div>
</div>

4
app/soapbox/features/admin/components/unapproved_account.tsx
View File

@ -52,8 +52,8 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
<blockquote className='md'>{adminAccount?.invite_request || ''}</blockquote>
</div>
<div className='unapproved-account__actions'>
<IconButton src={require('@tabler/icons/icons/check.svg')} onClick={handleApprove} />
<IconButton src={require('@tabler/icons/icons/x.svg')} onClick={handleReject} />
<IconButton src={require('@tabler/icons/check.svg')} onClick={handleApprove} />
<IconButton src={require('@tabler/icons/x.svg')} onClick={handleReject} />
</div>
</div>
);

2
app/soapbox/features/aliases/components/account.tsx
View File

@ -48,7 +48,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
if (!added && accountId !== me) {
button = (
<div className='account__relationship'>
<IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
<IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
</div>
);
}

2
app/soapbox/features/aliases/components/search.tsx
View File

@ -54,7 +54,7 @@ const Search: React.FC = () => {
/>
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
<Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
<Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
</div>
</label>
<Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>

6
app/soapbox/features/audio/index.js
View File

@ -491,8 +491,8 @@ class Audio extends React.PureComponent {
<div className='video-player__controls active'>
<div className='video-player__buttons-bar'>
<div className='video-player__buttons left'>
<button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon src={paused ? require('@tabler/icons/icons/player-play.svg') : require('@tabler/icons/icons/player-pause.svg')} /></button>
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/icons/volume-3.svg') : require('@tabler/icons/icons/volume.svg')} /></button>
<button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')} /></button>
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')} /></button>
<div className={classNames('video-player__volume', { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
<div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: this._getAccentColor() }} />
@ -522,7 +522,7 @@ class Audio extends React.PureComponent {
download
target='_blank'
>
<Icon src={require('@tabler/icons/icons/download.svg')} />
<Icon src={require('@tabler/icons/download.svg')} />
</a>
</div>
</div>

2
app/soapbox/features/auth_layout/index.tsx
View File

@ -54,7 +54,7 @@ const AuthLayout = () => {
<div className='relative z-10 ml-auto flex items-center'>
<Button
theme='link'
icon={require('@tabler/icons/icons/user.svg')}
icon={require('@tabler/icons/user.svg')}
to='/signup'
>
{intl.formatMessage(messages.register)}

6
app/soapbox/features/auth_login/components/__tests__/captcha.test.tsx
View File

@ -6,7 +6,7 @@ import CaptchaField, { NativeCaptchaField } from '../captcha';
describe('<CaptchaField />', () => {
it('renders null by default', () => {
render(<CaptchaField />);
render(<CaptchaField idempotencyKey='' value='' />);
expect(screen.queryAllByRole('textbox')).toHaveLength(0);
});
@ -24,7 +24,9 @@ describe('<NativeCaptchaField />', () => {
render(
<NativeCaptchaField
captcha={captcha}
onChange={() => {}} // eslint-disable-line react/jsx-no-bind
onChange={() => {}}
onClick={() => {}}
value=''
/>,
);

4
app/soapbox/features/auth_login/components/__tests__/login_form.test.tsx
View File

@ -13,7 +13,7 @@ describe('<LoginForm />', () => {
}),
};
render(<LoginForm handleSubmit={mockFn} isLoading={false} />, null, store);
render(<LoginForm handleSubmit={mockFn} isLoading={false} />, undefined, store);
expect(screen.getByRole('heading')).toHaveTextContent(/sign in/i);
});
@ -26,7 +26,7 @@ describe('<LoginForm />', () => {
}),
};
render(<LoginForm handleSubmit={mockFn} isLoading={false} />, null, store);
render(<LoginForm handleSubmit={mockFn} isLoading={false} />, undefined, store);
expect(screen.getByRole('heading')).toHaveTextContent(/sign in/i);
});

2
app/soapbox/features/auth_login/components/__tests__/login_page.test.tsx
View File

@ -12,7 +12,7 @@ describe('<LoginPage />', () => {
}),
};
render(<LoginPage />, null, store);
render(<LoginPage />, undefined, store);
expect(screen.getByRole('heading')).toHaveTextContent('Sign In');
});

2
app/soapbox/features/auth_login/components/registration_form.tsx
View File

@ -130,7 +130,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
</>);
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/icons/check.svg'),
icon: require('@tabler/icons/check.svg'),
heading: needsConfirmation
? intl.formatMessage(messages.needsConfirmationHeader)
: needsApproval

2
app/soapbox/features/backups/index.tsx
View File

@ -33,7 +33,7 @@ const Backups = () => {
return [{
text: intl.formatMessage(messages.create),
action: handleCreateBackup,
icon: require('@tabler/icons/icons/plus.svg'),
icon: require('@tabler/icons/plus.svg'),
}];
};

2
app/soapbox/features/birthdays/account.tsx
View File

@ -51,7 +51,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
date: formattedBirthday,
})}
>
<Icon src={require('@tabler/icons/icons/ballon.svg')} />
<Icon src={require('@tabler/icons/ballon.svg')} />
{formattedBirthday}
</div>
</div>

4
app/soapbox/features/chats/components/chat-box.tsx
View File

@ -144,7 +144,7 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
</div>
<div className='chat-box__remove-attachment'>
<IconButton
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
onClick={handleRemoveFile}
/>
</div>
@ -155,7 +155,7 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
const renderActionButton = () => {
return canSubmit() ? (
<IconButton
src={require('@tabler/icons/icons/send.svg')}
src={require('@tabler/icons/send.svg')}
title={intl.formatMessage(messages.send)}
onClick={sendMessage}
/>

6
app/soapbox/features/chats/components/chat-message-list.tsx
View File

@ -219,7 +219,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
{
text: intl.formatMessage(messages.delete),
action: handleDeleteMessage(chatMessage.chat_id, chatMessage.id),
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
destructive: true,
},
];
@ -228,7 +228,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
menu.push({
text: intl.formatMessage(messages.report),
action: handleReportUser(chatMessage.account_id),
icon: require('@tabler/icons/icons/flag.svg'),
icon: require('@tabler/icons/flag.svg'),
});
}
@ -251,7 +251,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
<div className='chat-message__menu'>
<DropdownMenuContainer
items={menu}
src={require('@tabler/icons/icons/dots.svg')}
src={require('@tabler/icons/dots.svg')}
title={intl.formatMessage(messages.more)}
/>
</div>

2
app/soapbox/features/chats/components/chat-window.tsx
View File

@ -98,7 +98,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
@{getAcct(account, displayFqn)}
</button>
<div className='pane__close'>
<IconButton src={require('@tabler/icons/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
<IconButton src={require('@tabler/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
</div>
</HStack>
<div className='pane__content'>

2
app/soapbox/features/chats/components/chat.tsx
View File

@ -44,7 +44,7 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
{attachment && (
<Icon
className='chat__attachment-icon'
src={image ? require('@tabler/icons/icons/photo.svg') : require('@tabler/icons/icons/paperclip.svg')}
src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
/>
)}
{content ? (

2
app/soapbox/features/community_timeline/components/column_settings.js
View File

@ -31,7 +31,7 @@ class ColumnSettings extends React.PureComponent {
<FormattedMessage id='community.column_settings.title' defaultMessage='Local timeline settings' />
</h1>
<div className='column-settings__close'>
<IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
<IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
</div>
</div>

4
app/soapbox/features/compose/components/compose_form.js
View File

@ -270,14 +270,14 @@ class ComposeForm extends ImmutablePureComponent {
} else if (this.props.privacy === 'direct') {
publishText = (
<>
<Icon src={require('@tabler/icons/icons/mail.svg')} />
<Icon src={require('@tabler/icons/mail.svg')} />
{intl.formatMessage(messages.message)}
</>
);
} else if (this.props.privacy === 'private') {
publishText = (
<>
<Icon src={require('@tabler/icons/icons/lock.svg')} />
<Icon src={require('@tabler/icons/lock.svg')} />
{intl.formatMessage(messages.publish)}
</>
);

2
app/soapbox/features/compose/components/emoji_picker_dropdown.js
View File

@ -365,7 +365,7 @@ class EmojiPickerDropdown extends React.PureComponent {
'pulse-loading': active && loading,
})}
alt='😀'
src={require('@tabler/icons/icons/mood-happy.svg')}
src={require('@tabler/icons/mood-happy.svg')}
title={title}
aria-label={title}
aria-expanded={active}

2
app/soapbox/features/compose/components/markdown_button.tsx
View File

@ -18,7 +18,7 @@ const MarkdownButton: React.FC<IMarkdownButton> = ({ active, onClick }) => {
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/markdown.svg')}
icon={require('@tabler/icons/markdown.svg')}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active}
onClick={onClick}

2
app/soapbox/features/compose/components/poll_button.tsx
View File

@ -24,7 +24,7 @@ const PollButton: React.FC<IPollButton> = ({ active, unavailable, disabled, onCl
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/chart-bar.svg')}
icon={require('@tabler/icons/chart-bar.svg')}
title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
active={active}
disabled={disabled}

8
app/soapbox/features/compose/components/privacy_dropdown.tsx
View File

@ -161,10 +161,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
const [placement, setPlacement] = useState('bottom');
const options = [
{ icon: require('@tabler/icons/icons/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
{ icon: require('@tabler/icons/icons/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
{ icon: require('@tabler/icons/icons/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
{ icon: require('@tabler/icons/icons/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
{ icon: require('@tabler/icons/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
{ icon: require('@tabler/icons/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
{ icon: require('@tabler/icons/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
{ icon: require('@tabler/icons/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
];
const handleToggle: React.MouseEventHandler<HTMLButtonElement> = (e) => {

2
app/soapbox/features/compose/components/reply_indicator.tsx
View File

@ -26,7 +26,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
if (!hideActions && onCancel) {
actions = {
onActionClick: handleClick,
actionIcon: require('@tabler/icons/icons/x.svg'),
actionIcon: require('@tabler/icons/x.svg'),
actionAlignment: 'top',
actionTitle: 'Dismiss',
};

2
app/soapbox/features/compose/components/schedule_button.tsx
View File

@ -28,7 +28,7 @@ const ScheduleButton: React.FC<IScheduleButton> = ({ active, unavailable, disabl
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/calendar-stats.svg')}
icon={require('@tabler/icons/calendar-stats.svg')}
title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
active={active}
disabled={disabled}

2
app/soapbox/features/compose/components/schedule_form.tsx
View File

@ -72,7 +72,7 @@ const ScheduleForm: React.FC = () => {
<IconButton
iconClassName='w-4 h-4'
className='bg-transparent text-gray-400 hover:text-gray-600'
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
onClick={handleRemove}
title={intl.formatMessage(messages.remove)}
/>

6
app/soapbox/features/compose/components/search.tsx
View File

@ -105,7 +105,7 @@ const Search = (props: ISearch) => {
const makeMenu = () => [
{
text: intl.formatMessage(messages.action, { query: value }),
icon: require('@tabler/icons/icons/search.svg'),
icon: require('@tabler/icons/search.svg'),
action: handleSubmit,
},
];
@ -140,12 +140,12 @@ const Search = (props: ISearch) => {
onClick={handleClear}
>
<SvgIcon
src={require('@tabler/icons/icons/search.svg')}
src={require('@tabler/icons/search.svg')}
className={classNames('h-4 w-4 text-gray-400', { hidden: hasValue })}
/>
<SvgIcon
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
className={classNames('h-4 w-4 text-gray-400', { hidden: !hasValue })}
aria-label={intl.formatMessage(messages.placeholder)}
/>

2
app/soapbox/features/compose/components/spoiler_button.tsx
View File

@ -18,7 +18,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ active, onClick }) => {
return (
<ComposeFormButton
icon={require('@tabler/icons/icons/alert-triangle.svg')}
icon={require('@tabler/icons/alert-triangle.svg')}
title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
active={active}
onClick={onClick}

18
app/soapbox/features/compose/components/upload.tsx
View File

@ -12,13 +12,13 @@ import Motion from '../../ui/util/optional_motion';
import type { Map as ImmutableMap } from 'immutable';
const bookIcon = require('@tabler/icons/icons/book.svg');
const fileAnalyticsIcon = require('@tabler/icons/icons/file-analytics.svg');
const fileCodeIcon = require('@tabler/icons/icons/file-code.svg');
const fileTextIcon = require('@tabler/icons/icons/file-text.svg');
const fileZipIcon = require('@tabler/icons/icons/file-zip.svg');
const defaultIcon = require('@tabler/icons/icons/paperclip.svg');
const presentationIcon = require('@tabler/icons/icons/presentation.svg');
const bookIcon = require('@tabler/icons/book.svg');
const fileAnalyticsIcon = require('@tabler/icons/file-analytics.svg');
const fileCodeIcon = require('@tabler/icons/file-code.svg');
const fileTextIcon = require('@tabler/icons/file-text.svg');
const fileZipIcon = require('@tabler/icons/file-zip.svg');
const defaultIcon = require('@tabler/icons/paperclip.svg');
const presentationIcon = require('@tabler/icons/presentation.svg');
export const MIMETYPE_ICONS: Record<string, string> = {
'application/x-freearc': fileZipIcon,
@ -157,7 +157,7 @@ const Upload: React.FC<IUpload> = (props) => {
<div className={classNames('compose-form__upload__actions', { active })}>
<IconButton
onClick={handleUndoClick}
src={require('@tabler/icons/icons/x.svg')}
src={require('@tabler/icons/x.svg')}
text={<FormattedMessage id='upload_form.undo' defaultMessage='Delete' />}
/>
@ -165,7 +165,7 @@ const Upload: React.FC<IUpload> = (props) => {
{(mediaType !== 'unknown' && Boolean(props.media.get('url'))) && (
<IconButton
onClick={handleOpenModal}
src={require('@tabler/icons/icons/zoom-in.svg')}
src={require('@tabler/icons/zoom-in.svg')}
text={<FormattedMessage id='upload_form.preview' defaultMessage='Preview' />}
/>
)}

4
app/soapbox/features/compose/components/upload_button.tsx
View File

@ -48,8 +48,8 @@ const UploadButton: React.FC<IUploadButton> = ({
}
const src = onlyImages(attachmentTypes)
? require('@tabler/icons/icons/photo.svg')
: require('@tabler/icons/icons/paperclip.svg');
? require('@tabler/icons/photo.svg')
: require('@tabler/icons/paperclip.svg');
return (
<div>

4
app/soapbox/features/crypto_donate/components/crypto_address.tsx
View File

@ -42,12 +42,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
<HStack alignItems='center' className='ml-auto'>
<a className='text-gray-500 ml-1' href='#' onClick={handleModalClick}>
<Icon src={require('@tabler/icons/icons/qrcode.svg')} size={20} />
<Icon src={require('@tabler/icons/qrcode.svg')} size={20} />
</a>
{explorerUrl && (
<a className='text-gray-500 ml-1' href={explorerUrl} target='_blank'>
<Icon src={require('@tabler/icons/icons/external-link.svg')} size={20} />
<Icon src={require('@tabler/icons/external-link.svg')} size={20} />
</a>
)}
</HStack>

2
app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx
View File

@ -30,7 +30,7 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
<div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
<div className='crypto-address__actions'>
{explorerUrl && <a href={explorerUrl} target='_blank'>
<Icon src={require('@tabler/icons/icons/external-link.svg')} />
<Icon src={require('@tabler/icons/external-link.svg')} />
</a>}
</div>
</div>

12
app/soapbox/features/developers/developers_menu.tsx
View File

@ -32,7 +32,7 @@ const Developers = () => {
<Column label={intl.formatMessage(messages.heading)}>
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
<Link to='/developers/apps/create' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/apps.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/apps.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@ -40,7 +40,7 @@ const Developers = () => {
</Link>
<Link to='/developers/settings_store' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/code-plus.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/code-plus.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@ -48,7 +48,7 @@ const Developers = () => {
</Link>
<Link to='/developers/timeline' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/home.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/home.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@ -56,7 +56,7 @@ const Developers = () => {
</Link>
<Link to='/error' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/mood-sad.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@ -64,7 +64,7 @@ const Developers = () => {
</Link>
<Link to='/error/network' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/refresh.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/refresh.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@ -72,7 +72,7 @@ const Developers = () => {
</Link>
<button onClick={leaveDevelopers} className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<SvgIcon src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/logout.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />

27
app/soapbox/features/emoji/__tests__/emoji_index.test.ts
View File

@ -1,9 +1,10 @@
// @ts-ignore
import { emojiIndex } from 'emoji-mart';
import pick from 'lodash/pick';
import { search } from '../emoji_mart_search_light';
const trimEmojis = emoji => pick(emoji, ['id', 'unified', 'native', 'custom']);
const trimEmojis = (emoji: any) => pick(emoji, ['id', 'unified', 'native', 'custom']);
describe('emoji_index', () => {
it('should give same result for emoji_index_light and emoji-mart', () => {
@ -46,7 +47,7 @@ describe('emoji_index', () => {
});
it('can include/exclude categories', () => {
expect(search('flag', { include: ['people'] })).toEqual([]);
expect(search('flag', { include: ['people'] } as any)).toEqual([]);
expect(emojiIndex.search('flag', { include: ['people'] })).toEqual([]);
});
@ -63,9 +64,8 @@ describe('emoji_index', () => {
custom: true,
},
];
search('', { custom });
search('', { custom } as any);
emojiIndex.search('', { custom });
const expected = [];
const lightExpected = [
{
id: 'mastodon',
@ -73,7 +73,7 @@ describe('emoji_index', () => {
},
];
expect(search('masto').map(trimEmojis)).toEqual(lightExpected);
expect(emojiIndex.search('masto').map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('masto').map(trimEmojis)).toEqual([]);
});
it('(different behavior from emoji-mart) erases custom emoji if another is passed', () => {
@ -89,11 +89,10 @@ describe('emoji_index', () => {
custom: true,
},
];
search('', { custom });
search('', { custom } as any);
emojiIndex.search('', { custom });
const expected = [];
expect(search('masto', { custom: [] }).map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('masto').map(trimEmojis)).toEqual(expected);
expect(search('masto', { custom: [] } as any).map(trimEmojis)).toEqual([]);
expect(emojiIndex.search('masto').map(trimEmojis)).toEqual([]);
});
it('handles custom emoji', () => {
@ -109,7 +108,7 @@ describe('emoji_index', () => {
custom: true,
},
];
search('', { custom });
search('', { custom } as any);
emojiIndex.search('', { custom });
const expected = [
{
@ -117,15 +116,15 @@ describe('emoji_index', () => {
custom: true,
},
];
expect(search('masto', { custom }).map(trimEmojis)).toEqual(expected);
expect(search('masto', { custom } as any).map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('masto', { custom }).map(trimEmojis)).toEqual(expected);
});
it('should filter only emojis we care about, exclude pineapple', () => {
const emojisToShowFilter = emoji => emoji.unified !== '1F34D';
expect(search('apple', { emojisToShowFilter }).map((obj) => obj.id))
const emojisToShowFilter = (emoji: any) => emoji.unified !== '1F34D';
expect(search('apple', { emojisToShowFilter } as any).map((obj: any) => obj.id))
.not.toContain('pineapple');
expect(emojiIndex.search('apple', { emojisToShowFilter }).map((obj) => obj.id))
expect(emojiIndex.search('apple', { emojisToShowFilter }).map((obj: any) => obj.id))
.not.toContain('pineapple');
});

8
app/soapbox/features/federation_restrictions/components/instance_restrictions.js
View File

@ -51,7 +51,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (followers_only) {
items.push((
<Text key='followers_only'>
<Icon className='mr-2' src={require('@tabler/icons/icons/lock.svg')} />
<Icon className='mr-2' src={require('@tabler/icons/lock.svg')} />
<FormattedMessage
id='federation_restriction.followers_only'
defaultMessage='Hidden except to followers'
@ -61,7 +61,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
} else if (federated_timeline_removal) {
items.push((
<Text key='federated_timeline_removal'>
<Icon className='mr-2' src={require('@tabler/icons/icons/lock-open.svg')} />
<Icon className='mr-2' src={require('@tabler/icons/lock-open.svg')} />
<FormattedMessage
id='federation_restriction.federated_timeline_removal'
defaultMessage='Fediverse timeline removal'
@ -73,7 +73,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
if (fullMediaRemoval) {
items.push((
<Text key='full_media_removal'>
<Icon className='mr-2' src={require('@tabler/icons/icons/photo-off.svg')} />
<Icon className='mr-2' src={require('@tabler/icons/photo-off.svg')} />
<FormattedMessage
id='federation_restriction.full_media_removal'
defaultMessage='Full media removal'
@ -83,7 +83,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
} else if (partialMediaRemoval) {
items.push((
<Text key='partial_media_removal'>
<Icon className='mr-2' src={require('@tabler/icons/icons/photo-off.svg')} />
<Icon className='mr-2' src={require('@tabler/icons/photo-off.svg')} />
<FormattedMessage
id='federation_restriction.partial_media_removal'
defaultMessage='Partial media removal'

2
app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
View File

@ -31,7 +31,7 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
>
<a href='#' className='restricted-instance__header' onClick={toggleExpanded}>
<div className='restricted-instance__icon'>
<Icon src={expanded ? require('@tabler/icons/icons/caret-down.svg') : require('@tabler/icons/icons/caret-right.svg')} />
<Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
</div>
<div className='restricted-instance__host'>
{remoteInstance.get('host')}

10
app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx
View File

@ -18,7 +18,7 @@ jest.mock('../../../hooks/useDimensions', () => ({
};
describe('<FeedCarousel />', () => {
let store;
let store: any;
describe('with "feedUserFiltering" disabled', () => {
beforeEach(() => {
@ -35,7 +35,7 @@ describe('<FeedCarousel />', () => {
});
it('should render nothing', () => {
render(<FeedCarousel />, null, store);
render(<FeedCarousel />, undefined, store);
expect(screen.queryAllByTestId('feed-carousel')).toHaveLength(0);
});
@ -56,7 +56,7 @@ describe('<FeedCarousel />', () => {
});
it('should render the Carousel', () => {
render(<FeedCarousel />, null, store);
render(<FeedCarousel />, undefined, store);
expect(screen.queryAllByTestId('feed-carousel')).toHaveLength(1);
});
@ -70,7 +70,7 @@ describe('<FeedCarousel />', () => {
});
it('renders the error message', () => {
render(<FeedCarousel />, null, store);
render(<FeedCarousel />, undefined, store);
expect(screen.getByTestId('feed-carousel-error')).toBeInTheDocument();
});
@ -110,7 +110,7 @@ describe('<FeedCarousel />', () => {
it('should render the correct prev/next buttons', async() => {
const user = userEvent.setup();
render(<FeedCarousel />, null, store);
render(<FeedCarousel />, undefined, store);
await waitFor(() => {
expect(screen.getByTestId('next-page')).toBeInTheDocument();

6
app/soapbox/features/feed-filtering/feed-carousel.tsx
View File

@ -26,7 +26,7 @@ const CarouselItem = ({ avatar }: { avatar: any }) => {
<div className='block mx-auto relative w-14 h-14 rounded-full'>
{isSelected && (
<div className='absolute inset-0 bg-primary-600 bg-opacity-50 rounded-full flex items-center justify-center'>
<Icon src={require('@tabler/icons/icons/x.svg')} className='text-white h-6 w-6' />
<Icon src={require('@tabler/icons/x.svg')} className='text-white h-6 w-6' />
</div>
)}
@ -104,7 +104,7 @@ const FeedCarousel = () => {
onClick={handlePrevPage}
className='bg-white/85 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
>
<Icon src={require('@tabler/icons/icons/chevron-left.svg')} className='text-black dark:text-white h-6 w-6' />
<Icon src={require('@tabler/icons/chevron-left.svg')} className='text-black dark:text-white h-6 w-6' />
</button>
</div>
</div>
@ -140,7 +140,7 @@ const FeedCarousel = () => {
onClick={handleNextPage}
className='bg-white/85 backdrop-blur rounded-full h-8 w-8 flex items-center justify-center'
>
<Icon src={require('@tabler/icons/icons/chevron-right.svg')} className='text-black dark:text-white h-6 w-6' />
<Icon src={require('@tabler/icons/chevron-right.svg')} className='text-black dark:text-white h-6 w-6' />
</button>
</div>
</div>

4
app/soapbox/features/follow_requests/components/account_authorize.tsx
View File

@ -51,8 +51,8 @@ const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
</div>
<div className='account--panel'>
<div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/icons/check.svg')} onClick={onAuthorize} /></div>
<div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/icons/x.svg')} onClick={onReject} /></div>
<div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/check.svg')} onClick={onAuthorize} /></div>
<div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/x.svg')} onClick={onReject} /></div>
</div>
</div>
);

2
app/soapbox/features/groups/removed_accounts/index.js
View File

@ -82,7 +82,7 @@ class GroupRemovedAccounts extends ImmutablePureComponent {
{accountIds.map(id => (<AccountContainer
key={id}
id={id}
actionIcon={require('@tabler/icons/icons/x.svg')}
actionIcon={require('@tabler/icons/x.svg')}
onActionClick={this.handleOnActionClick(group, id)}
actionTitle={intl.formatMessage(messages.remove)}
/>))}

6
app/soapbox/features/groups/timeline/components/header.js
View File

@ -51,17 +51,17 @@ class Header extends ImmutablePureComponent {
{
text: intl.formatMessage(messages.edit),
to: `/groups/${group.get('id')}/edit`,
icon: require('@tabler/icons/icons/edit.svg'),
icon: require('@tabler/icons/edit.svg'),
},
{
text: intl.formatMessage(messages.removed_accounts),
to: `/groups/${group.get('id')}/removed_accounts`,
icon: require('@tabler/icons/icons/trash.svg'),
icon: require('@tabler/icons/trash.svg'),
destructive: true,
},
];
return <DropdownMenuContainer items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />;
return <DropdownMenuContainer items={menu} src={require('@tabler/icons/dots-vertical.svg')} direction='right' />;
}
render() {

2
app/soapbox/features/home_timeline/components/column_settings.js
View File

@ -31,7 +31,7 @@ class ColumnSettings extends React.PureComponent {
<FormattedMessage id='home.column_settings.title' defaultMessage='Home settings' />
</h1>
<div className='column-settings__close'>
<IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
<IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
</div>
</div>

8
app/soapbox/features/landing_page/__tests__/landing_page.test.tsx
View File

@ -17,7 +17,7 @@ describe('<LandingPage />', () => {
},
});
render(<LandingPage />, null, state);
render(<LandingPage />, undefined, state);
expect(screen.queryByTestId('registrations-open')).toBeInTheDocument();
expect(screen.queryByTestId('registrations-closed')).not.toBeInTheDocument();
@ -34,7 +34,7 @@ describe('<LandingPage />', () => {
},
});
render(<LandingPage />, null, state);
render(<LandingPage />, undefined, state);
expect(screen.queryByTestId('registrations-closed')).toBeInTheDocument();
expect(screen.queryByTestId('registrations-open')).not.toBeInTheDocument();
@ -59,7 +59,7 @@ describe('<LandingPage />', () => {
},
}], rootReducer);
render(<LandingPage />, null, state);
render(<LandingPage />, undefined, state);
expect(screen.queryByTestId('registrations-pepe')).toBeInTheDocument();
expect(screen.queryByTestId('registrations-open')).not.toBeInTheDocument();
@ -81,7 +81,7 @@ describe('<LandingPage />', () => {
},
}], rootReducer);
render(<LandingPage />, null, state);
render(<LandingPage />, undefined, state);
expect(screen.queryByTestId('registrations-closed')).toBeInTheDocument();
expect(screen.queryByTestId('registrations-pepe')).not.toBeInTheDocument();

6
app/soapbox/features/list_adder/components/list.tsx
View File

@ -30,14 +30,14 @@ const List: React.FC<IList> = ({ listId }) => {
let button;
if (added) {
button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
} else {
button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
}
return (
<div className='flex items-center gap-1.5 px-2 py-4 text-black dark:text-white'>
<Icon src={require('@tabler/icons/icons/list.svg')} fixedWidth />
<Icon src={require('@tabler/icons/list.svg')} fixedWidth />
<span className='flex-grow'>
{list.title}
</span>

4
app/soapbox/features/list_editor/components/account.tsx
View File

@ -34,9 +34,9 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
let button;
if (isAdded) {
button = <IconButton src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
button = <IconButton src={require('@tabler/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
} else {
button = <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
button = <IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
}
return (

2
app/soapbox/features/list_editor/components/search.tsx
View File

@ -45,7 +45,7 @@ const Search = () => {
placeholder={intl.formatMessage(messages.search)}
/>
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
<Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
<Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
</div>
</label>

Some files were not shown because too many files have changed in this diff Show More