web: add filter to own commits button (#43)

* chore: refactor commit search into own component

This just sets up the component to make it easier to work with for the
comming commits, but I did want to pull this out on its own to make it
clear what code is just moved around and what is added as a result of
the new feature.

* feat: add clear button to commit search

Does what it says on the tin, because unfortunately MUI doesn't give
that to us for free when using `<TextField />` - they do on
`<Autocomplete />`, however.

* feat: add show own commits button

I thought of a few ways about implementing this, but figured the
cleanest was to just add the login data that we already have as an
`endAdornment` on the `<TextField />`.

In the event that we don't have `loginData` (for whatever reason), we
just don't show the button - but this doesn't affect any of the existing
functionality.

* Remove unnecessary `<Stack />` component

qvet-web/src/components/CommitSummary.tsx

@@ -1,4 +1,5 @@
-import { TextField } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import { IconButton, TextField, Tooltip } from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Collapse from "@mui/material/Collapse";
@@ -12,9 +13,12 @@ import AddEmbargoDialog from "src/components/AddEmbargoDialog";
 import CommitTable from "src/components/CommitTable";
 import ConfigStatus from "src/components/ConfigStatus";
 import DeploymentHeadline from "src/components/DeploymentHeadline";
+import useLogin from "src/hooks/useLogin";
 import { Commit, CommitComparison, Repository } from "src/octokitHelpers";
 import { Config } from "src/utils/config";
 
+import UserAvatar from "./UserAvatar";
+
 interface CommitSummaryProps {
   comparison: CommitComparison;
   config: Config;
@@ -96,11 +100,7 @@ export default function CommitSummary({
           <RepoSummary repo={repo} />
           <RepoActions baseSha={comparison.base_commit.sha} />
         </Stack>
-        <TextField
-          variant="outlined"
-          placeholder="Search commits"
-          onChange={(e) => setSearch(e.target.value)}
-        />
+        <CommitFiltering setSearch={setSearch} search={search} />
       </Box>
       {
         <Collapse in={!!deploymentHeadline || !!configStatus}>
@@ -173,3 +173,47 @@ const useFuzzySearch = (list: Array<Commit>, search: string) => {
   // the entire list for `.search("")` which is sad
   return search ? fuse.search(search).map((value) => value.item) : list;
 };
+
+const CommitFiltering = ({
+  search,
+  setSearch,
+}: {
+  readonly search: string;
+  readonly setSearch: React.Dispatch<React.SetStateAction<string>>;
+}) => {
+  const loginData = useLogin();
+
+  return (
+    <TextField
+      variant="outlined"
+      placeholder="Search commits"
+      value={search}
+      onChange={(e) => setSearch(e.target.value)}
+      InputProps={{
+        endAdornment: (
+          <>
+            <IconButton
+              onClick={() => setSearch("")}
+              size="small"
+              sx={{
+                visibility: search ? "visible" : "hidden",
+              }}>
+              <ClearIcon />
+            </IconButton>
+            {loginData.data ? (
+              <IconButton
+                onClick={() => setSearch(loginData.data.login)}
+                size="small">
+                <Tooltip title="Show my commits" arrow>
+                  <span>
+                    <UserAvatar user={loginData.data} />
+                  </span>
+                </Tooltip>
+              </IconButton>
+            ) : null}
+          </>
+        ),
+      }}
+    />
+  );
+};