Restored simple search results page

frontend/src/components/category/CategoryList.tsx

@@ -4,7 +4,7 @@ import React, { FC, useState } from "react";
 import { Link, useNavigate } from "react-router";
 
 import { CategoryListHeader } from "components/category/CategoryListHeader";
-import { AironeLink } from "components/common";
+import { AironeLink, Loading } from "components/common";
 import { PaginationFooter } from "components/common/PaginationFooter";
 import { SearchBox } from "components/common/SearchBox";
 import { useAsyncWithThrow } from "hooks";
@@ -72,42 +72,46 @@ export const CategoryList: FC<Props> = ({ isEdit = false }) => {
       </Box>
 
       {/* Context of Category */}
-      <Grid container spacing={3}>
-        {categories.value?.results.map((category) => (
-          <Grid item md={4} key={category.id}>
-            <List
-              subheader={
-                <CategoryListHeader
-                  category={category}
-                  setToggle={() => setToggle(!toggle)}
-                  isEdit={isEdit}
-                />
-              }
-            >
-              <Box
-                sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  //overflowY: "scroll",
-                  //maxHeight: 300,
-                  ml: "40px",
-                }}
+      {categories.loading ? (
+        <Loading />
+      ) : (
+        <Grid container spacing={3}>
+          {categories.value?.results.map((category) => (
+            <Grid item md={4} key={category.id}>
+              <List
+                subheader={
+                  <CategoryListHeader
+                    category={category}
+                    setToggle={() => setToggle(!toggle)}
+                    isEdit={isEdit}
+                  />
+                }
               >
-                {category.models.map((models) => (
-                  <Typography
-                    key={models.id}
-                    component={AironeLink}
-                    to={entityEntriesPath(models.id)}
-                    variant="body2"
-                  >
-                    {models.name}
-                  </Typography>
-                ))}
-              </Box>
-            </List>
-          </Grid>
-        ))}
-      </Grid>
+                <Box
+                  sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    //overflowY: "scroll",
+                    //maxHeight: 300,
+                    ml: "40px",
+                  }}
+                >
+                  {category.models.map((models) => (
+                    <Typography
+                      key={models.id}
+                      component={AironeLink}
+                      to={entityEntriesPath(models.id)}
+                      variant="body2"
+                    >
+                      {models.name}
+                    </Typography>
+                  ))}
+                </Box>
+              </List>
+            </Grid>
+          ))}
+        </Grid>
+      )}
       <PaginationFooter
         count={categories.value?.count ?? 0}
         maxRowCount={EntityListParam.MAX_ROW_COUNT}

frontend/src/pages/DashboardPage.test.tsx

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 
-import { act, render } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
 import { setupServer } from "msw/node";
 import React from "react";
@@ -64,5 +64,8 @@ test("should match snapshot", async () => {
       wrapper: TestWrapper,
     });
   });
+  await waitFor(() => {
+    expect(screen.queryByTestId("loading")).not.toBeInTheDocument();
+  });
   expect(result).toMatchSnapshot();
 });

frontend/src/pages/DashboardPage.tsx

@@ -1,17 +1,91 @@
-import { Container } from "@mui/material";
+import { Box, Container, Typography, TypographyTypeMap } from "@mui/material";
+import { OverridableComponent } from "@mui/material/OverridableComponent";
 import { styled } from "@mui/material/styles";
 import React, { FC } from "react";
+import { Link, useNavigate } from "react-router";
+import { useAsync } from "react-use";
 
+import { Loading, SearchBox } from "components";
 import { CategoryList } from "components/category/CategoryList";
+import { useSimpleSearch } from "hooks";
+import { aironeApiClient } from "repository";
+import { entryDetailsPath } from "routes";
 
 const StyledContainer = styled(Container)({
   marginTop: "16px",
 });
 
+const ResultBox = styled(Box)({
+  marginTop: "40px",
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "32px",
+});
+
+const Result = styled(Typography)(({ theme }) => ({
+  color: theme.palette.primary.main,
+  textDecoration: "none",
+  flexGrow: 1,
+  maxWidth: theme.breakpoints.values.lg,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+})) as OverridableComponent<TypographyTypeMap>;
+
+const ResultEntityForEntry = styled(Typography)(({}) => ({
+  color: "gray",
+}));
+
 export const DashboardPage: FC = () => {
+  const navigate = useNavigate();
+  const [query, submitQuery] = useSimpleSearch();
+
+  const entries = useAsync(async () => {
+    if (query != null) {
+      return await aironeApiClient.getSearchEntries(query);
+    }
+  }, [query]);
+
+  // If there is only one search result, move to entry details page.
+  if (!entries.loading && entries.value?.length === 1) {
+    navigate(
+      entryDetailsPath(entries.value[0].schema?.id ?? 0, entries.value[0].id),
+    );
+  }
+
   return (
     <StyledContainer>
-      <CategoryList />
+      {entries.loading ? (
+        <Loading />
+      ) : entries.value ? (
+        <>
+          <SearchBox
+            placeholder="Search"
+            defaultValue={query}
+            onKeyPress={(e) => {
+              e.key === "Enter" && submitQuery(e.target.value);
+            }}
+            autoFocus
+          />
+          <ResultBox id="entry_list">
+            {entries.value &&
+              entries.value.map((entry) => (
+                <Box id="entry" key={entry.id}>
+                  <Result
+                    component={Link}
+                    to={entryDetailsPath(entry.schema?.id ?? 0, entry.id)}
+                  >
+                    {entry.name}
+                  </Result>
+                  <ResultEntityForEntry>
+                    {entry.schema?.name}
+                  </ResultEntityForEntry>
+                </Box>
+              ))}
+          </ResultBox>
+        </>
+      ) : (
+        <CategoryList />
+      )}
     </StyledContainer>
   );
 };