Allow direct linking a repost create component

ui/component/button/view.jsx

@@ -19,6 +19,7 @@ type Props = {
   disabled: ?boolean,
   children: ?Node,
   navigate: ?string,
+  navigateTarget?: string,
   className: ?string,
   description: ?string,
   type: string,
@@ -59,6 +60,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
     disabled,
     children,
     navigate,
+    navigateTarget,
     className,
     description,
     button,
@@ -157,7 +159,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
     // TODO: replace the below with an outbound link tracker for matomo
     return (
       <a
-        target={isAnInternalLink ? '' : '_blank'}
+        target={navigateTarget || (isAnInternalLink ? '' : '_blank')}
         rel="noopener noreferrer"
         href={href || navigate}
         className={combinedClassName}

ui/component/repostCreate/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as ICONS from 'constants/icons';
+import * as PAGES from 'constants/pages';
 import { MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim';
 import React from 'react';
 import Card from 'component/common/card';
@@ -16,6 +17,7 @@ import HelpLink from 'component/common/help-link';
 import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
 import BidHelpText from 'component/publishBid/bid-help-text';
 import Spinner from 'component/spinner';
+import { REPOST_PARAMS } from 'page/repost/view';
 
 type Props = {
   doToast: ({ message: string }) => void,
@@ -42,6 +44,7 @@ type Props = {
   activeChannelClaim: ?ChannelClaim,
   fetchingMyChannels: boolean,
   incognito: boolean,
+  isRepostPage?: boolean,
 };
 
 function RepostCreate(props: Props) {
@@ -68,6 +71,7 @@ function RepostCreate(props: Props) {
     activeChannelClaim,
     fetchingMyChannels,
     incognito,
+    isRepostPage,
   } = props;
 
   const defaultName = name || (claim && claim.name) || '';
@@ -290,6 +294,19 @@ function RepostCreate(props: Props) {
       <Card
         title={__('Repost')}
         className="repost-wrapper"
+        subtitle={
+          isRepostPage ? undefined : (
+            <Button
+              button="link"
+              label={__('Open Repost in new tab')}
+              iconRight={ICONS.EXTERNAL}
+              href={`/$/${PAGES.REPOST_NEW}?${REPOST_PARAMS.FROM}=${encodeURIComponent(uri)}&to=${encodeURIComponent(
+                enteredRepostName
+              )}`}
+              navigateTarget="_blank"
+            />
+          )
+        }
         actions={
           <div>
             <ChannelSelector />

ui/page/repost/view.jsx

@@ -6,7 +6,7 @@ import RepostCreate from 'component/repostCreate';
 import YrblWalletEmpty from 'component/yrblWalletEmpty';
 import useThrottle from 'effects/use-throttle';
 
-const REPOST_PARAMS = {
+export const REPOST_PARAMS = {
   FROM: 'from',
   TO: 'to',
   REDIRECT: 'redirect',
@@ -67,6 +67,7 @@ function RepostPage(props: Props) {
           contentUri={contentUri}
           setContentUri={setContentUri}
           setRepostUri={setRepostUri}
+          isRepostPage
         />
       </div>
     </Page>