kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Merge branch 'group-dark-mode' into 'develop'
Improve Dark mode support for Groups + Tests See merge request soapbox-pub/soapbox!2390environments/review-develop-3zknud/deployments/3014
commit
ccd97e1405
|
@ -23,8 +23,9 @@ const GroupAvatar = (props: IGroupAvatar) => {
|
||||||
className={
|
className={
|
||||||
clsx('relative rounded-full', {
|
clsx('relative rounded-full', {
|
||||||
'shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.white)]': isOwner && withRing,
|
'shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.white)]': isOwner && withRing,
|
||||||
|
'dark:shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.gray.800)]': isOwner && withRing,
|
||||||
'shadow-[0_0_0_2px_theme(colors.primary.600)]': isOwner && !withRing,
|
'shadow-[0_0_0_2px_theme(colors.primary.600)]': isOwner && !withRing,
|
||||||
'shadow-[0_0_0_2px_theme(colors.white)]': !isOwner && withRing,
|
'shadow-[0_0_0_2px_theme(colors.white)] dark:shadow-[0_0_0_2px_theme(colors.gray.800)]': !isOwner && withRing,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
src={group.avatar}
|
src={group.avatar}
|
||||||
|
|
|
@ -9,7 +9,7 @@ const themes = {
|
||||||
'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
|
'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
|
||||||
accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
|
accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
|
||||||
danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500',
|
danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500',
|
||||||
transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
|
transparent: 'border-transparent bg-transparent text-primary-600 dark:text-accent-blue dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50',
|
||||||
outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
|
outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
|
||||||
muted: 'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
|
muted: 'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
|
||||||
};
|
};
|
||||||
|
|
|
@ -13,6 +13,8 @@ import {
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import React, { useRef, useState } from 'react';
|
import React, { useRef, useState } from 'react';
|
||||||
|
|
||||||
|
import Portal from '../portal/portal';
|
||||||
|
|
||||||
interface IPopover {
|
interface IPopover {
|
||||||
children: React.ReactElement<any, string | React.JSXElementConstructor<any>>
|
children: React.ReactElement<any, string | React.JSXElementConstructor<any>>
|
||||||
/** The content of the popover */
|
/** The content of the popover */
|
||||||
|
@ -83,31 +85,33 @@ const Popover: React.FC<IPopover> = (props) => {
|
||||||
})}
|
})}
|
||||||
|
|
||||||
{(isMounted) && (
|
{(isMounted) && (
|
||||||
<div
|
<Portal>
|
||||||
ref={refs.setFloating}
|
<div
|
||||||
style={{
|
ref={refs.setFloating}
|
||||||
position: strategy,
|
style={{
|
||||||
top: y ?? 0,
|
position: strategy,
|
||||||
left: x ?? 0,
|
top: y ?? 0,
|
||||||
...styles,
|
left: x ?? 0,
|
||||||
}}
|
...styles,
|
||||||
className={
|
}}
|
||||||
clsx({
|
className={
|
||||||
'z-40 rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700': true,
|
clsx({
|
||||||
'p-6': !isFlush,
|
'z-40 rounded-lg bg-white shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700': true,
|
||||||
})
|
'p-6': !isFlush,
|
||||||
}
|
})
|
||||||
{...getFloatingProps()}
|
}
|
||||||
>
|
{...getFloatingProps()}
|
||||||
{content}
|
>
|
||||||
|
{content}
|
||||||
|
|
||||||
<FloatingArrow
|
<FloatingArrow
|
||||||
ref={arrowRef}
|
ref={arrowRef}
|
||||||
context={context}
|
context={context}
|
||||||
className='-ml-2 fill-white dark:hidden' /** -ml-2 to fix offcenter arrow */
|
className='-ml-2 fill-white dark:hidden' /** -ml-2 to fix offcenter arrow */
|
||||||
tipRadius={3}
|
tipRadius={3}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</Portal>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1,85 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
|
||||||
|
import { render, screen } from 'soapbox/jest/test-helpers';
|
||||||
|
import { GroupRoles } from 'soapbox/schemas/group-member';
|
||||||
|
import { Group } from 'soapbox/types/entities';
|
||||||
|
|
||||||
|
import GroupOptionsButton from '../group-options-button';
|
||||||
|
|
||||||
|
let group: Group;
|
||||||
|
|
||||||
|
describe('<GroupOptionsButton />', () => {
|
||||||
|
describe('when the user blocked', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
group = buildGroup({
|
||||||
|
relationship: buildGroupRelationship({
|
||||||
|
requested: false,
|
||||||
|
member: true,
|
||||||
|
blocked_by: true,
|
||||||
|
role: 'user',
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render null', () => {
|
||||||
|
render(<GroupOptionsButton group={group} />);
|
||||||
|
|
||||||
|
expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when the user is an admin', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
group = buildGroup({
|
||||||
|
relationship: buildGroupRelationship({
|
||||||
|
requested: false,
|
||||||
|
member: true,
|
||||||
|
role: GroupRoles.ADMIN,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render null', () => {
|
||||||
|
render(<GroupOptionsButton group={group} />);
|
||||||
|
|
||||||
|
expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when the user is an owner', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
group = buildGroup({
|
||||||
|
relationship: buildGroupRelationship({
|
||||||
|
requested: false,
|
||||||
|
member: true,
|
||||||
|
role: GroupRoles.OWNER,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render null', () => {
|
||||||
|
render(<GroupOptionsButton group={group} />);
|
||||||
|
|
||||||
|
expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when the user is a member', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
group = buildGroup({
|
||||||
|
relationship: buildGroupRelationship({
|
||||||
|
requested: false,
|
||||||
|
member: true,
|
||||||
|
role: GroupRoles.USER,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the dropdown menu', () => {
|
||||||
|
render(<GroupOptionsButton group={group} />);
|
||||||
|
|
||||||
|
expect(screen.queryAllByTestId('dropdown-menu-button')).toHaveLength(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,66 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
|
||||||
|
import { render, screen } from 'soapbox/jest/test-helpers';
|
||||||
|
import { GroupRoles } from 'soapbox/schemas/group-member';
|
||||||
|
import { Group } from 'soapbox/types/entities';
|
||||||
|
|
||||||
|
import GroupRelationship from '../group-relationship';
|
||||||
|
|
||||||
|
let group: Group;
|
||||||
|
|
||||||
|
describe('<GroupRelationship />', () => {
|
||||||
|
describe('when the user is an admin', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
group = buildGroup({
|
||||||
|
relationship: buildGroupRelationship({
|
||||||
|
requested: false,
|
||||||
|
member: true,
|
||||||
|
role: GroupRoles.ADMIN,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the relationship', () => {
|
||||||
|
render(<GroupRelationship group={group} />);
|
||||||
|
|
||||||
|
expect(screen.getByTestId('group-relationship')).toHaveTextContent('Admin');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when the user is an owner', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
group = buildGroup({
|
||||||
|
relationship: buildGroupRelationship({
|
||||||
|
requested: false,
|
||||||
|
member: true,
|
||||||
|
role: GroupRoles.OWNER,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render the relationship', () => {
|
||||||
|
render(<GroupRelationship group={group} />);
|
||||||
|
|
||||||
|
expect(screen.getByTestId('group-relationship')).toHaveTextContent('Owner');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when the user is a member', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
group = buildGroup({
|
||||||
|
relationship: buildGroupRelationship({
|
||||||
|
requested: false,
|
||||||
|
member: true,
|
||||||
|
role: GroupRoles.USER,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render null', () => {
|
||||||
|
render(<GroupRelationship group={group} />);
|
||||||
|
|
||||||
|
expect(screen.queryAllByTestId('group-relationship')).toHaveLength(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -1,4 +1,5 @@
|
||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
|
import { defineMessages, useIntl } from 'react-intl';
|
||||||
|
|
||||||
import { initReport, ReportableEntities } from 'soapbox/actions/reports';
|
import { initReport, ReportableEntities } from 'soapbox/actions/reports';
|
||||||
import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu';
|
import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu';
|
||||||
|
@ -8,20 +9,25 @@ import { GroupRoles } from 'soapbox/schemas/group-member';
|
||||||
|
|
||||||
import type { Account, Group } from 'soapbox/types/entities';
|
import type { Account, Group } from 'soapbox/types/entities';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
report: { id: 'group.report.label', defaultMessage: 'Report' },
|
||||||
|
});
|
||||||
|
|
||||||
interface IGroupActionButton {
|
interface IGroupActionButton {
|
||||||
group: Group
|
group: Group
|
||||||
}
|
}
|
||||||
|
|
||||||
const GroupOptionsButton = ({ group }: IGroupActionButton) => {
|
const GroupOptionsButton = ({ group }: IGroupActionButton) => {
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const account = useOwnAccount();
|
const account = useOwnAccount();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
const isMember = group.relationship?.role === GroupRoles.USER;
|
const isMember = group.relationship?.role === GroupRoles.USER;
|
||||||
const isBlocked = group.relationship?.blocked_by;
|
const isBlocked = group.relationship?.blocked_by;
|
||||||
|
|
||||||
const menu: Menu = useMemo(() => ([
|
const menu: Menu = useMemo(() => ([
|
||||||
{
|
{
|
||||||
text: 'Report',
|
text: intl.formatMessage(messages.report),
|
||||||
icon: require('@tabler/icons/flag.svg'),
|
icon: require('@tabler/icons/flag.svg'),
|
||||||
action: () => dispatch(initReport(ReportableEntities.GROUP, account as Account, { group })),
|
action: () => dispatch(initReport(ReportableEntities.GROUP, account as Account, { group })),
|
||||||
},
|
},
|
||||||
|
@ -38,6 +44,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
|
||||||
theme='secondary'
|
theme='secondary'
|
||||||
iconClassName='h-5 w-5'
|
iconClassName='h-5 w-5'
|
||||||
className='self-stretch px-2.5'
|
className='self-stretch px-2.5'
|
||||||
|
data-testid='dropdown-menu-button'
|
||||||
/>
|
/>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
);
|
);
|
||||||
|
|
|
@ -13,12 +13,17 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
|
||||||
const isOwner = group.relationship?.role === GroupRoles.OWNER;
|
const isOwner = group.relationship?.role === GroupRoles.OWNER;
|
||||||
const isAdmin = group.relationship?.role === GroupRoles.ADMIN;
|
const isAdmin = group.relationship?.role === GroupRoles.ADMIN;
|
||||||
|
|
||||||
if (!isOwner || !isAdmin) {
|
if (!isOwner && !isAdmin) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HStack space={1} alignItems='center'>
|
<HStack
|
||||||
|
space={1}
|
||||||
|
alignItems='center'
|
||||||
|
data-testid='group-relationship'
|
||||||
|
className='text-primary-600 dark:text-accent-blue'
|
||||||
|
>
|
||||||
<Icon
|
<Icon
|
||||||
className='h-4 w-4'
|
className='h-4 w-4'
|
||||||
src={
|
src={
|
||||||
|
@ -30,8 +35,8 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
|
||||||
|
|
||||||
<Text tag='span' weight='medium' size='sm' theme='inherit'>
|
<Text tag='span' weight='medium' size='sm' theme='inherit'>
|
||||||
{isOwner
|
{isOwner
|
||||||
? <FormattedMessage id='group.role.admin' defaultMessage='Admin' />
|
? <FormattedMessage id='group.role.owner' defaultMessage='Owner' />
|
||||||
: <FormattedMessage id='group.role.moderator' defaultMessage='Moderator' />}
|
: <FormattedMessage id='group.role.admin' defaultMessage='Admin' />}
|
||||||
</Text>
|
</Text>
|
||||||
</HStack>
|
</HStack>
|
||||||
);
|
);
|
||||||
|
|
|
@ -18,7 +18,6 @@ export default () => {
|
||||||
|
|
||||||
const { groups, isLoading } = usePendingGroups();
|
const { groups, isLoading } = usePendingGroups();
|
||||||
|
|
||||||
|
|
||||||
const renderBlankslate = () => (
|
const renderBlankslate = () => (
|
||||||
<Stack
|
<Stack
|
||||||
space={4}
|
space={4}
|
||||||
|
|
|
@ -13,7 +13,7 @@ const PlaceholderGroupDiscover = () => {
|
||||||
{/* Group Cover Image */}
|
{/* Group Cover Image */}
|
||||||
<div className='absolute inset-0 rounded-t-lg bg-gray-300 object-cover dark:bg-gray-800' />
|
<div className='absolute inset-0 rounded-t-lg bg-gray-300 object-cover dark:bg-gray-800' />
|
||||||
|
|
||||||
<Stack justifyContent='end' className='z-10 p-4 text-white' space={3}>
|
<Stack justifyContent='end' className='z-10 p-4 text-gray-900 dark:text-gray-100' space={3}>
|
||||||
{/* Group Avatar */}
|
{/* Group Avatar */}
|
||||||
<div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
|
<div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
|
||||||
|
|
||||||
|
|
|
@ -3,8 +3,10 @@ import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui';
|
import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui';
|
||||||
|
|
||||||
|
import type { Group } from 'soapbox/schemas';
|
||||||
|
|
||||||
interface IConfirmationStep {
|
interface IConfirmationStep {
|
||||||
group: any
|
group: Group
|
||||||
}
|
}
|
||||||
|
|
||||||
const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
|
const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
|
||||||
|
@ -53,24 +55,30 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
|
||||||
|
|
||||||
<Stack space={5}>
|
<Stack space={5}>
|
||||||
<InfoListItem number={1}>
|
<InfoListItem number={1}>
|
||||||
<FormattedMessage
|
<Text theme='muted'>
|
||||||
id='manage_group.confirmation.info_1'
|
<FormattedMessage
|
||||||
defaultMessage='As the owner of this group, you can assign staff, delete posts and much more.'
|
id='manage_group.confirmation.info_1'
|
||||||
/>
|
defaultMessage='As the owner of this group, you can assign staff, delete posts and much more.'
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
</InfoListItem>
|
</InfoListItem>
|
||||||
|
|
||||||
<InfoListItem number={2}>
|
<InfoListItem number={2}>
|
||||||
<FormattedMessage
|
<Text theme='muted'>
|
||||||
id='manage_group.confirmation.info_2'
|
<FormattedMessage
|
||||||
defaultMessage="Post the group's first post and get the conversation started."
|
id='manage_group.confirmation.info_2'
|
||||||
/>
|
defaultMessage="Post the group's first post and get the conversation started."
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
</InfoListItem>
|
</InfoListItem>
|
||||||
|
|
||||||
<InfoListItem number={3}>
|
<InfoListItem number={3}>
|
||||||
<FormattedMessage
|
<Text theme='muted'>
|
||||||
id='manage_group.confirmation.info_3'
|
<FormattedMessage
|
||||||
defaultMessage='Share your new group with friends, family and followers to grow its membership.'
|
id='manage_group.confirmation.info_3'
|
||||||
/>
|
defaultMessage='Share your new group with friends, family and followers to grow its membership.'
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
</InfoListItem>
|
</InfoListItem>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
@ -96,7 +104,7 @@ interface IInfoListNumber {
|
||||||
|
|
||||||
const InfoListNumber: React.FC<IInfoListNumber> = ({ number }) => {
|
const InfoListNumber: React.FC<IInfoListNumber> = ({ number }) => {
|
||||||
return (
|
return (
|
||||||
<div className='flex h-7 w-7 items-center justify-center rounded-full border border-gray-200'>
|
<div className='flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-gray-200 dark:border-gray-800'>
|
||||||
<Text theme='primary' size='sm' weight='bold'>{number}</Text>
|
<Text theme='primary' size='sm' weight='bold'>{number}</Text>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -109,9 +117,11 @@ interface IInfoListItem {
|
||||||
|
|
||||||
const InfoListItem: React.FC<IInfoListItem> = ({ number, children }) => {
|
const InfoListItem: React.FC<IInfoListItem> = ({ number, children }) => {
|
||||||
return (
|
return (
|
||||||
<HStack space={3}>
|
<HStack alignItems='top' space={3}>
|
||||||
<div><InfoListNumber number={number} /></div>
|
<InfoListNumber number={number} />
|
||||||
<div>{children}</div>
|
<div className='mt-0.5'>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
</HStack>
|
</HStack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -799,8 +799,9 @@
|
||||||
"group.promote.admin.confirmation.message": "Are you sure you want to assign the admin role to @{name}?",
|
"group.promote.admin.confirmation.message": "Are you sure you want to assign the admin role to @{name}?",
|
||||||
"group.promote.admin.confirmation.title": "Assign Admin Role",
|
"group.promote.admin.confirmation.title": "Assign Admin Role",
|
||||||
"group.promote.admin.success": "@{name} is now an admin",
|
"group.promote.admin.success": "@{name} is now an admin",
|
||||||
|
"group.report.label": "Report",
|
||||||
"group.role.admin": "Admin",
|
"group.role.admin": "Admin",
|
||||||
"group.role.moderator": "Moderator",
|
"group.role.owner": "Owner",
|
||||||
"group.tabs.all": "All",
|
"group.tabs.all": "All",
|
||||||
"group.tabs.members": "Members",
|
"group.tabs.members": "Members",
|
||||||
"group.upload_banner": "Upload photo",
|
"group.upload_banner": "Upload photo",
|
||||||
|
|
Ładowanie…
Reference in New Issue