@rpcbase/client 0.217.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/package.json

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

package/ui/Search/SearchResults/index.tsx

@@ -48,7 +48,6 @@ export const SearchResults = ({
           const key = getItemId(index)
 
           const onClick = () => {
-            console.log("CLICK item", item)
             onSelectItem(index)
           }
 

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);