@rpcbase/client 0.214.0 → 0.216.0

package/access-control/ACLForm/components/RoleView.tsx

@@ -0,0 +1,115 @@
+import assert from "assert"
+import {useForm, FormProvider} from "react-hook-form"
+
+import FloatingLabel from "react-bootstrap/FloatingLabel"
+import Form from "react-bootstrap/Form"
+
+// import {useEnvContext} from "helpers/EnvContext"
+import {CloseIcon} from "../../../ui/icons/Close"
+import {View} from "../../../ui/View"
+
+import {resolver} from "./resolver"
+import {GrantsList} from "./GrantsList"
+
+// import create_role from "rpc!server/access-control/create_role"
+// import delete_role from "rpc!server/access-control/delete_role"
+
+import "./role-form.scss"
+
+
+export const RoleView = ({role}) => {
+  // const envContext = useEnvContext()
+
+  // const [isLoading, setIsLoading] = useState(false)
+  // TODO:
+  // react hook form submit on edit
+  // https://stackoverflow.com/a/70119332
+  const form = useForm({
+    defaultValues: {
+      ...role,
+      _isEditing: true,
+    },
+    resolver,
+    reValidateMode: "onChange",
+  })
+
+  const {
+    register,
+    handleSubmit,
+    // watch,
+    // getValues,
+    formState: {errors},
+  } = form
+
+  const onSubmit = async(data) => {
+    const {groupId} = envContext
+    console.log("roleview submit", groupId, data)
+    // setIsLoading(true)
+    // const res = await create_role({group_id: groupId, ...data})
+    // assert(res.status === "ok")
+    // // TODO: error handling here
+    // setIsLoading(false)
+    // onDone()
+  }
+
+  const onClickRemove = async() => {
+    // const res = await delete_role({role_id: role._id})
+    // assert(res.status === "ok")
+    console.log("NYI DELETE ROLE", role._id)
+  }
+
+  // useEffect(() => {
+  // console.log("le vals", getValues())
+  // }, [formState])
+
+  // TODO: WARNING: DANGER: input should be mapped to field id + index to avoid duplicates in form
+
+  return (
+    <FormProvider {...form}>
+      <div className="w-100" style={{position: "relative"}}>
+        <form className="mb-1 me-4 card" onSubmit={handleSubmit(onSubmit)}>
+          <div className="p-2">
+            <div className="d-flex flex-row w-100 mt-1">
+              <FloatingLabel controlId="input-name" label="Name" className="me-2">
+                <Form.Control type="text" {...register("name")} />
+                {errors.name && <div className="text-danger">{errors.name.message}</div>}
+              </FloatingLabel>
+
+              <FloatingLabel
+                controlId="input-description"
+                label="Description"
+                className="flex-grow-1"
+              >
+                <Form.Control type="text" {...register("description")} />
+                {errors.description && (
+                  <div className="text-danger">{errors.description.message}</div>
+                )}
+              </FloatingLabel>
+            </div>
+
+            {/* Grants list */}
+            <GrantsList />
+          </div>
+        </form>
+        <View
+          className="role-remove-button mt-1 me-1"
+          onClick={onClickRemove}
+          tooltip="Remove Role"
+        >
+          <CloseIcon size={14} />
+        </View>
+      </div>
+    </FormProvider>
+  )
+}
+
+// <label htmlFor="input-role-name" className="h6">
+//   Name
+// </label>
+// <input
+//   type="text"
+//   className={cx("form-control", {"is-invalid": !!errors.name})}
+//   id="input-role-name"
+//   {...register("name")}
+//   placeholder="Role Name"
+// />

package/access-control/ACLForm/components/RolesList.tsx

