Add claim-overwrite prevention.

---Fixes:
#-2882: "Fix UX around publishing to already published URL".

---Changes:
1. Improved the error message (change color to red; emphasized the URL; tweaked the sentences a bit).
2. The `Publish` button will be grayed out in this scenario, until user explicitly decides to edit existing claim instead.

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add "tap to unmute" button for videos that start with audio muted _community pr!_ ([#4365](https://github.com/lbryio/lbry-desktop/pull/4365))
 - Allow upgrade bar to be dismissed per session _community pr!_ ([#4413](https://github.com/lbryio/lbry-desktop/pull/4413))
 - Email notification management page ([#4409](https://github.com/lbryio/lbry-desktop/pull/4409))
+- Publish Page improvements to prevent accidental overwrites of existing claims _community pr!_ ([#4461](https://github.com/lbryio/lbry-desktop/pull/4416))
 
 ### Changed
 

static/app-strings.json

@@ -824,6 +824,7 @@
   "Tags Selected": "Tags Selected",
   "After submitting, you will not see the changes immediately. Please check back in a few minutes.": "After submitting, you will not see the changes immediately. Please check back in a few minutes.",
   "You already have a claim with this name.": "You already have a claim with this name.",
+  "There was an error. Try %refreshing_the_app_link% to fix it. If that doesn't work, try pressing Ctrl+R/Cmd+R.": "There was an error. Try %refreshing_the_app_link% to fix it. If that doesn't work, try pressing Ctrl+R/Cmd+R.",
   "You are not currently sharing diagnostic data so this error was not reported.": "You are not currently sharing diagnostic data so this error was not reported.",
   "Find Channels to Follow": "Find Channels to Follow",
   "Sign in with lbry.tv to receive notifications about new content.": "Sign in with lbry.tv to receive notifications about new content.",
@@ -1208,6 +1209,8 @@
   "EB": "EB",
   "ZB": "ZB",
   "YB": "YB",
+  "Edit existing claim instead": "Edit existing claim instead",
+  "You already have a claim at %existing_uri%. Publishing will update (overwrite) your existing claim.": "You already have a claim at %existing_uri%. Publishing will update (overwrite) your existing claim.",
   "Save": "Save",
   "Saving...": "Saving...",
   "Downloading Update": "Downloading Update",

ui/component/publishForm/view.jsx

@@ -75,6 +75,7 @@ function PublishForm(props: Props) {
     name,
     channel,
     editingURI,
+    myClaimForUri,
     resolveUri,
     title,
     bid,
@@ -104,7 +105,12 @@ function PublishForm(props: Props) {
     bid &&
     !bidError &&
     !(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
-  const formValid = editingURI && !filePath ? isStillEditing && formValidLessFile : formValidLessFile;
+  const isOverwritingExistingClaim = !editingURI && myClaimForUri;
+  const formValid = isOverwritingExistingClaim
+    ? false
+    : editingURI && !filePath
+    ? isStillEditing && formValidLessFile
+    : formValidLessFile;
 
   let submitLabel;
   if (isStillEditing) {

ui/component/publishName/name-help-text.jsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import Button from 'component/button';
 import { buildURI } from 'lbry-redux';
+import I18nMessage from 'component/i18nMessage';
 
 type Props = {
   uri: ?string,
@@ -25,11 +26,24 @@ function NameHelpText(props: Props) {
 
     nameHelpText = (
       <React.Fragment>
-        {__('You already have a claim at')}
-        {` ${uri} `}
-        <Button button="link" label="Edit it" onClick={() => onEditMyClaim(myClaimForUri, editUri)} />
-        <br />
-        {__('Publishing will update your existing claim.')}
+        <div className="error__text">
+          <I18nMessage
+            tokens={{
+              existing_uri: (
+                <u>
+                  <em>{uri}</em>
+                </u>
+              ),
+            }}
+          >
+            You already have a claim at %existing_uri%. Publishing will update (overwrite) your existing claim.
+          </I18nMessage>
+        </div>
+        <Button
+          button="link"
+          label={__('Edit existing claim instead')}
+          onClick={() => onEditMyClaim(myClaimForUri, editUri)}
+        />
       </React.Fragment>
     );
   }