web: Better schema conflicts messaging

Author: tbantle22

web/renderer/components/pageComponents/DatabasePage/ForPullConflicts/index.tsx

@@ -1,6 +1,8 @@
 import PullConflictBreadcrumbs from "@components/breadcrumbs/PullConflictBreadcrumbs";
+import DocsLink from "@components/links/DocsLink";
 import NotDoltWrapper from "@components/util/NotDoltWrapper";
 import { Loader } from "@dolthub/react-components";
+import { errorMatches } from "@lib/errors/helpers";
 import { PullDiffParams } from "@lib/params";
 import { pulls } from "@lib/urls";
 import ForDefaultBranch from "../ForDefaultBranch";
@@ -46,19 +48,33 @@ type InnerProps = {
 function Inner(props: InnerProps) {
   const { activeTableName } = useConflictsContext();
   const res = useRowConflicts({ ...props.params, tableName: activeTableName });
+  if (res.loading) return <Loader loaded={!res.loading} />;
+  if (res.error && errorMatches("schema conflicts found", res.error)) {
+    return (
+      <div className={css.container}>
+        <h3>Schema conflicts found for {activeTableName}</h3>
+        <p>
+          Cannot view data conflict rows until schema conflicts have been
+          resolved. View instructions{" "}
+          <DocsLink path="/sql-reference/version-control/merges#schema">
+            here
+          </DocsLink>
+          .
+        </p>
+      </div>
+    );
+  }
   return (
     <div className={css.container}>
       <h3>
         Conflicted rows in <code>{activeTableName}</code>
       </h3>
-      <Loader loaded={!res.loading}>
-        <ConflictsTable
-          state={res.state}
-          fetchMore={res.fetchMore}
-          hasMore={res.hasMore}
-          error={res.error}
-        />
-      </Loader>
+      <ConflictsTable
+        state={res.state}
+        fetchMore={res.fetchMore}
+        hasMore={res.hasMore}
+        error={res.error}
+      />
     </div>
   );
 }

web/renderer/components/pageComponents/DatabasePage/ForPulls/PullActions/Merge/ErrorsWithDirections/MergeConflictsDirections.tsx

@@ -26,8 +26,8 @@ export default function MergeConflictsDirections({ params }: Props) {
       <h3>Merge and Resolve Conflicts</h3>
       <div className={css.innerModal}>
         <p>
-          Conflicts cannot be resolved on the web and must be resolved in a SQL
-          shell.
+          If you&apos;d like to manually resolve conflicts before merging,
+          follow these steps using the SQL shell.
         </p>
         <p>
           <DocsLink path="/sql-reference/version-control/dolt-sql-procedures#dolt_merge">

web/renderer/components/pageComponents/DatabasePage/ForPulls/PullActions/Merge/ResolveModal/index.tsx

@@ -46,7 +46,7 @@ export default function ResolveModal(props: Props) {
           onClick={async () => props.onClickWithResolve()}
           disabled={!!props.err}
         >
-          Resolve tables and merge
+          Resolve conflicts and merge
         </Button>
       }
     >

web/renderer/components/pageComponents/DatabasePage/ForPulls/PullActions/Merge/index.tsx

@@ -90,7 +90,7 @@ export default function Merge(props: Props) {
                 setState({ showDirections: !state.showDirections })
               }
             >
-              merge instructions
+              manual merge instructions
             </Button.Link>
             .
           </span>

web/renderer/components/pageComponents/DatabasePage/ForPulls/PullActions/Merge/useMergeButton.ts

@@ -58,7 +58,7 @@ export default function useMergeButton(params: PullDiffParams) {
       return;
     }
 
-    const tablesToResolve = state.tablesToResolve;
+    const { tablesToResolve } = state;
     conflictsRes.data.pullConflictsSummary.forEach(conflict => {
       tablesToResolve.set(conflict.tableName, ConflictResolveType.Ours);
     });