@rpcbase/client 0.227.0 → 0.231.0

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

@@ -1,86 +0,0 @@
-/* @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

@@ -1,96 +0,0 @@
-/* @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

@@ -1,26 +0,0 @@
-@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

@@ -1,16 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,134 +0,0 @@
-/* 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>
-  )
-}

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

@@ -1,115 +0,0 @@
-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"
-// />