From ea6855df0874b0ed32c481822c8ba3c08cba17be Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 26 Dec 2019 10:37:26 -0500
Subject: [PATCH] quick fix to add a cancel button on publish

---
 ui/component/publishFile/index.js |  2 ++
 ui/component/publishFile/view.jsx | 21 +++++++++++++++++++--
 ui/component/publishForm/view.jsx |  4 +++-
 ui/scss/component/_button.scss    |  1 +
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/ui/component/publishFile/index.js b/ui/component/publishFile/index.js
index c8ca526b8..30d533097 100644
--- a/ui/component/publishFile/index.js
+++ b/ui/component/publishFile/index.js
@@ -5,6 +5,7 @@ import {
   makeSelectPublishFormValue,
   doUpdatePublishForm,
   doToast,
+  doClearPublish,
 } from 'lbry-redux';
 import PublishPage from './view';
 
@@ -17,6 +18,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
+  clearPublish: () => dispatch(doClearPublish()),
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
   showToast: message => dispatch(doToast({ message, isError: true })),
 });
diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx
index 661746d30..e3aebc041 100644
--- a/ui/component/publishFile/view.jsx
+++ b/ui/component/publishFile/view.jsx
@@ -16,10 +16,22 @@ type Props = {
   disabled: boolean,
   publishing: boolean,
   showToast: string => void,
+  inProgress: boolean,
+  clearPublish: () => void,
 };
 
 function PublishFile(props: Props) {
-  const { name, balance, filePath, isStillEditing, updatePublishForm, disabled, publishing } = props;
+  const {
+    name,
+    balance,
+    filePath,
+    isStillEditing,
+    updatePublishForm,
+    disabled,
+    publishing,
+    inProgress,
+    clearPublish,
+  } = props;
 
   let currentFile = '';
   if (filePath) {
@@ -79,7 +91,12 @@ function PublishFile(props: Props) {
       actionIconPadding={false}
       icon={ICONS.PUBLISH}
       disabled={disabled || balance === 0}
-      title={title}
+      title={
+        <React.Fragment>
+          {title}{' '}
+          {inProgress && <Button button="close" label={__('Cancel')} icon={ICONS.REMOVE} onClick={clearPublish} />}
+        </React.Fragment>
+      }
       subtitle={
         isStillEditing ? __('You are currently editing a claim.') : __('Publish something totally wacky and wild.')
       }
diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index 4185fc464..880b3eb1a 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -86,6 +86,8 @@ function PublishForm(props: Props) {
     disabled = false,
   } = props;
   const formDisabled = (!filePath && !editingURI) || publishing;
+  const isInProgress = filePath || editingURI || name || title;
+
   // If they are editing, they don't need a new file chosen
   const formValidLessFile =
     name && isNameValid(name, false) && title && bid && !(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
@@ -132,7 +134,7 @@ function PublishForm(props: Props) {
 
   return (
     <Fragment>
-      <PublishFile disabled={disabled || publishing} />
+      <PublishFile disabled={disabled || publishing} inProgress={isInProgress} />
       <div className={classnames({ 'card--disabled': formDisabled })}>
         <PublishText disabled={formDisabled} />
         <Card actions={<SelectThumbnail />} />
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index aa57c47f5..1c616a663 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -27,6 +27,7 @@
   transition: all var(--transition-duration) var(--transition-style);
   border-radius: var(--card-radius);
   color: var(--color-text);
+  font-size: var(--font-small);
 
   &:hover {
     color: var(--color-button-primary-text);