@rpcbase/client 0.215.0 → 0.217.0

package/access-control/PolicyEditor/TargetSelector/QueryBuilder.tsx

@@ -0,0 +1,48 @@
+import {
+  QueryBuilderBootstrap,
+  bootstrapControlClassnames,
+  bootstrapControlElements,
+} from "@react-querybuilder/bootstrap"
+import {QueryBuilder as ReactQueryBuilder} from "react-querybuilder"
+import {QueryBuilderDnD as ReactQueryBuilderDnD} from "@react-querybuilder/dnd"
+import * as ReactDnD from "react-dnd"
+import * as ReactDnDHtml5Backend from "react-dnd-html5-backend"
+
+// import FieldSelector from "./FieldSelector"
+// import OperatorSelector from "./OperatorSelector"
+// import ValueEditor from "./ValueEditor"
+
+import "./query-builder.scss"
+
+
+const controlClassnames = {...bootstrapControlClassnames}
+controlClassnames.queryBuilder += " queryBuilder-branches"
+
+const QueryBuilder = ({controlElements = {}, ...props}) => {
+  return (
+    <ReactQueryBuilderDnD dnd={{...ReactDnD, ...ReactDnDHtml5Backend}}>
+      <QueryBuilderBootstrap>
+        <ReactQueryBuilder
+          addRuleToNewGroups
+          // TODO: why is DnD not working??
+          // https://react-querybuilder.js.org/docs/components/querybuilder#enabledraganddrop
+          enableDragAndDrop
+          showCombinatorsBetweenRules={false}
+          showNotToggle
+          showCloneButtons
+          controlClassnames={controlClassnames}
+          controlElements={{
+            ...bootstrapControlElements,
+            ...controlElements,
+            // fieldSelector: FieldSelector,
+            // operatorSelector: OperatorSelector,
+            // valueEditor: ValueEditor,
+          }}
+          {...props}
+        />
+      </QueryBuilderBootstrap>
+    </ReactQueryBuilderDnD>
+  )
+}
+
+export default QueryBuilder

package/access-control/PolicyEditor/TargetSelector/index.tsx

@@ -0,0 +1,5 @@
+
+
+export const TargetSelector = () => {
+
+}

package/access-control/PolicyEditor/TargetSelector/query-builder.scss

@@ -0,0 +1,9 @@
+@import "helpers";
+
+.queryBuilder {
+  .dropdown-item.active {
+    .text-secondary {
+      color: $gray-200 !important;
+    }
+  }
+}

package/access-control/PolicyEditor/index.tsx

@@ -0,0 +1,70 @@
+import {useState} from "react"
+
+
+const TARGET_TYPES = [
+  {
+    name: "Collection:",
+    key: "collection",
+    description: "Applies to all documents within the collection.",
+  },
+  {
+    name: "Document:",
+    key: "document",
+    description: "Applies only to certain specific documents.",
+  },
+]
+
+export const PolicyEditor = () => {
+  const [targetType, setTargetType] = useState("collection")
+
+  const onChangeTargetType = (event) => {
+    setTargetType(event.target.value)
+  }
+
+  return (
+    <div>
+      <h6>Policy Editor</h6>
+      <br />
+      <div className="d-flex flex-row">
+        <div className="me-2">
+          <h6>Target Type:</h6>
+          <div style={{maxWidth: 300}}>
+            {TARGET_TYPES.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> {type.description}
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h6>Targets:</h6>
+          <div>
+            <input type="text" />
+          </div>
+        </div>
+      </div>
+      grant / deny
+      <br />
+      Scope: document, field
+      <br />
+      operation: create read write delete
+      <br />
+      to attributes / conditions add support for expiry date
+    </div>
+  )
+}

package/access-control/index.ts

@@ -1,2 +1,3 @@
 export * from "./ACLModal"
 export * from "./ACLForm"
+export * from "./PolicyEditor"

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.215.0",
+  "version": "0.217.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,91 @@
+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 = () => {
+            console.log("CLICK item", item)
+            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/SelectPills/index.tsx

@@ -1,5 +1,6 @@
 import "./select-pills.scss"
 
+
 type Props = {
   direction?: "row" | "col";
   size?: "md" | "sm";
@@ -16,11 +17,11 @@ export const SelectPills= ({
   activeKey,
 }: Props) => {
   const handleSelectType = (type: string) => () => {
-    onChange(type);
-  };
+    onChange(type)
+  }
 
   const renderRow = () => {
-    const iconSize = size === "sm" ? "24px" : "32px";
+    const iconSize = size === "sm" ? "24px" : "32px"
 
     return (
       <div className={`select-pills mb-3 card-group direction-row`}>
@@ -48,11 +49,11 @@ export const SelectPills= ({
           </div>
         ))}
       </div>
-    );
-  };
+    )
+  }
 
   const renderCol = () => {
-    const iconSize = size === "sm" ? "24px" : "32px";
+    const iconSize = size === "sm" ? "24px" : "32px"
 
     return (
       <div className="select-pills">
@@ -64,11 +65,14 @@ export const SelectPills= ({
             onClick={handleSelectType(item.key)}
           >
             <div className="card-body d-flex flex-row px-2 py-3">
-              <img
-                className="d-flex align-self-center me-2"
-                style={{ width: iconSize, height: iconSize }}
-                src={item.icon}
-              />
+              {item.icon && (
+                <img
+                  className="d-flex align-self-center me-2"
+                  style={{width: iconSize, height: iconSize}}
+                  src={item.icon}
+                />
+              )}
+
               {size === "md" && (
                 <div className="flex-column">
                   <h6 className="card-title mb-1 fw-bold">{item.name}</h6>
@@ -77,7 +81,7 @@ export const SelectPills= ({
               )}
               {size === "sm" && (
                 <div className="">
-                  <h6 className="card-title my-0 d-inline-block me-2 fw-bold">{item.name}</h6>
+                  <h6 className="card-title my-0 d-inline-block me-1 fw-bold">{item.name}</h6>
                   <span className="card-text">{item.description}</span>
                 </div>
               )}
@@ -85,8 +89,8 @@ export const SelectPills= ({
           </div>
         ))}
       </div>
-    );
-  };
+    )
+  }
 
-  return direction === "row" ? renderRow() : renderCol();
-};
+  return direction === "row" ? renderRow() : renderCol()
+}

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/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