@@ -0,0 +1,79 @@
+import {useState} from "react"
+// import {arrayMoveImmutable} from "array-move"
+
+import {DragHandle, SortableContainer, SortableElement} from "../../../ui/sortable-hoc"
+import {useQuery} from "../../../rts"
+
+import {RoleForm} from "./RoleForm"
+import {RoleView} from "./RoleView"
+
+
+const SortableItem = SortableElement(({value, index, active, onClick}) => (
+  <div id={`${value._id}-role-list-item-${index}`} className="d-block px-1 py-2">
+    <div className={cx(["d-flex", "align-items-start", {active}])} onClick={onClick}>
+      <DragHandle variant="dots" className="mt-1" />
+      <RoleView role={value} />
+    </div>
+  </div>
+))
+
+const SortableList = SortableContainer(({ref, items, onClickHandler, activeTab, className = ""}) => {
+  return (
+    <div ref={ref} className={cx(className)}>
+      {items.map((value, index) => (
+        <SortableItem
+          key={`item-${value._id}`}
+          index={index}
+          value={value}
+          active={`${index}` === activeTab}
+          onClick={onClickHandler(`${index}`)}
+        />
+      ))}
+    </div>
+  )
+})
+
+export const RolesList = () => {
+  // const [roles, setRoles] = useState([])
+  // const rolesQuery = useQuery("ACLRole", {})
+  const rolesQuery = {}
+
+  const [isAddingRole, setIsAddingRole] = useState(false)
+
+  const onClickAddRole = () => setIsAddingRole(true)
+
+  const onSortEnd = ({oldIndex, newIndex}) => {
+    // setItems(arrayMoveImmutable(items, oldIndex, newIndex))
+    console.log("update sort roles", oldIndex, newIndex)
+  }
+
+  const getOnClickHandler = (arg) => () => {
+    console.log("sortable on click handler", arg)
+  }
+
+  return (
+    <div className="d-block bg-white mb-2">
+      {isAddingRole && <RoleForm onDone={() => setIsAddingRole(false)} />}
+
+      {!isAddingRole && (
+        <button className="btn btn-link ms-1" onClick={onClickAddRole}>
+          + Add Role
+        </button>
+      )}
+
+      {rolesQuery.data && (
+        <SortableList
+          className="mt-3"
+          axis="y"
+          lockAxis={"y"}
+          // distance={2} // PUTAIN
+          items={rolesQuery.data}
+          onSortEnd={onSortEnd}
+          onClickHandler={getOnClickHandler}
+          transitionDuration={200}
+          useDragHandle
+        />
+      )}
+    </div>
+  )
+}

package/access-control/ACLForm/components/constants.tsx

@@ -0,0 +1 @@
+export const GRANTS_FIELD = "grants"

package/access-control/ACLForm/components/resolver.ts

@@ -0,0 +1,57 @@
+import _set from "lodash/set"
+
+import {GRANTS_FIELD} from "./constants"
+
+const validateGrants = (grants, errors) => {
+  grants.forEach((grant, index) => {
+    const fieldKey = `${GRANTS_FIELD}.${index}`
+
+    // Ops
+    const ops = grant.ops || {}
+    const hasOps = Object.keys(ops).length > 0
+    if (!hasOps) {
+      const opsErrKey = `${fieldKey}.ops`
+      _set(errors, opsErrKey, {type: "error", message: "You must select at least one Operation"})
+    }
+
+    // Resources
+    const resources = grant.resources || {}
+    const hasResources = Object.keys(resources).length > 0
+
+    if (!hasResources) {
+      const resErrKey = `${fieldKey}.resources`
+      _set(errors, resErrKey, {type: "error", message: "You must select at least one Resource"})
+    }
+
+    // Users
+    const users = grant.users || {}
+    const hasUsers = Object.keys(users).length > 0
+
+    if (!hasUsers) {
+      const usersErrKey = `${fieldKey}.users`
+      _set(errors, usersErrKey, {type: "error", message: "You must select at least one User"})
+    }
+  })
+}
+
+export const resolver = (values) => {
+  const errors = {}
+
+  if (!values.name) {
+    errors.name = {message: "Please enter a valid name"}
+  }
+
+  if (!values.description) {
+    errors.description = {message: "Please enter a valid description"}
+  }
+
+  validateGrants(values.grants, errors)
+  if (values.grants.length === 0) {
+    errors.grants = {message: "You must add at least one Grant"}
+  }
+
+  return {
+    values,
+    errors,
+  }
+}

