@rpcbase/client 0.216.0 → 0.218.0

package/access-control/PolicyEditor/index.tsx

@@ -1,16 +1,68 @@
 import {useState} from "react"
 
 
+const POLICY_EFFECT = [
+  {
+    name: "Grant",
+    key: "grant",
+  },
+  {
+    name: "Deny",
+    key: "deny",
+  },
+]
+
 const TARGET_TYPES = [
   {
     name: "Collection:",
-    key: "collection",
-    description: "Applies to all documents within the collection.",
+    key: "collections",
+    description: "Applies to all documents within the collection",
+  },
+  {
+    name: "Documents:",
+    key: "documents",
+    description: "Applies only to certain specific documents",
+  },
+  {
+    name: "Field:",
+    key: "fields",
+    description: "Applies only specific fields of documents",
+  },
+]
+
+const OPERATIONS = [
+  {
+    name: "Create",
+    key: "create",
+  },
+  {
+    name: "Read",
+    key: "read",
+  },
+  {
+    name: "Update",
+    key: "update",
+  },
+  {
+    name: "Delete",
+    key: "delete",
+  },
+  {
+    name: "All of the above",
+    key: "all",
+  },
+]
+
+
+//
+const APPLIES_TO = [
+  {
+    name: "Users",
+    key: "users",
   },
   {
-    name: "Document:",
-    key: "document",
-    description: "Applies only to certain specific documents.",
+    name: "Groups",
+    key: "groups",
   },
 ]
 
