From 407b171c685e5593a97aa4e333bef9ccdf30af15 Mon Sep 17 00:00:00 2001
From: Hebi Li <lihebi.com@gmail.com>
Date: Thu, 3 Aug 2023 10:15:50 -0700
Subject: [PATCH] fix: dashboard regression: console warnings and
 refetchQueries (#425)

---
 ui/src/lib/fetch.tsx               |  2 +-
 ui/src/lib/store/repoMetaSlice.tsx |  2 +-
 ui/src/pages/dashboard.tsx         | 96 +++++++++++++++---------------
 3 files changed, 49 insertions(+), 51 deletions(-)

diff --git a/ui/src/lib/fetch.tsx b/ui/src/lib/fetch.tsx
index 8ac84a08..e97ffcd5 100644
--- a/ui/src/lib/fetch.tsx
+++ b/ui/src/lib/fetch.tsx
@@ -71,7 +71,7 @@ export async function doRemoteLoadRepo(client: ApolloClient<any>, id: string) {
       fetchPolicy: "no-cache",
     });
     // refetch queries
-    await client.refetchQueries({ include: ["GetRepos", "GetCollabRepos"] });
+    await client.refetchQueries({ include: ["GetDashboardRepos"] });
     // We need to do a deep copy here, because apollo client returned immutable objects.
     let pods = res.data.repo.pods.map((pod) => ({ ...pod }));
     let edges = res.data.repo.edges;
diff --git a/ui/src/lib/store/repoMetaSlice.tsx b/ui/src/lib/store/repoMetaSlice.tsx
index 917b280e..2a4b27fa 100644
--- a/ui/src/lib/store/repoMetaSlice.tsx
+++ b/ui/src/lib/store/repoMetaSlice.tsx
@@ -62,7 +62,7 @@ export const createRepoMetaSlice: StateCreator<
         id: repoId,
         name: repoName,
       },
-      refetchQueries: ["GetRepos", "GetCollabRepos"],
+      refetchQueries: ["GetDashboardRepos"],
     });
     set((state) =>
       produce(state, (state) => {
diff --git a/ui/src/pages/dashboard.tsx b/ui/src/pages/dashboard.tsx
index a6bd9347..cb4e5d4a 100644
--- a/ui/src/pages/dashboard.tsx
+++ b/ui/src/pages/dashboard.tsx
@@ -165,32 +165,32 @@ const KillRuntimeButton = ({ repo }) => {
     <Box>
       {/* last active: {getUpTime(info.lastActive)} */}
       <Tooltip title={getUpTime(info.lastActive)} placement="top">
-        {/* <Box> */}
-        <Tooltip title="Kill runtime">
-          <IconButton
-            disabled={killing}
-            size="small"
-            sx={{
-              "&:hover": {
-                color: theme.palette.error.main,
-              },
-            }}
-            onClick={async () => {
-              killRuntime({
-                variables: {
-                  sessionId: `${me.id}_${repo.id}`,
+        <Box>
+          <Tooltip title="Kill runtime">
+            <IconButton
+              disabled={killing}
+              size="small"
+              sx={{
+                "&:hover": {
+                  color: theme.palette.error.main,
                 },
-              });
-            }}
-          >
-            {killing ? (
-              <CircularProgress size="14px" />
-            ) : (
-              <StopCircleIcon fontSize="inherit" />
-            )}
-          </IconButton>
-        </Tooltip>
-        {/* </Box> */}
+              }}
+              onClick={async () => {
+                killRuntime({
+                  variables: {
+                    sessionId: `${me.id}_${repo.id}`,
+                  },
+                });
+              }}
+            >
+              {killing ? (
+                <CircularProgress size="14px" />
+              ) : (
+                <StopCircleIcon fontSize="inherit" />
+              )}
+            </IconButton>
+          </Tooltip>
+        </Box>
       </Tooltip>
     </Box>
   );
@@ -276,29 +276,27 @@ const RepoCard = ({ repo }) => {
   return (
     <Card sx={{ minWidth: 275, maxWidth: 275 }}>
       <CardContent>
-        <Typography variant="body1" gutterBottom>
-          <Stack direction="row" display="flex">
-            <Link
-              component={ReactLink}
-              to={`/repo/${repo.id}`}
-              sx={{
-                alignItems: "center",
-              }}
-            >
-              <Stack direction="row" display="inline-flex">
-                <DescriptionOutlinedIcon
-                  sx={{
-                    marginRight: "5px",
-                  }}
-                />
-                <Box component="span">{repo.name || "Untitled"}</Box>
-              </Stack>
-            </Link>
-            <Box ml="auto">
-              <StarButton repo={repo} />
-            </Box>
-          </Stack>
-        </Typography>
+        <Stack direction="row" display="flex">
+          <Link
+            component={ReactLink}
+            to={`/repo/${repo.id}`}
+            sx={{
+              alignItems: "center",
+            }}
+          >
+            <Stack direction="row" display="inline-flex">
+              <DescriptionOutlinedIcon
+                sx={{
+                  marginRight: "5px",
+                }}
+              />
+              <Box component="span">{repo.name || "Untitled"}</Box>
+            </Stack>
+          </Link>
+          <Box ml="auto">
+            <StarButton repo={repo} />
+          </Box>
+        </Stack>
         <Typography variant="subtitle2" color="gray">
           <Stack direction="row">
             Viewed{" "}
@@ -410,7 +408,7 @@ const RepoLists = () => {
       )}
       <Box display="flex" flexWrap="wrap">
         {repos.map((repo) => (
-          <Box sx={{ m: 1 }}>
+          <Box sx={{ m: 1 }} key={repo.id}>
             <RepoCard repo={repo} />
           </Box>
         ))}