Add search expression support to admin interface

admin/src/components/reqlog/Search.tsx

@@ -31,6 +31,7 @@ const FILTER = gql`
   query HttpRequestLogFilter {
     httpRequestLogFilter {
       onlyInScope
+      searchExpression
     }
   }
 `;
@@ -39,6 +40,7 @@ const SET_FILTER = gql`
   mutation SetHttpRequestLogFilter($filter: HttpRequestLogFilterInput) {
     setHttpRequestLogFilter(filter: $filter) {
       onlyInScope
+      searchExpression
     }
   }
 `;
@@ -75,14 +77,21 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export interface SearchFilter {
   onlyInScope: boolean;
+  searchExpression: string;
 }
 
 function Search(): JSX.Element {
   const classes = useStyles();
   const theme = useTheme();
 
+  const [searchExpr, setSearchExpr] = useState("");
   const { loading: filterLoading, error: filterErr, data: filter } = useQuery(
-    FILTER
+    FILTER,
+    {
+      onCompleted: (data) => {
+        setSearchExpr(data.httpRequestLogFilter.searchExpression || "");
+      },
+    }
   );
 
   const [
@@ -111,6 +120,15 @@ function Search(): JSX.Element {
   const [filterOpen, setFilterOpen] = useState(false);
 
   const handleSubmit = (e: React.SyntheticEvent) => {
+    setFilterMutate({
+      variables: {
+        filter: {
+          ...withoutTypename(filter?.httpRequestLogFilter),
+          searchExpression: searchExpr,
+        },
+      },
+    });
+    setFilterOpen(false);
     e.preventDefault();
   };
 
@@ -142,10 +160,9 @@ function Search(): JSX.Element {
                 className={classes.iconButton}
                 onClick={() => setFilterOpen(!filterOpen)}
                 style={{
-                  color:
-                    filter?.httpRequestLogFilter !== null
-                      ? theme.palette.secondary.main
-                      : "inherit",
+                  color: filter?.httpRequestLogFilter?.onlyInScope
+                    ? theme.palette.secondary.main
+                    : "inherit",
                 }}
               >
                 {filterLoading || setFilterLoading ? (
@@ -161,6 +178,8 @@ function Search(): JSX.Element {
             <InputBase
               className={classes.input}
               placeholder="Search proxy logs…"
+              value={searchExpr}
+              onChange={(e) => setSearchExpr(e.target.value)}
               onFocus={() => setFilterOpen(true)}
             />
             <Tooltip title="Search">