@rpcbase/client 0.214.0 → 0.215.0

package/access-control/ACLForm/components/GrantField/OpSelector.tsx

@@ -0,0 +1,129 @@
+import _get from "lodash/get"
+import {useState} from "react"
+import ToggleButton from "react-bootstrap/ToggleButton"
+import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup"
+
+import {useFormContext} from "react-hook-form"
+
+import {GRANTS_FIELD} from "../constants"
+import {CheckMark} from "./icons/CheckMark"
+
+
+const OPS = {
+  create: "Create",
+  read: "Read",
+  update: "Update",
+  delete: "Delete",
+}
+
+export const OpSelector = ({field, index, update}) => {
+  const PREFIX = `select-op-field-${field.id}`
+
+  const {
+    formState: {errors},
+    setValue,
+  } = useFormContext()
+
+  const fieldKey = `${GRANTS_FIELD}.${index}.ops`
+  const err = _get(errors, fieldKey, null)
+
+  const [ops, setOps] = useState(field.ops || {})
+
+  const updateOps = (nextOps) => {
+    setOps(nextOps)
+    setValue(fieldKey, nextOps, {
+      shouldTouch: true,
+      shouldValidate: !!err, // revalidate if there is an error
+    })
+  }
+
+  const handleChange = (selected) => {
+    const nextOps = {...ops}
+    // remove unselected keys from ops
+    Object.keys(nextOps).forEach((k) => !selected.includes[k] && delete nextOps[k])
+    // add new selected keys
+    selected.forEach((s) => (nextOps[s] = "own"))
+    updateOps(nextOps)
+  }
+
+  const getCRUDOps = () => Object.keys(ops)
+
+  const getOpScope = (k) => ops[k]
+
+  const updateOpScope = (k, selected) => {
+    const nextOps = {...ops}
+    nextOps[k] = selected
+    updateOps(nextOps)
+  }
+
+  const getCaption = () => {
+    if (err) {
+      return <p className="text-danger pt-1">{err.message}</p>
+    } else {
+      // iterate on OPS first, not ops to preserve semantic order
+      const targetOps = Object.keys(OPS).filter((k) => Object.keys(ops).includes(k))
+      let captionStr
+      if (targetOps.length === 0) {
+        captionStr = "Select operations above"
+      } else captionStr = `Allow ${targetOps.map((k) => `${OPS[k]}:${ops[k]}`).join(", ")}`
+      return <p className="text-secondary mt-1">{captionStr}</p>
+    }
+  }
+
+  return (
+    <div className="op-selector">
+      <div className="mb-1 fw-bold">Grant Operation:</div>
+      <ToggleButtonGroup
+        type="checkbox"
+        // TODO: support vertical layout when the modal isn't wide enough
+        // vertical
+        className={cx("w-100", {"border": !!err, "border-danger": !!err})}
+        value={getCRUDOps()}
+        onChange={handleChange}
+      >
+        {Object.keys(OPS).map((k) => (
+          <ToggleButton
+            variant="light"
+            key={`${PREFIX}-${index}-${k}`}
+            id={`${PREFIX}-${index}-${k}`}
+            value={k}
+            className="toggle-button-op py-1"
+          >
+            <>
+              <div className="">
+                <CheckMark hide={!getCRUDOps().includes(k)} />
+                {OPS[k]}
+              </div>
+              <ToggleButtonGroup
+                className="pt-1"
+                type="radio"
+                name={`${k}_op_scope`}
+                value={getOpScope(k)}
+                onChange={(selected) => updateOpScope(k, selected)}
+              >
+                <ToggleButton
+                  variant="primary"
+                  id={`${PREFIX}-${index}-${k}-own`}
+                  value={"own"}
+                  className="toggle-button-op py-1 text-monospace"
+                >
+                  own
+                </ToggleButton>
+                <ToggleButton
+                  variant="primary"
+                  id={`${PREFIX}-${index}-${k}-any`}
+                  value={"any"}
+                  className="toggle-button-op py-1 text-monospace"
+                >
+                  any
+                </ToggleButton>
+              </ToggleButtonGroup>
+            </>
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+
+      {getCaption()}
+    </div>
+  )
+}

package/access-control/ACLForm/components/GrantField/ResourceSelector.tsx

@@ -0,0 +1,86 @@
+/* @flow */
+import _get from "lodash/get"
+import {useState, useEffect} from "react"
+
+import {useFormContext} from "react-hook-form"
+import {Typeahead} from "react-bootstrap-typeahead"
+import Form from "react-bootstrap/Form"
+
+import {GRANTS_FIELD} from "../constants"
+
+
+export const ResourceSelector = ({field, index, update}) => {
+  const {
+    formState: {errors},
+    setValue,
+  } = useFormContext()
+
+  const fieldKey = `${GRANTS_FIELD}.${index}.resources`
+
+  const err = _get(errors, fieldKey, null)
+
+  // const [selectedAll, setSelectedAll] = useState(field.resources?.[0] === "*")
+  const [selectedAll, setSelectedAll] = useState(false)
+
+  const [users, setUsers] = useState([])
+  const [selected, setSelected] = useState([])
+
+  useEffect(() => {
+    setUsers([{name: "tmp res 1"}, {name: "tmp res 2"}])
+  }, [setUsers])
+
+  const updateValue = (val) => {
+    setValue(fieldKey, val, {
+      shouldTouch: true,
+      shouldValidate: !!err, // revalidate if there is an error
+    })
+  }
+
+  const onChangeSelectedAll = (e) => {
+    const {checked} = e.target
+    console.log("Ochahge", checked)
+    setSelectedAll(checked)
+    updateValue(checked ? ["*"] : null)
+  }
+
+  const onSelectResource = (sel) => {
+    setSelected(sel)
+    updateValue(sel)
+  }
+
+  return (
+    <div className="mb-3">
+      <div className="h6 fw-bold">On Resources:</div>
+      <div>
+        All and any new resources in this group:
+        <Form.Check
+          className="d-block w-100"
+          type="switch"
+          id={`field-${field.id}-${index}-res-all-switch`}
+          label={selectedAll ? "Grant applies to every resource in this group" : "Not applied"}
+          // TODO: is this a bug ? why does it need both value and checked
+          // this was fixed by using field.id and not index I think
+          checked={selectedAll}
+          value={selectedAll}
+          onChange={onChangeSelectedAll}
+        />
+        <div className={cx({"text-secondary": selectedAll})}>
+          <i>OR:</i> Select Resources:
+        </div>
+        <Typeahead
+          id={`field-${field.id}-${index}-input-role-resources`}
+          isInvalid={!!err}
+          labelKey="name"
+          multiple
+          highlightOnlyResult
+          disabled={selectedAll}
+          onChange={onSelectResource}
+          options={users}
+          placeholder="Select items..."
+          selected={selected}
+        />
+        {!!err && <p className="text-danger">{err.message}</p>}
+      </div>
+    </div>
+  )
+}

package/access-control/ACLForm/components/GrantField/UsersSelector.tsx

@@ -0,0 +1,96 @@
+/* @flow */
+import assert from "assert"
+import _get from "lodash/get"
+import {useState, useEffect} from "react"
+
+import {useFormContext} from "react-hook-form"
+import {Typeahead} from "react-bootstrap-typeahead"
+import Form from "react-bootstrap/Form"
+
+import {GRANTS_FIELD} from "../constants"
+
+// import list_users from "rpc!server/users/list_users"
+
+// TODO: user selector render avatar next to name
+export const UsersSelector = ({field, index}) => {
+  const {
+    formState: {errors},
+    setValue,
+  } = useFormContext()
+
+  const fieldKey = `${GRANTS_FIELD}.${index}.users`
+
+  const err = _get(errors, fieldKey, null)
+
+  const [selectedAll, setSelectedAll] = useState(field.resources?.[0] === "*")
+
+  const [users, setUsers] = useState([])
+  const [selected, setSelected] = useState([])
+
+  useEffect(() => {
+    const load = async() => {
+      console.log("LOAD LIST USERS NOT IMPLEMENTED")
+      // const res = await list_users()
+
+      // assert(res.status === "ok")
+      // // map user props to get a label, if no name, fallback to email
+      // const result = res.users.map((user) => {
+      //   const name = `${user.first_name} ${user.last_name}`.trim()
+      //   user.label = name || user.email
+      //   return user
+      // })
+      // setUsers(result)
+    }
+    load()
+  }, [setUsers])
+
+  const updateValue = (val) => {
+    setValue(fieldKey, val, {
+      shouldTouch: true,
+      shouldValidate: !!err, // revalidate if there is an error
+    })
+  }
+
+  const onChangeSelectedAll = (e) => {
+    const {checked} = e.target
+    setSelectedAll(checked)
+    updateValue(checked ? ["*"] : null)
+  }
+
+  const onSelectUsers = (sel) => {
+    setSelected(sel)
+    updateValue(sel.map((s) => s._id))
+  }
+
+  return (
+    <div className="mb-2">
+      <div className="h6 fw-bold">To Users:</div>
+      <div>
+        All and any new users in this group:
+        <Form.Check
+          className="d-block w-100"
+          type="switch"
+          id={`field-${field.id}-${index}-users-all-switch`}
+          label={selectedAll ? "Grant applies to every user in this group" : "Not applied"}
+          checked={selectedAll}
+          value={selectedAll}
+          onChange={onChangeSelectedAll}
+        />
+        <div className={cx({"text-secondary": selectedAll})}>OR: Select Users:</div>
+        <Typeahead
+          id={`field-${field.id}-${index}-input-role-users`}
+          isInvalid={!!err}
+          labelKey={(option) => `${option.label} ${option.email}`}
+          multiple
+          highlightOnlyResult
+          disabled={selectedAll}
+          onChange={onSelectUsers}
+          options={users}
+          placeholder="Select users..."
+          selected={selected}
+        />
+        {!!err && <p className="text-danger">{err.message}</p>}
+      </div>
+    </div>
+  )
+}

package/access-control/ACLForm/components/GrantField/grant-field.scss

@@ -0,0 +1,26 @@
+@import "helpers";
+
+.grant-field-card {
+  &:not(:first-of-type) {
+    // TODO: what is the way to reuse bootstrap classes here??
+    margin-top: $spacer;
+  }
+
+  .grant-field-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/components/GrantField/icons/CheckMark.tsx

@@ -0,0 +1,16 @@
+export const CheckMark = ({hide = true}) => (
+  <svg
+    style={{
+      marginLeft: -18,
+      marginTop: -4,
+      marginRight: 3,
+      visibility: hide ? "hidden" : undefined,
+    }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 64 64"
+    width={18}
+    height={18}
+  >
+    <path fill="#0d6efd" d="M27 55L6 33 9 29 26 41 55 12 59 16z" />
+  </svg>
+)

package/access-control/ACLForm/components/GrantField/icons/CollapseArrow.tsx

@@ -0,0 +1,14 @@
+export const CollapseArrow = () => (
+  <svg
+    style={{marginRight: 4}}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 30 30"
+    width={21}
+    height={21}
+  >
+    <path
+      fill="currentColor"
+      d="M 14.984375 9 A 1.0001 1.0001 0 0 0 14.292969 9.2929688 L 4.2929688 19.292969 A 1.0001 1.0001 0 1 0 5.7070312 20.707031 L 15 11.414062 L 24.292969 20.707031 A 1.0001 1.0001 0 1 0 25.707031 19.292969 L 15.707031 9.2929688 A 1.0001 1.0001 0 0 0 14.984375 9 z"
+    />
+  </svg>
+)

package/access-control/ACLForm/components/GrantField/icons/ExpandArrow.tsx

@@ -0,0 +1,14 @@
+export const ExpandArrow = () => (
+  <svg
+    style={{marginRight: 4}}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 30 30"
+    width={21}
+    height={21}
+  >
+    <path
+      fill="currentColor"
+      d="M 24.990234 8.9863281 A 1.0001 1.0001 0 0 0 24.292969 9.2929688 L 15 18.585938 L 5.7070312 9.2929688 A 1.0001 1.0001 0 0 0 4.9902344 8.9902344 A 1.0001 1.0001 0 0 0 4.2929688 10.707031 L 14.292969 20.707031 A 1.0001 1.0001 0 0 0 15.707031 20.707031 L 25.707031 10.707031 A 1.0001 1.0001 0 0 0 24.990234 8.9863281 z"
+    />
+  </svg>
+)

package/access-control/ACLForm/components/GrantField/index.tsx

@@ -0,0 +1,91 @@
+import {useState} from "react"
+import Collapse from "react-bootstrap/Collapse"
+
+import {useFormContext} from "react-hook-form"
+
+import {CloseIcon} from "../../../../ui/icons"
+import {View} from "../../../../ui/View"
+
+import {OpSelector} from "./OpSelector"
+import {ResourceSelector} from "./ResourceSelector"
+import {UsersSelector} from "./UsersSelector"
+
+import {ExpandArrow} from "./icons/ExpandArrow"
+import {CollapseArrow} from "./icons/CollapseArrow"
+
+import "./grant-field.scss"
+
+
+export const GrantField = ({remove, field, index}) => {
+  const {getValues} = useFormContext()
+
+  const {_isEditing} = getValues()
+
+  const shouldInitiallyBeOpen = () => {
+    if (_isEditing && field.ops && field.resources && field.users) {
+      return false
+    }
+    return true
+  }
+
+  const [isCollapseOpen, setIsCollapseOpen] = useState(shouldInitiallyBeOpen())
+  // used to remove only after transition is complete
+  const [scheduledRemove, setScheduledRemove] = useState(false)
+
+  const removeField = () => {
+    remove(index)
+  }
+
+  const onExited = () => {
+    if (scheduledRemove) {
+      removeField()
+    }
+  }
+
+  const onClickRemove = () => {
+    if (isCollapseOpen) {
+      setScheduledRemove(true)
+      setIsCollapseOpen(false)
+    } else {
+      removeField()
+    }
+  }
+
+  const onClickCollapse = () => setIsCollapseOpen(!isCollapseOpen)
+
+  return (
+    <div className="card grant-field-card p-2">
+      {/* Remove Button */}
+      <View
+        className="grant-field-remove-button mt-3 me-3"
+        onClick={onClickRemove}
+        tooltip="Remove Grant"
+      >
+        <CloseIcon size={14} />
+      </View>
+
+      <div className="">
+        Allow create, read update delete on hardcoded
+        <br />
+        grant summary on users Test User, and Another One
+      </div>
+
+      <Collapse appear in={isCollapseOpen} onExited={onExited}>
+        <div>
+          <OpSelector field={field} index={index} />
+          <ResourceSelector field={field} index={index} />
+          <UsersSelector field={field} index={index} />
+        </div>
+      </Collapse>
+
+      <button
+        type="button"
+        className="btn btn-link btn-collapse-expand d-flex flex-row align-items-center ps-0"
+        onClick={onClickCollapse}
+      >
+        {isCollapseOpen ? <CollapseArrow /> : <ExpandArrow />}
+        {isCollapseOpen ? "Collapse" : "Expand"}
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,48 @@
+import {useFieldArray, useFormContext} from "react-hook-form"
+
+import {GrantField} from "./GrantField"
+import {GRANTS_FIELD} from "./constants"
+
+
+export const GrantsList = () => {
+  // TODO: integrate sortable-hoc list
+  // const {fields, append, prepend, remove, swap, update, move, insert} = useFieldArray({
+  const {
+    formState: {errors},
+  } = useFormContext()
+  const {fields, append, remove, update} = useFieldArray({name: GRANTS_FIELD})
+
+  return (
+    <>
+      <div className="mt-2">
+        <label className="h6">Grants</label>
+        {fields.map((field, index) => (
+          <GrantField
+            // IMPORTANT: key must be field id to avoid rerenders
+            key={field.id}
+            index={index}
+            field={field}
+            remove={remove}
+            update={update}
+          />
+        ))}
+        {fields.length === 0 && (
+          <div className="text-secondary">This role doesn't have any Grants</div>
+        )}
+        {errors.grants?.message && <div className="text-danger">{errors.grants.message}</div>}
+      </div>
+
+      <button
+        type="button"
+        className="btn btn-light mt-2 px-3"
+        onClick={() => {
+          append({})
+          // trigger()
+        }}
+        style={{width: "fit-content"}}
+      >
+        Add {fields.length > 0 && "another"} Grant
+      </button>
+    </>
+  )
+}

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

@@ -0,0 +1,134 @@
+/* eslint no-unused-vars: "warn" */
+import assert from "assert"
+import {useState} from "react"
+import {useForm, FormProvider} from "react-hook-form"
+import Collapse from "react-bootstrap/Collapse"
+
+import {SubmitButton} from "@rpcbase/client/form"
+
+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 "./role-form.scss"
+
+
+export const RoleForm = ({onDone}) => {
+  const [isLoading, setIsLoading] = useState(false)
+
+  // react hook form submit on edit
+  // https://stackoverflow.com/a/70119332
+  const form = useForm({
+    defaultValues: {
+      name: "",
+      description: "",
+      grants: [{}],
+    },
+    resolver,
+    reValidateMode: "onChange",
+  })
+
+  const {
+    register,
+    handleSubmit,
+    // watch,
+    getValues,
+    formState: {errors},
+  } = form
+
+  const onSubmit = async(data) => {
+    // console.log("submit", group_id, data)
+    setIsLoading(true)
+    // const res = await create_role({...data})
+    // assert(res.status === "ok")
+    // TODO: error handling here
+    setIsLoading(false)
+    onDone()
+  }
+
+  // TODO: ask for user confirmation is form is touched
+  // TODO: should we save touched fields in url hashState?
+  const onClickCancel = () => {
+    onDone()
+  }
+
+  const onClickRemove = () => {
+    onDone()
+  }
+
+  // useEffect(() => {
+  // console.log("le vals", getValues())
+  // }, [formState])
+
+  return (
+    <FormProvider {...form}>
+      <div className="mx-3" style={{position: "relative"}}>
+        <Collapse appear in={true}>
+          <form className="mt-2 mb-1 card" onSubmit={handleSubmit(onSubmit)}>
+            <div className="p-2">
+              <div className="h6 fw-bold">Create New Role:</div>
+              <div className="mt-2">
+                <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", {required: true})}
+                  placeholder="Role Name"
+                />
+                {errors.name && <div className="text-danger">{errors.name.message}</div>}
+              </div>
+
+              <div className="mt-2">
+                <label htmlFor="input-view-name" className="h6">
+                  Description
+                </label>
+                <input
+                  type="text"
+                  className={cx("form-control", {"is-invalid": !!errors.description})}
+                  id="input-role-description"
+                  {...register("description", {required: true})}
+                  placeholder="Description"
+                />
+                {errors.description && (
+                  <div className="text-danger">{errors.description.message}</div>
+                )}
+              </div>
+
+              {/* Grants list */}
+              <GrantsList />
+            </div>
+
+            <div className="card-footer">
+              <SubmitButton className="me-2" isLoading={isLoading}>
+                {isLoading ? "Saving Role..." : "Save Role"}
+              </SubmitButton>
+
+              <button
+                type="button"
+                className="btn btn-link link-secondary ps-0"
+                onClick={onClickCancel}
+                disabled={isLoading}
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </Collapse>
+        <View
+          className="role-remove-button mt-3 me-3"
+          onClick={onClickRemove}
+          tooltip="Remove Role"
+        >
+          <CloseIcon size={14} />
+        </View>
+      </div>
+    </FormProvider>
+  )
+}