package/access-control/ACLForm/components/role-form.scss

@@ -0,0 +1,19 @@
+@import "helpers";
+
+.role-remove-button {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  right: 0;
+  top: 0;
+  cursor: pointer;
+  color: $gray-500;
+
+  &:hover {
+    color: $gray-700;
+  }
+
+  &:active {
+    color: $gray-900;
+  }
+}

package/access-control/ACLForm/index.tsx

@@ -0,0 +1,48 @@
+import {useState} from "react"
+
+import {SelectPills} from "../../ui/SelectPills"
+
+import {RolesList} from "./components/RolesList"
+
+const VISIBILITY_ITEMS = [
+  {
+    name: "Private",
+    key: "private",
+    description: "Members cannot discover this group and have to be added manually",
+    icon: "/static/icons/acl/acl-visibility-private.svg",
+  },
+  {
+    name: "Public",
+    key: "public",
+    description: "Members of your organisation will be able to see this group",
+    icon: "/static/icons/acl/acl-visibility-public.svg",
+  },
+]
+
+export const ACLForm = () => {
+  const [activeVisibilityKey, setActiveVisibilityKey] = useState("private")
+
+  const onUpdateGroupVisibility = (k) => setActiveVisibilityKey(k)
+
+  return (
+    <div>
+      {/* Visibility */}
+      <div className="mx-3">
+        <label className="fw-bold mb-1">Group Visibility</label>
+        <SelectPills
+          direction="row"
+          size="sm"
+          items={VISIBILITY_ITEMS}
+          activeKey={activeVisibilityKey}
+          onChange={onUpdateGroupVisibility}
+        />
+      </div>
+
+      {/* Roles */}
+      <div>
+        <label className="fw-bold mb-1 ms-3">Roles</label>
+        <RolesList />
+      </div>
+    </div>
+  )
+}

package/access-control/ACLModal/acl-modal.scss

@@ -0,0 +1,7 @@
+@import "helpers";
+
+.group-acl-modal {
+  .modal-dialog {
+    min-width: 640px;
+  }
+}

package/access-control/ACLModal/index.tsx

@@ -0,0 +1,66 @@
+import {useState, useEffect} from "react"
+
+import {useHashState} from "../../hashState"
+import Modal from "../../ui/Modal"
+
+import {ACLForm} from "../ACLForm"
+
+import "./acl-modal.scss"
+
+
+export const ACLModal = ({}) => {
+  const {hashState, serializeHashState} = useHashState()
+
+  const [isShown, setIsShown] = useState(false)
+
+  // useEffect(() => {
+    // console.log("GOURP", envContext)
+  // }, [envContext])
+
+  useEffect(() => {
+    if (hashState.showGroupAccessControlModal) {
+      setIsShown(true)
+    } else {
+      setIsShown(false)
+    }
+  }, [hashState, setIsShown])
+
+  const onHide = () => {
+    serializeHashState({
+      showGroupAccessControlModal: null,
+    })
+  }
+
+  if (!isShown) return null
+
+  return (
+    <Modal className="group-acl-modal" onHide={onHide} size="large">
+      <Modal.Header className="close-top" closeButton>
+        <img
+          width={26}
+          height={26}
+          style={{marginTop: 0}}
+          className="me-2 align-self-start"
+          src={`/static/icons/acl-shield.svg`}
+        />
+        <div className="">
+          <div>
+            Permissions for <kbd>wow group name</kbd>
+          </div>
+          <small className="text-secondary fw-normal">
+            Permissions and Grants that control who can see what in your Group
+          </small>
+        </div>
+      </Modal.Header>
+      <Modal.Body className="px-0">
+        <ACLForm />
+      </Modal.Body>
+      <Modal.Footer className="justify-content-start">
+        Learn more about Access Control and Permissions in &nbsp;
+        <a target="_blank" rel="noopener noreferrer" href={`/docs/access-control`}>
+          /docs/access-control
+        </a>
+      </Modal.Footer>
+    </Modal>
+  )
+}

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

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