From 31c3a883cf0bf983862ce9eddeb869233f043a10 Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Wed, 18 Dec 2024 13:31:08 -0800
Subject: [PATCH] web: Don't use cache-only for status, reset button resets
 cache store

---
 ...onButton.tsx => RefreshConnectionButton.tsx} | 17 +++++++++++------
 .../DatabaseHeaderAndNav/RightHeaderButtons.tsx |  4 ++--
 .../components/StatusWithOptions/index.tsx      |  5 ++++-
 .../ForCommits/CommitLog/Uncommitted.tsx        |  9 ++++++---
 4 files changed, 23 insertions(+), 12 deletions(-)
 rename web/renderer/components/DatabaseHeaderAndNav/{ResetConnectionButton.tsx => RefreshConnectionButton.tsx} (72%)

diff --git a/web/renderer/components/DatabaseHeaderAndNav/ResetConnectionButton.tsx b/web/renderer/components/DatabaseHeaderAndNav/RefreshConnectionButton.tsx
similarity index 72%
rename from web/renderer/components/DatabaseHeaderAndNav/ResetConnectionButton.tsx
rename to web/renderer/components/DatabaseHeaderAndNav/RefreshConnectionButton.tsx
index 14e10ce3..d43febf2 100644
--- a/web/renderer/components/DatabaseHeaderAndNav/ResetConnectionButton.tsx
+++ b/web/renderer/components/DatabaseHeaderAndNav/RefreshConnectionButton.tsx
@@ -12,11 +12,16 @@ import { useState } from "react";
 import css from "./index.module.css";
 
 export default function ResetConnectionButton() {
-  const { mutateFn, loading, err, setErr } = useMutation({
+  const { mutateFn, loading, err, setErr, client } = useMutation({
     hook: useResetDatabaseMutation,
   });
   const [errorModalOpen, setErrorModalOpen] = useState(false);
 
+  const onClick = async () => {
+    await mutateFn();
+    await client.resetStore();
+  };
+
   const onClose = () => {
     setErrorModalOpen(false);
     setErr(undefined);
@@ -26,9 +31,9 @@ export default function ResetConnectionButton() {
     <>
       <Button.Link
         className={css.resetButton}
-        onClick={async () => mutateFn()}
-        data-tooltip-content="Reset connection"
-        data-tooltip-id="reset-connection"
+        onClick={onClick}
+        data-tooltip-content="Refresh connection"
+        data-tooltip-id="refresh-connection"
       >
         <SmallLoader
           loaded={!loading}
@@ -37,11 +42,11 @@ export default function ResetConnectionButton() {
           <IoReloadSharp />
         </SmallLoader>
       </Button.Link>
-      <Tooltip id="reset-connection" className={css.tooltip} />
+      <Tooltip id="refresh-connection" className={css.tooltip} />
       <Modal
         isOpen={errorModalOpen}
         onRequestClose={onClose}
-        title="Error resetting connection"
+        title="Error refreshing connection"
       >
         <ErrorMsg err={err} />
       </Modal>
diff --git a/web/renderer/components/DatabaseHeaderAndNav/RightHeaderButtons.tsx b/web/renderer/components/DatabaseHeaderAndNav/RightHeaderButtons.tsx
index 962f0069..d5d46789 100644
--- a/web/renderer/components/DatabaseHeaderAndNav/RightHeaderButtons.tsx
+++ b/web/renderer/components/DatabaseHeaderAndNav/RightHeaderButtons.tsx
@@ -2,7 +2,7 @@ import { Btn } from "@dolthub/react-components";
 import { OptionalRefParams } from "@lib/params";
 import { GiHamburgerMenu } from "@react-icons/all-files/gi/GiHamburgerMenu";
 import AddItemDropdown from "./AddItemDropdown";
-import ResetConnectionButton from "./ResetConnectionButton";
+import RefreshConnectionButton from "./RefreshConnectionButton";
 import css from "./index.module.css";
 
 type Props = {
@@ -13,7 +13,7 @@ type Props = {
 export default function RightHeaderButtons(props: Props) {
   return (
     <div className={css.topRight}>
-      <ResetConnectionButton />
+      <RefreshConnectionButton />
       <AddItemDropdown params={props.params} />
       <div className={css.menu}>
         <Btn onClick={props.onMenuClick}>
diff --git a/web/renderer/components/StatusWithOptions/index.tsx b/web/renderer/components/StatusWithOptions/index.tsx
index 97f88a8e..9f916eaa 100644
--- a/web/renderer/components/StatusWithOptions/index.tsx
+++ b/web/renderer/components/StatusWithOptions/index.tsx
@@ -83,7 +83,10 @@ function Inner(props: InnerProps) {
 }
 
 export default function StatusWithOptions(props: Props) {
-  const res = useGetStatusQuery({ variables: props.params });
+  const res = useGetStatusQuery({
+    variables: props.params,
+    fetchPolicy: "cache-and-network",
+  });
   if (res.loading) return <Loader loaded={false} />;
   if (res.error || !res.data || res.data.status.length === 0) {
     return null;
diff --git a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/Uncommitted.tsx b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/Uncommitted.tsx
index 58293425..3592637a 100644
--- a/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/Uncommitted.tsx
+++ b/web/renderer/components/pageComponents/DatabasePage/ForCommits/CommitLog/Uncommitted.tsx
@@ -1,3 +1,4 @@
+import { getCommit } from "@components/CommitGraph/utils";
 import Link from "@components/links/Link";
 import { Button, ErrorMsg, Loader } from "@dolthub/react-components";
 import {
@@ -5,12 +6,11 @@ import {
   StatusFragment,
   useGetStatusQuery,
 } from "@gen/graphql-types";
+import { useCommitOverview } from "@hooks/useCommitListForCommitGraph/useCommitOverview";
 import { RefParams, RequiredCommitsParams } from "@lib/params";
 import { diff } from "@lib/urls";
 import cx from "classnames";
 import { DiffSection } from "commit-graph";
-import { getCommit } from "@components/CommitGraph/utils";
-import { useCommitOverview } from "@hooks/useCommitListForCommitGraph/useCommitOverview";
 import css from "./index.module.css";
 
 type Props = {
@@ -127,7 +127,10 @@ function Inner(props: InnerProps) {
 }
 
 export default function Uncommitted(props: Props) {
-  const res = useGetStatusQuery({ variables: props.params });
+  const res = useGetStatusQuery({
+    variables: props.params,
+    fetchPolicy: "cache-and-network",
+  });
   if (res.loading) return <Loader loaded={false} />;
   if (res.error || !res.data || res.data.status.length === 0) {
     return null;