@@ -24,7 +76,31 @@ export const PolicyEditor = () => {
   return (
     <div>
       <h6>Policy Editor</h6>
-      <br />
+      <hr />
+
+      <h6>Effect:</h6>
+      <div className="mb-3" style={{maxWidth: 300}}>
+        {POLICY_EFFECT.map((type) => (
+          <div key={type.key} className="d-flex flex-row mb-1">
+            <input
+              className="form-check-input"
+              type="radio"
+              name="targetTypeOptions"
+              id={type.key}
+              value={type.key}
+              checked={targetType === type.key}
+              onChange={onChangeTargetType}
+            />
+            <label
+              className="form-check-label cursor-pointer ps-2"
+              htmlFor={type.key}
+            >
+              <b>{type.name}</b>
+            </label>
+          </div>
+        ))}
+      </div>
+
       <div className="d-flex flex-row">
         <div className="me-2">
           <h6>Target Type:</h6>
@@ -58,11 +134,30 @@ export const PolicyEditor = () => {
           </div>
         </div>
       </div>
-      grant / deny
-      <br />
-      Scope: document, field
-      <br />
-      operation: create read write delete
+
+      <h6 className="mt-3">Operation:</h6>
+      <div className="" style={{maxWidth: 300}}>
+        {OPERATIONS.map((type) => (
+          <div key={type.key} className="d-flex flex-row mb-1">
+            <input
+              className="form-check-input"
+              type="radio"
+              name="targetTypeOptions"
+              id={type.key}
+              value={type.key}
+              checked={targetType === type.key}
+              onChange={onChangeTargetType}
+            />
+            <label
+              className="form-check-label cursor-pointer ps-2"
+              htmlFor={type.key}
+            >
+              <b>{type.name}</b>
+            </label>
+          </div>
+        ))}
+      </div>
+
       <br />
       to attributes / conditions add support for expiry date
     </div>

package/form/Input.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 // import {NestedKeyOf} from "@rpcbase/client/types"
+import _snakeCase from "lodash/snakeCase"
 import _get from "lodash/get"
 import {useFormContext} from "./hook-form"
 
@@ -33,7 +34,7 @@ export const Input = <T,>({
 }: InputProps<T> & React.InputHTMLAttributes<HTMLInputElement>) => {
   const form = useFormContext()
 
-  const id = idProp || `input-${field}`
+  const id = idProp || _snakeCase(`input_${field}`)
 
   const error = _get(form.formState.errors, field)
 

package/hashState.js

@@ -108,7 +108,7 @@ export const HashStateProvider = ({children}) => {
 
   useEffect(() => {
     apply_hash_state(hashState)
-    window.__PRIVATE_HASH_STATE_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = hashState
+    window.__PRIVATE_HASH_STATE_DO_NOT_USE__ = hashState
   }, [hashState])
 
   const serializeHashState = useCallback((payload) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.216.0",
+  "version": "0.218.0",
   "scripts": {
     "build": "../../node_modules/.bin/wireit",
     "test": "../../node_modules/.bin/wireit"

package/ui/Search/SearchHistory/index.js

@@ -18,6 +18,10 @@ export const SearchHistory = ({setSearchInput}) => {
     setSearchInput(item.query)
   }
 
+  if (!searchHistory.length > 0) {
+    return null
+  }
+
   return (
     <>
       <div className="search-history-header ps-3 pb-2 mt-2 fw-bold border-bottom">

package/ui/Search/SearchHistory/useSearchHistory.tsx

@@ -6,13 +6,14 @@ import {getUid} from "@rpcbase/client/auth/getUid"
 
 import stripDiacritics from "react-bootstrap-typeahead/cjs/utils/stripDiacritics"
 
+
 const HISTORY_MAX_RESULTS = 10
 
 export const useSearchHistory = () => {
   const user_id = getUid()
 
   const [history, setHistory] = useState([])
-  const historyQuery = useQuery("PersistedEvent", {_owners: {$in: [user_id]}, type: "search_query"})
+  const historyQuery = useQuery("SearchHistory", {_owners: {$in: [user_id]}})
 
   // Initial load history
   useEffect(() => {

package/ui/Search/SearchResults/index.tsx

@@ -0,0 +1,90 @@
+import _pick from "lodash/pick"
+import _snakeCase from "lodash/snakeCase"
+
+import {useHashState} from "../../../hashState"
+
+import {useActiveListItemIndex} from "../../helpers/useActiveListItemIndex"
+import {useScrollSelectorIntoView} from "../../helpers/useScrollSelectorIntoView"
+
+// import save_search from "rpc!server/search-indexer/save_search"
+
+export const SearchResults = ({
+  id =  "search-results",
+  query,
+  results,
+  searchContext,
+  onCompleteSearch,
+  children,
+  renderResultItem,
+}) => {
+  const {serializeHashState} = useHashState()
+
+  const getItemId = (i) => `${id}-result-${i}`
+
+  const getLink = (item) =>{
+    return `#${_snakeCase(item)}`
+  }
+
+  const onSelectItem = (selectedIndex) => {
+    // console.log("ON SELEC", selectedIndex)
+    serializeHashState({link: getLink(results[selectedIndex])})
+    // if (window)
+
+    onCompleteSearch()
+    // go to selected item
+    // const targetItem = items[selectedIndex]
+    // applyTargetItem(targetItem)
+  }
+
+  const {activeItemIndex} = useActiveListItemIndex({items: results, onSelectItem})
+
+  useScrollSelectorIntoView(`#${getItemId(activeItemIndex)}`)
+
+  return (
+    <div>
+      <div className="list-group list-group-flush">
+        {results.map((item: any, index: number) => {
+
+          const key = getItemId(index)
+
+          const onClick = () => {
+            onSelectItem(index)
+          }
+
+          return (
+            <a
+              id={key}
+              key={key}
+              className={cx(
+                "list-group-item list-group-item-action d-flex justify-content-between align-items-start",
+                {active: activeItemIndex === index},
+              )}
+              href={getLink(item)}
+              onClick={onClick}
+            >
+              <div className="ms-2 me-auto">
+                {renderResultItem(item, index)}
+                {/* {Object.keys(item.highlight).map((highlightKey, j) => (
+                  <div
+                    key={`highlight-${j}`}
+                    className="item-highlight"
+                    dangerouslySetInnerHTML={{__html: item.highlight[highlightKey][0]}}
+                  />
+                ))} */}
+                <small className="fst-italic">{"displaySub"}</small>
+              </div>
+              {/* <span className="badge text-bg-light rounded-pill">
+                {item.fuzzy_score?.toFixed(2)}
+              </span> */}
+              {/* <span className="badge bg-primary rounded-pill">{item._score.toFixed(2)}</span> */}
+            </a>
+          )
+
+        })}
+
+        {/* children can be components like search history, etc */}
+        {children}
+      </div>
+    </div>
+  )
+}

package/ui/Search/index.tsx

@@ -1,5 +1,5 @@
 import assert from "assert"
-import {useEffect, useState, useContext, useRef, useCallback} from "react"
+import {ReactNode, useEffect, useState, useRef, useCallback} from "react"
 import {Typeahead} from "react-bootstrap-typeahead"
 import Overlay from "react-bootstrap/Overlay"
 import _throttle from "lodash/throttle"
@@ -27,19 +27,22 @@ const MIN_SEARCH_LENGTH = 2
 const PLACEHOLDER = "Search..."
 
 export const Search = ({
+  id = "search-input",
   minLength = MIN_SEARCH_LENGTH,
   onSearch,
+  renderResultItem,
 }: {
+  id?: string,
   minLength?: number
-  onSearch: (queryStr: string) => Array<any>
+  onSearch: (queryStr: string) => Promise<Array<any>>
+  renderResultItem: (item: any, index: number) => ReactNode
 }) => {
   // const envContext = useEnvContext()
   // const itemContext = useContext(ItemContext)
-
   const typeaheadRef = useRef()
   const wrapperRef = useRef()
 
-  const [results, setResults] = useState([])
+  const [results, setResults] = useState<Array<any>>([])
   const [isLoading, setIsLoading] = useState(false)
   const [isFocused, setIsFocused] = useState(false)
   const [showResults, setShowResults] = useState(false)
@@ -116,17 +119,9 @@ export const Search = ({
           setIsLoading(true)
         }, 100)
 
-        // const res = await search_anything({
-        //   group_id: envContext.groupId,
-        //   str,
-        // })
-
-        const results = await onSearch(queryStr)
-
-        // assert(res.status === "ok")
-        // console.log("search res", res)
+        const searchResults = await onSearch(queryStr)
 
-        setResults(results)
+        setResults(searchResults)
         clearTimeout(tm)
         setIsLoading(false)
       },
@@ -216,16 +211,16 @@ export const Search = ({
   return (
     <>
       <div
-        id="search-anything-wrapper"
+        id={id}
         ref={wrapperRef}
         className="d-flex mx-auto w-100"
         // style={{height: 32, position: "relative", maxWidth: 804}}
         style={{height: 32, position: "relative"}}
       >
         <Typeahead
-          id="search-anything"
+          id={`${id}-typeahead`}
           ref={typeaheadRef}
-          className={cx("search-anything-typeahead w-100", {"is-focused": isFocused})}
+          className={cx("search-typeahead w-100", {"is-focused": isFocused})}
           placeholder={PLACEHOLDER}
           inputProps={{
             placeholder: PLACEHOLDER,
@@ -275,7 +270,7 @@ export const Search = ({
       >
         {({style, ...overlayProps}) => (
           <div
-            id="search-anything-overlay"
+            id={`${id}-overlay`}
             {...overlayProps}
             className="shadow-lg"
             style={{
@@ -286,10 +281,12 @@ export const Search = ({
             }}
           >
             <SearchResults
+              id={id}
               query={currentInputValue.trim()}
               results={results}
               onCompleteSearch={onCompleteSearch}
               searchContext={selected[0]}
+              renderResultItem={renderResultItem}
             >
               <SearchHistory setSearchInput={setSearchInput} />
             </SearchResults>

package/ui/helpers/useActiveListItemIndex/index.tsx

@@ -1,9 +1,12 @@
 import {useState, useEffect} from "react"
 
+
 export const useActiveListItemIndex = ({items, activeItem, onSelectItem}) => {
+
   const [activeItemIndex, setActiveItemIndex] = useState(() => {
     let initialIndex = items.findIndex((item) => item.obj?._id === activeItem?._id)
-    if (!initialIndex) initialIndex = 0
+    if (initialIndex < 0) initialIndex = 0
+    console.log("INITIAL INDEX", initialIndex)
     return initialIndex
   })
 

package/ui/nav/ContentView/ContentViewContext.ts

@@ -11,6 +11,7 @@ type ContentViewContextType = {
   contentViewHeight: number;
   sidebarWidth: number;
   setSidebarWidth: Dispatch<SetStateAction<number>>;
+  headerHeight: number;
 };
 
 export const ContentViewContext = createContext<ContentViewContextType>(

package/ui/nav/ContentView/index.tsx

@@ -13,9 +13,11 @@ const SIDEVIEW_WIDTH = "sideview_width"
 
 export const ContentView = memo(
   ({
+    headerHeight = 45,
     children,
     storageKeyPrefix: _storageKeyPrefix,
   }: {
+    headerHeight?: number;
     children: ReactNode;
     storageKeyPrefix?: string;
   }) => {
@@ -76,6 +78,7 @@ export const ContentView = memo(
           contentViewHeight,
           sidebarWidth,
           setSidebarWidth,
+          headerHeight,
         }}
       >
         <div
@@ -85,15 +88,15 @@ export const ContentView = memo(
             flexDirection: "row",
           }}
         >
-          <div id="sidebar-container" />
+          <div id="sidebar-container" style={{top: headerHeight}} />
 
           <div
             ref={contentViewRef}
             key={`content-wrapper-${"content_view_"}`}
             style={{
               width: `calc(100vw - ${contentWidthOffset}px)`,
-              height: "calc(100vh - 45px)",
-              marginTop: 45,
+              height: `calc(100vh - ${headerHeight}px)`,
+              marginTop: headerHeight,
               overflowY: "scroll",
               marginLeft: sidebarWidth,
             }}

package/ui/nav/HeaderContainer/header.scss

@@ -10,7 +10,6 @@ $img-border-radius: 3px;
 #header-container {
   border-bottom: 1px solid $black;
   background-color: $black !important;
-  height: 45px;
 
   .nav-link {
     color: $gray-200;

package/ui/nav/HeaderContainer/index.tsx

@@ -28,7 +28,7 @@ import {ReactNode} from "react"
 // import EnvSettingsDropdown from "./components/EnvSettingsDropdown"
 
 import "./header.scss"
-
+import {useContentViewContext} from "../ContentView/ContentViewContext"
 
 // const DefaultHeader = () => {
 //   return (
@@ -136,14 +136,18 @@ import "./header.scss"
 //   )
 // }
 
-export const HeaderContainer = ({children}: {children: ReactNode}) => {
+export const HeaderContainer = ({children}: { children: ReactNode }) => {
+  const contentViewContext = useContentViewContext()
 
   if (!children) return null
 
   return (
     <nav
       id="header-container"
-      className={"d-flex align-items-center fixed-top bg-dark flex-md-nowrap shadow p-0 text-light"}
+      className={
+        "d-flex align-items-center fixed-top bg-dark flex-md-nowrap shadow p-0 text-light"
+      }
+      style={{height: contentViewContext.headerHeight}}
     >
       {children}
     </nav>

package/ui/nav/SidebarContainer/sidebar-container.scss

@@ -2,7 +2,6 @@
 
 #sidebar-container {
   position: fixed;
-  top: 45px;
   left: 0;
   max-height: calc(100vh - 45px);
 

package/ui/Search/SearchResults/getActions.js

@@ -1,6 +0,0 @@
-
-const getActions = (pathname) => {
-  return []
-}
-
-export default getActions

package/ui/Search/SearchResults/index.js

@@ -1,188 +0,0 @@
-import assert from "assert"
-import _pick from "lodash/pick"
-import fuzzysort from "fuzzysort"
-
-import page from "../../../page"
-// import {withHashState} from "@rpcbase/client/hashState"
-
-// import COLLECTIONS from "config/collections"
-// import {useEnvContext} from "helpers/EnvContext"
-import {useActiveListItemIndex} from "../../helpers/useActiveListItemIndex"
-import {useScrollSelectorIntoView} from "../../helpers/useScrollSelectorIntoView"
-
-import useCombinedResultsActions from "./useCombinedResultsActions"
-
-// import save_search from "rpc!server/search-indexer/save_search"
-const save_search = async() => null
-
-
-const resolveTargetUrl = (encodeHashLink, item) => {
-  let targetUrl
-
-  // Message
-  if (item._source.type === "message") {
-    const pageUrl = "/channel"
-    const channelId = item._source.channel_id
-    const convId = item._source.conversation_id
-    targetUrl = `${pageUrl}/${channelId}#${encodeHashLink({
-      activeConversationId: convId, // conversation
-      scrollToMessageId: item._id, // highlighted message
-    })}`
-  }
-  // Other items
-  else {
-    const pageUrl = COLLECTIONS[item.meta.collection_name].base_url
-    targetUrl = `${pageUrl}/${item.meta._id}#${encodeHashLink({
-      highlightId: item._id,
-    })}`
-  }
-
-  return targetUrl
-}
-
-const getKey = (i) => `search-anything-item-${i}`
-
-export const SearchResults = ({
-  query,
-  results,
-  searchContext,
-  onCompleteSearch,
-  children,
-}) => {
-  // const envContext = useEnvContext()
-
-  const items = useCombinedResultsActions({query, results})
-
-  // runs when a search result is selected by pressing enter
-  const applyTargetItem = async(item) => {
-    // user pressed enter with no results / nothing selected
-    if (!item) {
-      console.log("user pressed enter but there are no results")
-      return
-    }
-
-    if (item.type === "action") {
-      if (item.hashState) {
-        serializeHashState(item.hashState)
-      } else {
-        console.error("unknown action", item)
-        throw new Error("unknown action")
-      }
-    } else {
-      const targetUrl = resolveTargetUrl(encodeHashLink, item)
-
-      const res = await save_search({
-        group_id: envContext.groupId,
-        data: {
-          query,
-          search_context: _pick(searchContext, ["id", "col"]),
-          result_url: targetUrl,
-        },
-      })
-      assert(res.status === "ok")
-
-      page(targetUrl)
-    }
-  }
-
-  const onSelectItem = (selectedIndex) => {
-    onCompleteSearch()
-    // go to selected item
-    const targetItem = items[selectedIndex]
-    applyTargetItem(targetItem)
-  }
-
-  const {activeItemIndex} = useActiveListItemIndex({items, onSelectItem})
-
-  useScrollSelectorIntoView(`#${getKey(activeItemIndex)}`)
-
-  return (
-    <div>
-      <div className="list-group list-group-flush">
-        {items.map((item, i) => {
-          const key = getKey(i)
-          // Render action
-          if (item.type === "action") {
-            let highlighted = fuzzysort.highlight(fuzzysort.single(query, item.key), "<b>", "</b>")
-
-            if (!highlighted) highlighted = item.key
-
-            const onClick = () => {
-              onSelectItem(i)
-            }
-
-            return (
-              <a
-                id={key}
-                key={key}
-                className={cx(
-                  "list-group-item list-group-item-action d-flex justify-content-between align-items-start",
-                  {active: activeItemIndex === i},
-                )}
-                style={{cursor: "pointer"}}
-                onClick={onClick}
-              >
-                <div className="ms-2 me-auto">
-                  <img
-                    style={{width: 20, height: 20, display: "inline"}}
-                    className="d-inline-flex me-2"
-                    src={`/static/icons/${item.icon}.svg`}
-                  />
-                  <div
-                    className="item-highlight"
-                    style={{display: "inline"}}
-                    dangerouslySetInnerHTML={{__html: highlighted}}
-                  />
-                </div>
-                <span className="badge text-bg-light rounded-pill">
-                  {item.fuzzy_score?.toFixed(2)}
-                </span>
-              </a>
-            )
-          }
-          // Render search result
-          else {
-            const onClick = () => {
-              onCompleteSearch()
-            }
-
-            const targetUrl = resolveTargetUrl(encodeHashLink, item)
-            // TODO: when message, displaySub should be the name of the recipient / sender
-            const displaySub = item._source.type === "message" ? "message" : item.meta.name
-
-            return (
-              <a
-                id={key}
-                key={key}
-                className={cx(
-                  "list-group-item list-group-item-action d-flex justify-content-between align-items-start",
-                  {active: activeItemIndex === i},
-                )}
-                href={targetUrl}
-                onClick={onClick}
-              >
-                <div className="ms-2 me-auto">
-                  {Object.keys(item.highlight).map((highlightKey, j) => (
-                    <div
-                      key={`highlight-${j}`}
-                      className="item-highlight"
-                      dangerouslySetInnerHTML={{__html: item.highlight[highlightKey][0]}}
-                    />
-                  ))}
-                  <small className="fst-italic">{displaySub}</small>
-                </div>
-                <span className="badge text-bg-light rounded-pill">
-                  {item.fuzzy_score?.toFixed(2)}
-                </span>
-                <span className="badge bg-primary rounded-pill">{item._score.toFixed(2)}</span>
-              </a>
-            )
-          }
-        })}
-
-        {/* children can be components like search history, etc */}
-        {children}
-      </div>
-    </div>
-  )
-}

package/ui/Search/SearchResults/useCombinedResultsActions.js

@@ -1,59 +0,0 @@
-/* @flow */
-import {useMemo} from "react"
-import useLocation from "react-use/lib/useLocation"
-import _isNil from "lodash/isNil"
-import fuzzysort from "fuzzysort"
-
-import getActions from "./getActions"
-
-// uses fuzzysort to match and sort results https://github.com/farzher/fuzzysort
-const getResultsWithActions = (query, results, actions) => {
-  // we "fuzzy match sort" all actions and results (with both our fuzzy + elastic key)
-  const rawItems = [...actions, ...results].map((item) => {
-    let fuzzy_score
-
-    // action item
-    if (item.key) {
-      fuzzy_score = fuzzysort.single(query, item.key)?.score
-    }
-    // search result
-    else {
-      // for each highlight compute score, take the highest one
-      const scores = Object
-        // TODO: why do some elastic search results not have a highlight?
-        .keys(item?.highlight || {})
-        .map((key) => fuzzysort.single(query, item.highlight[key][0])?.score)
-        .filter((s) => !_isNil(s))
-        .sort((a, b) => b - a)
-
-      fuzzy_score = scores[0]
-    }
-
-    return {
-      ...item,
-      fuzzy_score,
-    }
-  })
-
-  const sortedItems = rawItems
-    .filter((item) => !_isNil(item.fuzzy_score))
-    .sort((a, b) => b.fuzzy_score - a.fuzzy_score)
-
-  return sortedItems
-}
-
-const useCombinedResultsActions = ({query, results}) => {
-  const location = useLocation()
-
-  const items = useMemo(() => {
-    const actions = getActions(location.pathname)
-
-    const newItems = getResultsWithActions(query, results, actions)
-
-    return newItems
-  }, [results, location.pathname])
-
-  return items
-}
-
-export default useCombinedResultsActions