add global (by user) filename search

Author: williamstein

src/packages/frontend/components/search-input.tsx

@@ -25,7 +25,7 @@ interface Props {
   on_change?: (value: string, opts: { ctrl_down: boolean }) => void;
   on_clear?: () => void;
   on_submit?: (value: string, opts: { ctrl_down: boolean }) => void;
-  buttonAfter?: JSX.Element;
+  buttonAfter?;
   disabled?: boolean;
   clear_on_submit?: boolean;
   on_down?: () => void;

src/packages/frontend/projects/filename-search.tsx

@@ -0,0 +1,101 @@
+/*
+Search for any file you've edited in the last year.
+*/
+
+import { useState } from "../app-framework";
+import { Input, Tooltip } from "antd";
+import api from "@cocalc/frontend/client/api";
+import ShowError from "@cocalc/frontend/components/error";
+import { TimeAgo } from "@cocalc/frontend/components/time-ago";
+import { PathLink } from "@cocalc/frontend/components/path-link";
+import { ProjectTitle } from "@cocalc/frontend/projects/project-title";
+import { MAX_FILENAME_SEARCH_RESULTS } from "@cocalc/util/db-schema/projects";
+
+const { Search } = Input;
+
+interface Props {}
+
+export function FilenameSearch({}: Props) {
+  const [search, setSearch] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [results, setResult] = useState<
+    { project_id: string; filename: string; time: Date }[] | null
+  >(null);
+  const [searched, setSearched] = useState<string>("");
+
+  const doSearch = async () => {
+    try {
+      setLoading(true);
+      setResult(null);
+      setSearched(search.trim());
+      if (search.trim()) {
+        setResult(
+          await api("projects/filename-search", { search: search.trim() }),
+        );
+      }
+    } catch (err) {
+      setError(`${err}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <Tooltip
+        title={`Search filenames of files you edited in the last year.  Use % as wildcard.  At most ${MAX_FILENAME_SEARCH_RESULTS} results shown.`}
+      >
+        <Search
+          allowClear
+          loading={loading}
+          value={search}
+          onChange={(e) => {
+            const search = e.target.value;
+            setSearch(search);
+            if (!search.trim()) {
+              setResult(null);
+            }
+          }}
+          placeholder="Search for filenames you edited..."
+          enterButton
+          onSearch={doSearch}
+        />
+      </Tooltip>
+      {((results != null && searched == search.trim()) || error) && (
+        <div
+          style={{
+            position: "absolute",
+            zIndex: 1,
+            background: "white",
+            padding: "15px",
+            border: "1px solid #ddd",
+            boxShadow: "0 0 15px #aaa",
+            overflow: "scroll",
+            maxHeight: "70vh",
+            left: "10px",
+            right: "10px",
+          }}
+        >
+          <ShowError error={error} setError={setError} />
+          {results != null && results.length > 0 && (
+            <div>
+              {results.map(({ project_id, filename, time }) => (
+                <div key={`${project_id}${filename}`}>
+                  <PathLink
+                    path={filename}
+                    project_id={project_id}
+                    trunc={20}
+                  />{" "}
+                  in <ProjectTitle project_id={project_id} trunc={20} />{" "}
+                  <TimeAgo style={{ float: "right" }} date={time} />
+                </div>
+              ))}
+            </div>
+          )}
+          {results != null && results.length == 0 && <div>no results</div>}
+        </div>
+      )}
+    </div>
+  );
+}

src/packages/frontend/projects/projects-page.tsx

@@ -27,6 +27,7 @@ import ProjectList from "./project-list";
 import { ProjectsListingDescription } from "./project-list-desc";
 import { ProjectsFilterButtons } from "./projects-filter-buttons";
 import { ProjectsSearch } from "./search";
+import { FilenameSearch } from "./filename-search";
 import ProjectsPageTour from "./tour";
 import { get_visible_hashtags, get_visible_projects } from "./util";
 import { COLORS } from "@cocalc/util/theme";
@@ -56,7 +57,7 @@ export const ProjectsPage: React.FC = () => {
 
   const all_projects_have_been_loaded = useTypedRedux(
     "projects",
-    "all_projects_have_been_loaded"
+    "all_projects_have_been_loaded",
   );
   const hidden = !!useTypedRedux("projects", "hidden");
   const deleted = !!useTypedRedux("projects", "deleted");
@@ -68,7 +69,7 @@ export const ProjectsPage: React.FC = () => {
 
   const selected_hashtags: Map<string, Set<string>> = useTypedRedux(
     "projects",
-    "selected_hashtags"
+    "selected_hashtags",
   );
 
   const project_map = useTypedRedux("projects", "project_map");
@@ -82,18 +83,18 @@ export const ProjectsPage: React.FC = () => {
         search,
         deleted,
         hidden,
-        "last_edited" /* "user_last_active" was confusing */
+        "last_edited" /* "user_last_active" was confusing */,
       ),
-    [project_map, user_map, deleted, hidden, filter, selected_hashtags, search]
+    [project_map, user_map, deleted, hidden, filter, selected_hashtags, search],
   );
   const all_projects: string[] = useMemo(
     () => project_map?.keySeq().toJS() ?? [],
-    [project_map?.size]
+    [project_map?.size],
   );
 
   const visible_hashtags: string[] = useMemo(
     () => get_visible_hashtags(project_map, visible_projects),
-    [visible_projects, project_map]
+    [visible_projects, project_map],
   );
 
   function clear_filters_and_focus_search_input(): void {
@@ -189,13 +190,18 @@ export const ProjectsPage: React.FC = () => {
               />
             </div>
           </Col>
-          <Col sm={8}>
+          <Col sm={4}>
             <Hashtags
               hashtags={visible_hashtags}
               selected_hashtags={selected_hashtags?.get(filter)}
               toggle_hashtag={(tag) => actions.toggle_hashtag(filter, tag)}
             />
           </Col>
+          <Col sm={4}>
+            <div ref={searchRef}>
+              <FilenameSearch />
+            </div>
+          </Col>
         </Row>
         <Row>
           <Col sm={12} style={{ marginTop: "1ex" }}>

src/packages/frontend/projects/search.tsx

@@ -58,6 +58,7 @@ export const ProjectsSearch: React.FC<Props> = ({
       }}
       placeholder="Search for projects (use /re/ for regexp)..."
       on_submit={(_, opts) => on_submit?.(!opts.ctrl_down)}
+      buttonAfter
     />
   );
 };

src/packages/next/pages/api/v2/projects/filename-search.ts

@@ -0,0 +1,23 @@
+/*
+API endpoint to find files that you've edited in the
+last year or so by their filename.
+It's under 'projects' since it's also a way to find the
+project you want to open.
+*/
+
+import getAccountId from "lib/account/get-account";
+import getParams from "lib/api/get-params";
+import { filenameSearch } from "@cocalc/server/projects/filename-search";
+
+export default async function handle(req, res) {
+  const { search } = getParams(req);
+  try {
+    const account_id = await getAccountId(req);
+    if (!account_id) {
+      throw Error("must be signed in");
+    }
+    res.json(await filenameSearch({ search, account_id }));
+  } catch (err) {
+    res.json({ error: `${err.message}` });
+  }
+}

src/packages/server/projects/filename-search.ts

@@ -0,0 +1,32 @@
+// Returns the most recent time the given user edited a file
+// whose name contains the search string.
+
+import getPool from "@cocalc/database/pool";
+import { MAX_FILENAME_SEARCH_RESULTS } from "@cocalc/util/db-schema/projects";
+
+export async function filenameSearch({
+  search,
+  account_id,
+}: {
+  search: string;
+  account_id: string;
+}): Promise<{ project_id: string; filename: string; time: Date }[]> {
+  const pool = getPool("long");
+  const { rows } = await pool.query(
+    `
+  SELECT project_id, filename, time
+FROM (
+  SELECT project_id, filename, time,
+    ROW_NUMBER() OVER(PARTITION BY filename ORDER BY time DESC) AS rn
+  FROM file_access_log
+  WHERE account_id = $1
+    AND filename ILIKE '%' || $2 || '%'
+) tmp
+WHERE rn = 1
+ORDER BY time DESC
+LIMIT ${MAX_FILENAME_SEARCH_RESULTS};
+`,
+    [account_id, search],
+  );
+  return rows;
+}

src/packages/util/db-schema/projects.ts

@@ -11,6 +11,8 @@ import { Table } from "./types";
 import { State } from "../compute-states";
 import { NOTES } from "./crm";
 
+export const MAX_FILENAME_SEARCH_RESULTS = 100;
+
 Table({
   name: "projects",
   rules: {