[WD-13340] set owner and reviewers on each webpage

static/client/App.scss

@@ -13,6 +13,8 @@
 @include vf-p-side-navigation;
 @include vf-p-buttons;
 @include vf-p-tooltips;
+@include vf-p-chip;
+@include vf-p-search-and-filter;
 
 // Icons
 @include vf-p-icons;
@@ -47,3 +49,8 @@
   @extend %icon;
   @include vf-icon-logout(#ffffff);
 }
+
+// allow SearchAndFilter component increase height when there are several options selected (in Reviewers)
+.p-search-and-filter__search-container {
+  height: auto !important;
+}

static/client/components/OwnerAndReviewers/CustomSearchAndFilter.tsx

@@ -0,0 +1,100 @@
+// the existing SearchAndFilter component provided by react-components did not provide ability to have dynamic options
+import { type MouseEvent, useCallback, useEffect, useRef, useState } from "react";
+
+import type { ICustomSearchAndFilterProps } from "./OwnerAndReviewers.types";
+
+import type { IUser } from "@/services/api/types/users";
+
+const CustomSearchAndFilter = ({
+  label,
+  options,
+  selectedOptions,
+  placeholder,
+  onChange,
+  onRemove,
+  onSelect,
+}: ICustomSearchAndFilterProps): JSX.Element => {
+  const [dropdownHidden, setDropdownHidden] = useState(true);
+  const [containerExpanded, setContainerExpanded] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setDropdownHidden(!options.length);
+    setContainerExpanded(!!options.length);
+  }, [options]);
+
+  const handleSelect = useCallback(
+    (option: IUser) => () => {
+      onSelect(option);
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    },
+    [onSelect],
+  );
+
+  // a callback that closes an options dropdown when focus is not on an input field
+  const handleInputBlur = useCallback(() => {
+    setDropdownHidden(true);
+    setContainerExpanded(false);
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+  }, []);
+
+  // this callback is needed for handleSelect to have higher priority than handleInputBlur when selecting an option
+  const handleOptionMouseDown = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+  }, []);
+
+  return (
+    <div className="p-search-and-filter">
+      <p className="p-text--small-caps" id="owner-input">
+        {label}
+      </p>
+      <div
+        aria-expanded={containerExpanded}
+        className="p-search-and-filter__search-container"
+        data-active="true"
+        data-empty="true"
+      >
+        {selectedOptions.map((option) => (
+          <span className="p-chip">
+            <span className="p-chip__value">{option.name}</span>
+            <button className="p-chip__dismiss" onClick={onRemove(option)}>
+              Dismiss
+            </button>
+          </span>
+        ))}
+        <form className="p-search-and-filter__box" data-overflowing="false">
+          <input
+            aria-labelledby="owner-input"
+            autoComplete="off"
+            className="p-search-and-filter__input"
+            id="search"
+            name="search"
+            onBlur={handleInputBlur}
+            onChange={onChange}
+            placeholder={placeholder}
+            ref={inputRef}
+            type="search"
+          />
+        </form>
+      </div>
+      <div aria-hidden={dropdownHidden} className="p-search-and-filter__panel">
+        <div className="p-filter-panel-section">
+          <div aria-expanded="false" className="p-filter-panel-section__chips">
+            {options.map((option) => (
+              <button className="p-chip" onClick={handleSelect(option)} onMouseDown={handleOptionMouseDown}>
+                <span className="p-chip__value">{option.name}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomSearchAndFilter;

static/client/components/OwnerAndReviewers/Owner.tsx

@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useState } from "react";
+
+import CustomSearchAndFilter from "./CustomSearchAndFilter";
+import { useUsersRequest } from "./OwnerAndReviewers.hooks";
+import type { IOwnerAndReviewersProps } from "./OwnerAndReviewers.types";
+
+import { PagesServices } from "@/services/api/services/pages";
+import { type IUser } from "@/services/api/types/users";
+
+const Owner = ({ page }: IOwnerAndReviewersProps): JSX.Element => {
+  const [currentOwner, setCurrentOwner] = useState<IUser | null>(null);
+  const { options, setOptions, handleChange } = useUsersRequest();
+
+  useEffect(() => {
+    setCurrentOwner(page.owner);
+  }, [page]);
+
+  const handleRemoveOwner = useCallback(
+    () => () => {
+      setCurrentOwner(null);
+      PagesServices.setOwner({}, page.id);
+    },
+    [page],
+  );
+
+  const selectOwner = useCallback(
+    (option: IUser) => {
+      PagesServices.setOwner(option, page.id);
+      setOptions([]);
+      setCurrentOwner(option);
+      // mutate the tree structure element to reflect the recent change
+      page.owner = option;
+    },
+    [page, setOptions],
+  );
+
+  return (
+    <CustomSearchAndFilter
+      label="Owner"
+      onChange={handleChange}
+      onRemove={handleRemoveOwner}
+      onSelect={selectOwner}
+      options={options}
+      placeholder="Select an owner"
+      selectedOptions={currentOwner ? [currentOwner] : []}
+    />
+  );
+};
+
+export default Owner;

static/client/components/OwnerAndReviewers/OwnerAndReviewers.hooks.ts

@@ -0,0 +1,27 @@
+import { type ChangeEvent, useCallback, useState } from "react";
+
+import type { IUseUsersRequest } from "./OwnerAndReviewers.types";
+
+import { UsersServices } from "@/services/api/services/users";
+import { UtilServices } from "@/services/api/services/utils";
+import type { IUser } from "@/services/api/types/users";
+
+const debouncedRequest = UtilServices.debounce(UsersServices.getUsers, 500);
+
+export const useUsersRequest = (): IUseUsersRequest => {
+  const [options, setOptions] = useState<IUser[]>([]);
+
+  const handleChange = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    if (value.length >= 2) {
+      const users = await debouncedRequest(value);
+      if (users?.data?.length) {
+        setOptions(users.data);
+      }
+    } else {
+      setOptions([]);
+    }
+  }, []);
+
+  return { options, setOptions, handleChange };
+};

static/client/components/OwnerAndReviewers/OwnerAndReviewers.tsx

@@ -0,0 +1,13 @@
+import Owner from "./Owner";
+import type { IOwnerAndReviewersProps } from "./OwnerAndReviewers.types";
+import Reviewers from "./Reviewers";
+
+const OwnerAndReviewers = ({ page }: IOwnerAndReviewersProps): JSX.Element => (
+  <>
+    <Owner page={page} />
+    <div className="u-sv3" />
+    <Reviewers page={page} />
+  </>
+);
+
+export default OwnerAndReviewers;

static/client/components/OwnerAndReviewers/OwnerAndReviewers.types.ts

@@ -0,0 +1,24 @@
+import type { ChangeEvent, Dispatch, SetStateAction } from "react";
+
+import type { IPage } from "@/services/api/types/pages";
+import type { IUser } from "@/services/api/types/users";
+
+export interface IOwnerAndReviewersProps {
+  page: IPage;
+}
+
+export interface ICustomSearchAndFilterProps {
+  label: string;
+  options: IUser[];
+  selectedOptions: IUser[];
+  placeholder: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onRemove: (option?: IUser) => () => void;
+  onSelect: (option: IUser) => void;
+}
+
+export interface IUseUsersRequest {
+  options: IUser[];
+  setOptions: Dispatch<SetStateAction<IUser[]>>;
+  handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}

static/client/components/OwnerAndReviewers/Reviewers.tsx

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from "react";
+
+import CustomSearchAndFilter from "./CustomSearchAndFilter";
+import { useUsersRequest } from "./OwnerAndReviewers.hooks";
+import type { IOwnerAndReviewersProps } from "./OwnerAndReviewers.types";
+
+import { PagesServices } from "@/services/api/services/pages";
+import { type IUser } from "@/services/api/types/users";
+
+const Reviewers = ({ page }: IOwnerAndReviewersProps): JSX.Element => {
+  const [currentReviewers, setCurrentReviewers] = useState<IUser[]>([]);
+  const { options, setOptions, handleChange } = useUsersRequest();
+
+  useEffect(() => {
+    setCurrentReviewers(page.reviewers);
+  }, [page]);
+
+  const handleRemoveReviewer = useCallback(
+    (option?: IUser) => () => {
+      const newReviewers = currentReviewers.filter((r) => r.id !== option?.id);
+      setCurrentReviewers(newReviewers);
+      PagesServices.setReviewers(newReviewers, page.id);
+    },
+    [currentReviewers, page],
+  );
+
+  const selectReviewer = useCallback(
+    (option: IUser) => {
+      // check if a person with the same email already exists
+      // proceed with setting the reviewer only if not
+      if (!currentReviewers.find((r) => r.email === option.email)) {
+        const newReviewers = [...currentReviewers, option];
+        PagesServices.setReviewers(newReviewers, page.id);
+        setOptions([]);
+        setCurrentReviewers(newReviewers);
+        // mutate the tree structure element to reflect the recent change
+        page.reviewers = newReviewers;
+      }
+    },
+    [page, currentReviewers, setOptions],
+  );
+
+  return (
+    <CustomSearchAndFilter
+      label="Reviewers"
+      onChange={handleChange}
+      onRemove={handleRemoveReviewer}
+      onSelect={selectReviewer}
+      options={options}
+      placeholder="Select reviewers"
+      selectedOptions={currentReviewers}
+    />
+  );
+};
+
+export default Reviewers;

static/client/components/OwnerAndReviewers/index.ts

@@ -0,0 +1 @@
+export { default } from "./OwnerAndReviewers";

static/client/components/Search/Search.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { type MouseEvent, useCallback, useRef, useState } from "react";
 
 import { SearchBox } from "@canonical/react-components";
 import { useNavigate } from "react-router-dom";
@@ -16,7 +16,7 @@ const Search = (): JSX.Element => {
 
   const [matches, setMatches] = useState<IMatch[]>([]);
 
-  const searchRef = useRef(null);
+  const searchRef = useRef<HTMLInputElement>(null);
 
   const handleChange = useCallback(
     (inputValue: string) => {
@@ -33,7 +33,7 @@ const Search = (): JSX.Element => {
     (selectedItem: IMatch) => () => {
       setMatches([]);
       if (searchRef?.current) {
-        (searchRef.current as any).value = "";
+        searchRef.current.value = "";
       }
       // if the selected webpage has a different project, propagate to the rest of the app via the store
       if (selectedItem.project !== selectedProject?.name) {
@@ -45,27 +45,42 @@ const Search = (): JSX.Element => {
     [data, navigate, searchRef, selectedProject, setSelectedProject],
   );
 
+  // a callback that closes an options dropdown when focus is not on an input field
+  const handleInputBlur = useCallback(() => {
+    setMatches([]);
+    if (searchRef?.current) {
+      searchRef.current.value = "";
+    }
+  }, []);
+
+  // this callback is needed for handleSelect to have higher priority than handleInputBlur when selecting an option
+  const handleOptionMouseDown = useCallback((event: MouseEvent<HTMLLIElement>) => {
+    event.preventDefault();
+  }, []);
+
   return (
-    <div className="l-search-container">
-      {
-        <SearchBox
-          className="l-search-box"
-          disabled={!(data?.length && data[0]?.data)}
-          onChange={handleChange}
-          placeholder="Search a webpage"
-          ref={searchRef}
-        />
-      }
-      {matches.length >= 0 && (
-        <ul className="l-search-dropdown">
-          {matches.map((match) => (
-            <li className="l-search-item" onClick={handleSelect(match)}>
-              {match.name} - {match.title}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
+    <>
+      <SearchBox
+        autocomplete="off"
+        className="l-search-box"
+        disabled={!(data?.length && data[0]?.data)}
+        onBlur={handleInputBlur}
+        onChange={handleChange}
+        placeholder="Search a webpage"
+        ref={searchRef}
+      />
+      <div className="l-search-container">
+        {matches.length >= 0 && (
+          <ul className="l-search-dropdown">
+            {matches.map((match) => (
+              <li className="l-search-item" onClick={handleSelect(match)} onMouseDown={handleOptionMouseDown}>
+                {match.name} - {match.title}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </>
   );
 };
 

static/client/components/Search/_Search.scss

@@ -9,9 +9,10 @@
     list-style-type: none;
     margin: 0;
     max-height: calc(100vh - 200px);
+    overflow: auto;
     padding: 0;
     position: absolute;
-    top: 50px;
+    top: -10px;
     width: 100%;
     z-index: 10;